/* Nova Arena (intellnova.ai): the landing, the legal pages and the 404. Launch v4 (docs/CLAUDE_DESIGN_PROMPT_NOVA_V4.md):
   a game's title screen, HUD and menus, with restraint. Tokens first: change a token, never a call site.
   Type: Unbounded 700 for headlines, game names and menu keys; Hanken Grotesk for reading and Nova's lines;
   JetBrains Mono for labels and numbers. Shapes: frames and keys are rectangles chamfered at the wordmark N's 53 deg
   (an 18 x 24 cut, 9 x 12 on keys); the O's ring is the counter; the V/A chevron is the only arrow.
   Motion: cubic-bezier(.2,.7,.2,1), transform and opacity only, none with prefers-reduced-motion; on the landing the
   page is scrubbed by the scroll (the last section of this file). Nova's console and everything only the landing
   uses live in assets/nova.css. */

:root {
  color-scheme: dark;
  --bg: #0b0b0a;
  --surface: #121211;
  --surface-2: #161614;
  --surface-3: #1d1d1b;
  --ink: #f4f3ee;
  --muted: #a4a299;
  --faint: #9a988f;
  --line: #ffffff14;
  --line-strong: #ffffff26;
  --accent: #5aa6e9;
  --on-accent: #08131f;
  --link: #73b6f0;
  --rim: #73b6f0;
  --gold: #e0c896;
  --err: #f29494;
  --dot: #ffffff0a;
  --glow: #5aa6e924;
  --field-line: #6f6d66;
  --media: #0e0e0c;
  --film-bg: var(--surface);
  --film-tint: 8%;
  --film-bloom: #5aa6e924;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --gutter: 16px;
  --top-h: 56px;
  --status-h: 0px;
  --chev: polygon(0 0, 36.4% 0, 100% 50%, 36.4% 100%, 0 100%, 63.6% 50%);
}

/* Paper: the light theme. Every text pair is AA in both themes (tools/verify-contrast in the work notes). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f5f0;
    --surface: #ffffff;
    --surface-2: #efeee8;
    --surface-3: #e7e6df;
    --ink: #151513;
    --muted: #4f4d47;
    --faint: #5f5d56;
    --line: #1514131a;
    --line-strong: #1514132e;
    --accent: #1f6fb8;
    --on-accent: #ffffff;
    --link: #1a62a6;
    --rim: #1f6fb8;
    --gold: #7a5a1c;
    --err: #a8322d;
    --dot: #15151312;
    --glow: #5aa6e92e;
    --field-line: #7f7d76;
    --film-bg: #efeee8;
    --film-tint: 14%;
    --film-bloom: #5aa6e93d;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f0;
  --surface: #ffffff;
  --surface-2: #efeee8;
  --surface-3: #e7e6df;
  --ink: #151513;
  --muted: #4f4d47;
  --faint: #5f5d56;
  --line: #1514131a;
  --line-strong: #1514132e;
  --accent: #1f6fb8;
  --on-accent: #ffffff;
  --link: #1a62a6;
  --rim: #1f6fb8;
  --gold: #7a5a1c;
  --err: #a8322d;
  --dot: #15151312;
  --glow: #5aa6e92e;
  --field-line: #7f7d76;
  --film-bg: #efeee8;
  --film-tint: 14%;
  --film-bloom: #5aa6e93d;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + var(--status-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--rim); outline-offset: 3px; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 80;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.star { fill: url(#ng); }
.wordmark { height: 15px; width: auto; color: var(--ink); }

/* ---------- keys: rectangles chamfered at 53 deg; a pressed key drops 1 px as light runs along its edge ---------- */
.btn {
  --cx: 9px;
  --cy: 12px;
  --run: var(--rim);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  background: var(--surface-3);
  color: var(--ink);
  font: 700 12px/1.25 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--run), transparent);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
.btn:active, .btn.is-pressed { transform: translateY(1px); text-decoration: none; }
.btn:active::after, .btn.is-pressed::after { animation: edge-run .45s var(--ease); }
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.btn.primary { --run: #ffffffd9; background: var(--accent); color: var(--on-accent); }
.btn.primary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 11px;
  background: currentColor;
  clip-path: var(--chev);
}
.btn.ghost { background: var(--surface-3); }
.btn.btn-lg { min-height: 52px; padding: 0 26px; font-size: 13px; --cx: 11px; --cy: 14px; }
@media (hover: hover) {
  .btn:hover { background: color-mix(in srgb, var(--surface-3) 80%, var(--ink) 20%); }
  .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink) 12%); }
}
.btn.is-done, .btn.is-done:hover, .btn[aria-disabled="true"], .btn:disabled {
  background: var(--surface-3);
  color: var(--muted);
  cursor: default;
  transform: none;
}
.btn.is-done::before, .btn[aria-disabled="true"]::before, .btn:disabled::before { display: none; }
@keyframes edge-run { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(100%); } }

/* ---------- frames: a 1 px rim around a matte panel, both chamfered; and the mono label tab that sits on one ---------- */
.frame {
  --cx: 18px;
  --cy: 24px;
  position: relative;
  isolation: isolate;
  background: var(--frame-rim, var(--line-strong));
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}
.frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--frame-bg, var(--surface));
  box-shadow: inset 0 1px 0 #ffffff0a;
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  margin: 0;
  padding: 0 30px 0 12px;
  background: var(--line-strong);
  color: var(--ink);
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
}

/* ---------- Nova's star: the attached star, a soft bloom, one thin orbit with a point of light ----------
   States (data-state on any [data-nova-star], or the console's own classes, assets/nova.css): idle breathes; listening
   narrows the bloom; thinking speeds the orbit; speaking pulses per word (.is-pulse); joined, and a tap (.is-ring),
   send out one ring. A drag sets --dx / --dy (at most 24 px). */
.nstar {
  --s: 24px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.nstar > * { position: absolute; inset: 0; pointer-events: none; }
.nstar-bloom {
  inset: calc(var(--s) * -1.6);
  border-radius: 50%;
  background: radial-gradient(closest-side, #5aa6e924, #5aa6e914 42%, #5aa6e900);
  transition: transform .5s var(--ease);
}
.nstar-orbit {
  inset: calc(var(--s) * -.575);
  border-radius: 50%;
  border: 1px solid #73b6f03d;
  animation: nstar-spin 14s linear infinite;
}
.nstar-orbit i {
  position: absolute;
  top: -2.5px;
  left: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #73b6f0;
  box-shadow: 0 0 8px 2px #5aa6e98c;
}
.nstar-ring { border-radius: 50%; border: 1px solid #73b6f0; opacity: 0; }
.nstar-core {
  width: 100%;
  height: 100%;
  fill: url(#ng);
  filter: drop-shadow(0 0 calc(var(--s) * .18) #5aa6e966);
  animation: nstar-breathe 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
.nstar[data-state="listening"] .nstar-bloom { transform: scale(.62); }
.nstar[data-state="thinking"] .nstar-orbit { animation-duration: 1.4s; }
.nstar[data-state="speaking"] .nstar-bloom, .nstar.is-voicing .nstar-bloom { transform: scale(1.08); }
.nstar[data-state="joined"] .nstar-ring { animation: nstar-ring .9s var(--ease) both; }
/* Off screen (assets/site.js), her light rests: nothing runs that nobody sees. */
.nstar.is-off * { animation-play-state: paused !important; }
/* The large stars carry a short trail behind the point on the orbit (it turns with the orbit). */
:is(.film, .closing, .pause) .nstar-orbit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #73b6f000 0 296deg, #73b6f05c 358deg, #73b6f000 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
@keyframes nstar-spin { to { transform: rotate(360deg); } }
@keyframes nstar-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes nstar-ring { 0% { opacity: .85; transform: scale(.7); } 100% { opacity: 0; transform: scale(3.2); } }

/* ---------- header: the lockup, ARENA, CLOSED BETA, the section menu (wide) or the MENU key, the theme key ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: clip;
}
.top-in {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--top-h);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand .nstar { --s: 18px; }
.brand .nstar-bloom { inset: calc(var(--s) * -.9); }
.brand .nstar-orbit { inset: calc(var(--s) * -.3); }
.brand .nstar-orbit i { width: 4px; height: 4px; top: -2px; left: calc(50% - 2px); }
.brand .wordmark { height: 15px; }
.arena { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.beta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.beta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.nav { display: none; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  color: var(--muted);
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.top .btn { flex: none; }
.theme { display: none; width: 44px; padding: 0; margin-left: auto; }
html.js .theme { display: inline-flex; }
.theme svg { width: 16px; height: 16px; }
.menu-key { padding: 0 14px; background: color-mix(in srgb, var(--surface-3) 82%, var(--ink) 18%); font-size: 11.5px; }
html:not(.js) .menu-key { margin-left: auto; }

/* The status line: published facts only. Phone: two lines under the header that scroll away. Wide: one line inside
   the sticky header (.status-in). */
.status {
  margin: 0;
  padding: 9px max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))) 10px;
  font: 500 11px/1.6 var(--mono);
  letter-spacing: .12em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.status span { display: block; }
.status-in { display: none; }

/* ---------- the pause menu (phone and tablet): full screen, a game's pause screen: numbered rows, the selected one lit,
   a chevron cursor, RESUME where MENU was, her light below ---------- */
.pause {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pause:target, .pause.is-open, .pause.is-closing { display: block; }
/* It clips what reaches past it (her bloom, the entrance's slab) without becoming a scroller: nothing in the menu
   can be scrolled sideways, by a finger or by the focus. */
.pause-in {
  position: relative;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
.pause-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-h);
  border-bottom: 1px solid var(--line);
}
.pause-head .wordmark { height: 15px; }
.pause-key { padding: 0 14px; background: color-mix(in srgb, var(--surface-3) 82%, var(--ink) 18%); font-size: 11.5px; }
.pause-list { counter-reset: p; list-style: none; margin: 0; padding: 6px 0 0; display: grid; }
.pause-list li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.pause-list li:last-child { border-bottom: 0; margin-top: 10px; }
/* The sections carry the same numbers as on the page (site.css .sec-head); the two actions and RESUME none. */
.pause-list li:nth-child(n+3):nth-child(-n+9) { counter-increment: p; }
.pause-list li::before { content: ""; flex: none; width: 34px; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--faint); }
.pause-list li:nth-child(n+3):nth-child(-n+9)::before { content: counter(p, decimal-leading-zero); content: counter(p, decimal-leading-zero) / ""; }
.pause-list a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 56px;
  color: var(--muted);
  font: 700 clamp(19px, 5.9vw, 26px)/1.1 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.pause-list a::before {
  content: "";
  flex: none;
  width: 11px;
  height: 15px;
  background: var(--rim);
  clip-path: var(--chev);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.pause-list a:hover::before, .pause-list a:focus-visible::before, .pause-list a.is-cursor::before { opacity: 1; transform: none; }
.pause-list a:is(:hover, :focus-visible, .is-cursor) { color: var(--ink); }
.pause-list a:focus-visible { outline-offset: 2px; }
.pause-list a.is-primary { color: var(--link); }
/* Joined: "Check your inbox", disabled (assets/nova.js takes its link away); the cursor passes it by. */
.pause-list a.is-done, .pause-list a.is-done:hover { color: var(--faint); cursor: default; }
.pause-list a.is-done::before { opacity: 0 !important; }
.pause-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-top: 30px;
}
.pause-status { font: 500 10.5px/1.7 var(--mono); letter-spacing: .12em; color: var(--muted); }
.pause-status span { display: block; }
.pause .nstar { --s: 56px; margin: 0 22px 14px 0; }
/* The entrance (motion allowed): a slab at the N's angle sweeps off with a seam of her light, the rows arrive one by
   one; closing, the screen fades out (assets/site.js). */
@media (prefers-reduced-motion: no-preference) {
  .pause.is-open .pause-in::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 240%;
    z-index: 2;
    background: var(--bg);
    box-shadow: -10px 0 18px -8px #5aa6e999;
    pointer-events: none;
    transform: skewX(-37deg) translateX(120%);
    animation: pause-wipe .32s var(--ease) backwards;
  }
  .pause.is-open .pause-list li { animation: pause-row .24s var(--ease) backwards; }
  .pause.is-open .pause-list li:nth-child(2) { animation-delay: .03s; }
  .pause.is-open .pause-list li:nth-child(3) { animation-delay: .06s; }
  .pause.is-open .pause-list li:nth-child(4) { animation-delay: .09s; }
  .pause.is-open .pause-list li:nth-child(5) { animation-delay: .12s; }
  .pause.is-open .pause-list li:nth-child(6) { animation-delay: .15s; }
  .pause.is-open .pause-list li:nth-child(7) { animation-delay: .18s; }
  .pause.is-open .pause-list li:nth-child(8) { animation-delay: .21s; }
  .pause.is-open .pause-list li:nth-child(9) { animation-delay: .24s; }
  .pause.is-open .pause-list li:nth-child(10) { animation-delay: .27s; }
  .pause.is-closing { pointer-events: none; animation: pause-out .18s var(--ease) forwards; }
}
@keyframes pause-wipe { from { transform: skewX(-37deg) translateX(0); } to { transform: skewX(-37deg) translateX(120%); } }
@keyframes pause-row { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes pause-out { to { opacity: 0; } }

/* ---------- the page: one column on a phone; wide, the left column reads while Nova's console stays on the right ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.stage > * { min-width: 0; }

/* The title screen. The film frame is her title card until the film exists; on a phone it is the first to shrink, so
   the h1 and her console stay within Safari's visible height. */
.hero { display: grid; gap: 16px; padding-top: 14px; }
.film {
  --cx: 18px;
  --cy: 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: clamp(132px, calc(100svh - 600px), calc((100vw - 2 * var(--gutter)) * .5628));
  max-height: 224px;
  background: var(--line-strong);
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}
.film::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--film-bg) calc(100% - var(--film-tint)), #5aa6e9 var(--film-tint)), var(--film-bg) 70%);
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}
/* Under the panel: only its 1 px rim shows. The ignition scales it out from the star, so the rims light outward. */
.film-rimlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(closest-side, var(--rim), color-mix(in srgb, var(--rim) 40%, transparent) 55%, transparent);
  opacity: .55;
}
.film-card { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.film-card > * { grid-area: 1 / 1; }
/* A title screen's key light: one line of her light through her, at the horizon. */
.film-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #73b6f026 30%, #73b6f040 50%, #73b6f026 70%, transparent);
  pointer-events: none;
}
/* With a mouse, her star and the faint wordmark part a little toward and away from the pointer (assets/site.js sets
   --px / --py, -1 to 1). */
.film-mark {
  width: 88%;
  height: auto;
  color: var(--ink);
  opacity: .055;
  translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -3px);
  transition: translate .45s var(--ease);
}
.film-dots {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 46%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 46%);
}
.film .nstar {
  --s: clamp(46px, 13vw, 62px);
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 6px);
  transition: transform .5s var(--ease), opacity .5s var(--ease), translate .45s var(--ease);
}
.film .nstar-bloom { background: radial-gradient(closest-side, var(--film-bloom), #5aa6e914 42%, #5aa6e900); }

/* Section and title type. The hero's title is typed by the script during the ignition (an aria-hidden overlay): the
   real text holds its space from the first frame, and without script or motion it is simply there. The section
   titles slide in with the scroll (the motion section below). */
.ttl {
  position: relative;
  margin: 0;
  font: 700 clamp(23px, 5.8vw, 44px)/1.08 var(--display);
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ttl-hero { font-size: clamp(27px, 7.9vw, 64px); line-height: 1.04; letter-spacing: -.012em; }
.ttl.is-armed, .ttl.is-typing { color: transparent; }
.ttl-type {
  position: absolute;
  inset: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0;
  pointer-events: none;
}
.ttl-caret {
  display: inline-block;
  width: .52em;
  height: .86em;
  margin-left: .04em;
  vertical-align: -.06em;
  background: var(--rim);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.sec { display: grid; gap: 32px; align-content: start; padding-top: 96px; }
.sec-head { display: grid; gap: 12px; max-width: 46em; }
/* A HUD index over each title: the section's number and a short rule (the pause menu numbers them the same). */
.stage { counter-reset: sec; }
.sec-head::before {
  content: counter(sec, decimal-leading-zero);
  content: counter(sec, decimal-leading-zero) / "";
  counter-increment: sec;
  justify-self: start;
  padding-right: 46px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .14em;
  color: var(--faint);
  background: linear-gradient(var(--line-strong), var(--line-strong)) 100% 50% / 32px 1px no-repeat;
}
.sec-line { font-size: 18px; line-height: 1.45; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.idx { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }

/* Her answer at the end of each section: the key it answers, then her line with its light edge, her star and NOVA. */
.said { display: grid; gap: 10px; max-width: 640px; }
.said-key {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1.45 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.said-key::before { content: ""; flex: none; width: 7px; height: 10px; background: var(--rim); clip-path: var(--chev); }
.said-text + .said-key { margin-top: 14px; }
.said-text {
  padding-left: 16px;
  font-size: 17px;
  line-height: 1.55;
  background: linear-gradient(#73b6f0, #4f9fe6 55%, #4f9fe600) 0 3px / 2px calc(100% - 6px) no-repeat;
}
/* Several answers in one place (the cash section): one light edge and one NOVA for all of them. */
.said-group { padding-left: 16px; background: linear-gradient(#73b6f0, #4f9fe6 55%, #4f9fe600) 0 3px / 2px calc(100% - 6px) no-repeat; }
.said-group .said-text { padding-left: 0; background: none; }
.said-group .said-text::before { display: none; }
.said-text::before, .said-group::before, .nova-msg.from-nova > .nova-text::before {
  content: "Nova";
  content: "Nova" / "";
  display: block;
  margin-bottom: 6px;
  padding-left: 18px;
  font: 500 11px/16px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2373b6f0'/%3E%3Cstop offset='1' stop-color='%234f9fe6'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' transform='translate(1 1)' d='M12 1.6c.4 4.9 1.6 8.2 3.8 10s5.1 2.4 6.6 2.4c-4.9.4-8.2 1.6-10 3.8s-2.4 5.1-2.4 6.6c-.4-4.9-1.6-8.2-3.8-10S1.5 14.4 0 14.4c4.9-.4 8.2-1.6 10-3.8S11.6 3.1 12 1.6Z'/%3E%3C/svg%3E") 0 50% / 12px 12px no-repeat;
}

/* What it is: four tiles; they turn into place with the scroll (the motion section). */
.tiles { display: grid; gap: 12px; }
.tile { display: grid; gap: 10px; align-content: start; min-height: 168px; padding: 22px 22px 26px; }
.tile h3 { font-size: 20px; line-height: 1.25; }
.tile p:not(.idx) { font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Select game. Phone: a snap row of tiles. Wide: three tiles, or the live stage (data-stage="live"). */
.games {
  display: flex;
  gap: 10px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.games::-webkit-scrollbar { display: none; }
.game {
  --frame-bg: var(--surface);
  container-type: inline-size;
  flex: 0 0 84%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .3s var(--ease);
}
.game-media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 11;
  margin: 1px 1px 0;
  overflow: hidden;
  background: var(--media);
}
.game-media video { width: 100%; height: 100%; object-fit: cover; }
.game[data-game="zirko"] .game-media video { object-position: 50% 80%; }
.game-cap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 7px 26px 7px 12px;
  background: #0b0b0aeb;
  color: #f4f3ee;
  font: 500 10.5px/1.35 var(--mono);
  letter-spacing: .1em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.game-cap span { display: block; }
.game-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 22px; }
/* The mode line is a HUD tab with its own backing: it stays readable whatever the clip shows behind it. */
.game-mode {
  align-self: flex-start;
  padding: 5px 22px 5px 10px;
  background: #0b0b0aeb;
  color: #d6d4cc;
  font: 500 12px/1.45 var(--mono);
  letter-spacing: .04em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.game-name {
  font: 700 clamp(30px, 12cqi, 44px)/.98 var(--display);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.game-one { font-size: 16px; line-height: 1.5; }
.game-facts { list-style: none; margin: auto 0 0; padding: 6px 0 0; display: grid; gap: 6px; }
.game-facts li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.game-facts li span { text-wrap: pretty; }
.game-facts b { flex: none; min-width: 72px; font: 500 11px/2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.game-pick {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}
.game:has(.game-pick:focus-visible) { outline: 2px solid var(--rim); outline-offset: -4px; }
.game-soon {
  flex: 0 0 52%;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 20px 26px;
  --frame-rim: var(--line);
}
.soon-o { width: 26px; height: 26px; border-radius: 50%; border: 6px solid var(--line-strong); }
.game-soon .game-name { font-size: 24px; color: var(--muted); letter-spacing: 0; }
.soon-badge { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* The qualifier the tiles need: nothing here is open yet. */
.games-note { max-width: 40em; font-size: 15px; line-height: 1.5; color: var(--muted); }
/* The stage's cut from one game to the other (assets/site.js): a slab at the N's angle with a seam of her light. */
.game-wipe { display: none; }
/* A phone's tile is a small stage: the gameplay on top, its lower part fading into the tile, and the game's name over
   that fade, the rest under it on the solid panel. Dark in both themes, as the stage is (the clip is dark). */
@media (max-width: 999.98px) {
  .game:not(.game-soon) { --frame-bg: #0e0e0c; color: #f4f3ee; }
  .game:not(.game-soon) .game-media {
    aspect-ratio: 4 / 3;
    clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, 0 100%);
  }
  .game:not(.game-soon) .game-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #0e0e0c 0%, #0e0e0cd9 22%, #0e0e0c66 46%, #0e0e0c00 70%);
  }
  .game:not(.game-soon) .game-info { position: relative; z-index: 2; margin-top: -92px; padding-top: 0; }
  .game:not(.game-soon) .game-one { color: #f4f3ee; }
  .game:not(.game-soon) .game-facts li { color: #d6d4cc; }
  .game:not(.game-soon) .game-facts b { color: #b9b7ae; }
  .game:not(.game-soon) .game-name { font-size: clamp(36px, 14cqi, 56px); line-height: .92; letter-spacing: -.035em; }
}

/* Cash play: the example room. Its keys switch 2 to 5 seats with :has; without :has they are not shown. */
.room { display: grid; justify-items: start; }
.room-frame { justify-self: stretch; display: grid; gap: 26px; padding: 20px 18px 22px; }
.room-size { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; min-width: 0; }
.room-size legend { float: left; max-width: 22em; padding: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.room-keys { display: flex; gap: 6px; }
.room-key { position: relative; display: block; cursor: pointer; }
.room-key input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.room-key span {
  --cx: 8px;
  --cy: 11px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--surface-3);
  color: var(--ink);
  font: 500 16px/1 var(--mono);
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.room-key input:checked + span { background: var(--accent); color: var(--on-accent); }
.room-key input:focus-visible + span { outline: 2px solid currentColor; outline-offset: -5px; }
@supports not selector(:has(*)) { .room-size { display: none; } }

.room-flow { --n: 4; --seat: 52px; --gap: 8px; display: grid; justify-items: center; }
.room-seats { display: flex; gap: var(--gap); }
.seat {
  --cx: 8px;
  --cy: 11px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--seat);
  height: var(--seat);
  background: var(--line-strong);
  font: 500 15px/1 var(--mono);
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}
.seat::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--surface-2);
  clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}
.seat { isolation: isolate; }
.seat b { position: absolute; left: 6px; top: 5px; font: 500 10.5px/1 var(--mono); color: var(--faint); }
/* The wires: one from each seat down to the bus (one element, a repeating line per seat); the flow runs a point of
   light down each (.room-wires::after, one transform, scrubbed by the scroll: the motion section). */
.room-wires {
  position: relative;
  width: calc((var(--n) - 1) * (var(--seat) + var(--gap)) + 1px);
  height: 22px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(var(--seat) + var(--gap)));
}
.room-wires::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -4px;
  height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 .5px, var(--ink) .5px 4.5px, transparent 4.5px calc(var(--seat) + var(--gap)));
  opacity: 0;
}
.room-bus { width: calc((var(--n) - 1) * (var(--seat) + var(--gap)) + 1px); height: 1px; background: var(--line-strong); }
.room-stem { position: relative; width: 1px; height: 22px; background: var(--line-strong); }
.room-stem i {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 4px;
  height: 4px;
  background: var(--ink);
  opacity: 0;
}
/* The O of the wordmark (inner / outer 0.61), drawn matte with 1 px rims: never a coin. The flow lights it briefly
   (its ::after). */
.room-o {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent calc(61% - 1.5px), var(--line-strong) calc(61% - .5px) 61%, var(--surface-3) calc(61% + .5px) calc(100% - 1.5px), var(--line-strong) calc(100% - .5px));
  font: 500 15px/1 var(--mono);
}
.room-o::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent calc(61% - .5px), color-mix(in srgb, var(--ink) 45%, transparent) calc(61% + .5px) calc(100% - .5px), transparent);
  opacity: 0;
  pointer-events: none;
}
.room-o-label { margin-top: 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; color: var(--muted); }
.room-stem-out { margin-top: 10px; }
.room-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 10px;
  width: 100%;
  max-width: 440px;
  padding-top: 22px;
}
.room-split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 30%;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
}
.room-fee, .room-win { --cx: 9px; --cy: 12px; --frame-bg: var(--surface-2); display: grid; gap: 6px; justify-items: center; padding: 14px 10px; text-align: center; }
/* The two points of light of the split: each rides its own full-width rail, so a translate in percent of the rail puts it
   at the fee (20 %) or the winner (70 %), where the bracket's legs are. */
.room-pt { position: absolute; left: 0; right: 0; top: 0; height: 4px; opacity: 0; pointer-events: none; }
.room-pt i { position: absolute; left: calc(50% - 2px); top: -2px; width: 4px; height: 4px; background: var(--ink); }
.room-fee { --frame-rim: var(--line-strong); }
.room-fee .room-v { color: var(--muted); }
.room-win { --frame-rim: var(--ink); }
.room-fee p:first-child, .room-win p:first-child { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; color: var(--muted); }
.room-v { font: 500 18px/1 var(--mono); }
.room-win .room-v { font-size: 22px; }
.room-table { width: 100%; border-collapse: collapse; font: 500 13.5px/1.4 var(--mono); }
.room-table td { padding: 12px 0; border-top: 1px solid var(--line-strong); color: var(--muted); }
.room-table td:last-child { text-align: right; color: var(--ink); white-space: nowrap; padding-left: 12px; }
.room-table tr:last-child td { color: var(--ink); }
.room-table tr:last-child td:last-child { font-weight: 500; }
.room-note { font-size: 15px; line-height: 1.5; color: var(--muted); }
/* The seat count: 4 by default; :has follows the checked key. */
.room [data-n] { display: none; }
.room [data-n="4"] { display: inline; }
.room .seat[data-seat="5"] { display: none; }
.room:has(input[value="2"]:checked) { --n: 2; }
.room:has(input[value="3"]:checked) { --n: 3; }
.room:has(input[value="5"]:checked) { --n: 5; }
.room:has(input[value="2"]:checked) .room-flow { --n: 2; }
.room:has(input[value="3"]:checked) .room-flow { --n: 3; }
.room:has(input[value="5"]:checked) .room-flow { --n: 5; }
.room:has(input[value="2"]:checked) [data-n="4"], .room:has(input[value="3"]:checked) [data-n="4"], .room:has(input[value="5"]:checked) [data-n="4"] { display: none; }
.room:has(input[value="2"]:checked) [data-n="2"], .room:has(input[value="3"]:checked) [data-n="3"], .room:has(input[value="5"]:checked) [data-n="5"] { display: inline; }
.room:has(input[value="2"]:checked) .seat:is([data-seat="3"], [data-seat="4"]) { display: none; }
.room:has(input[value="3"]:checked) .seat[data-seat="4"] { display: none; }
.room:has(input[value="5"]:checked) .seat[data-seat="5"] { display: grid; }

.where { display: grid; gap: 16px; }
.age-mark { justify-self: start; height: 30px; font-size: 14px; letter-spacing: .08em; }
.where-line { font-size: 17px; line-height: 1.5; }
.countries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
  column-gap: 20px;
  font: 500 13.5px/1.4 var(--mono);
}
.countries li { padding: 11px 0; border-top: 1px solid var(--line-strong); }

/* Fair play */
.fair { display: grid; gap: 26px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fair-item { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.fair-item h3 { font-size: 20px; line-height: 1.25; }
.fair-item p:not(.idx) { font-size: 16px; line-height: 1.55; color: var(--muted); }

/* The first 100: 100 outlined cells, never filled (they draw in with the scroll, row by row), and the $10 beside the
   published lines. */
.hundred { display: grid; place-items: center; width: 100%; max-width: 560px; }
.hundred > * { grid-area: 1 / 1; }
.hundred-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: 100%; }
.hundred-grid i { aspect-ratio: 1; border: 1px solid var(--line-strong); }
.hundred-plate {
  --frame-bg: var(--bg);
  display: grid;
  gap: 14px;
  width: min(100% - 32px, 420px);
  padding: 22px 22px 24px;
}
.hundred-plate p { font-size: 16px; line-height: 1.5; }
.hundred-plate .muted { color: var(--muted); }
.hundred-plate .ten { font: 500 clamp(60px, 18vw, 96px)/1 var(--mono); color: var(--gold); letter-spacing: -.02em; }

/* Warm-up: a frame for the toy. Her star rests above a floor, the dot grid only inside her light. */
.toy { --frame-bg: var(--surface); height: 320px; overflow: hidden; touch-action: manipulation; }
.toy::after {
  content: "";
  position: absolute;
  inset: 1px;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0, transparent 150px);
  mask-image: radial-gradient(circle at 50% 42%, #000 0, transparent 150px);
  pointer-events: none;
}
.toy-floor { position: absolute; left: 1px; right: 1px; bottom: 56px; height: 1px; background: var(--line-strong); }
.toy-light { position: absolute; left: 50%; top: 42%; z-index: 1; display: grid; transform: translate(-50%, -50%); }
.toy .nstar { --s: 40px; }
.toy-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
html.js .toy[role="button"] { cursor: pointer; }
.toy:focus-visible { outline: 2px solid var(--rim); outline-offset: -6px; }
.toy.is-near:not(.is-played) .nstar-ring { animation: toy-cue 2.4s var(--ease) 1.2s infinite; }
@keyframes toy-cue { 0% { opacity: .85; transform: scale(.7); } 45%, 100% { opacity: 0; transform: scale(3.2); } }

/* Questions */
.faq { max-width: 820px; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 11px;
  background: var(--rim);
  clip-path: var(--chev);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq details p { padding: 0 0 18px 22px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.faq details p a { display: inline-block; min-height: 44px; padding: 12px 0; box-sizing: border-box; }

/* The closing: Nova large, the line, the way back to her. */
.closing {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px var(--gutter) 112px;
  text-align: center;
  overflow: hidden;
  overflow: clip;
}
.closing .nstar { --s: 88px; margin: 56px 0 50px; }
.closing .nstar-bloom { inset: calc(var(--s) * -2.2); }
.closing h2 { font: 700 clamp(24px, 6vw, 52px)/1.08 var(--display); letter-spacing: -.01em; text-transform: uppercase; max-width: 18em; text-wrap: balance; }
/* The counter, a read-only mirror of the console's (assets/nova.js): its O ring and its line, or nothing. */
.closing-count { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin-top: -18px; }
.closing-ring { flex: none; width: 64px; height: 64px; }
.closing-count .nova-count-line { max-width: none; font-size: 15px; line-height: 1.4; color: var(--ink); }
.closing-count .nova-timer { flex-basis: 100%; text-align: center; }
.closing p { max-width: 32em; color: var(--muted); }
.closing p a { display: inline-block; min-height: 44px; padding: 12px 0; box-sizing: border-box; }
.closing .btn { margin-top: 6px; }
.closing [hidden] { display: none !important; }

/* Footer: our legal lines, in mono. */
.foot { border-top: 1px solid var(--line); }
.foot-in {
  display: grid;
  gap: 26px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 36px var(--gutter) calc(48px + env(safe-area-inset-bottom));
  font: 400 12.5px/1.75 var(--mono);
  color: var(--muted);
}
.foot-co { display: grid; gap: 2px; align-content: start; }
.foot .brand { margin-bottom: 10px; gap: 10px; }
.foot .brand .star { width: 22px; height: 22px; }
.foot strong { color: var(--ink); font-weight: 500; }
.foot-co p > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: -10px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.foot .adult { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.age { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--line-strong); font: 500 12px/1.2 var(--mono); color: var(--ink); }
.foot .small { color: var(--faint); }

/* ---------- motion with the scroll (the landing): the page is scrubbed by the scroll itself ----------
   Every block enters as it comes up from the bottom (it rises, scales and fades in from depth, the parts of a section
   staggered) and leaves as it goes under the header (it drifts up and fades back); the hero's layers, the game tiles,
   the example room's flow, the first-100 grid and the header's progress line follow the scroll position and run
   backwards when it does. Nothing waits on a timer, and nothing is hidden while the page stands still: a block that
   has come up is simply there. The browser drives it (animation-timeline; html.sv-css, set by assets/theme.js before
   the first paint) or, without that, the script scrubs the same animations, paused (html.sv-js, assets/site.js motion).
   Her star's flight from the film into the header is the script's (the same frame loop). None of it with
   prefers-reduced-motion, none without script. The exits are measured from under the sticky header (--head).
   Transform and opacity only; the durations are the 1 s of a paused animation, which a scroll timeline spreads over
   its range. */
:root { --head: calc(var(--top-h) + var(--status-h)); }
@keyframes sv-in { from { opacity: 0; transform: translateY(36px) scale(.96); } }
@keyframes sv-in-flat { from { opacity: 0; transform: translateY(30px); } }
@keyframes sv-card { from { opacity: 0; transform: perspective(1200px) translateY(46px) rotateX(7deg) scale(.95); } }
@keyframes sv-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes sv-title { from { opacity: 0; transform: translateX(-32px); } }
@keyframes sv-idx { from { opacity: 0; transform: translateX(26px); } }
@keyframes sv-idx-drift { from { translate: 0 14px; } to { translate: 0 -14px; } }
@keyframes sv-out { to { opacity: .35; transform: translateY(-30px); } }
@keyframes sv-line { to { transform: scaleX(1); } }
@keyframes hero-mark { to { transform: translateY(72px) scale(1.06); } }
@keyframes hero-dots { to { transform: translateY(36px); } }
@keyframes hero-line { to { transform: translateY(-44px); } }
@keyframes hero-rim { to { transform: translateY(54px) scale(1.12); } }
@keyframes game-l { from { opacity: 0; transform: translateX(-56px); } }
@keyframes game-r { from { opacity: 0; transform: translateX(56px); } }
@keyframes game-zoom { to { transform: scale(1.09); } }
@keyframes room-fall { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(var(--fall, 18px)); opacity: 0; } }
@keyframes room-light { 0% { opacity: 0; } 50% { opacity: .85; } 100% { opacity: 0; } }
@keyframes room-pt-fee { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(-30%, 0); opacity: 1; } 88% { transform: translate(-30%, 18px); opacity: 1; } 100% { transform: translate(-30%, 21px); opacity: 0; } }
@keyframes room-pt-win { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(20%, 0); opacity: 1; } 88% { transform: translate(20%, 18px); opacity: 1; } 100% { transform: translate(20%, 21px); opacity: 0; } }
@keyframes room-peel { 0%, 100% { transform: none; opacity: 1; } 45% { transform: translateY(4px); opacity: .55; } }
@keyframes room-prize { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes hund-cell { from { opacity: 0; transform: scale(.3); } }
@keyframes hund-plate { from { opacity: 0; transform: translateY(16px); } }
@keyframes hund-ten { from { opacity: 0; transform: translateY(30px); } }

/* The header's progress line and the big type's lean with the scroll's speed (--vel, -1 to 1, assets/site.js: at most
   2 degrees, settling back when the page stands still); the docked star's bloom opens with it too (--spd). */
.top-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--rim), #73b6f0a6);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.sec-head, .ttl-hero, .game-name, .ten, .closing h2 { transform: skewX(calc(var(--vel, 0) * -2deg)); }
.top.is-docked .brand .nstar-bloom { transform: scale(calc(1 + var(--spd, 0) * .7)); }

/* Her flight (assets/site.js dock): a star over the page, moved along the path by the script's --fx / --fy, its size
   --fs, stretched along the path (--fa, --fst) and lit (--fg) by the scroll's speed, her orbit turning around her,
   with four points of her light behind it that show only while the page moves. */
.nflight { position: fixed; left: 0; top: 0; z-index: 31; width: 0; height: 0; opacity: var(--fo, 1); pointer-events: none; }
.nflight[hidden] { display: none; }
.nflight-star {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fs, 24px);
  height: var(--fs, 24px);
  transform: translate(calc(var(--fx, 0px) - 50%), calc(var(--fy, 0px) - 50%));
  will-change: transform;
}
.nflight-star svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: url(#ng);
  filter: drop-shadow(0 0 calc(var(--fs, 24px) * .18) #5aa6e966);
  transform: rotate(var(--fa, 0deg)) scale(calc(1 + var(--fst, 0)), calc(1 - var(--fst, 0) * .5)) rotate(calc(var(--fa, 0deg) * -1));
}
.nflight-orbit {
  position: absolute;
  inset: -57.5%;
  border-radius: 50%;
  border: 1px solid #73b6f03d;
  animation: nstar-spin 14s linear infinite;
}
.nflight-orbit i {
  position: absolute;
  top: -2.5px;
  left: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #73b6f0;
  box-shadow: 0 0 8px 2px #5aa6e98c;
}
.nflight-bloom {
  position: absolute;
  inset: -120%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #5aa6e94d, #5aa6e900);
  transform: scale(calc(1 + var(--fg, 0) * .9));
  opacity: calc(.6 + var(--fg, 0) * .6);
}
.nflight-t {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #73b6f0;
  box-shadow: 0 0 6px 1px #5aa6e98c;
  transform: translate(calc(var(--tx, 0px) - 50%), calc(var(--ty, 0px) - 50%)) scale(var(--ts, 1));
  opacity: var(--to, 0);
}

/* The same animations for both paths: paused and scrubbed by the script (html.sv-js), or on a scroll timeline
   (html.sv-css, below). The entrances fill backwards only and the exits forwards only, so the two never fight over
   an element between them: in between, the element is simply in its own style. */
html.sv-css .sv, html.sv-js .sv { animation: sv-in 1s var(--ease) backwards, sv-out 1s linear forwards; }
html.sv-css .sv-flat, html.sv-js .sv-flat { animation: sv-in-flat 1s var(--ease) backwards, sv-out 1s linear forwards; }
html.sv-css .sv-card, html.sv-js .sv-card { animation: sv-card 1s var(--ease) backwards, sv-out 1s linear forwards; }
html.sv-css .sv-pop, html.sv-js .sv-pop { animation: sv-pop 1s var(--ease) backwards, sv-out 1s linear forwards; }
html.sv-css .sv-x, html.sv-js .sv-x { animation: sv-out 1s linear forwards; }
/* A section's head: the title slides in from the left, its index from the right (and drifts on at its own pace), the
   line rises after them. */
html.sv-css .sec-head > .ttl, html.sv-js .sec-head > .ttl { animation: sv-title 1s var(--ease) backwards; }
html.sv-css .sec-head::before, html.sv-js .sec-head::before { animation: sv-idx 1s var(--ease) backwards, sv-idx-drift 1s linear both; }
html.sv-css .sec-line, html.sv-js .sec-line { animation: sv-in 1s var(--ease) backwards; --sv-d: 60px; }
/* Cards one after the other: each starts a little further up the way in than the one before (--sv-d, a length along
   the entry; the script reads the same value). */
.tiles .tile:nth-child(2), .fair .fair-item:nth-child(2) { --sv-d: 40px; }
.tiles .tile:nth-child(3), .fair .fair-item:nth-child(3) { --sv-d: 80px; }
.tiles .tile:nth-child(4) { --sv-d: 120px; }
/* The hero's layers at their own depths while the page starts to move: the faint wordmark and the dot grid lag, the
   horizon line runs ahead, the rim light sinks; her star flies (the script). */
html.sv-css .film-mark, html.sv-js .film-mark { animation: hero-mark 1s linear both; }
html.sv-css .film-dots, html.sv-js .film-dots { animation: hero-dots 1s linear both; }
html.sv-css .film-card::after, html.sv-js .film-card::after { animation: hero-line 1s linear both; }
html.sv-css .film-rimlight, html.sv-js .film-rimlight { animation: hero-rim 1s linear both; }
html.sv-css .top-line, html.sv-js .top-line { animation: sv-line 1s linear both; }
/* Select game: the tiles slide in from opposite sides as the row comes up (the row's own timeline, --games, which the
   phone's sideways scroller cannot give its children), and every clip zooms a little with the row's progress. */
.games { view-timeline: --games block; view-timeline-inset: var(--head) 0px; }
html.sv-css .game[data-game="glomo"], html.sv-js .game[data-game="glomo"] { animation: game-l 1s var(--ease) backwards; }
html.sv-css .game[data-game="zirko"], html.sv-js .game[data-game="zirko"], html.sv-css .game-soon, html.sv-js .game-soon { animation: game-r 1s var(--ease) backwards; }
html.sv-css .game video, html.sv-js .game video { animation: game-zoom 1s linear both; }
/* The example room's flow, on the flow's own timeline (--room): the $1 entries run down the wires, the stem carries
   them into the O, which lights; the stem out, then the split's two points, one to the fee and one to the winner; the
   fee peels and the winner's amount swells. Scrolling up runs it back. The amounts never change. */
.room-flow { view-timeline: --room block; view-timeline-inset: var(--head) 0px; }
html.sv-css .room-wires::after, html.sv-js .room-wires::after { animation: room-fall 1s linear both; --fall: 26px; }
html.sv-css .room-stem i, html.sv-js .room-stem i { animation: room-fall 1s linear both; }
html.sv-css .room-o::after, html.sv-js .room-o::after { animation: room-light 1s linear both; }
html.sv-css .room-pt-fee, html.sv-js .room-pt-fee { animation: room-pt-fee 1s linear both; }
html.sv-css .room-pt-win, html.sv-js .room-pt-win { animation: room-pt-win 1s linear both; }
html.sv-css .room-fee, html.sv-js .room-fee { animation: room-peel 1s var(--ease) both; }
html.sv-css .room-win .room-v, html.sv-js .room-win .room-v { animation: room-prize 1s var(--ease) both; }
/* The first 100: the outlines draw in row by row as the grid comes up (never filled or lit), then the plate and its
   $10 rise over them. */
.hundred { view-timeline: --hundred block; view-timeline-inset: var(--head) 0px; }
html.sv-css .hundred-grid i, html.sv-js .hundred-grid i { animation: hund-cell 1s var(--ease) both; }
html.sv-css .hundred-plate, html.sv-js .hundred-plate { animation: hund-plate 1s var(--ease) both; }
html.sv-css .ten, html.sv-js .ten { animation: hund-ten 1s var(--ease) both; }
/* The script's path: every one of them paused, and set to the scroll each frame. */
html.sv-js .sv, html.sv-js .sv-flat, html.sv-js .sv-card, html.sv-js .sv-pop, html.sv-js .sv-x, html.sv-js .sec-head > .ttl, html.sv-js .sec-head::before, html.sv-js .sec-line, html.sv-js .film-mark, html.sv-js .film-dots, html.sv-js .film-card::after, html.sv-js .film-rimlight, html.sv-js .top-line, html.sv-js .game, html.sv-js .game video, html.sv-js .room-wires::after, html.sv-js .room-stem i, html.sv-js .room-o::after, html.sv-js .room-pt, html.sv-js .room-fee, html.sv-js .room-win .room-v, html.sv-js .hundred-grid i, html.sv-js .hundred-plate, html.sv-js .ten { animation-play-state: paused; }

/* The browser's path: each animation on a scroll timeline, over its range of the element's way through the screen
   (entry: from its top at the bottom edge; exit: from its top under the header; cover: both), or of the page (the
   hero's layers and the header's line). A short block finishes 200 px up the way in, a card 240 px, a tall one
   320 px: all of them well before the middle of the screen. */
@supports (animation-timeline: view()) {
  html.sv-css .sv, html.sv-css .sv-flat, html.sv-css .sv-card, html.sv-css .sv-pop, html.sv-css .sv-x, html.sv-css .sec-head > .ttl, html.sv-css .sec-head::before, html.sv-css .sec-line {
    animation-timeline: view(block var(--head) 0px);
  }
  html.sv-css .sv, html.sv-css .sv-flat { animation-range: entry var(--sv-d, 0px) entry calc(var(--sv-d, 0px) + 200px), exit 0% exit 100%; }
  html.sv-css .sv-card, html.sv-css .sv-pop { animation-range: entry var(--sv-d, 0px) entry calc(var(--sv-d, 0px) + 240px), exit 0% exit 100%; }
  html.sv-css .sv-tall { animation-range-end: entry 320px, exit 100%; }
  html.sv-css .sv-x { animation-range: exit 0% exit 100%; }
  html.sv-css .sec-head > .ttl { animation-range: entry 0px entry 200px; }
  html.sv-css .sec-head::before { animation-range: entry 0px entry 160px, cover 0% cover 100%; }
  html.sv-css .sec-line { animation-range: entry var(--sv-d, 0px) entry calc(var(--sv-d, 0px) + 200px); }
  html.sv-css .film-mark, html.sv-css .film-dots, html.sv-css .film-card::after, html.sv-css .film-rimlight { animation-timeline: scroll(root); animation-range: 0px 60vh; }
  html.sv-css .top-line { animation-timeline: scroll(root); }
  html.sv-css .game, html.sv-css .game video { animation-timeline: --games; }
  html.sv-css .game[data-game="glomo"] { animation-range: entry 0% entry 90%; }
  html.sv-css .game[data-game="zirko"] { animation-range: entry 10% entry 100%; }
  html.sv-css .game-soon { animation-range: entry 20% entry 110%; }
  html.sv-css .game video { animation-range: cover 0% cover 100%; }
  html.sv-css .room-wires::after, html.sv-css .room-stem i, html.sv-css .room-o::after, html.sv-css .room-pt, html.sv-css .room-fee, html.sv-css .room-win .room-v { animation-timeline: --room; }
  html.sv-css .room-wires::after { animation-range: cover 8% cover 18%; }
  html.sv-css .room-stem i { animation-range: cover 17% cover 23%; }
  html.sv-css .room-o::after { animation-range: cover 21% cover 29%; }
  html.sv-css .room-stem-out i { animation-range: cover 28% cover 34%; }
  html.sv-css .room-pt { animation-range: cover 33% cover 43%; }
  html.sv-css .room-fee { animation-range: cover 40% cover 48%; }
  html.sv-css .room-win .room-v { animation-range: cover 42% cover 50%; }
  html.sv-css .hundred-grid i, html.sv-css .hundred-plate, html.sv-css .ten { animation-timeline: --hundred; }
  html.sv-css .hundred-grid i:nth-child(-n+10) { animation-range: entry 6% entry 42%; }
  html.sv-css .hundred-grid i:nth-child(n+11):nth-child(-n+20) { animation-range: entry 11% entry 47%; }
  html.sv-css .hundred-grid i:nth-child(n+21):nth-child(-n+30) { animation-range: entry 16% entry 52%; }
  html.sv-css .hundred-grid i:nth-child(n+31):nth-child(-n+40) { animation-range: entry 21% entry 57%; }
  html.sv-css .hundred-grid i:nth-child(n+41):nth-child(-n+50) { animation-range: entry 26% entry 62%; }
  html.sv-css .hundred-grid i:nth-child(n+51):nth-child(-n+60) { animation-range: entry 31% entry 67%; }
  html.sv-css .hundred-grid i:nth-child(n+61):nth-child(-n+70) { animation-range: entry 36% entry 72%; }
  html.sv-css .hundred-grid i:nth-child(n+71):nth-child(-n+80) { animation-range: entry 41% entry 77%; }
  html.sv-css .hundred-grid i:nth-child(n+81):nth-child(-n+90) { animation-range: entry 46% entry 82%; }
  html.sv-css .hundred-grid i:nth-child(n+91) { animation-range: entry 51% entry 87%; }
  html.sv-css .hundred-plate { animation-range: entry 45% entry 85%; }
  html.sv-css .ten { animation-range: entry 55% entry 95%; }
}
/* On paper every block is simply there, whether or not it was scrolled to. */
@media print {
  .sv, .sv-flat, .sv-card, .sv-pop, .sv-x, .sec-head > .ttl, .sec-head::before, .sec-line, .film-mark, .film-dots, .film-card::after, .film-rimlight, .game, .game video, .room-wires::after, .room-stem i, .room-o::after, .room-pt, .room-fee, .room-win .room-v, .hundred-grid i, .hundred-plate, .ten { animation: none !important; }
  .ttl.is-armed, .ttl.is-typing { color: inherit; }
  .ttl-type, .top-line, .nflight { display: none; }
  .sec-head, .ttl-hero, .game-name, .ten, .closing h2 { transform: none; }
}

/* ---------- the legal pages ---------- */
.doc { padding: 40px var(--gutter) 80px; }
.doc .wrap { max-width: 780px; margin: 0 auto; }
.doc .crumbs { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.doc .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.doc h1 { margin: 18px 0 12px; font: 700 clamp(28px, 7vw, 44px)/1.08 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.doc .meta { font: 400 13px/1.5 var(--mono); color: var(--faint); }
.doc .notice { margin-top: 20px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--muted); font-size: 15px; }
.doc .toc { margin: 28px 0 8px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); }
.doc .toc ol { margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); }
.doc .toc li { margin: 0; }
.doc .toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
.prose { margin-top: 28px; }
.prose h2 { margin: 40px 0 12px; font-size: 24px; font-weight: 600; letter-spacing: -.005em; scroll-margin-top: 90px; }
.prose h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 600; }
.prose h4 { margin: 22px 0 6px; font-size: 17px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 600; }
.prose :is(p, li, td, blockquote) a { padding: 12px 0; }
.prose code { padding: 1px 6px; font: 14px/1.4 var(--mono); background: var(--surface-2); border: 1px solid var(--line); }
.prose blockquote { padding: 4px 0 4px 16px; border-left: 2px solid var(--accent); color: var(--muted); }
.prose blockquote p { color: var(--muted); }
.prose hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
.prose .tbl { margin: 0 0 14px; overflow-x: auto; border: 1px solid var(--line); }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; background: var(--surface-2); }
.prose tr:last-child td { border-bottom: 0; }

/* ---------- 404 ---------- */
.lost { display: grid; place-items: center; min-height: 70vh; padding: 48px var(--gutter); text-align: center; }
.lost .wrap { display: grid; justify-items: center; gap: 16px; }
.lost svg.star { width: 64px; height: 64px; filter: drop-shadow(0 0 18px #5aa6e955); }
.lost h1 { font: 700 clamp(30px, 8vw, 52px)/1.06 var(--display); text-transform: uppercase; }
.lost h1 em { font-style: normal; color: var(--link); }
.lost p { color: var(--muted); }
.breathe { animation: nstar-breathe 3.2s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 50% 50%; }

/* ---------- wider screens ---------- */
@media (max-width: 379.98px) {
  .beta { display: none; }
}
@media (max-width: 719.98px) {
  .tile { min-height: 0; padding: 18px 20px 20px; }
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .hero { padding-top: 24px; }
  .film { height: auto; max-height: none; aspect-ratio: 16 / 9; }
  .film .nstar { --s: 84px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .games { gap: 12px; }
  .game { flex-basis: 58%; }
  .game-soon { flex-basis: 30%; }
  .room-frame { padding: 28px 30px 30px; }
  .room-flow { --seat: 60px; }
  .hundred-grid { gap: 6px; }
  .toy { height: 380px; }
  .toy-light { margin-top: 110px; }
  .foot-in { grid-template-columns: 1.2fr 1fr; }
  .closing .nstar { --s: 112px; }
  .sec { padding-top: 120px; }
  .status span { display: inline; }
}
@media (min-width: 1000px) {
  :root { --gutter: 48px; --top-h: 64px; --status-h: 31px; --console-w: 400px; }
  .status-out { display: none; }
  .status-in { display: block; height: var(--status-h); padding-block: 6px 7px; border-bottom: 0; }
  .brand .wordmark { height: 20px; }
  .status-in { font-size: 11px; }
  .stage { grid-template-columns: minmax(0, 1fr) var(--console-w); column-gap: 52px; }
  .stage > * { grid-column: 1; }
  .hero { padding-top: 32px; gap: 30px; }
  .film .nstar { --s: 120px; }
  .sec { padding-top: 136px; gap: 36px; }
  .ttl { font-size: clamp(32px, 3.1vw, 44px); }
  .ttl.ttl-hero { font-size: clamp(36px, calc(5.2vw - 12px), 64px); line-height: 1.02; letter-spacing: -.015em; }
  .sec-line { font-size: 20px; }

  /* Select game, without the script: three tiles in a row. */
  .games { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px; margin: 0; padding: 0; overflow: visible; }
  .game-soon { flex-direction: column; align-items: center; padding: 24px 0; }
  .game-soon .game-name, .game-soon .soon-badge { writing-mode: vertical-rl; transform: rotate(180deg); }
  .game-soon .game-name { font-size: 22px; }
  /* The live stage: the focused tile widens into the stage, filled by its gameplay; the other folds to its name. */
  .games[data-stage="live"] { display: flex; height: 470px; gap: 10px; }
  /* The switch is a cut, not a slide: the layout changes at once under a wipe (transform and opacity only). */
  .games[data-stage="live"] .game { flex: 0 0 104px; display: block; overflow: hidden; cursor: pointer; transition: transform .3s var(--ease); }
  .games[data-stage="live"] .game.is-focus { flex: 1 1 0; cursor: default; }
  .games[data-stage="live"] .game-soon { flex: 0 0 92px; display: flex; cursor: default; }
  .games[data-stage="live"] .game-media {
    position: absolute;
    inset: 1px;
    aspect-ratio: auto;
    margin: 0;
    clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
  }
  .games[data-stage="live"] .game-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #0b0b0af5 0%, #0b0b0ae0 32%, #0b0b0a80 58%, #0b0b0a00 85%), linear-gradient(to right, #0b0b0a99, #0b0b0a00 55%);
  }
  .games[data-stage="live"] .game-cap span { display: inline; }
  .games[data-stage="live"] .game-wipe {
    display: block;
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -70%;
    width: 240%;
    z-index: 4;
    background: #0b0b0a;
    box-shadow: -10px 0 18px -8px #5aa6e999;
    transform: skewX(-37deg) translateX(120%);
    pointer-events: none;
  }
  .games[data-stage="live"] .game:not(.is-focus) .game-media::after { background: #0b0b0ad1; }
  .games[data-stage="live"] .game:not(.is-focus) video { opacity: .55; }
  .games[data-stage="live"] .game-info {
    position: absolute;
    left: 26px;
    right: 22px;
    bottom: 24px;
    z-index: 2;
    padding: 0;
    gap: 10px;
    color: #f4f3ee;
    transition: opacity .3s var(--ease);
  }
  .games[data-stage="live"] .game-mode { font-size: 13px; }
  .games[data-stage="live"] .game:not(.game-soon) .game-name { font-size: min(160px, 15.5cqi); line-height: .9; letter-spacing: -.04em; }
  .games[data-stage="live"] .game-one { color: #f4f3ee; max-width: 30em; }
  .games[data-stage="live"] .game-facts li { color: #d6d4cc; }
  .games[data-stage="live"] .game-facts b { color: #b9b7ae; }
  .games[data-stage="live"] .game:not(.is-focus) .game-info { opacity: 0; transition: none; }
  .games[data-stage="live"] .game:not(.is-focus) .game-cap { opacity: 0; }
  .games[data-stage="live"] .game::after {
    content: attr(data-name);
    content: attr(data-name) / "";
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 2;
    color: #f4f3ee;
    font: 700 22px/1 var(--display);
    letter-spacing: .02em;
    white-space: nowrap;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
  }
  .games[data-stage="live"] .game:not(.is-focus):not(.game-soon)::after { opacity: 1; }

  .tiles { grid-template-columns: 1fr 1fr; }
  .room-frame { padding: 32px 34px 32px; }
  /* The finale spans the whole width, under the stage: the console stays beside the page down to the questions. */
  .closing { padding: 160px var(--gutter) 140px; }
  .closing .nstar { --s: 140px; margin: 90px 0 84px; }
  .doc { padding-top: 56px; }
}
@media (min-width: 1200px) {
  :root { --console-w: 440px; }
  .nav { display: flex; margin-left: auto; }
  .theme { margin-left: 0; }
  .menu-key { display: none; }
  .stage { column-gap: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ttl.is-armed, .ttl.is-typing { color: inherit; }
  .ttl-type { display: none; }
  .game-wipe, .top-line, .nflight { display: none; }
  .nstar, .film .nstar, .film-mark { transform: none; translate: none; }
  .sec-head, .ttl-hero, .game-name, .ten, .closing h2 { transform: none; }
}