/* =====================================================================
   ATLAS GALAXY - "THE STAR MAP"
   Chassis: DESCEND. One fixed stage; scroll drives a camera transform
   on a star-map scene graph. Galaxy, constellation of nine worlds, one
   world filling the frame, dossier at depth. Content never scrolls
   past; it grows out of the map.
   Sanctioned dark world: federation indigo surface, starlight ink,
   federation gold, corridor blue.
   ===================================================================== */

body[data-world-id="atlasgalaxy"] {
  /* Fallback palette; theme.js overrides from data/canons.json. */
  --surface: #1B1E3C;      /* federation indigo */
  --ink: #F5EFE2;          /* starlight */
  --accent: #E0B341;       /* federation gold */
  --accent-2: #3E7CB8;     /* corridor blue */
  --wash: #3E7CB8;
  --panel: #12152B;        /* theater-dim panel, deeper than surface */
  --panel-line: #2C3158;
  --ink-dim: #C9C3B4;      /* dimmed starlight, still AA on indigo */

  background: var(--surface);
  color: var(--ink);
  overflow-x: hidden;

  /* ---- WORLD-SWITCHER SKIN (shared .vv-nav, injected by nav.js) ----
     The Star Map is theater-dim, so the switcher reads as a navigation
     readout on the HUD: a deep federation-indigo panel, starlight ink,
     federation-gold accent, tight radius like a chart bezel, the same
     display face the star names use. Colors chosen for AA on dark:
       --vv-nav-bg  #0F1226 (deeper than the surface panel)
       --vv-nav-ink #F5EFE2 starlight  -> 15.6:1 on that bg (AAA)
       accent gold  #E0B341 for ring/hover -> 8.4:1 on that bg
     CORNER: orrery owns bottom-left, exit-door owns top-left, so the
     switcher goes TOP-RIGHT (see the .vv-nav override below, which
     nav.css's inset-x/-y alone cannot reach because it positions from
     left). */
  --vv-nav-bg: #0F1226;
  --vv-nav-ink: var(--ink);
  --vv-nav-accent: var(--accent);
  --vv-nav-radius: 6px;
  --vv-nav-font: var(--font-display);
  --vv-nav-inset-y: clamp(0.75rem, 2vw, 1.5rem);
}

/* PAINT PIN: hidden means gone from paint, always, world-scoped.
   Never rely on a script having set styles. */
body[data-world-id="atlasgalaxy"] [hidden] { display: none !important; }

/* Re-corner the shared switcher to TOP-RIGHT (nav.css defaults to
   top-left via `left`; overriding `left:auto; right:` moves it clear of
   the exit-door and orrery). World-scoped: touches only this world. */
body[data-world-id="atlasgalaxy"] .vv-nav {
  left: auto;
  right: clamp(0.75rem, 2vw, 1.5rem);
}
body[data-world-id="atlasgalaxy"] .vv-nav__panel {
  left: auto;
  right: 0;
}

/* HUD readout flourish: a thin gold hairline under the panel + a faint
   corridor-blue glow on the trigger, so it reads as a chart instrument
   rather than a generic button. World-scoped, shared class untouched. */
body[data-world-id="atlasgalaxy"] .vv-nav__trigger {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  box-shadow:
    0 0 18px 2px rgba(62, 124, 184, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.4);
}
body[data-world-id="atlasgalaxy"] .vv-nav__mark {
  color: var(--accent);
}
body[data-world-id="atlasgalaxy"] .vv-nav__heading {
  color: var(--accent);
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Stage and scene                                                     */
/* ------------------------------------------------------------------ */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 90% at 50% 10%, #232752 0%, var(--surface) 55%, #14172E 100%);
}

.scene {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* width/height set by layout() in world-theme.js */
}

/* In-scene starfield: dots that live in map space, so the camera moves
   through them. The body texture (data-texture="stars") sits fixed
   above, giving two star layers at different depths. */
.scene-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 17% 29%, rgba(245,239,226,0.9) 1.6px, transparent 2.4px),
    radial-gradient(circle at 43% 67%, rgba(245,239,226,0.7) 1.2px, transparent 2px),
    radial-gradient(circle at 66% 21%, rgba(224,179,65,0.8) 1.4px, transparent 2.2px),
    radial-gradient(circle at 81% 58%, rgba(245,239,226,0.6) 1px, transparent 1.6px),
    radial-gradient(circle at 29% 86%, rgba(62,124,184,0.9) 1.4px, transparent 2.2px),
    radial-gradient(circle at 92% 84%, rgba(245,239,226,0.8) 1.2px, transparent 2px),
    radial-gradient(circle at 8% 55%, rgba(245,239,226,0.5) 1px, transparent 1.6px);
  background-size:
    1100px 1100px, 830px 830px, 1300px 1300px, 640px 640px,
    970px 970px, 1500px 1500px, 760px 760px;
}

.scroll-track { height: 660vh; }

/* ------------------------------------------------------------------ */
/* Galaxy layer: the oversized editorial title, painted into the map   */
/* ------------------------------------------------------------------ */

.galaxy-layer {
  position: absolute;
  width: 4300px;
  text-align: center;
  transition: opacity 900ms var(--ease-standard);
}

.galaxy-kicker {
  font-family: var(--font-body);
  font-size: 96px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  max-width: none;
}

.galaxy-title {
  font-size: 300px;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 28px 0 36px;
  color: var(--ink);
  text-shadow: 0 0 160px rgba(62, 124, 184, 0.55);
}

.galaxy-meta {
  font-size: 74px;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  max-width: none;
}

.galaxy-lede {
  font-size: 88px;
  line-height: 1.4;
  max-width: 3200px;
  margin: 80px auto 0;
  color: var(--ink);
}

.galaxy-format {
  font-size: 96px;
  margin: 120px auto 0;
  color: var(--accent);
  font-weight: 600;
  max-width: none;
}

.galaxy-question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 150px;
  line-height: 1.3;
  max-width: 3400px;
  margin: 110px auto 0;
  color: var(--ink-dim);
}

.galaxy-cue {
  font-size: 96px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 160px auto 0;
  max-width: none;
}

.cue-arrow {
  display: block;
  margin: 30px auto 0;
  width: 0;
  height: 0;
  border-left: 44px solid transparent;
  border-right: 44px solid transparent;
  border-top: 60px solid var(--accent);
  animation: cue-drop 2.4s var(--ease-standard) infinite;
}

@keyframes cue-drop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(46px); opacity: 0.4; }
}

/* Galaxy furniture fades as the camera descends */
body:not([data-stage="galaxy"]) .galaxy-layer,
body:not([data-stage="galaxy"]) .map-note { opacity: 0; }
body:not([data-stage="galaxy"]) .galaxy-layer { pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Chart annotations (galaxy scale)                                    */
/* ------------------------------------------------------------------ */

.map-note {
  position: absolute;
  font-size: 100px;
  line-height: 1.35;
  color: var(--ink-dim);
  max-width: 1500px;
  border-left: 6px dashed var(--accent-2);
  padding-left: 60px;
  transition: opacity 900ms var(--ease-standard);
}

.map-note span {
  display: block;
  font-size: 78px;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------------ */
/* Constellation caption                                               */
/* ------------------------------------------------------------------ */

.const-caption {
  position: absolute;
  font-family: var(--font-body);
  font-size: 84px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  max-width: none;
  opacity: 0;
  transition: opacity 750ms var(--ease-standard);
}

.const-caption span {
  display: block;
  margin-top: 28px;
  font-weight: 400;
  font-size: 64px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-dim);
}

body[data-stage="constellation"] .const-caption { opacity: 1; }

/* ------------------------------------------------------------------ */
/* World nodes                                                         */
/* ------------------------------------------------------------------ */

.node {
  position: absolute;
  width: 760px;
  text-align: center;
}

.star-btn {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.star-btn:focus-visible { outline-offset: 10px; }

/* The disc: each world in its own locked palette (via --w1/--w2/--w3
   set inline from the palette map). */
.disc {
  display: block;
  width: 520px;
  height: 520px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, var(--w3) 0%, var(--w1) 42%, var(--w2) 100%);
  box-shadow:
    0 0 130px 18px var(--w-glow),
    inset 0 -60px 140px rgba(10, 12, 28, 0.55);
  transition: transform 600ms var(--ease-standard), box-shadow 600ms var(--ease-standard), opacity 600ms var(--ease-standard);
}

.star-btn:hover .disc,
.star-btn:focus-visible .disc {
  transform: scale(1.04);
  box-shadow:
    0 0 190px 30px var(--w-glow),
    inset 0 -60px 140px rgba(10, 12, 28, 0.55);
}

.star-name {
  display: block;
  font-family: var(--font-display);
  font-size: 128px;
  font-weight: 700;
  line-height: 1.05;
  margin-top: 44px;
  color: var(--ink);
  text-shadow: 0 4px 40px rgba(10, 12, 28, 0.7);
}

.star-line {
  display: block;
  font-size: 72px;
  line-height: 1.35;
  margin: 20px auto 0;
  max-width: 720px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity 750ms var(--ease-standard);
}

/* LAND ON THE WORLDS (Diane 2026-07-05): the nine worlds are the hero of
   the landing, clearly named and distinct the moment you arrive — not
   faint pin-stars hidden behind the title. Full discs, readable names,
   clickable from the start. */
body[data-stage="galaxy"] .node { pointer-events: auto; }

/* ------------------------------------------------------------------ */
/* Season markers: the outer constellation ring                        */
/* ------------------------------------------------------------------ */

.season-node {
  position: absolute;
  width: 900px;
  text-align: center;
}

.season-btn {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

.season-mark {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: var(--accent);
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  box-shadow: 0 0 90px 12px rgba(224, 179, 65, 0.5);
  transition: transform 250ms var(--ease-standard);
}

.season-btn:hover .season-mark,
.season-btn:focus-visible .season-mark { transform: scale(1.12) rotate(22deg); }

.season-name {
  display: block;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 600;
  margin-top: 36px;
  color: var(--accent);
}

body[data-stage="galaxy"] .season-name { opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* Dossier cards: the deepest layer, authored at natural size because  */
/* the camera lands on them at scale 1 exactly.                        */
/* ------------------------------------------------------------------ */

.card {
  margin: 90px auto 0;
  width: min(720px, 92vw);
  text-align: left;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-top: 6px solid var(--w1, var(--accent));
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 750ms var(--ease-standard);
}

body[data-stage="world"] .card,
body[data-stage="dossier"] .card { opacity: 1; }

.card-kicker {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.card-title {
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 0.15em 0 0.35em;
  color: var(--ink);
}

.card-hook {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}

.card-identity {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
}

.card-fact { margin-top: var(--space-3); }

.card-fact h3,
.card-crew h3,
.card-tone h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5em;
}

.card-fact p { font-size: clamp(0.98rem, 2.2vw, 1.05rem); line-height: 1.55; color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Upcoming-series preview (sizzle card in the reading overlay)         */
/* ------------------------------------------------------------------ */

.series-sizzle {
  margin-top: var(--space-3);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 2px dashed var(--panel-line);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(62,124,184,0.22), transparent 70%),
    var(--surface);
  color: var(--ink-dim);
  text-align: center;
}

.series-sizzle-play {
  width: 0; height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 34px solid var(--accent);
  filter: drop-shadow(0 0 16px rgba(224,179,65,0.5));
}

.series-sizzle-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.3;
}

.series-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0.4rem;
}

.series-list li {
  font-size: clamp(0.95rem, 2.2vw, 1.02rem);
  color: var(--ink);
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}

/* The "Series · Upcoming" HUD button: top-center, reads as a marquee
   tab, clearly secondary to the worlds. */
.series-cta {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(18, 21, 43, 0.82);
  border: 2px solid var(--panel-line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5em 1.2em;
  min-height: 44px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: border-color 250ms var(--ease-standard), color 250ms var(--ease-standard);
}

.series-cta:hover,
.series-cta:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.series-cta-mark {
  width: 12px; height: 12px;
  background: var(--accent);
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  flex: none;
}

.card-crew { margin-top: var(--space-4); }

.dossier {
  border-left: 5px solid var(--w1, var(--accent));
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.dossier h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

.dossier .corridor-tag {
  display: inline-block;
  margin-left: 0.6em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Corridor blue #3E7CB8 is 4.09:1 on the panel, below AA at this
     16px size; per the hub pattern the failing hex moves to non-text
     use (the tag border) and the tag text reads in ink. */
  color: var(--ink);
  border: 2px solid var(--accent-2);
  border-radius: 999px;
  padding: 0.1em 0.7em;
  vertical-align: middle;
}

.dossier p { margin-top: 0.35em; color: var(--ink); }

.crew-note { color: var(--ink-dim); font-style: italic; }

.card-tone { margin-top: var(--space-4); }
.card-tone p { color: var(--ink); }

.crew-chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.crew-chips li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--panel-line);
  border-radius: 999px;
  padding: 0.3rem 0.9rem 0.3rem 0.6rem;
  font-size: var(--type-body);
}

.chip-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--dot, var(--accent));
  flex: none;
}

.card-nav {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card-nav button {
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--type-body);
  font-weight: 600;
  padding: 0.55em 1.3em;
  min-height: 44px;
  cursor: pointer;
  transition: background 250ms var(--ease-standard), color 250ms var(--ease-standard);
}

.card-nav button:hover,
.card-nav button:focus-visible {
  background: var(--accent);
  color: var(--panel);
}

/* ------------------------------------------------------------------ */
/* Reading overlay: bounded dossier panel over the map                 */
/* A solid-backed, max-width card that opens on click so the reading   */
/* text is never obscured by the planets. Scrim dims + blocks the map  */
/* behind it, so focus is on the text. Reads like the hub's other      */
/* world detail panels, not a full-screen takeover.                    */
/* ------------------------------------------------------------------ */

.reader-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 9, 20, 0.82);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 400ms var(--ease-standard);
}
.reader-scrim[data-open] { opacity: 1; }

.reader {
  position: fixed;
  z-index: 51;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 14px));
  width: min(46rem, 92vw);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* SOLID panel: near-opaque theater-dim indigo so no planet bleeds
     through the reading text. */
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-top: 6px solid var(--w1, var(--accent));
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  padding: clamp(1.75rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
}
.reader[data-open] {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.reader-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--panel-line);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 250ms var(--ease-standard), color 250ms var(--ease-standard), background 250ms var(--ease-standard);
}
.reader-close:hover,
.reader-close:focus-visible {
  border-color: var(--accent);
  color: var(--panel);
  background: var(--accent);
}

/* The card rendered inside the overlay drops its own chrome (the panel
   supplies frame + background + padding) and simply reads. */
.reader .card {
  margin: 0;
  width: auto;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  padding-right: 2.5rem;   /* clear of the close control */
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reader-scrim,
  .reader { transition: none; }
  .reader { transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------ */
/* The orrery (fixed mini-map, bottom-left)                            */
/* ------------------------------------------------------------------ */

.orrery {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(18, 21, 43, 0.82);
  border: 2px solid var(--panel-line);
  border-radius: 999px;
  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
  backdrop-filter: blur(4px);
}

.orrery-rings {
  position: relative;
  width: 104px;
  height: 104px;
  flex: none;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--ink-dim);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard);
}

.ring-0 { width: 104px; height: 104px; }
.ring-1 { width: 78px; height: 78px; }
.ring-2 { width: 52px; height: 52px; }
.ring-3 { width: 26px; height: 26px; }

.ring:hover, .ring:focus-visible { border-color: var(--ink); }

.ring[data-current] {
  border-color: var(--accent);
  box-shadow: 0 0 14px 2px rgba(224, 179, 65, 0.55);
}

.orrery-readout { min-width: 9.5rem; }

.orrery-stage {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.orrery-focus {
  font-size: var(--type-body);
  color: var(--ink);
  line-height: 1.25;
}

.orrery-steer { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

.orrery-steer button {
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 250ms var(--ease-standard), color 250ms var(--ease-standard);
}

.orrery-steer button:hover,
.orrery-steer button:focus-visible {
  background: var(--accent);
  color: var(--panel);
}

/* ------------------------------------------------------------------ */
/* Exit door                                                           */
/* ------------------------------------------------------------------ */

.exit-door {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  left: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 30;
  background: rgba(18, 21, 43, 0.82);
  border: 2px solid var(--panel-line);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--type-body);
  font-weight: 600;
  padding: 0.5em 1.2em;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 250ms var(--ease-standard), color 250ms var(--ease-standard);
}

.exit-door:hover,
.exit-door:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* No-JS note                                                          */
/* ------------------------------------------------------------------ */

.noscript-note {
  position: relative;
  z-index: 40;
  max-width: var(--measure);
  margin: var(--space-4) auto;
  padding: var(--space-3);
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* Reduced motion: same scene graph, stepped stations, instant cuts.   */
/* world-theme.js snaps the camera; here we kill the choreography.     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .cue-arrow { animation: none; }
  .scene { will-change: auto; }
}