/* ==========================================================================
   agentX : Thruster Unlimited
   Palette and register come from the brand studio's palette.py: near-black
   grounds on a steel ramp, saturated red and blue that mean TEAM, amber and
   cyan for instrumentation only.

   Two ideas carry the page. The lockup's red and blue dash pair opens every
   eyebrow, and a tick rail (the kind of scale a speed readout sits on) runs
   under every heading and along the speed tape. Big display numerals sit
   ghosted behind cards, maps and the home page blocks, the way a jersey
   number sits behind a name.

   Type is Oswald, served from this origin, because the content security
   policy names no host but this one. Support copy stays the system grotesque.
   ========================================================================== */

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald-var.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --void:      #05070B;
  --ink:       #090C12;
  --graphite:  #10141C;
  --slate-d:   #1A2029;
  --slate:     #2A323E;
  --steel-d:   #414B5A;
  --steel:     #5E6A7B;
  --steel-l:   #8E9AAB;
  --silver:    #BAC4D2;
  --bone:      #E6EAF1;
  --white:     #FBFCFE;

  --red-d:  #4E0713;
  --red-b:  #A50E27;
  --red:    #D31533;
  --red-l:  #FF4A5E;
  --blue-d: #061A4E;
  --blue-b: #12379E;
  --blue:   #1E52DC;
  --blue-l: #4E8CFF;

  --amber: #F5A524;
  --cyan:  #39D8E8;

  --display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --cut: 12px;
  --bar: 66px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* the faint grid: the editor's integer world, one line per cell */
  --grid-line: rgba(142, 154, 171, 0.055);
  --ghost-stroke: rgba(142, 154, 171, 0.16);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--silver);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--red); color: var(--white); }

a { color: var(--bone); text-decoration-color: var(--steel-d); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--red-l); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone);
  color: var(--void);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* The top bar is fixed, so every page but the home page starts under it. The
   home page's plate runs up behind it instead. */
main { padding-top: var(--bar); }
body.is-home main { padding-top: 0; }

/* ── Motion ──────────────────────────────────────────────────────────── */

/* Elements marked .reveal arrive when they scroll into view. Only when the
   script is running: with it off, everything is simply there. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.js .cards .card:nth-child(2), .js .spec-grid .spec:nth-child(2) { transition-delay: 0.07s; }
.js .cards .card:nth-child(3), .js .spec-grid .spec:nth-child(3) { transition-delay: 0.14s; }
.js .cards .card:nth-child(4), .js .spec-grid .spec:nth-child(4) { transition-delay: 0.21s; }
.js .cards .card:nth-child(5), .js .spec-grid .spec:nth-child(5) { transition-delay: 0.28s; }
.js .cards .card:nth-child(6), .js .spec-grid .spec:nth-child(6) { transition-delay: 0.35s; }
.js .hero-stats.reveal { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Shared type ─────────────────────────────────────────────────────── */

/* The dash pair from the lockup, red over blue, leaning like the X. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--steel-l);
  margin: 0 0 0.7rem;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 30px;
  height: 12px;
  background:
    linear-gradient(var(--red), var(--red)) 0 0 / 22px 4px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 8px 8px / 22px 4px no-repeat;
  transform: skewX(-22deg);
}

.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

/* The tick rail: small ticks every 12px, a tall one every 60px, on a line. */
.rail {
  height: 10px;
  max-width: 420px;
  margin: 0.1rem 0 1.4rem;
  background:
    repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 60px) 0 0 / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--steel-d) 0 1px, transparent 1px 12px) 0 4px / 100% 6px no-repeat,
    linear-gradient(var(--slate), var(--slate)) 0 100% / 100% 1px no-repeat;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--steel-l);
  max-width: 60ch;
  margin: 0 0 2.5rem;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  min-height: var(--bar);
  padding: 0.7rem var(--gut);
  background: linear-gradient(rgba(5, 7, 11, 0.85), rgba(5, 7, 11, 0));
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Once the page has moved, the bar becomes a solid plate. */
.topbar.is-scrolled {
  background: rgba(5, 7, 11, 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--slate-d);
}

.topbar-mark { flex: none; line-height: 0; }
.topbar-mark img { width: 132px; height: auto; }

.topbar-nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 2rem);
  margin-left: auto;
}
.topbar-nav a {
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.topbar-nav a:hover { color: var(--white); }
.topbar-nav a:hover::after,
.topbar-nav a[aria-current="page"]::after { transform: scaleX(1); }
.topbar-nav a[aria-current="page"] { color: var(--white); }

.tag {
  flex: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}
.tag-alpha {
  color: var(--amber);
  border: 1px solid rgba(245, 165, 36, 0.4);
  background: rgba(245, 165, 36, 0.07);
}

/* Below this the nav no longer fits beside the mark and the tag, so it drops
   to a second row. Nowrap in a single row would set a minimum width wider
   than the viewport and push the whole document sideways. */
@media (max-width: 980px) {
  :root { --bar: 104px; }
  .topbar { flex-wrap: wrap; row-gap: 0.4rem; }
  .topbar-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.2rem 1.15rem;
  }
  .topbar-nav a { font-size: 0.85rem; }
  .topbar-mark img { width: 112px; }
  .tag { margin-left: auto; }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

/* Two opposite corners cut, the plate cut from the brand. A ghost button is
   drawn as a coloured plate with a dark plate inset one pixel, because a
   border cannot follow a clip-path's diagonal. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.85rem 1.7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  clip-path: polygon(
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))
  );
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-l); }

.btn-ghost { background: var(--steel-d); color: var(--bone); }
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--void);
  clip-path: polygon(
    0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px),
    100% 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px)
  );
}
.btn-ghost:hover { background: var(--blue-l); color: var(--white); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* red on the left, blue on the right: the versus split from the logo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 8% 40%, rgba(165, 14, 39, 0.28), transparent 70%),
    radial-gradient(60% 70% at 92% 70%, rgba(18, 55, 158, 0.32), transparent 70%);
  pointer-events: none;
}

/* The plate: a picture from the game, the loop over it, the lockup on top.
   The bottom edge is cut on the diagonal so the plate leans into the copy. */
.hero-plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 440px;
  max-height: 80vh;
  background: var(--ink);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}

.hero-shot,
.hero-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-loop {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-loop.is-playing { opacity: 1; }

/* The lockup has to read over whatever the picture is doing. */
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 55% at 50% 50%, rgba(5, 7, 11, 0.7), rgba(5, 7, 11, 0.25) 70%, transparent),
    linear-gradient(180deg, rgba(5, 7, 11, 0.55), transparent 30%, transparent 60%, rgba(5, 7, 11, 0.75));
  pointer-events: none;
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: min(58%, 720px);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
}

/* Two bracket corners, one per team, the HUD's frame. */
.hero-corner {
  position: absolute;
  z-index: 1;
  width: 34px;
  height: 34px;
  pointer-events: none;
}
.hero-corner-tl {
  top: calc(var(--bar) + 18px);
  left: var(--gut);
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
}
.hero-corner-br {
  bottom: calc(3.5vw + 18px);
  right: var(--gut);
  border-bottom: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: var(--white);
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--silver);
  max-width: 62ch;
  margin: 0 0 1.9rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }

.hero-note {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  margin: 0;
  font-family: var(--mono);
}

/* The figures strip: four numbers from the game, each on its own plate. */
.hero-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--slate-d);
  border: 1px solid var(--slate-d);
}
.stat {
  background: var(--ink);
  padding: 1.1rem 1.25rem 1rem;
}
.stat-value {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--steel);
  margin-left: 0.35rem;
}
.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-l);
}
.stat.is-measured .stat-value { color: var(--blue-l); }

/* ── Page header ─────────────────────────────────────────────────────── */

/* The top of a page that is not the home page: the same glow as the hero at
   a quieter height, over the arena floor drawn in perspective. */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 70% at 8% 40%, rgba(165, 14, 39, 0.26), transparent 70%),
    radial-gradient(55% 70% at 92% 70%, rgba(18, 55, 158, 0.3), transparent 70%);
  pointer-events: none;
}
.page-head .h2 { font-size: clamp(2.8rem, 1.6rem + 6vw, 6.4rem); }
.page-head .lede { margin-bottom: 0; }

/* The floor: a grid laid flat and lit from the horizon. */
.page-floor,
.foot-floor {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -2px;
  height: 75%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(186, 196, 210, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 196, 210, 0.16) 1px, transparent 1px);
  background-size: 72px 72px;
  transform-origin: 50% 100%;
  transform: perspective(640px) rotateX(62deg);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 80%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 80%);
}

.page-back { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

.not-found { min-height: 60vh; padding-top: clamp(4rem, 10vw, 7rem); }
.not-found .lede { margin-bottom: 2rem; }

/* ── Bands ───────────────────────────────────────────────────────────── */

.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* The alternate band carries the editor's grid, one line per cell. */
.band-alt {
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  border-block: 1px solid var(--slate-d);
}

/* ── Home page blocks ────────────────────────────────────────────────── */

/* One row per page. Heading on one side, the words and the way through on
   the other, sides swapping each row, the row's number ghosted behind. */
.promos { padding-top: clamp(1.5rem, 4vw, 3rem); }

.promo-list { list-style: none; margin: 0; padding: 0; }

.promo {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--slate-d);
}
.promo:nth-child(even) .promo-head { order: 2; }

.promo-head { position: relative; }
.promo .h2 { margin-bottom: 0; font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); }

.promo-ghost,
.card-ghost,
.map-ghost {
  position: absolute;
  z-index: -1;
  font-family: var(--display);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost-stroke);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color 0.4s ease;
}
.promo-ghost {
  left: -0.08em;
  top: -0.62em;
  font-size: clamp(6rem, 12vw, 11rem);
}
.promo:hover .promo-ghost { -webkit-text-stroke-color: rgba(142, 154, 171, 0.34); }

.promo-body p {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  color: var(--steel-l);
  margin: 0 0 1.6rem;
  max-width: 52ch;
}

@media (max-width: 860px) {
  .promo { grid-template-columns: 1fr; gap: 1.25rem; }
  .promo:nth-child(even) .promo-head { order: 0; }
}

/* ── The idea ────────────────────────────────────────────────────────── */

.idea-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) {
  .idea-grid { grid-template-columns: 1fr; }
}

/* The dash pair stood on end: red above, blue below. */
.quote {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) calc(clamp(1.25rem, 3vw, 2rem) + 6px);
  background: linear-gradient(160deg, var(--graphite), var(--ink));
  border: 1px solid var(--slate-d);
  border-left: 0;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(var(--red) 0 50%, var(--blue) 50% 100%);
}
.quote p {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.3;
  color: var(--bone);
}
.quote p:last-child { margin-bottom: 0; }
.quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}

.idea-body p { margin: 0 0 1.1rem; max-width: 58ch; }
.idea-body p:last-child { margin-bottom: 0; }
.idea-body em { color: var(--bone); font-style: italic; }

.idea-kicker {
  color: var(--white);
  font-weight: 700;
  font-size: 1.125rem;
  border-top: 1px solid var(--slate-d);
  padding-top: 1.1rem;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

/* Five cards into a rectangular grid: the track count is a multiple of six
   so a trailing row can be split three ways or two ways and every row fills.
   The renderer emits the count, because CSS cannot ask how many children
   there are. */
.cards {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards .card:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (min-width: 980px) {
  .cards { grid-template-columns: repeat(6, 1fr); }
  .cards .card { grid-column: span 2; }

  .cards.count-1 .card { grid-column: span 6; }
  .cards.count-2 .card { grid-column: span 3; }
  .cards.count-4 .card { grid-column: span 3; }
  .cards.count-5 .card:nth-child(4),
  .cards.count-5 .card:nth-child(5) { grid-column: span 3; }
  .cards.count-7 .card:nth-child(6),
  .cards.count-7 .card:nth-child(7) { grid-column: span 3; }
}

/* A card is a plate with one corner cut and a team edge. The number of the
   card sits ghosted behind its name. The second line is pinned to the bottom
   so the row lines up whatever the copy length. */
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--graphite), var(--ink));
  border-left: 3px solid var(--red);
  padding: clamp(1.4rem, 3vw, 2rem);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform 0.35s var(--ease), background-color 0.3s ease;
}
.card-blue { border-left-color: var(--blue); }
.js .reveal.is-in.card:hover,
.card:hover { transform: translateY(-3px); }

.card-ghost {
  right: 0.35rem;
  top: -0.55rem;
  font-size: clamp(5rem, 8vw, 7.5rem);
}
.card-red:hover .card-ghost  { -webkit-text-stroke-color: rgba(255, 74, 94, 0.5); }
.card-blue:hover .card-ghost { -webkit-text-stroke-color: rgba(78, 140, 255, 0.5); }

.card-index {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--steel);
  margin-bottom: 0.6rem;
}

.card-name {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--white);
}

.card-what { margin: 0 0 1.1rem; font-size: 0.9375rem; color: var(--steel-l); }

.card-brake {
  margin: auto 0 0;
  font-size: 0.875rem;
  color: var(--silver);
  border-top: 1px solid var(--slate);
  padding-top: 0.9rem;
}
.card-brake span {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-right: 0.5rem;
  color: var(--white);
}
.card-red .card-brake span  { color: var(--red-l); }
.card-blue .card-brake span { color: var(--blue-l); }

.foot-note {
  font-size: 0.875rem;
  color: var(--steel);
  max-width: 70ch;
  margin: 0;
}

/* ── Speed tape ──────────────────────────────────────────────────────── */

/* Every speed in the tables on one scale. The script places the pins from
   their values and they slide out from zero as the tape comes into view.
   Without the script the tape stays hidden rather than drawing every pin at
   zero, and the tables below carry the same numbers. */
.tape { display: none; }
.js .tape {
  display: block;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  /* Room at both ends for the label of a pin sitting at zero or at the max. */
  padding: 3.2rem 3.5rem 2.6rem;
}

.tape-pins {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 0;
}

.pin {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transition: left 1.1s var(--ease);
}
.pin::after {
  content: "";
  width: 2px;
  height: 22px;
  background: var(--bone);
}
.pin-label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-l);
  white-space: nowrap;
}
.pin-value {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.3rem;
}
.pin.is-measured .pin-value { color: var(--blue-l); }
.pin.is-measured::after { background: var(--blue-l); }

/* Every other pin hangs below the bar so neighbouring labels never collide. */
.pin-low {
  bottom: auto;
  top: 100%;
  flex-direction: column-reverse;
}
.pin-low .pin-value { margin: 0.3rem 0 0; }

.tape-bar {
  position: relative;
  height: 14px;
  background:
    linear-gradient(var(--steel-d), var(--steel-d)) 0 50% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 100%) 0 0 / 12.5% 100% no-repeat;
}
.tape-bar span {
  position: absolute;
  top: 100%;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--steel);
}
.tape-zero { left: 0; transform: translateX(-50%); }

@media (max-width: 620px) {
  .pin-label { font-size: 0.62rem; letter-spacing: 0.1em; }
  .pin-value { font-size: 1rem; }
}

/* ── Numbers ─────────────────────────────────────────────────────────── */

.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 660px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .spec-grid { grid-template-columns: repeat(6, 1fr); }
  .spec-grid > .spec { grid-column: span 2; }
  .spec-grid.count-4 > .spec { grid-column: span 3; }
  .spec-grid.count-5 > .spec:nth-child(4),
  .spec-grid.count-5 > .spec:nth-child(5) { grid-column: span 3; }
  .spec-grid.count-2 > .spec { grid-column: span 3; }
  .spec-grid.count-1 > .spec { grid-column: span 6; }
}

.spec {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--graphite), var(--ink));
  border: 1px solid var(--slate-d);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.spec-title {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-l);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--slate);
}

.spec-rows { margin: 0; }

.spec-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(42, 50, 62, 0.5);
}
.spec-row:last-child { border-bottom: 0; }

.spec-row dt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--steel-l);
}

.spec-note {
  display: block;
  font-size: 0.75rem;
  color: var(--steel-d);
  margin-top: 0.1rem;
}

.spec-row dd {
  flex: none;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.spec-row dd b {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.spec-row dd i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--steel);
  margin-left: 0.35rem;
}

/* A measured value is a fact taken off a real build, not a design target.
   The distinction is the whole credibility of this section. */
.spec-row.is-measured dd b { color: var(--blue-l); }

.spec-foot {
  margin: auto 0 0;
  padding-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--steel);
  border-top: 1px solid var(--slate);
}

.spec-legend b { color: var(--blue-l); }

/* ── Footage reel ────────────────────────────────────────────────────── */

.reel { margin-top: 0.5rem; }

/* The stage is framed by two bracket corners, the same frame as the hero. */
.reel-stage {
  position: relative;
  border: 1px solid var(--slate);
  background: var(--ink);
  padding: 10px;
}
.reel-stage::before,
.reel-stage::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.reel-stage::before { top: -1px; left: -1px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.reel-stage::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--blue); border-right: 2px solid var(--blue); }

.reel-stage video { width: 100%; display: block; background: #000; }

.reel-stage.is-loop { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9); }

.reel-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.9rem 0.4rem 0.3rem;
  font-size: 0.875rem;
  color: var(--steel-l);
}
.reel-caption strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
}
.reel-caption .meta { font-family: var(--mono); font-size: 0.75rem; color: var(--steel); margin-left: auto; }

.reel-thumbs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.reel-thumbs button {
  width: 100%;
  padding: 0;
  border: 1px solid var(--slate-d);
  background: var(--graphite);
  color: var(--steel-l);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.reel-thumbs button:hover { border-color: var(--steel-d); color: var(--bone); }
.reel-thumbs button[aria-current="true"] { border-color: var(--red); color: var(--white); }
.reel-thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reel-thumbs .label { display: block; padding: 0.5rem 0.6rem; }

.reel-empty {
  border: 1px dashed var(--steel-d);
  background:
    repeating-linear-gradient(135deg, rgba(26, 32, 41, 0.6) 0 12px, rgba(9, 12, 18, 0.6) 12px 24px);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
}
.reel-empty h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.reel-empty p {
  margin: 0 auto;
  max-width: 54ch;
  color: var(--steel-l);
  font-size: 0.9375rem;
}
.reel-empty .meta {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-d);
}

/* ── Maps ────────────────────────────────────────────────────────────── */

.maps { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5.5rem); }

.map {
  position: relative;
  isolation: isolate;
  padding-top: 1.25rem;
}

.map-ghost {
  right: 0;
  top: -1.4rem;
  font-size: clamp(6rem, 13vw, 12rem);
}
.map:hover .map-ghost { -webkit-text-stroke-color: rgba(142, 154, 171, 0.3); }

.map-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--slate-d);
}

.map-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--white);
}

.map-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-l);
  border: 1px solid var(--slate);
  padding: 0.25rem 0.55rem;
}

.map-summary {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  line-height: 1.3;
  color: var(--silver);
}

.map-facts {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 0.35rem 1.75rem;
  max-width: 90ch;
}
.map-facts li { font-size: 0.875rem; color: var(--silver); }

.map-shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.75rem;
}
.map-shots:has(> :only-child) { grid-template-columns: minmax(0, 640px); }

.map-shot {
  border: 1px solid var(--slate-d);
  background: var(--ink);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.map-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.map-shot:hover img { transform: scale(1.045); }
.map-shot span {
  display: block;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--slate-d);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--steel-l);
}

/* ── Build state ─────────────────────────────────────────────────────── */

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: start;
  gap: 0.75rem;
}
.status {
  border: 1px solid var(--slate-d);
  background: var(--graphite);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.status h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.status-in h3  { color: var(--blue-l); }
.status-wip h3 { color: var(--amber); }
.status-out h3 { color: var(--steel-l); }
.status ul { margin: 0; padding-left: 0; list-style: none; }
.status li { margin-bottom: 0.55rem; font-size: 0.9375rem; color: var(--steel-l); }
.status-out li { color: var(--steel); }

/* ── Footer ──────────────────────────────────────────────────────────── */

/* The name of the game runs along the bottom edge in outline, over the
   floor grid, and everything else sits on top of it. */
.site-foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--slate-d);
  background: var(--ink);
  padding-top: clamp(3rem, 7vw, 5rem);
}
.foot-floor { height: 60%; opacity: 0.7; }

.foot-mark {
  position: absolute;
  left: 50%;
  bottom: -0.1em;
  z-index: -1;
  transform: translateX(-50%);
  display: flex;
  gap: 0.28em;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 11.2vw, 11.5rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(142, 154, 171, 0.13);
  pointer-events: none;
  user-select: none;
}

.foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}
.foot-inner.is-single { grid-template-columns: 1fr; }

@media (max-width: 720px) {
  .foot-inner { grid-template-columns: 1fr; }
}

.foot-brand img { width: 150px; margin-bottom: 1rem; }
.foot-brand p { margin: 0; font-size: 0.9375rem; color: var(--steel); max-width: 46ch; }

.foot-links h4 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-l);
}
.foot-small { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--steel); max-width: 48ch; }
.foot-small code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--steel-l);
  background: var(--graphite);
  padding: 0.1rem 0.35rem;
}

.foot-link {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot-link:hover,
.foot-link:focus-visible {
  color: var(--bone, #fff);
  border-bottom-color: currentColor;
}
.legal-band .idea-body {
  max-width: 60ch;
}
.foot-legal {
  border-top: 1px solid var(--slate-d);
  padding-block: 1.25rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.foot-dashes {
  width: 30px;
  height: 12px;
  background:
    linear-gradient(var(--red), var(--red)) 0 0 / 22px 4px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 8px 8px / 22px 4px no-repeat;
  transform: skewX(-22deg);
}

/* ── Feature rows (map editor) ───────────────────────────────────────── */

/* One feature per row: its picture on one side, the words on the other,
   sides alternating down the page. The picture is the same plate the map
   shots use. Under 900px the picture stacks above the words. */
.features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.feature {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  background: linear-gradient(160deg, var(--graphite), var(--ink));
  border-left: 3px solid var(--red);
  padding: clamp(1rem, 2vw, 1.5rem);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.feature-blue { border-left-color: var(--blue); }
.feature:nth-child(even) .feature-shot { order: 2; }
.feature.no-shot { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature-shot { order: 0; }
}

.feature-shot {
  margin: 0;
  border: 1px solid var(--slate-d);
  background: var(--ink);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.feature-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.feature-shot figcaption {
  display: block;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--slate-d);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--steel-l);
}

.feature-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.5rem 0.25rem;
}
.feature-ghost {
  position: absolute;
  right: 0.35rem;
  top: -0.9rem;
  z-index: -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5rem, 8vw, 7.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(142, 154, 171, 0.16);
  pointer-events: none;
  user-select: none;
}
.feature-red:hover .feature-ghost  { -webkit-text-stroke-color: rgba(255, 74, 94, 0.5); }
.feature-blue:hover .feature-ghost { -webkit-text-stroke-color: rgba(78, 140, 255, 0.5); }
.feature-red .card-brake span  { color: var(--red-l); }
.feature-blue .card-brake span { color: var(--blue-l); }
.feature .card-brake { margin-top: 0.25rem; }

/* ── Gameplay under the hero ─────────────────────────────────────────── */

.gameplay { padding-top: 0; }
.gameplay-stage {
  position: relative;
  margin: 0;
  border: 1px solid var(--slate-d);
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.gameplay-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}
.gameplay-stage figcaption {
  display: block;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--slate-d);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--steel-l);
}
.gameplay-corner {
  position: absolute;
  z-index: 1;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.gameplay-corner-tl { top: 12px; left: 12px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.gameplay-corner-br { right: 12px; bottom: calc(2.4rem + 12px); border-bottom: 2px solid var(--blue); border-right: 2px solid var(--blue); }

/* ── Tester download page ────────────────────────────────────────────── */

.play-panel {
  border: 1px solid var(--slate-d);
  background: linear-gradient(160deg, var(--graphite), var(--ink));
  padding: clamp(1.25rem, 3vw, 2rem);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.play-form { display: grid; gap: 0.9rem; }
.play-label {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-l);
}
.play-code {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--slate);
  padding: 0.75rem 1rem;
  outline: none;
}
.play-code:focus { border-color: var(--blue-l); }
.play-form .btn { justify-self: start; }
.play-wrong { margin: 1rem 0 0; color: var(--red-l); font-size: 0.95rem; }
.play-result { display: grid; gap: 1rem; }
.play-welcome { margin: 0; font-size: 1.05rem; color: var(--bone); }
.play-download { justify-self: start; }
.play-build { margin: 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--steel-l); }
.play-steps { margin: 0.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; color: var(--silver); }
.play-steps li::marker { color: var(--blue-l); font-family: var(--mono); }
.play-note { margin: 0; font-size: 0.875rem; color: var(--steel-l); }