/* ============================================================================
 * Xterium Rust — site design system (Ascension v2, dark-only v1)
 * Tokens: tokens.css (single source — mirror of website/tokens.css).
 * Balance rule 60/25/10/5: bg / structure / accent / hero-glow.
 * Glow budget (5%) is spent ONLY on: home hero scene (beam + tracer streaks) and
 * primary CTA. Everything else stays flat/matte — that's a brief rule, not taste.
 * ==========================================================================*/

/* Fonts are self-hosted (OFL; RU/CIS-friendly, no Google runtime dependency) —
   @font-face blocks live in the GENERATED css/fonts.css, linked before this file. */

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
b { font-weight: 600; }
code { font-family: var(--font-body); background: var(--surface-raised); padding: 1px 6px; border-radius: var(--radius-sm); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(37, 99, 235, 0.4); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-8); }
.num { font-variant-numeric: tabular-nums; }
/* hairline separator — a calmer, more intentional divider than a middle dot */
.sep {
  display: inline-block; width: 1px; height: .8em;
  background: currentColor; opacity: .28;
  margin: 0 .6em; vertical-align: -.03em;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--color-cosmic-white);
  padding: 10px 18px; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: rgba(10, 14, 23, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(26, 42, 77, 0.6);
}
.nav--overlay {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; backdrop-filter: none; border-bottom: none;
}
.nav-word { display: inline-flex; align-items: center; gap: var(--space-3); }
/* the glass X's optical centre sits below its box centre — nudge up so it aligns with the
   all-caps wordmark's cap-height centre (owner: logo "droops") */
.nav-x { width: 26px; height: 26px; object-fit: contain; transform: translateY(-1.5px); }
.word--footer { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-x { width: 22px; height: 22px; }
.word { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.08em; white-space: nowrap; }
.word b { color: var(--text); font-weight: 900; }
.word-rust { color: var(--accent); }
.nav-links {
  display: flex; align-items: center; gap: var(--space-7, 28px);
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  font-size: var(--type-caption); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); transition: color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); }
.cart-bubble {
  background: var(--accent); color: var(--color-cosmic-white);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-user { text-transform: none !important; letter-spacing: 0.02em !important; }
/* Steam avatars render square (native shape), small technical radius — owner call 2026-07-07 */
.nav-avatar { border-radius: var(--radius-md); width: 26px; height: 26px; }
.nav-avatar--letter {
  width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--surface-raised);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: var(--text);
}
.nav-burger { display: none; }

/* pjax top progress bar — appears only while a soft navigation is in flight */
.pjax-bar {
  position: fixed; top: 0; left: 0; right: 100%; height: 2px; z-index: 60;
  background: var(--gradient-energy-light);
  opacity: 0; pointer-events: none;
  transition: right .4s ease, opacity .2s ease;
}
.pjax-loading .pjax-bar { opacity: 1; right: 12%; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
  padding: 12px 24px; border-radius: var(--radius-md); cursor: pointer; border: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  transition: transform .15s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease;
  text-align: center;
}
.btn-lg { padding: 15px 30px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-primary {
  background: var(--accent); color: var(--color-cosmic-white);
  box-shadow: var(--glow-accent); /* part of the 5% budget: primary CTA only */
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
/* outlined secondary — clear button affordance without spending the accent/glow budget */
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); background: var(--surface-raised); }
.btn-steam {
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border);
}
.btn-steam:hover { border-color: var(--accent); }
/* Hover lifts only where a real hover exists — touch taps otherwise stick the raised state. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-steam:hover { transform: translateY(-1px); }
}
/* Press feedback on every pressable. Order matters: these sit AFTER the hover lifts so the
   pressed transform wins the equal-specificity race while :hover and :active both match. */
.btn-primary:active { background: var(--accent-pressed); transform: translateY(0) scale(0.97); }
.btn-ghost:active, .btn-steam:active, .btn-outline:active { transform: scale(0.97); }
.btn-block:active { transform: scale(0.99); } /* full-width buttons move less */
.btn-danger:hover { color: var(--status-error); }
.btn-noglow { box-shadow: none; }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim); font-size: 13px; font-family: var(--font-body);
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:hover { color: var(--text); }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--space-24) var(--space-6) var(--space-16);
}
/* Scene v5 (owner 2026-07-08): the FULL poster as a full-bleed backdrop — text removed and
   the heavy blur BAKED into the asset (hero-blur.webp — WebP for clean smooth gradients, no
   JPEG 8x8 blocking; fine grain dithers any banding), so the page never pays for a runtime
   filter:blur(); crisp starfield drifts over the blur for depth, plus the breathing beam-glow
   and one slow comet. No crop, no edge mask. */
.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
/* display-resolution grain — the owner loves this texture (keeps the hero from looking flat and
   dithers 8-bit banding at screen pixels, which a baked-in grain can't hold once the image
   upscales on a wide monitor). Fractal-noise SVG (desaturated), tiled small, overlay-blended. */
.hero-grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: .5;
}
.hero-poster {
  position: absolute; inset: 0;
  background: url('/static/img/hero-blur.webp') no-repeat center / cover;
  /* FROZEN at the heroDrift midpoint (owner 2026-07-08: liked the mid-drift framing, not the
     playing zoom). The Ken-Burns loop is off; this is the still frame from the centre of it. */
  transform: scale(1.03) translateX(-0.6%);
  /* The load fade-in STOPS partway (owner liked the moody, mid-develop look where the grain reads
     best — full opacity washed the mood out; then dialled a touch darker still). posterIn holds at
     .42; `both` backwards-fills 0 before start; base opacity matches so no-JS shows the mid look. */
  opacity: .42;
  animation: posterIn 1.8s ease-out both;
}
/* the asset is pre-darkened at bake time; the scrim only pockets the centre for copy
   and fades the bottom into the page background */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 56% at 50% 46%, rgba(10,14,23,.55), transparent 70%),
    linear-gradient(to top, var(--bg) 2%, transparent 26%);
}
/* soft beam-glow that gently breathes — sits on the poster's light column (right third) */
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 30% 62% at 73% 42%, rgba(72,158,255,.16), transparent 62%);
  animation: glowPulse 7s ease-in-out 1.5s infinite alternate;
}
.starfield {
  position: absolute; left: 0; right: 0; top: -12%; bottom: -12%;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(230,240,255,.55) 0, transparent 60%),
    radial-gradient(1px 1px at 26% 68%, rgba(230,240,255,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 15%, rgba(230,240,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 82% 74%, rgba(230,240,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 91% 34%, rgba(230,240,255,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 85%, rgba(230,240,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 58% 42%, rgba(230,240,255,.3) 0, transparent 60%);
  opacity: .8;
  animation: sceneIn 1.6s ease-out both, starDrift 140s linear infinite;
}
.starfield--b {
  background-image:
    radial-gradient(1px 1px at 8% 45%, rgba(230,240,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 33% 12%, rgba(230,240,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 62%, rgba(230,240,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 74% 48%, rgba(230,240,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 95% 88%, rgba(230,240,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 18% 92%, rgba(230,240,255,.3) 0, transparent 60%);
  animation: sceneIn 1.6s ease-out both, starDrift 200s linear reverse infinite, twinkle 9s ease-in-out 2s infinite alternate;
}
/* comets crossing the sky — the poster's electric-blue, a glowing head + tail. Two on different
   paths/timings so streaks come more often and from different angles (owner: "чуть чаще, крутой
   эффект"). Hidden under reduced motion via the opacity keyframe (ends at 0). */
.comet {
  position: absolute; top: 12%; left: -8%;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(140,205,255,.95);
  box-shadow: 0 0 8px 2px rgba(90,170,255,.7);
  opacity: 0;
  animation: comet 10s linear 2s infinite;
}
/* second comet: higher, shallower up-right path, offset timing */
.comet--b { top: 30%; animation: cometB 13s linear 6s infinite; }
.comet::after { /* the tail */
  content: ""; position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  width: 120px; height: 2px;
  background: linear-gradient(to left, rgba(140,205,255,.8), transparent);
}
.comet--b::after { width: 92px; } /* slightly shorter tail so the two read as distinct */

.eyebrow {
  position: relative; font-family: var(--font-display); font-size: var(--type-caption);
  letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 var(--space-6);
}
.headline {
  position: relative; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 7vw, var(--type-display-xl));
  line-height: 1.08; letter-spacing: 0.01em; margin: 0 0 var(--space-6);
  max-width: 920px;
}
.headline .accent { color: var(--color-light-core); }
.sub {
  position: relative; max-width: 520px; color: var(--text-dim);
  font-size: 17px; margin: 0 0 var(--space-10);
}
.cta-row { position: relative; display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* orchestrated load sequence — 80-110ms gaps, ~1.1s total (was 1.6s; it replays on every
   pjax return home, so the tighter band reads snappier without losing the cascade) */
.intro-1 { animation: rise .6s var(--ease-out) .05s both; }
.intro-2 { display: inline-block; animation: rise .6s var(--ease-out) .13s both; }
.intro-3 { display: inline-block; animation: rise .6s var(--ease-out) .21s both; }
.intro-4 { animation: rise .6s var(--ease-out) .32s both; }
.intro-5 { animation: rise .6s var(--ease-out) .42s both; }
.intro-6 { animation: rise .6s var(--ease-out) .52s both; }


.connect-strip {
  position: relative; margin-top: var(--space-8);
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: rgba(17, 24, 39, 0.7); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 12px;
}
.connect-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.connect-host { background: none; padding: 0; font-size: 14px; color: var(--text); }
.connect-copy {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer;
  transition: color .15s, border-color .15s, transform .12s var(--ease-out);
}
.connect-copy:hover { color: var(--text); border-color: var(--accent); }
.connect-copy:active { transform: scale(0.94); }
/* success confirmation on the one rare, high-intent action (copying the connect command) */
.connect-copy--ok {
  color: var(--status-success);
  border-color: color-mix(in srgb, var(--status-success) 40%, transparent);
  animation: copyPop .18s var(--ease-out);
}

/* live pilots inside the hero eyebrow — inline-flex so the 6px dot keeps its box
   (a bare inline span collapses width/height to 0) */
.eyebrow-live { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }

/* ---------- status strip (telemetry, value-over-label — not fine print) ---------- */
.status-strip { border-top: 1px solid rgba(26, 42, 77, 0.6); border-bottom: 1px solid rgba(26, 42, 77, 0.6); padding: var(--space-5) 0; }
.status-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-10); flex-wrap: wrap; }
.status-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.status-num {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px;
}
.status-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--on { background: var(--status-success); box-shadow: 0 0 6px var(--status-success); animation: pulse 2.4s ease-in-out infinite; }
.dot--off { background: var(--status-error); }

/* ---------- latest-duels feed (killfeed ticker) ---------- */
.feed { padding: var(--space-3) 0; border-bottom: 1px solid rgba(26, 42, 77, 0.4); min-height: 44px; }
.feed-row {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
}
.feed-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}
.feed-item {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex-wrap: wrap; font-size: var(--type-caption); color: var(--text-dim);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.feed-item--hidden { display: none; }
/* killfeed slide: entries drop in from above, leave downward (exit slightly faster) */
.feed-item--in { opacity: 0; transform: translateY(-6px); }
.feed-item--out { opacity: 0; transform: translateY(6px); transition-duration: .2s; }
.feed-win { color: var(--text); font-weight: 600; }
.feed-lose { color: var(--text-dim); font-weight: 600; }
.feed-item a:hover { color: var(--accent-hover); }
.feed-x { width: 13px; height: 13px; color: var(--accent); opacity: .85; flex: none; }
.feed-arena { opacity: .75; }
.feed-score { color: var(--text); font-variant-numeric: tabular-nums; }
.feed-hs {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em;
  color: var(--color-light-core); border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: var(--radius-sm); padding: 0 4px;
}
.feed-delta { color: var(--status-success); font-variant-numeric: tabular-nums; }
.feed-when { opacity: .65; }

/* ---------- sections / cards ---------- */
.modes { padding: var(--space-24) 0 var(--space-16); }
.section-head { text-align: center; margin-bottom: var(--space-12); }
.section-head--left { text-align: left; margin-bottom: var(--space-8); }
.section-eyebrow { font-family: var(--font-display); font-size: var(--type-caption); letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; margin: 0 0 var(--space-3); }
.section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, var(--type-display-lg)); margin: 0; }
.section-title--sm { font-size: var(--type-heading); }

.mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.mode-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: background .2s ease, border-color .2s ease;
}
.mode-card:hover { background: var(--surface-raised); border-color: rgba(37, 99, 235, 0.45); }
/* value-over-label mode stat (replaced the item icons — owner 2026-07-08); same height as
   the old 38px icon block so the card rhythm holds */
.mode-stat { min-height: 38px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.mode-stat-num {
  font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--accent); transition: color .2s ease;
}
.mode-stat-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
/* the stat takes the hover hit instead of a generic card lift: number flashes to light-core.
   End state equals rest state, so the global reduced-motion kill neutralizes it cleanly. */
.mode-card:hover .mode-stat-num { color: var(--color-light-core); animation: hotFlash .3s ease-out both; }
.mode-num {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em;
  color: var(--text-dim); opacity: .5;
}
.mode-card h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.06em; margin: 0; }
.mode-card p { color: var(--text-dim); font-size: 14px; margin: 0; line-height: 1.5; }

/* ---------- ladder teaser ---------- */
.ladder-teaser { padding: var(--space-16) 0 var(--space-24); }
.ladder-teaser-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-16); align-items: center; }
.ladder-teaser-copy { color: var(--text-dim); max-width: 480px; margin: var(--space-4) 0 var(--space-8); }
.tier-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tier-step {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 14px;
  transition: transform .15s var(--ease-out), border-color .15s ease;
}
/* the ELO thresholds are DATA — draw them as proportional fills (--t = threshold/1500, the
   v4 ladder scale, comes inline from the template). isolate + z-index:-1 keeps the fill under
   the rank chips, whose colors are data and must not be tinted. */
.tier-step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform-origin: left; transform: scaleX(var(--t, 0));
  background: rgba(37, 99, 235, 0.08);
  transition: transform .6s var(--ease-fill);
}
/* grow on reveal — hidden only when JS is there to un-hide (mirrors the .reveal contract) */
.js .tier-rail.reveal:not(.in) .tier-step::before { transform: scaleX(0); }
.no-observer .tier-rail .tier-step::before { transform: scaleX(var(--t, 0)); }
.tier-elo { font-size: var(--type-caption); color: var(--text-dim); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .tier-step:hover { transform: translateX(4px); }
}
.tier-step:hover { border-color: rgba(37, 99, 235, 0.45); }

/* rank chips — colors are DATA (EloArena 3-surface palette), never brand chrome */
.rank-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--rank-color, var(--text-dim));
  border: 1px solid color-mix(in srgb, var(--rank-color, #8B7355) 35%, transparent);
}
.rank-chip--xterium-master { --rank-color: var(--rank-xterium-master); }
.rank-chip--legend { --rank-color: var(--rank-legend); }
.rank-chip--champion { --rank-color: var(--rank-champion); }
.rank-chip--diamond { --rank-color: var(--rank-diamond); }
.rank-chip--platinum { --rank-color: var(--rank-platinum); }
.rank-chip--gold { --rank-color: var(--rank-gold); }
.rank-chip--silver { --rank-color: var(--rank-silver); }
.rank-chip--bronze { --rank-color: var(--rank-bronze); }
/* Iron: keep the brand-exact #8B7355 for the dot/border (3-surface mirror), but render the
   LABEL in a lighter tint so it clears WCAG AA on the chip's dark background. */
.rank-chip--iron { --rank-color: var(--rank-iron); color: #C4B49A; }

/* ---------- CTA closer + footer ----------
   Full-bleed flat deep-space section echoing the hero (bookends the page) — replaces the
   former rounded blue gradient slab, which read as the stock template closer and blew the
   60/25/10/5 balance. Starfield layer must stay pointer-events:none (it is absolutely
   positioned and would otherwise paint over and steal the CTA button's clicks). */
.cta-panel {
  position: relative; overflow: hidden;
  margin: var(--space-8) 0 0;
  padding: var(--space-24) var(--space-6);
  text-align: center;
}
.cta-panel .starfield { opacity: .5; pointer-events: none; }
.cta-panel > :not(.starfield) { position: relative; } /* content above the absolute layer */
.cta-panel h2 { font-family: var(--font-display); font-size: var(--type-heading); margin: 0 0 var(--space-3); }
.cta-panel p { color: rgba(230, 240, 255, 0.8); margin: 0 auto var(--space-8); max-width: 520px; }

.footer { border-top: 1px solid rgba(26, 42, 77, 0.6); padding: var(--space-12) 0; margin-top: var(--space-16); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); }
.word--footer { font-size: 15px; }
.footer-tag { color: var(--text-dim); font-size: 13px; margin: var(--space-3) 0; }
.copyright { font-size: 12px; color: var(--text-dim); opacity: .8; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col h4 {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-dim); margin: 0 0 var(--space-2);
}
.footer-col a { font-size: 13px; color: var(--text-dim); }
.footer-col a:hover { color: var(--text); }

/* ---------- page head (inner pages) ---------- */
.page-head { padding: var(--space-16) 0 var(--space-8); position: relative; }
.page-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 5vw, 52px); margin: 0 0 var(--space-3); }
.page-sub { color: var(--text-dim); margin: 0; max-width: 560px; }
/* live-season chip inside the h1 — text + dot only, no border/background */
.live-chip {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-light-core);
  margin-left: var(--space-3);
}

/* ---------- leaderboard ---------- */
.board-tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-8);
}
.season-picker { display: flex; align-items: center; gap: var(--space-3); }
.season-picker label { font-size: var(--type-caption); color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
select, input[type="search"], input[type="text"] {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 12px; font-family: var(--font-body); font-size: 14px;
}
select:focus, input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.board-search input { width: 240px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-10); }
.podium-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  transition: border-color .2s ease;
}
.podium-card:hover { border-color: rgba(37, 99, 235, 0.45); }
/* top border color comes inline from the player's RANK (data), not the position.
   #1 is structurally elevated (thicker data edge, taller card, bigger avatar/elo) — on live
   data a bronze #3 otherwise out-pops a silver #1 because orange beats grey. */
.podium-card--1 { border-top: 3px solid var(--border); order: 2; padding-top: var(--space-10); }
@supports (background: color-mix(in srgb, red 4%, blue)) {
  /* guarded: color-mix with var() is invalid-at-computed-value on old engines and would
     otherwise drop the background to transparent instead of falling back */
  .podium-card--1 { background: color-mix(in srgb, var(--rank, var(--border)) 4%, var(--surface)); }
}
.podium-card--1 .podium-avatar { width: 80px; height: 80px; }
.podium-card--1 .podium-avatar--letter { font-size: 30px; }
.podium-card--1 .podium-elo { font-size: 34px; }
.podium-card--1 .podium-pos { font-size: 26px; color: var(--color-light-core); opacity: .85; }
.podium-card--2 { border-top: 2px solid var(--border); order: 1; margin-top: var(--space-5); }
.podium-card--3 { border-top: 2px solid var(--border); order: 3; margin-top: var(--space-5); }
.podium-pos {
  position: absolute; top: 10px; left: 14px;
  font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--text-dim); opacity: .55;
}
.podium-avatar { width: 64px; height: 64px; border-radius: var(--radius-md); }
.podium-avatar--letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-raised); font-family: var(--font-display); font-size: 24px; color: var(--text);
}
.podium-name { font-weight: 600; margin-top: var(--space-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-elo { font-family: var(--font-display); font-weight: 700; font-size: 28px; font-variant-numeric: tabular-nums; }
.podium-meta { font-size: var(--type-caption); color: var(--text-dim); font-variant-numeric: tabular-nums; }

.board-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.board-table { width: 100%; border-collapse: collapse; min-width: 800px; } /* +Form column */
.board-table th {
  font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.board-table td { padding: 10px 14px; border-bottom: 1px solid rgba(26, 42, 77, 0.4); font-size: 14px; }
.board-table tbody tr:last-child td { border-bottom: none; }
.board-row { transition: background .15s ease; }
/* entrance stagger only until the search filter first fires — re-showing a display:none row
   restarts CSS animations, so an ungated stagger replays on every keystroke */
.board-table:not(.filtered) .board-row { animation: rowIn .45s var(--ease-out) both; }
.board-row:hover { background: var(--surface-raised); }
.board-row:nth-child(1) { animation-delay: .03s; } .board-row:nth-child(2) { animation-delay: .06s; }
.board-row:nth-child(3) { animation-delay: .09s; } .board-row:nth-child(4) { animation-delay: .12s; }
.board-row:nth-child(5) { animation-delay: .15s; } .board-row:nth-child(6) { animation-delay: .18s; }
.board-row:nth-child(7) { animation-delay: .21s; } .board-row:nth-child(8) { animation-delay: .24s; }
.board-row:nth-child(9) { animation-delay: .27s; } .board-row:nth-child(10) { animation-delay: .30s; }
.board-row:nth-child(n+11) { animation-delay: .33s; }
.col-pos { width: 48px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.board-row--top .col-pos { color: var(--text); font-weight: 600; }
th.col-elo, td.col-elo, th.col-wl, td.col-wl, th.col-wr, td.col-wr,
th.col-streak, td.col-streak, th.col-peak, td.col-peak { text-align: right; }
td.col-elo { font-weight: 600; }
.board-player { display: flex; align-items: center; gap: var(--space-3); }
.board-player img, .board-avatar--letter { width: 30px; height: 30px; border-radius: var(--radius-md); }
.board-avatar--letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-raised); font-size: 13px; font-weight: 600;
}
.board-player span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-player:hover span { color: var(--accent-hover); }

/* Mystery champions (deferred №9): collected every mystery box — brand-gradient name.
   Solid color first = fallback when background-clip:text is unsupported (gradient
   simply doesn't paint); hover keeps the gradient instead of the accent wash. */
.name--mystery {
  color: #7dd3fc;
  background: linear-gradient(90deg, #7dd3fc 0%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.board-player:hover .name--mystery { color: #7dd3fc; }
/* presence: static dot on the avatar corner (the singular PULSING dot lives on the player
   header and home strip — per-row pulse would be repaint noise) */
.avatar-wrap { position: relative; flex: none; display: inline-flex; }
.presence-dot {
  position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--status-success);
  box-shadow: 0 0 0 2px var(--surface); /* mask ring so it reads against any avatar */
}
.board-active { color: var(--text-dim); font-size: 11px; letter-spacing: 0.04em; flex: none; }
/* recent-form pips — match results are DATA (status tokens), same rule as rank colors */
.form-pips { display: inline-flex; gap: 4px; }
.pip { width: 6px; height: 6px; border-radius: 1px; }
.pip--w { background: var(--status-success); opacity: .85; }
.pip--l { background: var(--status-error); opacity: .55; }
.streak { color: var(--status-success); font-weight: 600; }
/* streak heat tiers: >=3 runs hot (light-core + spark), >=5 blazing (bold) — color only, no glow */
.streak--hot { color: var(--color-light-core); }
.streak--hot::before {
  content: "✦";
  content: "✦" / ""; /* alt text: decorative, keep it out of screen readers where supported */
  font-size: 10px; margin-right: 3px;
}
.streak--blazing { font-weight: 700; }
.board-empty { text-align: center; padding: var(--space-20) var(--space-6); color: var(--text-dim); }
.board-empty h2 { font-family: var(--font-display); color: var(--text); margin: 0 0 var(--space-3); }
.board-empty .btn { margin-top: var(--space-6); }
.board-empty--filter { padding: var(--space-8); }

/* ---------- profile ---------- */
.profile-head { padding-bottom: var(--space-6); }
.profile-head-grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-10); flex-wrap: wrap;
}
.profile-id { display: flex; align-items: center; gap: var(--space-6); }
.profile-avatar-ring {
  padding: 3px; border-radius: calc(var(--radius-md) + 3px);
  background: linear-gradient(135deg, var(--ring, var(--border)), transparent 70%);
}
.profile-avatar { width: 88px; height: 88px; border-radius: var(--radius-md); }
.profile-avatar--letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-raised); font-family: var(--font-display); font-size: 34px;
}
.profile-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3.5vw, 34px); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-3); }
.vip-chip {
  font-size: 10px; letter-spacing: 0.14em; padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.18); color: var(--color-light-core); border: 1px solid rgba(37, 99, 235, 0.4);
}
.profile-badges { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pos-chip, .meta-chip {
  font-size: var(--type-caption); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px;
}
.ban-chip {
  font-size: var(--type-caption); color: var(--status-error);
  border: 1px solid color-mix(in srgb, var(--status-error) 40%, transparent);
  border-radius: var(--radius-sm); padding: 3px 10px;
}
.profile-meta { color: var(--text-dim); font-size: var(--type-caption); margin: var(--space-3) 0 0; }

.profile-elo-hero { text-align: right; }
.elo-big { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 6vw, 64px); line-height: 1; display: block; }
.elo-label { font-size: var(--type-caption); color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase; }
.tier-progress { margin-top: var(--space-4); min-width: 220px; }
.tier-progress-bar { height: 4px; background: var(--surface-raised); border-radius: 2px; overflow: hidden; }
/* width comes inline from the server; the old `transition: width` could never fire (nothing
   mutates it) — draw in via a one-shot transform instead (compositor-friendly) */
.tier-progress-fill {
  display: block; height: 100%; background: var(--gradient-energy-light); border-radius: 2px;
  transform-origin: 0 50%; animation: growX 1s var(--ease-fill) .3s both;
}
.tier-progress-label { font-size: var(--type-caption); color: var(--text-dim); margin-top: var(--space-2); display: inline-block; }

.stat-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin: var(--space-6) auto var(--space-8); }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.tile-num { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.tile-dim { color: var(--text-dim); font-size: 15px; font-weight: 500; margin-right: 4px; }
.tile-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; }

.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-bottom: var(--space-6);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.panel-title { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.06em; margin: 0; }
.panel-sub { font-size: var(--type-caption); color: var(--text-dim); }
.panel-subtitle { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: var(--space-8) 0 var(--space-3); }

.profile-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: start; }

/* ELO chart */
.elo-chart { position: relative; }
.elo-chart svg { width: 100%; height: auto; }
.chart-grid { stroke: rgba(26, 42, 77, 0.55); stroke-width: 1; }
.chart-tick { fill: var(--text-dim); font-size: 11px; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.chart-tier { stroke-width: 1; stroke-dasharray: 3 5; opacity: .5; }
.chart-tier-label { font-size: 10px; font-family: var(--font-display); letter-spacing: .08em; opacity: .75; text-transform: uppercase; }
.chart-line {
  fill: none; stroke: var(--color-light-core); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.elo-chart.drawn .chart-line { animation: draw 1.1s ease-out both; }
.chart-area { opacity: 0; transition: opacity .8s ease .5s; }
.elo-chart.drawn .chart-area { opacity: 1; }
.chart-cursor { stroke: rgba(230, 240, 255, 0.35); stroke-width: 1; }
.chart-dot { fill: var(--color-light-core); stroke: var(--bg); stroke-width: 2; }
.chart-peak { fill: var(--color-light-core); stroke: var(--bg); stroke-width: 2; }
.chart-peak-label {
  fill: var(--color-light-core); font-size: 10px; font-family: var(--font-display);
  letter-spacing: 0.08em; text-transform: uppercase; opacity: .85;
}
.chart-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: 12px; color: var(--text); white-space: nowrap;
  transform: translate(-50%, -130%);
}
.chart-tooltip b { font-variant-numeric: tabular-nums; }
.chart-tooltip .tt-when { color: var(--text-dim); }

/* matches */
.match-list { list-style: none; margin: 0; padding: 0; }
.match-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px 0; border-bottom: 1px solid rgba(26, 42, 77, 0.4);
  font-size: 14px;
}
.match-row:last-child { border-bottom: none; }
.match-res {
  width: 22px; height: 22px; border-radius: var(--radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
}
.match-res--w { background: rgba(45, 212, 191, 0.14); color: var(--status-success); }
.match-res--l { background: rgba(225, 29, 72, 0.12); color: var(--status-error); }
.match-opp { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-opp:hover { color: var(--accent-hover); }
.match-tags { display: flex; gap: 6px; align-items: center; }
.match-score { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 13px; }
.match-delta { margin-left: auto; font-weight: 600; }
.match-delta.pos { color: var(--status-success); }
.match-delta.neg { color: var(--status-error); }
.match-when { color: var(--text-dim); font-size: 12px; width: 62px; text-align: right; flex: none; }
.match-len { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.live-now { display: inline-flex; align-items: center; gap: 6px; color: var(--status-success); }

.mini-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini-table th {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 500; text-align: left; padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border);
}
.mini-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid rgba(26, 42, 77, 0.35); }
.mini-table tbody tr:last-child td { border-bottom: none; }
.mini-table th.num, .mini-table td.num { text-align: right; }
.mini-table a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(37,99,235,.5); }

/* distance bars — sequential single hue (ordinal buckets), 2px gaps via row spacing */
.dist-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.dist-row { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: var(--space-3); }
.dist-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; }
.dist-track { height: 10px; background: var(--surface-raised); border-radius: 2px; overflow: hidden; }
.dist-fill { display: block; height: 100%; border-radius: 2px; transform-origin: 0 50%; }
.dist-num { text-align: right; font-size: 13px; color: var(--text); }
/* draw-in rides the existing reveal observer; hidden only when JS will un-hide (.js),
   .no-observer escape keeps IO-less browsers on full bars */
.js .reveal .dist-fill { transform: scaleX(0); }
.js .reveal.in .dist-fill { transform: scaleX(1); transition: transform 1s var(--ease-fill) .15s; }
.js .reveal.in .dist-row:nth-child(2) .dist-fill { transition-delay: .19s; }
.js .reveal.in .dist-row:nth-child(3) .dist-fill { transition-delay: .23s; }
.no-observer .reveal .dist-fill { transform: none; }

.empty-note { color: var(--text-dim); font-size: 14px; }
.kv-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.kv-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: 10px 0; border-bottom: 1px solid rgba(26, 42, 77, 0.4); font-size: 14px;
}
.kv-list li:last-child { border-bottom: none; }
.kv-list span { color: var(--text-dim); }
.kv-list b { display: inline-flex; align-items: center; gap: var(--space-2); text-align: right; }
.logout-form { margin-top: var(--space-8); }

/* ---------- shop ---------- */
.shop-soon-note {
  display: inline-block; margin-top: var(--space-4);
  background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.4);
  color: var(--color-light-core); font-size: 13px;
  border-radius: var(--radius-md); padding: 8px 14px;
}
.shop-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8); align-items: start; }
.shop-category { margin-bottom: var(--space-12); }
.category-blurb { color: var(--text-dim); font-size: 14px; margin: var(--space-2) 0 0; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.product-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color .2s ease;
}
.product-card:hover { border-color: rgba(37, 99, 235, 0.45); }
.product-card--best { border-color: rgba(37, 99, 235, 0.55); }
.best-ribbon {
  position: absolute; top: -1px; right: var(--space-5);
  background: var(--accent); color: var(--color-cosmic-white);
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.product-name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.04em; margin: 0; }
.product-period { color: var(--text-dim); font-size: 13px; font-family: var(--font-body); letter-spacing: 0; }
.product-tagline { color: var(--text-dim); font-size: 14px; margin: 0; }
.product-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-features li { font-size: 13px; color: var(--text-dim); padding-left: 18px; position: relative; }
.product-features li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.product-buy { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.product-price { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.shop-legal-note { color: var(--text-dim); font-size: 12px; opacity: .8; }

.cart-panel {
  position: sticky; top: 84px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.cart-panel .panel-title { margin-bottom: var(--space-4); }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px 0; border-bottom: 1px solid rgba(26, 42, 77, 0.4); font-size: 14px;
}
.cart-line:last-child { border-bottom: none; }
.cart-line-name { flex: 1; }
.cart-qty { color: var(--text-dim); font-size: 13px; }
.cart-line-price { font-weight: 600; }
.cart-remove {
  background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius-sm); line-height: 1;
  transition: color .15s, background .15s, transform .12s var(--ease-out);
}
.cart-remove:hover { color: var(--status-error); background: var(--surface-raised); }
.cart-remove:active { transform: scale(0.94); }
.cart-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0; margin-bottom: var(--space-4);
  border-top: 1px solid var(--border); font-size: 15px;
}
.cart-total b { font-family: var(--font-display); font-size: 20px; }
.cart-panel .btn-link { margin-top: var(--space-3); }

.checkout-wrap { max-width: 560px; }
.checkout-gate { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-5); }
.checkout-gate p { margin: 0 0 var(--space-4); font-size: 14px; color: var(--text-dim); }
.checkout-gate p b { color: var(--text); }
.checkout-fine { font-size: 12px; color: var(--text-dim); margin-top: var(--space-4); }
.form-error {
  background: rgba(225, 29, 72, 0.12); border: 1px solid color-mix(in srgb, var(--status-error) 40%, transparent);
  color: var(--text); border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px;
  margin-top: var(--space-4);
}
.order-note { font-size: 14px; color: var(--text-dim); margin: var(--space-5) 0; }
.order-status {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-dim);
}
.order-status--paid { color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 40%, transparent); }
.order-status--pending_payment { color: var(--status-warn); border-color: color-mix(in srgb, var(--status-warn) 40%, transparent); }
.order-status--refunded, .order-status--chargeback, .order-status--cancelled { color: var(--status-error); border-color: color-mix(in srgb, var(--status-error) 40%, transparent); }

/* ---------- legal / errors ---------- */
.legal-body { max-width: 720px; padding-bottom: var(--space-16); }
.legal-body h2 { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.04em; margin: var(--space-10) 0 var(--space-3); }
.legal-body p, .legal-body li { color: var(--text-dim); font-size: 15px; }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(37,99,235,.5); }
.draft-banner {
  background: rgba(167, 139, 250, 0.1); border: 1px solid color-mix(in srgb, var(--status-warn) 35%, transparent);
  color: var(--status-warn); font-size: 13px; border-radius: var(--radius-md); padding: 8px 14px;
}
.placeholder-slot { color: var(--status-warn); }

.error-hero {
  position: relative; min-height: 60vh;
  display: flex; align-items: center; text-align: center;
  padding: var(--space-20) 0; overflow: hidden;
}
.error-hero .wrap { position: relative; width: 100%; }
.error-hero .cta-row { margin-top: var(--space-8); }
.error-code {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(60px, 12vw, 120px);
  margin: 0; line-height: 1; color: var(--surface-raised);
  -webkit-text-stroke: 1px var(--border);
}
.scene--error { opacity: .6; }

/* ---------- reveal on scroll ---------- */
/* Reveals are HIDDEN only when JS is present to un-hide them (html.js, set by head.js before
   paint). No JS -> no .js class -> content is visible by default (progressive enhancement). */
.reveal { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; }
/* JS present but IntersectionObserver unsupported: show everything. */
.no-observer .reveal { opacity: 1; transform: none; }

/* ---------- keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }
/* hero poster fade that settles partway (not full) — owner's chosen moody look */
@keyframes posterIn { from { opacity: 0; } to { opacity: .42; } }
@keyframes starDrift { from { transform: translateY(0); } to { transform: translateY(-34px); } }
@keyframes glowPulse { from { opacity: .55; } to { opacity: 1; } }
/* comet: a quick streak, then rests off-screen the rest of the loop */
@keyframes comet {
  0% { transform: translate3d(0,0,0) rotate(18deg); opacity: 0; }
  2% { opacity: 1; }
  13% { transform: translate3d(78vw, 26vw, 0) rotate(18deg); opacity: 0; }
  100% { transform: translate3d(78vw, 26vw, 0) rotate(18deg); opacity: 0; }
}
/* second comet: shallower up-right sweep, its own streak window */
@keyframes cometB {
  0% { transform: translate3d(0,0,0) rotate(-8deg); opacity: 0; }
  2% { opacity: 1; }
  11% { transform: translate3d(86vw, -12vw, 0) rotate(-8deg); opacity: 0; }
  100% { transform: translate3d(86vw, -12vw, 0) rotate(-8deg); opacity: 0; }
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .85; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 4px var(--status-success); } 50% { box-shadow: 0 0 9px var(--status-success); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: var(--line-len, 2000); } to { stroke-dashoffset: 0; } }
@keyframes growX { from { transform: scaleX(0); } }
@keyframes copyPop { 30% { transform: scale(1.1); } }
@keyframes hotFlash { from { opacity: .15; } to { opacity: 1; } } /* opacity only: composited */

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .stat-tiles { grid-template-columns: repeat(3, 1fr); }
  .profile-cols { grid-template-columns: 1fr; }
  .ladder-teaser-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .shop-grid { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
}
@media (max-width: 860px) {
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .podium { grid-template-columns: 1fr; }
  .podium-card--1, .podium-card--2, .podium-card--3 { order: initial; margin-top: 0; }
  .profile-elo-hero { text-align: left; }

  .nav-burger {
    display: inline-flex; flex-direction: column; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-burger span { width: 20px; height: 2px; background: var(--text); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(10, 14, 23, 0.97); border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-8) var(--space-5);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { padding: 12px 0; display: flex; }
  .nav--overlay .nav-links { background: rgba(10, 14, 23, 0.97); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 var(--space-5); }
  .mode-grid { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .status-wrap { gap: var(--space-4); }
  .hero { padding-top: var(--space-20); min-height: 86vh; }
  /* portrait cover would crop to the poster's near-black centre and hide the figure/beam
     (right third); bias the position right so the blurred subject + light column stay in frame */
  .hero-poster { background-position: 72% center; }
  .footer-grid { grid-template-columns: 1fr; }
  .board-search input { width: 100%; }
  .board-tools { flex-direction: column; align-items: stretch; }
}

/* ---------- reduced motion: kill ALL animation/transition theatrics ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  /* force ALL reveals visible regardless of .js/.in state (outranks .js .reveal). */
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  /* the global rule zeroes durations but not delays/child transforms — pin the meter and
     tier fills to their final states so nothing waits behind an animation-delay */
  .reveal .dist-fill { transform: none !important; }
  .tier-progress-fill { animation: none !important; }
  .tier-step::before { transform: scaleX(var(--t, 0)) !important; }
}