/* Raven Network — built from the logo: chunky extruded pixel blocks, black outlines, crown gold, network purple.
   Gold is only for paying or joining. Purple is the brand surface. Key objects are extruded blocks; everything else stays flat and quiet.
   Compat: tints are literal rgba()/hex (no color-mix(): iOS 15–16.1 drop the whole declaration). Meaning never depends on :has(). */

/* Metric-matched local fallbacks so the Google Fonts swap barely moves text (CLS).
   Archivo is drawn expanded (font-stretch 112–125%) and Arial has no width axis, so its fallback is scaled up to match line length. */
@font-face { font-family: "Archivo Fallback"; font-weight: 100 599; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 112%; ascent-override: 78%; descent-override: 19%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 1000; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 112%; ascent-override: 78%; descent-override: 19%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; font-weight: 100 599; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 98%; ascent-override: 102%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; font-weight: 600 1000; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 98%; ascent-override: 102%; descent-override: 31%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --ink: #0D0B14;
  --ink-2: #14111D;
  --ink-3: #1C1828;
  --line: #29233A;
  --line-2: #3A3350;
  --field-line: #736A8E;
  --fg: #EEEAF6;
  --fg-2: #BDB6CC;
  --muted: #9A92AD;
  --purple: #8A4BFF;
  --purple-2: #A07EFF;
  --purple-3: #E6DCFF;
  --purple-deep: #4B1FB8;
  --gold: #FFD23F;
  --gold-hi: #FFE07A;
  --gold-side: #A87500;
  --live: #4ADE80;
  --warn: #F2B35B;
  --danger: #FF7A7A;
  --edge: #000;
  --sheen: linear-gradient(100deg, #8F6BFF, #A07EFF 35%, #E6DCFF 55%, #A07EFF 75%, #8F6BFF);

  /* section worlds */
  --bg-a: #0D0B14;
  --bg-b: #110F19;
  --store-1: #170F2D;
  --store-2: #130D24;
  --store-3: #100B1C;
  --pat-dirt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'%3E%3Crect width='64' height='64' fill='%233B2A1E'/%3E%3Cpath fill='%234A3526' d='M8 0h4v4h-4zM12 0h4v4h-4zM40 0h4v4h-4zM48 0h4v4h-4zM8 4h4v4h-4zM20 4h4v4h-4zM48 4h4v4h-4zM60 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM52 8h4v4h-4zM20 12h4v4h-4zM36 12h4v4h-4zM40 12h4v4h-4zM44 12h4v4h-4zM56 12h4v4h-4zM60 12h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM40 16h4v4h-4zM8 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM32 20h4v4h-4zM44 20h4v4h-4zM56 20h4v4h-4zM36 24h4v4h-4zM0 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4zM60 28h4v4h-4zM0 32h4v4h-4zM16 32h4v4h-4zM24 32h4v4h-4zM28 32h4v4h-4zM32 32h4v4h-4zM40 32h4v4h-4zM28 36h4v4h-4zM32 36h4v4h-4zM36 36h4v4h-4zM40 36h4v4h-4zM44 36h4v4h-4zM8 40h4v4h-4zM24 40h4v4h-4zM48 40h4v4h-4zM0 44h4v4h-4zM8 44h4v4h-4zM32 44h4v4h-4zM40 44h4v4h-4zM4 48h4v4h-4zM20 48h4v4h-4zM32 48h4v4h-4zM36 48h4v4h-4zM48 48h4v4h-4zM56 48h4v4h-4zM60 48h4v4h-4zM4 52h4v4h-4zM24 52h4v4h-4zM28 52h4v4h-4zM4 56h4v4h-4zM12 56h4v4h-4zM28 56h4v4h-4zM36 56h4v4h-4zM0 60h4v4h-4zM4 60h4v4h-4zM8 60h4v4h-4zM12 60h4v4h-4zM32 60h4v4h-4zM44 60h4v4h-4z'/%3E%3Cpath fill='%232E2117' d='M28 0h4v4h-4zM56 0h4v4h-4zM0 4h4v4h-4zM16 4h4v4h-4zM56 4h4v4h-4zM40 8h4v4h-4zM56 8h4v4h-4zM4 12h4v4h-4zM24 12h4v4h-4zM0 16h4v4h-4zM32 16h4v4h-4zM52 16h4v4h-4zM52 20h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM44 24h4v4h-4zM56 24h4v4h-4zM12 28h4v4h-4zM16 28h4v4h-4zM32 28h4v4h-4zM0 36h4v4h-4zM16 36h4v4h-4zM20 36h4v4h-4zM52 36h4v4h-4zM56 36h4v4h-4zM16 40h4v4h-4zM4 44h4v4h-4zM44 44h4v4h-4zM56 44h4v4h-4zM0 52h4v4h-4zM16 52h4v4h-4zM32 52h4v4h-4zM52 52h4v4h-4zM20 56h4v4h-4zM52 56h4v4h-4zM56 56h4v4h-4zM16 60h4v4h-4z'/%3E%3Cpath fill='%235A4130' d='M28 4h4v4h-4zM44 4h4v4h-4zM48 8h4v4h-4zM60 16h4v4h-4zM0 24h4v4h-4zM28 24h4v4h-4zM48 24h4v4h-4zM44 28h4v4h-4zM48 28h4v4h-4zM8 36h4v4h-4zM12 44h4v4h-4zM28 44h4v4h-4zM48 44h4v4h-4zM8 48h4v4h-4zM24 48h4v4h-4zM0 56h4v4h-4zM16 56h4v4h-4zM32 56h4v4h-4z'/%3E%3Cpath fill='%23241A12' d='M32 4h4v4h-4zM4 8h4v4h-4zM40 20h4v4h-4zM20 28h4v4h-4zM24 56h4v4h-4z'/%3E%3C/svg%3E");
  --pat-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' shape-rendering='crispEdges'%3E%3Cg fill='%23A07EFF'%3E%3Cpath fill-opacity='0.07' d='M28 76h4v4h-4zM44 56h4v4h-4zM80 68h4v4h-4zM24 84h4v4h-4zM72 32h4v4h-4zM24 4h4v4h-4z'/%3E%3Cpath fill-opacity='0.12' d='M4 16h4v4h-4zM80 68h4v4h-4zM12 56h4v4h-4zM8 32h4v4h-4zM72 72h4v4h-4z'/%3E%3Cpath fill-opacity='0.18' d='M48 88h4v4h-4zM44 68h4v4h-4zM84 16h4v4h-4zM56 76h4v4h-4zM64 12h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
  --f-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-pixel: "Pixelify Sans", var(--f-mono);

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px;
  --wrap: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --press: cubic-bezier(.3, 0, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
html:has(.buybar:not([hidden])) { scroll-padding-bottom: 80px; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink); }
body.has-buybar { padding-bottom: 72px; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-stretch: 112%; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.25rem); line-height: 1.08; font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: rgba(138, 75, 255, .5); }
[aria-disabled="true"] { opacity: .55; cursor: progress; }
.px { image-rendering: pixelated; display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: 16px; top: -60px; background: var(--fg); color: var(--ink); padding: 8px 12px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { top: 12px; }

/* utilities used in page markup */
.stack { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.stack--xl { gap: clamp(48px, 6vw, 72px); }
.h2--sm { font-size: clamp(1.3rem, 1rem + .8vw, 1.6rem); }
.ta-r { text-align: right !important; }
/* a phrase that moves to the next line whole, so headlines break between sentences ("Two modes on day one. | More on the way.") */
.ib { display: inline-block; }

/* eyebrow: mono label with a pixel bullet */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 4px; font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--purple-2);
  padding-left: 4px; margin-left: -4px; clip-path: inset(-20px -20px -20px 1px); overflow-wrap: anywhere; }
.eyebrow:not(:has(.dot))::before { content: ""; width: 6px; height: 6px; margin-right: -14px; background: currentColor; box-shadow: 2px 2px 0 var(--purple-deep); flex: none; }
.eyebrow > .dot { margin-right: -14px; }
/* separators: the "·" element is hidden and a pixel is drawn in the gap before the next item instead.
   An item that wraps to a new line carries its pixel past the clipped left edge, so a separator never dangles at a line end or start. */
.eyebrow > .sep, .eyebrow > .eyebrow__sep { display: none; }
.eyebrow > .sep + *, .eyebrow > .eyebrow__sep + * { position: relative; }
.eyebrow > .sep + *::before, .eyebrow > .eyebrow__sep + *::before { content: ""; position: absolute; left: -13px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--line-2); }
.sep { color: var(--line-2); }
.dot { width: 7px; height: 7px; background: var(--muted); flex: none; }
.dot--live { position: relative; background: var(--live); --ring: rgba(74, 222, 128, .18); }
/* the halo blinks by opacity on a pseudo-element: no repaint per frame */
.dot--live::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--ring); animation: blink 2.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }
html:not(.is-live) .dot--live { background: var(--gold); --ring: rgba(255, 210, 63, .18); }

/* sheen: static everywhere (the RavenPass level-100 block adds a transform-only shimmer) */
.sheen-text { background: var(--sheen); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.sheen-bg { background: var(--sheen); background-size: 200% 100%; }

/* ---------- buttons: the block system ---------- */
/* labels stay on one line wherever they fit; with very large text a button wraps instead of running off the screen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-sm); font: 700 .95rem/1.1 var(--f-body); text-decoration: none; cursor: pointer; border: 1px solid transparent; background: none; color: var(--fg); transition: background .15s, border-color .15s, color .15s, transform .12s var(--press), box-shadow .12s var(--press); flex-shrink: 0; text-align: center; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn--line { border-color: var(--line-2); background: rgba(13, 11, 20, .4); }
.btn--line:hover { border-color: var(--purple-2); background: var(--ink-2); }
.btn--ghost:hover { background: var(--ink-2); }

/* gold block: pay / join only */
.btn--primary, .pack--hl .btn {
  background: var(--gold); color: #1A1300; border: 2px solid var(--edge);
  box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -3px 0 #E8B200, 0 4px 0 var(--gold-side), 0 4px 0 2px var(--edge);
  margin-bottom: 6px; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--primary:hover, .pack--hl .btn:hover { background: #FFDA55; transform: translateY(-2px); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -3px 0 #E8B200, 0 6px 0 var(--gold-side), 0 6px 0 2px var(--edge); }
.btn--primary:active, .pack--hl .btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -3px 0 #E8B200, 0 0 0 var(--gold-side), 0 0 0 2px var(--edge); }
.btn--primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #3A3350, 0 4px 0 2px var(--edge); background: var(--ink-3); color: var(--muted); text-shadow: none; }

/* purple block: the brand action when nothing is being paid for (e.g. open a ticket) */
.btn--brand { background: var(--purple); color: #fff; border: 2px solid var(--edge); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 4px 0 var(--purple-deep), 0 4px 0 2px var(--edge); margin-bottom: 6px; }
.btn--brand:hover { background: #9659FF; transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 6px 0 var(--purple-deep), 0 6px 0 2px var(--edge); }
.btn--brand:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 0 0 var(--purple-deep), 0 0 0 2px var(--edge); }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--fg-2); font: 500 .9rem/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); cursor: pointer; justify-self: start; }
.link-btn:hover { color: var(--fg); text-decoration-color: var(--purple-2); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); background: none; color: var(--fg-2); cursor: pointer; padding: 0; transition: color .15s, border-color .15s, background .15s; }
.icon-btn:hover { color: var(--fg); border-color: var(--line-2); background: var(--ink-2); }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(13, 11, 20, .84); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-scrolled, .nav.is-open { border-bottom-color: var(--line); }
/* large text: the bar grows and wraps instead of running off the screen */
.nav__in { min-height: var(--nav-h); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand__logo { flex: none; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.brand__word { min-width: 0; font: 800 1.02rem/1 var(--f-display); font-stretch: 125%; letter-spacing: .12em; }
.brand__word b { color: var(--purple-2); font-weight: 800; }
.nav__links { display: flex; gap: 2px; margin-left: 8px; }
.nav__links a { position: relative; padding: 8px 12px; border-radius: var(--r-sm); color: var(--fg-2); text-decoration: none; font-weight: 500; font-size: .925rem; }
.nav__links a:hover { color: var(--fg); background: var(--ink-2); }
.nav__links a[aria-current="page"] { color: var(--fg); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--purple-2); box-shadow: 0 2px 0 var(--purple-deep); }
.nav__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav__actions .icon-btn svg { width: 18px; height: 18px; }
.nav__discord svg { color: var(--purple-2); }
.basket-btn { position: relative; }
.basket-btn__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: var(--r-xs); border: 1.5px solid var(--edge); background: var(--gold); color: #1A1300; font: 700 .6875rem/1 var(--f-mono); }
#menuBtn .ico-close { display: none; }
#menuBtn[aria-expanded="true"] .ico-menu { display: none; }
#menuBtn[aria-expanded="true"] .ico-close { display: block; }
.nav__menu-btn { display: none !important; }

/* nav IP pill: only once the hero IP has scrolled away (ui.js toggles .has-ip) */
.navip { display: none; align-items: center; gap: 8px; height: 38px; padding: 0 5px 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--ink-2); color: var(--fg); font: 500 .82rem/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.navip:hover { border-color: var(--purple-2); }
.navip__dot { width: 7px; height: 7px; background: var(--live); }
html:not(.is-live) .navip__dot { background: var(--gold); }
.navip__act { height: 28px; padding: 0 10px; border-radius: var(--r-xs); background: var(--ink-3); border: 1px solid var(--line-2); color: var(--fg); display: grid; place-items: center; font-weight: 700; font-size: .78rem; }
.navip:hover .navip__act { background: var(--purple-deep); border-color: var(--purple); }
.navip.is-copied .navip__act { background: var(--live); color: #04210F; border-color: transparent; }
/* the pill's space is reserved from first paint so its arrival shifts nothing (CLS) */
@media (min-width: 77.5em) { .navip { display: inline-flex; visibility: hidden; } .nav.has-ip .navip { visibility: visible; animation: navin .25s var(--ease); } }
@keyframes navin { from { opacity: 0; transform: translateY(-4px); } }

.mnav { border-top: 1px solid var(--line); padding-block: 8px 16px; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
.mnav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.mnav a[aria-current="page"] { color: var(--purple-2); }
.mnav__ip { margin-top: 16px; }
/* nav breakpoints in em: a larger default font size switches to the menu sooner */
@media (max-width: 60em) { .nav__links { display: none; } .nav__menu-btn { display: grid !important; } }
@media (max-width: 30em) { .nav__in { column-gap: 12px; } .nav__discord { display: none; } .brand__word { font-size: .92rem; letter-spacing: .1em; } }
@media (max-width: 359px) { .brand__word { font-size: .8rem; letter-spacing: .06em; } }
/* the word wraps to two lines before it can push the bar off screen; only the narrowest phones drop it */
@media (max-width: 300px) { .brand__word { display: none; } }

/* ---------- IP field (Minecraft text-field: black well, light frame) ---------- */
.ip { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 8px 0 18px; border-radius: var(--r-sm); border: 2px solid var(--line-2); background: #08070C; color: var(--fg); cursor: pointer; font: inherit; max-width: 100%; min-width: 0; transition: border-color .15s; }
.ip:hover { border-color: var(--purple-2); }
.ip__label { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the IP is never cut off: if it truly can't fit (tiny screen, huge text) it wraps */
.ip__value { flex: 1 1 auto; font: 500 1rem/1.15 var(--f-mono); overflow-wrap: anywhere; min-width: 0; text-align: left; }
.ip__action { min-height: 38px; padding: 0 16px; margin-bottom: 4px; border-radius: var(--r-sm); background: var(--gold); color: #1A1300; border: 2px solid var(--edge); display: grid; place-items: center; font: 700 .875rem/1 var(--f-body); flex: none; box-shadow: inset 0 2px 0 var(--gold-hi), 0 3px 0 var(--gold-side), 0 3px 0 2px var(--edge); transition: transform .12s var(--press), box-shadow .12s var(--press), background .15s; }
.ip:hover .ip__action { transform: translateY(-1px); box-shadow: inset 0 2px 0 var(--gold-hi), 0 4px 0 var(--gold-side), 0 4px 0 2px var(--edge); }
.ip:active .ip__action { transform: translateY(3px); box-shadow: inset 0 2px 0 var(--gold-hi), 0 0 0 var(--gold-side), 0 0 0 2px var(--edge); }
.ip.is-copied .ip__action { background: var(--live); box-shadow: 0 3px 0 #1B7A3F, 0 3px 0 2px var(--edge); }
.ip--compact { min-height: 50px; padding-left: 14px; }
.ip--compact .ip__action { min-height: 32px; }
.ip--quiet { border-width: 1px; background: var(--ink-2); }
.ip--quiet .ip__action, .ip--quiet:hover .ip__action, .ip--quiet:active .ip__action { background: var(--ink-3); color: var(--fg); border: 1px solid var(--line-2); box-shadow: none; transform: none; margin: 0; }
.ip--quiet:hover .ip__action { background: var(--ink-2); border-color: var(--purple-2); }
.ip--quiet.is-copied .ip__action { background: var(--live); color: #04210F; }

/* copy "pop": a few gold pixels rise from the button (app.js adds .pop) */
[data-copy-ip] { position: relative; }
/* an IP in running text moves to the next line whole; it only breaks inside when it can't fit on a line at all */
[data-ip] { overflow-wrap: anywhere; }
[data-copy-ip].pop::after {
  content: ""; position: absolute; top: 2px; right: 40px; width: 4px; height: 4px; pointer-events: none; z-index: 3;
  box-shadow: -14px 2px 0 var(--gold), -6px -2px 0 var(--gold-hi), 1px 3px 0 var(--gold), 8px -3px 0 var(--gold-hi), 15px 1px 0 var(--gold), -20px -4px 0 var(--gold-hi);
  animation: pop .42s cubic-bezier(.2, .6, .3, 1) forwards;
}
.navip.pop::after { right: 26px; }
@keyframes pop { from { transform: translateY(0); opacity: 1; } 60% { opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }

/* ---------- section rhythm: alternating worlds + pixel-dither seams ---------- */
.section { padding-block: clamp(56px, 6.5vw, 88px); position: relative; }
.section--flush { padding-top: clamp(28px, 3.5vw, 48px); }
main > section:nth-of-type(even) { background: var(--bg-b); }
main > section + section, .footer { position: relative; }
main > section + section::before, .footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; pointer-events: none; z-index: 0;
  --prev: var(--bg-a);
  background:
    linear-gradient(90deg, var(--prev) 50%, transparent 0) 0 0 / 16px 8px repeat-x,
    linear-gradient(90deg, transparent 8px, var(--prev) 0 16px, transparent 0) 0 8px / 32px 8px repeat-x;
}
main > section:nth-of-type(odd)::before { --prev: var(--bg-b); }
main > section > .wrap { position: relative; z-index: 1; }

/* store world: purple is a real surface here */
.section--store { background: var(--pat-field) 0 0 / 96px 96px, linear-gradient(180deg, var(--store-1), var(--store-2)) !important; }
.section--store + .section--store { background: var(--pat-field) 48px 32px / 96px 96px, linear-gradient(180deg, var(--store-2), var(--store-3)) !important; padding-top: clamp(24px, 4vw, 48px); }
.section--store + .section--store::before { display: none; }
.section--store:has(+ .section--store) { padding-bottom: clamp(48px, 6vw, 72px); }
.section--store + section:not(.section--store)::before { --prev: var(--store-3); }

.section__head { display: grid; gap: 12px; margin-bottom: clamp(28px, 3vw, 36px); max-width: 760px; }
.section__head > p:not(.eyebrow) { color: var(--fg-2); }
.section__head--split { gap: 16px; max-width: none; }
.section__head--split > div { display: grid; gap: 12px; }
@media (min-width: 860px) { .section__head--split { grid-template-columns: 1fr auto; align-items: end; } }
.section__head--flush { margin: 0; }
.section__note { color: var(--fg-2); max-width: 44ch; }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 100%; padding: 3px 9px; border-radius: var(--r-xs); border: 1px solid var(--line-2); font: 500 .75rem/1.1 var(--f-mono); color: var(--fg-2); }
.chip--live { border-color: rgba(74, 222, 128, .4); color: var(--live); }
.chip--live::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.chip--pre { border-color: rgba(255, 210, 63, .45); color: var(--gold); background: rgba(255, 210, 63, .07); }
.chip--pre::before { content: ""; width: 6px; height: 6px; background: currentColor; box-shadow: 1px 1px 0 var(--gold-side); }
.chip--gold { border-color: rgba(160, 126, 255, .55); color: var(--purple-3); background: rgba(138, 75, 255, .14); }

/* ---------- home hero ---------- */
.hero { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 5vw, 72px); position: relative; overflow: hidden; }
/* purple glow: phones light the top right corner; from 760px it is centred on the logo (.hero__mark::before), so it never drifts on wide screens */
.hero::before { content: ""; position: absolute; inset: -30% -25% auto 40%; height: 820px; pointer-events: none; background: radial-gradient(closest-side, rgba(138, 75, 255, .28), transparent 72%); }
.hero__grid { display: grid; gap: 40px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 56px; } }
@media (min-width: 760px) {
  .hero::before { content: none; }
  .hero__mark::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(var(--logo) * 2.7); height: calc(var(--logo) * 2.2); margin: calc(var(--logo) * -1.1) 0 0 calc(var(--logo) * -1.35); pointer-events: none; background: radial-gradient(closest-side, rgba(138, 75, 255, .28), transparent 72%); }
}
.hero__copy { display: grid; gap: 24px; min-width: 0; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.hero__title { font-size: clamp(2.6rem, 1rem + 5.4vw, 5.6rem); font-size: clamp(2.6rem, min(1rem + 5.4vw, 10.6cqi), 5.6rem); line-height: .92; font-weight: 900; font-stretch: 120%; letter-spacing: -.03em; }
.hero__title-soft { display: block; color: var(--fg); }
.hero__title em { font-style: normal; color: var(--gold); text-shadow: 0 1px 0 #3D2A00, 0 3px 0 rgba(0, 0, 0, .35); }
.hero__lede { font-size: 1.125rem; color: var(--fg-2); max-width: 50ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__art { display: grid; justify-items: center; min-width: 0; position: relative; --logo: 340px; }
@media (min-width: 1200px) { .hero__art { --logo: 380px; } }
@media (min-width: 980px) and (max-width: 1199px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; } .hero__art { --logo: 300px; } .hero .ip__label, .phero__in--split .ip__label { display: none; } }
.hero__art::before { content: ""; position: absolute; top: calc(var(--logo) - 46px); left: calc(50% - var(--logo) * .35); width: calc(var(--logo) * .7); height: 36px; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); filter: blur(2px); animation: floor 7s ease-in-out infinite; pointer-events: none; }
.hero__mark { position: relative; z-index: 1; display: block; width: var(--logo); margin-bottom: -12px; animation: float 7s ease-in-out infinite; }
.hero__logo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(75, 31, 184, .45)); }
/* eye glint: a gold pixel sparkle over the raven's eye every ~9s */
.hero__glint { position: absolute; left: 75.4%; top: 30.6%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #FFF4C2; opacity: 0; pointer-events: none;
  box-shadow: 0 -6px 0 -1.5px var(--gold), 0 6px 0 -1.5px var(--gold), -6px 0 0 -1.5px var(--gold), 6px 0 0 -1.5px var(--gold), 0 0 10px 2px rgba(255, 210, 63, .7);
  animation: glint 9s steps(1, end) 2s infinite; }
@keyframes glint { 0%, 93.5%, 100% { opacity: 0; transform: scale(.5); } 94.5% { opacity: .8; transform: scale(.8); } 95.5% { opacity: 1; transform: scale(1); } 97% { opacity: .5; transform: scale(.7); } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes floor { 50% { transform: scaleX(.86); opacity: .7; } }
@media (max-width: 979px) {
  .hero { padding-top: 12px; }
  .hero__copy { gap: 18px; }
  .hero__lede { font-size: 1.04rem; }
  .hero__glint { display: none; }
  .hero__logo { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .55)) drop-shadow(0 10px 34px rgba(138, 75, 255, .6)); }
}
@media (max-width: 759px) {
  /* phone: logo leads the copy, server card follows it */
  .hero__grid { gap: 28px; }
  .hero__art { display: contents; }
  .hero__art::before { display: none; }
  .hero__mark { order: -1; justify-self: start; width: min(56vw, 220px); margin: 0 0 -22px -4%; animation: none; }
  .hero__art .serverlist { max-width: 560px; justify-self: start; }
}
@media (min-width: 760px) and (max-width: 979px) {
  /* tablet: copy left, a smaller logo + server card right (no empty right half, no logo hanging off the edge) */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 28px; align-items: start; }
  .hero__art { --logo: 220px; padding-top: 8px; }
  .hero__art::before { display: none; }
  .hero__mark { animation: none; }
  .hero .ip__label { display: none; }
  .hero__art .serverlist__entry { margin: 8px; gap: 10px; }
  .hero__art .serverlist__icon { width: 48px; height: 48px; }
  .hero__art .join { padding-inline: 14px; }
  .hero__art .join__row { grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) { .join__row:nth-child(-n+2) { display: none; } .join { padding-block: 0 4px; } }

/* join helper */
.joinhelp { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(20, 17, 29, .8); border: 1px solid var(--line); max-width: 560px; }
.joinhelp__tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.joinhelp__q { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.joinhelp__tab { min-height: 32px; padding: 0 14px; border-radius: var(--r-sm); border: 2px solid var(--edge); background: var(--ink-3); color: var(--fg-2); font: 700 .85rem/1 var(--f-body); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .12s var(--press), box-shadow .12s var(--press), background .15s, color .15s; }
.joinhelp__tab:hover { color: var(--fg); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 #2A2340, 0 2px 0 2px var(--edge); }
.joinhelp__tab[aria-pressed="true"], .joinhelp__tab[aria-pressed="true"]:hover { background: var(--purple); color: #fff; transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2); cursor: default; }
.joinhelp__steps { color: var(--fg-2); font-size: .95rem; line-height: 1.7; }
.joinhelp__steps .mono { color: var(--fg); background: #08070C; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 6px; font-size: .88em; display: inline-block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.4; }
.joinhelp__copy { min-height: 32px; padding: 0 10px; margin-left: 4px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--ink-3); color: var(--fg); font: 600 .8rem/1 var(--f-body); cursor: pointer; vertical-align: middle; }
.joinhelp__copy:hover { border-color: var(--purple-2); }

/* countdown: extruded digit blocks, one per D/H/M/S group (pure CSS on the "05d 04h 19m 17s" string) */
.countdown { display: grid; gap: 10px; justify-items: start; }
.countdown__label { font: 500 .75rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.countdown__time {
  --cw: calc(1ch + .3em);                       /* one character cell (mono font) */
  --face: #1E1833; --side: var(--purple-deep);
  display: inline-block; font: 700 clamp(1.3rem, .9rem + 1.6vw, 2rem)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .3em; color: #fff;
  padding: .42em .12em .62em calc(.2 * var(--cw) + .15em);
  white-space: pre; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000;
  background:
    linear-gradient(90deg, transparent 2px, var(--face) 2px calc(3.4 * var(--cw) - 2px), transparent 0) 0 2px / calc(4 * var(--cw)) calc(100% - 12px) repeat-x,
    linear-gradient(90deg, var(--edge) calc(3.4 * var(--cw)), transparent 0) 0 0 / calc(4 * var(--cw)) calc(100% - 8px) repeat-x,
    linear-gradient(90deg, transparent 2px, var(--side) 2px calc(3.4 * var(--cw) - 2px), transparent 0) 0 2px / calc(4 * var(--cw)) calc(100% - 4px) repeat-x,
    linear-gradient(90deg, var(--edge) calc(3.4 * var(--cw)), transparent 0) 0 0 / calc(4 * var(--cw)) 100% repeat-x;
}

/* countdown v2: one extruded block per <span class="cd"><b>04</b><i>d</i></span> group (app.js adds .is-ticking when it writes them) */
.countdown__time.is-ticking { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 6px; background: none; letter-spacing: 0; white-space: normal; text-transform: none; text-shadow: none; font: 500 clamp(1.6rem, 1rem + 1.8vw, 2.3rem)/1 var(--f-pixel); }
.cd { display: inline-flex; align-items: baseline; justify-content: center; gap: .08em; min-width: 2.4em; padding: .26em .34em .3em; border-radius: var(--r-xs); border: 2px solid var(--edge); background: #1E1833; color: #fff; text-shadow: 0 2px 0 #000; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 4px 0 var(--purple-deep), 0 4px 0 2px var(--edge); }
.cd b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cd i { font-style: normal; font-size: .45em; opacity: .6; letter-spacing: 0; }
@media (max-width: 360px) { .countdown__time.is-ticking { gap: 8px; font-size: 1.4rem; } }

/* server-list card, framed like Minecraft's multiplayer screen */
.serverlist { display: grid; width: 100%; border: 2px solid var(--edge); border-radius: var(--r-md); background: linear-gradient(rgba(10, 8, 14, .78), rgba(10, 8, 14, .86)), var(--pat-dirt) 0 0 / 64px 64px; overflow: hidden; min-width: 0; position: relative; z-index: 2; box-shadow: 0 6px 0 #07060A, 0 6px 0 2px var(--edge), 0 30px 60px -20px rgba(0, 0, 0, .7); }
.serverlist__entry { display: flex; gap: 14px; margin: 12px; padding: 10px; background: rgba(0, 0, 0, .72); outline: 2px solid #B8B8B8; outline-offset: -2px; image-rendering: pixelated; }
.serverlist__icon { width: 64px; height: 64px; flex: none; background: #000; object-fit: contain; padding: 4px; }
.serverlist__body { min-width: 0; flex: 1; display: grid; gap: 1px; align-content: start; }
.serverlist__top { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 2px; }
.serverlist__name { font: 500 1rem/1.3 var(--f-pixel); white-space: nowrap; text-shadow: 2px 2px 0 #3F3F3F; }
.serverlist__name .motd-gold { text-shadow: 2px 2px 0 #3F2A00; } .serverlist__name .motd-purple { text-shadow: 2px 2px 0 #2A1540; }
.serverlist__meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; color: #AAAAAA; font: 500 .8rem/1.25 var(--f-pixel); text-shadow: 2px 2px 0 #2A2A2A; }
.serverlist__meta .ping { flex: none; }
.serverlist__meta .mono { font-family: var(--f-pixel); }
.ping { display: inline-flex; align-items: flex-end; gap: 1px; height: 14px; }
.ping i { width: 3px; background: var(--live); box-shadow: 1px 1px 0 #0B3A1C; }
.ping i:nth-child(1) { height: 4px; } .ping i:nth-child(2) { height: 6px; } .ping i:nth-child(3) { height: 8px; } .ping i:nth-child(4) { height: 11px; } .ping i:nth-child(5) { height: 14px; }
.ping.is-off i { position: relative; background: #3A3350; box-shadow: none; }
/* "pinging…" sweep: opacity on a pseudo-element (compositor only) */
.ping.is-off i::after { content: ""; position: absolute; inset: 0; background: var(--purple-2); opacity: 0; animation: pinging 1.5s steps(1) infinite; }
.ping.is-off i:nth-child(2)::after { animation-delay: .15s; } .ping.is-off i:nth-child(3)::after { animation-delay: .3s; } .ping.is-off i:nth-child(4)::after { animation-delay: .45s; } .ping.is-off i:nth-child(5)::after { animation-delay: .6s; }
@keyframes pinging { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
.serverlist__motd { font: 500 .85rem/1.45 var(--f-pixel); color: #AAAAAA; overflow-wrap: anywhere; text-shadow: 2px 2px 0 #2A2A2A; }
.motd-gold { color: #FFAA00; white-space: nowrap; } .motd-purple { color: #B98CFF; } .motd-white { color: #FFFFFF; } .motd-gray { color: #555555; }
.join { margin: 0; padding: 0 22px 10px; display: grid; }
.join__row { display: grid; grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); align-items: baseline; }
.join__row:last-child { border-bottom: 0; }
.join dt { font: 500 .75rem/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.join dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
.join dd a { text-decoration: none; } .join dd a:hover { text-decoration: underline; text-decoration-color: var(--purple-2); }
@media (max-width: 480px) { .serverlist__top { column-gap: 8px; } .serverlist__name { font-size: .92rem; } .serverlist__meta { font-size: .72rem; gap: 6px; } .serverlist__entry { margin: 8px; gap: 12px; } .serverlist__icon { width: 52px; height: 52px; } .join { padding-inline: 16px; } .join__row { grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr); } }

/* ---------- sub-page hero ---------- */
.phero { padding-block: clamp(32px, 4.5vw, 64px) clamp(36px, 4vw, 56px); position: relative; overflow: hidden; }
.phero::before { content: ""; position: absolute; inset: -60% 30% auto -10%; height: 560px; pointer-events: none; background: radial-gradient(closest-side, rgba(138, 75, 255, .2), transparent 72%); }
.phero__in { position: relative; z-index: 1; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.phero__copy { display: grid; gap: 16px; min-width: 0; align-content: start; }
.phero h1 { font-size: clamp(2.4rem, 1rem + 4.4vw, 4.4rem); line-height: .95; font-weight: 900; font-stretch: 120%; letter-spacing: -.03em; }
.phero p.lede { color: var(--fg-2); font-size: 1.1rem; max-width: 60ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; align-items: center; }
.phero__icon { display: block; width: fit-content; margin-bottom: 4px; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 28px rgba(138, 75, 255, .45)); }
.phero__icon .px { width: 84px; height: 84px; }
/* the facts sit on the same baseline as the hero CTA instead of floating mid-column */
@media (min-width: 980px) { .phero__in--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; align-items: end; } .phero__icon .px { width: 112px; height: 112px; } }

/* ---------- modes ---------- */
.modes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modes--next { margin-top: 12px; }
.mode { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-2); min-width: 0; text-decoration: none; position: relative; overflow: hidden; transition: border-color .2s, transform .2s var(--ease); }
a.mode:hover { border-color: var(--purple-2); transform: translateY(-3px); }
.mode h3 { font-size: 1.35rem; }
.mode p { color: var(--fg-2); font-size: .95rem; }
.mode__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode__region { font: 500 .75rem/1 var(--f-mono); color: var(--muted); letter-spacing: .06em; }
.mode__more { margin-top: 4px; font-weight: 700; font-size: .92rem; color: var(--purple-2); }
a.mode:hover .mode__more span { display: inline-block; transform: translateX(3px); transition: transform .2s var(--ease); }
.mode__soon { margin-top: 4px; font-size: .9rem; color: var(--muted); }
.mode__icon { display: block; flex: none; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .85)); }
.mode__icon .px { width: 56px; height: 56px; }
.modes--main .mode { padding: 0 28px 28px; gap: 14px; }
.modes--main .mode h3 { font-size: 1.6rem; }
/* banner: a block-art header stands in for screenshots */
.mode__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 -28px 6px; padding: 24px 28px 20px; min-height: 148px; border-bottom: 1px solid var(--line); background: var(--pat-field) 0 0 / 96px 96px, radial-gradient(120% 140% at 0% 100%, rgba(138, 75, 255, .3), transparent 60%), linear-gradient(180deg, #19132B, #15111F); }
.modes--main .mode:nth-child(2) .mode__row { background: var(--pat-field) 40px 20px / 96px 96px, radial-gradient(120% 140% at 0% 100%, rgba(255, 210, 63, .14), transparent 60%), linear-gradient(180deg, #18142A, #15111F); }
.mode__row .mode__icon .px { width: 84px; height: 84px; }
.mode__row .mode__top { justify-content: flex-end; align-self: flex-start; }
.mode__shot { width: calc(100% + 56px); max-width: none; margin: 0 -28px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-bottom: 1px solid var(--line); display: block; }
.mode__shot + .mode__row { min-height: 0; background: none; padding-top: 16px; }
.mode--compact { grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; background: transparent; border-style: dashed; }
.mode--compact .mode__icon { opacity: .9; }
.mode--compact .mode__icon .px { width: 42px; height: 42px; }
.mode--compact .mode__top { margin: 0 0 4px; }
.mode--compact h3 { font-size: 1.1rem; }
.mode--compact p { font-size: .9rem; }
@media (max-width: 480px) { .modes--main .mode { padding: 0 20px 22px; } .mode__row { margin-inline: -20px; padding: 18px 20px 16px; min-height: 124px; } .mode__row .mode__icon .px { width: 70px; height: 70px; } }

/* "Played in August?" — a calm full-width band */
.strip { padding-block: 40px; position: relative; }
.strip__in { display: grid; gap: 16px 40px; align-items: start; }
@media (min-width: 900px) { .strip__in { grid-template-columns: 200px 1fr; } }
.strip__title { font-size: 1.1rem; font-stretch: 112%; line-height: 1.3; color: var(--fg); }
.strip__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 32px; }
@media (min-width: 760px) { .strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip__list li { color: var(--fg-2); font-size: .92rem; line-height: 1.55; }
@media (min-width: 760px) { .strip__list li { padding-left: 16px; border-left: 2px solid var(--line-2); } }
.strip__list strong { display: block; color: var(--fg); font-weight: 700; margin-bottom: 2px; }

/* ---------- OG banner ---------- */
.og { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 10px 14px 10px 10px; border-radius: var(--r-md); border: 1px solid #6D5B3C; background: linear-gradient(90deg, rgba(255, 210, 63, .09), transparent 70%); max-width: 640px; }
.og__tag { flex: none; display: grid; place-items: center; min-height: 30px; padding: 0 9px; margin-bottom: 3px; border-radius: var(--r-xs); border: 2px solid var(--edge); background: var(--gold); color: #1A1300; font: 700 .9rem/1 var(--f-pixel); letter-spacing: .04em; box-shadow: inset 0 2px 0 var(--gold-hi), 0 3px 0 var(--gold-side), 0 3px 0 2px var(--edge); }
.og__text { flex: 1; min-width: 0; color: var(--fg); font-size: .92rem; }
.og__left { flex: none; font: 600 .875rem/1 var(--f-mono); color: var(--gold); white-space: nowrap; }

/* demo bar */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-bottom: 20px; border: 1px dashed rgba(242, 179, 91, .55); border-radius: var(--r-md); font-size: .875rem; color: var(--fg-2); }
.demo-bar__tag { font: 700 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.demo-bar__text { flex: 1; min-width: 200px; }
.demo-bar__field { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; }
.demo-bar select { height: 40px; border-radius: var(--r-sm); background: var(--ink); color: var(--fg); border: 1px solid var(--field-line); padding: 0 8px; font: 500 1rem var(--f-body); }

/* ---------- rank ladder: a climb of extruded tiles ---------- */
.ladder { display: grid; grid-template-columns: repeat(var(--count, 7), minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; padding-top: 14px; align-items: end; }
.step {
  --n: 1; --face: #1A1529; --side: #2A2340;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; text-align: left; min-width: 0;
  min-height: calc(88px + var(--n) * 14px); padding: 14px 12px 12px; margin-bottom: 5px;
  border-radius: var(--r-sm); border: 2px solid var(--edge); background: var(--face); color: var(--fg); cursor: pointer; font: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 4px 0 var(--side), 0 4px 0 2px var(--edge);
  transition: transform .12s var(--press), box-shadow .12s var(--press), background .15s;
}
/* app.js sets --count on the ladder and --n on each step (style attribute); these only cover a render without it */
.step:nth-child(2) { --n: 2; } .step:nth-child(3) { --n: 3; } .step:nth-child(4) { --n: 4; } .step:nth-child(5) { --n: 5; } .step:nth-child(6) { --n: 6; } .step:nth-child(7) { --n: 7; }
.step:hover { --face: #211A33; transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 6px 0 var(--side), 0 6px 0 2px var(--edge); }
.step:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 0 0 var(--side), 0 0 0 2px var(--edge); }
.step[aria-checked="true"], .step[aria-checked="true"]:hover { --face: #2B1D55; --side: var(--purple-deep); transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 0 0 2px var(--purple-2), 0 4px 0 var(--side), 0 4px 0 2px var(--edge), 0 0 30px -4px rgba(138, 75, 255, .75); }
.step--raven { --face: #1E1632; }
.step--top { --face: #221839; }
.step__name { font: 800 .92rem/1 var(--f-display); font-stretch: 118%; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.step__name.sheen-text { text-shadow: none; }
.step__price { font: 500 .95rem/1 var(--f-mono); color: var(--fg); }
.step__price s { color: var(--muted); margin-right: 6px; font-size: .8em; }
.step.is-owned .step__price { color: var(--muted); }
.step__meta { font: 500 .75rem/1.2 var(--f-mono); color: var(--muted); }
.step__flag { white-space: nowrap; position: absolute; top: -12px; left: 10px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); border: 2px solid var(--edge); background: var(--purple-3); color: #1A1033; font: 700 .6875rem/16px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.step__flag .short { display: none; }
.step__flag::before { content: none; }
/* tier pips: 1–7 pixel squares, the rank's height on the ladder */
.ladder .step .step__bar {
  display: block; flex: none; width: 82px; max-width: 100%; height: 10px; margin-bottom: auto; color: inherit; animation: none;
  --pip: 10px; --gap: 2px;
  background:
    linear-gradient(180deg, transparent 7px, rgba(0, 0, 0, .45) 7px),
    linear-gradient(90deg, var(--purple-2) calc(var(--n) * (var(--pip) + var(--gap))), #2E2645 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--pip), transparent var(--pip) calc(var(--pip) + var(--gap)));
  mask: repeating-linear-gradient(90deg, #000 0 var(--pip), transparent var(--pip) calc(var(--pip) + var(--gap)));
}
.ladder .step--top .step__bar { background: linear-gradient(180deg, transparent 7px, rgba(0, 0, 0, .4) 7px), linear-gradient(90deg, var(--gold), #FFB347 22%, #C78BFF 60%, var(--purple-2)); }
.ladder .step.is-owned .step__bar { background: linear-gradient(180deg, transparent 7px, rgba(0, 0, 0, .45) 7px), linear-gradient(90deg, var(--muted) calc(var(--n) * (var(--pip) + var(--gap))), #2E2645 0); }
@media (max-width: 920px) {
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; align-items: stretch; }
  .step { min-height: 76px; padding: 14px 8px 10px; }
  /* the last row is always filled: a short last row's final tile widens */
  .step:last-child:nth-child(4n+3) { grid-column: span 2; }
  .step:last-child:nth-child(4n+2) { grid-column: span 3; }
  .step:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .step__name { font-size: .8rem; letter-spacing: .02em; }
  .step__price { font-size: .82rem; }
  .step__meta { display: none; }
  .step__flag { left: 50%; transform: translateX(-50%); padding: 0 5px; }
  .ladder .step .step__bar { --pip: 7px; --gap: 2px; height: 8px; width: 61px; }
}
/* small phones: the badge shrinks to a star; "Recommended" stays for screen readers */
@media (max-width: 440px) {
  .step__flag { padding: 0; width: 24px; height: 22px; text-align: center; font-size: .9rem; line-height: 18px; }
  .step__flag .full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .step__flag::before { content: "\2605"; content: "\2605" / ""; }
}
@media (max-width: 380px) { .ladder .step .step__bar { --pip: 5px; --gap: 2px; width: 47px; } .step { padding-inline: 5px; } .step__name { font-size: clamp(.58rem, 3.3vw, .74rem); letter-spacing: 0; font-stretch: 108%; } .step__price { font-size: clamp(.68rem, 3.6vw, .82rem); } }

/* ---------- rank panel ---------- */
#ranks { scroll-margin-top: var(--nav-h); }
.rank { display: grid; gap: 0; border: 2px solid var(--edge); border-radius: var(--r-md); overflow: clip; background: var(--ink-2); box-shadow: 0 6px 0 var(--purple-deep), 0 6px 0 2px var(--edge), 0 40px 80px -40px rgba(0, 0, 0, .8); margin-bottom: 8px; }
/* engines without overflow:clip get hidden on phones; on desktop hidden would break the sticky buy column, so the panels round their own corners */
@media (max-width: 939px) { .rank { overflow: hidden; overflow: clip; } }
@media (min-width: 940px) { .rank { grid-template-columns: 420px minmax(0, 1fr); } .rank__buy { border-radius: 8px 0 0 8px; } .rank__perks { border-radius: 0 8px 8px 0; } }
.rank__buy, .rank__perks { padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; align-content: start; min-width: 0; }
.rank__buy { background: linear-gradient(180deg, #24184A 0, #1A1334 220px, #15112A 100%); border-bottom: 2px solid var(--edge); }
@media (min-width: 940px) { .rank__buy { display: block; border-bottom: 0; border-right: 2px solid var(--edge); } .rank__sticky { position: sticky; top: calc(var(--nav-h) + 24px); } }
.rank__sticky { display: grid; gap: 18px; }
.rank__perks { background: var(--ink-2); gap: 22px; grid-template-columns: minmax(0, 1fr); }
.rank__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag { font: 900 1.6rem/1 var(--f-display); font-stretch: 122%; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0, 0, 0, .7); }
.tag.sheen-text { text-shadow: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)); }
.rank__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rank__amount { font: 900 3.2rem/1 var(--f-display); font-stretch: 105%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rank__was { font: 500 1.1rem/1 var(--f-mono); color: var(--muted); text-decoration: line-through; }
.rank__term { color: var(--fg-2); font-size: .875rem; }
.rank__upgrade { color: var(--gold); font-size: .9rem; margin-top: -8px; }
.rank__pitch { color: var(--fg); font-size: 1rem; line-height: 1.5; }
.rank__value { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .28); border: 1px solid rgba(160, 126, 255, .3); font-size: .9rem; color: var(--fg-2); }
.rank__value strong { color: var(--fg); font-family: var(--f-mono); font-weight: 600; }
.rank__value svg { flex: none; }
.rank__fine { color: var(--fg-2); font-size: .875rem; text-align: center; }
.rank__gift { justify-self: center; margin-top: -6px; }
.rank__note { font-size: .875rem; color: var(--muted); }
.rank__inherit { color: var(--fg-2); font-size: .95rem; }
.rank__inherit strong { font-weight: 700; }
#compareBtn { justify-self: start; }

.chat { background: rgba(0, 0, 0, .55); border-radius: var(--r-xs); padding: 10px 12px; }
.chat__line { font: 500 .95rem/1.5 var(--f-pixel); color: #FFFFFF; overflow-wrap: anywhere; text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }
.chat__br { color: #555555; }
.chat__cap { margin-top: -12px; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.chat__colon { color: #AAAAAA; }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); max-width: 100%; }
.seg__opt { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg-2); font: 600 .9rem/1.1 var(--f-body); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg__opt:hover { color: var(--fg); }
label.seg__opt { display: grid; place-items: center; }
.seg__opt[aria-checked="true"], .seg__opt[aria-pressed="true"], .seg__opt.is-checked { background: var(--ink-3); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--purple-2); }
/* radio labels: app.js mirrors the input's state as .is-checked / .is-focus; :has() and :focus-within are separate rules so one unknown selector never drops the others */
.seg__opt.is-focus { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.seg__opt:has(input:focus-visible) { outline: 2px solid var(--purple-2); outline-offset: 2px; }
@supports not selector(:has(a)) { label.seg__opt:focus-within { outline: 2px solid var(--purple-2); outline-offset: 2px; } }
.seg--sm { justify-self: start; max-width: 100%; }
.seg--sm .seg__opt { min-height: 34px; font-size: .85rem; padding: 0 12px; }
@media (max-width: 380px) { .seg--sm .seg__opt { padding: 2px 8px; font-size: .8rem; white-space: normal; } }

.pgroup { display: grid; gap: 4px; }
.pgroup__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 .75rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; }
.perks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.perks li:last-child { border-bottom: 0; }
.perks svg { color: var(--purple-2); }
.perk__label { display: grid; gap: 2px; }
.perk__tip { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.perks .perk__val { font: 600 .875rem/1.2 var(--f-mono); color: var(--fg); text-align: right; }
.cos { display: grid; gap: 12px; }
.cos__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9rem; }
.cos__kind { color: var(--fg-2); padding-top: 3px; }
.cos__items { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cos__bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.cos__track { grid-column: 1 / -1; height: 8px; background: var(--ink-3); border: 1px solid var(--edge); overflow: hidden; }
.cos__track i { display: block; height: 100%; background: var(--purple-2); box-shadow: inset 0 -2px 0 var(--purple-deep); }
.cos__n { font: 500 .875rem var(--f-mono); color: var(--fg-2); }
.cchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 9px; border-radius: var(--r-xs); background: var(--ink-3); border: 1px solid var(--line); font-size: .8125rem; white-space: nowrap; }
.cchip i { width: 12px; height: 12px; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.cchip--more { color: var(--muted); background: none; border-style: dashed; }
.cchip--excl { border-color: #553593; background: #271D3E; }
.cchip__badge { margin-left: 2px; padding: 2px 5px; border-radius: 3px; background: var(--purple); color: #fff; font: 700 .6875rem/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 520px) { .cos__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* compare */
.compare { margin-top: 20px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-2); overflow: hidden; }
/* position: relative keeps the cells' sr-only text inside the scroller (it used to widen the page at 761–1000px) */
.compare__scroll { overflow-x: auto; position: relative; }
.compare__scroll:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
.compare__table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: .9rem; }
.compare__table th, .compare__table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.compare__table th:first-child, .compare__table td:first-child { text-align: left; position: sticky; left: 0; background: var(--ink-2); color: var(--fg-2); font-weight: 500; z-index: 1; }
/* row labels wrap so all seven ranks fit a 1440 screen; on smaller desktops long values wrap too before the table scrolls */
.compare__table tbody th:first-child { white-space: normal; min-width: 11em; }
@media (max-width: 1199px) { .compare__table td { white-space: normal; text-wrap: balance; } }
.compare__table thead th { font: 800 .82rem/1 var(--f-display); font-stretch: 118%; letter-spacing: .04em; }
.compare__table thead th .mono { display: block; margin-top: 6px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.compare__table .grp th > span { position: sticky; left: 14px; }
.compare__table .grp th { text-align: left; font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--purple-2); background: var(--ink); padding-top: 16px; }
.compare__table td { font-family: var(--f-mono); font-size: .875rem; color: var(--fg-2); }
.compare__table .no { color: var(--muted); }
.compare__table .yes { color: var(--purple-2); }
.compare__table .is-sel { background: rgba(138, 75, 255, .12); }
.compare__table--pair { min-width: 0; }
.compare__table--pair th, .compare__table--pair td { white-space: normal; }
.compare__pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.compare__pick select { height: 44px; padding: 0 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--fg); border: 1px solid var(--field-line); font: 600 1rem var(--f-body); }

/* ---------- gems ---------- */
.gems { display: grid; gap: 40px; }
@media (min-width: 980px) { .gems { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } .gems__intro { position: sticky; top: calc(var(--nav-h) + 32px); } }
.gems__intro { display: grid; gap: 16px; }
.gems__intro > p:not(.eyebrow):not(.buys__title) { color: var(--fg-2); max-width: 46ch; }
.gems__icon { display: block; width: fit-content; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .85)) drop-shadow(0 0 24px rgba(138, 75, 255, .5)); margin-bottom: 4px; }
.gems__icon .px { width: 70px; height: 70px; }
.buys { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; font-size: .9rem; }
.buys li { display: flex; justify-content: space-between; gap: 12px; color: var(--fg-2); text-wrap: pretty; }
.buys .mono { color: var(--fg); }
.buys__title { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pack { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(20, 17, 29, .88); transition: border-color .15s, background .15s; }
.pack:hover { border-color: var(--line-2); background: var(--ink-2); }
.pack__gem { width: 52px; height: 38px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .8)); }
.pack__amt { display: grid; gap: 4px; min-width: 0; }
.pack__num { font: 700 1.3rem/1 var(--f-mono); }
.pack__num small { font: 500 .85rem var(--f-body); color: var(--muted); margin-left: 4px; }
.pack__bonus { font: 500 .875rem/1.35 var(--f-mono); color: var(--purple-2); text-wrap: pretty; }
.pack__bonus--none { color: var(--muted); }
.pack__rate { color: var(--muted); }
.pack__note { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 2px; font: 600 .8125rem/1.3 var(--f-body); color: var(--purple-3); }
.pack__note::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--gold); box-shadow: 1px 1px 0 var(--gold-side); }
.pack__tag { display: inline-block; margin-left: 8px; padding: 3px 6px; border-radius: 3px; background: var(--purple-3); color: #1A1033; font: 700 .6875rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; vertical-align: 3px; }
.pack__price { font: 700 1.1rem/1 var(--f-mono); }
/* highlighted pack (covers RavenPass Premium): the one block in the list */
.pack--hl { border: 2px solid var(--edge); border-radius: var(--r-sm); background: linear-gradient(90deg, #2B1D55, #1E1640 70%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 4px 0 var(--purple-deep), 0 4px 0 2px var(--edge); margin-bottom: 6px; padding: 18px 18px; }
.pack--hl:hover { background: linear-gradient(90deg, #301F60, #21184A 70%); border-color: var(--edge); }
.pack--hl .pack__bonus { color: var(--purple-3); }
.pack--hl .btn { min-height: 40px; }
@media (max-width: 480px) { .pack { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 14px; gap: 12px; } .pack__gem { width: 44px; height: 32px; } .pack__price { grid-column: 3; grid-row: 1; } .pack .btn { grid-column: 1 / -1; width: 100%; } }

/* ---------- faq ---------- */
.faq .section__head, .faq__list { max-width: 820px; }
@media (min-width: 980px) { .faq > .wrap { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 64px; align-items: start; } .faq .section__head { position: sticky; top: calc(var(--nav-h) + 32px); margin: 0; } }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 600; font-size: 1.05rem; transition: color .15s; }
.faq summary:hover { color: var(--purple-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 3px; margin-top: -1.5px; background: var(--purple-2); transition: transform .2s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { padding: 0 0 20px; color: var(--fg-2); max-width: 64ch; }
.faq details a, .faq .section__head a { color: var(--purple-2); }

/* ---------- cta band ---------- */
main > section.band { padding-block: clamp(64px, 8vw, 96px); background: var(--pat-field) 0 0 / 96px 96px, radial-gradient(70% 140% at 50% 100%, rgba(138, 75, 255, .26), transparent 70%), var(--store-2); }
.band__in { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; text-align: center; grid-template-columns: minmax(0, 1fr); }
.band__in h2 { max-width: 20ch; font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem); font-weight: 900; }
.band__sub { color: var(--fg-2); }
.band__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; justify-self: stretch; }

/* ---------- footer ---------- */
.footer { padding-block: 64px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--ink); overflow: hidden; }
.footer::before { --prev: var(--bg-b); }
/* the seam takes the colour of the section above it (partials set these classes) */
.footer--after-single::before { --prev: var(--bg-a); }
.footer--after-band::before { --prev: var(--store-2); }
/* link columns: 3 across from 520px; on small phones Help takes a full row in two columns so nothing sits alone */
.footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .footer__grid { grid-template-columns: minmax(310px, 1.5fr) repeat(3, minmax(0, 1fr)); } }
@media (max-width: 519px) { .footer__col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .footer__col:last-child h3 { grid-column: 1 / -1; } }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .footer__brand { grid-column: auto; } }
.footer__logo { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.footer__logo img { width: 48px; height: 48px; }
.footer__name { font: 800 1rem/1.2 var(--f-display); font-stretch: 118%; letter-spacing: .06em; }
.footer__tag { color: var(--fg-2); font-size: .9rem; max-width: 34ch; }
.footer .ip--compact { width: fit-content; max-width: 100%; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col h3 { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-stretch: 100%; }
.footer__col a { color: var(--fg-2); text-decoration: none; font-size: .92rem; width: fit-content; }
.footer__col a:hover { color: var(--fg); }
.footer__legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.footer__legal p { max-width: 80ch; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(4, 3, 8, .66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 70; animation: fade .2s var(--ease); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(440px, 100%); height: 100vh; height: 100dvh; background: var(--ink-2); border-left: 2px solid var(--edge); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); animation: slide .28s var(--ease); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #1D1536, var(--ink-2)); }
.drawer__title { font-size: 1.15rem; }
.drawer__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.who__lead { color: var(--fg-2); }
.drawer .seg { display: grid; }
.field { display: grid; gap: 8px; }
.field__label { font-weight: 600; font-size: .92rem; }
.field__wrap { display: flex; align-items: center; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field__wrap:focus-within { border-color: var(--purple-2); outline: 2px solid var(--purple-2); outline-offset: 2px; }
.field__prefix { padding: 0 2px 0 14px; font: 500 1rem var(--f-mono); color: var(--fg-2); }
.field__input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; background: var(--ink); color: var(--fg); border: 1px solid var(--field-line); border-radius: var(--r-sm); font: 500 1rem var(--f-mono); }
.field__input::placeholder { color: #6E6784; }
.field__input:focus { outline: none; border-color: var(--purple-2); }
.field__input:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
/* inside a wrap the input is bare: the wrap owns the frame and the focus ring */
.field__wrap .field__input, .field__wrap .field__input:focus { border: 0; background: transparent; box-shadow: none; outline: none; border-radius: 0; }
.field__wrap .field__input:focus-visible { border: 0; background: transparent; box-shadow: none; outline: none; border-radius: 0; }
.field__prefix:not([hidden]) + .field__input { padding-left: 0; }
.field__hint { color: var(--muted); font-size: .875rem; }
.field__note { font-size: .875rem; color: var(--fg-2); }
.field__deliver .mono { color: var(--fg); }
.field__error { color: var(--danger); font-size: .875rem; }
.player { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--line); }
.player__head { width: 36px; height: 36px; border-radius: var(--r-xs); image-rendering: pixelated; background: var(--ink-3); flex: none; }
.player__who { display: grid; flex: 1; min-width: 0; }
.player__name { font: 600 .95rem/1.3 var(--f-mono); overflow-wrap: anywhere; }
.player__ed { font-size: .875rem; color: var(--muted); }
.lines { list-style: none; margin: 0; padding: 0; display: grid; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line__name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.line__sub { grid-column: 1 / -1; font-size: .875rem; color: var(--muted); }
.line__sub:empty { display: none; }
.line__price { font: 600 .95rem var(--f-mono); text-align: right; }
.line__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.qty button { width: 40px; height: 40px; border: 0; background: none; color: var(--fg-2); cursor: pointer; font: 600 1rem/1 var(--f-mono); }
.qty button:hover { color: var(--fg); }
.qty span { min-width: 20px; text-align: center; font: 500 .875rem var(--f-mono); }
.remove { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--muted); font: 500 .875rem var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.remove:hover { color: var(--danger); }
.cart .link-btn, .modal__card .link-btn, .rank__gift, .helpc__link { min-height: 44px; }
.upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px dashed #68559F; background: rgba(138, 75, 255, .07); font-size: .9rem; color: var(--fg-2); }
.upsell p { flex: 1; min-width: 0; }
.upsell strong { font-weight: 800; font-family: var(--f-display); font-stretch: 118%; letter-spacing: .03em; }
.upsell__acts { display: flex; align-items: center; gap: 12px; }
@media (max-width: 480px) { .upsell p { flex-basis: 100%; } }
.cart__empty { display: grid; gap: 8px; justify-items: start; color: var(--fg-2); padding: 12px 0; }
.cart__links { display: flex; gap: 16px; }
.codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.codes__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .9rem; color: var(--fg-2); }
.codes__item:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 4px; border-radius: var(--r-xs); }
.codes__off { color: var(--live); font-family: var(--f-mono); }
.code { display: flex; gap: 8px; }
.code .field__input { height: 44px; }
.code .btn { min-height: 44px; }
.code__hint { margin-top: -10px; }
.code__msg { font-size: .875rem; margin-top: -10px; color: var(--fg-2); }
.code__msg.is-ok { color: var(--live); } .code__msg.is-err { color: var(--danger); }
.cart__foot { position: sticky; bottom: -20px; margin: auto -20px -20px; padding: 16px 20px 20px; display: grid; gap: 12px; border-top: 1px solid var(--line); background: var(--ink-2); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.total:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 4px; border-radius: var(--r-sm); }
.total--tax { font-weight: 500; font-size: .9rem; color: var(--fg-2); }
#drawer:focus:not(:focus-visible), #thanks:focus:not(:focus-visible), .drawer__panel:focus:not(:focus-visible) { outline: none; }
.total__amount { font-size: 1.35rem; }
.cart__fine { text-align: center; color: var(--muted); font-size: .875rem; }
/* landscape phones: the footer scrolls with the basket so the lines stay visible */
@media (max-height: 520px) { .cart__foot { position: static; margin-top: 0; } .cart__fine { display: none; } }

/* ---------- modal / toast ---------- */
/* the card centres with auto margins: when it is taller than the screen it starts at the top and the overlay scrolls (Close stays reachable) */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: rgba(4, 3, 8, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.modal__card { margin-block: auto; width: min(420px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center; padding: 32px 28px 22px; border-radius: var(--r-md); background: linear-gradient(180deg, #23184A, var(--ink-2) 55%); border: 2px solid var(--edge); box-shadow: 0 6px 0 var(--purple-deep), 0 6px 0 2px var(--edge), 0 40px 80px -20px rgba(0, 0, 0, .8); }
.modal__logo { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)); }
.modal__card p { color: var(--fg-2); }
.modal__card .modal__og { color: var(--gold); font-size: .9rem; }
.modal__card .link-btn { justify-self: center; padding-inline: 16px; border-radius: var(--r-sm); }
@media (max-width: 400px) { .modal__card { padding: 28px 18px 18px; } .modal__card .ip { width: 100%; padding-left: 12px; gap: 10px; } .modal__card .ip__value { font-size: .875rem; } }
@media (max-width: 340px) { .modal__card { padding-inline: 14px; } .modal__card .ip__value { font-size: .8rem; } .modal__card .ip__action { padding: 0 10px; } }
/* never cut the IP: it may wrap as a last resort */
.modal__card .ip__value { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.2; }
.modal__card .ip { max-width: 100%; height: auto; min-height: 50px; padding-block: 6px; }
@media (max-height: 520px) { .modal__card { gap: 10px; padding: 18px 20px 12px; } .modal__logo { width: 56px; height: 56px; } .modal__card h2 { font-size: 1.4rem; } }
.toast { position: fixed; left: 16px; right: 16px; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: none; z-index: 95; display: flex; align-items: center; gap: 4px; padding: 12px 18px; border-radius: var(--r-sm); background: var(--fg); color: var(--ink); font-weight: 600; font-size: .9rem; border: 2px solid var(--edge); box-shadow: 0 4px 0 #8C84A3, 0 4px 0 2px var(--edge), 0 16px 30px rgba(0, 0, 0, .45); animation: none; }
.toast.is-shown { animation: rise .25s var(--ease); }
.toast.sr-only { padding: 0; border: 0; box-shadow: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.toast__btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the toast is light: the purple ring needs the deep shade to show */
.toast:focus-visible { outline-color: var(--purple-deep); }
.toast__btn:focus-visible { outline-color: var(--purple-deep); }
body.has-buybar .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* mobile sticky buy bar */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(26, 19, 52, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 2px solid var(--edge); transition: transform .25s var(--ease), visibility 0s; }
/* phones: hidden keeps the bar in place below the screen so showing/hiding slides by transform instead of replaying an entrance animation */
@media (max-width: 939px) { .buybar[hidden] { display: flex !important; visibility: hidden; transform: translateY(calc(100% + 4px)); transition: transform .2s var(--ease), visibility 0s .2s; } }
.buybar__info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.buybar__tag { font: 900 1.05rem/1 var(--f-display); font-stretch: 120%; letter-spacing: .04em; }
.buybar__price { font-weight: 600; }
.buybar .btn { margin-bottom: 4px; }
@media (min-width: 940px) { .buybar { display: none !important; } }
/* short landscape screens: no room for a bar */
@media (max-height: 450px) { .buybar { display: none !important; } body.has-buybar { padding-bottom: 0; } body.has-buybar .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- FFA page ---------- */
/* facts: big numerals in the hero's right column */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; margin-top: 16px; container-type: inline-size; }
.facts > div { display: grid; gap: 6px; align-content: start; padding-top: 12px; border-top: 2px solid var(--line-2); }
/* numerals scale with the facts row, so "100" never runs past its column's rule */
.facts b { font: 900 clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem)/.9 var(--f-display); font-size: clamp(2rem, 13cqi, 4.4rem); font-stretch: 115%; letter-spacing: -.02em; text-shadow: 0 3px 0 #000, 0 3px 0 var(--purple-deep); }
.facts > div:first-child b { color: var(--purple-3); }
.facts span { color: var(--fg-2); font-size: .875rem; line-height: 1.35; }
@media (min-width: 980px) { .phero__in--split .facts { margin-top: 0; gap: 32px 24px; } }
@media (max-width: 420px) { .facts { gap: 20px 12px; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
@media (min-width: 600px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: s; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); width: 32px; height: 32px; margin-bottom: 8px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--purple); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--purple-deep), 0 3px 0 2px var(--edge); color: #fff; font: 700 .9rem/1 var(--f-pixel); }
.steps li p { color: var(--fg-2); font-size: .94rem; }
.steps code, .cmd { font-family: var(--f-mono); font-size: .85em; padding: 2px 6px; border-radius: var(--r-xs); background: #08070C; border: 1px solid var(--line); color: var(--purple-3); white-space: nowrap; }
/* the IP moves to the next line as one piece; it only breaks inside if it is wider than the line */
.cmd { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.split { display: grid; gap: 40px; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.factions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.faction { position: relative; overflow: hidden; padding: 20px 14px 16px; border: 1px solid var(--line); border-top: 0; border-radius: var(--r-sm); background: var(--ink-2); display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; }
.faction::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--fc, var(--line-2)); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
/* names shrink with the tile (container units) so a single long word like CINDERCREST never splits mid-word */
.faction { container-type: inline-size; }
.faction b { font: 800 .85rem/1.2 var(--f-display); font-size: clamp(.66rem, 8.6cqi, .85rem); font-stretch: 115%; letter-spacing: .03em; overflow-wrap: anywhere; }
.faction--free { border: 2px solid var(--edge); border-top: 0; background: #2B1D55; box-shadow: 0 4px 0 var(--purple-deep), 0 4px 0 2px var(--edge); margin-bottom: 6px; }
@media (max-width: 420px) { .factions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faction--free { grid-column: span 2; } }
/* rows always fill: 2 columns (an odd last map widens), 3 from 640px (9 maps = 3 rows); the permanent arena takes its own full row */
.maps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .maps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .maps li:not(.maps__perm):nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; } }
.maps li { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.maps li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--line-2); }
.maps li b { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.maps__perm { border-style: dashed !important; grid-column: 1 / -1; }
.maps li.has-img { display: grid; gap: 8px; padding: 0 0 12px; overflow: hidden; }
.maps li.has-img::before { display: none; }
.maps li.has-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.maps li.has-img b, .maps li.has-img span { padding-inline: 14px; }
.events { display: grid; gap: 12px; }
@media (min-width: 760px) { .events { grid-template-columns: 1fr 1fr; } }
.event { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); display: grid; gap: 12px; align-content: start; min-width: 0; }
.event--wide { grid-column: 1 / -1; background: radial-gradient(80% 160% at 100% 0%, rgba(138, 75, 255, .16), transparent 60%), var(--ink-2); border-color: var(--line-2); }
.event__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.event h3 { font-size: 1.3rem; }
.event p { color: var(--fg-2); font-size: .95rem; }
.event dl { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .9rem; }
.event dt { color: var(--muted); }
.event dd { margin: 0; font-family: var(--f-mono); font-size: .875rem; color: var(--fg); }
/* Overdrive modifiers: a plain two-column list, no cards */
.mods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin-top: 8px; }
@media (min-width: 640px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mods { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mods div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mods b { font-size: .95rem; }
.mods span { color: var(--fg-2); font-size: .875rem; }

/* RavenPass */
.pass { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-md); border: 2px solid var(--edge); background: var(--pat-field) 0 0 / 96px 96px, radial-gradient(80% 140% at 100% 0%, rgba(138, 75, 255, .26), transparent 60%), #17112B; box-shadow: 0 6px 0 var(--purple-deep), 0 6px 0 2px var(--edge); margin-bottom: 8px; }
@media (min-width: 960px) { .pass { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; } }
.pass__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; min-width: 0; }
.pass__copy p { color: var(--fg-2); }
.pass__copy strong { color: var(--fg); }
/* the road: 4 rows of 25 blocks, every 5th raised, free rewards as gold dots, level 100 a double block */
.track { --g: 3px; display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 12px var(--g); padding: 8px calc((100% + var(--g)) / 26) 4px 0; }
.track i { position: relative; aspect-ratio: 1; border-radius: 2px; background: #2E2550; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .4); }
.track i.c { background: var(--purple); transform: translateY(-4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 4px 0 var(--purple-deep); }
.track i.f::after { content: ""; position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; background: var(--gold); box-shadow: 0 0 0 1px #000; }
.track i.end { width: calc(200% + var(--g)); aspect-ratio: auto; height: 100%; background: var(--sheen); overflow: hidden; transform: translateY(-4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--purple-deep), 0 0 0 1px #000, 0 4px 0 1px #000; }
/* level 100 shimmer: a light band slides across by transform (compositor only, no repaint per frame) */
.track i.end::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: shine 5s linear infinite; }
@keyframes shine { 45%, 100% { transform: translateX(100%); } }
.track__legend { justify-content: center; display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: .875rem; color: var(--fg-2); margin-top: 18px; }
.track__legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #2E2550; position: relative; }
.lg--c { background: var(--purple); box-shadow: 0 2px 0 var(--purple-deep); }
.lg--f::after { content: ""; position: absolute; inset: 3px; background: var(--gold); box-shadow: 0 0 0 1px #000; }
.lg--end { width: 22px; background: var(--sheen); }

/* cosmetic shelves */
.shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 479px) { .shelf:first-child { grid-column: span 2; } }
@media (min-width: 480px) { .shelves { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 480px) and (max-width: 1099px) { .shelf:first-child { grid-column: span 2; } }
@media (min-width: 1100px) { .shelves { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.shelf { padding: 18px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ink-2); display: grid; gap: 4px; align-content: start; min-width: 0; }
.shelf b { font: 900 2rem/1 var(--f-display); font-stretch: 112%; margin-bottom: 4px; text-shadow: 0 3px 0 #000; }
.shelf span { color: var(--fg); font-size: .92rem; font-weight: 600; }
.shelf small { color: var(--muted); font: 500 .8125rem var(--f-mono); }
.ffa-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); border: 2px solid var(--edge); margin-top: 32px; }

/* ---------- leaderboards ---------- */
.lb { display: grid; gap: 24px; }
.lb__controls { display: grid; gap: 12px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 400px) { .lb__filters .seg__opt { padding: 0 6px; font-size: .85rem; } }
@media (min-width: 1100px) { .lb__controls { grid-template-columns: minmax(0, 1fr) auto; } }
.lb__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.lb__filters .seg__opt { white-space: normal; }
.lb__search { display: flex; gap: 8px; }
.lb__search .field__input { height: 46px; width: 220px; }
@media (max-width: 640px) { .lb__search, .lb__search .field__input { width: 100%; } .lb__filters { width: 100%; } .lb__filters .seg { width: 100%; } }
.lb__msg { grid-column: 1 / -1; margin: -4px 0 0; }
.lb__scroll { overflow-x: auto; }
.lbt { width: 100%; border-collapse: collapse; }
.lbt th { text-align: left; font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lbt td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lbt tr:hover td { background: var(--ink-2); }
.lbt tr[data-player] { cursor: pointer; }
.lbt tr[data-player]:focus-visible { outline: 2px solid var(--purple-2); outline-offset: -2px; }
.lbt tr.is-active td { background: var(--ink-2); }
.lbt tr[data-player]:focus-visible td { background: var(--ink-2); }
.lbt .r { width: 64px; font: 600 .95rem var(--f-mono); color: var(--fg-2); }
.lbt .r1 { color: var(--gold); } .lbt .r2 { color: #D9D4E6; } .lbt .r3 { color: #E0A26A; }
.lbt .v { text-align: right; font: 600 1rem var(--f-mono); }
.lbt .p { display: flex; align-items: center; gap: 12px; }
.lbt .p img { width: 28px; height: 28px; border-radius: 3px; image-rendering: pixelated; background: var(--ink-3); }
.lbt .p__name { font: 600 .95rem var(--f-mono); color: var(--fg); }
/* the name is a real button (keyboard + screen readers); it looks like plain text, the whole row stays clickable */
.lb__who { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-xs); }
.lb__who:hover { color: var(--purple-2); }
.lb__who:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.lbt tr[data-player]:hover .p__name { color: var(--purple-2); }
.lbt tr.lbt__profile td { padding: 0 0 12px; background: none; }
.lb__panel { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink); overflow: hidden; }
.lb__panel.is-loading .lbt tbody { opacity: .55; transition: opacity .15s; }
.lb__more { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--line); }
.lb__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; color: var(--muted); font-size: .875rem; background: var(--ink-2); }
.sample { color: var(--warn); }
.profile { display: grid; gap: 16px; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--ink-2); }
.profile__top { display: flex; gap: 14px; align-items: center; }
.profile__top img { width: 48px; height: 48px; border-radius: var(--r-xs); image-rendering: pixelated; }
.profile__name { font: 700 1.2rem var(--f-mono); }
.profile__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; }
.profile__stats div { background: var(--ink); padding: 12px; display: grid; gap: 2px; }
.profile__stats b { font: 600 1.15rem var(--f-mono); }
.profile__stats span { color: var(--muted); font-size: .875rem; }
/* podium: #1 is the block */
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.podium li { display: grid; justify-items: center; gap: 8px; padding: 20px 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); text-align: center; min-width: 0; }
.podium li:nth-child(1) { order: 2; padding-top: 30px; padding-bottom: 22px; border: 2px solid var(--edge); border-radius: var(--r-sm); background: linear-gradient(180deg, #2E1F5A, #1E1640); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 6px 0 var(--purple-deep), 0 6px 0 2px var(--edge); margin-bottom: 8px; }
.podium li:nth-child(2) { order: 1; }
.podium li:nth-child(3) { order: 3; }
.podium img { width: 56px; height: 56px; border-radius: var(--r-xs); image-rendering: pixelated; background: var(--ink-3); }
.podium li:nth-child(1) img { width: 72px; height: 72px; box-shadow: 0 0 0 2px #000, 0 4px 0 2px #000; }
.podium__place { font: 700 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.podium li:nth-child(1) .podium__place { color: var(--gold); }
.podium__name { font: 600 .95rem var(--f-mono); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; color: var(--fg); cursor: pointer; padding: 0; min-height: 32px; }
.podium__name:hover { color: var(--purple-2); }
.podium__val { font: 800 1.3rem/1 var(--f-display); }
@media (max-width: 520px) { .podium { gap: 8px; } .podium li { padding: 14px 6px 12px; } .podium img { width: 40px; height: 40px; } .podium li:nth-child(1) img { width: 52px; height: 52px; } .podium__name { font-size: .78rem; } .podium__val { font-size: 1rem; } }
/* skeleton cards from the build: same box as a real card (heights measured from one), so the JS swap shifts nothing */
.podium .podium__ph { min-height: 183px; align-content: center; gap: 14px; }
.podium .podium__ph:nth-child(1) { min-height: 217px; }
.podium__ph::before { content: ""; width: 56px; height: 56px; border-radius: var(--r-xs); background: var(--ink-3); }
.podium__ph:nth-child(1)::before { width: 72px; height: 72px; background: rgba(255, 255, 255, .06); }
.podium__ph::after { content: ""; width: min(60%, 120px); height: 10px; border-radius: 2px; background: var(--line); }
@media (max-width: 520px) { .podium .podium__ph { min-height: 152px; } .podium .podium__ph:nth-child(1) { min-height: 192px; } .podium__ph::before { width: 40px; height: 40px; } .podium__ph:nth-child(1)::before { width: 52px; height: 52px; } }

/* ---------- vote ---------- */
.vname { display: grid; gap: 10px; max-width: 680px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.vname__row { display: flex; gap: 10px; align-items: stretch; }
.vname .field { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.vname__row .field__wrap { flex: 1; min-width: 0; }
.field__wrap .field__input { width: 100%; }
.vname .btn { min-height: 50px; flex: none; }
.vname .field__hint { margin-top: 2px; }
/* wide: the field and its hint sit side by side, so the box spans the same width as the site grid below */
@media (min-width: 760px) {
  .vname { max-width: none; padding: 18px 20px; }
  .vname .field { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .vname .field > * { grid-column: 1; }
  .vname .field > .field__hint { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-left: 28px; border-left: 1px solid var(--line); }
}
.vsites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 760px) { .vsites { grid-template-columns: 1fr 1fr; } }
.vsite { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); min-width: 0; }
.vsite .btn { margin-bottom: 4px; }
.vsite__n { width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--ink-3); border: 2px solid var(--edge); font: 700 .9rem var(--f-pixel); color: var(--purple-3); flex: none; }
.vsite__name { flex: 1; min-width: 0; font-weight: 600; }
.vsite__name small { display: block; color: var(--muted); font-weight: 400; font-size: .875rem; }
.vsite--soon { padding-block: 10px; background: transparent; border-style: dashed; border-color: var(--line); }
.vsite--soon .vsite__n { width: 28px; height: 28px; font-size: .8rem; opacity: .55; border-width: 1px; border-color: var(--line-2); }
.vsite--soon .vsite__name { color: var(--fg-2); font-weight: 500; font-size: .94rem; }
.vsite--soon .chip { opacity: .7; }
.vsite.is-done { border-color: rgba(74, 222, 128, .4); }
.vsite.is-done .vsite__n { background: #26443B; color: var(--live); }
.rewards { display: grid; gap: 12px; }
@media (min-width: 760px) { .rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reward:last-child { grid-column: 1 / -1; } }
@media (min-width: 980px) { .rewards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reward:last-child { grid-column: auto; } }
.reward { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); display: grid; gap: 10px; align-content: start; }
.reward h3 { font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--purple-2); font-stretch: 100%; }
.reward p { font: 800 1.2rem/1.3 var(--f-display); font-stretch: 108%; color: var(--fg); }
.reward ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font: 600 1rem/1.5 var(--f-mono); }

/* ---------- docs (rules / legal) ---------- */
.doc { display: grid; gap: 40px; }
@media (min-width: 960px) { .doc { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; } .toc { position: sticky; top: calc(var(--nav-h) + 24px); } }
.toc { display: grid; gap: 2px; font-size: .9rem; }
.toc p { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc a { padding: 6px 10px; border-radius: 0 var(--r-xs) var(--r-xs) 0; color: var(--fg-2); text-decoration: none; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--fg); border-left-color: var(--purple-2); background: var(--ink-2); }
@media (max-width: 959px) { .toc { display: flex; flex-wrap: wrap; gap: 6px; } .toc p { width: 100%; margin-bottom: 4px; } .toc a { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; } }
.prose { max-width: 72ch; display: grid; gap: 14px; min-width: 0; }
.prose--wide { max-width: none; }
.prose h2 { font-size: 1.6rem; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 16px); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.05rem; margin-top: 10px; }
.prose p, .prose li { color: var(--fg-2); }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--purple-2); }
.prose strong { color: var(--fg); }
.prose .rules, .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rules li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.rules li:last-child { border-bottom: 0; }
.rules .n { font: 600 .875rem/1.6 var(--f-mono); color: var(--purple-2); }
.rules b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.rules p { color: var(--fg-2); font-size: .95rem; }
.callout { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(160, 126, 255, .4); background: #1F1631; color: var(--fg-2); font-size: .94rem; }
.prose .callout { margin-top: 24px; }
.callout strong { color: var(--fg); }
.updated { font: 500 .8125rem var(--f-mono); color: var(--muted); }
.noscript { padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--fg-2); }
.noscript a { color: var(--purple-2); }

/* ---------- support ---------- */
.help { display: grid; gap: 12px; }
@media (min-width: 720px) { .help { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .help { grid-template-columns: repeat(3, 1fr); } }
.helpc { padding: 24px 24px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--nav-h) + 16px); min-width: 0; }
.helpc:target { border-color: var(--purple-2); }
.helpc h3 { font-size: 1.15rem; }
.helpc p, .helpc li { color: var(--fg-2); font-size: .94rem; }
.helpc p a { color: var(--purple-2); }
.helpc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.helpc .btn, .helpc__link { align-self: flex-start; margin-top: auto; }
.helpc > :nth-last-child(2) { margin-bottom: 4px; }
.status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1100px) { .status { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.status > div { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-2); min-width: 0; }
.status > div > span { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* two columns: the long items (network chip, Java address) take full rows, players + port share one, so no tile sits alone */
@media (max-width: 719px) { .status > div:nth-child(1), .status > div:nth-child(3) { grid-column: 1 / -1; } .status > div:nth-child(3) { order: 4; } }
@media (min-width: 720px) and (max-width: 1099px) { .status { grid-template-columns: repeat(3, minmax(0, 1fr)); } .status > div:nth-child(1), .status > div:nth-child(3) { grid-column: span 2; } }
.status b { font-weight: 600; font-size: .98rem; overflow-wrap: anywhere; }
.parents { display: grid; gap: 16px; }
/* wide screens: the list uses the full width in two columns instead of leaving the right half empty */
@media (min-width: 960px) { .parents .prose { max-width: none; } .parents ul { display: block; columns: 2; column-gap: 56px; } .parents li { break-inside: avoid; margin-bottom: 10px; } }

/* ---------- no-js, touch, reduced motion ---------- */
.no-js .rank, .no-js #compare, .no-js .packs, .no-js #basketBtn, .no-js #joinHelp [data-join], .no-js #giftBtn { display: none; }
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .seg__opt { min-height: 44px; }
  .footer__col a { padding: 10px 0; }
  .footer__col { gap: 0; }
  .joinhelp__tab, .joinhelp__copy { min-height: 44px; }
}
@media (max-width: 400px) { .joinhelp__q { flex-basis: 100%; } }
@media (max-width: 360px) { .ip { gap: 10px; padding: 0 6px 0 12px; } .ip__value { font-size: .875rem; } .ip__action { padding: 0 12px; } }
@media (max-width: 440px) {
  .ip__label { display: none; }
  .ip { width: 100%; justify-content: space-between; }
  .hero__cta .btn, .phero__cta .btn, .band__cta .btn { width: 100%; }
}
/* Windows high contrast: box-shadow and background tints vanish, so selected states and bars get real outlines/system colours */
@media (forced-colors: active) {
  .step[aria-checked="true"], .seg__opt[aria-pressed="true"], .seg__opt[aria-checked="true"], .seg__opt.is-checked, .joinhelp__tab[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .step, .cd, .pack--hl, .podium li, .rank, .pass, .serverlist { border-color: CanvasText; }
  .modal__card { background: Canvas; border: 2px solid CanvasText; }
  .cos__track { border-color: CanvasText; }
  .cos__track i { forced-color-adjust: none; background: Highlight; }
  .track i { border: 1px solid CanvasText; }
  .track i.c, .track i.end { forced-color-adjust: none; background: Highlight; }
  .lg { border: 1px solid CanvasText; }
  .eyebrow > .sep + *::before, .eyebrow > .eyebrow__sep + *::before, .dot, .navip__dot { forced-color-adjust: none; background: CanvasText; }
  .field__wrap:focus-within, .field__input:focus-visible { outline-color: Highlight; }
  .podium__ph::before, .podium__ph::after { forced-color-adjust: none; background: GrayText; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glint, [data-copy-ip].pop::after { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}