:root {
  --ink: #14182b;
  --paper: #fff7e2;
  --paper-dotted: #f3ead5;
  --card: #ffffff;
  --magenta: #e63b6c;
  --cyan: #2dd4e6;
  --gold: #ffb84a;
  --navy: #0c0f1e;
  --cyan-dim: #9fd9e4;

  --max: 1080px;
  --pad-x: clamp(16px, 4vw, 40px);
  --rad: 4px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--paper);
  background-image: url("../img/textures/cream-paper.png");
  background-repeat: repeat;
  color: var(--ink);
  font-family: 'Cabin Condensed', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

h1, h2, h3 {
  font-family: 'Bangers', 'Cabin Condensed', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}

h1 { font-size: clamp(56px, 11vw, 128px); }
h2 { font-size: clamp(36px, 6vw, 64px); }
h3 { font-size: clamp(24px, 3.5vw, 36px); }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.flavor {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  opacity: 0.78;
}

.label {
  font-family: 'Cabin Condensed', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  opacity: 0.7;
}

/* Section wrapper */
.section {
  padding: clamp(48px, 8vw, 96px) var(--pad-x);
}
.section__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.section + .section { border-top: 3px solid var(--ink); }

/* Hero — gameplay sky shared with Trailer */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 9vw, 120px) var(--pad-x);
  background-color: var(--paper-dotted);
  /* Solid ink hairline + soft drop so the hero reads as a comic card
     lifted off the page above the rest of the content. z-index lifts
     the box-shadow above the next section's background. */
  box-shadow: 0 6px 0 0 var(--ink), 0 24px 32px -8px rgba(20, 24, 43, 0.55);
  z-index: 5;
  --cloud-tint: #f8f4e2;
  --sky-text: var(--ink);
}
.hero .section__inner,
.hero__inner {
  max-width: var(--max); margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Battle vignette — player vs cycling enemies, behind the logo. */
.hero__battle {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Player ship — bobs vertically on the left edge, rotated to face right. */
.battle-player {
  position: absolute;
  left: 3%;
  top: 50%;
  width: clamp(56px, 7vw, 96px);
  transform: translateY(-50%) rotate(90deg);
  animation: battle-player-bob 3.2s ease-in-out infinite alternate;
  filter: drop-shadow(3px 3px 0 rgba(20, 24, 43, 0.32));
}
@keyframes battle-player-bob {
  from { transform: translateY(-110%) rotate(90deg); }
  to   { transform: translateY(10%)   rotate(90deg); }
}

/* Bullet stream — comic-style ovals with an ink stroke + tail glow. */
.battle-bullet {
  position: absolute;
  width: 16px;
  height: 5px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  opacity: 0;
}
/* Player bullets — gold, flying right, all from the player's nose. */
.battle-bullet--p {
  background: var(--gold);
  left: calc(3% + clamp(56px, 7vw, 96px) * 0.5 + 12px);
  box-shadow: -10px 0 0 -2px rgba(255, 184, 74, 0.55);
}
.battle-bullet--p1 { top: 46%; animation: bullet-fly-r 1.6s linear infinite; animation-delay: 0s;    }
.battle-bullet--p2 { top: 49%; animation: bullet-fly-r 1.6s linear infinite; animation-delay: -0.3s; }
.battle-bullet--p3 { top: 52%; animation: bullet-fly-r 1.6s linear infinite; animation-delay: -0.6s; }
.battle-bullet--p4 { top: 55%; animation: bullet-fly-r 1.6s linear infinite; animation-delay: -0.9s; }
.battle-bullet--p5 { top: 58%; animation: bullet-fly-r 1.6s linear infinite; animation-delay: -1.2s; }
@keyframes bullet-fly-r {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(85vw); opacity: 0; }
}

/* Enemy bullets — magenta, flying left from the enemy column. */
.battle-bullet--e {
  background: var(--magenta);
  right: 6%;
  box-shadow: 10px 0 0 -2px rgba(230, 59, 108, 0.55);
}
.battle-bullet--e1 { top: 42%; animation: bullet-fly-l 2.2s linear infinite; animation-delay: -0.4s; }
.battle-bullet--e2 { top: 58%; animation: bullet-fly-l 2.2s linear infinite; animation-delay: -1.5s; }
@keyframes bullet-fly-l {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-80vw); opacity: 0; }
}

/* Enemy slots — appear from off-edge, hover + fire, exit up/down. JS
   swaps src on every animationiteration so each cycle reveals a fresh
   enemy. Each slot has its own lifecycle keyframes for variety. */
.battle-enemy {
  position: absolute;
  width: clamp(48px, 6vw, 82px);
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(3px 3px 0 rgba(20, 24, 43, 0.28));
}
.battle-enemy--1 {
  right: 6%; top: 22%;
  animation: enemy-cycle-up 6.4s ease-in-out infinite;
}
.battle-enemy--2 {
  right: 10%; top: 38%;
  animation: enemy-cycle-down 7.6s ease-in-out infinite -2.5s;
}
.battle-enemy--3 {
  right: 4%;  top: 56%;
  animation: enemy-cycle-up 5.8s ease-in-out infinite -1.4s;
}
.battle-enemy--4 {
  right: 9%;  top: 72%;
  animation: enemy-cycle-down 8.2s ease-in-out infinite -4.1s;
}
@keyframes enemy-cycle-up {
  /* Enter from below, hold + fire, exit upward. PNG faces up natively,
     rotate -90° so it faces the player (left). */
  0%   { transform: translateY(60%)  rotate(-90deg); opacity: 0; }
  10%  { transform: translateY(0)    rotate(-90deg); opacity: 1; }
  70%  { transform: translateY(0)    rotate(-90deg); opacity: 1; }
  90%  { transform: translateY(-220%) rotate(-90deg); opacity: 0; }
  100% { transform: translateY(-220%) rotate(-90deg); opacity: 0; }
}
@keyframes enemy-cycle-down {
  0%   { transform: translateY(-60%) rotate(-90deg); opacity: 0; }
  10%  { transform: translateY(0)    rotate(-90deg); opacity: 1; }
  70%  { transform: translateY(0)    rotate(-90deg); opacity: 1; }
  90%  { transform: translateY(220%)  rotate(-90deg); opacity: 0; }
  100% { transform: translateY(220%)  rotate(-90deg); opacity: 0; }
}

@media (max-width: 720px) {
  /* Hide the battle on small viewports so the logo + CTAs breathe. */
  .hero__battle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-player, .battle-enemy, .battle-bullet { animation: none !important; opacity: 0; }
}
.hero h1, .hero .label, .hero .flavor, .hero .hero__tagline { color: var(--sky-text); }
.hero__logo {
  max-width: min(720px, 88vw);
  margin: 0 auto clamp(12px, 2vw, 20px);
  filter: drop-shadow(6px 6px 0 var(--magenta));
}
.hero__tagline {
  font-size: clamp(18px, 2.4vw, 26px);
  margin: 0 auto clamp(20px, 3vw, 32px);
  max-width: 36ch;
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center;
}

@media (max-width: 720px) {
  .hero__ctas .btn-comic { flex: 1 1 100%; text-align: center; }
}

/* Buttons (.btn-comic) */
.btn-comic {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Bangers', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.08em;
  padding: 12px 22px;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  cursor: pointer;
}
.btn-comic:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  color: var(--ink);
}
.btn-comic:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn-comic--magenta { background: var(--magenta); color: var(--paper); }
.btn-comic--magenta:hover { color: var(--paper); }
.btn-comic--cyan { background: var(--cyan); color: var(--ink); }
.btn-comic--gold { background: var(--gold); color: var(--ink); }
.btn-comic--disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }

/* Pills */
.pill {
  display: inline-block;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 5px 11px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
}
.pill--magenta { background: var(--magenta); color: var(--paper); }
.pill--cyan { background: var(--cyan); color: var(--ink); }
.pill--gold { background: var(--gold); color: var(--ink); }

/* Ink cards */
.ink-card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 5px 5px 0 var(--ink);
  padding: clamp(20px, 3vw, 28px);
}

/* Ribbon (rotated heading tab) */
.ribbon {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 16px;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.1em;
  font-size: 14px;
  transform: rotate(-1.5deg);
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 var(--magenta);
}
.ribbon--magenta { background: var(--magenta); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.ribbon--cyan { background: var(--cyan); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ribbon--gold { background: var(--gold); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ──────────────────────────────────────────────────────────────────────
   Showcase sections — Build / Arsenal / Sets / Bestiary
   ────────────────────────────────────────────────────────────────────── */
.showcase__lede {
  max-width: 56ch;
  margin: 10px 0 28px;
  font-size: clamp(16px, 1.6vw, 19px);
}
.showcase__tip {
  margin-top: clamp(20px, 3vw, 32px);
  text-align: center;
}

/* — GRID BUILDER — blueprint paper backdrop. */
.showcase--builder {
  background-color: #f0e9d3;
  background-image:
    linear-gradient(rgba(45, 95, 140, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 95, 140, 0.10) 1px, transparent 1px);
  background-size: 40px 40px;
}
.builder {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  margin-top: 12px;
}
.builder__grid {
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(12px, 1.8vw, 20px);
}
.builder__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}
.builder__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  animation: builder-slideshow 24s ease-in-out infinite;
}
/* Four slides cross-fade in 4 → 3 → 2 → 1 order across a 24 s cycle.
   Delays shifted by -1 s so slide 4 lands at the start of its solid
   phase on first paint. */
.builder__slide--4 { animation-delay:  -1s; }
.builder__slide--3 { animation-delay:  -7s; }
.builder__slide--2 { animation-delay: -13s; }
.builder__slide--1 { animation-delay: -19s; }
@keyframes builder-slideshow {
  0%   { opacity: 0; }
   4%  { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .builder__slide { animation: none; }
  .builder__slide--1 { opacity: 1; }
}

/* Slide-position dots under the grid. Each dot's keyframes mirror the
   matching slide's solid window so it pulses on while that slide is up. */
.builder__viewport {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.builder__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  margin-top: clamp(12px, 1.6vw, 18px);
}
.builder__dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
  transform: scale(1);
  animation: builder-nav-dot 24s ease-in-out infinite;
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.builder__dot:hover { opacity: 0.85; transform: scale(1.15); }
.builder__dot:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.builder__dot--4 { animation-delay:  -1s; }
.builder__dot--3 { animation-delay:  -7s; }
.builder__dot--2 { animation-delay: -13s; }
.builder__dot--1 { animation-delay: -19s; }

/* Click-to-jump: viewport switches to manual mode and JS toggles
   .is-active on the chosen slide + dot. Background animations halt. */
.builder__viewport.is-manual .builder__slide,
.builder__viewport.is-manual .builder__dot { animation: none; }
.builder__viewport.is-manual .builder__slide { opacity: 0; }
.builder__viewport.is-manual .builder__slide.is-active { opacity: 1; }
.builder__viewport.is-manual .builder__dot {
  opacity: 0.45;
  transform: scale(1);
  background: transparent;
}
.builder__viewport.is-manual .builder__dot.is-active {
  opacity: 1;
  transform: scale(1.35);
  background: var(--ink);
}
@keyframes builder-nav-dot {
  0%   { background: transparent;  opacity: 0.45; transform: scale(1); }
  4%   { background: var(--ink);   opacity: 1;    transform: scale(1.35); }
  25%  { background: var(--ink);   opacity: 1;    transform: scale(1.35); }
  29%  { background: transparent;  opacity: 0.45; transform: scale(1); }
  100% { background: transparent;  opacity: 0.45; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .builder__dot { animation: none; }
  .builder__dot--1 { background: var(--ink); opacity: 1; transform: scale(1.35); }
}
.builder__legend {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 10px;
  font-size: clamp(15px, 1.4vw, 17px);
}
.builder__legend li { display: flex; align-items: center; gap: 12px; }
.swatch {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.swatch--weapon  { background-image: url("../img/blocks/base_weapon.png"); }
.swatch--engine  { background-image: url("../img/blocks/base_engine.png"); }
.swatch--shield  { background-image: url("../img/blocks/base_shield.png"); }
.swatch--armor   { background-image: url("../img/blocks/base_armor.png"); }
.swatch--special { background-image: url("../img/blocks/base_special.png"); }
.swatch--move    { background-image: url("../img/blocks/base_movement.png"); }
.swatch--core    { background-image: url("../img/blocks/base_core.png"); }
@media (max-width: 720px) {
  .builder { grid-template-columns: 1fr; }
}

/* — ARSENAL — abilities grid on cream halftone-dot bg. */
.showcase--arsenal {
  background-color: #fff7e2;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 14px 14px;
  background-position: 0 0;
  position: relative;
}
.showcase--arsenal::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,247,226,0.85) 0%, rgba(255,247,226,0.4) 40%, rgba(255,247,226,0.85) 100%);
  pointer-events: none;
}
.showcase--arsenal .section__inner { position: relative; z-index: 1; }
.ability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 16px;
}
.ability {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.5vw, 18px);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(16px, 2vw, 22px);
}
.ability__text { flex: 1; min-width: 0; }
.ability__kind {
  display: inline-block;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 3px 9px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  margin-bottom: 8px;
}
.ability--special .ability__kind { background: #b08aff; color: var(--ink); }
.ability--move    .ability__kind { background: #ff8e5c; color: var(--ink); }
.ability--weapon  .ability__kind { background: var(--magenta); color: var(--paper); }
.ability--engine  .ability__kind { background: var(--cyan);    color: var(--ink); }
.ability--shield  .ability__kind { background: var(--gold);    color: var(--ink); }
.ability--armor   .ability__kind { background: #b8c2d0;        color: var(--ink); }
.ability h3 { margin: 4px 0 8px; }
.ability p  { margin: 0; font-size: 15px; }

/* Block image on the right — pitch-style hover popup. */
.ability__block {
  flex-shrink: 0;
  width: clamp(56px, 7vw, 80px);
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: zoom-in;
  align-self: center;
  /* Crisp-edge interpolation + GPU compositing so the popup doesn't soften
     when the browser upscales the bitmap during the transform. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
  backface-visibility: hidden;
}
.ability__block:hover {
  /* PNGs are 276 px wide; scale 3.5 × ~80 px base ≈ 280 px — basically the
     native resolution, so no upscale-blur. */
  transform: scale(3.5);
  z-index: 10;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.ability:has(.ability__block:hover) {
  position: relative;
  z-index: 20;
}

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

/* — SETS — eight cards in a 4×2 grid, paper bg. */
.showcase--sets {
  background-color: #fff1d6;
  background-image: repeating-linear-gradient(135deg, rgba(20,24,43,0.04) 0 14px, transparent 14px 28px);
}
.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 16px;
}
.set-card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(16px, 2vw, 22px);
  position: relative;
}
.set-card p { margin: 10px 0 0; font-size: 15px; }
.set-card .ribbon { box-shadow: 3px 3px 0 var(--ink); }
.set-card--phalanx    .ribbon { background: #6a8fd0; color: var(--paper); }
.set-card--swift      .ribbon { background: #ff8e5c; color: var(--ink); }
.set-card--marksman   .ribbon { background: #d44a4a; color: var(--paper); }
.set-card--voidcaller .ribbon { background: #6f4cb6; color: var(--paper); }
.set-card--pyromaniac .ribbon { background: var(--magenta); color: var(--paper); }
.set-card--sentinel   .ribbon { background: #4fb39a; color: var(--ink); }
.set-card--berserker  .ribbon { background: #b8412a; color: var(--paper); }
.set-card--lattice    .ribbon { background: var(--cyan); color: var(--ink); }

/* — BESTIARY — dark band, full boss silhouettes. */
.showcase--bestiary {
  background-color: #14182b;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(230, 59, 108, 0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(45, 212, 230, 0.10), transparent 50%);
  color: var(--paper);
}
.showcase--bestiary h2,
.showcase--bestiary .flavor { color: var(--paper); }
.bestiary-subhead {
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.18em;
  font-size: clamp(13px, 1.3vw, 16px);
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
  margin: clamp(18px, 2.5vw, 28px) 0 10px;
}
.elite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  margin-bottom: clamp(20px, 3vw, 32px);
  align-items: end;
  justify-items: center;
}
.elite-cell {
  width: 100%;
  max-width: 66px;
  height: auto;
  filter: brightness(0) drop-shadow(0 0 6px rgba(45, 212, 230, 0.32));
  opacity: 0.88;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.elite-cell:hover {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(0) drop-shadow(0 0 10px rgba(230, 59, 108, 0.55));
}
.boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: 16px;
  align-items: end;
  justify-items: center;
}
.boss-cell {
  width: 100%;
  max-width: 132px;
  height: auto;
  filter: brightness(0) drop-shadow(0 0 10px rgba(230, 59, 108, 0.35));
  opacity: 0.92;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.boss-cell:hover {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(0) drop-shadow(0 0 14px rgba(45, 212, 230, 0.55));
}
@media (max-width: 480px) {
  .boss-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Screenshots section — ship-editor canvas background */
#screens {
  background-color: #04407f;
  background-image: url("../img/inspiration_geometry.png");
  background-repeat: repeat;
  background-size: 256px 256px;
  animation: editor-scroll 100s linear infinite;
  color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#screens > * { position: relative; z-index: 1; }
#screens h2, #screens .flavor { color: var(--paper); }
#screens .ribbon { /* keep magenta-on-paper from base */ }
/* Shift by integer multiples of the 256 px tile so the loop boundary is
   visually invisible. 100s × full-period in both axes = seamless wrap. */
@keyframes editor-scroll {
  from { background-position: 0 0; }
  to   { background-position: -512px -256px; }
}

/* Rotated crosshatch grid drifting on top — light-blue line pairs at 300 px
   spacing, rotated -10°, full lines plus thinner companion 14 px aside.
   Bleeds well past the section so the rotation doesn't expose corners. */
#screens::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(119,175,225,0.40) 0 3px, transparent 3px 300px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(119,175,225,0.22) 14px 15.5px, transparent 15.5px 300px),
    repeating-linear-gradient( 0deg, rgba(119,175,225,0.40) 0 3px, transparent 3px 300px),
    repeating-linear-gradient( 0deg, transparent 0 14px, rgba(119,175,225,0.22) 14px 15.5px, transparent 15.5px 300px);
  transform: rotate(-10deg);
  transform-origin: 50% 50%;
  /* Drift x and y at different rates over 3 grid periods on each axis (900 px).
     Identical pattern only re-appears every 90 s, and the asymmetry breaks
     the "I just saw this" loop perception. */
  animation: editor-grid-drift 90s linear infinite;
  z-index: 0;
}
@keyframes editor-grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 900px 600px, 900px 600px, 900px 600px, 900px 600px; }
}

@media (prefers-reduced-motion: reduce) {
  #screens, #screens::before { animation: none; }
}

/* Screenshots gallery */
.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.screen-tile {
  aspect-ratio: 16 / 10;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  background: var(--card);
  background-image: repeating-linear-gradient(45deg, #ffffff 0 12px, #f3f3f3 12px 24px);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.screen-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.screen-tile img { width: 100%; height: 100%; object-fit: cover; }
.screen-tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: 'Cabin Condensed', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
}

@media (max-width: 720px) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .screens { grid-template-columns: 1fr; }
}

/* Section-preview cards — three anchors that tease and scroll to the
   downstream showcase sections. */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(24px, 3vw, 36px);
}
.preview-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(20px, 2.5vw, 26px);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.preview-card:hover {
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.preview-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.preview-card__ribbon {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.1em;
  font-size: clamp(15px, 1.4vw, 18px);
  padding: 4px 13px;
  border: 3px solid var(--ink);
  border-radius: 3px;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 16px;
}
.preview-card--build .preview-card__ribbon { background: var(--magenta); color: var(--paper); }
.preview-card--arm   .preview-card__ribbon { background: var(--cyan);    color: var(--ink); }
.preview-card--fight .preview-card__ribbon { background: var(--gold);    color: var(--ink); }
.preview-card__heading {
  font-family: 'Bangers', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 12px;
}
.preview-card__body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 18px;
}
.preview-card__cta {
  margin-top: auto;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.08em;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, gap 0.15s ease;
}
.preview-card__arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.preview-card:hover .preview-card__cta {
  color: var(--ink);
  gap: 12px;
}
.preview-card:hover .preview-card__arrow {
  transform: translateY(2px);
}
@media (max-width: 720px) {
  .preview-grid { grid-template-columns: 1fr; }
}

/* Legacy pillar grid — kept around in case the older layout returns. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}
.pillar h3 { margin-bottom: 8px; }
@media (max-width: 720px) {
  .pillars { grid-template-columns: 1fr; }
}

/* About — glossary "compendium" backdrop (warm cream + drifting
   inspiration_geometry tile + parallax pattern, same ingredients the
   in-game Compendium uses). */
.about {
  text-align: left;
  background-color: #f5e5cb;
  background-image: url("../img/inspiration_geometry.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  animation: about-geo-drift 120s linear infinite;
}
@keyframes about-geo-drift {
  from { background-position: 0 0; }
  to   { background-position: -256px -256px; }
}
@media (prefers-reduced-motion: reduce) {
  .about { animation: none; }
}

/* Drifting "?" columns — mirror the in-game Compendium's "?" rain. */
.about { position: relative; }
.qmark-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.qmark {
  position: absolute;
  font-family: 'Bangers', system-ui, sans-serif;
  color: rgba(107, 76, 46, 0.22);
  user-select: none;
  will-change: transform;
}
@keyframes qmark-fall {
  from { transform: translateY(-160%); }
  to   { transform: translateY(140vh); }
}
.qmark--1  { left:  2%; font-size:  96px; animation: qmark-fall 22s linear infinite; animation-delay:  -2s; }
.qmark--2  { left:  6%; font-size:  56px; animation: qmark-fall 30s linear infinite; animation-delay: -14s; }
.qmark--3  { left:  9%; font-size: 120px; animation: qmark-fall 18s linear infinite; animation-delay:  -6s; }
.qmark--4  { left: 13%; font-size:  64px; animation: qmark-fall 26s linear infinite; animation-delay: -20s; }
.qmark--5  { left: 17%; font-size:  88px; animation: qmark-fall 24s linear infinite; animation-delay:  -9s; }
.qmark--6  { left: 20%; font-size:  48px; animation: qmark-fall 34s linear infinite; animation-delay: -25s; }
.qmark--7  { left: 24%; font-size: 104px; animation: qmark-fall 20s linear infinite; animation-delay: -11s; }
.qmark--8  { left: 28%; font-size:  64px; animation: qmark-fall 28s linear infinite; animation-delay: -17s; }
.qmark--9  { left: 31%; font-size:  80px; animation: qmark-fall 23s linear infinite; animation-delay:  -4s; }
.qmark--10 { left: 35%; font-size:  56px; animation: qmark-fall 32s linear infinite; animation-delay: -22s; }
.qmark--11 { left: 39%; font-size: 112px; animation: qmark-fall 19s linear infinite; animation-delay:  -8s; }
.qmark--12 { left: 42%; font-size:  64px; animation: qmark-fall 30s linear infinite; animation-delay: -15s; }
.qmark--13 { left: 46%; font-size:  88px; animation: qmark-fall 25s linear infinite; animation-delay: -19s; }
.qmark--14 { left: 50%; font-size:  48px; animation: qmark-fall 38s linear infinite; animation-delay:  -3s; }
.qmark--15 { left: 53%; font-size: 128px; animation: qmark-fall 17s linear infinite; animation-delay: -12s; }
.qmark--16 { left: 57%; font-size:  72px; animation: qmark-fall 27s linear infinite; animation-delay: -24s; }
.qmark--17 { left: 61%; font-size:  56px; animation: qmark-fall 33s linear infinite; animation-delay:  -7s; }
.qmark--18 { left: 64%; font-size:  96px; animation: qmark-fall 21s linear infinite; animation-delay: -16s; }
.qmark--19 { left: 68%; font-size:  64px; animation: qmark-fall 29s linear infinite; animation-delay: -27s; }
.qmark--20 { left: 72%; font-size:  80px; animation: qmark-fall 23s linear infinite; animation-delay: -10s; }
.qmark--21 { left: 75%; font-size: 104px; animation: qmark-fall 20s linear infinite; animation-delay: -18s; }
.qmark--22 { left: 79%; font-size:  48px; animation: qmark-fall 36s linear infinite; animation-delay:  -5s; }
.qmark--23 { left: 83%; font-size:  88px; animation: qmark-fall 24s linear infinite; animation-delay: -13s; }
.qmark--24 { left: 86%; font-size:  64px; animation: qmark-fall 28s linear infinite; animation-delay: -23s; }
.qmark--25 { left: 90%; font-size: 120px; animation: qmark-fall 18s linear infinite; animation-delay: -10s; }
.qmark--26 { left: 94%; font-size:  56px; animation: qmark-fall 32s linear infinite; animation-delay: -28s; }
.qmark--27 { left: 97%; font-size:  72px; animation: qmark-fall 26s linear infinite; animation-delay:  -1s; }
.qmark--28 { left:  5%; font-size:  44px; animation: qmark-fall 40s linear infinite; animation-delay: -31s; }
.qmark--29 { left: 15%; font-size: 144px; animation: qmark-fall 16s linear infinite; animation-delay: -14s; }
.qmark--30 { left: 26%; font-size:  72px; animation: qmark-fall 27s linear infinite; animation-delay: -21s; }
.qmark--31 { left: 38%; font-size:  56px; animation: qmark-fall 31s linear infinite; animation-delay:  -8s; }
.qmark--32 { left: 49%; font-size: 100px; animation: qmark-fall 19s linear infinite; animation-delay: -29s; }
.qmark--33 { left: 60%; font-size:  88px; animation: qmark-fall 22s linear infinite; animation-delay: -33s; }
.qmark--34 { left: 73%; font-size:  56px; animation: qmark-fall 35s linear infinite; animation-delay:  -6s; }
.qmark--35 { left: 84%; font-size:  96px; animation: qmark-fall 21s linear infinite; animation-delay: -26s; }
.qmark--36 { left: 92%; font-size:  64px; animation: qmark-fall 30s linear infinite; animation-delay: -34s; }
@media (prefers-reduced-motion: reduce) {
  .qmark { animation: none !important; opacity: 0; }
}
/* About's flyby lives inside section__inner so ships drift within the
   1080 px content column instead of the full page width. Clipping moves
   to the .flyby itself so card shadows on .about__media + .about__body
   can still escape the column edges (otherwise row 3's clip frame loses
   its bottom-right shadow against the section__inner boundary). */
.about .section__inner {
  isolation: isolate;
}
.about .flyby { overflow: hidden; }
.about .section__inner > :not(.flyby) {
  position: relative;
  z-index: 1;
}
/* Translucent paper backdrop just on the paragraph — ribbon + heading stay
   open on the section so the swarm can drift around them. */
.about__body {
  max-width: 56ch;
  font-size: clamp(17px, 2vw, 20px);
  background: rgba(255, 247, 226, 0.82);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: var(--rad);
}
.about__body + .about__body { margin-top: 18px; }
.about__body > p { margin: 0; }
.about__body > p + .about__ships-row { margin-top: clamp(14px, 2vw, 20px); }

/* Initial cap on the opening "P" of row 1 — Bangers, magenta on ink,
   inline so it stays within one line height. */
.about__body--lede p::first-letter {
  font-family: 'Bangers', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1;
  color: var(--magenta);
  text-shadow: 2px 2px 0 var(--ink);
  margin-right: 4px;
  vertical-align: baseline;
}

/* Trio of ship renders that sit under the paragraph inside row 1's card.
   Renders the "yours and the enemy's" beat visually — player + popcorn
   enemy + elite. */
.about__ships-row {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(18px, 3vw, 32px);
}
.about__ship-cell {
  margin: 0;
  position: relative;
  text-align: center;
}
.about__ship-img {
  width: clamp(56px, 8vw, 84px);
  height: auto;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
}
.about__ship-name {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.1em;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, top 0.18s ease;
  box-shadow: 2px 2px 0 var(--magenta);
}
.about__ship-cell:hover { z-index: 10; }
.about__ship-cell:hover .about__ship-img {
  transform: scale(2.4) rotate(-10deg);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.about__ship-cell:hover .about__ship-name {
  opacity: 1;
  /* Banner sits below the scaled image's new bottom. With center-origin
     scaling at 2.4× the bottom edge moves to 50% + 1.2 × 100% = 170%. */
  top: 180%;
}

/* Lift the row containing a hover-zoomed card above siblings so the
   popup escapes neighbouring rows' stacking contexts. */
.about__row:has(.about__block-img:hover),
.about__row:has(.about__ship-cell:hover) {
  position: relative;
  z-index: 20;
}

/* Block-card row inside row 2's lede — real game cards captured from
   the export snap. Single row, hover lifts a card to its full size. */
.about__blocks-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
}
.about__block-img {
  width: clamp(72px, 12vw, 112px);
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: zoom-in;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
  backface-visibility: hidden;
}
.about__block-img:hover,
.about__block-img:focus {
  /* Scale chosen so the displayed pixel size sits at or below the PNG
     native size (276 px wide) to avoid upscale-blur. */
  transform: scale(2.5);
  z-index: 10;
  filter: drop-shadow(2px 2px 0 var(--ink));
}

/* ──────────────────────────────────────────────────────────────────────
   Comic strips — one panel per pitch beat.
   ────────────────────────────────────────────────────────────────────── */
.about__strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(28px, 4vw, 44px) 0;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(20, 24, 43, 0.10) 1px, transparent 1.4px);
  background-size: 14px 14px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--ink);
}
.about__strip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  width: 0;
  border-left: 3px dashed rgba(20, 24, 43, 0.32);
  pointer-events: none;
}
.about__strip-ribbon {
  position: absolute;
  top: -18px;
  left: clamp(20px, 3vw, 36px);
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.1em;
  font-size: clamp(18px, 1.8vw, 24px);
  background: var(--gold);
  color: var(--ink);
  padding: 5px 16px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
  z-index: 2;
}
.about__strip--2 .about__strip-ribbon { background: var(--cyan); }
.about__strip--3 .about__strip-ribbon { background: var(--gold); transform: rotate(-4deg); }

.about__strip-half {
  padding: 0 clamp(20px, 3vw, 40px);
}
.about__strip-half--copy {
  text-align: left;
}
.about__strip-heading {
  font-family: 'Bangers', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 14px;
  transform: rotate(-1deg);
  transform-origin: left;
}
.about__strip-sentence {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 28ch;
}
.about__strip-kicker {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.about__sfx {
  display: inline-block;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink);
  margin-left: 4px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1;
  vertical-align: middle;
}
.about__sfx--magenta { background: var(--magenta); color: var(--paper); }
.about__sfx--cyan    { background: var(--cyan);    color: var(--ink); }
.about__sfx--gold    { background: var(--gold);    color: var(--ink); }

.about__strip-half--visuals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 28px);
  position: relative;
}
/* Hover lift so popups paint above sibling strips below. */
.about__strip:has(.about__ship-cell:hover),
.about__strip:has(.about__block-img:hover) {
  position: relative;
  z-index: 20;
}
.about__strip-sprite {
  width: clamp(70px, 9vw, 110px);
  height: auto;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transition: transform 0.18s ease;
}
.about__strip-sprite:hover {
  transform: scale(1.35) rotate(-5deg);
  position: relative;
  z-index: 5;
}
/* Block-card sprites are taller than ship PNGs; trim their width so
   the row keeps even visual weight. */
.about__strip-sprite--card {
  width: clamp(56px, 7.5vw, 92px);
}

@media (max-width: 720px) {
  .about__strip {
    grid-template-columns: 1fr;
    padding: clamp(28px, 6vw, 36px) 0 clamp(20px, 4vw, 28px);
  }
  .about__strip::before { display: none; }
  .about__strip-half--visuals { margin-top: 18px; }
}

/* Legacy paragraph + clip rows — kept around in case the older layout
   gets re-enabled. Currently unused by index.html. */
.about__row {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  margin-top: clamp(22px, 3vw, 32px);
}
.about__row--text-left {
  /* text in col 1, image in col 2 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.about__row--text-right {
  /* image in col 1, text in col 2 */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.about__row--text-right > .about__media { order: -1; }
.about__row .about__body { margin-top: 0; }

/* Clip slot — 16:9 ink-card frame. Drop a <video autoplay muted loop
   playsinline> or <img> inside .about__media to fill it. */
.about__media {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--card);
  background-image: repeating-linear-gradient(45deg, #ffffff 0 14px, #f3f3f3 14px 28px);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Direct-child selector so this fills the frame only for an actual clip
   (img/video drop-in) and not for trio images nested inside the
   showcase variant. */
.about__media > img,
.about__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about__media-caption {
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.08em;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--ink);
  opacity: 0.55;
}

/* Showcase variant — holds a trio of small images instead of a clip.
   No card chrome at all (no border, no shadow, no background). The
   trio sits centred in its row column; hover popups can escape freely. */
.about__media--showcase {
  aspect-ratio: auto;
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  min-width: 0;
}
.about__media--showcase .about__ships-row,
.about__media--showcase .about__blocks-row {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 720px) {
  .about__row { grid-template-columns: 1fr; }
  /* Row 2's <figure> sits before its <p> in source order so the desktop
     grid can put the clip on the left. Push it to the bottom on mobile
     so the copy always reads first. */
  .about__row--text-right > .about__media { order: 2; }
}

/* Pull-quote — big italic hero line between paragraphs, with a softer
   paper backdrop so it reads through the swarm. */
.about__quote {
  margin: clamp(22px, 3vw, 32px) 0;
  max-width: 32ch;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.15;
  color: var(--magenta);
  background: rgba(255, 247, 226, 0.72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 28px);
  border-left: 6px solid var(--magenta);
  border-radius: var(--rad);
}

/* Stat strip — four big Bangers numbers under the second paragraph. */
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
  margin-top: clamp(22px, 3vw, 32px);
  max-width: 760px;
}
.stat {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(12px, 2vw, 18px) 8px;
  text-align: center;
}
.stat strong {
  display: block;
  font-family: 'Bangers', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  color: var(--magenta);
  text-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 6px;
}
.stat span {
  display: block;
  font-family: 'Cabin Condensed', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--ink);
}
.stat:nth-child(1) strong { color: var(--magenta); }
.stat:nth-child(2) strong { color: var(--cyan); }
.stat:nth-child(3) strong { color: #ff8e5c; }
.stat:nth-child(4) strong { color: #b08aff; }

@media (max-width: 560px) {
  .about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Generic ship flyby layer — drop into any section. The section needs
   .has-flyby to clip + isolate, and its inner content sits at z-index 1. */
.has-flyby {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.has-flyby .section__inner { position: relative; z-index: 1; }

.flyby {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.flyby__ship {
  position: absolute;
  width: 80px;
  will-change: transform;
  filter: drop-shadow(3px 3px 0 rgba(20, 24, 43, 0.18));
}

/* Four flight patterns: up (default), down (enemy dive), side-sweep
   right, side-sweep left. Each ship picks one. */
@keyframes ship-fly-up {
  from { transform: translateY(0)       rotate(var(--tilt, 0deg)); }
  to   { transform: translateY(-180vh)  rotate(var(--tilt, 0deg)); }
}
@keyframes ship-fly-down {
  from { transform: translateY(0)       rotate(calc(180deg + var(--tilt, 0deg))); }
  to   { transform: translateY(180vh)   rotate(calc(180deg + var(--tilt, 0deg))); }
}
@keyframes ship-fly-right {
  from { transform: translateX(0)       rotate(calc(90deg + var(--tilt, 0deg))); }
  to   { transform: translateX(140vw)   rotate(calc(90deg + var(--tilt, 0deg))); }
}
@keyframes ship-fly-left {
  from { transform: translateX(0)       rotate(calc(-90deg + var(--tilt, 0deg))); }
  to   { transform: translateX(-140vw)  rotate(calc(-90deg + var(--tilt, 0deg))); }
}

/* About-section lane definitions ------------------------------------- */

/* Upward lanes — anchored below the section, drift up. */
.about .flyby__ship--1  { left:  4%; bottom: -25%; width: 64px;  opacity: 0.62; --tilt: -3deg;
                          animation: ship-fly-up 34s linear infinite; animation-delay: -10s; }
.about .flyby__ship--2  { left: 14%; bottom: -25%; width: 48px;  opacity: 0.48; --tilt:  2deg;
                          animation: ship-fly-up 46s linear infinite; animation-delay: -28s; }
.about .flyby__ship--3  { left: 24%; bottom: -25%; width: 92px;  opacity: 0.82; --tilt: -4deg;
                          animation: ship-fly-up 24s linear infinite; animation-delay: -6s; }
.about .flyby__ship--4  { left: 35%; bottom: -25%; width: 60px;  opacity: 0.58; --tilt:  3deg;
                          animation: ship-fly-up 38s linear infinite; animation-delay: -22s; }
.about .flyby__ship--5  { left: 46%; bottom: -25%; width: 108px; opacity: 0.85; --tilt: -2deg;
                          animation: ship-fly-up 22s linear infinite; animation-delay: -14s; }
.about .flyby__ship--6  { left: 58%; bottom: -25%; width: 88px;  opacity: 0.72; --tilt:  4deg;
                          animation: ship-fly-up 30s linear infinite; animation-delay: -18s; }
.about .flyby__ship--7  { left: 70%; bottom: -25%; width: 56px;  opacity: 0.50; --tilt: -3deg;
                          animation: ship-fly-up 50s linear infinite; animation-delay: -36s; }
.about .flyby__ship--8  { left: 80%; bottom: -25%; width: 72px;  opacity: 0.66; --tilt:  3deg;
                          animation: ship-fly-up 40s linear infinite; animation-delay: -4s; }
.about .flyby__ship--9  { left: 90%; bottom: -25%; width: 96px;  opacity: 0.78; --tilt: -2deg;
                          animation: ship-fly-up 28s linear infinite; animation-delay: -20s; }
.about .flyby__ship--10 { left: 18%; bottom: -25%; width: 38px;  opacity: 0.38; --tilt:  4deg;
                          animation: ship-fly-up 60s linear infinite; animation-delay: -44s; }
.about .flyby__ship--11 { left: 64%; bottom: -25%; width: 44px;  opacity: 0.42; --tilt: -3deg;
                          animation: ship-fly-up 56s linear infinite; animation-delay: -32s; }

/* Downward enemy dive — anchored above the section. */
.about .flyby__ship--12 { left: 50%; top: -25%; width: 80px; opacity: 0.7; --tilt: 2deg;
                          animation: ship-fly-down 36s linear infinite; animation-delay: -8s; }

/* Side-sweep popcorn trains — rotated to face their travel direction. */
.about .flyby__ship--13 { left: -20vw; top: 18%; width: 56px; opacity: 0.6; --tilt: 0deg;
                          animation: ship-fly-right 22s linear infinite; animation-delay: -3s; }
.about .flyby__ship--14 { right: -20vw; top: 60%; width: 60px; opacity: 0.65; --tilt: 0deg;
                          animation: ship-fly-left 28s linear infinite; animation-delay: -16s; }
.about .flyby__ship--15 { left: -20vw; top: 78%; width: 48px; opacity: 0.5; --tilt: 0deg;
                          animation: ship-fly-right 32s linear infinite; animation-delay: -24s; }

/* Close-stream — foreground lane on the right column, only visible past
   the pitch-card's right edge (≥1024 px). Bigger, brighter, slower drop
   shadow so they read as "in front of" the swarm above. */
.about .flyby__ship--close-1,
.about .flyby__ship--close-2,
.about .flyby__ship--close-3 {
  display: none;
}
@media (min-width: 1024px) {
  .about .flyby__ship--close-1,
  .about .flyby__ship--close-2,
  .about .flyby__ship--close-3 {
    display: block;
    right: 4%;
    bottom: -25%;
    filter: drop-shadow(6px 8px 0 rgba(20, 24, 43, 0.32));
  }
  .about .flyby__ship--close-1 {
    width: 180px; opacity: 0.95; --tilt: -3deg;
    animation: ship-fly-up 18s linear infinite; animation-delay: -2s;
  }
  .about .flyby__ship--close-2 {
    width: 220px; opacity: 1.0;  --tilt:  2deg;
    animation: ship-fly-up 16s linear infinite; animation-delay: -10s;
  }
  .about .flyby__ship--close-3 {
    width: 160px; opacity: 0.92; --tilt: -2deg;
    animation: ship-fly-up 20s linear infinite; animation-delay: -14s;
  }
}

/* Pillars — ship-select backdrop. Solid base with the geometry pattern
   tiled on top, halftone dots concentrated at the corners (radial-mask
   vignette), and three vertical warning-tape stripes drifting downward.
   White pillar cards pop against it. */
.pillars-section {
  position: relative;
  overflow: hidden;
  background-color: #242A2F;
  color: var(--paper);
}
.pillars-section h2,
.pillars-section .flavor { color: var(--paper); }
/* Cards are white — text inside them stays ink. */
.pillars-section .pillar,
.pillars-section .pillar h3,
.pillars-section .pillar p { color: var(--ink); }

/* Layer A — geometric shapes tile, slowly drifting. */
.pillars-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/inspiration_geometry.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.45;
  animation: pillars-geo-drift 90s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes pillars-geo-drift {
  from { background-position: 0 0; }
  to   { background-position: -512px -256px; }
}

/* Layer B — halftone dots, masked to intensify at the corners. */
.pillars-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 247, 226, 0.55) 1.2px, transparent 1.8px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,1) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Warning-tape strips — vertical columns drifting downward. */
.warning-tapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.warning-tape {
  position: absolute;
  width: 44px;
  /* Big bleed top/bottom so the rotated tape's ends stay well outside
     the section's clip box. At 45° rotation the tape's bounding box
     gets ~2× taller, so the bleed has to be generous. */
  top: -200%;
  bottom: -200%;
  left: 0;
  background: repeating-linear-gradient(
    45deg,
    #c9a313 0 28px,
    #14182b 28px 56px
  );
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  box-shadow: 6px 0 0 -2px rgba(0, 0, 0, 0.4);
  opacity: 0.92;
  will-change: transform;
}
/* Right-drifting lanes — lean roughly +45° with wider rotation jitter. */
.warning-tape--1 {
  --tape-rot: 32deg;
  animation: tape-drift-h 38s linear infinite;
}
.warning-tape--2 {
  --tape-rot: 58deg;
  width: 36px;
  opacity: 0.78;
  animation: tape-drift-h 56s linear infinite -22s;
}
.warning-tape--3 {
  --tape-rot: 50deg;
  width: 28px;
  opacity: 0.62;
  animation: tape-drift-h 72s linear infinite -41s;
}

/* Left-drifting lanes — lean the opposite way so the tapes cross over. */
.warning-tape--4 {
  --tape-rot: -38deg;
  width: 40px;
  opacity: 0.85;
  animation: tape-drift-h-rev 46s linear infinite -12s;
}
.warning-tape--5 {
  --tape-rot: -55deg;
  width: 32px;
  opacity: 0.72;
  animation: tape-drift-h-rev 64s linear infinite -33s;
}
.warning-tape--6 {
  --tape-rot: -28deg;
  width: 28px;
  opacity: 0.58;
  animation: tape-drift-h-rev 80s linear infinite -55s;
}

@keyframes tape-drift-h {
  /* Sweep range wide enough to clear the rotated tape's horizontal
     bounding box (≈2× section height at 45°) on both edges. */
  from { transform: translateX(-80vw) rotate(var(--tape-rot, 0deg)); }
  to   { transform: translateX(180vw) rotate(var(--tape-rot, 0deg)); }
}
@keyframes tape-drift-h-rev {
  from { transform: translateX(180vw) rotate(var(--tape-rot, 0deg)); }
  to   { transform: translateX(-80vw) rotate(var(--tape-rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .pillars-section::before,
  .warning-tape { animation: none !important; }
}

/* Pillars-section lane definitions — different speeds + positions so the
   two sections don't drift in lock-step. */

.pillars-section .flyby__ship--1  { left:  3%; bottom: -25%; width: 56px; opacity: 0.55; --tilt:  3deg;
                                    animation: ship-fly-up 38s linear infinite; animation-delay: -8s; }
.pillars-section .flyby__ship--2  { left: 12%; bottom: -25%; width: 72px; opacity: 0.68; --tilt: -2deg;
                                    animation: ship-fly-up 26s linear infinite; animation-delay: -19s; }
.pillars-section .flyby__ship--3  { left: 21%; bottom: -25%; width: 40px; opacity: 0.42; --tilt:  4deg;
                                    animation: ship-fly-up 54s linear infinite; animation-delay: -41s; }
.pillars-section .flyby__ship--4  { left: 30%; bottom: -25%; width: 96px; opacity: 0.8;  --tilt: -3deg;
                                    animation: ship-fly-up 22s linear infinite; animation-delay: -12s; }
.pillars-section .flyby__ship--5  { left: 40%; bottom: -25%; width: 60px; opacity: 0.6;  --tilt:  2deg;
                                    animation: ship-fly-up 44s linear infinite; animation-delay: -27s; }
.pillars-section .flyby__ship--6  { left: 50%; bottom: -25%; width: 84px; opacity: 0.74; --tilt: -4deg;
                                    animation: ship-fly-up 32s linear infinite; animation-delay: -5s; }
.pillars-section .flyby__ship--7  { left: 60%; bottom: -25%; width: 48px; opacity: 0.5;  --tilt:  3deg;
                                    animation: ship-fly-up 48s linear infinite; animation-delay: -33s; }
.pillars-section .flyby__ship--8  { left: 70%; bottom: -25%; width: 104px; opacity: 0.82; --tilt: -2deg;
                                    animation: ship-fly-up 25s linear infinite; animation-delay: -15s; }
.pillars-section .flyby__ship--9  { left: 80%; bottom: -25%; width: 52px; opacity: 0.45; --tilt:  4deg;
                                    animation: ship-fly-up 58s linear infinite; animation-delay: -40s; }
.pillars-section .flyby__ship--10 { left: 90%; bottom: -25%; width: 76px; opacity: 0.7;  --tilt: -3deg;
                                    animation: ship-fly-up 34s linear infinite; animation-delay: -21s; }

/* Two enemy dives from the top */
.pillars-section .flyby__ship--11 { left: 35%; top: -25%; width: 64px; opacity: 0.6; --tilt: -2deg;
                                    animation: ship-fly-down 42s linear infinite; animation-delay: -11s; }
.pillars-section .flyby__ship--12 { left: 75%; top: -25%; width: 56px; opacity: 0.55; --tilt: 3deg;
                                    animation: ship-fly-down 48s linear infinite; animation-delay: -26s; }

/* Side-sweep popcorn trains */
.pillars-section .flyby__ship--13 { left: -20vw; top: 12%; width: 52px; opacity: 0.55; --tilt: 0deg;
                                    animation: ship-fly-right 26s linear infinite; animation-delay: -7s; }
.pillars-section .flyby__ship--14 { right: -20vw; top: 48%; width: 64px; opacity: 0.66; --tilt: 0deg;
                                    animation: ship-fly-left 30s linear infinite; animation-delay: -19s; }
.pillars-section .flyby__ship--15 { left: -20vw; top: 84%; width: 44px; opacity: 0.48; --tilt: 0deg;
                                    animation: ship-fly-right 36s linear infinite; animation-delay: -29s; }

@media (max-width: 720px) {
  /* Thin the central lanes on mobile so ships don't overrun the copy. */
  .about .flyby__ship--3, .about .flyby__ship--4, .about .flyby__ship--5, .about .flyby__ship--6,
  .about .flyby__ship--12, .about .flyby__ship--13, .about .flyby__ship--14,
  .pillars-section .flyby__ship--3, .pillars-section .flyby__ship--4,
  .pillars-section .flyby__ship--5, .pillars-section .flyby__ship--6,
  .pillars-section .flyby__ship--11, .pillars-section .flyby__ship--12,
  .pillars-section .flyby__ship--13, .pillars-section .flyby__ship--14 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flyby__ship { animation: none !important; opacity: 0; }
}

/* Atlas reveal */
.atlas {
  background: var(--navy);
  color: var(--cyan-dim);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(45,212,230,0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(230,59,108,0.10), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(45,212,230,0.07) 60px 61px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(45,212,230,0.07) 60px 61px);
  border-top: 3px solid var(--cyan);
  border-bottom: 3px solid var(--cyan);
  position: relative;
  overflow: hidden;
}
.atlas__inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.atlas h2 {
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(45,212,230,0.55);
  margin-bottom: 14px;
}
.atlas .flavor { color: var(--cyan-dim); margin-bottom: 18px; }
.atlas__body {
  max-width: 60ch;
  margin: 0 auto;
  color: #eaf6f9;
  font-size: clamp(17px, 2vw, 20px);
}
.atlas .ribbon { background: var(--cyan); color: var(--navy); box-shadow: 3px 3px 0 var(--ink); }
.atlas .atlas-card .ribbon--magenta { background: var(--magenta); color: var(--paper); }
.atlas .atlas-card .ribbon--cyan { background: var(--cyan); color: var(--ink); }

/* Pinnacle boss silhouettes — locked-glossary teaser before the cards. */
.atlas__bosses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 880px;
}
.atlas__boss-cell {
  text-align: center;
}
.atlas__boss {
  width: clamp(72px, 11vw, 132px);
  height: auto;
  /* Fully black silhouette + faint cyan glow so it reads against navy */
  filter: brightness(0) drop-shadow(0 0 8px rgba(45, 212, 230, 0.32));
  opacity: 0.92;
}
.atlas__boss-label {
  display: block;
  margin-top: 6px;
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.18em;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--cyan-dim);
}

.atlas__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin: clamp(24px, 4vw, 36px) auto 0;
  max-width: 880px;
  text-align: left;
}
.atlas-card { color: var(--ink); }
.atlas-card h3 { margin: 10px 0 8px; }

/* "Before → after" pair inside each Atlas card. */
.atlas-card__pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  margin-top: clamp(14px, 2vw, 20px);
}
.atlas-card__art {
  width: clamp(80px, 11vw, 130px);
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: zoom-in;
  /* PNGs are 276 px native; scale ~2.5 × max base 130 ≈ 325 — within native
     range so the popup stays crisp. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
  backface-visibility: hidden;
}
.atlas-card__art:hover,
.atlas-card__art:focus {
  transform: scale(2.5);
  z-index: 10;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.atlas-card:has(.atlas-card__art:hover) {
  position: relative;
  z-index: 20;
}
.atlas-card__chevron {
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  color: var(--magenta);
  text-shadow: 2px 2px 0 var(--ink);
  flex-shrink: 0;
}
.atlas-card:nth-child(2) .atlas-card__chevron { color: var(--cyan); }

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

/* The dev */
.dev {
  position: relative;
  background-color: var(--paper-dotted);
  overflow: hidden;
  isolation: isolate;
}
.dev::before {
  content: "";
  position: absolute;
  inset: -15%;
  background-image: url("../img/halftone_vortex.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  animation: vortex-swing 18s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.dev::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 247, 226, 0.5);
  z-index: 0;
  pointer-events: none;
}
@keyframes vortex-swing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dev::before { animation: none; transform: none; }
}
.dev__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.dev__logo {
  max-width: min(560px, 80vw);
  margin: clamp(16px, 3vw, 28px) auto;
  display: block;
}
.dev__links { margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Each gradient stop is its own registered colour custom-property so the
   sky gradient interpolates per-pixel as the values cross-fade. Literal
   linear-gradient interpolation refuses to animate when the stop count
   or structure differs between TODs — driving stops through registered
   vars side-steps that. */
@property --sky-top   { syntax: '<color>'; inherits: true; initial-value: #b8d8ec; }
@property --sky-mid   { syntax: '<color>'; inherits: true; initial-value: #e6e8d8; }
@property --sky-bot   { syntax: '<color>'; inherits: true; initial-value: #f3eada; }
@property --cloud-tint { syntax: '<color>'; inherits: true; initial-value: #f8f4e2; }
@property --sky-text   { syntax: '<color>'; inherits: true; initial-value: #14182b; }

/* Shared gameplay sky — used by Hero + Trailer. The host element needs
   data-tod (day/dusk/night) + data-wind (r/l) attributes; JS sets them
   on page load and cycles them every few seconds. */
[data-tod] {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-bot) 100%);
  transition:
    --sky-top   8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    --sky-mid   8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    --sky-bot   8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    --cloud-tint 8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    --sky-text   8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
[data-tod] .sky-cloud {
  transition: background-color 8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@media (prefers-reduced-motion: reduce) {
  [data-tod], [data-tod] .sky-cloud { transition: none; }
}
[data-tod="day"] {
  --sky-top: #b8d8ec;
  --sky-mid: #e6e8d8;
  --sky-bot: #f3eada;
  --cloud-tint: #f8f4e2;
  --sky-text: #14182b;
}
[data-tod="dusk"] {
  --sky-top: #d96a3a;
  --sky-mid: #ee9655;
  --sky-bot: #f5c389;
  --cloud-tint: #f8eed0;
  --sky-text: #1b0e05;
}
[data-tod="night"] {
  --sky-top: #3d4f8c;
  --sky-mid: #475eaa;
  --sky-bot: #5266a4;
  --cloud-tint: #eceffd;
  --sky-text: #fff7e2;
}

.trailer { position: relative; overflow: hidden; isolation: isolate; }
.trailer .section__inner { position: relative; z-index: 1; }
.trailer h2, .trailer .flavor { color: var(--sky-text); }

.sky-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sky-cloud {
  position: absolute;
  background-color: var(--cloud-tint);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
}
.sky-cloud--a { -webkit-mask-image: url("../img/cloud_day.png");      mask-image: url("../img/cloud_day.png"); }
.sky-cloud--b { -webkit-mask-image: url("../img/cloud_shape_2.png");  mask-image: url("../img/cloud_shape_2.png"); }

/* Layer presets (sizing + speed + opacity) */
.sky-cloud--far    { width: 22vw; height: 9vw;  opacity: 0.55; }
.sky-cloud--mid    { width: 34vw; height: 14vw; opacity: 0.75; }
.sky-cloud--close  { width: 52vw; height: 22vw; opacity: 0.92; }

/* Drift animations — drift L→R or R→L, slow vertical drift via translateY on parent */
@keyframes cloud-drift-r {
  from { transform: translateX(-40vw) translateY(0); }
  to   { transform: translateX(140vw) translateY(8vh); }
}
@keyframes cloud-drift-l {
  from { transform: translateX(140vw) translateY(0); }
  to   { transform: translateX(-40vw) translateY(8vh); }
}

/* Individual cloud positions + speeds — far is slowest, close fastest */
.sky-cloud:nth-child(1) { top:  6%;  animation: cloud-drift-r 64s linear infinite; }
.sky-cloud:nth-child(2) { top: 22%;  animation: cloud-drift-r 78s linear infinite; animation-delay: -22s; }
.sky-cloud:nth-child(3) { top: 38%;  animation: cloud-drift-r 90s linear infinite; animation-delay: -55s; }
.sky-cloud:nth-child(4) { top: 12%;  animation: cloud-drift-r 44s linear infinite; animation-delay: -12s; }
.sky-cloud:nth-child(5) { top: 32%;  animation: cloud-drift-r 52s linear infinite; animation-delay: -36s; }
.sky-cloud:nth-child(6) { top:  0%;  animation: cloud-drift-r 26s linear infinite; animation-delay: -8s; }
.sky-cloud:nth-child(7) { top: 24%;  animation: cloud-drift-r 32s linear infinite; animation-delay: -20s; }

/* Wind-left variant — applies to any [data-wind="l"] ancestor */
[data-wind="l"] .sky-cloud:nth-child(1) { animation-name: cloud-drift-l; }
[data-wind="l"] .sky-cloud:nth-child(2) { animation-name: cloud-drift-l; }
[data-wind="l"] .sky-cloud:nth-child(3) { animation-name: cloud-drift-l; }
[data-wind="l"] .sky-cloud:nth-child(4) { animation-name: cloud-drift-l; }
[data-wind="l"] .sky-cloud:nth-child(5) { animation-name: cloud-drift-l; }
[data-wind="l"] .sky-cloud:nth-child(6) { animation-name: cloud-drift-l; }
[data-wind="l"] .sky-cloud:nth-child(7) { animation-name: cloud-drift-l; }

@media (prefers-reduced-motion: reduce) {
  .sky-cloud { animation: none !important; }
}

.trailer__frame {
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 var(--ink);
  background-color: var(--card);
  background-image: repeating-linear-gradient(45deg, #ffffff 0 14px, #f3f3f3 14px 28px);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  position: relative;
  overflow: hidden;
}
.trailer__frame iframe { width: 100%; height: 100%; border: 0; }
.trailer__placeholder {
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 0.08em;
  font-size: clamp(28px, 5vw, 56px);
  color: var(--ink);
  margin-bottom: 6px;
}

/* Footer */
.footer {
  border-top: 3px solid var(--ink);
  padding: 28px var(--pad-x);
  font-size: 14px;
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__pending { opacity: 0.55; cursor: default; }

/* Press page */
.press-header {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.factsheet dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0;
}
.factsheet dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  opacity: 0.75;
  white-space: nowrap;
}
.factsheet dd { margin: 0; font-size: 16px; }
@media (max-width: 480px) {
  .factsheet dl { grid-template-columns: 1fr; gap: 4px 0; }
  .factsheet dt { margin-top: 8px; }
}

.desc-block {
  margin-bottom: 20px;
}
.desc-block h3 { margin-bottom: 10px; }
.desc-block pre {
  font-family: 'Cabin Condensed', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.assets-row {
  display: flex; flex-wrap: wrap; gap: 16px;
}

/* Demo page — Atlas theme reused so the demo lives in the "endgame" feel. */
body.demo-page {
  background: var(--navy);
  color: var(--cyan-dim);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(45,212,230,0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(230,59,108,0.10), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(45,212,230,0.07) 60px 61px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(45,212,230,0.07) 60px 61px);
  background-attachment: fixed;
  /* Sticky-footer: body fills the viewport, main absorbs any extra height,
     footer stays at its natural size. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
body.demo-page > main { flex: 1 0 auto; }
body.demo-page > .footer { flex: 0 0 auto; }

.demo-bar {
  border-bottom: 3px solid var(--cyan);
  background: rgba(12, 15, 30, 0.92);
  padding: 12px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  font-family: 'Bangers', system-ui, sans-serif; letter-spacing: 0.08em;
  position: sticky; top: 0; z-index: 10;
  transition: padding 0.15s ease;
  backdrop-filter: blur(6px);
}
.demo-bar--compact { padding-top: 6px; padding-bottom: 6px; }
/* Wishlist button keeps the magenta-on-paper style from the hero. */
.demo-bar .btn-comic--magenta { color: var(--paper); }
.demo-bar .btn-comic--magenta:hover { color: var(--paper); }

.demo-section { text-align: left; }
.demo-section .section__inner { text-align: left; }
.demo-section h2 {
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(45, 212, 230, 0.55);
}
.demo-section .flavor { color: var(--cyan-dim); }
.demo-section .ribbon { /* keep base ribbon */ }

/* Footer on the demo page picks up the dark theme too. */
.demo-page .footer {
  border-top: 3px solid var(--cyan);
  color: var(--cyan-dim);
}
.demo-page .footer a { color: var(--cyan); }
.demo-page .footer a:hover { color: var(--paper); }

/* Demo iframe sits in a 16:9 ink-frame, same chrome as the trailer box. */
.demo-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 var(--ink);
  background: #000;
  overflow: hidden;
}
.demo-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.demo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
  text-align: center;
}
.demo-controls .flavor { max-width: 48ch; }
.demo-controls .btn-comic { cursor: pointer; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 24, 43, 0.92);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img,
.lightbox .placeholder-large {
  max-width: 90vw; max-height: 90vh;
  border: 3px solid var(--paper);
  box-shadow: 6px 6px 0 var(--magenta);
  border-radius: var(--rad);
  background: var(--paper);
  background-image: repeating-linear-gradient(45deg, var(--paper) 0 14px, var(--paper-dotted) 14px 28px);
  width: min(960px, 90vw);
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: 32px;
  letter-spacing: 0.08em;
}
.lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  border: 3px solid var(--paper);
  background: var(--magenta);
  color: var(--paper);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: 24px;
  border-radius: var(--rad);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.lightbox__close:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* Visually-hidden (a11y) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}