/* ==========================================================================
   ZeroPvP design system (2026-10-15 redesign, built on the 2026-10-11 system)
   ==========================================================================

   One stylesheet for the whole site: tokens, base type, the top bar, the phone menu, the page
   head, the footer and every shared component. Linked LAST in every page's head, so it decides
   the shape of the site; a page's own sheet keeps only the layout that page alone has.
   Plan and reasons: REDESIGN-2026-10-15.md in the repo root.

   The brief: an esports site that feels alive. Real data is the hero.
   - Purple-tinted near-black neutrals in bands that alternate, so every section reads as a
     block. Lavender #A98BFF is the brand colour: the primary action, the current page, focus.
   - Functional colours mean one thing each: live red, win green, loss red, gold/silver/bronze
     for places, tier colours (mirroring TierPoints in the plugin and the bot) on tier marks.
   - Depth without glow: a white hairline lip, black shadows, buttons on a solid edge that press
     down. Shading inside a surface (one hue, dark to darker) is fine; multi-hue or purple
     gradients, gradient text and coloured shadows are not.
   - Monocraft for headings and big numbers, Barlow Condensed 600 for names and labels, IBM Plex
     for reading. Nothing heavier than 600 (fonts.css maps 600 to 900 onto the 600 file).
   - No backdrop images, no logo behind the page, no grid or dot patterns.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest. A purple tint throughout. */
  --bg-deep: #07060c;
  --bg: #0b0912;
  --bg-band: #110e1a;
  --surface: #16121f;
  --surface-2: #1c1728;
  --surface-3: #251e34;
  --surface-4: #2f2742;
  --sunken: #0d0a15;
  --line: #262036;
  --line-2: #352c49;
  --line-3: #4b4064;

  /* Text */
  --text: #f3effb;
  --text-2: #b9b0cd;
  --text-3: #8c83a5;

  /* Brand */
  --accent: #a98bff;
  --accent-mid: #b9a0ff;
  --accent-hi: #cdbbff;
  --accent-lo: #6e54c8;
  --accent-ink: #140e26;
  --accent-wash: rgba(169, 139, 255, 0.12);
  --accent-line: rgba(169, 139, 255, 0.45);

  /* Signals */
  --live: #ff4d5e;
  --live-wash: rgba(255, 77, 94, 0.14);
  --hot: #ff7a3d;
  --hot-wash: rgba(255, 122, 61, 0.14);
  --win: #3fd48a;
  --win-wash: rgba(63, 212, 138, 0.12);
  --loss: #f2566b;
  --loss-wash: rgba(242, 86, 107, 0.12);
  --gold: #f5c542;
  --silver: #c9ced8;
  --bronze: #cf8b58;
  --discord: #5865f2;
  --discord-lo: #3a45b8;

  /* Tiers: mirrors TierPoints in the plugin and the bot */
  --t-lt5: #7a7a7a; --t-mt5: #8c8c8c; --t-ht5: #9e9e9e;
  --t-lt4: #4e9a4e; --t-mt4: #5cb85c; --t-ht4: #6ed96e;
  --t-lt3: #3b8fd4; --t-mt3: #4aa3e8; --t-ht3: #5cb8ff;
  --t-lt2: #9b59d0; --t-mt2: #ae6be8; --t-ht2: #c280ff;
  --t-lt1: #e8a020; --t-mt1: #f5b731; --t-ht1: #ffd700;

  /* Type */
  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  /* The Minecraft-style pixel face (Monocraft, OFL). One font pixel is 1/9 em: set it only at
     the --px sizes so every pixel lands on whole screen pixels. */
  --f-pixel: 'Monocraft', 'Barlow Condensed', ui-monospace, monospace;
  --px-2: 18px; --px-3: 27px; --px-4: 36px; --px-5: 45px; --px-6: 54px; --px-7: 63px; --px-8: 72px;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8438rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --fs-hero: clamp(2.9rem, 1.6rem + 5.6vw, 5.6rem);

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px;
  --shell: 1320px;
  --top-h: 60px;

  /* Shape and depth */
  --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px;
  --cut: 7px;
  --lip: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --raise: 0 1px 0 rgba(0, 0, 0, 0.6), 0 18px 34px -22px rgba(0, 0, 0, 0.95);
  --raise-hi: 0 2px 0 rgba(0, 0, 0, 0.6), 0 26px 44px -24px rgba(0, 0, 0, 1);
  --well: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  /* Shading inside a surface: lighter at the top, one hue. */
  --shade: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 140px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --fast: 140ms;

  /* Entrances, shared with motion.js */
  --zr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --zr-rise: 320ms;
  --zr-step: 60ms;

  /* Legacy names, still read by the page sheets. */
  --surface-sunk: var(--sunken);
  --border: var(--line-2);
  --border-soft: var(--line);
  --line-strong: var(--line-2);
  --text-dim: var(--text-2);
  --text-faint: var(--text-3);
  --muted: var(--text-3);
  --accent-2: var(--accent);
  --accent-3: var(--accent-hi);
  --gold-wash: rgba(245, 197, 66, 0.12);
  --emerald: var(--win);
  --font-display: var(--f-display);
  --font-pixel: var(--f-pixel);
  --font-body: var(--f-body);
  --font-mono: var(--f-mono);
  --ease-out: var(--ease);
  --ease-ui: var(--ease);
  --zp-shell: min(var(--shell), calc(100vw - 2 * var(--gutter)));
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; --top-h: 64px; } }

/* Tier colour by name: <span class="zp-tier" data-tier="HT3">HT3</span> */
[data-tier="LT5"] { --tc: var(--t-lt5); } [data-tier="MT5"] { --tc: var(--t-mt5); } [data-tier="HT5"] { --tc: var(--t-ht5); }
[data-tier="LT4"] { --tc: var(--t-lt4); } [data-tier="MT4"] { --tc: var(--t-mt4); } [data-tier="HT4"] { --tc: var(--t-ht4); }
[data-tier="LT3"] { --tc: var(--t-lt3); } [data-tier="MT3"] { --tc: var(--t-mt3); } [data-tier="HT3"] { --tc: var(--t-ht3); }
[data-tier="LT2"] { --tc: var(--t-lt2); } [data-tier="MT2"] { --tc: var(--t-mt2); } [data-tier="HT2"] { --tc: var(--t-ht2); }
[data-tier="LT1"] { --tc: var(--t-lt1); } [data-tier="MT1"] { --tc: var(--t-mt1); } [data-tier="HT1"] { --tc: var(--t-ht1); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.zp-lock { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--text);
  text-wrap: balance;
}
h1, h2 { text-transform: uppercase; }
b, strong { font-weight: 600; }
small { font-size: var(--fs-sm); }
code, kbd, samp { font-family: var(--f-mono); font-size: 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
::selection { background: rgba(169, 139, 255, 0.34); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
img.pix, .pix img, img[src*="kit-"], img[src*="items/"], img[src*="assets/mc/"], img[src*="mc-heads.net"], img[src*="crafatar"] { image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Scrollbars, both directions */
html { scrollbar-color: var(--line-3) var(--bg); }
::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border: 3px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* Numbers that line up */
.zp-num, .zp-tnum, td, .zp-stat-v, .stat-value, .zp-rank, .zp-score, time, .tnum { font-variant-numeric: tabular-nums lining-nums; }
.zp-num { font-family: var(--f-display); font-weight: 600; letter-spacing: 0; }

/* Screen reader only */
.zp-sr, .sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.zp-shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
/* Every page's main column sits in the shell unless it opts out (the front page has full-width bands). */
body > main:not(.zp-bleed) { display: block; width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; padding: var(--s-6) 0 var(--s-8); }
.zp-sec { position: relative; padding: var(--s-8) 0; }
.zp-band { background: var(--bg-band); border-block: 1px solid var(--line); }
.zp-deep { background: var(--bg-deep); border-block: 1px solid var(--line); }
.zp-band + .zp-band, .zp-deep + .zp-deep { border-top: 0; }
@media (min-width: 900px) { .zp-sec { padding: 76px 0; } }

/* Sub pages: the top-level sections of the main column alternate, every second one on a
   full-width band (drawn by ::before behind the section, so the column keeps its width). */
:is(.pf-sec, .st-sec, .uhc-sec, .hof-sec):nth-of-type(even),
.zp-alt {
  position: relative; isolation: isolate;
  padding-block: var(--s-7);
}
:is(.pf-sec, .st-sec, .uhc-sec, .hof-sec):nth-of-type(even)::before,
.zp-alt::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background: var(--bg-band); border-block: 1px solid var(--line); pointer-events: none;
}

/* Section head: a numbered kicker with a rule, a pixel headline, one short line, a link. */
.zp-sec-head, .section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-6); text-align: left; max-width: none;
}
.zp-sec-head > div, .section-head > div { min-width: 0; }
.zp-sec-head h2, .section-head h2, .zp-h2 { font-size: var(--fs-2xl); line-height: 1; text-transform: uppercase; margin: 0; }
.zp-sec-head p, .section-head p { margin: var(--s-3) 0 0; color: var(--text-2); max-width: 56ch; font-size: var(--fs-md); }
.zp-sec-link {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 36px; padding: 0 12px;
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface);
  box-shadow: var(--lip), 0 2px 0 #050409;
  transition: color var(--fast), border-color var(--fast), background var(--fast), transform 70ms ease-out, box-shadow 70ms ease-out;
}
.zp-sec-link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); margin-left: 2px; }
.zp-sec-link:hover { border-color: var(--accent-line); background: var(--surface-2); }
.zp-sec-link:active { transform: translateY(2px); box-shadow: var(--lip), 0 0 0 #050409; }
/* A section link inside a panel head or foot stays small and flat. */
.zp-panel-head .zp-sec-link, .zp-panel-foot .zp-sec-link, .ph-cap .zp-sec-link {
  min-height: 0; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; box-shadow: none;
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--text-2);
}
.zp-panel-head .zp-sec-link:hover, .zp-panel-foot .zp-sec-link:hover { color: var(--text); border-color: var(--accent); background: none; }
.zp-panel-head .zp-sec-link::after, .zp-panel-foot .zp-sec-link::after { width: 6px; height: 6px; border-width: 1.5px; border-color: currentColor; }

/* ---------- type ---------- */
.zp-kicker, .kicker, .eyebrow-pill, .g-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; line-height: 1.3;
  letter-spacing: 0; text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--s-4);
  padding: 0; border: 0; border-radius: 0; background: none;
}
.zp-kicker::before, .kicker::before { content: ""; width: 8px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 100%); flex: none; }
/* The rule after a section kicker; it draws in when the section arrives (motion.css). */
.zp-sec-head .zp-kicker::after, .page-hero .zp-kicker::after, .page-hero .kicker::after, .page-hero .eyebrow-pill::after {
  content: ""; width: 56px; height: 1px; background: var(--accent-line); flex: none; transform-origin: left;
}
.eyebrow-pill .dot, .eyebrow-pill .zp-dot { width: 8px; height: 8px; border-radius: 0; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 100%); box-shadow: none; flex: none; }
.eyebrow-pill .dot::after, .eyebrow-pill .zp-dot::after { display: none; }
.eyebrow-pill img { width: 16px; height: 16px; }
.zp-h1 { font-size: var(--fs-3xl); line-height: 0.95; text-transform: uppercase; }
.zp-h3 { font-size: var(--fs-lg); line-height: 1.1; }
.zp-lede, .lede { font-size: var(--fs-md); color: var(--text-2); max-width: 60ch; }
.zp-muted { color: var(--text-2); }
.zp-faint { color: var(--text-3); }
.zp-mono { font-family: var(--f-mono); }
.zp-label { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.zp-pixel, .pixel, .smallcaps { font-family: var(--f-display); font-variant-caps: normal; font-feature-settings: normal; }
.accent-text { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.zp-accent { color: var(--accent); }

/* Commands you type in game: <code class="zp-cmd">/sync</code> */
.zp-cmd, .mono-cmd, .cmd {
  display: inline-block; font-family: var(--f-mono); font-size: 1em; font-weight: 500;
  padding: 1px 6px; border-radius: var(--r-1);
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--accent-hi);
  white-space: nowrap;
}
.mono-cmd { cursor: pointer; }
.mono-cmd.copied { border-color: var(--win); color: var(--win); }

/* ---------- skip link ---------- */
.zp-skip { position: absolute; left: var(--s-3); top: -100px; z-index: 300; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; border-radius: var(--r-2); }
.zp-skip:focus { top: var(--s-3); }

/* ---------- buttons ----------
   A button stands on a solid edge (the shadow below it) and presses down into it. The face has
   a little light from above (shading inside the surface, one hue). */
.zp-btn, .btn, .play-btn {
  --b-bg: var(--surface-3); --b-bg-h: var(--surface-4); --b-fg: var(--text); --b-line: var(--line-3); --b-edge: #06050a;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--b-line); border-radius: var(--r-2);
  background: var(--b-bg) linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 55%);
  color: var(--b-fg);
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 0 var(--b-edge), 0 10px 18px -10px rgba(0, 0, 0, 0.9);
  transform: translateY(0);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color var(--fast), border-color var(--fast), color var(--fast);
  margin-bottom: 4px;
}
.zp-btn svg, .btn svg, .play-btn svg { width: 18px; height: 18px; flex: none; }
.zp-btn:hover, .btn:hover, .play-btn:hover { background-color: var(--b-bg-h); }
.zp-btn:active, .btn:active, .play-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 var(--b-edge), 0 4px 8px -6px rgba(0, 0, 0, 0.9); }
.zp-btn[disabled], .zp-btn[aria-disabled="true"], .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.zp-btn.is-primary, .btn-primary, .btn.btn-primary, .play-btn.primary, .play-btn.ip {
  --b-bg: var(--accent); --b-bg-h: var(--accent-mid); --b-fg: var(--accent-ink); --b-line: var(--accent-hi); --b-edge: var(--accent-lo);
}
.zp-btn.is-discord, .play-btn.discord { --b-bg: var(--discord); --b-bg-h: #6a76f5; --b-fg: #fff; --b-line: #7883f6; --b-edge: var(--discord-lo); }
.zp-btn.is-gold, .btn.gold { --b-bg: var(--gold); --b-bg-h: #ffd35e; --b-fg: #1b1404; --b-line: #ffe08a; --b-edge: #9c7814; }
.zp-btn.is-ghost, .btn-ghost { --b-bg: transparent; --b-bg-h: var(--surface-2); --b-line: var(--line-2); background-image: none; box-shadow: none; margin-bottom: 0; }
.zp-btn.is-ghost:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.zp-btn.is-lg { min-height: 54px; padding: 0 26px; font-size: var(--mc-s1); }
.zp-btn.is-sm { min-height: 34px; padding: 0 12px; font-size: var(--mc-s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 0 var(--b-edge); margin-bottom: 3px; }
.zp-btn.is-sm:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--b-edge); }
.zp-btn.is-block { display: flex; width: 100%; }
.zp-icon-btn { width: 44px; padding: 0; }
.zp-icon-btn.is-sm { width: 36px; min-height: 36px; }
.zp-btn.is-arrow::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }

/* The copy-the-address button: <button class="zp-btn is-primary zp-ip" data-zp-copy=...> */
.zp-ip { gap: 0; padding: 0; overflow: hidden; }
.zp-ip .zp-ip-text { padding: 0 16px; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; text-transform: none; }
.zp-ip .zp-ip-hint { align-self: stretch; display: inline-flex; align-items: center; padding: 0 14px; border-left: 1px solid rgba(20, 14, 38, 0.25); font-size: var(--mc-s1); letter-spacing: 0; background: rgba(20, 14, 38, 0.1); }
.zp-ip.is-lg .zp-ip-text { font-size: var(--mc-s1); padding: 0 20px; }
.zp-ip.is-copied { --b-bg: var(--win); --b-bg-h: var(--win); --b-line: #7ae6b0; --b-edge: #1f7f50; --b-fg: #04170d; }
.play-btn.ip .ip-text { font-family: var(--f-mono); text-transform: none; letter-spacing: 0; }
.play-btn.ip .ip-hint { font-size: 1em; opacity: 0.8; }
.play-btn.ip.copied { --b-bg: var(--win); --b-edge: #1f7f50; --b-fg: #04170d; }

/* The big address field (front page hero, join page) */
.zp-ipbox {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  width: 100%; max-width: 480px; padding: 0; text-align: left;
  border: 1px solid var(--line-3); border-radius: var(--r-3); background: var(--sunken);
  box-shadow: var(--well), 0 4px 0 #050409; cursor: pointer; overflow: hidden;
  transition: border-color var(--fast), transform 90ms ease-out, box-shadow 90ms ease-out;
  margin-bottom: 4px;
}
.zp-ipbox:hover { border-color: var(--accent-line); }
.zp-ipbox:active { transform: translateY(3px); box-shadow: var(--well), 0 1px 0 #050409; }
.zp-ipbox-main { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 11px 18px; min-width: 0; }
.zp-ipbox-k { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.zp-ipbox .zp-ip-text { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-ipbox-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 20px;
  background: var(--accent) linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%); color: var(--accent-ink);
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 var(--accent-lo);
  transition: background-color var(--fast);
}
.zp-ipbox-btn svg { width: 17px; height: 17px; }
.zp-ipbox:hover .zp-ipbox-btn { background-color: var(--accent-mid); }
.zp-ipbox.is-copied { border-color: var(--win); }
.zp-ipbox.is-copied .zp-ipbox-btn { background-color: var(--win); color: #04170d; box-shadow: inset 0 -3px 0 #1f7f50; }

/* ---------- status ---------- */
.zp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.zp-dot.is-on { background: var(--win); box-shadow: 0 0 0 3px rgba(63, 212, 138, 0.16); }
.zp-dot.is-off { background: var(--loss); }
.zp-dot.is-hot, .zp-dot.is-live, .is-live > .zp-dot { background: var(--live); box-shadow: 0 0 0 3px var(--live-wash); }
.zp-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); text-decoration: none; }
.zp-live-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: var(--r-1); background: var(--live-wash); color: var(--live); font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.zp-live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   Top bar (v6, 2026-10-21)
   The owner: "a dynamic nav bar with the ZeroPvP logo in the middle, a little sticking out", and
   no scroll progress line under it any more. The wordmark sits on a badge in the middle that
   hangs a little below the bar; the links split left and right of it; the address, account and
   Discord sit on the right. Below 1280px: the menu button left, the badge in the middle, the
   address button right (Discord from 600px, the whole address from 768px, the account from 900px).

   One sticky bar whose layout height never changes (--top-h, the compact bar), so nothing under
   it ever moves. At the top of a page it reads taller (--top-tall) and more see-through: the fill
   reaches further down, the row sits lower, the badge is full size. Past 8px of scroll (site.js
   sets .is-scrolled) the fill shrinks to the compact bar, the row rises and the badge scales
   down. A fast scroll down slides the whole bar away (.is-hidden), any scroll up brings it back.
   Transform and opacity only. The look (frames, obsidian) is in mc.css.
   ========================================================================== */
:root {
  /* the compact bar and the bar at the top of a page, as numbers so the fill can scale between them */
  --top-h-n: 60; --top-tall-n: 72;
  --top-h: calc(var(--top-h-n) * 1px); --top-tall: calc(var(--top-tall-n) * 1px);
  /* the badge: wordmark height, padding, where it hangs (from the row's top), how far it shrinks
     and drops when compact, and the width of the middle column it sits in */
  --bdg-logo: 26px; --bdg-py: 12px; --bdg-px: 16px; --bdg-top: 8px; --bdg-s: 0.82; --bdg-y: 6px; --bdg-col: 150px;
  --bar-ms: 280ms;
}
@media (max-width: 359px) {
  :root { --bdg-logo: 22px; --bdg-px: 12px; --bdg-py: 11px; --bdg-top: 10px; }
}
@media (min-width: 1280px) {
  :root { --top-h-n: 64; --top-tall-n: 84; --bdg-logo: 32px; --bdg-py: 14px; --bdg-px: 20px; --bdg-top: 4px; --bdg-s: 0.86; --bdg-y: 4px; --bdg-col: 196px; }
}

.zp-topwrap {
  position: sticky; top: 0; z-index: 100;
  height: var(--top-h);
  pointer-events: none; /* the see-through reach below the compact bar never takes a click */
  transition: transform var(--bar-ms) var(--ease);
}
.zp-topwrap > * { pointer-events: auto; }
/* the fill: at the top of a page tall and see-through, then the compact bar, solid */
.zp-topwrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--top-tall); z-index: -1; pointer-events: none;
  background: rgba(12, 13, 17, 0.97);
  opacity: 0.4; transform-origin: 50% 0;
  transition: transform var(--bar-ms) var(--ease), opacity var(--bar-ms) var(--ease);
}
/* its lower edge, which travels up with it */
.zp-topwrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: -1; pointer-events: none;
  background: linear-gradient(#050507 0 2px, rgba(255, 255, 255, 0.03) 2px 4px);
  opacity: 0; transform: translateY(var(--top-tall));
  transition: transform var(--bar-ms) var(--ease), opacity var(--bar-ms) var(--ease);
}
.zp-topwrap.is-scrolled::before, html.zp-lock .zp-topwrap::before { opacity: 1; transform: scaleY(calc(var(--top-h-n) / var(--top-tall-n))); }
.zp-topwrap.is-scrolled::after, html.zp-lock .zp-topwrap::after { opacity: 1; transform: translateY(var(--top-h)); }
/* out of the way: the bar and the badge hanging under it */
.zp-topwrap.is-hidden { transform: translateY(calc(-100% - 40px)); }

.zp-top {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--bdg-col) minmax(0, 1fr); align-items: center;
  width: min(100% - 2 * var(--gutter), var(--shell)); height: var(--top-h); margin-inline: auto;
  transform: translateY(calc((var(--top-tall) - var(--top-h)) / 2));
  transition: transform var(--bar-ms) var(--ease);
}
.zp-topwrap.is-scrolled .zp-top, html.zp-lock .zp-top { transform: none; }

/* the badge in the middle */
.zp-brand { grid-column: 2; grid-row: 1; position: relative; align-self: stretch; display: block; min-width: 0; text-decoration: none; }
.zp-badge {
  position: absolute; left: 50%; top: var(--bdg-top);
  display: block; padding: var(--bdg-py) var(--bdg-px);
  transform-origin: 50% 0; transform: translateX(-50%);
  transition: transform var(--bar-ms) var(--ease);
}
.zp-badge img { display: block; height: var(--bdg-logo); width: auto; max-width: none; }
.zp-topwrap.is-scrolled .zp-badge, html.zp-lock .zp-badge { transform: translateX(-50%) translateY(var(--bdg-y)) scale(var(--bdg-s)); }

/* the two sides */
.zp-burger { grid-column: 1; grid-row: 1; justify-self: start; }
.zp-right { grid-column: 3; grid-row: 1; display: flex; align-items: center; align-self: stretch; min-width: 0; }
.zp-nav { position: relative; display: none; flex: none; align-items: stretch; align-self: stretch; gap: 0; }
.zp-nav.is-l { grid-column: 1; grid-row: 1; justify-self: start; }
.zp-nav.is-r { margin-left: 14px; }
.zp-nav > a, .zp-more > button {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px;
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  color: var(--text-2); text-decoration: none; background: none; border: 0;
  transition: color var(--fast);
}
.zp-nav > a:hover, .zp-more > button:hover, .zp-more.is-open > button { color: var(--text); }
/* the current page: white text, a lavender block under it */
.zp-nav > a[aria-current="page"], .zp-more.has-current > button { color: var(--text); }
.zp-nav > a[aria-current="page"]::after, .zp-more.has-current > button::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 14px; height: 4px; background: var(--accent);
}
.zp-nav > a:focus-visible, .zp-more > button:focus-visible { outline-offset: -8px; }
/* the pointer follower: one bar per side that slides to whichever link the pointer is on (site.js) */
.zp-nav-ink {
  position: absolute; left: 0; bottom: 14px; width: 100px; height: 4px; background: var(--line-3);
  transform-origin: 0 50%; transform: translateX(0) scaleX(0); opacity: 0; pointer-events: none;
  transition: transform 240ms var(--ease), opacity 160ms;
}
.zp-nav.is-inked .zp-nav-ink { opacity: 1; }
.zp-more { position: relative; display: flex; }
.zp-more > button svg { width: 14px; height: 14px; transition: transform var(--fast); }
.zp-more.is-open > button svg { transform: rotate(180deg); }
.zp-menu {
  position: absolute; top: calc(100% - 12px); left: -8px; z-index: 10; min-width: 300px;
  display: grid; padding: 6px;
  background: var(--surface) var(--shade); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--lip), 0 24px 44px -20px rgba(0, 0, 0, 0.98);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity 140ms ease-out, transform 180ms var(--ease), visibility 0s linear 180ms;
}
.zp-more.is-open .zp-menu { visibility: visible; opacity: 1; transform: none; transition: opacity 140ms ease-out, transform 180ms var(--ease), visibility 0s; }
.zp-menu a { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--r-2); text-decoration: none; color: var(--text); transition: background var(--fast); }
.zp-menu a b { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
.zp-menu a small { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.zp-menu a:hover, .zp-menu a:focus-visible { background: var(--surface-3); }
.zp-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); background: var(--surface-2); }

/* the right end: the address, the account, Discord */
.zp-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.zp-actions .zp-btn { margin-bottom: 0; }
.zp-ipchip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface);
  font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text); white-space: nowrap;
  transition: border-color var(--fast), background var(--fast);
}
.zp-ipchip svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.zp-actions { flex: none; }
.zp-ipchip:hover { border-color: var(--accent-line); background: var(--surface-2); }
.zp-ipchip .zp-ip-short { display: none; }
.zp-ipchip .zp-ip-hint { display: none; font-size: var(--mc-s1); color: var(--text-3); padding-left: 8px; border-left: 1px solid var(--line-2); }
.zp-ipchip.is-copied { border-color: var(--win); }
.zp-ipchip.is-copied svg, .zp-ipchip.is-copied .zp-ip-hint, .zp-ipchip.is-copied .zp-ip-short { color: var(--win); }
.zp-signin {
  display: none; align-items: center; gap: 8px; height: 36px; padding: 0 8px;
  color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); border-radius: var(--r-2);
  border: 1px solid transparent; transition: color var(--fast), border-color var(--fast);
}
.zp-signin svg, .zp-signin img { width: 20px; height: 20px; border-radius: var(--r-1); flex: none; }
.zp-signin span { display: none; }
.zp-signin:hover { color: var(--text); border-color: var(--line-2); }
.zp-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.zp-burger span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform 200ms var(--ease), opacity 120ms; }
.zp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.zp-hide-sm { display: none !important; }
@media (min-width: 560px) { .zp-hide-sm { display: inline-flex !important; } }

/* a phone: the menu button, the badge, a short address button ("IP" and the copy mark); from 600
   Discord joins it, from 768 the whole address, from 900 the account */
@media (max-width: 599px) { .zp-top-discord { display: none; } }
@media (max-width: 767px) {
  .zp-ipchip { padding: 0 10px; gap: 6px; }
  .zp-ipchip .zp-ip-text { display: none; }
  .zp-ipchip .zp-ip-short { display: inline; }
}
@media (min-width: 900px) { .zp-signin { display: inline-flex; } }
/* wide: the links either side of the badge; the address loses its copy mark until there is room */
@media (min-width: 1280px) {
  .zp-nav { display: flex; }
  .zp-burger { display: none; }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .zp-nav > a, .zp-more > button { padding: 0 8px; }
  .zp-nav.is-r { margin-left: 8px; }
  .zp-actions { gap: 6px; }
  .zp-actions .zp-ipchip { padding: 0 8px; }
  .zp-nav > a[aria-current="page"]::after, .zp-more.has-current > button::after { left: 8px; right: 8px; }
}
/* the bar keeps to the page's 1320px column, so the right side never gets room for the "Copy" hint
   or the account's name: the address and the account icon say enough there */
@media (min-width: 1280px) and (max-width: 1439px) { .zp-ipchip svg { display: none; } }

/* lite mode: the bar still shrinks, without the slide; reduced motion stops every transition anyway */
html[data-lite] .zp-topwrap, html[data-lite] .zp-top, html[data-lite] .zp-badge, html[data-lite] .zp-topwrap::before, html[data-lite] .zp-topwrap::after { transition-property: opacity; }

/* ==========================================================================
   The phone menu: a full-screen sheet under the bar. Big links in three groups slide in one
   after another; the address and Discord sit at the bottom with the live status.
   ========================================================================== */
.zp-sheet {
  position: fixed; top: var(--top-h); left: 0; right: 0; bottom: 0; z-index: 99;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-deep);
  visibility: hidden; opacity: 0;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.zp-sheet.is-open { visibility: visible; opacity: 1; transition: opacity 200ms ease-out, visibility 0s; }
.zp-sheet-in {
  display: flex; flex-direction: column; gap: var(--s-6); min-height: 100%;
  width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid var(--line);
}
.zp-sheet-nav { display: grid; gap: var(--s-5); }
.zp-sheet-k { margin: 0 0 6px; font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--accent); }
.zp-sheet-group a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: var(--mc-s2); font-weight: 600; letter-spacing: 0; text-transform: uppercase; line-height: 1;
  color: var(--text-2); text-decoration: none;
  transition: color var(--fast), padding var(--fast);
}
.zp-sheet-group a svg { width: 20px; height: 20px; color: var(--text-3); flex: none; transition: transform 200ms var(--ease), color var(--fast); }
.zp-sheet-group a:hover, .zp-sheet-group a:focus-visible { color: var(--text); }
.zp-sheet-group a:hover svg { transform: translateX(4px); color: var(--accent); }
.zp-sheet-group a[aria-current="page"] { color: var(--text); box-shadow: inset 4px 0 0 var(--accent); padding-left: 16px; }
.zp-sheet-group a[aria-current="page"] svg { color: var(--accent); }
.zp-sheet-foot { margin-top: auto; display: grid; gap: var(--s-4); }
.zp-sheet-status { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); }
.zp-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.zp-sheet-actions .zp-ip { flex: 1 1 240px; }
.zp-sheet-actions .is-discord { flex: 1 1 140px; }
@media (min-width: 760px) {
  .zp-sheet-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lite]) .zp-sheet-group a, html:not([data-lite]) .zp-sheet-foot { opacity: 0; transform: translate(0, 14px); }
  html:not([data-lite]) .zp-sheet.is-open .zp-sheet-group a, html:not([data-lite]) .zp-sheet.is-open .zp-sheet-foot {
    opacity: 1; transform: none;
    transition: opacity 260ms ease-out, transform 380ms var(--ease), color var(--fast), padding var(--fast);
    transition-delay: calc(60ms + var(--i, 0) * 28ms);
  }
  html:not([data-lite]) .zp-sheet.is-open .zp-sheet-foot { transition-delay: 300ms; }
}
@media (min-width: 1280px) { .zp-sheet { display: none; } }
/* v6: the badge hangs over the top of the open menu, so the first group starts below it */
.zp-sheet-in { padding-top: calc(var(--s-5) + 14px); }

/* ==========================================================================
   Page head: a full-width deep band (drawn behind the bar too) with the kicker, the pixel title,
   one line, the live figures and the summary card beside it.
   ========================================================================== */
.page-hero {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-5); align-items: start;
  width: min(100% - 2 * var(--gutter), var(--shell)); margin: 0 auto; padding: var(--s-7) 0 var(--s-6);
  text-align: left; border-bottom: 0;
  background: none; isolation: auto;
}
.page-hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw;
  top: calc(-1 * var(--top-h) - var(--s-7)); bottom: 0;
  background: var(--bg-deep) linear-gradient(180deg, var(--bg-deep) 40%, var(--bg-band));
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.page-hero + main, .page-hero ~ main { padding-top: var(--s-6); }
body > main > .page-hero { width: 100%; }
body > main:has(> .page-hero:first-child) { padding-top: 0; }
body > main > .page-hero + * { margin-top: var(--s-7); }
.page-hero h1 { font-size: var(--fs-3xl); line-height: 0.95; margin: 0; text-transform: uppercase; text-shadow: none; max-width: 18ch; }
.page-hero > p, .ph-main > p, .page-hero .hero-sub { margin: var(--s-4) 0 0; color: var(--text-2); font-size: var(--fs-md); max-width: 58ch; }
.page-hero .hero-meta, .ph-main .hero-meta, .page-hero .updated { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); letter-spacing: 0; }
.page-hero .hero-meta a { color: var(--text-2); }
.ph-main { min-width: 0; }
.ph-main > .g-actions, .ph-main > .kp-btns, .page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 980px) {
  .page-hero { padding: var(--s-8) 0 var(--s-7); }
  .page-hero.has-aside { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: var(--s-7); }
}

/* A hotbar in a page head: nine slots with the mode's real items, the first one selected.
   <div class="ph-hotbar" aria-hidden="true"><span class="is-on"><img src="items/x.png" alt=""></span>...</div> */
.ph-hotbar {
  display: grid; grid-template-columns: repeat(9, minmax(0, 52px)); gap: 4px;
  width: max-content; max-width: 100%; margin-top: var(--s-6); padding: 5px;
  background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--well), 0 3px 0 #050409;
}
.ph-hotbar span {
  display: grid; place-items: center; aspect-ratio: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 180ms var(--ease), border-color var(--fast);
}
.ph-hotbar span.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ph-hotbar img { width: 62%; height: auto; image-rendering: pixelated; }
@media (hover: hover) and (pointer: fine) { .ph-hotbar span:hover { transform: translateY(-4px); border-color: var(--line-3); } }
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal:not([data-lite]) .ph-hotbar span { animation: zr-pop 460ms var(--ease-back) both; animation-delay: calc(360ms + var(--i, 0) * 45ms); }
}

/* Stat strip: <div class="zp-stats"><div class="zp-stat"><span class="zp-stat-v">53</span><span class="zp-stat-k">Players</span></div></div> */
.zp-stats, .hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--surface) var(--shade); box-shadow: var(--lip), var(--raise); overflow: hidden;
  justify-content: stretch; gap: 0; flex-wrap: initial;
}
.zp-stat, .hero-stats .stat-tile, .stat-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;
  padding: 16px 18px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px;
  text-align: left; transform: none;
}
.stat-tile:hover { transform: none; border-color: var(--line); }
.zp-stat-v, .stat-value {
  font-family: var(--f-display); font-size: var(--mc-h1r); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.zp-stat-v small { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); font-weight: 500; margin-left: 4px; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.zp-stat-k, .stat-label { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); line-height: 1.3; margin: 0; display: flex; align-items: center; gap: 6px; }
.zp-stat.is-live .zp-stat-k::before, .stat-label .live { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex: none; }

/* The summary beside a page's title (heads.js fills it) */
.ph-aside {
  display: grid; gap: var(--s-3); align-content: start; min-width: 0;
  padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--surface) var(--shade); box-shadow: var(--lip), var(--raise-hi);
}
.ph-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0;
  font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3);
}
.ph-cap a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.ph-cap a:hover { color: var(--text); border-color: var(--accent); }
.ph-rows, .ph-links, .ph-steps, .ph-prizes { list-style: none; margin: 0; padding: 0; display: grid; }
.ph-rows { border-top: 1px solid var(--line); }
.ph-rows > li > a, .ph-rows > li > .ph-row, .ph-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.ph-rows > li > a:hover { background: var(--surface-2); }
.ph-rows .lead { display: inline-flex; align-items: center; gap: 8px; }
.ph-rows .lead img { width: 28px; height: 28px; border-radius: var(--r-1); background: var(--surface-3); }
.ph-rows .lead img.kit { width: 20px; height: 20px; background: none; }
.ph-rows .n { min-width: 18px; font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); color: var(--text-3); text-align: center; }
.ph-rows li:nth-child(1) .n.is-medal { color: var(--gold); }
.ph-rows li:nth-child(2) .n.is-medal { color: var(--silver); }
.ph-rows li:nth-child(3) .n.is-medal { color: var(--bronze); }
.ph-rows .who { min-width: 0; display: grid; }
.ph-rows .who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-rows .who small { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-rows .end { display: grid; justify-items: end; gap: 2px; font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); font-variant-numeric: tabular-nums; }
.ph-rows .end small { font-family: var(--f-mono); font-weight: 400; font-size: var(--mc-s1); color: var(--text-3); }
.ph-rows .ph-row:empty, .ph-rows span.ph-row[aria-hidden] { background: var(--surface-2); min-height: 48px; border-bottom: 1px solid var(--bg); }
.ph-empty { margin: 0; padding: 10px 4px; color: var(--text-3); font-size: var(--fs-sm); }
.ph-chip, .tier-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 20px; padding: 0 6px; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; color: var(--tc, var(--text-2)); background: color-mix(in srgb, var(--tc, #888) 14%, transparent); box-shadow: inset 2px 0 0 var(--tc, var(--line-3)); border-radius: var(--r-1); }
.ph-kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.ph-kits a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; background: var(--surface); text-decoration: none; color: inherit; transition: background var(--fast); }
.ph-kits a:hover { background: var(--surface-2); }
.ph-kits a img { width: 22px; height: 22px; flex: none; }
.ph-kits a span { display: grid; min-width: 0; }
.ph-kits b { font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; }
.ph-kits small { font-size: var(--mc-s1); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-nums { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.ph-nums > div { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; display: grid; gap: 4px; align-content: start; }
.ph-nums dd { margin: 0; font-family: var(--f-display); font-size: var(--mc-s2); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ph-nums dt { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; color: var(--text-3); line-height: 1.35; }
.ph-links { border-top: 1px solid var(--line); }
.ph-links a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-weight: 500; font-size: var(--fs-sm); }
.ph-links a:hover { background: var(--surface-2); }
.ph-links small { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); }
.ph-steps { counter-reset: s; gap: 8px; }
.ph-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: var(--fs-sm); color: var(--text-2); }
.ph-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); color: var(--accent); line-height: 1.4; }
.ph-steps b { color: var(--text); }
.ph-tiers { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.ph-tiers span { height: 26px; display: grid; place-items: center; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, var(--sunken)); box-shadow: inset 0 -2px 0 var(--tc); border-radius: 1px; }
.ph-row-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ph-row-btns .zp-btn { flex: 1 1 auto; }
.ph-search { display: flex; gap: var(--s-2); align-items: center; padding: 4px 4px 4px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--sunken); box-shadow: var(--well); }
.ph-search:focus-within { border-color: var(--accent); }
.ph-search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.ph-search input { flex: 1; min-width: 0; height: 34px; border: 0; background: none; outline: none; color: var(--text); }
.ph-search .zp-btn { min-height: 34px; margin: 0; box-shadow: none; }
.ph-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); text-transform: none; letter-spacing: 0; }
.ph-uhc { display: flex; align-items: center; gap: 12px; }
.ph-uhc img { width: 32px; height: 32px; }
.ph-uhc div { display: grid; }
.ph-uhc-big { font-family: var(--f-display); font-size: var(--mc-s2); font-weight: 600; line-height: 1.1; }
.ph-uhc small { color: var(--text-3); font-size: var(--fs-xs); }
.ph-prizes { border: 1px solid var(--line); border-radius: var(--r-2); }
.ph-prizes li { display: flex; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.ph-prizes li:last-child { border-bottom: 0; }
.ph-prizes b { font-family: var(--f-display); font-size: var(--mc-s1); color: var(--gold); font-variant-numeric: tabular-nums; }
.ph-week { display: grid; gap: 6px; }
.ph-spark { width: 100%; height: 56px; display: block; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-2); }

/* ==========================================================================
   Components
   ========================================================================== */

/* Panel: a header band, a body, an optional footer band. */
.zp-panel, .zp-card, .panel {
  position: relative; min-width: 0;
  background: var(--surface) var(--shade); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--lip), var(--raise);
}
.zp-card { padding: var(--s-5); }
.zp-card.is-pad-lg { padding: var(--s-6); }
a.zp-card { display: block; text-decoration: none; color: inherit; transition: border-color var(--fast), background-color var(--fast); }
a.zp-card:hover { border-color: var(--line-3); background-color: var(--surface-2); }
.zp-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0;
}
.zp-panel-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; line-height: 1.1;
}
.zp-panel-title::before { content: ""; width: 8px; height: 8px; background: var(--pa, var(--accent)); flex: none; clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 100%); }
.zp-panel-title small { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.zp-panel-body { padding: var(--s-4); }
.zp-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-4); border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); border-radius: 0 0 var(--r-3) var(--r-3); font-size: var(--fs-sm); color: var(--text-3); }

/* Tier badge: <span class="zp-tier" data-tier="HT3">HT3</span>, or style="--tc:#..." */
.zp-tier, .tier-pill {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 42px; height: 22px; padding: 0 8px 0 9px;
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; line-height: 1; letter-spacing: 0;
  color: var(--tc, var(--text-3)); background: color-mix(in srgb, var(--tc, #8c83a5) 16%, var(--sunken));
  border: 0; border-radius: var(--r-1);
  box-shadow: inset 2px 0 0 var(--tc, var(--line-3));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  white-space: nowrap;
}
.zp-tier.is-lg { height: 30px; min-width: 56px; font-size: var(--mc-s1); padding: 0 11px 0 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.zp-tier.is-xl { height: 44px; min-width: 76px; font-size: var(--mc-s2); padding: 0 14px 0 16px; box-shadow: inset 3px 0 0 var(--tc, var(--line-3)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.zp-tier.is-solid { background: var(--tc, var(--text-3)); color: #0b0912; box-shadow: none; }
.zp-tier.is-none { color: var(--text-3); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--line-3); font-weight: 600; }

/* Kit chip: kit icon plus the tier held on it */
.zp-kchip, .kchip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px 0 4px;
  border-radius: var(--r-1); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--tc, var(--line-3));
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; color: var(--tc, var(--text-2));
  flex-direction: row; min-width: 0; border: 0;
}
.zp-kchip img, .kchip img { width: 18px; height: 18px; flex: none; }
.zp-kchip b, .kchip b { font-weight: 600; font-size: inherit; color: inherit; font-family: inherit; }
.kchip:hover { transform: none; }

/* Kit icon tile, square */
.zp-kit-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--lip); }
.zp-kit-ico img { width: 24px; height: 24px; }

/* Player head */
.zp-head { display: block; width: 28px; height: 28px; flex: none; border-radius: var(--r-1); background: var(--surface-3); image-rendering: pixelated; }
.zp-head.is-sm { width: 22px; height: 22px; }
.zp-head.is-lg { width: 40px; height: 40px; }
.zp-who { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.zp-who > span { display: grid; min-width: 0; }
.zp-who b, .zp-who-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-who small { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.zp-who:hover b { color: var(--accent-hi); }

/* A player figure (skins.js): a static body render first, the posed 3D model over it. */
.zp-skin { position: relative; display: block; overflow: hidden; }
.zp-skin > .zs-static-img {
  position: absolute; left: 0; right: 0; top: 7%; width: 100%; height: 86%; max-width: none;
  object-fit: cover; object-position: 50% 50%; image-rendering: pixelated;
  transition: opacity 260ms ease-out;
}
.zp-skin > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 260ms ease-out; }
.zp-skin.is-3d > canvas { opacity: 1; }
.zp-skin.is-3d > .zs-static-img { opacity: 0; }
/* v3: a still figure, rendered on the server from the player's real skin. Every render is the
   same 40 units wide with its ground line at the bottom, so sizing the width from the box's height
   (container units) keeps every pose at one scale: a raised item may rise above the box. */
.zp-skin.is-still { overflow: visible; container-type: size; }
.zp-skin.is-still::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 46cqh; height: 7cqh; transform: translate(-50%, 45%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.22) 60%, transparent); pointer-events: none;
}
.zp-skin.is-still > .zs-render {
  position: absolute; left: 50%; bottom: 0; z-index: 1; width: 88cqh; max-width: none; max-height: none; height: auto; transform: translateX(-50%);
  image-rendering: pixelated; transition: transform 200ms ease-out;
}
.zp-skin.is-still > .zs-render:not([src]) { visibility: hidden; }
a:hover > * > .zp-skin.is-still > .zs-render, a:hover > .zp-skin.is-still > .zs-render { transform: translate(-50%, -3px); }
@media (prefers-reduced-motion: reduce) { .zp-skin.is-still > .zs-render { transition: none; } }
img.is-skin-render { image-rendering: pixelated; object-fit: contain; }
img[src^="/skins/"] { image-rendering: pixelated; }

/* Store rank marks next to a name (Zero, Zero+) */
.rk { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; margin-left: 6px; border-radius: var(--r-1); font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; vertical-align: 2px; border: 1px solid var(--line-2); color: var(--text-2); }
.rk-zero { color: var(--accent); border-color: var(--accent-line); }
.rk-plus { color: var(--gold); border-color: rgba(245, 197, 66, 0.45); }

/* Rank number: top three in medal colours */
.zp-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; line-height: 1; color: var(--text-3); }
.zp-rank.is-1 { color: var(--gold); }
.zp-rank.is-2 { color: var(--silver); }
.zp-rank.is-3 { color: var(--bronze); }
.zp-rank.is-box { width: 30px; height: 30px; background: var(--surface-3); border-radius: var(--r-1); font-size: var(--mc-s1); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.zp-rank.is-box.is-1 { background: var(--gold); color: #1b1404; }
.zp-rank.is-box.is-2 { background: var(--silver); color: #121318; }
.zp-rank.is-box.is-3 { background: var(--bronze); color: #1c0f05; }

/* Movement: <span class="zp-delta is-up">+24</span> */
.zp-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.zp-delta::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.zp-delta.is-up { color: var(--win); }
.zp-delta.is-up::before { border-bottom: 5px solid currentColor; }
.zp-delta.is-down { color: var(--loss); }
.zp-delta.is-down::before { border-top: 5px solid currentColor; }
.zp-delta.is-flat::before { width: 7px; height: 2px; border: 0; background: currentColor; }

/* Win and loss */
.zp-w, .is-win-text { color: var(--win); }
.zp-l, .is-loss-text { color: var(--loss); }
.zp-res { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-1); font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; }
.zp-res.is-w { background: var(--win-wash); color: var(--win); box-shadow: inset 0 0 0 1px rgba(63, 212, 138, 0.35); }
.zp-res.is-l { background: var(--loss-wash); color: var(--loss); box-shadow: inset 0 0 0 1px rgba(242, 86, 107, 0.35); }
.zp-score { font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); letter-spacing: 0; }
.zp-wl { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.zp-wl .zp-w, .zp-wl .zp-l { font-weight: 500; }

/* Small boxed label */
.zp-tag, .zp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--surface-2);
  font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.zp-tag.is-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }
.zp-tag.is-hot, .zp-tag.is-live { color: var(--live); border-color: rgba(255, 77, 94, 0.4); background: var(--live-wash); }
.zp-tag.is-win { color: var(--win); border-color: rgba(63, 212, 138, 0.35); background: var(--win-wash); }
.zp-tag.is-loss { color: var(--loss); border-color: rgba(242, 86, 107, 0.35); background: var(--loss-wash); }
.zp-tag img { width: 14px; height: 14px; }

/* Ladder: a list of grid rows. Columns are set per use with --cols on the list. */
.zp-ladder { display: grid; }
.zp-lrow {
  display: grid; grid-template-columns: var(--cols, 40px minmax(0, 1fr) auto); align-items: center; gap: var(--s-3);
  min-height: 52px; padding: 8px var(--s-4);
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background var(--fast);
}
.zp-lrow:last-child { border-bottom: 0; }
a.zp-lrow:hover, button.zp-lrow:hover { background: var(--surface-2); }
a.zp-lrow:focus-visible { outline-offset: -2px; }
.zp-lrow.is-head {
  min-height: 34px; padding-block: 6px; background: rgba(0, 0, 0, 0.2);
  font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3);
}
.zp-lrow.is-top-1 { box-shadow: inset 3px 0 0 var(--gold); background: linear-gradient(90deg, rgba(245, 197, 66, 0.07), rgba(245, 197, 66, 0) 40%); }
.zp-lrow.is-top-2 { box-shadow: inset 3px 0 0 var(--silver); }
.zp-lrow.is-top-3 { box-shadow: inset 3px 0 0 var(--bronze); }
.zp-lrow .r { text-align: right; justify-self: end; }
.zp-lrow .c { text-align: center; justify-self: center; }
.zp-lrow .zp-num { font-size: var(--mc-s1); }
.zp-lrow .dim { color: var(--text-3); }

/* Real tables */
.zp-table-wrap, .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.zp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.zp-table th, .zp-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.zp-table thead th { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--text-3); background: rgba(0, 0, 0, 0.2); white-space: nowrap; }
.zp-table tbody th { font-weight: 500; color: var(--text); }
.zp-table td.r, .zp-table th.r { text-align: right; }
.zp-table td.c, .zp-table th.c { text-align: center; }
.zp-table tbody tr { transition: background var(--fast); }
.zp-table tbody tr:hover { background: var(--surface-2); }
.zp-table tr:last-child > * { border-bottom: 0; }

/* Tabs: a strip with a lavender bar under the one that is on. */
.zp-tabs {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line); margin: 0;
}
.zp-tabs::-webkit-scrollbar { display: none; }
.zp-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 46px; padding: 0 14px; margin: 0;
  background: none; border: 0; border-radius: 0; color: var(--text-2);
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: color var(--fast), background var(--fast);
}
.zp-tab img { width: 20px; height: 20px; }
.zp-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform 220ms var(--ease); }
.zp-tab:hover { color: var(--text); background: var(--surface); }
.zp-tab[aria-selected="true"], .zp-tab.is-active, .zp-tab.active { color: var(--text); background: var(--surface); }
.zp-tab[aria-selected="true"]::after, .zp-tab.is-active::after, .zp-tab.active::after { transform: scaleX(1); }
.zp-tab:focus-visible { outline-offset: -3px; }
.zp-tab .zp-count { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); }

/* Segmented control */
.zp-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--well); }
.zp-seg > button, .zp-seg > a { height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-1); background: none; color: var(--text-2); font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background var(--fast), color var(--fast); }
.zp-seg > [aria-pressed="true"], .zp-seg > [aria-selected="true"], .zp-seg > .is-active, .zp-seg > .active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 #000; }

/* Inputs */
.zp-input, .zp-select, .zp-field input, .zp-field select, .zp-field textarea {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--sunken); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-2);
  box-shadow: var(--well); outline: none; transition: border-color var(--fast);
}
.zp-input::placeholder, .zp-field input::placeholder { color: var(--text-3); }
.zp-input:focus, .zp-select:focus, .zp-field input:focus, .zp-field select:focus, .zp-field textarea:focus { border-color: var(--accent); }
.zp-field { display: grid; gap: 6px; }
.zp-field > label, .zp-field > span { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.zp-select, .zp-field select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b9b0cd' stroke-width='1.6'/%3E%3C/svg%3E"); background-position: calc(100% - 12px) 50%; background-size: 11px 7px; background-repeat: no-repeat; }
.zp-search, .search {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; min-width: 0;
  background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--well);
  transition: border-color var(--fast);
}
.zp-search:focus-within, .search:focus-within { border-color: var(--accent); box-shadow: var(--well); }
.zp-search svg, .search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.zp-search input, .search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text); font-size: var(--fs-base); }
.zp-search input::placeholder, .search input::placeholder { color: var(--text-3); }
.zp-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.kbd, kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-1); }

/* Empty, loading, notes */
.zp-empty, .empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.zp-note, .note { margin: var(--s-3) 0 0; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); text-align: left; }
.zp-skel { display: block; background: var(--surface-2); border-radius: var(--r-1); min-height: 1em; }

/* Item slots (hotbars, inventories) */
.zp-slot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--r-1); box-shadow: var(--well); }
.zp-slot img { width: 28px; height: 28px; }
.zp-slot .ct { position: absolute; right: 2px; bottom: 0; font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); color: #fff; text-shadow: 1px 1px 0 #000; }

/* Callouts */
.zp-callout, .callout { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-2); background: var(--surface); color: var(--text-2); }
.zp-callout svg, .callout svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.zp-callout p, .callout p { margin: 0; }
.zp-callout p + p, .callout p + p { margin-top: var(--s-2); }
.zp-callout.is-hot { border-left-color: var(--hot); }

/* Details / accordions */
.zp-acc { border-top: 1px solid var(--line); }
.zp-acc details { border-bottom: 1px solid var(--line); }
.zp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 15px 4px; cursor: pointer; list-style: none; font-weight: 600; transition: color var(--fast); }
.zp-acc summary:hover { color: var(--accent-hi); }
.zp-acc summary::-webkit-details-marker { display: none; }
.zp-acc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 200ms var(--ease); flex: none; margin-right: 4px; }
.zp-acc details[open] > summary::after { transform: rotate(225deg); }
.zp-acc details > div { padding: 0 4px 16px; color: var(--text-2); }

/* Steps: 01, 02, 03 */
.zp-steps { display: grid; gap: var(--s-4); list-style: none; padding: 0; margin: 0; counter-reset: zs; }
.zp-step { counter-increment: zs; position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); background: var(--surface) var(--shade); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--lip), var(--raise); }
.zp-step::before { content: counter(zs, decimal-leading-zero); font-family: var(--f-display); font-size: var(--mc-s4); font-weight: 600; line-height: 0.9; color: var(--accent); letter-spacing: 0; }
/* The accent edge along the top: a stub at rest, the full width on hover (sized with right, not a
   static transform, which would cost a compositor node per card). */
.zp-step::after { content: ""; position: absolute; left: -1px; top: -1px; right: 82%; height: 3px; background: var(--accent); border-radius: var(--r-3) 0 0 0; transition: right 420ms var(--ease); }
.zp-step:hover::after { right: -1px; border-radius: var(--r-3) var(--r-3) 0 0; }
.zp-step h3 { font-size: var(--mc-s1); text-transform: uppercase; letter-spacing: 0; }
.zp-step p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
@media (min-width: 760px) { .zp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Long-form documents: privacy, terms, impressum */
.doc { max-width: 76ch; }
.doc section { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.doc section:first-child { border-top: 0; padding-top: 0; }
.doc h2 { font-size: var(--mc-s2); margin: 0 0 var(--s-3); display: flex; gap: 12px; align-items: baseline; }
.doc h2 .n { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--accent); font-weight: 500; }
.doc h3 { font-size: var(--mc-s1); margin: var(--s-4) 0 var(--s-2); text-transform: none; }
.doc p, .doc li { color: var(--text-2); }
.doc ul, .doc ol { padding-left: 1.2rem; margin: 0 0 1em; }
.doc li { margin-bottom: 0.35em; }
.doc li::marker { color: var(--text-3); }
.doc a { color: var(--accent-hi); }
.doc a:hover { color: var(--text); }
.doc strong, .doc b { color: var(--text); }
.doc code { font-family: var(--f-mono); font-size: 1em; padding: 1px 5px; border-radius: var(--r-1); background: var(--surface-3); color: var(--text); }
.doc-table { margin: var(--s-3) 0 var(--s-4); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); }
.doc-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.doc-table th, .doc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-table th { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--text-3); background: var(--bg-band); }
.doc-table td { color: var(--text-2); }
.doc-table td:first-child { color: var(--text); font-weight: 500; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-layout { display: grid; gap: var(--s-6); }
.doc-toc { align-self: start; padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface) var(--shade); box-shadow: var(--lip), var(--raise); }
.doc-toc p { margin: 0 0 var(--s-2); font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: block; padding: 5px 8px; border-radius: var(--r-1); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); transition: background var(--fast), color var(--fast); }
.doc-toc a:hover { color: var(--text); background: var(--surface-2); }
@media (min-width: 1000px) { .doc-layout { grid-template-columns: 240px minmax(0, 1fr); } .doc-toc { position: sticky; top: calc(var(--top-h) + 16px); } }

/* ==========================================================================
   Footer (v6, 2026-10-21): the owner found it too big. One slim row (wordmark, a short line,
   the live status, the address and Discord), five short link groups side by side, and a thin
   bar with the copyright and the game's notice. On a phone the groups fold (site.js opens them
   wider than that, so without the script every link still shows). The look is in mc.css.
   ========================================================================== */
.zp-foot { margin-top: var(--s-8); background: var(--bg-deep); }
.zp-foot-in { width: min(100% - 2 * var(--gutter), var(--shell)); margin: 0 auto; padding: 20px 0 18px; }
.zp-foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-bottom: 16px; }
.zp-foot-logo { display: block; flex: none; line-height: 0; }
.zp-foot-logo img { display: block; height: 20px; width: auto; }
.zp-foot-tag { display: none; margin: 0; color: var(--text-3); font-size: var(--mc-s1); }
.zp-foot-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mc-s1); color: var(--text-2); text-decoration: none; }
.zp-foot-status:hover { color: var(--text); }
.zp-foot-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.zp-foot-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; padding-top: 14px; }
.zp-foot-group > summary { list-style: none; display: block; margin: 0 0 4px; color: var(--text); font-size: var(--mc-s1); cursor: default; }
.zp-foot-group > summary::-webkit-details-marker { display: none; }
.zp-foot-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.zp-foot-group a { display: inline-block; padding: 1px 0; color: var(--text-2); text-decoration: none; font-size: var(--mc-s1); line-height: 1.5; }
.zp-foot-group a:hover, .zp-foot-group a[aria-current="page"] { color: var(--text); }
.zp-foot-bar { background: rgba(0, 0, 0, 0.35); }
.zp-foot-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  width: min(100% - 2 * var(--gutter), var(--shell)); margin: 0 auto; padding: 10px 0;
  font-size: var(--mc-s1); color: var(--text-3);
}
.zp-foot-legal p { margin: 0; line-height: 1.4; }
.zp-foot-opts { display: flex; gap: 16px; }
.zp-foot-opts:empty { display: none; }
@media (min-width: 1500px) { .zp-foot-tag { display: block; } }

/* a phone: the slim row wraps into two lines, the groups fold into rows */
@media (max-width: 599px) {
  .zp-foot-in { padding: 16px 0 6px; }
  .zp-foot-top { gap: 10px 14px; padding-bottom: 12px; }
  .zp-foot-cta { margin-left: 0; width: 100%; }
  .zp-foot-cta { flex-wrap: nowrap; }
  .zp-foot-cta .zp-ip { flex: 1 1 auto; }
  .zp-foot-cta .zp-ip .zp-ip-text { flex: 1; }
  .zp-foot-cta .zp-ip .zp-ip-hint { display: none; }
  /* Discord as its icon, so the address and it share one line (the name stays for screen readers) */
  .zp-foot .zp-foot-cta .zp-btn.is-discord { flex: none; width: 48px; padding: 0; gap: 0; font-size: 0; }
  .zp-foot-links { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
  .zp-foot-group > summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0; cursor: pointer;
  }
  .zp-foot-group > summary::after {
    content: ""; flex: none; width: 10px; height: 6px; background: currentColor;
    -webkit-mask: var(--ui-chev, none) center / 10px 6px no-repeat; mask: var(--ui-chev, none) center / 10px 6px no-repeat;
    transition: transform 240ms var(--ease);
  }
  .zp-foot-group[open]:not(.ui-closing) > summary::after { transform: rotate(180deg); }
  .zp-foot-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 0 0 10px; }
  .zp-foot-group a { padding: 6px 0; }
  .zp-foot-legal { padding: 10px 0 14px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .zp-foot-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
}

/* ==========================================================================
   The pixel face
   ==========================================================================
   Headings, big numbers, tier badges, ranks and scores are set in Monocraft. Rules that keep
   it crisp: only the --px sizes, weight 400 with no synthesis, no letter-spacing, mixed case. */
.page-hero h1, .home-title, .pf-name, .zp-h1, .zp-sec-head h2, .section-head h2, .zp-h2, .zp-foot-cta h2,
.home-comm-grid h2, .lb-title, .zp-panel-title, .zp-step h3, .zp-step::before, .zp-kit-name, .pf-lookup-title,
.zp-stat-v, .stat-value, .ph-nums dd, .zp-tier, .tier-pill, .zp-kchip, .kchip, .ph-chip, .tier-chip,
.zp-rank, .zp-num, .zp-score, .zp-res, .home-tierbar b, .home-cup-when, .home-uhc-big b {
  font-family: var(--f-pixel);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  font-variant-numeric: normal;
  -webkit-font-smoothing: none;
}
.page-hero h1, .home-title, .pf-name, .zp-h1 { text-transform: none; line-height: 1.04; text-wrap: balance; }
.page-hero h1, .zp-h1 { font-size: var(--px-4); max-width: none; }
.home-title { font-size: var(--px-4); }
.pf-name { font-size: var(--px-3); }
.pf-name.is-long { font-size: var(--px-2); }
.zp-sec-head h2, .section-head h2, .zp-h2, .zp-foot-cta h2, .home-comm-grid h2 { font-size: var(--px-3); line-height: 1.1; text-transform: none; }
.lb-title { font-size: var(--px-3); line-height: 1; }
.zp-panel-title { font-size: var(--px-2); line-height: 1.1; text-transform: none; }
.zp-step h3 { font-size: var(--px-2); text-transform: none; line-height: 1.2; }
.zp-step::before { font-size: var(--px-5); line-height: 1; }
.zp-kit-name { font-size: var(--px-2); text-transform: none; line-height: 1.1; }
.pf-lookup-title { font-size: var(--px-4); text-transform: none; }
.zp-stat-v, .stat-value { font-size: var(--px-3); line-height: 1; margin: 0; }
.ph-nums dd { font-size: var(--px-3); }
/* A stat that holds words, and a tier badge set small inside a line, read in the display face. */
.zp-stat-v.is-text, .zp-stat-v.na, .zp-tier.is-sm, .zp-rank.is-range {
  font-family: var(--f-display); font-weight: 600; letter-spacing: 0; -webkit-font-smoothing: antialiased;
}
.zp-rank, .zp-num, .zp-score, .zp-lrow .zp-num { font-size: var(--px-2); line-height: 1; }
.zp-rank.is-box { font-size: var(--px-2); }
.zp-res { font-size: var(--px-2); line-height: 1; }
.home-tierbar b, .home-cup-when { font-size: var(--px-3); line-height: 1; text-transform: none; }
.home-uhc-big b { font-size: var(--px-6); line-height: 0.9; }
.zp-tier, .tier-pill { height: 24px; min-width: 48px; padding: 1px 8px 0 9px; font-size: var(--px-2); line-height: 1; }
.zp-tier.is-lg { height: 32px; min-width: 64px; font-size: var(--px-3); padding: 1px 11px 0 12px; }
.zp-tier.is-xl { height: 48px; min-width: 88px; font-size: var(--px-4); padding: 2px 14px 0 16px; }
.zp-kchip, .kchip { height: 28px; font-size: var(--px-2); line-height: 1; gap: 6px; padding-top: 1px; }
.zp-kchip:not([data-tier]), .kchip:not([data-tier]) { font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); letter-spacing: 0; padding-top: 0; -webkit-font-smoothing: antialiased; }
.ph-chip, .tier-chip { height: 24px; font-size: var(--px-2); line-height: 1; padding-top: 1px; min-width: 44px; }
@media (min-width: 640px) {
  .page-hero h1, .zp-h1, .home-title { font-size: var(--px-5); }
  .pf-name { font-size: var(--px-4); }
  .pf-name.is-long { font-size: var(--px-3); }
}
@media (min-width: 900px) {
  .zp-sec-head h2, .section-head h2, .zp-h2, .zp-foot-cta h2, .home-comm-grid h2 { font-size: var(--px-4); }
  .zp-stat-v, .stat-value { font-size: var(--px-4); }
}
@media (min-width: 1000px) {
  .page-hero h1, .zp-h1 { font-size: var(--px-6); }
  .home-title { font-size: var(--px-6); }
}
@media (min-width: 1100px) {
  .pf-name { font-size: var(--px-5); }
  .pf-name.is-long { font-size: var(--px-3); }
}
@media (min-width: 1280px) { .home-title { font-size: var(--px-7); } }

/* ==========================================================================
   Load sequence (gated by html.js-reveal from the inline head script): the bar drops in, the
   page head rises in steps, the summary card follows. Once, short, never with reduced motion.
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
@keyframes zr-rise { from { opacity: 0.01; translate: 0 16px; } }
@keyframes zr-fade { from { opacity: 0.01; } }
@keyframes zr-drop { from { opacity: 0.01; translate: 0 -12px; } }
@keyframes zr-pop { from { opacity: 0.01; scale: 0.96; translate: 0 12px; } }
@keyframes zr-draw { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .zp-top { animation: zr-drop 420ms var(--zr-ease) both; }
  html.js-reveal .page-hero > *, html.js-reveal .ph-main > * { animation: zr-rise 480ms var(--zr-ease) both; animation-delay: calc(80ms + var(--zr-i, 0) * var(--zr-step)); }
  html.js-reveal :is(.page-hero > *, .ph-main > *):nth-child(2) { --zr-i: 1; }
  html.js-reveal :is(.page-hero > *, .ph-main > *):nth-child(3) { --zr-i: 2; }
  html.js-reveal :is(.page-hero > *, .ph-main > *):nth-child(4) { --zr-i: 3; }
  html.js-reveal :is(.page-hero > *, .ph-main > *):nth-child(n+5) { --zr-i: 4; }
  html.js-reveal .page-hero > .ph-aside { --zr-i: 3; animation-name: zr-pop; animation-duration: 560ms; }
  html.js-reveal .page-hero .zp-kicker::after, html.js-reveal .page-hero .kicker::after, html.js-reveal .page-hero .eyebrow-pill::after { animation: zr-draw 700ms var(--zr-ease) 260ms both; }
  html[data-lite].js-reveal .page-hero > *, html[data-lite].js-reveal .ph-main > * { animation-name: zr-fade; }
}

/* ==========================================================================
   The next event and who is on (site.js)
   ========================================================================== */
.zp-eventbar { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.zp-eventbar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-3);
  width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; padding: 8px 0;
  font-size: var(--fs-sm); color: var(--text-2);
}
.zp-eventbar-in b { font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: 0; }
.zp-eventbar-count, .zp-next-count { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0; color: var(--text-3); }
.zp-eventbar-count.is-live, .zp-next-count.is-live { color: var(--live); }
.zp-eventbar .zp-btn { margin-left: auto; }
.zp-eventbar-x {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: transparent; color: var(--text-3); cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.zp-eventbar-x:hover { color: var(--text); border-color: var(--line-3); }
.zp-eventbar-x svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .zp-eventbar .zp-btn { margin-left: 0; } }

.zp-next {
  display: grid; gap: 6px; max-width: 34rem; margin-top: var(--s-5); padding: var(--s-3) var(--s-4);
  background: var(--surface) var(--shade); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r-2);
  box-shadow: var(--lip), var(--raise);
}
.zp-next p { margin: 0; }
.zp-next-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.zp-next-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); }
.zp-next-row b { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 600; color: var(--text); letter-spacing: 0; }
.zp-next-row span { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--text-2); }
.zp-next-text { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.zp-next-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: 2px !important; }
.zp-next-then { font-size: var(--fs-xs); color: var(--text-3); }

.zp-online { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-3); margin: var(--s-3) 0 0; }
.zp-online-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zp-online-p {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface);
  font-size: var(--fs-sm); color: var(--text); text-decoration: none;
  transition: border-color var(--fast) var(--ease);
}
.zp-online-p:hover { border-color: var(--accent-line); }
.zp-online-p img { width: 20px; height: 20px; border-radius: var(--r-1); image-rendering: pixelated; }
.zp-online-more { font-size: var(--fs-xs); color: var(--text-3); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.zp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.zp-stack { display: grid; gap: var(--s-4); }
.zp-grid-2 { display: grid; gap: var(--s-4); }
.zp-grid-3 { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .zp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .zp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zp-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }