/* =========================================================================
   The Crossing (Act I · Chapter III) — voyage HUD + hybrid 2D/3D canvas stack.
   Ported from the standalone "strategic star-map" design. Loaded AFTER
   lore-v2.css so these .lore-voyage-* rules win over the older voyage styles.
   Vars are scoped to .lore-voyage-layer so the HUD is self-contained
   (resolves regardless of where the fixed layer sits in the DOM).
   ========================================================================= */

.lore-voyage-layer{
  --teal:#00c8b4; --teal-bright:#51e9b6; --amber:#e8a020; --red:#e84040;
  --font-hud:'Orbitron',ui-monospace,monospace;
  --font-body:'Exo 2',system-ui,sans-serif;
  --font-mono:'Share Tech Mono',ui-monospace,monospace;
  --lore-ink:#e6edf3; --lore-ink-2:#b8d4cc; --lore-ink-3:#8b9d96; --lore-ink-4:#5a6e68;
  --lore-mono:'Share Tech Mono',ui-monospace,monospace;
  --lore-serif:'Exo 2',system-ui,sans-serif;
  --lore-display:'Audiowide','Orbitron',ui-monospace,monospace;
  --lore-teal:#00c8b4; --lore-teal-bright:#51e9b6; --lore-amber:#e8a020; --lore-amber-bright:#ffc858;
}

/* ── Stage + the two stacked canvases (2D map under, WebGL inset over) ── */
.lore-voyage-stage{ position:absolute; inset:0; background:transparent; border:0; }
.lore-voyage-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
#lc-map{ z-index:1; }
#lc-gl{ z-index:2; }
.lore-voyage-bed{ position:absolute; inset:0; }
.lore-voyage-hud{ position:absolute; inset:0; pointer-events:none; z-index:3; }
/* Softer, LONGER top fade than the shared galaxy-layer mask (lore-v2.css): the
   user saw a hard seam where the scene background meets the website background.
   Fading across ~150px reads as haze instead of a line. Voyage-only (the Reach
   keeps the shared mask); the bottom fade matches the shared one. */
.lore-voyage-layer{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.04) 48px, #000 150px, #000 calc(100% - 140px), rgba(0,0,0,0.06) calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.04) 48px, #000 150px, #000 calc(100% - 140px), rgba(0,0,0,0.06) calc(100% - 40px), transparent 100%);
}

/* The HUD is hoisted to #lore-app and sits ABOVE the low-z map layer + the
   page reading vignette, but BELOW the Index/Cover hub overlay (`.lore-hub`,
   z-index:50) so that opening the chapter index draws cleanly ON TOP of the
   voyage instead of behind it. pointer-events stay off except scrubber + buttons. */
.lore-voyage-ui{ position:fixed; inset:0; z-index:49; pointer-events:none; }
/* ── Velocity/distance readouts: pinned top-RIGHT, but dropped BELOW the
   lore chrome row (Index / Cover / audio sit at ~y64–110; the chrome bar
   bottoms ~126px), so they read in the corner without ever colliding. ── */
.lore-voyage-readouts{ position:absolute; top:134px; right:clamp(14px,3vw,44px); z-index:2;
  display:flex; gap:20px; text-align:right; color:var(--lore-ink-3);
  font-family:var(--lore-mono); font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,0.7); }
.lore-voyage-readouts b{ display:block; font-weight:700; color:var(--lore-ink); letter-spacing:0.1em; margin-top:4px;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; }

/* ── Bottom controls: year/status, scrubber, marks, foot buttons ── */
.lore-voyage-controls{ position:absolute; left:0; right:0; bottom:clamp(66px,9vh,84px);
  padding:0 clamp(16px,6vw,110px); display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.lore-voyage-toprow{ display:flex; justify-content:space-between; align-items:flex-end; }
.lore-voyage-year{ display:inline-flex; align-items:baseline; gap:14px; }
.lore-voyage-year-label{ font-family:var(--lore-mono); font-size:11px; font-weight:600; letter-spacing:0.28em; color:var(--lore-ink-3); text-transform:uppercase; }
.lore-voyage-year b{ font-family:var(--lore-mono); font-weight:700; font-size:30px; letter-spacing:0.04em; color:var(--lore-teal);
  text-shadow:0 0 16px rgba(0,200,180,0.5); font-variant-numeric:tabular-nums; min-width:158px; display:inline-block; text-align:left; }
.lore-voyage-year-unit{ font-family:var(--lore-mono); font-size:10px; color:var(--lore-ink-3); letter-spacing:0.32em; }
.lore-voyage-status{ display:inline-flex; align-items:center; gap:12px; font-family:var(--lore-mono); font-size:11px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--lore-ink-2); }
.lore-voyage-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--lore-teal); box-shadow:0 0 10px currentColor; animation:lore-voyage-pulse 2s ease-in-out infinite; }
.lore-voyage-stage.is-arrived .lore-voyage-status-dot{ background:var(--lore-amber); color:var(--lore-amber); }
.lore-voyage-stage.is-arrived .lore-voyage-status{ color:var(--lore-amber); }
.lore-voyage-stage.is-arrived .lore-voyage-year b{ color:var(--lore-amber); text-shadow:0 0 16px rgba(232,160,32,0.5); }
@keyframes lore-voyage-pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.82);} }

.lore-voyage-scrubber{ position:relative; height:32px; padding:18px 8px 0; cursor:pointer; touch-action:none; user-select:none; pointer-events:auto; }
.lore-voyage-scrubber-track{ position:relative; height:2px; background:rgba(0,200,180,0.16); }
.lore-voyage-scrubber-fill{ position:absolute; inset:0 auto 0 0; background:var(--lore-teal); box-shadow:0 0 8px var(--lore-teal); width:0%; }
.lore-voyage-scrubber-thumb{ position:absolute; top:50%; width:14px; height:14px; border:1.5px solid var(--lore-teal); background:rgba(0,200,180,0.18);
  transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 14px rgba(0,200,180,0.6); }
.lore-voyage-stage.is-arrived .lore-voyage-scrubber-fill{ background:var(--lore-amber); box-shadow:0 0 8px var(--lore-amber); }
.lore-voyage-stage.is-arrived .lore-voyage-scrubber-thumb{ border-color:var(--lore-amber); box-shadow:0 0 14px rgba(232,160,32,0.6); }

.lore-voyage-marks{ position:relative; height:30px; margin-top:2px; }
.lore-voyage-mark{ position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center;
  font-family:var(--lore-mono); font-size:10px; font-weight:600; letter-spacing:0.24em; color:var(--lore-ink-3); text-transform:uppercase; white-space:nowrap; transition:color 0.4s; }
.lore-voyage-mark i{ width:1px; height:8px; background:rgba(0,200,180,0.3); margin-bottom:4px; transition:background 0.4s; }
.lore-voyage-mark.is-past{ color:var(--lore-teal); }
.lore-voyage-mark.is-past i{ background:var(--lore-teal); box-shadow:0 0 6px var(--lore-teal); }

/* Play/Replay sit bottom-LEFT, clear of the bottom-right Back/Continue nav.
   DOM order is btns->note, so flex-start keeps the buttons on the left;
   row-reverse + an EMPTY foot-note had pushed the single button group to the
   RIGHT instead (single item + space-between + reversed = right edge). */
.lore-voyage-foot{ display:flex; justify-content:flex-start; align-items:center; gap:10px; margin-top:10px; }
.lore-voyage-foot-note{ font-family:var(--lore-mono); font-size:10px; font-weight:600; letter-spacing:0.28em; color:var(--lore-ink-3); text-transform:uppercase; }
.lore-voyage-btns{ display:flex; gap:10px; pointer-events:auto; }
.lore-voyage-btn{ font-family:var(--lore-mono); font-size:11px; font-weight:600; letter-spacing:0.28em; color:var(--lore-teal);
  background:transparent; border:1px solid rgba(0,200,180,0.4); padding:9px 18px; cursor:pointer; text-transform:uppercase; transition:background 0.3s,border-color 0.3s,box-shadow 0.3s; }
.lore-voyage-btn:hover{ background:rgba(0,200,180,0.1); border-color:var(--lore-teal); box-shadow:0 0 14px rgba(0,200,180,0.3); }

/* arrival horizon glow */
.lore-voyage-horizon{ position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0; transition:opacity 1s ease-out;
  background:radial-gradient(ellipse 70% 90% at 50% 30%, rgba(232,160,32,0.12), transparent 60%); }
.lore-voyage-stage.is-arrived .lore-voyage-horizon{ opacity:1; }

/* launch caption (lower-left, fades after departure) */
.lc-launchnote{ position:absolute; left:clamp(16px,4vw,52px); top:clamp(66px,16vh,150px); z-index:3; pointer-events:none;
  display:flex; flex-direction:column; gap:6px; text-shadow:0 1px 6px rgba(0,0,0,0.8); }
.lc-launchnote .mk{ font-family:var(--lore-mono); font-size:11px; font-weight:600; letter-spacing:0.42em; color:var(--lore-amber); text-transform:uppercase; }
.lc-launchnote .tx{ font-family:var(--lore-serif); font-style:italic; font-size:15px; color:var(--lore-ink-2); letter-spacing:0.02em; }

/* arrival markers (the three arks' landing spots) */
.lc-markers{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.lc-marker{ position:absolute; left:0; top:0; transform:translate(var(--mx,0px),var(--my,0px)); margin-left:-66px; opacity:0;
  display:flex; flex-direction:column; align-items:center; will-change:transform,opacity; }
.lc-marker-dot{ width:9px; height:9px; border-radius:50%; background:var(--lore-teal);
  box-shadow:0 0 0 1.5px rgba(0,0,0,0.5),0 0 10px var(--lore-teal); animation:lore-voyage-pulse 1.8s ease-in-out infinite; }
.lc-marker-leader{ width:1.5px; height:20px; background:linear-gradient(to bottom,var(--lore-teal),rgba(0,200,180,0.2)); }
.lc-marker-card{ width:132px; padding:7px 12px 8px; text-align:center; position:relative;
  background:linear-gradient(180deg,rgba(0,200,180,0.14),transparent 60%),rgba(2,8,11,0.94); border:1px solid var(--lore-teal);
  box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 4px 18px rgba(0,0,0,0.7),0 0 18px rgba(0,200,180,0.3); }
.lc-marker-card::before,.lc-marker-card::after{ content:''; position:absolute; width:8px; height:8px; }
.lc-marker-card::before{ top:-1px; left:-1px; border-top:1.5px solid var(--lore-teal); border-left:1.5px solid var(--lore-teal); }
.lc-marker-card::after{ bottom:-1px; right:-1px; border-bottom:1.5px solid var(--lore-teal); border-right:1.5px solid var(--lore-teal); }
.lc-marker-eyebrow{ font-family:var(--lore-mono); font-size:9px; font-weight:600; letter-spacing:0.32em; color:var(--lore-teal-bright); text-transform:uppercase; }
.lc-marker-name{ font-family:var(--lore-display); font-size:18px; font-weight:600; letter-spacing:0.06em; color:var(--lore-ink); margin-top:1px; }

@media (max-width:768px){
  .lore-voyage-year b{ font-size:24px; min-width:96px; }
  .lore-voyage-readouts{ gap:16px; }
}

/* The voyage owns the full screen: suppress the reading-stage header (its
   centred "The Crossing" title duplicates the voyage's own top-left chapter
   eyebrow). The floating Back/Continue nav (bottom-right, 5vh) is kept for
   navigation; the voyage controls are lifted above it (see -controls bottom). */
#lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-stage-head{ display:none !important; }
/* The voyage HUD already carries its own controls; suppress the duplicate
   centred scrub-instruction caption that kinds/scene.js renders from the
   event (it was showing on top of the HUD's own footnote). */
#lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-event-scene-caption{ display:none !important; }

/* ── Landscape phones (wide but short): Play/Replay drop to the bottom-LEFT
   corner (pulled out of the controls flow), and the timeline sits low — just
   above Back/Continue. The wider track (the default 110px side padding had
   squeezed it to ~590px) + smaller mark text also clear the OPEN SPACE↔CRUISE
   and DECEL↔THE REACH overlaps. ──────────────────────────────────────────── */
/* ── Voyage HUD layout — mobile-first, PORTED TO DESKTOP ────────────────────
   Same disposition on EVERY viewport: timeline centered+narrow at the bottom,
   Back/Continue flanking it, Play/Replay icons top-left under the ACT title,
   Velocity/Distance top-right under Index/Cover. Positions are viewport-edge-
   relative so they hold across sizes; the desktop block further down bumps the
   font/size only. Scene + zoom are NOT touched. (Un-gated from the old phone-
   only @media — the phone keeps these exact values; desktop now gets them too.)
   Center WITHOUT transform: a transformed ancestor would capture the fixed
   Play/Replay + nav children (resolving to it, not the viewport). */
  .lore-voyage-controls{
    left:0; right:0; margin-inline:auto; transform:none;
    width:min(440px, 62vw); padding:0; bottom:12px; gap:2px;
  }
  .lore-voyage-toprow{ justify-content:center; gap:16px; }
  .lore-voyage-year{ gap:8px; }
  .lore-voyage-year b{ font-size:15px; min-width:0; }
  .lore-voyage-year-label{ font-size:8px; letter-spacing:0.14em; }
  .lore-voyage-status{ font-size:8px; letter-spacing:0.14em; gap:6px; }
  .lore-voyage-scrubber{ height:18px; padding-top:9px; }
  /* Step labels tight to the bar; drop the vertical ticks. */
  .lore-voyage-marks{ height:16px; margin-top:0; }
  .lore-voyage-mark{ font-size:7.5px; letter-spacing:0.03em; }
  .lore-voyage-mark i{ display:none; }
  .lore-voyage-foot{ min-height:0; margin:0; }
  .lore-voyage-foot-note{ display:none; }

  /* Play / Replay -> icon buttons, top-LEFT under the ACT+chapter title. The
     icon uses ::before so main.js is untouched (it still toggles is-paused);
     a symbol-friendly font keeps the glyphs crisp. */
  /* top:44 = just BELOW the chapter label in the HUD. (Was 108 when the 64px
     site nav still pushed #lore-app down; the nav is hidden now, so -64px.) */
  .lore-voyage-btns{ position:fixed; left:clamp(12px,3vw,18px); top:44px; z-index:5; gap:8px; }
  /* Icons as CENTERED SVGs (not text glyphs): glyph metrics + emoji fallback
     made the play/pause/replay marks sit off-center. background-position:center
     centers an SVG exactly, identically across platforms. The play button swaps
     pause<->play on the is-paused class (toggled by main.js). */
  .lore-voyage-btn{ width:32px; height:32px; padding:0; font-size:0;
    background-position:center; background-repeat:no-repeat; background-size:clamp(14px,1.5vw,18px); }
  #lc-play{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c8b4'%3E%3Cpath d='M6 5h4v14H6z M14 5h4v14h-4z'/%3E%3C/svg%3E"); }
  #lc-play.is-paused{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c8b4'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
  #lc-replay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c8b4'%3E%3Cpath d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E"); }

  /* Velocity / Distance -> top-RIGHT, just under Index/Cover. */
  /* top:44 = just BELOW the Index/Cover HUD row (nav hidden now, so -64px). */
  .lore-voyage-readouts{ top:44px; right:clamp(12px,3vw,18px); gap:14px; font-size:9px; }

  /* Launch caption (IGNITION / "Departure burn...") → middle of the LEFT edge,
     vertically centered + slimmed (it fades out shortly after departure). */
  .lc-launchnote{ top:50%; transform:translateY(-50%); left:clamp(10px,3vw,16px);
    max-width:min(44vw,230px); gap:4px; }
  .lc-launchnote .mk{ font-size:9px; letter-spacing:0.28em; }
  .lc-launchnote .tx{ font-size:12px; line-height:1.35; }

  /* Back / Continue -> arrows flanking the centered timeline (footer spans
     full width; the timeline sits centered between the two arrows). */
  /* Scoped to THE CROSSING ONLY (:has the voyage scene) — never the Reach
     scene nor any reading page. Span full width + space-between so Back ◂ /
     Continue ▸ flank the centered timeline; the text is hidden (font-size:0),
     only the arrow shows. The :has() raises specificity above the shared
     galaxy nav rule, and it loads later, so these win — for the voyage alone. */
  #lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-stage-nav{
    left:0; right:0; bottom:13px; margin:0; gap:0;
    padding:0 clamp(8px,2.5vw,18px); justify-content:space-between; pointer-events:none;
  }
  #lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-stage-nav-btn{
    pointer-events:auto; font-size:9px; letter-spacing:0.12em; padding:6px 11px; min-width:0;
  }
  #lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-stage-nav-btn-arrow{
    font-size:11px;
  }

/* ── Desktop / tall viewports: SAME disposition, larger fonts + wider timeline.
   Only fires at >=600px tall, so the ~390px-tall landscape phone keeps the
   smaller base sizes above; desktop gets the readable bump. ───────────────── */
@media (min-height: 600px){
  .lore-voyage-controls{ width:min(680px, 46vw); }
  .lore-voyage-year b{ font-size:22px; }
  .lore-voyage-year-label, .lore-voyage-status{ font-size:10px; }
  .lore-voyage-scrubber{ height:24px; padding-top:14px; }
  .lore-voyage-marks{ height:22px; }
  .lore-voyage-mark{ font-size:10px; }
  /* Down a touch (clear of the taller Index/Cover buttons) + right edge
     aligned to the buttons box (= the HUD's own right padding). */
  .lore-voyage-readouts{ font-size:12px; gap:20px; top:60px; right:clamp(14px,3vw,28px); }
  .lore-voyage-btns{ gap:10px; }
  .lore-voyage-btn{ width:38px; height:38px; }
  .lc-launchnote{ max-width:340px; }
  .lc-launchnote .mk{ font-size:11px; }
  .lc-launchnote .tx{ font-size:16px; }
  #lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-stage-nav-btn{ font-size:12px; padding:8px 15px; }
  #lore-app[data-galaxy-active="true"] .lore-stage:has(.lore-event-scene[data-scene="voyage"]) .lore-stage-nav-btn-arrow{ font-size:15px; }
}