/* One theme, light. The dark variant is off on purpose: the page must be light
   regardless of the system settings, so there is no prefers-color-scheme here. */
:root {
  color-scheme: light;

  --bg: #f4f8fc;
  --bg-grad-1: #eaf2fa;
  --bg-grad-2: #ffffff;
  --bg-soft: #ffffff;
  --bg-card: #ffffff;
  --bg-card-2: #fbfdff;
  --stripe: rgba(31, 86, 148, .028);
  --line: #dbe4ef;
  --line-soft: #ecf1f7;
  --text: #1b2532;
  --text-dim: #64748b;
  --accent: #1f6fd0;
  --accent-2: #4aa3e6;
  --accent-soft: rgba(31, 111, 208, .09);
  --good: #1f9d55;
  --warn: #c47f04;
  --bad: #d64550;
  --bg-strength: .10;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20, 40, 70, .05), 0 5px 14px rgba(20, 40, 70, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 55%, var(--bg-grad-1) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* background drawn in assets/bg.js: dungeon tiles, no blur, a pixel stays a pixel */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--bg-strength);
  image-rendering: pixelated;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 22px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 52px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 680;
  font-size: 15.5px;
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }

/* The brand mark is the same file as the favicon, so the logo changes in one
   place. The SVG draws the background and the letter itself, only the size is set here. */
.brand-mark {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
}

.head-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* On a narrow screen the header breaks into two rows, and the navigation stops
   wrapping and scrolls horizontally. With wrapping inside a fixed-height header
   the first row of buttons escaped above the screen and was not clickable. */
@media (max-width: 760px) {
  .head-inner { flex-wrap: wrap; row-gap: 9px; }

  .head-nav {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .head-nav::-webkit-scrollbar { display: none; }
  .head-nav > * { flex: 0 0 auto; }

  /* The bar does not fit seven items, so the two most important go first:
     adding a server and the language switch. The rest is one finger swipe away. */
  .head-nav .btn-primary { order: -2; }
  .head-nav .lang-btn,
  .head-nav .lang-switch { order: -1; }

  .brand-text { white-space: nowrap; }
}

/* ---------- hero ---------- */

.hero { padding: 26px 0 16px; }

.hero h1 {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.lead { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* ---------- kontrolki ---------- */

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.search-box { flex: 1 1 260px; position: relative; }

/* narrow filter field next to the panel header */
.search-box-sm { flex: 0 1 200px; }

/* character marker: green when in game, grey when only seen earlier */
.player-state {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  vertical-align: middle;
}
.player-state.is-on { background: var(--good); }

input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.select-box select { width: auto; min-width: 150px; }

.view-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 580;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }

.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.1); border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--accent-soft); border-color: transparent; }
.view-toggle .btn { border: 0; padding: 7px 14px; }
.btn-ghost.is-active { background: var(--accent-soft); color: var(--accent); }

.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); background: rgba(227, 93, 106, .10); }

.btn-sm { padding: 4px 9px; font-size: 12px; }

/* ---------- tags ---------- */

.tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag-chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all .14s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--text); }
.tag-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.count {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* ---------- entry list ---------- */

.posts { display: grid; gap: 12px; padding-bottom: 40px; }

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
  transition: border-color .16s, transform .16s;
}

/* accent bar at the left edge */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity .16s;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.card:hover::before { opacity: 1; }

.card-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -.015em;
  font-weight: 620;
}
.card h2 a { color: var(--text); }
.card h2 a:hover { color: var(--accent); text-decoration: none; }

.pin {
  flex: none;
  font-size: 10.5px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}

.card-body {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  white-space: pre-wrap;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--accent);
  word-break: break-all;
}
.card-link::before { content: "↗"; font-family: var(--font); }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.card-date { white-space: nowrap; }

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: .02em;
}

/* ---------- "wide" view: long strips ---------- */

.posts-wide { grid-template-columns: 1fr; gap: 10px; }

.posts-wide .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
}

.posts-wide .card-meta {
  justify-content: flex-end;
  flex: none;
  max-width: 300px;
}

.posts-wide .card-body {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .posts-wide .card { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .posts-wide .card-meta { justify-content: flex-start; max-width: none; }
}

/* ---------- "compact" view: 5 tiles per row ---------- */

.posts-dense { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.posts-dense .card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px;
}

.posts-dense .card h2 { font-size: 15.5px; line-height: 1.3; }

.posts-dense .card-body {
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.posts-dense .card-link { font-size: 12px; }
.posts-dense .card-meta { margin-top: auto; font-size: 11.5px; }
.posts-dense .pin { font-size: 9.5px; padding: 1px 7px; }

@media (max-width: 1080px) { .posts-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .posts-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .posts-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .posts-dense { grid-template-columns: 1fr; } }

/* ---------- reszta ---------- */

.empty {
  padding: 48px 0;
  text-align: center;
  color: var(--text-dim);
}

.more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 56px;
  text-align: center;
}
.more p { margin: 0; color: var(--text-dim); font-size: 14px; }
.more[hidden] { display: none; }

.foot-note {
  margin: 0 0 28px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
  color: var(--text-dim);
  font-size: 13.5px;
}

.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 22px 0;
  color: var(--text-dim);
  font-size: 13px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
}
.site-foot p { margin: 0; }

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.foot-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-nav a { color: var(--text-dim); }
.foot-nav a:hover { color: var(--accent); text-decoration: none; }

/* ---------- servers ---------- */

.checker { margin-bottom: 20px; }

.checker-form { display: flex; gap: 8px; flex-wrap: wrap; }
.checker-form input { flex: 1 1 240px; font-family: var(--mono); font-size: 14px; }

.check-out {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 14px;
}
.check-out.is-good { border-color: color-mix(in srgb, #3fb984 45%, var(--line)); }
.check-out.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--text-dim); }

.check-head { margin: 0 0 10px; font-weight: 600; font-size: 15px; color: var(--text); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.srv-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.srv-table thead th {
  padding: 7px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.srv-table thead button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.srv-table thead button:hover { color: var(--text); }
.srv-table thead button.is-sorted { color: var(--accent); }
.srv-table thead button.is-sorted::after { content: " ↓"; }

.srv-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.srv-table tbody tr:last-child { border-bottom: 0; }
.srv-table tbody tr:nth-child(even) { background: var(--stripe); }
.srv-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.srv-table tbody tr.is-off { opacity: .62; }

.srv-table td { padding: 6px 12px; vertical-align: middle; line-height: 1.35; }

.srv-msg { color: var(--text-dim); text-align: center; padding: 28px 14px; }

.col-flag { width: 46px; }
.col-players, .col-uptime, .col-exp, .col-pvp, .col-client, .col-points { white-space: nowrap; }
.col-uptime, .col-exp, .col-points { font-variant-numeric: tabular-nums; }

.points-box { display: flex; align-items: center; gap: 7px; }
.points-value { font-weight: 660; font-size: 13px; min-width: 20px; }

.vote-btn {
  width: 21px; height: 21px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all .12s;
}
.vote-btn:hover:not(:disabled) { border-color: #3fb984; color: #3fb984; }
.vote-btn.is-voted { color: #3fb984; border-color: color-mix(in srgb, #3fb984 45%, var(--line)); }
.vote-btn:disabled { cursor: default; }
.vote-btn.is-error { border-color: var(--bad); color: var(--bad); }


.srv-name-line { display: flex; align-items: center; gap: 8px; }

.dot-state {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex: none;
}
.dot-state.is-on { background: #3fb984; box-shadow: 0 0 0 3px rgba(63, 185, 132, .16); }
.dot-state.is-off { background: var(--bad); }
.dot-state.is-unknown { background: var(--text-dim); opacity: .5; }

.srv-name { font-weight: 620; color: var(--text); font-size: 13px; }
a.srv-name:hover { color: var(--accent); text-decoration: none; }

.srv-addr { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* the description is cut to two lines, otherwise one chatty entry stretches the whole table */
.srv-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srv-desc.is-error { color: var(--bad); opacity: .85; }

.col-players strong { font-size: 13.5px; font-weight: 680; }
.srv-peak { color: var(--text-dim); font-size: 11.5px; }
.srv-max { color: var(--text-dim); }

.col-uptime.is-low { color: var(--warn); }

.pvp-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
}

.col-client { color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; }

/* Table on a narrow screen.
 *
 * Eight columns give 743 px and a phone has 375, so players and points, i.e. what
 * people come here for, fell out of the frame and needed sideways scrolling.
 * We hide the least important columns in this order: client, mode, EXP, uptime.
 * Everything hidden is visible on the server page anyway.
 */
@media (max-width: 720px) {
  .col-client { display: none; }
  /* min-width must go down together with the columns, otherwise the table still
     stretches to 720 px and hiding columns gives nothing */
  .srv-table, .table-scroll > .srv-table { min-width: 600px; }
}

@media (max-width: 620px) {
  .col-pvp { display: none; }
  .srv-table, .table-scroll > .srv-table { min-width: 500px; }
}

@media (max-width: 540px) {
  .col-exp { display: none; }
  .srv-table, .table-scroll > .srv-table { min-width: 400px; }
  .srv-table td { padding: 6px 8px; }
  .srv-table thead th { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 430px) {
  .col-uptime { display: none; }
  .col-flag { width: 30px; }
  .srv-table, .table-scroll > .srv-table { min-width: 0; }
}

/* wyszukiwarka */

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 12px;
}

/* ranking */

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.tab-bar .btn { border: 0; }

.rank-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; }

.rank-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}
.rank-row.is-off { opacity: .6; }
.rank-row.is-top { border-color: color-mix(in srgb, var(--warn) 42%, var(--line)); }

.rank-no {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-row.is-top .rank-no { color: var(--warn); }

.rank-main { min-width: 0; }

.rank-value {
  font-size: 17px;
  font-weight: 660;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank-unit {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 5px;
}

@media (max-width: 560px) {
  .rank-row { grid-template-columns: 34px minmax(0, 1fr); }
  .rank-value { grid-column: 2; font-size: 17px; }
}

.srv-out { font-size: 12px; color: var(--text-dim); }
.srv-out:hover { color: var(--accent); text-decoration: none; }
.srv-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* Highlight of the vote button for someone who came with ?vote=1.
   With animations turned off only the outline stays. */
.is-wanted {
  animation: wanted 1.1s ease-in-out 3;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@keyframes wanted {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { box-shadow: 0 0 0 7px var(--accent-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .is-wanted { animation: none; }
}

/* bars on the scene stats page */

.bar-list { display: flex; flex-direction: column; gap: 5px; }

.bar-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 44px 84px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}

.bar-track {
  height: 9px;
  border-radius: 5px;
  background: var(--line-soft);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.bar-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }

/* Levels gained today on the player list and the character card */
.col-gain { color: var(--good); font-weight: 660; font-variant-numeric: tabular-nums; }
#player-levels .bar-row { grid-template-columns: 70px minmax(0, 1fr) 44px; }
#player-levels-box { margin: 4px 0 14px; }
#player-levels-box h3, .player-card h3 { font-size: 13px; margin: 14px 0 8px; }
.player-card h2 { display: flex; align-items: center; gap: 8px; }
.player-card .stat-grid { margin: 10px 0 4px; }
.bar-players { color: var(--text-dim); font-size: 11.5px; text-align: right; }

@media (max-width: 560px) {
  .bar-row { grid-template-columns: 84px minmax(0, 1fr) 38px; }
  .bar-players { display: none; }
}

/* stat tiles on the server page */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-tile {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.stat-label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat-value {
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -.02em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.stat-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.chart { width: 100%; height: 280px; display: block; cursor: crosshair; touch-action: pan-y; }

/* Legend under the chart: the same colors as on the canvas. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-dim);
}
.chart-legend span { display: inline-block; vertical-align: middle; margin-right: -8px; }
.lg-line { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.lg-avg { width: 16px; height: 0; border-top: 2px dashed rgba(100, 116, 139, .7); }
.lg-peak { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; }
.lg-bar { width: 16px; height: 4px; background: rgba(31, 157, 85, .55); }
.lg-bar.is-down { background: var(--bad); }

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tab-bar-sm { margin-bottom: 0; }
.tab-bar-sm .btn { padding: 4px 10px; font-size: 12px; }

/* server page header */

.srv-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 18px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.state-badge {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: #fff;
  background: var(--text-dim);
}
.state-badge.is-on { background: var(--good); }
.state-badge.is-off { background: var(--bad); }

.srv-header-main { flex: 1 1 220px; min-width: 0; }
.srv-header-main h1 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.srv-header-addr { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }

.srv-header-players {
  font-size: 13.5px;
  font-weight: 620;
  white-space: nowrap;
}

.srv-header-actions { display: flex; gap: 6px; }

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* rozbicie godzinowe */

.hour-track {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}

.hour-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* profil dobowy */

.profile {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
  height: 130px;
}

.profile-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
}

.profile-bar {
  display: block;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background .12s;
}
.profile-col:hover .profile-bar { background: var(--accent); }
.profile-col.is-best .profile-bar { background: var(--good); }

.profile-hour {
  font-size: 10px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  height: 12px;
}

@media (max-width: 620px) {
  .profile { height: 100px; gap: 2px; }
  .profile-hour { font-size: 8px; }
}

/* token after adding a server */

.token-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.token-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.token-box input { font-family: var(--mono); font-size: 12px; margin-bottom: 8px; }

/* full server description */

.server-desc {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  max-height: 420px;
  overflow-y: auto;
}

/* dokumentacja API */

.code-list { display: flex; flex-direction: column; gap: 6px; }

.code-list code.code-block {
  display: block;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-family: var(--mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
}

.code-block { margin: 0; line-height: 1.5; }

/* Response examples in api.html: long lines (curl, JSON) scroll inside the frame,
   not the whole page sideways on a phone (390 px: the page stretched to 898 px). */
pre.code-block {
  max-width: 100%;
  overflow-x: auto;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-family: var(--mono);
  font-size: 12px;
}

/* Banner variants are below, right after .banner: with the same specificity
   the order in the file counts, and placed here they lost to the base rule. */

/* language switch */

.lang-btn {
  font-weight: 700;
  letter-spacing: .05em;
  border: 1px solid var(--line);
  min-width: 40px;
}

/* Language switch: flags side by side.

   There was a <select> here, but the global rule "select { width: 100% }" higher in this
   file spread it over the whole page width and pushed it under the bar. A button
   group is not a form field, so this problem disappears at the source,
   and choosing a language is one click instead of opening a list. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  flex: 0 0 auto;
}

.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s, color .12s;
}

/* The flag carries recognition, the short code confirms it. Hence the flag is bigger
   than the text next to it: it should be noticed first. */
.lang-flag { font-size: 14px; line-height: 1; }
.lang-code { font-size: 11px; }

.lang-opt:hover { background: var(--bg-card); color: var(--text); }

.lang-opt.is-on {
  background: var(--accent);
  color: #fff;
}

.lang-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


/* On a narrow screen the short code alone takes space, and the flag is enough. */
@media (max-width: 560px) {
  .lang-code { display: none; }
  .lang-opt { padding: 3px 6px; }
}

/* launch announcements */

.upcoming { margin-bottom: 12px; border-left: 3px solid var(--warn); }
.upcoming-list { display: flex; flex-direction: column; gap: 6px; }

.upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.upcoming-main { min-width: 0; }

.upcoming-time {
  font-size: 13px;
  font-weight: 660;
  color: var(--warn);
  white-space: nowrap;
}

/* tags in a list row */

.row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.tag-chip-sm {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
}
.tag-chip-sm:hover { text-decoration: none; filter: brightness(.95); }

/* porównywarka */

.pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.pick-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
}
.pick-item:hover { background: var(--accent-soft); }
.pick-item.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.pick-item input { width: auto; }
.pick-item small { color: var(--text-dim); font-size: 11px; margin-left: auto; font-family: var(--mono); }

.compare-table th[scope="row"] {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  background: var(--stripe);
}
.compare-table td.is-best { font-weight: 700; color: var(--good); }
.compare-table th { padding: 7px 12px; }

/* weryfikacja Turnstile */

.turnstile-box { margin-top: 8px; }

.turnstile-box.is-floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}
.turnstile-box[hidden] { display: none; }

/* MOTD */

.motd-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 9px 13px;
  margin-bottom: 8px;
}
.motd-date { font-size: 11.5px; color: var(--text-dim); }
.motd-text { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }
/* Error and reason lines in the admin Dead/Fake lists: looks like MOTD text, but is translated. */
.dead-note { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }

/* sygnatury */

.sig-list { display: flex; flex-direction: column; gap: 16px; }

.sig-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 12px;
}

.sig-img {
  display: block;
  margin-bottom: 10px;
  max-width: 100%;
  height: auto;
}

.sig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
}

.sig-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sig-label {
  width: 62px;
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.sig-row input {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 8px;
}

/* card list in the moderation panel */

.srv-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }

.srv-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 18px 0 8px;
}

.page-btn {
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.page-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-btn:disabled { opacity: .35; cursor: default; }

/* ---------- kontakt / informacje ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding-bottom: 20px;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  box-shadow: var(--shadow);
}

.info-card h2 {
  margin: 0;
  font-size: 14.5px;
  letter-spacing: -.015em;
}

.info-card p { margin: 0; color: var(--text-dim); font-size: 12.5px; }

.info-card ul {
  margin: 0;
  padding-left: 17px;
  color: var(--text-dim);
  font-size: 12.5px;
}
.info-card li { margin-bottom: 4px; }

.info-card .btn { align-self: flex-start; margin-top: 4px; }

.info-card.is-wide { grid-column: 1 / -1; }

.mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.mail-row code {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--text-dim);
}
.kv dt { font-weight: 560; color: var(--text); }
.kv dd { margin: 0; }

.hero-sub {
  margin: 26px 0 12px;
  font-size: 20px;
  letter-spacing: -.02em;
}

.faq { padding-bottom: 48px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.faq summary {
  cursor: pointer;
  font-weight: 560;
  font-size: 15px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
.faq details[open] summary::before { content: " "; }
.faq details p { margin: 10px 0 2px; color: var(--text-dim); font-size: 14.5px; }

/* ---------- generator ---------- */

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 48px;
}

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 15px 17px;
  box-shadow: var(--shadow);
}

.panel + .panel { margin-top: 16px; }

.panel h2 { margin: 0 0 3px; font-size: 14.5px; letter-spacing: -.015em; }
.panel .hint { margin: 0 0 11px; color: var(--text-dim); font-size: 12px; }
.panel code { font-family: var(--mono); font-size: 12.5px; }

.field { margin-bottom: 11px; }

.field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 560;
  color: var(--text-dim);
}

/* error returned by the server, shown at the specific field */
.field-error {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--bad);
}

input.is-wrong,
select.is-wrong,
textarea.is-wrong {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 5%, var(--bg-soft));
}

/* Checkbox in one line with its description.
   The selector must be stronger than ".field label", which sets display:block. */
.field label.check-line,
.check-line {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.check-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: auto; }

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.step {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 13px;
}
.step b { color: var(--accent); margin-right: 2px; }
.step code { font-family: var(--mono); font-size: 12px; color: var(--text); }

.json-out {
  width: 100%;
  min-height: 220px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 560;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 50;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-bad { background: var(--bad); color: #fff; }

.banner {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--text);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.banner code { font-family: var(--mono); font-size: 12.5px; }

/* info banner: clones, entry waits for a decision */
.banner-info {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
}

/* confirmation banner: the entry is on the list, all good */
.banner-ok {
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
  background: color-mix(in srgb, var(--good) 9%, transparent);
}

/* ---------- powiadomienia ---------- */

/* List of events to tick: two columns on a wide screen,
   one on a phone. Each event has a label and an explaining sentence,
   because "Update" alone does not say what it is about. */
.watch-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.watch-event {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 2px 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.watch-event:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.watch-event input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.watch-event-label {
  font-weight: 600;
  font-size: 13.5px;
}

/* The explanation starts under the label, not under the checkbox. */
.watch-event-hint {
  grid-column: 2;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

/* Recipient tile in the moderation panel: address, channel and numbers side by side. */
.subs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.subs-tag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--text-dim);
}

.subs-tag.is-active {
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  color: var(--good);
}

.subs-tag.is-waiting {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
}

.subs-tag.is-off {
  opacity: .7;
}

/* Edit form unfolded in the entry card in the moderation panel.
   Separated by a line from the rest of the card, so it is clear it is a separate mode. */
.edit-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.edit-form .field:last-of-type {
  margin-bottom: 12px;
}

.edit-form textarea {
  resize: vertical;
  min-height: 90px;
}

/* ---------- nawigacja ---------- */

/* Current page in the bar. Bold alone is not enough on a dark background,
   so an underline in the accent color is added. */
.head-nav a.is-here,
.head-nav summary.is-here {
  color: var(--text);
  font-weight: 640;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* "More" menu: <details> instead of own unfolding, so it works
   without event handling and stays usable after a JavaScript failure. */
.nav-more {
  position: relative;
  flex: 0 0 auto;
}

.nav-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.nav-more > summary::-webkit-details-marker { display: none; }

/* The arrow turns on opening: the only sign it is not a normal button. */
.nav-more > summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}

.nav-more[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.nav-more-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 248px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 8px 28px rgba(20, 40, 70, .16);
}

.nav-more-list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.nav-more-list a:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.nav-more-list a.is-here {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-more-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

/* Explaining sentence under the name: without it "Compare" and "API" say nothing
   to someone visiting for the first time. */
.nav-more-desc {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.35;
}

@media (max-width: 760px) {
  /* On a phone the menu unfolds to the full screen width, not next to the
     button: with horizontal bar scrolling the list would escape out of
     view anyway. We position against the header, not against <details>. */
  .nav-more { position: static; }

  .nav-more-list {
    left: 12px;
    right: 12px;
    min-width: 0;
  }
}

/* ---------- flags ---------- */

/* Flags as SVG in data URIs, not emoji.

   National flag emoji do not work on Windows: the system has no font with these
   characters, so instead of a flag you see a pair of letters ("PL", "BR"). On Mac
   and phones they work, on Windows not, and Windows is what most
   Minecraft players use.

   Drawn here: no file to upload, no external library,
   the same look on every system and no blur when zoomed. */
.flag-svg {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  /* Outline, because white flags blend with the page background. */
  box-shadow: 0 0 0 1px rgba(20, 40, 70, .12);
  vertical-align: -1px;
  /* default background: globe */
  /* A country outside the list below (older entry, code typed by hand) gets
     a globe instead of an empty square. A specific flag below overrides it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23dbe4ef'/%3E%3Ccircle cx='8' cy='5.5' r='3.4' fill='none' stroke='%2364748b' stroke-width='.9'/%3E%3Cpath d='M8 2.1v6.8M4.6 5.5h6.8' stroke='%2364748b' stroke-width='.9'/%3E%3C/svg%3E");
}

.flag-pl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23dc143c'/%3E%3C/svg%3E"); }
.flag-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23000'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23d00'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ffce00'/%3E%3C/svg%3E"); }
.flag-nl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='3.67' fill='%23ae1c28'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%2321468b'/%3E%3C/svg%3E"); }
.flag-at { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='3.67' fill='%23ed2939'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ed2939'/%3E%3C/svg%3E"); }
.flag-hu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='3.67' fill='%23ce2939'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23477050'/%3E%3C/svg%3E"); }
.flag-ua { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%230057b7'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23ffd700'/%3E%3C/svg%3E"); }
.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%230039a6'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23d52b1e'/%3E%3C/svg%3E"); }
.flag-ee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%234891d9'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23000'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-lt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fdb913'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23006a44'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23c1272d'/%3E%3C/svg%3E"); }
.flag-lv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%239e3039'/%3E%3Crect y='4.4' width='16' height='2.2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23009b74'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23d62612'/%3E%3C/svg%3E"); }
.flag-no { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ba0c2f'/%3E%3Crect x='4' width='3' height='11' fill='%23fff'/%3E%3Crect y='4' width='16' height='3' fill='%23fff'/%3E%3Crect x='4.8' width='1.4' height='11' fill='%2300205b'/%3E%3Crect y='4.8' width='16' height='1.4' fill='%2300205b'/%3E%3C/svg%3E"); }
.flag-dk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23c8102e'/%3E%3Crect x='4.5' width='2' height='11' fill='%23fff'/%3E%3Crect y='4.5' width='16' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-se { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23006aa7'/%3E%3Crect x='4.5' width='2' height='11' fill='%23fecc00'/%3E%3Crect y='4.5' width='16' height='2' fill='%23fecc00'/%3E%3C/svg%3E"); }
.flag-fi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect x='4.5' width='2.5' height='11' fill='%23003580'/%3E%3Crect y='4.25' width='16' height='2.5' fill='%23003580'/%3E%3C/svg%3E"); }
.flag-is { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23003897'/%3E%3Crect x='4' width='3' height='11' fill='%23fff'/%3E%3Crect y='4' width='16' height='3' fill='%23fff'/%3E%3Crect x='4.8' width='1.4' height='11' fill='%23d72828'/%3E%3Crect y='4.8' width='16' height='1.4' fill='%23d72828'/%3E%3C/svg%3E"); }
.flag-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23002395'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ed2939'/%3E%3C/svg%3E"); }
.flag-it { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23009246'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ce2b37'/%3E%3C/svg%3E"); }
.flag-ie { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23169b62'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ff883e'/%3E%3C/svg%3E"); }
.flag-be { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23000'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fdda24'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ef3340'/%3E%3C/svg%3E"); }
.flag-ro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23002b7f'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fcd116'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-pe { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23d91023'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23d91023'/%3E%3C/svg%3E"); }
.flag-mx { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%23006847'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-br { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23009c3b'/%3E%3Cpath d='M8 1.4 14.6 5.5 8 9.6 1.4 5.5Z' fill='%23ffdf00'/%3E%3Ccircle cx='8' cy='5.5' r='2.4' fill='%23002776'/%3E%3C/svg%3E"); }
.flag-pt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ff0000'/%3E%3Crect width='6.4' height='11' fill='%23006600'/%3E%3Ccircle cx='6.4' cy='5.5' r='2.2' fill='%23ffff00' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E"); }
.flag-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23c60b1e'/%3E%3Crect y='2.75' width='16' height='5.5' fill='%23ffc400'/%3E%3C/svg%3E"); }
.flag-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23012169'/%3E%3Cpath d='M0 0 16 11M16 0 0 11' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M0 0 16 11M16 0 0 11' stroke='%23c8102e' stroke-width='1.3'/%3E%3Cpath d='M8 0V11M0 5.5H16' stroke='%23fff' stroke-width='3.6'/%3E%3Cpath d='M8 0V11M0 5.5H16' stroke='%23c8102e' stroke-width='2.2'/%3E%3C/svg%3E"); }
.flag-us { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='16' height='1.7'/%3E%3Crect y='3.4' width='16' height='1.7'/%3E%3Crect y='6.8' width='16' height='1.7'/%3E%3Crect y='10.2' width='16' height='.8'/%3E%3C/g%3E%3Crect width='7' height='6' fill='%233c3b6e'/%3E%3C/svg%3E"); }
.flag-ar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%2374acdf'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Ccircle cx='8' cy='5.5' r='1.3' fill='%23f6b40e'/%3E%3C/svg%3E"); }
.flag-cl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23d52b1e'/%3E%3Crect width='5.5' height='5.5' fill='%230039a6'/%3E%3C/svg%3E"); }
.flag-co { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fcd116'/%3E%3Crect y='5.5' width='16' height='2.75' fill='%23003893'/%3E%3Crect y='8.25' width='16' height='2.75' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-ca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='4' height='11' fill='%23d52b1e'/%3E%3Crect x='12' width='4' height='11' fill='%23d52b1e'/%3E%3Cpath d='M8 3 8.7 4.8 10 4.2 9.3 6 10.6 6.2 8.9 7.2 9.2 8.4 8 8 6.8 8.4 7.1 7.2 5.4 6.2 6.7 6 6 4.2 7.3 4.8Z' fill='%23d52b1e'/%3E%3C/svg%3E"); }
.flag-au { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23012169'/%3E%3Crect width='7' height='5' fill='%23012169'/%3E%3Cpath d='M0 0 7 5M7 0 0 5' stroke='%23fff' stroke-width='1'/%3E%3Cpath d='M3.5 0V5M0 2.5H7' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M3.5 0V5M0 2.5H7' stroke='%23c8102e' stroke-width='1'/%3E%3C/svg%3E"); }
.flag-ch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23d52b1e'/%3E%3Crect x='6.6' y='2.4' width='2.8' height='6.2' fill='%23fff'/%3E%3Crect x='4.4' y='4.6' width='7.2' height='1.8' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-cz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%23fff'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23d7141a'/%3E%3Cpath d='M0 0 8 5.5 0 11Z' fill='%2311457e'/%3E%3C/svg%3E"); }
.flag-sk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%230b4ea2'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ee1c25'/%3E%3C/svg%3E"); }
.flag-si { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23005ce5'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23ed1c24'/%3E%3C/svg%3E"); }
.flag-hr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23ff0000'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23171796'/%3E%3C/svg%3E"); }
.flag-rs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23c6363c'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%230c4076'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-by { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='7.3' fill='%23c8313e'/%3E%3Crect y='7.3' width='16' height='3.7' fill='%234aa657'/%3E%3Crect width='3' height='11' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-gr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%23004c98'%3E%3Crect width='16' height='1.22'/%3E%3Crect y='2.44' width='16' height='1.22'/%3E%3Crect y='4.88' width='16' height='1.22'/%3E%3Crect y='7.32' width='16' height='1.22'/%3E%3Crect y='9.76' width='16' height='1.24'/%3E%3C/g%3E%3Crect width='6' height='6.1' fill='%23004c98'/%3E%3Crect x='2.4' width='1.2' height='6.1' fill='%23fff'/%3E%3Crect y='2.45' width='6' height='1.2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-tr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23e30a17'/%3E%3Ccircle cx='6' cy='5.5' r='2.6' fill='%23fff'/%3E%3Ccircle cx='6.9' cy='5.5' r='2.1' fill='%23e30a17'/%3E%3C/svg%3E"); }
.flag-il { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect y='1.4' width='16' height='1.5' fill='%230038b8'/%3E%3Crect y='8.1' width='16' height='1.5' fill='%230038b8'/%3E%3Cpath d='M8 3.2 9.6 6.2H6.4Z' stroke='%230038b8' stroke-width='.6' fill='none'/%3E%3Cpath d='M8 7.8 6.4 4.8h3.2Z' stroke='%230038b8' stroke-width='.6' fill='none'/%3E%3C/svg%3E"); }
.flag-ae { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%2300732f'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23000'/%3E%3Crect width='4' height='11' fill='%23ff0000'/%3E%3C/svg%3E"); }
/* Countries added in wave 10: they had servers on the list but showed a globe instead of a flag. */
.flag-id { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='5.5' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23ff9933'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23138808'/%3E%3Ccircle cx='8' cy='5.5' r='1.3' fill='none' stroke='%23000080' stroke-width='.5'/%3E%3C/svg%3E"); }
.flag-ph { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%230038a8'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23ce1126'/%3E%3Cpath d='M0 0 9.5 5.5 0 11Z' fill='%23fff'/%3E%3Ccircle cx='3.2' cy='5.5' r='1.3' fill='%23fcd116'/%3E%3C/svg%3E"); }
.flag-sg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Crect width='16' height='5.5' fill='%23ef3340'/%3E%3Ccircle cx='3.6' cy='2.75' r='1.8' fill='%23fff'/%3E%3Ccircle cx='4.3' cy='2.75' r='1.6' fill='%23ef3340'/%3E%3C/svg%3E"); }
.flag-vn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23da251d'/%3E%3Cpath d='M8 2.6 8.7 4.63 10.85 4.67 9.14 5.97 9.76 8.03 8 6.8 6.24 8.03 6.86 5.97 5.15 4.67 7.3 4.63Z' fill='%23ff0'/%3E%3C/svg%3E"); }
.flag-cn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23de2910'/%3E%3Cpath d='M3.2 1.2 3.62 2.42 4.91 2.44 3.89 3.22 4.26 4.46 3.2 3.72 2.14 4.46 2.52 3.22 1.49 2.44 2.78 2.42Z' fill='%23ffde00'/%3E%3Cg fill='%23ffde00'%3E%3Ccircle cx='5.8' cy='1.2' r='.4'/%3E%3Ccircle cx='6.7' cy='2.2' r='.4'/%3E%3Ccircle cx='6.7' cy='3.5' r='.4'/%3E%3Ccircle cx='5.8' cy='4.5' r='.4'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-jp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Ccircle cx='8' cy='5.5' r='3.3' fill='%23bc002d'/%3E%3C/svg%3E"); }
.flag-kr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Ccircle cx='8' cy='5.5' r='2.7' fill='%230047a0'/%3E%3Cpath d='M5.3 5.5a2.7 2.7 0 0 1 5.4 0a1.35 1.35 0 0 1-2.7 0a1.35 1.35 0 0 0-2.7 0Z' fill='%23cd2e3a'/%3E%3Cpath d='M1.6 1.6h2M1.6 2.4h2M1.6 3.2h2M12.4 1.6h2M12.4 2.4h2M12.4 3.2h2M1.6 7.8h2M1.6 8.6h2M1.6 9.4h2M12.4 7.8h2M12.4 8.6h2M12.4 9.4h2' stroke='%23000' stroke-width='.45'/%3E%3C/svg%3E"); }
.flag-th { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23a51931'/%3E%3Crect y='1.83' width='16' height='7.34' fill='%23f4f5f8'/%3E%3Crect y='3.67' width='16' height='3.66' fill='%232d2a4a'/%3E%3C/svg%3E"); }
.flag-kz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%2300afca'/%3E%3Ccircle cx='8' cy='4.6' r='1.8' fill='%23fec50c'/%3E%3Cpath d='M5.4 7.4q2.6 1.3 5.2 0' stroke='%23fec50c' stroke-width='.6' fill='none'/%3E%3Crect x='1' width='.7' height='11' fill='%23fec50c'/%3E%3C/svg%3E"); }
.flag-md { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='5.33' height='11' fill='%230046ae'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23ffd200'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23cc092f'/%3E%3Cpath d='M7 3.8h2v2.8L8 7.6 7 6.6Z' fill='%23b07e3c'/%3E%3C/svg%3E"); }
.flag-ve { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23ffcc00'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%2300247d'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23cf142b'/%3E%3Cpath d='M5 6.4q3-2.6 6 0' stroke='%23fff' stroke-width='.6' stroke-dasharray='.6 .6' fill='none'/%3E%3C/svg%3E"); }
.flag-za { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%23e03c31'/%3E%3Crect y='5.5' width='16' height='5.5' fill='%23001489'/%3E%3Cpath d='M0 0 8 5.5 0 11M8 5.5H16' stroke='%23fff' stroke-width='3.4' fill='none'/%3E%3Cpath d='M0 0 8 5.5 0 11M8 5.5H16' stroke='%23007749' stroke-width='2.2' fill='none'/%3E%3Cpath d='M0 1.8 5.4 5.5 0 9.2Z' fill='%23ffb81c'/%3E%3Cpath d='M0 2.8 4 5.5 0 8.2Z' fill='%23000'/%3E%3C/svg%3E"); }
.flag-bd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23006a4e'/%3E%3Ccircle cx='7.2' cy='5.5' r='3' fill='%23f42a41'/%3E%3C/svg%3E"); }
/* Rare countries on the list (1-5 servers each), simplified at 16x11 so no row shows a globe. */
.flag-cr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23002b7f'/%3E%3Crect y='1.83' width='16' height='7.34' fill='%23fff'/%3E%3Crect y='3.67' width='16' height='3.66' fill='%23ce1126'/%3E%3C/svg%3E"); }
.flag-ec { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='5.5' fill='%23ffdd00'/%3E%3Crect y='5.5' width='16' height='2.75' fill='%23034ea2'/%3E%3Crect y='8.25' width='16' height='2.75' fill='%23ed1c24'/%3E%3Ccircle cx='8' cy='5.5' r='1.4' fill='%23b07e3c'/%3E%3C/svg%3E"); }
.flag-ge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%23ff0000'%3E%3Crect x='6.9' width='2.2' height='11'/%3E%3Crect y='4.4' width='16' height='2.2'/%3E%3Crect x='2.8' y='1.6' width='1.2' height='1.2'/%3E%3Crect x='12' y='1.6' width='1.2' height='1.2'/%3E%3Crect x='2.8' y='8.2' width='1.2' height='1.2'/%3E%3Crect x='12' y='8.2' width='1.2' height='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-hk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23de2910'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='3.6' r='1'/%3E%3Ccircle cx='9.8' cy='4.9' r='1'/%3E%3Ccircle cx='9.1' cy='7' r='1'/%3E%3Ccircle cx='6.9' cy='7' r='1'/%3E%3Ccircle cx='6.2' cy='4.9' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-ir { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.67' fill='%23239f40'/%3E%3Crect y='3.67' width='16' height='3.67' fill='%23fff'/%3E%3Crect y='7.34' width='16' height='3.66' fill='%23da0000'/%3E%3Ccircle cx='8' cy='5.5' r='1.1' fill='none' stroke='%23da0000' stroke-width='.6'/%3E%3C/svg%3E"); }
.flag-kh { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23032ea1'/%3E%3Crect y='2.75' width='16' height='5.5' fill='%23e00025'/%3E%3Cpath d='M5 7.4h6v-.8h-.6V5.4h-.6V4.5H9.2V3.6H8.6L8 2.9l-.6.7h-.6v.9H6.2v.9h-.6v1.2H5Z' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-lk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ffbe29'/%3E%3Crect x='.6' y='.6' width='1.8' height='9.8' fill='%2300534e'/%3E%3Crect x='2.4' y='.6' width='1.8' height='9.8' fill='%23eb7400'/%3E%3Crect x='4.8' y='.6' width='10.6' height='9.8' fill='%238d153a'/%3E%3Ccircle cx='10.1' cy='5.5' r='1.6' fill='%23ffbe29'/%3E%3C/svg%3E"); }
.flag-ma { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23c1272d'/%3E%3Cpath d='M8 3 9.3 7.1 5.9 4.6h4.2L6.7 7.1Z' fill='none' stroke='%23006233' stroke-width='.5'/%3E%3C/svg%3E"); }
.flag-mn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23c4272f'/%3E%3Crect x='5.33' width='5.34' height='11' fill='%23015197'/%3E%3Cg fill='%23f9cf02'%3E%3Ccircle cx='2.67' cy='3' r='.8'/%3E%3Crect x='1.6' y='4.2' width='2.1' height='.6'/%3E%3Crect x='1.6' y='5.2' width='2.1' height='2.4'/%3E%3Crect x='1.6' y='8' width='2.1' height='.6'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-my { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%23cc0001'%3E%3Crect width='16' height='.79'/%3E%3Crect y='1.57' width='16' height='.79'/%3E%3Crect y='3.14' width='16' height='.79'/%3E%3Crect y='4.71' width='16' height='.79'/%3E%3Crect y='6.28' width='16' height='.79'/%3E%3Crect y='7.85' width='16' height='.79'/%3E%3Crect y='9.42' width='16' height='.79'/%3E%3C/g%3E%3Crect width='8' height='6.28' fill='%23010066'/%3E%3Ccircle cx='3.3' cy='3.14' r='2' fill='%23fc0'/%3E%3Ccircle cx='3.9' cy='3.14' r='1.7' fill='%23010066'/%3E%3Ccircle cx='6' cy='3.14' r='.9' fill='%23fc0'/%3E%3C/svg%3E"); }
.flag-np { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M4 .5 12 5.3H6.4L12 10.5H4Z' fill='%23dc143c' stroke='%23003893' stroke-width='.7'/%3E%3Ccircle cx='6' cy='3.9' r='.8' fill='%23fff'/%3E%3Ccircle cx='6' cy='8.3' r='.9' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-nz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23012169'/%3E%3Cpath d='M0 0 7 5M7 0 0 5' stroke='%23fff' stroke-width='1'/%3E%3Cpath d='M3.5 0V5M0 2.5H7' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M3.5 0V5M0 2.5H7' stroke='%23c8102e' stroke-width='1'/%3E%3Cg fill='%23c8102e' stroke='%23fff' stroke-width='.3'%3E%3Ccircle cx='12' cy='2.4' r='.6'/%3E%3Ccircle cx='10.6' cy='5' r='.6'/%3E%3Ccircle cx='13.5' cy='4.6' r='.5'/%3E%3Ccircle cx='12' cy='8.6' r='.7'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-pk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%2301411c'/%3E%3Crect width='4' height='11' fill='%23fff'/%3E%3Ccircle cx='10' cy='5.5' r='2.7' fill='%23fff'/%3E%3Ccircle cx='10.8' cy='4.9' r='2.3' fill='%2301411c'/%3E%3Ccircle cx='11.6' cy='3.9' r='.6' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-pr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ed0000'/%3E%3Crect y='2.2' width='16' height='2.2' fill='%23fff'/%3E%3Crect y='6.6' width='16' height='2.2' fill='%23fff'/%3E%3Cpath d='M0 0 7.5 5.5 0 11Z' fill='%230050f0'/%3E%3Ccircle cx='2.6' cy='5.5' r='1' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-sa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23006c35'/%3E%3Cpath d='M4 3.6h8M4.6 4.8h6.8' stroke='%23fff' stroke-width='.6' stroke-dasharray='1 .4'/%3E%3Cpath d='M4.2 7.4h7.6' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E"); }
.flag-tm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%2300843d'/%3E%3Crect x='2.2' width='3' height='11' fill='%23d22630'/%3E%3Ccircle cx='8.6' cy='3' r='1.6' fill='%23fff'/%3E%3Ccircle cx='9.2' cy='2.7' r='1.4' fill='%2300843d'/%3E%3C/svg%3E"); }
.flag-tw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fe0000'/%3E%3Crect width='8' height='5.5' fill='%23000095'/%3E%3Ccircle cx='4' cy='2.75' r='1.6' fill='%23fff'/%3E%3Ccircle cx='4' cy='2.75' r='1.1' fill='%23000095'/%3E%3Ccircle cx='4' cy='2.75' r='.9' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-uy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23fff'/%3E%3Cg fill='%230038a8'%3E%3Crect y='1.22' width='16' height='1.22'/%3E%3Crect y='3.67' width='16' height='1.22'/%3E%3Crect y='6.11' width='16' height='1.22'/%3E%3Crect y='8.56' width='16' height='1.22'/%3E%3C/g%3E%3Crect width='6' height='6.1' fill='%23fff'/%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23fcd116'/%3E%3C/svg%3E"); }
.flag-uz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='3.6' fill='%230099b5'/%3E%3Crect y='3.6' width='16' height='3.8' fill='%23ce1126'/%3E%3Crect y='3.9' width='16' height='3.2' fill='%23fff'/%3E%3Crect y='7.4' width='16' height='3.6' fill='%231eb53a'/%3E%3Ccircle cx='2.4' cy='1.8' r='1.2' fill='%23fff'/%3E%3Ccircle cx='2.9' cy='1.8' r='1' fill='%230099b5'/%3E%3C/svg%3E"); }
.flag-wf { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23ed2939'/%3E%3Crect width='6' height='4' fill='%23fff'/%3E%3Crect width='2' height='4' fill='%23002395'/%3E%3Crect x='4' width='2' height='4' fill='%23ed2939'/%3E%3Cpath d='M9.5 4.5 13 8M13 4.5 9.5 8' stroke='%23fff' stroke-width='.9'/%3E%3C/svg%3E"); }
.flag-xx { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Crect width='16' height='11' fill='%23dbe4ef'/%3E%3Ccircle cx='8' cy='5.5' r='3.4' fill='none' stroke='%2364748b' stroke-width='.9'/%3E%3Cpath d='M8 2.1v6.8M4.6 5.5h6.8' stroke='%2364748b' stroke-width='.9'/%3E%3C/svg%3E"); }

/* Flag of the chosen country inside the select field.

   <option> does not accept images, and a flag next to the field does not fit,
   because <select> takes the whole row width. What is left is the field background:
   space on the right, just before the dropdown arrow. */
select.has-flag {
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: 16px 11px;
  padding-right: 52px;
}

/* ==========================================================================
   List look
   ==========================================================================

   Everything above is the original "card" look: rounded panels, big
   spacing, shadows. The model were big server lists, but it came out different, so this
   layer brings back that layout: a dense table with one line per row,
   the page frame in the middle, a header with a language bar, a full-width menu
   and grey column headers. Colors are light, because the dark theme was dropped earlier.

   The layer sits at the end of the file on purpose: with the same specificity the
   later rule wins, so old classes do not need removing, and all
   subpages get the new look at once. */

:root {
  --mc-blue: #2c5b76;
  --mc-blue-dark: #1d4257;
  --mc-blue-soft: #d1e8ef;
  --mc-line: #b4ccd4;
  --mc-row-line: #dfdfdf;
  --mc-orange: #cf5626;
  --mc-orange-hi: #ff5917;
  --mc-promo: #fff7b0;
  --mc-promo-line: #efe08a;
  --mc-page: #90afbb;
  --mc-frame: #ffffff;
  --mc-text: #084358;

  --bg: #eef4f6;
  --line: var(--mc-line);
  --line-soft: #e4edf0;
  --text: #13303d;
  --text-dim: #587482;
  --accent: var(--mc-blue);
  --accent-2: #3d7a9c;
  --accent-soft: rgba(44, 91, 118, .10);
  --radius: 3px;
  --radius-sm: 3px;
  --shadow: none;
  --font: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
}

body {
  background: var(--mc-page) linear-gradient(180deg, #5f8595 0, #90afbb 260px, #b7cdd5 100%) no-repeat;
  background-attachment: scroll;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

/* The background of dungeon tiles and torches (assets/bg.js) stays, as the owner wanted:
   a themed canvas instead of a gradient. It is visible only on the sides, around the white
   page frame, so it does not disturb reading the dense table. The gradient underneath
   is a fallback when the canvas is not drawn. */
#bg { display: block; opacity: .55; }

/* Page frame in the middle, like a white sheet on a blue background. */
.wrap { max-width: 980px; padding: 0 14px; }

.site-head,
main.wrap,
.site-foot {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

main.wrap {
  background: var(--mc-frame);
  padding: 14px 18px 20px;
  border-left: 1px solid var(--mc-line);
  border-right: 1px solid var(--mc-line);
  flex: 1 0 auto;
}

a { color: var(--mc-blue); }
a:hover { color: var(--mc-orange-hi); }

h1, h2, h3 { font-family: Verdana, var(--font); }

/* ---------- header ---------- */

.site-head {
  position: static;
  backdrop-filter: none;
  background: none;
  border: 0;
}

.site-head .wrap { max-width: none; }

.head-top {
  background: var(--mc-blue-dark);
  color: #cfe3ea;
  font-size: 11px;
}

.head-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.head-tagline { letter-spacing: .02em; }

.head-top .lang-switch {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 4px;
}

.head-top .lang-opt {
  color: #e6f2f6;
  padding: 2px 6px;
  font-weight: 600;
}

.head-top .lang-opt:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.head-top .lang-opt.is-on { background: rgba(255, 255, 255, .22); color: #fff; }

.head-inner {
  height: auto;
  min-height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #e8f1f4 100%);
  border-left: 1px solid var(--mc-line);
  border-right: 1px solid var(--mc-line);
}

.brand { font-size: 20px; font-weight: 700; color: var(--mc-blue-dark); letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; }
.brand:hover { color: var(--mc-blue-dark); }

.head-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.head-search input[type="search"] {
  width: 210px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--mc-line);
  border-radius: 2px;
  background: #fff;
}

.head-adv {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.head-menu {
  background: linear-gradient(180deg, #3b6f8c 0%, var(--mc-blue) 55%, #244d63 100%);
  border-top: 1px solid #1a3a4c;
  border-bottom: 1px solid #1a3a4c;
}

.head-menu .wrap { padding: 0; }

.head-nav {
  flex-wrap: nowrap;
  gap: 0;
  min-height: 36px;
  overflow: visible;
}

.head-nav .btn,
.head-nav summary.btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, .22);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .10);
}

.head-nav .btn:hover,
.head-nav summary.btn:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
}

.head-nav a.is-here,
.head-nav summary.is-here {
  background: rgba(0, 0, 0, .22);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--mc-orange-hi);
}

/* "Add server" stays highlighted, but in the same row as the rest. */
.head-nav .btn-primary {
  margin-left: auto;
  background: var(--mc-orange);
  border-right: 0;
  filter: none;
}
.head-nav .btn-primary:hover { background: var(--mc-orange-hi); }

/* Items share the bar width between them: in Polish the slack is spread
   evenly, and longer Portuguese labels (ADICIONAR SERVIDOR, ESTATISTICAS)
   fit in the frame instead of sticking out past the right edge. */
@media (min-width: 761px) {
  .head-nav > .btn,
  .head-nav > .nav-more { flex: 1 1 auto; min-width: 0; }
  .head-nav .btn,
  .head-nav summary.btn { padding: 0 11px; justify-content: center; }
  .head-nav > .nav-more > summary.btn { width: 100%; }
  .head-nav .btn-primary { margin-left: 0; }
}

/* Narrow window, but not a phone yet: smaller letters and spacing. */
@media (min-width: 761px) and (max-width: 1000px) {
  .head-nav .btn,
  .head-nav summary.btn { padding: 0 7px; font-size: 11px; letter-spacing: 0; }
}

.nav-more-list {
  border-radius: 0;
  border: 1px solid var(--mc-line);
  border-top: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  top: 100%;
  left: 0;
  right: auto;
}

.nav-more-list a { border-radius: 0; border-bottom: 1px solid var(--line-soft); }
.nav-more-name { font-size: 12px; color: var(--mc-blue); }
.nav-more-desc { font-size: 11px; }

@media (max-width: 760px) {
  .head-inner { flex-wrap: wrap; }
  .head-search { margin-left: 0; width: 100%; }
  .head-search input[type="search"] { flex: 1; width: auto; }
  .head-tagline { display: none; }
  .head-top-inner { justify-content: flex-end; }
  .head-nav { overflow-x: auto; }
  .head-nav .btn-primary { order: 0; margin-left: 0; }
}

/* ---------- elementy wspólne ---------- */

.hero { padding: 6px 0 10px; border-bottom: 1px solid var(--mc-line); margin-bottom: 12px; }
.hero h1 { font-size: 18px; color: var(--mc-orange); letter-spacing: 0; }
.lead { font-size: 12px; }

.panel,
.stat-tile,
.info-card,
.rank-row,
.srv-row,
.table-scroll,
.card {
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.panel { border: 1px solid var(--mc-line); padding: 10px 12px; }
.panel h2 { font-size: 13px; color: var(--mc-orange); }

.btn {
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}

.btn-primary {
  background: var(--mc-blue);
  border-color: var(--mc-blue);
}
.btn-primary:hover { background: var(--mc-blue-dark); filter: none; }

input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="date"],
select,
textarea {
  border-radius: 2px;
  font-size: 12px;
  padding: 5px 8px;
  border-color: var(--mc-line);
}

.foot-note {
  border: 0;
  border-top: 1px solid var(--mc-line);
  border-radius: 0;
  background: none;
  padding: 10px 0 0;
  margin: 14px 0 0;
  font-size: 11px;
}

/* Old tables (ranking, search, server page) also without rounding. */
.srv-table { font-size: 12px; }
.srv-table thead th {
  background: #e3eef2;
  color: #000;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--mc-line);
}
.srv-table td { padding: 4px 8px; }

/* ---------- home page: three tiles ---------- */

.homeboxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 14px;
}

.homebox {
  border: 1px solid var(--mc-line);
  background: linear-gradient(180deg, #fffef4 0%, #ffffff 60%);
  min-height: 132px;
}

.homebox-title {
  padding: 5px 10px;
  background: linear-gradient(180deg, #4b7f9b 0%, var(--mc-blue) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

.homebox-body { padding: 8px 10px; }
.homebox-body p { margin: 0 0 6px; }
.homebox-body code { font-size: 11px; }
.homebox-dim { color: var(--text-dim); font-size: 11px; }
.homebox-empty { color: var(--text-dim); }
.homebox-stats #totals { font-weight: 700; color: var(--mc-text); }

.featured-name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--mc-text);
  margin-bottom: 3px;
}

.featured-addr { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.featured-addr .srv-addr { color: var(--mc-orange); font-weight: 700; font-family: var(--font); font-size: 12px; }

.featured-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  margin: 0;
  font-size: 11.5px;
}
.featured-kv dt { color: var(--text-dim); }
.featured-kv dd { margin: 0; font-weight: 600; }

.mini-form { display: flex; gap: 6px; margin-bottom: 6px; }
.mini-form input { flex: 1; min-width: 0; font-family: var(--mono); }

.check-out { border-radius: 0; margin: 0 0 12px; font-size: 12px; }

@media (max-width: 820px) {
  .homeboxes { grid-template-columns: 1fr; }
  .homebox { min-height: 0; }
}

/* ---------- server table ---------- */

.list-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}

.list-search { flex: 1 1 260px; }
.list-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.list-toggle input { width: auto; margin: 0; accent-color: var(--mc-blue); }

.table-scroll { border: 1px solid var(--mc-line); }

.list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.list-table thead th {
  height: 28px;
  padding: 0 6px;
  background: linear-gradient(180deg, #f3f8fa 0%, #dbe8ed 100%);
  border-bottom: 1px solid var(--mc-line);
  color: #000;
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.list-table thead button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.list-table thead button:hover { color: var(--mc-orange-hi); text-decoration: underline; }
.list-table thead button.is-sorted { color: var(--mc-orange); }
.list-table thead button.is-sorted::after { content: " \25BC"; font-size: 8px; vertical-align: 1px; }

.list-table tbody tr { height: 24px; border-bottom: 1px solid var(--mc-row-line); }
.list-table tbody tr:hover { background: var(--mc-blue-soft); }

.list-table td {
  padding: 2px 6px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3;
}

/* Featured: yellow row ("promoted"), plus an orange bar
   on the left, a gold star and a bold name. Color alone gets lost among 50 rows. */
.list-table tbody tr.is-promoted {
  background: linear-gradient(90deg, #ffef8a 0%, var(--mc-promo) 35%, var(--mc-promo) 100%);
  border-bottom-color: var(--mc-promo-line);
}
.list-table tbody tr.is-promoted:hover { background: #fdf088; }
.list-table tbody tr.is-promoted td:first-child { box-shadow: inset 4px 0 0 var(--mc-orange-hi); }
.list-table tbody tr.is-promoted .srv-name { font-weight: 700; color: #5a3d00; }
.list-table tbody tr.is-promoted.is-off td:first-child { box-shadow: inset 4px 0 0 #e7c07a; }

.list-table tbody tr.is-off { opacity: 1; color: #8a9aa2; }
.list-table tbody tr.is-off .srv-addr { color: #9a7a6c; }

.list-table .col-flag { width: 28px; text-align: center; padding-left: 8px; }
.list-table .col-flag .flag-svg { box-shadow: 0 0 0 1px #376680; border-radius: 0; }

.list-table .col-ip { width: 1%; }

/* The address is the main link: orange and bold. */
.list-table .srv-addr,
.upcoming-table .srv-addr {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-orange);
  margin: 0;
}
.list-table .srv-addr:hover,
.upcoming-table .srv-addr:hover { color: var(--mc-orange-hi); text-decoration: underline; }

.list-table .col-out { width: 16px; padding: 0 2px; }

/* "Server page" icon drawn in CSS: a square with an arrow. */
.srv-out {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7' fill='none' stroke='%232c5b76' stroke-width='1.3'/%3E%3Cpath d='M7 1.5h3.5V5M10.5 1.5 5.5 6.5' fill='none' stroke='%23cf5626' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.srv-out:hover { filter: brightness(1.2); }

.list-table .col-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.list-table .srv-name { font-weight: 400; font-size: 12px; color: inherit; }

.srv-off-label {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid #d9b8ab;
  color: #b0573a;
  font-size: 10px;
  text-transform: uppercase;
}

.list-table .col-players,
.list-table .col-uptime,
.list-table .col-points,
.list-table .col-exp { white-space: nowrap; }

.list-table .col-uptime.is-low { color: #b86b00; }

.list-table .col-points a { color: inherit; font-weight: 700; }
.list-table .col-points a:hover { color: var(--mc-orange-hi); }

.list-table .col-client { font-family: var(--font); color: inherit; font-size: 12px; }

.list-table .srv-msg { text-align: center; padding: 18px 10px; color: var(--text-dim); white-space: normal; }

@media (max-width: 760px) {
  .list-table .col-client,
  .list-table .col-pvp,
  .list-table .col-out { display: none; }
}

@media (max-width: 560px) {
  .list-table .col-exp,
  .list-table .col-uptime,
  .list-table .col-name { display: none; }
}

/* ---------- starting soon ---------- */

.upcoming-table {
  margin: 0 0 12px;
  border: 1px solid var(--mc-line);
}

.upcoming-table caption {
  caption-side: top;
  text-align: left;
  padding: 5px 8px;
  background: linear-gradient(180deg, #4b7f9b 0%, var(--mc-blue) 100%);
  color: #fff;
  font-weight: 700;
}

.upcoming-table tbody tr { background: var(--mc-promo); height: 28px; }
.upcoming-table td { padding: 3px 8px; }
.upcoming-table .upcoming-desc { white-space: normal; }
.upcoming-table .upcoming-desc .srv-name { color: var(--mc-orange); font-weight: 700; }
.upcoming-table .upcoming-when { width: 130px; text-align: center; white-space: nowrap; }
.upcoming-table .upcoming-time { color: #000; font-size: 12px; }

/* ---------- paging ---------- */

.pager {
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
}

.pager:empty { display: none; }

.pager-label { font-weight: 700; margin-right: 6px; color: var(--mc-blue); }

.page-btn {
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--mc-blue);
  border-radius: 0;
  background: #fff;
  color: var(--mc-blue);
  font-size: 12px;
  line-height: 1.3;
}
.page-btn:hover:not(:disabled) { background: var(--mc-blue); color: #fff; }
.page-btn.is-active { background: var(--mc-blue); border-color: var(--mc-blue); color: #fff; }
.page-btn:disabled { opacity: .35; }
.page-btn.is-active { font-weight: 700; min-width: 30px; }

/* Page bar with a range and a 50/100 choice (ranking, players). */
.pager-bar { justify-content: space-between; gap: 8px 16px; padding: 6px 0; }
.pager-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.pager-side { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--text-dim); margin-left: auto; }
.pager-side > span:first-child { margin-right: 8px; font-variant-numeric: tabular-nums; }

/* Skipped pages between numbers: "1 … 5 6 7 … 37". */
.page-gap { padding: 0 5px; color: var(--mc-blue); font-weight: 700; letter-spacing: 1px; user-select: none; }

/* ---------- footer ---------- */

.site-foot {
  margin-top: 0;
  padding: 14px 0 18px;
  background: linear-gradient(180deg, #dbe8ed 0%, #c7dbe2 100%);
  border: 1px solid var(--mc-line);
  border-top: 2px solid var(--mc-blue);
  backdrop-filter: none;
  color: var(--mc-text);
  font-size: 11px;
}

.site-foot p { font-weight: 700; }

.foot-nav { gap: 0; }
.foot-nav a {
  color: var(--mc-orange-hi);
  padding: 0 8px;
  border-left: 1px solid var(--mc-blue);
  line-height: 1.1;
}
.foot-nav a:first-child { border-left: 0; }
.foot-nav a:hover { color: var(--mc-orange); text-decoration: underline; }

/* ---------- server page ---------- */

.srv-header {
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, #ffffff 0%, #eef5f7 100%);
  border: 1px solid var(--mc-line);
  margin: 0 0 8px;
  padding: 8px 12px;
}

.srv-header-main h1 { font-size: 16px; color: var(--mc-text); display: flex; align-items: center; gap: 7px; }
.srv-header-addr { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--mc-orange); }
.state-badge { border-radius: 2px; font-size: 11px; padding: 4px 9px; }
.srv-header-players { font-size: 13px; }

/* Tabs like folders: the active one merges with the content below. */
.tab-bar {
  border: 0;
  border-bottom: 1px solid var(--mc-line);
  border-radius: 0;
  background: none;
  padding: 0;
  gap: 2px;
  margin-bottom: 10px;
}

.tab-bar .btn {
  border: 1px solid var(--mc-line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #e8f1f4;
  color: var(--mc-blue);
  margin-bottom: -1px;
}

.tab-bar .btn.is-active {
  background: #fff;
  color: var(--mc-orange);
  border-bottom: 1px solid #fff;
}

.tab-bar-sm .btn { background: #f3f8fa; }

/* Summary: a key: value table instead of tiles. */
.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 1px solid var(--mc-line);
  border-right: 0;
  border-bottom: 0;
  margin-bottom: 10px;
}

.stat-tile {
  border: 0;
  border-right: 1px solid var(--mc-line);
  border-bottom: 1px solid var(--mc-line);
  padding: 6px 9px;
}

.stat-label { font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.stat-value { font-size: 14px; font-weight: 700; color: var(--mc-text); }
.stat-sub { font-size: 10.5px; }

.kv {
  grid-template-columns: 170px 1fr;
  gap: 0;
  font-size: 12px;
  border-top: 1px solid var(--mc-row-line);
}

.kv dt,
.kv dd {
  padding: 4px 8px;
  border-bottom: 1px solid var(--mc-row-line);
}

.kv dt { font-weight: 700; color: var(--mc-text); background: #f5f9fa; }

.server-desc { font-size: 12.5px; max-height: none; }

.motd-item,
.sig-box { border-radius: 0; }

/* ---------- panel moderacji ---------- */

.srv-row.is-promoted { background: var(--mc-promo); border-color: var(--mc-promo-line); }
.promo-note { font-size: 11.5px; font-weight: 700; color: #7a6400; }

/* ---------- ranking as a table ---------- */

.rank-table .col-rank { width: 34px; text-align: right; font-weight: 700; color: var(--text-dim); }
.rank-table tbody tr.is-top .col-rank { color: var(--mc-orange); }
.rank-table .col-value { text-align: right; font-weight: 700; padding-right: 10px; }
.rank-table thead .col-value { text-align: right; }

/* "Featured" badge next to the name on the server page */
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid #e0b640;
  background: linear-gradient(180deg, #fff6c2, #ffe27a);
  color: #6b4a00;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.promo-badge .promo-star { margin: 0; }

/* Gold star of a featured server: shape from clip-path, no emoji or images.
   Every few seconds it flashes briefly to catch the eye; no animation for those
   who turned animations off in the system. */
.promo-star {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: linear-gradient(135deg, #fff1a8 0%, #ffc61a 45%, #e08a00 100%);
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68.5% 57%, 79.5% 91%, 50% 70%, 20.5% 91%, 31.5% 57%, 2% 35%, 38.2% 35%);
  animation: promo-shine 5s ease-in-out infinite;
}
@keyframes promo-shine {
  0%, 86%, 100% { filter: none; transform: none; }
  92% { filter: brightness(1.35) saturate(1.2); transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-star { animation: none; }
}

/* Featured server page: gold header frame. */
.srv-header.is-promoted {
  border-color: #e0b640;
  box-shadow: inset 4px 0 0 var(--mc-orange-hi);
  background: linear-gradient(90deg, #fff9d9 0%, #ffffff 60%);
}

/* "Featured server" tile: star before the name, in the same line. */
#featured .promo-star { width: 14px; height: 14px; }
#featured .promo-star + .featured-name { display: inline; }
#featured .promo-star + .featured-name + .featured-addr { margin-top: 3px; }

.srv-header-main h1 .srv-name { font-size: 16px; font-weight: 700; color: var(--mc-text); }

/* Starting soon on a phone: description in two lines, the rest in a tooltip and on the server page. */
@media (max-width: 560px) {
  .upcoming-table .upcoming-desc .srv-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .upcoming-table .upcoming-when { width: auto; }
}

/* ---------- fixes visible in the new look ---------- */

/* The hidden attribute always wins. Rules like ".toolbar { display: flex }"
   had the same weight as the default [hidden] and showed the moderation panel
   filters even before login. */
[hidden] { display: none !important; }

/* Events to watch: ".field label" set display:block and the description
   got glued with the label into one line. */
.field label.watch-event {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
  color: var(--text);
  font-weight: 400;
  background: #fff;
  border-radius: 0;
}
.watch-event-label { font-size: 12.5px; }
.watch-event-hint { font-size: 11.5px; font-weight: 400; }

/* Lists in the rules cards and the 404 page: an inline style zeroes the indent,
   so the bullets hung outside the frame. */
ul.info-card { padding-left: 20px !important; }
ul.info-card li { margin-bottom: 4px; }

/* Comparison: wider select fields, name in one line, address below it. */
.pick-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-height: 320px; }
.pick-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 7px;
  align-items: center;
  border-radius: 0;
  font-size: 12px;
}
.pick-item input { grid-row: 1 / span 2; }
.pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pick-item small { grid-column: 2; margin-left: 0; font-family: var(--font); color: var(--mc-orange); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Server page on a phone: four buttons do not fit in a row. */
.srv-header-actions { flex-wrap: wrap; }
/* Server name in one line: when there are many buttons, they move to a second row,
   instead of squeezing the name. */
.srv-header-main { flex: 1 1 320px; }
.srv-header-main h1 .srv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .srv-header-actions { width: 100%; }
  .srv-header-players { width: 100%; }
}

/* Entry claim by the owner: code to put in the MOTD or on a page. */
.claim-code-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 12px; }
.claim-code-label { font-weight: 700; color: var(--mc-navy, #1d3a52); }
.claim-code {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 18px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 12px; background: #fff8d6; border: 1px dashed #d7b84a; color: #5a4300;
  user-select: all;
}
.claim-step { margin: 10px 0; }
.claim-step p { margin: 6px 0; }
.claim-sample {
  margin: 6px 0; padding: 8px 10px; background: #f3f6f9; border: 1px solid var(--line);
  font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 13px; white-space: pre-wrap; word-break: break-all;
}
.claim-token {
  display: block; margin: 8px 0 10px; padding: 6px 10px; background: #fff; border: 1px solid var(--line);
  font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 14px; word-break: break-all; user-select: all;
}
.src-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--line); color: var(--text-dim); text-transform: uppercase; letter-spacing: .3px;
}
.import-sources { display: grid; gap: 6px; margin: 10px 0; }
.import-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); background: #fff; }
.import-source .import-name { font-weight: 700; min-width: 150px; }
.import-source .import-result { color: var(--text-dim); font-size: 12px; }
.import-source.is-blocked { background: #faf6ee; }

/* ---------- ads ---------- */
.ad-strip {
  margin: 0 0 10px; padding: 6px; border: 1px solid var(--mc-promo-line, #efe08a); background: #fffdf0;
}
.ad-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 5px; }
.ad-label {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px;
}
/* Grid of 4 per row; 2 on a narrow screen, 1 on a phone. */
.ad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 900px) { .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ad-grid { grid-template-columns: 1fr; } }
.ad-item {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 50px;
  padding: 5px 9px; border: 1px solid var(--mc-line, var(--line)); background: #fff; color: var(--text);
}
.ad-item.is-free { border-style: dashed; background: transparent; justify-content: center; }
.ad-item.is-free .ad-title { color: var(--text-dim); font-weight: 600; }
.ad-item.is-free .ad-text { white-space: normal; }
.ad-item.is-free:hover .ad-title { color: var(--mc-orange, var(--accent)); }
.ad-item:hover { border-color: var(--mc-orange, var(--accent)); text-decoration: none; }
.ad-title { color: var(--mc-orange, var(--accent)); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-text { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-addr { font-size: 11px; color: var(--mc-blue, var(--accent)); font-weight: 700; }
.ad-item.is-house { background: #fbfdff; }
.ad-own { font-size: 11px; white-space: nowrap; }
.ad-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: stretch; margin-bottom: 10px; }
.ad-offer .panel { margin: 0; }
.ad-points { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.ad-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ad-price {
  display: flex; flex-direction: column; align-items: center; min-width: 110px;
  padding: 8px 14px; border: 1px solid var(--mc-line, var(--line)); background: #fff;
}
.ad-price-days { font-size: 12px; color: var(--text-dim); }
.ad-price-sum { font-size: 18px; color: var(--mc-orange, var(--accent)); }
.ad-code { display: inline-block; margin: 2px 0 8px; }
.ad-method { margin: 6px 0; font-size: 13px; }
.ad-row-meta { font-size: 12px; color: var(--text-dim); }

/* ---------- server summary: now, availability, players, server ---------- */

.sum-top {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sum-top .panel { margin: 0; }

.tab-panel[data-panel="summary"] > .panel + .panel,
.tab-panel[data-panel="summary"] > .sum-top + .panel { margin-top: 12px; }

.now-big {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.now-big strong { font-size: 32px; line-height: 1.1; color: var(--good); letter-spacing: -.02em; }
.now-big span { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.now-big.is-off strong { color: var(--bad); font-size: 26px; text-transform: uppercase; }
.now-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.now-track { display: block; margin-top: 4px; }
.now-sub { font-size: 11px; color: var(--text-dim); margin: 3px 0 10px; }
.now-kv { grid-template-columns: auto 1fr; }
.now-kv dt { background: transparent; font-weight: 600; }
.now-kv dd { text-align: right; font-variant-numeric: tabular-nums; }

.chart.chart-mini { height: 150px; }
.sum-note { margin: 6px 0 0 !important; }

.up-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px 110px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
}

.up-name { font-weight: 700; color: var(--mc-text); }
.up-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--mc-text); }
.up-sub { font-size: 11px; color: var(--text-dim); }

.up-track {
  position: relative;
  height: 10px;
  background: #e5edf0;
  border: 1px solid #d3e0e5;
  overflow: hidden;
}

.up-fill { position: absolute; inset: 0 auto 0 0; background: var(--good); }
.up-fill.is-warn { background: var(--warn); }
.up-fill.is-bad { background: var(--bad); }

.day-strip-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-text);
}

.day-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 400; color: var(--text-dim); font-size: 11px; }
.day-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.day-legend .day-cell { width: 11px; height: 11px; }

.day-strip {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
}

.day-cell {
  display: inline-block;
  height: 22px;
  background: #e5edf0;
  border: 1px solid #d3e0e5;
}

.day-cell.is-on { background: var(--good); border-color: #178246; }
.day-cell.is-on.is-warn { background: var(--warn); border-color: #a86c02; }
.day-cell.is-on.is-bad { background: var(--bad); border-color: #b8323c; }

.day-strip-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 3px;
}

.rate-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 8px 0 12px; }
.rate-tile .stat-value { font-size: 20px; color: var(--mc-orange); }

.kv-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin-top: 8px;
}

.kv-col h3 {
  margin: 0 0 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.kv-col .kv { grid-template-columns: 150px 1fr; }
.kv-col .kv dd { overflow-wrap: anywhere; }
.kv-col .flag-svg { vertical-align: -1px; }

/* Flag before the server name in player tables and on the character card: with a gap,
   otherwise it sticks to the first letter. */
.srv-table td > .flag-svg,
.player-where > .flag-svg,
#card-where > .flag-svg { margin-right: 6px; vertical-align: -1px; }

/* Names on bar charts (stats): a wider column, so
   "BungeeCord (Velocity)" does not end with an ellipsis. */
.bar-row { grid-template-columns: minmax(108px, 170px) minmax(0, 1fr) 44px 118px; }
.bar-players { white-space: nowrap; }
#player-levels .bar-row { grid-template-columns: 70px minmax(0, 1fr) 44px; }
@media (max-width: 560px) {
  .bar-row { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 38px; }
}

@media (max-width: 820px) {
  .sum-top, .kv-cols { grid-template-columns: 1fr; }
  .kv-col + .kv-col { margin-top: 12px; }
  .up-row { grid-template-columns: 50px 1fr 64px; }
  .up-sub { display: none; }
  .day-cell { height: 16px; }
  .day-strip { gap: 2px; }
}

/* ---------- komunikat administratora (plik .env, MC_NOTICE_*) ---------- */

.notice {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 11px 44px 11px 16px;
  border: 1px solid #9cc3e0;
  border-left: 5px solid var(--accent);
  background: #eef6fd;
  color: var(--mc-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.notice[hidden] { display: none; }
.notice-text { flex: 1 1 320px; font-weight: 600; text-align: center; }
.notice-warn { border-color: #e7cf8a; border-left-color: var(--warn); background: #fff8e1; }
.notice-ok { border-color: #a9dcbc; border-left-color: var(--good); background: #eaf8ef; }

.notice-more {
  flex: 0 0 auto;
  padding: 3px 11px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-orange);
  text-decoration: none;
  background: #fff;
}

.notice-more:hover { background: var(--mc-orange); border-color: var(--mc-orange); color: #fff; }

.notice-close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .55;
}

.notice-close:hover { opacity: 1; }

/* Cross drawn with CSS, no characters or images. */
.notice-close::before,
.notice-close::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 4px;
  width: 16px;
  height: 2px;
  background: var(--mc-text);
  transform: rotate(45deg);
}

.notice-close::after { transform: rotate(-45deg); }

/* ---------- ranking: server mode bar (PVP, nPVP, ...) ---------- */

.mode-bar { align-items: center; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.mode-label { font-size: 12px; font-weight: 700; color: var(--mc-text); margin-right: 4px; }
.mode-bar .btn { gap: 6px; }
.mode-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--mc-blue);
  background: var(--mc-blue-soft);
}
.mode-bar .btn.is-active .mode-count { background: var(--mc-orange); color: #fff; }
.mode-bar .btn:disabled { opacity: .45; cursor: default; }

/* ---------- Minecraft: icon, message of the day, edition ---------- */
.mc-icon { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; border-radius: 3px; background: #e8eef0; flex: none; }
.mc-icon.is-big { width: 64px; height: 64px; border-radius: 4px; }
.mc-motd { font-family: var(--mono); font-size: 12px; color: #3a3a3a; line-height: 1.45; overflow-wrap: anywhere; }
.mc-motd-box { display: block; padding: 8px 10px; background: #f6f8f9; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mc-ed { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: .2px; vertical-align: middle; }
.mc-ed.is-java { background: #e6f2e2; color: #2f6b23; border: 1px solid #b9d9ae; }
.mc-ed.is-bedrock { background: #e8eef8; color: #2d4f86; border: 1px solid #b7c7e3; }
.mc-copy { cursor: pointer; }
.mc-copy.is-copied { color: var(--good) !important; }

/* == MC:a1-list == */
/* A1: Minecraft server list */
.list-table { table-layout: auto; width: 100%; }
.list-table .col-ip { max-width: 170px; }
.list-table button.srv-addr {
  position: relative; background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block; vertical-align: middle;
}
.list-table button.srv-addr.is-copied { overflow: visible; }
.list-table button.srv-addr.is-copied::after {
  content: attr(data-copied); position: absolute; left: 0; top: -20px; z-index: 5;
  background: #2f7d32; color: #fff; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px; white-space: nowrap; pointer-events: none;
}
.list-table .col-icon { width: 24px; padding: 0 2px; }
.list-table .col-icon .mc-icon { display: block; width: 20px; height: 20px; image-rendering: pixelated; }
.list-table .col-name { max-width: 250px; min-width: 140px; }
.list-table .srv-name-line { gap: 5px; min-width: 0; }
.list-table .srv-name-line .srv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list-table .srv-name-line .mc-ed, .list-table .srv-name-line .srv-off-label { flex: none; margin-left: 0; }
.list-table .srv-motd {
  display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; line-height: 1.35; overflow-wrap: normal;
}
.list-table .col-players { font-variant-numeric: tabular-nums; }
.list-table .col-pvp, .list-table .col-client { white-space: nowrap; }
.check-ed { display: flex; gap: 12px; margin: 6px 0 2px; font-size: 12px; }
.check-ed label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.check-out .mc-motd-box { margin: 8px 0; }
@media (max-width: 1100px) {
  .list-table .col-name, .list-table .srv-motd { max-width: 220px; }
}
@media (max-width: 760px) {
  .list-table .col-icon { display: none; }
}
@media (max-width: 560px) {
  .list-table .col-name { display: table-cell; min-width: 0; max-width: 130px; }
  .list-table .srv-motd { display: none; }
  .list-table .col-ip, .list-table button.srv-addr { max-width: 130px; }
}
/* == /MC:a1-list == */

/* == MC:d1-forms == */
.field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ed-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ed-switch label { margin: 0; cursor: pointer; }
.ed-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ed-switch span { display: inline-block; padding: 7px 18px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: #fff; }
.ed-switch label + label span { border-left: 1px solid var(--line); }
.ed-switch input:checked + span { background: var(--mc-blue); color: #fff; }
.ed-switch input:focus-visible + span { outline: 2px solid var(--mc-orange); outline-offset: -2px; }
.mc-preview { margin: 10px 0 14px; }
.mc-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mc-preview .kv { margin: 0 0 8px; }
.mc-preview .mc-motd-box { white-space: pre-wrap; }
#server-address .mc-ed { margin-left: 6px; }
/* == /MC:d1-forms == */

/* == MC:a2-server == */
/* A2: Minecraft server page */
.srv-header .mc-icon.is-big { margin-right: 4px; }
.srv-header-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.srv-header-addr code { font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--stripe, #f3f6f9); border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; }
.srv-header-addr .mc-copy { padding: 2px 8px; font-size: 11.5px; }
#sum-motd { margin: 8px 0 12px; }
#sum-motd .mc-sub { font-size: 13px; margin: 0 0 6px; }
#sum-motd .mc-motd-box { font-size: 13px; }
.mc-facts { margin-bottom: 14px; }
.mc-facts .stat-value.mc-fact { font-size: 16px; overflow-wrap: anywhere; }
.mc-player { display: inline-flex; align-items: center; gap: 6px; }
.mc-head { width: 16px; height: 16px; image-rendering: pixelated; border-radius: 2px; flex: none; }
@media (max-width: 560px) {
  .srv-header .mc-icon.is-big { width: 48px; height: 48px; }
}
.mc-now { white-space: nowrap; }
/* == /MC:a2-server == */

/* == MC:players-c == */
/* Players: heads from mc-heads.net */
.mc-head {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  border-radius: 2px;
  background: #b9c3cf linear-gradient(135deg, #c9d2dc 0 50%, #aab5c2 50% 100%);
  image-rendering: pixelated;
  object-fit: cover;
}
.mc-head.is-big {
  width: 64px;
  height: 64px;
  margin-right: 12px;
  vertical-align: middle;
  border-radius: 4px;
}
.mc-head.is-broken { color: transparent; font-size: 0; }
.srv-table .mc-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.pl-card-title { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pl-card-title .player-state { margin-right: 6px; }
.srv-table td.pl-nw { white-space: nowrap; }
/* == /MC:players-c == */

/* == MC:b-search-rank == */
/* B: wyszukiwarka, ranking, porównanie (Minecraft) */
.mc-search-table .col-icon, .mc-rank-table .col-icon { width: 40px; padding-right: 0; }
.mc-search-table .col-icon a, .mc-rank-table .col-icon a { display: inline-flex; }
.mc-search-table .col-name, .mc-rank-table .col-name { min-width: 0; max-width: 460px; }
.mc-search-table .srv-top, .mc-rank-table .srv-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-search-table .srv-top .srv-name, .mc-rank-table .srv-top .srv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mc-search-table .mc-copy, .mc-rank-table .mc-copy {
  display: inline-block; border: 0; background: none; padding: 0; margin: 1px 0 0;
  font: inherit; font-family: var(--mono); font-size: 12px; color: var(--mc-blue); text-align: left;
}
.mc-search-table .mc-copy:hover, .mc-rank-table .mc-copy:hover { text-decoration: underline; }
.mc-search-table .srv-motd-line {
  display: block; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px;
}
.mc-search-table td.col-ver, .mc-rank-table td.col-ver {
  font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare-table th .mc-icon { margin-right: 6px; }
.compare-table td .mc-motd { display: block; min-width: 180px; }
@media (max-width: 700px) {
  .mc-search-table .col-ver, .mc-search-table .col-uptime, .mc-rank-table .col-ver, .mc-rank-table .col-pvp { display: none; }
}
@media (max-width: 480px) {
  .mc-rank-table .col-players { display: none; }
  .mc-search-table .srv-motd-line { max-width: 200px; }
  .mc-search-table .col-name, .mc-rank-table .col-name { max-width: 200px; }
}
/* == /MC:b-search-rank == */

/* == MC:versions == */
/* List: bar split by game version (1.21, 1.20, ..., 1.8, Bedrock) */
.version-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 6px 8px; border: 1px solid var(--mc-line); background: #f7fafb; }
.version-bar[hidden] { display: none; }
.version-label { font-size: 12px; font-weight: 700; color: var(--mc-text); margin-right: 4px; }
.version-bar .btn { gap: 6px; padding: 3px 8px; }
.version-bar .btn.is-active { background: var(--mc-blue); border-color: var(--mc-blue); color: #fff; }
.version-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--mc-blue);
  background: var(--mc-blue-soft);
}
.version-bar .btn.is-active .version-count { background: var(--mc-orange); color: #fff; }
/* == /MC:versions == */

/* == MC:traits == */
/* Server feature badges (mcTraits in site.js). */
.mc-trait { display: inline-block; padding: 0 5px; margin-left: 3px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: middle; white-space: nowrap; border: 1px solid transparent; }
.mc-trait.is-cross { background: #e8f0fb; color: #25508f; border-color: #bcd0ee; }
.mc-trait.is-cracked { background: #fff3e0; color: #9a5a00; border-color: #f0d2a4; }
.mc-trait.is-premium { background: #f3ecfb; color: #5b3590; border-color: #d6c4ee; }
.mc-trait.is-lang { background: #f2f2f2; color: #555; border-color: #dcdcdc; letter-spacing: .3px; }
/* == /MC:traits == */

/* == MC:filters == */
/* Filter row under the version bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 6px 0;
  margin-top: 4px;
}

.filter-tog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.82rem;
  border-radius: 3px;
  border: 1px solid var(--line, #d8d8d8);
  background: var(--bg-card, #fff);
  cursor: pointer;
  transition: background .15s;
}
.filter-tog:hover { background: var(--bg-hover, #f4f4f4); }
.filter-tog.is-active {
  background: var(--mc-blue, #1f6fd0);
  color: #fff;
  border-color: var(--mc-blue, #1f6fd0);
}
.filter-tog.is-active .version-count { opacity: .85; }

.filter-lang-sel {
  font-size: 0.82rem;
  padding: 2px 4px;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 3px;
}

/* Server feature badges: look in the "traits" block (light, like the Java/Bedrock badge). */

/* Ranking of the month: winners */
.winners-section { margin: 1.5rem 0 1rem; }
.winners-title { font-size: 1rem; margin-bottom: 0.6rem; }
.winners-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.winners-month { background: var(--bg-card, #fff); border: 1px solid var(--line, #d8d8d8); border-radius: 4px; padding: 0.7rem 1rem; min-width: 200px; }
.winners-month-title { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.4rem; color: var(--text-dim, #888); }
.winners-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.winners-place { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.winners-medal { font-weight: 700; min-width: 1.5rem; color: var(--text-dim, #888); }
.winners-place-1 .winners-medal { color: #c98a00; }
.winners-place-2 .winners-medal { color: #6b6b6b; }
.winners-place-3 .winners-medal { color: #9e4e00; }
.winners-votes { color: var(--text-dim, #888); font-size: 0.8rem; }
/* == /MC:filters == */

/* == MC:versionpage == */
/* === versionpage === */
.version-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 16px; }
.version-nav-label { font-size: .85em; color: var(--text-dim); margin-right: 4px; }
.version-intro { margin: 0 0 16px; line-height: 1.6; }
.srv-traits { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.srv-version-line { font-size: .9em; margin: 4px 0; color: var(--text-dim); }
.srv-version-line a { color: var(--mc-blue); text-decoration: none; }
.srv-version-line a:hover { text-decoration: underline; }
.srv-version-group { font-weight: 600; }
.srv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.srv-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--line); font-size: .8em; color: var(--text-dim); text-decoration: none; }
.srv-tag:hover { background: var(--mc-blue); color: #fff; }
.field-sm { margin: 6px 0; }
.field-sm label { font-size: .85em; display: block; margin-bottom: 2px; color: var(--text-dim); }
.field-sm input { max-width: 200px; }
/* === /versionpage === */
/* == /MC:versionpage == */

/* == MC:owner2 == */
.panel-section {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0 0;
}
.panel-section legend {
  font-weight: 600;
  padding: 0 6px;
  font-size: 14px;
}
/* == /MC:owner2 == */

/* == MC:ads-board == */
/* Ads: board (adverts.html), order (ads.html), link in the bar on the home page. */
.ad-links { display: inline-flex; gap: 12px; align-items: center; }
.ad-board-link { font-weight: 700; }

.adv-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.adv-add { font-size: 14px; padding: 9px 18px; font-weight: 700; }
.adv-cats { flex-wrap: wrap; margin-bottom: 10px; }
.adv-cats .btn { display: inline-flex; gap: 4px; align-items: center; }
.adv-count { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.adv-cats .btn.is-active .adv-count { color: inherit; }

.adv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.adv-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text);
}
.adv-item:hover { border-color: var(--mc-orange, var(--accent)); text-decoration: none; }
.adv-item.is-featured { background: var(--mc-promo, #fff7b0); border-color: var(--mc-promo-line, #efe08a); }
.adv-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adv-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adv-title { color: var(--mc-orange, var(--accent)); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-badge {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #6b5200; background: #ffe36b; border: 1px solid #e3c23a; border-radius: 3px; padding: 0 5px;
}
.adv-text { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-foot { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }
.adv-kind { font-weight: 600; }
.adv-where { color: var(--mc-blue, var(--accent)); font-weight: 700; font-family: var(--mono); font-size: 11px; }
.adv-go {
  width: 12px; height: 12px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='%232c5b76' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.adv-item:hover .adv-go { opacity: 1; }
.adv-empty { text-align: center; }
.adv-empty .btn { margin-top: 4px; }

/* Kind icons: a colored square and a simple sign in SVG. */
.adv-icon {
  width: 40px; height: 40px; border-radius: 6px; display: block;
  background-color: #6b7c88; background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
.adv-icon-server { background-color: #5b8c32; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='12' height='12' fill='%238b5a2b'/%3E%3Crect x='2' y='2' width='12' height='4' fill='%2379c05a'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%2379c05a'/%3E%3Crect x='10' y='6' width='2' height='1' fill='%2379c05a'/%3E%3C/svg%3E"); }
.adv-icon-www { background-color: #2c5b76; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12'/%3E%3C/svg%3E"); }
.adv-icon-youtube { background-color: #e02b2b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 4v8l7-4z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-hosting { background-color: #4a5a66; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Crect x='2.5' y='2.5' width='11' height='4.5' rx='1'/%3E%3Crect x='2.5' y='9' width='11' height='4.5' rx='1'/%3E%3Cpath d='M5 4.75h.1M5 11.25h.1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.adv-icon-discord { background-color: #5865f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5C5 3 11 3 13 4.5c1 2 1.3 4.5 1 7-1.2 1-2.3 1.4-3.2 1.6l-.8-1.3c-1.3.4-2.7.4-4 0l-.8 1.3C4.3 12.9 3.2 12.5 2 11.5c-.3-2.5 0-5 1-7z' fill='%23fff'/%3E%3Ccircle cx='6' cy='8.3' r='1.1' fill='%235865f2'/%3E%3Ccircle cx='10' cy='8.3' r='1.1' fill='%235865f2'/%3E%3C/svg%3E"); }
.adv-icon-shop { background-color: #cf5626; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Cpath d='M3 5.5h10l-1 8H4z'/%3E%3Cpath d='M5.8 5.5V4a2.2 2.2 0 0 1 4.4 0v1.5'/%3E%3C/svg%3E"); }
.adv-icon-other { background-color: #7a6a9c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.6l-3.8 2 .7-4.3-3.1-3 4.3-.6z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-tiktok { background-color: #111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2h2c.2 1.6 1.2 2.6 2.8 2.8v2c-1.1 0-2-.3-2.8-.9V10.5A3.6 3.6 0 1 1 7.4 7v2.1a1.6 1.6 0 1 0 1.6 1.5z' fill='%2325f4ee' transform='translate(-.5 -.4)'/%3E%3Cpath d='M9 2h2c.2 1.6 1.2 2.6 2.8 2.8v2c-1.1 0-2-.3-2.8-.9V10.5A3.6 3.6 0 1 1 7.4 7v2.1a1.6 1.6 0 1 0 1.6 1.5z' fill='%23fe2c55' transform='translate(.5 .4)'/%3E%3Cpath d='M9 2h2c.2 1.6 1.2 2.6 2.8 2.8v2c-1.1 0-2-.3-2.8-.9V10.5A3.6 3.6 0 1 1 7.4 7v2.1a1.6 1.6 0 1 0 1.6 1.5z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-twitch { background-color: #9146ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5 2 4v9h3v2h2l2-2h2.5L14 10.5v-9z' fill='%23fff'/%3E%3Cpath d='M4 2.8h8.7v7.2l-1.8 1.8H8.2l-1.8 1.8v-1.8H4z' fill='%239146ff'/%3E%3Cpath d='M7 4.8h1.3v3.5H7zM10 4.8h1.3v3.5H10z' fill='%23fff'/%3E%3C/svg%3E"); }
.adv-icon-kick { background-color: #53fc18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h3.2v3.2h1.6V3.6h1.6V2H13v4.2h-1.6v1.6H9.8v.4h1.6v1.6H13V14H9.4v-1.6H7.8v-1.6H6.2V14H3z' fill='%23111'/%3E%3C/svg%3E"); }
.adv-icon-social { background-color: #1877f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Ccircle cx='4' cy='8' r='2'/%3E%3Ccircle cx='12' cy='3.8' r='2'/%3E%3Ccircle cx='12' cy='12.2' r='2'/%3E%3Cpath d='M4 8 12 3.8M4 8l8 4.2' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); }

@media (max-width: 560px) {
  .adv-item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .adv-icon { width: 32px; height: 32px; background-size: 18px 18px; }
  .adv-go { display: none; }
  .adv-text { white-space: normal; }
}

/* ads.html: dwa miejsca obok siebie. */
.ad-place-tag { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--mc-orange, var(--accent)); }
.ad-place-board .ad-place-tag { color: var(--good); }
.ad-place-home { border-top: 3px solid var(--mc-orange, var(--accent)); }
.ad-place-board { border-top: 3px solid var(--good); }
.ad-offer .ad-prices { margin-top: 10px; }
.ad-free-count { font-weight: 700; }
.ad-free-count.is-full { color: var(--bad); }
.field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
#ad-places, #ad-kinds { flex-wrap: wrap; }
#ad-places .btn.is-off, #ad-places .btn:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.ad-full { margin-top: 6px !important; color: var(--bad) !important; }

/* rules.html: subtitles in the Ad rules section. */
.rules-sub { font-size: 13px; margin: 12px 0 6px; }
/* == /MC:ads-board == */

/* == MC:eagle == */
/* Player reviews and highlight levels (glow, featured, top). Agent eagle block. */

/* ---------- rating stars: five stars from an SVG mask, fill by --rv (0-5) ---------- */
.rv-stars {
  --rv: 0;
  --rv-size: 13px;
  display: inline-block;
  flex: none;
  width: calc(var(--rv-size) * 5);
  height: var(--rv-size);
  vertical-align: -2px;
  background: linear-gradient(90deg, #f0a800 calc(var(--rv) * 20%), #cfd8de calc(var(--rv) * 20%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L10 15l-5.4 2.9 1.1-6.1L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") left center / var(--rv-size) var(--rv-size) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L10 15l-5.4 2.9 1.1-6.1L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") left center / var(--rv-size) var(--rv-size) repeat-x;
}
.rv-stars.is-big { --rv-size: 22px; }

/* Average in a list row: a small star and a number. */
.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border: 1px solid #ecd48a;
  background: #fffaf0;
  color: #7a5200;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}
.rv-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #f0a800;
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68.5% 57%, 79.5% 91%, 50% 70%, 20.5% 91%, 31.5% 57%, 2% 35%, 38.2% 35%);
}
.rv-chip:hover { border-color: #f0a800; text-decoration: none; }

/* Link with stars in the server page header. */
.rv-head-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.rv-head-link b { color: var(--mc-text); font-size: 13px; }
.rv-head-link:hover { text-decoration: none; }
.rv-head-link:hover span:last-child { text-decoration: underline; }

/* ---------- Reviews tab ---------- */
.rv-summary {
  display: grid;
  grid-template-columns: 170px minmax(0, 320px);
  gap: 18px;
  align-items: center;
  padding: 4px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--mc-row-line);
}
.rv-avg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rv-avg-num { font-size: 34px; line-height: 1; color: var(--mc-text); }
.rv-hist { display: flex; flex-direction: column; gap: 3px; }
.rv-hist-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) 28px; gap: 6px; align-items: center; font-size: 11.5px; }
.rv-hist-label { color: var(--text-dim); font-weight: 700; text-align: right; }
.rv-hist-track { height: 8px; background: #edf1f4; border: 1px solid #dfe5ea; }
.rv-hist-fill { display: block; height: 100%; background: #f0a800; }
.rv-hist-num { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.rv-list { display: flex; flex-direction: column; }
.rv-item { padding: 10px 0; border-bottom: 1px solid var(--mc-row-line); }
.rv-item:last-child { border-bottom: 0; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-author { color: var(--mc-text); font-size: 13px; }
.rv-date { color: var(--text-dim); font-size: 11.5px; }
.rv-body { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.rv-reply {
  margin: 8px 0 0 18px;
  padding: 6px 10px;
  border-left: 3px solid var(--mc-blue);
  background: #f3f8fa;
  font-size: 12.5px;
}
.rv-reply b { color: var(--mc-blue); font-size: 11.5px; }
.rv-reply p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-reply-form { margin-top: 8px; }
.rv-reply-form textarea { min-height: 54px; }
.rv-reply-form .form-actions { margin-top: 6px; }

/* Rating choice: five stars. Order reversed, so :hover ~ lights up the stars on the left. */
.rv-pick { border: 0; padding: 0; margin: 0 0 10px; }
.rv-pick legend { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; padding: 0; }
.rv-pick-stars { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.rv-pick-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rv-pick-stars label {
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: #cfd8de;
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68.5% 57%, 79.5% 91%, 50% 70%, 20.5% 91%, 31.5% 57%, 2% 35%, 38.2% 35%);
  transition: background .1s, transform .1s;
}
.rv-pick-stars label:hover,
.rv-pick-stars label:hover ~ label,
.rv-pick-stars input:checked ~ label { background: #f0a800; }
.rv-pick-stars label:hover { transform: scale(1.1); }
.rv-pick-stars input:focus-visible + label { outline: 2px solid var(--mc-blue); outline-offset: 2px; }

@media (max-width: 560px) {
  .rv-summary { grid-template-columns: 1fr; gap: 10px; }
  .rv-reply { margin-left: 8px; }
}

/* == /MC:eagle == */

/* == MC:menu == */
/* Section tabs Search (Server | Player) and Ranking (Ranking | Online now | Stats),
   drawn by assets/nav.js under the page header. Look like .tab-bar, only links. */
.section-tabs { margin: 0 0 14px; }
.section-tabs a.btn { text-decoration: none; }
.section-tabs a.btn:hover { text-decoration: none; color: var(--mc-orange); }
.section-tabs a.btn.is-active { font-weight: 700; }

/* Footer: section subpages in one group with the section, separated by a dot instead of a dash. */
.foot-nav a.foot-sub { border-left: 0; padding-left: 0; }
.foot-nav a.foot-sub::before { content: "\00B7"; color: var(--text-dim); padding-right: 6px; }
/* == /MC:menu == */

/* == MC:kategorie == */
/* Category pages: /serwery, /serwery/skyblock (category.php) */
.cat-page h1 { margin: 12px 0 8px; }
.cat-intro { margin: 0 0 12px; line-height: 1.6; max-width: 900px; }
.cat-summary { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); }
.cat-table .cat-rank { width: 36px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cat-table .srv-name { font-weight: 700; }
.cat-table .cat-off { color: var(--text-dim); }
.cat-more { margin: 10px 0 0; }
.cat-groups h2 { margin: 0 0 8px; }
.cat-group + .cat-group { margin-top: 14px; }
.cat-group h3 { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.cat-links { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel, #fff); color: var(--text); font-size: 13px; text-decoration: none;
}
.cat-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.cat-link.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-link-count {
  min-width: 22px; padding: 0 5px; border-radius: 9px; text-align: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-dim);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cat-link.is-active .cat-link-count { background: rgba(255, 255, 255, .25); color: #fff; }
.cat-groups.is-index .cat-link { font-size: 14px; padding: 6px 12px; }
.cat-foot { margin: 16px 0 0; font-size: 13px; color: var(--text-dim); }
/* == /MC:kategorie == */

/* == MC:banery == */
/* Banner 468x60: server page, server panel (api/banner.php) */
.srv-banner { margin: 0 0 12px; text-align: center; }
.srv-banner img, .banner-preview img {
  display: inline-block; max-width: 100%; height: auto;
  border: 1px solid var(--line); background: #fff; image-rendering: auto;
}
.banner-preview { margin: 0 0 12px; }
.banner-preview .hint { margin: 6px 0 0; }
/* == /MC:banery == */

/* == MC:w4mcb-seo == */
/* SEO: visible heading and intro on the home page, breadcrumbs on the server page */
.home-intro { margin: 14px 0 12px; }
.home-intro h1 { font-size: 22px; margin: 0 0 6px; }
.home-intro-text { margin: 0 0 8px; color: var(--text-dim); font-size: 14px; line-height: 1.5; max-width: 900px; }
.cat-page-link { align-self: center; margin-left: 6px; font-size: 13px; white-space: nowrap; }
/* List chips are links (?v=1.21&page=1): button look, no underline. Next to them an arrow
   to the fixed category page (/serwery/skyblock, /wersja/1.21), joined with the chip into one tile. */
a.filter-tog, a.filter-tog:hover { text-decoration: none; color: inherit; }
a.filter-tog.is-active, a.filter-tog.is-active:hover { color: #fff; }
.chip-pair { display: inline-flex; align-items: stretch; }
.chip-pair > .filter-tog { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cat-page-arrow { display: inline-flex; align-items: center; padding: 0 6px; border: 1px solid var(--line, #d8d8d8); border-left: 0; border-radius: 0 3px 3px 0; background: #f7fafb; color: var(--mc-blue); font-weight: 700; text-decoration: none; }
.cat-page-arrow:hover { background: var(--mc-blue); color: #fff; text-decoration: none; }
/* Main list page numbers are links: look like page buttons, inactive ones grey. */
a.page-btn { display: inline-block; text-align: center; text-decoration: none; }
a.page-btn:hover { text-decoration: none; }
span.page-btn.is-off { display: inline-block; text-align: center; opacity: .35; }
#rows[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
/* Phone (390 px): version, mode and filter bars in one line scrolled sideways,
   instead of five lines of chips above the list. */
@media (max-width: 600px) {
  #versions, #modes, #filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #versions > *, #modes > *, #filter-bar > * { flex: 0 0 auto; }
  #pager-top .pager-side, #pager .pager-side { margin-left: 0; }
}
.srv-crumbs { margin: 12px 0 8px; }
.srv-crumbs .srv-name { color: var(--text); }
@media (max-width: 600px) {
  .home-intro h1 { font-size: 19px; }
  .home-intro-text { font-size: 13px; }
}
/* == /MC:w4mcb-seo == */

/* == MC:mc-tabele == */
/* Table sorting (sortableTable in site.js) and the Reviews column. MC TABLES block (wave 4). */

/* Header as a button: looks like normal header text. */
.sort-btn,
.list-table thead th[data-sort-key] > button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  white-space: nowrap;
}
.sort-btn:hover { text-decoration: underline; }
.sort-btn:focus-visible { outline: 2px solid var(--mc-orange, #e08a00); outline-offset: 2px; }
.srv-table thead .sort-btn.is-sorted { color: var(--accent); }

/* Arrow: a triangle from border, no characters. Replaces the old text arrow. */
.list-table thead button.is-sorted::after,
.srv-table thead button.is-sorted::after,
.sort-btn.is-sorted::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: 0;
  font-size: 0;
}
.list-table thead button.is-sorted.is-asc::after,
.srv-table thead button.is-sorted.is-asc::after,
.sort-btn.is-sorted.is-asc::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}

/* Reviews column: small stars, average and count. */
.col-rating { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-size: 11.5px;
  white-space: nowrap;
}
a.rv-cell:hover { text-decoration: none; }
a.rv-cell:hover .rv-num { text-decoration: underline; }
.rv-cell .rv-stars, .col-rating .rv-stars { --rv-size: 10px; vertical-align: -1px; }
.rv-num { font-weight: 700; }
.rv-count { font-weight: 400; color: var(--text-dim); }
.rv-none { color: var(--text-dim); }

/* Narrow screen: the stars disappear, the number stays; on a phone the whole column hides
   (the rating is on the server page), so the table does not go off screen. */
@media (max-width: 760px) {
  .col-rating .rv-stars { display: none; }
}
@media (max-width: 560px) {
  .list-table .col-rating { display: none; }
}
/* == /MC:mc-tabele == */

/* == MC:w5mca-styl == */
/* Wave 5, MC STYLE: footer in columns and category/version tiles. */

/* ---------- footer ---------- */
.site-foot { padding: 18px 0 16px; font-size: 13px; }
.foot-inner.foot-grid { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; }
.foot-inner.foot-grid > p {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--mc-line);
  font-size: 12px; font-weight: 600; color: var(--mc-text); text-align: center;
}
.foot-inner.foot-grid .foot-nav { display: block; width: 100%; }
.foot-nav .foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.foot-col { min-width: 0; }
.foot-title {
  margin: 0 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--mc-blue);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mc-text);
}
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li { margin: 0; padding: 0; }
.foot-nav .foot-col a {
  display: inline-block; padding: 3px 0; border: 0; line-height: 1.35;
  color: var(--mc-blue); font-size: 13px; cursor: pointer;
}
.foot-nav .foot-col a:hover { color: var(--mc-orange); text-decoration: underline; }
@media (max-width: 720px) {
  .foot-nav .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .foot-nav .foot-col a { padding: 5px 0; font-size: 14px; }
}

/* ---------- category and version tiles (shared look) ---------- */
.cat-link,
.version-nav a.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--mc-line); border-radius: 3px;
  background: #fff; color: var(--mc-text); font-size: 13px; font-weight: 600; line-height: 1.3;
  text-decoration: none; text-transform: none; white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}
.cat-link:hover,
.version-nav a.btn:hover {
  border-color: var(--mc-blue); background: #eef4f7; color: var(--mc-blue); text-decoration: none;
}
.cat-link:focus-visible,
.version-nav a.btn:focus-visible { outline: 2px solid var(--mc-orange); outline-offset: 1px; }
.chip-count,
.cat-link-count {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 0;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  color: var(--mc-blue); background: var(--mc-blue-soft); font-variant-numeric: tabular-nums;
}
.cat-link.is-active,
.version-nav a.btn.is-active { background: var(--mc-blue); border-color: var(--mc-blue); color: #fff; }
.cat-link.is-active .cat-link-count { background: var(--mc-orange); color: #fff; }
.cat-groups.is-index .cat-link { font-size: 14px; padding: 6px 11px; }
.cat-group h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mc-text);
}
.version-nav { gap: 6px; padding: 6px 8px; border: 1px solid var(--mc-line); background: #f7fafb; }
.version-nav-label { font-size: 12px; font-weight: 700; color: var(--mc-text); }
@media (max-width: 600px) {
  .version-nav { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- small subpage fixes ---------- */
/* Result counter next to the buttons (search.html): in one line with the buttons, not stuck to the top. */
.form-actions { align-items: center; }
.form-actions > .count { margin: 0 0 0 6px; }
/* add.html: the "Check server" button must not touch the "Name" label below. */
.form-actions + .mc-preview[hidden] + .field,
#check-btn { margin-bottom: 6px; }
/* subs.html: the "What to write about" box like a panel, without the browser's grey frame. */
fieldset.field { margin: 14px 0 0; padding: 10px 12px 12px; border: 1px solid var(--mc-line); }
fieldset.field > legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--mc-text); }
/* == /MC:w5mca-styl == */

/* == MC:w5-import-custom == */
/* Admin panel: own lists to import (api/importcustom.php) */
.ic-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 110px; gap: 8px 12px; align-items: end; }
.ic-form .hint, .ic-form .form-actions { grid-column: 1 / -1; margin: 0; }
.ic-lists { display: grid; gap: 8px; margin-top: 12px; }
.ic-row { flex-direction: column; align-items: stretch; }
.ic-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ic-url { font-size: 12px; word-break: break-all; }
.ic-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-sample { margin: 6px 0 0; padding-left: 18px; font-family: monospace; font-size: 12px; columns: 2; }
@media (max-width: 640px) {
  .ic-form { grid-template-columns: 1fr; }
  .ic-sample { columns: 1; }
}
.ic-form input[type="number"] { width: 100%%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); background: #fff; font: inherit; }
/* == /MC:w5-import-custom == */

/* == MC:pulpit == */
/* Panel dashboard: tiles with numbers and the hosting readiness list */
.dash-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.dash-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
}
.dash-tile .stat-value { overflow-wrap: anywhere; }
button.dash-tile:hover, button.dash-tile:focus-visible { border-color: var(--accent); outline: none; }
.dash-tile.is-todo { border-color: color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--bg-card)); }
.dash-tile.is-todo .stat-value { color: var(--warn); }
/* Stale measurement (more than 15 minutes) or paused: the same red warning as in ots-status. */
.dash-tile.is-warn { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 6%, var(--bg-card)); }
.dash-tile.is-warn .stat-value { color: var(--bad); }
.dash-notes .banner { margin-bottom: 12px; }
.ready-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.ready-item {
  display: grid; grid-template-columns: 76px minmax(160px, 240px) 1fr; gap: 10px; align-items: baseline;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13.5px;
}
.ready-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; text-align: center; }
.ready-item.is-ok .ready-tag { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.ready-item.is-warn .ready-tag { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ready-item.is-bad .ready-tag { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.ready-item.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.ready-text { color: var(--text-dim); }
/* Dashboard "Zadania cron": schedule fields as in the hosting Cron Jobs form, command, last run. */
.cron-table td { vertical-align: top; }
.cron-cmd { min-width: 260px; }
.cron-command { display: block; overflow-wrap: anywhere; font-size: 12.5px; padding: 4px 6px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cron-job.is-ok .cron-state { color: var(--good); }
.cron-job.is-bad .cron-state { color: var(--bad); }
.cron-job.is-warn .cron-state { color: var(--warn); }
@media (max-width: 640px) {
  .dash-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ready-item { grid-template-columns: auto 1fr; }
  .ready-text { grid-column: 1 / -1; }
  .cron-cmd { min-width: 200px; }
}
/* == /MC:pulpit == */

/* == MC:w6mcb-server == */
/* Server page: description from measurements and similar servers (wave 6, server.php). */
.auto-desc { margin: 0; line-height: 1.6; }
.auto-desc .flag-svg { vertical-align: -1px; }
.auto-desc-note { margin: 10px 0 0; }
.srv-similar h2 { margin-bottom: 10px; }
.similar-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
}
.similar-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line, #d6dde6); border-radius: 6px; background: var(--bg-card, #fff);
  min-width: 0;
}
.similar-item .flag-svg { grid-row: 1 / span 2; }
.similar-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.similar-meta { grid-column: 2; font-size: 13px; color: var(--muted, #5b6b7c); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.similar-players b { color: var(--good, #1f8a3a); }
.similar-more { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.similar-more > span:first-child { color: var(--muted, #5b6b7c); }
@media (max-width: 600px) {
  .similar-list { grid-template-columns: 1fr; }
}

/* Bedrock page: version groups (version.php). */
.bedrock-groups { margin: 4px 0 14px; }
.bedrock-groups-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted, #5b6b7c); margin-bottom: 6px; }
/* == /MC:w6mcb-server == */

/* == MC:rv-compact == */
/* Reviews column in tables: one gold star, average and count, e.g. 4,3 (4).
   Five stars took too much space and pushed the last columns off screen. */
.col-rating .rv-stars,
.rv-cell .rv-stars {
  --rv-size: 11px;
  width: var(--rv-size);
  background: #f0a800;
  vertical-align: -1px;
}
.col-rating { width: 1%; }
.rv-cell { gap: 3px; }
@media (max-width: 760px) {
  .col-rating .rv-stars,
  .rv-cell .rv-stars { display: inline-block; }
}
/* MC main list: the name with MOTD a bit narrower, so the Version column fits whole. */
@media (min-width: 1000px) {
  .list-table .col-name { max-width: 230px; }
  .list-table .col-ip { max-width: 160px; }
}
/* == /MC:rv-compact == */

/* == MC:w6-ui == */
/* Footer: one row of the most important links, no columns or separators. */
.foot-inner.foot-slim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; flex-direction: row-reverse; }
.foot-nav.foot-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav.foot-row a { padding: 0; border: 0; font-size: 13px; line-height: 1.5; cursor: pointer; }
.site-foot:has(.foot-slim) { padding: 12px 0; }

/* Ads: tabs Ads / Order an ad. */
.adv-tabs { margin-top: 4px; }
.adv-tabs .btn { font-size: 14px; font-weight: 700; padding: 6px 14px; }
.adv-panel[hidden] { display: none; }
/* == /MC:w6-ui == */

/* == MC:w6bot == */
/* Suspicious (artificially inflated) player count: a small grey "?" with a hint. */
.players-suspect {
  display: inline-block;
  min-width: 1.15em;
  height: 1.15em;
  line-height: 1.15em;
  margin-left: 4px;
  border-radius: 50%;
  background: #e4e4e4;
  color: #666;
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  cursor: help;
}
.now-big .players-suspect { font-size: 15px; margin-left: 8px; }
.now-suspect {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f4f4f4;
  color: #555;
  font-size: 0.9em;
  line-height: 1.4;
}
/* == /MC:w6bot == */

/* == MC:w6sug == */
/* Wave 6c: tabs in add.html and the list suggestion form (add.html#list). */
.add-views { margin: 4px 0 16px; }
.add-views a { text-decoration: none; }
.sug-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sug-rules { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; cursor: pointer; }
.sug-rules input { width: auto; margin-top: 3px; flex: none; }
@media (max-width: 600px) {
  .add-views { display: flex; }
  .add-views a { flex: 1 1 0; text-align: center; white-space: normal; }
}
/* == /MC:w6sug == */

/* == MC:w6spam == */
/* Reviews: "Voted" badge and the sentence about points under the server page buttons (wave 6, anti-spam). */
.rv-voted { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.vote-hint { flex-basis: 100%; margin-top: 4px; font-size: 11.5px; color: var(--text-dim); text-align: right; }
@media (max-width: 620px) { .vote-hint { text-align: left; } }
/* == /MC:w6spam == */

/* == MC:w6g-ads-390 == */
/* Ads panel on a phone: the order header (code, name, 3 badges) was
   one flex row without wrapping and stretched the page to about 403 px at 390. */
#ads-list .srv-name-line { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
#ads-list .srv-name-line strong { min-width: 0; overflow-wrap: anywhere; }
#ads-list .srv-name-line .pvp-tag { white-space: nowrap; }
#ads-list .srv-row, #ads-list .ad-row-meta, #ads-list .srv-desc { min-width: 0; overflow-wrap: anywhere; }
#ads-list .row-actions { flex-wrap: wrap; }
/* == /MC:w6g-ads-390 == */

/* ===== FALA 8: motyw Minecraft ===== */
/* Minecraft-style look: grass and dirt in the header, stone buttons
   like in the game menu (light top and dark bottom edge), panels like the inventory window,
   sky in the background and blocks drawn in assets/bg.js. Featured servers like a gold block.

   Block rules:
   - classes and HTML unchanged: only variables in :root and overriding rules below,
   - content and tables in a normal font (readability), a pixel accent only
     in headings: system monospace font + stepped shadow,
     no Google Fonts and no downloading anything,
   - text contrast at least 4.5:1 (WCAG AA), computed for each pair
     text color / background used below,
   - the same block layout as in ots-status (Tibia theme), so both projects
     can be compared and fixed the same way. */

:root {
  /* palette: grass, dirt, stone, sky, gold */
  --mcx-grass: #5fae36;
  --mcx-grass-hi: #7ccf4a;
  --mcx-grass-dark: #3a7022;     /* bialy tekst 5.8:1 */
  --mcx-dirt: #86603f;
  --mcx-dirt-dark: #5b3f26;
  --mcx-stone: #6f6f6f;          /* bialy tekst 5.0:1 */
  --mcx-stone-hi: #a8a8a8;
  --mcx-stone-lo: #464646;
  --mcx-slot: #c6c6c6;           /* grey button / inventory slot */
  --mcx-deep: #262626;           /* deepslate: top bar and footer */
  --mcx-ink: #1e1e1e;            /* czarna obwodka pikseli */
  --mcx-sky-1: #6fb3e6;
  --mcx-sky-2: #b8dcf5;
  --mcx-gold: #f9d93b;
  --mcx-gold-hi: #fff3a6;
  --mcx-gold-lo: #c99a00;
  --mcx-hover: #5b68a6;          /* bluish hover from the game menu, text #ffffa0 5.0:1 */
  --mcx-hover-text: #ffffa0;
  --mcx-pixel: "Lucida Console", "Consolas", "DejaVu Sans Mono", "Courier New", ui-monospace, monospace;

  /* variables of earlier layers switched to the new palette */
  --mc-blue: #3a7022;
  --mc-blue-dark: #2a5218;
  --mc-blue-soft: #e1edd6;
  --mc-line: #8f8f8f;
  --mc-row-line: #dcdcd4;
  --mc-orange: #9c4a14;          /* server addresses: 6.5:1 on white, 5.3:1 on a gold row */
  --mc-orange-hi: #b8541a;       /* 4.9:1 on white */
  --mc-promo: #fbe46a;
  --mc-promo-line: #cfa51c;
  --mc-page: #9cc9ec;
  --mc-frame: #f6f5ef;
  --mc-text: #1f3316;

  --bg: #f6f5ef;
  --bg-soft: #ffffff;
  --bg-card: #fbfbf8;
  --bg-card-2: #fbfbf8;
  --stripe: rgba(60, 50, 20, .035);
  --line: #9a9a92;
  --line-soft: #e1e0d8;
  --text: #1c1c1a;               /* 16:1 on the frame */
  --text-dim: #54574e;           /* 6.8:1 on the frame, 6.0:1 on a panel */
  --accent: #3a7022;
  --accent-2: #5fae36;
  --accent-soft: rgba(58, 112, 34, .12);
  --good: #2e7d32;               /* 5.1:1 */
  --warn: #9a5b00;               /* 5.6:1 */
  --bad: #c0282d;                /* 5.6:1 */
  --radius: 0;
  --radius-sm: 0;
  --panel: #fbfbf8;
}

/* ---------- background: sky, blocks drawn by bg.js ---------- */

body {
  background: var(--mcx-sky-2) linear-gradient(180deg, var(--mcx-sky-1) 0, #93c9ee 240px, var(--mcx-sky-2) 520px, var(--mcx-sky-2) 100%) no-repeat;
  background-attachment: fixed;
}

/* Background blocks are small and dimmed: visible on the sides of the frame, not under text. */
#bg { opacity: .5; image-rendering: pixelated; }

/* ---------- page frame ---------- */

main.wrap {
  background: var(--mc-frame);
  border-left: 3px solid var(--mcx-ink);
  border-right: 3px solid var(--mcx-ink);
  box-shadow: inset 3px 0 0 #fff, inset -3px 0 0 #c9c7bd;
}

a { color: #2a6318; }            /* 6.9:1 */
a:hover { color: var(--mc-orange); }

/* ---------- pixel accent in headings ---------- */

.hero h1,
.home-intro h1,
.cat-page h1,
#version-h1,
.hero-sub,
.panel h2,
.info-card h2,
.homebox-title,
.upcoming-table caption,
.foot-title,
.kv-col h3,
.cat-group h3,
.winners-title {
  font-family: var(--mcx-pixel);
  font-weight: 700;
  letter-spacing: .01em;
}

.hero h1,
.home-intro h1,
.cat-page h1,
#version-h1 {
  color: var(--mc-text);
  text-shadow: 2px 2px 0 rgba(58, 112, 34, .22);
  overflow-wrap: anywhere;
}

.panel h2,
.info-card h2 { color: var(--mcx-grass-dark); }

/* ---------- header: deepslate bar, grass and dirt, stone menu ---------- */

.head-top { background: var(--mcx-deep); color: #d9d9d9; border-bottom: 2px solid #000; }
.head-tagline { font-family: var(--mcx-pixel); font-size: 11px; color: #d9d9d9; }

/* Green grass bar with an uneven edge, dirt in a pixel grid below it.
   CSS only: gradients, no images. */
.head-inner {
  padding-top: 18px;
  border-left: 0;
  border-right: 0;
  border-bottom: 3px solid var(--mcx-dirt-dark);
  background:
    linear-gradient(180deg, var(--mcx-grass-hi) 0 3px, var(--mcx-grass) 3px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, var(--mcx-grass) 0 6px, transparent 6px 12px, var(--mcx-grass) 12px 15px, transparent 15px 27px, #4f9a2c 27px 30px, transparent 30px 36px) 0 9px / 100% 5px no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, .08) 50%, transparent 50%) 0 0 / 12px 12px,
    linear-gradient(0deg, rgba(255, 255, 255, .05) 50%, transparent 50%) 0 0 / 18px 18px,
    var(--mcx-dirt);
}

.brand,
.brand:hover {
  color: #fff;
  text-shadow: 2px 2px 0 #2e1f10;
  font-family: var(--mcx-pixel);
}
.brand-mark { image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35)); }

.head-search input[type="search"] { border: 2px solid #2e1f10; border-radius: 0; }
.head-adv, .head-adv:hover { color: #ffe9a8; text-shadow: 1px 1px 0 #2e1f10; }   /* 5.8:1 on dirt */

.head-menu {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .07) 50%, transparent 50%) 0 0 / 16px 16px,
    linear-gradient(0deg, rgba(255, 255, 255, .04) 50%, transparent 50%) 0 0 / 24px 24px,
    #3b3b3b;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.head-nav { gap: 4px; padding: 5px 4px; min-height: 0; }

/* Buttons from the game menu: grey stone, light top and left edge, dark bottom and right. */
.head-nav .btn,
.head-nav summary.btn {
  height: 30px;
  padding: 0 12px;
  border: 2px solid #000;
  border-radius: 0;
  background: var(--mcx-stone);
  color: #fff;
  text-shadow: 2px 2px 0 #333;
  box-shadow: inset 2px 2px 0 var(--mcx-stone-hi), inset -2px -2px 0 var(--mcx-stone-lo);
}

.head-nav .btn:hover,
.head-nav summary.btn:hover {
  background: var(--mcx-hover);
  color: var(--mcx-hover-text);
  box-shadow: inset 2px 2px 0 #8b97d4, inset -2px -2px 0 #3c4677;
}

.head-nav a.is-here,
.head-nav summary.is-here {
  background: #3a3a3a;
  color: var(--mcx-hover-text);
  box-shadow: inset 2px 2px 0 #1f1f1f, inset -2px -2px 0 #555;
}

.head-nav .btn-primary,
.head-nav .btn-primary:hover {
  background: var(--mcx-grass-dark);
  color: #fff;
  box-shadow: inset 2px 2px 0 #6fb24a, inset -2px -2px 0 #244a14;
}
.head-nav .btn-primary:hover { background: #427f27; color: var(--mcx-hover-text); }

@media (min-width: 761px) and (max-width: 1000px) {
  .head-nav .btn,
  .head-nav summary.btn { padding: 0 6px; }
}

.nav-more-list {
  border: 2px solid var(--mcx-ink);
  background: var(--mc-frame);
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #b9b7ad, 4px 4px 0 rgba(0, 0, 0, .25);
}
.nav-more-name { color: var(--mcx-grass-dark); }

/* ---------- buttons in content ---------- */

.btn {
  border: 2px solid var(--mcx-ink);
  border-radius: 0;
  background: var(--mcx-slot);
  color: #1b1b1b;                /* 11:1 */
  box-shadow: inset 2px 2px 0 #ececec, inset -2px -2px 0 #7d7d7d;
}
.btn:hover {
  border-color: var(--mcx-ink);
  background: #b7c1ec;
  color: #111;
  text-decoration: none;
  box-shadow: inset 2px 2px 0 #dfe5ff, inset -2px -2px 0 #6f7bb0;
}
.btn:active { box-shadow: inset -2px -2px 0 #ececec, inset 2px 2px 0 #7d7d7d; }

.btn-primary,
.btn-primary:hover {
  background: var(--mcx-grass-dark);
  border-color: var(--mcx-ink);
  color: #fff;
  text-shadow: 1px 1px 0 #1e3d10;
  box-shadow: inset 2px 2px 0 #6fb24a, inset -2px -2px 0 #244a14;
  filter: none;
}
.btn-primary:hover { background: #427f27; }

.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-dim); }
.btn-ghost:hover { background: var(--mcx-slot); border-color: var(--mcx-ink); color: #111; box-shadow: inset 2px 2px 0 #ececec, inset -2px -2px 0 #7d7d7d; }
.btn-ghost.is-active { background: var(--mcx-grass-dark); border-color: var(--mcx-ink); color: #fff; }

.btn-danger { color: #a01b1b; }
.btn-danger:hover { background: #f1c9c9; color: #7d1010; }

.btn:disabled,
.btn[disabled] { opacity: .55; cursor: default; }

.btn:focus-visible,
.page-btn:focus-visible,
.filter-tog:focus-visible,
.lang-opt:focus-visible { outline: 3px solid #ffd400; outline-offset: 1px; box-shadow: 0 0 0 5px var(--mcx-ink); }

/* ---------- form fields: like a text field in the game, but light ---------- */

input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  border: 2px solid #5a5a5a;
  border-radius: 0;
  background: #fff;
  box-shadow: inset 2px 2px 0 #e2e2e2;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--mcx-grass-dark);
  box-shadow: 0 0 0 3px rgba(95, 174, 54, .35);
}

/* ---------- panels like the inventory window ---------- */

.panel,
.info-card,
.srv-row,
.rank-row,
.card,
.srv-header,
.homebox,
.winners-month {
  border: 2px solid var(--mcx-ink);
  border-radius: 0;
  background: #ededea;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #a3a39b;
}

.homebox { background: #ededea; min-height: 0; }

/* Tile title like a grass bar over dirt. */
.homebox-title {
  background: linear-gradient(180deg, var(--mcx-grass-hi) 0 3px, var(--mcx-grass-dark) 3px 100%);
  color: #fff;
  text-shadow: 2px 2px 0 #1e3d10;
  border-bottom: 2px solid var(--mcx-ink);
  font-size: 12px;
}

.homebox-stats #totals,
.featured-name { color: var(--mc-text); }

.stat-grid { border-color: var(--mcx-ink); border-width: 2px 0 0 2px; }
.stat-tile { background: #fbfbf8; border-color: #b6b5ad; }
.stat-value { color: var(--mc-text); }

.kv dt { background: #efeee7; }

.check-out { border: 2px solid var(--mcx-ink); background: #fbfbf8; }

/* ---------- tables ---------- */

.table-scroll {
  border: 2px solid var(--mcx-ink);
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .15);
}

.list-table thead th,
.srv-table thead th {
  background: linear-gradient(180deg, #dedede 0, #c4c4c4 100%);
  border-bottom: 2px solid var(--mcx-ink);
  color: #111;                   /* 13:1 */
}

.list-table tbody tr:nth-child(even):not(.is-promoted),
.srv-table tbody tr:nth-child(even) { background: #f5f4ee; }
.list-table tbody tr:hover,
.srv-table tbody tr:hover { background: #e3eed8; }

.list-table .col-flag .flag-svg { box-shadow: 0 0 0 1px var(--mcx-ink); }

/* Featured (ad): row like a gold block, a thick gold strip on the left,
   the star darker than the background, so it stays visible on gold. */
.list-table tbody tr.is-promoted {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .35) 50%, transparent 50%) 0 0 / 8px 8px,
    linear-gradient(90deg, var(--mcx-gold) 0%, #fde978 40%, var(--mcx-gold-hi) 100%);
  border-bottom-color: var(--mc-promo-line);
}
.list-table tbody tr.is-promoted:hover { background: #fbe05a; }
.list-table tbody tr.is-promoted td:first-child { box-shadow: inset 5px 0 0 var(--mcx-gold-lo); }
.list-table tbody tr.is-promoted.is-off td:first-child { box-shadow: inset 5px 0 0 #d9bf6a; }
.list-table tbody tr.is-promoted .srv-name { color: #3d2c00; }   /* 11:1 on gold */
.list-table tbody tr.is-promoted .srv-addr { color: #7a3a0e; }   /* 7.0:1 on gold */

.promo-star {
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #fff6b0 0%, #ffbf00 40%, #a86400 100%);
}

.promo-badge { border: 2px solid var(--mcx-gold-lo); background: linear-gradient(180deg, var(--mcx-gold-hi), var(--mcx-gold)); color: #4a3300; }

.srv-header.is-promoted {
  border-color: var(--mcx-ink);
  background: linear-gradient(90deg, #fff1a0 0%, #fbfbf8 60%);
  box-shadow: inset 5px 0 0 var(--mcx-gold-lo), inset -2px -2px 0 #a3a39b;
}

.srv-row.is-promoted { background: #fff3b0; }

/* Launches: warm light yellow, so they are not confused with the gold of featured ones. */
.upcoming-table { border: 2px solid var(--mcx-ink); }
.upcoming-table tbody tr { background: #fff8d8; }
.upcoming-table caption {
  background: linear-gradient(180deg, var(--mcx-grass-hi) 0 3px, var(--mcx-grass-dark) 3px 100%);
  color: #fff;
  text-shadow: 2px 2px 0 #1e3d10;
  border: 2px solid var(--mcx-ink);
  border-bottom: 0;
}

/* ---------- version bars, filters, category tiles ---------- */

.version-bar,
.version-nav {
  border: 2px solid var(--mcx-ink);
  background: #e6e5de;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #b3b2aa;
}

.filter-tog,
.cat-link,
.version-nav a.btn {
  border: 2px solid #4a4a4a;
  border-radius: 0;
  background: #e2e2e2;
  color: #1b1b1b;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9a9a9a;
}
.filter-tog:hover,
.cat-link:hover,
.version-nav a.btn:hover { background: #b7c1ec; color: #111; border-color: var(--mcx-ink); }

.filter-tog.is-active,
.cat-link.is-active,
.version-nav a.btn.is-active,
.version-bar .btn.is-active,
a.filter-tog.is-active {
  background: var(--mcx-grass-dark);
  border-color: var(--mcx-ink);
  color: #fff;
  box-shadow: inset 1px 1px 0 #6fb24a, inset -1px -1px 0 #244a14;
}

.chip-count,
.cat-link-count,
.version-count,
.mode-count { background: #d3e5c6; color: #24451a; }
.version-bar .btn.is-active .version-count,
.cat-link.is-active .cat-link-count,
.mode-bar .btn.is-active .mode-count { background: var(--mcx-gold); color: #3d2c00; }

.cat-page-arrow { background: #e2e2e2; border: 2px solid #4a4a4a; border-left: 0; border-radius: 0; color: var(--mcx-grass-dark); }
.cat-page-arrow:hover { background: var(--mcx-grass-dark); color: #fff; }

/* ---------- tabs like in a game window ---------- */

.tab-bar { border-bottom: 2px solid var(--mcx-ink); }
.tab-bar .btn {
  border: 2px solid var(--mcx-ink);
  border-bottom: 0;
  background: var(--mcx-slot);
  color: #1b1b1b;
  margin-bottom: -2px;
  box-shadow: inset 2px 2px 0 #ececec, inset -2px 0 0 #7d7d7d;
}
.tab-bar .btn.is-active,
.tab-bar .btn.is-active:hover {
  background: var(--mc-frame);
  color: var(--mcx-grass-dark);
  border-bottom: 2px solid var(--mc-frame);
  box-shadow: inset 2px 2px 0 #fff;
}

/* ---------- paging ---------- */

.page-btn {
  border: 2px solid var(--mcx-ink);
  background: var(--mcx-slot);
  color: #1b1b1b;
  box-shadow: inset 1px 1px 0 #ececec, inset -1px -1px 0 #7d7d7d;
}
.page-btn:hover:not(:disabled) { background: #b7c1ec; color: #111; }
.page-btn.is-active { background: var(--mcx-grass-dark); border-color: var(--mcx-ink); color: #fff; }
.pager-label, .page-gap { color: var(--mcx-grass-dark); }

/* ---------- language switch in the dark bar ---------- */

.head-top .lang-switch { gap: 3px; }
.head-top .lang-opt { border: 1px solid transparent; }
.head-top .lang-opt.is-on {
  background: var(--mcx-stone);
  color: #fff;
  border-color: #000;
  box-shadow: inset 1px 1px 0 var(--mcx-stone-hi), inset -1px -1px 0 var(--mcx-stone-lo);
}
.head-top .lang-opt .flag-svg { border-radius: 0; box-shadow: 0 0 0 1px #000; }

/* Four languages on a phone: flags only (the short code is hidden by a rule above at 560 px),
   tighter spacing, so the bar with the slogan and flags does not scroll sideways. */
@media (max-width: 480px) {
  .head-top .lang-opt { padding: 3px 5px; }
  .head-top .lang-switch { gap: 2px; }
}

/* ---------- footer: deepslate ---------- */

.site-foot {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .03) 50%, transparent 50%) 0 0 / 16px 16px,
    linear-gradient(0deg, rgba(0, 0, 0, .12) 50%, transparent 50%) 0 0 / 24px 24px,
    #33312e;
  border: 0;
  border-top: 4px solid var(--mcx-grass);
  box-shadow: inset 0 3px 0 var(--mcx-dirt);
  color: #e4e4e0;                 /* 11:1 */
}
.site-foot p,
.foot-inner.foot-grid > p { color: #e4e4e0; border-top-color: #555; }
.foot-nav a,
.foot-nav .foot-col a,
.foot-nav.foot-row a { color: #b5e38a; border-left-color: #666; }    /* 9:1 */
.foot-nav a:hover,
.foot-nav .foot-col a:hover,
.foot-nav.foot-row a:hover { color: var(--mcx-hover-text); }
.foot-nav a.foot-sub::before { color: #9a9a9a; }
.foot-title { color: #fff; border-bottom-color: var(--mcx-grass); }

/* ---------- drobne ---------- */

.hero { border-bottom: 2px dashed #b9b7ad; }
.foot-note { border-top: 2px dashed #b9b7ad; }
.toast { border: 2px solid #000; background: #2b2b2b; color: #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); }
.toast.is-bad { background: var(--bad); }
.state-badge { border: 2px solid var(--mcx-ink); border-radius: 0; }
.mc-icon, .mc-head { border-radius: 0; }
/* MOTD stays on a light background: the game color codes include black (§0), which
   disappears on a dark background. Only the frame in the style of the rest. */
.mc-motd-box { border: 2px solid #5a5a5a; border-radius: 0; }
.list-table .srv-motd { color: var(--text-dim); }
.day-cell, .up-track, .hour-track, .bar-track { border-radius: 0; }

/* On a phone the frame gets a thinner edge, so 390 px has room for content. */
@media (max-width: 560px) {
  main.wrap { border-left-width: 2px; border-right-width: 2px; padding-left: 10px; padding-right: 10px; }
  .head-nav .btn,
  .head-nav summary.btn { padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .page-btn { transition: none; }
}

/* ---------- phone: menu, chip bars, table (fixes after the 390 px review) ---------- */

/* The menu on a phone does not scroll sideways, it wraps: 3 tiles per row,
   and "Add server" full width below, always visible. The same as in OTS. */
@media (max-width: 760px) {
  .head-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    width: 100%;
  }
  .head-nav > * { min-width: 0; }
  .head-nav .btn,
  .head-nav summary.btn {
    width: 100%;
    padding: 0 4px;
    font-size: 11px;
    letter-spacing: 0;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .head-nav .btn-primary { grid-column: 1 / -1; order: 10; margin-left: 0; }
  .head-nav .nav-more { position: static; }
  .head-nav .nav-more > summary.btn { display: flex; width: 100%; }
  .head-menu { position: relative; }
  .nav-more-list { left: 6px; right: 6px; top: 100%; }
}

/* Version, mode and filter bars: wrap into several rows like on a computer,
   instead of escaping past the right edge with no sign there is more. */
@media (max-width: 600px) {
  #versions, #modes, #filter-bar, .version-nav {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  #versions > *, #modes > *, #filter-bar > * { flex: 0 1 auto; }
}

/* A table wider than the screen scrolls in its own box (not the whole page).
   A shadow on the right edge says there is more; it disappears at the end
   (trick with a "local" + "scroll" background, no JavaScript). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)) right center / 16px 100% no-repeat scroll,
    #fff;
}
/* Table rows without their own background, otherwise they would cover the edge shadow. */
.list-table tbody tr:not(.is-promoted),
.srv-table tbody tr { background: transparent; }
.list-table tbody tr:nth-child(even):not(.is-promoted),
.srv-table tbody tr:nth-child(even) { background: rgba(60, 50, 20, .045); }

@media (max-width: 560px) {
  .list-table thead th { white-space: nowrap; }
  .list-table .col-flag { width: 24px; padding-left: 4px; }
}
/* ===== /FALA 8: motyw Minecraft ===== */

/* ===== Wave 10: order cards and language bar ===== */
/* Order form: the part choice as three cards (name, what you get, price "from"), the same
   layout as in OTS, drawn like inventory slots: stone face, dark outline, light top edge.
   The coloured strip on top matches the offer panels above (gold, orange, green). */
.ad-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .ad-parts { grid-template-columns: 1fr; } }
.ad-part {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 10px 12px; font: inherit; color: var(--text); cursor: pointer;
  border: 2px solid var(--mcx-ink, #1e1e1e); border-top-width: 5px; border-radius: 0;
  background: #f3f3ee;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #b5b5ac;
}
.ad-part-featured { border-top-color: #d4a017; }
.ad-part-home { border-top-color: var(--mc-orange, #9c4a14); }
.ad-part-board { border-top-color: var(--good, #2e7d32); }
.ad-part strong { font-size: 14px; color: var(--mc-text, var(--text)); }
.ad-part:hover { background: #e6ebff; }
/* Chosen card: green like the active game-menu button, with a thick outline. */
.ad-part.is-active {
  background: #e1edd6;
  box-shadow: inset 0 0 0 2px var(--mcx-grass-dark, #3a7022), inset 4px 4px 0 #fff;
}
.ad-part.is-active strong { color: var(--mcx-grass-dark, #3a7022); }
.ad-part.is-off, .ad-part:disabled { opacity: .5; cursor: not-allowed; background: #e4e4df; }
.ad-part:focus-visible { outline: 3px solid #ffd400; outline-offset: 1px; }
.ad-part-desc { font-size: 12px; color: var(--text-dim); }
.ad-part-from { font-size: 13px; font-weight: 700; margin-top: 2px; }
.ad-part-from .ad-price-sum { font-size: 13px; }
/* Old price crossed out next to the new one (promotions), the same as in OTS. */
.ad-price-old { color: var(--text-dim); font-weight: 400; font-size: .85em; margin-right: 3px; }
.ad-promo {
  margin: 6px 0; padding: 6px 10px; font-size: 13px;
  background: rgba(192, 40, 45, .08); border: 2px dashed var(--bad, #c0282d);
}
.ad-terms { white-space: normal; font-size: 13px; margin: 6px 0 10px; align-items: flex-start; }
.ad-terms input { margin-top: 3px; }
#ad-kinds .btn:disabled { opacity: .45; cursor: not-allowed; }
/* Offer panels: coloured top strip per part. The theme's .panel border came later in the file
   and covered it, so all three panels looked the same; OTS shows gold, orange and green. */
.panel.ad-kind { border-top-width: 5px; }
.panel.ad-place-home { border-top-color: var(--mc-orange, #9c4a14); }
.panel.ad-place-featured { border-top-color: #d4a017; }
.panel.ad-place-board { border-top-color: var(--good, #2e7d32); }
.ad-place-featured .ad-place-tag { color: #8a6500; }

/* List: server languages in their own bar, each chip with a flag (EN = GB, CS = CZ...). */
.lang-bar .filter-tog { display: inline-flex; align-items: center; gap: 4px; }
.lang-bar .flag-svg { flex: none; }
/* ===== /Wave 10 ===== */

/* ===== FALA 8b: MOTD i sygnatury ===== */
/* MOTD: font with fallbacks for small caps, emoji, symbols and Cyrillic (the same list as in OTS).
   Centered like in the game, the centering spaces are cut by mcMotd(). */
.mc-motd, .motd-text.mc-motd-box {
  font-family: "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Noto Sans", "Noto Sans Symbols 2", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1.45;
}
.mc-motd-box { text-align: center; white-space: normal; }
.mc-motd-box .mc-motd { display: inline; }
.motd-text.mc-motd-box { margin-top: 6px; font-size: 13px; }