/* Blocky Blitz launch site. The game's own palette and fonts (scripts/ui/ui_theme.gd):
   ink, gold, and the four career-meter colours; Kenney Blocks for the wordmark, Kenney Future
   for labels, Rubik for reading. One dark look, like the game. */

@font-face { font-family: "Kenney Blocks"; src: url("fonts/kenney-blocks.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Kenney Future"; src: url("fonts/kenney-future.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Variable.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #0d1020;
  --panel: #161a2e;
  --panel-2: #1e2340;
  --line: rgba(251, 247, 238, 0.12);
  --text: #fbf7ee;
  --dim: rgba(251, 247, 238, 0.72);
  --gold: #ffc83d;
  --gold-deep: #d99a16;
  --coral: #ff5e5b;
  --mint: #3ddc97;
  --sky: #5cc8ff;
  --violet: #b48cff;
  --hazard: #ff9a2e;
  --radius: 6px; /* cards: tight corners, a building block, not a pillow */
  --radius-sm: 4px;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
  --max: 1120px;
  --display: "Kenney Future", "Rubik", system-ui, sans-serif;
  --body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; } /* height: the width/height attributes only reserve the ratio */
a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 20px; }
.section { padding-block: 88px; }
/* two plain sections in a row would stack both paddings into one big hole (PLAN-025) */
.section:not(.turn, .cta, .tight) + .section:not(.turn, .cta, .tight) { padding-top: 0; }
main [id] { scroll-margin-top: 72px; } /* jumps land clear of the sticky header */
@media (max-width: 540px) { .section { padding-block: 64px; } .section.tight { padding-block: 44px; } }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 12px 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.section.tight { padding-block: 56px; }

/* --- Type ------------------------------------------------------------------ */
.eyebrow {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.2vw, 44px); letter-spacing: 0.02em; text-transform: uppercase; }
h3 { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: 0.04em; text-transform: uppercase; }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--dim); max-width: 60ch; }
p { margin: 0 0 16px; }

/* --- Header ---------------------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 16, 32, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; transition: min-height 0.25s ease; }
/* past the hero: tighter and darker, so it reads as chrome over the content */
.top.is-scrolled { background: rgba(9, 11, 22, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.top.is-scrolled .wrap { min-height: 56px; }
/* how far down the page you are: the game HUD's gold distance-to-goal bar */
.top::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--progress, 0)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.brand:hover span { color: var(--gold); }
.brand:active img { transform: rotate(-4deg) scale(0.94); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
/* the name in Rubik: at header size the block font's K and Z read as H and 2 (PLAN-025) */
.brand span { font-family: var(--body); font-weight: 800; font-size: 19px; letter-spacing: 0.06em; white-space: nowrap; }
@media (max-width: 420px) { .brand span { font-size: 16px; } .top nav { gap: 12px; } }
.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.top nav a { position: relative; color: var(--dim); text-decoration: none; white-space: nowrap; font-family: var(--display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 2px; transition: color 0.15s ease; }
/* a gold bar grows under the link from the left on hover; stays full on the section you are in */
.top nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.top nav a:not(.btn):hover { color: var(--text); }
.top nav a:not(.btn):hover::after { transform: scaleX(1); }
.top nav a:not(.btn):active { transform: translateY(1px); color: var(--gold); }
.top nav a:not(.btn)[aria-current="location"] { color: var(--gold); }
/* the header's gold pill is a button, not a nav link: its own colours and padding */
.top nav a.btn { color: var(--ink); padding: 10px 18px; }
@media (max-width: 480px) { .top nav a.btn { display: none; } } /* would cover the name; the hero has the same button */
.top nav a[aria-current="location"]::after { transform: scaleX(1); }
@media (max-width: 1080px) { .top nav a.hide-sm { display: none; } } /* the links need about 1040 px */

/* Menu (PLAN-025): up to 1080 px, and only when the script runs, the links move into a panel
   that drops under the header; without the script they stay hidden and the hero has the button */
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 16px;
    border-radius: 999px; border: 2px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer;
    font-family: var(--display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .js .menu-btn:hover, .js .top.is-open .menu-btn { border-color: var(--gold); color: var(--gold); }
  .js .menu-btn:active { transform: translateY(1px); }
  @media (max-width: 380px) { .js .menu-btn { padding: 0 13px; } .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* just the icon: the name needs the room (still announced) */
  .menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, background 0.2s ease; }
  .menu-btn .bars { position: relative; }
  .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; }
  .menu-btn .bars::before { top: -6px; }
  .menu-btn .bars::after { top: 6px; }
  .top.is-open .menu-btn .bars { background: transparent; }
  .top.is-open .menu-btn .bars::before { transform: translateY(6px) rotate(45deg); }
  .top.is-open .menu-btn .bars::after { transform: translateY(-6px) rotate(-45deg); }
  .js .top nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px max(20px, calc(50% - var(--max) / 2 + 20px)) 22px; max-height: calc(100vh - 56px); overflow-y: auto;
    background: #090b16; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45); /* opaque: the gold wordmark bled through even at 97% */
  }
  .js .top.is-open nav { display: flex; }
  .js .top nav a.hide-sm { display: block; padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .js .top nav a:not(.btn)::after { right: auto; width: 28px; bottom: 6px; left: 4px; }
  .js .top nav a.btn { display: flex; justify-content: center; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .menu-btn, .menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { transition: none; } }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.45); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.btn-gold { background: var(--gold); color: var(--ink); }
/* "Coming soon" (PLAN-025): a status line, not a button (no pill, no shadow, nothing to press),
   so the only gold button before launch is one that works: the trailer */
.soon { margin: 18px 0 0; font-weight: 600; font-size: 16px; }
.soon .play { display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: 1px; border-left: 10px solid var(--gold); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.soon-note { color: var(--dim); font-weight: 400; }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: none; }
/* the Play button's "Get it on" line, back on launch day */
.btn small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0.06em; opacity: 0.8; line-height: 1; margin-bottom: 3px; }
.btn .play { width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.btn.small { padding: 10px 18px; font-size: 14px; border-width: 2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 380px) { .btn { padding: 14px 18px; font-size: 15px; letter-spacing: 0.06em; } } /* the smallest phones: the labels still fit on one line */

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 520px at 75% 30%, rgba(255, 200, 61, 0.16), transparent 60%),
    radial-gradient(900px 480px at 10% 90%, rgba(92, 200, 255, 0.10), transparent 60%),
    var(--ink);
}
/* the empty Education Grind street, straight from the game (bot: --street=), faint behind the
   hero's phone. --phone-x is the phone column's centre measured from the page's centre (grid
   1.1fr / 0.9fr, 48 px gap, content min(1080 px, 100vw - 40 px)); a soft radial mask blends every
   edge out. Stacked (phones): behind the phone at the bottom of the section. */
.hero { --phone-x: calc(min(1080px, 100vw - 40px) * 0.275 + 11px); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/hero-street.jpg") calc(50% + var(--phone-x)) 55% / auto 132% no-repeat;
  opacity: 0.44; filter: saturate(0.9);
  -webkit-mask-image: radial-gradient(ellipse 25% 52% at calc(50% + var(--phone-x)) 52%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 25% 52% at calc(50% + var(--phone-x)) 52%, #000 45%, transparent 100%);
}
@media (max-width: 880px) {
  .hero::before {
    background-position: 50% 100%; background-size: 118% auto; opacity: 0.38;
    -webkit-mask-image: radial-gradient(ellipse 70% 32% at 50% 76%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 32% at 50% 76%, #000 40%, transparent 100%);
  }
}
.hero .wrap { position: relative; } /* above the street */
.hero .lede { color: var(--text); } /* full strength over the street: the dimmed colour fell under 4.5:1 on its brightest patches */
.hero .soon-note { color: rgba(251, 247, 238, 0.86); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-block: 72px 88px; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 48px 64px; } }

.wordmark { margin: 0 0 18px; font-family: "Kenney Blocks", var(--display); font-weight: 400; line-height: 1.05; }
.wordmark span { display: block; font-size: clamp(64px, 11vw, 120px); letter-spacing: 0.02em; paint-order: stroke fill; -webkit-text-stroke: 10px var(--ink); }
/* phones: size the name to the screen (at a fixed 64 px it pushed the column, and the text under
   it, past the edge of a 320 px screen); 16.4vw is 64 px on a 390 px phone */
@media (max-width: 540px) { .wordmark span { font-size: 16.4vw; -webkit-text-stroke-width: 2.4vw; } }
.hero .wrap > * { min-width: 0; }
.wordmark .blocky { color: var(--gold); }
.wordmark .blitz { color: var(--text); }
.tagline { font-family: var(--display); font-size: clamp(18px, 2.6vw, 26px); letter-spacing: 0.1em; margin: 0 0 18px; }
.tagline b { color: var(--gold); font-weight: 400; white-space: nowrap; }

.runner {
  width: 129px; /* 258 x 192 frames at half size: wide enough for the blaster's barrel */
  height: 96px;
  background: url("img/run-cycle.png") 0 0 / 1548px 96px no-repeat;
  animation: run 0.6s steps(12) infinite;
  margin: 8px 0 0 -8px;
}
@keyframes run { to { background-position: -1548px 0; } }

/* --- Device frame (PLAN-023) --------------------------------------------------
   A Pixel-style Android phone drawn in CSS (the game is Android-only): black glass bezels, a
   metal rim, a camera in the top bezel and power + volume keys on the right edge. The screen is
   9:16 because every capture and store screenshot is. One unit, --u, is 1% of the phone's short
   side; each placement sets it, and every part scales from it. .land lies the phone on its side
   (keys on top, camera on the left), as the side view is played. */
.device {
  --u: 3.6px;
  --metal: #4a5277;
  position: relative;
  box-sizing: border-box;
  width: calc(var(--u) * 100);
  padding: calc(var(--u) * 6.5) calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 13);
  background: linear-gradient(160deg, #1b2036 0%, #06070d 30%, #06070d 72%, #1b2036 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.35) rgba(255, 255, 255, 0.07),
    0 0 0 calc(var(--u) * 0.8) var(--metal),
    0 0 0 calc(var(--u) * 1.1) #11142a,
    0 30px 70px rgba(0, 0, 0, 0.55);
}
.device .screen { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: calc(var(--u) * 5.5); background: #000; }
.device .screen > img, .device .screen > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.device::after { /* front camera */
  content: "";
  position: absolute;
  top: calc(var(--u) * 2.2);
  left: calc(50% - var(--u) * 1.1);
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a5c92 0%, #0b0d1a 55%, #05060d 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.35) #151a2e;
}
.device::before { /* power key, and the volume rocker below it as a shadow copy */
  content: "";
  position: absolute;
  right: calc(var(--u) * -1.9);
  top: 20%;
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 8);
  border-radius: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0;
  background: var(--metal);
  box-shadow: 0 calc(var(--u) * 12) 0 calc(var(--u) * 0) var(--metal), 0 calc(var(--u) * 17) 0 0 var(--metal);
}
.device.land { width: calc(var(--u) * 179.4); padding: calc(var(--u) * 3.2) calc(var(--u) * 6.5); }
.device.land .screen { aspect-ratio: 16 / 9; }
.device.land::after { top: calc(50% - var(--u) * 1.1); left: calc(var(--u) * 2.2); }
.device.land::before {
  top: calc(var(--u) * -1.9);
  right: 20%;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 0;
  box-shadow: calc(var(--u) * -12) 0 0 0 var(--metal), calc(var(--u) * -17) 0 0 0 var(--metal);
}

.phone {
  --u: min(3.6px, 0.82vw);
  justify-self: center;
  transform: rotate(3deg);
}
.phone .badge {
  position: absolute;
  left: -34px;
  bottom: 70px;
  transform: rotate(-6deg);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
}
@media (max-width: 880px) { .phone { transform: none; } .phone .badge { left: 8px; } }
@media (max-width: 540px) { .phone { --u: min(2.7px, 0.7vw); } } /* the loop still reads; about 150 px less scrolling */

/* --- The turn -------------------------------------------------------------- */
.turn { background: var(--panel); border-block: 1px solid var(--line); }
.turn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 40px; }
@media (max-width: 880px) { .turn-grid { grid-template-columns: 1fr; } }
.turn-shots { display: grid; grid-template-columns: 0.42fr 1fr; gap: 16px; align-items: end; }
.turn-shots.solo { grid-template-columns: 1fr; }
video.shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Runner and blaster pickers (PLAN-023): two phone-shaped loops side by side, stacked on small phones */
.pickers { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 36px; margin-top: 40px; }
.pickers .device { --u: min(3px, 0.4vw); }
.pickers figure { margin: 0; }
.pickers figcaption { margin-top: 12px; text-align: center; font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 520px) { .pickers { gap: 16px; } .pickers .device { --u: calc((100vw - 64px) / 206); } .pickers figcaption { font-size: 14px; } } /* side by side: two phones fit in 390 px */
.shot { border-radius: var(--radius); border: 3px solid #2a3050; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); overflow: hidden; background: #05060d; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.steps .n {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center;
  font-family: var(--display); font-size: 20px; background: var(--gold); color: var(--ink);
}
.steps strong { display: block; font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; font-size: 17px; }
.steps span { color: var(--dim); }

/* --- Stages ---------------------------------------------------------------- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 980px) { .stages { grid-template-columns: repeat(2, 1fr); } }
/* phones: one swipeable row (the next card peeks in, so it reads as "more this way") instead of
   four tall cards stacked (PLAN-025) */
@media (max-width: 540px) {
  .stages { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 0 20px 12px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .stages::-webkit-scrollbar { display: none; }
  .stages .stage { flex: 0 0 80%; scroll-snap-align: start; }
}
.stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stage .body { padding: 18px 20px 22px; display: grid; gap: 8px; }
.stage .num { font-family: var(--display); font-size: 13px; letter-spacing: 0.14em; color: var(--dim); }
.stage h3 { font-size: 19px; }
.stage p { margin: 0; color: var(--dim); font-size: 16px; }
/* which meter a stage leans on: a label (dot + text), not a pill, because a pill reads as a
   button and this is not one (PLAN-025) */
.chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; flex: none; }

/* --- Meters ---------------------------------------------------------------- */
.meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 820px) { .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meter { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.meter .label { font-family: var(--display); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.meter .bar { height: 10px; border-radius: 999px; background: #2a3050; margin: 12px 0 10px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: inherit; }
.meter p { margin: 0; font-size: 15px; color: var(--dim); }

/* --- Features -------------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 880px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.feature .dot { width: 14px; height: 14px; border-radius: 4px; margin-bottom: 14px; }
.feature h3 { font-size: 17px; margin-bottom: 8px; }
.feature p { margin: 0; color: var(--dim); font-size: 16px; }

/* --- Career card ----------------------------------------------------------- */
.card-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .card-split { grid-template-columns: 1fr; } }
.card-split .device { --u: min(3.6px, 0.8vw); justify-self: center; }
.quote {
  margin: 24px 0 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
}
.quote small { display: block; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #b8322f; font-weight: 800; }

/* --- Carousel ------------------------------------------------------------- */
.carousel { position: relative; margin-top: 32px; }
.carousel .track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px max(20px, calc(50% - 180px)) 24px;
  scrollbar-width: none;
}
.carousel .track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
  opacity: 0.45;
  transform: scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.slide.is-active { opacity: 1; transform: scale(1); }
/* portrait phones about 540 px tall; landscape ones lie down at about 330 px, never wider than the screen */
.slide .device { --u: min(3px, 0.34vh, 0.8vw); margin: 10px 14px; }
.slide .device.land { --u: min(3.2px, 0.36vh, 0.46vw); }
.slide figcaption { text-align: center; margin-top: 12px; font-family: var(--display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.car-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.car-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 22px; cursor: pointer; display: grid; place-items: center;
}
.car-btn:hover { background: var(--panel-2); border-color: var(--gold); color: var(--gold); }
/* each dot is drawn small but pressed big: a 24 x 44 px target around it (PLAN-025) */
.dots { display: flex; }
.dots button { position: relative; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.25s ease; }
.dots button::before { content: ""; position: absolute; left: 7px; top: 17px; width: 10px; height: 10px; border-radius: 999px; background: #2a3050; transition: width 0.25s ease, background 0.25s ease; }
.dots button:hover::before { background: var(--dim); }
.dots button[aria-current="true"] { width: 42px; }
.dots button[aria-current="true"]::before { width: 28px; background: var(--gold); }

/* --- Career cast ------------------------------------------------------------ */
.cast-head { display: grid; gap: 36px; margin-top: 40px; } /* stacked: side by side, the bubbles wrapped to ribbons */
/* Each group is one slow row of cards (a marquee: see "Marquees"). The cards keep their hover lift;
   hovering or focusing a row pauses it. The row fades out at both edges. */
.cast { margin: 18px -20px 0; padding: 8px 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cast-head > * { min-width: 0; } /* grid items would otherwise stretch to the whole track */
.cast .track > .cast-item { flex: none; width: 220px; margin-right: 14px; } /* margin, not gap: both halves stay the same width */
.cast:focus-within .track { animation-play-state: paused; }
@media (max-width: 560px) { .cast .track > .cast-item { width: 176px; } }
/* no motion wanted: a plain row you can swipe, without the looping copies */
@media (prefers-reduced-motion: reduce) {
  .cast.marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; margin-inline: 0; }
  .cast .track > [aria-hidden="true"] { display: none; }
}
.cast-item {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 12px 14px; display: grid; justify-items: center; gap: 10px; text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.cast-item:hover { transform: translateY(-3px); border-color: currentColor; }
.cast-item img { width: 84px; height: 84px; object-fit: contain; }
.cast-item b { font-family: var(--display); font-weight: 400; font-size: 13px; overflow-wrap: anywhere; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.bubble {
  position: relative; font-family: var(--display); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink); padding: 5px 9px; border-radius: 9px; border: 2px solid var(--ink);
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink);
}
.good { color: var(--mint); } .good .bubble { background: var(--mint); }
.bad { color: var(--hazard); } .bad .bubble { background: var(--hazard); }
.cast-label { display: flex; align-items: center; gap: 10px; font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 15px; }
.cast-label i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* --- Final call ------------------------------------------------------------ */
.cta {
  text-align: center;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.10) 0deg 10deg, transparent 10deg 30deg),
    radial-gradient(circle at 50% 50%, var(--gold), var(--gold-deep));
  color: var(--ink);
}
.cta h2 { color: var(--ink); }
.cta p { color: rgba(13, 16, 32, 0.8); max-width: 52ch; margin-inline: auto; }
.cta .btn-gold { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.cta .btn-row { justify-content: center; }
.cta .soon { justify-content: center; }
.cta .soon .play { border-left-color: var(--ink); }
.cta .soon-note { color: rgba(13, 16, 32, 0.72); }

/* --- Footer ---------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding-block: 36px; color: var(--dim); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
footer a { color: var(--dim); }
footer a:hover { color: var(--text); }
@media (max-width: 720px) { footer nav { gap: 4px 20px; margin-left: 0; } footer a { display: inline-block; padding-block: 10px; } } /* 44 px tall targets for thumbs */

/* --- Document pages (privacy, credits) ---------------------------------- */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 20px 88px; }
.doc h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 44px); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
.doc h2 { font-size: 22px; margin: 40px 0 12px; color: var(--gold); }
.doc .meta { color: var(--dim); margin-bottom: 28px; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.doc pre { white-space: pre-wrap; font-family: var(--body); font-size: 14px; color: var(--dim); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }

/* --- Trailer (PLAN-023) ------------------------------------------------------ */
.sub { color: var(--dim); max-width: 60ch; margin: 0; }
.trailer { margin-top: 28px; }
.trailer-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tab {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.tab[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.trailer-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid #2a3050;
  background: #05060d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.trailer.is-tall .trailer-frame { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.trailer-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.big-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--gold);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.big-play:hover { transform: scale(1.06); }
.big-play span { display: block; width: 0; height: 0; margin-left: 38px; border-left: 34px solid var(--ink); border-top: 21px solid transparent; border-bottom: 21px solid transparent; }
.big-play[hidden] { display: none; }
.trailer-desc { margin-top: 14px; color: var(--dim); max-width: 75ch; }
.trailer-desc summary { cursor: pointer; color: var(--text); font-weight: 600; padding-block: 8px; }
/* --- Video loaders (PLAN-025) --------------------------------------------------------------
   The runner's run cycle (the game's own boot loader) in a pill in the middle of the frame while a
   video that was asked to play is still fetching or stalls. Shows after 0.35 s, hides at once.
   Its strip is a 9 KB copy (img/run-cycle-sm.png, 2x), so it is there before the 291 KB hero one. */
.turn-shots { position: relative; }
.vload {
  position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 3px 12px 3px 4px; border-radius: 999px; border: 2px solid var(--ink); background: rgba(9, 11, 22, 0.88);
  color: var(--gold); font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, calc(-50% + 4px)); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.is-loading > .vload { opacity: 1; transform: translate(-50%, -50%); transition-delay: 0.35s; }
.vload i { width: 43px; height: 32px; flex: none; background: url("img/run-cycle-sm.png") 0 0 / 516px 32px no-repeat; animation: run-sm 0.6s steps(12) infinite; }
@keyframes run-sm { to { background-position: -516px 0; } }
/* the trailer: bigger, where the play button was */
.trailer-frame .vload { padding: 6px 18px 6px 8px; font-size: 14px; }
.trailer-frame .vload i { width: 64.5px; height: 48px; background-size: 774px 48px; animation-name: run-md; }
@keyframes run-md { to { background-position: -774px 0; } }
/* the small side-by-side phones: just the runner */
@media (max-width: 520px) { .pickers .vload { padding-right: 4px; } .pickers .vload span { display: none; } }
@media (prefers-reduced-motion: reduce) { .vload, .is-loading > .vload { transform: translate(-50%, -50%); transition: opacity 0.2s ease; } .vload i { animation: none; } }

/* --- At a glance + FAQ (PLAN-023) --------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 36px; }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { gap: 10px; } .facts div { padding: 12px 14px; } .facts dd { font-size: 16px; } } /* short facts: two columns still fit */
.facts div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.facts dt { font-family: var(--display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
.faq { display: grid; gap: 10px; }
.qa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--display); font-size: 24px; color: var(--gold); flex: none; }
.qa[open] summary::after { content: "\2212"; }
.qa h3 { margin: 0; font-family: var(--body); font-weight: 600; font-size: 18px; letter-spacing: 0; text-transform: none; } /* questions are sentences: Rubik reads them, the block font misreads K and Z */
.qa p { margin: 0 0 18px; color: var(--dim); max-width: 75ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .runner { animation: none; }
  .carousel .track { scroll-behavior: auto; }
  .slide { transition: none; }
  .btn { transition: none; }
  .big-play { transition: none; }
}

/* --- The city (behind everything) ------------------------------------------------------
   A blocky skyline fixed along the bottom of the screen, two layers. The script drifts it left
   as you scroll down, as if you were running past; with reduced motion it stays put. */
.city { position: fixed; left: 0; right: 0; bottom: 0; height: 260px; z-index: -1; pointer-events: none; }
.city i { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-position: var(--x, 0) 100%; }
.city .far { height: 260px; background-image: url("img/city-far.svg"); opacity: 0.9; }
.city .near { height: 170px; background-image: url("img/city-near.svg"); }
.city::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--ink)); }
main, footer { position: relative; } /* above the city */
html, body { overflow-x: clip; } /* the tilted bands overhang the edges on purpose; clip (not hidden) keeps sticky working */
@media (max-width: 700px) { .city { height: 180px; } .city .far { height: 180px; background-size: auto 180px; } .city .near { height: 118px; background-size: auto 118px; } }

/* --- Marquees ---------------------------------------------------------------------------
   Decorative (aria-hidden: every word and icon is also in the page). Each track holds its items
   twice and slides by half its width, so the loop never shows a seam. */
.marquee { overflow: hidden; position: relative; }
.marquee .track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.marquee.rev .track { animation-direction: reverse; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* a gold band of the game's lines, under the hero */
.band { background: var(--gold); color: var(--ink); border-block: 3px solid var(--ink); transform: rotate(-1.4deg); margin: -18px -20px 0; position: relative; z-index: 2; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35); }
.band .track span { font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0.06em; padding: 14px 0 12px; white-space: nowrap; display: flex; align-items: center; }
.band .track span::after { content: ""; width: 14px; height: 14px; background: var(--ink); margin: 0 26px; transform: rotate(45deg); }

/* the cast on parade: pickups and obstacles cross paths, as they do on the road. A mint band of
   pickups and an amber band of obstacles, tilted against each other, sliding opposite ways. */
.parade { position: relative; height: 280px; margin-block: 24px; }
.parade .marquee { position: absolute; left: -40px; right: -40px; top: 50%; border-block: 3px solid var(--ink); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3); }
.parade .good { background: var(--mint); top: 34%; transform: translateY(-50%) rotate(-4.5deg); z-index: 1; }
.parade .bad { background: var(--hazard); top: 66%; transform: translateY(-50%) rotate(4deg); z-index: 2; }
.parade .track > div { display: flex; align-items: center; gap: 10px; margin-right: 40px; padding-block: 8px; }
.parade img { width: 60px; height: 60px; image-rendering: pixelated; flex: none; filter: drop-shadow(3px 4px 0 rgba(13, 16, 32, 0.35)); }
.parade .bubble { font-size: 13px; background: var(--text); }
.parade .bubble::after { display: none; }
@media (max-width: 700px) { .parade { height: 230px; } .parade .good { top: 30%; } .parade .bad { top: 70%; } .parade img { width: 48px; height: 48px; } }

/* crossed caution tape before the last call to action: the game's own caption lines */
.tape { position: relative; height: 170px; margin-block: 30px; }
.tape .marquee { position: absolute; left: -40px; right: -40px; top: 50%; border-block: 3px solid var(--ink); }
.tape .t1 { background: var(--hazard); transform: translateY(-50%) rotate(-3.5deg); }
.tape .t2 { background: var(--mint); transform: translateY(-50%) rotate(3deg); }
.tape .track span { font-family: var(--display); color: var(--ink); font-size: clamp(16px, 1.8vw, 21px); letter-spacing: 0.06em; padding: 10px 0 8px; white-space: nowrap; display: flex; align-items: center; }
.tape .track span::after { content: ""; width: 26px; height: 12px; margin: 0 22px; background: repeating-linear-gradient(-45deg, var(--ink) 0 5px, transparent 5px 10px); }

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

/* Doubles: two single-line marquees crossing as solid tape bands (like the caution tape above the
   last call to action), each pair in its own two colours. Decorative, like the others. */
.duo { --accent: var(--gold); --accent2: var(--sky); position: relative; height: 170px; margin-block: 24px; }
.duo .marquee { position: absolute; left: -40px; right: -40px; top: 50%; border-block: 3px solid var(--ink); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3); }
.duo .big { background: var(--accent); transform: translateY(-50%) rotate(-3deg); z-index: 1; }
.duo .small { background: var(--accent2); transform: translateY(-50%) rotate(2.5deg); z-index: 2; }
.duo .track span { font-family: var(--display); color: var(--ink); font-size: clamp(16px, 1.8vw, 21px); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 0 8px; white-space: nowrap; display: flex; align-items: center; }
.duo .track span::after { content: ""; width: 26px; height: 12px; margin: 0 22px; background: repeating-linear-gradient(-45deg, var(--ink) 0 5px, transparent 5px 10px); }
@media (max-width: 700px) { .duo { height: 170px; } .duo .big { top: 32%; transform: translateY(-50%) rotate(-5deg); } .duo .small { top: 68%; transform: translateY(-50%) rotate(4.5deg); } } /* narrow screens: spread apart so both bands show */

/* Ribbon ripple (PLAN-024). While a band ripples, the script hides its own fill, ink edges and
   shadow and draws them as one wavy SVG ribbon behind the words (a clip-path would cut the border
   and the shadow). Overflow is clipped sideways only, so the edges and the shadow can wave past
   the box. Back to the plain CSS band when the wave dies out; never under reduced motion. */
.marquee.is-rippling { overflow-x: clip; overflow-y: visible; background: none; border-color: transparent; box-shadow: none; }
.marquee > .ripple { position: absolute; left: 0; z-index: -1; overflow: visible; pointer-events: none; }

/* --- Parallax and reveals --------------------------------------------------------------
   Set only when the script runs and motion is welcome (html.fx). Parallax uses the individual
   `translate` property so it composes with each element's own transform (the hero phone's tilt);
   reveals use opacity and `transform` on elements without one. */
.fx [data-reveal] { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.fx [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); } /* once in, the element's own rules (hover lifts) apply */
.fx [data-depth] { will-change: translate; }