/* ==========================================================================
   CASSIOPEIA · MARINER 9 MISSION — STYLES
   Modern pixel art: clean palette, soft glow, crisp sprites, arcade UI.
   Mobile-first. Sections:
     1. Tokens (palette, fonts, spacing)   7. Story video
     2. Base & accessibility helpers       8. Game card
     3. Shared components                  9. Sign language
     4. Header & language switch          10. Story & characters
     5. Intro ("PRESS START")             11. Team
     6. Hero                              12. Footer, toast, easter egg
                                          13. Reduced motion
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Deep space */
  --c-space-950: #05041a;
  --c-space-900: #0a0820;
  --c-space-800: #110d2c;
  --c-space-700: #1a1440;
  --c-indigo:    #2a1f5e;
  --c-purple:    #5b3fb0;
  --c-purple-lt: #8d6cff;

  /* Arcade UI panels (from the game menu) */
  --c-panel:     #0f1631;
  --c-panel-2:   #16203f;
  --c-border:    #cfd8f5;
  --c-border-dim:#3a4677;

  /* Accents */
  --c-cyan:      #4fe3ff;
  --c-cyan-dim:  #2bb3d4;
  --c-teal:      #146c78;
  --c-orange:    #ffb347;
  --c-orange-2:  #ff8a2a;
  --c-amber:     #ffd98a;
  --c-pink:      #ff7ad9;
  --c-green:     #7dff8a;
  --c-mars:      #c8643a;
  --c-mars-dk:   #5b2224;

  /* Text (all checked for WCAG AA on --c-space-900 / --c-panel) */
  --c-text:      #eeecff;
  --c-muted:     #bdb8e6;
  --c-ink:       #1b0e00;   /* dark text on orange buttons */

  /* Gradients */
  --g-select: linear-gradient(90deg, #11616c 0%, #3d2a86 100%);
  --g-title:  linear-gradient(180deg, #ffe29a 0%, #ffb347 45%, #ff7a1a 100%);

  /* Fonts */
  --f-pixel: "Silkscreen", "Courier New", ui-monospace, monospace;
  --f-body:  "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* 8px spacing grid */
  --u: 8px;
  --s1: calc(var(--u) * 1);
  --s2: calc(var(--u) * 2);
  --s3: calc(var(--u) * 3);
  --s4: calc(var(--u) * 4);
  --s5: calc(var(--u) * 6);
  --s6: calc(var(--u) * 8);
  --s7: calc(var(--u) * 12);

  --header-h: 64px;
  --wrap: 1180px;
  --px: 3px;               /* default sprite pixel size */
  --shadow-hard: 6px 6px 0 0 var(--c-space-950);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: 1.0625rem;            /* 17px – comfortable on phones */
  line-height: 1.65;
  color: var(--c-text);
  background-color: var(--c-space-900);
  /* Fallback starfield if canvas/JS is unavailable */
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, #cfe9ff 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 60%, #fff 50%, transparent 51%),
    linear-gradient(180deg, var(--c-space-900), #160f38 60%, var(--c-space-900));
  background-size: 180px 180px, 240px 240px, 320px 320px, 100% 100%;
  overflow-x: hidden;
}
@media (min-width: 768px) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; }
a { color: var(--c-cyan); text-underline-offset: 3px; }
a:hover { color: #9ff0ff; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 var(--s2); }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* Visible, high-contrast focus everywhere (keyboard only) */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-amber);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(10, 8, 32, .9);
}
main:focus-visible { box-shadow: none; outline: none; }

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

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 12px 16px;
  font-family: var(--f-pixel); font-size: .9rem;
  background: var(--c-orange); color: var(--c-ink);
  border: 3px solid var(--c-ink);
  transform: translateY(-160%);
  transition: transform .15s;
}
.skip-link:focus { transform: none; color: var(--c-ink); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s2);
}
@media (min-width: 600px) { .wrap { padding-inline: var(--s4); } }

.starfield {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
}

.noscript {
  position: fixed; inset: auto 0 0 0; padding: 16px;
  background: var(--c-orange); color: var(--c-ink); text-align: center; font-weight: 700;
}

/* ---------- 3. SHARED COMPONENTS ---------- */

/* Pixel sprites (inline SVG or <img>) — always crisp */
.sprite { display: inline-block; line-height: 0; }
.sprite svg, .sprite img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.sprite img { image-rendering: pixelated; }

/* Arcade panel: dark navy, thick light border, hard pixel shadow */
.arcade-panel {
  position: relative;
  background: linear-gradient(180deg, var(--c-panel-2), var(--c-panel));
  border: 3px solid var(--c-border);
  box-shadow: 0 0 0 3px var(--c-space-950), var(--shadow-hard), 0 0 40px rgba(79, 227, 255, .08);
}

.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin: 0 0 var(--s3);
  padding: 6px 12px;
  font-family: var(--f-pixel); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(15, 22, 49, .85);
  border: 2px solid var(--c-cyan);
  box-shadow: 4px 4px 0 var(--c-space-950);
}
.badge__dot {
  width: 8px; height: 8px; background: var(--c-orange);
  box-shadow: 0 0 8px var(--c-orange);
}

.section { position: relative; padding-block: clamp(56px, 9vw, 112px); }
.section:nth-of-type(odd) { background: linear-gradient(180deg, rgba(42, 31, 94, .28), rgba(42, 31, 94, 0)); }

.section-head { max-width: 760px; margin-bottom: var(--s5); }
.kicker {
  margin: 0 0 var(--s1);
  font-family: var(--f-pixel); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.kicker::before { content: "▸ "; }
.section-title {
  font-family: var(--f-pixel); font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: .02em;
  color: var(--c-orange);
  text-shadow: 3px 3px 0 #3b1d6e, 0 0 18px rgba(255, 138, 42, .35);
  margin-bottom: var(--s2);
}
.subhead {
  margin-top: var(--s6); margin-bottom: var(--s1);
  font-family: var(--f-pixel); font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  color: var(--c-cyan);
  text-shadow: 3px 3px 0 var(--c-space-950);
}
.lead { font-size: 1.12em; color: var(--c-text); max-width: 68ch; }
.fineprint { margin-top: var(--s3); font-size: .9rem; color: var(--c-muted); max-width: 72ch; }

/* Pixel buttons */
.pixel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  font-family: var(--f-pixel); font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  text-decoration: none; text-transform: uppercase;
  color: var(--c-text);
  background: var(--c-panel-2);
  border: 3px solid var(--c-border);
  box-shadow: 4px 4px 0 var(--c-space-950);
  cursor: pointer;
  transition: transform .08s steps(2), box-shadow .08s steps(2), background-color .15s;
}
.pixel-btn:hover { background: var(--c-indigo); color: var(--c-text); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c-space-950); }
.pixel-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--c-space-950); }
.pixel-btn--ghost { background: transparent; box-shadow: none; border-color: var(--c-border-dim); }
.pixel-btn--ghost:hover { box-shadow: none; transform: none; border-color: var(--c-cyan); }
.pixel-btn--cyan { background: var(--c-cyan); color: #04121a; border-color: #e9fbff; }
.pixel-btn--cyan:hover { background: #8bf0ff; color: #04121a; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 var(--s3); }
.chips li {
  padding: 6px 12px;
  font-size: .92rem;
  border: 2px solid var(--c-cyan-dim);
  background: rgba(79, 227, 255, .08);
}
.chips li::before { content: "✦ "; color: var(--c-cyan); }

.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* Mars-surface divider between sections */
.horizon {
  height: 104px;
  margin-top: -56px;           /* sits on the bottom edge of the previous section */
  margin-bottom: -48px;        /* …and fades into the next one */
  position: relative; z-index: 1;
  background:
    url("assets/img/horizon.svg") repeat-x left top / auto 56px,
    linear-gradient(180deg, transparent 0 54px, #7a2f2a 54px, rgba(122, 47, 42, .35) 70px, rgba(122, 47, 42, 0) 104px);
  image-rendering: pixelated;
  pointer-events: none;
}

/* ---------- 4. HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 8, 32, .88);
  border-bottom: 3px solid var(--c-indigo);
  box-shadow: 0 1px 0 rgba(79, 227, 255, .35);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(10, 8, 32, .72); backdrop-filter: blur(8px); }
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s1);
  min-height: var(--header-h);
}
@media (min-width: 420px) { .site-header__inner { gap: var(--s2); } }
@media (max-width: 379px) {
  .brand { font-size: .85rem; gap: 6px; }
  .brand__logo { width: 34px; }
  .lang-switch button { min-width: 40px; padding: 6px 4px; }
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-right: auto;
  font-family: var(--f-pixel); font-weight: 700; font-size: 1rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--c-text);
}
.brand:hover { color: var(--c-cyan); }
.brand__logo { display: inline-block; width: 44px; line-height: 0; }
.brand__logo svg { width: 100%; height: auto; display: block; }
.brand__logo--lg { width: 88px; flex: none; }

.nav-toggle { order: 3; min-height: 44px; padding: 8px 12px; font-size: .8rem; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 3px; background: currentColor; position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
.nav-toggle__text { display: none; }
@media (min-width: 420px) { .nav-toggle__text { display: inline; } }

.site-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--c-panel);
  border-bottom: 3px solid var(--c-border);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .5);
  display: none;
}
.site-nav.is-open { display: block; }
.js .site-nav:not(.is-open) { display: none; }
.no-js .site-nav { display: block; position: static; background: none; border: 0; box-shadow: none; }
.site-nav ul { display: flex; flex-direction: column; padding: var(--s1) var(--s2) var(--s2); }
.site-nav a {
  display: block; padding: 12px 8px;
  font-family: var(--f-pixel); font-size: .95rem; letter-spacing: .04em;
  color: var(--c-text); text-decoration: none;
  border-bottom: 2px dashed var(--c-border-dim);
}
.site-nav a:hover { color: var(--c-cyan); background: var(--g-select); }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-nav, .js .site-nav:not(.is-open) {
    display: block; position: static; background: none; border: 0; box-shadow: none;
  }
  .site-nav ul { flex-direction: row; gap: 4px; padding: 0; }
  .site-nav a { padding: 8px 10px; font-size: .78rem; border: 0; border-bottom: 3px solid transparent; }
  .site-nav a:hover { background: none; border-bottom-color: var(--c-cyan); }
}

.lang-switch {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-pixel); font-size: .85rem;
}
.lang-switch > span[aria-hidden] { color: var(--c-border-dim); }
.lang-switch button {
  min-width: 44px; min-height: 40px; padding: 6px 8px;
  font-family: var(--f-pixel); font-weight: 700; letter-spacing: .06em;
  background: transparent; color: var(--c-cyan);
  border: 2px solid var(--c-cyan-dim);
  cursor: pointer;
}
.lang-switch button:hover { border-color: var(--c-cyan); background: rgba(79, 227, 255, .12); }
.lang-switch button[aria-pressed="true"] {
  background: var(--c-cyan); color: #04121a; border-color: #e9fbff;
  box-shadow: 3px 3px 0 var(--c-space-950);
}
.lang-switch__label { margin-right: 6px; color: var(--c-muted); }

/* ---------- 5. INTRO ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(42, 31, 94, .96), rgba(5, 4, 26, .98) 70%);
  text-align: center;
  cursor: pointer;
  transition: opacity .45s ease, visibility .45s;
}
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro__inner { padding: var(--s3); }
.intro__robot { width: 90px; margin-bottom: var(--s2); animation: float 3s ease-in-out infinite; }
.intro__title {
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(1.8rem, 8vw, 3.4rem);
  color: var(--c-orange); text-shadow: 4px 4px 0 #3b1d6e, 0 0 20px rgba(255, 138, 42, .5);
}
.intro__title2 { color: var(--c-cyan); }
.intro__press { margin-top: var(--s4); font-family: var(--f-pixel); font-size: 1.25rem; letter-spacing: .2em; color: var(--c-text); }
.intro__hint { color: var(--c-muted); font-size: .95rem; }

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding-top: clamp(28px, 4.5vw, 56px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero__titlewrap { position: relative; }
.hero__title { display: flex; flex-direction: column; align-items: center; }
.hero__title1 {
  font-family: var(--f-pixel); font-weight: 700;
  font-size: clamp(2.7rem, 13vw, 6.6rem);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--c-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title1 {
    background: var(--g-title);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.glow-text {
  filter: drop-shadow(0 0 14px rgba(255, 138, 42, .55)) drop-shadow(4px 4px 0 #3b1d6e);
  animation: glow 4s ease-in-out infinite;
}
@keyframes glow {
  50% { filter: drop-shadow(0 0 24px rgba(255, 170, 70, .8)) drop-shadow(4px 4px 0 #3b1d6e); }
}
.hero__title2 {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2);
  font-family: var(--f-pixel); font-weight: 700;
  font-size: clamp(1.1rem, 4.5vw, 2rem);
  letter-spacing: .5em;
  color: var(--c-cyan);
  text-shadow: 0 0 12px rgba(79, 227, 255, .55);
}
.hero__title2-text { margin-right: -.5em; } /* compensate trailing letter-spacing */
.hero__line { display: block; width: clamp(28px, 10vw, 96px); height: 3px; background: var(--c-cyan); box-shadow: 0 0 8px var(--c-cyan); }

.hero__robot { display: none; }
.hero__robot-mobile { /* on phones Mariner 9 floats above Cass instead of next to the title */
  position: absolute; z-index: 2; left: calc(40 * 2px + 64px); bottom: 150px;
  width: 48px;
  animation: float 3.2s ease-in-out infinite;
}
.hero__robot .sprite { width: 100%; }
.hero__trail { display: none; }
@media (min-width: 720px) {
  .hero__robot-mobile { display: none; }
  .hero__robot {
    display: block; position: absolute;
    animation: float 3.2s ease-in-out infinite;
    top: -44px; right: -48px; width: 60px; }
  .hero__trail {
    display: block; position: absolute; right: 100%; top: 55%;
    width: 90px; height: 4px; margin-right: 6px;
    background: repeating-linear-gradient(90deg, rgba(79, 227, 255, .9) 0 4px, transparent 4px 10px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
            mask-image: linear-gradient(90deg, transparent, #000);
  }
}
@media (min-width: 1000px) {
  .hero__robot { top: 50%; right: auto; left: -150px; width: 72px; margin-top: -60px; }
}
@keyframes float { 50% { transform: translateY(-10px); } }

.hero__tagline {
  min-height: 1.6em;
  margin: var(--s3) 0 var(--s1);
  font-family: var(--f-pixel); font-size: clamp(.95rem, 3.4vw, 1.2rem);
  color: var(--c-text);
}
.typewriter::after {
  content: ""; display: inline-block; width: .55em; height: 1em;
  margin-left: 4px; vertical-align: -.12em;
  background: var(--c-cyan);
  animation: blink 1s steps(2, start) infinite;
}
.hero__team { margin-bottom: var(--s3); color: var(--c-muted); font-size: .98rem; }

/* Arcade menu (the hero CTAs) */
.hero__menu { width: min(100%, 460px); padding: var(--s1); text-align: left; }
.arcade-menu { display: flex; flex-direction: column; gap: 2px; }
.arcade-menu__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  border-left: 4px solid transparent;
  color: var(--c-text); text-decoration: none;
  transition: background-color .12s;
}
.arcade-menu__cursor { grid-row: 1 / span 2; width: 30px; visibility: hidden; }
.arcade-menu__label { font-family: var(--f-pixel); font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.arcade-menu__sub { grid-column: 2; font-size: .82rem; color: var(--c-muted); }
.arcade-menu__item.is-selected,
.arcade-menu__item:focus-visible {
  background: var(--g-select);
  border-left-color: var(--c-cyan);
  color: #fff;
}
.arcade-menu__item.is-selected .arcade-menu__cursor,
.arcade-menu__item:focus-visible .arcade-menu__cursor { visibility: visible; animation: nudge .7s steps(2) infinite; }
.arcade-menu__item.is-selected .arcade-menu__sub { color: #e2dcff; }
.arcade-menu__item:focus-visible { outline-offset: -3px; box-shadow: none; }
@keyframes nudge { 50% { transform: translateX(3px); } }

.keyhint {
  display: none;
  margin: var(--s3) 0 0;
  font-family: var(--f-pixel); font-size: .78rem; color: var(--c-muted);
}
.keyhint kbd {
  display: inline-block; min-width: 22px; margin-right: 2px; padding: 0 4px;
  font-family: var(--f-pixel); color: var(--c-text);
  border: 2px solid var(--c-border-dim); background: var(--c-panel);
}
@media (hover: hover) and (pointer: fine) { .keyhint { display: block; } }

/* Scene */
.hero__scene {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: var(--s4);
  padding: 0 var(--s2);
  min-height: 170px;
  flex: 1 0 auto;
}
.hero__cliff {
  position: absolute; left: 0; bottom: 0;
  width: min(72%, 420px); height: 34px;
  background: #2a1430;
  border-top: 4px solid #5a2a46;
  clip-path: polygon(0 0, 88% 0, 88% 25%, 94% 25%, 94% 55%, 100% 55%, 100% 100%, 0 100%);
}
.hero__bike { --px: 2px; position: relative; z-index: 1; width: calc(40 * var(--px)); margin-bottom: 30px; margin-left: 4px; }
.hero__cass { --px: 3px; position: absolute; z-index: 2; left: calc(40 * 2px + 18px); bottom: 34px; width: calc(16 * var(--px)); }
.hero__mars {
  position: relative;
  width: clamp(120px, 34vw, 340px);
  aspect-ratio: 1;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 24px rgba(200, 100, 58, .35));
}
.hero__mars canvas, .hero__mars img {
  width: 100%; height: 100%; display: block; image-rendering: pixelated;
}
.hero__mars::before { /* pixel atmosphere ring like the menu art */
  content: ""; position: absolute; inset: -4%;
  border: 4px solid rgba(200, 120, 90, .35); border-radius: 50%;
}
.hero__version { position: absolute; right: var(--s2); bottom: var(--s1); z-index: 2; font-family: var(--f-pixel); font-size: .72rem; color: var(--c-muted); }

.float-sat { position: absolute; z-index: 0; opacity: .7; width: calc(17 * 2px); }
.float-sat--a { top: 14%; left: 8%; animation: drift 14s ease-in-out infinite; }
.float-sat--b { top: 38%; right: 6%; width: calc(17 * 3px); animation: drift 18s ease-in-out infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(18px, -14px) rotate(6deg); }
}

/* Your own Cass PNG: sized from its real pixel width (set by script.js) */
.hero__cass.is-custom { --px: 2px; width: calc(var(--native-w, 36) * var(--px)); }

@media (min-width: 600px) {
  .hero__bike { --px: 3px; }
  .hero__cass { --px: 4px; left: calc(40 * 3px + 22px); }
  .hero__cass.is-custom { --px: 3px; }
  .hero__robot-mobile { left: calc(40 * 3px + 96px); bottom: 190px; }
}
@media (min-width: 1100px) {
  .hero { padding-bottom: 0; }
  .hero__scene {
    position: absolute; inset: auto 0 0 0;
    min-height: 0; height: 100%;
    margin: 0; padding: 0;
    pointer-events: none;
  }
  .hero__cliff { width: 30%; height: 46px; }
  .hero__bike { --px: 4px; position: absolute; left: 3%; bottom: 44px; margin: 0; }
  .hero__cass { --px: 4px; left: calc(3% + 40 * 4px + 18px); bottom: 46px; }
  .hero__cass.is-custom { --px: 3px; }
  .hero__mars { position: absolute; right: 4%; bottom: 14%; width: clamp(260px, 22vw, 360px); margin: 0; }
  .hero__inner { padding-bottom: 96px; }
}

/* ---------- 7. STORY VIDEO ---------- */
.screen {
  position: relative;
  padding: clamp(8px, 1.6vw, 16px);
  background: linear-gradient(180deg, #2a2f52, #161a33);
  border: 3px solid var(--c-border);
  box-shadow: 0 0 0 3px var(--c-space-950), var(--shadow-hard), 0 0 60px rgba(91, 63, 176, .35);
}
.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-facade {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; padding: 0; border: 0;
  background: radial-gradient(ellipse at 50% 60%, #2a1f5e, #0a0820 75%);
  cursor: pointer;
}
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade::after { /* scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px);
}
.video-facade__poster { position: absolute; inset: 0; display: grid; place-items: center; }
.video-facade__poster .sprite { width: clamp(60px, 14%, 140px); opacity: .9; animation: float 3s ease-in-out infinite; }
.video-facade__play {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(.9rem, 2.4vw, 1.2rem);
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-orange);
  border: 3px solid #fff1d0;
  box-shadow: 5px 5px 0 var(--c-space-950), 0 0 30px rgba(255, 138, 42, .55);
  transition: transform .08s steps(2);
}
.video-facade__play::before {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--c-ink);
}
.video-facade:hover .video-facade__play { transform: translate(-2px, -2px) scale(1.04); }
.video-facade:focus-visible { outline-offset: -6px; }
.video-slot--card .video-facade__play { font-size: .85rem; padding: 10px 14px; }

.video-soon {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  padding: var(--s3);
  text-align: center;
  background-color: #0b0a1f;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, rgba(91, 63, 176, .35), transparent 70%);
}
.video-soon::before { /* TV static */
  content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 3px);
  background-size: 7px 9px;
  animation: static .25s steps(3) infinite;
}
@keyframes static { 33% { background-position: 3px 5px; } 66% { background-position: -4px 2px; } }
.video-soon .sprite { width: clamp(48px, 12%, 100px); position: relative; }
.video-soon__title {
  position: relative;
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(1rem, 3vw, 1.6rem);
  color: var(--c-amber); letter-spacing: .1em; text-transform: uppercase;
}
.video-soon__text { position: relative; margin: 0; color: var(--c-muted); font-size: .95rem; max-width: 40ch; }
.video-slot--card .video-soon__title { font-size: .95rem; }
.video-slot--card .video-soon__text { font-size: .85rem; }

.video-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ---------- 8. GAME CARD ---------- */
.game-card {
  display: grid; gap: var(--s4);
  padding: clamp(16px, 3vw, 32px);
}
@media (min-width: 900px) { .game-card { grid-template-columns: 1.15fr 1fr; align-items: center; } }
.screen--game { padding: clamp(6px, 1.2vw, 12px); }
.game-card__preview .video-actions { margin-top: var(--s2); }

.game-card__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.play-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px;
  font-family: var(--f-pixel); font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--c-ink);
  background: var(--g-title);
  border: 4px solid #fff1d0;
  box-shadow: 0 0 0 4px var(--c-space-950), 8px 8px 0 4px #3b1d6e, 0 0 40px rgba(255, 138, 42, .45);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.play-btn::before { content: "▶"; font-size: .8em; }
.play-btn:hover { color: var(--c-ink); transform: translate(-2px, -2px); box-shadow: 0 0 0 4px var(--c-space-950), 10px 10px 0 4px #3b1d6e, 0 0 56px rgba(255, 170, 70, .7); }
.play-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 4px var(--c-space-950), 0 0 0 0 #3b1d6e; }
.play-btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--c-text);
  background: repeating-linear-gradient(135deg, #2a2450 0 10px, #241e46 10px 20px);
  border-color: var(--c-border-dim);
  box-shadow: 0 0 0 4px var(--c-space-950), 6px 6px 0 4px #1b1438;
  transform: none;
}
.play-btn[aria-disabled="true"]::before { content: "⏳"; }
.game-card__note { margin: var(--s1) 0 0; font-size: .92rem; color: var(--c-muted); }

/* ---------- 9. SIGN LANGUAGE ---------- */
.sign-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; max-width: 1000px; }
@media (min-width: 760px) { .sign-grid { grid-template-columns: 1fr 1fr; } }
.sign-card { display: flex; flex-direction: column; }
.sign-card .video-slot { border-bottom: 3px solid var(--c-border); }
.sign-card__body { padding: var(--s2) var(--s2) var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.sign-card__title { font-family: var(--f-body); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.lang-tag { display: inline-flex; align-items: stretch; align-self: flex-start; font-size: .88rem; border: 2px solid var(--c-pink); }
.lang-tag__code { padding: 2px 8px; font-family: var(--f-pixel); font-weight: 700; color: #22041a; background: var(--c-pink); }
.lang-tag__name { padding: 2px 8px; color: var(--c-text); }
.sign-card__link { margin-top: auto; padding-top: var(--s1); font-size: .95rem; }
.sign-card__text { margin: 0; color: var(--c-muted); }
.access-kind { margin: 0; font-family: var(--f-pixel); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-cyan); }
.lang-tag--braille { border-color: var(--c-amber); }
.lang-tag--braille .lang-tag__code { background: var(--c-amber); color: var(--c-ink); }
.pdf-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }

/* Braille card cover (decorative braille cells) */
.braille-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  padding: var(--s3); text-align: center;
  background-color: #0b0a1f;
  background-image:
    radial-gradient(circle, rgba(255, 217, 138, .1) 1.5px, transparent 2px),
    radial-gradient(ellipse at center, rgba(91, 63, 176, .35), transparent 70%);
  background-size: 14px 14px, 100% 100%;
}
.braille-cover__dots {
  font-size: clamp(3rem, 10vw, 5rem); line-height: 1; letter-spacing: .12em;
  color: var(--c-amber);
  text-shadow: 0 0 18px rgba(255, 179, 71, .55);
}
.braille-cover .video-soon__title { margin: 0; }

/* ---------- 10. STORY & CHARACTERS ---------- */
.char-grid { display: grid; gap: var(--s3); margin-top: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.char-card { display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.char-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--c-space-950), 8px 10px 0 0 var(--c-space-950), 0 0 36px rgba(79, 227, 255, .25); }
.char-card__scan {
  position: relative;
  display: grid; place-items: center;
  height: 196px;
  overflow: hidden;
  background-color: #0a0f26;
  background-image:
    linear-gradient(rgba(79, 227, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 227, 255, .09) 1px, transparent 1px);
  background-size: 16px 16px;
  border-bottom: 3px solid var(--c-border);
}
.char-card__scan::after { /* scanner beam */
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 18%;
  background: linear-gradient(180deg, transparent, rgba(79, 227, 255, .28), transparent);
  opacity: 0;
}
.char-card:hover .char-card__scan::after { opacity: 1; animation: scan 1.2s linear infinite; }
@keyframes scan { to { top: 110%; } }
.char-card:hover .char-card__scan .sprite { animation: float 1.6s ease-in-out infinite; }
.char-card__tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 2px 8px;
  font-family: var(--f-pixel); font-size: .68rem; letter-spacing: .05em;
  color: var(--c-ink); background: var(--c-amber);
}
.char-card--hero .char-card__tag { background: var(--c-cyan); color: #04121a; }
.char-card__body { padding: var(--s2); }
.char-card__name { margin-bottom: 6px; font-family: var(--f-pixel); font-size: 1.1rem; color: var(--c-orange); }
.char-card__line { margin: 0; font-size: .98rem; color: var(--c-text); }

/* ---------- 11. TEAM ---------- */
.team-image {
  margin: 0;
  max-width: 1000px;
  padding: clamp(8px, 1.6vw, 16px);
  background: linear-gradient(180deg, #2a2f52, #161a33);
  border: 3px solid var(--c-border);
  box-shadow: 0 0 0 3px var(--c-space-950), var(--shadow-hard), 0 0 60px rgba(91, 63, 176, .35);
}
.team-image img { display: block; width: 100%; height: auto; border: 3px solid var(--c-space-950); }
.team-image__soon {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  padding: var(--s3); text-align: center;
  background-color: #0b0a1f;
  background-image:
    linear-gradient(rgba(79, 227, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 227, 255, .07) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(91, 63, 176, .35), transparent 70%);
  background-size: 16px 16px, 16px 16px, 100% 100%;
  border: 3px dashed var(--c-border-dim);
}
.team-image__soon .sprite { width: 64px; }

/* ---------- 12. FOOTER, TOAST, EASTER EGG ---------- */
.site-footer {
  position: relative;
  margin-top: var(--s6);
  background: linear-gradient(180deg, #7a2f2a 0, #3e1828 90px, #1c0d1f 260px);
  color: var(--c-text);
}
.site-footer .horizon { margin-top: -56px; margin-bottom: -48px; background: url("assets/img/horizon.svg") repeat-x left top / auto 56px; }
.site-footer__inner { padding-block: var(--s5) var(--s6); display: grid; gap: var(--s3); }
.site-footer__brand { display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; }
.site-footer__brand p { margin-bottom: 6px; }
.site-footer__team { font-family: var(--f-pixel); font-weight: 700; font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-amber); }
.disclaimer {
  max-width: 80ch; margin: 0;
  padding: var(--s2);
  font-size: .95rem; color: #ece2ef;
  background: rgba(0, 0, 0, .3);
  border-left: 4px solid var(--c-amber);
}
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.footer-link { color: var(--c-cyan); }

.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 300;
  max-width: min(92vw, 520px);
  padding: 14px 18px;
  font-family: var(--f-body); font-weight: 700;
  color: var(--c-text);
  background: var(--c-panel);
  border: 3px solid var(--c-cyan);
  box-shadow: var(--shadow-hard), 0 0 30px rgba(79, 227, 255, .35);
  transform: translate(-50%, 200%);
  transition: transform .3s steps(4);
}
.toast.is-visible { transform: translate(-50%, 0); }
.toast:empty { display: none; }

.egg-layer { position: fixed; inset: 0; z-index: 250; pointer-events: none; overflow: hidden; }
.egg-flyer { position: absolute; top: 32%; left: -160px; width: 120px; animation: fly 3.6s cubic-bezier(.45, .05, .55, .95) forwards; }
.egg-flyer::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 160px; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(79, 227, 255, .9) 0 6px, transparent 6px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
@keyframes fly {
  0%   { transform: translate(0, 0) rotate(0); }
  25%  { transform: translate(30vw, -8vh) rotate(-8deg); }
  50%  { transform: translate(60vw, 6vh) rotate(8deg); }
  100% { transform: translate(calc(100vw + 320px), -12vh) rotate(0); }
}

/* ---------- 13. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .blink, .typewriter::after { animation: none !important; }
  .char-card:hover { transform: none; }
}

/* Scroll-spy: current section in the header nav (underline + colour, not colour alone) */
.site-nav a[aria-current="location"] { color: var(--c-cyan); border-bottom-color: var(--c-cyan); }
@media (max-width: 959px) { .site-nav a[aria-current="location"]::before { content: "▸ "; } }
@media (max-width: 999px) { .hero__trail { display: none !important; } }

/* Notched phones (viewport-fit=cover): keep content clear of the safe areas */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--s2), env(safe-area-inset-left));
    padding-right: max(var(--s2), env(safe-area-inset-right));
  }
  .site-footer__inner { padding-bottom: max(var(--s6), env(safe-area-inset-bottom)); }
}
@media (min-width: 600px) {
  @supports (padding: max(0px)) {
    .wrap {
      padding-left: max(var(--s4), env(safe-area-inset-left));
      padding-right: max(var(--s4), env(safe-area-inset-right));
    }
  }
}