/* ==========================================================================
   MegaWord — landing page (V2.0 "midnight arcade" pass)
   Hand-written; the leaderboard and legal pages keep assets/css/main.css.
   Palette is the ROM's own tiles plus the promo shoot's blue/magenta smoke.
   Hidden "before" states only apply under html.motion, which js/main.js sets
   once GSAP is loaded and the visitor hasn't asked for reduced motion.
   ========================================================================== */

@font-face {
  font-family: "SGDK System";
  src: url("../fonts/sgdk.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --night: #04060d;
  --night-2: #070a16;
  --deep: #0a1124;
  --royal: #0c1f6e;
  --navy: #000e87;
  --ink: #00022e;
  --rim: #4144ac;
  --tile: #333c52;
  --tile-hi: #4a5a7a;
  --green: #76b041;
  --green-tile: #208920;
  --green-rim: #62ce41;
  --yellow: #e8b92e;
  --yellow-tile: #ac8900;
  --yellow-rim: #cdaa00;
  --cyan: #35a0ff;
  --magenta: #e23da0;
  --paper: #edf1fb;
  --muted: #8e99b8;
  --line: rgb(74 90 122 / 0.35);

  --font-pixel: "SGDK System", "Courier New", monospace;
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 72px;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--night);
  color-scheme: dark;
  scrollbar-color: var(--tile-hi) var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.modal-open {
  overflow: hidden;
}

img,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: balance;
  scroll-margin-top: 6rem;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

::selection {
  background: var(--yellow);
  color: var(--deep);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 300;
  transform: translateY(-160%);
  background: var(--paper);
  color: var(--night);
  padding: 0.9rem 1rem;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  text-transform: uppercase;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

main {
  position: relative;
  z-index: 1;
}

main:focus {
  outline: none;
}

.wrap {
  width: min(1240px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.wrap--narrow {
  width: min(880px, 100% - var(--gutter) * 2);
}

.ink-green { color: var(--green); font-weight: 500; }

/* the pixel font has no arrow glyphs — draw them */
.tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 0.42em solid transparent;
  border-bottom: 0.42em solid transparent;
  border-left: 0.56em solid currentColor;
  vertical-align: -0.05em;
}

.tri--left {
  border-left: 0;
  border-right: 0.56em solid currentColor;
}

.tri--down {
  border-left: 0.42em solid transparent;
  border-right: 0.42em solid transparent;
  border-top: 0.56em solid currentColor;
  border-bottom: 0;
  vertical-align: 0.12em;
}
.ink-yellow { color: var(--yellow); font-weight: 500; }

/* ---------------------------------------------------------------------------
   Type
--------------------------------------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

.kicker--plain {
  color: var(--cyan);
}

.display {
  margin-top: 1.1rem;
  font-family: var(--font-pixel);
  font-size: clamp(1.7rem, 4.6vw, 3.8rem);
  line-height: 1.22;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 0 18px rgb(237 241 251 / 0.22), 0 0 36px rgb(53 160 255 / 0.22);
  -webkit-font-smoothing: none;
}

.display--xl {
  font-size: clamp(2.4rem, 7vw, 6.4rem);
}

.lede {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65;
  color: var(--muted);
}

.section-head--center {
  text-align: center;
}

.section-head--center .lede {
  margin-inline: auto;
}

/* scramble-decoded headings: each glyph sits in its own cell */
.scr-word {
  display: inline-block;
  white-space: nowrap;
}

.scr-char {
  display: inline-block;
}

.scr-char.is-noise {
  color: var(--cyan);
}

.scr-char.is-noise:nth-child(3n) { color: var(--yellow); }
.scr-char.is-noise:nth-child(5n) { color: var(--green); }

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.btn {
  --lift: 6px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 1rem 1.6rem;
  overflow: hidden;
  border-radius: 8px;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: none;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: transform 0.18s var(--ease-out), translate 0.5s var(--ease-out), box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(2px);
}

.btn--primary {
  color: #1a1503;
  background: var(--yellow);
  border: 2px solid #f7da72;
  text-shadow: 1px 1px 0 rgb(255 255 255 / 0.25);
  box-shadow: 0 var(--lift) 0 #8a6c15, 0 0 36px rgb(232 185 46 / 0.35);
}

.btn--primary:hover {
  box-shadow: 0 calc(var(--lift) + 2px) 0 #8a6c15, 0 0 60px rgb(232 185 46 / 0.6);
}

.btn--primary:active {
  box-shadow: 0 2px 0 #8a6c15, 0 0 24px rgb(232 185 46 / 0.4);
}

.btn--ghost {
  color: var(--paper);
  background: rgb(4 6 13 / 0.72);
  border: 2px solid rgb(142 153 184 / 0.55);
}

.btn--ghost:hover {
  border-color: var(--paper);
  box-shadow: 0 0 36px rgb(53 160 255 / 0.3);
}

.btn--sm {
  min-height: 40px;
  padding: 0.7rem 1rem;
  font-size: 0.58rem;
  --lift: 4px;
}

.btn--lg {
  padding: 1.15rem 1.9rem;
  font-size: 0.74rem;
}

.btn--xl {
  padding: 1.4rem 2.4rem;
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  --lift: 8px;
}

/* ---------------------------------------------------------------------------
   Film FX — faint scanlines + grain in one static, fixed layer. It sits over
   every WebGL frame, so it stays cheap: no animation, no blend modes.
--------------------------------------------------------------------------- */
.fx-film {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.35;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 160px 160px;
}

body.video-modal-open .fx-film {
  display: none;
}

/* ---------------------------------------------------------------------------
   Boot screen — tiles light up as the stage loads, then the "TV" switches off
   to reveal the page. Only on the first visit of a session.
--------------------------------------------------------------------------- */
.boot {
  display: none;
}

.js:not(.booted) .boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.2rem;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, #0a1030, #020309 70%);
  /* never trap anyone behind it, even if the scripts fail */
  animation: boot-failsafe 0.01s 7s forwards;
}

.boot.is-out {
  animation: boot-off 0.62s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
}

.boot.is-gone {
  display: none !important;
}

@keyframes boot-failsafe {
  to { opacity: 0; visibility: hidden; }
}

@keyframes boot-off {
  0% { clip-path: inset(0 0 0 0); filter: brightness(1); }
  45% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(3); }
  80% { clip-path: inset(49.6% 49% 49.6% 49%); filter: brightness(4); }
  100% { clip-path: inset(50% 50% 50% 50%); filter: brightness(4); visibility: hidden; }
}

/* The tiles sit exactly where they do in logo.svg: --x/--y/--s are each
   tile's fill rect in SVG units, plus the 2.68-unit white outline all round.
   --k is pixels per SVG unit. */
.boot__logo {
  --k: 0.86;
  position: relative;
  width: calc(500px * var(--k));
  height: calc(239px * var(--k));
}

.boot-tile {
  position: absolute;
  left: calc((var(--x) - 2.68) * var(--k) * 1px);
  top: calc((var(--y) - 2.68) * var(--k) * 1px);
  width: calc((var(--s) + 5.36) * var(--k) * 1px);
  height: calc((var(--s) + 5.36) * var(--k) * 1px);
  perspective: 600px;
}

/* the empty slot waiting for its letter */
.boot-tile::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 2px solid var(--rim);
  border-radius: 3px;
  background: rgb(0 0 32 / 0.6);
}

.boot-tile canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity 0.1s ease, transform 0.28s var(--ease-out);
}

.boot-tile.is-on canvas {
  opacity: 1;
  transform: none;
}

.boot-tile.is-flip canvas {
  animation: tile-flip 0.5s ease both;
}

@media (max-width: 520px) {
  .boot__logo {
    --k: 0.62;
  }
}

.boot__meter {
  display: flex;
  justify-content: space-between;
  width: min(320px, 70vw);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.boot__pct {
  color: var(--yellow);
}

.boot__bar {
  width: min(320px, 70vw);
  height: 6px;
  margin-top: -1.6rem;
  border: 1px solid var(--line);
  padding: 1px;
}

.boot__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--yellow) 0 10px, transparent 10px 12px);
}

.boot__legal {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(142 153 184 / 0.6);
}

@keyframes tile-flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

/* ---------------------------------------------------------------------------
   Nav
--------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: max(14px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0
    max(var(--gutter), env(safe-area-inset-left));
  pointer-events: none;
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1440px;
  margin-inline: auto;
  padding: 10px 12px 10px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  pointer-events: auto;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.nav.is-scrolled .nav__bar {
  background: rgb(4 6 13 / 0.92);
  border-color: rgb(74 90 122 / 0.4);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
}

.nav__logo img {
  height: 30px;
  width: auto;
  image-rendering: pixelated;
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.2rem);
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s ease;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}

.nav__links a:hover,
.nav__links a.is-current {
  color: var(--paper);
}

.nav__links a:hover::after,
.nav__links a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__hud {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__guess b {
  font-weight: 400;
  color: var(--paper);
}

.nav__dots {
  display: flex;
  gap: 4px;
}

.nav__dots i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgb(65 68 172 / 0.45);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav__dots i.is-done {
  background: var(--green-rim);
  box-shadow: 0 0 8px rgb(98 206 65 / 0.6);
}

.nav__dots i.is-now {
  background: var(--yellow);
  box-shadow: 0 0 10px rgb(232 185 46 / 0.7);
}

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(142 153 184 / 0.5);
  border-radius: 10px;
  place-content: center;
  gap: 6px;
}

.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.3s var(--ease-out);
}

.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav-menu {
  max-width: 1440px;
  /* the nav is fixed, so on a phone held sideways the menu scrolls inside
     itself rather than running off the bottom */
  max-height: calc(100svh - var(--nav-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 8px auto 0;
  padding: 0.5rem;
  border: 1px solid rgb(74 90 122 / 0.45);
  border-radius: 14px;
  background: rgb(4 6 13 / 0.94);
  pointer-events: auto;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-menu[hidden] {
  display: none;
}

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 8px;
}

.nav-menu a span {
  color: var(--yellow);
  font-size: 0.55rem;
}

.nav-menu a:hover {
  background: rgb(74 90 122 / 0.2);
}

/* ---------------------------------------------------------------------------
   Hero — 3D logo, viewfinder HUD, and the zoom into the footage
--------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
}

.hero__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  perspective: 1200px;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.hero__fallback {
  display: none;
}

/* centred on a point 38% down without translate (see .hero__copy); the
   logo is 500 × 239, so half its height is 0.239 of its width */
.no-webgl .hero__fallback {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(38% - min(440px, 70vw) * 0.239);
  display: block;
  width: min(440px, 70vw);
  margin-inline: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 40px rgb(53 160 255 / 0.45));
}

.no-webgl .hero__frame {
  background:
    radial-gradient(ellipse 40% 60% at 0% 60%, rgb(20 80 255 / 0.35), transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 60%, rgb(226 61 160 / 0.3), transparent 70%),
    var(--night);
}

/* under the canvas, which cuts a hole for it so the tiles stay in front;
   on top once it fills the frame (js/main.js) */
.hero__screen {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  transform-origin: 50% 50%;
  will-change: transform;
}

.motion .hero__screen {
  display: block;
  visibility: hidden;
}

.hero__screen.is-front {
  z-index: 2;
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__video.is-playing {
  opacity: 1;
}

.hero__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55)),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.blinker {
  font-weight: 400;
  color: var(--green-rim);
  animation: blink 1.1s steps(1) infinite;
}

/* centred with auto margins, never translate: GSAP folds a CSS translate
   into its own transform the first time it animates an element, and on iOS
   that has measured -50% as 0 and left the copy hanging off the right */
.hero__copy {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: clamp(5.5rem, 13vh, 8.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(920px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.95rem 0.4rem 0.4rem;
  border: 1px solid rgb(205 170 0 / 0.55);
  border-radius: 999px;
  background: rgb(4 6 13 / 0.78);
  font-family: var(--font-pixel);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.badge:hover {
  border-color: var(--yellow);
  box-shadow: 0 0 24px rgb(232 185 46 / 0.25);
}

.badge__tag {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--yellow-tile);
  color: #eee;
  text-shadow: 1px 1px 0 #624400;
}

.hero__title {
  margin-top: 1.4rem;
  font-family: var(--font-pixel);
  font-size: clamp(0.95rem, 2vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: -2px 0 0 rgb(226 61 160 / 0.65), 2px 0 0 rgb(53 160 255 / 0.65), 0 0 30px rgb(4 6 13 / 0.9);
  -webkit-font-smoothing: none;
}

.hero__sub {
  margin-top: 0.8rem;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: var(--muted);
  text-shadow: 0 2px 14px rgb(3 3 20 / 0.95);
}

.hero__cta {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

@media (min-width: 640px) {
  .hero__cta {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Shared section rhythm
--------------------------------------------------------------------------- */
.how,
.trailer,
.worlds,
.hof,
.specs,
.ost,
.faq {
  position: relative;
  padding-block: clamp(5.5rem, 12vw, 10rem);
}

.how::before,
.trailer::before,
.worlds::before,
.hof::before,
.specs::before,
.ost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 60% at 8% 55%, rgb(20 80 255 / 0.12), transparent 70%),
    radial-gradient(ellipse 45% 60% at 92% 50%, rgb(226 61 160 / 0.09), transparent 70%);
}

.how::after,
.specs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(53 160 255 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(53 160 255 / 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 75%);
}

/* ---------------------------------------------------------------------------
   How to play — a real 3D board; each tile is a cube that rolls to reveal
   its colour on the face underneath
--------------------------------------------------------------------------- */
.how {
  background: linear-gradient(to bottom, var(--night), var(--night-2) 40%, var(--night));
}

.how__frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.how__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .how {
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + 2rem) 3rem;
  }

  .how__frame {
    min-height: calc(100svh - var(--nav-h) - 5rem);
  }

  .how__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.how__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(380px, 46vw, 560px);
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

.js .how__stage:has(.board3d:empty) {
  display: none;
}

.board3d {
  --s: clamp(42px, 5.6vw, 76px);
  --gap: calc(var(--s) * 0.14);
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap);
  transform-style: preserve-3d;
  transform: rotateX(var(--bx, 26deg)) rotateY(var(--by, -20deg)) rotateZ(4deg);
  transition: transform 0.9s var(--ease-out);
}

.board3d__row {
  display: flex;
  gap: var(--gap);
  transform-style: preserve-3d;
}

.cube {
  --reveal: 0;
  position: relative;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
}

.cube > i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  font-family: var(--font-pixel);
  font-size: calc(var(--s) * 0.52);
  text-transform: uppercase;
  color: #eee;
  border-radius: 7px;
  backface-visibility: hidden;
  -webkit-font-smoothing: none;
}

.cube .f-front {
  transform: translateZ(calc(var(--s) / 2));
  background: #000020;
  border: 3px solid var(--rim);
  box-shadow: 0 0 0 2px #000041, inset 0 -4px 0 rgb(0 0 0 / 0.25);
  color: transparent;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.cube.is-typed .f-front {
  border-color: #eee;
  color: #eee;
  text-shadow: 2px 2px 0 #00008b;
}

.cube .f-bottom {
  --fill: #202041;
  --edge: #62658b;
  --ink: #000041;
  transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
  background: var(--fill);
  border: 3px solid var(--edge);
  box-shadow: 0 0 0 2px #000041, inset 0 -4px 0 rgb(0 0 0 / 0.3);
  text-shadow: 2px 2px 0 var(--ink);
}

/* The board is seen slightly from below, so a tile's colour face shows as
   its underside before it rolls. Keep it looking like the other sides until
   the roll starts (js/main.js tweens --reveal to 1). */
.cube .f-bottom::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid #1e2470;
  border-radius: 7px;
  background: linear-gradient(135deg, #12164a, #070926);
  opacity: calc(1 - var(--reveal));
}

.cube .f-bottom[data-state="present"] { --fill: #ac8900; --edge: #cdaa00; --ink: #624400; }
.cube .f-bottom[data-state="correct"] { --fill: #208920; --edge: #62ce41; --ink: #004400; }

/* only the faces the camera can see: the board is viewed from slightly
   below and to the right, so the top and left faces never show. The back
   face becomes the underside once a tile has rolled. */
.cube .f-right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube .f-back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }

.cube .f-right,
.cube .f-back {
  background: linear-gradient(135deg, #12164a, #070926);
  border: 2px solid #1e2470;
}

.cube.is-revealed .f-right,
.cube.is-revealed .f-back {
  background: linear-gradient(135deg, var(--side, #1b1c3a), #05060f);
}

.cube[data-state="present"] { --side: #6b5200; }
.cube[data-state="correct"] { --side: #0f5212; }

/* the rows still to play: a dimmer rim, same depth */
.cube--empty .f-front {
  border-color: rgb(65 68 172 / 0.6);
}

.board3d__floor {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 90%;
  height: 50%;
  translate: -50% -50%;
  background: radial-gradient(ellipse at center, rgb(53 160 255 / 0.22), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}

.steps {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.step {
  position: relative;
  display: flex;
  gap: 1.25rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: opacity 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, transform 0.6s var(--ease-out);
}

.motion .step {
  opacity: 0.32;
}

.motion .step.is-active {
  opacity: 1;
  border-color: rgb(74 90 122 / 0.45);
  background: linear-gradient(110deg, rgb(12 31 110 / 0.35), rgb(4 6 13 / 0.2));
  transform: translateX(-8px);
}

.step__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 7px;
  border: 3px solid #eee;
  background: #000020;
  box-shadow: 0 0 0 2px #000041, inset 0 -4px 0 rgb(0 0 0 / 0.3);
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  color: #eee;
  text-shadow: 2px 2px 0 #00008b;
  -webkit-font-smoothing: none;
}

.step__tile--present { background: #ac8900; border-color: #cdaa00; text-shadow: 2px 2px 0 #624400; }
.step__tile--correct { background: #208920; border-color: #62ce41; text-shadow: 2px 2px 0 #004400; }

.step__title {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.step__title--yellow { color: var(--yellow); }
.step__title--green { color: var(--green); }

.step__text {
  margin-top: 0.55rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   What's new — tilt cards. By default (phones, tablets, reduced motion, no
   JS) they're a carousel you can swipe, drag or step with the arrows. On
   desktop with motion js/main.js adds html.reel-pinned and the whole track
   slides sideways while the section is pinned.
--------------------------------------------------------------------------- */
.reel {
  position: relative;
  padding-block: clamp(5rem, 10vw, 8rem);
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgb(12 31 110 / 0.35), transparent 70%),
    var(--night);
}

.reel__intro {
  width: min(1240px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: 1rem;
}

.reel__hint {
  display: inline-flex;
  gap: 0.8rem;
  margin-top: 1.4rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.reel__hint b {
  font-weight: 400;
}

.reel__hint span {
  color: var(--yellow);
}

.reel__hint-scroll,
.reel__hint-drag {
  display: none;
}

@media (pointer: fine) {
  .reel__hint-swipe {
    display: none;
  }

  .reel__hint-drag {
    display: inline;
  }
}

/* the gutter lines the first card up with the page column on wide screens */
.reel__cards {
  --edge: max(var(--gutter), (100% - 1240px) / 2);
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 0.5rem var(--edge) 1.2rem;
  scrollbar-width: none;
}

.reel__cards::-webkit-scrollbar {
  display: none;
}

@media (pointer: fine) {
  .reel__cards {
    cursor: grab;
  }
}

.reel__cards.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.reel__cards .card {
  flex: 0 0 min(84vw, 420px);
  scroll-snap-align: start;
}

.reel__cards .card__media {
  aspect-ratio: 16 / 11;
  flex: none;
}

.reel__cards .card:not(.card--media) .card__media,
.reel__cards .card__media--crt {
  aspect-ratio: auto;
  min-height: 280px;
}

.reel__cards .card__media--crt {
  min-height: 0;
  padding-bottom: 2.6rem;
}

.reel__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(1240px, 100% - var(--gutter) * 2);
  margin: 0.4rem auto 0;
}

.reel__progress {
  flex: 1;
  height: 2px;
  background: rgb(74 90 122 / 0.3);
}

.reel__progress i {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--yellow), var(--green));
}

.reel__btn:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: rgb(142 153 184 / 0.3);
  box-shadow: none;
}

/* desktop with motion: one pinned sideways track */
.reel-pinned .reel {
  padding: 0;
}

.reel-pinned .reel__frame {
  position: relative;
  display: flex;
  align-items: center;
  height: 100svh;
  overflow: hidden;
}

.reel-pinned .reel__track {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
  width: max-content;
  padding: calc(var(--nav-h) + 1rem) 8vw 2rem;
  will-change: transform;
}

.reel-pinned .reel__intro {
  flex: 0 0 min(36rem, 38vw);
  width: auto;
  margin: 0;
  padding-right: 3vw;
}

.reel-pinned .reel__cards {
  display: contents;
}

.reel-pinned .reel__cards .card {
  flex: 0 0 clamp(340px, 30vw, 470px);
  height: min(72svh, 640px);
}

.reel-pinned .reel__cards .card__media {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 220px;
}

.reel-pinned .reel .card__media,
.reel-pinned .reel .card__body {
  will-change: transform, opacity;
}

.reel-pinned .reel__hint {
  margin-top: 2.4rem;
  font-size: 0.58rem;
}

.reel-pinned .reel__hint span {
  animation: nudge 1.4s ease-in-out infinite;
}

.reel-pinned .reel__hint b {
  display: none;
}

.reel-pinned .reel__hint .reel__hint-scroll {
  display: inline;
}

.reel-pinned .reel__controls {
  display: contents;
}

.reel-pinned .reel__btn {
  display: none;
}

.reel-pinned .reel__progress {
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: 2.2rem;
}

@keyframes nudge {
  50% { transform: translateX(6px); }
}

.card {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(74 90 122 / 0.45);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgb(12 31 110 / 0.45), rgb(4 6 13 / 0.9) 55%),
    var(--night-2);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.06);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  border-color: rgb(142 153 184 / 0.7);
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.55), 0 0 50px rgb(53 160 255 / 0.15);
}

.card.is-tilting {
  transition: transform 0.12s linear, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgb(255 255 255 / 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .card__glare {
  opacity: 1;
}

.card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  overflow: hidden;
  background: #02030a;
  border-bottom: 1px solid rgb(74 90 122 / 0.35);
}

.card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.card:hover .card__media video {
  transform: scale(1.04);
}

.card__media--crt {
  display: grid;
  place-items: center;
  padding: 1.4rem;
  background: radial-gradient(ellipse at center, #0c1f6e, #02030a 70%);
}

.card__media--crt video {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  border-radius: 14px / 18px;
  border: 6px solid #15172a;
  box-shadow: 0 0 0 2px #2a2e4a, 0 20px 40px rgb(0 0 0 / 0.5), 0 0 40px rgb(53 160 255 / 0.25);
  image-rendering: pixelated;
}

.card__tag {
  position: absolute;
  bottom: 0.9rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__body {
  position: relative;
  padding: 1.4rem 1.6rem 1.7rem;
}

.card__title {
  font-family: var(--font-pixel);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  -webkit-font-smoothing: none;
}

.card__text {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* EQ */
.card__media--eq {
  display: grid;
  /* the carousel sizes every card to the tallest, so keep the equaliser short there */
  grid-template-rows: 100px auto;
  align-content: center;
  justify-items: center;
  gap: 1.4rem;
  padding: 1.6rem;
  background: radial-gradient(ellipse at 50% 80%, rgb(12 31 110 / 0.7), #02030a 70%);
}

/* pinned, the equaliser gives up height before the track list does on short screens */
.reel-pinned .card__media--eq {
  grid-template-rows: minmax(72px, 140px) auto;
}

.eq {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 340px;
}

/* Each column is ten lit cells (a gradient cut into segments by a mask);
   the unlit part is a cover that scales down from the top — one transform
   per column per beat, nothing to repaint. */
.eq__col {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to top, var(--green-rim) 0 50%, var(--yellow) 50% 80%, var(--magenta) 80%);
  -webkit-mask: repeating-linear-gradient(to top, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
  mask: repeating-linear-gradient(to top, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
}

.eq__col i {
  position: absolute;
  inset: 0;
  background: #0e1030;
  transform-origin: top;
  transform: scaleY(0.6);
  transition: transform 0.09s linear;
  will-change: transform;
}

.tracks {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  max-width: 340px;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tracks__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgb(74 90 122 / 0.35);
  border-radius: 6px;
  color: var(--muted);
  transition: all 0.3s ease;
}

.tracks__item span {
  color: rgb(142 153 184 / 0.6);
}

.tracks__item i {
  margin-left: auto;
  font-style: normal;
  opacity: 0;
}

.tracks__item.is-playing {
  color: var(--paper);
  border-color: var(--yellow);
  background: rgb(232 185 46 / 0.08);
}

.tracks__item.is-playing i {
  opacity: 1;
  color: var(--yellow);
  animation: blink 0.8s steps(1) infinite;
}

/* Keycaps */
.card__media--keys {
  --key-bg: #414462;
  --key-rim: #8b89ac;
  --key-ink: #eee;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2rem;
  padding: 1.6rem 1.2rem;
  background: radial-gradient(ellipse at 50% 70%, rgb(32 32 98 / 0.65), #02030a 70%);
}

.card__media--keys[data-keys="navy"] { --key-bg: #202062; --key-rim: #6265cd; --key-ink: #eee; }
.card__media--keys[data-keys="pale"] { --key-bg: #cdceee; --key-rim: #eee; --key-ink: #000041; }

.keyrow {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 360px;
}

.keyrow span {
  display: grid;
  place-items: center;
  aspect-ratio: 0.82;
  border-radius: 4px;
  background: var(--key-bg);
  box-shadow: inset 0 2px 0 var(--key-rim), inset 0 -3px 0 rgb(0 0 0 / 0.3), 0 0 0 2px #000041, 0 4px 0 #000020;
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  color: var(--key-ink);
  -webkit-font-smoothing: none;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.15s ease;
}

.keyrow span.is-hit {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 var(--key-rim), 0 0 0 2px #000041, 0 1px 0 #000020;
}

.keycaps {
  display: flex;
  gap: 0.9rem;
}

.keycap {
  --cap: #414462;
  --cap-rim: #8b89ac;
  --cap-side: #23253a;
  --cap-ink: #eee;
  min-width: 5.2rem;
  padding: 0.9rem 0.8rem 1rem;
  border-radius: 8px;
  background: var(--cap);
  color: var(--cap-ink);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: inset 0 3px 0 var(--cap-rim), inset 0 -4px 0 rgb(0 0 0 / 0.25), 0 0 0 2px #000041, 0 9px 0 var(--cap-side), 0 16px 24px rgb(0 0 0 / 0.5);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-font-smoothing: none;
}

.keycap:hover {
  transform: translateY(2px);
  box-shadow: inset 0 3px 0 var(--cap-rim), inset 0 -4px 0 rgb(0 0 0 / 0.25), 0 0 0 2px #000041, 0 7px 0 var(--cap-side), 0 12px 20px rgb(0 0 0 / 0.5);
}

.keycap[aria-pressed="true"] {
  transform: translateY(7px);
  box-shadow: inset 0 3px 0 var(--cap-rim), inset 0 -4px 0 rgb(0 0 0 / 0.25), 0 0 0 2px var(--yellow), 0 2px 0 var(--cap-side), 0 0 26px rgb(232 185 46 / 0.35);
}

.keycap--navy { --cap: #202062; --cap-rim: #6265cd; --cap-side: #10103a; }
.keycap--pale { --cap: #cdceee; --cap-rim: #fff; --cap-side: #8e90b8; --cap-ink: #000041; }

/* Odometer */
.card__media--words {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.8rem;
  padding: 1.6rem;
  background: radial-gradient(ellipse at 50% 60%, rgb(232 185 46 / 0.12), #02030a 65%);
}

.odometer {
  display: flex;
  font-family: var(--font-pixel);
  font-size: clamp(2rem, 3.3vw, 3.3rem);
  line-height: 1;
  color: var(--yellow);
  filter: drop-shadow(0 0 14px rgb(232 185 46 / 0.45));
  -webkit-font-smoothing: none;
}

.odo-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.odo-digit__strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.6s var(--ease-out);
}

.odo-digit__strip span {
  display: block;
  height: 1em;
  line-height: 1;
}

.mini-row {
  display: flex;
  gap: 6px;
  perspective: 600px;
}

.mini-tile {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 6px;
  border: 2px solid #eee;
  background: #000020;
  box-shadow: 0 0 0 2px #000041, inset 0 -3px 0 rgb(0 0 0 / 0.3);
  font-family: var(--font-pixel);
  font-size: 1rem;
  text-transform: uppercase;
  color: #eee;
  text-shadow: 2px 2px 0 #00008b;
  -webkit-font-smoothing: none;
}

.mini-tile.is-absent { background: #202041; border-color: #62658b; text-shadow: 2px 2px 0 #000041; }
.mini-tile.is-present { background: #ac8900; border-color: #cdaa00; text-shadow: 2px 2px 0 #624400; }
.mini-tile.is-correct { background: #208920; border-color: #62ce41; text-shadow: 2px 2px 0 #004400; }
.mini-tile.is-flip { animation: tile-flip 0.5s ease both; }

/* Modes */
.card__media--modes {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.4rem;
  padding: 1.6rem;
  background: radial-gradient(ellipse at 50% 70%, rgb(53 160 255 / 0.15), #02030a 70%);
}

.modes {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  max-width: 300px;
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.modes__item {
  padding: 0.75rem 0.8rem;
  border: 2px solid #0c1f6e;
  border-radius: 6px;
  background: #000848;
  color: #eee;
  transition: all 0.2s ease;
}

.modes__item.is-active {
  position: relative;
  border-color: var(--yellow);
  box-shadow: 0 0 18px rgb(232 185 46 / 0.25);
}

.modes__item.is-active::before,
.modes__item.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.modes__item.is-active::before {
  left: 0.8rem;
  border-left: 8px solid var(--yellow);
}

.modes__item.is-active::after {
  right: 0.8rem;
  border-right: 8px solid var(--yellow);
}

.clock {
  font-family: var(--font-pixel);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--paper);
  text-shadow: 0 0 18px rgb(53 160 255 / 0.6);
  -webkit-font-smoothing: none;
}

.clock.is-low {
  color: #ff6a8b;
  text-shadow: 0 0 18px rgb(255 59 100 / 0.6);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chips li,
.chips span {
  padding: 0.6rem 0.9rem;
  border: 1px solid rgb(74 90 122 / 0.6);
  border-radius: 6px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(237 241 251 / 0.85);
  background: rgb(4 6 13 / 0.45);
  -webkit-font-smoothing: none;
}

.chips--timers {
  align-items: center;
}

.chips--timers span.is-on {
  border-color: var(--yellow);
  color: var(--yellow);
}

.chips--timers em {
  font-style: normal;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Trailer — a CRT that's a plain link to YouTube until it's pressed, when
   js/trailer.js swaps in the privacy-enhanced player
--------------------------------------------------------------------------- */
.trailer__screen {
  position: relative;
  width: min(1040px, 100% - var(--gutter) * 2);
  margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: clamp(5px, 0.8vw, 9px) solid #15172a;
  border-radius: 18px / 22px;
  background: #02030a;
  box-shadow: 0 0 0 2px #2a2e4a, 0 30px 80px rgb(0 0 0 / 0.55), 0 0 70px rgb(53 160 255 / 0.22);
}

.trailer__poster,
.trailer__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.trailer__poster {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.1rem;
}

.trailer__poster:focus-visible {
  outline-offset: -8px;
}

/* scanlines and a vignette over the still */
.trailer__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 50%, rgb(2 3 10 / 0.6));
}

.trailer__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.trailer__poster:hover img {
  transform: scale(1.03);
}

.trailer__play,
.trailer__label {
  position: relative;
  z-index: 1;
}

.trailer__play {
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 84px);
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: 0 5px 0 #8a6c15, 0 0 40px rgb(232 185 46 / 0.35);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}

.trailer__play::after {
  content: "";
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #1a1503;
  translate: 3px 0;
}

.trailer__poster:hover .trailer__play {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #8a6c15, 0 0 56px rgb(232 185 46 / 0.5);
}

.trailer__poster:active .trailer__play {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #8a6c15, 0 0 40px rgb(232 185 46 / 0.35);
}

/* sits on a chip: the still behind it is a busy game screen */
.trailer__label {
  padding: 0.55rem 0.8rem 0.5rem 1rem;
  border-radius: 6px;
  background: rgb(4 6 13 / 0.82);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  -webkit-font-smoothing: none;
}

/* ---------------------------------------------------------------------------
   Worlds — twelve screens on a 3D ring
--------------------------------------------------------------------------- */
.worlds {
  overflow: hidden;
}

.ring-stage {
  --w: clamp(240px, 32vw, 480px);
  --h: calc(var(--w) * 0.7);
  --r: calc(var(--w) * 1.95);
  position: relative;
  height: calc(var(--h) + clamp(4rem, 9vw, 8rem));
  margin-top: clamp(1.5rem, 4vw, 3rem);
  perspective: calc(var(--w) * 3.4);
  perspective-origin: 50% 35%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.ring-stage.is-dragging {
  cursor: grabbing;
}

.ring-name {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 0;
  width: 100%;
  translate: -50% -50%;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: clamp(3rem, 12vw, 12rem);
  line-height: 1;
  text-transform: uppercase;
  color: rgb(53 160 255 / 0.04);
  -webkit-text-stroke: 1px rgb(142 153 184 / 0.32);
  pointer-events: none;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.ring-name.is-swapping {
  opacity: 0;
  transition-duration: 0.12s;
}

.ring {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateX(var(--lean, 0deg)) rotateY(var(--angle, 0deg));
}

.ring-card {
  --b: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgb(74 90 122 / 0.6);
  background: #000;
  transform: rotateY(calc(var(--i) * 30deg)) translateZ(var(--r));
  backface-visibility: hidden;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.5);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* dims the screens as they turn away (--b is set per card by js/main.js) */
.ring-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #02030a;
  opacity: calc(1 - var(--b));
  pointer-events: none;
}

.ring-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  pointer-events: none;
}

.ring-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.12), transparent 40%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.ring-card.is-active {
  border-color: rgb(237 241 251 / 0.85);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.55), 0 0 60px rgb(53 160 255 / 0.35);
}

.ring-floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(900px, 90%);
  height: 90px;
  translate: -50% 0;
  background: radial-gradient(ellipse at center, rgb(53 160 255 / 0.28), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.ring-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1rem;
}

.ring-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgb(142 153 184 / 0.5);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--paper);
  background: rgb(4 6 13 / 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.ring-btn:hover {
  border-color: var(--yellow);
  box-shadow: 0 0 22px rgb(232 185 46 / 0.3);
}

.ring-btn:active {
  transform: translateY(2px);
}

.ring-osd {
  min-width: 15rem;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-rim);
  text-shadow: 0 0 12px rgb(98 206 65 / 0.6);
}

.ring-presets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.6rem;
}

.ring-preset {
  width: 64px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  opacity: 0.45;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}

.ring-preset img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.ring-preset:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.ring-preset.is-active {
  opacity: 1;
  border-color: var(--yellow);
  box-shadow: 0 0 16px rgb(232 185 46 / 0.35);
}

@media (max-width: 640px) {
  .ring-stage {
    --w: 64vw;
  }

  .ring-presets {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 2px 0.6rem;
    scrollbar-width: none;
  }

  .ring-presets::-webkit-scrollbar {
    display: none;
  }

  .ring-preset {
    flex: 0 0 68px;
    width: 68px;
    scroll-snap-align: center;
  }

  .ring-osd {
    min-width: 0;
    flex: 1;
    font-size: 0.6rem;
  }
}

/* ---------------------------------------------------------------------------
   Hardware — the cartridge goes in (WebGL, pinned)
--------------------------------------------------------------------------- */
.hw {
  position: relative;
  height: 100svh;
  min-height: 560px;
}

.hw__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--night);
}

.hw__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hw__fallback {
  display: none;
}

.hw__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  animation: blink 1.1s steps(1) infinite;
  pointer-events: none;
}

.hw.is-ready .hw__loading {
  display: none;
}

.hw__intro {
  position: absolute;
  z-index: 2;
  bottom: 9vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

.hw__insert {
  margin-top: 1rem;
  font-family: var(--font-pixel);
  font-size: clamp(1.4rem, 4vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: -3px 0 0 rgb(226 61 160 / 0.55), 3px 0 0 rgb(53 160 255 / 0.55);
  -webkit-font-smoothing: none;
}

.hw__callout {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.hw__callout i {
  width: 10px;
  height: 10px;
  margin: -5px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--yellow);
}

.hw__callout span {
  position: relative;
  margin-left: 46px;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgb(232 185 46 / 0.6);
  border-radius: 6px;
  background: rgb(4 6 13 / 0.9);
  white-space: nowrap;
}

.hw__callout span::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 41px;
  height: 1px;
  background: var(--yellow);
}

.hw__callout--left {
  flex-direction: row-reverse;
}

.hw__callout--left span {
  margin-left: 0;
  margin-right: 46px;
}

.hw__callout--left span::before {
  right: auto;
  left: 100%;
}

/* centred in the space below the nav */
.hw__copy {
  position: absolute;
  z-index: 3;
  right: max(var(--gutter), 6vw);
  top: calc(50% + var(--nav-h) / 2);
  width: min(30rem, 38vw);
  translate: 0 -50%;
}

.hw__copy .display {
  margin-top: 0.8rem;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
}

/* shallow screens (short laptops, tablets on their side): size to height */
@media (min-width: 900px) and (max-height: 820px) {
  .hw__copy .display {
    font-size: clamp(1.4rem, min(3.4vw, 5.2vh), 3rem);
  }

  .hw__text {
    margin-top: 1rem;
    font-size: 0.95rem;
  }

  .hw__copy .chips {
    margin-top: 1.2rem;
  }
}

.hw__text {
  margin-top: 1.3rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}

.hw__copy .chips {
  margin-top: 1.8rem;
}

.hw__flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse at 50% 55%, rgb(200 225 255 / 0.65), rgb(53 160 255 / 0.25) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.motion .hw__copy,
.motion .hw__intro {
  opacity: 0;
}

@media (max-width: 899px) {
  .hw__copy {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: 1.5rem;
    width: auto;
    translate: none;
    padding: 1.4rem;
    border: 1px solid rgb(74 90 122 / 0.45);
    border-radius: 16px;
    background: rgb(4 6 13 / 0.9);
  }

  .hw__text {
    font-size: 0.92rem;
  }

  .hw__callout {
    display: none;
  }
}

/* No WebGL: the promo still does the job, copy sits beneath it */
.no-webgl .hw,
.hw.is-failed,
.no-motion .hw {
  height: auto;
  min-height: 0;
}

.no-webgl .hw__canvas,
.no-webgl .hw__loading,
.no-webgl .hw__intro,
.no-webgl .hw__callout,
.hw.is-failed .hw__canvas,
.hw.is-failed .hw__loading,
.hw.is-failed .hw__intro,
.hw.is-failed .hw__callout,
.no-motion .hw__intro,
.no-motion .hw__callout {
  display: none;
}

.no-webgl .hw__frame,
.hw.is-failed .hw__frame {
  display: grid;
  gap: 2rem;
  padding-block: 6rem;
}

.hw.is-failed .hw__fallback,
.no-webgl .hw__fallback {
  display: block;
  width: min(1100px, 100% - var(--gutter) * 2);
  height: auto;
  margin-inline: auto;
  border-radius: 18px;
}

.no-webgl .hw__copy,
.hw.is-failed .hw__copy {
  position: static;
  width: min(760px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  translate: none;
  opacity: 1;
  border: 0;
  background: none;
  padding: 0;
}

.no-motion:not(.no-webgl) .hw__frame {
  height: 100svh;
}

/* ---------------------------------------------------------------------------
   Hall of fame
--------------------------------------------------------------------------- */
.hof__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hof__grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.hof__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.2rem;
}

.guide-thumb {
  position: relative;
  display: grid;
  grid-template-columns: 120px auto;
  align-items: center;
  gap: 0.9rem;
  padding: 6px 1.1rem 6px 6px;
  border: 1px solid rgb(74 90 122 / 0.55);
  border-radius: 12px;
  background: rgb(4 6 13 / 0.5);
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}

.guide-thumb:hover {
  border-color: var(--yellow);
  box-shadow: 0 0 30px rgb(232 185 46 / 0.2);
  transform: translateY(-2px);
}

.guide-thumb img {
  width: 120px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
}

.guide-thumb__play {
  position: absolute;
  left: 6px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  background: rgb(4 6 13 / 0.35);
}

.guide-thumb__play i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--yellow);
  box-shadow: 0 3px 0 #8a6c15;
}

.guide-thumb__play i::after {
  content: "";
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #1a1503;
  translate: 2px 0;
}

.guide-thumb__label {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--paper);
  max-width: 12rem;
}

.hof__board-wrap {
  perspective: 1400px;
}

.hof__board {
  --rx: 6deg;
  --ry: -14deg;
  position: relative;
  padding: clamp(1rem, 2.5vw, 1.8rem);
  border: 2px solid var(--rim);
  border-radius: 18px;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #0b1260, #02053a 60%, #01021a);
  box-shadow:
    0 0 0 4px #000041,
    0 50px 100px rgb(0 0 0 / 0.6),
    0 0 80px rgb(53 160 255 / 0.18);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
}

.hof__board::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 2rem;
  width: 12rem;
  height: 4px;
  background: linear-gradient(90deg, var(--yellow) 0 48%, var(--cyan) 48% 76%, var(--magenta) 76%);
  box-shadow: 0 0 16px rgb(53 160 255 / 0.5);
}

.hof__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgb(65 68 172 / 0.7);
  font-family: var(--font-pixel);
  font-size: clamp(0.55rem, 1vw, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hof__head span:first-child {
  color: var(--yellow);
}

.hof__head span:last-child {
  color: var(--muted);
}

.hof__cols,
.lb-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  gap: 1rem;
}

.hof__cols {
  padding: 0.9rem 1rem 0.4rem;
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(142 153 184 / 0.7);
}

.hof__cols span:last-child {
  text-align: right;
}

.lb-row {
  position: relative;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgb(65 68 172 / 0.35);
  font-family: var(--font-pixel);
  font-size: clamp(0.62rem, 1.15vw, 0.82rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eee;
  -webkit-font-smoothing: none;
}

.lb-row__rank {
  color: var(--muted);
}

.lb-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-row__flag {
  margin-right: 0.6rem;
  font-family: var(--font-sans);
}

.lb-row__time {
  text-align: right;
  color: var(--paper);
}

.lb-row--1 .lb-row__rank,
.lb-row--1 .lb-row__time { color: #ffd84a; text-shadow: 0 0 12px rgb(255 216 74 / 0.6); }
.lb-row--2 .lb-row__rank { color: #d9e1ff; }
.lb-row--3 .lb-row__rank { color: #e6a86a; }

.lb-row--1 {
  overflow: hidden;
  background: linear-gradient(90deg, rgb(232 185 46 / 0.14), transparent 70%);
}

.lb-row--1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.14) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 3.4s ease-in-out infinite;
}

@keyframes shimmer {
  60%, 100% { transform: translateX(100%); }
}

.lb-row--you {
  margin-top: 0.6rem;
  border: 1px dashed rgb(232 185 46 / 0.6);
  border-radius: 8px;
  color: var(--yellow);
  transition: background-color 0.2s ease;
}

.lb-row--you:hover {
  background: rgb(232 185 46 / 0.1);
}

.lb-row--you .lb-row__rank,
.lb-row--you .lb-row__time {
  color: var(--yellow);
  animation: blink 1.1s steps(1) infinite;
}

.lb-row--you .lb-row__time {
  animation: none;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   Specs
--------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(160deg, rgb(12 31 110 / 0.28), var(--night) 70%);
  transition: background-color 0.3s ease;
}

.stat b {
  font-weight: 400;
  font-family: var(--font-pixel);
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 0 20px rgb(53 160 255 / 0.35);
  -webkit-font-smoothing: none;
}

.stat:first-child b {
  color: var(--yellow);
  text-shadow: 0 0 20px rgb(232 185 46 / 0.45);
}

.stat span {
  font-family: var(--font-pixel);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* phones: "10,200" is six 1em glyphs, so the numbers shrink with the screen
   rather than push the two columns past its edge */
@media (max-width: 520px) {
  .stat {
    padding: 1.1rem 1rem;
  }

  .stat b {
    font-size: min(1.8rem, 8vw - 8px);
  }
}

.sheet {
  position: relative;
  margin-top: 2rem;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 2px solid rgb(74 90 122 / 0.5);
  border-radius: 18px;
  background: rgb(10 17 36 / 0.45);
}

.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.sheet__title {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
}

.stamp {
  rotate: -7deg;
  border: 2px solid rgb(232 185 46 / 0.75);
  padding: 0.55rem 0.8rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
  color: var(--yellow);
  box-shadow: 0 0 24px rgb(232 185 46 / 0.15), inset 0 0 12px rgb(232 185 46 / 0.08);
}

.sheet__grid {
  display: grid;
  column-gap: 3rem;
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .sheet__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px dashed rgb(74 90 122 / 0.5);
}

.spec-row dt {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.spec-row dd {
  font-size: 0.92rem;
  text-align: right;
  color: var(--paper);
}

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sheet__foot a {
  color: var(--cyan);
}

.sheet__foot a:hover {
  color: var(--paper);
}

.barcode-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--muted);
}

.barcode-wrap span {
  writing-mode: vertical-rl;
}

.barcode {
  position: relative;
  width: 120px;
  height: 46px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg,
      var(--paper) 0 2px, transparent 2px 4px, var(--paper) 4px 5px, transparent 5px 8px,
      var(--paper) 8px 11px, transparent 11px 12px, var(--paper) 12px 13px, transparent 13px 16px);
  opacity: 0.8;
}

.barcode::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #ff3b3b;
  box-shadow: 0 0 10px #ff3b3b;
  animation: barcode-sweep 2.6s ease-in-out infinite alternate;
}

@keyframes barcode-sweep {
  from { transform: translateX(0); }
  to { transform: translateX(117px); }
}

/* ---------------------------------------------------------------------------
   Soundtrack — a "sound test" deck (js/soundtrack.js). The spectrum is one
   canvas that only draws while music plays; a pulse runs down the signal
   chain beside it at the same time. Everything else is static.
--------------------------------------------------------------------------- */
.ost__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

/* the canvas's backing size must never prop its column open */
.ost__grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .ost__grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* "KEYBOARD" can't wrap: the title keeps the display size wherever the
   word fits its column and shrinks only where it wouldn't */
.ost__copy {
  container-type: inline-size;
}

.ost__copy .display {
  font-size: min(clamp(1.7rem, 4.6vw, 3.8rem), 11.5cqi);
}

/* signal chain: four tiles on a wire, coloured like a row being solved */
.chain {
  position: relative;
  display: grid;
  gap: 1.3rem;
  max-width: 30rem;
  margin-top: 2.6rem;
}

.chain::before,
.chain::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 2px;
}

.chain::before {
  background: repeating-linear-gradient(to bottom, rgb(74 90 122 / 0.8) 0 4px, transparent 4px 8px);
}

/* the pulse: an 18px block at the top of a wire-length box that slides down
   by its own height, so it's transform-only whatever the chain measures */
.chain::after {
  left: 6px;
  width: 6px;
  background: linear-gradient(var(--yellow), var(--yellow)) 0 0 / 100% 18px no-repeat;
  filter: drop-shadow(0 0 6px rgb(232 185 46 / 0.9));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ost.is-playing .chain::after {
  opacity: 1;
  animation: chain-pulse 1.6s linear infinite;
}

@keyframes chain-pulse {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100% - 18px)); }
}

.chain__step {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding-left: 2.4rem;
}

.chain__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  z-index: 1;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tile-hi);
  border-radius: 4px;
  background: var(--tile);
  box-shadow: 0 3px 0 #1b2131;
}

.chain__step:nth-child(2)::before {
  border-color: var(--yellow-rim);
  background: var(--yellow-tile);
  box-shadow: 0 3px 0 #5e4b00;
}

.chain__step:nth-child(n + 3)::before {
  border-color: var(--green-rim);
  background: var(--green-tile);
  box-shadow: 0 3px 0 #10500f;
}

.chain__step:last-child::before {
  box-shadow: 0 3px 0 #10500f, 0 0 18px rgb(98 206 65 / 0.55);
}

.chain__step b {
  font-weight: 400;
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  -webkit-font-smoothing: none;
}

.chain__step span {
  font-size: 0.95rem;
  color: var(--muted);
}

/* the deck: glossy black plastic, ribbed top, a VFD-style screen */
.deck {
  position: relative;
  container: deck / inline-size;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: 20px;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.05), transparent 28%),
    linear-gradient(160deg, #151a29, #07090f 62%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    inset 0 -3px 0 rgb(0 0 0 / 0.45),
    0 40px 80px -30px rgb(0 0 0 / 0.9),
    0 0 90px -20px rgb(53 160 255 / 0.25);
}

.deck__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.2rem 1rem;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

.deck__power {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.deck__power i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b, inset 0 0 2px rgb(255 255 255 / 0.8);
}

/* the name sits in a strip of the console's ribbing */
.deck__brand {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  color: var(--paper);
}

.deck__brand::before,
.deck__brand::after {
  content: "";
  flex: 1;
  height: 13px;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.09) 0 1px, rgb(0 0 0 / 0.5) 1px 2px, transparent 2px 4px);
}

.deck__badge {
  font-style: italic;
  background: linear-gradient(to bottom, #fff2b0, var(--yellow) 45%, #c2402a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.deck__screen {
  position: relative;
  overflow: hidden;
  padding: clamp(0.9rem, 2vw, 1.3rem);
  border: 2px solid #000;
  border-radius: 12px;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #0b1a3a, #03050c 70%);
  box-shadow:
    inset 0 0 0 1px rgb(53 160 255 / 0.16),
    inset 0 0 40px rgb(0 0 0 / 0.8),
    0 1px 0 rgb(255 255 255 / 0.07);
  font-family: var(--font-pixel);
  color: var(--cyan);
  -webkit-font-smoothing: none;
}

/* glass sheen + scanlines over the whole screen */
.deck__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(168deg, rgb(255 255 255 / 0.07), transparent 32%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
}

.deck__status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(53 160 255 / 0.6);
}

.deck__state {
  min-width: 4.5em;
  text-align: right;
  color: var(--muted);
}

.deck[data-state="play"] .deck__state {
  color: var(--green-rim);
  text-shadow: 0 0 10px rgb(98 206 65 / 0.7);
}

.deck[data-state="pause"] .deck__state,
.deck[data-state="load"] .deck__state {
  color: var(--yellow);
  text-shadow: 0 0 10px rgb(232 185 46 / 0.6);
  animation: blink 1.1s steps(1) infinite;
}

.deck__title {
  margin-top: 0.9rem;
  overflow: hidden;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: #c4e4ff;
  text-shadow: 0 0 10px rgb(53 160 255 / 0.85), 0 0 26px rgb(53 160 255 / 0.4);
}

.deck__no {
  color: var(--yellow);
  text-shadow: 0 0 10px rgb(232 185 46 / 0.7);
}

.deck__viz {
  width: 100%;
  height: clamp(96px, 13vw, 132px);
  margin-top: 1rem;
}

.deck__seek {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: rgb(196 228 255 / 0.85);
}

/* sliders: a segmented track filled to --p (set by js), a block thumb */
.deck__range {
  --p: 0%;
  --fill: var(--cyan);
  --rest: rgb(53 160 255 / 0.16);
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.deck__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(to right, transparent 0 6px, rgb(3 5 12 / 0.85) 6px 8px),
    linear-gradient(to right, var(--fill) var(--p), var(--rest) var(--p));
}

.deck__range::-moz-range-track {
  height: 8px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(to right, transparent 0 6px, rgb(3 5 12 / 0.85) 6px 8px),
    linear-gradient(to right, var(--fill) var(--p), var(--rest) var(--p));
}

.deck__range::-webkit-slider-thumb {
  width: 10px;
  height: 20px;
  margin-top: -6px;
  border: 0;
  border-radius: 2px;
  background: var(--yellow);
  box-shadow: 0 2px 0 #8a6c15, 0 0 12px rgb(232 185 46 / 0.7);
  -webkit-appearance: none;
  appearance: none;
}

.deck__range::-moz-range-thumb {
  width: 10px;
  height: 20px;
  border: 0;
  border-radius: 2px;
  background: var(--yellow);
  box-shadow: 0 2px 0 #8a6c15, 0 0 12px rgb(232 185 46 / 0.7);
}

/* volume: a ribbed fader cap, like the slider on the front of the console */
.deck__range--vol {
  --fill: var(--green-rim);
  --rest: rgb(142 153 184 / 0.2);
}

.deck__range--vol::-webkit-slider-thumb {
  width: 14px;
  background: repeating-linear-gradient(to right, #dfe4ee 0 2px, #6b7287 2px 3px);
  box-shadow: 0 2px 0 #2a2f3d, 0 0 0 1px rgb(0 0 0 / 0.5);
}

.deck__range--vol::-moz-range-thumb {
  width: 14px;
  background: repeating-linear-gradient(to right, #dfe4ee 0 2px, #6b7287 2px 3px);
  box-shadow: 0 2px 0 #2a2f3d, 0 0 0 1px rgb(0 0 0 / 0.5);
}

.deck__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin-top: 1.3rem;
}

.deck__transport {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.deck__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 10px;
  background: linear-gradient(to bottom, #1e2334, #0d1019);
  box-shadow: 0 4px 0 #02030a, inset 0 1px 0 rgb(255 255 255 / 0.08);
  font-size: 0.85rem;
  color: var(--paper);
  transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.2s ease;
}

.deck__btn:hover {
  color: var(--yellow);
}

.deck__btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #02030a, inset 0 1px 0 rgb(255 255 255 / 0.08);
}

/* the bar in |◀ and ▶| */
.deck__bar {
  width: 0.16em;
  height: 0.84em;
  background: currentColor;
}

.deck__btn--play {
  width: 72px;
  height: 56px;
  border-color: #f7da72;
  background: linear-gradient(to bottom, #f5d25e, var(--yellow));
  box-shadow: 0 5px 0 #8a6c15, 0 0 30px rgb(232 185 46 / 0.3);
  color: #1a1503;
}

.deck__btn--play:hover {
  color: #1a1503;
  box-shadow: 0 5px 0 #8a6c15, 0 0 46px rgb(232 185 46 / 0.55);
}

.deck__btn--play:active {
  box-shadow: 0 2px 0 #8a6c15, 0 0 24px rgb(232 185 46 / 0.4);
}

/* ▶ when stopped, ❚❚ while playing */
.deck__icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
}

.ost.is-playing .deck__icon {
  width: 14px;
  height: 17px;
  margin: 0;
  border: 0;
  background: linear-gradient(to right, currentColor 0 5px, transparent 5px 9px, currentColor 9px);
}

.deck__vol {
  display: flex;
  flex: 1 1 170px;
  align-items: center;
  gap: 0.9rem;
  max-width: 240px;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

.deck__tracks {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px dashed rgb(74 90 122 / 0.5);
}

/* two columns only once the deck itself has room for whole titles */
@container deck (min-width: 560px) {
  .deck__tracks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.deck-track {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgb(74 90 122 / 0.4);
  border-radius: 8px;
  background: rgb(4 6 13 / 0.5);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-font-smoothing: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.deck-track:hover {
  border-color: rgb(142 153 184 / 0.7);
  color: var(--paper);
}

.deck-track__no,
.deck-track__dur {
  color: rgb(142 153 184 / 0.6);
}

.deck-track__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-track[aria-current="true"] {
  border-color: var(--yellow);
  background: rgb(232 185 46 / 0.08);
  color: var(--paper);
}

.deck-track[aria-current="true"] .deck-track__no {
  color: var(--yellow);
}

.deck__foot {
  margin-top: 1rem;
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  letter-spacing: 0.24em;
  text-align: right;
  text-transform: uppercase;
  color: rgb(142 153 184 / 0.65);
  -webkit-font-smoothing: none;
}

/* phones: transport centred over a full-width fader; the ribbing gives way */
@media (max-width: 520px) {
  .deck__transport {
    flex: 1 0 100%;
    justify-content: center;
  }

  .deck__vol {
    max-width: none;
  }

  .deck__brand::before,
  .deck__brand::after {
    display: none;
  }

  .deck__brand {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   Final CTA
--------------------------------------------------------------------------- */
.get {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding-block: 8rem;
  text-align: center;
}

.get__bg {
  position: absolute;
  inset: -8% 0;
}

.get__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  opacity: 0.6;
  will-change: transform;
}

.get__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgb(4 6 13 / 0.35), rgb(4 6 13 / 0.92) 80%),
    linear-gradient(to bottom, var(--night), transparent 25%, transparent 75%, var(--night));
}

.get__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.get__press {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--yellow);
  animation: blink 1.1s steps(1) infinite;
}

.get__title {
  margin-top: 1.6rem;
  font-family: var(--font-pixel);
  font-size: clamp(1.8rem, 5.6vw, 4.8rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: -3px 0 0 rgb(226 61 160 / 0.6), 3px 0 0 rgb(53 160 255 / 0.6), 0 0 24px rgb(4 6 13 / 0.9);
  -webkit-font-smoothing: none;
}

.get .lede {
  margin-inline: auto;
}

.get__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.6rem;
}

/* ---------------------------------------------------------------------------
   FAQ
--------------------------------------------------------------------------- */
.faq__list {
  display: grid;
  gap: 0.9rem;
  margin-top: 3rem;
}

.faq-card {
  border: 1px solid rgb(74 90 122 / 0.45);
  border-radius: 14px;
  background: linear-gradient(160deg, rgb(12 31 110 / 0.2), rgb(4 6 13 / 0.6));
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.faq-card[open] {
  border-color: rgb(232 185 46 / 0.55);
}

.faq-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  list-style: none;
}

.faq-card summary::-webkit-details-marker {
  display: none;
}

.faq-card h3 {
  font-family: var(--font-pixel);
  font-size: clamp(0.66rem, 1.2vw, 0.8rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 0.2s ease;
}

.faq-card summary:hover h3,
.faq-card[open] h3 {
  color: var(--yellow);
}

.faq-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--yellow);
  transition: transform 0.35s var(--ease-out);
}

.faq-icon::after {
  transform: rotate(90deg);
}

.faq-card[open] .faq-icon::after {
  transform: rotate(0deg);
}

.faq-card__body {
  padding: 0 1.4rem 1.4rem;
  overflow: hidden;
}

.faq-card__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.faq-card__body a {
  color: var(--cyan);
}

.faq-card__body a:hover {
  color: var(--paper);
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top: 5rem;
  border-top: 1px solid rgb(74 90 122 / 0.35);
  background: linear-gradient(to bottom, var(--night), #02030a);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
}

.footer__about {
  max-width: 28rem;
}

.footer__logo {
  width: auto;
  height: 40px;
  image-rendering: pixelated;
}

.footer__about p {
  margin-top: 1.3rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.6rem 4rem;
  align-content: start;
  font-size: 0.95rem;
}

.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer__nav a:hover {
  color: var(--paper);
}

/* the wordmark spans the column edge to edge, sized off the column rather
   than the viewport (which overshot the 1240px cap and ignores scrollbars).
   Glyphs advance 1em but the D's ink stops at 0.75em, so the word is 7.75em
   of ink; its blank tail overflows the box, where background-clip leaves it */
.footer > .wrap {
  container-type: inline-size;
}

.footer__word {
  margin-top: 3rem;
  font-family: var(--font-pixel);
  font-size: calc((100cqi - 2px) / 7.75);
  line-height: 0.9;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(to bottom, rgb(74 90 122 / 0.55), rgb(74 90 122 / 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-font-smoothing: none;
  user-select: none;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.4rem;
  padding-block: 1.4rem 2rem;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__legal a {
  transition: color 0.2s ease;
}

.footer__legal a:hover {
  color: var(--paper);
}

/* ---------------------------------------------------------------------------
   Back to top
--------------------------------------------------------------------------- */
.back-top {
  position: fixed;
  right: max(1.2rem, env(safe-area-inset-right));
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgb(142 153 184 / 0.55);
  border-radius: 12px;
  background: rgb(4 6 13 / 0.92);
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out), border-color 0.2s ease;
}

.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.back-top:hover {
  border-color: var(--yellow);
}

/* ---------------------------------------------------------------------------
   Video guide modal (js/video-guide.js)
--------------------------------------------------------------------------- */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgb(12 31 110 / 0.25), transparent 45%),
    rgb(4 6 13 / 0.88);
}

.video-modal-backdrop.hidden {
  display: none;
}

.video-modal-panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: calc(100svh - 44px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 2px solid var(--tile-hi);
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(12 31 110 / 0.25), transparent 34%), rgb(4 6 13 / 0.98);
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.72), 0 0 48px rgb(53 160 255 / 0.14);
  animation: modal-in 0.45s var(--ease-out) both;
}

.video-modal-panel:focus {
  outline: none;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
}

.video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgb(74 90 122 / 0.55);
}

.video-modal-kicker {
  margin-bottom: 0.65rem;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.video-modal-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.8rem, 2.5vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--yellow);
}

.video-modal-body {
  padding: clamp(0.75rem, 3vw, 1.5rem);
}

.score-modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--tile-hi);
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--paper);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.score-modal-close:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.leaderboard-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(142 153 184 / 0.5);
  border-radius: 10px;
  background: #000;
}

.leaderboard-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* ---------------------------------------------------------------------------
   Analytics consent (js/analytics-consent.js) — a small, quiet card in the
   bottom-left corner. Reject and Accept get identical weight. Once a choice
   is made it's reopened from "Cookie settings" in the footer, so the shared
   script's floating settings button stays hidden on this page.
--------------------------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  z-index: 140;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  gap: 0.65rem;
  width: min(20rem, 100vw - 2rem);
  padding: 0.8rem 0.9rem 0.85rem;
  border: 1px solid rgb(74 90 122 / 0.45);
  border-radius: 12px;
  background: rgb(4 6 13 / 0.94);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  animation: consent-in 0.5s var(--ease-out) 0.6s both;
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
}

.cookie-consent[hidden],
.cookie-settings {
  display: none !important;
}

.cookie-consent__copy {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
}

/* the heading stays for screen readers (it labels the dialog) */
.cookie-consent__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cookie-consent a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cookie-consent__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cookie-consent__button {
  min-height: 34px;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgb(142 153 184 / 0.45);
  border-radius: 6px;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  transition: border-color 0.15s ease, color 0.15s ease;
  -webkit-font-smoothing: none;
}

.cookie-consent__button:hover,
.cookie-consent__button:focus-visible {
  border-color: var(--paper);
}

.cookie-consent__button--accept {
  color: var(--yellow);
}

@media (pointer: coarse) {
  .cookie-consent__button {
    min-height: 40px;
    padding-inline: 1rem;
  }
}

/* leave room for the back-to-top button on phones */
@media (max-width: 640px) {
  .cookie-consent {
    width: min(20rem, 100vw - 5.5rem);
  }
}

/* phones held sideways: copy beside the buttons, so the card stays short */
@media (max-height: 500px) and (orientation: landscape) {
  .cookie-consent {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    width: min(38rem, 100vw - 6rem);
  }
}

/* on phones the card sits over the hero buttons, so while it's up the hero
   copy moves clear of it (js/analytics-consent.js sets --consent-h) */
@media (max-width: 767px) and (min-height: 721px), (max-height: 500px) and (orientation: landscape) {
  .consent-open .hero__copy {
    bottom: calc(var(--consent-h, 0px) + 0.75rem);
  }
}

/* short phones have no room to lift the copy past it, so the card waits
   under the nav instead, over the logo rather than the buttons */
@media (max-width: 767px) and (max-height: 720px) and (orientation: portrait) {
  .cookie-consent {
    top: calc(max(14px, env(safe-area-inset-top)) + 70px);
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Reveal states (only once motion is confirmed)
--------------------------------------------------------------------------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
}

/* hero furniture waits for the intro (js adds .hero-in) */
.motion:not(.hero-in) .hero__copy > * {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
/* the guess HUD only fits beside all five links from about 1200px; below
   that the links would wrap to two lines */
@media (max-width: 1279px) {
  .nav__hud {
    display: none;
  }
}

/* under 1024px the five links no longer fit on one line: menu button */
@media (max-width: 1023px) {
  :root {
    --nav-h: 64px;
  }

  .nav__links {
    display: none;
  }

  .nav__burger {
    display: grid;
  }

  .nav__bar {
    padding: 8px 8px 8px 12px;
  }
}

@media (max-width: 640px) {
  .nav .btn--sm {
    display: none;
  }

  .hero__copy {
    bottom: 6.6rem;
  }

  .kicker {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    letter-spacing: 0.24em;
  }

  .hw__insert {
    font-size: 1.25rem;
  }

  .hw__copy {
    padding: 1.1rem 1.2rem;
  }

  .hw__copy .display {
    font-size: 1.3rem;
  }

  .hw__text {
    margin-top: 0.8rem;
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .hw__copy .chips {
    gap: 0.4rem;
    margin-top: 1rem;
  }

  .hw__copy .chips li {
    padding: 0.45rem 0.6rem;
    font-size: 0.46rem;
    letter-spacing: 0.12em;
  }

  .hero__title {
    font-size: 0.95rem;
  }

  .hero__cta {
    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .badge {
    gap: 0.55rem;
    font-size: 0.42rem;
    letter-spacing: 0.12em;
  }

  .how__stage {
    min-height: 330px;
  }

  .board3d {
    --s: 13vw;
  }

  .footer__nav {
    grid-template-columns: 1fr;
  }

  /* the credits wrap to two lines here; end them above the back-to-top button */
  .footer__legal {
    padding-bottom: 5rem;
  }

  .back-top {
    right: 0.8rem;
    bottom: 0.8rem;
  }
}

@media (max-width: 640px) {
  .hof__board {
    --rx: 4deg;
    --ry: -6deg;
  }

  .hw__text {
    font-size: 0.9rem;
  }
}

/* short phones (SE / mini): drop the blurb so the logo keeps its space */
@media (max-width: 640px) and (max-height: 720px) {
  .hero__sub {
    display: none;
  }

  .hero__copy {
    bottom: 5.8rem;
  }

  .hero__title {
    margin-top: 1rem;
  }

  .hero__cta {
    gap: 0.6rem;
    margin-top: 1.2rem;
  }
}

/* phones on their side: one line of copy and a row of buttons, and the
   hardware copy beside the console rather than under it */
@media (max-height: 500px) and (orientation: landscape) {
  .hero,
  .hw {
    min-height: 0;
  }

  .hero__copy {
    bottom: 1rem;
  }

  .hw__copy {
    left: auto;
    right: max(var(--gutter), env(safe-area-inset-right));
    top: calc(50% + var(--nav-h) / 2);
    bottom: auto;
    width: min(21rem, 44vw);
    padding: 1rem 1.1rem;
    translate: 0 -50%;
  }

  .hw__copy .display {
    margin-top: 0.4rem;
    font-size: 1.05rem;
  }

  .hw__text {
    display: none;
  }

  .hw__copy .chips {
    gap: 0.4rem;
    margin-top: 0.8rem;
  }

  .hw__copy .chips li {
    padding: 0.45rem 0.6rem;
    font-size: 0.46rem;
    letter-spacing: 0.12em;
  }

  .hw__intro {
    bottom: 1rem;
  }

  .badge,
  .hero__sub {
    display: none;
  }

  .hero__title {
    margin-top: 0;
    font-size: 0.85rem;
  }

  .hero__cta {
    grid-auto-flow: column;
    margin-top: 0.8rem;
  }

  .hero__cta .btn {
    min-height: 44px;
    padding: 0.75rem 1.2rem;
    font-size: 0.6rem;
  }
}

@media (max-height: 700px) and (min-width: 641px) {
  .hero__copy {
    bottom: 4.6rem;
  }

  .hero__sub {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion — keep the content, drop the theatrics
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js:not(.booted) .boot {
    display: none;
  }

  .barcode::after,
  .lb-row--1::after,
  .ost.is-playing .chain::after {
    animation: none !important;
  }

  .deck[data-state] .deck__state {
    animation: none;
  }

  .blinker,
  .get__press {
    animation: none !important;
  }

  .odo-digit__strip,
  .board3d {
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}