/* 9MinecraftServer: "Night and daylight".
   Night blue frames the page (header, heroes, footer); the lists and content sit on white
   daylight below a grass edge. Grass green = go, diamond blue = trust, gold = votes,
   amethyst = ads only, redstone = offline only. Blocky notched corners and a raised bottom
   edge on buttons are the Minecraft touches; pixel type is for ranks and live labels only.
   Controls are 44px+ and body text never under 15px. */

:root {
  /* Daylight (default) */
  --ground: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --raised: #eef2f9;
  --line: #dde4f0;
  --line-strong: #cfd8e6;
  --text: #0f1a2e;
  --muted: #4a5875;
  --faint: #5e6b86;
  --link: #0b6f95;
  --link-hover: #084f6b;
  --accent: #3dd68c;
  --accent-hover: #56e39e;
  --accent-edge: #1c9a5c;
  --on-accent: #052414;
  --good: #13874f;
  --good-fill: #22b86b;
  --bad: #c53030;
  --warn: #8a5a00;
  --gold: #ffcc4d;
  --gold-edge: #c9951a;
  --gold-text: #8a5a00;
  --trust: #0b6f95;
  --trust-fill: #1a9cc8;
  --ad: #6b46c1;
  --ad-text: #5b3aa8;
  --ad-bg: #f7f3ff;
  --ad-line: #c9b3ff;
  --focus: #1a9cc8;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --pixel: "Pixelify Sans", "Chakra Petch", system-ui, sans-serif;
  --r: 12px;
  --gutter: clamp(16px, 4vw, 48px);
  /* Pixel corners: one 2px square missing at each corner, like Minecraft's own GUI buttons. The
     step matches the 2px inset border, so borders meet cleanly instead of poking past a
     diagonal cut. --notch-art is a two-step staircase for borderless things (images, icons). */
  --notch: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
                   calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
  --notch-sm: var(--notch);
  --notch-art: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
                       100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
                       calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px),
                       0 4px, 2px 4px, 2px 2px, 4px 2px);
  color-scheme: light;
}

/* Night scope: header, heroes, footer and special panels. */
.night {
  --ground: #0b1120;
  --surface: #141d31;
  --surface-2: #1a2540;
  --raised: #1c2744;
  --line: #22305a;
  --line-strong: #2a3862;
  --text: #eef2fb;
  --muted: #b3bdd3;
  --faint: #97a3bd;
  --link: #56d4f5;
  --link-hover: #9be8fb;
  --good: #3dd68c;
  --good-fill: #3dd68c;
  --bad: #ff7b7b;
  --warn: #ffcc4d;
  --gold-text: #ffcc4d;
  --trust: #56d4f5;
  --trust-fill: #56d4f5;
  --ad: #b18cff;
  --ad-text: #d3bfff;
  --ad-bg: #16152e;
  --ad-line: #4b3a8c;
  --focus: #56d4f5;
  color-scheme: dark;
  color: var(--text);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #0b1120; }
body { margin: 0; background: var(--ground); color: var(--text); font: 18px/1.55 var(--body); }
img { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 99; padding: 12px 18px; background: var(--accent); color: var(--on-accent); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 60px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 22px; }
p { margin: 0; }
.bevel { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .22), inset -3px -3px 0 rgba(0, 0, 0, .3); }
.pixel { font-family: var(--pixel); }

/* ---------- buttons: a raised block edge means "press me" ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
       border: 0; clip-path: var(--notch-sm); font: 700 17px var(--display); text-decoration: none; cursor: pointer; white-space: nowrap;
       background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -4px 0 var(--line-strong);
       transition: background .12s, box-shadow .12s, transform .06s; }
.btn:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -4px 0 var(--trust-fill); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline-offset: -4px; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 -4px 0 var(--accent-edge), inset 0 2px 0 rgba(255, 255, 255, .45); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: inset 0 -4px 0 var(--accent-edge), inset 0 2px 0 rgba(255, 255, 255, .45); }
.btn-gold { background: var(--gold); color: #2a1c00; box-shadow: inset 0 -4px 0 var(--gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5); }
.btn-gold:hover { background: #ffd76e; color: #2a1c00; box-shadow: inset 0 -4px 0 var(--gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5); }
.btn-quiet { background: var(--surface-2); }
.btn-outline { background: transparent; }
.btn-big { min-height: 60px; padding: 0 28px; font-size: 19px; clip-path: var(--notch); }
.btn-block { width: 100%; }
.btn svg { flex-shrink: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.copy.copied { background: var(--good-fill) !important; color: #052414 !important; }

/* ---------- header (night) ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(11, 17, 32, .96); backdrop-filter: blur(8px); border-bottom: 2px solid #1c2744; }
.top-row { position: relative; display: flex; align-items: center; gap: 18px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 700 20px var(--display); letter-spacing: .06em; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand .mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 22px var(--pixel); clip-path: var(--notch-sm); }
.nav { display: flex; gap: 2px; }
.nav a { display: flex; align-items: center; white-space: nowrap; min-height: 48px; padding: 0 14px; color: var(--muted); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.top .signin { color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.top .signin:hover { color: var(--text); }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(340px, 28vw); min-height: 50px; padding: 0 14px;
          background: var(--surface); clip-path: var(--notch-sm); box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--muted); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--text); font: 17px var(--body); outline: none; }
.search input::placeholder { color: var(--faint); }
.menu { display: none; }
@media (max-width: 1100px) {
  .top-row > .nav, .top-row > .search, .top-row > .btn-primary, .top-row > .signin { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--surface-2); clip-path: var(--notch-sm); cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; left: 0; right: 0; top: 76px; padding: 16px var(--gutter) 24px; background: var(--ground); border-bottom: 2px solid var(--line); display: grid; gap: 10px; }
  .menu-panel .search { width: 100%; margin: 0 0 6px; }
  .menu-panel a.item { display: flex; align-items: center; min-height: 56px; padding: 0 18px; background: var(--surface); clip-path: var(--notch-sm); color: var(--text); font: 700 19px var(--display); text-decoration: none; }
}
.brand { flex-shrink: 0; }
.brand .wordmark { display: block; width: auto; height: 48px; aspect-ratio: 445 / 96; flex-shrink: 0; object-fit: contain; }
@media (max-width: 420px) { .brand .wordmark { height: 40px; } }

/* ---------- night band + grass edge ---------- */
.night-band { background-color: #0b1120; background-image: linear-gradient(rgba(120, 160, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 255, .045) 1px, transparent 1px); background-size: 32px 32px; padding-block: 28px 44px; }
.grass { height: 14px; background: repeating-linear-gradient(90deg, #3f9e4b 0 16px, #4fb85c 16px 32px, #3a9146 32px 48px); }
.night-band .crumbs { margin-bottom: 18px; }

/* ---------- page furniture ---------- */
main { padding-block: 36px 72px; min-height: 50vh; }
.section { margin-top: 44px; display: grid; gap: 18px; }
.section-head h2 small { font: 500 16px var(--pixel); color: var(--faint); margin-left: 8px; }
.more-link { font-weight: 700; }
main > .section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.lede { font-size: 20px; color: var(--muted); max-width: 64ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; color: var(--faint); margin-bottom: 14px; font-weight: 700; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.note { font-size: 16px; color: var(--faint); }
.card { background: var(--surface); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--line); }
.night .card { box-shadow: inset 0 0 0 2px var(--line); }
.page-head { display: grid; gap: 14px; }
.stats-line { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font-size: 18px; }
.stats-line b { color: var(--text); font-family: var(--display); font-size: 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 16px var(--pixel); letter-spacing: .04em; color: var(--good); text-transform: uppercase; }
.eyebrow .live { width: 10px; height: 10px; background: var(--good); box-shadow: 0 0 0 4px rgba(61, 214, 140, .18); }

/* ---------- home hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-block: 20px 8px; }
.hero-copy { display: grid; gap: 20px; align-content: start; }
.hero h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { color: var(--muted); }
.hero-search { display: flex; gap: 10px; max-width: 640px; }
.hero-search .search { width: auto; flex: 1; margin: 0; min-height: 60px; clip-path: var(--notch); }
.hero-search .btn { min-height: 60px; }
.trust-points { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 15px; }
.trust-points span { display: inline-flex; align-items: center; gap: 8px; }
.podium { padding: 24px 24px 0; display: grid; gap: 16px; }
.podium-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.podium-head b { font: 700 20px var(--display); }
.podium-head span { font: 500 14px var(--pixel); color: var(--muted); }
.podium-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; list-style: none; margin: 0; padding: 0; }
.podium-grid li { display: grid; align-items: end; min-width: 0; }
.podium-head h2 { font: 700 20px var(--display); margin: 0; }
.podium-empty { padding-bottom: 24px; }
.podium-spot { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--text); text-decoration: none; }
.podium-spot:hover { color: var(--text); }
.podium-spot img { width: 64px; height: 64px; image-rendering: pixelated; background: var(--raised); clip-path: var(--notch-art); }
.podium-spot .name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.podium-spot .v { font-size: 14px; color: var(--gold-text); font-weight: 700; }
.podium-spot .block { width: 100%; display: grid; place-items: center; font: 700 34px var(--pixel); color: #0b1120; }
.podium-spot.p1 .block { height: 132px; background: #ffcc4d; }
.podium-spot.p2 .block { height: 96px; background: #c9d3e3; }
.podium-spot.p3 .block { height: 72px; background: #e39a5c; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-search { flex-direction: column; }
}

/* ---------- chips and mode tiles ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; background: var(--surface); clip-path: var(--notch-sm);
        box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); color: var(--text); font-weight: 700; font-size: 17px; text-decoration: none; }
.chip:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -4px 0 var(--trust-fill); }
.chip[aria-current="page"], .chip.on { background: var(--text); color: var(--ground); box-shadow: none; }
.chip .n { font-weight: 400; color: var(--faint); font-size: 15px; }
.chip.on .n, .chip[aria-current="page"] .n { color: inherit; opacity: .75; }
.chip.more { background: transparent; color: var(--link); }
.chip .swatch { width: 16px; height: 16px; }
.mode-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.mode-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 96px; padding: 14px 16px; background: var(--surface);
             clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--line); color: var(--text); text-decoration: none; }
.mode-tile:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -5px 0 var(--trust-fill); }
.mode-tile .swatch { width: 28px; height: 28px; }
.mode-tile span:last-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mode-tile b { font-size: 17px; }
.mode-tile small { font-size: 13px; color: var(--muted); }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; background: var(--raised); clip-path: var(--notch-sm); }
.seg a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--muted); font-weight: 700; text-decoration: none; }
.seg a:hover { color: var(--text); }
.seg a[aria-current="true"] { background: var(--text); color: var(--ground); }

/* ---------- ranked server rows ---------- */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row { position: relative; display: grid; grid-template-columns: 52px 72px minmax(0, 1fr) 190px 210px; align-items: center; gap: 18px;
       padding: 18px 20px; background: var(--surface); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--line); }
.row:hover { box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -5px 0 var(--trust-fill); }
.row.sponsored { background: var(--ad-bg); box-shadow: inset 0 0 0 2px var(--ad-line), inset 0 -5px 0 var(--ad-line); }
.rank { width: 48px; height: 48px; display: grid; place-items: center; font: 700 22px var(--pixel); color: var(--text); background: var(--raised); }
.night .rank, .rank.r4 { color: #eef2fb; background: #1c2744; }
.rank.r1 { background: #ffcc4d; color: #0b1120; }
.rank.r2 { background: #c9d3e3; color: #0b1120; }
.rank.r3 { background: #e39a5c; color: #0b1120; }
.rank.ad { background: var(--ad); color: #ffffff; font-size: 13px; }
.row .icon { width: 72px; height: 72px; image-rendering: pixelated; background: var(--raised); clip-path: var(--notch-art); }
.row-main { display: grid; gap: 8px; min-width: 0; }
.row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.row-title a { font: 700 22px var(--display); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.row-title a::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the server */
.row-title a:hover { color: var(--link); }
.row .copy, .row .tags a, .row .vote-link { position: relative; z-index: 1; }
.row .checked { font-size: 13px; color: var(--faint); }
.row-sum { color: var(--muted); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.row .banner, .motd-banner { display: block; width: 100%; max-width: 468px; height: auto; aspect-ratio: 468 / 60; clip-path: var(--notch-art); background: var(--raised); }
.motd-banner { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; background: #121212; font: 15px/1.25 var(--pixel);
               text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); overflow: hidden; white-space: nowrap; color: #aaaaaa; }
.motd-banner .line, .motd .line { display: block; overflow: hidden; text-overflow: ellipsis; }
.metric { display: grid; gap: 6px; }
.metric .top-line { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.metric b { font: 700 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.metric .votes-line { font-size: 14px; font-weight: 700; color: var(--gold-text); }
.xp { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--line-strong); }
.night .xp { background: #0b1120; }
.xp i { height: 8px; background: var(--surface); }
.xp i.on { background: var(--good-fill); }
.xp.warn i.on { background: #f0b429; }
.join-col { display: grid; gap: 8px; min-width: 0; }
.join-col .ip { font: 700 15px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .copy { min-height: 46px; font-size: 16px; padding: 0 14px; }
.row .vote-link { min-height: 40px; font-size: 15px; }
@media (max-width: 1180px) {
  .row { grid-template-columns: 48px 64px minmax(0, 1fr) 170px; }
  .row .join-col { grid-column: 3 / -1; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .row .icon { width: 64px; height: 64px; }
}
@media (max-width: 700px) {
  .row { grid-template-columns: 40px 56px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .rank { width: 40px; height: 40px; font-size: 19px; }
  .row .icon { width: 56px; height: 56px; }
  /* The name sits beside the rank and logo; the banner or Minecraft entry and tags go full width below. */
  .row-main { display: contents; }
  .row-main > * { grid-column: 1 / -1; }
  .row-main > .row-title { grid-column: 3; grid-row: 1; }
  .row .metric { grid-column: 1 / -1; }
  .row .join-col { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .row .join-col .ip { display: none; }
  .row .copy { min-height: 52px; justify-content: space-between; }
  .row .copy .label::before { content: attr(data-ip) "  "; font: 700 15px var(--mono); }
  .row-sum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .row-title a { font-size: 20px; }
}

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; background: var(--raised);
        color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
a.pill:hover { color: var(--text); }
.pill.on { background: rgba(34, 184, 107, .12); color: var(--good); }
.pill.off { background: rgba(197, 48, 48, .1); color: var(--bad); }
.night .pill.off { background: rgba(255, 93, 93, .14); }
.pill.odd { background: rgba(240, 180, 41, .16); color: var(--warn); }
.pill.ad { background: var(--ad); color: #ffffff; letter-spacing: .06em; font-size: 12px; }
.pill.ok { background: rgba(26, 156, 200, .12); color: var(--trust); }
.pill.gold { background: rgba(255, 204, 77, .18); color: var(--gold-text); }
.dot { width: 8px; height: 8px; background: currentColor; }

/* ---------- pager ---------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }
.pager span { color: var(--muted); }

/* ---------- empty ---------- */
.empty { padding: 36px; text-align: center; display: grid; gap: 14px; justify-items: center; color: var(--muted); font-size: 19px; }

/* ---------- modes grid (all game modes page) ---------- */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mode { display: grid; gap: 6px; align-content: start; padding: 22px; min-height: 120px; color: var(--text); text-decoration: none; }
.mode:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -5px 0 var(--trust-fill); }
.mode b { font: 700 22px var(--display); }
.mode span { color: var(--muted); font-size: 16px; }
.mode .n { color: var(--link); font-weight: 700; }

/* ---------- trust band (night) ---------- */
.trust-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust-band .card { padding: 26px; display: grid; gap: 10px; align-content: start; }
.trust-band .swatch { width: 36px; height: 36px; }
.trust-band h2 { font-size: 22px; }
.trust-band p { color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .trust-band { grid-template-columns: minmax(0, 1fr); } }

/* ---------- server page ---------- */
.server-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.server-card { overflow: hidden; display: grid; }
.cover { height: 180px; background: var(--brand, #1a9cc8); background-size: cover; background-position: center; }
.cover.plain { background-image: linear-gradient(120deg, rgba(0, 0, 0, .35), transparent 70%); }
.server-id { display: flex; gap: 22px; align-items: flex-end; padding: 0 26px 24px; margin-top: -56px; }
.server-id > .icon { width: 128px; height: 128px; flex-shrink: 0; image-rendering: pixelated; background: var(--raised); clip-path: var(--notch-art); border: 6px solid var(--surface); }
.detail-title { display: grid; gap: 10px; min-width: 0; padding-bottom: 4px; }
.detail-title .tags { gap: 8px; }
.server-banner { padding: 0 26px 26px; }
.join-card { display: grid; gap: 12px; padding: 24px; }
.join-card .join-label { font-weight: 700; color: var(--muted); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.join-card .addr { font: 700 22px var(--mono); overflow-wrap: anywhere; }
.join-card .fine { font-size: 14px; color: var(--muted); text-align: center; }
.alt-addrs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alt-addrs .join-label { width: 100%; text-transform: none; letter-spacing: 0; font-size: 15px; }
.alt-addr { min-height: 44px; padding: 0 12px; border: 0; clip-path: var(--notch-sm); background: var(--surface-2); color: var(--text); font: 700 14px var(--mono); cursor: pointer; overflow-wrap: anywhere;
            box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -3px 0 var(--line-strong); }
.alt-addr:hover { box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -3px 0 var(--trust-fill); }
.alt-addr.copied { box-shadow: inset 0 0 0 2px var(--good-fill); color: var(--good); }
@media (max-width: 1000px) {
  .server-hero { grid-template-columns: minmax(0, 1fr); }
  .cover { height: 120px; }
  .server-id { flex-direction: column; align-items: flex-start; margin-top: -44px; padding: 0 18px 18px; gap: 12px; }
  .server-id > .icon { width: 88px; height: 88px; border-width: 5px; }
  .server-banner { padding: 0 18px 18px; }
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.stat { padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.stat dt { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.stat dd { margin: 0; font: 700 26px var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat dd small { font: 400 15px var(--body); color: var(--muted); }
.stat .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.stat .days i { height: 12px; background: var(--good-fill); }
.stat .days i.dip { background: #f0b429; }
.stat .days i.down { background: var(--bad); }
.stat .days i.none { background: var(--raised); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.panel { padding: clamp(20px, 3vw, 30px); display: grid; gap: 16px; }
.prose { display: grid; gap: 14px; font-size: 18px; line-height: 1.65; max-width: 72ch; }
.panel.prose { max-width: none; }
.prose h2 { margin-top: 4px; }
.prose h3 { font-size: 21px; margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 26px; display: grid; gap: 8px; }
.prose ul.highlights { list-style: none; padding-left: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.prose ul.highlights li { position: relative; padding-left: 26px; font-weight: 700; }
.prose ul.highlights li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 12px; background: var(--good-fill); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .25); }
.prose.faq h3 { font-size: 20px; margin-top: 6px; }
.prose.faq h3 + p { margin-top: -6px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; }
.facts .stat { background: var(--surface-2); clip-path: var(--notch-sm); box-shadow: inset 0 0 0 2px var(--line); }
.facts .stat dt { text-transform: none; letter-spacing: 0; font-size: 14px; }
.facts .stat dd { font-size: 20px; }
.live-age { font-weight: 600; color: var(--good); text-transform: none; letter-spacing: 0; }
.motd { margin: 0; padding: 14px; display: flex; gap: 14px; align-items: center; background: #121212; font: 17px/1.35 var(--pixel); color: #aaaaaa;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); white-space: pre-wrap; overflow-x: auto; }
.motd img { width: 64px; height: 64px; flex-shrink: 0; image-rendering: pixelated; }
.chart-card { padding: 22px; display: grid; gap: 10px; }
.chart { display: block; width: 100%; height: 170px; background: var(--surface-2); }
.chart .bar { fill: var(--good-fill); }
.chart .none { fill: var(--raised); }
.chart .off { fill: var(--bad); }
.chart text { fill: var(--faint); font: 13px var(--body); }
.side { display: grid; gap: 16px; }
.side .card { padding: 22px; display: grid; gap: 12px; }
.side h2 { font-size: 22px; }
.side .card.night { background: #111a2e; }
.codebox { width: 100%; min-height: 96px; padding: 12px 14px; background: #0b1120; border: 2px solid var(--line); color: #b3bdd3; font: 14px/1.5 var(--mono); resize: vertical; }
.sticky-join { display: none; }
@media (max-width: 700px) {
  .sticky-join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; position: sticky; bottom: 0; z-index: 15;
                 padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(8, 13, 25, .96); border-top: 2px solid #1c2744; }
}

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; max-width: 600px; }
.form-card { padding: clamp(20px, 3vw, 36px); }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 700; font-size: 18px; }
.field .hint { font-size: 15px; color: var(--faint); }
.field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.input { width: 100%; min-height: 54px; padding: 0 16px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); font: 18px var(--body); border-radius: 0; }
textarea.input { padding: 14px 16px; min-height: 170px; resize: vertical; line-height: 1.5; }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(26, 156, 200, .2); }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.radio-card { position: relative; display: grid; gap: 4px; padding: 16px 18px; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card:has(input:checked) { border-color: var(--good-fill); background: rgba(34, 184, 107, .08); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.radio-card b { font: 700 18px var(--display); }
.radio-card span { color: var(--muted); font-size: 15px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 700; }
.check-chip input { position: absolute; opacity: 0; }
/* A visible pixel checkbox, so a chip clearly reads as something to tick. */
.check-chip { gap: 10px; }
.check-chip::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.check-chip:has(input:checked)::before { box-shadow: none; background: #052414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%233dd68c' d='M7 1h1v2H7zM6 3h1v1H6zM5 4h1v1H5zM4 5h1v1H4zM3 6h1v1H3zM2 5h1v1H2zM1 4h1v1H1z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.check-chip:has(input:checked) { border-color: var(--good-fill); background: var(--good-fill); color: #052414; }
.check-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.alert { padding: 16px 20px; font-size: 18px; clip-path: var(--notch-sm); }
.alert.ok { background: #e8f8ef; color: #0d5c36; box-shadow: inset 0 0 0 2px #9fdcbc; }
.alert.err { background: #fdecec; color: #8f1d1d; box-shadow: inset 0 0 0 2px #f0a8a8; }
.alert.info { background: #e8f5fb; color: #0a4d68; box-shadow: inset 0 0 0 2px #9ed3e8; }
.night .alert.ok { background: rgba(61, 214, 140, .12); color: #b6f0cb; }
.night .alert.err { background: rgba(255, 123, 114, .1); color: #ffc9c4; }
.night .alert.info { background: rgba(86, 212, 245, .1); color: #cdeefa; }
.validation { color: var(--bad); font-size: 16px; }
.validation:empty { display: none; }
.code-big { display: inline-block; padding: 10px 18px; background: #0b1120; border: 2px dashed var(--accent); font: 700 28px var(--mono); letter-spacing: 2px; color: var(--accent); }

/* ---------- tables (staff, dashboard) ---------- */
.table-wrap { overflow-x: auto; border: 2px solid var(--line); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 16px; }
table.data th, table.data td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { font-size: 14px; color: var(--muted); background: var(--surface-2); }
table.data tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.inline-form { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.inline-form .btn { min-height: 44px; padding: 0 16px; font-size: 16px; }

/* ---------- footer (night) ---------- */
.foot { background: #080d19; border-top: 2px solid #1c2744; padding-block: 40px 48px; color: var(--faint); font-size: 16px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot .about { display: grid; gap: 10px; align-content: start; color: var(--muted); }
.foot h2 { font-size: 16px; color: var(--text); margin-bottom: 8px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot a { display: inline-flex; min-height: 40px; align-items: center; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid #1c2744; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .about { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- server page extras ---------- */
img.cover { display: block; width: 100%; height: 180px; object-fit: cover; }
@media (max-width: 1000px) { img.cover { height: 120px; } }
.mini-section { display: grid; gap: 12px; }
.mini-section h2, .chart-card h2 { font-size: 22px; }
.mini-icon { width: 48px; height: 48px; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }
.mode > span:first-child { display: flex; align-items: center; gap: 12px; }
.motd .line { white-space: pre; }
main > .stats:first-child { margin-top: 8px; }

/* ---------- image uploads ---------- */
.uploads { display: grid; gap: 18px; max-width: 900px; }
.upload-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 16px; border-top: 2px solid var(--line); }
.upload-info { display: grid; gap: 6px; }
.upload-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.upload-actions .input { padding: 12px; flex: 1 1 220px; }
.upload-preview { display: block; max-width: 100%; height: auto; margin-top: 6px; background: var(--raised); }
.upload-preview.logo { width: 96px; height: 96px; image-rendering: pixelated; }
@media (max-width: 700px) { .upload-row { grid-template-columns: minmax(0, 1fr); } }
.vote-icon { width: 80px; height: 80px; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }

/* ---------- footer legal row, cookie notice, site map ---------- */
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 32px; padding-top: 22px; border-top: 2px solid var(--line); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--muted); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: var(--text); }
.foot .legal { display: grid; gap: 6px; }
.foot .legal p { margin: 0; }
.foot .disclaimer { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 90ch; }
.cookie-note { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
               padding: 16px 20px; background: var(--ground); color: var(--text); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -4px 0 var(--line-strong); }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; flex: 1 1 320px; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 700px) { .cookie-note { bottom: 84px; } }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 24px; align-items: start; }
.sitemap-grid h2 { font-size: 20px; margin-bottom: 10px; }
.sitemap-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sitemap-grid a { display: inline-flex; min-height: 36px; align-items: center; font-weight: 700; }
.foot .btn-primary, .foot .btn-primary:hover { color: var(--on-accent); }
.foot-bar + .legal { margin-top: 18px; }

/* ---------- game-mode pixel icons ---------- */
.mode-icon { display: block; flex-shrink: 0; image-rendering: pixelated; }
.mode-tile .mode-icon { width: 32px; height: 32px; }
.mode-name { display: flex; align-items: center; gap: 10px; }

/* ---------- site pixel icons ---------- */
.pix { display: inline-block; flex-shrink: 0; vertical-align: -3px; margin-right: 6px; }
.pix.big { display: block; margin: 0; }
.pill .pix { margin-right: 5px; vertical-align: -3px; }
.stat dt { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.stat dt .pix, .stat dt .mode-icon { display: inline-block; margin-right: 6px; }
.pix-head { display: flex; align-items: center; gap: 10px; }
.pix-head .pix { margin: 0; }
.podium-spot .v .pix, .votes-line .pix { margin-right: 4px; }
.btn .pix { margin-right: 8px; vertical-align: -2px; }

/* ---------- Minecraft multiplayer-list entry (the no-banner banner) ---------- */
.mc-entry { --mc-font: 13px; --mc-lh: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
            width: 100%; max-width: 468px; min-height: 60px; padding: 6px 10px 6px 6px; clip-path: var(--notch-sm);
            background: #1a120c url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%232c2016%27 d=%27M0 0h1v1h-1zM1 0h1v1h-1zM5 0h1v1h-1zM8 0h1v1h-1zM11 0h1v1h-1zM13 0h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM12 1h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM9 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM3 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM1 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM11 5h1v1h-1zM12 5h1v1h-1zM14 5h1v1h-1zM15 5h1v1h-1zM7 6h1v1h-1zM11 6h1v1h-1zM14 6h1v1h-1zM15 6h1v1h-1zM1 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM4 8h1v1h-1zM7 8h1v1h-1zM10 8h1v1h-1zM13 8h1v1h-1zM3 9h1v1h-1zM6 9h1v1h-1zM14 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1zM11 10h1v1h-1zM15 10h1v1h-1zM0 11h1v1h-1zM5 11h1v1h-1zM6 11h1v1h-1zM10 11h1v1h-1zM2 12h1v1h-1zM5 12h1v1h-1zM11 12h1v1h-1zM12 12h1v1h-1zM13 12h1v1h-1zM0 13h1v1h-1zM4 13h1v1h-1zM9 13h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM8 15h1v1h-1z%27/%3E%3Cpath fill=%27%23241a12%27 d=%27M2 0h1v1h-1zM4 0h1v1h-1zM7 0h1v1h-1zM10 0h1v1h-1zM15 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM13 1h1v1h-1zM14 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM8 2h1v1h-1zM11 2h1v1h-1zM13 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM11 3h1v1h-1zM13 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM10 4h1v1h-1zM12 4h1v1h-1zM1 5h1v1h-1zM9 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM9 6h1v1h-1zM12 6h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM12 7h1v1h-1zM13 7h1v1h-1zM14 7h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM9 8h1v1h-1zM15 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM12 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM6 10h1v1h-1zM13 10h1v1h-1zM3 11h1v1h-1zM8 11h1v1h-1zM12 11h1v1h-1zM1 12h1v1h-1zM6 12h1v1h-1zM7 12h1v1h-1zM9 12h1v1h-1zM10 12h1v1h-1zM14 12h1v1h-1zM2 13h1v1h-1zM8 13h1v1h-1zM10 13h1v1h-1zM12 13h1v1h-1zM13 13h1v1h-1zM14 13h1v1h-1zM15 13h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM11 14h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM1 15h1v1h-1zM2 15h1v1h-1zM5 15h1v1h-1zM6 15h1v1h-1zM7 15h1v1h-1z%27/%3E%3Cpath fill=%27%231d150e%27 d=%27M3 0h1v1h-1zM6 0h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM10 2h1v1h-1zM15 2h1v1h-1zM3 5h1v1h-1zM10 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM4 7h1v1h-1zM14 8h1v1h-1zM2 9h1v1h-1zM10 9h1v1h-1zM8 10h1v1h-1zM12 10h1v1h-1zM11 11h1v1h-1zM13 11h1v1h-1zM0 12h1v1h-1zM1 13h1v1h-1zM7 13h1v1h-1zM0 15h1v1h-1zM3 15h1v1h-1zM9 15h1v1h-1zM11 15h1v1h-1zM12 15h1v1h-1zM14 15h1v1h-1zM15 15h1v1h-1z%27/%3E%3Cpath fill=%27%2333261a%27 d=%27M9 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM10 3h1v1h-1zM14 3h1v1h-1zM2 4h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM14 4h1v1h-1zM0 5h1v1h-1zM1 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM2 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM11 8h1v1h-1zM12 8h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM8 9h1v1h-1zM14 10h1v1h-1zM1 11h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM14 11h1v1h-1zM15 11h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM8 12h1v1h-1zM15 12h1v1h-1zM11 13h1v1h-1zM3 14h1v1h-1zM7 14h1v1h-1zM4 15h1v1h-1z%27/%3E%3Cpath fill=%27%233a2b1e%27 d=%27M3 1h1v1h-1zM7 3h1v1h-1zM15 3h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM9 4h1v1h-1zM7 5h1v1h-1zM13 6h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h1v1h-1zM3 13h1v1h-1zM5 13h1v1h-1zM6 13h1v1h-1zM0 14h1v1h-1zM1 14h1v1h-1zM13 14h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1z%27/%3E%3C/svg%3E") 0 0 / 32px 32px; image-rendering: pixelated;
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45); font: var(--mc-font)/var(--mc-lh) var(--pixel); color: #aaaaaa;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, .75); }
.mc-entry:hover { box-shadow: inset 0 0 0 2px #a0a0a0; }
.mc-entry .mc-icon { width: 48px; height: 48px; image-rendering: pixelated; }
.mc-entry .mc-text { display: grid; min-width: 0; align-self: start; padding-top: 1px; }
.mc-entry .mc-name { color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-entry .line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.mc-entry .mc-status { display: flex; align-items: center; gap: 6px; align-self: start; padding-top: 1px; white-space: nowrap; }
.mc-entry .mc-count { color: #aaaaaa; }
.mc-entry .mc-slash { color: #555555; }
.mc-entry .mc-ping { display: block; }
.mc-entry.large { --mc-font: 17px; --mc-lh: 21px; max-width: 700px; padding: 8px 14px 8px 8px; gap: 14px; }
.mc-entry.large .mc-icon { width: 64px; height: 64px; }
.row .mc-entry { position: relative; z-index: 1; }
@media (max-width: 520px) { .mc-entry { --mc-font: 12px; --mc-lh: 15px; } .mc-entry .mc-icon { width: 40px; height: 40px; } }

/* ---------- ad spots: featured header card, sidebar rail ---------- */
.featured { padding: 22px; display: grid; gap: 14px; align-content: start; }
.featured-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.featured .eyebrow { color: var(--gold, #ffcc4d); }
.featured .eyebrow .pix { margin-right: 0; }
.featured-cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; clip-path: var(--notch-art); }
.featured .banner { display: block; width: 100%; max-width: 468px; height: auto; }
.featured-id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.featured-logo { width: 64px; height: 64px; flex-shrink: 0; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }
.featured-title { display: grid; gap: 8px; min-width: 0; }
.featured-title h2 { font-size: 26px; overflow-wrap: anywhere; }
.featured-title h2 a { color: var(--text); text-decoration: none; }
.featured-sum { margin: 0; color: var(--muted); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-join { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.featured-join .ip { font: 700 16px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured-empty { text-decoration: none; color: var(--text); justify-items: start; }
.featured-empty b { font: 700 26px var(--display); }
.featured-empty > span:not(.eyebrow):not(.btn) { color: var(--muted); }
.featured-empty:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--gold, #ffcc4d); }
@media (max-width: 520px) { .featured-join { grid-template-columns: minmax(0, 1fr) auto; } .featured-join .ip { grid-column: 1 / -1; } }

.list-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.list-main { display: grid; gap: 10px; min-width: 0; align-content: start; }
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-content: start; }
/* The sidebar lives in the page's white margin, outside the content column, so the list always
   runs edge to edge like everything else. Screens without that much margin show it below. */
@media (min-width: 1900px) {
  .rail { position: absolute; top: 0; bottom: 0; left: calc(100% + 24px); width: 260px; grid-template-columns: minmax(0, 1fr); }
  .rail > * { position: sticky; top: 96px; }
}
.rail-ad { padding: 16px; display: grid; gap: 10px; align-content: start; }
.rail-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); font-weight: 700; }
.rail-id { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; min-width: 0; }
.rail-id img { width: 48px; height: 48px; flex-shrink: 0; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }
.rail-id b { font-size: 18px; overflow-wrap: anywhere; }
.rail-ad p { margin: 0; font-size: 15px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rail-empty { text-decoration: none; color: var(--text); justify-items: start; border: 0; box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--line); background: var(--surface-2); }
.rail-empty span:not(.more-link) { color: var(--muted); font-size: 15px; }
.rail-empty:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--gold, #ffcc4d); }

.ad-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ad-tier { padding: 26px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.ad-tier.best { box-shadow: inset 0 0 0 3px var(--gold, #ffcc4d), inset 0 -6px 0 var(--gold, #ffcc4d); }
.ad-tier p { margin: 0; color: var(--muted); }

/* Narrow rows: drop the player count from the Minecraft entry before the MOTD gets cut. */
@media (max-width: 560px) { .row .mc-entry .mc-count { display: none; } }

/* ---------- header account icons ---------- */
.acct-icons { display: flex; gap: 6px; }
.acct-icon { display: grid; place-items: center; width: 46px; height: 46px; clip-path: var(--notch-sm); background: #141d31; box-shadow: inset 0 0 0 2px #22305a; }
.acct-icon:hover { box-shadow: inset 0 0 0 2px var(--trust-fill); }
.acct-icon .pix, .acct-icon .mode-icon { margin: 0; }

/* ---------- reviews ---------- */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars .pix { margin: 0; }
.pix.star-off { filter: grayscale(1) brightness(1.5); opacity: .35; }
.review { padding: 20px 22px; display: grid; gap: 10px; }
.review-held { box-shadow: inset 0 0 0 2px #f0b429, inset 0 -5px 0 #f0b429; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.review-server { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.review-server img { width: 32px; height: 32px; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }
.review-title { font-size: 20px; }
.review-title a { color: var(--text); text-decoration: none; }
.review-title a:hover { color: var(--link); }
.review-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; color: var(--muted); }
.review-meta a { font-weight: 700; }
.review-body { display: grid; gap: 10px; }
.review-body p { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.owner-reply { margin-top: 4px; padding: 14px 16px; background: var(--surface-2); box-shadow: inset 4px 0 0 var(--trust-fill); display: grid; gap: 6px; }
.owner-reply p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.rating-box { display: grid; gap: 10px; }
.rating-box h3 { font-size: 16px; margin-top: 6px; }
.rating-big { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.rating-big b { font: 700 44px var(--display); }
.rating-big span { color: var(--muted); font-weight: 700; }
.histogram { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.histogram li { display: grid; grid-template-columns: 12px 16px minmax(0, 1fr) 32px; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.histogram .bar { height: 10px; background: var(--raised); }
.histogram .bar i { display: block; height: 100%; background: var(--gold); }
.histogram .n { text-align: right; }
.hero-rating { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
.hero-rating span { color: var(--muted); }
.rating-line { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; position: relative; z-index: 1; }
.rating-line:hover { color: var(--link); }
.review-form-card { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.review-form-head { display: flex; align-items: center; gap: 16px; }
.review-form-head img { width: 64px; height: 64px; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }
.star-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { cursor: pointer; padding: 4px; }
.star-pick label .pix { margin: 0; filter: grayscale(1) brightness(1.5); opacity: .35; transition: opacity .1s; }
.star-pick input:checked ~ label .pix, .star-pick label:hover .pix, .star-pick label:hover ~ label .pix { filter: none; opacity: 1; }
.star-pick input:focus-visible + label { outline: 3px solid var(--focus); }
.welcome-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.welcome-choice { padding: 28px; display: grid; gap: 12px; justify-items: start; text-decoration: none; color: var(--text); }
.welcome-choice p { margin: 0; color: var(--muted); }
.welcome-choice:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -5px 0 var(--trust-fill); }
.profile-head { display: flex; align-items: center; gap: 24px; }
.profile-avatar { width: 96px; height: 96px; flex-shrink: 0; }
@media (max-width: 1100px) { .acct-icons { margin-left: auto; } .acct-icons + .menu { margin-left: 8px; } }

/* =====================================================================================
   Motion: small, chunky and Minecraft-flavored. steps() easing moves in pixel jumps like
   the game's own UI; nothing loops unless you're hovering it (except the live dot).
   ===================================================================================== */
/* Buttons press down like a stone button: lift a little on hover, sink on click. */
.btn { transition: background .12s, box-shadow .12s, transform .12s steps(2, end), filter .12s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); filter: brightness(.92); transition-duration: .04s; }
.btn-primary:hover, .btn-gold:hover { filter: brightness(1.04); }

/* Cards you can click rise a couple of pixels. */
.row, .mode-tile, .mode, .chip, .rail-ad, .welcome-choice, .featured-empty, .podium-spot, .ad-tier, .review, .alt-addr, .acct-icon {
  transition: transform .15s steps(3, end), box-shadow .12s, background .12s; }
.row:hover, .mode-tile:hover, .mode:hover, .rail-ad:hover, .welcome-choice:hover, .featured-empty:hover, .acct-icon:hover { transform: translateY(-3px); }
.chip:hover, .alt-addr:hover { transform: translateY(-2px); }
.podium-spot:hover { transform: translateY(-4px); }

/* Item icons bob like a dropped item while you hover their card. */
@keyframes item-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mode-tile:hover .mode-icon, .mode:hover .mode-icon, .welcome-choice:hover .pix, .featured-empty:hover .pix.big,
.rail-empty:hover .pix, .ad-tier:hover .pix.big, .acct-icon:hover svg { animation: item-bob .8s steps(4, end) infinite; }

/* The live dot blinks like a redstone lamp. */
@keyframes lamp { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }
.eyebrow .live, .pill.on .dot { animation: lamp 1.6s steps(1, end) infinite; }

/* The XP bar fills segment by segment when the page loads. */
@keyframes xp-in { from { background: var(--surface); } }
.xp i.on { animation: xp-in .08s steps(1, end) both; }
.xp i.on:nth-child(2) { animation-delay: .05s; } .xp i.on:nth-child(3) { animation-delay: .1s; } .xp i.on:nth-child(4) { animation-delay: .15s; }
.xp i.on:nth-child(5) { animation-delay: .2s; } .xp i.on:nth-child(6) { animation-delay: .25s; } .xp i.on:nth-child(7) { animation-delay: .3s; }
.xp i.on:nth-child(8) { animation-delay: .35s; } .xp i.on:nth-child(9) { animation-delay: .4s; } .xp i.on:nth-child(10) { animation-delay: .45s; }

/* Podium blocks stack up from the ground, first place last. */
@keyframes rise { from { transform: scaleY(0); } }
.podium-spot .block { transform-origin: bottom; animation: rise .45s steps(6, end) both; }
.podium-spot.p3 .block { animation-delay: .05s; } .podium-spot.p2 .block { animation-delay: .2s; } .podium-spot.p1 .block { animation-delay: .35s; }

/* Picking a star rating pops the stars. */
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.star-pick input:checked ~ label .pix { animation: pop .25s steps(3, end); }

/* Copy IP: a burst of grass and dirt pixels (see the layout script) and a quick pop. */
.pixel-bit { position: fixed; z-index: 60; width: 6px; height: 6px; margin: -3px 0 0 -3px; pointer-events: none; image-rendering: pixelated; }
.copy.copied { animation: pop .25s steps(3, end); }

/* The featured spot glints gold now and then. */
@keyframes glint { 0%, 88% { box-shadow: inset 0 0 0 2px var(--line); } 92% { box-shadow: inset 0 0 0 2px var(--gold); } 100% { box-shadow: inset 0 0 0 2px var(--line); } }
.night .featured { animation: glint 6s steps(1, end) infinite; }

/* =====================================================================================
   Layout tidy-ups from the design pass
   ===================================================================================== */
/* Stat cards: the small note always sits on its own line so the cards stay even. */
.stat dd small { display: block; margin-top: 4px; line-height: 1.35; }
.stat dd small .live-age, .stat dt small { display: inline; }
.stats { align-items: stretch; }
.stats .stat { height: 100%; }
/* One heading size for sections in the server page's main column. */
.two-col .prose > h2, .two-col .mini-section h2, .two-col .section-head h2, .prose.faq h2 { font-size: clamp(22px, 2.4vw, 28px); }
.chart-card h2 { font-size: 20px; }
/* Cookie notice: compact, at the bottom edge; above the phone join bar where there is one. */
.cookie-note { bottom: 12px; padding: 12px 16px; gap: 10px 16px; }
.cookie-note p { font-size: 14px; }
.cookie-note .btn { min-height: 42px; padding: 0 16px; }
@media (max-width: 700px) {
  .cookie-note { left: 8px; right: 8px; bottom: 8px; flex-wrap: nowrap; }
  body:has(.sticky-join) .cookie-note { bottom: 80px; }
  .cookie-note p { font-size: 13px; flex: 1 1 auto; }
}
/* Phones: calmer hero text; tablets keep the search on one line. */
@media (max-width: 700px) {
  .hero .lede { font-size: 17px; line-height: 1.55; }
  .hero-copy { gap: 16px; }
}
@media (min-width: 561px) and (max-width: 900px) { .hero-search { flex-direction: row; } }
@media (max-width: 560px) { .hero-search { flex-direction: column; } }

.stat dt { flex-wrap: nowrap; align-items: flex-start; }
.stat dt .pix, .stat dt .mode-icon { margin-top: -1px; }
button.chip { border: 0; font: 700 17px var(--display); cursor: pointer; }
/* Phones: stat and fact cards two across, so the server page isn't a long single column. */
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 14px; }
  .stat dt { font-size: 11px; }
  .stat dd { font-size: 21px; }
  .stat dd small { font-size: 13px; }
  .histogram li { grid-template-columns: 12px 16px minmax(0, 1fr) 28px; }
}
.tier-top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; }

/* Forms: fieldsets are just groups, not boxed. */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 10px; }
.review-form-head h1 { font-size: clamp(26px, 3.2vw, 38px); }
/* Choice cards keep their buttons on one line at the bottom. */
.welcome-choice { display: flex; flex-direction: column; align-items: flex-start; }
.welcome-choice .btn { margin-top: auto; }
.welcome-choice h2 { margin-top: 4px; }
.welcome-note { margin-top: 24px; }
.account-servers-head { margin-bottom: 14px; }
/* The header search gives way first when the header is crowded. */
.top .search { min-width: 160px; }
@media (max-width: 1280px) { .top .search { width: min(260px, 20vw); } }

/* Tablet rows: rank and logo sit level with the server name instead of floating mid-row. */
@media (max-width: 1100px) and (min-width: 701px) { .row > .rank, .row > .icon { align-self: start; margin-top: 4px; } }
.radio-card .pix-head { gap: 10px; }
@media (max-width: 520px) { .acct-icons { display: none; } }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.field-grid label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.field-grid .wide { grid-column: 1 / -1; }

/* Answer first: the join facts in one scannable line under the server name. */
.answer-line { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 16px; color: var(--muted); }
.answer-line b { color: var(--text); font-family: var(--mono); font-weight: 700; }
.crossplay-alt .crossplay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* ---------- avatars, profile and settings ---------- */
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; clip-path: var(--notch-art); image-rendering: pixelated; object-fit: cover; vertical-align: middle;
          box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .25); }
.avatar svg { display: block; margin: 0; }
.acct-icon .avatar { width: 40px !important; height: 40px !important; }
.acct-icon:has(.avatar) { padding: 0; background: transparent; box-shadow: none; }
.review-meta .avatar { margin-right: 2px; }
.profile-card { padding: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.profile-card-text { flex: 1 1 260px; display: grid; gap: 6px; min-width: 0; }
.profile-card-text h2 { font-size: 26px; overflow-wrap: anywhere; }
.profile-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-head .lede { margin-top: 6px; }
.profile-preview .preview-row { display: flex; align-items: center; gap: 16px; }
.profile-preview b { font: 700 20px var(--display); }
.avatar-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.avatar-pick label, .color-pick label { position: relative; cursor: pointer; }
.avatar-pick input, .color-pick input { position: absolute; opacity: 0; }
.avatar-pick label > span:first-of-type { display: grid; place-items: center; height: 52px; background: var(--surface-2); clip-path: var(--notch);
                                          box-shadow: inset 0 0 0 2px var(--line); transition: transform .12s steps(2, end); }
.avatar-pick label:hover > span:first-of-type { transform: translateY(-2px); }
.avatar-pick input:checked + span { box-shadow: inset 0 0 0 3px var(--good-fill); background: rgba(34, 184, 107, .1); }
.avatar-pick input:focus-visible + span, .color-pick input:focus-visible + span { outline: 3px solid var(--focus); }
.color-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.color-pick label > span:first-of-type { display: block; width: 40px; height: 40px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.color-pick input:checked + span { box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 0 transparent; outline: 3px solid var(--good-fill); outline-offset: -3px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 420px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.settings-grid .panel p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.danger-zone { box-shadow: inset 0 0 0 2px rgba(197, 48, 48, .35), inset 0 -5px 0 rgba(197, 48, 48, .35); }
.btn-danger { background: #c53030; color: #ffffff; box-shadow: inset 0 -4px 0 #8e1f1f; }
.btn-danger:hover { background: #d63b3b; color: #ffffff; box-shadow: inset 0 -4px 0 #8e1f1f; }
.link-button { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
details > summary.more-link { cursor: pointer; list-style: none; }
details > summary.more-link::-webkit-details-marker { display: none; }
/* Alerts that also carry .section keep flowing text (the grid would split inline links apart). */
.alert.section { display: block; }
details > summary.more-link { color: var(--link); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
details > summary.more-link::before { content: "▸"; transition: transform .12s steps(2, end); }
details[open] > summary.more-link::before { transform: rotate(90deg); }
input[type="file"].input { padding: 8px; }
input[type="file"]::file-selector-button { margin-right: 12px; min-height: 36px; padding: 0 14px; border: 0; background: var(--surface-2); color: var(--text);
  font: 700 15px var(--display); cursor: pointer; box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -3px 0 var(--line-strong); }

/* ---------- browse row, tinted mode tiles, list head ---------- */
.browse-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.browse-tile { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--text); text-decoration: none;
               background: #f3f6fb; transition: transform .15s steps(3, end), box-shadow .12s; }
.browse-tile b { font-size: 16px; }
.browse-tile:hover { color: var(--text); transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--trust-fill), inset 0 -5px 0 var(--trust-fill); }
.browse-tile:hover svg { animation: item-bob .8s steps(4, end) infinite; }
/* Each mode tile takes a faint wash of its group's color, to break up the white. */
.mode-tile[style*="--tile"], .mode[style*="--tile"] { background: color-mix(in srgb, var(--tile) 9%, #ffffff); }
.mode-tile[style*="--tile"]:hover, .mode[style*="--tile"]:hover { background: color-mix(in srgb, var(--tile) 14%, #ffffff); }
/* The list's title and switches sit inside the list column, so they never overhang the cards. */
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 4px; }
.list-head .toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) {
  .list-head .toolbar, .list-head .seg { width: 100%; }
  .list-head .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .list-head .seg a { justify-content: center; padding: 0 8px; font-size: 15px; text-align: center; }
}

/* ---------- search ---------- */
.search-link { color: var(--faint); text-decoration: none; font-size: 17px; cursor: text; }
.search-link:hover { color: var(--muted); box-shadow: inset 0 0 0 2px var(--trust-fill); }
.search-page { display: grid; gap: 14px; margin-top: 18px; max-width: 860px; }
.search-page .hero-search { max-width: none; }
.search-page .advanced > summary { color: var(--link); }
.advanced-grid { margin-top: 14px; padding: 18px; background: #111a2e; box-shadow: inset 0 0 0 2px #22305a; clip-path: var(--notch); }
.advanced-grid label { color: var(--muted); }
.check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.check-row .check-chip { color: var(--text); background: #141d31; border-color: #22305a; }
.advanced-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chip .mode-icon { display: inline-block; }
.field-grid .check-chip { display: inline-flex; grid-template-columns: none; gap: 10px; font-size: 16px; }
/* Server page: game-mode pills in the header, at-a-glance row, section title */
.mode-pill { gap: 6px; }
.mode-pill .mode-icon { display: inline-block; }
.glance dd a { color: var(--text); text-decoration: none; }
.glance dd a:hover { color: var(--link); }
.section-title { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: -12px; }

/* =====================================================================================
   Pixel-art worlds (js/pixel-world.js): a block scene behind the night band and the
   footer, under an 85% navy overlay so it stays a texture, not a distraction.
   ===================================================================================== */
.night-band[data-pixel-world], .foot[data-pixel-world] { position: relative; }
.foot[data-pixel-world] { overflow: hidden; }
.pixel-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pixel-art canvas { position: absolute; left: 0; bottom: 0; image-rendering: pixelated; }
.pixel-art::after { content: ""; position: absolute; inset: 0; background: rgba(11, 17, 32, .85); }
.foot .pixel-art::after { background: rgba(8, 13, 25, .85); }
[data-pixel-world] > .wrap { position: relative; z-index: 1; }
/* While the sticky header sits over the hero's art it lets the art through. */
.top.over-art { background: transparent; backdrop-filter: none; }

/* ---------- language button (js/translate.js) ---------- */
.lang-menu { position: relative; flex-shrink: 0; }
.lang-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px; cursor: pointer;
                     background: var(--surface); color: var(--muted); clip-path: var(--notch-sm); box-shadow: inset 0 0 0 2px var(--line-strong);
                     font: 700 14px var(--mono); transition: color .12s steps(2, end); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); }
.lang-menu summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lang-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(320px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto;
              display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; background: var(--ground); clip-path: var(--notch);
              box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -4px 0 var(--line-strong); }
.lang-note { grid-column: 1 / -1; margin: 2px 4px 6px; color: var(--muted); font: 500 13px var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.lang-panel button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text); text-align: left; font: 17px var(--body); cursor: pointer; clip-path: var(--notch-sm); }
.lang-panel button:hover { background: var(--surface-2); }
.lang-panel button[aria-current="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 1100px) {
  .lang-menu { margin-left: auto; }
  .lang-menu ~ .acct-icons { margin-left: 8px; }
  .lang-menu ~ .menu { margin-left: 8px; }
  .lang-menu summary { height: 52px; }
}
@media (max-width: 420px) { .lang-menu .lang-code { display: none; } }
.lang-status { position: fixed; left: 16px; bottom: 16px; z-index: 45; max-width: calc(100vw - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
               padding: 12px 16px; background: var(--ground, #0b1120); color: #eef2fb; font: 15px var(--body); clip-path: var(--notch);
               box-shadow: inset 0 0 0 2px #2a3a68; }
.lang-status[hidden] { display: none; }
.lang-status button { border: 0; padding: 6px 10px; background: #3dd68c; color: #052414; font: 700 14px var(--display); cursor: pointer; clip-path: var(--notch-sm); }
/* Players and name tags sit above the overlay at half strength (js/pixel-world.js). */
.pixel-art canvas.actors { z-index: 1; opacity: .55; }
.lang-menu .flag { width: 22px; height: 15px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); flex-shrink: 0; }
.lang-menu summary.has-flag .lang-code { display: none; }
.lang-menu summary.has-flag { padding: 0 13px; }
.lang-panel button { display: flex; align-items: center; gap: 10px; }

/* ---------- compact home on phones: four of each, then "View all" ---------- */
.view-all { display: none; }
@media (max-width: 700px) {
  .compact-4 > :nth-child(n + 5) { display: none; }
  .view-all { display: flex; width: 100%; margin-top: 12px; }
  .section:has(.view-all) .section-head .more-link { display: none; }
}
.browse-tile small.note { margin-left: auto; }
@media (min-width: 701px) { .browse-row.compact-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- language dialog (js/translate.js) ---------- */
.lang-dialog { width: min(440px, calc(100vw - 32px)); padding: 26px 26px 22px; border: 0; background: #0b1120; color: #eef2fb;
               clip-path: var(--notch); box-shadow: inset 0 0 0 2px #2a3a68, inset 0 -5px 0 #2a3a68; font: 17px/1.5 var(--body); }
.lang-dialog::backdrop { background: rgba(4, 8, 18, .72); }
.lang-dialog-head { display: flex; align-items: center; gap: 14px; }
.lang-dialog-flag .flag { width: 44px; height: 30px; image-rendering: pixelated; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); display: block; }
.lang-dialog h2 { margin: 0; font: 700 24px/1.2 var(--display); color: #ffffff; }
.lang-dialog-body { margin: 14px 0 0; color: #c9d2e6; }
.lang-bar { position: relative; height: 16px; margin-top: 18px; background: #141d31; box-shadow: inset 0 0 0 2px #2a3a68; overflow: hidden; }
.lang-bar i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 0; max-width: calc(100% - 4px);
              background: repeating-linear-gradient(90deg, #3dd68c 0 10px, #2fbf78 10px 12px); transition: width .2s steps(4, end); }
.lang-bar.busy i { width: 30%; animation: lang-busy 1.2s steps(12, end) infinite; }
@keyframes lang-busy { from { left: -30%; } to { left: 100%; } }
.lang-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.lang-dialog-actions .btn { min-width: 110px; }
.lang-dialog .btn-outline { background: transparent; color: #eef2fb; box-shadow: inset 0 0 0 2px #3a4c80; }
@media (prefers-reduced-motion: reduce) { .lang-bar.busy i { animation: none; width: 100%; opacity: .5; } }
/* The header world fades out and back in, in a few blocky steps, when it changes scene. */
.pixel-art canvas { transition: opacity .4s steps(4, end); }
.pixel-art.fading canvas { opacity: 0 !important; }

/* ---------- game-mode tiles: big icon, count badge top right, name on its own two lines ---------- */
.mode-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.mode-tile { justify-content: flex-start; gap: 12px; min-height: 0; padding: 14px 14px 16px; }
.mode-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mode-tile .mode-icon { width: 44px; height: 44px; }
.mode-count { flex-shrink: 0; min-width: 26px; padding: 3px 7px; text-align: center; font: 700 13px/1.2 var(--mono); color: #1c2744;
              background: rgba(255, 255, 255, .78); clip-path: var(--notch-sm); box-shadow: inset 0 0 0 1px rgba(28, 39, 68, .14); }
.mode-tile-name { display: block; font-size: 17px; line-height: 1.2; min-height: 2.4em; text-wrap: balance; overflow-wrap: anywhere; }
/* Even rows at every width: 8 across, 4 across, then 2 by 2 on phones (four are shown there). */
.mode-tiles.compact-4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1199px) { .mode-tiles.compact-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mode-tiles.compact-4, .browse-row.compact-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================================
   Status, trends, seasons, coming soon (2026-09-25)
   ===================================================================================== */
.pill.trend { text-decoration: none; }
.pill.trend-up { background: rgba(26, 160, 90, .14); color: #0f7a45; }
.pill.trend-down { background: rgba(214, 60, 60, .12); color: #b02e26; }
.pill.trend-flat { background: rgba(80, 100, 140, .12); color: #43506b; }
.night .pill.trend-up { color: #7ee8b0; } .night .pill.trend-down { color: #ff9d95; } .night .pill.trend-flat { color: #c3cce0; }
.pill.season { background: rgba(240, 180, 41, .18); color: #7a5200; }
.night .pill.season { color: #ffd98a; }
.pill.season .pix, .pill.season svg { width: 14px; height: 14px; }

/* stats page */
.status-now { display: grid; gap: 4px; margin-top: 6px; padding: 16px 20px; clip-path: var(--notch); max-width: 720px; }
.status-now b { font: 700 24px var(--display); }
.status-now.up { background: #0f2a26; box-shadow: inset 4px 0 0 #3dd68c; }
.status-now.up b { color: #7ee8b0; }
.status-now.down { background: #2e1620; box-shadow: inset 4px 0 0 #ff5d5d; }
.status-now.down b { color: #ffb3ad; }
.status-now span { color: var(--muted); }
.stats-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.trend-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; color: var(--muted); }
.chart-card { padding: 16px; margin: 0; }
.day-chart { display: block; width: 100%; height: 220px; }
.day-chart .bar { fill: #3dd68c; opacity: .75; }
.day-chart .bar.down { fill: #ff7b72; }
.day-chart .peak { fill: none; stroke: #1a9cc8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.chart-key .key { display: inline-block; width: 14px; height: 10px; margin-right: -8px; }
.chart-key .key.avg { background: #3dd68c; } .chart-key .key.peak { background: #1a9cc8; height: 3px; } .chart-key .key.down { background: #ff7b72; }
.outages { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.outages li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; }
.outages li.ongoing { box-shadow: inset 4px 0 0 #ff5d5d, inset 0 0 0 2px var(--line); }

/* is it down */
.down-check { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; margin-top: 8px; }
.down-check .search { flex: 1 1 320px; margin: 0; width: auto; }
.down-check .search input { font-size: 18px; }
.down-check select { min-height: 50px; padding: 0 12px; background: var(--surface); color: var(--text); border: 0; clip-path: var(--notch-sm); box-shadow: inset 0 0 0 2px var(--line-strong); font: 700 16px var(--body); }
.down-result { display: grid; gap: 10px; padding: 22px; }
.down-result h2 { margin: 0; }
.down-result.up { box-shadow: inset 5px 0 0 #3dd68c, inset 0 0 0 2px var(--line); }
.down-result.down { box-shadow: inset 5px 0 0 #ff5d5d, inset 0 0 0 2px var(--line); }
.down-result .btn { justify-self: start; }
.down-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.down-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 12px 14px; }
.down-list img { grid-row: span 2; image-rendering: pixelated; clip-path: var(--notch-art); }
.down-name { font: 700 17px var(--display); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.down-list .pill, .down-list .note { justify-self: start; }
.down-list li > .note { grid-column: 2; }
.empty-note { padding: 18px 20px; }

/* coming soon */
.upcoming-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.upcoming { display: grid; grid-template-columns: 170px minmax(0, 1fr) 260px; gap: 20px; align-items: start; padding: 20px; scroll-margin-top: 100px; }
.upcoming:target { box-shadow: inset 0 0 0 3px var(--accent); }
.upcoming-when { display: grid; gap: 6px; padding: 12px; background: #0b1120; color: #eef2fb; clip-path: var(--notch); text-align: center; }
.countdown { font: 700 18px/1.2 var(--display); color: #7ee8b0; }
.upcoming-when time { font-size: 14px; color: #c3cce0; }
.upcoming-main h2 { margin: 0 0 6px; }
.upcoming-main p { margin: 0 0 10px; }
.upcoming-more summary { cursor: pointer; font-weight: 700; margin-top: 8px; }
.upcoming-act { display: grid; gap: 8px; }
.notify > summary { list-style: none; cursor: pointer; }
.notify > summary::-webkit-details-marker { display: none; }
.notify-form { display: grid; gap: 8px; margin-top: 8px; }
.waiting { text-align: center; }
@media (max-width: 900px) { .upcoming { grid-template-columns: minmax(0, 1fr); } .upcoming-when { justify-self: start; text-align: left; } }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.verified-voter .pix, .verified-voter svg { width: 14px; height: 14px; }