/* Shattered Void — marketing site. Dark-first, single theme (the game's own grade).
   Scroll choreography: each .scene is (--len × 100vh) tall; its .stage is sticky for
   the ride and site.js writes the scene's progress to --p (0..1). Elements animate off
   --p through --t = clamp((p - a) / (b - a)), so every beat is declared as a window. */

:root {
  --bg: #05070c;
  --bg-2: #0a0f18;
  --ink: #e8eef5;
  --muted: #8b9bb0;
  --dim: #55657a;
  --cyan: #00d4ff;
  --cyan-ink: #7fe8ff;
  --gold: #ffd933;
  --ember: #ff6a3d;
  --line: rgba(0, 212, 255, 0.18);
  --panel: rgba(10, 16, 26, 0.72);
  --display: "Orbitron", "Eurostile", "Bank Gothic", system-ui, sans-serif;
  --body: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --nav-h: 64px;
  --p: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* A vertical-only page: touch gestures may pan up/down and pinch, never sideways, and the
   viewport must not rubber-band horizontally even if some engine finds a stray pixel. */
html, body { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: 0.01em; }
h1 { font-size: clamp(2rem, 5.2vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 4.2vw, 3.6rem); line-height: 1.06; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 500; }
p { margin: 0; }
strong { font-weight: 600; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cyan); color: #001018; padding: 8px 14px; border-radius: 4px; font-weight: 600; }
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ── background ─────────────────────────────────────────────────────────── */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 78% 22%, rgba(0, 212, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 55% 50% at 18% 78%, rgba(120, 60, 200, 0.11), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(255, 106, 61, 0.06), transparent 70%),
    var(--bg);
}
main, .footer, .nav { position: relative; z-index: 1; }
/* Nothing on this page lives off to the side. `clip` (unlike `hidden`) does not create a
   scroll container, so the sticky stages keep scrolling against the viewport. */
main, .footer { overflow-x: clip; }

/* ── type helpers ───────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 14px;
}
.lede { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.25rem); max-width: 34em; margin-top: 18px; }
.fine { color: var(--dim); font-size: 0.85rem; letter-spacing: 0.06em; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 26px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--cyan); color: #001018; box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.35); }
.btn-primary:hover { box-shadow: 0 0 34px 0 rgba(0, 212, 255, 0.35); }
.btn-ghost { border-color: rgba(232, 238, 245, 0.28); color: var(--ink); background: rgba(5, 7, 12, 0.35); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan-ink); }
.btn-big { padding: 18px 34px; font-size: 0.92rem; }
.btn-nav { padding: 10px 18px; font-size: 0.72rem; background: var(--cyan); color: #001018; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 20;
  display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 3vw, 40px);
  background: linear-gradient(rgba(5, 7, 12, 0.85), rgba(5, 7, 12, 0));
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(5, 7, 12, 0.78); backdrop-filter: blur(14px); border-bottom-color: rgba(0, 212, 255, 0.10); }
.nav-logo { opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.nav-logo img { width: 150px; height: auto; }
.nav.is-solid .nav-logo { opacity: 1; transform: none; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--muted); }
.nav-links a { transition: color 0.2s ease; padding: 6px 0; }
.nav-links a:hover { color: var(--cyan-ink); }
.nav-sep { width: 1px; align-self: stretch; margin: 4px 0; background: rgba(232, 238, 245, 0.16); }
.nav-site { color: var(--ink); }
@media (max-width: 1180px) { .nav-page, .nav-sep { display: none; } }
@media (max-width: 800px) { .nav-links { display: none; } .nav .btn-nav { margin-left: auto; } }
@media (max-width: 480px) {
  .nav { gap: 12px; }
  .nav-logo img { width: 112px; }
  .btn-nav { padding: 9px 14px; font-size: 0.68rem; letter-spacing: 0.1em; }
  .btn-big { white-space: normal; text-align: center; }
}

/* ── scenes ──────────────────────────────────────────────────────────────── */
.scene { position: relative; height: calc(var(--len, 3) * 100vh); }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  padding: var(--nav-h) clamp(16px, 5vw, 80px) 40px;
}
.flat { position: relative; padding: clamp(80px, 12vh, 140px) clamp(16px, 5vw, 80px); }

/* reveal helper: --a / --b are the progress window, --t the 0..1 result */
.rv { --a: 0; --b: 0.2; --t: clamp(0, calc((var(--p) - var(--a)) / (var(--b) - var(--a))), 1);
      opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 34px)); will-change: opacity, transform; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.scene-hero .stage { padding-top: calc(var(--nav-h) + 10px); align-items: start; }
.hero-ship {
  position: absolute; top: 63%; left: 50%; width: min(66vw, 1000px);
  /* p 0→0.4: the wordmark leaves, the ship rises to the centre and drifts right behind the copy */
  --t: clamp(0, calc(var(--p) / 0.4), 1);
  transform: translate(calc(-50% + var(--t) * 22%), calc(-50% - var(--t) * 11%)) scale(calc(1 - var(--t) * 0.04));
  will-change: transform;
}
.hero-ship canvas { width: 100%; height: auto; display: block; }
.hero-copy { position: relative; width: 100%; max-width: 1240px; height: calc(100vh - var(--nav-h) - 50px); height: calc(100svh - var(--nav-h) - 50px); }
.hero-logo {
  width: min(50vw, 520px); margin: 3vh auto 14px;
  --t: clamp(0, calc((var(--p) - 0.06) / 0.14), 1);
  opacity: calc(1 - var(--t)); transform: translateY(calc(var(--t) * -40px)) scale(calc(1 - var(--t) * 0.25));
  transform-origin: top center; will-change: opacity, transform;
}
.hero-kicker {
  text-align: center; color: var(--cyan); font-family: var(--display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  --t: clamp(0, calc((var(--p) - 0.06) / 0.14), 1); opacity: calc(1 - var(--t));
}
/* Two blocks share one anchor and never overlap in time: the headline pair (in 0.14, out by
   0.42) and the pitch + buttons (in from 0.46). Inside each block the copy flows normally,
   so a line that wraps on a narrow screen pushes its neighbour instead of covering it. */
.hero-head, .hero-pitch { position: absolute; left: 0; top: 22vh; display: grid; gap: 14px; will-change: opacity, transform; }
.hero-head { width: min(100%, 1040px); text-shadow: 0 6px 40px rgba(0, 0, 0, 0.8); }
.hero-pitch { width: min(100%, 600px); gap: 26px; }
.hero-line-1 {
  --t: clamp(0, calc((var(--p) - 0.14) / 0.12), 1);
  --o: clamp(0, calc((var(--p) - 0.34) / 0.08), 1);
  opacity: calc(var(--t) * (1 - var(--o))); transform: translateY(calc((1 - var(--t)) * 40px - var(--o) * 30px));
}
.hero-line-2 {
  --t: clamp(0, calc((var(--p) - 0.22) / 0.12), 1);
  --o: clamp(0, calc((var(--p) - 0.34) / 0.08), 1);
  opacity: calc(var(--t) * (1 - var(--o))); transform: translateY(calc((1 - var(--t)) * 40px - var(--o) * 30px));
}
.hero-line-3 {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem); color: var(--ink); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
  --t: clamp(0, calc((var(--p) - 0.46) / 0.12), 1);
  opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 40px));
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap;
  --t: clamp(0, calc((var(--p) - 0.58) / 0.1), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 24px)); }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  --t: clamp(0, calc(var(--p) / 0.06), 1); opacity: calc(1 - var(--t));
}
.scroll-hint span { width: 1px; height: 44px; background: linear-gradient(var(--cyan), transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── ROSTER ──────────────────────────────────────────────────────────────── */
.scene-roster .stage { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; place-items: stretch; gap: 0; padding-bottom: 28px; }
.roster-heading { text-align: center; max-width: 720px; margin: 0 auto; --a: 0; --b: 0.06; }
.roster-heading .lede { margin-left: auto; margin-right: auto; }
.roster-ships { position: relative; width: 100%; height: 100%; min-height: 0; }
.roster-ship {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  opacity: 0; transform: translateX(6%) scale(0.92); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform; backface-visibility: hidden;
}
.roster-ship.is-on { opacity: 1; transform: none; }
.roster-ship.is-off { transform: translateX(-6%) scale(0.92); }
.roster-cards { list-style: none; margin: 0; padding: 0; position: relative; height: 150px; }
.roster-card {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 16px); width: min(92vw, 640px); text-align: center;
  opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none;
}
.roster-card.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.roster-card .role { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); }
.roster-card h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; margin: 6px 0 6px; }
.roster-card p { color: var(--muted); font-size: 1.05rem; }
.chips { list-style: none; display: flex; gap: 8px; justify-content: center; padding: 0; margin: 12px 0 0; flex-wrap: wrap; }
.chips li { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-ink);
  border: 1px solid var(--line); padding: 6px 10px; border-radius: 2px; background: rgba(0, 212, 255, 0.05); }
.roster-rail { list-style: none; display: flex; gap: 10px; justify-content: center; padding: 0; margin: 16px 0 0; }
.roster-rail li { width: 28px; height: 2px; background: rgba(232, 238, 245, 0.18); transition: background-color 0.3s ease; }
.roster-rail li.is-on { background: var(--cyan); }

/* ── SECTORS ─────────────────────────────────────────────────────────────── */
.scene-sectors .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 5vw, 80px); align-items: center; max-width: none; }
.sectors-copy { --a: 0; --b: 0.1; }
.sectors-copy .eyebrow, .sectors-copy h2, .sectors-copy .lede { --t: clamp(0, calc((var(--p) - 0.02) / 0.1), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 30px)); }
.modes { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
.mode { display: grid; gap: 4px; padding-left: 18px; border-left: 2px solid var(--line); opacity: var(--t); transform: translateX(calc((1 - var(--t)) * -20px)); }
.mode strong { font-family: var(--display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.06em; }
.mode span { color: var(--muted); font-size: 0.98rem; }
/* Three of these since 2026-09-10, re-spaced across the same scroll: Lanes is hidden
   in game (GameModes `enabled: false`) so it is not advertised here. The lit-band
   boundaries in site.js are the other half of this and must match the count. */
.mode-1 { --t: clamp(0, calc((var(--p) - 0.12) / 0.1), 1); }
.mode-2 { --t: clamp(0, calc((var(--p) - 0.38) / 0.1), 1); }
.mode-3 { --t: clamp(0, calc((var(--p) - 0.64) / 0.1), 1); }
.mode.is-lit { border-left-color: var(--cyan); }
.sector-map { width: 100%; height: auto; max-height: 76vh; overflow: visible; }
.sector-map .zone text { font-family: var(--display); font-size: 22px; fill: var(--ink); text-anchor: middle; font-weight: 700; }
.sector-map .ring-track { fill: rgba(5, 7, 12, 0.5); stroke: rgba(232, 238, 245, 0.16); stroke-width: 3; }
.sector-map .ring-fill { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg);
  stroke-dasharray: var(--c) var(--c); stroke-dashoffset: calc(var(--c) * (1 - var(--f, 0))); filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.7)); }
.sector-map .zone[data-zone="0"] .ring-fill, .sector-map .zone[data-zone="2"] .ring-fill { --c: 339.3; }
.sector-map .zone[data-zone="1"] .ring-fill { --c: 402.1; }
.sector-map .zone[data-zone="0"] { --f: clamp(0, calc((var(--p) - 0.12) / 0.22), 1); }
.sector-map .zone[data-zone="1"] { --f: clamp(0, calc((var(--p) - 0.4) / 0.22), 1); }
.sector-map .zone[data-zone="2"] { --f: clamp(0, calc((var(--p) - 0.68) / 0.22), 1); }
.sector-map .fleet .dot { filter: drop-shadow(0 0 6px currentColor); }
.sector-map .fleet.enemy .dot { fill: var(--ember); }

/* ── JUMP ────────────────────────────────────────────────────────────────── */
.scene-jump .stage { place-items: center; text-align: center; }
.jump-copy { position: relative; width: 100%; max-width: 1000px; height: 60vh; }
.jump-copy .eyebrow { --t: clamp(0, calc(var(--p) / 0.08), 1); opacity: var(--t); }
.jump-word { position: absolute; left: 0; right: 0; top: 30%; font-size: clamp(2.4rem, 7vw, 6rem); will-change: opacity, transform, letter-spacing; }
.jump-word-1 { --t: clamp(0, calc((var(--p) - 0.06) / 0.1), 1); --o: clamp(0, calc((var(--p) - 0.28) / 0.06), 1);
  opacity: calc(var(--t) * (1 - var(--o))); transform: scale(calc(0.9 + var(--t) * 0.1 + var(--o) * 0.15)); color: var(--cyan-ink); }
.jump-word-2 { --t: clamp(0, calc((var(--p) - 0.32) / 0.08), 1); --o: clamp(0, calc((var(--p) - 0.5) / 0.06), 1);
  opacity: calc(var(--t) * (1 - var(--o))); letter-spacing: calc(0.02em + var(--o) * 0.6em); transform: scale(calc(0.9 + var(--t) * 0.1 + var(--o) * 0.6));
  color: #fff; text-shadow: 0 0 40px rgba(0, 212, 255, 0.9), 0 0 120px rgba(0, 212, 255, 0.5); }
.jump-word-3 { --t: clamp(0, calc((var(--p) - 0.56) / 0.1), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 30px)); font-size: clamp(1.7rem, 4.2vw, 3.6rem); top: 26%; }
.jump-lede { position: absolute; left: 50%; transform: translateX(-50%) translateY(calc((1 - var(--t)) * 20px)); top: 62%; text-align: center;
  --t: clamp(0, calc((var(--p) - 0.7) / 0.1), 1); opacity: var(--t); }
.jump-flash { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(200, 245, 255, 0.9), rgba(0, 212, 255, 0.35) 40%, transparent 75%); opacity: 0; }

/* ── HANGAR ──────────────────────────────────────────────────────────────── */
.scene-hangar .stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.hangar-copy .eyebrow, .hangar-copy h2, .hangar-copy .lede { --t: clamp(0, calc((var(--p) - 0.02) / 0.1), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 30px)); }
.hangar-facts { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.hf { position: relative; padding-left: 26px; color: var(--ink); opacity: var(--t); transform: translateX(calc((1 - var(--t)) * -16px)); }
.hf::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; border: 1px solid var(--cyan); transform: rotate(45deg); background: rgba(0, 212, 255, 0.15); }
.hf-1 { --t: clamp(0, calc((var(--p) - 0.3) / 0.08), 1); }
.hf-2 { --t: clamp(0, calc((var(--p) - 0.45) / 0.08), 1); }
.hf-3 { --t: clamp(0, calc((var(--p) - 0.6) / 0.08), 1); }
.hangar-ship { position: relative; width: 100%; margin-bottom: 96px; --t: clamp(0, calc(var(--p) / 0.1), 1); opacity: var(--t); transform: translateX(calc((1 - var(--t)) * 60px)); }
.hangar-hull { display: block; width: 100%; height: auto; }
/* Hull shadows are a desktop luxury: a drop-shadow filter on a hull-sized image is
   re-rasterized on every frame of a fade or a transform, which is exactly what a
   phone cannot afford while the ships crossfade. */
@media (min-width: 861px) {
  .hero-ship { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7)); }
  .roster-ship, .hangar-hull { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.75)); }
}
.decal {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1;
  --a: calc(0.14 + var(--k) * 0.065); --b: calc(var(--a) + 0.06);
  --t: clamp(0, calc((var(--p) - var(--a)) / (var(--b) - var(--a))), 1);
  opacity: var(--t);
  transform: translate(-50%, -50%) rotate(calc(var(--r) + (1 - var(--t)) * 40deg)) scale(calc(1 + (1 - var(--t)) * 2.4));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  will-change: transform, opacity;
}
.decal-foil { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)) hue-rotate(calc(var(--p) * 540deg)) saturate(1.35) brightness(1.1); }
.registry {
  position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); text-align: center; white-space: nowrap;
  --t: clamp(0, calc((var(--p) - 0.74) / 0.1), 1); opacity: var(--t);
}
.registry-label { display: block; font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.registry-name {
  display: inline-block; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.6rem); letter-spacing: 0.18em; color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 217, 51, 0.55); border: 1px solid rgba(255, 217, 51, 0.55); padding: 8px 20px;
  clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0);
}

/* ── CAPTAINS ────────────────────────────────────────────────────────────── */
/* The strip is wider than the screen on purpose; a fixed 100% column keeps it from
   stretching the grid (and the heading) out past the right edge. */
.scene-captains .stage { grid-template-rows: auto 1fr; grid-template-columns: 100%; place-items: stretch; padding-left: 0; padding-right: 0; }
.captains-heading { padding: 0 clamp(16px, 5vw, 80px); max-width: 100%; --t: clamp(0, calc(var(--p) / 0.08), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 24px)); }
.captain-strip {
  list-style: none; padding: 0 clamp(16px, 5vw, 80px); margin: 0; display: flex; gap: clamp(14px, 2vw, 28px); align-items: center;
  width: max-content; transform: translateX(calc(var(--x, 0) * -1px)); will-change: transform;
}
.captain { width: clamp(220px, 22vw, 300px); flex: none; background: var(--panel); border: 1px solid rgba(232, 238, 245, 0.08); border-radius: 4px; overflow: hidden;
  display: grid; grid-template-rows: auto auto auto 1fr; transition: border-color 0.3s ease, transform 0.3s ease; }
.captain:hover { border-color: var(--line); transform: translateY(-4px); }
.captain img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; object-position: top; }
.captain h3 { padding: 14px 16px 0; font-weight: 700; font-size: 1.05rem; }
.captain span { padding: 2px 16px 0; font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan); }
.captain q { display: block; padding: 10px 16px 16px; color: var(--muted); font-style: italic; font-size: 0.95rem; quotes: "“" "”"; }

/* ── THREE SIDES (COMMAND · CAPTAIN · ASSAULT): flat at every width ─────────── */
.scene-sides { max-width: 1240px; margin: 0 auto; }
.sides-heading { text-align: center; margin-bottom: 44px; }
.sides-heading .lede { margin-left: auto; margin-right: auto; }
.side-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.side-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(232, 238, 245, 0.09); border-radius: 8px;
  background: linear-gradient(160deg, rgba(12, 22, 38, 0.9), rgba(5, 9, 16, 0.86)); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.side-card:hover { border-color: rgba(0, 212, 255, 0.55); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 212, 255, 0.10); }
.side-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.side-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; flex: 1; }
.side-kicker { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); }
.side-card h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.side-card p { color: var(--muted); font-size: 0.98rem; margin: 0; }
.side-card .chips { margin-top: auto; justify-content: flex-start; }
@media (max-width: 960px) { .side-cards { grid-template-columns: minmax(0, 1fr); } }

/* ── THE WAR IS LIVE (landing teaser → /war, /nations, /leaderboard) ───────── */
.scene-war { max-width: 1240px; margin: 0 auto; }
.war-heading { text-align: center; margin-bottom: 44px; }
.war-heading .lede { margin-left: auto; margin-right: auto; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(255, 106, 61, 0.6); vertical-align: 1px; animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 61, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(255, 106, 61, 0); } }
.war-cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; }
.war-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 290px; padding: 26px 26px 24px; overflow: hidden;
  background: linear-gradient(160deg, rgba(12, 22, 38, 0.9), rgba(5, 9, 16, 0.86)); border: 1px solid rgba(232, 238, 245, 0.09); border-radius: 8px;
  opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.war-cards.is-in .war-card { opacity: 1; transform: none; }
.war-cards.is-in .war-card:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s, 0s; }
.war-cards.is-in .war-card:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
.war-card:hover { border-color: rgba(0, 212, 255, 0.55); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 212, 255, 0.10); }
.war-card > * { position: relative; }
.wc-kicker { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); }
.wc-line { color: var(--muted); font-size: 0.98rem; margin-top: auto; }
.wc-go { font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.wc-go::after { content: " \2192"; color: var(--cyan); transition: margin 0.25s ease; }
.war-card:hover .wc-go::after { margin-left: 6px; }
.wc-world { position: absolute !important; right: -18%; top: 8%; width: 120%; max-width: none; filter: invert(1); opacity: 0.09; pointer-events: none; }
.wc-front { background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(0, 212, 255, 0.12), transparent 70%), radial-gradient(ellipse 70% 60% at 100% 100%, rgba(255, 106, 61, 0.12), transparent 70%), linear-gradient(160deg, rgba(12, 22, 38, 0.9), rgba(5, 9, 16, 0.86)); }
.front-sides { display: flex; justify-content: space-between; align-items: center; }
.fs { display: flex; align-items: center; gap: 12px; }
.fs img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.6)); }
.fs b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.fs-a b { color: var(--cyan-ink); text-shadow: 0 0 24px rgba(0, 212, 255, 0.45); }
.fs-b b { color: #ffb08f; text-shadow: 0 0 24px rgba(255, 106, 61, 0.45); }
.front-bar { --a: 50; position: relative; display: flex; height: 8px; margin-top: 14px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.fb-a { width: calc(var(--a) * 1%); background: linear-gradient(90deg, #0090b8, var(--cyan)); box-shadow: 0 0 16px rgba(0, 212, 255, 0.7); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.fb-b { flex: 1; background: linear-gradient(90deg, var(--ember), #c2401c); }
.front-bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(var(--a) * 1% - 1px); width: 2px; background: #fff; box-shadow: 0 0 10px #fff; transition: left 1.2s cubic-bezier(.2, .8, .2, 1); }
.front-cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.front-cap em { font-style: normal; color: var(--muted); }
.mini-podium { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.mini-podium li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mini-podium .mp-pos { width: 2.4em; flex: none; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.08em; color: #b89a3c; }
.mini-podium img { width: 36px; height: 27px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.mini-podium .mp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink); }
.mini-podium .mp-stat { margin-left: auto; flex: none; font-family: var(--display); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-podium li:first-child .mp-name { font-weight: 600; }
@media (max-width: 960px) { .war-cards { grid-template-columns: 1fr; } .war-card { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .war-card { opacity: 1; transform: none; transition: none; } .live-dot { animation: none; } .fb-a, .front-bar::after { transition: none; } }

/* ── WATCH ───────────────────────────────────────────────────────────────── */
.scene-watch { max-width: 1240px; margin: 0 auto; }
.watch-heading { text-align: center; margin-bottom: 40px; }
.watch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.watch-tile { position: relative; padding: 0; border: 1px solid rgba(232, 238, 245, 0.1); border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; text-align: left; font: inherit; color: inherit;
  aspect-ratio: 16 / 9; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.watch-tile:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 212, 255, 0.12); }
.watch-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.3s ease, transform 0.6s ease; }
.watch-tile:hover img { opacity: 1; transform: scale(1.03); }
.watch-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(5, 7, 12, 0.55); border: 1px solid rgba(232, 238, 245, 0.4); backdrop-filter: blur(6px); transition: background-color 0.3s ease, border-color 0.3s ease; }
.watch-play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--ink); }
.watch-tile:hover .watch-play { background: rgba(0, 212, 255, 0.85); border-color: var(--cyan); }
.watch-tile:hover .watch-play::after { border-left-color: #001018; }
.watch-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: grid; background: linear-gradient(transparent, rgba(5, 7, 12, 0.9)); }
.watch-meta strong { font-family: var(--display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em; }
.watch-meta em { font-style: normal; color: var(--muted); font-size: 0.85rem; }
/* The newest film leads, across the whole row. Its poster carries its own title at the
   bottom, so the label rides the top edge instead of covering it. */
.watch-feature { grid-column: 1 / -1; }
.watch-feature .watch-meta { top: 0; bottom: auto; padding: 16px 18px 40px; background: linear-gradient(rgba(5, 7, 12, 0.85), transparent); }
.watch-feature .watch-meta strong { font-size: 1.1rem; }
.watch-feature .watch-meta em { color: var(--cyan-ink); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.watch-feature .watch-play { width: 92px; height: 92px; }
.watch-more { text-align: center; margin: 26px 0 0; }
.watch-more a { color: var(--muted); font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(232, 238, 245, 0.2); padding-bottom: 2px; }
.watch-more a:hover { color: var(--cyan-ink); border-bottom-color: var(--cyan); }
@media (max-width: 640px) {
  .watch-grid { grid-template-columns: minmax(0, 1fr); }
  .watch-play, .watch-feature .watch-play { width: 56px; height: 56px; }
  .watch-play::after { border-width: 10px 0 10px 17px; }
}

/* ── PLAY ────────────────────────────────────────────────────────────────── */
.scene-play { text-align: center; max-width: 820px; margin: 0 auto; padding-bottom: clamp(100px, 16vh, 180px); }
.scene-play .lede { margin-left: auto; margin-right: auto; }
.play-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 38px 0 22px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid rgba(232, 238, 245, 0.08); background: rgba(5, 7, 12, 0.7); backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 28px clamp(16px, 5vw, 80px); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted); margin-left: auto; }
.footer-links a:hover { color: var(--cyan-ink); }
.footer-copy { width: 100%; color: var(--dim); font-size: 0.8rem; }

/* ── video modal ─────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(2, 4, 8, 0.92); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal video, .modal-frame { width: min(100%, 1280px); max-height: 85vh; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 212, 255, 0.12); }
.modal video[hidden], .modal-frame[hidden] { display: none; }
.modal-frame { overflow: hidden; }
.modal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.modal-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232, 238, 245, 0.3); background: rgba(5, 7, 12, 0.6);
  color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.modal-close:hover { border-color: var(--cyan); color: var(--cyan-ink); }

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .stage { padding-left: 18px; padding-right: 18px; }
  /* % of the clipped stage, not vw: mobile engines size vw off the layout viewport. No
     sideways drift here: desktop parks the ship right of the copy, a phone has no "right
     of the copy" and the drift only carried the bow off the screen. */
  .hero-ship { width: 106%; top: 46%; transform: translate(-50%, calc(-50% - var(--t) * 14%)); }
  .hangar-ship { margin-bottom: 70px; }
  .hero-logo { width: min(80vw, 420px); }
  .hero-head, .hero-pitch { top: auto; bottom: 4vh; width: 100%; }
  .hero-head { gap: 10px; }
  .hero-head h1 { font-size: clamp(1.6rem, 7.4vw, 2.4rem); }
  .hero-line-2 br { display: none; }
  .hero-line-3 { font-size: 1rem; }
  .hero-pitch { gap: 18px; }
  .scene-sectors .stage, .scene-hangar .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; align-content: start; padding-top: calc(var(--nav-h) + 8px); }
  .sector-map { max-height: 40vh; }
  .modes { gap: 10px; margin-top: 18px; }
  .mode span { font-size: 0.9rem; }
  /* The hull bleeds to the screen edges (it is trimmed to the ship, so the stage padding
     is the only thing between it and the glass) and the stickers grow with it: at their
     desktop share of the hull they drew ~20px wide and the whole beat went unseen. */
  .hangar-ship { align-self: center; width: calc(100% + 36px); margin-left: -18px; --dk: 1.7; }
  .decal { width: calc(var(--w) * var(--dk, 1)); }
  .hangar-facts { gap: 8px; margin-top: 16px; font-size: 0.92rem; }
  .hf { padding-left: 22px; }
  .hf::before { width: 9px; height: 9px; }
  .captains-heading .lede { font-size: 0.95rem; margin-top: 12px; }
  /* Sized off the height left under the heading, so the card never climbs over the lede. */
  .captain { width: clamp(180px, min(64vw, calc((100svh - 430px) * 0.66)), 300px); }
  .captain h3 { padding-top: 10px; font-size: 0.98rem; }
  .captain q { padding: 6px 16px 12px; font-size: 0.88rem; }
  .roster-cards { height: 190px; }
  .jump-copy { height: 70vh; }
  .jump-word-3 { top: 22%; }
  .jump-lede { top: 48%; width: min(34em, 100%); }
}
/* Short phones (and a phone's toolbar-down height): the stage cannot hold everything, so
   the least-needed lines go first. */
@media (max-width: 860px) and (max-height: 740px) {
  .hero-ship { top: 40%; }
  .hangar-facts { display: none; }
  .captain q { display: none; }
  .roster-card p { font-size: 0.95rem; }
}

/* ── motion preferences ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint span { animation: none; }
  .btn, .captain, .watch-tile, .watch-tile img, .roster-ship, .roster-card { transition: none; }
}

/* ── FLAT: the scenes as an ordinary page ────────────────────────────────── */
/* Phones (owner call 2026-09-29: the scroll-pinned story "can be jarring on a mobile")
   and reduced motion everywhere. site.js holds every scene at --p = 1 here (its `flat()`
   uses the same 860px breakpoint — change both together), so each beat shows its
   resting state; the rules below undo the sticky stages and bring back the few things
   whose resting state is "gone" (the hero's logo and headline, the jump's first words). */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .stage { position: relative; height: auto; min-height: 0; overflow: visible; }
  .scene .stage { padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(40px, 7vh, 80px); }

  /* hero: logo, kicker, ship, headline, pitch — one column, all at rest */
  .scene-hero .stage { padding-top: calc(var(--nav-h) + 12px); gap: 14px; justify-items: center; text-align: center; }
  .hero-copy { display: contents; }
  .hero-logo { order: 1; margin: 2vh auto 0; }
  .hero-kicker { order: 2; }
  .hero-ship { order: 3; position: relative; top: auto; left: auto; width: min(100%, 900px); transform: none; margin: -2vh 0; }
  .hero-head { order: 4; }
  .hero-pitch { order: 5; justify-items: center; }
  .hero-head, .hero-pitch { position: static; width: min(100%, 760px); }
  .hero-logo, .hero-kicker, .hero-line-1, .hero-line-2, .hero-line-3, .hero-cta { opacity: 1; transform: none; }
  .hero-cta { justify-content: center; }
  .scroll-hint { display: none; }

  /* roster: the cards as a list */
  .scene-roster .stage { grid-template-rows: none; gap: 24px; }
  .roster-ships { display: none; }
  .roster-cards { height: auto; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* .is-on / .is-off carry the crossfade's transforms; at rest there is no crossfade */
  .roster-card, .roster-card.is-on { position: static; opacity: 1; transform: none; width: auto; pointer-events: auto; }
  .roster-rail { display: none; }

  /* jump: the three words read as one line of verse */
  .jump-copy { height: auto; min-height: 0; display: grid; gap: 10px; }
  .jump-word, .jump-lede { position: static; }
  .jump-word-1, .jump-word-2 { opacity: 1; transform: none; letter-spacing: 0.02em; font-size: clamp(1.9rem, 5vw, 3.6rem); }
  .jump-word-3 { transform: none; }
  .jump-lede { transform: none; width: auto; margin: 14px auto 0; }

  .captain-strip { transform: none; width: auto; flex-wrap: wrap; justify-content: center; }
  /* nothing walks the list at rest, so all three modes are lit, not just the last */
  .mode { border-left-color: var(--cyan); }
}

/* Phones only: the ships come back beside their cards, and the captains are a strip you
   swipe yourself (touch-action on the strip: the page is pan-y only). With no stage
   height to fit, the short-screen trims above are lifted. */
@media (max-width: 860px) {
  .scene-roster .stage { display: flex; flex-direction: column; }
  .roster-ships, .roster-cards { display: contents; }
  .roster-heading { order: 0; }
  .roster-ship, .roster-ship.is-on, .roster-ship.is-off { position: static; width: 100%; height: auto; opacity: 1; transform: none; margin-bottom: -18px; }
  .roster-ship[data-ship="0"] { order: 1; } .roster-card[data-ship="0"] { order: 2; }
  .roster-ship[data-ship="1"] { order: 3; } .roster-card[data-ship="1"] { order: 4; }
  .roster-ship[data-ship="2"] { order: 5; } .roster-card[data-ship="2"] { order: 6; }
  .roster-ship[data-ship="3"] { order: 7; } .roster-card[data-ship="3"] { order: 8; }
  .roster-ship[data-ship="4"] { order: 9; } .roster-card[data-ship="4"] { order: 10; }
  .roster-card { margin-bottom: 26px; }

  .scene .stage { padding-top: 48px; padding-bottom: 32px; }
  .scene-hero .stage { padding-top: calc(var(--nav-h) + 12px); }
  .scene-captains .stage { gap: 22px; }
  .captain-strip {
    flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 18px; touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none; padding: 0 18px 6px; will-change: auto;
  }
  .captain-strip::-webkit-scrollbar { display: none; }
  .captain { width: min(68vw, 280px); scroll-snap-align: start; }
  .captain:hover { transform: none; }
  .captain q { display: block; }
  .hangar-facts { display: grid; }
}
/* The war card's headline (the real front) + busy counts (events, never people). */
.scene-war .h-side { font-weight: 900; }
.scene-war .h-vanguard { color: #8fbcff; text-shadow: 0 0 28px rgba(61, 140, 255, 0.5); }
.scene-war .h-ironsworn { color: #ff9b9b; text-shadow: 0 0 28px rgba(255, 82, 82, 0.5); }
.wc-busy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wc-busy li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--muted); font-size: 0.92rem; }
.wc-busy b { font-family: var(--display); font-weight: 900; font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wc-busy em { font-style: normal; font-size: 0.78rem; color: var(--cyan); margin-left: auto; font-variant-numeric: tabular-nums; }