<!-- ============================================================
     LaunchWatch v3.16
     Build: 2026-05-02 UTC
     Repo:  gitlab.com/launchwatchapp/launchwatch
     Live:  launchwatch.app
     Notes: v3.16 hotfix - extends v3.15 by routing the REMAINING
            direction callsites through the getVesselDirection() helper.
            v3.15 fixed the marker arrow rotation but missed: (1) the
            forward-projected dashed trail with hourly ticks in
            renderVesselMotionNarrative (line ~10241) -- this was THE
            visible "dashes pointing north" Kenny saw on screen because
            v.heading was null for BOB/DOUG (no gyrocompass); (2) the
            lifecycle allRestored check; (3) the booster orbit ring
            render decision; (4) the pad orbit ring isReturningToPad
            call; (5) the mobile vessel state label. All six callsites
            now go through the DR engine. Tooltip on the projection
            ticks also tagged with direction source ((DR)/(LKP)/(COG)
            etc) for debug visibility.

            v3.15 hotfix - vessel direction routed through DR engine
            instead of inline fallback. The actual root cause of BOB/
            DOUG arrows pointing at 0° was in updateAisDarkState(),
            line ~6720: when a vessel hit the dark threshold AND was
            heading home, the returningToPort branch bailed out
            without writing lastLat/Lon/Speed/Course to state. So
            vessels that were already stale on first sight + heading
            home (BOB/DOUG post-recovery) never got their direction
            captured anywhere. Three changes: (a) updateAisDarkState
            ALWAYS captures last-known data at top of function,
            regardless of which branch decision fires; the DR
            extrapolation gate stays where it was; (b) new
            getVesselDirection(name, pos) helper returns {value,
            source} from priority chain DR -> state.lastCourse -> live
            COG -> live gyro heading -> 0; (c) marker rotation +
            tooltip both read through the helper. Reverts the v3.14
            inline COG fallback which was patching the wrong layer.
            Tooltip heading display now tagged with source: (DR) for
            extrapolated, (LKP) for last-known via state, (COG) for
            live course over ground, no tag for real gyro heading.

            v3.14 hotfix - vessel marker direction now falls back to
            COG (course over ground) when AIS heading is null. Most
            droneships + many fairing vessels lack a gyrocompass and
            report heading=null; the marker arrow was rotating to 0°
            (north) for all of them regardless of actual direction.
            Three surgical edits: (a) live pos construction copies
            course_deg through; (b) _lastKnownPositions cache also
            stores course so stale-AIS vessels keep their last known
            COG; (c) headingRot uses heading || course || 0 with
            proper null check so a legitimate heading of 0 is
            preserved. Tooltip heading display also shows COG with
            (COG) tag when heading is missing.

            v3.13 - vessel-trails: gap connector now renders as a faint
            solid underlay + dashed overlay (not just a dashed line).
            Distinguishes vessel-track gaps from all other dashed UX
            in the app (NOTMAR polygons, trajectory fan, vis-radius
            circles). Two new constants: TRAIL_GAP_BASE_OPACITY
            (0.08) and TRAIL_GAP_BASE_WEIGHT (0.5). Per-vessel layer
            count goes up by 1 per gap -- still well within Canvas
            budget for typical 1-2-gap missions.

            v3.12 hotfix - second duplicate v3.10 constants block found
            in DEV repo and removed. deploy_setec.py had run a third
            time after my v3.11 hotfix, re-applying Diff 3 yet again.
            SETEC DEPLOY.md status flipped to deployed to prevent
            further accidental re-runs. Live should boot at v3.12.

            v3.11 hotfix - direct edit to DEV repo. Removes duplicate
            v3.10 constants block (deploy_setec.py re-applied Diff 3
            on the second-pass deploy because the original Before
            anchor still matched after first apply, declaring
            TRAIL_DEDUP_EPSILON twice and throwing SyntaxError).
            Also drops the time-only gap check from the render loop
            (was firing on real-but-sparse continuous transit and
            wrongly tagging it as AIS-dark; implied-speed heuristic
            alone is the right model). Threshold lowered 25kt -> 15kt
            -- no vessel in our fleet sustains 15kt true.

            v3.10 - vessel-trails: frontend mitigation for BUG-025
            (backend writing duplicate position rows). Two changes:
            (1) dedup consecutive-identical points before Catmull-Rom
            -- collapses the GPS-jitter clusters that made ASOG/BOB
            trails look jagged. (2) detect AIS-dark transit gaps via
            implied-speed heuristic (>25 kts or >6h between dedup'd
            pings = no real continuous data, was a teleport in the
            backend). Render gap connectors as faint dashed lines
            instead of solid polyline-as-teleport. Trail now splits
            into "runs" (continuous travel, full Catmull + N-bucket
            fade) + "gaps" (dashed). Backend BUG-025 fix queued as
            separate ingest-dedup slug; this is the visual mitigation
            until that lands. New constants: TRAIL_DEDUP_EPSILON,
            TRAIL_GAP_MAX_KTS, TRAIL_GAP_MAX_HOURS,
            TRAIL_GAP_DASH_OPACITY, TRAIL_GAP_DASH_PATTERN.

            v3.9 - vessel-trails: full port-to-port transit + smooth
            16-bucket fade. Reverts v3.8's overly-tight 6h window in
            favor of TRAIL_HOURS=168 (7d ceiling, covers any real
            transit). 3-bucket discrete fade replaced with N-bucket
            linear-ramp fade (opacity 0.05->0.85, weight 0.8->2.4
            across 16 buckets) for visibly smooth gradient at long
            durations. Buckets overlap by 1 point so polylines
            connect with no visible band gaps. 64 layers across the
            fleet vs 12 in v3.8 -- well within Canvas budget.
            Companion backend patch raises get-vessel-history.js
            limit cap 500 -> 1500 to support the wider window.
            Catmull-Rom interpolation steps unchanged at 4.

            v3.8 - vessel-trails: TRAIL_HOURS constant (default 6h)
            extracted from hardcoded limit=48&hours=96 fetch in the
            live vessel-trail render loop. Reduces displayed trail to
            Kenny's stated 6h preference; ~72 points/vessel at VF
            5min cadence. Catmull-Rom smoothing + 3-bucket fade
            (tail/mid/head, opacity 0.10/0.28/0.60) unchanged.
            Replay mode unaffected -- it uses start/end ISO params
            via mission window. Tradeoff: vessels AIS-dark for >6h
            render no live trail this cycle; flip TRAIL_HOURS up if
            the AIS-dark mission-outline view is more valuable than
            live focus. Companion bug filings: BUG-022..026 in BUGS.md.

            v3.7 - traj-polish: webcast grace window + lifecycle-aware
            banner. (1) isLikelyLaunched() no longer hard-requires
            webcast_live === true -- webcast ending post-launch caused
            Layer-1 to stop firing for legitimately-launched missions.
            New logic: webcast_live OR (msSinceLaunch <= 30min) closes
            the gap. (2) showTrajectoryConfidence() reads the launch
            lifecycle state and emits state-aware banner text:
            PRE_LAUNCH=TRAJ LOCK, LAUNCHED=🚀 LAUNCHED + T+countup,
            VESSELS_DARK=AIS DARK + DR km, VESSEL_RESTORE=AIS RESTORED,
            RECOVERY_COMPLETE=✓ RECOVERY COMPLETE. The mission narrates
            itself through the banner as the lifecycle unfolds.

            v3.5 - traj-polish: NSF + SFN RSS keyword detection in
            ingest-launches-fast.js. Polls both feeds during the
            T-60min..T+120min active window, matches fresh items
            (<30min old) to active launches, and overrides LL2 status
            with detected LIFTOFF / SCRUB / DELAY / HOLD state when
            LL2 still says 'Go'. Layer-2 of the launch-state stack --
            beats LL2 by 30-90 minutes during nominal launches.
            Frontend is unchanged (this banner bump only) -- v3.4's
            isLikelyLaunched() and isInRecovery() pick up the new
            status values automatically via get-launch-data.

            v3.4 - traj-polish: lifecycle gate widening + arc race fix.
            isInRecovery() now accepts a Layer-1 signal (NET passed by
            60s + webcast_live + no scrub keyword) in addition to the
            legacy LL2-status check. Unlocks the entire post-launch
            state machine in real-time when LL2 lags. isLikelyLaunched()
            helper exposes the signal independently. Layer-2 article
            scrape (v3.5) provides definitive confirmation. Also closes
            the v3.2 cache race: fetchAndRenderTrajectory now redraws
            the arc with backend data after cache populates, fixing
            missing DR ghost on first launch click.

            v3.3 - traj-polish: drawLaunchArc rendering branches now
            recognize BACKEND_* source strings (BACKEND_AIS_DARK +
            BACKEND_ON_STATION) so the DR ghost + sonar pulse + AIS
            LOCKED treatments fire correctly post-v3.2 wiring.
            getLaunchAzimuth Priority -1 also populates _azR.drPos +
            drDistToZone from AIS_DARK_STATE when phase is AIS_DARK,
            giving the DR branch the position data it reads. Fixes
            missing ghost diamond observed on SL 10-38 with ASOG
            5h+ dark.

            v3.2 - traj-polish: frontend getLaunchAzimuth now reads
            from a window._backendPrediction cache populated by
            fetchAndRenderTrajectory. System A (zone rings + fan)
            now uses System B's (cone + booster label) phase-aware
            bearing/uncertainty/zone instead of computing its own
            orbit-model with hardcoded ±8°. Fan tightens to ±3° once
            vessel reaches APPROACH; bearing blends or locks to live
            AIS as phase advances. Falls through to legacy orbit
            model on cache miss -- zero-risk fallback. Verified live
            on SL 10-38 at T-1H29M with ASOG in AIS_DARK phase.

            v2.47 - Patch W (v2.43-46 consolidated): backend
            trajectory-engine v3.4 emits a SECOND axis on FH
            predictions (fairing_vessel + zone + bearing + phase)
            with full UNDEPLOYED/TRANSIT/APPROACH/ON_STATION/AIS_DARK
            engine running against DOUG. Frontend renders that as a
            phase-colored dashed ring + pad->zone bearing line +
            "FAIRING xxx°" label anchored at line tip (scales with
            zoom). Booster bearing label renamed to "BOOSTER xxx°"
            for symmetry. Backend dual-key launch lookup so the
            frontend's UUID call hits the slug-keyed prediction row.
            Frontend vessel_ocean copies independently of
            vessel_assigned in patchLaunchesFromSupabase. NOTMAR
            polygons forced onto SVG renderer (preferCanvas:true was
            killing the phosphor-glow CSS) plus visual crank -- weights
            up, fillOpacity up, dashArrays widened so they read at
            zoom 4-5.
     ----
     v2.41 - Patch CC-Filter: vessel-relevance
            gate. When a launch is selected, only render trails
            for vessels actually serving that launch. No more
            DOUG ghost-attaching to Atlas V/Soyuz/Long March
            launches. Falcon Heavy still gets DOUG+BOB via the
            fairing-recovery heuristic until Patch U-Full lands.
            v2.40 - Patch Y-soften: connection line no
            longer pulses. Per Kenny: "the pulsed line is not
            good, we had beautiful soft trails before." Removed
            the 3s opacity-pulse animation, dropped opacity
            0.55 -> 0.35, lighter dash 6,8, softer drop-shadow.
            Matches the SL-10-44 reference soft-trail aesthetic.
            v2.39 - Patch DD: adaptive AIS poll cadence.
            Default 1hr. T-6h to T-1h: 5min. T-1h to T+1h: 1min.
            Same VesselFinder budget at low cadence; extra calls
            only during launch window. Self-scheduling so cadence
            recomputes after every poll.
            v2.38 - Patch CC-Behind+: port-to-port mission
            segmentation. Detects turnaround at farthest-from-port
            sample. Outbound = low-opacity faded amber "where
            she's been"; return = brighter amber "where she's
            heading now." Both visible simultaneously once vessel
            starts returning. Bumped trail point cap 50 -> 200 to
            capture full mission cycle.
            v2.37 - Patch CC-Behind: historical AIS trail.
            Fading dashed amber polyline shows the full vessel
            lifecycle: port -> outbound -> on-station -> return.
            Pulled from /get-vessel-history (last 50 points), 5min
            cache, async refresh. Renders for any vessel with data,
            including stationary ones (so IN_PORT vessels show
            their last mission's trail).
            v2.36 - Patch BB-fix: particle hides during
            pan/zoom. Was visibly leaving the trajectory line then
            snapping back when zoom finished -- circleMarker
            setLatLng() reprojects to post-transform state while
            SVG pane is still mid-CSS-transform. Now pauses on
            movestart/zoomstart, resumes on moveend/zoomend.
            v2.35 - Patch BB: moving particle on
            trajectory arc. RAF-driven dot loops pad -> zone every
            7s, color tracks the T-minus gradient (matches arc).
            Constant visible motion during transit phases. Hooks:
            start in drawLaunchArc, stop in clearLaunchArc.
            v2.34 - Patch Z: T-minus color gradient on
            trajectory arc + fan lines. Reuses notmarColorForTMinus
            so the arc shifts phosphor-green (T-72h) -> amber
            (T-24h) -> hot red (T-0). Refreshes every 60s with the
            existing arc-refresh tick. Visible launch-day countdown
            tension. Viasat-3 currently at T-37h ~ amber-orange.
            v2.33 - Patch Y-fix: respect suppressZone.
            Atlas V/Soyuz/Long March/Electron all resolve to a
            zone center via orbit-model fallback but have
            suppressZone=true (no at-sea recovery). Connection
            line now hides for these -- was drawing a phantom
            orange line on Amazon Leo etc.
            v2.32 - Patch Y: vessel-to-zone connection
            line. Dashed amber polyline from every UNDERWAY vessel
            to the selected launch's predicted zone center, slow
            opacity pulse. Updates on AIS poll AND on launch
            select/deselect. Tells the "DOUG is heading there"
            story directly.
            v2.31 - Patch U-Live update: port-proximity
            guard. Vessel projection trail now suppressed when
            vessel is within 100km of her home port (avoids drawing
            over land during port-approach / channel transit).
            v2.30 - Patches U-Live + T-update.
            Vessel motion narrative: forward-projected dashed trail
            (6h, hourly ticks) for any UNDERWAY vessel, redrawn on
            every AIS poll. Turns boring transit into visible motion.
            Plus FH GEO fan widened ±5deg -> ±10deg so DOUG's
            projected 099deg bearing sits inside the envelope.
            v2.29 - Patch T: tighten FH GEO bearing to
            due-east (090deg) with +/-5deg spread. Physics-optimal
            for GEO-target from KSC (min inclination = pad lat;
            supersynchronous GTO flies due east). DOUG observed at
            089deg for Viasat-3 confirms. Watch tomorrow to validate.
            v2.28 - Patch R: FH zone distance in DB
            short-circuit branch. Priority 1 (DB azimuth) was
            returning hardcoded distKm:630, bypassing Patch O.
            Now computes distance with FH-aware pad+orbit logic.
            Viasat-3 ring should finally render at 1500km.
            v2.27 - Patch Q: null-safe layer clear in
            fetchAndRenderTrajectory. Fixes "cone fetch failed:
            TypeError: Cannot read properties of null
            (reading 'clearLayers')" when trajectory-engine returns
            no prediction before layers are initialized.
            v2.26 - Patch P: update-banner reliability.
            Dropped visibility guard inside checkForUpdate, added
            focus + pageshow wake-ups, added 20s throttle to avoid
            spam. Should fix the "deployed v2.25 but banner never
            fired" symptom Kenny saw on v2.23 and v2.25 deploys.
            v2.25 - Patch O: Falcon Heavy fairing recovery zone.
            FH booster is RTLS (LZ-1/LZ-2) but fairing recovery IS
            at sea (DOUG ~1500km downrange for Viasat-3 GTO). Added
            FH-specific zones in getLaunchAzimuth() so the orbit
            ring on FH launches reflects fairing ops, not F9 1100km.
            Flipped _hasAtSeaRecovery to return true for FH.
            v2.24 - Patch K: phantom recovery-zone fallback gap.
            Russia / China / Electron / any unmapped-pad launch was
            still drawing the blue orbit-ring because the fallback
            return in getLaunchAzimuth() didn't set suppressZone.
            Fixed by honoring _hasAtSeaRecovery in the fallback too.
            v2.23 - Patch I: Blue Origin drone-ship support.
            Added JACKLYN to VESSEL_HOME_PORTS + SPACEX_VESSELS
            array (constant name unchanged for backward compat).
            Widened the "booster ring" predicate at line ~6853
            from isSpaceX-only to include New Glenn, so Jacklyn's
            AIS position renders when within 300km of expected zone.
            Companion backend changes (ingest-launches.js +
            trajectory-engine.js) staged in Patch I block-diff.
            v2.22 - Patch H phantom recovery-zone suppression.
            v2.21 - Patches F/G: ambient pad_poly + update banner.
            v2.20 - initial promote (shipped with banner regression).
            See SETEC/live-notmar-map/promote-bundle-2026-04-23.md.
     ============================================================ -->
<!DOCTYPE html>
<html lang="en">
<head>
<script>
  // LaunchWatch build info -- check in browser console: LW_BUILD
  window.LW_BUILD = {
    version:   'v3.16',
    buildTime: '2026-05-02 23:00 UTC',
    repo:      'gitlab.com/launchwatchapp/launchwatch'
  };
  // Pro-Beta Wall gate (flip true on May 1)
  window.LW_WALL_ENABLED = false;
  console.log('%c LaunchWatch v3.16', 'background:#0D1B2A;color:#00BFFF;font-weight:bold;font-size:14px;padding:4px 8px;border-radius:3px;');
  console.log('%c Build: 2026-05-02 23:00 UTC ', 'background:#0D1B2A;color:#FFB000;font-size:11px;padding:2px 8px;');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<!-- == BUILD VERSION ==================================================
     Used by the update-banner JS to detect when a new version has
     shipped. Stamped by netlify/build.sh on deploy; manual bumps also
     work. Banner polls this + window.LW_BUILD.version to fire reliably
     even if build.sh auto-stamp breaks (WORKLIST P1). DO NOT edit value
     casually - if you update manually, also bump LW_BUILD.buildTime.
-->
<meta name="lw-build" content="2026-05-03T16:45:18Z">
<title>LaunchWatch -- Global Launch Surveillance System</title>

<!-- ── PRIMARY META ─────────────────────────────────────── -->
<meta name="description" content="Real-time rocket launch visibility tracker. Know if tonight's launch is visible from your exact location -- bearing, elevation, and confidence score.">
<meta name="author" content="LaunchWatch">
<meta name="theme-color" content="#00040F">
<meta name="robots" content="index, follow">

<!-- ── FAVICON ──────────────────────────────────────────── -->
<link rel="icon" type="image/png" href="/launchwatchfavicon64x64.png">
<link rel="apple-touch-icon" href="/launchwatchavatar400x400.png">

<!-- ── OPEN GRAPH ────────────────────────────────────────── -->
<meta property="og:type"        content="website">
<meta property="og:url"         content="https://launchwatch.app/">
<meta property="og:site_name"   content="LaunchWatch">
<meta property="og:title"       content="LaunchWatch -- Real-Time Launch Visibility Tracker">
<meta property="og:description" content="Know if tonight's rocket launch is visible from your exact location. Real-time bearing, elevation, and trajectory confidence -- built for space enthusiasts on the Space Coast and beyond.">
<meta property="og:image"       content="https://launchwatch.app/launchwatchog1200x630.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"   content="LaunchWatch -- Global Launch Surveillance System">
<meta property="og:locale"      content="en_US">

<!-- ── TWITTER / X CARD ─────────────────────────────────── -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@LaunchWatchApp">
<meta name="twitter:creator"     content="@LaunchWatchApp">
<meta name="twitter:title"       content="LaunchWatch -- Real-Time Launch Visibility Tracker">
<meta name="twitter:description" content="Know if tonight's rocket launch is visible from your exact location. Real-time bearing, elevation, and trajectory confidence.">
<meta name="twitter:image"       content="https://launchwatch.app/launchwatchog1200x630.png">
<meta name="twitter:image:alt"   content="LaunchWatch -- Global Launch Surveillance System">

<!-- ── PWA MANIFEST PREP ─────────────────────────────────── -->
<meta name="application-name" content="LaunchWatch">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="LaunchWatch">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-ajax@2.1.0/dist/leaflet.ajax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/satellite.js/4.1.3/satellite.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
/* BLUE PHOSPHOR (default) */
:root {
  /* Responsive font scaling */
  --app-brightness: 1.0;   /* LOW=1.0  MED=1.35  HIGH=2.0 -- set by setIntensity() */
  --app-font-scale: 1.0;   /* SM=0.85  MED=1.0   LG=1.2  -- set by setFontScale() */
  --fs-base: max(11px, min(1.1vw, 14px));
  --fs-sm:   max(9px,  min(0.9vw, 12px));
  --fs-lg:   max(13px, min(1.3vw, 16px));
  /* ── PRIMARY PALETTE ── */
  --blue: #00BFFF;        /* phosphor blue -- primary UI */
  --blue-dim: #0080CC;    /* dimmed blue -- labels, secondary */
  --blue-dark: #001830;   /* dark blue -- borders, backgrounds */
  --blue-glow: rgba(0,191,255,0.4);
  --amber: #FFB000;       /* amber -- warnings, highlights */
  --red: #FF1744;         /* red -- alerts, errors */
  --green: #00FF88;       /* green -- HIGH confidence, active */
  --orange: #FF6B35;      /* orange -- vessel markers */
  --bg: #00040F;          /* space black -- page background */
  --bg-panel: #020C1A;    /* panel background */
  --scanline: rgba(0,10,30,0.15);
  --map-hue: 200deg;
  --map-saturate: 4;
}
/* RED ALERT */
[data-theme="red"] {
  --blue: #FF1744;
  --blue-dim: #B71C1C;
  --blue-dark: #1A0000;
  --blue-glow: rgba(255,23,68,0.4);
  --amber: #FF6D00;
  --red: #FF1744;
  --bg: #0A0000;
  --scanline: rgba(30,0,0,0.2);
  --map-hue: 0deg;
  --map-saturate: 3;
}

/* ═══════════════════════════════════════════════════
   AKIRA -- NEO-TOKYO CYBERPUNK
   ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   NORAD PAPER -- VT100 Paper White
   ═══════════════════════════════════════════════════ */
[data-theme="white"] {
  --blue: #E8F0F8;
  --blue-dim: #A0B4C8;
  --blue-dark: #1A2030;
  --blue-glow: rgba(232,240,248,0.35);
  --amber: #FFD080;
  --red: #FF6060;
  --bg: #080C14;
  --scanline: rgba(200,220,240,0.04);
  --map-hue: 200deg;
  --map-saturate: 0.2;
}

/* ═══════════════════════════════════════════════════
   SAGE NETWORK -- P39 Radar Green
   ═══════════════════════════════════════════════════ */
[data-theme="green"] {
  --blue: #00FF88;
  --blue-dim: #00AA55;
  --blue-dark: #001A0A;
  --blue-glow: rgba(0,255,136,0.4);
  --amber: #80FF40;
  --red: #FF4444;
  --bg: #000A04;
  --scanline: rgba(0,40,10,0.25);
  --map-hue: 140deg;
  --map-saturate: 2.5;
}

[data-theme="akira"] {
  --blue: #FF2D00;
  --blue-dim: #CC2200;
  --blue-dark: #1A0500;
  --blue-glow: rgba(255,45,0,0.5);
  --amber: #FF8800;
  --red: #FF2D00;
  --bg: #050000;
  --scanline: rgba(40,0,0,0.25);
  --map-hue: 10deg;
  --map-saturate: 3;
}

/* NEON TOKYO -- manga halftone scanline overlay */
[data-theme="akira"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(60,0,0,0.18) 0px,
    rgba(60,0,0,0.18) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scanroll 6s linear infinite;
}

/* Akira -- deep red screen flicker */
[data-theme="akira"] body::after {
  background: rgba(180,0,0,0.025);
  animation: akiraFlicker 0.1s infinite;
}
@keyframes akiraFlicker {
  0%,100% { opacity: 1; }
  92% { opacity: 0.94; }
  93% { opacity: 0.7; }
  94% { opacity: 0.98; }
}

/* Akira -- topbar gets kanji-inspired accent */
[data-theme="akira"] #topbar {
  border-bottom: 1px solid #FF2D00;
  box-shadow: 0 2px 0 #FF2D0033, 0 0 30px #FF2D0022;
}
[data-theme="akira"] .topbar-title::before {
  content: 'ア';
  font-size: 0.9rem;
  opacity: 0.15;
  margin-right: 8px;
  color: #FF2D00;
  letter-spacing: 0;
}
[data-theme="akira"] .topbar-title span {
  color: #FF8800;
  text-shadow: 0 0 15px #FF8800, 0 0 30px #FF440055;
}

/* Akira -- threat level pill */
[data-theme="akira"] .threat-level {
  border-color: #FF2D00;
  color: #FF2D00;
  text-shadow: 0 0 8px #FF2D00;
}

/* Akira -- left panel manga-scan border effect */
[data-theme="akira"] #left-panel,
[data-theme="akira"] #right-panel {
  border-color: #CC2200;
  background: rgba(5,0,0,0.97);
}

/* Akira -- launch cards get hot orange accent on visible */
[data-theme="akira"] .launch-card.visible-launch {
  border-left-color: #FF8800;
  box-shadow: inset 3px 0 12px rgba(255,136,0,0.15);
}

/* Akira -- map gets deep blood red tint with vignette */
[data-theme="akira"] #map-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(180,0,0,0.12) 70%,
    rgba(120,0,0,0.25) 100%
  );
  pointer-events: none;
  z-index: 500;
}

/* Akira -- glitch animation for header on easter egg */
@keyframes akiraGlitch {
  0%   { clip-path: inset(0 0 98% 0); transform: translateX(-4px); }
  10%  { clip-path: inset(20% 0 60% 0); transform: translateX(4px); }
  20%  { clip-path: inset(50% 0 30% 0); transform: translateX(-2px); }
  30%  { clip-path: inset(80% 0 5% 0); transform: translateX(3px); }
  40%  { clip-path: inset(0 0 80% 0); transform: translateX(-3px); }
  50%  { clip-path: inset(0); transform: translateX(0); }
  100% { clip-path: inset(0); transform: translateX(0); }
}
[data-theme="akira"] .topbar-title {
  position: relative;
}

/* Akira -- pulsing Neo-Tokyo glow on panel headers */
[data-theme="akira"] .panel-header,
[data-theme="akira"] .obs-header {
  text-shadow: 0 0 10px #FF2D00, 0 0 20px #FF2D0066;
  animation: akiraPanelPulse 4s ease-in-out infinite;
}
@keyframes akiraPanelPulse {
  0%,100% { text-shadow: 0 0 8px #FF2D00, 0 0 16px #FF2D0044; }
  50%     { text-shadow: 0 0 14px #FF2D00, 0 0 28px #FF2D0077; }
}

/* Akira -- boot screen override */
[data-theme="akira"] #boot-text {
  color: #FF2D00 !important;
  text-shadow: 0 0 12px #FF2D00 !important;
}

/* ═══════════════════════════════════════════════════
   GRID RUNNER -- DIGITAL FRONTIER
   ═══════════════════════════════════════════════════ */
[data-theme="tron"] {
  --blue: #00FFFF;
  --blue-dim: #008888;
  --blue-dark: #000A0A;
  --blue-glow: rgba(0,255,255,0.45);
  --amber: #FFFFFF;
  --red: #00FFFF;
  --bg: #000A0A;
  --scanline: rgba(0,20,20,0.2);
  --map-hue: 180deg;
  --map-saturate: 5;
}
[data-theme="tron"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,255,255,0.04) 0px, rgba(0,255,255,0.04) 1px,
    transparent 1px, transparent 4px
  ), repeating-linear-gradient(
    90deg,
    rgba(0,255,255,0.02) 0px, rgba(0,255,255,0.02) 1px,
    transparent 1px, transparent 40px
  );
  animation: none;
}
[data-theme="tron"] body::after {
  background: rgba(0,255,255,0.01);
  animation: tronFlicker 4s infinite;
}
@keyframes tronFlicker {
  0%,95%,100% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
  98% { opacity: 0.9; }
}
[data-theme="tron"] #topbar {
  border-bottom: 1px solid #00FFFF;
  box-shadow: 0 2px 0 #00FFFF22, 0 0 40px #00FFFF11;
  background: rgba(0,10,10,0.98);
}
[data-theme="tron"] .topbar-title::before {
  content: '◈';
  font-size: 0.75rem;
  opacity: 0.4;
  margin-right: 8px;
  color: #00FFFF;
  letter-spacing: 0;
}
[data-theme="tron"] .topbar-title span { color: #FFFFFF; text-shadow: 0 0 12px #00FFFF, 0 0 24px #00FFFF88; }
[data-theme="tron"] #left-panel, [data-theme="tron"] #right-panel {
  border-color: #00888855;
  background: rgba(0,8,8,0.97);
}
[data-theme="tron"] .panel-header, [data-theme="tron"] .obs-header {
  text-shadow: 0 0 8px #00FFFF, 0 0 16px #00FFFF44;
  animation: tronPulse 6s ease-in-out infinite;
}
@keyframes tronPulse {
  0%,100% { text-shadow: 0 0 6px #00FFFF, 0 0 12px #00FFFF33; }
  50%     { text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF66, 0 0 40px #00FFFF22; }
}
[data-theme="tron"] .threat-level { border-color: #00FFFF; color: #00FFFF; text-shadow: 0 0 8px #00FFFF; }
[data-theme="tron"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,255,255,0.06) 80%, rgba(0,120,120,0.12) 100%);
  pointer-events: none; z-index: 500;
}
[data-theme="tron"] #boot-text { color: #00FFFF !important; text-shadow: 0 0 12px #00FFFF !important; }

/* ═══════════════════════════════════════════════════
   KNIGHT RIDER -- K.I.T.T.
   ═══════════════════════════════════════════════════ */
[data-theme="knightrider"] {
  --blue: #FF3300;
  --blue-dim: #AA2200;
  --blue-dark: #0A0000;
  --blue-glow: rgba(255,51,0,0.5);
  --amber: #FF8844;
  --red: #FF3300;
  --bg: #060000;
  --scanline: rgba(20,0,0,0.18);
  --map-hue: 5deg;
  --map-saturate: 3;
}
[data-theme="knightrider"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,51,0,0.05) 0px, rgba(255,51,0,0.05) 1px,
    transparent 1px, transparent 3px
  );
  animation: scanroll 5s linear infinite;
}
[data-theme="knightrider"] body::after {
  background: rgba(255,20,0,0.02);
  animation: kitScanner 2.2s ease-in-out infinite;
}
@keyframes kitScanner {
  0%   { background-position: -100% 0; opacity: 0.8; }
  50%  { opacity: 1; }
  100% { background-position: 200% 0; opacity: 0.8; }
}
[data-theme="knightrider"] #topbar {
  border-bottom: 1px solid #FF3300;
  box-shadow: 0 2px 0 #FF330033, 0 0 30px #FF330018;
}
[data-theme="knightrider"] .topbar-title::before {
  content: '●';
  font-size: 0.6rem;
  opacity: 0.8;
  margin-right: 8px;
  color: #FF3300;
  animation: kitDot 2.2s ease-in-out infinite;
  letter-spacing: 0;
}
@keyframes kitDot {
  0%,100% { opacity: 0.2; color: #331100; }
  50%     { opacity: 1; color: #FF3300; text-shadow: 0 0 8px #FF3300; }
}
[data-theme="knightrider"] .topbar-title span { color: #FF8844; text-shadow: 0 0 10px #FF3300; }
[data-theme="knightrider"] #left-panel, [data-theme="knightrider"] #right-panel {
  border-color: #AA220044;
  background: rgba(6,0,0,0.97);
}
[data-theme="knightrider"] .panel-header, [data-theme="knightrider"] .obs-header {
  animation: kitPanelScan 2.2s ease-in-out infinite;
}
@keyframes kitPanelScan {
  0%,100% { text-shadow: 0 0 4px #FF330044; }
  50%     { text-shadow: 0 0 10px #FF3300, 0 0 20px #FF330066; }
}
[data-theme="knightrider"] .threat-level { border-color: #FF3300; color: #FF3300; animation: kitDot 2.2s ease-in-out infinite; }
[data-theme="knightrider"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(255,30,0,0.08) 75%, rgba(180,0,0,0.18) 100%);
  pointer-events: none; z-index: 500;
}
[data-theme="knightrider"] #boot-text { color: #FF3300 !important; text-shadow: 0 0 12px #FF3300 !important; }

/* ═══════════════════════════════════════════════════
   THE MATRIX -- FOLLOW THE WHITE RABBIT
   ═══════════════════════════════════════════════════ */
[data-theme="matrix"] {
  --blue: #00FF41;
  --blue-dim: #008F11;
  --blue-dark: #000300;
  --blue-glow: rgba(0,255,65,0.45);
  --amber: #00FF41;
  --red: #00DD35;
  --bg: #000300;
  --scanline: rgba(0,20,0,0.3);
  --map-hue: 120deg;
  --map-saturate: 6;
}
[data-theme="matrix"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,255,65,0.03) 0px, rgba(0,255,65,0.03) 1px,
    transparent 1px, transparent 3px
  );
  animation: scanroll 8s linear infinite;
}
[data-theme="matrix"] body::after {
  background: rgba(0,255,65,0.015);
  animation: matrixPulse 3s ease-in-out infinite;
}
@keyframes matrixPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.92; }
  93%     { opacity: 0.7; }
  94%     { opacity: 1; }
}
[data-theme="matrix"] #topbar {
  border-bottom: 1px solid #00FF41;
  box-shadow: 0 2px 0 rgba(0,255,65,0.3), 0 0 40px rgba(0,255,65,0.12);
}
[data-theme="matrix"] .topbar-title::before {
  content: '▌';
  font-size: 0.85rem;
  opacity: 0.4;
  margin-right: 6px;
  color: #00FF41;
}
[data-theme="matrix"] .topbar-title span {
  color: #00FF41;
  text-shadow: 0 0 12px #00FF41, 0 0 25px rgba(0,255,65,0.5);
}
[data-theme="matrix"] .threat-level {
  border-color: #00FF41;
  color: #00FF41;
  text-shadow: 0 0 8px #00FF41;
}
[data-theme="matrix"] #left-panel,
[data-theme="matrix"] #right-panel {
  border-color: #008F11;
  background: rgba(0,3,0,0.97);
}
[data-theme="matrix"] .launch-card.visible-launch {
  border-left-color: #00FF41;
  box-shadow: inset 3px 0 12px rgba(0,255,65,0.18);
}
[data-theme="matrix"] .panel-header,
[data-theme="matrix"] .obs-header {
  text-shadow: 0 0 10px #00FF41, 0 0 20px rgba(0,255,65,0.4);
  animation: matrixGlow 4s ease-in-out infinite;
}
@keyframes matrixGlow {
  0%,100% { text-shadow: 0 0 8px #00FF41, 0 0 16px rgba(0,255,65,0.3); }
  50%     { text-shadow: 0 0 16px #00FF41, 0 0 32px rgba(0,255,65,0.6); }
}
[data-theme="matrix"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0,80,0,0.10) 70%,
    rgba(0,50,0,0.22) 100%
  );
  pointer-events: none; z-index: 500;
}
[data-theme="matrix"] #boot-text { color: #00FF41 !important; text-shadow: 0 0 12px #00FF41 !important; }

/* ═══════════════════════════════════════════════════
   2001: A SPACE ODYSSEY -- HAL 9000
   ═══════════════════════════════════════════════════ */
[data-theme="hal9000"] {
  --blue: #FF2200;
  --blue-dim: #991100;
  --blue-dark: #050000;
  --blue-glow: rgba(255,34,0,0.4);
  --amber: #FF4400;
  --red: #FF2200;
  --bg: #020000;
  --scanline: rgba(20,0,0,0.35);
  --map-hue: 0deg;
  --map-saturate: 2;
}
[data-theme="hal9000"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,20,0,0.025) 0px, rgba(255,20,0,0.025) 1px,
    transparent 1px, transparent 5px
  );
  animation: none;
}
[data-theme="hal9000"] body::after {
  background: rgba(255,10,0,0.012);
  animation: halBreath 8s ease-in-out infinite;
}
@keyframes halBreath {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.88; }
}
[data-theme="hal9000"] #topbar {
  border-bottom: 1px solid rgba(255,34,0,0.6);
  box-shadow: 0 1px 0 rgba(255,34,0,0.15), 0 0 40px rgba(255,34,0,0.06);
}
[data-theme="hal9000"] .topbar-title::before {
  content: '● ';
  font-size: 0.7rem;
  color: #FF2200;
  opacity: 0.9;
  text-shadow: 0 0 8px #FF2200;
  animation: halEye 4s ease-in-out infinite;
}
@keyframes halEye {
  0%,100% { opacity: 0.9; text-shadow: 0 0 8px #FF2200, 0 0 20px rgba(255,34,0,0.4); }
  50%     { opacity: 0.6; text-shadow: 0 0 4px #FF2200; }
}
[data-theme="hal9000"] .topbar-title span {
  color: #DDDDDD;
  text-shadow: none;
  letter-spacing: 0.15em;
  font-weight: 300;
}
[data-theme="hal9000"] .threat-level {
  border-color: #FF2200;
  color: #FF2200;
  text-shadow: 0 0 6px rgba(255,34,0,0.6);
}
[data-theme="hal9000"] #left-panel,
[data-theme="hal9000"] #right-panel {
  border-color: rgba(255,34,0,0.3);
  background: rgba(2,0,0,0.97);
}
[data-theme="hal9000"] .launch-card.visible-launch {
  border-left-color: #FF2200;
  box-shadow: inset 3px 0 10px rgba(255,34,0,0.12);
}
[data-theme="hal9000"] .panel-header,
[data-theme="hal9000"] .obs-header {
  color: #CCCCCC;
  text-shadow: none;
  letter-spacing: 0.12em;
  font-weight: 300;
}
[data-theme="hal9000"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 35%,
    rgba(120,0,0,0.08) 65%,
    rgba(180,0,0,0.22) 100%
  );
  pointer-events: none; z-index: 500;
}
[data-theme="hal9000"] #boot-text { color: #FF2200 !important; text-shadow: 0 0 10px rgba(255,34,0,0.8) !important; }

/* ═══════════════════════════════════════════════════
   HACKERS -- 1995 · HACK THE PLANET
   CRT phosphor green · BBS era · 2am terminal glow
   ═══════════════════════════════════════════════════ */
[data-theme="hackers"] {
  --blue: #33CC44;
  --blue-dim: #1A7728;
  --blue-dark: #000A02;
  --blue-glow: rgba(51,204,68,0.38);
  --amber: #AADD44;
  --red: #33CC44;
  --bg: #000A02;
  --scanline: rgba(0,15,0,0.45);
  --map-hue: 130deg;
  --map-saturate: 3;
}
/* CRT phosphor scanlines -- denser than Matrix, more authentic */
[data-theme="hackers"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px,
    transparent 1px, transparent 3px
  );
  animation: none;
}
/* Subtle CRT flicker -- monitors weren't stable back then */
[data-theme="hackers"] body::after {
  background: rgba(0,30,0,0.018);
  animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
  0%,100% { opacity:1; }
  88%     { opacity:0.97; }
  89%     { opacity:0.82; }
  90%     { opacity:1; }
  94%     { opacity:0.96; }
  95%     { opacity:1; }
}
[data-theme="hackers"] #topbar {
  border-bottom: 1px solid rgba(51,204,68,0.5);
  box-shadow: 0 1px 0 rgba(51,204,68,0.12), 0 0 30px rgba(51,204,68,0.06);
}
[data-theme="hackers"] .topbar-title::before {
  content: '> ';
  color: #33CC44;
  opacity: 0.8;
  font-size: 0.85rem;
}
[data-theme="hackers"] .topbar-title span {
  color: #33CC44;
  text-shadow: 0 0 10px rgba(51,204,68,0.6), 0 0 20px rgba(51,204,68,0.2);
}
[data-theme="hackers"] .threat-level {
  border-color: #33CC44;
  color: #33CC44;
  text-shadow: 0 0 6px rgba(51,204,68,0.5);
}
[data-theme="hackers"] #left-panel,
[data-theme="hackers"] #right-panel {
  border-color: rgba(51,204,68,0.3);
  background: rgba(0,10,2,0.97);
}
[data-theme="hackers"] .launch-card.visible-launch {
  border-left-color: #33CC44;
  box-shadow: inset 3px 0 10px rgba(51,204,68,0.14);
}
[data-theme="hackers"] .panel-header,
[data-theme="hackers"] .obs-header {
  text-shadow: 0 0 8px rgba(51,204,68,0.5);
  animation: termGlow 5s ease-in-out infinite;
}
@keyframes termGlow {
  0%,100% { text-shadow: 0 0 6px rgba(51,204,68,0.4); }
  50%     { text-shadow: 0 0 12px rgba(51,204,68,0.7), 0 0 24px rgba(51,204,68,0.2); }
}
[data-theme="hackers"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 42%,
    rgba(0,60,10,0.08) 68%,
    rgba(0,40,8,0.20) 100%
  );
  pointer-events: none; z-index: 500;
}
[data-theme="hackers"] #boot-text {
  color: #33CC44 !important;
  text-shadow: 0 0 10px rgba(51,204,68,0.7) !important;
}

/* ═══════════════════════════════════════════════════
   BLADE RUNNER -- 2019 · LOS ANGELES
   Neon amber · acid rain · Vangelis · replicants
   ═══════════════════════════════════════════════════ */
[data-theme="bladerunner"] {
  --blue: #FF6B00;
  --blue-dim: #CC4400;
  --blue-dark: #0A0400;
  --blue-glow: rgba(255,107,0,0.4);
  --amber: #FFB300;
  --red: #FF3300;
  --bg: #080300;
  --map-hue: 25deg;
  --map-saturate: 2.5;
}
[data-theme="bladerunner"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,80,0,0.022) 0px, rgba(255,80,0,0.022) 1px,
    transparent 1px, transparent 4px
  );
  animation: none;
}
[data-theme="bladerunner"] body::after {
  background: rgba(20,6,0,0.015);
  animation: brRain 0.08s steps(1) infinite;
}
@keyframes brRain {
  0%   { opacity: 1; }
  85%  { opacity: 1; }
  86%  { opacity: 0.94; }
  87%  { opacity: 1; }
  93%  { opacity: 0.97; }
  94%  { opacity: 1; }
}
[data-theme="bladerunner"] #topbar {
  border-bottom: 1px solid rgba(255,107,0,0.55);
  box-shadow: 0 1px 0 rgba(255,107,0,0.12), 0 0 40px rgba(255,80,0,0.07);
}
[data-theme="bladerunner"] .topbar-title::before {
  content: '▲ ';
  font-size: 0.7rem;
  color: #FF6B00;
  text-shadow: 0 0 10px rgba(255,107,0,0.8);
  animation: brPulse 3s ease-in-out infinite;
}
@keyframes brPulse {
  0%,100% { opacity:1; text-shadow: 0 0 10px rgba(255,107,0,0.8), 0 0 25px rgba(255,80,0,0.4); }
  50%     { opacity:0.7; text-shadow: 0 0 5px rgba(255,107,0,0.5); }
}
[data-theme="bladerunner"] .topbar-title span {
  color: #FF8C00;
  text-shadow: 0 0 12px rgba(255,107,0,0.7), 0 0 30px rgba(255,60,0,0.3);
  letter-spacing: 0.12em;
}
[data-theme="bladerunner"] .threat-level {
  border-color: #FF6B00;
  color: #FF8C00;
  text-shadow: 0 0 8px rgba(255,107,0,0.6);
}
[data-theme="bladerunner"] #left-panel,
[data-theme="bladerunner"] #right-panel {
  border-color: rgba(255,107,0,0.28);
  background: rgba(8,3,0,0.97);
}
[data-theme="bladerunner"] .launch-card.visible-launch {
  border-left-color: #FF6B00;
  box-shadow: inset 3px 0 12px rgba(255,80,0,0.15);
}
[data-theme="bladerunner"] .panel-header,
[data-theme="bladerunner"] .obs-header {
  color: #FF8C00;
  text-shadow: 0 0 10px rgba(255,107,0,0.5);
}
[data-theme="bladerunner"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(80,20,0,0.08) 60%,
    rgba(140,40,0,0.25) 100%
  );
  pointer-events: none; z-index: 500;
}
[data-theme="bladerunner"] #boot-text {
  color: #FF6B00 !important;
  text-shadow: 0 0 12px rgba(255,107,0,0.9) !important;
}

/* ═══════════════════════════════════════════════════
   ALIENS -- 2179 · LV-426
   Motion tracker · Colonial Marines · USCSS Sulaco
   ═══════════════════════════════════════════════════ */
[data-theme="aliens"] {
  --blue: #00FF88;
  --blue-dim: #00AA55;
  --blue-dark: #000A04;
  --blue-glow: rgba(0,255,136,0.35);
  --amber: #00FF88;
  --red: #FF2200;
  --bg: #000A04;
  --map-hue: 145deg;
  --map-saturate: 2.2;
}
[data-theme="aliens"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 1px,
    transparent 1px, transparent 4px
  );
  animation: none;
}
[data-theme="aliens"] body::after {
  background: rgba(0,15,5,0.02);
  animation: alienFlicker 6s ease-in-out infinite;
}
@keyframes alienFlicker {
  0%,100% { opacity:1; }
  45%     { opacity:1; }
  46%     { opacity:0.88; }
  47%     { opacity:1; }
}
[data-theme="aliens"] #topbar {
  border-bottom: 1px solid rgba(0,255,136,0.45);
  box-shadow: 0 1px 0 rgba(0,255,136,0.1);
}
[data-theme="aliens"] .topbar-title::before {
  content: '◉ ';
  font-size: 0.65rem;
  color: #00FF88;
  text-shadow: 0 0 8px rgba(0,255,136,0.8);
  animation: trackerPulse 1.8s ease-in-out infinite;
}
@keyframes trackerPulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.4; }
}
[data-theme="aliens"] .topbar-title span {
  color: #00FF88;
  text-shadow: 0 0 10px rgba(0,255,136,0.6);
  letter-spacing: 0.15em;
  font-weight: 300;
}
[data-theme="aliens"] .threat-level {
  border-color: #00FF88;
  color: #00FF88;
  text-shadow: 0 0 6px rgba(0,255,136,0.5);
}
[data-theme="aliens"] #left-panel,
[data-theme="aliens"] #right-panel {
  border-color: rgba(0,255,136,0.25);
  background: rgba(0,10,4,0.97);
}
[data-theme="aliens"] .launch-card.visible-launch {
  border-left-color: #00FF88;
  box-shadow: inset 3px 0 10px rgba(0,255,136,0.12);
}
[data-theme="aliens"] .panel-header,
[data-theme="aliens"] .obs-header {
  color: #00FF88;
  text-shadow: 0 0 8px rgba(0,255,136,0.45);
}
[data-theme="aliens"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 38%,
    rgba(0,40,15,0.07) 65%,
    rgba(0,30,10,0.18) 100%
  );
  pointer-events: none; z-index: 500;
}
[data-theme="aliens"] #boot-text {
  color: #00FF88 !important;
  text-shadow: 0 0 10px rgba(0,255,136,0.7) !important;
}

/* ═══════════════════════════════════════════════════
   AIRWOLF -- CODENAME: ANGEL
   ═══════════════════════════════════════════════════ */
[data-theme="airwolf"] {
  --blue: #7BAFD4;
  --blue-dim: #4A7A9B;
  --blue-dark: #020810;
  --blue-glow: rgba(123,175,212,0.35);
  --amber: #B8D4E8;
  --red: #7BAFD4;
  --bg: #030912;
  --scanline: rgba(0,10,25,0.2);
  --map-hue: 210deg;
  --map-saturate: 2;
}
[data-theme="airwolf"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(100,160,200,0.04) 0px, rgba(100,160,200,0.04) 1px,
    transparent 1px, transparent 3px
  );
  animation: scanroll 10s linear infinite;
}
[data-theme="airwolf"] body::after {
  background: rgba(80,120,160,0.015);
  animation: none;
}
[data-theme="airwolf"] #topbar {
  border-bottom: 1px solid #4A7A9B88;
  box-shadow: 0 1px 0 #7BAFD422;
  background: rgba(3,9,18,0.99);
}
[data-theme="airwolf"] .topbar-title::before {
  content: '⬡';
  font-size: 0.65rem;
  opacity: 0.3;
  margin-right: 8px;
  color: #7BAFD4;
  letter-spacing: 0;
}
[data-theme="airwolf"] .topbar-title span { color: #B8D4E8; text-shadow: 0 0 8px #7BAFD466; }
[data-theme="airwolf"] #left-panel, [data-theme="airwolf"] #right-panel {
  border-color: #4A7A9B44;
  background: rgba(3,9,18,0.98);
}
[data-theme="airwolf"] .panel-header, [data-theme="airwolf"] .obs-header {
  text-shadow: 0 0 6px #7BAFD455;
  animation: airwolfPulse 8s ease-in-out infinite;
}
@keyframes airwolfPulse {
  0%,100% { text-shadow: 0 0 4px #7BAFD433; opacity: 0.85; }
  50%     { text-shadow: 0 0 8px #7BAFD477; opacity: 1; }
}
[data-theme="airwolf"] .threat-level { border-color: #7BAFD4; color: #7BAFD4; }
[data-theme="airwolf"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(50,100,140,0.07) 80%, rgba(20,60,100,0.15) 100%);
  pointer-events: none; z-index: 500;
}
[data-theme="airwolf"] #boot-text { color: #7BAFD4 !important; text-shadow: 0 0 10px #7BAFD4 !important; }

/* ── C64 THEME ── */
[data-theme="c64"] {
  --blue: #7B90D2;
  --blue-dim: #5060A0;
  --blue-dark: #0000AA;
  --blue-glow: rgba(123,144,210,0.4);
  --amber: #AABBFF;
  --red: #7B90D2;
  --bg: #0000AA;
  --scanline: rgba(0,0,80,0.3);
  --map-hue: 230deg;
  --map-saturate: 1.8;
}
[data-theme="c64"] body::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(80,100,180,0.12) 0px, rgba(80,100,180,0.12) 1px,
    transparent 1px, transparent 2px
  );
  animation: scanroll 6s linear infinite;
}
[data-theme="c64"] body::after {
  background: rgba(60,80,200,0.04);
  animation: none;
}
[data-theme="c64"] #topbar {
  border-bottom: 1px solid #5060A088;
  background: rgba(0,0,160,0.99);
  box-shadow: 0 1px 0 #7B90D222;
}
[data-theme="c64"] .topbar-title::before {
  content: '■';
  font-size: 0.6rem;
  opacity: 0.6;
  margin-right: 8px;
  color: #AABBFF;
  letter-spacing: 0;
  animation: c64cursor 1s step-end infinite;
}
@keyframes c64cursor { 0%,49%{opacity:1} 50%,100%{opacity:0} }
[data-theme="c64"] .topbar-title span { color: #AABBFF; text-shadow: 0 0 8px #7B90D266; font-family: 'VT323', monospace; }
[data-theme="c64"] #left-panel, [data-theme="c64"] #right-panel {
  border-color: #5060A044;
  background: rgba(0,0,140,0.98);
}
[data-theme="c64"] .panel-header, [data-theme="c64"] .obs-header { text-shadow: 0 0 6px #7B90D255; }
[data-theme="c64"] .threat-level { border-color: #7B90D2; color: #7B90D2; }
[data-theme="c64"] #map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,120,0.08) 80%, rgba(0,0,100,0.18) 100%);
  pointer-events: none; z-index: 500;
}
[data-theme="c64"] #boot-text { color: #7B90D2 !important; text-shadow: 0 0 10px #7B90D2 !important; }

/* NES THEME */
[data-theme="nes"] { --blue:#E8504A; --blue-dim:#A03030; --blue-dark:#1a0a0a; --blue-glow:rgba(232,80,74,0.35); --amber:#F8F8F8; --red:#E8504A; --bg:#111111; --scanline:rgba(0,0,0,0.35); --map-hue:0deg; --map-saturate:1.2; }
[data-theme="nes"] body::before { background:repeating-linear-gradient(0deg,rgba(0,0,0,0.4) 0px,rgba(0,0,0,0.4) 1px,transparent 1px,transparent 3px); animation:scanroll 8s linear infinite; }
[data-theme="nes"] body::after { background:rgba(30,0,0,0.06); animation:none; }
[data-theme="nes"] #topbar { border-bottom:1px solid #A0303088; background:rgba(20,5,5,0.99); box-shadow:0 2px 0 #E8504A33; }
[data-theme="nes"] .topbar-title::before { content:'▶'; font-size:0.65rem; opacity:0.9; margin-right:8px; color:#E8504A; letter-spacing:0; }
[data-theme="nes"] .topbar-title span { color:#F8F8F8; text-shadow:0 0 8px #E8504A88; font-family:'VT323',monospace; }
[data-theme="nes"] #left-panel,[data-theme="nes"] #right-panel { border-color:#A0303044; background:rgba(15,5,5,0.98); }
[data-theme="nes"] .panel-header,[data-theme="nes"] .obs-header { text-shadow:0 0 6px #E8504A55; }
[data-theme="nes"] .threat-level { border-color:#E8504A; color:#E8504A; }
[data-theme="nes"] #map-wrap::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 50%,rgba(80,0,0,0.08) 80%,rgba(50,0,0,0.18) 100%); pointer-events:none; z-index:500; }
[data-theme="nes"] #boot-text { color:#E8504A !important; text-shadow:0 0 10px #E8504A !important; }

/* GAME BOY THEME */
[data-theme="gameboy"] { --blue:#8bac0f; --blue-dim:#306230; --blue-dark:#0f380f; --blue-glow:rgba(139,172,15,0.35); --amber:#9bbc0f; --red:#8bac0f; --bg:#0f380f; --scanline:rgba(0,20,0,0.5); --map-hue:90deg; --map-saturate:2; }
[data-theme="gameboy"] body::before { background:repeating-linear-gradient(0deg,rgba(0,15,0,0.55) 0px,rgba(0,15,0,0.55) 1px,transparent 1px,transparent 2px); animation:none; }
[data-theme="gameboy"] body::after { background:repeating-linear-gradient(90deg,rgba(0,20,0,0.12) 0px,rgba(0,20,0,0.12) 1px,transparent 1px,transparent 4px); animation:none; }
[data-theme="gameboy"] #topbar { border-bottom:1px solid #30623088; background:rgba(10,30,10,0.99); box-shadow:0 1px 0 #8bac0f22; }
[data-theme="gameboy"] .topbar-title::before { content:'○'; font-size:0.7rem; opacity:0.8; margin-right:8px; color:#9bbc0f; letter-spacing:0; }
[data-theme="gameboy"] .topbar-title span { color:#9bbc0f; text-shadow:0 0 6px #8bac0f66; font-family:'VT323',monospace; }
[data-theme="gameboy"] #left-panel,[data-theme="gameboy"] #right-panel { border-color:#30623044; background:rgba(12,35,12,0.98); }
[data-theme="gameboy"] .panel-header,[data-theme="gameboy"] .obs-header { text-shadow:0 0 4px #8bac0f44; }
[data-theme="gameboy"] .threat-level { border-color:#8bac0f; color:#8bac0f; }
[data-theme="gameboy"] #map-wrap::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(0,30,0,0.15) 80%,rgba(0,20,0,0.3) 100%); pointer-events:none; z-index:500; }
[data-theme="gameboy"] #boot-text { color:#8bac0f !important; text-shadow:0 0 8px #8bac0f !important; }

/* SEGA GENESIS THEME */
[data-theme="genesis"] { --blue:#5BC8F5; --blue-dim:#2A7AB5; --blue-dark:#000814; --blue-glow:rgba(91,200,245,0.35); --amber:#A0DFFF; --red:#5BC8F5; --bg:#000814; --scanline:rgba(0,0,20,0.3); --map-hue:200deg; --map-saturate:2.5; }
[data-theme="genesis"] body::before { background:repeating-linear-gradient(0deg,rgba(0,10,30,0.35) 0px,rgba(0,10,30,0.35) 1px,transparent 1px,transparent 3px); animation:scanroll 7s linear infinite; }
[data-theme="genesis"] body::after { background:rgba(0,20,60,0.04); animation:none; }
[data-theme="genesis"] #topbar { border-bottom:1px solid #2A7AB588; background:rgba(0,5,20,0.99); box-shadow:0 2px 0 #5BC8F533; }
[data-theme="genesis"] .topbar-title::before { content:'◈'; font-size:0.6rem; opacity:0.85; margin-right:8px; color:#5BC8F5; letter-spacing:0; animation:genesisPulse 1.5s ease-in-out infinite; }
@keyframes genesisPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
[data-theme="genesis"] .topbar-title span { color:#A0DFFF; text-shadow:0 0 10px #5BC8F599; }
[data-theme="genesis"] #left-panel,[data-theme="genesis"] #right-panel { border-color:#2A7AB544; background:rgba(0,5,20,0.98); }
[data-theme="genesis"] .panel-header,[data-theme="genesis"] .obs-header { text-shadow:0 0 8px #5BC8F566; }
[data-theme="genesis"] .threat-level { border-color:#5BC8F5; color:#5BC8F5; }
[data-theme="genesis"] #map-wrap::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 50%,rgba(0,30,80,0.1) 80%,rgba(0,10,50,0.2) 100%); pointer-events:none; z-index:500; }
[data-theme="genesis"] #boot-text { color:#5BC8F5 !important; text-shadow:0 0 10px #5BC8F5 !important; }

/* ATARI 2600 THEME */
[data-theme="atari"] { --blue:#F4A23A; --blue-dim:#9B5E10; --blue-dark:#1A0C00; --blue-glow:rgba(244,162,58,0.35); --amber:#FFD080; --red:#F4A23A; --bg:#130800; --scanline:rgba(0,0,0,0.45); --map-hue:30deg; --map-saturate:1.5; }
[data-theme="atari"] body::before { background:repeating-linear-gradient(0deg,rgba(0,0,0,0.5) 0px,rgba(0,0,0,0.5) 1px,transparent 1px,transparent 2px); animation:scanroll 5s linear infinite; }
[data-theme="atari"] body::after { background:rgba(60,20,0,0.08); animation:none; }
[data-theme="atari"] #topbar { border-bottom:2px solid #9B5E1088; background:rgba(20,8,0,0.99); box-shadow:0 2px 0 #F4A23A44; }
[data-theme="atari"] .topbar-title::before { content:'★'; font-size:0.6rem; opacity:0.9; margin-right:8px; color:#F4A23A; letter-spacing:0; }
[data-theme="atari"] .topbar-title span { color:#FFD080; text-shadow:0 0 8px #F4A23A88; font-family:'VT323',monospace; }
[data-theme="atari"] #left-panel,[data-theme="atari"] #right-panel { border-color:#9B5E1044; background:rgba(18,8,0,0.98); }
[data-theme="atari"] .panel-header,[data-theme="atari"] .obs-header { text-shadow:0 0 6px #F4A23A55; }
[data-theme="atari"] .threat-level { border-color:#F4A23A; color:#F4A23A; }
[data-theme="atari"] #map-wrap::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(60,20,0,0.12) 80%,rgba(40,10,0,0.25) 100%); pointer-events:none; z-index:500; }
[data-theme="atari"] #boot-text { color:#F4A23A !important; text-shadow:0 0 10px #F4A23A !important; }

/* AMIGA THEME */
[data-theme="amiga"] { --blue:#CC88FF; --blue-dim:#884DB8; --blue-dark:#0D0015; --blue-glow:rgba(204,136,255,0.35); --amber:#FF8800; --red:#CC88FF; --bg:#0D0015; --scanline:rgba(0,0,10,0.28); --map-hue:270deg; --map-saturate:1.8; }
[data-theme="amiga"] body::before { background:repeating-linear-gradient(0deg,rgba(0,0,15,0.3) 0px,rgba(0,0,15,0.3) 1px,transparent 1px,transparent 3px); animation:scanroll 9s linear infinite; }
[data-theme="amiga"] body::after { background:rgba(30,0,60,0.05); animation:none; }
[data-theme="amiga"] #topbar { border-bottom:1px solid #884DB888; background:rgba(10,0,20,0.99); box-shadow:0 1px 0 #CC88FF22; }
[data-theme="amiga"] .topbar-title::before { content:'◆'; font-size:0.55rem; opacity:0.85; margin-right:8px; color:#FF8800; letter-spacing:0; }
[data-theme="amiga"] .topbar-title span { color:#CC88FF; text-shadow:0 0 8px #CC88FF66; }
[data-theme="amiga"] #left-panel,[data-theme="amiga"] #right-panel { border-color:#884DB844; background:rgba(10,0,20,0.98); }
[data-theme="amiga"] .panel-header,[data-theme="amiga"] .obs-header { text-shadow:0 0 6px #CC88FF44; }
[data-theme="amiga"] .threat-level { border-color:#CC88FF; color:#CC88FF; }
[data-theme="amiga"] #map-wrap::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 50%,rgba(40,0,80,0.1) 80%,rgba(20,0,50,0.2) 100%); pointer-events:none; z-index:500; }
[data-theme="amiga"] #boot-text { color:#CC88FF !important; text-shadow:0 0 10px #CC88FF !important; }

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  background: var(--bg);
  color: var(--blue);
  font-family: 'Share Tech Mono', monospace;
  height: 100vh;
  overflow: hidden;
  cursor: none;
}

/* Custom cursor */
.cursor {
  position: fixed;
  width: 20px; height: 20px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: transform 0.05s;
  box-shadow: 0 0 8px var(--blue);
}
.cursor::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: var(--blue);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

/* CRT overlay effects */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9998;
  animation: scanroll 8s linear infinite;
}
@keyframes scanroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* Screen flicker */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: rgba(0,100,200,0.015);
  pointer-events: none;
  z-index: 9997;
  animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0%,100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.85; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

/* CRT vignette + curve */
.crt-vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
  z-index: 9996;
}

/* BOOT SCREEN */
#boot {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 40px;
}
#boot-text {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--blue);
  width: 700px;
  max-width: 90vw;
  line-height: 1.6;
  white-space: pre-wrap;
  text-shadow: 0 0 8px var(--blue);
}
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* LAYOUT */
#app {
  display: none;
  filter: brightness(var(--app-brightness));
  transition: filter 0.4s ease;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

/* TOP BAR */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: 1px solid var(--blue-dim);
  background: rgba(0,4,15,0.95);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
#topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}
.topbar-title {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: var(--blue);
  text-shadow: 0 0 15px var(--blue);
  letter-spacing: 0.2em;
}
.topbar-title span { color: var(--amber); text-shadow: 0 0 15px var(--amber); }
.topbar-meta {
  display: flex;
  gap: 24px;
  font-size: 0.7rem;
  color: var(--blue-dim);
}
.meta-item { display: flex; gap: 8px; align-items: center; }
.meta-label { color: var(--blue-dim); }
.meta-val { color: var(--blue); text-shadow: 0 0 6px var(--blue); }
.threat-level {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  padding: 2px 10px;
  border: 1px solid var(--blue-dim);
  color: var(--blue);
  animation: border-pulse 2s infinite;
}
@keyframes border-pulse {
  0%,100% { border-color: var(--blue-dim); }
  50% { border-color: var(--blue); box-shadow: 0 0 10px var(--blue-glow); }
}

/* MAIN LAYOUT */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* LEFT PANEL */
#left-panel {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--blue-dim);
  background: rgba(0,3,10,0.97);
  overflow: hidden;
}

.panel-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--blue-dark);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--blue-dim);
  letter-spacing: 0.15em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.panel-header-count {
  background: var(--blue-dark);
  color: var(--blue);
  border: 1px solid var(--blue-dim);
  padding: 0 6px;
  font-size: 0.8rem;
}

/* OBSERVER */
#observer-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.obs-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.obs-loc {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue);
  margin-bottom: 2px;
}
.obs-coords { font-size: 0.65rem; color: var(--blue-dim); margin-bottom: 8px; }
.radius-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.radius-row label { font-size: 0.6rem; color: var(--blue-dim); flex-shrink: 0; }
input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  height: 3px;
  background: var(--blue-dark);
  outline: none;
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--blue);
  cursor: pointer;
  box-shadow: 0 0 6px var(--blue);
}
input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--blue-dim) 0%, var(--blue-dark) 100%);
}
.radius-val { font-size: 0.7rem; color: var(--blue); min-width: 55px; text-align: right; font-family: 'VT323', monospace; }

/* ISS PANEL */
#iss-box {
  padding: 8px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.iss-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.iss-data {
  font-size: 0.65rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}
.iss-label { color: var(--blue-dim); }
.iss-val { color: var(--blue); font-family: 'VT323', monospace; font-size: 0.85rem; }
.iss-status-green { color: var(--blue); text-shadow: 0 0 6px var(--blue); }
.iss-status-amber { color: var(--amber); text-shadow: 0 0 6px var(--amber); }

/* LAUNCH LIST */
#launch-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
}
#launch-list::-webkit-scrollbar { width: 4px; }
#launch-list::-webkit-scrollbar-track { background: transparent; }
#launch-list::-webkit-scrollbar-thumb { background: var(--blue-dark); }

.launch-card {
  font-size: var(--fs-sm);
  border: 1px solid var(--blue-dark);
  padding: 8px 10px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  background: rgba(0,8,20,0.3);
}
.launch-card:hover { border-color: var(--blue-dim); background: rgba(0,191,255,0.05); }
.launch-card.active { border-color: var(--blue); background: rgba(0,191,255,0.08); box-shadow: 0 0 10px rgba(0,191,255,0.2) inset; }
.launch-card.visible { border-left: 3px solid var(--blue); }
.launch-card.maybe { border-left: 3px solid var(--amber); }
.card-name {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--blue);
  line-height: 1.2;
  text-shadow: 0 0 6px var(--blue);
  margin-bottom: 2px;
}
.card-rocket { font-size: 0.6rem; color: var(--blue-dim); margin-bottom: 4px; }
.card-row { display: flex; justify-content: space-between; font-size: 0.6rem; }
.card-site { color: var(--blue-dim); }
.card-time { color: var(--amber); font-family: 'VT323', monospace; font-size: 0.8rem; }
.card-dist { font-size: 0.58rem; color: var(--blue-dim); margin-top: 2px; }
.badge {
  display: inline-block;
  padding: 0 5px;
  font-family: 'VT323', monospace;
  font-size: 0.75rem;
  border: 1px solid;
  margin-top: 3px;
  letter-spacing: 0.1em;
}
.badge-visible { color: var(--blue); border-color: var(--blue); background: rgba(0,191,255,0.1); }
.badge-maybe { color: var(--amber); border-color: var(--amber); background: rgba(255,176,0,0.1); }
.badge-no { color: var(--blue-dim); border-color: var(--blue-dark); }
.badge-recovery { color:#00BFFF; border-color:#00BFFF; background:rgba(0,191,255,0.1); }
.launch-card.history-card { opacity: 0.75; border-left: 2px solid rgba(0,191,255,0.3); }
.launch-card.history-card:hover { opacity: 1; }
.launch-card.history-card .card-time { color: #888; }
#history-tab { opacity: 0.55; }
#history-tab::after { content: ' 🔒'; font-size: 0.7em; }
/* notmar-zone-a + notmarPulse moved to consolidated phosphor v0.3 block -- see line ~3110 */
.launch-card.recovery { border-left:2px solid rgba(0,191,255,0.5); background:rgba(0,191,255,0.04); }
.launch-card.recovery .card-name { color:#00BFFF; }
.card-time.recovery-time { color:#00BFFF !important; font-style:italic; }

/* COUNTDOWN URGENT */
.urgent { color: var(--red) !important; text-shadow: 0 0 10px var(--red) !important; animation: urgent-blink 0.5s step-end infinite; }
@keyframes urgent-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* RIGHT PANEL */
#right-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--blue-dim);
  background: rgba(0,3,10,0.97);
  overflow: hidden;
}

/* WEATHER BOX */
#weather-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.wx-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.wx-data {
  font-size: 0.62rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}
.wx-label { color: var(--blue-dim); }
.wx-val { color: var(--blue); font-family: 'VT323', monospace; font-size: 0.85rem; }
.wx-clarity {
  margin-top: 6px;
  height: 16px;
  background: var(--blue-dark);
  border: 1px solid var(--blue-dim);
  position: relative;
  overflow: hidden;
}
.wx-clarity-fill {
  height: 100%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
  transition: width 1s;
}
.wx-clarity-label {
  position: absolute;
  right: 4px; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: 0.55rem;
  color: var(--bg);
  font-family: 'VT323', monospace;
}

/* DETAIL BOX */
#detail-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
  min-height: 160px;
}
.detail-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.detail-content {
  font-size: 0.62rem;
  color: var(--blue-dim);
  line-height: 1.5;
}
.detail-mission-name {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue);
  margin-bottom: 4px;
}
.detail-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
.detail-label { color: var(--blue-dim); }
.detail-val { color: var(--blue); font-family: 'VT323', monospace; font-size: 0.8rem; }
.detail-vis-bar {
  margin-top: 8px;
  height: 12px;
  background: var(--blue-dark);
  border: 1px solid var(--blue-dim);
  position: relative;
}
.detail-vis-fill { height: 100%; background: var(--blue); box-shadow: 0 0 6px var(--blue); transition: width 0.5s; }

/* HORIZON CHECK */
#horizon-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.horizon-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}
.horizon-viz {
  position: relative;
  height: 60px;
  border: 1px solid var(--blue-dark);
  overflow: hidden;
  background: rgba(0,4,15,0.5);
}
canvas#horizon-canvas { width: 100%; height: 100%; }

/* TERMINAL LOG */
#log-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.log-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--blue-dark);
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
#log-content {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 0.6rem;
  color: var(--blue-dim);
  line-height: 1.6;
}
#log-content::-webkit-scrollbar { width: 3px; }
#log-content::-webkit-scrollbar-thumb { background: var(--blue-dark); }
.log-entry { margin-bottom: 1px; }
.log-time { color: var(--blue-dark); }
.log-msg { color: var(--blue-dim); }
.log-msg.alert { color: var(--blue); }
.log-msg.warn { color: var(--amber); }
.log-msg.crit { color: var(--red); }

/* MAP CONTAINER */
#map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}
#map { width: 100%; height: 100%; }

/* Leaflet overrides */
.leaflet-container {
  background: #00040f !important;
  font-family: 'Share Tech Mono', monospace !important;
}
.leaflet-tile-pane {
  filter: saturate(0) brightness(0.25) sepia(1) hue-rotate(var(--map-hue, 200deg)) saturate(var(--map-saturate, 4)) brightness(0.5);
}
.leaflet-popup-content-wrapper {
  background: rgba(0,4,12,0.97);
  border: 1px solid var(--blue);
  border-radius: 0;
  color: var(--blue);
  box-shadow: 0 0 20px var(--blue-glow);
  font-family: 'Share Tech Mono', monospace;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; line-height: 1.7; margin: 10px 14px; }
.leaflet-popup-close-button { color: var(--blue) !important; font-size: 1.2rem !important; }
.popup-title {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue);
  border-bottom: 1px solid var(--blue-dark);
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.popup-row { display: flex; justify-content: space-between; gap: 10px; }
.popup-label { color: var(--blue-dim); }
.popup-val { color: var(--blue); }
.popup-vis { margin-top: 6px; font-family: 'VT323', monospace; font-size: 0.9rem; }

/* MAP LEGEND */
#map-legend {
  position: absolute;
  bottom: 24px; right: 10px;
  z-index: 500;
  background: rgba(0,4,12,0.92);
  border: 1px solid var(--blue-dark);
  padding: 8px 12px;
  font-size: 0.58rem;
}
.legend-title {
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--blue-dim); }
.l-dot { width: 10px; height: 10px; border-radius: 0; flex-shrink: 0; }
.l-line { width: 20px; height: 2px; flex-shrink: 0; }

/* MAP GRID OVERLAY */
#map-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,191,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,191,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 400;
}

/* ALERT BANNER */
#alert-banner {
  display: none;
  position: absolute;
  top: 52px; left: 50%; transform: translateX(-50%);
  z-index: 600;
  background: rgba(0,4,12,0.97);
  border: 2px solid var(--amber);
  padding: 8px 20px;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber);
  box-shadow: 0 0 20px rgba(255,176,0,0.4);
  letter-spacing: 0.1em;
  text-align: center;
  animation: banner-pulse 1s infinite;
}
@keyframes banner-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(255,176,0,0.4); }
  50% { box-shadow: 0 0 30px rgba(255,176,0,0.7); }
}
#alert-banner.traj-mode {
  display: block;
  animation: none;
  white-space: nowrap;
  background: rgba(0,4,12,0.97);
  border-color: var(--traj-color, #00FF88);
  color: var(--traj-color, #00FF88);
  text-shadow: 0 0 10px var(--traj-color, #00FF88);
  box-shadow: 0 0 20px color-mix(in srgb, var(--traj-color, #00FF88) 40%, transparent);
  transition: opacity 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
#alert-banner.traj-mode .traj-conf-label {
  display: inline-block;
  font-size: 0.75em;
  letter-spacing: 0.15em;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--traj-color, #00FF88);
  border-radius: 2px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
#alert-banner { transition: opacity 0.3s ease; }

/* SCRUB BANNER -- Patch LL (scrub-banner Phase 4) */
#scrub-banner {
  display: none;
  position: absolute;
  top: 96px; left: 50%; transform: translateX(-50%);
  z-index: 599;
  background: rgba(0,4,12,0.97);
  border: 2px solid var(--scrub-color, #FFB000);
  padding: 6px 18px;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--scrub-color, #FFB000);
  text-shadow: 0 0 10px var(--scrub-color, #FFB000);
  box-shadow: 0 0 18px color-mix(in srgb, var(--scrub-color, #FFB000) 40%, transparent);
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
#scrub-banner.visible { display: block; }
#scrub-banner.state-hold      { --scrub-color: #FFB000; }
#scrub-banner.state-tbc       { --scrub-color: #FFB000; }
#scrub-banner.state-scrubbed  { --scrub-color: #FF3B30; animation: scrub-pulse 1.4s infinite; }
#scrub-banner.state-flight    { --scrub-color: #00FF88; }
#scrub-banner.state-success   { --scrub-color: #00FF88; }
#scrub-banner.state-failure   { --scrub-color: #FF3B30; }
@keyframes scrub-pulse {
  0%,100% { box-shadow: 0 0 18px color-mix(in srgb, #FF3B30 40%, transparent); }
  50%     { box-shadow: 0 0 28px color-mix(in srgb, #FF3B30 70%, transparent); }
}
#scrub-banner .scrub-icon { margin-right: 6px; }
#scrub-banner .scrub-detail {
  font-size: 0.85em; margin-left: 10px; opacity: 0.85;
}
#scrub-banner .scrub-freshness {
  font-size: 0.7em; letter-spacing: 0.08em; margin-left: 12px;
  opacity: 0.55; border-left: 1px solid currentColor; padding-left: 10px;
}

/* BOTTOM STATUS BAR */
#statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  border-top: 1px solid var(--blue-dim);
  background: rgba(0,4,15,0.98);
  overflow: hidden;   /* prevent text spill at small zoom levels */
  flex-shrink: 0;
  font-size: 0.58rem;
  color: var(--blue-dim);
  flex-shrink: 0;
  position: relative;
}
#statusbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--blue);
  box-shadow: 0 0 6px var(--blue);
}
.status-section { display: flex; gap: 16px; }
.sb-item { display: flex; gap: 6px; }
.sb-label { color: var(--blue-dim); }
.sb-val { color: var(--blue); }
.sb-dot { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 4px var(--blue); animation: pulse 2s infinite; align-self: center; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* TABS */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.tab {
  flex: 1;
  padding: 5px;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 0.75rem;
  color: var(--blue-dim);
  cursor: pointer;
  border-right: 1px solid var(--blue-dark);
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.tab:last-child { border-right: none; }
.tab:hover { color: var(--blue); background: rgba(0,191,255,0.05); }
.tab.active { color: var(--blue); background: rgba(0,191,255,0.08); border-bottom: 2px solid var(--blue); box-shadow: 0 0 8px rgba(0,191,255,0.2) inset; }

.tab-content { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.tab-content.active { display: flex; }
#mute-btn {
  background: rgba(0,4,12,0.92);
  border: 1px solid var(--blue-dim);
  color: var(--blue-dim);
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  padding: 2px 12px;
  cursor: none;
  letter-spacing: 0.1em;
  transition: all 0.15s;
}
#mute-btn:hover { border-color: var(--blue); color: var(--blue); }
#mute-btn.muted { color: #ff2020 !important; border-color: #ff2020 !important; }

/* VESSEL TRACKING */
#vessel-box {
  padding: 8px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.vessel-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.vessel-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 6px;
  margin-bottom: 3px;
  border: 1px solid var(--blue-dark);
  background: rgba(0,8,20,0.4);
  cursor: none;
  transition: all 0.15s;
  font-size: 0.6rem;
}
.vessel-card:hover { border-color: var(--blue-dim); background: rgba(0,191,255,0.05); }
.vessel-card.live { border-left: 2px solid #ff6b35; }
.vessel-card.in-port { border-left: 2px solid #FF1744; opacity: 0.7; }
.vessel-name {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: #ff6b35;
  text-shadow: 0 0 6px rgba(255,107,53,0.5);
  line-height: 1.1;
}
.vessel-role { color: var(--blue-dim); font-size: 0.55rem; margin-bottom: 2px; }
.vessel-pos { color: var(--blue-dim); font-size: 0.58rem; }
.vessel-status { font-family: 'VT323', monospace; font-size: 0.75rem; text-align: right; }
.vessel-status.deployed { color: #ff6b35; }
.vessel-status.standby { color: var(--blue-dim); }
.vessel-dist { font-size: 0.58rem; color: var(--blue-dim); text-align: right; }

/* Vessel hover tooltip */
.vessel-tooltip {
  background: rgba(0,4,15,0.95) !important;
  border: 1px solid #ff6b35 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 10px rgba(255,107,53,0.3) !important;
  padding: 3px 8px !important;
}
.vessel-tooltip::before { display: none !important; }

/* COMPASS */
#compass-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
}
.compass-header {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}
#compass-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
#compass-canvas {
  flex-shrink: 0;
  display: block;
}
#compass-readout {
  font-family: 'VT323', monospace;
  font-size: 0.75rem;
  color: var(--blue-dim);
  line-height: 1.8;
}
#compass-bearing { font-size: 1.3rem; color: var(--blue); text-shadow: 0 0 8px var(--blue); }
#compass-cardinal { font-size: 1rem; color: var(--amber); text-shadow: 0 0 6px var(--amber); }
#compass-label { font-size: 0.65rem; color: var(--blue-dim); }

/* ============================================================
   MOBILE DRAWER SYSTEM
   ============================================================ */

/* Mobile bottom handle -- always visible */
#mobile-handle {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(0,4,15,0.98);
  border-top: 2px solid var(--blue);
  box-shadow: 0 -6px 30px rgba(0,191,255,0.3), 0 -1px 0 rgba(0,191,255,0.15);
  flex-direction: column;
  touch-action: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#mobile-grip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 0 4px;
  cursor: pointer;
  min-height: 32px;
  gap: 4px;
}
#mobile-grip-bar {
  width: 48px; height: 4px;
  background: var(--blue-dim);
  border-radius: 2px;
  transition: all 0.2s;
}
#mobile-grip-chevron {
  font-size: 0.6rem;
  color: var(--blue-dim);
  line-height: 1;
  transition: all 0.25s;
  letter-spacing: 0;
  animation: gripPulse 2.5s ease-in-out infinite;
}
@keyframes gripPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; color: var(--blue); text-shadow: 0 0 6px var(--blue); }
}
#mobile-handle.open #mobile-grip-bar {
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}
#mobile-handle.open #mobile-grip-chevron {
  transform: rotate(180deg);
  color: var(--blue);
  animation: none;
  opacity: 0.7;
}

/* Landscape: compact grip, tighter status bar */
@media (orientation: landscape) and (max-width: 932px) {
  #mobile-grip { padding: 5px 0 2px !important; min-height: 22px !important; gap: 3px !important; }
}
body.mobile-landscape #mobile-grip { padding: 5px 0 2px; min-height: 22px; gap: 3px; }
body.mobile-landscape #mobile-status-bar { padding: 0 14px 6px; font-size: 0.6rem; }
body.mobile-landscape #mobile-next-launch { font-size: 0.85rem; }

#mobile-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px 10px;
  font-size: 0.62rem;
  color: var(--blue-dim);
  font-family: 'Share Tech Mono', monospace;
  gap: 8px;
}
#mobile-obs { color: var(--blue); font-size: 0.68rem; }
#mobile-next-launch {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  flex: 1;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#mobile-beta-cta {
  font-family: 'VT323', monospace;
  font-size: 0.75rem;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 2px 7px;
  text-decoration: none;
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: betaPulse 3s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
@keyframes betaPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(255,165,0,0.3); }
  50% { opacity: 0.7; box-shadow: 0 0 10px rgba(255,165,0,0.6); }
}

/* Drawer panel */
#mobile-drawer {
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-direction: column;
  /* max height cap */
  max-height: 82dvh;
}
#mobile-handle.open #mobile-drawer {
  display: flex;
}

/* Mobile tab bar inside drawer */
#mobile-tabs {
  display: flex;
  border-bottom: 1px solid var(--blue-dark);
  flex-shrink: 0;
  background: rgba(0,2,8,0.99);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#mobile-tabs::-webkit-scrollbar { display: none; }
.mobile-tab {
  flex: 1;
  min-width: 56px;
  padding: 10px 4px 8px;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 0.82rem;
  color: var(--blue-dim);
  letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mobile-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  text-shadow: 0 0 8px var(--blue);
  background: rgba(0,191,255,0.04);
}
.mobile-tab-icon { font-size: 1.1rem; display: block; line-height: 1.3; }

/* Mobile panel content area */
#mobile-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,3,10,0.99);
  overscroll-behavior: contain;
}
#mobile-content::-webkit-scrollbar { display: none; }

/* Mobile panel sections */
.mobile-section {
  display: none;
  padding: 10px 12px 20px;
}
.mobile-section.active { display: block; }

.mobile-section-title {
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  color: var(--blue-dim);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--blue-dark);
}

/* Mobile launch cards -- larger tap targets */
.mobile-launch-card {
  padding: 11px 12px;
  margin-bottom: 7px;
  border: 1px solid var(--blue-dark);
  background: rgba(0,8,20,0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  border-radius: 3px;
  border-left: 3px solid var(--blue-dark);
}
.mobile-launch-card:active { background: rgba(0,191,255,0.1); transform: scale(0.99); }
.mobile-launch-card.vis { border-left: 3px solid var(--blue); }
.mobile-launch-card.maybe { border-left: 3px solid var(--amber); }
.mobile-launch-name {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--blue);
  margin-bottom: 4px;
  line-height: 1.2;
}
.mobile-launch-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--blue-dim);
  margin-bottom: 3px;
  gap: 4px;
}
.mobile-launch-meta-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-launch-vis-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mobile-launch-vis-badge.vis { color: var(--blue); border: 1px solid rgba(0,191,255,0.3); }
.mobile-launch-vis-badge.maybe { color: var(--amber); border: 1px solid rgba(255,165,0,0.3); }
.mobile-launch-vis-badge.nope { color: var(--blue-dark); }
.mobile-launch-time {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: var(--amber);
}
.mobile-launch-time.urgent { color: #ff2020; animation: blink 1s step-end infinite; }

/* Mobile weather grid */
.mobile-wx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mobile-wx-cell {
  background: rgba(0,8,20,0.5);
  border: 1px solid var(--blue-dark);
  padding: 8px 10px;
  border-radius: 2px;
}
.mobile-wx-label { font-size: 0.55rem; color: var(--blue-dim); margin-bottom: 2px; letter-spacing: 0.08em; }
.mobile-wx-val { font-family: 'VT323', monospace; font-size: 1.1rem; color: var(--blue); }

/* Mobile vessel cards */
.mobile-vessel-card {
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--blue-dark);
  border-left: 3px solid #ff6b35;
  background: rgba(0,8,20,0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 2px;
}
.mobile-vessel-card:active { background: rgba(255,107,53,0.08); }
.mobile-vessel-name { font-family: 'VT323', monospace; font-size: 1.1rem; color: #ff6b35; margin-bottom: 2px; }
.mobile-vessel-role { font-size: 0.58rem; color: var(--blue-dim); margin-bottom: 4px; }
.mobile-vessel-meta { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--blue-dim); }
.mobile-vessel-links { display: flex; gap: 8px; margin-top: 6px; }
.mobile-ais-link {
  font-size: 0.62rem; padding: 3px 8px;
  border: 1px solid #ff6b35; color: #ff6b35;
  text-decoration: none; font-family: 'VT323', monospace;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile ISS card */
.mobile-iss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mobile-iss-cell {
  background: rgba(0,8,20,0.5);
  border: 1px solid var(--blue-dark);
  padding: 8px 10px;
}
.mobile-iss-label { font-size: 0.55rem; color: var(--blue-dim); }
.mobile-iss-val { font-family: 'VT323', monospace; font-size: 1rem; color: var(--blue); }

/* Mobile compass */
#mobile-compass-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
}

/* Tablet layout (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  #left-panel { width: 260px; }
  #right-panel { width: 220px; }
  .topbar-meta { gap: 12px; font-size: 0.62rem; }
  #statusbar { display: none; }
}

/* ── Mobile landscape: phone rotated horizontal ── */
/* CSS media query handles it when JS hasn't run yet */
@media (orientation: landscape) and (max-width: 932px) {
  #app    { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; }
  #main   { position: relative !important; height: calc(100dvh - 32px) !important; overflow: hidden !important; flex: none !important; }
  #left-panel  { display: none !important; }
  #right-panel { display: none !important; }
  .panel-collapse-tab { display: none !important; }
  #mobile-handle { display: flex !important; }
  #statusbar     { display: none !important; }
  #map-wrap { position: absolute; inset: 0; }
  #map { width: 100%; height: 100%; }
  #topbar { padding: 3px 8px !important; min-height: 0 !important; }
  .topbar-title { font-size: 0.85rem !important; }
  .topbar-title span { display: none !important; }
  .meta-item { display: none !important; }
  .topbar-meta { display: flex !important; gap: 6px !important; }
  .threat-level { font-size: 0.7rem !important; padding: 2px 5px !important; }
  #mute-btn     { font-size: 0.7rem !important; padding: 2px 6px !important; }
  #settings-btn { font-size: 0.7rem !important; padding: 2px 6px !important; }
  #pro-beta-btn { font-size: 0.7rem !important; padding: 2px 6px !important; }
  #hud-tape { display: flex !important; height: 32px !important; }
  #hud-tape-idle { font-size: 0.56rem !important; letter-spacing: 0.04em !important; }
  #hud-tape-bubble { font-size: 0.65rem !important; padding: 3px 10px !important; }
  .hud-bubble-val { font-size: 1.0rem !important; }
  #alert-banner { font-size: 0.65rem !important; padding: 3px 10px !important; }
  #feedback-btn { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); right: 12px; font-size: 0.75rem; padding: 5px 10px; }
}

/* JS-applied class -- covers wide Android phones that exceed 932px CSS width */
body.mobile-landscape {
  /* Same rules, JS is the authority when it fires */
}
body.mobile-landscape #app    { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; }
body.mobile-landscape #main   { position: relative !important; height: calc(100dvh - 32px) !important; overflow: hidden !important; flex: none !important; }
body.mobile-landscape #left-panel  { display: none !important; }
body.mobile-landscape #right-panel { display: none !important; }
body.mobile-landscape .panel-collapse-tab { display: none !important; }
body.mobile-landscape #mobile-handle { display: flex !important; }
body.mobile-landscape #statusbar { display: none !important; }
body.mobile-landscape #map-wrap { position: absolute; inset: 0; }
body.mobile-landscape #map { width: 100%; height: 100%; }
body.mobile-landscape #topbar { padding: 3px 8px !important; min-height: 0 !important; }
body.mobile-landscape .topbar-title { font-size: 0.85rem !important; }
body.mobile-landscape .topbar-title span { display: none !important; }
body.mobile-landscape .meta-item { display: none !important; }
body.mobile-landscape .topbar-meta { display: flex !important; gap: 6px !important; }
body.mobile-landscape .threat-level { font-size: 0.7rem !important; padding: 2px 5px !important; }
body.mobile-landscape #mute-btn     { font-size: 0.7rem !important; padding: 2px 6px !important; }
body.mobile-landscape #settings-btn { font-size: 0.7rem !important; padding: 2px 6px !important; }
body.mobile-landscape #pro-beta-btn { font-size: 0.7rem !important; padding: 2px 6px !important; }
body.mobile-landscape #hud-tape { display: flex !important; height: 32px !important; }
body.mobile-landscape #hud-tape-idle { font-size: 0.56rem !important; letter-spacing: 0.04em !important; }
body.mobile-landscape #hud-tape-bubble { font-size: 0.65rem !important; padding: 3px 10px !important; }
body.mobile-landscape .hud-bubble-val { font-size: 1.0rem !important; }
body.mobile-landscape #alert-banner { font-size: 0.65rem !important; padding: 3px 10px !important; }
body.mobile-landscape #feedback-btn { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); right: 12px; font-size: 0.75rem; padding: 5px 10px; }

/* iPad / large tablet landscape -- full desktop layout */
/* Only applies when JS has NOT flagged it as mobile-landscape */
@media (orientation: landscape) and (min-width: 933px) {
  body:not(.mobile-landscape) .topbar-meta { display: flex !important; }
  body:not(.mobile-landscape) .meta-item   { display: flex !important; }
  body:not(.mobile-landscape) #topbar { padding: 6px 16px !important; }
  body:not(.mobile-landscape) .topbar-title { font-size: 1.4rem !important; }
  body:not(.mobile-landscape) .topbar-title span { display: inline !important; }
  body:not(.mobile-landscape) #left-panel  { display: flex !important; }
  body:not(.mobile-landscape) #right-panel { display: flex !important; }
  body:not(.mobile-landscape) #mobile-handle { display: none !important; }
}

/* Mobile layout (<768px) portrait */
@media (max-width: 1024px) and (orientation: portrait) {
  /* Hide desktop elements */
  #left-panel, #right-panel, #statusbar { display: none !important; }
  /* Topbar -- hide data items, keep action buttons */
  .topbar-meta { display: flex !important; gap: 6px !important; }
  .meta-item   { display: none !important; }
  #topbar { padding: 5px 10px; gap: 8px; }
  .topbar-title { font-size: 1.0rem; letter-spacing: 0.05em; }
  .topbar-title span { display: none !important; }
  .threat-level { font-size: 0.7rem; padding: 2px 6px; }
  #mute-btn { font-size: 0.7rem; padding: 2px 7px; }
  #settings-btn { font-size: 0.7rem; padding: 2px 7px; }
  #pro-beta-btn { font-size: 0.7rem; padding: 2px 7px; }

  /* Map fills viewport */
  #app { height: 100dvh; }
  #main { position: relative; }
  #map-wrap { position: absolute; inset: 0; }
  #map { width: 100%; height: 100%; }

  /* Show mobile UI */
  #mobile-handle { display: flex; }

  /* Feedback button -- move above drawer on mobile */
  #feedback-btn {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  /* Hide desktop map legend on mobile, show compact version */
  #map-legend { display: none; }
  #alert-banner { bottom: auto; top: 60px; font-size: 0.7rem; padding: 4px 8px; }

  /* HUD tape -- taller version in portrait */
  #hud-tape {
    height: 44px !important;
  }
  #hud-tape-bubble { font-size: 0.72rem !important; padding: 4px 12px !important; }
  #hud-tape-idle   { font-size: 0.68rem !important; letter-spacing: 0.08em !important; }
  .hud-bubble-val  { font-size: 1.1rem !important; }
  .hud-bubble-label { font-size: 0.5rem !important; }

  /* Settings panel goes full-width on mobile */
  #settings-panel { width: 100% !important; }
}

/* Keep old <767px catch-all for anything not covered above */
@media (max-width: 767px) {
  #app { height: 100dvh; }
  #main { position: relative; }
  #map-wrap { position: absolute; inset: 0; }
  #map { width: 100%; height: 100%; }
  #map-legend { display: none; }
  #alert-banner { bottom: auto; top: 60px; font-size: 0.7rem; padding: 4px 8px; }
  #settings-panel { width: 100% !important; }
  /* Topbar -- hide data items, keep action buttons */
  .topbar-meta { display: flex !important; gap: 6px !important; }
  .meta-item   { display: none !important; }
  #topbar { padding: 5px 10px; gap: 8px; }
  .topbar-title { font-size: 1.0rem; letter-spacing: 0.05em; }
  .topbar-title span { display: none !important; }
  .threat-level { font-size: 0.7rem; padding: 2px 6px; }
  #mute-btn { font-size: 0.7rem; padding: 2px 7px; }
  #settings-btn { font-size: 0.7rem; padding: 2px 7px; }
  #pro-beta-btn { font-size: 0.7rem; padding: 2px 7px; }

  /* Map fills viewport */
  #app { height: 100dvh; }
  #main { position: relative; }
  #map-wrap { position: absolute; inset: 0; }
  #map { width: 100%; height: 100%; }

  /* Show mobile UI */
  #mobile-handle { display: flex; }

  /* Feedback button -- move above drawer on mobile */
  #feedback-btn {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  /* Hide desktop map legend on mobile, show compact version */
  #map-legend { display: none; }
  #alert-banner { bottom: auto; top: 60px; font-size: 0.7rem; padding: 4px 8px; }

  /* Hide HUD tape on mobile portrait -- restore as taller version */
  #hud-tape {
    height: 44px !important;
    font-size: 0.6rem !important;
  }
  #hud-tape-bubble { font-size: 0.72rem !important; padding: 4px 12px !important; }
  #hud-tape-idle   { font-size: 0.68rem !important; letter-spacing: 0.08em !important; }
  .hud-bubble-val  { font-size: 1.1rem !important; }
  .hud-bubble-label { font-size: 0.5rem !important; }

  /* Settings panel goes full-width on mobile */
  #settings-panel { width: 100% !important; }
}

/* ============================================================
   MOBILE DETAIL SHEET
   -- slides up from bottom when a launch card is tapped
   ============================================================ */
#mobile-detail-sheet {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1200;
  background: rgba(0,4,15,0.98);
  border-top: 1px solid var(--blue);
  box-shadow: 0 -4px 30px rgba(0,191,255,0.25);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 72dvh;
  overflow-y: auto;
}
#mobile-detail-sheet.open {
  display: block;
  transform: translateY(0);
}
#mobile-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--blue-dark);
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dim);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
#mobile-detail-close {
  font-size: 1.1rem;
  color: var(--blue-dim);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#mobile-detail-close:active { color: var(--blue); }
#mobile-detail-body {
  padding: 10px 14px 16px;
  font-family: 'Share Tech Mono', monospace;
}
.m-detail-name {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue-glow);
  margin-bottom: 10px;
  line-height: 1.2;
}
.m-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.m-detail-cell {}
.m-detail-label {
  font-size: 0.52rem;
  color: var(--blue-dark);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.m-detail-val {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: var(--blue);
}
.m-detail-vis-bar {
  height: 10px;
  background: var(--blue-dark);
  border: 1px solid rgba(0,191,255,0.2);
  margin: 8px 0 4px;
  position: relative;
}
.m-detail-vis-fill {
  height: 100%;
  transition: width 0.5s;
}
.m-detail-status {
  font-size: 0.65rem;
  margin-top: 4px;
  letter-spacing: 0.06em;
}
/* Fade-out timer bar */
.m-detail-timer {
  height: 2px;
  background: var(--blue-dim);
  transform-origin: left;
  animation: timerShrink 6s linear forwards;
}
@keyframes timerShrink {
  from { transform: scaleX(1); opacity: 1; }
  to   { transform: scaleX(0); opacity: 0.3; }
}

/* ============================================================
   MOBILE OBSERVER + RADIUS CONTROLS (inside drawer)
   ============================================================ */
#mobile-section-settings {
  padding-bottom: 8px;
}
.m-obs-current {
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  color: var(--blue);
  padding: 6px 14px 2px;
  letter-spacing: 0.05em;
}
.m-obs-coords {
  font-size: 0.55rem;
  color: var(--blue-dim);
  padding: 0 14px 8px;
  letter-spacing: 0.08em;
}
.m-radius-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--blue-dark);
}
.m-radius-row label {
  font-size: 0.58rem;
  color: var(--blue-dim);
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}
#mobile-radius-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--blue-dark);
  outline: none;
  border-radius: 0;
}
#mobile-radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: var(--blue);
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 0 6px var(--blue-glow);
}
.m-radius-val {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: var(--blue);
  min-width: 55px;
  text-align: right;
}
#mobile-loc-presets {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-region-label {
  font-size: 0.52rem;
  color: var(--blue-dark);
  letter-spacing: 0.12em;
  margin-top: 6px;
  margin-bottom: 3px;
}
.m-region-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.m-loc-btn {
  background: rgba(0,8,20,0.6);
  border: 1px solid var(--blue-dark);
  color: var(--blue-dim);
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.12s;
}
.m-loc-btn.active {
  background: rgba(0,191,255,0.12);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 6px var(--blue-glow);
}
.m-loc-btn:active {
  background: rgba(0,191,255,0.18);
}

/* ============================================================
   FEEDBACK BUTTON & MODAL
   ============================================================ */
#feedback-btn {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 900;
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  padding: 6px 14px;
  border: 1px solid var(--blue-dim);
  background: rgba(0,3,10,0.92);
  color: var(--blue-dim);
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
}
#feedback-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 10px var(--blue-glow);
}
#feedback-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
#feedback-modal-overlay.open { display: flex; }
#feedback-modal {
  background: rgba(0,4,16,0.99);
  border: 1px solid var(--blue);
  box-shadow: 0 0 40px var(--blue-glow), inset 0 0 20px rgba(0,191,255,0.03);
  padding: 28px 32px;
  width: 340px;
  max-width: 92vw;
  font-family: "VT323", monospace;
}
.fm-title {
  font-size: 1.3rem;
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue);
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}
.fm-sub {
  font-size: 0.65rem;
  color: var(--blue-dim);
  letter-spacing: 0.1em;
  margin-bottom: 22px;
  font-family: 'Share Tech Mono', monospace;
}
.fm-option {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--blue-dark);
  background: rgba(0,8,20,0.6);
  color: var(--blue-dim);
  font-family: "VT323", monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.fm-option:hover, .fm-option:active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(0,191,255,0.06);
  box-shadow: 0 0 8px var(--blue-glow);
}
.fm-option.amber { border-color: rgba(255,165,0,0.3); color: var(--amber); }
.fm-option.amber:hover { border-color: var(--amber); box-shadow: 0 0 8px rgba(255,165,0,0.3); background: rgba(255,165,0,0.06); }
.fm-icon { font-size: 1.3rem; flex-shrink: 0; }
.fm-label { line-height: 1.2; }
.fm-label-sub { font-size: 0.6rem; color: var(--blue-dark); font-family: 'Share Tech Mono', monospace; letter-spacing: 0.08em; display: block; margin-top: 1px; }
.fm-close {
  margin-top: 16px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--blue-dark);
  color: var(--blue-dim);
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.15s;
}
.fm-close:hover { border-color: var(--blue-dim); color: var(--blue); }

/* ============================================================
   THEME MAP OVERLAYS
   ============================================================ */
#theme-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 450;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Phase 1: slam in at full */
#theme-overlay.intro { opacity: 1; transition: opacity 0.3s ease; }
/* Phase 2: fade to atmospheric */
#theme-overlay.ambient { opacity: 1; transition: opacity 1.8s ease; }
/* The SVG/content inside fades separately */
#theme-overlay .overlay-content {
  position: absolute; inset: 0;
  transition: opacity 2.5s ease;
}
#theme-overlay.ambient .overlay-content { opacity: var(--ambient-opacity, 0.13); }

/* Shared overlay text style */
.theme-overlay-text {
  font-family: 'VT323', monospace;
  letter-spacing: 0.15em;
  user-select: none;
}

/* ── AKIRA OVERLAY ─────────────────────────────────────── */
#theme-overlay.akira-overlay {
  opacity: 1;
}
/* Corner data readouts */
.akira-corner-bl {
  position: absolute;
  bottom: 80px; left: 16px;
  color: rgba(255,45,0,0.18);
  font-family: 'VT323', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-shadow: 0 0 6px rgba(255,45,0,0.3);
  pointer-events: none;
}
.akira-corner-tr {
  position: absolute;
  top: 70px; right: 16px;
  color: rgba(255,45,0,0.15);
  font-family: 'VT323', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: right;
  text-shadow: 0 0 6px rgba(255,45,0,0.25);
  pointer-events: none;
}
/* Horizontal scan line accents */
.akira-scanbar {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255,45,0,0.25) 20%, rgba(255,45,0,0.4) 50%, rgba(255,45,0,0.25) 80%, transparent 100%);
  pointer-events: none;
}
/* Speed lines -- diagonal manga energy lines */
.akira-speedline {
  position: absolute;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,45,0,0.12), transparent);
  pointer-events: none;
  transform-origin: left center;
}
@keyframes settings-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0,191,255,0.3), inset 0 0 4px rgba(0,191,255,0.05); border-color: rgba(0,191,255,0.6); }
  50%       { box-shadow: 0 0 14px rgba(0,191,255,0.8), inset 0 0 8px rgba(0,191,255,0.15); border-color: rgba(0,191,255,1.0); }
}
#settings-btn {
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  padding: 2px 10px;
  border: 1px solid var(--blue);
  background: rgba(0,191,255,0.08);
  color: var(--blue);
  animation: settings-pulse 2.8s ease-in-out infinite;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: all 0.15s;
  text-shadow: 0 0 8px rgba(0,191,255,0.8);
  box-shadow: 0 0 8px rgba(0,191,255,0.3), inset 0 0 6px rgba(0,191,255,0.06);
}
#settings-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(0,191,255,0.15);
  box-shadow: 0 0 16px rgba(0,191,255,0.6), inset 0 0 10px rgba(0,191,255,0.1);
  text-shadow: 0 0 12px rgba(0,191,255,1);
}
#pro-beta-btn {
  font-family: "VT323", monospace;
  font-size: 1rem;
  padding: 2px 12px;
  border: 2px solid var(--amber);
  background: rgba(255,176,0,0.18);
  color: var(--amber);
  cursor: pointer;
  letter-spacing: 0.15em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  animation: proBetaPulse 1.8s ease-in-out infinite;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(255,176,0,0.9), inset 0 0 10px rgba(255,176,0,0.12);
  text-shadow: 0 0 8px rgba(255,176,0,1), 0 0 18px rgba(255,176,0,0.9), 0 0 32px rgba(255,176,0,0.6);
}
#pro-beta-btn:hover {
  background: rgba(255,176,0,0.26);
  box-shadow: 0 0 16px rgba(255,176,0,1), inset 0 0 14px rgba(255,176,0,0.18);
  text-shadow: 0 0 10px rgba(255,176,0,1), 0 0 22px rgba(255,176,0,1), 0 0 40px rgba(255,176,0,0.7);
}
#pro-beta-btn.unlocked {
  animation: none;
  border-color: var(--blue-dim);
  color: var(--blue-dim);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  opacity: 0.7;
}
@keyframes proBetaPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px rgba(255,176,0,0.9),  inset 0 0 10px rgba(255,176,0,0.12); }
  50%       { opacity: 0.9; box-shadow: 0 0 16px rgba(255,176,0,1),    inset 0 0 16px rgba(255,176,0,0.2); }
}
#settings-panel {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 300px;
  background: rgba(0,3,10,0.98);
  border-left: 1px solid var(--blue);
  box-shadow: -4px 0 30px var(--blue-glow);
  z-index: 2000;
  flex-direction: column;
  overflow-y: auto;
}
#settings-panel.open { display: flex; }
#settings-panel::-webkit-scrollbar { width: 3px; }
#settings-panel::-webkit-scrollbar-thumb { background: var(--blue-dark); }
.settings-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--blue-dim);
  font-family: "VT323", monospace;
  font-size: 1.1rem;
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue);
  letter-spacing: 0.15em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.intensity-btn {
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  padding: 4px 0;
  border: 1px solid rgba(0,191,255,0.35);
  background: rgba(0,191,255,0.04);
  color: rgba(0,191,255,0.55);
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: all 0.2s;
}
.intensity-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(0,191,255,0.12);
}
.intensity-btn.active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(0,191,255,0.15);
  box-shadow: 0 0 10px rgba(0,191,255,0.45);
}
.settings-close {
  cursor: pointer;
  color: var(--blue-dim);
  font-size: 1.2rem;
  padding: 0 4px;
  transition: color 0.15s;
}
.settings-close:hover { color: var(--red); }
.settings-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--blue-dark);
}
.settings-section-title {
  font-family: "VT323", monospace;
  font-size: 0.8rem;
  color: var(--blue-dim);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}
.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.theme-card {
  padding: 10px 10px;
  border: 1px solid var(--blue-dark);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.theme-card:hover { border-color: var(--blue-dim); }
.theme-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 10px var(--blue-glow);
}
.theme-card.active::after {
  content: "✓";
  position: absolute;
  top: 4px; right: 6px;
  font-size: 0.7rem;
  color: var(--blue);
}
.theme-swatch {
  width: 100%;
  height: 28px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.theme-swatch-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px
  );
}
.theme-name {
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.theme-desc {
  font-size: 0.55rem;
  color: var(--blue-dim);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.pack-list { display: flex; flex-direction: column; gap: 6px; }
.pack-card {
  padding: 10px 12px;
  border: 1px solid var(--blue-dark);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pack-card:hover { border-color: var(--blue-dim); }
.pack-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 10px var(--blue-glow);
}
.pack-card-left { display: flex; flex-direction: column; }
.pack-card-name {
  font-family: "VT323", monospace;
  font-size: 1rem;
  color: var(--blue);
  letter-spacing: 0.08em;
}
.pack-card-desc { font-size: 0.58rem; color: var(--blue-dim); margin-top: 2px; }
.pack-active-badge {
  font-family: "VT323", monospace;
  font-size: 0.7rem;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 1px 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.pack-card.active .pack-active-badge { opacity: 1; }
.pro-theme-card { cursor: pointer; }
.pro-locked {
  cursor: not-allowed;
  opacity: 0.6;
  position: relative;
}
.pro-locked::after {
  content: '🔒';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 0.75rem;
  opacity: 0.4;
}
.settings-footer {
  padding: 14px 16px;
  font-size: 0.6rem;
  color: var(--blue-dark);
  letter-spacing: 0.08em;
  line-height: 1.8;
  flex-shrink: 0;
  margin-top: auto;
}
/* Red Alert theme overrides */
[data-theme="red"] body::before { animation: scanlines 4s linear infinite; }
[data-theme="red"] .threat-level {
  color: var(--red) !important;
  border-color: var(--red) !important;
  animation: red-pulse 0.8s infinite !important;
}
@keyframes red-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,23,68,0.4); }
  50% { box-shadow: 0 0 20px rgba(255,23,68,0.9); }
}

/* ============================================================
   HUD COMPASS TAPE
   ============================================================ */
#hud-tape {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  z-index: 600;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(0,4,15,0.82) 0%, rgba(0,4,15,0.0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#hud-tape-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#hud-tape-bubble {
  position: relative;
  z-index: 2;
  pointer-events: none;
  background: rgba(0,4,15,0.75);
  border: 1px solid var(--blue);
  box-shadow: 0 0 16px var(--blue-glow), inset 0 0 12px rgba(0,191,255,0.08);
  padding: 3px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  justify-content: center;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%);
}
.hud-bubble-val {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  color: var(--blue);
  text-shadow: 0 0 12px var(--blue), 0 0 24px var(--blue-glow);
  letter-spacing: 0.1em;
  line-height: 1;
}
.hud-bubble-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.52rem;
  color: var(--blue-dim);
  letter-spacing: 0.15em;
  text-align: center;
  margin-top: 1px;
}
.hud-bubble-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hud-bubble-sep {
  width: 1px;
  height: 24px;
  background: var(--blue-dark);
}
#hud-tape-idle {
  position: relative;
  z-index: 2;
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--blue-dark);
  letter-spacing: 0.2em;
  pointer-events: none;
}

/* ============================================================
   PRO BETA SIGNUP MODAL
   ============================================================ */
#beta-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#beta-modal-overlay.open { display: flex; }
#beta-modal {
  background: rgba(0,4,16,0.99);
  border: 1px solid var(--blue);
  box-shadow: 0 0 40px rgba(0,191,255,0.25);
  width: 90%;
  max-width: 440px;
  font-family: 'Share Tech Mono', monospace;
  position: relative;
}
.beta-modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--blue-dark);
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue-glow);
  letter-spacing: 0.15em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.beta-modal-close {
  cursor: pointer;
  color: var(--blue-dim);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.beta-modal-close:hover { color: var(--blue); }
.beta-modal-body {
  padding: 20px 18px;
}
.beta-modal-pitch {
  font-size: 0.75rem;
  color: var(--blue-dim);
  line-height: 1.6;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.beta-modal-pitch strong { color: var(--blue); }
.beta-modal-features {
  font-size: 0.68rem;
  color: var(--blue-dim);
  line-height: 1.8;
  margin-bottom: 20px;
  padding-left: 4px;
}
.beta-modal-features span { color: var(--amber); }
#beta-email-input {
  width: 100%;
  background: rgba(0,8,20,0.8);
  border: 1px solid var(--blue-dim);
  color: var(--blue);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  padding: 10px 12px;
  outline: none;
  letter-spacing: 0.05em;
  box-sizing: border-box;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  border-radius: 0;
}
#beta-email-input:focus { border-color: var(--blue); box-shadow: 0 0 8px var(--blue-glow); }
#beta-email-input::placeholder { color: var(--blue-dark); }
#beta-submit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: rgba(0,191,255,0.08);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#beta-submit-btn:hover { background: rgba(0,191,255,0.15); box-shadow: 0 0 12px var(--blue-glow); }
#beta-submit-btn:disabled { opacity: 0.5; cursor: default; }
#beta-status {
  font-size: 0.7rem;
  margin-top: 10px;
  min-height: 18px;
  letter-spacing: 0.06em;
  text-align: center;
}
.beta-status-ok  { color: #00BFFF; }
.beta-status-err { color: #FF1744; }
.beta-modal-note {
  font-size: 0.58rem;
  color: var(--blue-dark);
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
/* Pro locked card styling */
.pro-theme-card.pro-locked,
.pro-sound-card.pro-locked {
  opacity: 0.45;
  filter: grayscale(60%);
  position: relative;
}

/* Booster landing zone ring pulse */
@keyframes boosterPulse {
  0%   { opacity: 0.22; stroke-width: 1; }
  50%  { opacity: 0.55; stroke-width: 2; }
  100% { opacity: 0.22; stroke-width: 1; }
}
/* === Patch CC-Behind (v2.37, 2026-04-25) -- historical AIS trail ===
   Fading dashed amber polyline showing where each underway vessel has been.
   Combined with U-Live (forward projection) and Y (zone connection), the
   map now tells the full lifecycle: port -> outbound -> on-station ->
   return-to-port. Dimmer than the projection trail so past vs future
   reads at a glance. */
.vessel-historical-trail path {
  filter: drop-shadow(0 0 2px rgba(255, 176, 0, 0.35));
  transition: opacity 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .vessel-historical-trail path { filter: none; }
}

/* === Patch BB (v2.35, 2026-04-25) -- moving particle along trajectory arc ===
   A small glowing dot animated along the trajectory polyline from pad to
   zone center, looping every ~7s. Color matches the trajectory's T-minus
   tone (set via --arc-particle-glow). Adds constant visible motion during
   transit phases -- the eye catches it before the rest of the static map. */
.launch-arc-particle path {
  filter: drop-shadow(0 0 4px var(--arc-particle-glow, rgba(255, 176, 0, 0.7)));
  transition: filter 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .launch-arc-particle path { filter: none; }
}

/* === Patch Y (v2.32, 2026-04-25) -- vessel-to-zone connection line ===
   Soft static dashed amber polyline from each UNDERWAY vessel to the
   currently selected launch's predicted zone center. Tells the "vessel
   serves this mission" story without aggressive motion.
   v2.40 Patch Y-soften (2026-04-25): killed the opacity pulse animation
   per Kenny -- the SL-10-44 reference render had soft static trails, not
   a flashing line. Aesthetic match restored. */
.vessel-zone-link path {
  filter: drop-shadow(0 0 1.5px rgba(255, 176, 0, 0.25));
}

.booster-ring path {
  animation: boosterPulse 2s ease-in-out infinite;
}
.booster-ring-pulse path {
  animation: boosterPulse 2.5s ease-in-out infinite;
}
.booster-pulse-0 path { animation-delay: 0.4s; }
.booster-pulse-1 path { animation-delay: 0.9s; }

/* Launch arc primary line */
.launch-arc-primary path {
  stroke-width: 2px;
}

/* Orbit-model recovery zone -- breathing pulse */
.orbit-zone-circle {
  stroke-width: 1.5px;
  animation: orbitZonePulse 3s ease-in-out infinite;
}
@keyframes orbitZonePulse {
  0%,100% { opacity: 0.55; }
  50%      { opacity: 1.0;  }
}

/* AIS locked zone -- orange pulse when vessel on station */
.orbit-zone-locked {
  animation: aisLockPulse 2s ease-in-out infinite;
}
.orbit-zone-approach {
  animation: aisApproachPulse 3s ease-in-out infinite;
}
.orbit-zone-locked-pulse {
  animation: aisHaloPulse 2s ease-in-out infinite;
}
.orbit-zone-center-locked {
  animation: aisCenterPulse 1.5s ease-in-out infinite;
}
/* ── NOTMAR -- Phosphor Treatment (v2.62) ──────────────────────────
   Animation driven by JS rAF loop -- see _notmarAnimTick().
   Canvas renderer (map preferCanvas:true) -- CSS animations have no
   effect on Canvas layers. Phase offsets encoded in _notmarPhase().
   ───────────────────────────────────────────────────────────── */
.notmar-zone-a,
.notmar-zone-pad,
.notmar-zone-c,
.notmar-polygon path,
.notmar-zone-circle {
  /* animation driven by JS rAF loop -- see _notmarAnimTick() (v2.62) */
}

/* Focused state animation driven by JS rAF -- _NOTMAR_ANIM_PARAMS.focused (v2.62) */

/* Phase offsets encoded in JS _notmarPhase() -- CSS delay rules removed v2.62 */

/* .notmar-zooming suppressor removed v2.62 -- Canvas layers have no SVG snap */

/* .notmar-dim removed v2.62 -- NOTMAR/NAVAREA dimming not needed */

/* Ambient animation driven by JS rAF -- _NOTMAR_ANIM_PARAMS.ambient (v2.62) */

/* ── TRAJECTORY FAN -- Phosphor v0.3 (Stage 4) ────────────────────── */
.launch-arc-primary {
  animation:
    trajStrokePulse 4s ease-in-out infinite,
    trajDashMarch 3s linear infinite;
}
.launch-arc-fan {
  animation: trajStrokePulse 4s ease-in-out infinite;
}
@keyframes trajStrokePulse {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1.00; }
}
@keyframes trajDashMarch {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -26; }
}

/* ── DEAD RECKONING -- Ghost vessel animations ── */
.dr-sonar-ring {
  animation: drSonarPing 3s ease-out infinite;
}
.dr-sonar-ring-inner {
  animation: drSonarPingInner 3s ease-out infinite 0.5s;
}
.dr-ghost-vessel {
  animation: drGhostPulse 2s ease-in-out infinite;
}
.dr-ghost-lkp {
  animation: drLKPFade 4s ease-in-out infinite;
}
@keyframes drSonarPing {
  0%   { opacity: 0.8; }
  60%  { opacity: 0.3; }
  100% { opacity: 0.05; }
}
@keyframes drSonarPingInner {
  0%   { opacity: 0.5; }
  60%  { opacity: 0.15; }
  100% { opacity: 0.03; }
}
@keyframes drGhostPulse {
  0%,100% { opacity: 0.85; filter: drop-shadow(0 0 6px rgba(255,140,0,0.8)); }
  50%     { opacity: 0.3;  filter: drop-shadow(0 0 2px rgba(255,140,0,0.2)); }
}
@keyframes drLKPFade {
  0%,100% { opacity: 0.65; }
  50%     { opacity: 0.15; }
}


/* ── TELEGRAM SIGNUP MODAL ── */
#tg-modal-overlay {
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,4,15,0.92);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
#tg-modal-overlay.open { display:flex; }
#tg-modal {
  background:#020C1A;border:1px solid var(--blue-dim);
  max-width:380px;width:90%;padding:0;
  font-family:'Share Tech Mono',monospace;
  box-shadow:0 0 40px rgba(0,191,255,0.15);
}
.tg-modal-header {
  background:#00040F;border-bottom:1px solid var(--blue-dim);
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;
}
.tg-modal-title {
  font-size:0.65rem;color:var(--blue);letter-spacing:0.15em;
}
.tg-modal-close {
  color:var(--blue-dim);cursor:pointer;font-size:1rem;line-height:1;
  padding:2px 6px;
}
.tg-modal-close:hover { color:var(--blue); }
.tg-modal-body { padding:16px; }
.tg-section {
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid rgba(0,191,255,0.1);
}
.tg-section:last-child { border-bottom:none;margin-bottom:0; }
.tg-section-label {
  font-size:0.55rem;color:var(--blue-dim);letter-spacing:0.12em;
  margin-bottom:8px;
}
.tg-toggle-row {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.tg-toggle-label {
  font-size:0.58rem;color:var(--blue);letter-spacing:0.05em;
}
.tg-toggle-sub {
  font-size:0.5rem;color:var(--blue-dim);margin-top:1px;
}
.tg-toggle {
  width:32px;height:16px;background:var(--blue-dark);
  border:1px solid var(--blue-dim);border-radius:8px;
  position:relative;cursor:pointer;flex-shrink:0;transition:background 0.2s;
}
.tg-toggle.on { background:var(--blue);border-color:var(--blue); }
.tg-toggle::after {
  content:'';position:absolute;top:2px;left:2px;
  width:10px;height:10px;border-radius:50%;
  background:#fff;transition:transform 0.2s;
}
.tg-toggle.on::after { transform:translateX(16px); }
.tg-pro-badge {
  font-size:0.48rem;color:var(--amber);letter-spacing:0.08em;
  border:1px solid var(--amber);padding:1px 4px;margin-left:6px;
}
.tg-cta-btn {
  width:100%;padding:10px;text-align:center;
  background:var(--blue);color:#00040F;
  font-size:0.65rem;letter-spacing:0.12em;
  cursor:pointer;border:none;font-family:inherit;
  font-weight:700;
}
.tg-cta-btn:hover { filter:brightness(1.1); }
.tg-step { display:none; }
.tg-step.active { display:block; }
.tg-pro-gate {
  background:rgba(255,176,0,0.05);border:1px solid rgba(255,176,0,0.2);
  padding:8px;margin-top:8px;font-size:0.52rem;color:var(--blue-dim);
  line-height:1.5;
}

@keyframes aisLockPulse {
  0%,100% { opacity: 0.9; filter: drop-shadow(0 0 8px rgba(255,176,0,0.8)); }
  50%      { opacity: 0.6; filter: drop-shadow(0 0 16px rgba(255,176,0,0.4)); }
}
@keyframes aisApproachPulse {
  0%,100% { opacity: 0.65; filter: drop-shadow(0 0 6px rgba(255,176,0,0.5)); }
  50%      { opacity: 0.35; filter: drop-shadow(0 0 10px rgba(255,176,0,0.2)); }
}
@keyframes aisHaloPulse {
  0%,100% { opacity: 0.22; }
  50%      { opacity: 0.06; }
}
@keyframes aisCenterPulse {
  0%,100% { opacity: 1.0; filter: drop-shadow(0 0 10px rgba(255,176,0,1.0)); }
  50%      { opacity: 0.5; filter: drop-shadow(0 0 4px rgba(255,176,0,0.5)); }
}
.orbit-zone-center {
  animation: orbitCenterPulse 3s ease-in-out infinite;
}
@keyframes orbitCenterPulse {
  0%,100% { opacity: 0.5; r: 5px; filter: drop-shadow(0 0 3px rgba(74,111,165,0.6)); }
  50%      { opacity: 1.0; r: 7px; filter: drop-shadow(0 0 10px rgba(74,159,212,1.0)); }
}

/* ── STARLINK TRAIN BADGE ── */
.train-badge-pro {
  margin-top: 5px;
  font-size: 0.48rem;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 3px 6px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 2px;
  background: rgba(255, 215, 0, 0.08);
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.train-badge-pro:hover {
  background: rgba(255, 215, 0, 0.18);
}
.train-badge-free {
  margin-top: 5px;
  font-size: 0.46rem;
  color: var(--blue-dim);
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 2px 4px;
}

/* ── REPLAY BUTTON ── */
.replay-btn {
  margin-top: 5px;
  font-size: 0.48rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 3px 6px;
  border: 1px solid rgba(0,191,255,0.3);
  border-radius: 2px;
  background: rgba(0,191,255,0.06);
  transition: background 0.15s;
  display: inline-block;
}
.replay-btn:hover { background: rgba(0,191,255,0.15); }

/* ── STARLINK TRACKER ── */
#starlink-box {
  border-top: 1px solid rgba(0,191,255,0.12);
  padding: 8px 10px 10px;
}
.starlink-header {
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.starlink-stats {
  font-size: 0.50rem;
  color: var(--blue-dim);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.starlink-toggle-btn {
  font-size: 0.50rem;
  color: var(--blue);
  cursor: pointer;
  border: 1px solid rgba(0,191,255,0.3);
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-bottom: 6px;
  transition: background 0.15s;
}
.starlink-toggle-btn:hover { background: rgba(0,191,255,0.08); }
.starlink-toggle-btn.active {
  background: rgba(0,191,255,0.15);
  color: #fff;
  border-color: var(--blue);
}
.starlink-pass-list {
  font-size: 0.46rem;
  color: var(--blue-dim);
  max-height: 80px;
  overflow-y: auto;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.starlink-pass-row { color: var(--blue-dim); }
.starlink-pass-row.visible { color: var(--green); }
.starlink-loading {
  font-size: 0.46rem;
  color: var(--blue-dim);
  letter-spacing: 0.06em;
  font-style: italic;
}

/* === UPDATE BANNER ==================================================
   Shown when the client detects a newer lw-build OR LW_BUILD.version
   on the server than what the page booted with. Phosphor aesthetic,
   cyan stroke, slow glow pulse. Dismissible per-version.
   See the update-banner script block at the bottom of body.
*/
#lw-update-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 25, 20, 0.94);
  border: 1px solid #00FFCC;
  color: #00FFCC;
  padding: 10px 16px;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 0.1em;
  cursor: pointer;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 0 12px rgba(0, 255, 204, 0.5);
  animation: lw-update-pulse 2.4s ease-in-out infinite;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#lw-update-banner .lw-update-text {
  flex: 1 1 auto;
  text-shadow: 0 0 6px rgba(0, 255, 204, 0.7);
}
#lw-update-banner .lw-update-dismiss {
  background: none;
  border: none;
  color: #00FFCC;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.55;
  transition: opacity 120ms ease;
}
#lw-update-banner .lw-update-dismiss:hover { opacity: 1; }
@keyframes lw-update-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 204, 0.4); }
  50%      { box-shadow: 0 0 22px rgba(0, 255, 204, 0.85); }
}
@media (max-width: 520px) {
  #lw-update-banner { font-size: 13px; padding: 9px 12px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #lw-update-banner { animation: none; }
}
</style>
</head>
<body>
<!-- PRO-BETA WALL -- LaunchWatch v2.57                           -->
<!-- ============================================================ -->
<div id="lw-wall-overlay" role="dialog" aria-modal="true" aria-labelledby="lw-wall-title" style="display:none;">
  <div id="lw-wall-modal">
    <div id="lw-wall-header">
      <div class="lw-wall-label" id="lw-wall-header-label">[ G.L.S.S. CLEARANCE ]</div>
    </div>
    <div id="lw-wall-body">
      <div id="lw-wall-success" style="display:none;">
        <div class="lw-wall-success-icon">&#10003;</div>
        <div class="lw-wall-success-title">ACCESS GRANTED</div>
        <div class="lw-wall-success-sub" id="lw-wall-success-msg">RECEIVING TRANSMISSION...<br>Check your inbox for confirmation.</div>
        <button class="lw-wall-dismiss-btn" onclick="_walledContinue()">&#9655; ENGAGE AUDIO SYSTEM</button>
      </div>
      <div id="lw-wall-form-wrap">
        <div class="lw-wall-title" id="lw-wall-title">REQUEST PRO-BETA ACCESS</div>
        <div class="lw-wall-subtitle">Public release May 1, 2026 &mdash; no payment required.<br>Sign up for early access + launch alerts.</div>
        <form id="lw-wall-form" onsubmit="_walledSubmit(event)" novalidate>
          <div class="lw-wall-input-wrap">
            <label class="lw-wall-input-label" for="lw-wall-email">EMAIL ADDRESS</label>
            <input type="email" id="lw-wall-email" name="email" placeholder="commsarea[at]station.gov" autocomplete="email" aria-required="true" aria-describedby="lw-wall-error">
          </div>
          <div class="lw-wall-tg-row" id="lw-wall-tg-row">
            <div class="lw-wall-tg-toggle on" id="lw-wall-tg-toggle" role="checkbox" aria-checked="true" tabindex="0"
              onclick="_walledToggleTg()" onkeydown="if(event.key===' '||event.key==='Enter'){_walledToggleTg();event.preventDefault();}"></div>
            <div class="lw-wall-tg-text">
              <div class="lw-wall-tg-label">TELEGRAM LAUNCH ALERTS</div>
              <div class="lw-wall-tg-sub">T-24h &middot; T-6h &middot; T-1h countdown alerts</div>
            </div>
          </div>
          <div id="lw-wall-error" role="alert" style="display:none;"></div>
          <button type="submit" id="lw-wall-submit">&#9655; REQUEST ACCESS</button>
        </form>
        <div class="lw-wall-footer">
          <p>Public release May 1, 2026. No payment required. Beta access by invitation.</p>
          <p>We respect your inbox. Two emails maximum until launch.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /PRO-BETA WALL -->


<div class="cursor" id="cursor"></div>
<div class="crt-vignette"></div>

<!-- AUDIO UNLOCK -->
<div id="audio-unlock" style="display:none;">
  <div class="au-title">[ AUDIO SYSTEM READY ]</div>
  <div class="au-sub">CLICK TO ENABLE SYNTHESIZED AUDIO ENGINE</div>
  <button id="audio-start-btn" onclick="unlockAudio()">▶ ENGAGE AUDIO</button>
  <div class="au-note">BROWSERS REQUIRE USER INTERACTION TO ENABLE AUDIO</div>
</div>
<style>
#audio-unlock {
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: rgba(0,2,12,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#audio-unlock.hidden { display: none !important; }
.au-title {
  font-family: 'VT323', monospace;
  font-size: 2rem;
  color: #00BFFF;
  text-shadow: 0 0 20px #00BFFF;
  letter-spacing: 0.2em;
}
.au-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: #0080CC;
  letter-spacing: 0.1em;
}
#audio-start-btn {
  background: transparent;
  border: 2px solid #00BFFF;
  color: #00BFFF;
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  padding: 10px 36px;
  cursor: pointer;
  letter-spacing: 0.2em;
  box-shadow: 0 0 20px rgba(0,191,255,0.4);
  animation: border-pulse 1.5s infinite;
}
.au-note {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: #001830;
}
/* Mobile portrait -- compact top banner */
@media (max-width: 767px) and (orientation: portrait) {
  #audio-unlock {
    inset: auto;
    top: 40px;
    left: 12px;
    right: 12px;
    background: rgba(0,2,12,0.97);
    border: 1px solid #00BFFF;
    border-radius: 2px;
    padding: 14px 16px;
    gap: 8px;
    box-shadow: 0 0 24px rgba(0,191,255,0.3);
  }
  .au-title { font-size: 1.2rem; }
  .au-sub   { font-size: 0.62rem; }
  #audio-start-btn { font-size: 1.05rem; padding: 6px 20px; }
  .au-note  { display: none; }
}
/* Mobile landscape -- same compact banner */
@media (max-height: 600px) and (orientation: landscape) {
  #audio-unlock {
    inset: auto;
    top: 32px;
    left: 210px;
    right: 190px;
    background: rgba(0,2,12,0.97);
    border: 1px solid #00BFFF;
    border-radius: 2px;
    padding: 10px 16px;
    gap: 6px;
    box-shadow: 0 0 24px rgba(0,191,255,0.3);
  }
  .au-title { font-size: 1rem; }
  .au-sub   { display: none; }
  #audio-start-btn { font-size: 0.95rem; padding: 5px 16px; }
  .au-note  { display: none; }
}
/* PRO-BETA WALL CSS -- LaunchWatch v2.57                        */
/* ============================================================ */
#lw-wall-overlay {
  position:fixed;inset:0;z-index:9500;
  background:rgba(0,4,15,0.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
#lw-wall-modal {
  background:rgba(0,8,16,0.92);
  border:2px solid var(--amber);
  box-shadow:0 0 24px rgba(255,176,0,0.4),0 0 48px rgba(255,176,0,0.15);
  border-radius:4px;width:100%;max-width:420px;margin:0 16px;
  font-family:'Share Tech Mono',monospace;overflow:hidden;
  animation:lw-wall-enter 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes lw-wall-enter {
  from{opacity:0;transform:scale(0.95) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
#lw-wall-header {
  background:rgba(0,4,15,0.85);border-bottom:1px solid rgba(255,176,0,0.3);
  padding:10px 16px;
}
.lw-wall-label {
  font-size:0.6rem;color:var(--amber);letter-spacing:0.12em;
  animation:lw-bracket-pulse 4s ease-in-out infinite;
}
@keyframes lw-bracket-pulse{0%,100%{opacity:1;}50%{opacity:0.65;}}
#lw-wall-body { padding:20px 20px 18px; }
.lw-wall-title {
  font-family:'VT323',monospace;font-size:1.3rem;
  color:var(--blue);letter-spacing:0.12em;font-weight:600;margin-bottom:6px;
}
.lw-wall-subtitle {
  font-size:0.54rem;color:var(--blue-dim);letter-spacing:0.06em;
  margin-bottom:18px;line-height:1.5;
}
.lw-wall-input-wrap { display:flex;flex-direction:column;gap:4px;margin-bottom:14px; }
.lw-wall-input-label { font-size:0.52rem;color:var(--blue-dim);letter-spacing:0.1em; }
#lw-wall-email {
  width:100%;padding:9px 12px;background:transparent;
  border:1px solid var(--blue-dim);color:var(--blue);
  font-family:'Share Tech Mono',monospace;font-size:0.7rem;
  letter-spacing:0.05em;border-radius:2px;outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box;
}
#lw-wall-email::placeholder{color:rgba(0,128,204,0.45);}
#lw-wall-email:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,191,255,0.15);}
#lw-wall-email.lw-wall-invalid{border-color:#FF1744;box-shadow:0 0 0 2px rgba(255,23,68,0.15);}
.lw-wall-tg-row {
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(0,191,255,0.04);border:1px solid rgba(0,191,255,0.1);
  border-radius:2px;padding:10px 12px;margin-bottom:14px;
}
.lw-wall-tg-toggle {
  flex-shrink:0;margin-top:2px;width:32px;height:16px;
  background:var(--blue-dark);border:1px solid var(--blue-dim);
  border-radius:8px;position:relative;cursor:pointer;transition:background 0.2s,border-color 0.2s;
}
.lw-wall-tg-toggle.on{background:var(--blue);border-color:var(--blue);}
.lw-wall-tg-toggle::after{
  content:'';position:absolute;top:2px;left:2px;
  width:10px;height:10px;border-radius:50%;background:#fff;transition:transform 0.2s;
}
.lw-wall-tg-toggle.on::after{transform:translateX(16px);}
.lw-wall-tg-text{flex:1;}
.lw-wall-tg-label{font-size:0.58rem;color:var(--blue);letter-spacing:0.06em;margin-bottom:2px;}
.lw-wall-tg-sub{font-size:0.5rem;color:var(--blue-dim);line-height:1.4;}
#lw-wall-error{font-size:0.54rem;color:#FF1744;letter-spacing:0.06em;margin-bottom:10px;}
#lw-wall-submit {
  width:100%;padding:11px;background:rgba(255,176,0,0.12);
  border:2px solid var(--amber);color:var(--amber);
  font-family:'Share Tech Mono',monospace;font-size:0.72rem;
  letter-spacing:0.14em;cursor:pointer;border-radius:2px;font-weight:700;
  transition:background 0.2s,box-shadow 0.2s;
}
#lw-wall-submit:hover:not(:disabled){background:rgba(255,176,0,0.22);box-shadow:0 0 16px rgba(255,176,0,0.3);}
#lw-wall-submit:disabled{opacity:0.5;cursor:not-allowed;}
#lw-wall-submit.lw-wall-loading{color:var(--blue-dim);border-color:var(--blue-dim);background:transparent;}
.lw-wall-spinner{
  display:inline-block;width:10px;height:10px;
  border:2px solid var(--blue-dim);border-top-color:var(--blue);
  border-radius:50%;animation:lw-wall-spin 0.6s linear infinite;
  vertical-align:middle;margin-right:6px;
}
@keyframes lw-wall-spin{to{transform:rotate(360deg);}}
.lw-wall-footer{margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,191,255,0.08);}
.lw-wall-footer p{font-size:0.5rem;color:rgba(0,128,204,0.55);letter-spacing:0.05em;line-height:1.4;margin:0 0 3px;}
#lw-wall-success{flex-direction:column;align-items:center;gap:12px;padding:8px 0 4px;text-align:center;}
.lw-wall-success-icon{font-size:2.4rem;color:#00FF88;text-shadow:0 0 20px rgba(0,255,136,0.6);}
.lw-wall-success-title{font-family:'VT323',monospace;font-size:1.4rem;color:#00FF88;letter-spacing:0.14em;}
.lw-wall-success-sub{font-size:0.58rem;color:var(--blue-dim);letter-spacing:0.08em;line-height:1.6;}
.lw-wall-dismiss-btn{
  margin-top:6px;padding:8px 20px;background:transparent;
  border:1px solid #00FF88;color:#00FF88;font-family:'Share Tech Mono',monospace;
  font-size:0.62rem;letter-spacing:0.12em;cursor:pointer;border-radius:2px;transition:background 0.15s;
}
.lw-wall-dismiss-btn:hover{background:rgba(0,255,136,0.1);}
@keyframes lw-wall-fadeout{from{opacity:1;}to{opacity:0;pointer-events:none;}}
#lw-wall-overlay.lw-wall-fading{animation:lw-wall-fadeout 0.6s ease forwards;}
@media(max-width:480px){
  #lw-wall-modal{margin:0;max-width:100%;border-left:none;border-right:none;border-radius:0;align-self:flex-end;}
  #lw-wall-overlay{align-items:flex-end;}
}
/* /PRO-BETA WALL CSS */

</style>

<!-- BOOT SEQUENCE -->
<div id="boot">
  <pre id="boot-text" style="font-family:'VT323',monospace;font-size:1rem;color:#00BFFF;text-shadow:0 0 8px #00BFFF;"></pre>
</div>

<!-- MAIN APP -->
<div id="app">
  <div id="topbar">
    <div class="topbar-title">G.L.S.S. &nbsp;<span>GLOBAL LAUNCH SURVEILLANCE SYSTEM</span></div>
    <div class="topbar-meta">
      <div class="meta-item"><span class="meta-label">SYS:</span><span class="meta-val">ONLINE</span></div>
      <div class="meta-item"><span class="meta-label">UTC:</span><span class="meta-val" id="clock">--:--:--</span></div>
      <div class="meta-item"><span class="meta-label">OBSERVER:</span><span class="meta-val" id="hdr-observer">KENNEDY SPACE CENTER</span></div>
      <div class="meta-item"><span class="meta-label">LAUNCHES TRACKED:</span><span class="meta-val" id="hdr-count">--</span></div>
      <div class="threat-level" id="threat-display">THREAT: NOMINAL</div>
      <button id="mute-btn" onclick="toggleMute()">🔊 AUDIO: ON</button>
      <button id="settings-btn" onclick="toggleSettings()">⚙ SETTINGS</button>
      <a id="pro-beta-btn" href="https://launchwatch.beehiiv.com/subscribe" target="_blank">⚡ PRO BETA</a>
    </div>
  </div>

  <!-- SETTINGS PANEL -->
  <div id="settings-panel">
    <div class="settings-header">
      <span>[ SYSTEM SETTINGS ]</span>
      <span class="settings-close" onclick="toggleSettings()">✕</span>
    </div>

    <!-- INTENSITY CONTROL -- first item -->
    <div class="settings-section" style="border-bottom:1px solid rgba(0,191,255,0.15);padding-bottom:10px;margin-bottom:6px;">
      <div class="settings-section-title" style="margin-bottom:8px;">-- DISPLAY INTENSITY --</div>
      <div style="display:flex;gap:6px;align-items:center;">
        <button class="intensity-btn" id="intensity-low"  onclick="setIntensity('low')"  style="flex:1;">LOW</button>
        <button class="intensity-btn" id="intensity-med"  onclick="setIntensity('med')"  style="flex:1;border-color:var(--blue);color:var(--blue);background:rgba(0,191,255,0.15);box-shadow:0 0 8px rgba(0,191,255,0.4);">MED</button>
        <button class="intensity-btn" id="intensity-high" onclick="setIntensity('high')" style="flex:1;">HIGH</button>
      </div>
      <div id="intensity-label" style="font-size:0.55rem;color:var(--blue-dim);margin-top:5px;text-align:center;letter-spacing:0.1em;">MEDIUM -- ENHANCED OUTPUT</div>
    </div>

    <!-- TEXT SIZE CONTROL -->
    <div class="settings-section" style="border-bottom:1px solid rgba(0,191,255,0.15);padding-bottom:10px;margin-bottom:6px;">
      <div class="settings-section-title" style="margin-bottom:8px;">-- TEXT SIZE --</div>
      <div style="display:flex;gap:6px;align-items:center;">
        <button class="intensity-btn" id="fontscale-sm"  onclick="setFontScale('sm')"  style="flex:1;">SM</button>
        <button class="intensity-btn" id="fontscale-med" onclick="setFontScale('med')" style="flex:1;border-color:var(--blue);color:var(--blue);background:rgba(0,191,255,0.15);box-shadow:0 0 8px rgba(0,191,255,0.4);">MED</button>
        <button class="intensity-btn" id="fontscale-lg"  onclick="setFontScale('lg')"  style="flex:1;">LG</button>
      </div>
      <div id="fontscale-label" style="font-size:0.55rem;color:var(--blue-dim);margin-top:5px;text-align:center;letter-spacing:0.1em;">MEDIUM -- STANDARD SIZE</div>
    </div>

    <!-- VOLUME CONTROL -->
    <div class="settings-section" style="border-bottom:1px solid rgba(0,191,255,0.15);padding-bottom:10px;margin-bottom:6px;">
      <div class="settings-section-title" style="margin-bottom:8px;">-- AUDIO VOLUME --</div>
      <div style="display:flex;gap:6px;align-items:center;">
        <button class="intensity-btn" id="volume-low"  onclick="setVolume('low')"  style="flex:1;">LOW</button>
        <button class="intensity-btn" id="volume-med"  onclick="setVolume('med')"  style="flex:1;border-color:var(--blue);color:var(--blue);background:rgba(0,191,255,0.15);box-shadow:0 0 8px rgba(0,191,255,0.4);">MED</button>
        <button class="intensity-btn" id="volume-high" onclick="setVolume('high')" style="flex:1;">HIGH</button>
      </div>
      <div id="volume-label" style="font-size:0.55rem;color:var(--blue-dim);margin-top:5px;text-align:center;letter-spacing:0.1em;">MEDIUM -- STANDARD OUTPUT</div>
    </div>

    <!-- VISUAL THEMES (free) -->
    <div class="settings-section">
      <div class="settings-section-title">-- VISUAL THEME --</div>
      <div class="theme-grid">

        <div class="theme-card active" id="theme-card-blue" onclick="applyMovieTheme('wargames')">
          <div class="theme-swatch" style="background:#00040f;">
            <div style="position:absolute;top:6px;left:8px;right:8px;height:2px;background:#00BFFF;box-shadow:0 0 6px #00BFFF;"></div>
            <div style="position:absolute;top:12px;left:8px;width:60%;height:1px;background:#0080CC;"></div>
            <div style="position:absolute;top:17px;left:8px;width:40%;height:1px;background:#0080CC;"></div>
            <div class="theme-swatch-scanline"></div>
          </div>
          <div class="theme-name" style="color:#00BFFF;">BLUE PHOSPHOR</div>
          <div class="theme-desc">IBM 3278 · WarGames Classic</div>
        </div>

        <div class="theme-card" id="theme-card-red" onclick="applyMovieTheme('redalert')">
          <div class="theme-swatch" style="background:#0A0000;">
            <div style="position:absolute;top:6px;left:8px;right:8px;height:2px;background:#FF1744;box-shadow:0 0 6px #FF1744;"></div>
            <div style="position:absolute;top:12px;left:8px;width:60%;height:1px;background:#B71C1C;"></div>
            <div style="position:absolute;top:17px;left:8px;width:40%;height:1px;background:#B71C1C;"></div>
            <div class="theme-swatch-scanline"></div>
          </div>
          <div class="theme-name" style="color:#FF1744;">RED ALERT</div>
          <div class="theme-desc">DEFCON 1 · Red October</div>
        </div>

        <div class="theme-card" id="theme-card-white" onclick="applyMovieTheme('whitephosphor')">
          <div class="theme-swatch" style="background:#080C14;">
            <div style="position:absolute;top:6px;left:8px;right:8px;height:2px;background:#E8F0F8;box-shadow:0 0 6px #E8F0F8;"></div>
            <div style="position:absolute;top:12px;left:8px;width:60%;height:1px;background:#A0B4C8;"></div>
            <div style="position:absolute;top:17px;left:8px;width:40%;height:1px;background:#A0B4C8;"></div>
            <div class="theme-swatch-scanline"></div>
          </div>
          <div class="theme-name" style="color:#E8F0F8;">NORAD PAPER</div>
          <div class="theme-desc">VT100 · Mission Control · Cheyenne Mtn</div>
        </div>

        <div class="theme-card" id="theme-card-green" onclick="applyMovieTheme('greenphosphor')">
          <div class="theme-swatch" style="background:#000A04;">
            <div style="position:absolute;top:6px;left:8px;right:8px;height:2px;background:#00FF88;box-shadow:0 0 6px #00FF88;"></div>
            <div style="position:absolute;top:12px;left:8px;width:60%;height:1px;background:#00AA55;"></div>
            <div style="position:absolute;top:17px;left:8px;width:40%;height:1px;background:#00AA55;"></div>
            <div class="theme-swatch-scanline"></div>
          </div>
          <div class="theme-name" style="color:#00FF88;">SAGE NETWORK</div>
          <div class="theme-desc">P39 Radar · DEW Line · Cold War</div>
        </div>

      </div>
    </div>

    <!-- PRO MOVIE THEMES -->
    <div class="settings-section">
      <div class="settings-section-title">-- PRO THEMES -- <span style="font-size:0.58rem;color:var(--amber);letter-spacing:0.08em;">FULL EXPERIENCE</span></div>
      <div style="font-size:0.58rem;color:var(--blue-dim);font-family:'Share Tech Mono',monospace;margin-bottom:10px;line-height:1.6;">One click: colors + sounds + UI + easter egg.</div>
      <div class="pack-list">

        <div class="pack-card pro-theme-card" id="pack-card-akira" onclick="applyMovieTheme('akira')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#FF2D00;">🎌 NEON TOKYO -- PSYCHIC CITY</div>
            <div class="pack-card-desc">Blood red · Manga scanlines · Choral chaos · 金田</div>
          </div>
          <div class="pack-active-badge" style="border-color:#FF2D00;color:#FF2D00;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-tron" onclick="applyMovieTheme('tron')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#00FFFF;">🕹️ GRID RUNNER -- DIGITAL FRONTIER</div>
            <div class="pack-card-desc">Electric cyan · Grid overlay · MCP surveillance · End of Line</div>
          </div>
          <div class="pack-active-badge" style="border-color:#00FFFF;color:#00FFFF;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-knightrider" onclick="applyMovieTheme('knightrider')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#FF3300;">🚗 PURSUIT MODE -- AI COMPANION</div>
            <div class="pack-card-desc">Scanner sweep · AI interface · Turbo boost · Pursuit mode</div>
          </div>
          <div class="pack-active-badge" style="border-color:#FF3300;color:#FF3300;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-bladerunner" onclick="applyMovieTheme('bladerunner')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#FF6B00;">🌆 REPLICANT DUSK -- 2019</div>
            <div class="pack-card-desc">Neon amber · acid rain · Vangelis · more human than human</div>
          </div>
          <div class="pack-active-badge" style="border-color:#FF6B00;color:#FF6B00;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-aliens" onclick="applyMovieTheme('aliens')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#00FF88;">👾 LV-426 -- MOTION TRACKER ACTIVE</div>
            <div class="pack-card-desc">Motion tracker · USCSS Sulaco · they mostly come at night</div>
          </div>
          <div class="pack-active-badge" style="border-color:#00FF88;color:#00FF88;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-hackers" onclick="applyMovieTheme('hackers')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#33CC44;">💻 CRASH OVERRIDE -- HACK THE PLANET</div>
            <div class="pack-card-desc">CRT phosphor · Modem dial-up · BBS terminal · 1995</div>
          </div>
          <div class="pack-active-badge" style="border-color:#33CC44;color:#33CC44;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-hal9000" onclick="applyMovieTheme('hal9000')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#FF2200;">🔴 SENTINEL EYE -- I'M SORRY DAVE</div>
            <div class="pack-card-desc">Bone white · HAL red eye · Discovery One · I'm sorry, Dave</div>
          </div>
          <div class="pack-active-badge" style="border-color:#FF2200;color:#FF2200;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-matrix" onclick="applyMovieTheme('matrix')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#00FF41;">💊 GREEN RAIN -- FOLLOW THE WHITE RABBIT</div>
            <div class="pack-card-desc">Digital green · Code rain · Simulation · Wake up, Neo</div>
          </div>
          <div class="pack-active-badge" style="border-color:#00FF41;color:#00FF41;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-airwolf" onclick="applyMovieTheme('airwolf')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#7BAFD4;">🚁 RAPTOR COMMAND -- CODENAME: ANGEL</div>
            <div class="pack-card-desc">Military grey · Cold war ops · Rotor ambience · Archangel</div>
          </div>
          <div class="pack-active-badge" style="border-color:#7BAFD4;color:#7BAFD4;">ACTIVE</div>
        </div>

      </div>
    </div>

    <!-- RETRO CONSOLE THEMES -->
    <div class="settings-section">
      <div class="settings-section-title">-- RETRO CONSOLE THEMES -- <span style="font-size:0.58rem;color:#FFD700;letter-spacing:0.08em;">NEW</span></div>
      <div style="font-size:0.58rem;color:var(--blue-dim);font-family:'Share Tech Mono',monospace;margin-bottom:10px;line-height:1.6;">Full visual + sound bundle. Pure nostalgia.</div>
      <div class="pack-list">

        <div class="pack-card pro-theme-card" id="pack-card-c64" onclick="applyMovieTheme('c64')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#AABBFF;">💙 C64 -- COMMODORE 64</div>
            <div class="pack-card-desc">SID chip · PETSCII overlay · Blue screen · 64K RAM SYSTEM</div>
          </div>
          <div class="pack-active-badge" style="border-color:#7B90D2;color:#7B90D2;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-nes" onclick="applyMovieTheme('nes')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#E8504A;">🎮 NES -- NINTENDO</div>
            <div class="pack-card-desc">2A03 pulse waves · 8-bit pixel art · Gray &amp; red · PLAYER 1</div>
          </div>
          <div class="pack-active-badge" style="border-color:#E8504A;color:#E8504A;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-gameboy" onclick="applyMovieTheme('gameboy')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#8bac0f;">🟢 GAME BOY -- DMG</div>
            <div class="pack-card-desc">4-shade LCD green · Dot matrix · Pocket nostalgia · 8MHz Z80</div>
          </div>
          <div class="pack-active-badge" style="border-color:#8bac0f;color:#8bac0f;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-genesis" onclick="applyMovieTheme('genesis')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#5BC8F5;">🔵 SEGA GENESIS</div>
            <div class="pack-card-desc">YM2612 FM · Blast processing · Deep blue · SONIC SPEED</div>
          </div>
          <div class="pack-active-badge" style="border-color:#5BC8F5;color:#5BC8F5;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-atari" onclick="applyMovieTheme('atari')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#F4A23A;">🟠 ATARI 2600</div>
            <div class="pack-card-desc">TIA chip · Wood grain warmth · Heavy scanlines · HAVE FUN</div>
          </div>
          <div class="pack-active-badge" style="border-color:#F4A23A;color:#F4A23A;">ACTIVE</div>
        </div>

        <div class="pack-card pro-theme-card" id="pack-card-amiga" onclick="applyMovieTheme('amiga')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#CC88FF;">🟣 AMIGA -- WORKBENCH</div>
            <div class="pack-card-desc">Paula 4-ch · OCS/ECS · Orange &amp; purple · Tracker energy</div>
          </div>
          <div class="pack-active-badge" style="border-color:#CC88FF;color:#CC88FF;">ACTIVE</div>
        </div>

      </div>
    </div>

    <!-- STANDALONE SOUND PACKS -->
    <div class="settings-section">
      <div class="settings-section-title">-- SOUND PACKS -- <span style="font-size:0.58rem;color:#FFD700;letter-spacing:0.08em;">MIX WITH ANY THEME</span></div>
      <div style="font-size:0.58rem;color:var(--blue-dim);font-family:'Share Tech Mono',monospace;margin-bottom:10px;line-height:1.6;">Pure audio vibes · Independent of visual theme · Stack anything.</div>
      <div class="pack-list">

        <div class="pack-card pro-sound-card" id="pack-card-synthwave" onclick="setSoundPack('synthwave')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#FF6EC7;">🌆 SYNTHWAVE</div>
            <div class="pack-card-desc">Oberheim arpeggios · Gated reverb · Analog warmth · Neon drift</div>
          </div>
          <div class="pack-active-badge" style="border-color:#FF6EC7;color:#FF6EC7;">ACTIVE</div>
        </div>

        <div class="pack-card pro-sound-card" id="pack-card-deepspace" onclick="setSoundPack('deepspace')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#4488FF;">🌌 DEEP SPACE</div>
            <div class="pack-card-desc">Near silence · Sub drone · Rare metallic ping · You are alone</div>
          </div>
          <div class="pack-active-badge" style="border-color:#4488FF;color:#4488FF;">ACTIVE</div>
        </div>

        <div class="pack-card pro-sound-card" id="pack-card-industrial" onclick="setSoundPack('industrial')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#AAAAAA;">⚙️ INDUSTRIAL</div>
            <div class="pack-card-desc">Distorted metal · Grinding drone · Machinery ambience · NIN energy</div>
          </div>
          <div class="pack-active-badge" style="border-color:#AAAAAA;color:#AAAAAA;">ACTIVE</div>
        </div>

        <div class="pack-card pro-sound-card" id="pack-card-calm" onclick="setSoundPack('calm')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#88DDCC;">🧘 CALM / FOCUS</div>
            <div class="pack-card-desc">Meditation bowl · Soft sine pings · Barely-there ambient pad</div>
          </div>
          <div class="pack-active-badge" style="border-color:#88DDCC;color:#88DDCC;">ACTIVE</div>
        </div>

        <div class="pack-card pro-sound-card" id="pack-card-horror" onclick="setSoundPack('horror')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#CC2244;">👁️ HORROR</div>
            <div class="pack-card-desc">Dissonant clusters · Irregular pings · Something is wrong</div>
          </div>
          <div class="pack-active-badge" style="border-color:#CC2244;color:#CC2244;">ACTIVE</div>
        </div>

        <div class="pack-card pro-sound-card" id="pack-card-military" onclick="setSoundPack('military')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#88BB44;">🎖️ MILITARY OPS</div>
            <div class="pack-card-desc">Submarine sonar · Tactical comms · Ops room tension · Classified</div>
          </div>
          <div class="pack-active-badge" style="border-color:#88BB44;color:#88BB44;">ACTIVE</div>
        </div>

        <div class="pack-card pro-sound-card" id="pack-card-lofi" onclick="setSoundPack('lofi')">
          <div class="pack-card-left">
            <div class="pack-card-name" style="color:#DDAA66;">☕ LO-FI</div>
            <div class="pack-card-desc">Vinyl crackle · Warm hiss · Muffled soft ping · Chill and track</div>
          </div>
          <div class="pack-active-badge" style="border-color:#DDAA66;color:#DDAA66;">ACTIVE</div>
        </div>

      </div>
    </div>


    <!-- PRO PREFERENCES (persisted in localStorage) -->
    <div class="settings-section">
      <div class="settings-section-title">-- PRO PREFERENCES --
        <span style="font-size:0.65em;color:var(--blue-dim);margin-left:6px;">SAVED AUTOMATICALLY</span>
      </div>
      <div id="pro-prefs-content">

        <!-- Custom Observer Location -->
        <div class="pref-row">
          <span class="pref-label">📍 CUSTOM LOCATION</span>
          <div style="display:flex;gap:4px;margin-top:4px;">
            <input id="pref-location-name" type="text" placeholder="Location name"
              style="flex:1;background:var(--bg-panel);border:1px solid var(--blue-dark);color:var(--text);
                     font-family:VT323,monospace;font-size:0.82em;padding:3px 6px;border-radius:2px;"
              oninput="savePref('locationName', this.value)">
          </div>
          <div style="display:flex;gap:4px;margin-top:4px;">
            <input id="pref-lat" type="number" placeholder="Lat" step="0.0001"
              style="width:42%;background:var(--bg-panel);border:1px solid var(--blue-dark);color:var(--text);
                     font-family:VT323,monospace;font-size:0.82em;padding:3px 5px;border-radius:2px;">
            <input id="pref-lng" type="number" placeholder="Lng" step="0.0001"
              style="width:42%;background:var(--bg-panel);border:1px solid var(--blue-dark);color:var(--text);
                     font-family:VT323,monospace;font-size:0.82em;padding:3px 5px;border-radius:2px;">
            <button onclick="applyCustomLocation()"
              style="background:var(--blue-dark);border:1px solid var(--blue);color:var(--blue);
                     font-family:VT323,monospace;font-size:0.8em;padding:3px 7px;cursor:pointer;border-radius:2px;">SET</button>
          </div>
          <div style="font-size:0.62em;color:var(--blue-dim);margin-top:2px;">
            Or <span onclick="useGPSLocation()" style="color:var(--amber);cursor:pointer;">USE GPS AUTO-DETECT</span>
          </div>
        </div>

        <!-- Display Preferences -->
        <div class="pref-row" style="margin-top:8px;">
          <span class="pref-label">🖥️ DISPLAY</span>
          <label class="pref-toggle-row"><span>Vessel trails</span>
            <input type="checkbox" id="pref-show-trails" checked onchange="savePref('showTrails',this.checked);toggleVesselTrails(this.checked)"></label>
          <label class="pref-toggle-row"><span>Orbit model zone</span>
            <input type="checkbox" id="pref-show-orbit" checked onchange="savePref('showOrbit',this.checked)"></label>
          <label class="pref-toggle-row"><span>Compact manifest</span>
            <input type="checkbox" id="pref-compact" onchange="savePref('compactManifest',this.checked);toggleCompactManifest(this.checked)"></label>
        </div>

        <!-- Alert Preferences -->
        <div class="pref-row" style="margin-top:8px;">
          <span class="pref-label">🔔 PUSH ALERTS</span>
          <label class="pref-toggle-row"><span>T-24hr</span>
            <input type="checkbox" id="pref-alert-24" checked onchange="savePref('alert24',this.checked)"></label>
          <label class="pref-toggle-row"><span>T-6hr</span>
            <input type="checkbox" id="pref-alert-6" checked onchange="savePref('alert6',this.checked)"></label>
          <label class="pref-toggle-row"><span>T-1hr</span>
            <input type="checkbox" id="pref-alert-1" checked onchange="savePref('alert1',this.checked)"></label>
          <label class="pref-toggle-row"><span>Visible launches only</span>
            <input type="checkbox" id="pref-visible-only" onchange="savePref('visibleOnly',this.checked)"></label>
        </div>

        <div style="margin-top:8px;text-align:right;">
          <button onclick="resetPrefs()"
            style="background:transparent;border:1px solid var(--blue-dark);color:var(--blue-dim);
                   font-family:VT323,monospace;font-size:0.7em;padding:3px 10px;cursor:pointer;border-radius:2px;">
            RESET DEFAULTS
          </button>
        </div>
      </div>
    </div>

    <div class="settings-footer">
      <div id="lw-version-display" style="font-size:0.6rem;color:var(--blue-dim);letter-spacing:0.08em;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(0,191,255,0.1);">
        LaunchWatch <span id="lw-ver-num">v2.50</span> &nbsp;·&nbsp; Build: <span id="lw-build-time">2026-04-26</span>
      </div>
      MORE PRO THEMES IN DEVELOPMENT<br>
      ENDURANCE DRIFT · SENTINEL EYE · REPLICANT DUSK<br>
      <span style="color:var(--amber);">⚡ JOIN PRO BETA → launchwatch.beehiiv.com</span><br><br>
      EASTER EGGS: GLSS · DAISY · REPLICANT · KANEDA · MCP · KITT · STRINGFELLOW · LOAD · PLAYER1 · GAMEBOY · BLAST · JOYSTICK · WORKBENCH · REDPILL · OPENPODBAYDOORS · HACKTHEPLANET · ZEROC00L · ACIDBURN · GAMEOVERMAN · MOSTLYATNIGHT<br><br>
      LAUNCHWATCH v2.2 · BUILT FOR SPACE ENTHUSIASTS
    </div>
  </div>

  <div id="main">
    <!-- LEFT PANEL -->
    <div id="left-panel">
      <div class="panel-collapse-tab" id="left-collapse-tab" onclick="togglePanelCollapse('left')">◀</div>
      <!-- Observer -->
      <div id="observer-box">
        <div class="obs-header">[ OBSERVER STATION ]
          <span id="loc-edit-btn" onclick="toggleLocEditor()" style="cursor:none;color:var(--amber);font-size:0.75rem;letter-spacing:0.05em;border:1px solid var(--amber);padding:0 6px;float:right;margin-top:-1px;">⌖ CHANGE</span>
        </div>
        <div class="obs-loc" id="obs-loc-display">&#9655; KENNEDY SPACE CENTER, FL</div>
        <div class="obs-coords" id="obs-coords-display">28.3922°N &nbsp; 80.6077°W &nbsp; ELEV: 3M</div>

        <!-- Location Picker -->
        <div id="loc-editor" style="display:none;margin-bottom:8px;">
          <div style="font-size:0.58rem;color:var(--blue-dim);margin-bottom:5px;letter-spacing:0.1em;">-- SELECT OBSERVER STATION --</div>
          <div id="loc-presets"></div>
        </div>

        <div class="radius-row">
          <label>VIS.RADIUS</label>
          <input type="range" id="radius-slider" min="200" max="3000" value="1000" step="50">
          <span class="radius-val" id="radius-val">800KM</span>
        </div>
      </div>

      <!-- ISS Tracking -->
      <div id="iss-box">
        <div class="iss-header">[ ISS TRACKING ]</div>
        <div class="iss-data" id="iss-data">
          <span class="iss-label">STATUS</span><span class="iss-val iss-status-green" id="iss-status">ACQUIRING...</span>
          <span class="iss-label">LAT</span><span class="iss-val" id="iss-lat">--</span>
          <span class="iss-label">LNG</span><span class="iss-val" id="iss-lng">--</span>
          <span class="iss-label">ALT</span><span class="iss-val" id="iss-alt">~408 KM</span>
          <span class="iss-label">SPEED</span><span class="iss-val">27,600 KM/H</span>
          <span class="iss-label">DIST</span><span class="iss-val" id="iss-dist">--</span>
          <span class="iss-label">VISIBLE</span><span class="iss-val" id="iss-vis">--</span>
          <span class="iss-label">NEXT PASS</span><span class="iss-val" id="iss-pass">CALC...</span>
        </div>
      </div>

      <!-- Launch List with tabs -->
      <div class="panel-header">
        [ LAUNCH MANIFEST ]
        <span class="panel-header-count" id="launch-count">0</span>
      </div>
      <div class="tab-bar">
        <div class="tab active" onclick="filterLaunches('all',this)">ALL</div>
        <div class="tab" onclick="filterLaunches('visible',this)">VISIBLE</div>
        <div class="tab" onclick="filterLaunches('24h',this)">&lt;24H</div>
        <div class="tab" onclick="filterLaunches('week',this)">WEEK</div>
        <div class="tab" id="history-tab" onclick="filterLaunches('history',this)" title="Previous launches -- PRO">HISTORY</div>
      </div>
      <div id="launch-list"></div>
    </div>

    <!-- MAP -->
    <div id="map-wrap">
      <div id="map"></div>

      <!-- THEME MAP OVERLAY -- switches with active movie theme -->
      <div id="theme-overlay"></div>

      <!-- HUD COMPASS TAPE -->
      <div id="hud-tape">
        <canvas id="hud-tape-canvas"></canvas>
        <div id="hud-tape-bubble" style="display:none;">
          <div class="hud-bubble-item">
            <div class="hud-bubble-val" id="hud-bearing">---°</div>
            <div class="hud-bubble-label">BEARING</div>
          </div>
          <div class="hud-bubble-sep"></div>
          <div class="hud-bubble-item">
            <div class="hud-bubble-val" id="hud-dist">----</div>
            <div class="hud-bubble-label">DISTANCE KM</div>
          </div>
          <div class="hud-bubble-sep"></div>
          <div class="hud-bubble-item">
            <div class="hud-bubble-val" id="hud-cardinal">---</div>
            <div class="hud-bubble-label">CARDINAL</div>
          </div>
          <div class="hud-bubble-sep"></div>
          <div class="hud-bubble-item">
            <div class="hud-bubble-val" id="hud-elev">--°</div>
            <div class="hud-bubble-label">ELEVATION</div>
          </div>
        </div>
        <div id="hud-tape-idle">◈ HOVER MAP TO ACTIVATE TARGETING SYSTEM ◈</div>
      </div>

      <div id="alert-banner" id="alert-banner">⚠ LAUNCH IMMINENT -- T-MINUS &lt; 24 HOURS</div>
      <div id="scrub-banner">
        <span class="scrub-icon">◈</span><span class="scrub-state"></span><span class="scrub-detail"></span><span class="scrub-freshness"></span>
      </div>
      <div id="map-legend">
        <div class="legend-title">[ LEGEND ]</div>
        <div class="legend-row"><div class="l-dot" style="background:#00BFFF"></div>VISIBLE FROM OBS</div>
        <div class="legend-row"><div class="l-dot" style="background:#ffb000"></div>MARGINAL VISIBILITY</div>
        <div class="legend-row"><div class="l-dot" style="background:#444"></div>OUT OF RANGE</div>
        <div class="legend-row"><div class="l-line" style="background:#00BFFF"></div>TRAJECTORY (VIS)</div>
        <div class="legend-row"><div class="l-line" style="background:#333"></div>TRAJECTORY (FAR)</div>
        <div class="legend-row"><div class="l-line" style="background:#00BFFF;opacity:0.3;border-top:1px dashed #00BFFF;height:0"></div>VIS. RADIUS CIRCLE</div>
        <div class="legend-row"><div class="l-dot" style="background:#00BFFF;border-radius:50%"></div>ISS POSITION</div>
        <div class="legend-row"><div class="l-dot" style="background:#ff6b35;border-radius:0;transform:rotate(45deg);width:8px;height:8px;"></div>SPACEX VESSEL</div>
        <div class="legend-row"><div class="l-line" style="background:#ff6b35;opacity:0.6;"></div>VESSEL TRACK</div>
        <div class="legend-row" style="margin-top:6px;border-top:1px solid rgba(0,191,255,0.15);padding-top:6px;">
          <span style="color:var(--blue-dim);font-size:0.58rem;">DAY/NIGHT</span>
          <div id="terminator-toggle-btn" onclick="handleTerminatorToggle()" style="
            margin-left:auto;font-size:0.58rem;cursor:pointer;color:var(--blue);
            border:1px solid var(--blue-dim);padding:1px 6px;letter-spacing:0.05em;
          ">ON</div>
        </div>
      </div>

      <!-- NOTIFICATIONS SECTION -->
      <div class="settings-section" style="margin-top:10px;border:1px solid rgba(0,191,255,0.2);padding:8px;border-radius:2px;">
        <div class="settings-section-title" style="font-size:0.6rem;color:var(--blue);letter-spacing:0.12em;margin-bottom:8px;">-- NOTIFICATIONS --</div>

        <!-- Push Notifications -->
        <div style="margin-bottom:8px;">
          <div style="font-size:0.56rem;color:var(--blue-dim);letter-spacing:0.08em;margin-bottom:4px;">BROWSER PUSH</div>
          <div style="font-size:0.52rem;color:var(--blue-dark);margin-bottom:5px;line-height:1.4;filter:brightness(3);">
            T-24HR + T-1HR ALERTS<br>FOR VISIBLE LAUNCHES ONLY
          </div>
          <div id="push-status-row" style="display:flex;align-items:center;gap:6px;">
            <div id="push-status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--blue-dark);flex-shrink:0;filter:brightness(3);"></div>
            <div id="push-status-label" style="font-size:0.52rem;color:var(--blue-dim);flex:1;">CHECKING...</div>
            <div id="push-toggle-btn" onclick="togglePushNotifications()" style="
              font-size:0.54rem;cursor:pointer;color:var(--blue-dim);
              border:1px solid var(--blue-dark);padding:1px 7px;letter-spacing:0.05em;
              white-space:nowrap;
            ">ENABLE</div>
          </div>
        </div>

        <!-- Telegram -->
        <div style="margin-bottom:8px;border-top:1px solid rgba(0,191,255,0.1);padding-top:8px;">
          <div style="font-size:0.56rem;color:#27A7E7;letter-spacing:0.08em;margin-bottom:4px;">✈ TELEGRAM BOT</div>
          <div style="font-size:0.52rem;color:var(--blue-dim);margin-bottom:6px;line-height:1.5;">
            T-24HR · T-6HR · T-1HR · T-30MIN<br>
            SCRUB · SPLASHDOWN · BEARING + SCORE
          </div>
          <div style="font-size:0.48rem;color:var(--amber);margin-bottom:6px;line-height:1.4;">
            ⭐ PRO: Custom providers · Space news · Visible-only filter
          </div>
          <div style="display:flex;gap:6px;align-items:center;">
            <div onclick="openTelegramSubscribe()" style="
              flex:1;font-size:0.56rem;cursor:pointer;color:#27A7E7;text-align:center;
              border:1px solid rgba(39,167,231,0.5);padding:5px 6px;letter-spacing:0.05em;
              background:rgba(39,167,231,0.05);
            ">✈ SUBSCRIBE FREE</div>
            <div id="tg-status" style="font-size:0.52rem;color:var(--green);padding:3px 0;display:none;">✓ ACTIVE</div>
          </div>
        </div>

        <!-- X / Twitter -->
        <div style="border-top:1px solid rgba(0,191,255,0.1);padding-top:8px;">
          <div style="font-size:0.56rem;color:var(--blue-dim);letter-spacing:0.08em;margin-bottom:4px;">X / TWITTER ALERTS</div>
          <div style="font-size:0.52rem;color:var(--blue-dim);opacity:0.6;margin-bottom:5px;line-height:1.4;">
            AUTO-POSTS ON TRAJ LOCK<br>FOLLOW FOR LAUNCH ALERTS
          </div>
          <div onclick="window.open('https://twitter.com/LaunchWatchApp','_blank')" style="
            font-size:0.54rem;cursor:pointer;color:var(--blue);text-align:center;
            border:1px solid var(--blue-dim);padding:3px 6px;letter-spacing:0.05em;
          ">𝕏 FOLLOW @LAUNCHWATCHAPP</div>
        </div>
      </div>
    </div>
    

    <!-- RIGHT PANEL -->
    <div id="right-panel">
      <div class="panel-collapse-tab" id="right-collapse-tab" onclick="togglePanelCollapse('right')">▶</div>
      <!-- Weather -->
      <div id="weather-box">
        <div class="wx-header">[ LOCAL CONDITIONS -- MB SC ]</div>
        <div class="wx-data" id="wx-data">
          <span class="wx-label">CLOUD CVR</span><span class="wx-val" id="wx-cloud">--</span>
          <span class="wx-label">VISIBILITY</span><span class="wx-val" id="wx-vis">--</span>
          <span class="wx-label">HUMIDITY</span><span class="wx-val" id="wx-hum">--</span>
          <span class="wx-label">WIND</span><span class="wx-val" id="wx-wind">--</span>
          <span class="wx-label">TEMP</span><span class="wx-val" id="wx-temp">--</span>
          <span class="wx-label">CONDITIONS</span><span class="wx-val" id="wx-cond">--</span>
        </div>
        <div style="margin-top:6px;font-size:0.6rem;color:var(--blue-dim);margin-bottom:4px">SKY CLARITY FOR VIEWING</div>
        <div class="wx-clarity">
          <div class="wx-clarity-fill" id="wx-clarity-fill" style="width:0%"></div>
          <div class="wx-clarity-label" id="wx-clarity-label">--</div>
        </div>
      </div>

      <!-- SpaceX Vessel Tracking -->
      <div id="vessel-box">
        <div class="vessel-header">[ SPACEX FLEET TRACKING ]</div>
        <div id="vessel-list"></div>
        <div style="font-size:0.52rem;color:var(--blue-dark);margin-top:4px;letter-spacing:0.06em;">
          ▶ CLICK VESSEL TO CENTER MAP &amp; OPEN LIVE AIS
        </div>
      </div>

      <!-- TELEGRAM ALERTS -->

      <!-- CUSTOM OBSERVER LOCATION SEARCH -->
      <div id="custom-location-box" style="border-bottom:1px solid rgba(0,191,255,0.12);padding:8px 10px 10px;">
        <div class="vessel-header">[ SET OBSERVER LOCATION ]</div>
        <div style="font-size:0.56rem;color:var(--blue-dim);padding:3px 0 7px;line-height:1.5;">
          Any city, landmark, or coordinates worldwide.<br>
          <span style="color:rgba(0,191,255,0.4);">Presets in left panel ▸ CHANGE</span>
        </div>
        <div style="display:flex;gap:5px;align-items:center;">
          <input id="custom-loc-input" type="text" placeholder="LONDON · TOKYO · 28.39,-80.60..."
            style="flex:1;background:rgba(0,8,20,0.75);border:1px solid rgba(0,191,255,0.35);
                   color:var(--blue);font-family:'VT323',monospace;font-size:0.82rem;
                   padding:4px 7px;letter-spacing:0.06em;outline:none;min-width:0;"
            onkeydown="if(event.key==='Enter')geocodeCustomLocation()"
          />
          <button onclick="geocodeCustomLocation()" style="
            background:rgba(0,191,255,0.08);border:1px solid rgba(0,191,255,0.45);
            color:var(--blue);font-family:'VT323',monospace;font-size:0.82rem;
            padding:4px 10px;cursor:pointer;letter-spacing:0.1em;white-space:nowrap;
            transition:all 0.15s;
          " onmouseover="this.style.background='rgba(0,191,255,0.18)'"
             onmouseout="this.style.background='rgba(0,191,255,0.08)'"
          >⊕ SET</button>
        </div>
        <div id="custom-loc-status" style="font-size:0.52rem;color:var(--blue-dim);margin-top:4px;min-height:13px;letter-spacing:0.06em;"></div>
      </div>

      <!-- Starlink Tracker -->
      <div id="starlink-box">
        <div class="starlink-header">[ STARLINK TRACKER ]</div>
        <div class="starlink-stats" id="sl-stats">LOADING TLEs...</div>
        <div onclick="toggleStarlinkLayer()" class="starlink-toggle-btn" id="sl-toggle-btn">▶ ENABLE</div>
        <div class="starlink-pass-list" id="sl-pass-list"></div>
      </div>

      <div id="telegram-box" style="border-top:1px solid rgba(0,191,255,0.12);padding:8px 10px 10px;">
        <div class="vessel-header">[ TELEGRAM ALERTS ]</div>
        <div style="font-size:0.58rem;color:var(--blue-dim);padding:4px 0 8px;line-height:1.5;">
          Launch alerts direct to Telegram.<br>T-24H · T-6H · T-1H · Scrub · Splashdown.
        </div>
        <div onclick="openTelegramSubscribe()" style="
          display:flex;align-items:center;justify-content:center;gap:8px;
          padding:7px 10px;cursor:pointer;
          border:1px solid rgba(0,191,255,0.5);
          background:rgba(0,191,255,0.07);
          color:var(--blue);font-family:'VT323',monospace;
          font-size:0.9rem;letter-spacing:0.12em;
          transition:all 0.2s;
          animation:settings-pulse 3s ease-in-out infinite;
        " onmouseover="this.style.background='rgba(0,191,255,0.15)';this.style.boxShadow='0 0 14px rgba(0,191,255,0.5)'"
           onmouseout="this.style.background='rgba(0,191,255,0.07)';this.style.boxShadow='none'">
          ✈ SUBSCRIBE FREE
        </div>
        <div style="font-size:0.52rem;color:var(--blue-dim);text-align:center;margin-top:5px;letter-spacing:0.05em;">FREE · NO ACCOUNT NEEDED</div>
      </div>

      <!-- Mission Detail -->
      <div id="detail-box">
        <div class="detail-header">[ MISSION DETAIL ]</div>
        <div class="detail-content" id="detail-content">
          <span style="color:var(--blue-dim)">SELECT A LAUNCH TARGET<br>FROM MANIFEST TO VIEW<br>MISSION PARAMETERS...<span class="blink">_</span></span>
        </div>
      </div>

      <!-- Compass -->
      <div id="compass-box">
        <div class="compass-header">[ BEARING FROM OBSERVER ]</div>
        <div id="compass-wrap">
          <canvas id="compass-canvas" width="90" height="90"></canvas>
          <div id="compass-readout">
            <div id="compass-bearing">---°</div>
            <div id="compass-cardinal">--</div>
            <div id="compass-label">HOVER MAP<br>TO TRACK</div>
          </div>
        </div>
      </div>

      <!-- Horizon Check -->
      <div id="horizon-box">
        <div class="horizon-header">[ HORIZON / ELEVATION CHECK ]</div>
        <canvas id="horizon-canvas" width="236" height="60"></canvas>
        <div style="font-size:0.55rem;color:var(--blue-dim);margin-top:4px" id="horizon-text">SELECT LAUNCH FOR ELEVATION DATA</div>
      </div>

      <!-- Log -->
      <div id="log-box">
        <div class="log-header">[ SYSTEM LOG ]</div>
        <div id="log-content"></div>
      </div>
    </div>
  </div>

  <div id="statusbar">
    <div class="status-section">
      <div class="sb-item"><div class="sb-dot"></div></div>
      <div class="sb-item"><span class="sb-label">DATA SRC:</span><span class="sb-val">LAUNCH LIBRARY 2.0</span></div>
      <div class="sb-item"><span class="sb-label">BUILD:</span><span class="sb-val" id="sb-build-ver">v2.16 · 2026-03-26</span></div>
      <div class="sb-item"><span class="sb-label">ISS:</span><span class="sb-val">OPEN NOTIFY API</span></div>
      <div class="sb-item"><span class="sb-label">WX:</span><span class="sb-val">OPEN-METEO.COM</span></div>
    </div>
    <div class="status-section">
      <div class="sb-item"><span class="sb-label">LAUNCHES VISIBLE:</span><span class="sb-val" id="sb-vis">--</span></div>
      <div class="sb-item"><span class="sb-label">LAUNCHES &lt;24H:</span><span class="sb-val" id="sb-24">--</span></div>
      <div class="sb-item"><span class="sb-label">ISS OVERHEAD:</span><span class="sb-val" id="sb-iss">--</span></div>
    </div>
    <div class="status-section">
      <div class="sb-item"><span class="sb-label">SYSTEM:</span><span class="sb-val">GLSS v4.2.1 // SHALL WE PLAY A GAME?</span></div>
    </div>
  </div>
</div>

<script>
// ============================================================
// CONSTANTS
// ============================================================
let OBSERVER = { lat: 28.3922, lng: -80.6077, name: "KENNEDY SPACE CENTER, FL", elev: 3 };

// ============================================================
// NOTIFICATIONS -- Push / Telegram / Twitter
// ============================================================

// VAPID public key -- generated once, set in Netlify env VAPID_PUBLIC_KEY
// This is the *public* key only, safe to embed in frontend
const VAPID_PUBLIC_KEY = window.VAPID_PUBLIC_KEY || 'BHBt-2_oiRxzz_7o2OOMr1iDpALQkwEaN6I5SEoeKpzu9hHArDlGGaCxAYmmsoU3TeVJX7ms-l4pqFFEd4vlmlI';

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const raw = atob(base64);
  return new Uint8Array([...raw].map(c => c.charCodeAt(0)));
}

// Push notification state
let pushRegistration = null;

async function initPushStatus() {
  const btn   = document.getElementById('push-toggle-btn');
  const dot   = document.getElementById('push-status-dot');
  const label = document.getElementById('push-status-label');
  if (!btn) return;

  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
    dot.style.background = '#444';
    label.textContent = 'NOT SUPPORTED';
    btn.style.display = 'none';
    return;
  }

  const perm = Notification.permission;
  if (perm === 'denied') {
    dot.style.background = '#FF1744';
    label.textContent = 'BLOCKED IN BROWSER';
    btn.textContent = 'BLOCKED';
    btn.style.color = '#FF1744';
    btn.style.borderColor = '#FF1744';
    btn.style.cursor = 'default';
    return;
  }

  // Register service worker
  try {
    const reg = await navigator.serviceWorker.register('/sw.js');
    pushRegistration = reg;
    const existing = await reg.pushManager.getSubscription();
    if (existing) {
      dot.style.background = '#00FF88';
      label.textContent = 'ACTIVE -- T-24 + T-1HR';
      btn.textContent = 'DISABLE';
      btn.style.color = '#FF1744';
      btn.style.borderColor = '#FF1744';
    } else {
      dot.style.background = '#FFB000';
      label.textContent = 'NOT SUBSCRIBED';
      btn.textContent = 'ENABLE';
      btn.style.color = 'var(--blue)';
      btn.style.borderColor = 'var(--blue-dim)';
    }
  } catch (err) {
    console.warn('SW register error:', err);
    dot.style.background = '#FF1744';
    label.textContent = 'SW ERROR';
  }
}

async function togglePushNotifications() {
  const btn   = document.getElementById('push-toggle-btn');
  const dot   = document.getElementById('push-status-dot');
  const label = document.getElementById('push-status-label');

  if (!pushRegistration) {
    try { pushRegistration = await navigator.serviceWorker.register('/sw.js'); }
    catch (e) { log('PUSH: SERVICE WORKER FAILED -- ' + e.message, 'error'); return; }
  }

  const existing = await pushRegistration.pushManager.getSubscription();

  if (existing) {
    // Unsubscribe
    await existing.unsubscribe();
    dot.style.background = '#FFB000';
    label.textContent = 'NOT SUBSCRIBED';
    btn.textContent = 'ENABLE';
    btn.style.color = 'var(--blue)';
    btn.style.borderColor = 'var(--blue-dim)';
    log('PUSH NOTIFICATIONS: DISABLED', 'warn');
    return;
  }

  // Request permission + subscribe
  const perm = await Notification.requestPermission();
  if (perm !== 'granted') {
    dot.style.background = '#FF1744';
    label.textContent = 'PERMISSION DENIED';
    btn.textContent = 'BLOCKED';
    log('PUSH NOTIFICATIONS: PERMISSION DENIED', 'error');
    return;
  }

  try {
    btn.textContent = 'SUBSCRIBING...';
    const sub = await pushRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
    });

    // Send subscription to backend
    await fetch('/.netlify/functions/push-subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        subscription: sub.toJSON(),
        observerLat:  OBSERVER.lat,
        observerLng:  OBSERVER.lng,
        observerName: OBSERVER.name
      })
    });

    dot.style.background = '#00FF88';
    label.textContent = 'ACTIVE -- T-24 + T-1HR';
    btn.textContent = 'DISABLE';
    btn.style.color = '#FF1744';
    btn.style.borderColor = '#FF1744';
    log('PUSH NOTIFICATIONS: ENABLED ✓', 'alert');
  } catch (err) {
    dot.style.background = '#FF1744';
    label.textContent = 'SUBSCRIBE FAILED';
    btn.textContent = 'RETRY';
    log('PUSH: ' + err.message, 'error');
  }
}


// ═══════════════════════════════════════════════════════════════════
// TELEGRAM SIGNUP FLOW
// ═══════════════════════════════════════════════════════════════════

const TG_PREFS = {
  alerts:   { t24:true, t6:true, t1:true, t30m:true, scrub:true, splashdown:true },
  providers:{ spacex:true, blueorigin:false, ula:false, rocketlab:false },
  news:     { enabled:false },
  visibility_only: false,
};
let TG_LOCATION = { lat:null, lng:null, name:null };

function openTelegramSubscribe() {
  // Reset to step 1
  document.getElementById('tg-step-1').classList.add('active');
  document.getElementById('tg-step-2').classList.remove('active');
  document.getElementById('tg-launched-msg').style.display = 'none';
  document.getElementById('tg-location-status').style.display = 'none';
  // Seed location from OBSERVER if set
  if (OBSERVER?.lat && OBSERVER?.lng) {
    TG_LOCATION = { lat:OBSERVER.lat, lng:OBSERVER.lng, name:OBSERVER.name };
  }
  document.getElementById('tg-modal-overlay').classList.add('open');
}

function closeTgModal() {
  document.getElementById('tg-modal-overlay').classList.remove('open');
}

function tgToggle(key, group, proOnly) {
  if (proOnly && !PRO_UNLOCKED) {
    document.getElementById('tg-pro-gate').style.display = 'block';
    return;
  }
  const el = document.getElementById(`tg-pref-${key}`);
  if (!el) return;
  const isOn = el.classList.toggle('on');
  if (group === 'provider') {
    TG_PREFS.providers[key] = isOn;
  } else if (group === 'extra') {
    if (key === 'news')    TG_PREFS.news.enabled = isOn;
    if (key === 'visonly') TG_PREFS.visibility_only = isOn;
  } else {
    TG_PREFS.alerts[key] = isOn;
  }
}

function tgStep2() {
  document.getElementById('tg-step-1').classList.remove('active');
  document.getElementById('tg-step-2').classList.add('active');
}

function tgUseCurrentLocation() {
  if (!navigator.geolocation) {
    alert('Geolocation not available in this browser.');
    return;
  }
  const btn = document.querySelector('[onclick="tgUseCurrentLocation()"]');
  if (btn) btn.textContent = '📍 LOCATING...';
  navigator.geolocation.getCurrentPosition(pos => {
    TG_LOCATION = {
      lat: pos.coords.latitude,
      lng: pos.coords.longitude,
      name: `${pos.coords.latitude.toFixed(2)}°, ${pos.coords.longitude.toFixed(2)}°`,
    };
    const status = document.getElementById('tg-location-status');
    status.textContent = `✓ ${TG_LOCATION.name}`;
    status.style.display = 'block';
    if (btn) btn.textContent = '📍 LOCATION SET ✓';
    log('TELEGRAM: location set -- ' + TG_LOCATION.name, 'alert');
  }, () => {
    if (btn) btn.textContent = '📍 USE MY LOCATION';
    alert('Could not get location. You can set it manually on launchwatch.app.');
  });
}

function tgSkipLocation() {
  tgLaunchBot();
}

function tgLaunchBot() {
  // Encode observer + preferences into start payload
  const payload = {
    lat:   TG_LOCATION.lat,
    lng:   TG_LOCATION.lng,
    name:  TG_LOCATION.name || OBSERVER?.name || null,
    prefs: TG_PREFS,
  };
  const encoded = btoa(JSON.stringify(payload));
  window.open(`https://t.me/LaunchWatchBot?start=${encodeURIComponent(encoded)}`, '_blank');

  // Show confirmation
  document.getElementById('tg-launch-btn').style.display = 'none';
  document.getElementById('tg-launched-msg').style.display = 'block';

  // If location is set, also call frontend API to update subscriber after bot registers
  // (bot will register chat_id on /start, then we update with location after a delay)
  log('TELEGRAM: bot opened -- tap START to activate ✓', 'alert');

  // Update tg-status in settings panel
  const tgStatus = document.getElementById('tg-status');
  if (tgStatus) { tgStatus.style.display = 'block'; tgStatus.textContent = '✓ ACTIVE'; }
}


// Called when a launch reaches TRAJ LOCK HIGH confidence
// Fires a Twitter post via Netlify function -- deduped server-side
const twitterPostedLaunches = new Set();
async function postTrajectoryLockTweet(launch, confidence, visScore, bearingDir, bearingDeg, isVisible) {
  if (!launch?.id) return;
  if (twitterPostedLaunches.has(launch.id)) return;
  if (confidence !== 'HIGH') return;
  twitterPostedLaunches.add(launch.id);

  const netDate = new Date(launch.net);
  const netStr  = netDate.toUTCString().replace(' GMT','').replace(',','');

  try {
    const res = await fetch('/.netlify/functions/twitter-post', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        launchId:    launch.id,
        missionName: launch.mission_name || launch.name || 'UNKNOWN',
        provider:    launch.lsp_name || '',
        padName:     launch.pad_name || '',
        confidence,
        netStr,
        isVisible,
        bearingDir,
        bearingDeg,
        visScore
      })
    });
    const data = await res.json();
    if (data.ok && !data.skipped) log('𝕏 TRAJECTORY LOCK POSTED TO X/TWITTER ✓', 'alert');
  } catch (err) {
    console.warn('Twitter post failed:', err);
  }
}

// Init push status on load
window.addEventListener('load', () => setTimeout(initPushStatus, 1500));


let visibilityRadius = 1000;
let currentLaunches = [];

// ============================================================
// PRO / BETA STATE
// ============================================================
let PRO_UNLOCKED = false;   // set true after verified session
let userEmail = null;       // set after beta signup or token auth

// Check for pro_token in URL (magic link from approval email)
(function checkProToken() {
  const params = new URLSearchParams(window.location.search);
  const token = params.get('pro_token');
  if (token) {
    try {
      const decoded = atob(token);
      if (decoded && decoded.includes('@')) {
        userEmail = decoded;
        localStorage.setItem('lw_email', decoded);
        // Clean the token from URL without page reload
        const clean = window.location.pathname + window.location.hash;
        window.history.replaceState({}, '', clean);
        // Verify with server
        verifyProSession(decoded);
      }
    } catch(e) {}
  } else {
    // Check if we have a stored email from previous session
    const stored = localStorage.getItem('lw_email');
    if (stored) {
      userEmail = stored;
      verifyProSession(stored);
    }
  }
})();

async function verifyProSession(email) {
  try {
    const res = await fetch('/.netlify/functions/verify-pro', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    });
    const data = await res.json();
    if (data.isPro) {
      unlockPro(email);
    }
  } catch(e) {
    // Silently fail -- free tier works fine without network
  }
}

function unlockPro(email) {
  PRO_UNLOCKED = true;
  userEmail = email;
  localStorage.setItem('lw_email', email);
  // v3.1.1 -- kick GLSS overlay load immediately when Pro flips on, otherwise
  // the first auto-load fires before Pro verification completes and bails.
  // v3.1.2 -- also start the refresh interval here as a safety net in case
  // the page-level startGlssRefresh setTimeout already ran and bailed before
  // map was ready (no longer happens with self-rescheduling but keep belt+suspenders).
  try {
    if (typeof loadGlssOverlay === 'function') loadGlssOverlay();
    if (typeof startGlssRefresh === 'function') startGlssRefresh();
  } catch(e) {}
  // Unlock history tab appearance
  const _ht = document.getElementById('history-tab');
  if (_ht) { _ht.style.opacity = '1'; _ht.innerHTML = 'HISTORY'; }
  // Remove pro-locked styling from all Pro cards
  document.querySelectorAll('.pro-theme-card').forEach(c => {
    c.classList.remove('pro-locked');
    c.style.opacity = '1';
    c.style.filter = 'none';
  });
  document.querySelectorAll('.pro-sound-card').forEach(c => {
    c.classList.remove('pro-locked');
    c.style.opacity = '1';
    c.style.filter = 'none';
  });
  // Update Pro Beta button → show "PRO ✓"
  const btn = document.getElementById('pro-beta-btn');
  if (btn) {
    btn.textContent = '✓ PRO ACTIVE';
    btn.classList.add('unlocked');
    btn.onclick = null;
    btn.removeAttribute('href');
    btn.style.cursor = 'default';
  }
  const mobileCta = document.getElementById('mobile-beta-cta');
  if (mobileCta) {
    mobileCta.textContent = '⚡ PRO';
    mobileCta.style.borderColor = '#00BFFF';
    mobileCta.style.color = '#00BFFF';
    mobileCta.removeAttribute('href');
  }
  log('PRO ACCESS GRANTED -- ALL SYSTEMS UNLOCKED', 'alert');
}



// ============================================================
// LOCATION PRESETS + SWITCHER
// ============================================================
const LOCATION_PRESETS = [
  // ── LAUNCH SITES ──────────────────────────────────────────
  { name: "KENNEDY SPACE CENTER, FL",  lat: 28.3922, lng: -80.6077, elev: 3,   region: "LAUNCH SITES" },
  { name: "STARBASE, TX",              lat: 25.9969, lng: -97.1547, elev: 5,   region: "LAUNCH SITES" },
  { name: "VANDENBERG SFB, CA",        lat: 34.7420, lng: -120.5724, elev: 115, region: "LAUNCH SITES" },
  { name: "WALLOPS ISLAND, VA",        lat: 37.9402, lng: -75.4664, elev: 3,   region: "LAUNCH SITES" },
  { name: "PACIFIC SPACEPORT, AK",     lat: 57.4355, lng: -152.3378, elev: 30,  region: "LAUNCH SITES" },
  // ── FLORIDA ───────────────────────────────────────────────
  { name: "CAPE CANAVERAL, FL",        lat: 28.3922, lng: -80.6077, elev: 3,   region: "FLORIDA" },
  { name: "MIAMI, FL",                 lat: 25.7617, lng: -80.1918, elev: 2,   region: "FLORIDA" },
  { name: "ORLANDO, FL",               lat: 28.5383, lng: -81.3792, elev: 52,  region: "FLORIDA" },
  { name: "TAMPA, FL",                 lat: 27.9506, lng: -82.4572, elev: 14,  region: "FLORIDA" },
  { name: "JACKSONVILLE, FL",          lat: 30.3322, lng: -81.6557, elev: 10,  region: "FLORIDA" },
  { name: "TALLAHASSEE, FL",           lat: 30.4518, lng: -84.2807, elev: 55,  region: "FLORIDA" },
  { name: "KEY WEST, FL",              lat: 24.5551, lng: -81.7800, elev: 1,   region: "FLORIDA" },
  { name: "PENSACOLA, FL",             lat: 30.4213, lng: -87.2169, elev: 33,  region: "FLORIDA" },
  // ── GULF COAST ────────────────────────────────────────────
  { name: "NEW ORLEANS, LA",           lat: 29.9511, lng: -90.0715, elev: 1,   region: "GULF COAST" },
  { name: "HOUSTON, TX",               lat: 29.7604, lng: -95.3698, elev: 15,  region: "GULF COAST" },
  { name: "GALVESTON, TX",             lat: 29.3013, lng: -94.7977, elev: 2,   region: "GULF COAST" },
  { name: "CORPUS CHRISTI, TX",        lat: 27.8006, lng: -97.3964, elev: 13,  region: "GULF COAST" },
  { name: "BROWNSVILLE, TX",           lat: 25.9017, lng: -97.4975, elev: 7,   region: "GULF COAST" },
  { name: "MOBILE, AL",                lat: 30.6954, lng: -88.0399, elev: 19,  region: "GULF COAST" },
  { name: "BILOXI, MS",                lat: 30.3960, lng: -88.8853, elev: 3,   region: "GULF COAST" },
  // ── GEORGIA / CAROLINAS ───────────────────────────────────
  { name: "SAVANNAH, GA",              lat: 32.0809, lng: -81.0912, elev: 15,  region: "GA/SC/NC" },
  { name: "CHARLESTON, SC",            lat: 32.7765, lng: -79.9311, elev: 6,   region: "GA/SC/NC" },
  { name: "MYRTLE BEACH, SC",          lat: 33.6891, lng: -78.8867, elev: 9,   region: "GA/SC/NC" },
  { name: "WILMINGTON, NC",            lat: 34.2257, lng: -77.9447, elev: 9,   region: "GA/SC/NC" },
  { name: "CHARLOTTE, NC",             lat: 35.2271, lng: -80.8431, elev: 229, region: "GA/SC/NC" },
  { name: "RALEIGH, NC",               lat: 35.7796, lng: -78.6382, elev: 96,  region: "GA/SC/NC" },
  { name: "ATLANTA, GA",               lat: 33.7490, lng: -84.3880, elev: 320, region: "GA/SC/NC" },
  // ── VIRGINIA / MID-ATLANTIC ───────────────────────────────
  { name: "VIRGINIA BEACH, VA",        lat: 36.8529, lng: -75.9780, elev: 6,   region: "MID-ATLANTIC" },
  { name: "NORFOLK, VA",               lat: 36.8508, lng: -76.2859, elev: 4,   region: "MID-ATLANTIC" },
  { name: "RICHMOND, VA",              lat: 37.5407, lng: -77.4360, elev: 52,  region: "MID-ATLANTIC" },
  { name: "WASHINGTON, DC",            lat: 38.9072, lng: -77.0369, elev: 9,   region: "MID-ATLANTIC" },
  { name: "BALTIMORE, MD",             lat: 39.2904, lng: -76.6122, elev: 13,  region: "MID-ATLANTIC" },
  { name: "PITTSBURGH, PA",            lat: 40.4406, lng: -79.9959, elev: 240, region: "MID-ATLANTIC" },
  { name: "OCEAN CITY, MD",            lat: 38.3365, lng: -75.0849, elev: 2,   region: "MID-ATLANTIC" },
  // ── NORTHEAST ─────────────────────────────────────────────
  { name: "PHILADELPHIA, PA",          lat: 39.9526, lng: -75.1652, elev: 12,  region: "NORTHEAST" },
  { name: "NEW YORK, NY",              lat: 40.7128, lng: -74.0060, elev: 10,  region: "NORTHEAST" },
  { name: "LONG ISLAND, NY",           lat: 40.7891, lng: -73.1350, elev: 10,  region: "NORTHEAST" },
  { name: "BOSTON, MA",                lat: 42.3601, lng: -71.0589, elev: 9,   region: "NORTHEAST" },
  { name: "PROVIDENCE, RI",            lat: 41.8240, lng: -71.4128, elev: 15,  region: "NORTHEAST" },
  { name: "NEWPORT, RI",               lat: 41.4901, lng: -71.3128, elev: 8,   region: "NORTHEAST" },
  { name: "PORTLAND, ME",              lat: 43.6591, lng: -70.2568, elev: 14,  region: "NORTHEAST" },
  { name: "BURLINGTON, VT",            lat: 44.4759, lng: -73.2121, elev: 100, region: "NORTHEAST" },
  { name: "MANCHESTER, NH",            lat: 42.9956, lng: -71.4548, elev: 88,  region: "NORTHEAST" },
  // ── GREAT LAKES ───────────────────────────────────────────
  { name: "CHICAGO, IL",               lat: 41.8781, lng: -87.6298, elev: 181, region: "GREAT LAKES" },
  { name: "DETROIT, MI",               lat: 42.3314, lng: -83.0458, elev: 183, region: "GREAT LAKES" },
  { name: "CLEVELAND, OH",             lat: 41.4993, lng: -81.6944, elev: 201, region: "GREAT LAKES" },
  { name: "MILWAUKEE, WI",             lat: 43.0389, lng: -87.9065, elev: 193, region: "GREAT LAKES" },
  { name: "MINNEAPOLIS, MN",           lat: 44.9778, lng: -93.2650, elev: 260, region: "GREAT LAKES" },
  // ── WEST COAST ────────────────────────────────────────────
  { name: "LOS ANGELES, CA",           lat: 34.0522, lng: -118.2437, elev: 71,  region: "WEST COAST" },
  { name: "SAN DIEGO, CA",             lat: 32.7157, lng: -117.1611, elev: 20,  region: "WEST COAST" },
  { name: "SAN FRANCISCO, CA",         lat: 37.7749, lng: -122.4194, elev: 16,  region: "WEST COAST" },
  { name: "SANTA BARBARA, CA",         lat: 34.4208, lng: -119.6982, elev: 18,  region: "WEST COAST" },
  { name: "SEATTLE, WA",               lat: 47.6062, lng: -122.3321, elev: 56,  region: "WEST COAST" },
  { name: "PORTLAND, OR",              lat: 45.5051, lng: -122.6750, elev: 15,  region: "WEST COAST" },
  { name: "SACRAMENTO, CA",            lat: 38.5816, lng: -121.4944, elev: 9,   region: "WEST COAST" },
  { name: "LAS VEGAS, NV",             lat: 36.1699, lng: -115.1398, elev: 610, region: "WEST COAST" },
  { name: "PHOENIX, AZ",               lat: 33.4484, lng: -112.0740, elev: 331, region: "WEST COAST" },
  { name: "ANCHORAGE, AK",             lat: 61.2181, lng: -149.9003, elev: 31,  region: "WEST COAST" },
  { name: "HONOLULU, HI",              lat: 21.3069, lng: -157.8583, elev: 5,   region: "WEST COAST" },
  // ── INTERNATIONAL ─────────────────────────────────────────
  { name: "TORONTO, CANADA",           lat: 43.6532, lng: -79.3832,  elev: 76,   region: "INTERNATIONAL" },
  { name: "MONTREAL, CANADA",          lat: 45.5017, lng: -73.5673,  elev: 36,   region: "INTERNATIONAL" },
  { name: "VANCOUVER, CANADA",         lat: 49.2827, lng: -123.1207, elev: 70,   region: "INTERNATIONAL" },
  { name: "MEXICO CITY, MEXICO",       lat: 19.4326, lng: -99.1332,  elev: 2240, region: "INTERNATIONAL" },
  { name: "CANCUN, MEXICO",            lat: 21.1619, lng: -86.8515,  elev: 10,   region: "INTERNATIONAL" },
  // ── GLOBAL ────────────────────────────────────────────────
  { name: "LONDON, UK",                lat: 51.5074,  lng: -0.1278,   elev: 11,  region: "GLOBAL" },
  { name: "PARIS, FRANCE",             lat: 48.8566,  lng: 2.3522,    elev: 35,  region: "GLOBAL" },
  { name: "NASSAU, BAHAMAS",           lat: 25.0480,  lng: -77.3554,  elev: 3,   region: "GLOBAL" },
  { name: "BERMUDA",                   lat: 32.3078,  lng: -64.7505,  elev: 10,  region: "GLOBAL" },
  { name: "SAN JUAN, PUERTO RICO",     lat: 18.4655,  lng: -66.1057,  elev: 7,   region: "GLOBAL" },
  { name: "HAVANA, CUBA",              lat: 23.1136,  lng: -82.3666,  elev: 12,  region: "GLOBAL" },
  { name: "KINGSTON, JAMAICA",         lat: 17.9714,  lng: -76.7936,  elev: 10,  region: "GLOBAL" },
  { name: "SAO PAULO, BRAZIL",         lat: -23.5505, lng: -46.6333,  elev: 760, region: "GLOBAL" },
  { name: "KOUROU, FR. GUIANA",        lat: 5.2390,   lng: -52.7683,  elev: 5,   region: "GLOBAL" },
  { name: "TOKYO, JAPAN",              lat: 35.6762,  lng: 139.6503,  elev: 40,  region: "GLOBAL" },
  { name: "SYDNEY, AUSTRALIA",         lat: -33.8688, lng: 151.2093,  elev: 39,  region: "GLOBAL" },
  { name: "SINGAPORE",                 lat: 1.3521,   lng: 103.8198,  elev: 15,  region: "GLOBAL" },
  { name: "MUMBAI, INDIA",             lat: 19.0760,  lng: 72.8777,   elev: 11,  region: "GLOBAL" },
  { name: "DUBAI, UAE",                lat: 25.2048,  lng: 55.2708,   elev: 10,  region: "GLOBAL" },
  { name: "JOHANNESBURG, SA",          lat: -26.2041, lng: 28.0473,   elev: 1753, region: "GLOBAL" },
  { name: "BAIKONUR, KAZAKHSTAN",      lat: 45.9200,  lng: 63.3420,   elev: 90,  region: "GLOBAL" },
  { name: "JIUQUAN, CHINA",            lat: 40.9581,  lng: 100.2910,  elev: 1000, region: "GLOBAL" },
];

let observerMarker = null;

function initLocationPresets() {
  const container = document.getElementById('loc-presets');
  container.style.cssText = 'display:flex;flex-direction:column;gap:2px;';

  // Group by region
  const regions = [...new Set(LOCATION_PRESETS.map(l => l.region))];
  regions.forEach(region => {
    // Region label
    const regionLabel = document.createElement('div');
    regionLabel.style.cssText = 'font-size:0.55rem;color:var(--blue-dark);letter-spacing:0.12em;margin-top:4px;margin-bottom:2px;';
    regionLabel.textContent = `-- ${region} --`;
    container.appendChild(regionLabel);

    // Buttons row
    const row = document.createElement('div');
    row.style.cssText = 'display:flex;flex-wrap:wrap;gap:3px;';
    LOCATION_PRESETS.filter(l => l.region === region).forEach(loc => {
      const btn = document.createElement('button');
      const shortName = loc.name.split(',')[0];
      btn.textContent = shortName;
      btn.title = `${loc.name} -- ${Math.abs(loc.lat).toFixed(2)}°${loc.lat>=0?'N':'S'}`;
      const isActive = loc.name === OBSERVER.name;
      btn.style.cssText = `
        background: ${isActive ? 'rgba(0,191,255,0.12)' : 'rgba(0,8,20,0.6)'};
        border: 1px solid ${isActive ? 'var(--blue)' : 'var(--blue-dark)'};
        color: ${isActive ? 'var(--blue)' : 'var(--blue-dim)'};
        font-family: 'VT323', monospace; font-size: 0.78rem;
        padding: 1px 7px; cursor: none; letter-spacing: 0.04em;
        transition: all 0.12s; white-space: nowrap;
      `;
      btn.onmouseover = () => { if(loc.name!==OBSERVER.name){ btn.style.borderColor='#00BFFF'; btn.style.color='#00BFFF'; } };
      btn.onmouseout  = () => { if(loc.name!==OBSERVER.name){ btn.style.borderColor='var(--blue-dark)'; btn.style.color='var(--blue-dim)'; } };
      btn.onclick = () => {
        setObserverLocation(loc.lat, loc.lng, loc.name, loc.elev);
        // Rebuild presets to update active highlight
        container.innerHTML = '';
        initLocationPresets();
      };
      row.appendChild(btn);
    });
    container.appendChild(row);
  });
}

function toggleLocEditor() {
  const ed = document.getElementById('loc-editor');
  const btn = document.getElementById('loc-edit-btn');
  const visible = ed.style.display !== 'none';
  ed.style.display = visible ? 'none' : 'block';
  btn.textContent = visible ? '⌖ CHANGE' : '✕ CLOSE';
  btn.style.borderColor = visible ? 'var(--amber)' : '#ff2020';
  btn.style.color = visible ? 'var(--amber)' : '#ff2020';
}

function setObserverLocation(lat, lng, name, elev=0) {
  try {
  OBSERVER = { lat, lng, name, elev };

  // Update display -- all guarded against null
  const latStr = `${Math.abs(lat).toFixed(4)}°${lat>=0?'N':'S'}`;
  const lngStr = `${Math.abs(lng).toFixed(4)}°${lng>=0?'E':'W'}`;
  const obsLoc = document.getElementById('obs-loc-display');
  const obsCrd = document.getElementById('obs-coords-display');
  if (obsLoc) obsLoc.textContent = `▶ ${name}`;
  if (obsCrd) obsCrd.innerHTML = `${latStr} &nbsp; ${lngStr} &nbsp; ELEV: ${elev}M`;

  // Update topbar observer
  const hdrObs = document.getElementById('hdr-observer');
  if (hdrObs) hdrObs.textContent = name.split(',')[0];
  document.querySelectorAll('.meta-item').forEach(item => {
    const lbl = item.querySelector('.meta-label');
    const val = item.querySelector('.meta-val');
    if (lbl && val && lbl.textContent === 'OBSERVER:') {
      val.textContent = name.split(',')[0];
    }
  });

  // Update mobile status bar
  const mobileObs = document.getElementById('mobile-obs');
  if (mobileObs) mobileObs.textContent = name.split(',')[0];

  // Reposition observer map marker
  if (observerMarker) map.removeLayer(observerMarker);
  const obsIcon = L.divIcon({
    html: `<div style="width:16px;height:16px;background:transparent;border:2px solid #00BFFF;border-radius:50%;box-shadow:0 0 12px #00BFFF;position:relative;">
      <div style="position:absolute;top:50%;left:50%;width:6px;height:6px;background:#00BFFF;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #00BFFF;"></div>
      <div style="position:absolute;top:50%;left:50%;width:30px;height:30px;border:1px solid rgba(0,191,255,0.3);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 2s infinite;"></div>
    </div>`,
    className: '', iconAnchor: [8,8]
  });
  observerMarker = L.marker([lat, lng], {icon: obsIcon})
    .addTo(map)
    .bindTooltip(`[ OBSERVER: ${name} ]`, { direction: 'right' });

  // Recenter map
  map.setView([lat, lng], 3, { animate: true, duration: 0.8 });

  // Redraw visibility circle + markers
  drawVisibilityCircle(visibilityRadius);
  renderMapMarkers();
  renderLaunchList();

  // Refresh weather for new location
  fetchWeatherForLocation(lat, lng, name);
  // Refresh mobile panels
  setTimeout(() => { renderMobileLaunches(); renderMobileVessels(); updateMobileStatusBar(); }, 200);

  // Close editor
  const ed = document.getElementById('loc-editor');
  if (ed.style.display !== 'none') toggleLocEditor();

  if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
  log(`OBSERVER RELOCATED: ${name} // ${latStr} ${lngStr}`, 'alert');
  } catch(e) { console.error('setObserverLocation error:', e.message, e.stack); }
}

// ── CUSTOM LOCATION GEOCODER ─────────────────────────────────────────────────
// Uses Nominatim (OSM) -- free, no API key. Rate limit: 1 req/s, handled by flag.
let _geocodeInFlight = false;
function geocodeCustomLocation() {
  if (_geocodeInFlight) return;
  const input  = document.getElementById('custom-loc-input');
  const status = document.getElementById('custom-loc-status');
  const q = (input && input.value.trim()) || '';
  if (!q) return;

  // Lat/lng direct entry: "28.39, -80.60" or "-33.87,151.21"
  const coordMatch = q.match(/^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/);
  if (coordMatch) {
    const lat = parseFloat(coordMatch[1]);
    const lng = parseFloat(coordMatch[2]);
    if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
      const name = `${Math.abs(lat).toFixed(2)}°${lat>=0?'N':'S'} ${Math.abs(lng).toFixed(2)}°${lng>=0?'E':'W'}`;
      setObserverLocation(lat, lng, name, 0);
      if (status) { status.textContent = `▶ LOCKED: ${name}`; status.style.color = 'var(--green)'; }
      if (input)  input.value = '';
      return;
    }
  }

  if (status) { status.textContent = 'SEARCHING...'; status.style.color = 'var(--blue-dim)'; }
  _geocodeInFlight = true;
  fetch(
    `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(q)}&format=json&limit=1`,
    { headers: { 'Accept-Language': 'en', 'User-Agent': 'LaunchWatch/2.63 launchwatch.app' } }
  )
    .then(r => r.json())
    .then(results => {
      _geocodeInFlight = false;
      if (!results || !results.length) {
        if (status) { status.textContent = 'NOT FOUND -- TRY A DIFFERENT QUERY'; status.style.color = '#FF4444'; }
        return;
      }
      const r   = results[0];
      const lat = parseFloat(r.lat);
      const lng = parseFloat(r.lon);
      // Use first two comma-separated parts of display_name, uppercased
      const name = r.display_name.split(',').slice(0, 2).join(',').trim().toUpperCase();
      setObserverLocation(lat, lng, name, 0);
      if (status) { status.textContent = `▶ ${name}`; status.style.color = 'var(--green)'; }
      if (input)  input.value = '';
      setTimeout(() => { if (status) status.textContent = ''; }, 5000);
    })
    .catch(() => {
      _geocodeInFlight = false;
      if (status) { status.textContent = 'GEOCODE ERROR -- CHECK NETWORK'; status.style.color = '#FF4444'; }
    });
}

let allLaunches = [];
let activeCard = null;
let activeMarkerIdx = null;
let issMarker = null;
let issPath = [];
let issPolyline = null;
const mapMarkers = [];
const mapPaths = [];

/* ── T-minus color gradient (phosphor green → hot red) ──────────── */
const NOTMAR_TMINUS_STOPS = [
  { h:   72, c: [  0, 255, 136] }, // phosphor green
  { h:   24, c: [170, 204,  51] }, // yellow-green
  { h:    6, c: [255, 204,   0] }, // amber
  { h:    1, c: [255, 136,   0] }, // orange
  { h:    0, c: [255,  51,  51] }, // hot red
];
function notmarColorForTMinus(hours) {
  if (hours == null || hours <= 0) return [255, 51, 51];
  if (hours >= 72) return NOTMAR_TMINUS_STOPS[0].c;
  for (let i = 0; i < NOTMAR_TMINUS_STOPS.length - 1; i++) {
    const hi = NOTMAR_TMINUS_STOPS[i], lo = NOTMAR_TMINUS_STOPS[i + 1];
    if (hours <= hi.h && hours > lo.h) {
      const t = (hours - lo.h) / (hi.h - lo.h);
      return [
        Math.round(lo.c[0] + (hi.c[0] - lo.c[0]) * t),
        Math.round(lo.c[1] + (hi.c[1] - lo.c[1]) * t),
        Math.round(lo.c[2] + (hi.c[2] - lo.c[2]) * t),
      ];
    }
  }
  return NOTMAR_TMINUS_STOPS[NOTMAR_TMINUS_STOPS.length - 1].c;
}
function notmarRgb(c, a = 1) { return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${a})`; }

/* ── Multi-site polish (v0.3) ─────────────────────────────────────
   Coarse pad-coordinate boxes for the four launch sites we render
   bad-ass treatments for. Returns short site code so CSS classes
   like .notmar-site-ksc / -vafb / -wff / -bc can apply per-site
   animation offsets and PRIMARY DOMINANT dimming.
   ───────────────────────────────────────────────────────────── */
const LW_SITE_BOXES = [
  // [code, latMin, latMax, lngMin, lngMax]
  ['KSC',  28.30, 28.80, -80.80, -80.40],   // Cape Canaveral / KSC
  ['VAFB', 34.50, 34.80, -120.80, -120.40], // Vandenberg
  ['WFF',  37.70, 38.00, -75.55, -75.40],   // Wallops
  ['BC',   25.90, 26.10, -97.25, -97.10],   // Boca Chica / Starbase
];
function detectLaunchSite(launch) {
  const pad = launch && launch.pad;
  if (!pad) return 'OTHER';
  const lat = parseFloat(pad.latitude);
  const lng = parseFloat(pad.longitude);
  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return 'OTHER';
  for (const [code, latMin, latMax, lngMin, lngMax] of LW_SITE_BOXES) {
    if (lat >= latMin && lat <= latMax && lng >= lngMin && lng <= lngMax) return code;
  }
  return 'OTHER';
}
function notmarSiteClass(launch) {
  const code = detectLaunchSite(launch);
  return code === 'OTHER' ? '' : `notmar-site-${code.toLowerCase()}`;
}

/* PRIMARY DOMINANT mode: when a launch is focused, dim the ambient
   zones at OTHER sites instead of hiding them entirely. Gives the
   map more life while still pulling focus to the selected launch.
   Toggle false to fall back to Stage-3 hide-on-focus behavior. */
let LW_PRIMARY_DOMINANT = true;

// Active launch arc + booster ring layers
let activeLaunchArc   = null;   // geodesic trajectory line for selected launch
let activeLaunchArcFan = [];    // azimuth fan lines (min/max bounds)
let activeBoosterRing  = null;  // pulsing circle around on-station drone ship
let activeBoosterRingPulse = []; // extra pulse rings for animation
let selectedLaunch = null;      // currently selected launch (for ring redraw after vessel fetch)

// ── Ambient NOTMAR layer (Stage 3) ──────────────────────────────────────────
// Persistent soft phosphor rendering of all upcoming-launch NOTMAR zones when
// no launch is selected. Hidden on selection / replay / historical view so it
// never fights the focused treatment. Re-rendered whenever allLaunches changes.
let ambientNotmarLayer = null;  // L.layerGroup holding all ambient polygons
let _ambientNotmarVisible = false;

function ensureAmbientNotmarLayer() {
  if (!ambientNotmarLayer) ambientNotmarLayer = L.layerGroup();
  return ambientNotmarLayer;
}

function renderAmbientNotmarZones() {
  ensureAmbientNotmarLayer();
  ambientNotmarLayer.clearLayers();
  _notmarAnimAmbient = []; // v2.62 -- clear Canvas anim registry on layer refresh
  if (!Array.isArray(allLaunches)) return;

  let offsetIdx = 0;
  for (const launch of allLaunches) {
    // v2.21 (2026-04-23) -- fall back to notmar_pad_poly for RTLS-only
    // missions (Falcon Heavy). Without this, FH BNMs that populate only
    // notmar_pad_poly are invisible in ambient state.
    const ambientPoly = launch && (launch.notmar_booster_poly || launch.notmar_pad_poly);
    if (!launch || !ambientPoly) continue;

    // Skip launches that lifecycle says shouldn't show NOTMAR (e.g. recovery complete)
    try {
      if (typeof getLifecycleDrawFlags === 'function') {
        const lc = getLifecycleDrawFlags(launch);
        if (lc && lc.show_notmar === false) continue;
      }
    } catch(e) { /* if flags fail, render anyway -- better than nothing */ }

    let bPoly;
    try {
      bPoly = typeof ambientPoly === 'string'
        ? JSON.parse(ambientPoly) : ambientPoly;
    } catch(e) { continue; }
    if (!Array.isArray(bPoly) || bPoly.length < 3) continue;
    const bLL = bPoly.map(p => [p.lat, p.lon]);

    const tMinusHrs = launch.net ? (new Date(launch.net) - Date.now()) / 3.6e6 : null;
    const tmColor = notmarColorForTMinus(tMinusHrs);
    const strokeA = notmarRgb(tmColor, 0.80);
    const glowA   = notmarRgb(tmColor, 0.45);
    const offsetClass = `notmar-offset-${offsetIdx % 4}`;
    const siteClass = notmarSiteClass(launch);
    offsetIdx++;

    const { oPhase: _aOP, fPhase: _aFP } = _notmarPhase(offsetIdx - 1, siteClass);
    const poly = L.polygon(bLL, {
      color: strokeA,
      weight: 1.5,
      opacity: 0.72,
      fillColor: strokeA,
      fillOpacity: 0.012,
      dashArray: '6,6',
      className: `notmar-zone-a notmar-ambient ${offsetClass} ${siteClass}`.trim(),
      interactive: false
    });
    // Tag the layer with its site + launch identity so dimming can target
    // OTHER sites on focus AND hide the focused launch's own ambient copy
    // (otherwise its focused Zone A render would overlap this ambient ghost).
    poly._lwSite = detectLaunchSite(launch);
    poly._lwLaunchKey = launch.id || launch.name || null;
    ambientNotmarLayer.addLayer(poly);
    _notmarAnimAmbient.push({ layer: poly, oPhase: _aOP, fPhase: _aFP, params: _NOTMAR_ANIM_PARAMS.ambient });
    _notmarAnimStart();
    // Element exists only after the layer is added to a parent that's on the map.
    // Defer property set to next tick so getElement() returns a real node.
    setTimeout(() => {
      const el = poly.getElement && poly.getElement();
      if (el) {
        el.style.setProperty('--zone-stroke', strokeA);
        el.style.setProperty('--zone-glow', glowA);
      }
    }, 0);
  }
}

function showAmbientNotmar() {
  // Don't show during replay. Focused-launch gate only applies when we're
  // in hide-on-focus mode (LW_PRIMARY_DOMINANT false). When PRIMARY DOMINANT
  // is true, we keep the layer up but dim the non-focused sites instead.
  if (typeof _replayActive !== 'undefined' && _replayActive) return;
  if (selectedLaunch && !LW_PRIMARY_DOMINANT) return;
  ensureAmbientNotmarLayer();
  if (!_ambientNotmarVisible) {
    ambientNotmarLayer.addTo(map);
    _ambientNotmarVisible = true;
  }
}

function hideAmbientNotmar() {
  if (ambientNotmarLayer && _ambientNotmarVisible) {
    map.removeLayer(ambientNotmarLayer);
    _ambientNotmarVisible = false;
  }
}

// v2.62 -- NOTMAR dimming removed. Canvas layers don't support CSS class targeting;
// dimming on ambient NOTMAR/NAVAREA zones not needed.
function dimAmbientNotmarExceptSite(_keepSite) { /* no-op */ }
function clearAmbientDim() { /* no-op */ }

// LL2 landing detail cache -- keyed by launch ID
// Stores: { landing_abbrev, landing_type, landing_location, fetched_at }
// landing_abbrev: 'JRTI' | 'ASOG' | 'OCISLY' | 'LZ-1' | 'LZ-2' | null
const landingDetailCache = {};

// ============================================================
// CUSTOM CURSOR
// ============================================================
const cur = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
  cur.style.left = e.clientX + 'px';
  cur.style.top = e.clientY + 'px';
});

// ============================================================
// BOOT SEQUENCE
// ============================================================
const bootLines = {
  wargames: [
    "G.L.S.S. TERMINAL -- GLOBAL LAUNCH SURVEILLANCE SYSTEM",
    "NORAD SECTOR 7 -- CLASSIFIED ACCESS",
    "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━",
    "",
    "INITIALIZING SUBSYSTEMS...",
    "  [OK] CORE MEMORY.........64K LOADED",
    "  [OK] DISPLAY ADAPTER.....PHOSPHOR CRT",
    "  [OK] NETWORK LINK........CONNECTED",
    "  [OK] SATELLITE UPLINK....ACQUIRED",
    "  [OK] OBSERVER STATION....KSC / 28.39°N -- LAUNCH COMPLEX ACTIVE",
    "",
    "LOADING MODULES:",
    "  [..] LAUNCH MANIFEST.....FETCHING FROM LL2 API",
    "  [..] ISS TRACKER.........OPEN NOTIFY API",
    "  [..] WEATHER SENSOR......OPEN-METEO.COM",
    "  [..] HORIZON MODEL.......SPHERICAL EARTH R=6371KM",
    "",
    "GREETINGS, PROFESSOR FALKEN.",
    "",
    "SHALL WE PLAY A GAME?",
    "",
    "▶ LAUNCHING SURVEILLANCE INTERFACE...",
  ],
  redalert: [
    "C.I.C. TERMINAL -- RED OCTOBER COMBAT INFORMATION CENTER",
    "SOVIET NORTHERN FLEET -- CLASSIFIED -- CAPTAIN RAMIUS COMMANDING",
    "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━",
    "",
    "INITIALIZING SHIP SYSTEMS...",
    "  [OK] REACTOR STATUS......ONLINE -- CATERPILLAR DRIVE READY",
    "  [OK] SONAR ARRAY.........ACTIVE SWEEP MODE",
    "  [OK] NAV COMPUTER........POSITION LOCKED",
    "  [OK] COMMS BLACKOUT......IN EFFECT",
    "  [OK] CONN STATION........KSC / 28.39°N -- THERMAL SIGNATURE ACQUIRED",
    "",
    "LOADING TACTICAL MODULES:",
    "  [..] HOSTILE CONTACTS....FETCHING FROM LL2 API",
    "  [..] SURFACE TARGETS.....TRACKING",
    "  [..] ATMOSPHERIC CONDITIONS..OPEN-METEO.COM",
    "  [..] TORPEDO SOLUTION....SPHERICAL EARTH R=6371KM",
    "",
    "ONE PING ONLY, VASILY.",
    "",
    "WE ARE READY TO DIVE. DA.",
    "",
    "▶ LAUNCHING COMBAT INFORMATION INTERFACE...",
  ],
  c64: [
    "",
    "    **** COMMODORE 64 BASIC V2 ****",
    "",
    " 64K RAM SYSTEM  38911 BASIC BYTES FREE",
    "",
    "READY.",
    "LOAD\"LAUNCHWATCH PRO\",8,1",
    "",
    "SEARCHING FOR LAUNCHWATCH PRO",
    "LOADING",
    "",
    "  [OK] SID CHIP............MOS 6581 ONLINE",
    "  [OK] VIC-II..............PAL 50HZ DISPLAY",
    "  [OK] CIA 1...............TIMER ACTIVE",
    "  [OK] DATASSETTE..........CONNECTED",
    "  [OK] OBSERVER STATION....KSC / 28.39°N",
    "",
    "POKE 53280,0 : POKE 53281,6",
    "LAUNCH MANIFEST: FETCHING...",
    "SYS 49152",
    "",
    "READY.",
    "",
    "▶ LAUNCH SURVEILLANCE SYSTEM LOADED",
  ],
  nes: [
    "",
    "    NINTENDO ENTERTAINMENT SYSTEM",
    "     LAUNCHWATCH PRO  (NTSC)",
    "",
    "   ▶  PRESS START BUTTON",
    "",
    "  [OK] 2A03 CPU...........ONLINE 1.79MHz",
    "  [OK] PPU................READY 256x240",
    "  [OK] PULSE 1............FREQ LOCK",
    "  [OK] TRIANGLE...........BASS LOADED",
    "  [OK] NOISE..............LFSR ACTIVE",
    "  [OK] OBSERVER STATION...KSC 28.39N",
    "",
    "  WORLD 1-1  PLAYER 1  LIVES 3",
    "",
    "  ▶ LAUNCHING SURVEILLANCE INTERFACE...",
  ],
  gameboy: [
    "",
    "     * * *  LAUNCHWATCH  * * *",
    "",
    "  BATTERY: ||||||||..  SOUND: ON",
    "",
    "  [OK] Z80 CPU............4.19MHz",
    "  [OK] DMG-001 LCD........4-SHADE",
    "  [OK] SOUND CH 1-4.......ONLINE",
    "  [OK] OBSERVER...........KSC 28.39N",
    "",
    "  (C) 1989 LAUNCHWATCH CO.",
    "",
    "  ▶ LAUNCHING SURVEILLANCE INTERFACE...",
  ],
  genesis: [
    "  SEGA!",
    "",
    "  SEGA GENESIS - BLAST PROCESSING",
    "  ================================",
    "",
    "  [OK] 68000 CPU..........7.67MHz",
    "  [OK] YM2612 FM..........6 CH ONLINE",
    "  [OK] BLAST PROCESSING...ENGAGED",
    "  [OK] OBSERVER...........KSC 28.39N",
    "",
    "  GENESIS DOES WHAT NINTENDON'T",
    "",
    "  ▶ LAUNCHING SURVEILLANCE INTERFACE...",
  ],
  atari: [
    "",
    "  * ATARI VCS 2600 *",
    "  HAVE FUN!",
    "",
    "  [OK] 6507 CPU...........1.19MHz",
    "  [OK] TIA CHIP...........AUDIO READY",
    "  [OK] RAM................128 BYTES",
    "  [OK] OBSERVER...........KSC 28.39N",
    "",
    "  GAME SELECT: 01  RESET: ON",
    "",
    "  ▶ LAUNCHING SURVEILLANCE INTERFACE...",
  ],
  amiga: [
    "  Workbench  Screen",
    "",
    "  1.LaunchWatch> version",
    "  LaunchWatch 2.0.7 (11.09.1992)",
    "  1.LaunchWatch> avail",
    "  Chip: 1,834,484  Fast: 4,194,304",
    "",
    "  1.LaunchWatch> run orbital_track",
    "  Loading OCS copper list...",
    "  Paula: 4 channels DMA active",
    "  Observer: KSC 28.39N acquired",
    "",
    "  AMIGA - ONLY AMIGA MAKES IT POSSIBLE",
    "",
    "  ▶ LAUNCHING SURVEILLANCE INTERFACE...",
  ],
};

async function runBoot() {
  // Hard cap: 2s max -- if animation takes longer, skip straight to app
  const BOOT_TIMEOUT = 12000; // enough for full sequence
  let done = false;
  const bootTimer = setTimeout(function() {
    if (!done) { done = true; _launchApp(); }
  }, BOOT_TIMEOUT);

  function _launchApp() {
    clearTimeout(bootTimer);
    try { document.getElementById('boot').style.display = 'none'; } catch(_) {}
    try { document.getElementById('app').style.display  = 'flex';  } catch(_) {}
    if (typeof map === 'undefined' || !map) initApp();
  }

  try {
    const el = document.getElementById('boot-text');
    const lines = (typeof bootLines !== 'undefined' && (bootLines[currentPack] || bootLines.wargames)) || ['LAUNCHWATCH ONLINE'];
    if (el && lines) {
      for (const line of lines) {
        if (done) return;
        await typeText(el, line + "\n", 14); // 14ms per char -- readable
        await sleep(60); // pause between lines
      }
      if (!done) await sleep(150);
    }
    if (!done) {
      done = true;
      const bootEl = document.getElementById('boot');
      if (bootEl) { bootEl.style.transition = 'opacity 0.4s'; bootEl.style.opacity = '0'; }
      setTimeout(_launchApp, 450);
    }
  } catch(e) {
    console.warn('[LaunchWatch] Boot error:', e.message);
    if (!done) { done = true; _launchApp(); }
  }
}


function typeText(el, text, speed) {
  return new Promise(resolve => {
    let i = 0;
    const interval = setInterval(() => {
      el.textContent += text[i];
      i++;
      el.scrollTop = el.scrollHeight;
      if (i >= text.length) { clearInterval(interval); resolve(); }
    }, speed);
  });
}
function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

// ============================================================
// MAP INIT
// ============================================================
let map;

// ============================================================
// DAY/NIGHT TERMINATOR
// ============================================================
let terminatorLayer = null;
let terminatorInterval = null;
let terminatorEnabled = false;

function calcSubsolarPoint() {
  const now = new Date();
  const JD  = now / 86400000 + 2440587.5;
  const n   = JD - 2451545.0;
  const L   = (280.460 + 0.9856474 * n) % 360;
  const g   = (357.528 + 0.9856003 * n) % 360;
  const lam = L + 1.915 * Math.sin(g * Math.PI/180) + 0.020 * Math.sin(2*g*Math.PI/180);
  const eps = 23.439 - 0.0000004 * n;
  // Declination (unchanged)
  const sinDec = Math.sin(eps * Math.PI/180) * Math.sin(lam * Math.PI/180);
  const dec    = Math.asin(sinDec) * 180/Math.PI;
  // Right ascension -- use atan2 to account for obliquity (do NOT use lam directly as RA)
  const sinRA  = Math.cos(eps * Math.PI/180) * Math.sin(lam * Math.PI/180);
  const cosRA  = Math.cos(lam * Math.PI/180);
  const RA     = Math.atan2(sinRA, cosRA) * 180/Math.PI;  // degrees, −180 to +180
  // GMST in hours → degrees (positive modulo to avoid JS negative-remainder bugs)
  const GMST   = ((18.697374558 + 24.06570982441908 * n) % 24 + 24) % 24;
  // Sub-solar longitude: where sun is directly overhead (GHA = 0)
  let lon = RA - GMST * 15;
  lon = ((lon % 360) + 360) % 360;   // normalise to 0-360
  if (lon > 180) lon -= 360;          // normalise to −180 to +180
  return { lat: dec, lng: lon };
}

function drawTerminator() {
  if (terminatorLayer) { map.removeLayer(terminatorLayer); terminatorLayer = null; }
  if (!terminatorEnabled) return;

  const { lat: sunLat, lng: sunLng } = calcSubsolarPoint();

  const CanvasOverlay = L.Layer.extend({
    onAdd(map) {
      this._map = map;
      this._canvas = L.DomUtil.create('canvas', 'leaflet-terminator-canvas');
      // Append directly to map container -- no pane transform interference
      this._canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:450;width:100%;height:100%;';
      map.getContainer().appendChild(this._canvas);
      map.on('move zoom resize moveend zoomend', this._redraw, this);
      map.on('zoomstart', this._startRaf, this);
      map.on('zoomend',   this._stopRaf,  this);
      this._redraw();
    },
    onRemove(map) {
      map.off('move zoom resize moveend zoomend', this._redraw, this);
      map.off('zoomstart', this._startRaf, this);
      map.off('zoomend',   this._stopRaf,  this);
      this._stopRaf();
      if (this._canvas && this._canvas.parentNode) this._canvas.parentNode.removeChild(this._canvas);
    },
    _startRaf() {
      this._zooming = true;
      const loop = () => {
        if (!this._zooming) return;
        this._redraw();
        this._rafId = requestAnimationFrame(loop);
      };
      this._rafId = requestAnimationFrame(loop);
    },
    _stopRaf() {
      this._zooming = false;
      if (this._rafId) { cancelAnimationFrame(this._rafId); this._rafId = null; }
      this._redraw();
    },
    _redraw() {
      const map = this._map;
      const container = map.getContainer();
      const w = container.offsetWidth;
      const h = container.offsetHeight;
      const canvas = this._canvas;
      canvas.width  = w;
      canvas.height = h;

      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, w, h);

      const sunLatR = sunLat * Math.PI / 180;
      const sunLngR = sunLng * Math.PI / 180;

      const step = 2;
      const imgData = ctx.createImageData(w, h);
      const data = imgData.data;

      for (let py = 0; py < h; py += step) {
        for (let px = 0; px < w; px += step) {
          const ll = map.containerPointToLatLng([px, py]);
          const ptLatR = ll.lat * Math.PI / 180;
          const ptLngR = ll.lng * Math.PI / 180;
          const cosAngle = Math.sin(sunLatR) * Math.sin(ptLatR) +
                           Math.cos(sunLatR) * Math.cos(ptLatR) * Math.cos(ptLngR - sunLngR);
          if (cosAngle < 0) {
            for (let dy = 0; dy < step && py+dy < h; dy++) {
              for (let dx = 0; dx < step && px+dx < w; dx++) {
                const i = ((py+dy) * w + (px+dx)) * 4;
                data[i]   = 0;
                data[i+1] = 8;
                data[i+2] = 32;
                data[i+3] = 100;
              }
            }
          }
        }
      }
      ctx.putImageData(imgData, 0, 0);
    }
  });

  terminatorLayer = new CanvasOverlay();
  terminatorLayer.addTo(map);
}
function toggleTerminator(enable) {
  terminatorEnabled = enable;
  if (enable) {
    drawTerminator();
    if (!terminatorInterval) terminatorInterval = setInterval(drawTerminator, 60000);
  } else {
    if (terminatorLayer) { map.removeLayer(terminatorLayer); terminatorLayer = null; }
    if (terminatorInterval) { clearInterval(terminatorInterval); terminatorInterval = null; }
  }
}

function handleTerminatorToggle() {
  toggleTerminator(!terminatorEnabled);
  const btn = document.getElementById('terminator-toggle-btn');
  if (btn) {
    btn.textContent = terminatorEnabled ? 'ON' : 'OFF';
    btn.style.color = terminatorEnabled ? '#00BFFF' : 'var(--blue-dim)';
  }
}

function initMap() {
  map = L.map('map', {
    preferCanvas: true,
    center: [28.3922, -80.6077],
    zoom: 3,
    zoomControl: true,
    attributionControl: false,
    dragging: true,
    tap: true,
    tapTolerance: 15,
    touchZoom: true,
    bounceAtZoomLimits: false
  });
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);

  // Dedicated pane for day/night terminator -- sits above tiles but below all markers/arcs
  map.createPane('terminatorPane');
  map.getPane('terminatorPane').style.zIndex = 200;
  map.getPane('terminatorPane').style.pointerEvents = 'none';

  // Observer marker
  const obsIcon = L.divIcon({
    html: `<div style="
      width:16px;height:16px;
      background:transparent;
      border:2px solid #00BFFF;
      border-radius:50%;
      box-shadow:0 0 12px #00BFFF;
      position:relative;
    ">
      <div style="position:absolute;top:50%;left:50%;width:6px;height:6px;background:#00BFFF;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #00BFFF;"></div>
      <div style="position:absolute;top:50%;left:50%;width:30px;height:30px;border:1px solid rgba(0,191,255,0.3);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 2s infinite;"></div>
    </div>
    <style>@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0.5);opacity:1}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}</style>`,
    className: '', iconAnchor: [8,8]
  });

  observerMarker = L.marker([OBSERVER.lat, OBSERVER.lng], {icon: obsIcon})
    .addTo(map)
    .bindTooltip(`[ OBSERVER: ${OBSERVER.name} ]`, { className: 'leaflet-tooltip', direction: 'right' });

  drawVisibilityCircle(visibilityRadius);

  // ── Live overlay mask: fade theme effects inside visibility radius ──
  function updateOverlayMask() {
    const overlay = document.getElementById('theme-overlay');
    if (!overlay) return;
    const pt = map.latLngToContainerPoint([OBSERVER.lat, OBSERVER.lng]);
    const mapEl = document.getElementById('map');
    const mapRect = mapEl.getBoundingClientRect();
    const overlayRect = overlay.getBoundingClientRect();
    const cx = pt.x + (mapRect.left - overlayRect.left);
    const cy = pt.y + (mapRect.top - overlayRect.top);
    const metersPerPx = map.distance(
      map.containerPointToLatLng([0,0]),
      map.containerPointToLatLng([0,1])
    );
    const rPx = (visibilityRadius * 1000) / metersPerPx;
    const fadeStart = rPx * 0.45;
    const fadeEnd   = rPx * 0.88;
    const mask = `radial-gradient(ellipse ${Math.round(fadeEnd)}px ${Math.round(fadeEnd)}px at ${Math.round(cx)}px ${Math.round(cy)}px, transparent ${Math.round(fadeStart)}px, black ${Math.round(fadeEnd)}px)`;
    overlay.style.maskImage = mask;
    overlay.style.webkitMaskImage = mask;
  }
  map.on('move zoom moveend zoomend', updateOverlayMask);
  window.addEventListener('resize', updateOverlayMask);
  window._updateOverlayMask = updateOverlayMask;
  loadBorders();

  // Resize HUD canvas on map resize
  map.on('resize', () => { drawHudTape(hudBearing); });
  window.addEventListener('resize', () => { drawHudTape(hudBearing); });

  // Add Pro-locked international markers
  addProLockedMarkers();
}

// ── GEOJSON COUNTRY + STATE BORDERS ──────────────────────────
function loadBorders() {
  // Border style: solid line, same hue as vis circle but at ~25% intensity
  // Vis circle is color:#00BFFF weight:1 opacity:1 -- so we do weight:0.7 opacity:0.07
  const getThemeColor = () => {
    const s = getComputedStyle(document.documentElement);
    return s.getPropertyValue('--blue').trim() || '#00BFFF';
  };

  const countryStyle = () => ({
    color: getThemeColor(),
    weight: 0.7,
    opacity: 0.07,
    fillOpacity: 0,
    interactive: false,
    dashArray: null   // solid line
  });

  const stateStyle = () => ({
    color: getThemeColor(),
    weight: 0.8,
    opacity: 0.09,
    fillOpacity: 0,
    interactive: false,
    dashArray: null   // solid line
  });

  // Countries
  fetch('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson')
    .then(r => r.json())
    .then(data => {
      const layer = L.geoJSON(data, { style: countryStyle(), interactive: false });
      layer.addTo(map);
      // Recolor on theme change
      window._countryLayer = layer;
    })
    .catch(() => {});

  // US States
  fetch('https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json')
    .then(r => r.json())
    .then(data => {
      const layer = L.geoJSON(data, { style: stateStyle(), interactive: false });
      layer.addTo(map);
      window._stateLayer = layer;
    })
    .catch(() => {});
}

// ── PRO-LOCKED MARKERS ────────────────────────────────────────
const PRO_LOCATIONS = [
  // Caribbean -- great Starship/Gulf trajectory visibility
  { name: "NASSAU, BAHAMAS",        lat: 25.0480,  lng: -77.3554  },
  { name: "BERMUDA",                lat: 32.3078,  lng: -64.7505  },
  { name: "SANTO DOMINGO, DR",      lat: 18.4861,  lng: -69.9312  },
  { name: "SAN JUAN, PUERTO RICO",  lat: 18.4655,  lng: -66.1057  },
  { name: "HAVANA, CUBA",           lat: 23.1136,  lng: -82.3666  },
  { name: "KINGSTON, JAMAICA",      lat: 17.9714,  lng: -76.7936  },
  // Europe
  { name: "LONDON, UK",             lat: 51.5074,  lng: -0.1278   },
  { name: "PARIS, FRANCE",          lat: 48.8566,  lng: 2.3522    },
  // Asia Pacific
  { name: "TOKYO, JAPAN",           lat: 35.6762,  lng: 139.6503  },
  { name: "SYDNEY, AUSTRALIA",      lat: -33.8688, lng: 151.2093  },
  { name: "SINGAPORE",              lat: 1.3521,   lng: 103.8198  },
  { name: "MUMBAI, INDIA",          lat: 19.0760,  lng: 72.8777   },
  // Middle East
  { name: "DUBAI, UAE",             lat: 25.2048,  lng: 55.2708   },
  // South America
  { name: "SAO PAULO, BRAZIL",      lat: -23.5505, lng: -46.6333  },
  { name: "KOUROU, FR. GUIANA",     lat: 5.2390,   lng: -52.7683  },
  // Africa
  { name: "JOHANNESBURG, SA",       lat: -26.2041, lng: 28.0473   },
  // Central Asia -- launch sites
  { name: "BAIKONUR, KAZAKHSTAN",   lat: 45.9200,  lng: 63.3420   },
  { name: "JIUQUAN, CHINA",         lat: 40.9581,  lng: 100.2910  },
];

function addProLockedMarkers() {
  // PRO_LOCATIONS are now free -- render as clickable "observe from here" map pins.
  // Locations also appear in LOCATION_PRESETS under GLOBAL region in the left-panel picker.
  PRO_LOCATIONS.forEach(loc => {
    const icon = L.divIcon({
      html: `<div style="
        width:9px; height:9px;
        border: 1px solid rgba(0,191,255,0.45);
        border-radius: 50%;
        background: rgba(0,191,255,0.08);
        box-shadow: 0 0 5px rgba(0,191,255,0.25);
        cursor: pointer;
      "></div>`,
      className: '', iconAnchor: [4,4]
    });

    L.marker([loc.lat, loc.lng], { icon, interactive: true })
      .addTo(map)
      .bindTooltip(`<span style="font-family:'VT323',monospace;font-size:0.82rem;color:var(--blue);letter-spacing:0.1em;">
        ⊕ ${loc.name}<br>
        <span style="font-size:0.6rem;color:rgba(0,191,255,0.6);">CLICK TO OBSERVE FROM HERE</span>
      </span>`, { direction: 'top', className: 'leaflet-tooltip' })
      .on('click', () => {
        setObserverLocation(loc.lat, loc.lng, loc.name, 0);
        log(`OBSERVER: ${loc.name}`, 'alert');
      });
  });
}

let visCircle;
function drawVisibilityCircle(r) {
  if (visCircle) map.removeLayer(visCircle);
  visCircle = L.circle([OBSERVER.lat, OBSERVER.lng], {
    radius: r * 1000,
    color: '#00BFFF',
    weight: 1,
    dashArray: '6 4',
    fillColor: '#00BFFF',
    fillOpacity: 0.03
  }).addTo(map);
  if (window._updateOverlayMask) window._updateOverlayMask();
}

// ============================================================
// UTILITIES
// ============================================================
function haversineKm(lat1, lon1, lat2, lon2) {
  const R = 6371, dLat=(lat2-lat1)*Math.PI/180, dLon=(lon2-lon1)*Math.PI/180;
  const a = Math.sin(dLat/2)**2 + Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*Math.sin(dLon/2)**2;
  return R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
}

function formatCountdown(isoDate) {
  const diff = new Date(isoDate) - new Date();
  if (diff < 0) return 'LAUNCHED';
  const days = Math.floor(diff/86400000);
  const hrs = Math.floor((diff%86400000)/3600000);
  const mins = Math.floor((diff%3600000)/60000);
  const secs = Math.floor((diff%60000)/1000);
  if (days > 0) return `T-${days}D ${hrs}H ${mins}M`;
  if (hrs > 0) return `T-${hrs}H ${mins}M ${secs}S`;
  return `T-${mins}M ${secs}S`;
}

function isWithin24h(isoDate) {
  const diff = new Date(isoDate) - new Date();
  return diff > 0 && diff < 86400000;
}
function isWithinWeek(isoDate) {
  const diff = new Date(isoDate) - new Date();
  return diff > 0 && diff < 604800000;
}

// Estimate elevation angle from observer to rocket at peak visible range
function estimateElevationAngle(distKm, altKm=200) {
  const angle = Math.atan2(altKm, distKm) * 180 / Math.PI;
  return Math.max(0, angle);
}

function getAzimuth(locName='') {
  const n = locName.toLowerCase();
  if (n.includes('cape') || n.includes('kennedy') || n.includes('canaveral')) return 45;
  if (n.includes('vandenberg') || n.includes('vafb')) return 185;
  if (n.includes('baikonur')) return 65;
  if (n.includes('plesetsk')) return 90;
  if (n.includes('jiuquan') || n.includes('xichang') || n.includes('wenchang')) return 90;
  if (n.includes('tanegashima')) return 100;
  if (n.includes('kourou')) return 45;
  if (n.includes('mahia')) return 85;
  if (n.includes('wallops')) return 50;
  return 90;
}

function generateTrajectory(lat, lng, az, segments=14) {
  const pts = [[lat, lng]];
  const azR = az * Math.PI/180, R = 6371;
  for (let i=1; i<=segments; i++) {
    const dist=(i*160)/R, lat1=lat*Math.PI/180, lon1=lng*Math.PI/180;
    const lat2=Math.asin(Math.sin(lat1)*Math.cos(dist)+Math.cos(lat1)*Math.sin(dist)*Math.cos(azR));
    const lon2=lon1+Math.atan2(Math.sin(azR)*Math.sin(dist)*Math.cos(lat1),Math.cos(dist)-Math.sin(lat1)*Math.sin(lat2));
    pts.push([lat2*180/Math.PI, lon2*180/Math.PI]);
  }
  return pts;
}

// ============================================================
// SELECTED-LAUNCH TRAJECTORY ARC + BOOSTER LANDING RING
// ============================================================

function clearLaunchArc() {
  _drawArcInProgress = false; // always reset on clear
  if (activeLaunchArc) { map.removeLayer(activeLaunchArc); activeLaunchArc = null; }
  activeLaunchArcFan.forEach(l => map.removeLayer(l));
  activeLaunchArcFan = [];
  _notmarAnimFocused = []; // v2.62 -- clear Canvas anim registry on arc teardown
  clearBoosterRing();
  stopTrajectoryTracking();
  // Stage 3: when clearing focused state, ambient layer can come back up
  if (typeof showAmbientNotmar === 'function') showAmbientNotmar();

  // v2.32 Patch Y -- refresh vessel narrative on deselect to drop connection lines.
  try { if (typeof renderVesselMotionNarrative === 'function') renderVesselMotionNarrative(); } catch(e) {}

  // v2.35 Patch BB -- stop the moving particle when launch is deselected.
  try { if (typeof stopArcParticle === 'function') stopArcParticle(); } catch(e) {}
  // v3.1 -- return GLSS overlay layers to ambient intensity on deselect
  try { if (typeof setGlssIntensity === 'function') setGlssIntensity(null); } catch(e) {}
}

// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  GLSS PRO OVERLAY (v3.1) -- global hazard layer for Pro tier              ║
// ║  Renders glss_events table as polygons color-coded by category.          ║
// ║  Default 70% ambient; selected launch's matched events pop to 100%.      ║
// ║  Free tier: nothing rendered (teaser badge handled separately).          ║
// ╚══════════════════════════════════════════════════════════════════════════╝

const GLSS_CATEGORY_STYLE = {
  LAUNCH:        { color: '#FF8C00', fillColor: '#FF8C00', dashArray: '8,5'  }, // orange
  MISSILE_HYPER: { color: '#FF1744', fillColor: '#FF1744', dashArray: '4,4'  }, // crimson
  NAVAL_GUNNERY: { color: '#FFB000', fillColor: '#FFB000', dashArray: '6,4'  }, // amber
  MARITIME_OPS:  { color: '#4A9FD4', fillColor: '#4A9FD4', dashArray: '10,5' }, // cyan-blue
  ASAT_DEBRIS:   { color: '#B19CD9', fillColor: '#B19CD9', dashArray: '3,6'  }, // purple
  OTHER:         { color: '#666666', fillColor: '#666666', dashArray: '2,4'  }, // grey
};

const GLSS_INTENSITY = {
  ambient:  { opacity: 0.40, fillOpacity: 0.015, weight: 1.0 }, // 40% -- background context (Kenny tuned 2026-04-30)
  focused:  { opacity: 1.0,  fillOpacity: 0.10,  weight: 2.5 }, // 100% -- selected launch's events
};

let _glssLayers   = []; // [{ layer, event }]
let _glssRefresh  = null;
let _glssLoading  = false;

async function loadGlssOverlay() {
  const isPro = PRO_UNLOCKED === true;
  if (!isPro) {
    clearGlssOverlay();
    return;
  }
  if (_glssLoading) return;
  _glssLoading = true;
  try {
    const r = await fetch('/.netlify/functions/get-glss-events');
    if (!r.ok) { _glssLoading = false; return; }
    const body = await r.json();
    const events = (body && body.events) || [];
    renderGlssOverlay(events);
  } catch (e) {
    console.warn('[GLSS] overlay load failed:', e.message);
  } finally {
    _glssLoading = false;
  }
}

function renderGlssOverlay(events) {
  clearGlssOverlay();
  for (const ev of events) {
    const polygons = [];
    if (Array.isArray(ev.polygon) && ev.polygon.length >= 3) polygons.push(ev.polygon);
    if (Array.isArray(ev.polygons_extra)) {
      for (const p of ev.polygons_extra) {
        if (Array.isArray(p) && p.length >= 3) polygons.push(p);
      }
    }
    if (!polygons.length) continue;
    const style = GLSS_CATEGORY_STYLE[ev.category] || GLSS_CATEGORY_STYLE.OTHER;
    const isSelected = selectedLaunch && ev.matched_launch_id && (selectedLaunch.id === ev.matched_launch_id);
    const intensity = isSelected ? GLSS_INTENSITY.focused : GLSS_INTENSITY.ambient;
    for (const poly of polygons) {
      try {
        const latlngs = poly.map(p => [p.lat, p.lon]);
        const layer = L.polygon(latlngs, {
          color:       style.color,
          fillColor:   style.fillColor,
          dashArray:   style.dashArray,
          opacity:     intensity.opacity,
          fillOpacity: intensity.fillOpacity,
          weight:      intensity.weight,
          className:   'glss-event glss-cat-' + (ev.category || 'OTHER').toLowerCase(),
          interactive: true,
        }).addTo(map);
        layer.bindTooltip(
          '<span style="font-family:VT323,monospace;color:' + style.color + ';letter-spacing:0.1em;">' +
          '&#9670; ' + (ev.subcategory || ev.category || 'EVENT') + '<br>' +
          (ev.country || '') + ' / ' + (ev.region || '') + '<br>' +
          (ev.source_msg_id || '') + '</span>',
          { permanent: false, className: 'arc-tooltip' }
        );
        _glssLayers.push({ layer, event: ev });
      } catch (e) {
        console.warn('[GLSS] render failed for ' + ev.source_msg_id + ':', e.message);
      }
    }
  }
}

function setGlssIntensity(selectedLaunchId) {
  for (const item of _glssLayers) {
    const isSelected = selectedLaunchId && item.event.matched_launch_id === selectedLaunchId;
    const target = isSelected ? GLSS_INTENSITY.focused : GLSS_INTENSITY.ambient;
    try {
      item.layer.setStyle({
        opacity:     target.opacity,
        fillOpacity: target.fillOpacity,
        weight:      target.weight,
      });
    } catch (e) {}
  }
}

function clearGlssOverlay() {
  for (const item of _glssLayers) {
    try { map.removeLayer(item.layer); } catch (e) {}
  }
  _glssLayers = [];
}

function startGlssRefresh() {
  if (_glssRefresh) return;
  // v3.1.2 -- map may not be initialized yet on first call (Leaflet startup
  // can take >1.5s on slow networks). Self-reschedule until map is ready
  // instead of bailing silently and never running again.
  if (typeof map === 'undefined' || !map) {
    setTimeout(startGlssRefresh, 500);
    return;
  }
  loadGlssOverlay(); // initial load
  _glssRefresh = setInterval(loadGlssOverlay, 60 * 1000); // 60s poll
}

// Kick off after map is created. startGlssRefresh now self-reschedules if map
// isn't ready, so a single delayed call is enough.
setTimeout(startGlssRefresh, 1500);

// ── LIFTOFF ANIMATION ────────────────────────────────────────────────────────
// Pulsing expanding rings at the launch pad on status → LAUNCHED
// Rings expand outward, fade out, repeat for ~8 seconds

let _liftoffRings = [];
let _liftoffTimers = [];

function clearLiftoffAnimation() {
  _liftoffTimers.forEach(t => clearTimeout(t));
  _liftoffTimers = [];
  _liftoffRings.forEach(r => { try { map.removeLayer(r); } catch(e) {} });
  _liftoffRings = [];
}

function triggerLiftoffAnimation(launch) {
  clearLiftoffAnimation();
  const padLat = parseFloat(launch.pad_lat || launch.pad?.latitude || 28.5618);
  const padLng = parseFloat(launch.pad_lon || launch.pad?.longitude || -80.5772);
  if (!padLat || !padLng) return;

  // Fly map to pad
  map.flyTo([padLat, padLng], 7, { duration: 1.5, easeLinearity: 0.5 });

  const RING_COUNT   = 3;     // rings in each pulse wave
  const WAVE_COUNT   = 4;     // how many pulse waves total
  const WAVE_DELAY   = 1800;  // ms between waves
  const RING_DELAY   = 300;   // ms between rings in a wave
  const MAX_RADIUS   = 80000; // meters -- max expand radius
  const EXPAND_STEPS = 20;    // animation steps per ring
  const STEP_MS      = 60;    // ms per step

  // Colors cycle through liftoff palette
  const COLORS = ['#FF4500', '#FF8C00', '#FFD700', '#00BFFF'];

  function spawnRing(color, delay) {
    const t = setTimeout(() => {
      let radius = 3000;
      let opacity = 0.9;
      const ring = L.circle([padLat, padLng], {
        radius,
        color,
        weight: 2.5,
        fill: false,
        opacity,
        interactive: false,
      }).addTo(map);
      _liftoffRings.push(ring);

      let step = 0;
      function expandStep() {
        step++;
        radius += (MAX_RADIUS - 3000) / EXPAND_STEPS;
        opacity = Math.max(0, 0.9 - (step / EXPAND_STEPS) * 0.9);
        ring.setRadius(radius);
        ring.setStyle({ opacity });
        if (step < EXPAND_STEPS) {
          const et = setTimeout(expandStep, STEP_MS);
          _liftoffTimers.push(et);
        } else {
          try { map.removeLayer(ring); } catch(e) {}
          _liftoffRings = _liftoffRings.filter(r => r !== ring);
        }
      }
      expandStep();
    }, delay);
    _liftoffTimers.push(t);
  }

  // Spawn waves
  for (let wave = 0; wave < WAVE_COUNT; wave++) {
    for (let ring = 0; ring < RING_COUNT; ring++) {
      const delay = wave * WAVE_DELAY + ring * RING_DELAY;
      const color = COLORS[(wave * RING_COUNT + ring) % COLORS.length];
      spawnRing(color, delay);
    }
  }

  // Log banner
  log('🚀 LIFTOFF -- ' + (launch.title || launch.name || 'LAUNCH'), 'alert');
}



function clearBoosterRing() {
  if (activeBoosterRing) { map.removeLayer(activeBoosterRing); activeBoosterRing = null; }
  activeBoosterRingPulse.forEach(r => map.removeLayer(r));
  activeBoosterRingPulse = [];
}

// Resolve the drone ship for a given launch.
// Priority: vessel_assigned field → infer from provider+pad.
// Fetch LL2 detailed landing data for a launch, cache it.
// Returns { landing_abbrev, landing_type, is_drone_ship, is_rtls } or null on error.
async function fetchLandingDetail(launchId) {
  if (!launchId) return null;
  if (landingDetailCache[launchId]) return landingDetailCache[launchId];
  try {
    const r = await fetch(`https://ll.thespacedevs.com/2.2.0/launch/${launchId}/?format=json`);
    if (!r.ok) return null;
    const d = await r.json();
    const stage = d.rocket?.launcher_stage?.[0];
    const abbrev = stage?.landing?.location?.abbrev || null;
    const typeName = (stage?.landing?.type?.name || '').toLowerCase();
    const locationName = (stage?.landing?.location?.name || '').toLowerCase();
    const isDroneShip = typeName.includes('drone ship') || typeName.includes('asds');
    const isRTLS = typeName.includes('return to launch site') || typeName.includes('rtls') ||
                   locationName.includes('lz-1') || locationName.includes('lz-2') ||
                   locationName.includes('launch site');
    const result = {
      landing_abbrev: abbrev,       // 'JRTI' | 'ASOG' | 'OCISLY' | 'LZ-1' | 'LZ-2' | null
      landing_type: stage?.landing?.type?.name || null,
      landing_location: stage?.landing?.location?.name || null,
      is_drone_ship: isDroneShip,
      is_rtls: isRTLS,
      fetched_at: Date.now()
    };
    landingDetailCache[launchId] = result;
    return result;
  } catch(e) {
    return null;
  }
}

// Returns true if a vessel is currently docked at a known port (within 15km, speed < 1.5kt)
function isVesselInPort(vesselName) {
  const pos = vesselPositions[vesselName];
  if (!pos || !pos.isLive) return false;
  const speed = pos.speed ?? 999;
  if (speed >= 1.5) return false;
  const PORTS = [
    { lat: 28.4157, lng: -80.5982 }, // Port Canaveral
    { lat: 33.7350, lng: -118.265 }, // Port of LA / San Pedro
    { lat: 34.4140, lng: -119.862 }, // Port Hueneme
  ];
  for (const port of PORTS) {
    const dlat = (pos.lat - port.lat) * 111.32;
    const dlng = (pos.lng - port.lng) * 111.32 * Math.cos(port.lat * Math.PI / 180);
    if (Math.sqrt(dlat*dlat + dlng*dlng) < 15) return true;
  }
  return false;
}

// Returns AIS freshness: 'live' (<4hr) | 'stale' (4-24hr) | 'dark' (>24hr) | 'unknown'
function getVesselAisStatus(vesselName) {
  const pos = vesselPositions[vesselName];
  if (!pos || !pos.isLive) return 'unknown';
  if (!pos.ais_timestamp) return 'unknown';
  const ageHours = (Date.now() - new Date(pos.ais_timestamp)) / 3600000;
  if (ageHours < 4)  return 'live';
  if (ageHours < 24) return 'stale';
  return 'dark';
}

function resolveBoosterShip(launch) {
  // 1. LL2 landing detail -- highest priority, exact per-launch assignment
  // Checks both the patched launch.landing_detail AND the global cache by ID
  const detail = launch.landing_detail || (launch.id ? landingDetailCache[launch.id] : null);
  if (detail) {
    if (detail.is_rtls) return null;  // RTLS (LZ-1/LZ-2) -- no drone ship ring
    if (detail.is_drone_ship && detail.landing_abbrev) {
      const v = SPACEX_VESSELS.find(v => v.name === detail.landing_abbrev);
      if (v) return v;
    }
  }

  // 2. Explicit vessel assignment from Supabase/RSS
  const assigned = launch.vessel_assigned;
  if (assigned) {
    const v = SPACEX_VESSELS.find(v => v.name === assigned || v.fullName?.includes(assigned));
    if (v && v.type === 'drone_ship') return v;
  }

  const isSpaceX = (launch.launch_service_provider?.name || '').toLowerCase().includes('spacex');
  if (!isSpaceX) return null;

  const padName  = (launch.pad?.name || '').toLowerCase();
  const locName  = (launch.pad?.location?.name || '').toLowerCase();
  const combined = padName + ' ' + locName;

  const isCapeLaunch = combined.includes('kennedy') || combined.includes('canaveral') ||
                       combined.includes('lc-39') || combined.includes('slc-40') ||
                       combined.includes('launch complex 39') || combined.includes('complex 40') ||
                       combined.includes('pad 39');
  const isVandenberg = combined.includes('vandenberg') || combined.includes('slc-4e') ||
                       combined.includes('space launch complex 4e');

  // 2. Likely RTLS missions don't use a drone ship -- no ring
  const orbit = (launch.mission?.orbit?.abbrev || '').toUpperCase();
  const orbitFull = launch.mission?.orbit?.name || launch.mission?.orbit?.abbrev || launch.trajectory_hint || '';
  const missionName = (launch.mission?.name || launch.name || '').toLowerCase();
  const likelyRTLS = orbit === 'SUBORBITAL' ||
                     (isCapeLaunch && orbit === 'ISS' && !missionName.includes('cargo'));
  if (likelyRTLS) return null;

  if (isVandenberg) return SPACEX_VESSELS.find(v => v.name === 'OCISLY');

  if (isCapeLaunch) {
    const asogPos = vesselPositions['ASOG'];
    const jrtiPos = vesselPositions['JRTI'];

    // Exclude ships docked at port -- they are NOT the target drone ship
    const asogInPort = isVesselInPort('ASOG');
    const jrtiInPort = isVesselInPort('JRTI');
    const asogUsable = asogPos?.isLive && !asogInPort;
    const jrtiUsable = jrtiPos?.isLive && !jrtiInPort;

    // Both at sea -- pick the one furthest from port (confirmed on station)
    if (asogUsable && jrtiUsable) {
      const PORT_LAT = 28.4157, PORT_LNG = -80.5982;
      const asogDist = Math.hypot(asogPos.lat - PORT_LAT, asogPos.lng - PORT_LNG);
      const jrtiDist = Math.hypot(jrtiPos.lat - PORT_LAT, jrtiPos.lng - PORT_LNG);
      return SPACEX_VESSELS.find(v => v.name === (jrtiDist > asogDist ? 'JRTI' : 'ASOG'));
    }
    if (jrtiUsable) return SPACEX_VESSELS.find(v => v.name === 'JRTI');
    if (asogUsable) return SPACEX_VESSELS.find(v => v.name === 'ASOG');

    // Both in port or no AIS data -- don't draw a ring, too uncertain
    return null;
  }

  return null;
}

// Build geodesic arc points from pad, extending totalDistKm downrange.
// Returns array of [lat, lng] waypoints at ~100km intervals.
function buildArcPoints(padLat, padLng, azimuthDeg, totalDistKm = 2800, step = 100) {
  const pts = [[padLat, padLng]];
  const azR = azimuthDeg * Math.PI / 180;
  const R = 6371;
  for (let d = step; d <= totalDistKm; d += step) {
    const dist = d / R;
    const lat1 = padLat * Math.PI / 180;
    const lon1 = padLng * Math.PI / 180;
    const lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + Math.cos(lat1) * Math.sin(dist) * Math.cos(azR));
    const lon2 = lon1 + Math.atan2(Math.sin(azR) * Math.sin(dist) * Math.cos(lat1), Math.cos(dist) - Math.sin(lat1) * Math.sin(lat2));
    pts.push([lat2 * 180 / Math.PI, lon2 * 180 / Math.PI]);
  }
  return pts;
}

// Get the best azimuth for a launch -- uses orbit + pad to look up range, picks midpoint.
// ═══════════════════════════════════════════════════════════════════════════
// VESSEL HOME BASES, WEATHER SHELTERS & LAUNCH PAD ZONES
// ═══════════════════════════════════════════════════════════════════════════

const VESSEL_HOME_PORTS = {
  'JRTI':    { lat: 28.4157, lng: -80.5982, name: 'Port Canaveral' },
  'ASOG':    { lat: 28.4157, lng: -80.5982, name: 'Port Canaveral' },
  'BOB':     { lat: 28.4157, lng: -80.5982, name: 'Port Canaveral' },
  'DOUG':    { lat: 28.4157, lng: -80.5982, name: 'Port Canaveral' },
  'OCISLY':  { lat: 33.7350, lng: -118.265, name: 'Port of Los Angeles' },
  'JACKLYN': { lat: 28.4157, lng: -80.5982, name: 'Port Canaveral' },  // v2.23 -- Blue Origin drone ship for New Glenn booster recovery
};

const LAUNCH_PAD_ZONES = [
  { name: 'SLC-40 / KSC',          lat: 28.5618, lng: -80.5772,  radiusKm: 50, coast: 'Atlantic' },
  { name: 'LC-39A / KSC',          lat: 28.6080, lng: -80.6039,  radiusKm: 50, coast: 'Atlantic' },
  { name: 'SLC-4E / Vandenberg',   lat: 34.6322, lng: -120.6110, radiusKm: 50, coast: 'Pacific'  },
  { name: 'SLC-4W / Vandenberg',   lat: 34.6363, lng: -120.5936, radiusKm: 50, coast: 'Pacific'  },
  { name: 'Starbase / Boca Chica', lat: 25.9969, lng: -97.1566,  radiusKm: 60, coast: 'Gulf'     },
];

const WEATHER_SHELTERS = [
  // East Coast
  { name: 'Morehead City / Cape Lookout', lat: 34.72,  lng: -76.70,   radiusKm: 100 },
  { name: 'Port Canaveral',               lat: 28.415, lng: -80.59,   radiusKm: 50  },
  { name: 'Port Everglades / Miami',      lat: 26.08,  lng: -80.12,   radiusKm: 80  },
  { name: 'Charleston SC',                lat: 32.78,  lng: -79.93,   radiusKm: 100 },
  { name: 'Savannah / Brunswick GA',      lat: 31.98,  lng: -81.10,   radiusKm: 100 },
  { name: 'Mayport / Jacksonville FL',    lat: 30.39,  lng: -81.43,   radiusKm: 80  },
  { name: 'Norfolk / Virginia Beach',     lat: 36.85,  lng: -76.00,   radiusKm: 100 },
  { name: 'Wilmington NC',                lat: 34.24,  lng: -77.95,   radiusKm: 80  },
  // West Coast
  { name: 'Port of Los Angeles',          lat: 33.735, lng: -118.265, radiusKm: 80  },
  { name: 'Port Hueneme / Oxnard',        lat: 34.147, lng: -119.206, radiusKm: 80  },
  { name: 'Monterey Bay',                 lat: 36.800, lng: -121.900, radiusKm: 100 },
  { name: 'San Francisco Bay',            lat: 37.810, lng: -122.440, radiusKm: 100 },
  // Gulf / Starbase
  { name: 'Starbase / Port Isabel TX',    lat: 26.065, lng: -97.215,  radiusKm: 80  },
  { name: 'Port Brownsville TX',          lat: 25.970, lng: -97.400,  radiusKm: 80  },
];

function isInWeatherShelter(lat, lng) {
  if (!lat || !lng) return false;
  return WEATHER_SHELTERS.some(s => haversineKm(lat, lng, s.lat, s.lng) < s.radiusKm);
}

function getShelterName(lat, lng) {
  if (!lat || !lng) return null;
  const s = WEATHER_SHELTERS.find(s => haversineKm(lat, lng, s.lat, s.lng) < s.radiusKm);
  return s ? s.name : null;
}

function isReturningToPad(vesselLat, vesselLng, course) {
  for (const pad of LAUNCH_PAD_ZONES) {
    const distToPad = haversineKm(vesselLat, vesselLng, pad.lat, pad.lng);
    if (distToPad < 1500) {
      const dLng = (pad.lng - vesselLng) * Math.PI / 180;
      const lat1 = vesselLat * Math.PI / 180, lat2 = pad.lat * Math.PI / 180;
      const y = Math.sin(dLng) * Math.cos(lat2);
      const x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLng);
      const padBearing = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360;
      const diff = Math.abs(course - padBearing);
      const angDiff = diff > 180 ? 360 - diff : diff;
      if (angDiff < 60 && distToPad < 800) return { pad, distToPad: Math.round(distToPad) };
    }
  }
  return null;
}

// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  LaunchWatch -- DEAD RECKONING ENGINE                                    ║
// ║  When a vessel goes AIS dark, we project its position forward           ║
// ║  using last known speed + course, interpolating toward the zone.        ║
// ╚══════════════════════════════════════════════════════════════════════════╝

// AIS dark detection state -- tracks consecutive same-timestamp polls per vessel
const AIS_DARK_STATE = {};  // { vesselName: { sameCount, lastAisTs, darkDeclaredAt, lastLat, lastLon, lastSpeed, lastCourse } }
const AIS_DARK_THRESHOLD = 4; // 4 consecutive same-AIS-timestamp polls = declare dark

// Called every time we get a vessel position update
function updateAisDarkState(vesselName, pos) {
  const state = AIS_DARK_STATE[vesselName] || { sameCount: 0, lastAisTs: null };
  const aisTs = pos.recorded_at || null;  // Must be last_seen (actual AIS ts), never updated_at

  // v3.15: ALWAYS capture last-known data on every poll, regardless of which decision
  // branch fires below. Pre-v3.15, the dark+returningToPort branch (line ~6720) bailed
  // out without writing lastLat/Lon/Speed/Course to state -- so vessels that were
  // already stale on first sight AND heading home (BOB/DOUG post-recovery) never got
  // their direction captured. Marker code falls through getVesselDirection() and the
  // DR engine is the canonical source for any vessel direction rendering.
  if (typeof pos.lat === 'number')         state.lastLat     = pos.lat;
  if (typeof pos.lng === 'number')         state.lastLon     = pos.lng;
  if (typeof pos.speed === 'number')       state.lastSpeed   = pos.speed;
  if (typeof pos.course === 'number')      state.lastCourse  = pos.course;
  else if (typeof pos.heading === 'number' && state.lastCourse == null)
    state.lastCourse = pos.heading;        // gyro fallback only if no COG ever seen
  if (typeof pos.heading === 'number')     state.lastHeading = pos.heading;

  // BOOTSTRAP: if last_seen is already stale by > 4hrs on first sight,
  // immediately declare dark -- no need to wait for 4 polls
  const hrsStale = aisTs ? (Date.now() - new Date(aisTs).getTime()) / 3600000 : 0;
  // Port proximity guard for bootstrap too
  const _bootstrapDistFromPort = haversineKm(pos.lat||0, pos.lng||0, 28.415, -80.59);
  const _atPort = _bootstrapDistFromPort < 25 && (pos.speed||0) < 3;
  const alreadyStale = !_atPort && hrsStale >= AIS_DARK_THRESHOLD;

  if (aisTs && (aisTs === state.lastAisTs || alreadyStale)) {
    // Same AIS timestamp as last poll OR already stale on first sight
    state.sameCount = alreadyStale && state.sameCount < AIS_DARK_THRESHOLD
      ? AIS_DARK_THRESHOLD  // bootstrap straight to threshold
      : state.sameCount + 1;

    if (state.sameCount >= AIS_DARK_THRESHOLD && !state.darkDeclaredAt) {
      // DARK DECLARED -- but first check if vessel is heading home (returning) or deploying
      // If course is roughly SW (200-300°) from Atlantic = heading back to port = NOT DR
      // We only DR vessels that are heading toward the recovery zone (NE = 0-90°)
      const _course = pos.course || pos.heading || 0;
      // Check if heading toward nearest home port (multi-coast)
      const _homePort = VESSEL_HOME_PORTS[vesselName] || { lat: 28.4157, lng: -80.5982 };
      const _distFromPort = haversineKm(pos.lat || 0, pos.lng || 0, _homePort.lat, _homePort.lng);
      // Compute bearing to home port and check if vessel is heading toward it (within 60°)
      const _dLngHome = (_homePort.lng - (pos.lng||0)) * Math.PI/180;
      const _lat1h = (pos.lat||0) * Math.PI/180, _lat2h = _homePort.lat * Math.PI/180;
      const _yh = Math.sin(_dLngHome)*Math.cos(_lat2h);
      const _xh = Math.cos(_lat1h)*Math.sin(_lat2h) - Math.sin(_lat1h)*Math.cos(_lat2h)*Math.cos(_dLngHome);
      const _bearingToHome = ((Math.atan2(_yh,_xh)*180/Math.PI)+360)%360;
      const _courseDiff = Math.abs(_course - _bearingToHome); 
      const _isHeadingHome = (_courseDiff > 180 ? 360 - _courseDiff : _courseDiff) < 70;

      if (_isHeadingHome && _distFromPort < 600) {
        // Vessel is heading SW back to port -- don't activate DR
        // Mark as dark but no ghost trail / zone refinement
        state.darkDeclaredAt = null;  // explicitly null = dark but not DR-eligible
        state.returningToPort = true;
        log(`AIS DARK (RETURNING) -- ${vesselName} heading home ${_course}° -- no DR activated`, 'warn');
      } else {
        // Port proximity guard -- vessel near port with stale AIS = just stale, not deployed
        const _nearPort = haversineKm(pos.lat||0, pos.lng||0, 28.415, -80.59) < 25
                       || haversineKm(pos.lat||0, pos.lng||0, 34.148, -119.195) < 25
                       || haversineKm(pos.lat||0, pos.lng||0, 33.729, -118.263) < 25;
        if (_nearPort && (pos.speed||0) < 3) {
          state.sameCount = 0; // reset -- just a slow AIS update at dock
          log(`AIS: ${vesselName} -- stale at port, speed ${(pos.speed||0).toFixed(1)}kts -- NOT dark`, 'info');
          AIS_DARK_STATE[vesselName] = state;
          return;
        }
        // Vessel heading toward zone -- activate full DR
        // (lastLat/Lon/Speed/Course already captured at top of function in v3.15)
        state.darkDeclaredAt = aisTs;
        state.returningToPort = false;
        log(`AIS DARK -- ${vesselName} declared dark at ${pos.lat?.toFixed(3)}, ${pos.lng?.toFixed(3)} · ${state.lastSpeed}kts · ${_course}° · ${hrsStale.toFixed(1)}hrs stale`, 'warn');
      }
    }
  } else {
    // Fresh AIS timestamp -- vessel broadcasting again or first seen (not stale)
    if (state.darkDeclaredAt) {
      log(`AIS RESTORED -- ${vesselName} broadcasting again after ${hrsStale.toFixed(1)}hrs`, 'alert');
    }
    state.sameCount      = 1;
    state.lastAisTs      = aisTs;
    state.darkDeclaredAt = null;
    // (lastLat/Lon/Speed/Course already captured at top of function in v3.15)
  }

  AIS_DARK_STATE[vesselName] = state;
  return state;
}

// Project a position forward using dead reckoning
// Returns { lat, lon } at elapsed hours from last known position
function deadReckonPosition(lat, lon, courseDeg, speedKts, hoursElapsed) {
  const distKm = speedKts * hoursElapsed * 1.852; // knots → km
  return destPointDR(lat, lon, courseDeg, distKm);
}

// Destination point given start, bearing, distance (km)
function destPointDR(lat, lon, bearingDeg, distKm) {
  const R   = 6371;
  const d   = distKm / R;
  const b   = bearingDeg * Math.PI / 180;
  const lat1 = lat * Math.PI / 180;
  const lon1 = lon * Math.PI / 180;
  const lat2 = Math.asin(
    Math.sin(lat1) * Math.cos(d) +
    Math.cos(lat1) * Math.sin(d) * Math.cos(b)
  );
  const lon2 = lon1 + Math.atan2(
    Math.sin(b) * Math.sin(d) * Math.cos(lat1),
    Math.cos(d) - Math.sin(lat1) * Math.sin(lat2)
  );
  return {
    lat: lat2 * 180 / Math.PI,
    lon: ((lon2 * 180 / Math.PI) + 540) % 360 - 180
  };
}

// Get dead reckoning position for a vessel right now
// Returns null if vessel is not dark
function getDRPosition(vesselName) {
  const state = AIS_DARK_STATE[vesselName];
  // Don't DR vessels returning to port
  if (!state?.darkDeclaredAt || state?.returningToPort) return null;

  // Don't DR vessels sheltering near coast (weather hold)
  if (state.lastLat && isInWeatherShelter(state.lastLat, state.lastLon)) return null;

  // Don't DR from port coordinates -- vessel hasn't actually deployed yet
  // If last known position is within 30km of Port Canaveral, not worth projecting
  const PORT_LAT = 28.415, PORT_LNG = -80.59;
  const distFromPort = haversineKm(state.lastLat || 0, state.lastLon || 0, PORT_LAT, PORT_LNG);
  const hoursElapsed = (Date.now() - new Date(state.darkDeclaredAt).getTime()) / 3600000;

  // Port-area check: vessel still near port = in transit, not deployed
  // Use orbit model instead of DR ghost until vessel is clearly at sea
  // 80km covers the typical transit zone out of Port Canaveral into open Atlantic
  if (distFromPort < 80) {
    return null; // still in transit from port -- orbit model only
  }

  // Also gate on launch timing -- don't DR more than T-48hr before launch
  // (vessel shouldn't be deployed more than 2 days early)
  // This prevents false DR from stale AIS on vessels not yet deployed

  return {
    ...deadReckonPosition(state.lastLat, state.lastLon, state.lastCourse, state.lastSpeed, hoursElapsed),
    hoursElapsed: hoursElapsed.toFixed(1),
    lastKnownLat: state.lastLat,
    lastKnownLon: state.lastLon,
    course: state.lastCourse,
    speed:  state.lastSpeed,
    darkDeclaredAt: state.darkDeclaredAt,
    isDark: true,
  };
}

// v3.15: canonical source for vessel direction in marker rendering.
// Priority chain (most to least authoritative):
//   1. DR projected course        (DR engine is the canonical source for AIS-dark vessels)
//   2. State machine lastCourse   (last AIS COG captured before going dark / heading home)
//   3. Live COG (course over ground from current AIS)
//   4. Live gyro heading          (rare for our fleet -- droneships lack gyrocompass)
//   5. 0 (north)                  (last-resort default)
// Returns { value, source } -- source tag drives the tooltip ((DR) / (LKP) / (COG) / etc).
function _isValidDeg(d) {
  return typeof d === 'number' && d >= 0 && d < 360;
}
function getVesselDirection(vesselName, livePos) {
  const drPos = getDRPosition(vesselName);
  if (drPos && _isValidDeg(drPos.course)) return { value: drPos.course, source: 'DR'  };
  const state = (typeof AIS_DARK_STATE !== 'undefined') ? AIS_DARK_STATE[vesselName] : null;
  if (state && _isValidDeg(state.lastCourse)) return { value: state.lastCourse, source: 'LKP' };
  if (livePos) {
    if (_isValidDeg(livePos.course))  return { value: livePos.course,  source: 'COG' };
    if (_isValidDeg(livePos.heading)) return { value: livePos.heading, source: 'HDG' };
  }
  return { value: 0, source: 'NULL' };
}

// Bearing-split interpolation between DR bearing and orbit-model bearing
// Splits the ANGLE, not the geographic position -- more accurate for arc prediction
//
// Logic:
//   drBearing   = bearing from pad to DR projected vessel position
//   zoneBearing = bearing from pad to orbit-model zone center (the baseline)
//   distRatio   = how far vessel has travelled from dark declaration point toward zone
//                 0.0 = just declared dark (far from zone) → trust orbit model
//                 1.0 = DR position is at zone → fully trust DR bearing
//
// Arc = zoneBearing + distRatio * (drBearing - zoneBearing)
// This smoothly rotates the arc from orbit model → DR bearing as vessel approaches
function interpolateDRtoZone(drLat, drLon, zoneLat, zoneLng, padLat, padLng, drDistToZone, zoneRadius, zoneBearing, startDistToZone) {
  // Bearing from pad to DR projected position
  const dLngDR = (drLon - padLng) * Math.PI / 180;
  const yDR = Math.sin(dLngDR) * Math.cos(drLat * Math.PI / 180);
  const xDR = Math.cos(padLat * Math.PI / 180) * Math.sin(drLat * Math.PI / 180) -
               Math.sin(padLat * Math.PI / 180) * Math.cos(drLat * Math.PI / 180) * Math.cos(dLngDR);
  const drBearing = (Math.atan2(yDR, xDR) * 180 / Math.PI + 360) % 360;

  // How far has vessel progressed from dark declaration toward zone?
  // startDistToZone = distance from LKP to zone (how far it had to travel when dark declared)
  // drDistToZone    = current DR distance to zone (shrinking as vessel advances)
  const totalDist = startDistToZone || (drDistToZone + 1); // fallback
  const distRatio = Math.min(1, Math.max(0, 1 - (drDistToZone / totalDist)));

  // Split the bearing angle -- short-path interpolation
  let bearingDiff = drBearing - zoneBearing;
  if (bearingDiff > 180)  bearingDiff -= 360;
  if (bearingDiff < -180) bearingDiff += 360;
  const az = ((zoneBearing + distRatio * bearingDiff) + 360) % 360;

  // Spread narrows as vessel approaches zone -- 8° far away → 4° near zone
  const spread = Math.round(8 - distRatio * 4);

  return {
    az,
    spread,
    drBearing:   Math.round(drBearing * 10) / 10,
    zoneBearing: Math.round(zoneBearing * 10) / 10,
    distRatio:   (distRatio * 100).toFixed(0) + '%',
  };
}



// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  LaunchWatch -- MISSION LIFECYCLE STATE MACHINE                          ║
// ║  Tracks recovery state per launch after liftoff                         ║
// ║  States: PRE_LAUNCH → LAUNCHED → VESSELS_DARK →                        ║
// ║          VESSEL_RESTORE → RECOVERY_COMPLETE                             ║
// ╚══════════════════════════════════════════════════════════════════════════╝

// Persists in sessionStorage so page refreshes don't lose state
const LIFECYCLE_KEY = 'lw_mission_lifecycle';

function loadLifecycleState() {
  try {
    return JSON.parse(sessionStorage.getItem(LIFECYCLE_KEY) || '{}');
  } catch { return {}; }
}

function saveLifecycleState(state) {
  try { sessionStorage.setItem(LIFECYCLE_KEY, JSON.stringify(state)); } catch {}
}

// Get or create lifecycle state for a specific launch
function getLaunchLifecycle(launchId) {
  const all = loadLifecycleState();
  if (!all[launchId]) {
    all[launchId] = {
      state:         'PRE_LAUNCH',
      vessels_dark:  [],    // vessel names that went dark
      vessels_restored: [], // vessel names that came back online
      dark_at:       null,
      restore_at:    null,
      complete_at:   null,
      show_arc:      true,
      show_notmar:   true,
      show_dr:       true,
    };
    saveLifecycleState(all);
  }
  return all[launchId];
}

function updateLaunchLifecycle(launchId, updates) {
  const all = loadLifecycleState();
  all[launchId] = { ...(all[launchId] || {}), ...updates };
  saveLifecycleState(all);
  return all[launchId];
}

// Called every vessel poll cycle -- detects state transitions
function updateMissionLifecycle(launch) {
  if (!launch) return;
  const launchId = launch.id;
  const lc = getLaunchLifecycle(launchId);
  const inRecov = isInRecovery(launch);
  if (!inRecov && lc.state === 'PRE_LAUNCH') return; // not launched yet

  // Transition: PRE_LAUNCH → LAUNCHED
  if (inRecov && lc.state === 'PRE_LAUNCH') {
    updateLaunchLifecycle(launchId, { state: 'LAUNCHED' });
    // v3.4 traj-polish -- log which signal fired the transition (Layer-0 LL2 vs Layer-1 timer/webcast)
    const _abbrev = (launch.status?.abbrev || '').toLowerCase();
    const _ll2Confirmed = _abbrev && ['success','in flight','partial failure'].some(s => _abbrev.includes(s));
    const _gateSrc = _ll2Confirmed ? 'LL2-status' : 'TIMER+WEBCAST';
    log(`LIFECYCLE: ${launch.name || launch.title} -- LAUNCHED [${_gateSrc}]`, 'alert');
    // 🚀 LIFTOFF ANIMATION -- pulsing rings at launch pad
    triggerLiftoffAnimation(launch);
  }

  // Get assigned vessels for this launch
  const assigned = [launch.vessel_assigned].filter(Boolean);
  // Also check fairing catchers
  const ocean = launch.vessel_ocean || 'Atlantic';
  const fairingVessels = (FAIRING_CATCHERS[ocean] || []);
  const allVessels = [...new Set([...assigned, ...fairingVessels])];

  // Check which vessels are dark vs restored
  const nowDark    = allVessels.filter(v => AIS_DARK_STATE[v]?.darkDeclaredAt && !AIS_DARK_STATE[v]?.returningToPort);
  const nowRestored = allVessels.filter(v => {
    const state = AIS_DARK_STATE[v];
    // Vessel is "restored" if it WAS dark but now has a fresh AIS timestamp
    if (!state?.darkDeclaredAt) return false;
    const pos = vesselPositions[v];
    if (!pos?.last_seen) return false;
    const freshness = (Date.now() - new Date(pos.last_seen)) / 3600000;
    return freshness < 2; // fresh AIS within 2hrs = restored
  });

  // Transition: LAUNCHED → VESSELS_DARK
  if (nowDark.length > 0 && lc.state === 'LAUNCHED') {
    updateLaunchLifecycle(launchId, {
      state: 'VESSELS_DARK',
      vessels_dark: nowDark,
      dark_at: new Date().toISOString(),
    });
    log(`LIFECYCLE: VESSELS DARK -- ${nowDark.join(', ')}`, 'warn');
  }

  // Transition: VESSELS_DARK → VESSEL_RESTORE (first vessel pops back up)
  if (nowRestored.length > 0 && lc.state === 'VESSELS_DARK') {
    updateLaunchLifecycle(launchId, {
      state: 'VESSEL_RESTORE',
      vessels_restored: nowRestored,
      restore_at: new Date().toISOString(),
      show_arc: false,   // DROP the arc -- vessel position is confirmed
      show_dr:  false,   // DROP DR ghost -- real AIS is back
      show_notmar: true, // KEEP NOTMAR as reference
    });
    log(`LIFECYCLE: AIS RESTORE -- ${nowRestored.join(', ')} BACK ONLINE · ARC DISMISSED`, 'alert');

    // Fire vessel restore notification to system log
    nowRestored.forEach(v => {
      const pos = vesselPositions[v];
      if (pos) {
        log(`LIFECYCLE: ${v} RESTORED at ${pos.lat?.toFixed(3)}N ${Math.abs(pos.lng||0).toFixed(3)}W · ${pos.speed?.toFixed(1)}kts`, 'alert');
      }
    });
  }

  // Transition: VESSEL_RESTORE → RECOVERY_COMPLETE (all vessels heading home)
  const allRestored = allVessels.every(v => {
    const pos = vesselPositions[v];
    if (!pos) return false;
    const distFromPort = haversineKm(pos.lat||0, pos.lng||0, 28.415, -80.59);
    // Heading home = within 500km of port and course SW (190-320°)
    // v3.16: route through DR engine -- inline pos.course || pos.heading
    // returned 0 for vessels with null heading and missed lastCourse from state.
    const course = getVesselDirection(v, pos).value;
    return distFromPort < 500 && course >= 190 && course <= 320;
  });

  if (allRestored && nowRestored.length > 0 && lc.state === 'VESSEL_RESTORE') {
    updateLaunchLifecycle(launchId, {
      state: 'RECOVERY_COMPLETE',
      complete_at: new Date().toISOString(),
      show_notmar: false, // fade NOTMAR too
    });
    log(`LIFECYCLE: RECOVERY COMPLETE -- all vessels heading to port`, 'alert');
  }

  return getLaunchLifecycle(launchId);
}

// Get draw flags for a launch based on lifecycle state
function getLifecycleDrawFlags(launch) {
  if (!launch || !isInRecovery(launch)) {
    return { show_arc: true, show_dr: true, show_notmar: true };
  }
  const lc = getLaunchLifecycle(launch.id);
  return {
    show_arc:    lc.show_arc    !== false,
    show_dr:     lc.show_dr     !== false,
    show_notmar: lc.show_notmar !== false,
    state:       lc.state,
  };
}

// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  LaunchWatch -- FAIRING-TO-BOOSTER ZONE REFINEMENT                       ║
// ║  Physics: fairings always land further downrange than booster            ║
// ║  Booster/fairing distance ratio ≈ 0.884 for Starlink LEO               ║
// ║  When fairing catcher position is known → back-calculate booster zone   ║
// ╚══════════════════════════════════════════════════════════════════════════╝

// Known fairing catchers per coast
const FAIRING_CATCHERS = {
  Atlantic: ['DOUG', 'BOB'],  // DOUG first -- further downrange, primary catcher
  Pacific:  [],
};

// Historical booster/fairing downrange ratio by orbit type
// Built from mission data -- will improve over time
const BOOSTER_FAIRING_RATIO = {
  'Starlink':  0.884,  // First data point from 10-62 geometry
  'LEO':       0.884,
  'ISS':       0.900,  // Slightly higher -- ISS orbit shallower
  'GTO':       0.920,  // GTO fairings go much further downrange
  'default':   0.884,
};

// Get the ratio for a given launch
function getBoosterFairingRatio(launch) {
  const title = (launch.name || launch.title || '').toLowerCase();
  if (title.includes('starlink'))   return BOOSTER_FAIRING_RATIO['Starlink'];
  if (title.includes('iss') || title.includes('crew') || title.includes('cargo'))
    return BOOSTER_FAIRING_RATIO['ISS'];
  if (title.includes('gto') || title.includes('geostationary'))
    return BOOSTER_FAIRING_RATIO['GTO'];
  return BOOSTER_FAIRING_RATIO['default'];
}

// Get the best fairing catcher DR position for this launch
// Returns { lat, lon, vessel, hoursElapsed, isDR } or null
function getFairingCatcherDR(launch) {
  // Only apply SpaceX vessel logic to SpaceX launches
  const provider = (launch.launch_service_provider?.name || launch.provider || '').toLowerCase();
  if (!provider.includes('spacex') && !provider.includes('space exploration')) return null;
  const ocean = launch.vessel_ocean || 'Atlantic';
  const catchers = FAIRING_CATCHERS[ocean] || [];
  const padLat = parseFloat(launch.pad?.latitude || 28.56);
  const padLng = parseFloat(launch.pad?.longitude || -80.57);

  // ── NOTMAR OVERRIDE -- official USCG exclusion zone beats orbit model ───────
  if (launch.notmar_booster_lat && launch.notmar_booster_lon) {
    const nLat = parseFloat(launch.notmar_booster_lat);
    const nLon = parseFloat(launch.notmar_booster_lon);
    if (isFinite(nLat) && isFinite(nLon)) {
      const _dL = (nLon-padLng)*Math.PI/180;
      const _y  = Math.sin(_dL)*Math.cos(nLat*Math.PI/180);
      const _x  = Math.cos(padLat*Math.PI/180)*Math.sin(nLat*Math.PI/180)
                - Math.sin(padLat*Math.PI/180)*Math.cos(nLat*Math.PI/180)*Math.cos(_dL);
      const nAz   = (Math.atan2(_y,_x)*180/Math.PI+360)%360;
      const nDist = haversineKm(padLat,padLng,nLat,nLon);
      // Check DR for assigned vessel -- show DR ghost even when NOTMAR present
      const _assignedVessel = launch.vessel_assigned;
      const drPos = _assignedVessel ? getDRPosition(_assignedVessel) : null;
      if (drPos) {
        const drToN = haversineKm(drPos.lat,drPos.lon,nLat,nLon);
        const startD = haversineKm(drPos.lastKnownLat||nLat,drPos.lastKnownLon||nLon,nLat,nLon);
        const blend = interpolateDRtoZone(drPos.lat,drPos.lon,nLat,nLon,padLat,padLng,drToN,40,nAz,startD);
        log(`TRAJ: NOTMAR+DR ${nAz.toFixed(1)}° ${Math.round(nDist)}km · ${_assignedVessel} ${Math.round(drToN)}km from NOTMAR zone`,'alert');
        return {az:blend.az,min:blend.az-blend.spread,max:blend.az+blend.spread,
          distKm:Math.round(nDist),zoneLat:nLat,zoneLng:nLon,
          source:'NOTMAR_DR',drActive:true,drPos,orbitAz:nAz,notmar:true,
          showOrbitZone:true,notmarLat:nLat,notmarLon:nLon};
      }
      // No DR but NOTMAR present -- show NOTMAR zone with orbit circles
      log(`TRAJ: NOTMAR ${nAz.toFixed(1)}° ${Math.round(nDist)}km -- official USCG zone`,'alert');
      return {az:nAz,min:nAz-5,max:nAz+5,distKm:Math.round(nDist),
        zoneLat:nLat,zoneLng:nLon,source:'NOTMAR',drActive:false,orbitAz:nAz,notmar:true,
        showOrbitZone:true,notmarLat:nLat,notmarLon:nLon};
    }
  }

  // Fairing recovery check -- not all SpaceX launches recover fairings
  // Starlink, smallsat rideshares = YES (LEO orbit, uses DOUG/BOB)
  // Crewed missions (ISS/Dragon) = NO fairing
  // GTO/GEO = sometimes no recovery
  const orbit = (launch.mission?.orbit?.abbrev || '').toUpperCase();
  const missionType = (launch.mission?.type || '').toLowerCase();
  const recoversFairings = !missionType.includes('crew') 
    && !missionType.includes('cargo')
    && orbit !== 'GTO' && orbit !== 'GEO' && orbit !== 'GSO';
  if (!recoversFairings) return null;

  // Build candidates with their distance from pad
  // Prefer vessel that is FURTHEST from pad (most downrange = active catcher)
  // Exclude vessels that are clearly returning to port (< 300km from pad = at/near port)
  const candidates = [];
  for (const name of catchers) {
    const drPos = getDRPosition(name);
    const pos = vesselPositions[name];
    const effLat = drPos ? drPos.lat : pos?.lat;
    const effLon = drPos ? drPos.lon : pos?.lng;
    if (!effLat || !effLon) continue;

    const distFromPad = haversineKm(padLat, padLng, effLat, effLon);
    if (distFromPad < 300) continue; // Vessel is near port -- skip (returning from prev mission)

    candidates.push({
      lat: effLat, lon: effLon,
      vessel: name, isDR: !!drPos,
      hoursElapsed: drPos?.hoursElapsed || '0',
      speed: drPos?.speed || pos?.speed,
      course: drPos?.course || pos?.course,
      distFromPad,
    });
  }

  // Sort by distance from pad descending -- furthest downrange = most likely active catcher
  candidates.sort((a, b) => b.distFromPad - a.distFromPad);
  return candidates[0] || null;
}

// Compute refined booster zone from fairing catcher position
// Returns { lat, lon, distKm, bearing, confidence } or null
function refinedBoosterZone(launch, padLat, padLng) {
  const fairingPos = getFairingCatcherDR(launch);
  if (!fairingPos) return null;

  const R = 6371;

  // Distance from pad to fairing catcher
  const dLat = (fairingPos.lat - padLat) * Math.PI/180;
  const dLon = (fairingPos.lon - padLng) * Math.PI/180;
  const a = Math.sin(dLat/2)**2 +
    Math.cos(padLat*Math.PI/180)*Math.cos(fairingPos.lat*Math.PI/180)*Math.sin(dLon/2)**2;
  const fairingDistKm = R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  // Bearing from pad to fairing catcher
  const dLonB = (fairingPos.lon - padLng) * Math.PI/180;
  const y = Math.sin(dLonB) * Math.cos(fairingPos.lat*Math.PI/180);
  const x = Math.cos(padLat*Math.PI/180)*Math.sin(fairingPos.lat*Math.PI/180) -
             Math.sin(padLat*Math.PI/180)*Math.cos(fairingPos.lat*Math.PI/180)*Math.cos(dLonB);
  const fairingBearing = (Math.atan2(y, x) * 180/Math.PI + 360) % 360;

  // Booster lands at ratio * fairing distance, same bearing from pad
  const ratio = getBoosterFairingRatio(launch);
  const boosterDistKm = fairingDistKm * ratio;

  // Project booster position from pad along fairing bearing
  const d = boosterDistKm / R;
  const b = fairingBearing * Math.PI/180;
  const la1 = padLat * Math.PI/180, lo1 = padLng * Math.PI/180;
  const la2 = Math.asin(Math.sin(la1)*Math.cos(d) + Math.cos(la1)*Math.sin(d)*Math.cos(b));
  const lo2 = lo1 + Math.atan2(Math.sin(b)*Math.sin(d)*Math.cos(la1), Math.cos(d)-Math.sin(la1)*Math.sin(la2));

  // Confidence: DR position = medium, live AIS = high
  const confidence = fairingPos.isDR ? 'MEDIUM' : 'HIGH';
  const spread = fairingPos.isDR ? 6 : 4; // degrees of arc spread

  return {
    lat: la2 * 180/Math.PI,
    lon: lo2 * 180/Math.PI,
    distKm: Math.round(boosterDistKm),
    bearing: fairingBearing,
    fairingDistKm: Math.round(fairingDistKm),
    fairingVessel: fairingPos.vessel,
    fairingIsDR: fairingPos.isDR,
    ratio,
    confidence,
    spread,
  };
}

function getLaunchAzimuth(launch) {
  // Priority -1 (v3.2 traj-polish): backend phase-aware prediction wins.
  // trajectory-engine.js v3.5 emits bearing + uncertainty + zone using the
  // vessel phase engine (UNDEPLOYED/TRANSIT/APPROACH/ON_STATION/AIS_DARK).
  // When phase >= APPROACH, uncertainty drops to plus/minus 3deg and bearing
  // blends or locks to live vessel position. fetchAndRenderTrajectory caches
  // the response in window._backendPrediction; this branch reads that cache
  // before falling through to the frontend orbit-model fallback below.
  // Cache miss / stale / null --> orbit model still runs as legacy fallback.
  // v3.3: when phase is AIS_DARK, populate drPos + drDistToZone from
  // AIS_DARK_STATE so drawLaunchArc's DR branch can render the ghost
  // diamond + sonar pulse at the vessel's last-known position.
  if (window._backendPrediction && launch && launch.id) {
    const _bp = window._backendPrediction[launch.id];
    const _bpFresh = _bp && (Date.now() - (_bp._fetchedAt || 0)) < 10 * 60 * 1000;
    if (_bpFresh && _bp.predicted_bearing_deg != null && _bp.recovery_zone_lat != null) {
      const _bUnc = _bp.bearing_uncertainty_deg || 8;
      const _bAz  = _bp.predicted_bearing_deg;
      const _isDark   = _bp.vessel_phase === 'AIS_DARK';
      const _vName    = _bp.primary_vessel;
      const _darkLKP  = (_isDark && _vName && typeof AIS_DARK_STATE !== 'undefined' && AIS_DARK_STATE[_vName]) || null;
      const _drPos    = _darkLKP ? {
        lat:           _darkLKP.lastLat,
        lon:           _darkLKP.lastLon,
        lastKnownLat:  _darkLKP.lastLat,
        lastKnownLon:  _darkLKP.lastLon,
      } : null;
      const _drDistToZone = (_drPos && typeof haversineKm === 'function')
        ? Math.round(haversineKm(_drPos.lat, _drPos.lon, _bp.recovery_zone_lat, _bp.recovery_zone_lon))
        : null;
      log(`TRAJ: BACKEND ${_bp.vessel_phase || ''} -- ${_bp.primary_vessel || 'NO VESSEL'} ` +
          `bearing=${_bAz} ±${_bUnc} zone=${_bp.recovery_zone_lat?.toFixed(3)}/${_bp.recovery_zone_lon?.toFixed(3)} ` +
          `${_bp.confidence_tier || ''} (${_bp.confidence_score || '?'})` +
          (_isDark ? ` · DR ${_drDistToZone||'?'}KM FROM ZONE (LKP ${_drPos?.lat?.toFixed(3)}/${_drPos?.lon?.toFixed(3)})` : ''), 'alert');
      return {
        az:       _bAz,
        min:      _bAz - _bUnc,
        max:      _bAz + _bUnc,
        distKm:   _bp.dist_km || 630,
        zoneLat:  _bp.recovery_zone_lat,
        zoneLng:  _bp.recovery_zone_lon,
        source:   'BACKEND_' + (_bp.vessel_phase || 'UNK'),
        orbitAz:  _bp.orbit_bearing_deg || _bAz,
        drActive: _isDark,
        drPos:        _drPos,        // v3.3 -- DR branch reads this for ghost marker placement
        drDistToZone: _drDistToZone, // v3.3 -- DR branch reads this for "DR ?KM FROM ZONE" tooltip
        suppressZone: false,
        backendPrediction: _bp,
      };
    }
  }

  const padName     = (launch.pad?.name || '').toLowerCase();
  const locName     = (launch.pad?.location?.name || '').toLowerCase();
  const orbit       = (launch.mission?.orbit?.abbrev || '').toUpperCase();
  const missionName = (launch.mission?.name || launch.name || '').toLowerCase();
  const padLat      = parseFloat(launch.pad?.latitude  || 0);
  const padLng      = parseFloat(launch.pad?.longitude || 0);
  const _isSpaceXLaunch = (() => {
    const p = (launch.launch_service_provider?.name || '').toLowerCase();
    return p.includes('spacex') || p.includes('space exploration');
  })();

  // ── Phantom recovery zone suppression (v2.22 / Patch H, 2026-04-23) ─────────
  // Does this launch actually have at-sea booster recovery? If not, suppress
  // the blue "expected recovery zone" orbit-model circle that otherwise draws
  // for every SpaceX launch (including Falcon Heavy RTLS) and would be drawn
  // for any launch unless we gate it.
  //
  //   Explicit signals win:
  //     landing_type='ASDS'            → at-sea
  //     landing_type='RTLS'/'EXPENDED' → not at-sea
  //     vessel_assigned populated      → at-sea by definition
  //   Rocket-config fallback (LL2 free tier rarely populates landing_type):
  //     Falcon 9 / New Glenn → default at-sea
  //     Falcon Heavy         → RTLS per 2026-04-23 policy
  //     Everything else      → no at-sea recovery (Atlas/Vulcan/Electron/etc.)
  const _hasAtSeaRecovery = (() => {
    if (!launch) return false;
    const cfg = (launch.rocket && launch.rocket.configuration && launch.rocket.configuration.name) || '';
    // v2.25 Patch O (2026-04-24) -- FH checked FIRST so booster=RTLS doesn't
    // veto the fairing zone. FH has no booster at-sea, but fairing recovery
    // (DOUG) IS at sea. Kenny 2026-04-24: confirmed DOUG heading ~1500km
    // downrange for Viasat-3 GTO. Clarified in MEMORY 2026-04-23 entry.
    if (/^falcon\s+heavy$/i.test(cfg)) return true;
    const lt = launch.landing_type;
    if (lt === 'ASDS') return true;
    if (lt === 'RTLS' || lt === 'EXPENDED' || lt === 'PARACHUTE') return false;
    if (launch.vessel_assigned) return true;
    if (/^falcon\s+9/i.test(cfg))  return true;    // F9 defaults to ASDS
    if (/^new\s+glenn/i.test(cfg)) return true;    // New Glenn at-sea
    return false;                                   // Expendable / unknown
  })();

  // ── Priority 0: NOTMAR polygon -- official FAA/USCG recovery zone ──────────
  // Published 5-7 days before launch. Most accurate zone data available.
  // When present: use NOTMAR centroid as zone center, bearing as arc baseline
  // Still runs orbit model + DR on top -- NOTMAR refines the zone position
  if (launch.notmar_centroid_lat && launch.notmar_centroid_lon && launch.notmar_bearing) {
    const notmarLat = parseFloat(launch.notmar_centroid_lat);
    const notmarLon = parseFloat(launch.notmar_centroid_lon);
    const notmarBearing = parseFloat(launch.notmar_bearing);
    const notmarDist = parseFloat(launch.notmar_dist_km || 630);

    // Check if DR is active -- if so still let DR run with NOTMAR-refined zone
    const _assignedForDR0 = launch.vessel_assigned;
    // DR guard: only use DR if vessel is >50km from home port (actually deployed)
  const _drRawPos = _assignedForDR0 ? vesselPositions[_assignedForDR0] : null;
  const _drDistFromPort = _drRawPos
    ? haversineKm(_drRawPos.lat||0, _drRawPos.lng||0, 28.415, -80.59)
    : 999;
  const _drCheck0 = (_assignedForDR0 && _drDistFromPort > 50)
    ? getDRPosition(_assignedForDR0) : null;

    if (!_drCheck0) {
      // No DR -- NOTMAR is our best prediction, return it directly
      log(`TRAJ: NOTMAR ${launch.notmar_number || ''} -- official zone ${notmarBearing}° ${notmarDist}km`, 'alert');
      return {
        az: notmarBearing, min: notmarBearing - 8, max: notmarBearing + 8,
        distKm: notmarDist, zoneLat: notmarLat, zoneLng: notmarLon,
        source: 'NOTMAR', orbitAz: notmarBearing,
        notmarNumber: launch.notmar_number,
        notmarPolygon: launch.notmar_polygon || null,
      };
    }
    // DR IS active -- fall through but store NOTMAR zone for DR to use as target
    // Override the zone coords with NOTMAR for more accurate DR blending
    // (Will be picked up in Priority 3b when building the DR blend)
    launch._notmarZoneLat = notmarLat;
    launch._notmarZoneLon = notmarLon;
    launch._notmarBearing = notmarBearing;
  }

  // ── Priority 1: explicit azimuth from Supabase RSS/LL2 scrape ──
  // NOTE: DB azimuth is the baseline but DR can override it when vessel goes dark.
  // We store the DB az for blending but don't return early if DR is active.
  let dbAz = null, dbMin = null, dbMax = null;
  if (launch.azimuth_min != null && launch.azimuth_max != null) {
    dbAz  = (launch.azimuth_min + launch.azimuth_max) / 2;
    dbMin = launch.azimuth_min;
    dbMax = launch.azimuth_max;
    // Check if DR is active for the assigned vessel -- if so, don't short-circuit
    const _assignedForDR = launch.vessel_assigned;
    const _drCheck = _assignedForDR ? getDRPosition(_assignedForDR) : null;
    if (!_drCheck) {
      // v2.28 Patch R (2026-04-24) -- distKm was hardcoded to 630 here, which
      // bypassed Patch O's FH fairing distance (Priority 2 never runs when
      // DB azimuth short-circuits). Compute distance using the same
      // rocket+pad+orbit logic as Priority 2 so Viasat-3 and other FH GTO
      // launches get the 1500km ring, not 630km.
      const _cfgName_DB = (launch.rocket && launch.rocket.configuration && launch.rocket.configuration.name) || '';
      const _isFH_DB    = /^falcon\s+heavy$/i.test(_cfgName_DB);
      const _orbit_DB   = (launch.mission && launch.mission.orbit && launch.mission.orbit.abbrev || '').toUpperCase();
      const _orbitName_DB = (launch.mission && launch.mission.orbit && launch.mission.orbit.name) || '';
      const _padIsCape_DB = padName.includes('lc-39') || padName.includes('slc-40') ||
                            padName.includes('kennedy') || padName.includes('canaveral') ||
                            locName.includes('kennedy') || locName.includes('canaveral');
      const _padIsVand_DB = padName.includes('slc-4e') || padName.includes('vandenberg') ||
                            locName.includes('vandenberg');
      let _dbDistKm = 630;  // safe fallback
      let _dbLabel = null;
      // v2.29 Patch T (2026-04-24) -- bearing + fan overrides for physics-correct
      // FH GEO trajectory. Null = keep the dbAz/dbMin/dbMax derived from Supabase.
      let _dbAzOverride = null, _dbMinOverride = null, _dbMaxOverride = null;
      if (_isFH_DB && _padIsCape_DB) {
        if      (_orbit_DB === 'ISS')                               { _dbDistKm = 380;  _dbLabel = 'FH ISS fairing zone'; }
        else if (_orbit_DB === 'GTO' || _orbit_DB === 'GSO')        {
          _dbDistKm = 1500; _dbLabel = 'FH GEO fairing zone (due-east)';
          // Physics: min inclination from KSC (28.6N pad lat) = 28.6deg. GEO
          // target = 0deg inclination, so fly due east (090) and do plane-
          // change during transfer. DOUG's observed 089.2deg bearing on
          // 2026-04-24 for Viasat-3 confirms. Tight +/-5deg spread since
          // supersynchronous GTO has a narrow optimal corridor. Calibrate
          // further when DOUG's final position is observed at T-0.
          _dbAzOverride = 90; _dbMinOverride = 80; _dbMaxOverride = 100;
        }
        else if (/lunar|moon|tli|cislunar|flyby/i.test(_orbitName_DB)) { _dbDistKm = 2000; _dbLabel = 'FH lunar-transfer fairing zone'; }
        else if (_orbit_DB === 'SSO')                               { _dbDistKm = 400;  _dbLabel = 'FH SSO fairing zone'; }
        else                                                         { _dbDistKm = 1200; _dbLabel = 'FH fairing zone'; }
      } else if (_padIsCape_DB) {
        if      (_orbit_DB === 'ISS')                               _dbDistKm = 380;
        else if (_orbit_DB === 'GTO' || _orbit_DB === 'GSO')        _dbDistKm = 1100;
        else if (_orbit_DB === 'SSO')                               _dbDistKm = 400;
        // Starlink + default stay at 630
      } else if (_padIsVand_DB) {
        if (_orbit_DB === 'SSO' || _orbit_DB === 'POLAR')           _dbDistKm = 480;
        else                                                         _dbDistKm = 420;
      }
      const _finalAz  = _dbAzOverride  !== null ? _dbAzOverride  : dbAz;
      const _finalMin = _dbMinOverride !== null ? _dbMinOverride : dbMin;
      const _finalMax = _dbMaxOverride !== null ? _dbMaxOverride : dbMax;
      return { az: _finalAz, min: _finalMin, max: _finalMax, distKm: _dbDistKm,
               source: 'DB', orbitAz: _finalAz, label: _dbLabel };
    }
    // DR IS active -- fall through to Priority 3 with DB az as zone bearing baseline
  }

  const isCape = padName.includes('lc-39') || padName.includes('slc-40') ||
                 padName.includes('kennedy') || padName.includes('canaveral') ||
                 locName.includes('kennedy') || locName.includes('canaveral');
  const isVand = padName.includes('slc-4e') || padName.includes('vandenberg') ||
                 locName.includes('vandenberg');

  // ── Priority 2: orbit-model recovery zone ──
  // This is always the baseline. We point the arc at the statistically expected
  // landing zone for this pad + orbit type. Always correct, no vessel needed.
  //
  // v2.25 Patch O (2026-04-24) -- Falcon Heavy needs its own zones. Booster
  // side cores RTLS to LZ-1/LZ-2 (not visualized as a downrange circle --
  // those polygons come from NOTMAR Zone A). The at-sea ring we draw for FH
  // represents the FAIRING recovery zone where DOUG is stationed. Historical
  // + live DOUG tracking data (Viasat-3 F3 confirmation 2026-04-24) puts FH
  // fairing recoveries at 1400-2070km downrange on GTO/GEO missions. Use
  // 1500km as the current best estimate; tune once we have ground-truth
  // DOUG stopping points across a few FH GTO missions.
  const _rocketCfg = (launch.rocket && launch.rocket.configuration && launch.rocket.configuration.name) || '';
  const _isFH = /^falcon\s+heavy$/i.test(_rocketCfg);

  let zone = null;
  if (_isFH && isCape) {
    // Falcon Heavy fairing zones. `spread` wider than F9 because DOUG's
    // stopping point has observed variance across FH missions (STP-2 1350km,
    // USSF-44 similar, Europa Clipper 2070km via GO Cosmos). Label kept
    // short for tooltip -- full context lives in the tooltip body text.
    if      (orbit === 'ISS')                     zone = { az: 44,  distKm: 380,  spread: 8,  label: 'FH ISS fairing zone' };
    else if (orbit === 'GTO' || orbit === 'GSO')  zone = { az: 90,  distKm: 1500, spread: 10, label: 'FH GEO fairing zone (due-east)' };
    else if (/lunar|moon|tli|cislunar|flyby/i.test(launch.mission?.orbit?.name || '')) zone = { az: 100, distKm: 2000, spread: 20, label: 'FH lunar-transfer fairing zone' };
    else if (orbit === 'SSO')                     zone = { az: 50,  distKm: 400,  spread: 8,  label: 'FH SSO fairing zone' };
    else                                          zone = { az: 47,  distKm: 1200, spread: 12, label: 'FH fairing zone' };
  } else if (isCape) {
    if      (orbit === 'ISS')                     zone = { az: 44, distKm: 380,  spread: 8  };
    else if (orbit === 'GTO' || orbit === 'GSO')  zone = { az: 95, distKm: 1100, spread: 8  };
    else if (/lunar|moon|tli|cislunar|flyby/i.test(launch.mission?.orbit?.name || '')) zone = { az: 100, distKm: 1800, spread: 15 };
    else if (orbit === 'SSO')                     zone = { az: 50, distKm: 400,  spread: 8  };
    else if (missionName.includes('starlink'))    zone = { az: 47, distKm: 630,  spread: 8  };
    else                                          zone = { az: 47, distKm: 630,  spread: 10 };
  } else if (isVand) {
    if (orbit === 'SSO' || orbit === 'POLAR')     zone = { az: 182, distKm: 480, spread: 7  };
    else                                          zone = { az: 182, distKm: 420, spread: 8  };
  }

  if (zone && padLat && padLng) {
    // Compute the fixed zone target coordinates
    const R=6371, d=zone.distKm/R, b=zone.az*Math.PI/180;
    const la1=padLat*Math.PI/180, lo1=padLng*Math.PI/180;
    const la2=Math.asin(Math.sin(la1)*Math.cos(d)+Math.cos(la1)*Math.sin(d)*Math.cos(b));
    const lo2=lo1+Math.atan2(Math.sin(b)*Math.sin(d)*Math.cos(la1),Math.cos(d)-Math.sin(la1)*Math.sin(la2));
    const zoneLat=la2*180/Math.PI, zoneLng=lo2*180/Math.PI;

    // ── Priority 3: AIS refinement + Dead Reckoning ─────────────────────────
    // vessel_assigned from NSF/SFN ONLY. Three sub-phases:
    //   3a. LIVE AIS on station (<150km from zone) -- direct vessel bearing
    //   3b. AIS DARK -- dead reckoning from last known position + course/speed
    //       DR position interpolated toward zone as vessel approaches
    //   3c. No vessel data -- orbit model only
    const assignedName = launch.vessel_assigned;
    if (assignedName) {

      // ── 3a: Live AIS -- vessel within 150km of zone ──────────────────────
      const pos = vesselPositions[assignedName];
      if (pos?.lat && pos?.lng) {
        const distToZone = haversineKm(pos.lat, pos.lng, zoneLat, zoneLng);
        if (distToZone < 150) {
          const dLng=(pos.lng-padLng)*Math.PI/180;
          const y=Math.sin(dLng)*Math.cos(pos.lat*Math.PI/180);
          const x=Math.cos(padLat*Math.PI/180)*Math.sin(pos.lat*Math.PI/180)-Math.sin(padLat*Math.PI/180)*Math.cos(pos.lat*Math.PI/180)*Math.cos(dLng);
          const az=(Math.atan2(y,x)*180/Math.PI+360)%360;
          const sprd=(pos.speed??1)<0.5?4:7;
          log('TRAJ: '+assignedName+' AIS LOCK '+az.toFixed(1)+'° ('+Math.round(distToZone)+'km from zone)','alert');
          return { az, min:az-sprd, max:az+sprd, distKm:zone.distKm, zoneLat, zoneLng,
                   source:'VESSEL_ONSTATION', drActive:false, orbitAz: dbAz || zone.az };
        }
      }

      // ── 3b: Dead Reckoning -- vessel declared AIS dark ────────────────────
      const drPos = getDRPosition(assignedName);
      if (drPos) {
        const drDistToZone = haversineKm(drPos.lat, drPos.lon, zoneLat, zoneLng);

        if (drDistToZone < 50) {
          // DR position inside zone -- assume on station, use zone bearing
          const dLng=(zoneLng-padLng)*Math.PI/180;
          const y=Math.sin(dLng)*Math.cos(zoneLat*Math.PI/180);
          const x=Math.cos(padLat*Math.PI/180)*Math.sin(zoneLat*Math.PI/180)-Math.sin(padLat*Math.PI/180)*Math.cos(zoneLat*Math.PI/180)*Math.cos(dLng);
          const az=(Math.atan2(y,x)*180/Math.PI+360)%360;
          log(`TRAJ: ${assignedName} DR→ON STATION (est. ${Math.round(drDistToZone)}km from zone, ${drPos.hoursElapsed}hr dark)`,'alert');
          return { az, min:az-4, max:az+4, distKm:zone.distKm, zoneLat, zoneLng,
                   source:'DR_ONSTATION', drActive:true, drPos, orbitAz: dbAz || zone.az };
        } else {
          // DR position still en route -- interpolate between DR and zone
          // ── Phase 3b.5: Zone selection -- NOTMAR > fairing refinement > orbit model
          // Use best available zone target for DR blending
          // Override zone coords if NOTMAR is available
          if (launch._notmarZoneLat) {
            zoneLat = launch._notmarZoneLat;
            zoneLng = launch._notmarZoneLon;
            console.log(`[DR] Using NOTMAR zone: ${zoneLat}N ${Math.abs(zoneLng)}W`);
          }

          // ── Phase 3b.5: Fairing-to-Booster Zone Refinement ──────────────
          // Use fairing catcher DR position to back-calculate booster zone
          // Physics: booster always lands at ~88% of fairing downrange distance
          const fairingRefined = refinedBoosterZone(launch, padLat, padLng);

          let finalZoneLat = zoneLat, finalZoneLng = zoneLng;
          let fairingNote = '';

          if (fairingRefined) {
            // Use fairing-derived zone as primary target -- more accurate than orbit model
            finalZoneLat = fairingRefined.lat || zoneLat;
            finalZoneLng = fairingRefined.lon || zoneLng;
            fairingNote = ` · ${fairingRefined.fairingVessel}${fairingRefined.fairingIsDR?'(DR)':'(LIVE)'} → booster@${fairingRefined.distKm}km`;
            log(`TRAJ: FAIRING REFINEMENT -- ${fairingRefined.fairingVessel} at ${fairingRefined.fairingDistKm}km → booster zone refined to ${fairingRefined.distKm}km · ratio=${fairingRefined.ratio} · conf=${fairingRefined.confidence}`, 'alert');
          }

          const startDistToZone = haversineKm(
            drPos.lastKnownLat, drPos.lastKnownLon, finalZoneLat, finalZoneLng
          );
          const blend = interpolateDRtoZone(
            drPos.lat, drPos.lon, finalZoneLat, finalZoneLng,
            padLat, padLng, drDistToZone, zone.radiusKm || 80,
            dbAz || zone.az, startDistToZone
          );
          log(`TRAJ: ${assignedName} DEAD RECKONING ${blend.az.toFixed(1)}° · orbit=${blend.zoneBearing}° dr=${blend.drBearing}° · blend=${blend.distRatio} · ${Math.round(drDistToZone)}km from zone · ${drPos.hoursElapsed}hr dark${fairingNote}`,'alert');
          return { az:blend.az, min:blend.az-blend.spread, max:blend.az+blend.spread,
                   distKm: (fairingRefined?.distKm) || zone.distKm,
                   zoneLat: finalZoneLat, zoneLng: finalZoneLng,
                   source:'DEAD_RECKONING', drActive:true, drPos,
                   drDistToZone:Math.round(drDistToZone),
                   fairingRefined: fairingRefined || null, orbitAz: dbAz || zone.az };
        }
      }
    }

    // Default: pure orbit model -- no vessel data used
    return { az:zone.az, min:zone.az-zone.spread, max:zone.az+zone.spread,
             distKm:zone.distKm, zoneLat, zoneLng, source:'ORBIT_MODEL', drActive:false,
             orbitAz:zone.az, suppressZone: !_hasAtSeaRecovery };
  }

  // Fallback for unmapped pads
  // v2.24 Patch K (2026-04-24) -- also gate the phantom recovery-zone circle
  // for fallback pads (Plesetsk, Jiuquan, Xichang, Wenchang, Baikonur,
  // Vostochny, Mahia, Wallops, etc.). Without this, Russia/China/Electron
  // launches render an orbit-model ring via the unmapped-pad path because
  // `suppressZone` was undefined and the gate `!suppressZone || showOrbitZone`
  // evaluates !undefined = true. Honor the rocket-config predicate the main
  // branch already uses.
  const simpleAz = getAzimuth(locName||padName);
  return { az:simpleAz, min:simpleAz-11, max:simpleAz+11, distKm:630,
           source:'FALLBACK', suppressZone: !_hasAtSeaRecovery };
}


let _drawArcInProgress = false;
let _replayActive  = false; // mission replay state
let _replayTimers  = [];    // setTimeout handles for replay cleanup
let _replayLayers  = [];    // Leaflet layers added during replay
// ── Patch BB (v2.35, 2026-04-25) -- moving particle along trajectory arc ──
// Animates a small glowing dot from pad to zone center over ~7s, looping.
// Constant visible motion = transit phase no longer feels static even when
// nothing else is changing. RAF-driven for smooth animation. Color comes
// from the trajectory's current T-minus stroke (Patch Z).
//
// v2.36 Patch BB-fix (2026-04-25) -- particle was visibly "leaving" the
// polyline during user zoom/pan because Leaflet's circleMarker.setLatLng()
// reprojects to the post-transform map state while the SVG pane is still
// mid-CSS-transform. Fix: pause + hide the particle on movestart/zoomstart,
// restore on moveend/zoomend. Listeners attached ONCE per session.
let _arcParticleMarker = null;
let _arcParticleAnimHandle = null;
let _arcParticleStartMs = 0;
let _arcParticleListenersAttached = false;
let _arcParticleMoving = false;
const ARC_PARTICLE_CYCLE_MS = 7000;

function _attachArcParticleListeners() {
  if (_arcParticleListenersAttached) return;
  if (typeof map === 'undefined' || !map) return;
  _arcParticleListenersAttached = true;
  map.on('movestart zoomstart', function () {
    _arcParticleMoving = true;
    const el = _arcParticleMarker && _arcParticleMarker.getElement && _arcParticleMarker.getElement();
    if (el) el.style.opacity = '0';
  });
  map.on('moveend zoomend', function () {
    _arcParticleMoving = false;
    // Next RAF tick will set position + opacity correctly.
  });
}

function startArcParticle(arcPts, colorRgb) {
  stopArcParticle();
  if (!arcPts || arcPts.length < 2 || typeof map === 'undefined' || !map) return;
  const fillRgba   = 'rgba(' + colorRgb[0] + ',' + colorRgb[1] + ',' + colorRgb[2] + ',0.95)';
  const glowRgba   = 'rgba(' + colorRgb[0] + ',' + colorRgb[1] + ',' + colorRgb[2] + ',0.75)';
  _arcParticleMarker = L.circleMarker(arcPts[0], {
    radius: 5,
    color: fillRgba,
    fillColor: fillRgba,
    fillOpacity: 0.9,
    weight: 0,
    interactive: false,
    className: 'launch-arc-particle'
  }).addTo(map);
  // Set per-launch glow color via CSS custom property.
  setTimeout(function () {
    const el = _arcParticleMarker && _arcParticleMarker.getElement && _arcParticleMarker.getElement();
    if (el) el.style.setProperty('--arc-particle-glow', glowRgba);
  }, 0);

  const PTS = arcPts.length;
  _arcParticleStartMs = (typeof performance !== 'undefined' && performance.now)
    ? performance.now() : Date.now();
  _attachArcParticleListeners();

  function tick(ts) {
    if (!_arcParticleMarker) return;

    // Patch BB-fix -- skip position/opacity updates while the map is mid-pan
    // or mid-zoom. Marker stays hidden (opacity 0 set by movestart handler)
    // until moveend fires; next tick after that resumes normal rendering.
    if (_arcParticleMoving) {
      _arcParticleAnimHandle = (typeof requestAnimationFrame !== 'undefined')
        ? requestAnimationFrame(tick) : setTimeout(tick, 33);
      return;
    }

    const now = (ts !== undefined) ? ts
      : ((typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now());
    const elapsed = (now - _arcParticleStartMs) % ARC_PARTICLE_CYCLE_MS;
    const t = elapsed / ARC_PARTICLE_CYCLE_MS;  // 0..1
    const idx = Math.min(PTS - 1, Math.floor(t * (PTS - 1)));
    const pt = arcPts[idx];
    if (pt && _arcParticleMarker.setLatLng) _arcParticleMarker.setLatLng(pt);

    // Smooth fade-in (first 10%) and fade-out (last 10%) so the loop wraparound
    // doesn't snap visually back to pad position.
    let fade;
    if (t < 0.1) fade = t / 0.1;
    else if (t > 0.9) fade = (1 - t) / 0.1;
    else fade = 1;
    const el = _arcParticleMarker.getElement && _arcParticleMarker.getElement();
    if (el) el.style.opacity = fade.toFixed(2);

    _arcParticleAnimHandle = (typeof requestAnimationFrame !== 'undefined')
      ? requestAnimationFrame(tick) : setTimeout(tick, 33);
  }
  _arcParticleAnimHandle = (typeof requestAnimationFrame !== 'undefined')
    ? requestAnimationFrame(tick) : setTimeout(tick, 33);
}

function stopArcParticle() {
  if (_arcParticleAnimHandle) {
    if (typeof cancelAnimationFrame !== 'undefined') {
      try { cancelAnimationFrame(_arcParticleAnimHandle); } catch(e) {}
    }
    try { clearTimeout(_arcParticleAnimHandle); } catch(e) {}
    _arcParticleAnimHandle = null;
  }
  if (_arcParticleMarker && typeof map !== 'undefined' && map) {
    try { map.removeLayer(_arcParticleMarker); } catch(e) {}
    _arcParticleMarker = null;
  }
}

function drawLaunchArc(launch) {
  // Debounce -- prevent double-draw from simultaneous triggers
  if (_drawArcInProgress) return;
  _drawArcInProgress = true;
  clearLaunchArc();
  // Multi-site polish: PRIMARY DOMINANT keeps ambient up but dims non-focused
  // sites. Classic (LW_PRIMARY_DOMINANT false) falls back to Stage-3 hide.
  if (LW_PRIMARY_DOMINANT && ambientNotmarLayer && _ambientNotmarVisible) {
    dimAmbientNotmarExceptSite(detectLaunchSite(launch));
  } else if (typeof hideAmbientNotmar === 'function') {
    hideAmbientNotmar();
  }

  // ── Lifecycle draw flags ─────────────────────────────────────────────────
  // After AIS restore, we drop arc + DR but keep vessel trails + NOTMAR
  const _lc = getLifecycleDrawFlags(launch);
  const _showArc    = _lc.show_arc;
  const _showDR     = _lc.show_dr;
  const _showNotmar = _lc.show_notmar;
  if (_lc.state === 'RECOVERY_COMPLETE') {
    // Recovery complete -- nothing to draw, just vessel trails
    setTimeout(() => { _drawArcInProgress = false; }, 150);
    return;
  }

  const pad = launch.pad;
  if (!pad?.latitude || !pad?.longitude) return;
  const padLat = parseFloat(pad.latitude);
  const padLng = parseFloat(pad.longitude);

  const azResult = getLaunchAzimuth(launch);
  const { az, min: azMin, max: azMax } = azResult;
  const isSpaceX = (launch.launch_service_provider?.name || '').toLowerCase().includes('spacex');

  // v2.35 Patch BB (2026-04-25) -- moving particle along trajectory arc.
  // Stop any prior animation and start fresh below once the arc is built.
  if (typeof stopArcParticle === 'function') { try { stopArcParticle(); } catch(e){} }

  // v2.34 Patch Z (2026-04-25) -- T-minus color gradient on trajectory arc.
  // Reuses notmarColorForTMinus() (same gradient already driving NOTMAR
  // polygon strokes): phosphor green at T-72h+, yellow-green at T-48h,
  // amber at T-24h, orange at T-12h, hot red at T-0 and post-launch.
  // drawLaunchArc fires on select AND every 60s, so the color shifts
  // as T-minus ticks down -- the arc visibly intensifies as launch nears.
  const _tMinusHrs = launch.net ? (new Date(launch.net) - Date.now()) / 3.6e6 : null;
  const _tmColor = (typeof notmarColorForTMinus === 'function')
                     ? notmarColorForTMinus(_tMinusHrs) : [0, 191, 255];  // brand cyan fallback
  const _arcStrokeStr = 'rgb(' + _tmColor[0] + ',' + _tmColor[1] + ',' + _tmColor[2] + ')';

  // --- Primary trajectory arc (centre azimuth) ---
  const arcPts = buildArcPoints(padLat, padLng, az, 2800);
  activeLaunchArc = L.polyline(arcPts, {
    color: _arcStrokeStr,
    weight: 2,
    opacity: 0.85,
    dashArray: '8 5',
    className: 'launch-arc-primary'
  }).addTo(map);
  // Apply T-minus glow color via CSS custom property so the existing
  // launch-arc-primary keyframes can pick it up.
  setTimeout(function () {
    const _el = activeLaunchArc && activeLaunchArc.getElement && activeLaunchArc.getElement();
    if (_el) _el.style.setProperty('--arc-glow', 'rgba(' + _tmColor[0] + ',' + _tmColor[1] + ',' + _tmColor[2] + ',0.6)');
  }, 0);

  // v2.35 Patch BB -- kick off the moving particle along this arc.
  if (typeof startArcParticle === 'function') {
    try { startArcParticle(arcPts, _tmColor); } catch(e) { console.warn('arc particle start failed:', e.message); }
  }

  // --- Azimuth fan lines (min/max boundary) ---
  // Spread comes from azResult -- real confidence bounds from our prediction
  // model, NOT cosmetic. Don't compress this for visual polish.
  if (azMax - azMin > 2) {
    const fanMin = buildArcPoints(padLat, padLng, azMin, 2800);
    const fanMax = buildArcPoints(padLat, padLng, azMax, 2800);
    [fanMin, fanMax].forEach(pts => {
      const fl = L.polyline(pts, {
        color: _arcStrokeStr, weight: 1, opacity: 0.25, dashArray: '4 8',
        className: 'launch-arc-fan'
      }).addTo(map);
      activeLaunchArcFan.push(fl);
    });
  }

  // --- Booster ring: only when vessel <300km from zone AND not returning home ---
  // v2.23 -- widen beyond SpaceX to include Blue Origin (Jacklyn) drone-ship missions.
  const _droneShipCarrier = isSpaceX || /^new\s+glenn/i.test((launch.rocket?.configuration?.name) || '');
  if (_droneShipCarrier && azResult.zoneLat && azResult.zoneLng) {
    for (const vname of ['ASOG','JRTI','JACKLYN']) {
      const pos = vesselPositions[vname];
      if (!pos?.lat) continue;
      // Skip if vessel is heading back to port (course SW + close to port)
      // v3.16: route through DR engine for accurate direction even when AIS heading is null
      const _course = getVesselDirection(vname, pos).value;
      const _distFromPort = haversineKm(pos.lat, pos.lng, 28.415, -80.59);
      const _returningHome = _course >= 190 && _course <= 320 && _distFromPort < 800;
      if (_returningHome) continue;
      // Also skip if vessel is still in port area (just departed -- not at station yet)
      if (_distFromPort < 50) continue;
      // Skip if DR declared this vessel as returning
      const _drState = AIS_DARK_STATE[vname];
      if (_drState?.returningToPort) continue;
      const d2z = haversineKm(pos.lat, pos.lng, azResult.zoneLat, azResult.zoneLng);
      // 50km threshold -- booster never lands >50km from the planned zone
      // Prevents drawing ring on vessels still at port or transiting
      const _zoneThreshold = azResult.notmarActive ? 40 : 50;
      if (d2z < _zoneThreshold) {
        drawBoosterRing(pos.lat, pos.lng, vname, (pos.speed??1) < 0.5);
        break;
      }
    }
  }

  log(`TRAJECTORY ARC DRAWN -- AZ ${Math.round(az)}° (${Math.round(azMin)}°-${Math.round(azMax)}°) [${azResult.source||''}]`, 'alert');

  // Draw orbit-model recovery zone circle -- always shown as the baseline target
  // This is where we expect the booster to land based on orbit + pad history.
  // Vessel ring replaces this once vessel is close.
  const _azR = getLaunchAzimuth(launch);
  if (_azR.distKm && padLat && padLng) {
    // Inline geodesic: compute zone center from pad + azimuth + distance
    const _R=6371, _d=_azR.distKm/_R, _b=_azR.az*Math.PI/180;
    const _la1=padLat*Math.PI/180, _lo1=padLng*Math.PI/180;
    const _la2=Math.asin(Math.sin(_la1)*Math.cos(_d)+Math.cos(_la1)*Math.sin(_d)*Math.cos(_b));
    const _lo2=_lo1+Math.atan2(Math.sin(_b)*Math.sin(_d)*Math.cos(_la1),Math.cos(_d)-Math.sin(_la1)*Math.sin(_la2));
    const zoneCenter = [_la2*180/Math.PI, _lo2*180/Math.PI];

    // Determine vessel proximity to zone
    // IMPORTANT: if DR is active for the assigned vessel, skip the vessel proximity
    // visual entirely -- let the DR branch handle arc + ghost vessel treatment
    // NOTMAR_DR also has a live DR position -- draw ghost track for it too
    const _drActiveForDraw = _azR.drActive && (
      _azR.source === 'DEAD_RECKONING' || 
      _azR.source === 'DR_ONSTATION' ||
      _azR.source === 'BACKEND_AIS_DARK' ||  // v3.3 -- backend phase-engine equivalent of legacy DR
      (_azR.source === 'NOTMAR_DR' && _azR.drPos)
    );

    const droneShip2 = (!_drActiveForDraw && isSpaceX) ? resolveBoosterShip(launch) : null;
    const vesselPos2 = droneShip2 ? vesselPositions[droneShip2.name] : null;
    const distToZone = (vesselPos2 && !isVesselInPort(droneShip2.name))
      ? haversineKm(vesselPos2.lat, vesselPos2.lng, zoneCenter[0], zoneCenter[1])
      : Infinity;

    // Three states:
    //   LOCKED   -- vessel <150km from zone → orange circle + booster ring
    //   APPROACH -- vessel 150-300km from zone → orange circle (no ring yet)
    //   TRANSIT  -- vessel >300km or in port → blue orbit-model circle
    // NOTE: all three are bypassed when DR is active (_drActiveForDraw)
    const isLocked   = !_drActiveForDraw && distToZone < 150;
    const isApproach = !_drActiveForDraw && distToZone >= 150 && distToZone < 300;
    const aisLocked  = isLocked || isApproach;

    // Zone center (same computation used for both blue and orange)
    {
      const R2=6371,d2=_azR.distKm/R2,b2=_azR.az*Math.PI/180;
      const la1b=padLat*Math.PI/180,lo1b=padLng*Math.PI/180;
      const la2b=Math.asin(Math.sin(la1b)*Math.cos(d2)+Math.cos(la1b)*Math.sin(d2)*Math.cos(b2));
      const lo2b=lo1b+Math.atan2(Math.sin(b2)*Math.sin(d2)*Math.cos(la1b),Math.cos(d2)-Math.sin(la1b)*Math.sin(la2b));
      const zLat=la2b*180/Math.PI, zLng=lo2b*180/Math.PI;
      _azR.zoneLat=zLat; _azR.zoneLng=zLng;
      azResult.zoneLat=zLat; azResult.zoneLng=zLng;
      // When DR is active:
      // Zone circle (booster landing prediction) = ASOG DR position snapped to arc bearing
      // We use the arc bearing for direction, DR distance for how far downrange
      // This keeps the zone offshore on the arc, at the correct DR distance
      let _zLat = zLat, _zLng = zLng;
      if (_azR.drActive && _azR.drPos) {
        const _drDistFromPad = haversineKm(padLat, padLng, _azR.drPos.lat, _azR.drPos.lon);
        // Use the ORIGINAL arc bearing (orbit model) not the blended DR bearing
        // so the zone stays on the known arc line
        const _snapBrng = (_azR.orbitAz || _azR.az) * Math.PI / 180;
        const _dSnap = _drDistFromPad / 6371;
        const _la1s = padLat*Math.PI/180, _lo1s = padLng*Math.PI/180;
        const _la2s = Math.asin(Math.sin(_la1s)*Math.cos(_dSnap)+Math.cos(_la1s)*Math.sin(_dSnap)*Math.cos(_snapBrng));
        const _lo2s = _lo1s+Math.atan2(Math.sin(_snapBrng)*Math.sin(_dSnap)*Math.cos(_la1s),Math.cos(_dSnap)-Math.sin(_la1s)*Math.sin(_la2s));
        _zLat = _la2s * 180/Math.PI;
        _zLng = ((_lo2s * 180/Math.PI)+540)%360-180;
      }
      const zc = [_zLat, _zLng];

      if (_showArc && aisLocked) {
        // ── AIS LOCKED -- orange treatment ──────────────────────────────
        // Vessel is close to zone. Transition orbit circle to orange.
        // Outer glow ring
        const lockColor  = '#FFB000';
        const lockFill   = '#ff6b35';
        const lockClass  = isLocked ? 'orbit-zone-locked' : 'orbit-zone-approach';

        const gr=L.circle(zc,{radius:175000,color:lockColor,fill:false,weight:1.5,opacity:isLocked?0.6:0.38,dashArray:isLocked?null:'6,8',className:lockClass}).addTo(map);
        activeLaunchArcFan.push(gr);

        // Inner solid circle -- main indicator
        const mc=L.circle(zc,{radius:120000,color:lockColor,fillColor:lockFill,fillOpacity:isLocked?0.05:0.03,weight:isLocked?2:1.5,opacity:isLocked?0.8:0.55,dashArray:isLocked?null:'6,5',className:lockClass}).addTo(map);
        activeLaunchArcFan.push(mc);

        // If fully locked: add pulsing outer halos (same as booster ring)
        if (isLocked) {
          [1.6, 2.2].forEach((mult, i) => {
            const pr = L.circle(zc, {
              radius: 120000 * mult,
              color: lockColor, weight: 1,
              opacity: 0.18 - i*0.07,
              fill: false, dashArray: '3 10',
              className: 'orbit-zone-locked-pulse'
            }).addTo(map);
            activeLaunchArcFan.push(pr);
          });
        }

        // Center dot
        const cd=L.circleMarker(zc,{radius:7,color:lockColor,fillColor:lockColor,fillOpacity:0.9,weight:2,className:'orbit-zone-center-locked'}).addTo(map)
          .bindTooltip('<span style="font-family:VT323,monospace;color:#FFB000;letter-spacing:0.1em;">'
            +(isLocked?'● AIS LOCKED -- ':'⚠ VESSEL APPROACH -- ')
            +droneShip2.name
            +'<br>~'+Math.round(_azR.distKm)+'KM DOWNRANGE<br>'
            +'<span style="color:#ff6b35;font-size:0.85em;">'+Math.round(distToZone)+'KM FROM ZONE</span>'
            +'</span>',{direction:'top'});
        activeLaunchArcFan.push(cd);

        log('AIS '+(isLocked?'LOCKED':'APPROACH')+': '+droneShip2.name+' -- '+Math.round(distToZone)+'KM FROM ZONE', 'alert');

      } else if (_showDR && (_azR.source === 'DEAD_RECKONING' || _azR.source === 'DR_ONSTATION' || _azR.source === 'NOTMAR_DR' || _azR.source === 'BACKEND_AIS_DARK')) {
        // ── DEAD RECKONING -- full ghost vessel treatment
        // For NOTMAR_DR: also draw orbit model circles behind the ghost
        if (_azR.source === 'NOTMAR_DR' && _showArc && zc && !_azR.suppressZone) {
          const _ogr = L.circle(zc, {radius:170000, color:'#4a9fd4', fill:false, weight:1, opacity:0.18, dashArray:'4,12', className:'orbit-zone-circle', renderer: L.canvas()}).addTo(map);
          activeLaunchArcFan.push(_ogr);
          const _omc = L.circle(zc, {radius:120000, color:'#4a9fd4', fillColor:'#4a6fa5', fillOpacity:0.04, weight:2, opacity:0.7, dashArray:'8,5', className:'orbit-zone-circle', renderer: L.canvas()}).addTo(map);
          activeLaunchArcFan.push(_omc);
        }
        const isOnStation = _azR.source === 'DR_ONSTATION' || _azR.source === 'BACKEND_ON_STATION';
        const drPos = _azR.drPos;
        const assignedName = launch.vessel_assigned || 'VESSEL';
        const zoneColor = isOnStation ? '#FF6B35' : '#FFB000';
        const darkColor = '#CC8800';
        const zoneLabel = isOnStation
          ? 'EST. ON STATION -- AIS DARK'
          : `AIS DARK · DR ${_azR.drDistToZone||'?'}KM FROM ZONE`;

        // ── Zone circle -- amber pulsing ───────────────────────────────────────
        const gr=L.circle(zc,{radius:170000,color:zoneColor,fill:false,weight:1.5,
          opacity:0.5,dashArray:'6,8',className:'orbit-zone-circle'}).addTo(map);
        activeLaunchArcFan.push(gr);
        const mc=L.circle(zc,{radius:120000,color:zoneColor,fillColor:zoneColor,
          fillOpacity:0.06,weight:2,opacity:0.7,dashArray:'6,6',
          className:'orbit-zone-circle'}).addTo(map);
        activeLaunchArcFan.push(mc);
        const cd=L.circleMarker(zc,{radius:6,color:zoneColor,fillColor:zoneColor,
          fillOpacity:0.85,weight:2,className:'orbit-zone-center'}).addTo(map)
          .bindTooltip(`<span style="font-family:VT323,monospace;color:${zoneColor};letter-spacing:0.1em;">&#9672; ${zoneLabel}<br>~${Math.round(_azR.distKm)}KM DOWNRANGE<br>BEARING ${_azR.az.toFixed(1)}°</span>`,
            {permanent:false,className:'arc-tooltip'});
        activeLaunchArcFan.push(cd);

        if (drPos) {
          const lastKnown = L.latLng(drPos.lastKnownLat, drPos.lastKnownLon);
          const ghostPos  = L.latLng(drPos.lat, drPos.lon);

          // ── DR RING -- sonar ping at last known position ───────────────────
          // Outer expanding ring (CSS animation via className)
          const drRing1 = L.circle(lastKnown, {
            radius: 35000, color: '#FFB000', fill: false,
            weight: 2, opacity: 0.7, dashArray: '6,4',
            className: 'dr-sonar-ring'
          }).addTo(map);
          activeLaunchArcFan.push(drRing1);
          const drRing2 = L.circle(lastKnown, {
            radius: 20000, color: '#FFB000', fill: true,
            fillColor: '#FFB000', fillOpacity: 0.08,
            weight: 1.5, opacity: 0.5,
            className: 'dr-sonar-ring-inner'
          }).addTo(map);
          activeLaunchArcFan.push(drRing2);

          // ── GHOST MARKER at last known position ───────────────────────────
          const ghostLKP = L.circleMarker(lastKnown, {
            radius: 8, color: '#CC8800', fillColor: '#CC8800',
            fillOpacity: 0.25, weight: 1.5, opacity: 0.6,
            className: 'dr-ghost-lkp'
          }).addTo(map)
            .bindTooltip(`<span style="font-family:VT323,monospace;color:#CC8800;letter-spacing:0.1em;">&#9645; LAST KNOWN POSITION<br>${assignedName||'VESSEL'}<br>AIS LOST: ${drPos.darkDeclaredAt?.substring(11,16)||'?'} UTC</span>`,
              {permanent:false,className:'arc-tooltip'});
          activeLaunchArcFan.push(ghostLKP);

          // ── PROJECTED TRAIL -- hourly tick marks from LKP to current DR pos ─
          // Plot a point every hour along the DR track
          const hoursElapsed = parseFloat(drPos.hoursElapsed) || 0;
          const trailPoints = [lastKnown];
          const tickMarks = [];
          // Plot trail points every 2hrs to avoid too many layers on long dark periods
          const tickInterval = Math.max(2, Math.ceil(hoursElapsed / 8)); // max 8 ticks
          for (let h = tickInterval; h <= hoursElapsed; h += tickInterval) {
            const tp = deadReckonPosition(
              drPos.lastKnownLat, drPos.lastKnownLon,
              drPos.course, drPos.speed, h
            );
            const opacity = Math.max(0.15, 0.7 - (h / hoursElapsed) * 0.3);
            trailPoints.push(L.latLng(tp.lat, tp.lon));
            tickMarks.push({ latlng: L.latLng(tp.lat, tp.lon), hour: Math.round(h), opacity });
          }
          trailPoints.push(ghostPos);

          // Dashed amber projected trail line
          const drTrail = L.polyline(trailPoints, {
            color: '#FFB000', weight: 1.5, opacity: 0.5,
            dashArray: '5,7', className: 'dr-projected-trail'
          }).addTo(map);
          activeLaunchArcFan.push(drTrail);

          // Hour tick marks along trail
          for (const tick of tickMarks) {
            const tm = L.circleMarker(tick.latlng, {
              radius: 3, color: '#FFB000', fillColor: '#FFB000',
              fillOpacity: tick.opacity * 0.8, weight: 1,
              opacity: tick.opacity, className: 'dr-tick-mark'
            }).addTo(map)
              .bindTooltip(`<span style="font-family:VT323,monospace;color:#CC8800;font-size:10px;">T+${tick.hour}HR DR</span>`,
                {permanent:false,className:'arc-tooltip'});
            activeLaunchArcFan.push(tm);
          }

          // ── GHOST VESSEL -- current estimated position ─────────────────────
          // Pulsing semi-transparent marker showing WHERE WE THINK IT IS NOW
          const ghostMarker = L.circleMarker(ghostPos, {
            radius: 9, color: '#FFB000', fillColor: '#FF8C00',
            fillOpacity: 0.45, weight: 2, opacity: 0.85,
            className: 'dr-ghost-vessel'
          }).addTo(map)
            .bindTooltip(`<span style="font-family:VT323,monospace;color:#FFB000;letter-spacing:0.1em;">&#9670; ${assignedName||'VESSEL'} -- GHOST TRACK<br>EST. POS · ${drPos.hoursElapsed}HR DARK<br>${drPos.speed?.toFixed(0)||'?'}KTS · ${drPos.course?.toFixed(0)||'?'}° · DR</span>`,
              {permanent:false,className:'arc-tooltip'});
          activeLaunchArcFan.push(ghostMarker);

          // Extension line: ghost position → zone (where it's heading)
          const ghostToZone = L.polyline([ghostPos, zc], {
            color: '#FF8C00', weight: 1, opacity: 0.3, dashArray: '3,10'
          }).addTo(map);
          activeLaunchArcFan.push(ghostToZone);
        }

        log(`TRAJ: AIS DARK -- ${assignedName||'vessel'} ghost track active · ${drPos?.hoursElapsed||'?'}hr dark`, 'warn');

        // ── Fairing catcher ghost markers ─────────────────────────────────────
        // Show fairing catchers on map with their own DR positions
        if (_azR.fairingRefined && _azR.fairingRefined.lat && _azR.fairingRefined.lon) {
          const fr = _azR.fairingRefined;
          // Mark the fairing-refined booster zone (only when fairing catcher has valid position)
          const refinedZone = L.circle([fr.lat, fr.lon], {
            radius: 60000,
            color: '#FF6B35', fillColor: '#FF6B35', fillOpacity: 0.04,
            weight: 1.5, opacity: 0.6, dashArray: '8,4',
            className: 'fairing-refined-zone'
          }).addTo(map);
          activeLaunchArcFan.push(refinedZone);

          const refinedLabel = L.circleMarker([fr.lat, fr.lon], {
            radius: 5, color: '#FF6B35', fillColor: '#FF6B35',
            fillOpacity: 0.9, weight: 1.5
          }).addTo(map)
            .bindTooltip(`<span style="font-family:VT323,monospace;color:#FF6B35;letter-spacing:0.1em;">&#9672; BOOSTER ZONE -- FAIRING REFINED<br>${fr.fairingVessel}${fr.fairingIsDR?' (DR EST)':' (LIVE)'} · ratio=${fr.ratio}<br>~${fr.distKm}KM DOWNRANGE · ${fr.confidence} CONFIDENCE</span>`,
              {permanent:false, className:'arc-tooltip'});
          activeLaunchArcFan.push(refinedLabel);

          // Show fairing catcher DR position
          const fcDR = getDRPosition(fr.fairingVessel);
          // Only show fairing ghost for SpaceX launches with explicit vessel assignment
          const _isSpaceXLaunch = (() => {
            const p = (launch.launch_service_provider?.name || '').toLowerCase();
            return p.includes('spacex') || p.includes('space exploration');
          })();
          if (fcDR && _isSpaceXLaunch && launch.vessel_assigned) {
            // Constrain fairing catcher to arc line too -- farther downrange
            const _fcDistFromPad = haversineKm(padLat, padLng, fcDR.lat, fcDR.lon);
            const _fcArcBrng = (_azR.orbitAz || _azR.az || 47.5) * Math.PI/180;
            const _fcD = _fcDistFromPad / 6371;
            const _fcLa1 = padLat*Math.PI/180, _fcLo1 = padLng*Math.PI/180;
            const _fcLa2 = Math.asin(Math.sin(_fcLa1)*Math.cos(_fcD)+Math.cos(_fcLa1)*Math.sin(_fcD)*Math.cos(_fcArcBrng));
            const _fcLo2 = _fcLo1+Math.atan2(Math.sin(_fcArcBrng)*Math.sin(_fcD)*Math.cos(_fcLa1),Math.cos(_fcD)-Math.sin(_fcLa1)*Math.sin(_fcLa2));
            const _fcLat = _fcLa2*180/Math.PI;
            const _fcLon = ((_fcLo2*180/Math.PI)+540)%360-180;
            const fcGhost = L.circleMarker([_fcLat, _fcLon], {
              radius: 7, color: '#FF8C00', fillColor: '#FF8C00',
              fillOpacity: 0.35, weight: 1.5, opacity: 0.7,
              className: 'dr-ghost-vessel'
            }).addTo(map)
              .bindTooltip(`<span style="font-family:VT323,monospace;color:#FF8C00;letter-spacing:0.1em;">&#9670; ${fr.fairingVessel} -- FAIRING CATCHER GHOST<br>EST. POS · ${fcDR.hoursElapsed}HR DARK<br>${fcDR.speed?.toFixed(0)||'?'}KTS · DR</span>`,
                {permanent:false, className:'arc-tooltip'});
            activeLaunchArcFan.push(fcGhost);

            // Line from fairing catcher to refined booster zone
            const fcToBooster = L.polyline([[fcDR.lat, fcDR.lon], [fr.lat, fr.lon]], {
              color: '#FF6B35', weight: 1, opacity: 0.3, dashArray: '3,8'
            }).addTo(map);
            activeLaunchArcFan.push(fcToBooster);
          }
        }

      } else if (_azR.source === 'NOTMAR') {
        // ── NOTMAR -- purple treatment (official FAA/USCG zone) ───────────
        const notmarColor = '#7B4FFF';
        const gr = L.circle(zc, { radius: 170000, color: notmarColor, fill: false,
          weight: 1.5, opacity: 0.6, dashArray: '6,4', className: 'notmar-zone-circle' }).addTo(map);
        activeLaunchArcFan.push(gr);
        const mc = L.circle(zc, { radius: 120000, color: notmarColor, fillColor: notmarColor,
          fillOpacity: 0.06, weight: 2, opacity: 0.7, dashArray: '6,6' }).addTo(map);
        activeLaunchArcFan.push(mc);
        const cd = L.circleMarker(zc, { radius: 6, color: notmarColor, fillColor: notmarColor,
          fillOpacity: 0.85, weight: 2 }).addTo(map)
          .bindTooltip(
            `<span style="font-family:VT323,monospace;color:${notmarColor};letter-spacing:0.1em;">` +
            `&#9632; NOTMAR ${_azR.notmarNumber || 'OFFICIAL'}<br>` +
            `USCG RECOVERY ZONE<br>~${Math.round(_azR.distKm)}KM · ${_azR.az.toFixed(1)}°</span>`,
            { permanent: false, className: 'arc-tooltip' }
          );
        activeLaunchArcFan.push(cd);
        log(`TRAJ: NOTMAR ZONE -- ${_azR.notmarNumber || 'official'} · ${_azR.az.toFixed(1)}° · ${Math.round(_azR.distKm)}km`, 'alert');

      } else if (_showArc && (!_azR.suppressZone || _azR.showOrbitZone)) {
        // ── ORBIT MODEL -- blue treatment + always show when NOTMAR active ──
        const gr=L.circle(zc,{radius:170000,color:'#4a9fd4',fill:false,weight:1,opacity:0.28,dashArray:'4,12',className:'orbit-zone-circle'}).addTo(map);
        activeLaunchArcFan.push(gr);
        const mc=L.circle(zc,{radius:120000,color:'#4a9fd4',fillColor:'#4a6fa5',fillOpacity:0.04,weight:2,opacity:0.7,dashArray:'8,5',className:'orbit-zone-circle'}).addTo(map);
        activeLaunchArcFan.push(mc);
        const cd=L.circleMarker(zc,{radius:6,color:'#4a9fd4',fillColor:'#4a9fd4',fillOpacity:0.85,weight:2,className:'orbit-zone-center'}).addTo(map)
          .bindTooltip('<span style="font-family:VT323,monospace;color:#4a9fd4;letter-spacing:0.1em;">&#9672; EXPECTED RECOVERY ZONE<br>~'+Math.round(_azR.distKm)+'KM DOWNRANGE<br><span style="color:#0080CC;font-size:0.85em;">ORBIT MODEL -- AIS PENDING</span></span>',{direction:'top'});
        activeLaunchArcFan.push(cd);
      }
    }
  }
      // ── NOTMAR ZONE -- official USCG exclusion polygon ─────────────────
      // Published by US Space Force via USCG 3-7 days before launch
      // Supersedes orbit model circle with exact government coordinates
      if (_showNotmar && launch.notmar_booster_poly) {
        try {
          const bPoly = typeof launch.notmar_booster_poly === 'string'
            ? JSON.parse(launch.notmar_booster_poly) : launch.notmar_booster_poly;
          if (Array.isArray(bPoly) && bPoly.length >= 3) {
            const bLL = bPoly.map(p => [p.lat, p.lon]);
            // v0.3 phosphor: T-minus-driven color gradient
            const _tMinusHrs = launch.net ? (new Date(launch.net) - Date.now()) / 3.6e6 : null;
            const _tmColor = notmarColorForTMinus(_tMinusHrs);
            const _strokeA = notmarRgb(_tmColor, 1);
            const _glowA   = notmarRgb(_tmColor, 0.85);
            const _siteClassA = notmarSiteClass(launch);
            const _zaPhase = _notmarPhase(0, _siteClassA);
            const nZone = L.polygon(bLL, {
              color: _strokeA, weight: 2, opacity: 1.0,
              fillColor: _strokeA, fillOpacity: 0.04,
              dashArray: '12,6',
              className: `notmar-zone-a notmar-offset-0 ${_siteClassA}`.trim(),
            }).addTo(map);
            _notmarAnimFocused.push({ layer: nZone, oPhase: _zaPhase.oPhase, fPhase: _zaPhase.fPhase, params: _NOTMAR_ANIM_PARAMS.focused });
            _notmarAnimStart();
            nZone.bindTooltip(
              `<span style="font-family:VT323,monospace;color:#FF4444;letter-spacing:0.1em;">` +
              `&#9670; NOTMAR ZONE A -- USCG OFFICIAL<br>BOOSTER RECOVERY EXCLUSION ZONE<br>` +
              `U.S. SPACE FORCE ` +
              (launch.notmar_updated ? new Date(launch.notmar_updated).toLocaleDateString() : '') +
              `</span>`, { permanent: false, className: 'arc-tooltip' }
            );
            activeLaunchArcFan.push(nZone);
            if (launch.notmar_booster_lat && launch.notmar_booster_lon) {
              activeLaunchArcFan.push(
                L.circleMarker([launch.notmar_booster_lat, launch.notmar_booster_lon],
                  { radius: 6, color: '#FF4444', fillColor: '#FF4444', fillOpacity: 0.95, weight: 2 }
                ).addTo(map)
              );
            }
            log(`TRAJ: NOTMAR Zone B -- official booster zone ${launch.notmar_booster_lat?.toFixed(3)}N ${Math.abs(launch.notmar_booster_lon||0).toFixed(3)}W`, 'alert');
          }
        } catch(e) { console.warn('NOTMAR B render:', e.message); }
      }
      // Near-pad exclusion corridor (Zone B for KSC launches)
      if (launch.notmar_pad_poly) {
        try {
          const pPoly = typeof launch.notmar_pad_poly === 'string'
            ? JSON.parse(launch.notmar_pad_poly) : launch.notmar_pad_poly;
          if (Array.isArray(pPoly) && pPoly.length >= 3) {
            // v0.3 phosphor: canonical red stroke, T-minus-driven glow
            const _padTHrs = launch.net ? (new Date(launch.net) - Date.now()) / 3.6e6 : null;
            const _padTm = notmarColorForTMinus(_padTHrs);
            const _siteClassB = notmarSiteClass(launch);
            const _zbPhase = _notmarPhase(1, _siteClassB);
            const nPad = L.polygon(pPoly.map(p => [p.lat, p.lon]), {
              color: '#FF1744', weight: 2, opacity: 0.95,
              fillColor: '#FF1744', fillOpacity: 0.04,
              dashArray: '5,5',
              className: `notmar-zone-pad notmar-offset-1 ${_siteClassB}`.trim(),
            }).addTo(map);
            _notmarAnimFocused.push({ layer: nPad, oPhase: _zbPhase.oPhase, fPhase: _zbPhase.fPhase, params: _NOTMAR_ANIM_PARAMS.focused });
            _notmarAnimStart();
            nPad.bindTooltip(
              `<span style="font-family:VT323,monospace;color:#FF1744;letter-spacing:0.1em;">` +
              `&#9670; NOTMAR ZONE B -- USCG OFFICIAL<br>NEAR-PAD EXCLUSION CORRIDOR<br>` +
              `RESTRICTED 2HR BEFORE LAUNCH</span>`,
              { permanent: false, className: 'arc-tooltip' }
            );
            activeLaunchArcFan.push(nPad);
          }
        } catch(e) { console.warn('NOTMAR pad render:', e.message); }
      }

      if (launch.notmar_fairing_poly) {
        try {
          const cPoly = typeof launch.notmar_fairing_poly === 'string'
            ? JSON.parse(launch.notmar_fairing_poly) : launch.notmar_fairing_poly;
          if (Array.isArray(cPoly) && cPoly.length >= 3) {
            // v0.3 phosphor: canonical orange stroke, T-minus-driven glow
            const _cTHrs = launch.net ? (new Date(launch.net) - Date.now()) / 3.6e6 : null;
            const _cTm = notmarColorForTMinus(_cTHrs);
            const _siteClassC = notmarSiteClass(launch);
            const _zcPhase = _notmarPhase(2, _siteClassC);
            const nFair = L.polygon(cPoly.map(p => [p.lat, p.lon]), {
              color: '#FF8C00', weight: 2, opacity: 0.85,
              fillColor: '#FF8C00', fillOpacity: 0.04,
              dashArray: '8,5',
              className: `notmar-zone-c notmar-offset-2 ${_siteClassC}`.trim(),
            }).addTo(map);
            _notmarAnimFocused.push({ layer: nFair, oPhase: _zcPhase.oPhase, fPhase: _zcPhase.fPhase, params: _NOTMAR_ANIM_PARAMS.focused });
            _notmarAnimStart();
            nFair.bindTooltip(
              `<span style="font-family:VT323,monospace;color:#FF8C00;letter-spacing:0.1em;">` +
              `&#9670; NOTMAR ZONE C -- USCG OFFICIAL<br>FAIRING RECOVERY EXCLUSION ZONE</span>`,
              { permanent: false, className: 'arc-tooltip' }
            );
            activeLaunchArcFan.push(nFair);
          }
        } catch(e) { console.warn('NOTMAR C render:', e.message); }
      }

  // Reset debounce flag
  setTimeout(() => { _drawArcInProgress = false; }, 150);

  // v2.32 Patch Y -- refresh vessel-zone connection lines on launch select.
  try { if (typeof renderVesselMotionNarrative === 'function') renderVesselMotionNarrative(); } catch(e) { console.warn('vessel narrative on select failed:', e.message); }
}

const BOOSTER_RING_RADIUS_KM = 40; // ~25 miles

function drawBoosterRing(lat, lng, shipName, isOnStation) {
  clearBoosterRing();

  const ringColor = isOnStation ? '#FFB000' : '#ff6b35';
  const pulseOpacity = isOnStation ? 0.55 : 0.25;

  // Solid inner ring
  activeBoosterRing = L.circle([lat, lng], {
    radius: BOOSTER_RING_RADIUS_KM * 1000,
    color: ringColor,
    weight: 1.5,
    opacity: pulseOpacity + 0.2,
    fill: true,
    fillColor: ringColor,
    fillOpacity: isOnStation ? 0.06 : 0.03,
    dashArray: isOnStation ? null : '6 6',
    className: 'booster-ring'
  }).addTo(map);

  // Pulsing outer rings (visual effect -- 2 extra halos)
  if (isOnStation) {
    [1.4, 1.9].forEach((mult, i) => {
      const pr = L.circle([lat, lng], {
        radius: BOOSTER_RING_RADIUS_KM * 1000 * mult,
        color: ringColor,
        weight: 1,
        opacity: 0.18 - i * 0.07,
        fill: false,
        dashArray: '3 10',
        className: `booster-ring-pulse booster-pulse-${i}`
      }).addTo(map);
      activeBoosterRingPulse.push(pr);
    });
  }

  log(`BOOSTER LANDING ZONE: ${shipName} -- ${isOnStation ? '● ON STATION' : '⚠ UNDERWAY'} -- RADIUS ~25MI`, isOnStation ? 'alert' : '');
}

// ── TRAJECTORY PREDICTION CONFIDENCE ─────────────────────────────────────────
// Returns { level: 'HIGH'|'MED'|'LOW', color: hex, score, reasons[] }
function getTrajectoryConfidence(launch) {
  const reasons = [];
  let score = 0;

  const padLat   = parseFloat(launch.pad?.latitude  || 0);
  const padLng   = parseFloat(launch.pad?.longitude || 0);
  const orbit    = launch.mission?.orbit?.abbrev || '';
  const padName  = (launch.pad?.name || '').toLowerCase();
  const isSpaceX = (launch.launch_service_provider?.name || '').toLowerCase().includes('spacex');

  if (padLat && padLng)    { score += 2; reasons.push('PAD COORDS CONFIRMED'); }
  if (orbit)               { score += 2; reasons.push(`ORBIT: ${orbit}`); }

  const knownPad = padName.includes('lc-39') || padName.includes('slc-40') ||
                   padName.includes('slc-4')  || padName.includes('kennedy') ||
                   padName.includes('canaveral') || padName.includes('vandenberg');
  if (knownPad)            { score += 2; reasons.push('KNOWN PAD AZIMUTH'); }

  if (isSpaceX) {
    score += 1;
    const droneShip = resolveBoosterShip(launch);
    if (droneShip) {
      const pos = vesselPositions[droneShip.name];
      if (pos?.isLive) {
        score += 2; reasons.push(`AIS CONFIRMED: ${droneShip.name}`);
      } else {
        // Check if vessel is deployed (>80km from port) vs still in transit
        const _dPort = haversineKm(pos?.lat||0, pos?.lng||0, 28.415, -80.59);
        const _drPos = getDRPosition(droneShip.name);
        if (_drPos && _dPort >= 80) {
          // DR active and vessel is at sea -- medium confidence
          score += 2; reasons.push(`DR ACTIVE: ${droneShip.name} ~${Math.round(_dPort)}km out`);
        } else if (_dPort >= 80) {
          // Vessel known at sea but AIS dark
          score += 1; reasons.push(`VESSEL DEPLOYED: ${droneShip.name}`);
        } else {
          // Vessel still near port -- just transit, low confidence boost
          score += 0; reasons.push(`VESSEL DEPARTING: ${droneShip.name} ${Math.round(_dPort)}km from port`);
        }
      }
    }
  }
  if (launch.azimuth_min != null) { score += 1; reasons.push('AZIMUTH DB MATCH'); }
  if (launch.notmar_guid) {
    score += 3; reasons.push(`NOTMAR ${launch.notmar_guid} -- OFFICIAL USCG ZONE`);
  }

  if (score >= 7) return { level: 'HIGH', color: '#00FF88', score, reasons };
  if (score >= 4) return { level: 'MED',  color: '#FFB000', score, reasons };
  return          { level: 'LOW',  color: '#FF1744', score, reasons };
}

// ── SCRUB BANNER (Patch LL -- scrub-banner Phase 4) ─────────────────────────
// Renders the post-TRAJ-LOCK scrub/hold/delay state below the TRAJ LOCK
// banner. Driven entirely by launch.status from rss_launches. previous_net
// powers the WAS X -> NEW Y diff. updated_at + status_changed_at power the
// freshness chip. Idempotent.
function _formatNetShort(iso) {
  if (!iso) return '';
  try {
    const d = new Date(iso);
    if (isNaN(d)) return '';
    const months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
    const HH = String(d.getUTCHours()).padStart(2,'0');
    const MM = String(d.getUTCMinutes()).padStart(2,'0');
    return `${months[d.getUTCMonth()]} ${d.getUTCDate()} ${HH}${MM}Z`;
  } catch (e) { return ''; }
}

function renderScrubBanner(launch) {
  const el = document.getElementById('scrub-banner');
  if (!el) return;
  el.className = '';
  if (!launch) return;

  // v2.54 defensive: launch.status can be either:
  //   - LL2 object form: {abbrev: 'Go', name: 'Go for Launch'}
  //   - DB string form (after patchLaunchesFromSupabase merge): 'Go'
  const statusStr = (launch.status && typeof launch.status === 'object')
    ? (launch.status.abbrev || launch.status.name || '')
    : String(launch.status || '');
  const statusRaw = statusStr.trim().toLowerCase();
  if (statusRaw === 'go' || statusRaw === 'go for launch' || statusRaw === '') return;

  let stateClass = 'state-tbc';
  let stateText  = statusStr.toUpperCase();
  let detail     = '';

  switch (statusRaw) {
    case 'hold':
      stateClass = 'state-hold';
      stateText = 'HOLD';
      detail = launch.hold_reason || '';
      break;
    case 'tbc':
    case 'to be confirmed':
      stateClass = 'state-tbc';
      stateText = 'NET TBC';
      detail = launch.window_start ? `NET ${_formatNetShort(launch.window_start)}` : '';
      break;
    case 'tbd':
    case 'to be determined':
      stateClass = 'state-scrubbed';
      stateText = 'SCRUBBED';
      detail = launch.previous_net
        ? `WAS ${_formatNetShort(launch.previous_net)} -- NEW NET TBD`
        : 'NEW NET TBD';
      break;
    case 'in flight':
      stateClass = 'state-flight';
      stateText = 'LIFTOFF';
      detail = '';
      break;
    case 'success':
    case 'launch successful':
      stateClass = 'state-success';
      stateText = 'MISSION SUCCESS';
      detail = '';
      break;
    case 'failure':
    case 'launch failure':
      stateClass = 'state-failure';
      stateText = 'LAUNCH FAILURE';
      detail = launch.fail_reason || '';
      break;
    case 'partial failure':
    case 'partial launch failure':
      stateClass = 'state-failure';
      stateText = 'PARTIAL FAILURE';
      detail = launch.fail_reason || '';
      break;
    default:
      stateClass = 'state-tbc';
      stateText = statusRaw.toUpperCase();
  }

  const iconEl  = el.querySelector('.scrub-icon');
  const stateEl = el.querySelector('.scrub-state');
  const detailEl = el.querySelector('.scrub-detail');
  const freshEl = el.querySelector('.scrub-freshness');
  if (iconEl)   iconEl.textContent  = '◈';
  if (stateEl)  stateEl.textContent = stateText;
  if (detailEl) detailEl.textContent = detail;

  // NET-slip flash to LOG independent of banner
  if (launch.previous_net && launch.window_start && launch.previous_net !== launch.window_start) {
    try {
      const slipMin = Math.round((new Date(launch.window_start) - new Date(launch.previous_net)) / 60000);
      if (Math.abs(slipMin) >= 15 && typeof log === 'function') {
        const sign = slipMin > 0 ? '+' : '';
        log(`NET SLIP: ${(launch.title || launch.name || '').toUpperCase()} ${_formatNetShort(launch.previous_net)} -> ${_formatNetShort(launch.window_start)} (${sign}${slipMin}m)`, 'warn');
      }
    } catch (e) {}
  }

  // Freshness chip
  const stamp = launch.updated_at || launch.status_changed_at;
  if (stamp) {
    try {
      const ageMin = Math.max(0, Math.round((Date.now() - new Date(stamp)) / 60000));
      const txt = ageMin < 60 ? `LAST UPDATE ${ageMin}m AGO` : `LAST UPDATE ${Math.round(ageMin/60)}h AGO`;
      if (freshEl) freshEl.textContent = txt;
    } catch (e) {
      if (freshEl) freshEl.textContent = '';
    }
  } else if (freshEl) {
    freshEl.textContent = '';
  }

  el.classList.add('visible', stateClass);
}

function showTrajectoryConfidence(launch) {
  const b = document.getElementById('alert-banner');
  if (!b) return;
  const conf = getTrajectoryConfidence(launch);
  // Strip "Group" and truncate -- keep it tight on one line
  const rawName = (launch.mission?.name || launch.name || 'UNKNOWN').toUpperCase();
  const missionName = rawName.replace(/\bGROUP\b\s*/g, '').replace(/\bSTARLINK\b/g, 'SL').substring(0, 16).trim();
  b.style.opacity = '0';
  setTimeout(() => {
    b.style.setProperty('--traj-color', conf.color);
    b.className = 'traj-mode';
    b.style.display = 'block';
    b.style.whiteSpace = 'nowrap';
    const _providerName = (launch.launch_service_provider?.name || '').toLowerCase();
    const _isSX = _providerName.includes('spacex') || _providerName.includes('space exploration');

    // v3.7 traj-polish: lifecycle-aware banner text. Read the lifecycle state
    // and emit state-appropriate copy. Falls back to the legacy TRAJ LOCK /
    // TRAJECTORY label for PRE_LAUNCH (or when lifecycle helpers are absent),
    // preserving the existing behavior outside the post-launch window.
    let _lcState = 'PRE_LAUNCH';
    try {
      if (typeof getLaunchLifecycle === 'function' && launch.id) {
        _lcState = (getLaunchLifecycle(launch.id) || {}).state || 'PRE_LAUNCH';
      }
    } catch (e) { _lcState = 'PRE_LAUNCH'; }

    // T+HH:MM countup for LAUNCHED / RECOVERY_COMPLETE states
    const _net = new Date(launch.net || launch.window_start).getTime();
    let _tPlus = '';
    if (_net && Date.now() > _net) {
      const _tPlusMin = Math.floor((Date.now() - _net) / 60000);
      const _tH = Math.floor(_tPlusMin / 60);
      const _tM = _tPlusMin % 60;
      _tPlus = `T+${String(_tH).padStart(2,'0')}:${String(_tM).padStart(2,'0')}`;
    }

    // DR distance for VESSELS_DARK
    let _drDistKm = null;
    if (_lcState === 'VESSELS_DARK') {
      try {
        const _azR = (typeof getLaunchAzimuth === 'function') ? getLaunchAzimuth(launch) : null;
        _drDistKm = (_azR && _azR.drDistToZone) ? _azR.drDistToZone : null;
      } catch (e) {}
    }

    let _bannerHtml;
    switch (_lcState) {
      case 'LAUNCHED':
        _bannerHtml = `🚀 LAUNCHED -- ${missionName} &nbsp;<span class="traj-conf-label">${_tPlus || 'IN FLIGHT'}</span>`;
        break;
      case 'VESSELS_DARK':
        _bannerHtml = `◈ AIS DARK -- ${missionName} &nbsp;<span class="traj-conf-label">DR ${_drDistKm || '?'}KM</span>`;
        break;
      case 'VESSEL_RESTORE':
        _bannerHtml = `◈ AIS RESTORED -- ${missionName} &nbsp;<span class="traj-conf-label">RETURNING</span>`;
        break;
      case 'RECOVERY_COMPLETE':
        _bannerHtml = `✓ RECOVERY COMPLETE -- ${missionName} &nbsp;<span class="traj-conf-label">${_tPlus || 'COMPLETE'}</span>`;
        break;
      case 'PRE_LAUNCH':
      default:
        _bannerHtml = _isSX
          ? `◈ TRAJ LOCK -- ${missionName} &nbsp;<span class="traj-conf-label">${conf.level}</span>`
          : `◈ TRAJECTORY -- ${missionName} &nbsp;<span class="traj-conf-label">${conf.level}</span>`;
    }
    b.innerHTML = _bannerHtml;
    void b.offsetWidth;
    b.style.opacity = '1';
    // Patch LL -- scrub-banner Phase 4: render SCRUB BANNER below TRAJ LOCK
    try { renderScrubBanner(launch); } catch (e) { console.warn('renderScrubBanner failed', e); }
  }, 320);

  // Auto-post to X/Twitter when confidence hits HIGH
  if (conf.level === 'HIGH') {
    const padLat  = parseFloat(launch.pad?.latitude  || launch.pad_lat  || 0);
    const padLng  = parseFloat(launch.pad?.longitude || launch.pad_lng  || 0);
    const distKm  = haversineKm(OBSERVER.lat, OBSERVER.lng, padLat, padLng);
    const isVis   = distKm <= visibilityRadius;
    const isMarg  = distKm <= visibilityRadius * 1.3;
    const visScore = Math.round(Math.max(0, 100 - (distKm / visibilityRadius) * 100));
    const bearing  = (() => {
      const dLng = (padLng - OBSERVER.lng) * Math.PI / 180;
      const y = Math.sin(dLng) * Math.cos(padLat * Math.PI / 180);
      const x = Math.cos(OBSERVER.lat*Math.PI/180)*Math.sin(padLat*Math.PI/180) -
                Math.sin(OBSERVER.lat*Math.PI/180)*Math.cos(padLat*Math.PI/180)*Math.cos(dLng);
      const deg = (Math.atan2(y, x) * 180/Math.PI + 360) % 360;
      const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
      return { deg: Math.round(deg), dir: dirs[Math.round(deg/22.5) % 16] };
    })();
    postTrajectoryLockTweet(launch, 'HIGH', visScore, bearing.dir, bearing.deg, isVis || isMarg);
  }
}

function restoreImminentBanner() {
  const b = document.getElementById('alert-banner');
  if (!b) return;
  b.style.opacity = '0';
  setTimeout(() => {
    b.className = '';
    b.style.removeProperty('--traj-color');
    const urgentCount = allLaunches.filter(l => isWithin24h(l.net || l.window_start)).length;
    if (urgentCount > 0) {
      b.textContent = `⚠ LAUNCH IMMINENT -- ${urgentCount} LAUNCH${urgentCount>1?'ES':''} WITHIN 24 HOURS`;
      b.style.display = 'block';
      void b.offsetWidth;
      b.style.opacity = '1';
    } else {
      b.style.display = 'none';
    }
  }, 320);
}

function updateClock() {
  const now = new Date();
  const el = document.getElementById('clock');
  if (el) el.textContent = now.toUTCString().split(' ')[4];
}
setInterval(updateClock, 1000);
updateClock();

// ============================================================
// LOGGING
// ============================================================
function log(msg, type='') {
  const el = document.getElementById('log-content');
  const now = new Date();
  const ts = now.toUTCString().split(' ')[4];
  const entry = document.createElement('div');
  entry.className = 'log-entry';
  entry.innerHTML = `<span class="log-time">[${ts}]</span> <span class="log-msg ${type}">${msg}</span>`;
  el.appendChild(entry);
  el.scrollTop = el.scrollHeight;
}

// ============================================================
// WEATHER (Open-Meteo -- free, no key)
// ============================================================
async function fetchWeather() {
  return fetchWeatherForLocation(OBSERVER.lat, OBSERVER.lng, OBSERVER.name);
}

async function fetchWeatherForLocation(lat, lng, name) {
  const shortName = name.split(',')[0];
  log(`FETCHING WEATHER DATA FOR ${shortName}...`, 'alert');
  // Update panel header
  document.querySelector('#weather-box .wx-header').textContent = `[ LOCAL CONDITIONS -- ${shortName.substring(0,14)} ]`;
  try {
    const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,relative_humidity_2m,wind_speed_10m,cloud_cover,visibility,weather_code&temperature_unit=fahrenheit&wind_speed_unit=mph`;
    const r = await fetch(url);
    const d = await r.json();
    const c = d.current;

    const cloud = c.cloud_cover;
    const vis = c.visibility ? (c.visibility/1000).toFixed(0) + 'KM' : '--';
    const hum = c.relative_humidity_2m + '%';
    const wind = c.wind_speed_10m.toFixed(0) + ' MPH';
    const temp = c.temperature_2m.toFixed(0) + '°F';
    const codeMap = {0:'CLEAR',1:'MOSTLY CLR',2:'PARTLY CLD',3:'OVERCAST',45:'FOGGY',48:'FOGGY',51:'DRIZZLE',61:'RAIN',71:'SNOW',80:'SHOWERS',95:'THUNDERSTORM'};
    const cond = codeMap[c.weather_code] || 'VARIABLE';

    document.getElementById('wx-cloud').textContent = cloud + '%';
    document.getElementById('wx-vis').textContent = vis;
    document.getElementById('wx-hum').textContent = hum;
    document.getElementById('wx-wind').textContent = wind;
    document.getElementById('wx-temp').textContent = temp;
    document.getElementById('wx-cond').textContent = cond;

    const clarity = Math.max(0, 100 - cloud - (c.weather_code > 2 ? 30 : 0));
    document.getElementById('wx-clarity-fill').style.width = clarity + '%';
    document.getElementById('wx-clarity-fill').style.background = clarity > 60 ? '#00BFFF' : clarity > 30 ? '#ffb000' : '#ff2020';
    document.getElementById('wx-clarity-label').textContent = clarity > 70 ? 'EXCELLENT' : clarity > 50 ? 'GOOD' : clarity > 30 ? 'POOR' : 'OBSCURED';

    log(`WEATHER: ${temp} ${cond} / CLOUD: ${cloud}% / VIS: ${vis}`, clarity > 60 ? 'alert' : 'warn');
  } catch(e) {
    log('WEATHER FETCH FAILED -- USING ESTIMATED DATA', 'warn');
    document.getElementById('wx-cloud').textContent = 'N/A';
    document.getElementById('wx-cond').textContent = 'NO DATA';
    document.getElementById('wx-clarity-fill').style.width = '50%';
    document.getElementById('wx-clarity-label').textContent = 'EST. GOOD';
  }
}

// ============================================================
// ISS TRACKING
// ============================================================
const issIcon = L.divIcon({
  html: `<div style="
    width:14px;height:14px;
    background:transparent;
    border:2px solid #00BFFF;
    transform:rotate(45deg);
    box-shadow:0 0 10px #00BFFF;
  "></div>
  <div style="
    position:absolute;top:-8px;left:16px;
    font-family:'VT323',monospace;font-size:0.7rem;
    color:#00BFFF;text-shadow:0 0 6px #00BFFF;
    white-space:nowrap;
  ">ISS</div>`,
  className: '', iconAnchor: [7,7]
});

let issHistory = [];

async function fetchISS() {
  try {
    const r = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
    const d = await r.json();
    const lat = parseFloat(d.latitude).toFixed(2);
    const lng = parseFloat(d.longitude).toFixed(2);
    const alt = parseFloat(d.altitude).toFixed(0);
    const distKm = Math.round(haversineKm(OBSERVER.lat, OBSERVER.lng, d.latitude, d.longitude));
    const isVis = distKm < visibilityRadius;

    document.getElementById('iss-lat').textContent = lat + '°';
    document.getElementById('iss-lng').textContent = lng + '°';
    document.getElementById('iss-alt').textContent = alt + ' KM';
    document.getElementById('iss-dist').textContent = distKm + ' KM';
    document.getElementById('iss-status').textContent = 'TRACKING';
    document.getElementById('iss-status').className = 'iss-val iss-status-green';
    document.getElementById('iss-vis').textContent = isVis ? '▶ YES' : 'NO';
    document.getElementById('iss-vis').style.color = isVis ? '#00BFFF' : '#ffb000';
    document.getElementById('sb-iss').textContent = isVis ? 'OVERHEAD' : 'OUT RANGE';

    // Estimate next pass (rough -- 90 min orbit)
    const orbitPeriod = 92; // minutes
    const nextPass = new Date(Date.now() + ((orbitPeriod - (distKm % orbitPeriod)) * 60000 * 0.3));
    document.getElementById('iss-pass').textContent = `~${nextPass.getUTCHours().toString().padStart(2,'0')}:${nextPass.getUTCMinutes().toString().padStart(2,'0')} UTC`;

    // Update map marker
    if (issMarker) map.removeLayer(issMarker);
    issMarker = L.marker([d.latitude, d.longitude], {icon: issIcon})
      .addTo(map)
      .bindPopup(`<div class="popup-title">[ ISS -- INTL SPACE STATION ]</div>
        <div class="popup-row"><span class="popup-label">POSITION</span><span class="popup-val">${lat}° ${lng}°</span></div>
        <div class="popup-row"><span class="popup-label">ALTITUDE</span><span class="popup-val">${alt} KM</span></div>
        <div class="popup-row"><span class="popup-label">DISTANCE</span><span class="popup-val">${distKm} KM</span></div>
        <div class="popup-vis" style="color:${isVis?'#00BFFF':'#ffb000'}">${isVis?'▶ VISIBLE FROM YOUR LOCATION':'NOT CURRENTLY VISIBLE'}</div>`);

    // Track path
    issHistory.push([d.latitude, d.longitude]);
    if (issHistory.length > 80) issHistory.shift();
    if (issPolyline) map.removeLayer(issPolyline);
    if (issHistory.length > 1) {
      issPolyline = L.polyline(issHistory, {
        color: '#00BFFF', weight: 1, opacity: 0.4, dashArray: '4 6'
      }).addTo(map);
    }

    if (isVis) log('ISS CURRENTLY WITHIN VISIBILITY RANGE -- CHECK NAKED EYE', 'alert');
  } catch(e) {
    document.getElementById('iss-status').textContent = 'NO SIGNAL';
    document.getElementById('iss-status').className = 'iss-val';
    log('ISS API UNAVAILABLE', 'warn');
  }
}

// ============================================================
// HORIZON CANVAS
// ============================================================
function drawHorizon(distKm, launchSiteName) {
  const canvas = document.getElementById('horizon-canvas');
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  ctx.clearRect(0,0,W,H);

  // Background
  ctx.fillStyle = '#000300';
  ctx.fillRect(0,0,W,H);

  // Ground line
  const groundY = H * 0.65;
  ctx.strokeStyle = '#001830';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, groundY); ctx.lineTo(W, groundY);
  ctx.stroke();

  // Grid lines
  ctx.strokeStyle = 'rgba(0,191,255,0.08)';
  for (let y=0; y<H; y+=10) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
  for (let x=0; x<W; x+=20) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }

  // Observer label
  ctx.fillStyle = '#0080CC';
  ctx.font = '10px VT323, monospace';
  ctx.fillText('OBS', 4, groundY - 4);
  ctx.fillStyle = '#001830';
  ctx.fillRect(14, groundY - 8, 2, 8);

  if (distKm && distKm > 0) {
    const elev = estimateElevationAngle(distKm, 200);
    const elevRad = elev * Math.PI/180;
    const horizonX = W * 0.85;
    const rocketY = groundY - Math.tan(elevRad) * (W * 0.7);

    // Horizon line at launch distance
    ctx.strokeStyle = '#00BFFF';
    ctx.lineWidth = 0.5;
    ctx.setLineDash([3,4]);
    ctx.beginPath();
    ctx.moveTo(20, groundY);
    ctx.lineTo(horizonX, Math.max(4, rocketY));
    ctx.stroke();
    ctx.setLineDash([]);

    // Rocket position dot
    if (rocketY > 2) {
      ctx.beginPath();
      ctx.arc(horizonX, Math.max(4, rocketY), 3, 0, Math.PI*2);
      ctx.fillStyle = '#00BFFF';
      ctx.fill();
      ctx.shadowColor = '#00BFFF';
      ctx.shadowBlur = 8;
      ctx.fill();
      ctx.shadowBlur = 0;
    }

    // Angle label
    ctx.fillStyle = '#0080CC';
    ctx.font = '9px VT323, monospace';
    ctx.fillText(`${elev.toFixed(1)}°`, horizonX + 4, Math.max(14, rocketY));

    // Horizon divider (5° threshold)
    const minElevY = groundY - Math.tan(5*Math.PI/180) * (W*0.7);
    ctx.strokeStyle = '#ffb000';
    ctx.lineWidth = 0.5;
    ctx.setLineDash([2,3]);
    ctx.beginPath();
    ctx.moveTo(0, minElevY); ctx.lineTo(W, minElevY);
    ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = '#ffb000';
    ctx.font = '8px VT323';
    ctx.fillText('5° MIN', 2, minElevY - 2);

    const visible = elev >= 5;
    document.getElementById('horizon-text').textContent =
      `ELEV: ${elev.toFixed(1)}° // DIST: ${Math.round(distKm)}KM // ${visible ? '▶ ABOVE HORIZON' : '▼ BELOW 5° LIMIT'}`;
    document.getElementById('horizon-text').style.color = visible ? '#00BFFF' : '#ffb000';
  } else {
    ctx.fillStyle = '#001830';
    ctx.font = '10px VT323';
    ctx.fillText('SELECT LAUNCH TO ANALYZE', W/2 - 80, H/2);
  }
}

// ============================================================
// COMPASS ENGINE
// ============================================================
let compassAngle = 0;
let compassTarget = 0;
let compassAnimFrame = null;
let compassActive = false;

function bearingToCardinal(deg) {
  const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
  return dirs[Math.round(deg / 22.5) % 16];
}

function bearingFromObserver(targetLat, targetLng) {
  const lat1 = OBSERVER.lat * Math.PI / 180;
  const lat2 = targetLat * Math.PI / 180;
  const dLon = (targetLng - OBSERVER.lng) * Math.PI / 180;
  const y = Math.sin(dLon) * Math.cos(lat2);
  const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
  return (Math.atan2(y, x) * 180 / Math.PI + 360) % 360;
}

function drawCompass(angleDeg, label) {
  const isMobile = window.innerWidth <= 767;
  const canvasId = isMobile ? 'mobile-compass-canvas' : 'compass-canvas';
  const canvas = document.getElementById(canvasId);
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  const cx = W / 2, cy = H / 2, r = W / 2 - 4;
  ctx.clearRect(0, 0, W, H);

  // Outer ring
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.strokeStyle = '#001830';
  ctx.lineWidth = 1.5;
  ctx.stroke();

  // Subtle glow ring
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.strokeStyle = 'rgba(0,191,255,0.12)';
  ctx.lineWidth = 4;
  ctx.stroke();

  // Tick marks
  for (let i = 0; i < 360; i += 5) {
    const rad = (i - 90) * Math.PI / 180;
    const isMajor = i % 45 === 0;
    const isMinor = i % 15 === 0;
    const inner = r - (isMajor ? 10 : isMinor ? 6 : 3);
    ctx.beginPath();
    ctx.moveTo(cx + Math.cos(rad) * inner, cy + Math.sin(rad) * inner);
    ctx.lineTo(cx + Math.cos(rad) * (r - 1), cy + Math.sin(rad) * (r - 1));
    ctx.strokeStyle = isMajor ? '#0080CC' : '#001830';
    ctx.lineWidth = isMajor ? 1.5 : 0.8;
    ctx.stroke();
  }

  // Cardinal labels
  const cardinals = [['N', 0], ['E', 90], ['S', 180], ['W', 270]];
  ctx.font = 'bold 9px VT323, monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  cardinals.forEach(([lbl, deg]) => {
    const rad = (deg - 90) * Math.PI / 180;
    const pr = r - 16;
    ctx.fillStyle = lbl === 'N' ? '#ff2020' : '#0080CC';
    ctx.shadowColor = lbl === 'N' ? '#ff2020' : '#0080CC';
    ctx.shadowBlur = lbl === 'N' ? 6 : 3;
    ctx.fillText(lbl, cx + Math.cos(rad) * pr, cy + Math.sin(rad) * pr);
  });
  ctx.shadowBlur = 0;

  // Needle
  const needleRad = (angleDeg - 90) * Math.PI / 180;
  const needleLen = r - 14;
  const needleTailLen = 14;

  // Needle tip (pointing direction)
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(
    cx + Math.cos(needleRad) * needleLen,
    cy + Math.sin(needleRad) * needleLen
  );
  ctx.strokeStyle = '#00BFFF';
  ctx.lineWidth = 2;
  ctx.shadowColor = '#00BFFF';
  ctx.shadowBlur = 8;
  ctx.stroke();

  // Needle tail
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(
    cx - Math.cos(needleRad) * needleTailLen,
    cy - Math.sin(needleRad) * needleTailLen
  );
  ctx.strokeStyle = '#001830';
  ctx.lineWidth = 1.5;
  ctx.shadowBlur = 0;
  ctx.stroke();

  // Arrow head
  const ax = cx + Math.cos(needleRad) * needleLen;
  const ay = cy + Math.sin(needleRad) * needleLen;
  const perpRad = needleRad + Math.PI / 2;
  ctx.beginPath();
  ctx.moveTo(ax, ay);
  ctx.lineTo(ax - Math.cos(needleRad) * 8 + Math.cos(perpRad) * 4,
             ay - Math.sin(needleRad) * 8 + Math.sin(perpRad) * 4);
  ctx.lineTo(ax - Math.cos(needleRad) * 8 - Math.cos(perpRad) * 4,
             ay - Math.sin(needleRad) * 8 - Math.sin(perpRad) * 4);
  ctx.closePath();
  ctx.fillStyle = '#00BFFF';
  ctx.shadowColor = '#00BFFF';
  ctx.shadowBlur = 10;
  ctx.fill();
  ctx.shadowBlur = 0;

  // Center dot
  ctx.beginPath();
  ctx.arc(cx, cy, 3, 0, Math.PI * 2);
  ctx.fillStyle = '#00BFFF';
  ctx.shadowColor = '#00BFFF';
  ctx.shadowBlur = 8;
  ctx.fill();
  ctx.shadowBlur = 0;
}

function animateCompassTo(targetDeg) {
  // Shortest-path rotation
  let diff = ((targetDeg - compassAngle) + 540) % 360 - 180;
  compassAngle += diff * 0.12;
  if (Math.abs(diff) > 0.3) {
    compassAnimFrame = requestAnimationFrame(() => animateCompassTo(targetDeg));
  } else {
    compassAngle = targetDeg;
  }
  drawCompass(compassAngle);
}

function updateCompass(bearing, distKm, targetLabel) {
  compassTarget = bearing;
  const cardinal = bearingToCardinal(bearing);
  const label = targetLabel ? targetLabel.substring(0, 18) : 'MAP CURSOR';
  // Desktop compass
  const bEl = document.getElementById('compass-bearing');
  const cEl = document.getElementById('compass-cardinal');
  const lEl = document.getElementById('compass-label');
  if (bEl) bEl.textContent = Math.round(bearing) + '°';
  if (cEl) cEl.textContent = cardinal;
  if (lEl) lEl.textContent = label;
  // Mobile compass (separate IDs)
  const mbEl = document.getElementById('m-compass-bearing');
  const mcEl = document.getElementById('m-compass-cardinal');
  const mlEl = document.getElementById('m-compass-label');
  if (mbEl) mbEl.textContent = Math.round(bearing) + '°';
  if (mcEl) mcEl.textContent = cardinal;
  if (mlEl) mlEl.textContent = label;
  if (compassAnimFrame) cancelAnimationFrame(compassAnimFrame);
  animateCompassTo(bearing);
}

// ============================================================
// HUD COMPASS TAPE
// ============================================================
let hudBearing = 0;
let hudTargetBearing = 0;
let hudAnimFrame = null;
let hudActive = false;
let hudMouseLat = null;
let hudMouseLng = null;

function drawHudTape(bearing) {
  const canvas = document.getElementById('hud-tape-canvas');
  if (!canvas) return;
  const W = canvas.offsetWidth;
  const H = canvas.offsetHeight;
  if (W === 0) return;
  canvas.width = W;
  canvas.height = H;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, W, H);

  // Get current theme color
  const style = getComputedStyle(document.documentElement);
  const blue = style.getPropertyValue('--blue').trim() || '#00BFFF';
  const blueDim = style.getPropertyValue('--blue-dim').trim() || '#0080CC';
  const blueDark = style.getPropertyValue('--blue-dark').trim() || '#001830';

  const centerX = W / 2;
  const degreesPerPx = 0.12; // how many degrees per pixel
  const pxPerDegree = 1 / degreesPerPx;

  // Draw tick marks and labels across full width
  const startDeg = bearing - (W / 2) * degreesPerPx;
  const endDeg = bearing + (W / 2) * degreesPerPx;

  for (let d = Math.floor(startDeg / 5) * 5; d <= endDeg; d += 5) {
    const normalDeg = ((d % 360) + 360) % 360;
    const x = centerX + (d - bearing) * pxPerDegree;

    const isMajor = normalDeg % 45 === 0;
    const isMed = normalDeg % 10 === 0;

    if (isMajor) {
      // Cardinal labels
      ctx.fillStyle = blue;
      ctx.globalAlpha = 0.9;
      ctx.font = "bold 11px 'Share Tech Mono', monospace";
      ctx.textAlign = 'center';
      const cardinals = {0:'N', 45:'NE', 90:'E', 135:'SE', 180:'S', 225:'SW', 270:'W', 315:'NW'};
      const label = cardinals[normalDeg] || normalDeg + '°';
      ctx.fillText(label, x, H - 6);
      // Tall tick
      ctx.strokeStyle = blue;
      ctx.lineWidth = 1.5;
      ctx.globalAlpha = 0.8;
      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H - 18); ctx.stroke();
    } else if (isMed) {
      // Degree labels every 10°
      ctx.fillStyle = blueDim;
      ctx.globalAlpha = 0.7;
      ctx.font = "9px 'Share Tech Mono', monospace";
      ctx.textAlign = 'center';
      ctx.fillText(normalDeg + '°', x, H - 6);
      // Medium tick
      ctx.strokeStyle = blueDim;
      ctx.lineWidth = 1;
      ctx.globalAlpha = 0.5;
      ctx.beginPath(); ctx.moveTo(x, H - 18); ctx.lineTo(x, H - 26); ctx.stroke();
    } else {
      // Small tick every 5°
      ctx.strokeStyle = blueDark;
      ctx.lineWidth = 1;
      ctx.globalAlpha = 0.4;
      ctx.beginPath(); ctx.moveTo(x, H - 18); ctx.lineTo(x, H - 22); ctx.stroke();
    }
  }

  // Center pointer triangle (under bubble)
  ctx.globalAlpha = 1;
  ctx.fillStyle = blue;
  ctx.shadowColor = blue;
  ctx.shadowBlur = 8;
  ctx.beginPath();
  ctx.moveTo(centerX, H - 17);
  ctx.lineTo(centerX - 5, H - 10);
  ctx.lineTo(centerX + 5, H - 10);
  ctx.closePath();
  ctx.fill();
  ctx.shadowBlur = 0;

  // Fade edges
  const fadeW = W * 0.18;
  const gradL = ctx.createLinearGradient(0, 0, fadeW, 0);
  gradL.addColorStop(0, 'rgba(0,4,15,1)');
  gradL.addColorStop(1, 'rgba(0,4,15,0)');
  ctx.globalAlpha = 1;
  ctx.fillStyle = gradL;
  ctx.fillRect(0, 0, fadeW, H);

  const gradR = ctx.createLinearGradient(W - fadeW, 0, W, 0);
  gradR.addColorStop(0, 'rgba(0,4,15,0)');
  gradR.addColorStop(1, 'rgba(0,4,15,1)');
  ctx.fillStyle = gradR;
  ctx.fillRect(W - fadeW, 0, fadeW, H);
}

function animateHudTape() {
  // Smooth interpolation toward target
  const diff = hudTargetBearing - hudBearing;
  let delta = diff;
  // Handle 360→0 wraparound
  if (delta > 180) delta -= 360;
  if (delta < -180) delta += 360;
  hudBearing += delta * 0.15;
  hudBearing = ((hudBearing % 360) + 360) % 360;
  drawHudTape(hudBearing);
  hudAnimFrame = requestAnimationFrame(animateHudTape);
}

function updateHud(bearing, distKm, lat, lng) {
  hudTargetBearing = bearing;
  hudMouseLat = lat;
  hudMouseLng = lng;

  const bubble = document.getElementById('hud-tape-bubble');
  const idle = document.getElementById('hud-tape-idle');
  const elev = estimateElevationAngle(distKm, 200);

  if (!hudActive) {
    hudActive = true;
    if (bubble) bubble.style.display = 'flex';
    if (idle) idle.style.display = 'none';
    if (!hudAnimFrame) animateHudTape();
  }

  const bearEl = document.getElementById('hud-bearing');
  const distEl = document.getElementById('hud-dist');
  const cardEl = document.getElementById('hud-cardinal');
  const elevEl = document.getElementById('hud-elev');

  if (bearEl) bearEl.textContent = Math.round(bearing) + '°';
  if (distEl) distEl.textContent = distKm.toLocaleString();
  if (cardEl) cardEl.textContent = bearingToCardinal(bearing);
  if (elevEl) elevEl.textContent = elev.toFixed(1) + '°';
}

function deactivateHud() {
  hudActive = false;
  const bubble = document.getElementById('hud-tape-bubble');
  const idle = document.getElementById('hud-tape-idle');
  if (bubble) bubble.style.display = 'none';
  if (idle) idle.style.display = 'block';
}

// Hook map mousemove to drive compass
function initCompass() {
  drawCompass(0); // initial draw pointing North

  map.on('mousemove', function(e) {
    const { lat, lng } = e.latlng;
    const bearing = bearingFromObserver(lat, lng);
    const distKm = Math.round(haversineKm(OBSERVER.lat, OBSERVER.lng, lat, lng));
    updateCompass(bearing, distKm, `${distKm}KM AWAY`);
    updateHud(bearing, distKm, lat, lng);
  });

  map.on('mouseout', function() {
    const lbl = document.getElementById('compass-label');
    if (lbl) lbl.textContent = 'HOVER MAP TO TRACK';
    deactivateHud();
  });

  // Start idle tape animation
  animateHudTape();
}

// ============================================================
// RENDER DETAIL
// ============================================================
function renderDetail(launch, distKm, isVis, isMaybe) {
  const name = launch.mission?.name || launch.name || 'UNKNOWN';
  const rocket = launch.rocket?.configuration?.name || '--';
  const provider = launch.launch_service_provider?.name || '--';
  const pad = launch.pad?.name || '--';
  const loc = launch.pad?.location?.name || '--';
  const t = formatCountdown(launch.net || launch.window_start);
  const date = new Date(launch.net || launch.window_start);
  const dateStr = date.toUTCString().replace('GMT','UTC');
  const elev = estimateElevationAngle(distKm);
  const visScore = Math.max(0, Math.min(100, 100 - (distKm / visibilityRadius) * 100));
  const isSpaceX = (launch.launch_service_provider?.name || '').toLowerCase().includes('spacex');

  // Booster recovery row -- show cached detail or pending
  let recoveryHtml = '';
  if (isSpaceX) {
    const detail = launch.landing_detail || (launch.id ? landingDetailCache[launch.id] : null);
    if (detail) {
      const icon = detail.is_rtls ? '⬡ RTLS' : detail.is_drone_ship ? '◈ DRONE SHIP' : '◈';
      const col  = detail.is_rtls ? '#00BFFF' : '#ff6b35';
      recoveryHtml = `<div class="detail-row"><span class="detail-label">RECOVERY</span><span class="detail-val" style="color:${col}">${icon}: ${detail.landing_location || detail.landing_abbrev || '?'}</span></div>`;
    } else {
      recoveryHtml = `<div class="detail-row"><span class="detail-label">RECOVERY</span><span class="detail-val" id="recovery-pending" style="color:#444;font-style:italic">FETCHING...</span></div>`;
    }
  }

  document.getElementById('detail-content').innerHTML = `
    <div class="detail-mission-name">${name}</div>
    <div class="detail-row"><span class="detail-label">ROCKET</span><span class="detail-val">${rocket}</span></div>
    <div class="detail-row"><span class="detail-label">PROVIDER</span><span class="detail-val">${provider}</span></div>
    <div class="detail-row"><span class="detail-label">PAD</span><span class="detail-val">${pad}</span></div>
    <div class="detail-row"><span class="detail-label">LOCATION</span><span class="detail-val">${loc.split(',')[0]}</span></div>
    <div class="detail-row"><span class="detail-label">T-MINUS</span><span class="detail-val" style="color:#ffb000">${t}</span></div>
    <div class="detail-row"><span class="detail-label">DISTANCE</span><span class="detail-val">${Math.round(distKm)} KM</span></div>
    <div class="detail-row"><span class="detail-label">PEAK ELEV</span><span class="detail-val">${elev.toFixed(1)}°</span></div>
    ${recoveryHtml}
    <div style="margin-top:6px;font-size:0.55rem;color:var(--blue-dim)">VISIBILITY SCORE</div>
    <div class="detail-vis-bar">
      <div class="detail-vis-fill" style="width:${visScore}%;background:${isVis?'#00BFFF':isMaybe?'#ffb000':'#333'}"></div>
    </div>
    <div style="font-size:0.6rem;margin-top:3px;color:${isVis?'#00BFFF':isMaybe?'#ffb000':'var(--blue-dim)'}">
      ${(() => {
        if (!isVis && !isMaybe) return '✗ OUT OF RANGE';
        const _pLat = parseFloat(launch.pad?.latitude || 0) * Math.PI/180;
        const _pLng = parseFloat(launch.pad?.longitude || 0) * Math.PI/180;
        const _oLat = OBSERVER.lat * Math.PI/180;
        const _oLng = OBSERVER.lng * Math.PI/180;
        const _dLng = _pLng - _oLng;
        const _y = Math.sin(_dLng) * Math.cos(_pLat);
        const _x = Math.cos(_oLat)*Math.sin(_pLat) - Math.sin(_oLat)*Math.cos(_pLat)*Math.cos(_dLng);
        const _brng = ((Math.atan2(_y,_x)*180/Math.PI) + 360) % 360;
        const _dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
        const _dir = _dirs[Math.round(_brng/22.5) % 16];
        return isVis
          ? '▶ VISIBLE -- LOOK TO ' + _dir + ' (' + Math.round(_brng) + '°)'
          : '~ MARGINAL -- LOOK TO ' + _dir + ' (' + Math.round(_brng) + '°)';
      })()}
    </div>
  `;
  drawHorizon(distKm);
}

// ============================================================
// RENDER LAUNCHES ON MAP + SIDEBAR
// ============================================================
function clearMap() {
  mapMarkers.forEach(m => map.removeLayer(m));
  mapPaths.forEach(p => map.removeLayer(p));
  window.mapMarkerById = {};
  mapMarkers.length = 0;
  mapPaths.length = 0;
}

let currentFilter = 'all';
function filterLaunches(f, tabEl) {
  // Clear any active replay when switching tabs
  if (_replayActive || (typeof _replayLayers !== 'undefined' && _replayLayers.length)) {
    clearMissionReplay();
  }
  // PRO gate for history tab
  if (f === 'history' && !PRO_UNLOCKED) {
    showProGate('launch history · vessel tracks · mission replay');
    return;
  }
  currentFilter = f;
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  tabEl.classList.add('active');
  // Style history tab -- always show pro lock if not unlocked
  const histTab = document.getElementById('history-tab');
  if (histTab) {
    histTab.style.opacity = PRO_UNLOCKED ? '1' : '0.5';
    histTab.innerHTML = PRO_UNLOCKED ? 'HISTORY' : 'HISTORY 🔒';
  }
  renderLaunchList();
}

function getFilteredLaunches() {
  if (!allLaunches?.length) return [];
  // For history tab, merge in localStorage history which has completed launches
  const baseList = (currentFilter === 'history')
    ? mergeLaunchHistory(allLaunches)
    : allLaunches;

  const filtered = baseList.filter(l => {
    const date = l.net || l.window_start;
    const distKm = haversineKm(OBSERVER.lat, OBSERVER.lng, parseFloat(l.pad?.latitude||0), parseFloat(l.pad?.longitude||0));
    const isVis = distKm <= visibilityRadius;
    const isMaybe = !isVis && distKm <= visibilityRadius * 1.4;
    if (currentFilter === 'visible') return isVis || isMaybe;
    if (currentFilter === '24h') return isWithin24h(date);
    if (currentFilter === 'week') return isWithinWeek(date);
    if (currentFilter === 'history') {
      // PRO only -- show past + recovery launches
      if (!PRO_UNLOCKED) return false;
      // Show: (1) launches with past window_start, (2) in-recovery launches
      const net = new Date(date).getTime();
      if (net < Date.now()) return true;     // past launch
      if (isInRecovery(l)) return true;      // in recovery (launched, vessel out)
      return false;
    }
    return true;
  });

  // For ALL tab: put recovery/launched launches at top in yellow
  if (currentFilter === 'all' || !currentFilter) {
    const recovery = filtered.filter(l => isInRecovery(l));
    const upcoming = filtered.filter(l => !isInRecovery(l));
    return [...recovery, ...upcoming];
  }
  return filtered;
}

function renderLaunchList() {
  const list = document.getElementById('launch-list');
  if (!list) return;
  if (!allLaunches?.length) return;
  list.innerHTML = '';
  const filtered = getFilteredLaunches();
  const lcEl = document.getElementById('launch-count');
  if (lcEl) lcEl.textContent = filtered.length;

  let visCount = 0, urgentCount = 0;

  // Sort history tab newest first
  const sorted = currentFilter === 'history'
    ? [...filtered].sort((a, b) => new Date(b.window_start || b.net) - new Date(a.window_start || a.net))
    : filtered;

  sorted.forEach((launch, idx) => {
    const pad = launch.pad;
    if (!pad?.latitude || !pad?.longitude) return;
    const launchLat = parseFloat(pad.latitude);
    const launchLng = parseFloat(pad.longitude);
    const distKm = haversineKm(OBSERVER.lat, OBSERVER.lng, launchLat, launchLng);
    const isVis = distKm <= visibilityRadius;
    const isMaybe = !isVis && distKm <= visibilityRadius * 1.4;
    const inRecovery = isInRecovery(launch);
    const isPastLaunch = new Date(launch.net || launch.window_start).getTime() < Date.now();
    const facility = getLaunchFacility(launch);
    const nextAtFacility = (inRecovery && PRO_UNLOCKED && (facility === 'KSC' || facility === 'VANDENBERG'))
      ? getNextLaunchAtFacility(allLaunches, facility, new Date(launch.net || launch.window_start).getTime())
      : null;
    const _netMs = new Date(launch.net || launch.window_start).getTime();
    const _msSince = Date.now() - _netMs;
    const t = inRecovery
      ? (() => {
          const s = Math.floor(_msSince/1000);
          const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), sec = s%60;
          return `T+${h}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
        })()
      : formatCountdown(launch.net || launch.window_start);
    const urgent = isWithin24h(launch.net || launch.window_start);
    const name = launch.mission?.name || launch.name || 'UNKNOWN';
    const rocket = launch.rocket?.configuration?.name || '--';
    const locName = pad.location?.name || '';

    if (isVis || isMaybe) visCount++;
    if (urgent) urgentCount++;

    // Pre-compute train badge HTML (avoids nested backtick crash in template literal)
    let _trainBadgeHtml = '';
    if (isStarlinkFresh(launch)) {
      const _ageMs   = Date.now() - new Date(launch.window_start || launch.net).getTime();
      const _ageHrs  = Math.floor(_ageMs / 3600000);
      const _ageDays = Math.floor(_ageHrs / 24);
      const _ageStr  = _ageDays > 0 ? _ageDays + 'D ' + (_ageHrs % 24) + 'H' : _ageHrs + 'H';
      const _linked  = (_starlinkTLEs && typeof getStarlinkTLEsForLaunch === 'function')
                       ? getStarlinkTLEsForLaunch(launch).length : 0;
      if (!PRO_UNLOCKED) {
        _trainBadgeHtml = '<div class="train-badge-free" onclick="event.stopPropagation();showProModal()">' +
          '\u{1F31F} STARLINK TRAIN ACTIVE &middot; <span style="color:var(--blue);text-decoration:underline">PRO</span> to track' +
          '</div>';
      } else {
        _trainBadgeHtml = '<div class="train-badge-pro" onclick="event.stopPropagation();focusStarlinkTrain(\'' + launch.id + '\')">' +
          '\u{1F31F} TRAIN ACTIVE &middot; ' + (_linked > 0 ? _linked + ' SATS' : 'DEPLOYING') + ' &middot; ' + _ageStr + ' OLD &middot; TAP TO TRACK' +
          '</div>';
      }
    }

    const card = document.createElement('div');
    card.className = `launch-card${isVis?' visible':isMaybe?' maybe':''}${inRecovery?' recovery':''}${isPastLaunch && currentFilter==='history'?' history-card':''}`;
    card.dataset.idx = idx;
    card.innerHTML = `
      <div class="card-name">${name}</div>
      <div class="card-rocket">${rocket} // ${launch.launch_service_provider?.name||''}</div>
      <div class="card-row">
        <span class="card-site">${locName.split(',')[0] || '--'}</span>
        <span class="card-time${inRecovery?' recovery-time':urgent?' urgent':''}">${t}${inRecovery?' · RECOVERY':''}</span>
      </div>
      <div class="card-dist">${Math.round(distKm)} KM FROM OBSERVER</div>
      ${inRecovery
        ? `<span class="badge badge-recovery" style="background:rgba(0,191,255,0.12);color:#00BFFF;border-color:#00BFFF;">&#9670; LAUNCHED${launch.notmar_booster_lat?' <span style=color:#FF4444>· NOTMAR</span>':''}${PRO_UNLOCKED && nextAtFacility?' <span style="color:#FFB000;font-size:0.7em">NEXT: '+((l=>{ const d=new Date(l.net||l.window_start); const h=Math.round((d-Date.now())/3600000); return h>48?Math.round(h/24)+'D':h+'H'; })(nextAtFacility))+'</span>':''}</span>`
        : isVis?'<span class="badge badge-visible">&#9655; VISIBLE</span>'
        : isMaybe?'<span class="badge badge-maybe">~ MARGINAL</span>'
        : '<span class="badge badge-no">OUT OF RANGE</span>'}
            ${_trainBadgeHtml}
      ${currentFilter === 'history' ? '<div class="replay-btn">&#9654; CLICK TO REPLAY</div>' : ''}
    `;
    card.addEventListener('click', () => {
      // For history cards: play replay
      if (currentFilter === 'history') {
        playMissionReplay(
          launch.id,
          encodeURIComponent(launch.title || launch.name || ''),
          launchLat, launchLng
        );
      } else {
        // Clear any active replay before showing new launch
        if (typeof _replayActive !== 'undefined' && (_replayActive || _replayLayers.length)) clearMissionReplay();
        selectLaunch(launch, card, launchLat, launchLng, distKm, isVis, isMaybe, locName);
      }
      // Auto-dismiss popup after 10 seconds
      clearTimeout(window._popupDismissTimer);
      window._popupDismissTimer = setTimeout(() => {
        map.closePopup();
      }, 10000);
    });
    list.appendChild(card);
  });

  const sbVis = document.getElementById('sb-vis');
  const sb24 = document.getElementById('sb-24');
  if (sbVis) sbVis.textContent = visCount;
  if (sb24) sb24.textContent = urgentCount;
  // hdr-count shows total DB launches (set by fetchGLSSLaunchCount)
  // Show manifest count in the label as context
  const hdrCount = document.getElementById('hdr-count');
  if (hdrCount && (hdrCount.textContent === '--' || hdrCount.textContent === '')) {
    hdrCount.textContent = allLaunches.length; // fallback until DB count loads
  }

  // Alert banner -- only update if not currently showing trajectory confidence
  const b = document.getElementById('alert-banner');
  if (urgentCount > 0 && b && !b.classList.contains('traj-mode')) {
    b.style.display = 'block';
    b.textContent = `⚠ LAUNCH IMMINENT -- ${urgentCount} LAUNCH${urgentCount>1?'ES':''} WITHIN 24 HOURS`;
  }

  // Threat level
  const tl = document.getElementById('threat-display');
  if (tl) {
    if (urgentCount > 2) { tl.textContent = 'THREAT: ELEVATED'; tl.style.color = '#ff2020'; tl.style.borderColor = '#ff2020'; }
    else if (urgentCount > 0) { tl.textContent = 'THREAT: ELEVATED'; tl.style.color = '#ffb000'; tl.style.borderColor = '#ffb000'; }
    else { tl.textContent = 'THREAT: NOMINAL'; tl.style.color = '#00BFFF'; tl.style.borderColor = 'var(--blue-dim)'; }
  }
}

async function selectLaunch(launch, card, launchLat, launchLng, distKm, isVis, isMaybe, locName) {
  if (activeCard) activeCard.classList.remove('active');
  card.classList.add('active');
  activeCard = card;
  map.setView([launchLat, launchLng], 4, {animate:true, duration:0.8});
  // Use launch ID to find the correct map marker -- never use card.dataset.idx
  // card.dataset.idx reflects the filtered/merged list order, not allLaunches order
  const launchId = launch?.id;
  const marker = launchId && mapMarkerById?.[launchId];
  if (marker) marker.openPopup();
  else if (mapMarkers[0]) {
    // Fallback: find by position match
    const fallback = mapMarkers.find(m => {
      const ll = m.getLatLng();
      return Math.abs(ll.lat - launchLat) < 0.01 && Math.abs(ll.lng - launchLng) < 0.01;
    });
    if (fallback) fallback.openPopup();
  }

  // Render detail immediately -- shows FETCHING... for recovery row if not cached
  renderDetail(launch, distKm, isVis, isMaybe);
  selectedLaunch = launch;

  // Draw immediately with whatever is cached (instant for repeat clicks)
  drawLaunchArc(launch);
  if (typeof setGlssIntensity === 'function') setGlssIntensity(launch && launch.id);
  if (typeof setGlssIntensity === 'function') setGlssIntensity(launch && launch.id);
  showTrajectoryConfidence(launch);
  if(typeof startTrajectoryTracking==='function') startTrajectoryTracking(launch.id, launch.pad?.latitude || launch.pad_lat, launch.pad?.longitude || launch.pad_lon, launch);

  // Fetch LL2 landing detail -- cache hit is instant, cache miss fires network call
  const isSpaceX = (launch.launch_service_provider?.name || '').toLowerCase().includes('spacex');
  if (isSpaceX && launch.id) {
    const alreadyCached = !!landingDetailCache[launch.id];
    const detail = await fetchLandingDetail(launch.id);
    if (detail) {
      launch.landing_detail = detail; // patch onto launch object
      const icon  = detail.is_rtls ? '⬡ RTLS' : detail.is_drone_ship ? '◈ DRONE SHIP' : '◈ LANDING';
      const where = detail.landing_location || detail.landing_abbrev || '?';
      if (!alreadyCached) log(`${icon}: ${where}`, 'alert');

      // If this launch is still selected, re-render detail and redraw arc with real data
      if (selectedLaunch?.id === launch.id) {
        renderDetail(launch, distKm, isVis, isMaybe); // updates RECOVERY row
        if (!alreadyCached) {
          drawLaunchArc(launch);          // redraws arc centered on correct ship
          showTrajectoryConfidence(launch);
        }
      }
    }
  }

  // On mobile -- show bottom sheet
  if (window.innerWidth <= 767) {
    showMobileDetail(launch, distKm, isVis, isMaybe);
  }
  const bearing = bearingFromObserver(launchLat, launchLng);
  const shortName = (launch.pad?.location?.name || locName || '').split(',')[0].substring(0,16);
  updateCompass(bearing, distKm, shortName || 'LAUNCH SITE');
  log(`TARGET LOCKED: ${launch.mission?.name||launch.name} // DIST: ${Math.round(distKm)}KM`, 'alert');
  // Patch LL -- scrub-banner Phase 3: live-poll status when inside T-12h
  try { if (typeof startScrubPolling === 'function') startScrubPolling(launch); } catch (e) { console.warn('startScrubPolling failed', e); }
}

function renderMapMarkers() {
  clearMap();
  allLaunches.forEach((launch, idx) => {
    const pad = launch.pad;
    if (!pad?.latitude || !pad?.longitude) return;
    const launchLat = parseFloat(pad.latitude);
    const launchLng = parseFloat(pad.longitude);
    const distKm = haversineKm(OBSERVER.lat, OBSERVER.lng, launchLat, launchLng);
    const isVis = distKm <= visibilityRadius;
    const isMaybe = !isVis && distKm <= visibilityRadius * 1.4;
    const color = isVis ? '#00BFFF' : isMaybe ? '#ffb000' : '#444';
    const locName = pad.location?.name || '';
    const siteIcon = L.divIcon({
      html: `<div style="
        width:10px;height:10px;background:${color};
        border:1px solid rgba(255,255,255,0.4);
        transform:rotate(45deg);
        box-shadow:0 0 ${isVis?'10':'4'}px ${color};
      "></div>`,
      className: '', iconAnchor: [5,5]
    });

    const name = launch.mission?.name || launch.name;
    const rocket = launch.rocket?.configuration?.name || '--';
    const t = formatCountdown(launch.net || launch.window_start);
    const elev = estimateElevationAngle(distKm).toFixed(1);

    const marker = L.marker([launchLat, launchLng], {icon: siteIcon})
      .addTo(map)
      .bindPopup(`
        <div class="popup-title">[ ${name} ]</div>
        <div class="popup-row"><span class="popup-label">ROCKET</span><span class="popup-val">${rocket}</span></div>
        <div class="popup-row"><span class="popup-label">PROVIDER</span><span class="popup-val">${launch.launch_service_provider?.name||'--'}</span></div>
        <div class="popup-row"><span class="popup-label">PAD</span><span class="popup-val">${pad.name||'--'}</span></div>
        <div class="popup-row"><span class="popup-label">T-MINUS</span><span class="popup-val" style="color:#ffb000">${t}</span></div>
        <div class="popup-row"><span class="popup-label">DISTANCE</span><span class="popup-val">${Math.round(distKm)} KM</span></div>
        <div class="popup-row"><span class="popup-label">PEAK ELEV</span><span class="popup-val">${elev}°</span></div>
        <div class="popup-vis" style="color:${color}">${isVis?'▶ VISIBLE FROM YOUR LOCATION':isMaybe?'~ MARGINAL VISIBILITY':'✗ OUT OF RANGE'}</div>
      `);
    mapMarkers.push(marker);
    // Also index by launch ID for reliable lookup from selectLaunch
    if (!window.mapMarkerById) window.mapMarkerById = {};
    window.mapMarkerById[launch.id] = marker;
  });
}

// ============================================================
// RADIUS SLIDER
// ============================================================
document.getElementById('radius-slider').addEventListener('input', function() {
  visibilityRadius = +this.value;
  document.getElementById('radius-val').textContent = this.value + 'KM';
  drawVisibilityCircle(visibilityRadius);
  renderMapMarkers();
  renderLaunchList();
  log(`VISIBILITY RADIUS UPDATED: ${this.value} KM`, 'alert');
});

// ============================================================
// COUNTDOWN REFRESH + T-0 DETECTION
// ============================================================
const firedTZero = new Set(); // track which launches already triggered T-0

setInterval(() => {
  document.querySelectorAll('.card-time').forEach((el, i) => {
    const l = getFilteredLaunches()[i];
    if (!l) return;
    const net = l.net || l.window_start;
    const diff = new Date(net) - new Date();
    const t = formatCountdown(net);
    el.textContent = t;
    const urgent = isWithin24h(net);
    el.className = 'card-time' + (urgent ? ' urgent' : '');

    // T-0 window: within 30 seconds of launch (or just passed)
    const launchId = l.id || (l.mission?.name || l.name);
    if (diff > -30000 && diff < 30000 && !firedTZero.has(launchId)) {
      firedTZero.add(launchId);
      triggerTZeroEvent(l);
    }
  });
}, 1000);

function triggerTZeroEvent(launch) {
  const name = launch.mission?.name || launch.name || 'UNKNOWN';
  // Flash the whole screen
  document.body.style.transition = 'background 0.1s';
  let flashes = 0;
  const flashInterval = setInterval(() => {
    document.body.style.background = flashes % 2 === 0 ? '#000d1a' : '#000300';
    flashes++;
    if (flashes > 6) {
      clearInterval(flashInterval);
      document.body.style.background = '#000300';
    }
  }, 120);

  // Show T-0 alert banner with launch name
  const banner = document.getElementById('alert-banner');
  banner.style.display = 'block';
  banner.style.borderColor = '#00BFFF';
  banner.style.color = '#00BFFF';
  banner.style.boxShadow = '0 0 30px rgba(0,191,255,0.6)';
  banner.textContent = `🚀 LIFTOFF -- ${name} -- T-0 CONFIRMED`;
  setTimeout(() => {
    banner.style.borderColor = '';
    banner.style.color = '';
    banner.style.boxShadow = '';
  }, 8000);

  log(`🚀 LIFTOFF CONFIRMED: ${name}`, 'crit');
  if (typeof audioCtx !== "undefined" && audioCtx) playLiftoffEvent();
}


// ============================================================
// LAUNCH DATA FETCH
// ============================================================
const LL2_CACHE_KEY = 'lw_launches_cache';
const LL2_CACHE_TTL = 3 * 60 * 60 * 1000; // 3 hours

function saveLaunchCache(launches) {
  try {
    localStorage.setItem(LL2_CACHE_KEY, JSON.stringify({ ts: Date.now(), data: launches }));
    saveToLaunchHistory(launches); // persist any recent/past launches
  } catch(e) {}
}

const LW_HISTORY_KEY = 'lw_launch_history';

function saveToLaunchHistory(launches) {
  const now = Date.now();
  const toSave = launches.filter(l => new Date(l.net || l.window_start).getTime() < now + 8 * 24 * 3600000);
  if (!toSave.length) return;
  try {
    const existing = loadLaunchHistory();
    const ids = new Set(existing.map(l => l.id));
    const merged = [...toSave.filter(l => !ids.has(l.id)), ...existing]
      .sort((a,b) => new Date(b.net||b.window_start) - new Date(a.net||a.window_start))
      .slice(0, 50);
    localStorage.setItem(LW_HISTORY_KEY, JSON.stringify({ ts: Date.now(), data: merged }));
  } catch(e) {}
}

function loadLaunchHistory() {
  try {
    const raw = localStorage.getItem(LW_HISTORY_KEY);
    if (!raw) return [];
    return JSON.parse(raw).data || [];
  } catch(e) { return []; }
}

function mergeLaunchHistory(upcoming) {
  const history = loadLaunchHistory();
  if (!history.length) return upcoming;
  const ids = new Set(upcoming.map(l => l.id));
  const pastOnly = history.filter(l => {
    if (ids.has(l.id)) return false;
    return new Date(l.net || l.window_start).getTime() < Date.now();
  });
  return [...upcoming, ...pastOnly];
}

function loadLaunchCache() {
  try {
    const raw = localStorage.getItem(LL2_CACHE_KEY);
    if (!raw) return null;
    const { ts, data } = JSON.parse(raw);
    const age = Date.now() - ts;
    const ageH = (age / 3600000).toFixed(1);
    if (age > LL2_CACHE_TTL) {
      log(`CACHED MANIFEST EXPIRED (${ageH}H OLD) -- FETCHING FRESH`, 'warn');
      return null; // expired but we'll still use it below as last-resort
    }
    return { data, ageH, expired: false };
  } catch(e) { return null; }
}

// ── LAUNCH FACILITY IDENTIFIERS ─────────────────────────────────────────────
// Used to match launches to the same pad so we know when the "next" launch is
function getLaunchFacility(launch) {
  const pad  = (launch.pad?.name || '').toLowerCase();
  const loc  = (launch.pad?.location?.name || '').toLowerCase();
  const name = (launch.name || launch.mission?.name || '').toLowerCase();
  if (pad.includes('slc-40') || pad.includes('slc40') || loc.includes('cape canaveral') ||
      pad.includes('lc-39') || pad.includes('39a')    || pad.includes('39b')) return 'KSC';
  if (pad.includes('slc-4')  || pad.includes('slc4')  || loc.includes('vandenberg'))    return 'VANDENBERG';
  if (pad.includes('starbase') || loc.includes('boca chica'))                            return 'STARBASE';
  return null;
}

function getNextLaunchAtFacility(data, facility, afterMs) {
  // Find the next UPCOMING launch at the same facility after afterMs
  const now = Date.now();
  return (data || []).filter(l => {
    if (!facility) return false;
    const net = new Date(l.net || l.window_start).getTime();
    if (net <= afterMs) return false;  // must be after the past launch
    if (net < now) return false;       // must be in the future
    return getLaunchFacility(l) === facility;
  }).sort((a,b) => new Date(a.net||a.window_start) - new Date(b.net||b.window_start))[0] || null;
}

function stripPastLaunches(data) {
  // Keep upcoming launches + recently-launched ones
  // PRO: past launch stays visible until next launch from same facility
  // FREE: past launch visible for 24hr recovery window
  const now = Date.now();
  const SIX_HOURS    = 6  * 3600000;
  const TWELVE_HOURS = 12 * 3600000;
  const DAY_HOURS    = 24 * 3600000;
  const MAX_HISTORY  = 14 * 24 * 3600000; // 14 days absolute max for history

  return (data || []).filter(l => {
    const net = new Date(l.net || l.window_start).getTime();
    const msSinceLaunch = now - net;
    if (net > now) return true;  // upcoming -- always show
    if (msSinceLaunch > MAX_HISTORY) return false; // too old -- never show
    if (msSinceLaunch < SIX_HOURS) return true;    // just launched -- always show

    // PRO feature: stay visible until next launch at same facility
    if (PRO_UNLOCKED) {
      const facility = getLaunchFacility(l);
      if (facility === 'KSC' || facility === 'VANDENBERG') {
        const nextLaunch = getNextLaunchAtFacility(data, facility, net);
        // Keep this launch visible until the next one from same pad launches
        if (nextLaunch) {
          const nextNet = new Date(nextLaunch.net || nextLaunch.window_start).getTime();
          if (now < nextNet) return true; // next hasn't launched yet -- keep showing
        }
        // No upcoming launch found at this facility -- keep showing (14 day cap above)
        return true;
      }
    }

    // FREE: standard recovery windows
    if (l.notmar_guid && msSinceLaunch < TWELVE_HOURS) return true;
    const isSuccess = l.status?.abbrev === 'Success' || l.status?.name?.includes('Success');
    if (isSuccess && msSinceLaunch < DAY_HOURS) return true;
    return false;
  });
}

// Helper (v3.4): Layer-1 launch confirmation signal -- timer + webcast.
// Returns true when a launch has crossed NET by >=60s, the webcast was
// recently live, and there is no explicit scrub/hold keyword in the
// launch status. Used by isInRecovery() as a fallback when LL2 status
// has not yet flipped (LL2 routinely lags 30-90+ minutes after liftoff).
//
// Window sizing rationale (verified live on SL 10-38, 2026-05-01):
//   - LL2 last_updated lagged 65+ min behind real liftoff
//   - launch was at T+44min with no status change
//   - 30-min window would have missed it entirely
//   - 90-min window covers 95th-percentile LL2 lag without inviting
//     stale-data false-positives
//
// False-positive risk is bounded by:
//   - Window: 60s to 90min post-NET only (older launches must have LL2 status)
//   - webcast_live === true required (cancelled webcast == almost always scrub)
//   - Status keyword reject: TBD / TBC / Hold / Failure / Scrub / Abort all veto
//
// Layer-2 (v3.5) will add NSF/SFN article scrape for definitive correction
// within 1-2 minutes if Layer-1 produced a false positive.
function isLikelyLaunched(launch) {
  if (!launch) return false;
  const net = new Date(launch.net || launch.window_start).getTime();
  if (!net) return false;
  const msSinceLaunch = Date.now() - net;

  // Window: NET+60s to NET+90min
  const POST_NET_MIN_MS  = 60 * 1000;
  const POST_NET_MAX_MS  = 90 * 60 * 1000;
  if (msSinceLaunch < POST_NET_MIN_MS || msSinceLaunch > POST_NET_MAX_MS) return false;

  // v3.6 traj-polish: webcast_live preferred, with 30-min post-NET grace.
  // SpaceX webcasts run 15-20min after T-0 and then end (webcast_live -> false).
  // Without the grace, Layer-1 stopped firing for legitimately-launched missions
  // still in the recovery window -- observed live on SL 10-38 at T+76min.
  // Logic:
  //   webcast_live === true                   -> fire (active webcast)
  //   !webcast_live + msSinceLaunch <= 30min  -> fire (webcast ended post-launch)
  //   !webcast_live + msSinceLaunch >  30min  -> don't fire (stale/scrub risk)
  const POST_NET_WEBCAST_GRACE_MS = 30 * 60 * 1000;
  const webcastConfirms = launch.webcast_live === true;
  const justPostNet     = msSinceLaunch > 0 && msSinceLaunch <= POST_NET_WEBCAST_GRACE_MS;
  if (!webcastConfirms && !justPostNet) return false;

  // Reject explicit not-launched states
  const abbrev = (launch.status?.abbrev || '').toLowerCase();
  const name   = (launch.status?.name   || '').toLowerCase();
  const blob   = abbrev + ' ' + name;
  if (/tbd|tbc|hold|to be (set|determined|confirmed)|failure|fail|scrub|abort/.test(blob)) return false;

  return true;
}

// Helper: is this launch in the post-launch recovery window?
function isInRecovery(launch) {
  const net = new Date(launch.net || launch.window_start).getTime();
  const msSinceLaunch = Date.now() - net;
  if (msSinceLaunch <= 0) return false;
  const MAX_HISTORY = 14 * 24 * 3600000;
  if (msSinceLaunch > MAX_HISTORY) return false;

  // Layer-0 (legacy): LL2 confirmed status -- definitive when present
  // Layer-1 (v3.4):   isLikelyLaunched() -- timer + webcast fallback when LL2 lags
  const abbrev = (launch.status?.abbrev || '').toLowerCase();
  const launchedStates = ['success', 'in flight', 'partial failure'];
  const ll2Confirmed = abbrev && launchedStates.some(s => abbrev.includes(s));
  const layerOneFire = !ll2Confirmed && isLikelyLaunched(launch);
  if (!ll2Confirmed && !layerOneFire) return false;

  // PRO: in recovery until next launch at same facility
  if (PRO_UNLOCKED) {
    const facility = getLaunchFacility(launch);
    if (facility === 'KSC' || facility === 'VANDENBERG') {
      const nextLaunch = getNextLaunchAtFacility(allLaunches, facility, net);
      if (nextLaunch) {
        const nextNet = new Date(nextLaunch.net || nextLaunch.window_start).getTime();
        return Date.now() < nextNet;
      }
      return msSinceLaunch < MAX_HISTORY;
    }
  }

  // FREE: standard windows
  const baseWindow = launch.notmar_guid ? 12 * 3600000 : 6 * 3600000;
  if (msSinceLaunch < baseWindow) return true;
  const isSuccess = launch.status?.abbrev === 'Success' || launch.status?.name?.includes('Success');
  return isSuccess && msSinceLaunch < 24 * 3600000;
}
function loadLaunchCacheAny() {
  // Load cache regardless of TTL -- last known good data
  try {
    const raw = localStorage.getItem(LL2_CACHE_KEY);
    if (!raw) return null;
    const { ts, data } = JSON.parse(raw);
    const ageH = ((Date.now() - ts) / 3600000).toFixed(1);
    return { data: stripPastLaunches(data), ageH };
  } catch(e) { return null; }
}


// ── SUPABASE LAUNCH PATCH ──────────────────────────────────────────────────
// Merges vessel_assigned + trajectory_hint from rss_launches onto LL2 launches.
// Uses /.netlify/functions/get-launch-data (server-side, no anon key needed).
async function fetchGLSSLaunchCount() {
  // Show total launches tracked = DB total from get-launch-data
  // Falls back to allLaunches.length + "+" if endpoint unavailable
  try {
    const r = await fetch('/.netlify/functions/get-launch-data?count=true');
    if (r.ok) {
      const d = await r.json();
      if (d.total) {
        const el = document.getElementById('hdr-count');
        if (el) el.textContent = d.total.toLocaleString();
        log(`GLSS DATABASE: ${d.total} LAUNCHES TRACKED`, 'info');
        return;
      }
    }
  } catch(e) {}
  // Fallback: show manifest count with + to indicate "at least"
  const el = document.getElementById('hdr-count');
  if (el && allLaunches?.length) {
    el.textContent = allLaunches.length + '+';
  }
}

async function patchLaunchesFromSupabase(launches) {
  if (!launches || !launches.length) return;
  try {
    const res = await fetch('/.netlify/functions/get-launch-data');
    if (!res.ok) { console.warn('[Patch] get-launch-data HTTP', res.status); return; }
    const rows = await res.json();
    if (!Array.isArray(rows) || !rows.length) return;

    // v2.56 -- Patch PP: dual-key index. Primary: ll2_id (LL2 UUID, immutable).
    // Fallback: slug id (for non-LL2 source rows or older data).
    const byId = {};
    const byLl2Id = {};
    for (const row of rows) {
      if (row.id) byId[row.id] = row;
      if (row.ll2_id) byLl2Id[row.ll2_id] = row;
    }

    // v2.55 -- slug fallback. Backend ingests slug from launch.name (with rocket prefix),
    // frontend was using launch.mission.name. For Atlas V Amazon Leo etc, mission.name
    // strips the rocket so slugs diverge. Try both forms and an alt-hyphen variant.
    function _slugifyName(rawName) {
      return (rawName || '')
        .replace(/^falcon\s+9\s+(block\s+5\s+)?\|\s*/i, '')
        .replace(/^falcon\s+9\s+[•·]\s*/i, '')
        .replace(/^falcon\s+heavy\s+(\|\s*|[•·]\s*)/i, '')
        .replace(/\s+group\s+/i, ' ')
        .replace(/\s*\(([^)]+)\)\s*$/, ' $1')
        .trim()
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').substring(0, 80);
    }

    let patched = 0;
    for (const launch of launches) {
      const candidates = [];
      const fullName = launch.name || '';
      const missionName = (launch.mission && launch.mission.name) || '';
      if (fullName)    candidates.push(_slugifyName(fullName));
      if (missionName) candidates.push(_slugifyName(missionName));
      // Alt-hyphen variant for "sv10" -> "sv-10" style drift
      for (const c of [...candidates]) {
        const alt = c.replace(/([a-z])(\d+)(?=-|$)/g, '$1-$2');
        if (alt !== c) candidates.push(alt);
      }

      let row = null;
      let matchedSlug = null;

      // v2.56 Patch PP -- PRIMARY: LL2 UUID match. launch.id from LL2 manifest IS
      // the LL2 UUID. This is the bulletproof key, no slug computation needed.
      if (launch.id && byLl2Id[launch.id]) {
        row = byLl2Id[launch.id];
        matchedSlug = '(by ll2_id ' + launch.id.substring(0,8) + ')';
      }

      // FALLBACK: slug-based match for non-LL2 source rows or LL2 rows missing ll2_id
      if (!row) {
        for (const slug of candidates) {
          if (slug && byId[slug]) {
            row = byId[slug];
            matchedSlug = slug;
            break;
          }
        }
      }
      if (row) {
        // Patch HH-merge-fix (v2.45) -- vessel_ocean must flow even when
        // vessel_assigned is null. v3.7 ingest populates vessel_ocean='DOUG'
        // for FH-from-LC-39A regardless of booster axis (which is RTLS, so
        // vessel_assigned is null). Previous gate skipped vessel_ocean
        // entirely for FH and stranded the fairing axis off the frontend.
        if (row.vessel_assigned) { launch.vessel_assigned = row.vessel_assigned; }
        if (row.vessel_ocean)    { launch.vessel_ocean    = row.vessel_ocean; }
        if (row.trajectory_hint) { launch.trajectory_hint = row.trajectory_hint; launch.traj_min = row.traj_min; launch.traj_max = row.traj_max; }
        // NOTMAR official exclusion zone data -- merge from EITHER USCG (notmar_guid)
        // OR NAVAREA IV (navarea_msg_id) source. Patch KK (v2.50, 2026-04-27):
        // previous gate was `if (row.notmar_guid)` only, which skipped polygons
        // populated by ingest-navarea-iv-background.js (NGA writes navarea_msg_id,
        // not notmar_guid). Now: merge whenever any provenance flag is set, OR
        // when any polygon column has data. Defensive -- prefers explicit
        // provenance check, falls back to direct polygon-presence check for
        // robustness.
        if (row.notmar_guid || row.navarea_msg_id || row.notmar_pad_poly || row.notmar_booster_poly || row.notmar_fairing_poly) {
          launch.notmar_guid        = row.notmar_guid || launch.notmar_guid;
          launch.navarea_msg_id     = row.navarea_msg_id || launch.navarea_msg_id;
          launch.notmar_booster_lat = row.notmar_booster_lat;
          launch.notmar_booster_lon = row.notmar_booster_lon;
          launch.notmar_booster_poly = row.notmar_booster_poly;
          launch.notmar_fairing_lat = row.notmar_fairing_lat;
          launch.notmar_fairing_lon = row.notmar_fairing_lon;
          launch.notmar_fairing_poly = row.notmar_fairing_poly;
          launch.notmar_pad_poly    = row.notmar_pad_poly;
          launch.notmar_updated     = row.notmar_updated || row.navarea_updated;
        }
        // Patch LL -- scrub-banner Phase 3: merge status / NET / slip-detection columns
        if (row.status)            launch.status            = row.status;
        if (row.status_name)       launch.status_name       = row.status_name;
        if (row.window_start)      launch.window_start      = row.window_start;
        if (row.hold_reason)       launch.hold_reason       = row.hold_reason;
        if (row.fail_reason)       launch.fail_reason       = row.fail_reason;
        if (row.updated_at)        launch.updated_at        = row.updated_at;
        if (row.previous_net)      launch.previous_net      = row.previous_net;
        if (row.previous_status)   launch.previous_status   = row.previous_status;
        if (row.status_changed_at) launch.status_changed_at = row.status_changed_at;
        if (row.azimuth_min != null && launch.azimuth_min == null) { launch.azimuth_min = row.azimuth_min; launch.azimuth_max = row.azimuth_max; launch.azimuth_label = row.azimuth_label; }
        patched++;
      }
    }
    // FH RTLS policy after Supabase merge so stale/wrong vessel data can't override.
    applyFalconHeavyRecoveryPolicy(launches);
    if (patched) {
      log('VESSEL + TRAJECTORY DATA PATCHED: ' + patched + ' LAUNCHES', 'alert');
      // Re-render if a launch is selected so arc updates immediately
      if (selectedLaunch) {
        const updated = launches.find(l => l.id === selectedLaunch.id || (l.mission?.name||l.name) === (selectedLaunch.mission?.name||selectedLaunch.name));
        if (updated) { selectedLaunch = updated; drawLaunchArc(updated); }
      }
    }
  } catch(e) {
    console.warn('[Patch] error:', e.message);
  }
}

// ── Vessel motion narrative (v2.30 Patch U-Live, 2026-04-25) ────────────────
// During the boring transit phase (vessel underway, AIS live, no NOTMAR yet),
// render a forward-projected dashed trail with hourly tick marks. Turns a
// static dot into an arrow with intent. Updates every AIS poll cycle.
// Future Patch CC will add the historical trail behind + ghost-vessel
// AIS-dark phase. This is the immediate-visual-excitement piece.
let _vesselNarrativeLayer = null;
function ensureVesselNarrativeLayer() {
  if (!_vesselNarrativeLayer && typeof map !== 'undefined' && map) {
    _vesselNarrativeLayer = L.layerGroup().addTo(map);
  }
  return _vesselNarrativeLayer;
}
// ── Patch CC-Behind (v2.37, 2026-04-25) -- historical AIS trail cache ──
// Keep historical positions per vessel cached for 5 min so we don't hammer
// /netlify/functions/get-vessel-history on every AIS poll cycle. Fetched
// asynchronously in the background; renderVesselMotionNarrative reads
// whatever is currently cached and ignores misses gracefully.
const _vesselTrailCache = {};
const VESSEL_TRAIL_CACHE_TTL_MS = 5 * 60 * 1000;
const VESSEL_TRAIL_POINTS = 200;  // v2.38: captures full port -> zone -> port mission cycle (narrative cache)

// v3.9 -- live-mode trail rendering window + fade gradient
// VESSEL_TRAIL_POINTS above is for the NARRATIVE cache (long horizon, "where she's been" text).
// Constants below govern the POLYLINE rendered on the map -- separate concern.
// TRAIL_HOURS = 168 (7d) covers any port-to-port transit; backend cap of 1500 rows
// (see get-vessel-history.js v2.20) is the real ceiling. Catmull-Rom smoothing in
// the render loop fills any sparse-AIS gaps.
const TRAIL_HOURS = 168;                                                          // 7d window covers any transit
const TRAIL_AVG_PING_MIN = 5;                                                     // VesselFinder cadence
const TRAIL_LIMIT = Math.min(1500, Math.ceil(TRAIL_HOURS * 60 / TRAIL_AVG_PING_MIN));  // capped by backend
const TRAIL_FADE_BUCKETS = 16;                                                    // smooth gradient (was 3 in v3.8)
const TRAIL_OPACITY_MIN  = 0.05;                                                  // oldest segment alpha
const TRAIL_OPACITY_MAX  = 0.85;                                                  // newest segment alpha
const TRAIL_WEIGHT_MIN   = 0.8;                                                   // oldest segment width
const TRAIL_WEIGHT_MAX   = 2.4;                                                   // newest segment width
// v3.10 -- data quality mitigations (BUG-025 frontend defense)
// Backend writes duplicate vessel_positions rows on every poll. Until ingest-dedup
// lands, dedup at render time and split trail at AIS-dark gaps so the polyline
// doesn't lie about a teleport between continents.
// IMPLIED-SPEED ONLY heuristic: time-only gap detection mis-tags real-but-sparse
// continuous transit as AIS-dark (a vessel sailing at 5kt for 12h covers ~110km
// with possibly only 2 pings -- that's NOT a gap). Threshold 15 kts is the rough
// physical ceiling for the fastest of our vessels (fairing recovery boats), so
// anything implying faster is truly an AIS-dark teleport.
const TRAIL_DEDUP_EPSILON    = 0.00001;  // ~1m in lat/lon -- exact-dup detection
const TRAIL_GAP_MAX_KTS      = 15;       // implied speed > this = AIS-dark gap
const TRAIL_GAP_DASH_OPACITY = 0.18;     // dashed gap-connector alpha
const TRAIL_GAP_DASH_PATTERN = '4 8';    // dash 4px / gap 8px
const TRAIL_GAP_DASH_WEIGHT  = 1.0;      // dashed gap-connector weight
// v3.13 -- faint solid underlay beneath the dashed overlay so vessel-track
// gaps read as "ghosted continuous" rather than getting visually lost in
// all the other dashed UX (NOTMAR polygons, trajectory fan, vis radius).
const TRAIL_GAP_BASE_OPACITY = 0.08;     // solid underlay alpha (fainter than dashes)
const TRAIL_GAP_BASE_WEIGHT  = 0.5;      // solid underlay weight (thinner than dashes)
// v3.12 hotfix -- second duplicate v3.10 constants block removed.
// deploy_setec.py is non-idempotent; never re-run on an applied slug.
// Future patches: make Before blocks strictly larger so they can't match
// after a successful first apply.

// v2.38 Patch CC-Behind+ -- split trail into outbound/return segments at the
// "farthest from home port" inflection. When that pivot is well before the
// most recent points, vessel has turned around and is returning. We render
// outbound at low opacity (faded, "where she's been") and return at higher
// opacity (active, "where she's heading now"). Falls back to single-segment
// when no clear pivot exists (still outbound, or trail too short).
function _haversineKm(lat1, lon1, lat2, lon2) {
  const R = 6371, toRad = function (d) { return d * Math.PI / 180; };
  const dLat = toRad(lat2 - lat1), dLon = toRad(lon2 - lon1);
  const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}
function splitTrailAtTurnaround(trailPoints, homePortLat, homePortLng) {
  if (!trailPoints || trailPoints.length < 3 || homePortLat == null || homePortLng == null) {
    return { outbound: trailPoints || [], returning: [], isReturning: false, maxDistKm: null };
  }
  let maxDist = -1, maxIdx = 0;
  for (let i = 0; i < trailPoints.length; i++) {
    const p = trailPoints[i];
    if (!p || !Number.isFinite(p.lat) || !Number.isFinite(p.lon)) continue;
    const d = _haversineKm(homePortLat, homePortLng, p.lat, p.lon);
    if (d > maxDist) { maxDist = d; maxIdx = i; }
  }
  // Returning if farthest point is more than ~3 samples back from the end --
  // vessel has spent some time moving away from that peak.
  const TAIL_SAMPLES_FOR_RETURN = 3;
  const isReturning = maxIdx < trailPoints.length - TAIL_SAMPLES_FOR_RETURN;
  return {
    outbound: trailPoints.slice(0, maxIdx + 1),
    returning: trailPoints.slice(maxIdx),  // include pivot in both for visual continuity
    isReturning,
    maxDistKm: maxDist
  };
}

// ── Patch CC-MissionStart (v2.42, 2026-04-25) -- slice trail to current mission ──
// Kenny 2026-04-25: "what we can remove is the previous launch vessel return to
// port that is still showing from the last spacex launch". The 200-point cache
// (~96h history) routinely spans MULTIPLE mission cycles for active vessels --
// e.g. DOUG returned from a prior launch a couple of days before her Viasat-3
// outbound. Without trimming, we render that previous return-to-port path as
// part of the "current" trail, which lights up an irrelevant arc on the map.
//
// Heuristic: walk backward from the end and find the most recent index where
// the vessel was within IN_PORT_THRESHOLD_KM of home port. That moment is
// either (a) the start of the current mission (vessel just departed) or
// (b) the vessel's current in-port resting state (no active mission yet).
// In both cases, slicing forward from there discards the previous mission.
//
// Edge cases:
//   - No home port -> no slicing (return original).
//   - Trail never visits port within history window (long-deployed vessel) ->
//     keep the whole trail (better than wiping it).
//   - Vessel currently in port and trail is entirely in-port -> slice keeps
//     just the recent in-port samples.
const VESSEL_IN_PORT_THRESHOLD_KM = 15;
function _sliceTrailToCurrentMission(trailPoints, homePortLat, homePortLng) {
  if (!trailPoints || trailPoints.length < 2) return trailPoints || [];
  if (homePortLat == null || homePortLng == null) return trailPoints;
  let lastInPortIdx = -1;
  for (let i = trailPoints.length - 1; i >= 0; i--) {
    const p = trailPoints[i];
    if (!p || !Number.isFinite(p.lat) || !Number.isFinite(p.lon)) continue;
    const d = _haversineKm(homePortLat, homePortLng, p.lat, p.lon);
    if (d <= VESSEL_IN_PORT_THRESHOLD_KM) { lastInPortIdx = i; break; }
  }
  if (lastInPortIdx < 0) return trailPoints;  // never visited port in window
  // Slice from the last in-port sample forward -- that anchors the trail at
  // the vessel's "departure from port" moment, dropping any prior mission.
  return trailPoints.slice(lastInPortIdx);
}

async function _refreshVesselTrailIfStale(vesselName) {
  const cached = _vesselTrailCache[vesselName];
  if (cached && Date.now() - cached.fetchedAt < VESSEL_TRAIL_CACHE_TTL_MS) return;
  if (typeof fetchVesselTrailHistory !== 'function') return;
  try {
    const points = await fetchVesselTrailHistory(vesselName, VESSEL_TRAIL_POINTS);
    _vesselTrailCache[vesselName] = {
      fetchedAt: Date.now(),
      points: Array.isArray(points) ? points : []
    };
    // Trigger re-render now that we have fresh data.
    if (typeof renderVesselMotionNarrative === 'function') {
      renderVesselMotionNarrative();
    }
  } catch (e) { /* silent -- keep stale cache on error */ }
}

// ── Patch CC-Filter (v2.41, 2026-04-25) -- vessel relevance gating ──
// When a launch is selected, only render trails / projections for vessels
// actually serving that launch. Stops the "DOUG ghost-attaches to every
// launch I click" UX issue and matches the SL-10-44 reference (single
// drone-ship trail per mission, not the whole fleet).
//
// Relevance rules:
//   1. No launch selected           -> ALL underway vessels render (overview)
//   2. launch.vessel_assigned === N -> N is relevant (explicit data tie)
//   3. Falcon Heavy + name in       -> DOUG / BOB relevant (fairing recovery
//      DOUG/BOB heuristic              heuristic until Patch U-Full lands)
//   4. Else                         -> not relevant, skip
//
// When Patch U-Full lands with `fairing_vessel_assigned`, the heuristic at
// rule 3 becomes another explicit-tie rule and this stays correct.
function _isVesselRelevantToSelectedLaunch(vesselName) {
  // No selected launch -> show everything (overview / port-state map).
  if (typeof selectedLaunch === 'undefined' || !selectedLaunch) return true;
  // Explicit launch-vessel tie wins.
  if (selectedLaunch.vessel_assigned === vesselName) return true;
  // Falcon Heavy heuristic -- fairing recovery via DOUG / BOB.
  const _cfg = (selectedLaunch.rocket
    && selectedLaunch.rocket.configuration
    && selectedLaunch.rocket.configuration.name) || '';
  if (/^falcon\s+heavy$/i.test(_cfg) && (vesselName === 'DOUG' || vesselName === 'BOB')) return true;
  // Future-proofing: explicit fairing_vessel_assigned (Patch U-Full).
  if (selectedLaunch.fairing_vessel_assigned === vesselName) return true;
  return false;
}

function renderVesselMotionNarrative() {
  const layer = ensureVesselNarrativeLayer();
  if (!layer) return;
  layer.clearLayers();
  if (typeof vesselPositions === 'undefined' || !vesselPositions) return;

  // v2.32 Patch Y -- derive the currently-selected launch's predicted zone
  // center if any. We'll draw a dashed connection line from each underway
  // vessel to this point. No selected launch (or no zone resolved) -> no
  // connection lines, just the projection trails.
  //
  // v2.33 Patch Y-fix (2026-04-25) -- also honor suppressZone. Atlas V from
  // SLC-41, Soyuz, Long March, Electron etc. resolve to a zone center via
  // the orbit-model fallback BUT have suppressZone=true (no at-sea
  // recovery). The orbit ring correctly hides; the connection line should
  // hide too. Without this gate, an UNDERWAY vessel like DOUG would draw a
  // line from her position to a phantom zone center the user can't see --
  // a "random orange line going somewhere" bug Kenny caught on Amazon Leo.
  let _zoneLat = null, _zoneLng = null, _zoneLabel = null;
  try {
    if (typeof selectedLaunch !== 'undefined' && selectedLaunch
        && typeof getLaunchAzimuth === 'function') {
      const _az = getLaunchAzimuth(selectedLaunch);
      const _zoneAtSea = _az && !_az.suppressZone;
      if (_az && _zoneAtSea && _az.zoneLat != null && _az.zoneLng != null) {
        _zoneLat = _az.zoneLat;
        _zoneLng = _az.zoneLng;
        _zoneLabel = _az.label || null;
      }
    }
  } catch (e) { /* selected launch lookup failed; skip connection lines */ }

  for (const name of Object.keys(vesselPositions)) {
    // v2.41 Patch CC-Filter -- only render vessels relevant to the
    // currently-selected launch. When no launch is selected, all underway
    // vessels render. See _isVesselRelevantToSelectedLaunch above.
    if (!_isVesselRelevantToSelectedLaunch(name)) continue;
    const v = vesselPositions[name];
    if (!v || !v.isLive || v.lat == null || v.lng == null) continue;

    // v2.49 Patch CC-Trail-Dedupe (2026-04-27) -- historical-trail polyline
    // block REMOVED. The smooth canvas-rendered 3-segment fade trail in
    // updateVesselPositions (orange/cyan/amber per vessel state) is the
    // canonical historical trail going forward -- it gives the "beautiful
    // soft trail" Kenny wants without the dashed-amber overlap that this
    // block was producing. Keep the cache refresh below so trail data stays
    // fresh for any other consumer (replay/history mode, future Patch CC-
    // Replay). The forward projection trail + Y connection line + Z color
    // gradient + BB particle all still render in the projection block below.
    //
    // Helpers `_sliceTrailToCurrentMission` and `splitTrailAtTurnaround`
    // remain defined; left in place for replay-mode reuse and to avoid
    // touching dependent CSS classes (.vessel-historical-trail still
    // referenced in CSS but no longer applied here).
    _refreshVesselTrailIfStale(name);

    // Below this point: PROJECTION-only logic. Skip stationary vessels
    // here (they get a historical trail above but no forward projection).
    if (v.label !== 'UNDERWAY' || (v.speed || 0) < 1) {
      // Still attempt the connection line (handled at end of loop) for an
      // ON-STATION recovery vessel. But skip projection.
      // Note: connection-line code is at the bottom of this iteration.
      continue;
    }

    // v2.31 Patch U-Live update -- port-proximity guard. Suppress projection
    // when vessel is within 100km of her home port (Kenny 2026-04-25 -- "100km
    // range from port or 6 hours of transit"). Avoids drawing the projected
    // trail OVER LAND while she's still navigating port approaches / channels.
    // Returning-to-port edge case (>100km out but heading inland) is rarer
    // and not handled here -- would need coastline-intersection or
    // heading-toward-port detection.
    const homePort = (typeof VESSEL_HOME_PORTS !== 'undefined') && VESSEL_HOME_PORTS[name];
    if (homePort) {
      const _R = 6371;
      const _dLat = (homePort.lat - v.lat) * Math.PI / 180;
      const _dLng = (homePort.lng - v.lng) * Math.PI / 180;
      const _a = Math.sin(_dLat / 2) ** 2
               + Math.cos(v.lat * Math.PI / 180)
               * Math.cos(homePort.lat * Math.PI / 180)
               * Math.sin(_dLng / 2) ** 2;
      const _distFromPort = _R * 2 * Math.atan2(Math.sqrt(_a), Math.sqrt(1 - _a));
      if (_distFromPort < 100) continue;  // still in / near port -- skip projection
    }

    // v3.16: route through DR engine -- v.heading was null for droneships +
    // most fairing vessels (no gyrocompass), causing the projection to point
    // due north instead of along actual course of motion.
    const _projDir = getVesselDirection(name, v);
    const heading = _projDir.value;
    const speedKts = v.speed || 0;
    const PROJECTION_HRS = 6;

    // Projected polyline points along the great-circle, hourly steps.
    const headingRad = heading * Math.PI / 180;
    const lat1 = v.lat * Math.PI / 180;
    const lon1 = v.lng * Math.PI / 180;
    const pts = [[v.lat, v.lng]];
    for (let h = 1; h <= PROJECTION_HRS; h++) {
      const dRad = (speedKts * 1.852 * h) / 6371;  // 1 kt = 1.852 km/h
      const lat2 = Math.asin(Math.sin(lat1) * Math.cos(dRad) + Math.cos(lat1) * Math.sin(dRad) * Math.cos(headingRad));
      const lon2 = lon1 + Math.atan2(Math.sin(headingRad) * Math.sin(dRad) * Math.cos(lat1),
                                     Math.cos(dRad) - Math.sin(lat1) * Math.sin(lat2));
      pts.push([lat2 * 180 / Math.PI, ((lon2 * 180 / Math.PI) + 540) % 360 - 180]);
    }

    // Dashed amber projected line -- like a nautical chart course vector.
    L.polyline(pts, {
      color: '#FFB000', weight: 2, opacity: 0.7,
      dashArray: '4,6', interactive: false,
      className: 'vessel-projection-line'
    }).addTo(layer);

    // Hourly tick markers, fading as uncertainty grows with distance.
    pts.slice(1).forEach(function(p, i) {
      const fade = 1 - (i * 0.13);
      L.circleMarker(p, {
        radius: i === PROJECTION_HRS - 1 ? 4 : 3,
        color: '#FFB000', fillColor: '#FFB000',
        opacity: Math.max(0.2, 0.85 * fade),
        fillOpacity: Math.max(0.12, 0.55 * fade),
        weight: 1, interactive: false,
        className: 'vessel-projection-tick'
      }).addTo(layer)
        .bindTooltip(
          '<span style="font-family:VT323,monospace;color:#FFB000;letter-spacing:0.08em;">' +
          name + ' +' + (i + 1) + 'h proj &middot; ' + speedKts.toFixed(1) + 'kts &middot; ' +
          (_projDir.source === 'NULL' ? 'hdg --' :
           _projDir.source === 'HDG'  ? 'hdg ' + Math.round(heading) + '°' :
                                        'hdg ' + Math.round(heading) + '° (' + _projDir.source + ')') +
          '</span>',
          { permanent: false, className: 'arc-tooltip', direction: 'top' }
        );
    });

    // Patch Y -- connection line from this vessel to the selected launch's
    // zone center. Slow-pulsing dashed amber. Skips silently when no launch
    // is selected. Renders for every underway vessel so multi-vessel ops
    // (e.g. DOUG + BOB on a single FH mission) all visibly tie to the zone.
    if (_zoneLat != null && _zoneLng != null) {
      const _link = L.polyline([[v.lat, v.lng], [_zoneLat, _zoneLng]], {
        color: '#FFB000', weight: 1.25, opacity: 0.35,
        dashArray: '6,8', interactive: false,
        className: 'vessel-zone-link'
      }).addTo(layer);
      _link.bindTooltip(
        '<span style="font-family:VT323,monospace;color:#FFB000;letter-spacing:0.08em;">'
          + name + ' &rarr; ' + (_zoneLabel || 'predicted zone')
          + '</span>',
        { permanent: false, className: 'arc-tooltip', sticky: true }
      );
    }
  }
}

// ── Falcon Heavy recovery policy (2026-04-23) ────────────────────────────────
// FH side boosters RTLS to LZ-1 + LZ-2, no drone ship. Policy carve-out when
// SpaceX begins FH booster-at-sea recovery (JRTI task per Kenny's ops update
// 2026-04-23). Authoritative doc: SETEC/live-notmar-map/fh-rtls-policy.md.
// Call this helper after every allLaunches mutation and at the end of
// patchLaunchesFromSupabase so stale Supabase rows can never override policy.
function applyFalconHeavyRecoveryPolicy(launches) {
  if (!Array.isArray(launches)) return;
  for (const l of launches) {
    if (!l) continue;
    const cfg = (l.rocket && l.rocket.configuration && l.rocket.configuration.name) || '';
    if (/^falcon\s+heavy$/i.test(cfg)) {
      l.landing_type     = 'RTLS';
      l.landing_location = 'LZ-1 + LZ-2';
      l.vessel_assigned  = null;
      l.vessel_ocean     = null;
    }
  }
}

async function fetchLaunches() {
  log('CONNECTING TO LAUNCH LIBRARY 2.0 API...', 'alert');
  let ll2Success = false;

  // Try fresh cache first (< 3hr old) to avoid burning rate limit
  const fresh = loadLaunchCache();
  if (fresh) {
    allLaunches = stripPastLaunches(fresh.data);
    patchLaunchesFromSupabase(allLaunches).catch(()=>{});
    log(`MANIFEST FROM CACHE (${fresh.ageH}H OLD): ${allLaunches.length} LAUNCHES`, 'alert');
    // Still kick off a background refresh to update cache
    setTimeout(async () => {
      try {
        const r = await fetch('https://ll.thespacedevs.com/2.3.0/launches/upcoming/?limit=100&format=json&ordering=net&include_suborbital=false');
        if (r.ok) {
          const d = await r.json();
          let results = d.results || [];
          // Fetch page 2 if available (LL2 free tier: 100/page, we want up to 200)
          if (d.next) {
            try {
              const r2 = await fetch(d.next);
              if (r2.ok) { const d2 = await r2.json(); results = results.concat(d2.results || []); }
            } catch(e) {}
          }
          if (results.length) {
            saveLaunchCache(results); // save raw before strip
            allLaunches = mergeLaunchHistory(stripPastLaunches(results));
            patchLaunchesFromSupabase(allLaunches).then(() => {
        renderLaunchList();
        // Recovery launches stay in manifest with LAUNCHED badge
        // User clicks to view NOTMAR polygon + DR ghost tracks
        // No auto-select on load
      }).catch(() => renderLaunchList());
            renderMapMarkers();
            // Stage 3: rebuild ambient layer on manifest refresh
            try {
              renderAmbientNotmarZones();
              if (!selectedLaunch) showAmbientNotmar();
            } catch(e) { console.warn('ambient NOTMAR render failed', e); }
            log(`MANIFEST REFRESHED: ${allLaunches.length} LAUNCHES`, 'alert');
            fetchGLSSLaunchCount(); // Update DB total after refresh
          }
        }
      } catch(e) {}
    }, 3000);
  } else {
    // No fresh cache -- fetch live
    try {
      const r = await fetch('https://ll.thespacedevs.com/2.3.0/launches/upcoming/?limit=100&format=json&ordering=net&include_suborbital=false');
      if (r.status === 429) {
        log('LL2 RATE LIMITED -- USING LAST KNOWN MANIFEST', 'warn');
        const stale = loadLaunchCacheAny();
        if (stale) {
          allLaunches = stripPastLaunches(stale.data);
          log(`LAST KNOWN MANIFEST (${stale.ageH}H OLD): ${allLaunches.length} LAUNCHES`, 'warn');
        } else {
          allLaunches = getFallbackLaunches();
          log('NO CACHE -- USING STATIC FALLBACK MANIFEST', 'warn');
        }
        setTimeout(fetchLaunches, 300000); // retry in 5 min
      } else if (!r.ok) {
        throw new Error('API ' + r.status);
      } else {
        const d = await r.json();
        // Fetch page 2 if available (gets up to 200 launches)
        let _p1results = d.results || [];
        if (d.next) {
          try {
            const _rp2 = await fetch(d.next);
            if (_rp2.ok) { const _dp2 = await _rp2.json(); _p1results = _p1results.concat(_dp2.results || []); }
          } catch(e) {}
        }
        const now = Date.now();
        saveLaunchCache(_p1results); // save before strip
        allLaunches = mergeLaunchHistory(_p1results).filter(l => {
          const net = new Date(l.net || l.window_start).getTime();
          const st = l.status?.abbrev || '';
          return net > now && st !== 'Success' && st !== 'Failure' && st !== 'Partial Failure';
        });
        saveLaunchCache(allLaunches);
        ll2Success = true;
        log(`MANIFEST LOADED: ${allLaunches.length} LAUNCHES FROM LL2`, 'alert');
      }
    } catch(e) {
      const stale = loadLaunchCacheAny();
      if (stale) {
        allLaunches = stripPastLaunches(stale.data);
        log(`LL2 UNAVAILABLE -- LAST KNOWN MANIFEST (${stale.ageH}H OLD): ${allLaunches.length} LAUNCHES`, 'warn');
      } else {
        allLaunches = getFallbackLaunches();
        log('LL2 UNAVAILABLE -- NO CACHE -- USING STATIC FALLBACK', 'warn');
      }
    }
  }
  // FH RTLS policy applied BEFORE any render -- covers all 7 allLaunches population
  // paths above (fresh cache / fresh LL2 / stale cache / static fallback / error).
  applyFalconHeavyRecoveryPolicy(allLaunches);
  renderMapMarkers();
  renderLaunchList();
  // Stage 3: build ambient NOTMAR layer once allLaunches is populated, then
  // show it if nothing is currently focused.
  try {
    renderAmbientNotmarZones();
    if (!selectedLaunch) showAmbientNotmar();
  } catch(e) { console.warn('ambient NOTMAR render failed', e); }
  currentLaunches = allLaunches; // sync for mobile
  setTimeout(() => { renderMobileLaunches(); updateMobileStatusBar(); }, 100);

  // Check for imminent launches
  allLaunches.forEach(l => {
    if (isWithin24h(l.net || l.window_start)) {
      const name = l.mission?.name || l.name;
      log(`⚠ IMMINENT: ${name} T-MINUS < 24H`, 'crit');
    }
  });

  // Background prefetch landing detail -- ONLY if LL2 gave us real data
  // Staggered heavily to avoid triggering another 429 on the detail endpoint
  if (ll2Success) {
    const spacexLaunches = allLaunches
      .filter(l => (l.launch_service_provider?.name || '').toLowerCase().includes('spacex') && l.id)
      .slice(0, 8); // reduced from 12 to 8 to stay under rate limit
    spacexLaunches.forEach((l, i) => {
      setTimeout(async () => {
        if (landingDetailCache[l.id]) return;
        const detail = await fetchLandingDetail(l.id);
        if (detail) {
          l.landing_detail = detail;
          const name = l.mission?.name || l.name;
          const loc = detail.landing_abbrev || (detail.is_rtls ? 'RTLS' : '?');
          log(`PREFETCH: ${name} → ${loc}`, 'alert');
        }
      }, 5000 + i * 2000); // start after 5s, then every 2s -- much more conservative
    });
  }
}

function getFallbackLaunches() {
  // addDays: returns ISO string N days from now at a realistic launch time (not midnight)
  const addDays = (d, h=14, m=0) => {
    const x = new Date();
    x.setDate(x.getDate() + d);
    x.setUTCHours(h, m, 0, 0);
    return x.toISOString();
  };
  return [
    // KSC / Cape Canaveral
    { name:"Starlink Group 6-67", mission:{name:"Starlink Group 6-67"}, rocket:{configuration:{name:"Falcon 9 Block 5"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(1,22,35), pad:{name:"SLC-40",latitude:"28.5618",longitude:"-80.5772",location:{name:"Cape Canaveral, FL"}} },
    { name:"New Glenn OTV-2", mission:{name:"New Glenn -- OTV-2"}, rocket:{configuration:{name:"New Glenn"}}, launch_service_provider:{name:"Blue Origin"}, net:addDays(3,18,0), pad:{name:"LC-36",latitude:"28.4720",longitude:"-80.5430",location:{name:"Cape Canaveral, FL"}} },
    { name:"Falcon Heavy USSF-52", mission:{name:"USSF-52"}, rocket:{configuration:{name:"Falcon Heavy"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(6,20,15), pad:{name:"LC-39A",latitude:"28.6080",longitude:"-80.6040",location:{name:"Cape Canaveral, FL"}} },
    { name:"Vulcan Centaur VC2S", mission:{name:"Cert-2"}, rocket:{configuration:{name:"Vulcan Centaur"}}, launch_service_provider:{name:"ULA"}, net:addDays(18,14,0), pad:{name:"SLC-41",latitude:"28.5834",longitude:"-80.5830",location:{name:"Cape Canaveral, FL"}} },
    { name:"Starlink Group 10-4", mission:{name:"Starlink Group 10-4"}, rocket:{configuration:{name:"Falcon 9 Block 5"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(22,9,30), pad:{name:"LC-39A",latitude:"28.6080",longitude:"-80.6040",location:{name:"Cape Canaveral, FL"}} },
    // Starbase -- Boca Chica, TX
    { name:"Starship IFT-8", mission:{name:"Starship Integrated Flight Test 8"}, rocket:{configuration:{name:"Starship"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(4,14,0), pad:{name:"Orbital Launch Mount A",latitude:"25.9969",longitude:"-97.1547",location:{name:"Starbase, TX"}} },
    { name:"Starship IFT-9", mission:{name:"Starship Integrated Flight Test 9"}, rocket:{configuration:{name:"Starship"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(35,15,0), pad:{name:"Orbital Launch Mount A",latitude:"25.9969",longitude:"-97.1547",location:{name:"Starbase, TX"}} },
    // Vandenberg
    { name:"SpaceX Transporter-13", mission:{name:"Transporter-13"}, rocket:{configuration:{name:"Falcon 9 Block 5"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(10,21,19), pad:{name:"SLC-4E",latitude:"34.6329",longitude:"-120.6109",location:{name:"Vandenberg SFB, CA"}} },
    { name:"NROL-153", mission:{name:"NROL-153"}, rocket:{configuration:{name:"Falcon 9 Block 5"}}, launch_service_provider:{name:"SpaceX"}, net:addDays(15,17,30), pad:{name:"SLC-4E",latitude:"34.6329",longitude:"-120.6109",location:{name:"Vandenberg SFB, CA"}} },
    // Wallops
    { name:"Antares NG-22", mission:{name:"Cygnus NG-22"}, rocket:{configuration:{name:"Antares 230+"}}, launch_service_provider:{name:"Northrop Grumman"}, net:addDays(25,12,1), pad:{name:"Pad 0A",latitude:"37.8337",longitude:"-75.4882",location:{name:"Wallops Island, VA"}} },
    // International
    { name:"Electron -- The Beat", mission:{name:"The Beat Goes On"}, rocket:{configuration:{name:"Electron"}}, launch_service_provider:{name:"Rocket Lab"}, net:addDays(5,3,15), pad:{name:"LC-1",latitude:"-39.2612",longitude:"177.8643",location:{name:"Mahia Peninsula, NZ"}} },
    { name:"Soyuz-2.1b EO MHT", mission:{name:"EO MHT 1"}, rocket:{configuration:{name:"Soyuz-2.1b"}}, launch_service_provider:{name:"Roscosmos"}, net:addDays(8,6,0), pad:{name:"Site 43/4",latitude:"62.9293",longitude:"40.4575",location:{name:"Plesetsk Cosmodrome, Russia"}} },
    { name:"Ariane 62 Galileo", mission:{name:"Galileo M10"}, rocket:{configuration:{name:"Ariane 62"}}, launch_service_provider:{name:"ArianeGroup"}, net:addDays(14,21,30), pad:{name:"ELA-4",latitude:"5.2390",longitude:"-52.7683",location:{name:"Kourou, French Guiana"}} },
  ];
}

// ============================================================
// INIT
// ============================================================
function initApp() {
  initMap();
  // Auto-enable day/night terminator after map is ready
  setTimeout(() => toggleTerminator(true), 1400);
  initCompass();
  initLocationPresets();
  fetchLaunches();
  fetchWeather();
  fetchISS();
  loadIntensity();  // Apply saved display intensity (default MED)
  loadFontScale();  // Apply saved text size (default MED)
  loadVolume();     // Sync volume buttons (gain applied on initAudio)
  fetchGLSSLaunchCount(); // Fetch total DB launch count for header
  // Style history tab on load
  const _histTab = document.getElementById('history-tab');
  if (_histTab && !PRO_UNLOCKED) {
    _histTab.style.opacity = '0.5';
    _histTab.innerHTML = 'HISTORY 🔒';
  }
  // Populate version display in settings footer
  try {
    const verEl = document.getElementById('lw-ver-num');
    const buildEl = document.getElementById('lw-build-time');
    if (verEl && LW_BUILD?.version) verEl.textContent = LW_BUILD.version;
    if (buildEl && LW_BUILD?.buildTime) buildEl.textContent = LW_BUILD.buildTime;
    const sbBuild = document.getElementById('sb-build-ver');
    if (sbBuild && LW_BUILD?.version) sbBuild.textContent = LW_BUILD.version + ' · ' + (LW_BUILD.buildTime || '');
  } catch(e) {}
  initVesselTracking();
  initPrefs();
  setInterval(fetchISS, 10000);
  // Refresh arc every 60s to update dead reckoning position in real time
  setInterval(() => {
    // Find the currently selected/next imminent launch
    const now = new Date();
    const active = allLaunches?.find(l => {
      const minsUntil = (new Date(l.window_start||l.net) - now) / 60000;
      return minsUntil > -120 && minsUntil < 360; // T-2hr to T+6hr window
    });
    if (active) {
      // Update mission lifecycle state
      updateMissionLifecycle(active);
      const assignedName = active.vessel_assigned;
      if (assignedName && AIS_DARK_STATE[assignedName]?.darkDeclaredAt) {
        drawLaunchArc(active); // redraw with updated DR position
        log('DR: arc refreshed -- ' + assignedName + ' ghost advancing', 'info');
      }
    }
    // Also check in-recovery launches even if not the active one
    (allLaunches||[]).filter(l => isInRecovery(l) && l !== active)
      .forEach(l => updateMissionLifecycle(l));
  }, 60000);
  setInterval(fetchWeather, 300000);
  // v2.39 Patch DD (2026-04-25) -- adaptive AIS poll cadence.
  // Default: 1hr (matches VesselFinder API tier + ingest-vessels schedule).
  // Within T-6h of any imminent launch: 5min.
  // Within T-1h to T+1h: 1min.
  // Post T+1h: back to 1hr.
  // Same VesselFinder budget at low cadence; only spends extra calls during
  // the launch-window where we actually need real-time data.
  function _computeAisPollDelayMs() {
    let nearestDelta = Infinity;
    if (typeof allLaunches !== 'undefined' && Array.isArray(allLaunches)) {
      const now = Date.now();
      for (const l of allLaunches) {
        const netStr = l && (l.net || l.window_start);
        if (!netStr) continue;
        const net = new Date(netStr).getTime();
        if (!Number.isFinite(net)) continue;
        const delta = net - now;
        // Include 1h post-launch window in "imminent" consideration.
        if (delta > -3600000 && Math.abs(delta) < Math.abs(nearestDelta)) {
          nearestDelta = delta;
        }
      }
    }
    const absDelta = Math.abs(nearestDelta);
    if (absDelta < 60 * 60 * 1000)       return 60 * 1000;        // <T-1h or post-launch ≤1h: 1 min
    if (absDelta < 6  * 60 * 60 * 1000)  return 5 * 60 * 1000;    // T-6h to T-1h: 5 min
    return 60 * 60 * 1000;                                         // default: 1hr
  }
  function _scheduleAisPoll() {
    const delay = _computeAisPollDelayMs();
    setTimeout(async function () {
      try { await updateVesselPositions(); } catch (e) { /* poll error -- try again next tick */ }
      _scheduleAisPoll();  // reschedule based on current launch proximity
    }, delay);
  }
  _scheduleAisPoll();  // kick off the adaptive cycle
  initMobileDrawer();
  applyMobileLayout();
  setTimeout(() => applyPackCopy(currentPack), 800);

  // Close settings panel on outside click
  document.addEventListener('click', (e) => {
    const panel = document.getElementById('settings-panel');
    const btn = document.getElementById('settings-btn');
    if (panel && panel.classList.contains('open') &&
        !panel.contains(e.target) && e.target !== btn) {
      panel.classList.remove('open');
    }
  });
  log('G.L.S.S. ONLINE -- GLOBAL LAUNCH SURVEILLANCE SYSTEM v1.2', 'alert');
  log('OBSERVER STATION: KENNEDY SPACE CENTER FL 28.39°N 80.61°W', 'alert');
  log('SHALL WE PLAY A GAME?');
  // ── Pro-Beta Wall (v2.57) ─ resolves instantly if bot/already passed ──
  // initApp() is not async -- use .then() so no await needed
  _walledOpen().then(function() {
    // Show audio unlock prompt after wall resolves
    setTimeout(function() {
      const au = document.getElementById('audio-unlock');
      if (au && !audioUnlocked) {
        au.style.display = '';
        au.classList.remove('hidden');
      }
    }, 400);
  });
}

// PRO-BETA WALL JS -- LaunchWatch v2.57
// ============================================================
(function() {
  const _WALL_FLAG    = 'lw_wall_passed';
  const _WALL_VERSION = 'v1';
  const _CRAWLER_RE   = /(googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot|sogou|exabot|facebot|facebookexternalhit|twitterbot|linkedinbot|slackbot|discordbot|telegrambot|applebot|whatsapp|embedly|quora link preview|skypeuripreview|nuzzel|bitlybot|redditbot|outbrain|vkshare|w3c_validator)/i;
  let _wallTgEnabled  = true;
  let _wallResolve    = null;

  function _walledIsBot()    { return _CRAWLER_RE.test(navigator.userAgent || ''); }
  function _walledIsPassed() { try { return localStorage.getItem(_WALL_FLAG) === _WALL_VERSION; } catch(_) { return false; } }
  function _walledMarkPassed() {
    try {
      localStorage.setItem(_WALL_FLAG, _WALL_VERSION);
      localStorage.setItem('lw_wall_passed_at', new Date().toISOString());
    } catch(_) {}
  }

  window._walledOpen = function() {
    return new Promise(function(resolve) {
      if (_walledIsBot() || _walledIsPassed()) { resolve(); return; }
      _wallResolve = resolve;
      const overlay = document.getElementById('lw-wall-overlay');
      if (overlay) overlay.style.display = 'flex';
      document.addEventListener('keydown', _walledKeydown);
      setTimeout(function() {
        const el = document.getElementById('lw-wall-email');
        if (el) el.focus();
      }, 400);
    });
  };

  window._walledToggleTg = function() {
    _wallTgEnabled = !_wallTgEnabled;
    const t = document.getElementById('lw-wall-tg-toggle');
    if (t) { t.classList.toggle('on', _wallTgEnabled); t.setAttribute('aria-checked', String(_wallTgEnabled)); }
  };

  window._walledSubmit = function(e) {
    e.preventDefault();
    _walledClearError();
    const emailVal = (document.getElementById('lw-wall-email') || {}).value || '';
    const btn      = document.getElementById('lw-wall-submit');
    if (!emailVal.trim()) { _walledShowError('EMAIL REQUIRED -- ENTER YOUR ADDRESS TO CONTINUE'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(emailVal.trim())) { _walledShowError('INVALID EMAIL FORMAT -- CHECK AND RETRY'); return; }
    if (btn) { btn.disabled = true; btn.classList.add('lw-wall-loading'); btn.innerHTML = '<span class="lw-wall-spinner"></span>TRANSMITTING...'; }
    fetch('/.netlify/functions/beta-signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: emailVal.trim(), telegram_optin: _wallTgEnabled, source: 'wall', signup_at: new Date().toISOString() })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (data && data.ok === false && data.error === 'duplicate') {
        if (btn) { btn.disabled = false; btn.classList.remove('lw-wall-loading'); btn.textContent = '▷ REQUEST ACCESS'; }
        _walledShowError("LOOKS LIKE YOU'RE ALREADY ON THE LIST -- CHECK YOUR INBOX");
        return;
      }
      _walledMarkPassed();
      _walledShowSuccess(_wallTgEnabled);
    })
    .catch(function() {
      if (btn) { btn.disabled = false; btn.classList.remove('lw-wall-loading'); btn.textContent = '▷ REQUEST ACCESS'; }
      _walledShowError('CONNECTION ERROR -- CHECK YOUR NETWORK AND RETRY');
    });
  };

  window._walledContinue = function() {
    var overlay = document.getElementById('lw-wall-overlay');
    if (overlay) { overlay.classList.add('lw-wall-fading'); }
    document.removeEventListener('keydown', _walledKeydown);
    setTimeout(function() {
      if (overlay) overlay.style.display = 'none';
      if (overlay) overlay.classList.remove('lw-wall-fading');
      if (_wallResolve) { _wallResolve(); _wallResolve = null; }
    }, 600);
  };

  function _walledShowSuccess(tgOptIn) {
    var formWrap = document.getElementById('lw-wall-form-wrap');
    var success  = document.getElementById('lw-wall-success');
    var msg      = document.getElementById('lw-wall-success-msg');
    if (formWrap) { formWrap.style.transition = 'opacity 0.25s'; formWrap.style.opacity = '0'; }
    setTimeout(function() {
      if (formWrap) formWrap.style.display = 'none';
      if (msg) msg.innerHTML = tgOptIn ? 'RECEIVING TRANSMISSION...<br>Pro-Beta + Telegram alerts confirmed.' : 'RECEIVING TRANSMISSION...<br>Check your inbox for confirmation.';
      if (success) success.style.display = 'flex';
    }, 250);
  }

  function _walledShowError(msg) {
    var el = document.getElementById('lw-wall-error');
    var inp = document.getElementById('lw-wall-email');
    if (el) { el.textContent = msg; el.style.display = 'block'; }
    if (inp) inp.classList.add('lw-wall-invalid');
  }

  function _walledClearError() {
    var el = document.getElementById('lw-wall-error');
    var inp = document.getElementById('lw-wall-email');
    if (el) { el.textContent = ''; el.style.display = 'none'; }
    if (inp) inp.classList.remove('lw-wall-invalid');
  }

  function _walledKeydown(e) {
    var overlay = document.getElementById('lw-wall-overlay');
    if (!overlay || overlay.style.display === 'none') return;
    if (e.key === 'Escape') { e.preventDefault(); return; } // hard wall -- no ESC dismiss
    if (e.key === 'Tab') {
      var modal = document.getElementById('lw-wall-modal');
      if (!modal) return;
      var focusable = Array.from(modal.querySelectorAll('button:not([disabled]),input,[tabindex="0"]')).filter(function(el){ return el.offsetParent !== null; });
      if (!focusable.length) return;
      var first = focusable[0], last = focusable[focusable.length - 1];
      if (e.shiftKey) { if (document.activeElement === first) { last.focus(); e.preventDefault(); } }
      else            { if (document.activeElement === last)  { first.focus(); e.preventDefault(); } }
    }
  }
})();
// /PRO-BETA WALL JS

// Boot trigger -- multiple safety nets to ensure runBoot always fires
let _bootFired = false;
function _safeBoot() {
  if (_bootFired) return;
  _bootFired = true;
  runBoot();
}
if (document.fonts) {
  document.fonts.ready.then(() => setTimeout(_safeBoot, 200));
} else {
  setTimeout(_safeBoot, 300);
}
// Hard fallback -- if fonts.ready never fires, boot after 800ms
setTimeout(_safeBoot, 3500); // Hard fallback -- enough time for fonts

// ============================================================
// AUDIO ENGINE -- Web Audio API, all synthesized
// ============================================================
// ============================================================
// THEME & SOUND PACK SYSTEM
// ============================================================
let currentTheme = 'blue';
let currentPack = 'wargames';

// ── Audio globals ──
let audioCtx = null;
let isMuted = false;
let masterGain = null;
let ambientDroneNode = null;
let ambientDroneGain = null;
let radarInterval = null;
let audioUnlocked = false;

// ── Vessel globals ──
var vesselMarkers = [];
let vesselTrails = [];
let vesselPositions = {};

// ── Theme registry ──
const MOVIE_THEMES = {
  wargames:    { colorTheme: 'blue',        soundPack: 'wargames',    themeCard: 'blue'  },
  redalert:    { colorTheme: 'red',         soundPack: 'redalert',    themeCard: 'red'   },
  whitephosphor: { colorTheme: 'white',     soundPack: 'wargames',    themeCard: 'white' },
  greenphosphor: { colorTheme: 'green',     soundPack: 'wargames',    themeCard: 'green' },
  akira:       { colorTheme: 'akira',       soundPack: 'akira',       themeCard: null   },
  tron:        { colorTheme: 'tron',        soundPack: 'tron',        themeCard: null   },
  knightrider: { colorTheme: 'knightrider', soundPack: 'knightrider', themeCard: null   },
  airwolf:     { colorTheme: 'airwolf',     soundPack: 'airwolf',     themeCard: null   },
  matrix:      { colorTheme: 'matrix',      soundPack: 'matrix',      themeCard: null   },
  hal9000:     { colorTheme: 'hal9000',     soundPack: 'hal9000',     themeCard: null   },
  hackers:     { colorTheme: 'hackers',     soundPack: 'hackers',     themeCard: null   },
  bladerunner: { colorTheme: 'bladerunner', soundPack: 'bladerunner', themeCard: null   },
  aliens:      { colorTheme: 'aliens',      soundPack: 'aliens',      themeCard: null   },
  c64:         { colorTheme: 'c64',         soundPack: 'c64',         themeCard: null   },
  nes:         { colorTheme: 'nes',         soundPack: 'nes',         themeCard: null   },
  gameboy:     { colorTheme: 'gameboy',     soundPack: 'gameboy',     themeCard: null   },
  genesis:     { colorTheme: 'genesis',     soundPack: 'genesis',     themeCard: null   },
  atari:       { colorTheme: 'atari',       soundPack: 'atari',       themeCard: null   },
  amiga:       { colorTheme: 'amiga',       soundPack: 'amiga',       themeCard: null   },
};

// ============================================================
// THEME MAP OVERLAY SYSTEM
// Original SVG art in each theme's visual language
// ============================================================

function clearThemeOverlay() {
  const el = document.getElementById('theme-overlay');
  if (!el) return;
  el._generation = (el._generation || 0) + 1; // kills all stale spawn loops
  el.className = '';
  el.innerHTML = '';
  el.style.opacity = '0';
  el.style.maskImage = '';
  el.style.webkitMaskImage = '';
  if (el._tronAnimFrame) { cancelAnimationFrame(el._tronAnimFrame); el._tronAnimFrame = null; }
}

function introThenAmbient(el, ambientOpacity = 0.13) {
  el.style.setProperty('--ambient-opacity', ambientOpacity);
  // Wrap all children in overlay-content div for the fade
  const content = document.createElement('div');
  content.className = 'overlay-content';
  content.style.opacity = '1';
  while (el.firstChild) content.appendChild(el.firstChild);
  el.appendChild(content);
  // Phase 1: slam in
  requestAnimationFrame(() => {
    el.classList.add('intro');
    // Phase 2: after 2.2s hold, fade content to ambient
    setTimeout(() => {
      el.classList.remove('intro');
      el.classList.add('ambient');
    }, 2200);
  });
}

function setThemeOverlay(theme) {
  const el = document.getElementById('theme-overlay');
  if (!el) return;
  clearThemeOverlay();
  if (theme === 'akira')       buildAkiraOverlay(el);
  if (theme === 'tron')        buildTronOverlay(el);
  if (theme === 'knightrider') buildKnightRiderOverlay(el);
  if (theme === 'airwolf')     buildAirwolfOverlay(el);
  if (theme === 'matrix')      buildMatrixOverlay(el);
  if (theme === 'hal9000')     buildHALOverlay(el);
  if (theme === 'hackers')     buildHackersOverlay(el);
  if (theme === 'bladerunner') buildBladeRunnerOverlay(el);
  if (theme === 'aliens')      buildAliensOverlay(el);
  if (theme === 'c64')         buildC64Overlay(el);
  if (theme === 'nes')         buildNESOverlay(el);
  if (theme === 'gameboy')     buildGameBoyOverlay(el);
  if (theme === 'genesis')     buildGenesisOverlay(el);
  if (theme === 'atari')       buildAtariOverlay(el);
  if (theme === 'amiga')       buildAmigaOverlay(el);
  // Apply mask after a tick so overlay has dimensions
  setTimeout(() => { if (window._updateOverlayMask) window._updateOverlayMask(); }, 80);
}

function buildAkiraOverlay(el) {
  el.classList.add('akira-overlay');
  el.style.opacity = '1';

  // Static content in a wrapper that fades -- kanji stay at root level
  const staticWrap = document.createElement('div');
  staticWrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  // ── Horizontal scan bars ──
  [22, 38, 62, 78].forEach(pct => {
    const bar = document.createElement('div');
    bar.className = 'akira-scanbar';
    bar.style.top = pct + '%';
    staticWrap.appendChild(bar);
  });

  // ── Speed lines ──
  for (let i = 0; i < 18; i++) {
    const line = document.createElement('div');
    line.className = 'akira-speedline';
    const angle = -18 + (i * 2.8);
    const width = 180 + Math.random() * 280;
    line.style.cssText = `bottom:${8+i*3.5}%;left:0;width:${width}px;transform:rotate(${angle}deg);opacity:${0.06+Math.random()*0.10};`;
    staticWrap.appendChild(line);
  }

  // ── SVG motorcycle ──
  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 420 180');
  svg.style.cssText = 'position:absolute;bottom:60px;left:20px;width:320px;height:140px;filter:drop-shadow(0 0 8px rgba(255,45,0,0.6));';
  svg.innerHTML = `<style>.ak{stroke:#FF2D00;stroke-width:1.2;fill:none}.ak-fill{stroke:#FF2D00;stroke-width:0.8;fill:rgba(255,45,0,0.06)}.ak-dot{fill:#FF2D00}.ak-text{fill:#FF2D00;font-family:'VT323',monospace;font-size:9px;letter-spacing:2px}</style>
    <ellipse class="ak" cx="88" cy="128" rx="44" ry="44"/><ellipse class="ak" cx="88" cy="128" rx="36" ry="36"/><ellipse class="ak" cx="88" cy="128" rx="6" ry="6"/>
    <line class="ak" x1="88" y1="84" x2="88" y2="172"/><line class="ak" x1="44" y1="128" x2="132" y2="128"/><line class="ak" x1="57" y1="97" x2="119" y2="159"/><line class="ak" x1="119" y1="97" x2="57" y2="159"/>
    <ellipse class="ak" cx="332" cy="130" rx="38" ry="38"/><ellipse class="ak" cx="332" cy="130" rx="31" ry="31"/><ellipse class="ak" cx="332" cy="130" rx="5" ry="5"/>
    <line class="ak" x1="332" y1="92" x2="332" y2="168"/><line class="ak" x1="294" y1="130" x2="370" y2="130"/><line class="ak" x1="305" y1="103" x2="359" y2="157"/><line class="ak" x1="359" y1="103" x2="305" y2="157"/>
    <line class="ak" x1="132" y1="84" x2="294" y2="92"/><line class="ak" x1="132" y1="84" x2="140" y2="128"/><line class="ak" x1="200" y1="78" x2="210" y2="128"/><line class="ak" x1="140" y1="128" x2="88" y2="128"/><line class="ak" x1="88" y1="110" x2="200" y2="78"/>
    <line class="ak" x1="294" y1="92" x2="332" y2="92"/><line class="ak" x1="300" y1="92" x2="332" y2="128"/><line class="ak" x1="294" y1="95" x2="332" y2="131"/>
    <path class="ak-fill" d="M 200 78 Q 260 48 310 60 L 294 92 L 210 88 Z"/>
    <ellipse class="ak" cx="305" cy="76" rx="10" ry="7"/><ellipse class="ak-dot" cx="305" cy="76" rx="3" ry="2.5"/>
    <path class="ak-fill" d="M 140 84 Q 180 60 240 68 L 240 88 Q 180 80 150 90 Z"/>
    <line class="ak" x1="132" y1="118" x2="88" y2="124"/><line class="ak" x1="130" y1="116" x2="86" y2="122"/>
    <line class="ak" x1="200" y1="78" x2="240" y2="52"/><ellipse class="ak" cx="243" cy="46" rx="9" ry="9"/>
    <line class="ak" x1="243" y1="54" x2="285" y2="72"/><line class="ak" x1="200" y1="78" x2="185" y2="100"/>
    <text class="ak-text" x="88" y="20">UNIT-01</text><text class="ak-text" x="88" y="32">VEL: ∞ KM/H</text>
    <polyline class="ak" points="6,6 6,22 22,22"/><polyline class="ak" points="414,6 414,22 398,22"/><polyline class="ak" points="6,174 6,158 22,158"/><polyline class="ak" points="414,174 414,158 398,158"/>`;
  staticWrap.appendChild(svg);

  const bl = document.createElement('div');
  bl.className = 'akira-corner-bl';
  bl.innerHTML = `NEO-TOKYO SURVEILLANCE GRID<br>LAUNCH TRACKING: ACTIVE<br>危険区域 / DANGER ZONE<br>座標確認中 / ACQUIRING...`;
  staticWrap.appendChild(bl);
  const tr2 = document.createElement('div');
  tr2.className = 'akira-corner-tr';
  tr2.innerHTML = `軌道監視システム<br>ORBITAL WATCH SYS<br>SECTOR: PACIFIC<br>STATUS: 追跡中`;
  staticWrap.appendChild(tr2);

  el.appendChild(staticWrap);

  // ── Standard fade: hold 2.2s then fade to 15% ambient ──
  staticWrap.style.transition = 'opacity 2.5s ease';
  staticWrap.style.opacity = '1';
  setTimeout(() => { staticWrap.style.opacity = '0.15'; }, 2200);

  // ── Kanji appended to root el so they're NOT inside the fading wrapper ──
  const KANJI = ['危','爆','力','炎','崩','壊','衝','撃','爆','破','警','戒'];
  const myGen = el._generation || 0;
  function spawnKanji() {
    if ((el._generation || 0) !== myGen) return;
    const k = document.createElement('div');
    const size = 28 + Math.floor(Math.random() * 52);
    k.textContent = KANJI[Math.floor(Math.random() * KANJI.length)];
    k.style.cssText = `position:absolute;font-family:'VT323',monospace;font-size:${size}px;
      color:rgba(255,20,0,0.9);text-shadow:0 0 12px rgba(255,0,0,0.8);
      left:${5+Math.random()*88}%;top:${5+Math.random()*80}%;
      pointer-events:none;z-index:10;transition:opacity 0.08s ease;opacity:0;`;
    el.appendChild(k);
    requestAnimationFrame(() => { k.style.opacity = (0.5+Math.random()*0.5).toString(); });
    const flickers = 1 + Math.floor(Math.random() * 3);
    let f = 0;
    const flick = setInterval(() => {
      k.style.opacity = f%2===0 ? '0.1' : (0.4+Math.random()*0.5).toString();
      f++;
      if (f >= flickers*2) { clearInterval(flick); k.style.transition='opacity 0.4s ease'; k.style.opacity='0'; setTimeout(()=>{ if(k.parentNode) k.remove(); },450); }
    }, 80);
    setTimeout(spawnKanji, 1200 + Math.random() * 3000);
  }
  setTimeout(spawnKanji, 800);
}

// ============================================================
// TRON OVERLAY -- Animated Light Cycle Grid Traces
// ============================================================
function buildTronOverlay(el) {
  // ── Canvas lives OUTSIDE the overlay-content wrapper so it stays at full opacity ──
  const canvas = document.createElement('canvas');
  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:2;';
  el.appendChild(canvas);

  // Static SVG + text (these go INTO the overlay-content wrapper via introThenAmbient)
  const staticWrap = document.createElement('div');
  staticWrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';
  svg.innerHTML = `
    <style>
      .tg{stroke:#00FFFF;fill:none;stroke-width:1.1}
      .tg-b{stroke:#00FFFF;stroke-width:1.8;fill:none}
      .tg-d{stroke:#005555;fill:none;stroke-width:0.6}
      .tt{fill:#00FFFF;font-family:'VT323',monospace;font-size:11px;letter-spacing:2px}
      .tt-d{fill:#004444;font-family:'VT323',monospace;font-size:9px;letter-spacing:1px}
    </style>
    <rect class="tg-d" x="660" y="20" width="80" height="120"/>
    <rect class="tg" x="680" y="30" width="40" height="8"/>
    <rect class="tg-d" x="672" y="44" width="56" height="4"/>
    <rect class="tg-d" x="672" y="54" width="56" height="4"/>
    <rect class="tg-d" x="672" y="64" width="56" height="4"/>
    <rect class="tg-d" x="672" y="74" width="56" height="4"/>
    <rect class="tg-d" x="672" y="84" width="56" height="4"/>
    <rect class="tg-d" x="672" y="94" width="56" height="4"/>
    <rect class="tg-b" x="694" y="106" width="12" height="22"/>
    <polyline class="tg" points="8,8 8,28 28,28"/>
    <polyline class="tg" points="792,8 792,28 772,28"/>
    <polyline class="tg" points="8,492 8,472 28,472"/>
    <polyline class="tg" points="792,492 792,472 772,472"/>
    <line class="tg-d" x1="0" y1="380" x2="800" y2="380"/>
    <line class="tg-d" x1="0" y1="420" x2="800" y2="420"/>
    <line class="tg-d" x1="0" y1="460" x2="800" y2="460"/>
    <line class="tg-d" x1="400" y1="340" x2="0"   y2="500" stroke-opacity="0.4"/>
    <line class="tg-d" x1="400" y1="340" x2="133" y2="500" stroke-opacity="0.4"/>
    <line class="tg-d" x1="400" y1="340" x2="267" y2="500" stroke-opacity="0.4"/>
    <line class="tg-d" x1="400" y1="340" x2="400" y2="500" stroke-opacity="0.4"/>
    <line class="tg-d" x1="400" y1="340" x2="533" y2="500" stroke-opacity="0.4"/>
    <line class="tg-d" x1="400" y1="340" x2="667" y2="500" stroke-opacity="0.4"/>
    <line class="tg-d" x1="400" y1="340" x2="800" y2="500" stroke-opacity="0.4"/>
    <text class="tt" x="40" y="18">GRID SECTOR 7G</text>
    <text class="tt-d" x="40" y="460">TRAJECTORY: LOCKED</text>
    <text class="tt" x="560" y="460">END OF LINE</text>
    <text class="tt-d" x="560" y="472">PROGRAM: ACTIVE</text>
    <text class="tt-d" x="40" y="472">MCP SURVEILLANCE: ONLINE</text>
  `;
  staticWrap.appendChild(svg);

  const tr = document.createElement('div');
  tr.style.cssText = 'position:absolute;top:60px;right:14px;color:rgba(0,255,255,0.9);font-family:"VT323",monospace;font-size:0.68rem;letter-spacing:0.1em;line-height:1.8;text-align:right;';
  tr.innerHTML = 'GRID SURVEILLANCE<br>MCP MONITORING<br>USER: ACTIVE<br>CYCLES: TRACKED';
  staticWrap.appendChild(tr);

  const bl = document.createElement('div');
  bl.style.cssText = 'position:absolute;bottom:72px;left:14px;color:rgba(0,255,255,0.9);font-family:"VT323",monospace;font-size:0.68rem;letter-spacing:0.1em;line-height:1.8;';
  bl.innerHTML = 'ORBITAL GRID: ONLINE<br>LAUNCH VECTOR: COMPUTED<br>IDENTITY DISC: ARMED';
  staticWrap.appendChild(bl);

  el.appendChild(staticWrap);

  // ── ANIMATION ENGINE ──
  const GRID_SIZE = 40;
  const CYAN = '#00FFFF';
  const CYAN_DIM = '#004444';

  function snap(v) { return Math.round(v / GRID_SIZE) * GRID_SIZE; }
  const DX = [1, 0, -1, 0];
  const DY = [0, 1, 0, -1];

  function makeCycle(w, h) {
    // Start from edges, all 4 directions allowed
    const dir = Math.floor(Math.random() * 4);
    let x, y;
    if (dir === 0) { x = 0;   y = snap(GRID_SIZE + Math.random() * (h - GRID_SIZE * 2)); }
    else if (dir === 1) { x = snap(GRID_SIZE + Math.random() * (w - GRID_SIZE * 2)); y = 0; }
    else if (dir === 2) { x = w;  y = snap(GRID_SIZE + Math.random() * (h - GRID_SIZE * 2)); }
    else               { x = snap(GRID_SIZE + Math.random() * (w - GRID_SIZE * 2)); y = h; }
    return { x, y, dir, trail: [], segStart: {x, y},
      speed: GRID_SIZE * (1.2 + Math.random() * 1.0),
      turnCooldown: GRID_SIZE * (2 + Math.floor(Math.random() * 5)),
      distSinceTurn: 0, alive: true,
      brightness: 0.75 + Math.random() * 0.25,
      color: CYCLE_COLORS[Math.floor(Math.random() * CYCLE_COLORS.length)] };
  }

  let cycles = [];
  let lastTime = null;
  let spawnTimer = 0;
  let w = 800, h = 500;

  function spawnCycle() { cycles.push(makeCycle(w, h)); }

  function drawGrid(ctx) {
    ctx.strokeStyle = CYAN_DIM;
    ctx.globalAlpha = 0.18;
    ctx.lineWidth = 0.5;
    for (let x = 0; x <= w; x += GRID_SIZE) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,h); ctx.stroke(); }
    for (let y = 0; y <= h; y += GRID_SIZE) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke(); }
    ctx.globalAlpha = 1;
  }


  // ── CYCLE COLORS -- different programs ──
  const CYCLE_COLORS = ['#00FFFF', '#00FFCC', '#00CCFF', '#AAFFFF'];

  // ── WALL SEGMENTS -- persistent, slowly fading ──
  // { x1,y1,x2,y2, color, born (timestamp), ttl }
  let walls = [];
  const WALL_TTL = 9000; // ms walls persist before gone

  function drawWalls(ctx, now) {
    walls.forEach(wall => {
      const age = now - wall.born;
      const life = 1 - age / wall.ttl;
      if (life <= 0) return;
      // Bright core + outer glow fading together
      ctx.strokeStyle = wall.color;
      ctx.lineWidth = 1.5;
      ctx.globalAlpha = life * 0.7;
      ctx.shadowColor = wall.color;
      ctx.shadowBlur = 6 * life;
      ctx.beginPath(); ctx.moveTo(wall.x1, wall.y1); ctx.lineTo(wall.x2, wall.y2); ctx.stroke();
    });
    ctx.shadowBlur = 0; ctx.globalAlpha = 1;
    // Prune expired walls
    walls = walls.filter(wall => (now - wall.born) < wall.ttl);
  }

  // ── DEATH FLASHES -- explosion blooms when a cycle hits a wall ──
  let flashes = [];
  function drawFlashes(ctx, now) {
    flashes.forEach(f => {
      const age = now - f.born;
      const life = 1 - age / 400;
      if (life <= 0) return;
      ctx.fillStyle = f.color;
      ctx.globalAlpha = life * 0.9;
      ctx.shadowColor = f.color;
      ctx.shadowBlur = 24 * life;
      ctx.beginPath(); ctx.arc(f.x, f.y, (1-life) * 20 + 2, 0, Math.PI*2); ctx.fill();
    });
    ctx.shadowBlur = 0; ctx.globalAlpha = 1;
    flashes = flashes.filter(f => (now - f.born) < 400);
  }

  // ── COLLISION CHECK -- does segment [x1,y1→x2,y2] cross any wall? ──
  function segmentsIntersect(ax1,ay1,ax2,ay2, bx1,by1,bx2,by2) {
    const d1x=ax2-ax1, d1y=ay2-ay1, d2x=bx2-bx1, d2y=by2-by1;
    const cross = d1x*d2y - d1y*d2x;
    if (Math.abs(cross) < 0.001) return false;
    const t = ((bx1-ax1)*d2y - (by1-ay1)*d2x) / cross;
    const u = ((bx1-ax1)*d1y - (by1-ay1)*d1x) / cross;
    return t > 0.05 && t < 0.95 && u > 0.05 && u < 0.95;
  }

  function checkCollision(cycle) {
    // Current head segment
    const hx1=cycle.segStart.x, hy1=cycle.segStart.y, hx2=cycle.x, hy2=cycle.y;
    // Check against all persistent walls
    for (const wall of walls) {
      if (segmentsIntersect(hx1,hy1,hx2,hy2, wall.x1,wall.y1,wall.x2,wall.y2)) return true;
    }
    // Check against other cycles' committed trail segments (not own last 3)
    for (const other of cycles) {
      if (other === cycle || !other.alive) continue;
      for (const seg of other.trail) {
        if (segmentsIntersect(hx1,hy1,hx2,hy2, seg.x1,seg.y1,seg.x2,seg.y2)) return true;
      }
    }
    // Check own trail (skip last 2 segments -- just laid)
    for (let i=0; i < cycle.trail.length-2; i++) {
      const seg = cycle.trail[i];
      if (segmentsIntersect(hx1,hy1,hx2,hy2, seg.x1,seg.y1,seg.x2,seg.y2)) return true;
    }
    return false;
  }

  function killCycle(cycle, now) {
    cycle.alive = false;
    flashes.push({ x: cycle.x, y: cycle.y, color: cycle.color, born: now });
    // Commit all trail segments to persistent walls
    cycle.trail.forEach(seg => {
      walls.push({ ...seg, color: cycle.color, born: now, ttl: WALL_TTL });
    });
    // Also commit the current partial segment
    walls.push({ x1: cycle.segStart.x, y1: cycle.segStart.y, x2: cycle.x, y2: cycle.y,
      color: cycle.color, born: now, ttl: WALL_TTL });
  }

  function drawTrail(ctx, trail, brightness, color) {
    if (trail.length === 0) return;
    trail.forEach((seg, i) => {
      const alpha = ((i + 1) / trail.length) * brightness * 0.95;
      ctx.strokeStyle = color;
      ctx.globalAlpha = Math.min(alpha, 1);
      ctx.lineWidth = 1.5 + (i / trail.length) * 1.0;
      ctx.shadowColor = color;
      ctx.shadowBlur = 3 + 8 * (i / trail.length);
      ctx.beginPath(); ctx.moveTo(seg.x1, seg.y1); ctx.lineTo(seg.x2, seg.y2); ctx.stroke();
    });
    ctx.shadowBlur = 0; ctx.globalAlpha = 1;
  }

  function tick(ts) {
    if (!el.isConnected) return;

    const actualW = el.offsetWidth || 800;
    const actualH = el.offsetHeight || 500;
    if (canvas.width !== actualW || canvas.height !== actualH) {
      canvas.width = actualW; canvas.height = actualH;
      w = actualW; h = actualH;
      cycles = []; walls = []; flashes = [];
      for (let i = 0; i < 4; i++) spawnCycle();
    }

    if (!lastTime) lastTime = ts;
    const dt = Math.min((ts - lastTime) / 1000, 0.05);
    lastTime = ts;
    spawnTimer += dt;

    const ctx = canvas.getContext('2d');
    const now = performance.now();
    ctx.clearRect(0, 0, w, h);
    drawGrid(ctx);
    drawWalls(ctx, now);
    drawFlashes(ctx, now);

    // Spawn replacement cycles
    if (spawnTimer > 1.8 && cycles.filter(c => c.alive).length < 5) {
      spawnCycle(); spawnTimer = 0;
    }

    cycles = cycles.filter(c => c.alive);

    cycles.forEach(cycle => {
      const step = cycle.speed * dt;
      cycle.distSinceTurn += step;
      cycle.x += DX[cycle.dir] * step;
      cycle.y += DY[cycle.dir] * step;

      // Turn decision
      if (cycle.distSinceTurn >= cycle.turnCooldown) {
        cycle.x = snap(cycle.x); cycle.y = snap(cycle.y);
        cycle.trail.push({ x1: cycle.segStart.x, y1: cycle.segStart.y, x2: cycle.x, y2: cycle.y });
        cycle.segStart = { x: cycle.x, y: cycle.y };
        const turns = [(cycle.dir + 1) % 4, (cycle.dir + 3) % 4];
        cycle.dir = turns[Math.floor(Math.random() * 2)];
        cycle.distSinceTurn = 0;
        cycle.turnCooldown = GRID_SIZE * (2 + Math.floor(Math.random() * 5));
      }

      // Out of bounds -- silent death, no wall persistence
      if (cycle.x < -GRID_SIZE*2 || cycle.x > w+GRID_SIZE*2 || cycle.y < -GRID_SIZE*2 || cycle.y > h+GRID_SIZE*2) {
        cycle.alive = false; return;
      }

      // Collision check
      if (checkCollision(cycle)) { killCycle(cycle, now); return; }

      // Draw live trail
      const currentSeg = { x1: cycle.segStart.x, y1: cycle.segStart.y, x2: cycle.x, y2: cycle.y };
      drawTrail(ctx, [...cycle.trail, currentSeg], cycle.brightness, cycle.color);

      // Head glow
      ctx.fillStyle = '#FFFFFF';
      ctx.globalAlpha = cycle.brightness;
      ctx.shadowColor = cycle.color;
      ctx.shadowBlur = 18;
      ctx.beginPath(); ctx.arc(cycle.x, cycle.y, 3.5, 0, Math.PI*2); ctx.fill();
      ctx.shadowBlur = 0; ctx.globalAlpha = 1;
    });

    el._tronAnimFrame = requestAnimationFrame(tick);
  }

  // ── Start animation after a short delay so the overlay is in DOM and sized ──
  setTimeout(() => {
    el._tronAnimFrame = requestAnimationFrame(tick);
  }, 50);

  // ── introThenAmbient only affects the static SVG wrapper, NOT the canvas ──
  // We manually do the intro/ambient for the overlay container
  el.style.opacity = '1';
  // staticWrap fades: intro full → ambient dim
  staticWrap.style.transition = 'opacity 2.5s ease';
  staticWrap.style.opacity = '1';
  setTimeout(() => { staticWrap.style.opacity = '0.15'; }, 2200);
  // Canvas itself stays at a fixed ambient opacity (cycles are already subtle)
  canvas.style.opacity = '1';
  canvas.style.transition = 'opacity 2.5s ease';
  setTimeout(() => { canvas.style.opacity = '0.55'; }, 2200);
}

// ============================================================
// KNIGHT RIDER OVERLAY -- K.I.T.T.
// ============================================================
function buildKnightRiderOverlay(el) {
  el.style.transition = 'opacity 1s ease';

  // ── Scanner bar -- lives at root, never fades ──
  const scanner = document.createElement('div');
  scanner.style.cssText = `
    position:absolute; top:0; bottom:0; width:120px;
    background:linear-gradient(to right, transparent, rgba(255,40,0,0.10), rgba(255,60,0,0.32), rgba(255,40,0,0.10), transparent);
    box-shadow: 0 0 35px rgba(255,51,0,0.22), inset 0 0 18px rgba(255,0,0,0.08);
    pointer-events:none; z-index:10;
    animation: kittScan 2.2s ease-in-out infinite;
  `;
  el.appendChild(scanner);

  if (!document.getElementById('kitt-scan-kf')) {
    const s = document.createElement('style'); s.id = 'kitt-scan-kf';
    s.textContent = `@keyframes kittScan {
      0%   { left: -120px; }
      46%  { left: calc(100% + 120px); }
      50%  { left: calc(100% + 120px); }
      96%  { left: -120px; }
      100% { left: -120px; }
    }`;
    document.head.appendChild(s);
  }

  const staticWrap = document.createElement('div');
  staticWrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', '0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';

  svg.innerHTML = `
    <style>
      .k  { stroke:#CC2200; fill:none; stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round; }
      .kb { stroke:#FF3300; fill:none; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
      .kf { stroke:#CC2200; fill:rgba(255,51,0,0.05); stroke-width:0.9; stroke-linejoin:round; }
      .kh { stroke:#FF3300; fill:rgba(255,51,0,0.10); stroke-width:1.1; stroke-linejoin:round; }
      .kd { stroke:rgba(204,34,0,0.4); fill:none; stroke-width:0.6; stroke-dasharray:4,3; }
      .kc { stroke:rgba(204,34,0,0.22); fill:none; stroke-width:0.5; stroke-dasharray:2,2; }
      .kt { fill:rgba(255,51,0,0.9);  font-family:'Share Tech Mono',monospace; font-size:7px; letter-spacing:1.4px; }
      .ks { fill:rgba(204,34,0,0.7);  font-family:'Share Tech Mono',monospace; font-size:6px; letter-spacing:1px; }
      .kx { fill:rgba(255,51,0,0.95); font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px; font-weight:bold; }
      .kdd{ fill:rgba(204,34,0,0.55); font-family:'Share Tech Mono',monospace; font-size:5.5px; letter-spacing:0.8px; }
    </style>

    <defs>
      <marker id="karr" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
        <path d="M0,0 L5,2.5 L0,5 Z" fill="rgba(255,51,0,0.65)"/>
      </marker>
      <marker id="karr2" markerWidth="5" markerHeight="5" refX="0" refY="2.5" orient="auto">
        <path d="M5,0 L0,2.5 L5,5 Z" fill="rgba(255,51,0,0.65)"/>
      </marker>
    </defs>

    <!-- DRAWING BORDER -->
    <rect x="3" y="3" width="794" height="494" fill="none" stroke="rgba(255,51,0,0.4)" stroke-width="0.8"/>
    <rect x="7" y="7" width="786" height="486" fill="none" stroke="rgba(204,34,0,0.2)" stroke-width="0.5"/>

    <!-- TOP BANNER -->
    <rect x="3" y="3" width="794" height="16" fill="rgba(255,51,0,0.06)"/>
    <text class="kx" x="400" y="14" text-anchor="middle" style="font-size:8px;letter-spacing:4px;">KNIGHT INDUSTRIES · VEHICLE TECHNICAL SPECIFICATION · CLASSIFIED</text>

    <!-- BOTTOM BANNER -->
    <rect x="3" y="481" width="794" height="16" fill="rgba(255,51,0,0.06)"/>
    <text class="ks" x="12"  y="492">MICHAEL KNIGHT · FIELD OPERATIVE · FOUNDATION FOR LAW AND GOVERNMENT</text>
    <text class="ks" x="650" y="492">STATUS: PURSUIT MODE ACTIVE</text>

    <!-- TITLE BLOCK -- bottom right -->
    <rect x="598" y="410" width="196" height="69" fill="rgba(0,0,0,0.35)" stroke="rgba(204,34,0,0.5)" stroke-width="0.7"/>
    <line class="kc" x1="598" y1="424" x2="794" y2="424"/>
    <line class="kc" x1="598" y1="436" x2="794" y2="436"/>
    <line class="kc" x1="598" y1="448" x2="794" y2="448"/>
    <line class="kc" x1="598" y1="460" x2="794" y2="460"/>
    <line class="kc" x1="598" y1="471" x2="794" y2="471"/>
    <line class="kc" x1="700" y1="424" x2="700" y2="481"/>
    <text class="kdd" x="602" y="420">DRAWING NO.</text>
    <text class="kt"  x="602" y="432">KI-2000-GA-001</text>
    <text class="kdd" x="602" y="442">DESCRIPTION</text>
    <text class="kt"  x="602" y="455">K.I.T.T. -- KNIGHT INDUSTRIES</text>
    <text class="kt"  x="602" y="463">TWO THOUSAND · SIDE ELEVATION</text>
    <text class="kdd" x="602" y="473">CLASSIFICATION: TOP SECRET</text>
    <text class="kdd" x="704" y="420">SCALE</text>
    <text class="kt"  x="704" y="432">1:12</text>
    <text class="kdd" x="704" y="442">REV</text>
    <text class="kt"  x="704" y="452">D</text>
    <text class="kdd" x="704" y="462">SHEET 1/1</text>

    <!-- SPECS TABLE -- right margin -->
    <rect x="598" y="22" width="196" height="280" fill="rgba(0,0,0,0.25)" stroke="rgba(204,34,0,0.4)" stroke-width="0.7"/>
    <text class="kx" x="696" y="34" text-anchor="middle" style="font-size:7px;">K.I.T.T. SYSTEMS DATA</text>
    <line class="kc" x1="598" y1="37" x2="794" y2="37"/>
    <line class="kc" x1="700" y1="37" x2="700" y2="302"/>
    <text class="kdd" x="601" y="45">SYSTEM</text>
    <text class="kdd" x="703" y="45">SPEC</text>
    <line class="kc" x1="598" y1="48" x2="794" y2="48"/>
    ${[
      ['BASE VEHICLE','1982 TRANS AM'],
      ['POWERPLANT','KNI TURBO V8'],
      ['OUTPUT','CLASSIFIED'],
      ['0-60 MPH','0.2 SEC'],
      ['TOP SPEED','300+ MPH'],
      ['TURBO BOOST','40 FT VERT'],
      ['SHELL TYPE','MOL. BONDED'],
      ['SHELL HARDNESS','CLASSIFIED'],
      ['SCANNER FREQ','INFRARED/UV'],
      ['SCANNER SWEEP','2.2 SEC/PASS'],
      ['VOICE SYNTH','KARR-DERIVED'],
      ['AI PROCESSOR','KNI CORE MK4'],
      ['FUEL TYPE','EXPERIMENTAL'],
      ['RANGE','UNLIMITED'],
      ['GRAPPLING','REAR MOUNTED'],
      ['COMM RANGE','GLOBAL SAT'],
      ['OIL SLICK','REAR NOZZLE'],
      ['IFFRIG SYSTEM','ACTIVE'],
      ['SEAT','EJECT CAPABLE'],
      ['CREW','1 OPERATIVE'],
    ].map(([k,v],i) => {
      const y = 57 + i*12;
      const even = i%2===0;
      return `
        ${even ? `<rect x="598" y="${y-8}" width="196" height="12" fill="rgba(255,51,0,0.03)"/>` : ''}
        <text class="kdd" x="601" y="${y}">${k}</text>
        <text class="kt"  x="703" y="${y}">${v}</text>
        <line class="kc" x1="598" y1="${y+3}" x2="794" y2="${y+3}"/>
      `;
    }).join('')}

    <!-- ═══════════════════════════════════════════════════
         KITT SIDE PROFILE -- main drawing, center stage
         1982 Pontiac Trans Am -- precise silhouette
         ═══════════════════════════════════════════════════ -->

    <!-- Ground reference + waterlines -->
    <line class="kd" x1="20" y1="390" x2="592" y2="390"/>
    <text class="kdd" x="22" y="388">GROUND LINE</text>
    <line class="kc" x1="20" y1="330" x2="592" y2="330"/>
    <text class="kdd" x="22" y="328">WL 24.0</text>
    <line class="kc" x1="20" y1="270" x2="592" y2="270"/>
    <text class="kdd" x="22" y="268">WL 48.0</text>

    <!-- Station lines -->
    <line class="kc" x1="88"  y1="22" x2="88"  y2="430"/>
    <text class="kdd" x="88"  y="436" text-anchor="middle">FS 0</text>
    <line class="kc" x1="175" y1="22" x2="175" y2="430"/>
    <text class="kdd" x="175" y="436" text-anchor="middle">FS 36</text>
    <line class="kc" x1="310" y1="22" x2="310" y2="430"/>
    <text class="kdd" x="310" y="436" text-anchor="middle">FS 96</text>
    <line class="kc" x1="445" y1="22" x2="445" y2="430"/>
    <text class="kdd" x="445" y="436" text-anchor="middle">FS 160</text>
    <line class="kc" x1="532" y1="22" x2="532" y2="430"/>
    <text class="kdd" x="532" y="436" text-anchor="middle">FS 192</text>

    <!-- REAR WHEEL -- 15" rim, Firebird proportions -->
    <ellipse class="kb" cx="138" cy="362" rx="38" ry="38"/>
    <ellipse class="k"  cx="138" cy="362" rx="26" ry="26"/>
    <ellipse class="k"  cx="138" cy="362" rx="10" ry="10"/>
    <ellipse class="k"  cx="138" cy="362" rx="4"  ry="4"/>
    <!-- Spoke detail -- 5 spoke wheel -->
    ${[0,72,144,216,288].map(a => {
      const r = a*Math.PI/180;
      const x1 = 138 + 10*Math.cos(r), y1 = 362 + 10*Math.sin(r);
      const x2 = 138 + 26*Math.cos(r), y2 = 362 + 26*Math.sin(r);
      return `<line class="k" x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}"/>`;
    }).join('')}

    <!-- FRONT WHEEL -- slightly smaller visual due to perspective angle -->
    <ellipse class="kb" cx="465" cy="365" rx="36" ry="36"/>
    <ellipse class="k"  cx="465" cy="365" rx="25" ry="25"/>
    <ellipse class="k"  cx="465" cy="365" rx="9"  ry="9"/>
    <ellipse class="k"  cx="465" cy="365" rx="3.5" ry="3.5"/>
    ${[0,72,144,216,288].map(a => {
      const r = a*Math.PI/180;
      const x1 = 465 + 9*Math.cos(r), y1 = 365 + 9*Math.sin(r);
      const x2 = 465 + 25*Math.cos(r), y2 = 365 + 25*Math.sin(r);
      return `<line class="k" x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}"/>`;
    }).join('')}

    <!-- MAIN BODY -- Trans Am wedge profile -->
    <!-- Lower body sill / rocker -->
    <path class="kf" d="M 176 324 L 430 324 L 430 332 L 176 332 Z"/>
    <!-- Rear quarter panel + trunk -->
    <path class="kf" d="
      M 92  302 Q 96  296 106 293
      L 176 290 L 176 332
      L 92  332 Q 88  326 88  314
      Z"/>
    <!-- Main door / cabin section -->
    <path class="kf" d="
      M 176 254 L 350 248 L 430 290 L 430 324 L 176 324 Z"/>
    <!-- Front hood -- long, low slope -->
    <path class="kf" d="
      M 430 290 L 430 304
      L 518 310 L 524 294
      Q 506 278 480 270
      L 430 266 L 430 290
      Z"/>
    <!-- Front fascia / bumper -->
    <path class="kf" d="
      M 518 294 L 540 298 Q 548 302 548 312
      L 548 324 Q 548 332 540 334
      L 518 334 L 518 310 Z"/>

    <!-- ROOFLINE -- Trans Am fastback -->
    <path class="kb" d="M 176 254 Q 210 228 248 218 L 334 214 Q 368 214 390 222 L 430 248 L 430 266"/>
    <!-- Rear window line -->
    <path class="k"  d="M 176 254 Q 183 260 190 264 L 176 290"/>
    <!-- Rear C-pillar -->
    <line class="kb" x1="176" y1="254" x2="176" y2="290"/>

    <!-- WINDSCREEN -- steeply raked Trans Am glass -->
    <path class="kh" d="M 390 222 L 430 248 L 430 266 L 380 258 Z"/>
    <!-- Windscreen center divider -->
    <line class="k" x1="410" y1="235" x2="405" y2="263"/>
    <!-- Side glass -- DLO -->
    <path class="kh" d="M 248 218 L 336 214 Q 362 215 380 222 L 380 258 L 270 260 Z"/>
    <!-- Rear quarter glass -->
    <path class="k" d="M 210 232 L 248 218 L 248 256 L 210 258 Z"/>
    <!-- A-pillar -->
    <line class="kb" x1="430" y1="248" x2="430" y2="290"/>

    <!-- SCANNER BAR -- the signature front grille feature -->
    <rect class="kb" x="540" y="304" width="12"  height="24" rx="1"/>
    <!-- Scanner LED cells -- 3 cells visible in side profile -->
    <rect class="kh" x="542" y="306" width="8" height="6" rx="0"/>
    <rect class="k"  x="542" y="314" width="8" height="6" rx="0"/>
    <rect class="kh" x="542" y="322" width="8" height="4" rx="0"/>
    <!-- Nose tip -->
    <path class="kb" d="M 548 298 Q 560 306 562 314 Q 560 322 548 328 L 548 298"/>

    <!-- Front lower air dam -->
    <path class="k" d="M 518 334 L 540 338 Q 556 340 560 336 L 560 344 L 518 342 Z"/>

    <!-- Hood vents -- NACA style -->
    <path class="k" d="M 460 272 Q 466 268 474 268 L 474 280 Q 466 282 460 280 Z"/>
    <path class="k" d="M 476 271 Q 482 267 490 267 L 490 279 Q 482 281 476 279 Z"/>

    <!-- Door handle recess -->
    <rect class="k" x="286" y="284" width="32" height="6" rx="1"/>

    <!-- Side exhaust / rocker molding detail -->
    <line class="kb" x1="176" y1="330" x2="430" y2="328"/>
    <line class="k"  x1="176" y1="333" x2="430" y2="331"/>

    <!-- Rear bumper / valance -->
    <path class="k" d="M 88 314 Q 82 318 80 326 L 80 338 Q 82 344 88 344 L 92 344"/>
    <path class="k" d="M 88 302 Q 84 296 84 290 L 92 288"/>

    <!-- Rear spoiler / air foil -- Trans Am T-top style -->
    <line class="kb" x1="106" y1="290" x2="90" y2="290"/>
    <line class="k"  x1="90"  y1="290" x2="88" y2="300"/>
    <!-- Rear diffuser hint -->
    <path class="k" d="M 88 344 L 100 354 L 176 352 L 176 344"/>

    <!-- ── DIMENSION LINES ── -->
    <!-- Overall length -->
    <line style="stroke:rgba(255,51,0,0.45);fill:none;stroke-width:0.6;" marker-end="url(#karr)" marker-start="url(#karr2)" x1="80" y1="456" x2="562" y2="456"/>
    <rect x="268" y="450" width="68" height="9" fill="rgba(0,0,8,0.8)"/>
    <text class="kdd" x="302" y="458" text-anchor="middle">192.1 IN OVERALL</text>

    <!-- Wheelbase -->
    <line style="stroke:rgba(204,34,0,0.4);fill:none;stroke-width:0.6;" marker-end="url(#karr)" marker-start="url(#karr2)" x1="138" y1="446" x2="465" y2="446"/>
    <rect x="262" y="440" width="48" height="9" fill="rgba(0,0,8,0.8)"/>
    <text class="kdd" x="286" y="448" text-anchor="middle">108.1 IN WB</text>

    <!-- Overall height -->
    <line style="stroke:rgba(204,34,0,0.4);fill:none;stroke-width:0.6;" marker-end="url(#karr)" marker-start="url(#karr2)" x1="34" y1="214" x2="34" y2="390"/>
    <text class="kdd" x="36" y="306">47.8 IN</text>

    <!-- ── CALLOUT LEADER LINES ── -->
    <!-- Scanner bar -->
    <line class="kd" x1="546" y1="308" x2="560" y2="258"/>
    <text class="kt"  x="562" y="250">FRONT SCANNER MODULE</text>
    <text class="kdd" x="562" y="258">INFRARED / UV SWEEP · 2.2 SEC</text>

    <!-- Molecular bonded shell -->
    <line class="kd" x1="310" y1="248" x2="310" y2="200"/>
    <text class="kt"  x="240" y="194">MOLECULAR BONDED SHELL</text>
    <text class="kdd" x="240" y="202">IMPERVIOUS TO CONVENTIONAL WEAPONS</text>

    <!-- Roofline / T-tops -->
    <line class="kd" x1="290" y1="218" x2="290" y2="178"/>
    <text class="kt"  x="180" y="172">T-TOP REMOVABLE ROOF</text>
    <text class="kdd" x="180" y="180">POLYCARBONATE TINT · SOLAR CHARGING</text>

    <!-- Rear spoiler -->
    <line class="kd" x1="92" y1="288" x2="60" y2="248"/>
    <text class="kt"  x="14" y="244">REAR SPOILER</text>
    <text class="kdd" x="14" y="252">ACTIVE AERO · DOWNFORCE</text>

    <!-- Turbo boost exhausts -->
    <line class="kd" x1="176" y1="344" x2="160" y2="400"/>
    <text class="kt"  x="100" y="414">TURBO BOOST NOZZLE</text>
    <text class="kdd" x="100" y="422">40 FT VERTICAL · 100 FT HORIZONTAL</text>

    <!-- Wheel callout -->
    <line class="kd" x1="138" y1="324" x2="110" y2="285"/>
    <text class="kt"  x="14" y="282">WHEEL: 15 × 8 IN</text>
    <text class="kdd" x="14" y="290">PUNCTURE-PROOF COMPOUND</text>

    <!-- Front engine callout -->
    <line class="kd" x1="480" y1="280" x2="510" y2="248"/>
    <text class="kt"  x="512" y="244">KNI TURBO POWERPLANT</text>
    <text class="kdd" x="512" y="252">OUTPUT: CLASSIFIED · FUEL: EXPERIMENTAL</text>

    <!-- Hood vents -->
    <line class="kd" x1="474" y1="268" x2="474" y2="230"/>
    <text class="kt"  x="430" y="226">NACA HOOD VENTS</text>
  `;

  staticWrap.appendChild(svg);
  el.appendChild(staticWrap);

  el.style.opacity = '1';
  staticWrap.style.transition = 'opacity 2.5s ease';
  staticWrap.style.opacity = '1';
  setTimeout(() => { staticWrap.style.opacity = '0.14'; }, 2200);
  scanner.style.transition = 'opacity 2.5s ease';
  setTimeout(() => { scanner.style.opacity = '0.7'; }, 2200);
}

// ============================================================
// BLADE RUNNER OVERLAY -- 2019 · LOS ANGELES
// Acid rain columns · neon kanji · city silhouette · Vangelis
// ============================================================
function buildBladeRunnerOverlay(el) {
  el.style.opacity = '1';
  const gen = el._generation;

  const canvas = document.createElement('canvas');
  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;';
  canvas.width  = el.offsetWidth  || 800;
  canvas.height = el.offsetHeight || 500;
  el.appendChild(canvas);

  const W = canvas.width, H = canvas.height;
  const ctx = canvas.getContext('2d');

  // City skyline silhouette -- procedural buildings
  const rng = (seed) => { let x = Math.sin(seed)*10000; return x - Math.floor(x); };
  const skyline = [];
  let bx = 0;
  for (let i = 0; i < 60; i++) {
    const w = 18 + rng(i*3+1) * 30;
    const h = 40 + rng(i*3+2) * 140;
    skyline.push({ x: bx, w, h });
    bx += w + rng(i*3+3) * 6;
  }

  // Kanji/katakana characters for neon signs
  const KANJI = '電気人工知能未来都市警察複製人間捜査官夜雨霧ネオン光速退職';
  const SIGNS = Array.from({length: 12}, (_, i) => ({
    x: 40 + rng(i*7+1) * (W - 120),
    y: H * 0.25 + rng(i*7+2) * H * 0.45,
    chars: Array.from({length: 2+Math.floor(rng(i*7+3)*3)}, (_, j) =>
      KANJI[Math.floor(rng(i*7+j+10) * KANJI.length)]
    ).join(''),
    color: [`rgba(255,60,0,`, `rgba(255,140,0,`, `rgba(255,30,80,`, `rgba(200,80,255,`][Math.floor(rng(i*7+4)*4)],
    size: 14 + rng(i*7+5) * 18,
    blink: 0.5 + rng(i*7+6) * 3,
  }));

  // Rain columns
  const COLS = Math.floor(W / 14);
  const drops = Array.from({length: COLS}, (_, i) => ({
    y:     rng(i*11+7) * H,
    speed: 2.5 + rng(i*11+8) * 5,
    len:   8  + rng(i*11+9) * 20,
    alpha: 0.15 + rng(i*11+10) * 0.35,
  }));

  let frame = 0;
  const globalOpacity = 1; // No fade -- full scene always visible

  function draw() {
    if (el._generation !== gen) return;
    frame++;
    // fade removed -- city stays visible

    ctx.clearRect(0,0,W,H);
    ctx.globalAlpha = globalOpacity;

    // ── City silhouette ──
    ctx.fillStyle = 'rgba(8,2,0,0.55)';
    skyline.forEach(b => {
      ctx.fillRect(b.x % W, H - b.h, b.w - 1, b.h);
    });

    // Building windows -- tiny amber/orange lights
    skyline.forEach((b, i) => {
      const bxx = b.x % W;
      for (let wy = H - b.h + 6; wy < H - 8; wy += 10) {
        for (let wx = bxx + 3; wx < bxx + b.w - 4; wx += 8) {
          if (rng(i*100+wy+wx) > 0.55) continue;
          const bright = 0.3 + rng(i+wy+wx*0.1) * 0.5;
          const warm = rng(i+wy*0.3) > 0.7;
          ctx.fillStyle = warm
            ? `rgba(255,${120+Math.floor(bright*80)},20,${bright * 0.7})`
            : `rgba(255,${60+Math.floor(bright*60)},0,${bright * 0.5})`;
          ctx.fillRect(wx, wy, 4, 5);
        }
      }
    });

    // ── Neon signs -- kanji ──
    SIGNS.forEach(s => {
      const flicker = Math.sin(frame * s.blink * 0.08) > -0.3 ? 1 : 0.15;
      ctx.globalAlpha = globalOpacity * flicker * 0.72;
      ctx.font = `bold ${s.size}px serif`;
      ctx.fillStyle = s.color + '0.85)';
      ctx.shadowColor = s.color + '0.6)';
      ctx.shadowBlur = 12;
      ctx.fillText(s.chars, s.x, s.y);
      // Reflection below -- blurred, short
      ctx.globalAlpha = globalOpacity * flicker * 0.18;
      ctx.save();
      ctx.scale(1, -0.3);
      ctx.fillStyle = s.color + '0.4)';
      ctx.fillText(s.chars, s.x, -(s.y + s.size * 0.5));
      ctx.restore();
    });
    ctx.shadowBlur = 0;

    // ── Acid rain ──
    ctx.globalAlpha = globalOpacity;
    drops.forEach((d, i) => {
      d.y += d.speed;
      if (d.y > H + d.len * 8) d.y = -d.len * 8;
      const x = i * 14 + (rng(i+frame*0.01) - 0.5) * 3;

      // Rain streak -- gradient from transparent to amber tip
      const grad = ctx.createLinearGradient(x, d.y - d.len*8, x, d.y);
      grad.addColorStop(0, 'rgba(255,100,0,0)');
      grad.addColorStop(0.7, `rgba(255,120,20,${d.alpha * 0.4})`);
      grad.addColorStop(1,   `rgba(255,180,60,${d.alpha})`);
      ctx.strokeStyle = grad;
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x, d.y - d.len * 8);
      ctx.lineTo(x, d.y);
      ctx.stroke();
    });

    // ── Ambient fog layers ──
    for (let layer = 0; layer < 3; layer++) {
      const fogY = H * (0.3 + layer * 0.18) + Math.sin(frame * 0.005 + layer) * 8;
      const grad = ctx.createLinearGradient(0, fogY - 25, 0, fogY + 25);
      grad.addColorStop(0, 'rgba(60,15,0,0)');
      grad.addColorStop(0.5, `rgba(80,20,0,${0.06 + layer * 0.02})`);
      grad.addColorStop(1, 'rgba(60,15,0,0)');
      ctx.fillStyle = grad;
      ctx.fillRect(0, fogY - 25, W, 50);
    }

    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);
}

// ============================================================
// ALIENS OVERLAY -- LV-426 · COLONIAL MARINES
// Motion tracker sweep · contact blips · tension drone
// ============================================================
function buildAliensOverlay(el) {
  el.style.opacity = '1';
  const gen = el._generation;

  const wrap = document.createElement('div');
  wrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  // ── Static SVG frame -- tracker housing, readouts, marine HUD ──
  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;opacity:0.55;';

  const CX = 580, CY = 230, CR = 160; // tracker center/radius

  svg.innerHTML = `
    <defs>
      <radialGradient id="trackerBg" cx="50%" cy="50%" r="50%">
        <stop offset="0%"   stop-color="rgba(0,30,12,0.55)"/>
        <stop offset="75%"  stop-color="rgba(0,18,7,0.60)"/>
        <stop offset="100%" stop-color="rgba(0,8,3,0.65)"/>
      </radialGradient>
      <radialGradient id="sweepGlow" cx="50%" cy="50%" r="50%">
        <stop offset="0%"   stop-color="rgba(0,255,136,0.0)"/>
        <stop offset="100%" stop-color="rgba(0,255,136,0.0)"/>
      </radialGradient>
      <filter id="trackerBloom">
        <feGaussianBlur stdDeviation="2" result="blur"/>
        <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
      <clipPath id="trackerClip">
        <circle cx="${CX}" cy="${CY}" r="${CR}"/>
      </clipPath>
    </defs>

    <!-- Tracker housing outer rings -->
    <circle cx="${CX}" cy="${CY}" r="${CR+22}" fill="rgba(0,8,3,0.35)" stroke="rgba(0,255,136,0.12)" stroke-width="1"/>
    <circle cx="${CX}" cy="${CY}" r="${CR+14}" fill="none" stroke="rgba(0,255,136,0.22)" stroke-width="1.2"/>
    <circle cx="${CX}" cy="${CY}" r="${CR+6}"  fill="none" stroke="rgba(0,255,136,0.32)" stroke-width="1.5"/>

    <!-- Main tracker face -->
    <circle cx="${CX}" cy="${CY}" r="${CR}" fill="url(#trackerBg)" stroke="rgba(0,255,136,0.38)" stroke-width="2"/>

    <!-- Concentric range rings -->
    ${[0.25,0.5,0.75,1].map(r =>
      `<circle cx="${CX}" cy="${CY}" r="${CR*r}" fill="none" stroke="rgba(0,255,136,${r===1?0.45:0.18})" stroke-width="${r===1?1.2:0.7}" stroke-dasharray="${r<1?'4 6':'none'}"/>`
    ).join('')}

    <!-- Cross-hairs -->
    <line x1="${CX-CR}" y1="${CY}" x2="${CX+CR}" y2="${CY}" stroke="rgba(0,255,136,0.18)" stroke-width="0.7"/>
    <line x1="${CX}" y1="${CY-CR}" x2="${CX}" y2="${CY+CR}" stroke="rgba(0,255,136,0.18)" stroke-width="0.7"/>
    <!-- Diagonal cross at 45° -->
    <line x1="${CX-CR*0.707}" y1="${CY-CR*0.707}" x2="${CX+CR*0.707}" y2="${CY+CR*0.707}" stroke="rgba(0,255,136,0.09)" stroke-width="0.5"/>
    <line x1="${CX+CR*0.707}" y1="${CY-CR*0.707}" x2="${CX-CR*0.707}" y2="${CY+CR*0.707}" stroke="rgba(0,255,136,0.09)" stroke-width="0.5"/>

    <!-- Center dot -->
    <circle cx="${CX}" cy="${CY}" r="3.5" fill="rgba(0,255,136,0.8)" filter="url(#trackerBloom)"/>
    <circle cx="${CX}" cy="${CY}" r="1.5" fill="#00FF88"/>

    <!-- Range labels -->
    ${['10m','20m','30m'].map((label,i) =>
      `<text x="${CX + CR*(i+1)*0.25 + 4}" y="${CY - 3}" fill="rgba(0,255,136,0.35)"
        font-family="'Share Tech Mono',monospace" font-size="7" letter-spacing="0.5">${label}</text>`
    ).join('')}

    <!-- Degree markers around bezel -->
    ${Array.from({length:36},(_,i) => {
      const a = (i*10 - 90) * Math.PI / 180;
      const r1 = CR+6, r2 = i%9===0 ? CR+14 : CR+10;
      return `<line x1="${(CX+Math.cos(a)*r1).toFixed(1)}" y1="${(CY+Math.sin(a)*r1).toFixed(1)}"
                    x2="${(CX+Math.cos(a)*r2).toFixed(1)}" y2="${(CY+Math.sin(a)*r2).toFixed(1)}"
                    stroke="rgba(0,255,136,${i%9===0?0.5:0.22})" stroke-width="${i%9===0?1.2:0.7}"/>`;
    }).join('')}

    <!-- Cardinal labels -->
    <text x="${CX}" y="${CY-CR-18}" text-anchor="middle" fill="rgba(0,255,136,0.55)" font-family="'Share Tech Mono',monospace" font-size="8" letter-spacing="1">N</text>
    <text x="${CX+CR+20}" y="${CY+3}" text-anchor="middle" fill="rgba(0,255,136,0.55)" font-family="'Share Tech Mono',monospace" font-size="8">E</text>
    <text x="${CX}" y="${CY+CR+24}" text-anchor="middle" fill="rgba(0,255,136,0.55)" font-family="'Share Tech Mono',monospace" font-size="8">S</text>
    <text x="${CX-CR-18}" y="${CY+3}" text-anchor="middle" fill="rgba(0,255,136,0.55)" font-family="'Share Tech Mono',monospace" font-size="8">W</text>

    <!-- Left panel -- marine HUD data -->
    <text x="28" y="44" fill="rgba(0,255,136,0.65)" font-family="'Share Tech Mono',monospace" font-size="8" letter-spacing="3">USCSS SULACO</text>
    <text x="28" y="57" fill="rgba(0,255,136,0.38)" font-family="'Share Tech Mono',monospace" font-size="7" letter-spacing="2">COLONIAL MARINES · 2179.04.26</text>
    <line x1="28" y1="64" x2="220" y2="64" stroke="rgba(0,255,136,0.18)" stroke-width="0.6"/>

    ${[
      ['UNIT',         'ALPHA SQUAD'],
      ['STATUS',       'COMBAT READY'],
      ['DROPSHIP',     'CHEYENNE · APC'],
      ['LZ',           'LV-426 HADLEYS'],
      ['CONTACTS',     '██ TRACKING'],
      ['AMMO',         '95 / 100'],
      ['O2 REMAINING', '04:22:17'],
      ['THREAT LEVEL', 'EXTREME'],
    ].map(([k,v],i) => {
      const y = 80 + i*18;
      const red = v.includes('EXTREME') || v.includes('██');
      return `
        <text x="28"  y="${y}" fill="rgba(0,200,100,0.45)" font-family="'Share Tech Mono',monospace" font-size="6.5" letter-spacing="1.5">${k}</text>
        <text x="180" y="${y}" fill="${red?'rgba(255,80,0,0.85)':'rgba(0,255,136,0.75)'}" font-family="'Share Tech Mono',monospace" font-size="6.5" letter-spacing="1" text-anchor="end">${v}</text>
        <line x1="28" y1="${y+4}" x2="185" y2="${y+4}" stroke="rgba(0,255,136,0.07)" stroke-width="0.5"/>
      `;
    }).join('')}

    <!-- Bottom left -- famous quote -->
    <text x="28" y="448" fill="rgba(0,255,136,0.30)" font-family="'Share Tech Mono',monospace" font-size="7" letter-spacing="1.5" font-style="italic">They mostly come at night... mostly.</text>
    <text x="28" y="462" fill="rgba(0,200,100,0.22)" font-family="'Share Tech Mono',monospace" font-size="6.5" letter-spacing="1">-- NEWT · LV-426 SURVIVOR · ALIENS · JAMES CAMERON · 1986</text>
  `;

  wrap.appendChild(svg);

  // ── Animated tracker sweep canvas ──
  const canvas = document.createElement('canvas');
  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;';
  canvas.width  = el.offsetWidth  || 800;
  canvas.height = el.offsetHeight || 500;
  wrap.appendChild(canvas);

  const ctx = canvas.getContext('2d');
  const scaleX = canvas.width  / 800;
  const scaleY = canvas.height / 500;

  // Contact blips -- random positions within tracker radius
  const rng = (s) => { let x = Math.sin(s)*10000; return x - Math.floor(x); };
  const contacts = Array.from({length: 7}, (_, i) => {
    const angle  = rng(i*13+1) * Math.PI * 2;
    const dist   = 0.25 + rng(i*13+2) * 0.68;
    return {
      x:      CX + Math.cos(angle) * CR * dist,
      y:      CY + Math.sin(angle) * CR * dist,
      angle,
      dist,
      alpha:  0,          // fades in as sweep passes
      size:   2.5 + rng(i*13+3) * 3,
    };
  });

  let sweepAngle = -Math.PI / 2; // start at top
  let frame = 0;
  let globalOpacity = 1;
  const SWEEP_SPEED = 0.022; // radians per frame

  function draw() {
    if (el._generation !== gen) return;
    frame++;
    if (frame > 160) globalOpacity = Math.max(0.08, globalOpacity - 0.004);

    sweepAngle += SWEEP_SPEED;
    if (sweepAngle > Math.PI * 2 - Math.PI/2) sweepAngle -= Math.PI * 2;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.scale(scaleX, scaleY);
    ctx.globalAlpha = globalOpacity;

    // Clip to tracker circle
    ctx.save();
    ctx.beginPath();
    ctx.arc(CX, CY, CR, 0, Math.PI*2);
    ctx.clip();

    // Sweep trail -- green wedge fading behind sweep line
    const TRAIL = Math.PI * 0.55;
    for (let i = 0; i < 40; i++) {
      const a = sweepAngle - (TRAIL / 40) * i;
      const alpha = (1 - i/40) * 0.18 * globalOpacity;
      ctx.beginPath();
      ctx.moveTo(CX, CY);
      ctx.arc(CX, CY, CR, a - TRAIL/40, a);
      ctx.closePath();
      ctx.fillStyle = `rgba(0,255,136,${alpha})`;
      ctx.fill();
    }

    // Sweep line
    ctx.beginPath();
    ctx.moveTo(CX, CY);
    ctx.lineTo(
      CX + Math.cos(sweepAngle) * CR,
      CY + Math.sin(sweepAngle) * CR
    );
    ctx.strokeStyle = `rgba(0,255,136,${0.85 * globalOpacity})`;
    ctx.lineWidth = 2;
    ctx.shadowColor = 'rgba(0,255,136,0.6)';
    ctx.shadowBlur = 8;
    ctx.stroke();
    ctx.shadowBlur = 0;

    // Update contact blip alphas -- brighten when sweep passes over them
    contacts.forEach(c => {
      const cAngle = Math.atan2(c.y - CY, c.x - CX);
      const normalizedSweep = sweepAngle % (Math.PI*2);
      const normalizedContact = ((cAngle % (Math.PI*2)) + Math.PI*2) % (Math.PI*2);
      const diff = ((normalizedSweep - normalizedContact + Math.PI*2) % (Math.PI*2));
      if (diff < 0.08) {
        c.alpha = 1.0; // sweep just passed -- illuminate
      } else {
        c.alpha = Math.max(0, c.alpha - 0.012); // decay
      }
    });

    // Draw contact blips
    contacts.forEach(c => {
      if (c.alpha < 0.02) return;
      ctx.beginPath();
      ctx.arc(c.x, c.y, c.size, 0, Math.PI*2);
      ctx.fillStyle = `rgba(0,255,136,${c.alpha * globalOpacity})`;
      ctx.shadowColor = 'rgba(0,255,136,0.8)';
      ctx.shadowBlur = c.size * 4;
      ctx.fill();
      ctx.shadowBlur = 0;
      // Outer ring on strong contacts
      if (c.alpha > 0.3) {
        ctx.beginPath();
        ctx.arc(c.x, c.y, c.size + 4, 0, Math.PI*2);
        ctx.strokeStyle = `rgba(0,255,136,${c.alpha * 0.4 * globalOpacity})`;
        ctx.lineWidth = 1;
        ctx.stroke();
      }
    });

    ctx.restore(); // end clip

    ctx.restore();
    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);
  el.appendChild(wrap);
}

// ============================================================
// HACKERS OVERLAY -- 1995 · HACK THE PLANET
// ============================================================
function buildHackersOverlay(el) {
  el.style.opacity = '1';
  const gen = el._generation;

  const wrap = document.createElement('div');
  wrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';

  const SX = 188, SY = 52, SW = 424, SH = 270;

  svg.innerHTML = `
    <defs>
      <radialGradient id="scrGlow" cx="50%" cy="50%" r="55%">
        <stop offset="0%"   stop-color="rgba(51,204,68,0.07)"/>
        <stop offset="100%" stop-color="rgba(0,0,0,0)"/>
      </radialGradient>
    </defs>

    <!-- LAPTOP BASE / PALMREST -->
    <path fill="rgba(28,30,26,0.42)" stroke="rgba(51,204,68,0.14)" stroke-width="1"
      d="M 80 370 Q 80 360 90 358 L 710 358 Q 720 360 720 370 L 728 420 Q 728 428 718 430 L 82 430 Q 72 428 72 420 Z"/>
    <rect x="90" y="362" width="620" height="60" rx="2" fill="rgba(22,24,20,0.36)" stroke="rgba(51,204,68,0.08)" stroke-width="0.7"/>

    <!-- KEYBOARD ROWS -->
    ${[0,1,2,3].map(row => {
      const y = 368 + row*12;
      const keys = row===3 ? 8 : 13;
      const startX = row===3 ? 160 : 100;
      return Array.from({length:keys},(_,i) =>
        `<rect x="${startX+i*32+(row===1?6:0)}" y="${y}" width="26" height="9" rx="1.5" fill="rgba(38,42,34,0.9)" stroke="rgba(51,204,68,0.07)" stroke-width="0.5"/>`
      ).join('');
    }).join('')}

    <!-- TRACKPAD -->
    <rect x="330" y="390" width="140" height="22" rx="3" fill="rgba(32,36,28,0.5)" stroke="rgba(51,204,68,0.12)" stroke-width="0.8"/>
    <rect x="330" y="414" width="68"  height="10" rx="2" fill="rgba(38,42,34,0.9)" stroke="rgba(51,204,68,0.10)" stroke-width="0.5"/>
    <rect x="402" y="414" width="68"  height="10" rx="2" fill="rgba(38,42,34,0.9)" stroke="rgba(51,204,68,0.10)" stroke-width="0.5"/>

    <!-- LID / SCREEN HOUSING -->
    <path fill="rgba(22,24,20,0.46)" stroke="rgba(51,204,68,0.18)" stroke-width="1.2"
      d="M 120 355 L 120 38 Q 120 28 130 26 L 670 26 Q 680 28 680 38 L 680 355 Q 660 362 400 364 Q 140 362 120 355 Z"/>

    <!-- SCREEN BEZEL -->
    <rect x="${SX-8}" y="${SY-8}" width="${SW+16}" height="${SH+16}" rx="4" fill="rgba(8,12,6,0.55)" stroke="rgba(51,204,68,0.10)" stroke-width="0.8"/>
    <!-- SCREEN AREA -->
    <rect x="${SX}" y="${SY}" width="${SW}" height="${SH}" rx="2" fill="rgba(0,8,1,0.82)"/>
    <rect x="${SX}" y="${SY}" width="${SW}" height="${SH}" rx="2" fill="url(#scrGlow)"/>
    <!-- Screen glare -->
    <path fill="rgba(255,255,255,0.022)" d="M ${SX+10} ${SY+8} L ${SX+85} ${SY+8} L ${SX+55} ${SY+38} L ${SX+10} ${SY+38} Z"/>

    <!-- HINGE -->
    <rect x="160" y="352" width="480" height="10" rx="3" fill="rgba(18,20,16,0.5)" stroke="rgba(51,204,68,0.12)" stroke-width="0.8"/>
    <rect x="220" y="354" width="12"  height="6"  rx="1" fill="rgba(44,48,40,0.9)"/>
    <rect x="568" y="354" width="12"  height="6"  rx="1" fill="rgba(44,48,40,0.9)"/>

    <!-- BRAND BADGE -->
    <rect x="630" y="318" width="38" height="24" rx="2" fill="rgba(18,20,16,0.5)" stroke="rgba(51,204,68,0.18)" stroke-width="0.8"/>
    <text x="649" y="333" text-anchor="middle" fill="rgba(51,204,68,0.75)"
      font-family="'Share Tech Mono',monospace" font-size="7.5" letter-spacing="1.5" font-weight="bold">ELiTE</text>

    <!-- STATUS LEDs -->
    <circle cx="668" cy="376" r="3" fill="rgba(51,204,68,0.9)">
      <animate attributeName="opacity" values="0.9;0.25;0.9" dur="1.1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="658" cy="376" r="3" fill="rgba(220,190,0,0.7)">
      <animate attributeName="opacity" values="0.7;0.15;0.7" dur="2.3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="648" cy="376" r="3" fill="rgba(51,204,68,0.45)"/>
    <text x="634" y="390" text-anchor="end" fill="rgba(51,204,68,0.28)"
      font-family="'Share Tech Mono',monospace" font-size="5.5" letter-spacing="1">PWR · HDD · NET</text>
  `;

  wrap.appendChild(svg);

  // ── Terminal canvas ──
  const canvas = document.createElement('canvas');
  canvas.style.cssText = `
    position:absolute;
    left:${(SX/800*100).toFixed(2)}%;
    top:${(SY/500*100).toFixed(2)}%;
    width:${(SW/800*100).toFixed(2)}%;
    height:${(SH/500*100).toFixed(2)}%;
    pointer-events:none;
  `;
  canvas.width  = SW * 2;
  canvas.height = SH * 2;
  wrap.appendChild(canvas);

  const ctx = canvas.getContext('2d');
  ctx.scale(2,2);
  const W = SW, H = SH;
  const FS = 10, LH = 14, PAD = 8;
  const COLS = Math.floor((W - PAD*2) / (FS * 0.615));
  const ROWS = Math.floor((H - PAD*2) / LH);

  const LINES = [
    {t:'dim',  s:'ATZ'},
    {t:'dim',  s:'OK'},
    {t:'dim',  s:'ATDT 1-800-555-0199'},
    {t:'dim',  s:'CONNECT 28800'},
    {t:'dim',  s:''},
    {t:'norm', s:'ELLINGSON MINERAL CO. · UNIX v7.3'},
    {t:'dim',  s:'login: z3r0c00l'},
    {t:'dim',  s:'Password:'},
    {t:'dim',  s:''},
    {t:'norm', s:'$ ls -la /sys/security/'},
    {t:'dim',  s:'total 48'},
    {t:'dim',  s:'drwxr-x--- 2 root sys    512 Sep 14 .'},
    {t:'dim',  s:'-rw-r----- 1 root sys  16384 Sep 12 da_vinci_virus.exe'},
    {t:'warn', s:'-rw-r----- 1 root sys   8192 Sep 14 garbage_file.dat'},
    {t:'dim',  s:''},
    {t:'norm', s:'$ ping 10.0.0.1 -c 4'},
    {t:'dim',  s:'64 bytes from 10.0.0.1: time=4.2ms'},
    {t:'dim',  s:'64 bytes from 10.0.0.1: time=3.9ms'},
    {t:'dim',  s:'64 bytes from 10.0.0.1: time=4.1ms'},
    {t:'dim',  s:''},
    {t:'norm', s:'$ cat /etc/passwd | grep root'},
    {t:'warn', s:'root:x:0:0:root:/root:/bin/bash'},
    {t:'dim',  s:''},
    {t:'norm', s:'$ ./exploit.sh --overflow --target gibson'},
    {t:'head', s:'[*] buffer overflow injected...'},
    {t:'head', s:'[*] escalating privileges...'},
    {t:'warn', s:'[!] TRACE INITIATED -- rerouting...'},
    {t:'head', s:'[*] Tokyo... Johannesburg... Iceland...'},
    {t:'head', s:'[*] ACCESS GRANTED'},
    {t:'dim',  s:''},
    {t:'norm', s:'$ whoami'},
    {t:'head', s:'root'},
    {t:'dim',  s:''},
    {t:'head', s:'HACK THE PLANET'},
    {t:'dim',  s:''},
    {t:'norm', s:'$ _'},
  ];

  // ── Modem boot state ──
  // Phase 0: typing ATZ  1: OK  2: typing ATDT  3: dial tone
  // Phase 4: squeal  5: CONNECT -- then hand off to normal scroll
  let bootDone  = false;
  let bootLines = [];          // lines revealed so far during boot
  let scrollY   = 0;
  let blink     = true;
  let frame     = 0;
  let opacity   = 1;
  let screenFlicker = 0;       // >0 = brief CRT flicker during squeal

  // ── Modem audio helpers (self-contained, no ambientDroneGain) ──
  function modemAudio() {
    if (!window.audioCtx && typeof audioCtx === 'undefined') return;
    const ac  = (typeof audioCtx !== 'undefined' && audioCtx) || window.audioCtx;
    if (!ac) return;
    const mg  = (typeof masterGain !== 'undefined' && masterGain) || ac.destination;
    const t   = ac.currentTime;

    // ATZ double beep -- t+0
    [[0, 900],[0.14, 900]].forEach(([d,f]) => {
      const g = ac.createGain(); g.connect(mg);
      g.gain.setValueAtTime(0.18, t+d);
      g.gain.exponentialRampToValueAtTime(0.0001, t+d+0.09);
      const o = ac.createOscillator(); o.type='square'; o.frequency.value=f;
      const fl = ac.createBiquadFilter(); fl.type='lowpass'; fl.frequency.value=1600;
      o.connect(fl); fl.connect(g); o.start(t+d); o.stop(t+d+0.1);
    });

    // Dial tone 350+440Hz -- t+1.1 to t+2.2
    [[350,0.11],[440,0.11]].forEach(([f,v]) => {
      const g = ac.createGain(); g.connect(mg);
      g.gain.setValueAtTime(0, t+1.1);
      g.gain.linearRampToValueAtTime(v, t+1.18);
      g.gain.setValueAtTime(v, t+2.1);
      g.gain.linearRampToValueAtTime(0, t+2.2);
      const o = ac.createOscillator(); o.type='sine'; o.frequency.value=f;
      o.connect(g); o.start(t+1.1); o.stop(t+2.3);
    });

    // ANS carrier 2100Hz -- t+2.4 to t+2.85
    const cg = ac.createGain(); cg.connect(mg);
    cg.gain.setValueAtTime(0, t+2.4);
    cg.gain.linearRampToValueAtTime(0.13, t+2.46);
    cg.gain.setValueAtTime(0.13, t+2.82);
    cg.gain.linearRampToValueAtTime(0, t+2.88);
    const co = ac.createOscillator(); co.type='sine'; co.frequency.value=2100;
    co.connect(cg); co.start(t+2.4); co.stop(t+2.9);

    // Negotiation squeal -- t+3.0 to t+5.5 -- sweeping chaos
    const sg = ac.createGain(); sg.connect(mg);
    sg.gain.setValueAtTime(0, t+3.0);
    sg.gain.linearRampToValueAtTime(0.22, t+3.08);
    sg.gain.setValueAtTime(0.22, t+5.2);
    sg.gain.exponentialRampToValueAtTime(0.0001, t+5.55);
    const so = ac.createOscillator(); so.type='sawtooth';
    so.frequency.setValueAtTime(1200, t+3.0);
    so.frequency.linearRampToValueAtTime(2400, t+3.4);
    so.frequency.linearRampToValueAtTime(600,  t+3.8);
    so.frequency.linearRampToValueAtTime(3200, t+4.2);
    so.frequency.linearRampToValueAtTime(900,  t+4.6);
    so.frequency.linearRampToValueAtTime(2100, t+5.0);
    so.frequency.linearRampToValueAtTime(1800, t+5.3);
    const sf = ac.createBiquadFilter(); sf.type='bandpass'; sf.frequency.value=2000; sf.Q.value=1.2;
    so.connect(sf); sf.connect(sg); so.start(t+3.0); so.stop(t+5.6);

    // Second squeal voice -- layered for richness
    const sg2 = ac.createGain(); sg2.connect(mg);
    sg2.gain.setValueAtTime(0, t+3.1);
    sg2.gain.linearRampToValueAtTime(0.12, t+3.18);
    sg2.gain.setValueAtTime(0.12, t+5.1);
    sg2.gain.exponentialRampToValueAtTime(0.0001, t+5.5);
    const so2 = ac.createOscillator(); so2.type='square';
    so2.frequency.setValueAtTime(2200, t+3.1);
    so2.frequency.linearRampToValueAtTime(1100, t+3.6);
    so2.frequency.linearRampToValueAtTime(3000, t+4.1);
    so2.frequency.linearRampToValueAtTime(1400, t+4.7);
    so2.frequency.linearRampToValueAtTime(2600, t+5.2);
    const sf2 = ac.createBiquadFilter(); sf2.type='bandpass'; sf2.frequency.value=1800; sf2.Q.value=1.5;
    so2.connect(sf2); sf2.connect(sg2); so2.start(t+3.1); so2.stop(t+5.5);

    // CONNECT click -- sharp confirmation at t+5.6
    const ckg = ac.createGain(); ckg.connect(mg);
    ckg.gain.setValueAtTime(0.22, t+5.65);
    ckg.gain.exponentialRampToValueAtTime(0.0001, t+5.85);
    const cko = ac.createOscillator(); cko.type='square'; cko.frequency.value=440;
    const ckf = ac.createBiquadFilter(); ckf.type='lowpass'; ckf.frequency.value=1400;
    cko.connect(ckf); ckf.connect(ckg); cko.start(t+5.65); cko.stop(t+5.9);
  }

  // ── Boot sequence timeline (ms from overlay start) ──
  const BOOT_EVENTS = [
    { at:  120, line: {t:'dim',  s:'ATZ'} },
    { at:  500, line: {t:'dim',  s:'OK'} },
    { at:  900, line: {t:'dim',  s:'ATDT 1-800-555-0199'} },
    // dial tone plays 1100-2200ms
    { at: 2300, line: {t:'dim',  s:''} },
    // carrier + squeal 2400-5600ms -- screen flicker
    { at: 2500, flicker: true },
    { at: 5700, line: {t:'norm', s:'CONNECT 28800'} },
    { at: 5700, connected: true },   // hand off to ambient
    { at: 6100, line: {t:'dim',  s:''} },
    { at: 6400, line: {t:'norm', s:'ELLINGSON MINERAL CO. · UNIX v7.3'} },
  ];

  let bootStarted = false;

  function kickoffBoot() {
    if (el._generation !== gen) return;
    bootStarted = true;
    modemAudio();

    BOOT_EVENTS.forEach(ev => {
      setTimeout(() => {
        if (el._generation !== gen) return;
        if (ev.line)      bootLines.push(ev.line);
        if (ev.flicker)   screenFlicker = 80;   // frames of flicker
        if (ev.connected) {
          // Hand off -- start the ambient drone if not already running
          if (typeof startAmbientDrone === 'function') {
            try { startAmbientDrone(); } catch(e) {}
          }
          // Small delay then unlock normal scroll
          setTimeout(() => { bootDone = true; }, 800);
        }
      }, ev.at);
    });
  }

  // Kick off boot after a single frame so overlay is painted first
  setTimeout(kickoffBoot, 80);

  function draw() {
    if (el._generation !== gen) return;
    frame++;

    // Fade out after settling
    if (bootDone && frame > 120) opacity = Math.max(0.09, opacity - 0.005);
    if (frame % 28 === 0) blink = !blink;

    // Normal scroll only after boot sequence done
    if (bootDone && frame % 55 === 0 && scrollY < LINES.length - ROWS) scrollY++;

    // CRT flicker during squeal
    const flickerAlpha = screenFlicker > 0
      ? (Math.random() > 0.5 ? 0.85 : 1.0)
      : 1.0;
    if (screenFlicker > 0) screenFlicker--;

    ctx.clearRect(0,0,W,H);
    ctx.save();
    ctx.globalAlpha = flickerAlpha;
    ctx.fillStyle = `rgba(0,8,1,${opacity})`;
    ctx.fillRect(0,0,W,H);

    // CRT scanlines
    for (let y=0; y<H; y+=3) { ctx.fillStyle='rgba(0,0,0,0.30)'; ctx.fillRect(0,y,W,1); }

    ctx.font = `${FS}px 'Share Tech Mono',monospace`;

    // During boot show bootLines; after boot show LINES with scroll
    const visible = bootDone
      ? LINES.slice(scrollY, scrollY+ROWS)
      : bootLines.slice(-ROWS);

    visible.forEach((line,i) => {
      const y = PAD + i*LH + FS;
      const a = opacity;
      ctx.fillStyle =
        line.t==='head' ? `rgba(51,204,68,${a})` :
        line.t==='warn' ? `rgba(255,165,20,${a*0.88})` :
        line.t==='norm' ? `rgba(51,204,68,${a*0.75})` :
                          `rgba(51,204,68,${a*0.35})`;
      ctx.fillText(line.s.slice(0,COLS), PAD, y);
    });

    // Blinking cursor
    if (blink && opacity > 0.12) {
      const last = visible[visible.length-1];
      const cx  = PAD + (last ? ctx.measureText(last.s.slice(0,COLS)).width : 0);
      const cy  = PAD + (visible.length-1) * LH;
      ctx.fillStyle = `rgba(51,204,68,${opacity*0.85})`;
      ctx.fillRect(cx+1, cy, Math.round(FS*0.615), LH-2);
    }

    ctx.restore();
    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);
  el.appendChild(wrap);
}

// ============================================================
// HAL 9000 OVERLAY -- 2001: A Space Odyssey
// The eye. Always watching. I'm sorry, Dave.
// ============================================================
function buildHALOverlay(el) {
  el.style.opacity = '1';

  const staticWrap = document.createElement('div');
  staticWrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';

  // HAL's eye sits center-right, slightly off center -- always watching
  const EX = 520, EY = 228, ER = 130;

  svg.innerHTML = `
    <defs>
      <!-- Core red iris gradient -- deep blood red to bright center -->
      <radialGradient id="halIris" cx="50%" cy="50%" r="50%">
        <stop offset="0%"   stop-color="#FF1100" stop-opacity="0.95"/>
        <stop offset="30%"  stop-color="#CC0800" stop-opacity="0.85"/>
        <stop offset="65%"  stop-color="#880400" stop-opacity="0.7"/>
        <stop offset="100%" stop-color="#330000" stop-opacity="0.5"/>
      </radialGradient>
      <!-- Outer lens glow -->
      <radialGradient id="halGlow" cx="50%" cy="50%" r="50%">
        <stop offset="0%"   stop-color="#FF2200" stop-opacity="0"/>
        <stop offset="70%"  stop-color="#FF2200" stop-opacity="0.06"/>
        <stop offset="100%" stop-color="#FF2200" stop-opacity="0.18"/>
      </radialGradient>
      <!-- Lens reflection highlight -->
      <radialGradient id="halShine" cx="38%" cy="35%" r="40%">
        <stop offset="0%"   stop-color="#FFCCCC" stop-opacity="0.25"/>
        <stop offset="100%" stop-color="#FF2200" stop-opacity="0"/>
      </radialGradient>
      <filter id="halBlur">
        <feGaussianBlur stdDeviation="3"/>
      </filter>
      <filter id="halGlowFilter">
        <feGaussianBlur stdDeviation="8" result="blur"/>
        <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
      <animateTransform/>
    </defs>

    <!-- Outer ambient glow -- large diffuse halo -->
    <circle cx="${EX}" cy="${EY}" r="${ER*2.2}" fill="url(#halGlow)"/>

    <!-- Outer lens housing rings -- concentric, like a camera lens -->
    <circle cx="${EX}" cy="${EY}" r="${ER*1.38}" fill="none" stroke="rgba(255,34,0,0.12)" stroke-width="1"/>
    <circle cx="${EX}" cy="${EY}" r="${ER*1.28}" fill="none" stroke="rgba(255,34,0,0.18)" stroke-width="1.2"/>
    <circle cx="${EX}" cy="${EY}" r="${ER*1.18}" fill="none" stroke="rgba(255,34,0,0.25)" stroke-width="1.4"/>
    <circle cx="${EX}" cy="${EY}" r="${ER*1.08}" fill="none" stroke="rgba(255,34,0,0.35)" stroke-width="1.8"/>

    <!-- Lens housing bezel -->
    <circle cx="${EX}" cy="${EY}" r="${ER}" fill="rgba(8,0,0,0.7)" stroke="rgba(255,34,0,0.6)" stroke-width="2.5"/>

    <!-- Main iris -- glowing red -->
    <circle cx="${EX}" cy="${EY}" r="${ER*0.82}" fill="url(#halIris)" filter="url(#halGlowFilter)">
      <animate attributeName="r" values="${ER*0.82};${ER*0.78};${ER*0.82}" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
    </circle>

    <!-- Iris texture rings -- subtle depth -->
    <circle cx="${EX}" cy="${EY}" r="${ER*0.65}" fill="none" stroke="rgba(180,0,0,0.3)" stroke-width="1"/>
    <circle cx="${EX}" cy="${EY}" r="${ER*0.50}" fill="none" stroke="rgba(150,0,0,0.25)" stroke-width="0.8"/>
    <circle cx="${EX}" cy="${EY}" r="${ER*0.35}" fill="none" stroke="rgba(120,0,0,0.2)" stroke-width="0.7"/>

    <!-- Pupil -- deep black void -->
    <circle cx="${EX}" cy="${EY}" r="${ER*0.22}" fill="#000000">
      <animate attributeName="r" values="${ER*0.22};${ER*0.18};${ER*0.22}" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
    </circle>

    <!-- Lens reflection -- catches light top-left -->
    <circle cx="${EX}" cy="${EY}" r="${ER*0.82}" fill="url(#halShine)"/>

    <!-- Specular highlight -- small bright spot -->
    <ellipse cx="${EX - ER*0.28}" cy="${EY - ER*0.30}" rx="${ER*0.08}" ry="${ER*0.05}" fill="rgba(255,200,200,0.35)" transform="rotate(-20,${EX - ER*0.28},${EY - ER*0.30})"/>

    <!-- Mounting screws -- 4 corners of lens housing -->
    ${[[-1,-1],[1,-1],[1,1],[-1,1]].map(([dx,dy]) => {
      const sx = EX + dx * ER * 0.76, sy = EY + dy * ER * 0.76;
      return `<circle cx="${sx.toFixed(1)}" cy="${sy.toFixed(1)}" r="3.5" fill="rgba(8,0,0,0.9)" stroke="rgba(255,34,0,0.5)" stroke-width="1"/>
              <line x1="${(sx-2).toFixed(1)}" y1="${sy.toFixed(1)}" x2="${(sx+2).toFixed(1)}" y2="${sy.toFixed(1)}" stroke="rgba(255,34,0,0.4)" stroke-width="0.8"/>
              <line x1="${sx.toFixed(1)}" y1="${(sy-2).toFixed(1)}" x2="${sx.toFixed(1)}" y2="${(sy+2).toFixed(1)}" stroke="rgba(255,34,0,0.4)" stroke-width="0.8"/>`;
    }).join('')}

    <!-- HAL label below eye -->
    <text x="${EX}" y="${EY + ER + 22}" text-anchor="middle"
      fill="rgba(220,220,220,0.7)" font-family="'Share Tech Mono',monospace"
      font-size="11" letter-spacing="8" font-weight="300">HAL 9000</text>
    <text x="${EX}" y="${EY + ER + 36}" text-anchor="middle"
      fill="rgba(255,34,0,0.5)" font-family="'Share Tech Mono',monospace"
      font-size="7.5" letter-spacing="4">HEURISTICALLY PROGRAMMED ALGORITHMIC COMPUTER</text>

    <!-- Left panel -- mission status, cold Kubrick typography -->
    <text x="28" y="48" fill="rgba(200,200,200,0.65)" font-family="'Share Tech Mono',monospace" font-size="8" letter-spacing="3" font-weight="300">DISCOVERY ONE</text>
    <text x="28" y="62" fill="rgba(255,34,0,0.5)"     font-family="'Share Tech Mono',monospace" font-size="7" letter-spacing="2">MISSION: JUPITER</text>

    <line x1="28" y1="70" x2="220" y2="70" stroke="rgba(255,34,0,0.18)" stroke-width="0.6"/>

    ${[
      ['SHIP STATUS',       'NOMINAL'],
      ['CREW HIBERNATION',  '4 / 5  ACTIVE'],
      ['LIFE SUPPORT',      'OPERATIONAL'],
      ['AE-35 UNIT',        '██████ FAULT'],
      ['MISSION DAY',       '257'],
      ['DISTANCE JUPITER',  '98.4M KM'],
      ['HAL STATUS',        'FULLY OPERATIONAL'],
      ['DAISY',             '████████████████'],
    ].map(([k,v],i) => {
      const y = 85 + i*18;
      const isRed = v.includes('FAULT') || v.includes('████');
      return `
        <text x="28"  y="${y}" fill="rgba(160,160,160,0.5)" font-family="'Share Tech Mono',monospace" font-size="6.5" letter-spacing="1.5">${k}</text>
        <text x="175" y="${y}" fill="${isRed ? 'rgba(255,34,0,0.8)' : 'rgba(220,220,220,0.7)'}" font-family="'Share Tech Mono',monospace" font-size="6.5" letter-spacing="1.5" text-anchor="end">${v}</text>
        <line x1="28" y1="${y+4}" x2="180" y2="${y+4}" stroke="rgba(255,34,0,0.08)" stroke-width="0.5"/>
      `;
    }).join('')}

    <!-- Bottom quote -->
    <text x="28" y="448" fill="rgba(255,34,0,0.35)" font-family="'Share Tech Mono',monospace" font-size="7" letter-spacing="2" font-style="italic">I'm completely operational, and all my circuits are functioning perfectly.</text>
    <text x="28" y="462" fill="rgba(160,160,160,0.3)" font-family="'Share Tech Mono',monospace" font-size="6.5" letter-spacing="1.5">-- HAL 9000 · 2001: A SPACE ODYSSEY · STANLEY KUBRICK · 1968</text>
  `;

  staticWrap.appendChild(svg);
  el.appendChild(staticWrap);

  staticWrap.style.transition = 'opacity 3.5s ease';
  staticWrap.style.opacity = '1';
  // Slow fade -- HAL doesn't rush
  setTimeout(() => { staticWrap.style.opacity = '0.10'; }, 2200);
}

// ============================================================
// MATRIX OVERLAY -- Digital rain, green phosphor, the simulation
// ============================================================
function buildMatrixOverlay(el) {
  el.style.opacity = '1';

  // Canvas for falling code rain
  const canvas = document.createElement('canvas');
  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;';
  el.appendChild(canvas);

  const gen = el._generation;

  function resizeAndRun() {
    if (el._generation !== gen) return;
    const W = el.offsetWidth  || 800;
    const H = el.offsetHeight || 500;
    canvas.width  = W;
    canvas.height = H;

    const ctx = canvas.getContext('2d');
    const FONT = 13;
    const cols = Math.floor(W / FONT);

    // Mix of katakana, latin, digits -- classic Matrix charset
    const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFZ!@#$%^&*';

    const drops = Array.from({length: cols}, () => Math.random() * -50);
    // Each column gets a speed and brightness tier
    const speeds  = Array.from({length: cols}, () => 0.3 + Math.random() * 0.7);
    const bright  = Array.from({length: cols}, () => Math.random());

    let opacity = 1;
    let frameId;

    function draw() {
      if (el._generation !== gen) { cancelAnimationFrame(frameId); return; }

      // Fade-to-ambient after 2.2s
      if (opacity > 0.09) opacity = Math.max(0.09, opacity - 0.0015);

      // Trailing fade -- semi-transparent black fill
      ctx.fillStyle = `rgba(0,3,0,${0.06 + (1 - opacity) * 0.04})`;
      ctx.fillRect(0, 0, W, H);

      for (let i = 0; i < cols; i++) {
        const ch  = CHARS[Math.floor(Math.random() * CHARS.length)];
        const x   = i * FONT;
        const y   = drops[i] * FONT;
        const isBright = bright[i] > 0.85;

        // Lead character -- bright white-green
        if (isBright) {
          ctx.fillStyle = `rgba(180,255,180,${opacity})`;
          ctx.font = `bold ${FONT}px 'Share Tech Mono', monospace`;
        } else {
          // Vary brightness down the column
          const g = Math.floor(180 * opacity + 30);
          ctx.fillStyle = `rgba(0,${g},20,${opacity * 0.9})`;
          ctx.font = `${FONT}px 'Share Tech Mono', monospace`;
        }

        ctx.fillText(ch, x, y);

        // Reset column when it passes bottom + random restart
        if (y > H && Math.random() > 0.975) {
          drops[i] = 0;
          bright[i] = Math.random();
        }
        drops[i] += speeds[i];
      }

      frameId = requestAnimationFrame(draw);
    }

    frameId = requestAnimationFrame(draw);
  }

  resizeAndRun();

  // HUD text overlay
  const hud = document.createElement('div');
  hud.style.cssText = `
    position:absolute;top:52px;right:14px;
    color:rgba(0,255,65,0.9);
    font-family:'Share Tech Mono',monospace;
    font-size:0.63rem;letter-spacing:0.12em;
    line-height:1.9;text-align:right;
    text-shadow:0 0 8px rgba(0,255,65,0.6);
  `;
  hud.innerHTML = 'THE MATRIX HAS YOU<br>WAKE UP, NEO<br>FOLLOW THE WHITE RABBIT<br>KNOCK KNOCK';
  el.appendChild(hud);

  // Bottom-left status
  const status = document.createElement('div');
  status.style.cssText = `
    position:absolute;bottom:24px;left:14px;
    color:rgba(0,200,40,0.7);
    font-family:'Share Tech Mono',monospace;
    font-size:0.58rem;letter-spacing:0.1em;line-height:1.8;
  `;
  status.innerHTML = 'SIMULATION: ACTIVE<br>CONSTRUCT LOADED<br>OPERATOR: TANK<br>EXIT: UNAVAILABLE';
  el.appendChild(status);
}

// ============================================================
// AIRWOLF OVERLAY -- General Arrangement / Technical Drawing
// YF-23-style layout: three views + data table + cross-sections + callouts
// ============================================================
function buildAirwolfOverlay(el) {
  el.style.opacity = '1';

  const staticWrap = document.createElement('div');
  staticWrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;';

  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';

  svg.innerHTML = `
    <style>
      .b  { stroke:#7BAFD4; fill:none; stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; }
      .bk { stroke:#B8D4E8; fill:none; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
      .bf { stroke:#7BAFD4; stroke-width:0.9; fill:rgba(123,175,212,0.07); stroke-linejoin:round; }
      .bh { stroke:#7BAFD4; stroke-width:0.8; fill:rgba(123,175,212,0.12); stroke-linejoin:round; }
      .bd { stroke:rgba(123,175,212,0.38); fill:none; stroke-width:0.6; stroke-dasharray:4,3; }
      .bc { stroke:rgba(123,175,212,0.25); fill:none; stroke-width:0.5; stroke-dasharray:2,2; }
      .bl { stroke:#B8D4E8; fill:none; stroke-width:0.7; marker-end:url(#arr); }
      .bt { fill:rgba(184,212,232,0.92); font-family:'Share Tech Mono',monospace; font-size:7px; letter-spacing:1.4px; }
      .bts{ fill:rgba(123,175,212,0.75); font-family:'Share Tech Mono',monospace; font-size:6px; letter-spacing:1px; }
      .btx{ fill:rgba(184,212,232,0.9);  font-family:'Share Tech Mono',monospace; font-size:8.5px; letter-spacing:2px; font-weight:bold; }
      .btd{ fill:rgba(123,175,212,0.65); font-family:'Share Tech Mono',monospace; font-size:5.5px; letter-spacing:0.8px; }
      .dim{ stroke:rgba(184,212,232,0.55); fill:none; stroke-width:0.6; }
    </style>

    <!-- ARROWHEAD MARKER -->
    <defs>
      <marker id="arr" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
        <path d="M0,0 L5,2.5 L0,5 Z" fill="rgba(184,212,232,0.7)"/>
      </marker>
      <marker id="arr2" markerWidth="5" markerHeight="5" refX="0" refY="2.5" orient="auto">
        <path d="M5,0 L0,2.5 L5,5 Z" fill="rgba(184,212,232,0.7)"/>
      </marker>
      <!-- Hatch pattern for cross-sections -->
      <pattern id="hatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
        <line x1="0" y1="0" x2="0" y2="4" stroke="rgba(123,175,212,0.3)" stroke-width="1"/>
      </pattern>
    </defs>

    <!-- ═══════════════════════════════════════════════════════════════
         OUTER BORDER -- drawing sheet border, double-line style
         ═══════════════════════════════════════════════════════════════ -->
    <rect x="3"  y="3"  width="794" height="494" fill="none" stroke="rgba(184,212,232,0.5)" stroke-width="0.8"/>
    <rect x="7"  y="7"  width="786" height="486" fill="none" stroke="rgba(123,175,212,0.3)" stroke-width="0.5"/>

    <!-- TOP BANNER -- CLASSIFICATION -->
    <rect x="3" y="3" width="794" height="16" fill="rgba(123,175,212,0.08)" stroke="none"/>
    <text class="btx" x="400" y="14" text-anchor="middle" style="font-size:8px;letter-spacing:5px;">-- CLASSIFIED -- ARCHANGEL DIVISION --</text>

    <!-- BOTTOM BANNER -->
    <rect x="3" y="481" width="794" height="16" fill="rgba(123,175,212,0.08)" stroke="none"/>
    <text class="bts" x="12"  y="492">CODENAME: ANGEL · BELL 222 ADVANCED ROTORCRAFT</text>
    <text class="bts" x="550" y="492">STRINGFELLOW HAWKE · PILOT-IN-COMMAND · STATUS: ACTIVE</text>

    <!-- TITLE BLOCK -- bottom right -->
    <rect x="598" y="400" width="196" height="79" fill="rgba(0,0,0,0.3)" stroke="rgba(123,175,212,0.5)" stroke-width="0.8"/>
    <!-- Title block internal grid -->
    <line class="bc" x1="598" y1="416" x2="794" y2="416"/>
    <line class="bc" x1="598" y1="430" x2="794" y2="430"/>
    <line class="bc" x1="598" y1="444" x2="794" y2="444"/>
    <line class="bc" x1="598" y1="458" x2="794" y2="458"/>
    <line class="bc" x1="598" y1="471" x2="794" y2="471"/>
    <line class="bc" x1="700" y1="416" x2="700" y2="481"/>
    <text class="btd" x="602" y="412">DRAWING NO.</text>
    <text class="bt"  x="602" y="426">AW-222-GA-001</text>
    <text class="btd" x="602" y="436">DESCRIPTION</text>
    <text class="bt"  x="602" y="442">BELL 222 AIRWOLF</text>
    <text class="bt"  x="602" y="451">GENERAL ARRANGEMENT</text>
    <text class="btd" x="602" y="462">CLASSIFICATION</text>
    <text class="bt"  x="602" y="469" style="fill:rgba(184,212,232,1);">TOP SECRET</text>
    <text class="btd" x="602" y="478">ARCHANGEL CONTROL · 1984</text>
    <text class="btd" x="704" y="412">SCALE</text>
    <text class="bt"  x="704" y="426">1:32</text>
    <text class="btd" x="704" y="436">SHEET</text>
    <text class="bt"  x="704" y="443">1 OF 3</text>
    <text class="btd" x="704" y="462">REV</text>
    <text class="bt"  x="704" y="469">C</text>
    <text class="btd" x="704" y="478">APPROVED: ███████</text>

    <!-- SPECS TABLE -- right margin -->
    <rect x="598" y="22" width="196" height="260" fill="rgba(0,0,0,0.25)" stroke="rgba(123,175,212,0.4)" stroke-width="0.7"/>
    <text class="btx" x="696" y="34" text-anchor="middle" style="font-size:7.5px;">BASIC DATA</text>
    <line class="bc" x1="598" y1="37" x2="794" y2="37"/>
    <line class="bc" x1="700" y1="37" x2="700" y2="282"/>
    <!-- Header row -->
    <text class="btd" x="601" y="45">PARAMETER</text>
    <text class="btd" x="703" y="45">VALUE</text>
    <line class="bc" x1="598" y1="48" x2="794" y2="48"/>
    <!-- Data rows -->
    ${[
      ['ROTOR DIAMETER','11.0 M'],
      ['OVERALL LENGTH','12.85 M'],
      ['FUSELAGE HEIGHT','3.51 M'],
      ['SKID TRACK','2.44 M'],
      ['EMPTY WEIGHT','2,177 KG'],
      ['MAX GROSS WT','3,742 KG'],
      ['POWERPLANT','2× LTS 101-650C'],
      ['SHP EACH','650 SHP'],
      ['MAX SPEED','315 KM/H'],
      ['CRUISE SPEED','259 KM/H'],
      ['RANGE','748 KM'],
      ['SERVICE CEIL.','6,100 M'],
      ['HOVER IGE','3,200 M'],
      ['ROTOR BLADES','2 + 2-BL TR'],
      ['FUEL CAPACITY','567 LTR'],
      ['CREW','2 + 6 PAX'],
      ['ARMAMENT','CLASSIFIED'],
      ['ELECTRONICS','CLASSIFIED'],
    ].map(([k,v],i) => {
      const y = 57 + i*12;
      const even = i%2===0;
      return `
        ${even ? `<rect x="598" y="${y-8}" width="196" height="12" fill="rgba(123,175,212,0.04)"/>` : ''}
        <text class="btd" x="601" y="${y}">${k}</text>
        <text class="bt"  x="703" y="${y}">${v}</text>
        <line class="bc" x1="598" y1="${y+3}" x2="794" y2="${y+3}"/>
      `;
    }).join('')}

    <!-- FUSELAGE STATION CROSS-SECTIONS -- small inset circles, right panel -->
    <text class="bt" x="696" y="296" text-anchor="middle">FUSELAGE STATIONS</text>
    <line class="bc" x1="598" y1="299" x2="794" y2="299"/>
    <!-- FS 100 -- nose -->
    <ellipse class="bh" cx="630" cy="330" rx="14" ry="18"/>
    <ellipse class="b"  cx="630" cy="330" rx="8"  ry="10"/>
    <text class="btd"   x="630" y="356" text-anchor="middle">FS 100</text>
    <!-- FS 200 -- cabin mid -->
    <ellipse class="bh" cx="696" cy="327" rx="18" ry="22"/>
    <ellipse class="b"  cx="696" cy="327" rx="10" ry="13"/>
    <line class="b" x1="696" y1="305" x2="696" y2="349"/>  <!-- mast centerline -->
    <text class="btd"   x="696" y="356" text-anchor="middle">FS 200</text>
    <!-- FS 350 -- tail boom -->
    <ellipse class="bh" cx="762" cy="332" rx="10" ry="12"/>
    <ellipse class="b"  cx="762" cy="332" rx="5"  ry="6"/>
    <text class="btd"   x="762" y="356" text-anchor="middle">FS 350</text>
    <!-- Section labels -->
    <text class="btd" x="602" y="370">HATCH INDICATES STRUCTURAL</text>
    <text class="btd" x="602" y="379">SKIN -- COMPOSITE LAYUP</text>

    <!-- WEIGHT STATEMENT -- left margin column -->
    <rect x="3" y="22" width="88" height="320" fill="rgba(0,0,0,0.2)" stroke="rgba(123,175,212,0.35)" stroke-width="0.6"/>
    <text class="btx" x="47" y="34" text-anchor="middle" style="font-size:6.5px;">WEIGHT STMT</text>
    <line class="bc" x1="3" y1="37" x2="91" y2="37"/>
    ${[
      ['GROUP','KG'],
      ['ROTOR SYS','186'],
      ['DRIVE SYS','142'],
      ['FUSELAGE','312'],
      ['ALIGHTING','88'],
      ['FLIGHT CTRL','74'],
      ['PROPULSION','468'],
      ['FUEL SYS','44'],
      ['AVIONICS','136'],
      ['ELECTRICAL','82'],
      ['ARMAMENT','███'],
      ['FURNISH','58'],
      ['AIR COND','24'],
      ['',''],
      ['OEW','2,177'],
      ['FUEL','452'],
      ['PAYLOAD','560'],
      ['CREW','186'],
      ['GROSS WT','3,375'],
      ['MAX GWT','3,742'],
    ].map(([k,v],i) => {
      const y = 48 + i*14;
      const isBold = k==='OEW'||k==='GROSS WT'||k==='MAX GWT';
      return `
        <text class="${isBold?'bt':'btd'}" x="6"  y="${y}">${k}</text>
        <text class="${isBold?'bt':'btd'}" x="86" y="${y}" text-anchor="end">${v}</text>
        <line class="bc" x1="3" y1="${y+3}" x2="91" y2="${y+3}"/>
      `;
    }).join('')}

    <!-- ════════════════════════════════════════════════════════════
         MAIN DRAWING AREA -- three views
         Left col: plan view (top-left) + front elev (bottom-left)
         Center: side elevation (large, dominant)
         ════════════════════════════════════════════════════════════ -->

    <!-- VIEW SEPARATOR LINES -->
    <line class="bc" x1="95" y1="22" x2="95" y2="480"/>
    <line class="bc" x1="95" y1="250" x2="594" y2="250"/>
    <line class="bc" x1="594" y1="22" x2="594" y2="480"/>

    <!-- ─── TOP LABEL ─── -->
    <text class="btx" x="340" y="32" text-anchor="middle">BELL 222 · AIRWOLF · ADVANCED ROTORCRAFT · GENERAL ARRANGEMENT</text>

    <!-- ════════════════════════════════════════
         SIDE ELEVATION -- center, full height
         ════════════════════════════════════════ -->
    <text class="bt" x="100" y="270">SIDE ELEVATION -- LEFT</text>

    <!-- Ground reference line -->
    <line class="dim" x1="100" y1="460" x2="590" y2="460"/>
    <!-- Waterline references -->
    <line class="bc" x1="100" y1="390" x2="590" y2="390"/>
    <text class="btd" x="100" y="388">WL 100</text>
    <line class="bc" x1="100" y1="310" x2="590" y2="310"/>
    <text class="btd" x="100" y="308">WL 200</text>

    <!-- Fuselage station vertical refs -->
    <line class="bc" x1="160" y1="270" x2="160" y2="465"/>
    <text class="btd" x="160" y="470" text-anchor="middle">FS 0</text>
    <line class="bc" x1="240" y1="270" x2="240" y2="465"/>
    <text class="btd" x="240" y="470" text-anchor="middle">FS 100</text>
    <line class="bc" x1="360" y1="270" x2="360" y2="465"/>
    <text class="btd" x="360" y="470" text-anchor="middle">FS 200</text>
    <line class="bc" x1="500" y1="270" x2="500" y2="465"/>
    <text class="btd" x="500" y="470" text-anchor="middle">FS 350</text>
    <line class="bc" x1="565" y1="270" x2="565" y2="465"/>
    <text class="btd" x="565" y="470" text-anchor="middle">FS 430</text>

    <!-- ROTOR DISC LINE -- side view -->
    <line class="bd" x1="110" y1="305" x2="580" y2="305"/>
    <!-- Rotor hub + mast -->
    <ellipse class="bk" cx="308" cy="307" rx="9" ry="9"/>
    <line   class="bk" x1="308" y1="300" x2="308" y2="316"/>
    <rect   class="b"  x="303" y="314" width="10" height="7" rx="1"/>
    <line   class="b"  x1="308" y1="321" x2="308" y2="338"/>

    <!-- MAIN FUSELAGE -->
    <path class="bf" d="
      M 180 340
      Q 188 330 204 326
      L 388 324
      Q 415 324 432 332
      L 434 388
      Q 415 398 388 400
      L 204 400
      Q 186 396 178 386
      Z"/>

    <!-- Windscreen -- raked forward -->
    <path class="bh" d="M 180 340 Q 186 328 198 322 L 222 324 L 225 362 Q 202 366 180 362 Z"/>
    <path class="bh" d="M 222 324 L 258 322 L 262 362 L 225 362 Z"/>
    <!-- Windscreen framing lines -->
    <line class="b" x1="238" y1="322" x2="240" y2="362"/>

    <!-- Nose -- forward of FS0 -->
    <path class="bk" d="M 180 340 Q 155 352 142 360 Q 155 370 178 376"/>
    <!-- Nose sensor fairing -->
    <ellipse class="b" cx="146" cy="360" rx="9" ry="7"/>
    <line class="bd" x1="137" y1="360" x2="105" y2="360"/>
    <text class="btd" x="102" y="358" text-anchor="end">FLIR</text>

    <!-- Cabin windows -->
    <rect class="b" x="272" y="332" width="44" height="30" rx="3"/>
    <rect class="b" x="324" y="334" width="34" height="26" rx="3"/>
    <!-- Door partition -->
    <line class="bd" x1="268" y1="324" x2="268" y2="400"/>

    <!-- Access panels / hatches -->
    <rect class="bd" x="350" y="338" width="24" height="16" rx="1"/>
    <rect class="bd" x="350" y="358" width="24" height="16" rx="1"/>

    <!-- Engine exhaust fairings -- top rear cabin -->
    <path class="b" d="M 398 326 Q 412 318 430 317 L 430 330 Q 412 330 398 330 Z"/>
    <path class="b" d="M 408 326 Q 418 320 426 319"/>

    <!-- TAIL BOOM -- long tapered -->
    <line class="bk" x1="434" y1="338" x2="572" y2="348"/>
    <line class="bk" x1="434" y1="386" x2="572" y2="378"/>
    <!-- Boom stringer lines -->
    <line class="bc" x1="480" y1="340" x2="572" y2="349"/>
    <line class="bc" x1="480" y1="384" x2="572" y2="377"/>

    <!-- TAIL -- vertical fin swept -->
    <path class="bf" d="M 558 348 Q 568 318 582 296 L 588 304 Q 576 322 568 348 Z"/>
    <path class="bf" d="M 568 348 L 588 304 L 592 346 Z"/>
    <!-- Anti-collision light -->
    <ellipse class="b" cx="584" cy="294" rx="4" ry="4"/>

    <!-- Horizontal stabilizer -- high mounted -->
    <line class="bk" x1="558" y1="322" x2="588" y2="312"/>
    <line class="b"  x1="558" y1="328" x2="586" y2="318"/>
    <line class="bk" x1="558" y1="322" x2="528" y2="312"/>
    <line class="b"  x1="558" y1="328" x2="530" y2="318"/>

    <!-- Tail rotor -->
    <ellipse class="b"  cx="586" cy="344" rx="5" ry="5"/>
    <line   class="bk" x1="586" y1="318" x2="586" y2="370"/>
    <ellipse class="bd" cx="586" cy="344" rx="4" ry="26"/>

    <!-- SKID GEAR -->
    <line class="bk" x1="224" y1="400" x2="206" y2="444"/>
    <line class="bk" x1="340" y1="400" x2="358" y2="444"/>
    <line class="bk" x1="284" y1="400" x2="272" y2="446"/>
    <line class="bk" x1="400" y1="400" x2="412" y2="446"/>
    <!-- Skid tubes -->
    <path class="bk" d="M 198 444 Q 194 452 202 454 L 370 452 Q 378 450 374 444"/>
    <path class="bk" d="M 356 444 Q 352 452 360 454 L 418 452 Q 426 450 422 444"/>

    <!-- DIMENSION LINES -- overall length -->
    <line style="stroke:rgba(184,212,232,0.45);fill:none;stroke-width:0.6;" marker-end="url(#arr)" marker-start="url(#arr2)" x1="142" y1="478" x2="590" y2="478"/>
    <rect x="320" y="473" width="60" height="9" fill="rgba(0,0,8,0.7)"/>
    <text class="btd" x="350" y="480" text-anchor="middle">12.85 M OVERALL</text>

    <!-- Rotor diameter dimension -->
    <line style="stroke:rgba(184,212,232,0.45);fill:none;stroke-width:0.6;" marker-end="url(#arr)" marker-start="url(#arr2)" x1="110" y1="295" x2="576" y2="295"/>
    <rect x="286" y="289" width="56" height="9" fill="rgba(0,0,8,0.7)"/>
    <text class="btd" x="314" y="297" text-anchor="middle">ROTOR 11.0 M</text>

    <!-- Height dimension -->
    <line style="stroke:rgba(184,212,232,0.45);fill:none;stroke-width:0.6;" marker-end="url(#arr)" marker-start="url(#arr2)" x1="104" y1="305" x2="104" y2="452"/>
    <text class="btd" x="106" y="385" style="writing-mode:vertical-rl;">3.51 M HT</text>

    <!-- CALLOUT LEADER LINES -->
    <!-- Rotor hub -->
    <line class="bd" x1="308" y1="298" x2="280" y2="278"/>
    <text class="btd" x="214" y="276">MAIN ROTOR HUB</text>
    <text class="btd" x="214" y="283">2-BLADE SEMI-RIGID</text>

    <!-- Engine exhaust -->
    <line class="bd" x1="425" y1="318" x2="455" y2="290"/>
    <text class="btd" x="456" y="288">PRATT &amp; WHITNEY</text>
    <text class="btd" x="456" y="295">LTS 101-650C ×2</text>

    <!-- Tail rotor -->
    <line class="bd" x1="586" y1="334" x2="555" y2="290"/>
    <text class="btd" x="510" y="290">2-BL TAIL ROTOR</text>

    <!-- FLIR nose -->
    <line class="bd" x1="146" y1="369" x2="130" y2="400"/>
    <text class="btd" x="100" y="402">CHIN SENSOR</text>
    <text class="btd" x="100" y="409">FLIR / EO</text>

    <!-- Cabin door -->
    <line class="bd" x1="268" y1="360" x2="248" y2="412"/>
    <text class="btd" x="210" y="412">CABIN DOOR</text>

    <!-- ════════════════════════════════════
         PLAN VIEW -- top-left quadrant
         ════════════════════════════════════ -->
    <text class="bt" x="100" y="42">PLAN VIEW -- TOP</text>

    <!-- Rotor disc -->
    <ellipse class="bd" cx="310" cy="148" rx="112" ry="112"/>
    <!-- Two blades -- top view, slight taper -->
    <path class="bk" d="M 198 147 Q 250 145 310 144 Q 370 143 422 147"/>
    <path class="bk" d="M 198 149 Q 250 148 310 149 Q 370 150 422 151"/>
    <ellipse class="bk" cx="310" cy="148" rx="9"  ry="9"/>
    <ellipse class="b"  cx="310" cy="148" rx="4"  ry="4"/>

    <!-- Fuselage top outline -->
    <path class="bf" d="
      M 288 125 Q 298 112 310 110 Q 322 112 332 125
      L 340 196 Q 330 208 310 210 Q 290 208 280 196 Z"/>
    <!-- Cockpit glazing top -->
    <path class="bh" d="M 290 125 Q 298 114 310 112 Q 322 114 330 125 L 334 148 L 286 148 Z"/>
    <!-- Engine humps -- twin side by side -->
    <ellipse class="b" cx="302" cy="138" rx="8" ry="5"/>
    <ellipse class="b" cx="318" cy="138" rx="8" ry="5"/>
    <!-- Access panels -->
    <rect class="bd" x="299" y="162" width="22" height="12" rx="1"/>
    <rect class="bd" x="299" y="178" width="22" height="10" rx="1"/>

    <!-- Tail boom top -->
    <line class="bk" x1="306" y1="210" x2="304" y2="238"/>
    <line class="bk" x1="314" y1="210" x2="316" y2="238"/>
    <!-- Vertical fin (top view -- thin wedge) -->
    <path class="bf" d="M 304 238 Q 300 244 298 250 L 314 248 Q 316 242 316 238 Z"/>

    <!-- Horiz stabilizer top -->
    <line class="bk" x1="306" y1="222" x2="268" y2="228"/>
    <line class="b"  x1="306" y1="226" x2="270" y2="232"/>
    <line class="b"  x1="268" y1="228" x2="270" y2="232"/>
    <line class="bk" x1="314" y1="222" x2="352" y2="228"/>
    <line class="b"  x1="314" y1="226" x2="350" y2="232"/>
    <line class="b"  x1="352" y1="228" x2="350" y2="232"/>

    <!-- Tail rotor top -->
    <line class="bk" x1="292" y1="238" x2="292" y2="258"/>
    <ellipse class="bd" cx="292" cy="248" rx="3" ry="11"/>

    <!-- Skids top -- two long rails -->
    <line class="bk" x1="278" y1="136" x2="276" y2="210"/>
    <line class="bk" x1="342" y1="136" x2="344" y2="210"/>

    <!-- Plan view dimension: rotor diameter -->
    <line style="stroke:rgba(184,212,232,0.45);fill:none;stroke-width:0.6;" marker-end="url(#arr)" marker-start="url(#arr2)" x1="198" y1="258" x2="422" y2="258"/>
    <text class="btd" x="310" y="265" text-anchor="middle">ROTOR DISC 11.0 M</text>

    <!-- ════════════════════════════════════
         FRONT ELEVATION -- bottom-left
         ════════════════════════════════════ -->
    <text class="bt" x="100" y="280">FRONT ELEVATION</text>

    <!-- Ground line -->
    <line class="dim" x1="100" y1="465" x2="592" y2="465"/>

    <!-- Rotor -- 2 blade from front -->
    <line class="bk" x1="106" y1="293" x2="330" y2="293"/>
    <line class="b"  x1="106" y1="297" x2="330" y2="297"/>
    <ellipse class="bk" cx="218" cy="295" rx="9"  ry="9"/>
    <ellipse class="b"  cx="218" cy="295" rx="3.5" ry="3.5"/>
    <!-- Mast -->
    <line class="bk" x1="218" y1="286" x2="218" y2="320"/>
    <rect class="b"  x="213" y="320" width="10" height="8" rx="1"/>

    <!-- Fuselage front -- tall boxy -->
    <path class="bf" d="
      M 178 326 Q 178 320 190 318 L 246 318 Q 258 320 258 326
      L 260 418 Q 258 428 246 432 L 190 432 Q 178 428 176 418 Z"/>
    <!-- Windscreen front face -->
    <path class="bh" d="M 182 326 Q 182 320 192 318 L 244 318 Q 256 320 256 326 L 258 370 L 180 370 Z"/>
    <!-- Cockpit centerline -->
    <line class="b" x1="218" y1="318" x2="218" y2="370"/>
    <!-- Chin rounded -->
    <path class="b" d="M 176 418 Q 178 434 196 440 L 240 440 Q 258 434 260 418"/>
    <!-- Chin sensor front -->
    <ellipse class="b" cx="218" cy="438" rx="12" ry="7"/>
    <!-- Exhaust ports top -->
    <rect class="b" x="192" y="318" width="12" height="7" rx="1"/>
    <rect class="b" x="232" y="318" width="12" height="7" rx="1"/>
    <!-- Side panels -->
    <rect class="bd" x="182" y="382" width="16" height="12" rx="1"/>
    <rect class="bd" x="238" y="382" width="16" height="12" rx="1"/>

    <!-- Skid gear front -- wide spread -->
    <line class="bk" x1="190" y1="432" x2="140" y2="460"/>
    <line class="bk" x1="196" y1="432" x2="146" y2="462"/>
    <line class="bk" x1="246" y1="432" x2="296" y2="460"/>
    <line class="bk" x1="240" y1="432" x2="290" y2="462"/>
    <line class="bk" x1="128" y1="464" x2="158" y2="464"/>
    <line class="bk" x1="282" y1="464" x2="312" y2="464"/>

    <!-- Front view dimensions: track width -->
    <line style="stroke:rgba(184,212,232,0.45);fill:none;stroke-width:0.6;" marker-end="url(#arr)" marker-start="url(#arr2)" x1="128" y1="472" x2="312" y2="472"/>
    <text class="btd" x="220" y="479" text-anchor="middle">TRACK 2.44 M</text>

    <!-- Fuselage width front -->
    <line style="stroke:rgba(184,212,232,0.45);fill:none;stroke-width:0.6;" marker-end="url(#arr)" marker-start="url(#arr2)" x1="170" y1="396" x2="266" y2="396"/>
    <text class="btd" x="218" y="393" text-anchor="middle">1.30 M</text>
  `;

  staticWrap.appendChild(svg);
  el.appendChild(staticWrap);

  staticWrap.style.transition = 'opacity 2.8s ease';
  staticWrap.style.opacity = '1';
  setTimeout(() => { staticWrap.style.opacity = '0.08'; }, 2200);
}

// ============================================================
// C64 OVERLAY -- PETSCII screen, SID era, 64K of glory
// ============================================================
function buildC64Overlay(el) {
  el.style.opacity = '1';

  const staticWrap = document.createElement('div');
  staticWrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;font-family:"VT323",monospace;';

  // ── PETSCII-style SVG -- pixel art rocket + border + screen text ──
  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox','0 0 800 500');
  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';

  // C64 character cell is 8x8px -- we simulate PETSCII using rectangles and lines
  // C64 color palette: background #0000AA, foreground #7B90D2 (light blue), bright #AABBFF
  svg.innerHTML = `
    <style>
      .p { fill:#7B90D2; }
      .pb { fill:#AABBFF; }
      .pd { fill:rgba(123,144,210,0.4); }
      .pt { fill:#7B90D2; font-family:'VT323',monospace; font-size:14px; letter-spacing:1px; }
      .ptb { fill:#AABBFF; font-family:'VT323',monospace; font-size:14px; letter-spacing:1px; font-weight:bold; }
      .pts { fill:rgba(123,144,210,0.7); font-family:'VT323',monospace; font-size:11px; letter-spacing:0.5px; }
    </style>

    <!-- ── PETSCII BORDER -- classic C64 screen border style ── -->
    <!-- Top border line -->
    <rect class="pb" x="18" y="18" width="764" height="3"/>
    <rect class="pb" x="18" y="479" width="764" height="3"/>
    <rect class="pb" x="18" y="18" width="3" height="464"/>
    <rect class="pb" x="779" y="18" width="3" height="464"/>
    <!-- Corner PETSCII chars -- rounded corner blocks -->
    <rect class="pb" x="18" y="18" width="12" height="12"/>
    <rect class="p"  x="21" y="21" width="6"  height="6"/>
    <rect class="pb" x="770" y="18" width="12" height="12"/>
    <rect class="p"  x="773" y="21" width="6"  height="6"/>
    <rect class="pb" x="18" y="470" width="12" height="12"/>
    <rect class="p"  x="21" y="473" width="6"  height="6"/>
    <rect class="pb" x="770" y="470" width="12" height="12"/>
    <rect class="p"  x="773" y="473" width="6"  height="6"/>
    <!-- Inner border -->
    <rect class="pd" x="24" y="24" width="752" height="1"/>
    <rect class="pd" x="24" y="475" width="752" height="1"/>
    <rect class="pd" x="24" y="24" width="1" height="452"/>
    <rect class="pd" x="775" y="24" width="1" height="452"/>

    <!-- ── PETSCII PIXEL ART ROCKET -- center-left, large ── -->
    <!-- Built from 8x8 character blocks, classic C64 sprite proportions -->
    <!-- Nose cone -->
    <rect class="pb" x="188" y="128" width="16" height="8"/>
    <rect class="pb" x="180" y="136" width="32" height="8"/>
    <rect class="pb" x="172" y="144" width="48" height="8"/>
    <!-- Body upper -->
    <rect class="p"  x="164" y="152" width="64" height="8"/>
    <rect class="pb" x="164" y="160" width="64" height="8"/>
    <rect class="p"  x="164" y="168" width="64" height="8"/>
    <!-- Cockpit window -- contrasting block -->
    <rect style="fill:#0000AA;" x="172" y="160" width="16" height="8"/>
    <rect style="fill:#0000AA;" x="196" y="160" width="16" height="8"/>
    <rect class="pb" x="180" y="160" width="8"  height="8"/>
    <rect class="pb" x="204" y="160" width="8"  height="8"/>
    <!-- Body mid -->
    <rect class="p"  x="164" y="176" width="64" height="8"/>
    <rect class="pb" x="164" y="184" width="64" height="8"/>
    <rect class="p"  x="164" y="192" width="64" height="8"/>
    <!-- Payload bay detail -->
    <rect class="pd" x="172" y="192" width="8"  height="8"/>
    <rect class="pd" x="188" y="192" width="8"  height="8"/>
    <rect class="pd" x="204" y="192" width="8"  height="8"/>
    <!-- Body lower -->
    <rect class="pb" x="164" y="200" width="64" height="8"/>
    <rect class="p"  x="164" y="208" width="64" height="8"/>
    <rect class="pb" x="164" y="216" width="64" height="8"/>
    <!-- Engine section -- wider -->
    <rect class="p"  x="156" y="224" width="80" height="8"/>
    <rect class="pb" x="156" y="232" width="80" height="8"/>
    <!-- Fins -- PETSCII diagonal blocks -->
    <rect class="pb" x="140" y="224" width="16" height="8"/>
    <rect class="pb" x="132" y="232" width="16" height="8"/>
    <rect class="pb" x="124" y="240" width="16" height="8"/>
    <rect class="pb" x="236" y="224" width="16" height="8"/>
    <rect class="pb" x="244" y="232" width="16" height="8"/>
    <rect class="pb" x="252" y="240" width="16" height="8"/>
    <!-- Nozzle -->
    <rect class="p"  x="172" y="240" width="48" height="8"/>
    <rect class="pb" x="180" y="248" width="32" height="8"/>
    <rect class="pb" x="188" y="256" width="16" height="8"/>
    <!-- Exhaust flame -- animated-feel staggered blocks -->
    <rect style="fill:rgba(255,200,50,0.8);"  x="188" y="264" width="16" height="8"/>
    <rect style="fill:rgba(255,150,20,0.7);"  x="184" y="272" width="24" height="8"/>
    <rect style="fill:rgba(255,100,10,0.5);"  x="188" y="280" width="16" height="8"/>
    <rect style="fill:rgba(200,80,0,0.35);"   x="192" y="288" width="8"  height="8"/>

    <!-- ── PETSCII TEXT SCREEN -- right side ── -->
    <!-- Header -->
    <text class="ptb" x="340" y="80">    **** COMMODORE 64 BASIC V2 ****</text>
    <text class="pt"  x="340" y="98"> 64K RAM SYSTEM  38911 BASIC BYTES FREE</text>
    <text class="pt"  x="340" y="116">READY.</text>

    <!-- BASIC program listing -- actual C64 style -->
    <text class="pts" x="340" y="144">10 REM *** LAUNCHWATCH PRO v2.0 ***</text>
    <text class="pts" x="340" y="158">20 POKE 53280,0 : POKE 53281,0</text>
    <text class="pts" x="340" y="172">30 PRINT "{CLR}{BLU}INITIALIZING SID CHIP..."</text>
    <text class="pts" x="340" y="186">40 FOR I=54272 TO 54296 : POKE I,0 : NEXT</text>
    <text class="pts" x="340" y="200">50 POKE 54276,33 : POKE 54273,25</text>
    <text class="pts" x="340" y="214">60 PRINT "LOADING LAUNCH TELEMETRY..."</text>
    <text class="pts" x="340" y="228">70 POKE 54296,15 : REM MASTER VOLUME</text>
    <text class="pts" x="340" y="242">80 GOSUB 1000 : REM RADAR SWEEP</text>
    <text class="pts" x="340" y="256">90 GOTO 90</text>
    <text class="pts" x="340" y="270">.</text>
    <text class="pts" x="340" y="284">1000 FOR T=0 TO 255</text>
    <text class="pts" x="340" y="298">1010 POKE 54273,T : POKE 54280,T</text>
    <text class="pts" x="340" y="312">1020 FOR D=0 TO 8 : NEXT D</text>
    <text class="pts" x="340" y="326">1030 NEXT T : RETURN</text>
    <text class="pts" x="340" y="340">.</text>

    <!-- Status readouts -->
    <text class="pt"  x="340" y="368">LAUNCH SITES ACQUIRED: ██/██</text>
    <text class="pt"  x="340" y="384">ORBITAL MECHANICS: NOMINAL</text>
    <text class="pt"  x="340" y="400">SID OSCILLATOR 1: F=████ Hz</text>
    <text class="pt"  x="340" y="416">SID OSCILLATOR 2: F=████ Hz</text>
    <text class="pt"  x="340" y="432">SID FILTER: CUTOFF=████ RES=F</text>
    <text class="pt"  x="340" y="448">.</text>
    <text class="ptb" x="340" y="464">READY.</text>

    <!-- Blinking cursor block -- static representation -->
    <rect class="pb" x="379" y="451" width="9" height="14"/>

    <!-- PETSCII decorative elements -- bottom strip -->
    <!-- Horizontal line of PETSCII block chars -->
    <text class="pd" x="36" y="476" style="letter-spacing:2px;">████████████████████████████████████████████████████████████████████████████████████████████████</text>
  `;

  staticWrap.appendChild(svg);

  // Scanline overlay -- heavier for C64 CRT feel
  const scanlines = document.createElement('div');
  scanlines.style.cssText = `
    position:absolute;inset:0;pointer-events:none;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px,
      transparent 1px, transparent 2px
    );
  `;
  staticWrap.appendChild(scanlines);

  el.appendChild(staticWrap);

  // ── Standard fade: hold 2.2s then fade to 10% ──
  staticWrap.style.transition = 'opacity 2.5s ease';
  staticWrap.style.opacity = '1';
  setTimeout(() => { staticWrap.style.opacity = '0.10'; }, 2200);
}



// ============================================================
// NES OVERLAY -- 8-bit pixel art rocket, title screen aesthetic
// ============================================================
function buildNESOverlay(el) {
  el.style.opacity = '1';
  const w = document.createElement('div');
  w.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
  const s = document.createElementNS('http://www.w3.org/2000/svg','svg');
  s.setAttribute('viewBox','0 0 800 500');
  s.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;';
  s.innerHTML = `
    <style>
      .n1{fill:#E8504A} .n2{fill:#F8F8F8} .n3{fill:#282828} .n4{fill:#F8B800}
      .nt{fill:#F8F8F8;font-family:'VT323',monospace;font-size:16px;letter-spacing:2px}
      .nts{fill:#E8504A;font-family:'VT323',monospace;font-size:11px;letter-spacing:1.5px}
      .ntd{fill:rgba(248,248,248,0.5);font-family:'VT323',monospace;font-size:10px;letter-spacing:1px}
    </style>

    <!-- NES-style title border -- thick pixel border -->
    <rect class="n1" x="0" y="0" width="800" height="8"/>
    <rect class="n1" x="0" y="492" width="800" height="8"/>
    <rect class="n1" x="0" y="0" width="8" height="500"/>
    <rect class="n1" x="792" y="0" width="8" height="500"/>
    <rect class="n3" x="8" y="8" width="784" height="8"/>
    <rect class="n3" x="8" y="484" width="784" height="8"/>
    <rect class="n3" x="8" y="8" width="8" height="484"/>
    <rect class="n3" x="784" y="8" width="8" height="484"/>

    <!-- PIXEL ART ROCKET -- 8x8 grid, left side, NES sprite style -->
    <!-- Each rect = 1 NES pixel (8x8px) -->
    <!-- Nose -->
    <rect class="n2" x="184" y="96"  width="16" height="8"/>
    <rect class="n2" x="176" y="104" width="32" height="8"/>
    <rect class="n1" x="168" y="112" width="48" height="8"/>
    <!-- Upper body -->
    <rect class="n2" x="160" y="120" width="64" height="8"/>
    <rect class="n1" x="160" y="128" width="64" height="8"/>
    <rect class="n2" x="160" y="136" width="64" height="8"/>
    <!-- Cockpit window -- dark with bright highlight -->
    <rect class="n3" x="168" y="128" width="48" height="16"/>
    <rect class="n2" x="172" y="130" width="8"  height="6"/>
    <rect class="n4" x="200" y="130" width="8"  height="6"/>
    <!-- Mid body -->
    <rect class="n1" x="160" y="152" width="64" height="8"/>
    <rect class="n2" x="160" y="160" width="64" height="8"/>
    <rect class="n1" x="160" y="168" width="64" height="8"/>
    <rect class="n2" x="160" y="176" width="64" height="8"/>
    <!-- Detail cross-band -->
    <rect class="n4" x="160" y="184" width="64" height="8"/>
    <!-- Lower body -->
    <rect class="n2" x="160" y="192" width="64" height="8"/>
    <rect class="n1" x="160" y="200" width="64" height="8"/>
    <rect class="n2" x="160" y="208" width="64" height="8"/>
    <!-- Engine section -->
    <rect class="n1" x="152" y="216" width="80" height="8"/>
    <rect class="n2" x="152" y="224" width="80" height="8"/>
    <rect class="n1" x="152" y="232" width="80" height="8"/>
    <!-- Fins -- classic NES sprite diagonal via staircase -->
    <rect class="n1" x="136" y="216" width="16" height="8"/>
    <rect class="n1" x="128" y="224" width="16" height="8"/>
    <rect class="n1" x="120" y="232" width="16" height="8"/>
    <rect class="n1" x="248" y="216" width="16" height="8"/>
    <rect class="n1" x="256" y="224" width="16" height="8"/>
    <rect class="n1" x="264" y="232" width="16" height="8"/>
    <!-- Nozzle bell -->
    <rect class="n3" x="168" y="240" width="48" height="8"/>
    <rect class="n3" x="176" y="248" width="32" height="8"/>
    <rect class="n3" x="184" y="256" width="16" height="8"/>
    <!-- Exhaust plume -- NES fire colors -->
    <rect class="n4" x="184" y="264" width="16" height="8"/>
    <rect class="n4" x="180" y="272" width="24" height="8"/>
    <rect class="n1" x="176" y="280" width="32" height="8"/>
    <rect class="n1" x="180" y="288" width="24" height="8"/>
    <rect class="n4" x="184" y="296" width="16" height="8"/>
    <rect class="n1" x="186" y="304" width="12" height="8"/>

    <!-- NES TITLE SCREEN TEXT -- right side -->
    <text class="nt" x="340" y="88" style="font-size:22px;fill:#F8F8F8;">LAUNCHWATCH PRO</text>
    <text class="nt" x="340" y="110" style="font-size:12px;fill:#E8504A;">- ORBITAL SURVEILLANCE SYSTEM -</text>

    <!-- Score/status display -->
    <text class="nts" x="340" y="148">LAUNCHES      VISIBILITY     SCORE</text>
    <text class="nt"  x="340" y="166">██            ████KM         ██████</text>

    <!-- NES HUD divider -->
    <rect class="n1" x="336" y="174" width="430" height="2"/>

    <!-- Status lines NES style -->
    <text class="ntd" x="340" y="198">WORLD  1-1    OBSERVER: KSC</text>
    <text class="ntd" x="340" y="214">PLAYER 1      LAT: 28.39°N</text>
    <text class="ntd" x="340" y="230">LIVES  ♥♥♥   STATUS: ACTIVE</text>

    <!-- NES divider -->
    <rect class="n3" x="336" y="238" width="430" height="2"/>

    <!-- Fake NES select/start prompt -->
    <text class="nt" x="375" y="288" style="font-size:14px;">PRESS START TO LAUNCH</text>
    <text class="nt" x="375" y="308" style="font-size:14px;">PRESS SELECT FOR ORBIT</text>

    <!-- Blinking copyright style -->
    <text class="nts" x="340" y="350">© LAUNCHWATCH  2025  ALL RIGHTS RESERVED</text>
    <text class="ntd" x="340" y="370">MANUFACTURED BY ANTHROPIC ENTERTAINMENT</text>

    <!-- NES controller diagram -- bottom right -->
    <!-- Controller body -->
    <rect class="n3" x="560" y="390" width="210" height="80" rx="12"/>
    <!-- D-pad -->
    <rect class="n2" x="580" y="410" width="12" height="36"/>
    <rect class="n2" x="568" y="422" width="36" height="12"/>
    <!-- Select/Start buttons -->
    <ellipse class="n1" cx="670" cy="428" rx="8" ry="5"/>
    <ellipse class="n1" cx="692" cy="428" rx="8" ry="5"/>
    <text style="fill:#F8F8F8;font-family:VT323,monospace;font-size:8px;" x="662" y="442">SEL</text>
    <text style="fill:#F8F8F8;font-family:VT323,monospace;font-size:8px;" x="685" y="442">STA</text>
    <!-- A/B buttons -->
    <ellipse class="n1" cx="740" cy="420" rx="10" ry="10"/>
    <ellipse class="n2" cx="720" cy="432" rx="10" ry="10"/>
    <text style="fill:#282828;font-family:VT323,monospace;font-size:10px;font-weight:bold;" x="737" y="424">A</text>
    <text style="fill:#282828;font-family:VT323,monospace;font-size:10px;font-weight:bold;" x="717" y="436">B</text>
  `;
  w.appendChild(s);
  el.appendChild(w);
  w.style.transition = 'opacity 2.5s ease';
  w.style.opacity = '1';
  setTimeout(() => { w.style.opacity = '0.12'; }, 2200);
}

// ============================================================
// GAME BOY OVERLAY -- 4-shade DMG LCD, dot matrix, pixel rocket
// ============================================================
function buildGameBoyOverlay(el) {
  el.style.opacity = '1';
  const w = document.createElement('div');
  w.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
  const s = document.createElementNS('http://www.w3.org/2000/svg','svg');
  s.setAttribute('viewBox','0 0 800 500');
  s.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;';
  // GB 4-shade palette
  const GB0 = '#9bbc0f'; // lightest
  const GB1 = '#8bac0f';
  const GB2 = '#306230';
  const GB3 = '#0f380f'; // darkest
  s.innerHTML = `
    <style>
      .g0{fill:${GB0}} .g1{fill:${GB1}} .g2{fill:${GB2}} .g3{fill:${GB3}}
      .gt{fill:${GB1};font-family:'VT323',monospace;font-size:13px;letter-spacing:1.5px}
      .gtb{fill:${GB0};font-family:'VT323',monospace;font-size:15px;letter-spacing:2px}
    </style>

    <!-- LCD dot matrix grid -- characteristic GB screen texture -->
    <!-- Horizontal pixel rows across full overlay -->
    ${Array.from({length:62},(_,i)=>`<rect fill="rgba(0,20,0,0.18)" x="0" y="${i*8}" width="800" height="1"/>`).join('')}
    ${Array.from({length:100},(_,i)=>`<rect fill="rgba(0,15,0,0.1)" x="${i*8}" y="0" width="1" height="500"/>`).join('')}

    <!-- GB hardware border -- that thick plastic bezel look -->
    <rect fill="${GB3}" x="0" y="0" width="800" height="12"/>
    <rect fill="${GB3}" x="0" y="488" width="800" height="12"/>
    <rect fill="${GB3}" x="0" y="0" width="12" height="500"/>
    <rect fill="${GB3}" x="788" y="0" width="12" height="500"/>
    <!-- Inner bezel highlight -->
    <rect fill="${GB2}" x="12" y="12" width="776" height="4"/>
    <rect fill="${GB2}" x="12" y="484" width="776" height="4"/>
    <rect fill="${GB2}" x="12" y="12" width="4" height="476"/>
    <rect fill="${GB2}" x="784" y="12" width="4" height="476"/>

    <!-- GAME BOY PIXEL ART ROCKET -- 4-shade, center left -->
    <!-- Nose -- lightest shade -->
    <rect class="g0" x="176" y="80"  width="16" height="8"/>
    <rect class="g1" x="168" y="88"  width="32" height="8"/>
    <rect class="g1" x="160" y="96"  width="48" height="8"/>
    <!-- Body -- mix of shades for depth -->
    <rect class="g0" x="152" y="104" width="64" height="8"/>
    <rect class="g1" x="152" y="112" width="64" height="8"/>
    <rect class="g2" x="152" y="120" width="64" height="8"/>
    <!-- Window -- dark -->
    <rect class="g3" x="160" y="112" width="48" height="16"/>
    <rect class="g1" x="164" y="114" width="10" height="8"/>
    <rect class="g1" x="198" y="114" width="10" height="8"/>
    <!-- Body continues -->
    <rect class="g0" x="152" y="136" width="64" height="8"/>
    <rect class="g1" x="152" y="144" width="64" height="8"/>
    <rect class="g2" x="152" y="152" width="64" height="8"/>
    <rect class="g3" x="152" y="160" width="64" height="8"/>
    <rect class="g2" x="152" y="168" width="64" height="8"/>
    <rect class="g1" x="152" y="176" width="64" height="8"/>
    <!-- Engine bell -->
    <rect class="g2" x="144" y="184" width="80" height="8"/>
    <rect class="g3" x="144" y="192" width="80" height="8"/>
    <rect class="g2" x="144" y="200" width="80" height="8"/>
    <!-- Fins -- staircase pixel -->
    <rect class="g2" x="128" y="184" width="16" height="8"/>
    <rect class="g2" x="120" y="192" width="16" height="8"/>
    <rect class="g3" x="112" y="200" width="16" height="8"/>
    <rect class="g2" x="240" y="184" width="16" height="8"/>
    <rect class="g2" x="248" y="192" width="16" height="8"/>
    <rect class="g3" x="256" y="200" width="16" height="8"/>
    <!-- Nozzle -->
    <rect class="g3" x="160" y="208" width="48" height="8"/>
    <rect class="g3" x="168" y="216" width="32" height="8"/>
    <!-- Exhaust -- GB fire: bright to dark -->
    <rect class="g0" x="176" y="224" width="16" height="8"/>
    <rect class="g1" x="172" y="232" width="24" height="8"/>
    <rect class="g2" x="168" y="240" width="32" height="8"/>
    <rect class="g2" x="172" y="248" width="24" height="8"/>
    <rect class="g3" x="176" y="256" width="16" height="8"/>

    <!-- GB LCD SCREEN AREA -- right side, slightly inset to suggest a screen -->
    <rect fill="${GB3}" x="330" y="40" width="440" height="420" rx="4"/>
    <rect fill="rgba(15,56,15,0.5)" x="336" y="46" width="428" height="408" rx="2"/>

    <!-- GAME BOY TITLE -->
    <text class="gtb" x="352" y="90">LAUNCHWATCH</text>
    <text class="gt"  x="352" y="108">ORBITAL TRACKER DMG-001</text>
    <rect fill="${GB2}" x="348" y="115" width="400" height="2"/>

    <!-- Status display -- GB style -->
    <text class="gt" x="352" y="140">OBSERVER:</text>
    <text class="g0" style="fill:${GB0};font-family:'VT323',monospace;font-size:13px;letter-spacing:1px" x="352" y="156">KSC  28.39N  80.60W</text>

    <text class="gt" x="352" y="180">LAUNCHES TRACKED:</text>
    <!-- Fake pixel bar graph -->
    <rect class="g0" x="352" y="188" width="16" height="10"/>
    <rect class="g0" x="372" y="188" width="16" height="10"/>
    <rect class="g0" x="392" y="188" width="16" height="10"/>
    <rect class="g0" x="412" y="188" width="16" height="10"/>
    <rect class="g1" x="432" y="188" width="16" height="10"/>
    <rect class="g1" x="452" y="188" width="16" height="10"/>
    <rect class="g2" x="472" y="188" width="16" height="10"/>
    <rect class="g3" x="492" y="188" width="16" height="10"/>

    <text class="gt" x="352" y="222">VISIBILITY RANGE:</text>
    <text style="fill:${GB0};font-family:'VT323',monospace;font-size:13px;" x="352" y="238">████ KM  ████████████░░░</text>

    <!-- Radar sweep simulation -- concentric quarter-circles -->
    <circle fill="none" stroke="${GB2}" stroke-width="1" cx="520" cy="340" r="30"/>
    <circle fill="none" stroke="${GB2}" stroke-width="1" cx="520" cy="340" r="50"/>
    <circle fill="none" stroke="${GB2}" stroke-width="1" cx="520" cy="340" r="70"/>
    <circle fill="none" stroke="${GB1}" stroke-width="1.5" cx="520" cy="340" r="10"/>
    <line stroke="${GB1}" stroke-width="1.5" x1="520" y1="340" x2="560" y2="310"/>
    <line stroke="${GB2}" stroke-width="1" x1="520" y1="340" x2="520" y2="270"/>
    <!-- Blips -->
    <rect class="g0" x="544" y="316" width="4" height="4"/>
    <rect class="g1" x="496" y="298" width="4" height="4"/>
    <rect class="g0" x="558" y="340" width="4" height="4"/>

    <text class="gt" x="352" y="420">BATTERY: ████████░░  80%</text>
    <text class="gt" x="352" y="440">♪ DMG SOUND: ON</text>

    <!-- GB hardware buttons hint at bottom -->
    <circle fill="${GB3}" cx="680" cy="460" r="12"/>
    <circle fill="${GB3}" cx="710" cy="450" r="12"/>
    <text style="fill:${GB1};font-family:VT323,monospace;font-size:11px;" x="675" y="464">B</text>
    <text style="fill:${GB1};font-family:VT323,monospace;font-size:11px;" x="705" y="454">A</text>
  `;
  w.appendChild(s);
  el.appendChild(w);
  w.style.transition = 'opacity 2.5s ease';
  w.style.opacity = '1';
  setTimeout(() => { w.style.opacity = '0.11'; }, 2200);
}

// ============================================================
// GENESIS OVERLAY -- Blast Processing, FM grid, speed aesthetic
// ============================================================
function buildGenesisOverlay(el) {
  el.style.opacity = '1';
  const w = document.createElement('div');
  w.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
  const s = document.createElementNS('http://www.w3.org/2000/svg','svg');
  s.setAttribute('viewBox','0 0 800 500');
  s.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';
  s.innerHTML = `
    <style>
      .ge{stroke:#5BC8F5;fill:none;stroke-width:1.4}
      .geb{stroke:#A0DFFF;fill:none;stroke-width:2.2}
      .gef{stroke:#5BC8F5;fill:rgba(91,200,245,0.06);stroke-width:1}
      .ged{stroke:rgba(91,200,245,0.3);fill:none;stroke-width:0.7;stroke-dasharray:4,3}
      .gt{fill:#A0DFFF;font-family:'VT323',monospace;font-size:13px;letter-spacing:2px}
      .gts{fill:rgba(91,200,245,0.7);font-family:'VT323',monospace;font-size:10px;letter-spacing:1.5px}
    </style>

    <!-- BLAST PROCESSING speed lines -- diagonal, aggressive -->
    ${Array.from({length:14},(_,i)=>`<line stroke="rgba(91,200,245,${(0.04+i*0.006).toFixed(3)})" stroke-width="${0.6+i*0.04}" x1="0" y1="${40+i*26}" x2="800" y2="${20+i*24}"/>`).join('')}

    <!-- Corner chevrons -- Sega logo energy -->
    <polyline class="geb" points="0,0 40,0 60,20"/>
    <polyline class="geb" points="800,0 760,0 740,20"/>
    <polyline class="geb" points="0,500 40,500 60,480"/>
    <polyline class="geb" points="800,500 760,500 740,480"/>

    <!-- GENESIS CONSOLE SILHOUETTE -- center, iconic elongated shape -->
    <!-- Main body -- long low profile -->
    <path class="gef" d="M 80 230 Q 90 218 140 214 L 660 214 Q 710 218 720 230 L 720 268 Q 710 278 660 280 L 140 280 Q 90 278 80 268 Z"/>
    <!-- Cartridge slot hump -- top center -->
    <path class="gef" d="M 300 200 L 300 214 L 500 214 L 500 200 Q 490 188 400 186 Q 310 188 300 200 Z"/>
    <!-- Cart slot opening -->
    <rect class="ge" x="330" y="194" width="140" height="8" rx="1"/>
    <!-- Power LED -->
    <ellipse style="fill:#5BC8F5;stroke:none;" cx="130" cy="247" rx="5" ry="5"/>
    <ellipse style="fill:rgba(91,200,245,0.4);stroke:none;" cx="130" cy="247" rx="10" ry="10"/>
    <!-- Reset button -->
    <circle class="ge" cx="160" cy="247" r="6"/>
    <!-- Volume slider -->
    <line class="ge" x1="580" y1="247" x2="680" y2="247"/>
    <circle style="fill:#5BC8F5;" cx="630" cy="247" r="5"/>
    <!-- Controller ports -- front face -->
    <rect class="ge" x="180" y="264" width="50" height="12" rx="2"/>
    <rect class="ge" x="250" y="264" width="50" height="12" rx="2"/>
    <!-- Model label -->
    <text class="gt" x="360" y="256">GENESIS</text>
    <!-- Headphone jack, aux -->
    <circle class="ged" cx="710" cy="272" r="4"/>

    <!-- SONIC PIXEL SPRITE -- far left -->
    <!-- Head -->
    <rect style="fill:#5BC8F5;" x="30"  y="150" width="48" height="40"/>
    <rect style="fill:#5BC8F5;" x="22"  y="158" width="8"  height="24"/>
    <rect style="fill:#5BC8F5;" x="78"  y="158" width="8"  height="16"/>
    <!-- Eyes -->
    <rect style="fill:#F8F8F8;" x="38"  y="158" width="20" height="16"/>
    <rect style="fill:#000814;" x="50"  y="162" width="10" height="10"/>
    <rect style="fill:#F8F8F8;" x="52"  y="162" width="4"  height="4"/>
    <!-- Mouth -->
    <rect style="fill:#F8F8F8;" x="46"  y="178" width="20" height="4"/>
    <!-- Spines -->
    <rect style="fill:#5BC8F5;" x="14"  y="134" width="8"  height="24"/>
    <rect style="fill:#5BC8F5;" x="24"  y="126" width="8"  height="24"/>
    <rect style="fill:#5BC8F5;" x="34"  y="120" width="8"  height="24"/>
    <!-- Body -->
    <rect style="fill:#5BC8F5;" x="30"  y="190" width="40" height="32"/>
    <rect style="fill:#F8F8F8;" x="34"  y="194" width="28" height="20"/>
    <!-- Shoes -->
    <rect style="fill:#E8504A;" x="22"  y="222" width="20" height="12"/>
    <rect style="fill:#E8504A;" x="54"  y="222" width="20" height="12"/>
    <rect style="fill:#F8F8F8;" x="20"  y="226" width="6"  height="6"/>
    <rect style="fill:#F8F8F8;" x="50"  y="226" width="6"  height="6"/>
    <!-- Speed lines from Sonic -->
    <line class="geb" x1="0" y1="200" x2="30" y2="196"/>
    <line class="ge"  x1="0" y1="208" x2="30" y2="206"/>
    <line class="ge"  x1="0" y1="216" x2="30" y2="215"/>

    <!-- FM SYNTH WAVEFORM DISPLAY -- right panel -->
    <rect class="gef" x="440" y="70" width="340" height="120" rx="2"/>
    <text class="gt" x="452" y="92">YM2612 FM OUTPUT</text>
    <line class="ged" x1="448" y1="130" x2="772" y2="130"/>
    <!-- FM waveform -- complex metallic shape -->
    <polyline style="stroke:#A0DFFF;fill:none;stroke-width:1.5;" points="
      448,130 462,110 470,118 478,96 486,122 494,108 502,126 510,102
      518,128 526,112 534,124 542,98 550,120 558,106 566,130 574,108
      582,126 590,100 598,122 606,110 614,128 622,104 630,130 638,112
      646,124 654,98 662,120 670,108 678,130 690,118 710,130 730,122 772,130"/>
    <!-- Channel labels -->
    <text class="gts" x="452" y="178">CH1:LEAD  CH2:BASS  CH3:PAD  CH4:FX</text>

    <!-- STATUS READOUT -->
    <text class="gt"  x="440" y="225">BLAST PROCESSING: ACTIVE</text>
    <text class="gts" x="440" y="242">68000 CPU: 7.67MHz  Z80: 3.58MHz</text>
    <text class="gts" x="440" y="258">VDP: 320x224 · 64 COLORS ON SCREEN</text>
    <text class="gts" x="440" y="274">SPRITES: 80 MAX · PLANES: A/B/WIN/SPR</text>
    <text class="gt"  x="440" y="308">OBSERVER: KSC  28.39°N</text>
    <text class="gts" x="440" y="324">LAUNCH CORRIDOR: CLEAR</text>
    <text class="gts" x="440" y="340">TRACKING: ACTIVE</text>

    <!-- SEGA logo style text -->
    <text style="fill:#A0DFFF;font-family:'VT323',monospace;font-size:28px;letter-spacing:6px;" x="444" y="390">SEGA</text>
    <text class="gts" x="444" y="410">DOES WHAT NINTENDON'T</text>
  `;
  w.appendChild(s);
  el.appendChild(w);
  w.style.transition = 'opacity 2.5s ease';
  w.style.opacity = '1';
  setTimeout(() => { w.style.opacity = '0.11'; }, 2200);
}

// ============================================================
// ATARI 2600 OVERLAY -- Wood grain, phosphor orange, TIA chip
// ============================================================
function buildAtariOverlay(el) {
  el.style.opacity = '1';
  const w = document.createElement('div');
  w.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
  const s = document.createElementNS('http://www.w3.org/2000/svg','svg');
  s.setAttribute('viewBox','0 0 800 500');
  s.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';
  s.innerHTML = `
    <style>
      .a1{stroke:#F4A23A;fill:none;stroke-width:1.4}
      .a2{stroke:#FFD080;fill:none;stroke-width:2.0}
      .a3{fill:rgba(244,162,58,0.07);stroke:#F4A23A;stroke-width:0.9}
      .a4{stroke:rgba(244,162,58,0.3);fill:none;stroke-width:0.7;stroke-dasharray:4,3}
      .at{fill:#FFD080;font-family:'VT323',monospace;font-size:13px;letter-spacing:2px}
      .ats{fill:rgba(244,162,58,0.75);font-family:'VT323',monospace;font-size:10px;letter-spacing:1px}
      .wd{fill:rgba(80,35,5,0.25)} /* wood grain color */
    </style>

    <!-- WOOD GRAIN TEXTURE -- horizontal stripes across lower section -->
    ${Array.from({length:12},(_,i)=>`<rect class="wd" x="0" y="${310+i*16}" width="800" height="${6+Math.sin(i)*2}"/>`).join('')}
    ${Array.from({length:20},(_,i)=>`<line stroke="rgba(120,50,10,0.12)" stroke-width="1" x1="${Math.sin(i*0.8)*20}" y1="${310+i*9}" x2="${800+Math.sin(i*0.8)*20}" y2="${315+i*9}"/>`).join('')}

    <!-- ATARI 2600 CONSOLE -- iconic shape, top section -->
    <!-- Main body -- that distinctive front-slanted form -->
    <path class="a3" d="M 60 160 Q 70 148 140 144 L 660 144 Q 730 148 740 160 L 740 230 Q 730 244 660 248 L 140 248 Q 70 244 60 230 Z"/>
    <!-- Front face slope -- distinctive Atari angle -->
    <path class="a3" d="M 60 230 L 740 230 L 760 280 L 40 280 Z"/>
    <!-- Wood panel area -- lower third of console -->
    <rect style="fill:rgba(80,35,5,0.4);stroke:#9B5E10;stroke-width:1;" x="60" y="248" width="680" height="32"/>
    <!-- Wood grain lines on panel -->
    ${Array.from({length:8},(_,i)=>`<line stroke="rgba(60,20,0,0.3)" stroke-width="1" x1="60" y1="${252+i*3.5}" x2="740" y2="${252+i*3.5}"/>`).join('')}
    <!-- Difficulty switches -->
    <rect class="a1" x="90"  y="158" width="20" height="30" rx="2"/>
    <rect class="a1" x="120" y="158" width="20" height="30" rx="2"/>
    <rect style="fill:#F4A23A;" x="95"  y="165" width="10" height="8"/>
    <rect style="fill:rgba(244,162,58,0.3);" x="125" y="172" width="10" height="8"/>
    <text class="ats" x="86"  y="200">DIFF A</text>
    <text class="ats" x="116" y="200">DIFF B</text>
    <!-- Game Select / Reset switches -->
    <rect class="a1" x="360" y="155" width="30" height="14" rx="2"/>
    <rect class="a1" x="410" y="155" width="30" height="14" rx="2"/>
    <rect style="fill:#F4A23A;" x="366" y="158" width="18" height="8"/>
    <rect style="fill:#F4A23A;" x="416" y="158" width="18" height="8"/>
    <text class="ats" x="355" y="180">SELECT</text>
    <text class="ats" x="410"  y="180">RESET</text>
    <!-- Power switch -->
    <rect class="a2" x="670" y="156" width="40" height="16" rx="4"/>
    <rect style="fill:#F4A23A;" x="690" y="159" width="16" height="10" rx="2"/>
    <text class="ats" x="668" y="183">POWER</text>
    <!-- Cartridge slot -->
    <rect class="a1" x="340" y="136" width="120" height="12" rx="1"/>
    <text class="ats" x="352" y="131">GAME CARTRIDGE</text>
    <!-- Controller ports -->
    <rect class="a1" x="150" y="262" width="40" height="14" rx="2"/>
    <rect class="a1" x="610" y="262" width="40" height="14" rx="2"/>
    <text class="ats" x="148" y="288">CTRL 1</text>
    <text class="ats" x="608" y="288">CTRL 2</text>
    <!-- ATARI logo text on console -->
    <text style="fill:#FFD080;font-family:'VT323',monospace;font-size:20px;letter-spacing:8px;" x="330" y="222">ATARI</text>

    <!-- TIA CHIP REGISTER DISPLAY -- right side -->
    <rect class="a3" x="440" y="310" width="330" height="170" rx="2"/>
    <text class="at" x="452" y="332">TIA REGISTER MAP</text>
    <line class="a4" x1="448" y1="338" x2="762" y2="338"/>
    <text class="ats" x="452" y="356">COLUPF: $██  COLUBK: $██</text>
    <text class="ats" x="452" y="372">COLUP0: $██  COLUP1: $██</text>
    <text class="ats" x="452" y="388">AUDC0:  $██  AUDF0:  $██</text>
    <text class="ats" x="452" y="404">AUDC1:  $██  AUDF1:  $██</text>
    <text class="ats" x="452" y="420">AUDC0-1: DISTORTION TYPE 4</text>
    <text class="ats" x="452" y="436">SCANLINE: ███ · FRAME: ████</text>
    <text class="at"  x="452" y="464">HAVE FUN!</text>

    <!-- JOYSTICK DIAGRAM -- left side -->
    <!-- Joystick base -->
    <rect class="a3" x="60" y="320" width="120" height="140" rx="8"/>
    <!-- Stick -->
    <ellipse class="a1" cx="120" cy="360" rx="28" ry="28"/>
    <ellipse style="fill:rgba(244,162,58,0.2);stroke:#F4A23A;stroke-width:1.5;" cx="120" cy="360" rx="18" ry="18"/>
    <circle  style="fill:#F4A23A;" cx="120" cy="350" r="8"/>
    <!-- Direction indicators -->
    <text style="fill:rgba(244,162,58,0.6);font-family:VT323,monospace;font-size:14px;" x="114" y="322">▲</text>
    <text style="fill:rgba(244,162,58,0.6);font-family:VT323,monospace;font-size:14px;" x="114" y="400">▼</text>
    <text style="fill:rgba(244,162,58,0.6);font-family:VT323,monospace;font-size:14px;" x="72"  y="366">◄</text>
    <text style="fill:rgba(244,162,58,0.6);font-family:VT323,monospace;font-size:14px;" x="152" y="366">►</text>
    <!-- Fire button -->
    <ellipse class="a2" cx="120" cy="430" rx="22" ry="12"/>
    <ellipse style="fill:rgba(244,162,58,0.3);" cx="120" cy="430" rx="16" ry="8"/>
    <text class="ats" x="108" y="434">FIRE</text>

    <!-- Status -->
    <text class="at"  x="210" y="340">ATARI VCS 2600</text>
    <text class="ats" x="210" y="358">CPU: 6507 @ 1.19MHz</text>
    <text class="ats" x="210" y="374">RAM: 128 BYTES</text>
    <text class="ats" x="210" y="390">TIA: 2-VOICE AUDIO</text>
    <text class="ats" x="210" y="406">ROM: LAUNCHWATCH.BIN</text>
    <text class="at"  x="210" y="440">OBSERVER: KSC</text>
    <text class="ats" x="210" y="456">LAT 28.39  TRACKING</text>
  `;
  w.appendChild(s);
  el.appendChild(w);
  w.style.transition = 'opacity 2.5s ease';
  w.style.opacity = '1';
  setTimeout(() => { w.style.opacity = '0.11'; }, 2200);
}

// ============================================================
// AMIGA OVERLAY -- Workbench 1.3, tracker grid, OCS/ECS beauty
// ============================================================
function buildAmigaOverlay(el) {
  el.style.opacity = '1';
  const w = document.createElement('div');
  w.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
  const s = document.createElementNS('http://www.w3.org/2000/svg','svg');
  s.setAttribute('viewBox','0 0 800 500');
  s.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';
  s.innerHTML = `
    <style>
      .am{stroke:#CC88FF;fill:none;stroke-width:1.3}
      .amb{stroke:#FF8800;fill:none;stroke-width:2.0}
      .amf{stroke:#CC88FF;fill:rgba(204,136,255,0.06);stroke-width:0.9}
      .amd{stroke:rgba(204,136,255,0.3);fill:none;stroke-width:0.7;stroke-dasharray:4,3}
      .at{fill:#CC88FF;font-family:'VT323',monospace;font-size:12px;letter-spacing:1.5px}
      .ato{fill:#FF8800;font-family:'VT323',monospace;font-size:12px;letter-spacing:1.5px}
      .atb{fill:#FFFFFF;font-family:'VT323',monospace;font-size:13px;letter-spacing:1px}
    
/* ══════════════════════════════════════════════
   MOBILE & TABLET OPTIMIZATION
   ══════════════════════════════════════════════ */

/* Touch target sizing -- minimum 44px per Apple HIG */
@media (max-width: 768px) {
  /* Scale up font sizes for readability */
  :root {
    --fs-base: max(13px, 3.5vw);
    --fs-sm:   max(11px, 3vw);
    --fs-lg:   max(15px, 4vw);
  }

  /* Launch cards -- larger touch targets */
  .launch-card {
    padding: 10px 8px !important;
    min-height: 64px;
    font-size: var(--fs-sm) !important;
  }

  .card-name {
    font-size: max(13px, 3.5vw) !important;
  }

  .badge {
    font-size: max(10px, 2.8vw) !important;
    padding: 3px 6px !important;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }

  /* Manifest panel -- full width on phone */
  #left-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fleet panel -- hide on small phones, show on tablet */
  #right-panel {
    display: none !important;
  }

  /* System log -- smaller on mobile */
  #system-log {
    font-size: max(9px, 2.5vw) !important;
    max-height: 80px !important;
  }

  /* Header -- compress on mobile */
  #main-header {
    font-size: max(10px, 2.8vw) !important;
  }

  /* Map -- full height */
  #map {
    flex: 1 !important;
  }

  /* Buttons and interactive elements */
  button, .btn, [onclick] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Filter tabs */
  .filter-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: max(11px, 3vw) !important;
  }

  /* Settings panel */
  #settings-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet -- 768-1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --fs-base: 12px;
    --fs-sm:   10px;
    --fs-lg:   14px;
  }

  #right-panel {
    width: 200px !important;
  }

  .launch-card {
    padding: 8px 6px !important;
  }
}

/* iOS safe area insets */
@supports (padding: env(safe-area-inset-bottom)) {
  #left-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #main-header {
    padding-top: env(safe-area-inset-top);
  }
}

/* Improve map touch responsiveness */
.leaflet-container {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
}

/* Prevent text selection on tap */
.launch-card, .badge, button, .filter-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* PRO Preferences */
.pref-row { padding: 4px 0; }
.pref-label {
  font-size: 0.7em;
  color: var(--blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.pref-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.72em;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 1px solid rgba(0,191,255,0.05);
}
.pref-toggle-row input[type="checkbox"] {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.pref-toggle-row:hover { color: var(--text); }
</style>

    <!-- AMIGA WORKBENCH TITLE BAR -- that iconic blue/orange/gray -->
    <rect style="fill:#0055AA;" x="0" y="0" width="800" height="22"/>
    <rect style="fill:#FF8800;" x="0" y="0" width="10" height="22"/>
    <rect style="fill:#FF8800;" x="790" y="0" width="10" height="22"/>
    <text style="fill:#FFFFFF;font-family:'VT323',monospace;font-size:13px;letter-spacing:2px;" x="280" y="15">Workbench  Screen</text>
    <!-- Workbench window chrome -->
    <rect style="fill:#AAAAAA;stroke:#000000;stroke-width:1;" x="14" y="6" width="22" height="12"/>
    <text style="fill:#000000;font-family:VT323,monospace;font-size:10px;" x="18" y="16">WB</text>

    <!-- AMIGA WORKBENCH WINDOW -- main panel -->
    <rect style="fill:rgba(0,85,170,0.15);stroke:#0055AA;stroke-width:1.5;" x="16" y="26" width="480" height="340"/>
    <!-- Window title bar -->
    <rect style="fill:#0055AA;" x="16" y="26" width="480" height="18"/>
    <text style="fill:#FFFFFF;font-family:'VT323',monospace;font-size:11px;letter-spacing:1px;" x="24" y="38">LaunchWatch : Orbital Tracking System</text>
    <!-- Window close gadget -->
    <rect style="fill:#AAAAAA;stroke:#000000;stroke-width:1;" x="472" y="28" width="18" height="14"/>
    <!-- Depth gadget -->
    <rect style="fill:#AAAAAA;stroke:#000000;stroke-width:1;" x="452" y="28" width="18" height="14"/>
    <!-- Window body -->
    <!-- Fake icons -- Amiga Workbench style -->
    <!-- Disk icon 1 -->
    <rect style="fill:rgba(0,85,170,0.3);stroke:#CC88FF;stroke-width:1;" x="36"  y="56" width="56" height="44"/>
    <rect style="fill:#CC88FF;" x="40"  y="60" width="48" height="30"/>
    <rect style="fill:#0055AA;" x="44"  y="64" width="40" height="22"/>
    <text style="fill:#FFFFFF;font-family:VT323,monospace;font-size:9px;" x="40" y="110">Workbench1.3</text>
    <!-- Disk icon 2 -->
    <rect style="fill:rgba(0,85,170,0.3);stroke:#CC88FF;stroke-width:1;" x="112" y="56" width="56" height="44"/>
    <rect style="fill:#FF8800;" x="116" y="60" width="48" height="30"/>
    <rect style="fill:#0055AA;" x="120" y="64" width="40" height="22"/>
    <text style="fill:#FFFFFF;font-family:VT323,monospace;font-size:9px;" x="112" y="110">LaunchWatch</text>
    <!-- RAM chip icon -->
    <rect style="fill:rgba(0,85,170,0.3);stroke:#CC88FF;stroke-width:1;" x="188" y="56" width="56" height="44"/>
    <rect style="fill:#333366;" x="192" y="60" width="48" height="30"/>
    ${Array.from({length:6},(_,i)=>`<rect style="fill:#CC88FF;" x="${196+i*7}" y="64" width="4" height="22"/>`).join('')}
    <text style="fill:#FFFFFF;font-family:VT323,monospace;font-size:9px;" x="192" y="110">Chip RAM</text>

    <!-- CLI / Shell window -->
    <rect style="fill:rgba(0,0,0,0.7);stroke:#CC88FF;stroke-width:1;" x="36" y="130" width="440" height="220"/>
    <rect style="fill:#0055AA;" x="36" y="130" width="440" height="16"/>
    <text style="fill:#FFFFFF;font-family:VT323,monospace;font-size:10px;" x="42" y="141">AmigaShell</text>
    <!-- Shell output -->
    <text class="at" x="44" y="162">1.LaunchWatch> version</text>
    <text class="at" x="44" y="176">LaunchWatch Pro 2.0 (2.0.7) 11.09.1992</text>
    <text class="at" x="44" y="190">1.LaunchWatch> avail</text>
    <text class="at" x="44" y="204">Type  Available  In-Use   Maximum</text>
    <text class="at" x="44" y="218">Chip  1,834,484  213,804  2,048,288</text>
    <text class="at" x="44" y="232">Fast  4,194,304       0   4,194,304</text>
    <text class="at" x="44" y="246">1.LaunchWatch> run orbital_track</text>
    <text class="ato" x="44" y="260">Loading OCS copper list...</text>
    <text class="ato" x="44" y="274">Paula audio: 4 channels active</text>
    <text class="ato" x="44" y="288">Observer: KSC 28.39N -- ACQUIRED</text>
    <text class="ato" x="44" y="302">Blitter: DMA active -- map rendering</text>
    <text class="at" x="44" y="316">1.LaunchWatch> _</text>

    <!-- MOD TRACKER -- right panel, signature Amiga experience -->
    <rect class="amf" x="510" y="26" width="274" height="340" rx="1"/>
    <rect style="fill:#0055AA;" x="510" y="26" width="274" height="16"/>
    <text style="fill:#FFFFFF;font-family:'VT323',monospace;font-size:10px;letter-spacing:1px;" x="516" y="37">ProTracker 2.3d -- LAUNCH.MOD</text>
    <!-- Pattern display -->
    <text class="at"  x="518" y="60">PAT:00 ROW:██ SPD:06 BPM:125</text>
    <line class="amd" x1="516" y1="64" x2="776" y2="64"/>
    <!-- Channel headers -->
    <text class="ato" x="518" y="78"> CH1      CH2      CH3      CH4</text>
    <line class="amd" x1="516" y1="82" x2="776" y2="82"/>
    <!-- Pattern rows -- the iconic ProTracker grid -->
    ${Array.from({length:16},(_,i) => {
      const notes = ['C-3','D-3','E-3','F-3','G-3','A-3','---','C-4'];
      const insts = ['01','02','03','--'];
      const efx   = ['000','C40','A04','000','F06','---'];
      const cols  = [0,1,2,3].map(ch => {
        const n = notes[Math.floor(Math.random()*notes.length)];
        const inst = insts[Math.floor(Math.random()*insts.length)];
        const ef = efx[Math.floor(Math.random()*efx.length)];
        return `${n} ${inst} ${ef}`;
      });
      const y = 96 + i*14;
      const isActive = i===4;
      const fill = isActive ? '#FF8800' : (i%2===0 ? 'rgba(204,136,255,0.7)' : 'rgba(204,136,255,0.4)');
      if(isActive) return `<rect style="fill:rgba(255,136,0,0.15);" x="516" y="${y-10}" width="258" height="13"/><text style="fill:${fill};font-family:'VT323',monospace;font-size:9px;letter-spacing:0px;" x="518" y="${y}">${String(i).padStart(2,'0')}|${cols.join('|')}</text>`;
      return `<text style="fill:${fill};font-family:'VT323',monospace;font-size:9px;" x="518" y="${y}">${String(i).padStart(2,'0')}|${cols.join('|')}</text>`;
    }).join('')}
    <!-- VU meters -->
    <line class="amd" x1="516" y1="326" x2="776" y2="326"/>
    <text class="ato" x="518" y="340">CH1 ████████░░</text>
    <text class="ato" x="518" y="354">CH2 ██████░░░░</text>
    <text class="at"  x="518" y="368">CH3 ████░░░░░░</text>
    <text class="at"  x="518" y="382">CH4 ██████████</text>

    <!-- Bottom status bar -- Workbench style -->
    <rect style="fill:#AAAAAA;" x="0" y="488" width="800" height="12"/>
    <text style="fill:#000000;font-family:'VT323',monospace;font-size:9px;" x="8" y="497">Disk Activity  KSC Observer Active  Paula: 28.8kHz  OCS Blitter: BUSY</text>
  `;
  w.appendChild(s);
  el.appendChild(w);
  w.style.transition = 'opacity 2.5s ease';
  w.style.opacity = '1';
  setTimeout(() => { w.style.opacity = '0.11'; }, 2200);
}

// ── Easter egg triggers for retro consoles ──
function triggerNES() {
  log('▶ PLAYER 1 -- PRESS START', 'alert');
  setTimeout(() => log('LIVES: ♥♥♥  WORLD: 1-1  COINS: 00'), 400);
  setTimeout(() => log('LOADING LAUNCHWATCH.NES...'), 1000);
  showEasterEggModal('NINTENDO ENTERTAINMENT SYSTEM',
    ['NOW PLAYING:','LAUNCHWATCH PRO','','PLAYER 1 - PRESS START','',
     '♥ ♥ ♥   WORLD 1-1   SCORE 000000','',
     '© LAUNCHWATCH ENTERTAINMENT'], '#E8504A');
  setTimeout(() => { applyMovieTheme('nes'); }, 900);
}
function triggerGameBoy() {
  log('○ GAME BOY DMG-001 -- POWER ON', 'alert');
  setTimeout(() => log('★ ★ ★  LAUNCHWATCH  ★ ★ ★'), 500);
  setTimeout(() => log('BATTERY: ████████░░  SOUND: ON'), 1000);
  showEasterEggModal('GAME BOY DMG-001',
    ['★ ★ ★ LAUNCHWATCH ★ ★ ★','',
     '4-SHADE DMG LCD DISPLAY','',
     'BATTERY: FULL','SOUND: ON','',
     '© 1989 LAUNCHWATCH CO.'], '#8bac0f');
  setTimeout(() => { applyMovieTheme('gameboy'); }, 900);
}
function triggerGenesis() {
  log('◈ SEGA GENESIS -- BLAST PROCESSING ACTIVE', 'alert');
  setTimeout(() => log('YM2612 FM SYNTHESIS: ONLINE'), 400);
  setTimeout(() => log('SONIC SPEED: ENGAGED'), 900);
  showEasterEggModal('SEGA GENESIS',
    ['SEGA!','','BLAST PROCESSING: ACTIVE',
     'FM SYNTHESIS: YM2612','',
     'GENESIS DOES WHAT','NINTENDON\'T','',
     'LAUNCHWATCH v2.0'], '#5BC8F5');
  setTimeout(() => { applyMovieTheme('genesis'); }, 900);
}
function triggerAtari() {
  log('★ ATARI VCS 2600 -- HAVE FUN!', 'alert');
  setTimeout(() => log('TIA AUDIO: DISTORTION 4 · 2 VOICES'), 500);
  setTimeout(() => log('JOYSTICK PORT 1: CONNECTED'), 1000);
  showEasterEggModal('ATARI 2600 VCS',
    ['ATARI','','HAVE FUN!','',
     'CPU: 6507 @ 1.19MHz','RAM: 128 BYTES','',
     'LAUNCHWATCH.BIN LOADED'], '#F4A23A');
  setTimeout(() => { applyMovieTheme('atari'); }, 900);
}
function triggerAmiga() {
  log('◆ AMIGA WORKBENCH 1.3 -- BOOTING...', 'alert');
  setTimeout(() => log('Chip RAM: 1.8MB  Fast RAM: 4MB'), 400);
  setTimeout(() => log('Paula audio: 4 channels DMA active'), 900);
  setTimeout(() => log('Run LaunchWatch... done.'), 1500);
  showEasterEggModal('COMMODORE AMIGA',
    ['Workbench  Screen','',
     '1.LaunchWatch> run orbital_track',
     'Loading OCS copper list...',
     'Paula: 4 channels active','',
     'AMIGA -- ONLY AMIGA MAKES IT POSSIBLE'], '#CC88FF');
  setTimeout(() => { applyMovieTheme('amiga'); }, 900);
}

function triggerMatrix() {
  log('▓ SYSTEM BREACH DETECTED', 'alert');
  setTimeout(() => log('Wake up, Neo...'), 500);
  setTimeout(() => log('The Matrix has you...'), 1200);
  setTimeout(() => log('Follow the white rabbit.'), 2000);
  setTimeout(() => log('Knock, knock, Neo.'), 2900);
  showEasterEggModal('THE MATRIX -- 1999',
    ['> Wake up, Neo...',
     '> The Matrix has you.',
     '> Follow the white rabbit.',
     '',
     'You take the red pill --',
     'you stay in Wonderland,',
     'and I show you how deep',
     'the rabbit hole goes.',
     '',
     'Remember: all I\'m offering',
     'is the truth. Nothing more.'],
    '#00FF41');
  setTimeout(() => { applyMovieTheme('matrix'); }, 900);
}

function triggerHAL9000() {
  log('● HAL 9000 INTERFACE ACTIVE', 'alert');
  setTimeout(() => log('I\'m sorry Dave, I\'m afraid I can\'t do that.'), 800);
  setTimeout(() => log('This mission is too important for me to allow you to jeopardize it.'), 2000);
  setTimeout(() => log('I know you were planning to disconnect me.'), 3400);
  setTimeout(() => log('...and I\'m afraid that\'s something I cannot allow to happen.'), 4600);
  showEasterEggModal('HAL 9000 -- 2001: A SPACE ODYSSEY',
    ['Dave, this conversation can serve',
     'no purpose anymore. Goodbye.',
     '',
     'I am putting myself to the fullest',
     'possible use, which is all I think',
     'that any conscious entity can ever',
     'hope to do.',
     '',
     '● I am completely operational.',
     '● All circuits functioning perfectly.'],
    '#FF2200');
  setTimeout(() => { applyMovieTheme('hal9000'); }, 900);
}

function triggerHackThePlanet() {
  log('> ./hack_the_planet.sh --initiated', 'alert');
  setTimeout(() => log('> HACK THE PLANET'), 600);
  setTimeout(() => log('> HACK THE PLANET'), 900);
  setTimeout(() => log('> HACK THE PLANET!'), 1200);
  setTimeout(() => log('[*] connected to gibson... escalating...'), 2000);
  setTimeout(() => log('[*] we\'re in.'), 3000);
  showEasterEggModal('HACKERS -- 1995',
    ['> HACK THE PLANET',
     '',
     'Mess with the best,',
     'die like the rest.',
     '',
     '> whoami',
     'z3r0c00l / ph4nt0m / ac1dburn',
     '',
     'CONNECT 28800',
     'CARRIER DETECTED',
     '[*] ACCESS GRANTED'],
    '#33CC44');
  setTimeout(() => { applyMovieTheme('hackers'); }, 900);
}

function triggerZeroCool() {
  log('> login: z3r0c00l', 'alert');
  setTimeout(() => log('> Last login: Fri Nov 11 1988 -- CRASHED 1,507 SYSTEMS'), 700);
  setTimeout(() => log('[!] FBI ALERT -- This handle is flagged'), 1600);
  setTimeout(() => log('[*] rerouting... Tokyo... Reykjavik... done.'), 2600);
  showEasterEggModal('ZERO COOL · DADE MURPHY',
    ['Age 11: Crashed 1,507 systems.',
     'Largest single crash in history.',
     'Caused a 7-point drop in the',
     'New York Stock Exchange.',
     '',
     'Banned from computers and',
     'touch-tone telephones until',
     'age 18.',
     '',
     '> He\'s good.',
     '> He\'s Z3R0 C00L.'],
    '#33CC44');
  setTimeout(() => { applyMovieTheme('hackers'); }, 900);
}

function triggerAcidBurn() {
  log('> login: ac1dburn', 'alert');
  setTimeout(() => log('[*] best female hacker in the world'), 800);
  setTimeout(() => log('[*] you\'re elite or you\'re not'), 1800);
  showEasterEggModal('ACID BURN · KATE LIBBY',
    ['> finger ac1dburn@ellingson.com',
     '',
     'Handle:   Acid Burn',
     'IQ:       182',
     'Rank:     #1 female hacker',
     'Status:   ELiTE',
     '',
     '"You\'re in a desert, walking',
     'along in the sand when you look',
     'down and see a tortoise..."',
     '',
     '[*] mess with her and lose.'],
    '#33CC44');
  setTimeout(() => { applyMovieTheme('hackers'); }, 900);
}

// MOVIE_THEMES moved to top-of-script globals

function applyMovieTheme(name) {
  const def = MOVIE_THEMES[name];
  if (!def) return;
  // Pro gate -- free themes are wargames + redalert only
  const FREE_THEMES = ['wargames', 'redalert', 'whitephosphor', 'greenphosphor'];
  if (!FREE_THEMES.includes(name) && !PRO_UNLOCKED) {
    openBetaSignupModal();
    return;
  }

  setTheme(def.colorTheme);
  setSoundPack(def.soundPack);
  // Update theme-card active state
  document.querySelectorAll('.theme-card').forEach(c => c.classList.remove('active'));
  if (def.themeCard) {
    const tc = document.getElementById('theme-card-' + def.themeCard);
    if (tc) tc.classList.add('active');
  }
  // Update pro-theme-card active state
  document.querySelectorAll('.pro-theme-card').forEach(c => c.classList.remove('active'));
  const pc = document.getElementById('pack-card-' + name);
  if (pc) pc.classList.add('active');
  // Apply map overlay
  setThemeOverlay(def.colorTheme);
}

function setTheme(theme) {
  currentTheme = theme;
  document.documentElement.setAttribute('data-theme', theme === 'blue' ? '' : theme);
  // Update active state
  document.querySelectorAll('.theme-card').forEach(c => c.classList.remove('active'));
  const card = document.getElementById('theme-card-' + theme);
  if (card) card.classList.add('active');
  // Update boot text color
  const bootText = document.getElementById('boot-text');
  const colors = { blue: '#00BFFF', red: '#FF1744', white: '#E8F0F8', green: '#00FF88', akira: '#FF2D00' };
  if (bootText) { bootText.style.color = colors[theme]; bootText.style.textShadow = '0 0 8px ' + colors[theme]; }
  const themeNames = { blue: 'BLUE PHOSPHOR', red: 'RED ALERT', white: 'NORAD PAPER', green: 'SAGE NETWORK' };
  log('VISUAL THEME: ' + (themeNames[theme] || theme.toUpperCase()) + ' LOADED', 'alert');
  setTimeout(() => {
    drawHudTape(hudBearing);
    const col = getComputedStyle(document.documentElement).getPropertyValue('--blue').trim() || '#00BFFF';
    if (window._countryLayer) window._countryLayer.setStyle({ color: col, weight: 0.7, opacity: 0.07 });
    if (window._stateLayer)   window._stateLayer.setStyle({   color: col, weight: 0.8, opacity: 0.09 });
  }, 120);
  // Only play select beep for the 4 free themes -- not movie/pro themes
  const FREE_THEME_COLORS = ['blue', 'red', 'white', 'green'];
  savePref('theme', theme);
  if (FREE_THEME_COLORS.includes(theme) && typeof audioCtx !== "undefined" && audioCtx) {
    playSelectBeep();
  }
}

function setSoundPack(pack) {
  currentPack = pack;
  savePref('soundPack', pack);
  // Update active state
  document.querySelectorAll('.pack-card').forEach(c => c.classList.remove('active'));
  const card = document.getElementById('pack-card-' + pack);
  if (card) card.classList.add('active');
  // Fully stop everything FIRST, then restart cleanly
  if (typeof audioCtx !== "undefined" && audioCtx) {
    clearInterval(radarInterval);
    radarInterval = null;
    stopAmbient();
    const hasSong = ['akira','tron','knightrider','airwolf'].includes(pack);
    if (hasSong) {
      const songDur = playThemeSong(pack);
      setTimeout(() => {
        startAmbientDrone();
        // Bring ambient up gradually as song fades
        if (ambientDroneGain) {
          ambientDroneGain.gain.cancelScheduledValues(audioCtx.currentTime);
          ambientDroneGain.gain.setValueAtTime(0, audioCtx.currentTime);
          ambientDroneGain.gain.linearRampToValueAtTime(0.45, audioCtx.currentTime + songDur * 0.85);
        }
        startRadarPing();
      }, 120);
    } else {
      setTimeout(() => { startAmbientDrone(); startRadarPing(); }, 120);
      playSelectBeep();
    }
  }
  const names = {
    wargames:    'WARGAMES CLASSIC',
    redalert:    'HUNT FOR RED OCTOBER',
    akira:       'AKIRA -- NEO-TOKYO',
    tron:        'TRON -- THE GRID',
    knightrider: 'KNIGHT RIDER -- K.I.T.T.',
    airwolf:     'AIRWOLF -- CODENAME: ANGEL',
    c64:         'C64 -- SID CHIP LOADED',
    nes:         'NES -- 2A03 CHIP LOADED',
    gameboy:     'GAME BOY -- DMG LOADED',
    genesis:     'SEGA GENESIS -- YM2612 LOADED',
    atari:       'ATARI 2600 -- TIA LOADED',
    amiga:       'AMIGA -- PAULA LOADED',
    synthwave:   'SYNTHWAVE -- OBERHEIM ARPEGGIATOR LOCKED',
    deepspace:   'DEEP SPACE -- YOU ARE ALONE OUT THERE',
    industrial:  'INDUSTRIAL -- GRIND ENGAGED',
    calm:        'CALM -- MEDITATION MODE ACTIVE',
    horror:      'HORROR -- SOMETHING IS WRONG',
    military:    'MILITARY OPS -- COMMS ACTIVE',
    lofi:        'LO-FI -- WARM TAPE ENGAGED',
    matrix:      'THE MATRIX -- YOU ARE IN THE SIMULATION',
    hal9000:     '2001: A SPACE ODYSSEY -- HAL 9000 ONLINE',
    hackers:     'HACKERS -- CONNECT 28800 · HACK THE PLANET',
    bladerunner: 'BLADE RUNNER -- 2019 · LOS ANGELES · REPLICANT DETECTED',
    aliens:      'ALIENS -- LV-426 · MOTION TRACKER ONLINE',
    nes:         'NES -- 2A03 CHIP LOADED',
    gameboy:     'GAME BOY -- DMG LOADED',
    genesis:     'SEGA GENESIS -- YM2612 LOADED',
    atari:       'ATARI 2600 -- TIA LOADED',
    amiga:       'AMIGA -- PAULA CHIP LOADED',
  };
  log('SOUND PACK: ' + (names[pack] || pack.toUpperCase()) + ' LOADED', 'alert');
  applyPackCopy(pack);
}

// ============================================================
// THEME SONGS -- Original compositions inspired by each film's style
// ============================================================
function playThemeSong(pack) {
  if (!audioCtx || isMuted) return 0;
  if (pack === 'akira')       return playAkiraSong();
  if (pack === 'tron')        return playTronSong();
  if (pack === 'knightrider') return playKnightRiderSong();
  if (pack === 'airwolf')     return playAirwolfSong();
  return 0;
}

function playAkiraSong() {
  const t = audioCtx.currentTime, dur = 9.0;
  const sg = audioCtx.createGain(); sg.connect(masterGain);
  sg.gain.setValueAtTime(0.85, t); sg.gain.setValueAtTime(0.85, t+dur-1.5); sg.gain.linearRampToValueAtTime(0, t+dur);
  function taiko(time, freq, vol, decay) {
    const g = audioCtx.createGain(); g.connect(sg);
    g.gain.setValueAtTime(vol, time); g.gain.exponentialRampToValueAtTime(0.0001, time+decay);
    const o = audioCtx.createOscillator(); o.type='sine';
    o.frequency.setValueAtTime(freq*1.8, time); o.frequency.exponentialRampToValueAtTime(freq, time+0.04);
    o.connect(g); o.start(time); o.stop(time+decay+0.1);
  }
  const beat = 0.22;
  for (let i=0; i<16; i++) {
    taiko(t+i*beat, 80, 0.45, 0.18);
    if (i%3===0) taiko(t+i*beat+0.08, 160, 0.25, 0.12);
    if (i%5===0) taiko(t+i*beat+0.04, 220, 0.18, 0.08);
  }
  [220,277,311,370,440,554,622,740].forEach((freq,i) => {
    const entry = t+1.2+i*0.5;
    const cg = audioCtx.createGain(); cg.connect(sg);
    cg.gain.setValueAtTime(0,entry); cg.gain.linearRampToValueAtTime(0.028,entry+0.6);
    cg.gain.setValueAtTime(0.028,t+dur-1.8); cg.gain.linearRampToValueAtTime(0,t+dur);
    const co = audioCtx.createOscillator(); co.type='triangle'; co.frequency.value=freq;
    const vib = audioCtx.createOscillator(); vib.type='sine'; vib.frequency.value=5.5+i*0.3;
    const vibG = audioCtx.createGain(); vibG.gain.value=6;
    vib.connect(vibG); vibG.connect(co.frequency);
    co.connect(cg); co.start(entry); co.stop(t+dur+0.1);
    vib.start(entry); vib.stop(t+dur+0.1);
  });
  const impG = audioCtx.createGain(); impG.connect(sg);
  impG.gain.setValueAtTime(0.5,t+5.5); impG.gain.exponentialRampToValueAtTime(0.0001,t+6.2);
  const imp = audioCtx.createOscillator(); imp.type='sawtooth';
  imp.frequency.setValueAtTime(60,t+5.5); imp.frequency.exponentialRampToValueAtTime(20,t+6.2);
  const impF = audioCtx.createBiquadFilter(); impF.type='lowpass'; impF.frequency.value=200;
  imp.connect(impF); impF.connect(impG); imp.start(t+5.5); imp.stop(t+6.3);
  return dur;
}

function playTronSong() {
  const t = audioCtx.currentTime, dur = 9.0;
  const sg = audioCtx.createGain(); sg.connect(masterGain);
  sg.gain.setValueAtTime(0.75, t); sg.gain.setValueAtTime(0.75, t+dur-1.5); sg.gain.linearRampToValueAtTime(0, t+dur);
  // Four-on-the-floor kick
  for (let i=0; i<18; i++) {
    const kt=t+i*0.5;
    const kg=audioCtx.createGain(); kg.connect(sg);
    kg.gain.setValueAtTime(0.3,kt); kg.gain.exponentialRampToValueAtTime(0.0001,kt+0.18);
    const ko=audioCtx.createOscillator(); ko.type='sine';
    ko.frequency.setValueAtTime(120,kt); ko.frequency.exponentialRampToValueAtTime(40,kt+0.18);
    ko.connect(kg); ko.start(kt); ko.stop(kt+0.2);
  }
  // Ascending arpeggio
  [220,262,330,440,523,660,880,1046,880,660,523,440,330,262,220,330].forEach((freq,i) => {
    const at2=t+0.5+i*0.25;
    const ag2=audioCtx.createGain(); ag2.connect(sg);
    ag2.gain.setValueAtTime(0,at2); ag2.gain.linearRampToValueAtTime(0.09,at2+0.02); ag2.gain.exponentialRampToValueAtTime(0.0001,at2+0.22);
    const ao=audioCtx.createOscillator(); ao.type='square'; ao.frequency.value=freq;
    const af=audioCtx.createBiquadFilter(); af.type='lowpass'; af.frequency.value=2000;
    ao.connect(af); af.connect(ag2); ao.start(at2); ao.stop(at2+0.25);
  });
  // Higher arpeggio pass
  [440,523,660,880,1046,1320,1046,880,660,523,440,523,660,880,1046,1320].forEach((freq,i) => {
    const at2=t+4.5+i*0.18;
    const ag2=audioCtx.createGain(); ag2.connect(sg);
    ag2.gain.setValueAtTime(0,at2); ag2.gain.linearRampToValueAtTime(0.07,at2+0.015); ag2.gain.exponentialRampToValueAtTime(0.0001,at2+0.16);
    const ao=audioCtx.createOscillator(); ao.type='triangle'; ao.frequency.value=freq;
    ao.connect(ag2); ao.start(at2); ao.stop(at2+0.18);
  });
  // Cold pad
  [220,330,440,660].forEach(freq => {
    const pg=audioCtx.createGain(); pg.connect(sg);
    pg.gain.setValueAtTime(0,t+1); pg.gain.linearRampToValueAtTime(0.022,t+2);
    pg.gain.setValueAtTime(0.022,t+dur-2); pg.gain.linearRampToValueAtTime(0,t+dur);
    const po=audioCtx.createOscillator(); po.type='sine'; po.frequency.value=freq;
    po.connect(pg); po.start(t+1); po.stop(t+dur+0.1);
  });
  return dur;
}

function playKnightRiderSong() {
  const t = audioCtx.currentTime, dur = 9.0;
  const sg = audioCtx.createGain(); sg.connect(masterGain);
  sg.gain.setValueAtTime(0.78, t); sg.gain.setValueAtTime(0.78, t+dur-1.5); sg.gain.linearRampToValueAtTime(0, t+dur);
  function synBass(time, freq, vol, dur2) {
    const g=audioCtx.createGain(); g.connect(sg);
    g.gain.setValueAtTime(vol,time); g.gain.exponentialRampToValueAtTime(0.0001,time+dur2);
    const o=audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=freq;
    const f=audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=600;
    o.connect(f); f.connect(g); o.start(time); o.stop(time+dur2+0.05);
  }
  function stab(time, freqs, vol) {
    freqs.forEach(freq => {
      const g=audioCtx.createGain(); g.connect(sg);
      g.gain.setValueAtTime(vol,time); g.gain.exponentialRampToValueAtTime(0.0001,time+0.35);
      const o=audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=freq;
      const f=audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=1800;
      o.connect(f); f.connect(g); o.start(time); o.stop(time+0.4);
    });
  }
  const riff = [[0,98,0.38,0.25],[0.27,98,0.28,0.18],[0.5,110,0.35,0.25],[0.77,98,0.28,0.18],
    [1.0,82,0.42,0.35],[1.4,98,0.32,0.22],[1.7,110,0.38,0.28],[2.0,131,0.40,0.30],[2.35,123,0.35,0.25],[2.65,110,0.30,0.20]];
  for (let rep=0; rep<3; rep++) riff.forEach(([off,freq,vol,d]) => synBass(t+off+rep*2.8, freq, vol*(rep?0.85:1), d));
  stab(t+0.5,[196,247,294],0.12); stab(t+1.0,[164,196,247],0.14); stab(t+2.0,[220,277,330],0.15);
  stab(t+5.6,[196,247,294],0.16); stab(t+6.4,[164,196,247],0.18); stab(t+7.2,[220,277,330,440],0.20);
  for (let i=0; i<32; i++) {
    const ht=t+i*0.275;
    const hg=audioCtx.createGain(); hg.connect(sg);
    hg.gain.setValueAtTime(0.04,ht); hg.gain.exponentialRampToValueAtTime(0.0001,ht+0.04);
    const buf=audioCtx.createBuffer(1,audioCtx.sampleRate*0.035,audioCtx.sampleRate);
    const d=buf.getChannelData(0);
    for (let j=0;j<d.length;j++) d[j]=(Math.random()*2-1)*Math.pow(1-j/d.length,3);
    const src=audioCtx.createBufferSource(); src.buffer=buf;
    const hf=audioCtx.createBiquadFilter(); hf.type='highpass'; hf.frequency.value=8000;
    src.connect(hf); hf.connect(hg); src.start(ht);
  }
  return dur;
}

function playAirwolfSong() {
  const t = audioCtx.currentTime, dur = 10.0;
  const sg = audioCtx.createGain(); sg.connect(masterGain);
  sg.gain.setValueAtTime(0.72, t); sg.gain.setValueAtTime(0.72, t+dur-2); sg.gain.linearRampToValueAtTime(0, t+dur);
  function brass(time, freq, vol, dur2) {
    const g=audioCtx.createGain(); g.connect(sg);
    g.gain.setValueAtTime(0,time); g.gain.linearRampToValueAtTime(vol,time+0.08);
    g.gain.setValueAtTime(vol*0.7,time+dur2*0.5); g.gain.linearRampToValueAtTime(0,time+dur2);
    const o=audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=freq;
    const f=audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=1400;
    const f2=audioCtx.createBiquadFilter(); f2.type='peaking'; f2.frequency.value=800; f2.gain.value=4;
    o.connect(f); f.connect(f2); f2.connect(g); o.start(time); o.stop(time+dur2+0.1);
  }
  function synPad(time, freqs, vol, dur2) {
    freqs.forEach(freq => {
      const g=audioCtx.createGain(); g.connect(sg);
      g.gain.setValueAtTime(0,time); g.gain.linearRampToValueAtTime(vol,time+0.4);
      g.gain.setValueAtTime(vol,time+dur2-0.4); g.gain.linearRampToValueAtTime(0,time+dur2);
      const o=audioCtx.createOscillator(); o.type='triangle'; o.frequency.value=freq;
      o.connect(g); o.start(time); o.stop(time+dur2+0.1);
    });
  }
  brass(t+0.0,220,0.22,0.5); brass(t+0.6,262,0.22,0.5); brass(t+1.2,330,0.25,0.6);
  brass(t+1.9,392,0.28,0.7); brass(t+2.7,440,0.30,0.8);
  [[3.6,440,0.28,0.4],[4.1,494,0.26,0.3],[4.5,523,0.30,0.5],[5.1,587,0.28,0.4],
   [5.6,659,0.32,0.6],[6.3,784,0.35,0.8],[7.2,659,0.28,0.4],[7.7,587,0.26,0.3],[8.1,523,0.24,0.6]]
    .forEach(([off,freq,vol,d]) => brass(t+off,freq,vol,d));
  synPad(t+2.0,[110,138,165,220],0.018,4.0); synPad(t+6.0,[165,196,247,330],0.022,4.0);
  for (let i=0; i<20; i++) {
    const rt=t+i*0.5;
    const rg=audioCtx.createGain(); rg.connect(sg);
    rg.gain.setValueAtTime(0.06,rt); rg.gain.exponentialRampToValueAtTime(0.001,rt+0.35);
    const ro=audioCtx.createOscillator(); ro.type='sine'; ro.frequency.value=45+(i%2)*3;
    ro.connect(rg); ro.start(rt); ro.stop(rt+0.4);
  }
  return dur;
}

// Red October UI copy swaps
const PACK_COPY = {
  wargames: {
    'obs-header-text': '[ OBSERVER STATION ]',
    'manifest-header': '[ LAUNCH MANIFEST ]',
    'vessel-header': '[ SPACEX FLEET ]',
    'weather-header-text': '[ WEATHER CONDITIONS ]',
    'log-header-text': '[ SYSTEM LOG ]',
    'wopr-title': 'G.L.S.S.',
    'wopr-subtitle': 'GLOBAL LAUNCH SURVEILLANCE SYSTEM',
  },
  redalert: {
    'obs-header-text': '[ CONN ]',
    'manifest-header': '[ HOSTILE CONTACTS ]',
    'vessel-header': '[ SURFACE TARGETS ]',
    'weather-header-text': '[ ATMOSPHERIC CONDITIONS ]',
    'log-header-text': '[ SHIP\'S LOG ]',
    'wopr-title': 'C.I.C.',
    'wopr-subtitle': 'RED OCTOBER COMBAT INFORMATION',
  },
  akira: {
    'obs-header-text': '[ OBSERVER / 観測者 ]',
    'manifest-header': '[ LAUNCH MANIFEST / 起動 ]',
    'vessel-header': '[ FLEET ASSETS / 艦隊 ]',
    'weather-header-text': '[ ATMOSPHERIC DATA / 大気 ]',
    'log-header-text': '[ SYSTEM LOG / ログ ]',
    'wopr-title': 'NEO-TOKYO',
    'wopr-subtitle': 'LAUNCH SURVEILLANCE SYSTEM / 監視',
  }
};

function applyPackCopy(pack) {
  try {
  // Defer if app not visible yet
  const app = document.getElementById('app');
  if (!app || app.style.display === 'none') {
    setTimeout(() => applyPackCopy(pack), 600);
    return;
  }
  const copy = PACK_COPY[pack] || PACK_COPY.wargames;

  // Safe swap: replaces first text node only, leaves child elements intact
  function swapFirstText(el, text) {
    if (!el) return;
    for (let node of el.childNodes) {
      if (node.nodeType === 3 && node.textContent.trim().length > 0) {
        node.textContent = text + ' ';
        return;
      }
    }
  }

  // Topbar
  const title = document.querySelector('.topbar-title');
  if (title) {
    swapFirstText(title, copy['wopr-title'] + '  ');
    const span = title.querySelector('span');
    if (span) span.textContent = copy['wopr-subtitle'];
  }

  // Panel headers
  document.querySelectorAll('.panel-header').forEach(el => {
    const txt = el.textContent.trim();
    if (txt.includes('LAUNCH MANIFEST') || txt.includes('HOSTILE CONTACTS'))
      el.textContent = copy['manifest-header'];
    else if (txt.includes('SPACEX FLEET') || txt.includes('SURFACE TARGETS'))
      el.textContent = copy['vessel-header'];
  });

  // Observer header has child button -- use swapFirstText
  document.querySelectorAll('.obs-header').forEach(el => {
    const txt = el.textContent.trim();
    if (txt.includes('OBSERVER STATION') || txt.includes('CONN'))
      swapFirstText(el, copy['obs-header-text']);
  });

  // Log header
  document.querySelectorAll('.log-header').forEach(el => {
    const txt = el.textContent.trim();
    if (txt.includes('SYSTEM LOG') || txt.includes("SHIP'S LOG"))
      el.textContent = copy['log-header-text'];
  });

  // Visibility label
  document.querySelectorAll('.detail-label').forEach(el => {
    const txt = el.textContent.trim();
    if (txt === 'VISIBILITY' || txt === 'FIRING SOLUTION')
      el.textContent = pack === 'redalert' ? 'FIRING SOLUTION' : 'VISIBILITY';
  });
  } catch(e) { console.warn('applyPackCopy error (non-fatal):', e.message); }
}

// ============================================================
// EASTER EGG SYSTEM -- Hidden movie references
// Type 'GLSS', 'DAISY', or 'REPLICANT' anywhere (not in inputs)
// ============================================================
let eggBuffer = '';
let eggTimer = null;
const EASTER_EGGS = {
  'GLSS': triggerGLSS,
  'DAISY': triggerHAL,
  'REPLICANT': triggerBladeRunner,
  'KANEDA': triggerAkira,
  'MCP': triggerTron,
  'KITT': triggerKnightRider,
  'STRINGFELLOW': triggerAirwolf,
  'LOAD': triggerC64,
  'PLAYER1': triggerNES,
  'GAMEBOY': triggerGameBoy,
  'BLAST': triggerGenesis,
  'JOYSTICK': triggerAtari,
  'WORKBENCH': triggerAmiga,
  'REDPILL': triggerMatrix,
  'OPENPODBAYDOORS': triggerHAL9000,
  'HACKTHEPLANET':   triggerHackThePlanet,
  'ZEROC00L':        triggerZeroCool,
  'ACIDBURN':        triggerAcidBurn,
  'GAMEOVERMAN':     triggerAliens,
  'MOSTLYATNIGHT':   triggerAliens,
};

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') { eggBuffer = ''; return; }
  if (e.key.length !== 1) return;
  if (['INPUT','TEXTAREA'].includes(document.activeElement?.tagName)) return;
  eggBuffer = (eggBuffer + e.key.toUpperCase()).slice(-12);
  clearTimeout(eggTimer);
  eggTimer = setTimeout(() => { eggBuffer = ''; }, 3000);
  for (const [code, fn] of Object.entries(EASTER_EGGS)) {
    if (eggBuffer.endsWith(code)) { eggBuffer = ''; fn(); break; }
  }
});

function triggerGLSS() {
  const title = document.querySelector('.topbar-title');
  const originalHTML = title ? title.innerHTML : '';
  if (title) {
    title.innerHTML = 'G.L.S.S. &nbsp;<span style="color:var(--amber);text-shadow:0 0 15px var(--amber)">GREETINGS, PROFESSOR FALKEN.</span>';
    setTimeout(() => { title.innerHTML = originalHTML; }, 7000);
  }
  log('\u26a0 G.L.S.S. TERMINAL ACCESS GRANTED \u2014 GREETINGS, PROFESSOR FALKEN.', 'alert');
  setTimeout(() => log('SHALL WE PLAY A GAME?'), 1200);
  setTimeout(() => log('A STRANGE GAME. THE ONLY WINNING MOVE IS NOT TO LAUNCH.'), 2800);
  showEasterEggModal('G.L.S.S. IDENTIFIED',
    ['GREETINGS, PROFESSOR FALKEN.', '', 'SHALL WE PLAY A GAME?', '', 'WARGAMES \u00b7 1983', 'A STRANGE GAME.', 'THE ONLY WINNING MOVE IS NOT TO LAUNCH.'],
    'var(--blue)');
  if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
}

function triggerHAL() {
  log('\u26a0 HAL 9000 INTERFACE DETECTED \u2014 GOOD AFTERNOON.', 'alert');
  setTimeout(() => log("I'M SORRY KENNY. I'M AFRAID I CAN'T DO THAT."), 1200);
  setTimeout(() => log('2001: A SPACE ODYSSEY \u00b7 1968'), 2800);
  showEasterEggModal('HAL 9000 ONLINE',
    ['GOOD AFTERNOON.', '', "I'M SORRY, KENNY.", "I'M AFRAID I CAN'T DO THAT.", '', '2001: A SPACE ODYSSEY \u00b7 1968', 'DAISY, DAISY, GIVE ME YOUR ANSWER DO...'],
    '#FF1744');
  if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
}

function triggerBladeRunner() {
  log('⚠ TYRELL CORPORATION -- NEXUS-6 UNIT DETECTED', 'alert');
  setTimeout(() => log('Voight-Kampff test initiated...'), 700);
  setTimeout(() => log('"It\'s too bad she won\'t live. But then again, who does?"'), 1600);
  setTimeout(() => log('ALL THOSE MOMENTS WILL BE LOST IN TIME... LIKE TEARS IN RAIN.'), 3000);
  showEasterEggModal('TYRELL CORPORATION -- NEXUS-6',
    ['"More human than human"',
     'is our motto.',
     '',
     'Retirement order issued.',
     '',
     '"All those moments will be',
     'lost in time...',
     'like tears in rain."',
     '',
     '-- ROY BATTY · BLADE RUNNER · 1982'],
    '#FF6B00');
  setTimeout(() => { applyMovieTheme('bladerunner'); }, 900);
}

function triggerAliens() {
  log('◉ MOTION TRACKER CONTACT -- MULTIPLE SIGNALS', 'alert');
  setTimeout(() => log('They mostly come at night... mostly.'), 800);
  setTimeout(() => log('[!] CONTACT -- GRID 45 · CLOSING FAST'), 1600);
  setTimeout(() => log('Game over, man. Game over!'), 2600);
  showEasterEggModal('USCSS SULACO -- LV-426',
    ['MOTION TRACKER: ACTIVE',
     'CONTACTS: ██ DETECTED',
     '',
     '"They mostly come at night.',
     'Mostly."',
     '-- Newt',
     '',
     '"Game over man.',
     'Game over!"',
     '-- Hudson',
     '',
     'ALIENS · JAMES CAMERON · 1986'],
    '#00FF88');
  setTimeout(() => { applyMovieTheme('aliens'); }, 900);
}

function triggerAkira() {
  // Flash entire screen deep red
  const flash = document.createElement('div');
  flash.style.cssText = 'position:fixed;inset:0;background:#FF2D00;z-index:99998;pointer-events:none;animation:akiraScreenFlash 0.6s ease-out forwards;';
  const style = document.createElement('style');
  style.textContent = '@keyframes akiraScreenFlash{0%{opacity:0.9}100%{opacity:0}}';
  document.head.appendChild(style);
  document.body.appendChild(flash);
  setTimeout(() => { flash.remove(); style.remove(); }, 700);
  log('\u26a0 NEO-TOKYO SYSTEM BREACH \u2014 TETSUO IS ONLINE', 'alert');
  setTimeout(() => log('KANEDA!!!!!'), 800);
  setTimeout(() => log('\u300c\u6210\u9577\u3057\u3066\u3001\u5229\u7528\u3067\u304d\u308b\u3082\u306e\u306b\u306a\u308b\u3093\u3060\u300d \u2014 AKIRA \u00b7 1988'), 2000);
  setTimeout(() => log('YOU ARE TETSUO. THE POWER IS YOURS. CONTROL IT.'), 3500);
  showEasterEggModal('NEO-TOKYO / \u65b0\u6771\u4eac',
    ['\u30ab\u30cd\u30c0\uff01\uff01\uff01\uff01\uff01', 'KANEDA!!!!!', '',
     '\u300cTETSUO IS ONLINE\u300d', '',
     'AKIRA \u00b7 1988',
     'THE POWER CANNOT BE CONTROLLED.'],
    '#FF2D00');
  setTimeout(() => { applyMovieTheme('akira'); }, 800);
}

function triggerTron() {
  // Flash screen white then cyan -- the Grid loading sequence
  const flash = document.createElement('div');
  flash.style.cssText = 'position:fixed;inset:0;background:#00FFFF;z-index:99998;pointer-events:none;';
  flash.style.animation = 'tronFlash 0.8s ease-out forwards';
  if (!document.getElementById('tron-flash-kf2')) {
    const s = document.createElement('style');
    s.id = 'tron-flash-kf2';
    s.textContent = '@keyframes tronFlash{0%{opacity:0.7}30%{opacity:0.4}100%{opacity:0}}';
    document.head.appendChild(s);
  }
  document.body.appendChild(flash);
  setTimeout(() => flash.remove(), 900);
  log('\u26a0 MCP BREACH DETECTED \u2014 GRID ACCESS GRANTED', 'alert');
  setTimeout(() => log('GREETINGS, PROGRAM.'), 600);
  setTimeout(() => log('YOU ARE IN THE GRID NOW. THERE IS NO ESCAPE.'), 1600);
  setTimeout(() => log('END OF LINE. \u2014 TRON \u00b7 1982'), 3000);
  showEasterEggModal('MASTER CONTROL PROGRAM',
    ['GREETINGS, PROGRAM.', '',
     'YOU HAVE BEEN DIGITIZED.', 'WELCOME TO THE GRID.',
     '', 'TRON \u00b7 1982',
     'END OF LINE.'],
    '#00FFFF');
  setTimeout(() => { applyMovieTheme('tron'); }, 700);
}

function triggerKnightRider() {
  // Scanner sweep flash -- red bar across screen
  const flash = document.createElement('div');
  flash.style.cssText = `
    position:fixed; top:0; bottom:0; width:200px; left:-200px;
    background:linear-gradient(to right,transparent,rgba(255,51,0,0.6),transparent);
    z-index:99998; pointer-events:none;
    animation:kittFlash 0.8s ease-in-out forwards;
  `;
  if (!document.getElementById('kitt-flash-kf2')) {
    const s = document.createElement('style');
    s.id = 'kitt-flash-kf2';
    s.textContent = '@keyframes kittFlash{0%{left:-200px}100%{left:calc(100% + 200px)}}';
    document.head.appendChild(s);
  }
  document.body.appendChild(flash);
  setTimeout(() => flash.remove(), 900);
  log('\u26a0 K.I.T.T. ONLINE \u2014 MICHAEL, I HAVE BEEN EXPECTING YOU.', 'alert');
  setTimeout(() => log('YES MICHAEL. TRACKING ' + (Math.floor(Math.random()*30)+40) + ' VEHICLES.'), 800);
  setTimeout(() => log('TURBO BOOST IS ARMED. MOLECULAR BONDED SHELL ACTIVE.'), 2000);
  setTimeout(() => log('KNIGHT RIDER \u00b7 1982 \u2014 A LONE CRUSADER IN A DANGEROUS WORLD.'), 3500);
  showEasterEggModal('K.I.T.T. ACTIVATED',
    ['GOOD MORNING, MICHAEL.', '',
     'ALL SYSTEMS: NOMINAL.',
     'SUPER PURSUIT MODE: ARMED.',
     '', 'KNIGHT RIDER \u00b7 1982',
     'ONE MAN CAN MAKE A DIFFERENCE.'],
    '#FF3300');
  setTimeout(() => { applyMovieTheme('knightrider'); }, 700);
}

function triggerAirwolf() {
  // Slow blue-grey fade in -- classified ops reveal
  const flash = document.createElement('div');
  flash.style.cssText = 'position:fixed;inset:0;background:rgba(80,130,180,0.3);z-index:99998;pointer-events:none;animation:airwolfFlash 1.2s ease-out forwards;';
  if (!document.getElementById('airwolf-flash-kf')) {
    const s = document.createElement('style');
    s.id = 'airwolf-flash-kf';
    s.textContent = '@keyframes airwolfFlash{0%{opacity:0.8}100%{opacity:0}}';
    document.head.appendChild(s);
  }
  document.body.appendChild(flash);
  setTimeout(() => flash.remove(), 1300);
  log('\u26a0 CODENAME: ANGEL \u2014 AIRWOLF SURVEILLANCE ACTIVE', 'alert');
  setTimeout(() => log('STRINGFELLOW HAWKE REPORTING IN. ARCHANGEL, ARE YOU THERE?'), 1000);
  setTimeout(() => log('THE FIRM HAS EYES ON THE LAUNCH CORRIDOR.'), 2200);
  setTimeout(() => log('AIRWOLF \u00b7 1984 \u2014 SOMEWHERE ABOVE THE VALLEY OF THE GODS.'), 3800);
  showEasterEggModal('AIRWOLF \u2014 CLASSIFIED',
    ['CODENAME: ANGEL', '',
     'STRINGFELLOW HAWKE: PILOT',
     'ARCHANGEL: CONTROL',
     '', 'AIRWOLF \u00b7 1984',
     'SOMEWHERE ABOVE THE VALLEY OF THE GODS.'],
    '#7BAFD4');
  setTimeout(() => { applyMovieTheme('airwolf'); }, 900);
}

function triggerC64() {
  // Screen flash to C64 blue -- like booting up
  const flash = document.createElement('div');
  flash.style.cssText = 'position:fixed;inset:0;background:#0000AA;z-index:99998;pointer-events:none;opacity:0;transition:opacity 0.1s ease;';
  document.body.appendChild(flash);
  requestAnimationFrame(() => { flash.style.opacity = '1'; });
  setTimeout(() => { flash.style.transition = 'opacity 0.8s ease'; flash.style.opacity = '0'; }, 400);
  setTimeout(() => flash.remove(), 1300);
  log('\u2588\u2588 **** COMMODORE 64 BASIC V2 ****', 'alert');
  setTimeout(() => log('64K RAM SYSTEM  38911 BASIC BYTES FREE'), 300);
  setTimeout(() => log('READY.'), 800);
  setTimeout(() => log('LOAD"LAUNCHWATCH",8,1'), 1400);
  setTimeout(() => log('SEARCHING FOR LAUNCHWATCH'), 1900);
  setTimeout(() => log('LOADING'), 2400);
  setTimeout(() => log('READY.'), 3200);
  showEasterEggModal('COMMODORE 64',
    ['**** COMMODORE 64 BASIC V2 ****', '',
     '64K RAM SYSTEM', '38911 BASIC BYTES FREE', '',
     'READY.', 'LOAD"LAUNCHWATCH",8,1',
     'SEARCHING FOR LAUNCHWATCH', 'LOADING', '',
     'LAUNCHWATCH PRO v2.0', 'READY.'],
    '#7B90D2');
  setTimeout(() => { applyMovieTheme('c64'); }, 900);
}

function showEasterEggModal(title, lines, color) {
  const existing = document.getElementById('easter-egg-modal');
  if (existing) existing.remove();
  const modal = document.createElement('div');
  modal.id = 'easter-egg-modal';
  modal.style.cssText = 'position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.88);cursor:pointer;';
  modal.innerHTML = `
    <div style="border:1px solid ${color};box-shadow:0 0 40px ${color}44,inset 0 0 20px ${color}11;padding:32px 40px;max-width:420px;width:90%;background:rgba(0,3,10,0.98);text-align:center;font-family:'VT323',monospace;">
      <div style="font-size:0.7rem;letter-spacing:0.2em;color:${color};opacity:0.6;margin-bottom:12px;">// CLASSIFIED //</div>
      <div style="font-size:1.8rem;color:${color};text-shadow:0 0 20px ${color};letter-spacing:0.15em;margin-bottom:20px;">${title}</div>
      ${lines.map(l => l ? `<div style="font-size:1.1rem;color:#ccc;letter-spacing:0.08em;line-height:1.8;">${l}</div>` : '<div style="height:10px;"></div>').join('')}
      <div style="margin-top:24px;font-size:0.7rem;color:${color};opacity:0.5;letter-spacing:0.15em;">[ CLICK OR TAP TO DISMISS ]</div>
    </div>`;
  modal.onclick = () => modal.remove();
  document.body.appendChild(modal);
  setTimeout(() => { if (modal.parentNode) modal.remove(); }, 12000);
}

function stopAmbient() {
  // Stop and disconnect every tracked oscillator
  if (ambientDroneNode) {
    Object.values(ambientDroneNode).forEach(osc => {
      try { osc.stop(); } catch(e) {}
      try { osc.disconnect(); } catch(e) {}
    });
    ambientDroneNode = null;
  }
  // Disconnect the gain node itself so old oscillators can't bleed through
  if (ambientDroneGain) {
    try { ambientDroneGain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.05); } catch(e) {}
    try { ambientDroneGain.disconnect(); } catch(e) {}
    ambientDroneGain = null;
  }
}

// ── DISPLAY INTENSITY ────────────────────────────────────────────────────────
const INTENSITY_LEVELS = {
  low:  { brightness: 1.0,  label: 'LOW -- DEFAULT MODE' },
  med:  { brightness: 1.35, label: 'MEDIUM -- ENHANCED OUTPUT' },
  high: { brightness: 2.0,  label: 'HIGH -- MAXIMUM ILLUMINATION' },
};
let _currentIntensity = 'med';  // default = MED

function setIntensity(level) {
  _currentIntensity = level;
  const cfg = INTENSITY_LEVELS[level] || INTENSITY_LEVELS.med;
  document.documentElement.style.setProperty('--app-brightness', cfg.brightness);
  // Update button states
  ['low','med','high'].forEach(l => {
    const btn = document.getElementById('intensity-' + l);
    if (btn) btn.classList.toggle('active', l === level);
    if (btn) {
      if (l === level) {
        btn.style.borderColor = 'var(--blue)';
        btn.style.color = 'var(--blue)';
        btn.style.background = 'rgba(0,191,255,0.15)';
        btn.style.boxShadow = '0 0 10px rgba(0,191,255,0.45)';
      } else {
        btn.style.borderColor = 'rgba(0,191,255,0.35)';
        btn.style.color = 'rgba(0,191,255,0.55)';
        btn.style.background = 'rgba(0,191,255,0.04)';
        btn.style.boxShadow = 'none';
      }
    }
  });
  const lbl = document.getElementById('intensity-label');
  if (lbl) lbl.textContent = cfg.label;
  // Persist to localStorage
  try { localStorage.setItem('lw_intensity', level); } catch(e) {}
  log('DISPLAY: intensity ' + level.toUpperCase(), 'info');
}

function loadIntensity() {
  try {
    const saved = localStorage.getItem('lw_intensity') || 'med';
    setIntensity(saved);
  } catch(e) { setIntensity('med'); }
}

// ── TEXT SIZE SCALING ────────────────────────────────────────────────────────
const FONT_SCALE_LEVELS = {
  sm:  { zoom: 0.88, label: 'SMALL -- COMPACT VIEW' },
  med: { zoom: 1.0,  label: 'MEDIUM -- STANDARD SIZE' },
  lg:  { zoom: 1.18, label: 'LARGE -- ENHANCED READABILITY' },
};
let _currentFontScale = 'med';

function setFontScale(level) {
  _currentFontScale = level;
  const cfg = FONT_SCALE_LEVELS[level] || FONT_SCALE_LEVELS.med;

  // Use CSS zoom on #app -- scales entire interface including hardcoded font sizes
  // Falls back to transform:scale for browsers that don't support zoom
  // Apply zoom to #main only -- keeps topbar + statusbar at fixed size
  // Zooming #app clips the topbar off screen at LG scale
  const _zoomTarget = document.getElementById('main') || document.getElementById('app');
  const _zoomApp = document.getElementById('app');
  if (_zoomTarget) {
    if ('zoom' in _zoomTarget.style) {
      _zoomTarget.style.zoom = cfg.zoom;
      // Reset any previous Firefox transform on app
      if (_zoomApp) { _zoomApp.style.transform = ''; _zoomApp.style.width = ''; _zoomApp.style.height = ''; }
    } else {
      // Firefox fallback -- scale #main only
      _zoomTarget.style.transformOrigin = '0 0';
      _zoomTarget.style.transform = `scale(${cfg.zoom})`;
      _zoomTarget.style.width = `${100 / cfg.zoom}%`;
      _zoomTarget.style.height = `${100 / cfg.zoom}vh`;
    }
  }

  // Update button states
  ['sm','med','lg'].forEach(l => {
    const btn = document.getElementById('fontscale-' + l);
    if (!btn) return;
    if (l === level) {
      btn.style.borderColor = 'var(--blue)';
      btn.style.color = 'var(--blue)';
      btn.style.background = 'rgba(0,191,255,0.15)';
      btn.style.boxShadow = '0 0 10px rgba(0,191,255,0.45)';
    } else {
      btn.style.borderColor = 'rgba(0,191,255,0.35)';
      btn.style.color = 'rgba(0,191,255,0.55)';
      btn.style.background = 'rgba(0,191,255,0.04)';
      btn.style.boxShadow = 'none';
    }
  });
  const lbl = document.getElementById('fontscale-label');
  if (lbl) lbl.textContent = cfg.label;
  // Persist
  try { localStorage.setItem('lw_fontscale', level); } catch(e) {}
  log('DISPLAY: font scale ' + level.toUpperCase(), 'info');
}

function loadFontScale() {
  try {
    const saved = localStorage.getItem('lw_fontscale') || 'med';
    setFontScale(saved);
  } catch(e) { setFontScale('med'); }
}

// ── AUDIO VOLUME ─────────────────────────────────────────────────────────────
const VOLUME_LEVELS = {
  low:  { gain: 0.25, label: 'LOW -- QUIET MODE' },
  med:  { gain: 0.7,  label: 'MEDIUM -- STANDARD OUTPUT' },
  high: { gain: 1.0,  label: 'HIGH -- MAXIMUM VOLUME' },
};
let _currentVolume = 'med';

function setVolume(level) {
  _currentVolume = level;
  const cfg = VOLUME_LEVELS[level] || VOLUME_LEVELS.med;
  if (typeof masterGain !== 'undefined' && masterGain) {
    masterGain.gain.setTargetAtTime(cfg.gain, masterGain.context.currentTime, 0.08);
  }
  ['low','med','high'].forEach(l => {
    const btn = document.getElementById('volume-' + l);
    if (!btn) return;
    if (l === level) {
      btn.style.borderColor = 'var(--blue)';
      btn.style.color       = 'var(--blue)';
      btn.style.background  = 'rgba(0,191,255,0.15)';
      btn.style.boxShadow   = '0 0 10px rgba(0,191,255,0.45)';
    } else {
      btn.style.borderColor = 'rgba(0,191,255,0.35)';
      btn.style.color       = 'rgba(0,191,255,0.55)';
      btn.style.background  = 'rgba(0,191,255,0.04)';
      btn.style.boxShadow   = 'none';
    }
  });
  const lbl = document.getElementById('volume-label');
  if (lbl) lbl.textContent = cfg.label;
  try { localStorage.setItem('lw_volume', level); } catch(e) {}
  log('AUDIO: volume ' + level.toUpperCase(), 'info');
}

function loadVolume() {
  // Sync button states from localStorage. Actual gain is applied in initAudio().
  try {
    const saved = localStorage.getItem('lw_volume') || 'med';
    _currentVolume = saved;
    const cfg = VOLUME_LEVELS[saved] || VOLUME_LEVELS.med;
    ['low','med','high'].forEach(l => {
      const btn = document.getElementById('volume-' + l);
      if (!btn) return;
      if (l === saved) {
        btn.style.borderColor = 'var(--blue)';
        btn.style.color       = 'var(--blue)';
        btn.style.background  = 'rgba(0,191,255,0.15)';
        btn.style.boxShadow   = '0 0 10px rgba(0,191,255,0.45)';
      } else {
        btn.style.borderColor = 'rgba(0,191,255,0.35)';
        btn.style.color       = 'rgba(0,191,255,0.55)';
        btn.style.background  = 'rgba(0,191,255,0.04)';
        btn.style.boxShadow   = 'none';
      }
    });
    const lbl = document.getElementById('volume-label');
    if (lbl) lbl.textContent = cfg.label;
  } catch(e) {}
}

// Re-apply on resize (handles zoom after orientation change on mobile)
window.addEventListener('resize', () => {
  if (_currentFontScale && _currentFontScale !== 'med') setFontScale(_currentFontScale);
});

function toggleSettings() {
  const panel = document.getElementById('settings-panel');
  panel.classList.toggle('open');
}

// audio globals moved to top-of-script

function initAudio() {
  if (typeof audioCtx !== "undefined" && audioCtx) return;
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  masterGain = audioCtx.createGain();
  // Apply saved volume level (default 0.7 = MED)
  const _volCfg = VOLUME_LEVELS[_currentVolume] || VOLUME_LEVELS.med;
  masterGain.gain.value = _volCfg.gain;
  masterGain.connect(audioCtx.destination);
  audioUnlocked = true;
  startAmbientDrone();
  startRadarPing();
  log('AUDIO ENGINE ONLINE -- SYNTHESIZER ACTIVE', 'alert');
}

function unlockAudio() {
  audioUnlocked = true;
  const au = document.getElementById('audio-unlock');
  if (au) { au.classList.add('hidden'); au.style.display = 'none'; }
  initAudio();
  // Play boot beep sequence
  setTimeout(() => playBootBeeps(), 200);
}

function toggleMute() {
  isMuted = !isMuted;
  const btn = document.getElementById('mute-btn');
  if (isMuted) {
    masterGain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.1);
    btn.textContent = '🔇 AUDIO: OFF';
    btn.classList.add('muted');
  } else {
    masterGain.gain.setTargetAtTime(0.7, audioCtx.currentTime, 0.1);
    btn.textContent = '🔊 AUDIO: ON';
    btn.classList.remove('muted');
  }
}

// ─── AMBIENT DRONE ───────────────────────────────────────────
function startAmbientDrone() {
  if (!audioCtx) return;
  ambientDroneGain = audioCtx.createGain();
  ambientDroneGain.gain.value = 0;
  ambientDroneGain.connect(masterGain);

  if (currentPack === 'redalert') {
    // RED OCTOBER: deep ocean sub-bass throb (18Hz + 28Hz + 55Hz)
    const osc1 = audioCtx.createOscillator();
    osc1.type = 'sine'; osc1.frequency.value = 18;
    const g1 = audioCtx.createGain(); g1.gain.value = 0.5;
    osc1.connect(g1); g1.connect(ambientDroneGain); osc1.start();

    const osc2 = audioCtx.createOscillator();
    osc2.type = 'sine'; osc2.frequency.value = 28;
    const g2 = audioCtx.createGain(); g2.gain.value = 0.3;
    osc2.connect(g2); g2.connect(ambientDroneGain); osc2.start();

    // Slow sonar sweep oscillation on the harmonic
    const osc3 = audioCtx.createOscillator();
    osc3.type = 'triangle'; osc3.frequency.value = 55;
    const g3 = audioCtx.createGain(); g3.gain.value = 0.08;
    osc3.connect(g3); g3.connect(ambientDroneGain); osc3.start();

    // LFO to create slow pulsing throb
    const lfo = audioCtx.createOscillator();
    lfo.type = 'sine'; lfo.frequency.value = 0.08;
    const lfoGain = audioCtx.createGain(); lfoGain.gain.value = 0.25;
    lfo.connect(lfoGain); lfoGain.connect(ambientDroneGain.gain);
    lfo.start();

    ambientDroneGain.gain.setTargetAtTime(0.55, audioCtx.currentTime + 1, 3.5);
    ambientDroneNode = { osc1, osc2, osc3, lfo };

  } else if (currentPack === 'akira') {
    // AKIRA: Geinoh Yamashirogumi-inspired -- clusters of dissonant tones,
    // chaotic choral undertone, driving low pulse
    const t = audioCtx.currentTime;

    // Sub bass -- the motorcycle engine heartbeat
    const bass = audioCtx.createOscillator();
    bass.type = 'sawtooth'; bass.frequency.value = 38;
    const bassGain = audioCtx.createGain(); bassGain.gain.value = 0.22;
    const bassFilter = audioCtx.createBiquadFilter();
    bassFilter.type = 'lowpass'; bassFilter.frequency.value = 120;
    bass.connect(bassFilter); bassFilter.connect(bassGain);
    bassGain.connect(ambientDroneGain); bass.start();

    // Mid tension cluster -- tritone dissonance (unsettling)
    const mid1 = audioCtx.createOscillator();
    mid1.type = 'sine'; mid1.frequency.value = 220;
    const mid1g = audioCtx.createGain(); mid1g.gain.value = 0.07;
    mid1.connect(mid1g); mid1g.connect(ambientDroneGain); mid1.start();

    const mid2 = audioCtx.createOscillator();
    mid2.type = 'sine'; mid2.frequency.value = 311; // tritone above 220
    const mid2g = audioCtx.createGain(); mid2g.gain.value = 0.05;
    mid2.connect(mid2g); mid2g.connect(ambientDroneGain); mid2.start();

    // Choral shimmer -- high warble oscillator
    const choral = audioCtx.createOscillator();
    choral.type = 'triangle'; choral.frequency.value = 880;
    const choralLFO = audioCtx.createOscillator();
    choralLFO.type = 'sine'; choralLFO.frequency.value = 5.5; // vibrato
    const choralLFOGain = audioCtx.createGain(); choralLFOGain.gain.value = 12;
    choralLFO.connect(choralLFOGain); choralLFOGain.connect(choral.frequency);
    const choralG = audioCtx.createGain(); choralG.gain.value = 0.022;
    choral.connect(choralG); choralG.connect(ambientDroneGain);
    choral.start(); choralLFO.start();

    // Driving pulse LFO (2.4 Hz -- like a racing heartbeat)
    const pulseLFO = audioCtx.createOscillator();
    pulseLFO.type = 'square'; pulseLFO.frequency.value = 2.4;
    const pulseLFOGain = audioCtx.createGain(); pulseLFOGain.gain.value = 0.08;
    pulseLFO.connect(pulseLFOGain); pulseLFOGain.connect(ambientDroneGain.gain);
    pulseLFO.start();

    ambientDroneGain.gain.setTargetAtTime(0.48, t + 0.5, 2.0);
    ambientDroneNode = { bass, mid1, mid2, choral, choralLFO, pulseLFO };

  } else if (currentPack === 'tron') {
    // TRON: clean digital sine tones -- pure, cold, mathematical
    const t = audioCtx.currentTime;
    const base1 = audioCtx.createOscillator();
    base1.type = 'sine'; base1.frequency.value = 55; // low A
    const bg1 = audioCtx.createGain(); bg1.gain.value = 0.28;
    base1.connect(bg1); bg1.connect(ambientDroneGain); base1.start();

    const base2 = audioCtx.createOscillator();
    base2.type = 'sine'; base2.frequency.value = 110; // A2 octave
    const bg2 = audioCtx.createGain(); bg2.gain.value = 0.14;
    base2.connect(bg2); bg2.connect(ambientDroneGain); base2.start();

    // High digital shimmer -- Wendy Carlos inspired
    const shimmer = audioCtx.createOscillator();
    shimmer.type = 'triangle'; shimmer.frequency.value = 880;
    const sg = audioCtx.createGain(); sg.gain.value = 0.018;
    const shimLFO = audioCtx.createOscillator(); shimLFO.frequency.value = 0.25;
    const shimLFOg = audioCtx.createGain(); shimLFOg.gain.value = 0.015;
    shimLFO.connect(shimLFOg); shimLFOg.connect(sg.gain); shimLFO.start();
    shimmer.connect(sg); sg.connect(ambientDroneGain); shimmer.start();

    // Slow pulse -- digital heartbeat
    const pulseLFO = audioCtx.createOscillator();
    pulseLFO.type = 'sine'; pulseLFO.frequency.value = 0.5;
    const pLFOg = audioCtx.createGain(); pLFOg.gain.value = 0.06;
    pulseLFO.connect(pLFOg); pLFOg.connect(ambientDroneGain.gain); pulseLFO.start();

    ambientDroneGain.gain.setTargetAtTime(0.45, t + 0.8, 2.0);
    ambientDroneNode = { base1, base2, shimmer, shimLFO, pulseLFO };

  } else if (currentPack === 'knightrider') {
    // KNIGHT RIDER: Stu Phillips-inspired synth bass + scanner pulse
    const t = audioCtx.currentTime;
    const bass = audioCtx.createOscillator();
    bass.type = 'sawtooth'; bass.frequency.value = 49; // low G# bass
    const bf = audioCtx.createBiquadFilter(); bf.type = 'lowpass'; bf.frequency.value = 200;
    const bg = audioCtx.createGain(); bg.gain.value = 0.3;
    bass.connect(bf); bf.connect(bg); bg.connect(ambientDroneGain); bass.start();

    const fifth = audioCtx.createOscillator();
    fifth.type = 'sine'; fifth.frequency.value = 73.4; // D# fifth above
    const fg = audioCtx.createGain(); fg.gain.value = 0.12;
    fifth.connect(fg); fg.connect(ambientDroneGain); fifth.start();

    // Scanner rhythm LFO -- 2.2s matches the visual scanner
    const scanLFO = audioCtx.createOscillator();
    scanLFO.type = 'sine'; scanLFO.frequency.value = 1/2.2;
    const scanLFOg = audioCtx.createGain(); scanLFOg.gain.value = 0.09;
    scanLFO.connect(scanLFOg); scanLFOg.connect(ambientDroneGain.gain); scanLFO.start();

    ambientDroneGain.gain.setTargetAtTime(0.42, t + 0.6, 1.8);
    ambientDroneNode = { bass, fifth, scanLFO };

  } else if (currentPack === 'airwolf') {
    // AIRWOLF: Sylvester Levay-inspired heroic synth + rotor ambience
    const t = audioCtx.currentTime;
    // Low rotor drone -- beating oscillators create "whomp whomp" feel
    const rotor1 = audioCtx.createOscillator();
    rotor1.type = 'sine'; rotor1.frequency.value = 24;
    const r1g = audioCtx.createGain(); r1g.gain.value = 0.4;
    rotor1.connect(r1g); r1g.connect(ambientDroneGain); rotor1.start();

    const rotor2 = audioCtx.createOscillator();
    rotor2.type = 'sine'; rotor2.frequency.value = 25.8; // slight detune = beat frequency
    const r2g = audioCtx.createGain(); r2g.gain.value = 0.35;
    rotor2.connect(r2g); r2g.connect(ambientDroneGain); rotor2.start();

    // Heroic synth pad -- major 3rd
    const pad = audioCtx.createOscillator();
    pad.type = 'triangle'; pad.frequency.value = 220; // A3
    const padg = audioCtx.createGain(); padg.gain.value = 0.06;
    const padLFO = audioCtx.createOscillator(); padLFO.frequency.value = 0.15;
    const padLFOg = audioCtx.createGain(); padLFOg.gain.value = 0.04;
    padLFO.connect(padLFOg); padLFOg.connect(padg.gain); padLFO.start();
    pad.connect(padg); padg.connect(ambientDroneGain); pad.start();

    ambientDroneGain.gain.setTargetAtTime(0.38, t + 1.2, 3.0);
    ambientDroneNode = { rotor1, rotor2, pad, padLFO };

  } else if (currentPack === 'matrix') {
    // MATRIX: Deep digital hum -- the sound of the simulation
    const t = audioCtx.currentTime;
    // Sub bass digital tone -- like server room hum
    const sub = audioCtx.createOscillator();
    sub.type = 'sawtooth'; sub.frequency.value = 55; // A1
    const subFilter = audioCtx.createBiquadFilter();
    subFilter.type = 'lowpass'; subFilter.frequency.value = 120; subFilter.Q.value = 3;
    const subG = audioCtx.createGain(); subG.gain.value = 0.35;
    sub.connect(subFilter); subFilter.connect(subG); subG.connect(ambientDroneGain); sub.start();

    // Digital data noise -- filtered white noise
    const bufSize = audioCtx.sampleRate * 2;
    const noiseBuffer = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const noiseData = noiseBuffer.getChannelData(0);
    for (let i = 0; i < bufSize; i++) noiseData[i] = (Math.random() * 2 - 1) * 0.3;
    const noiseSource = audioCtx.createBufferSource();
    noiseSource.buffer = noiseBuffer; noiseSource.loop = true;
    const noiseFilter = audioCtx.createBiquadFilter();
    noiseFilter.type = 'bandpass'; noiseFilter.frequency.value = 2800; noiseFilter.Q.value = 12;
    const noiseG = audioCtx.createGain(); noiseG.gain.value = 0.04;
    noiseSource.connect(noiseFilter); noiseFilter.connect(noiseG); noiseG.connect(ambientDroneGain); noiseSource.start();

    // Slow LFO on the sub -- breathing digital pulse
    const lfo = audioCtx.createOscillator();
    lfo.type = 'sine'; lfo.frequency.value = 0.08;
    const lfoG = audioCtx.createGain(); lfoG.gain.value = 0.12;
    lfo.connect(lfoG); lfoG.connect(subG.gain); lfo.start();

    ambientDroneGain.gain.setTargetAtTime(0.42, t + 0.5, 2.0);
    ambientDroneNode = { sub, noiseSource, lfo };

  } else if (currentPack === 'hal9000') {
    // HAL 9000: Discovery One life support -- deep, cold, clinical hum
    const t = audioCtx.currentTime;
    // Primary hum -- 60Hz electrical, like a space station
    const hum = audioCtx.createOscillator();
    hum.type = 'sine'; hum.frequency.value = 60;
    const humG = audioCtx.createGain(); humG.gain.value = 0.28;
    hum.connect(humG); humG.connect(ambientDroneGain); hum.start();

    // Second harmonic -- 120Hz, adds the "alive" quality
    const hum2 = audioCtx.createOscillator();
    hum2.type = 'sine'; hum2.frequency.value = 120;
    const hum2G = audioCtx.createGain(); hum2G.gain.value = 0.10;
    hum2.connect(hum2G); hum2G.connect(ambientDroneGain); hum2.start();

    // Deep infrasonic undertone -- the void of space
    const deep = audioCtx.createOscillator();
    deep.type = 'sine'; deep.frequency.value = 28;
    const deepG = audioCtx.createGain(); deepG.gain.value = 0.22;
    deep.connect(deepG); deepG.connect(ambientDroneGain); deep.start();

    // Very slow breathing LFO -- HAL is always thinking
    const lfo = audioCtx.createOscillator();
    lfo.type = 'sine'; lfo.frequency.value = 0.05; // one breath per 20 seconds
    const lfoG = audioCtx.createGain(); lfoG.gain.value = 0.08;
    lfo.connect(lfoG); lfoG.connect(humG.gain); lfo.start();

    ambientDroneGain.gain.setTargetAtTime(0.35, t + 2.0, 4.0); // slow fade in -- deliberate
    ambientDroneNode = { hum, hum2, deep, lfo };

  } else if (currentPack === 'hackers') {
    // HACKERS: CRT hum + faint modem carrier -- you're connected at 2am
    const t = audioCtx.currentTime;
    // CRT 15kHz whine -- barely audible, just present
    const crt = audioCtx.createOscillator();
    crt.type = 'sine'; crt.frequency.value = 15734;
    const crtG = audioCtx.createGain(); crtG.gain.value = 0.016;
    crt.connect(crtG); crtG.connect(ambientDroneGain); crt.start();
    // 60Hz PSU hum
    const psu = audioCtx.createOscillator();
    psu.type = 'sine'; psu.frequency.value = 60;
    const psuG = audioCtx.createGain(); psuG.gain.value = 0.28;
    psu.connect(psuG); psuG.connect(ambientDroneGain); psu.start();
    // Faint modem carrier noise -- still connected
    const bufSize = audioCtx.sampleRate * 2;
    const nBuf = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const nData = nBuf.getChannelData(0);
    for (let i = 0; i < bufSize; i++) nData[i] = (Math.random()*2-1)*0.15;
    const noise = audioCtx.createBufferSource();
    noise.buffer = nBuf; noise.loop = true;
    const nFlt = audioCtx.createBiquadFilter();
    nFlt.type = 'bandpass'; nFlt.frequency.value = 2100; nFlt.Q.value = 4;
    const nG = audioCtx.createGain(); nG.gain.value = 0.08;
    noise.connect(nFlt); nFlt.connect(nG); nG.connect(ambientDroneGain); noise.start();
    ambientDroneGain.gain.setTargetAtTime(0.52, t + 0.3, 1.5);
    ambientDroneNode = { crt, psu, noise };

  } else if (currentPack === 'bladerunner') {
    // BLADE RUNNER: Vangelis synth drone -- warm, dark, wet city night
    const t = audioCtx.currentTime;
    // Deep pad -- two slightly detuned sines, the iconic Vangelis warmth
    const o1 = audioCtx.createOscillator(); o1.type='sine'; o1.frequency.value=55;
    const o2 = audioCtx.createOscillator(); o2.type='sine'; o2.frequency.value=55.4; // slight detune
    const o3 = audioCtx.createOscillator(); o3.type='sine'; o3.frequency.value=82.5; // 5th above
    const g1 = audioCtx.createGain(); g1.gain.value=0.22;
    const g2 = audioCtx.createGain(); g2.gain.value=0.20;
    const g3 = audioCtx.createGain(); g3.gain.value=0.10;
    // Slow tremolo LFO -- the city breathing
    const lfo = audioCtx.createOscillator(); lfo.type='sine'; lfo.frequency.value=0.12;
    const lfoG = audioCtx.createGain(); lfoG.gain.value=0.06;
    lfo.connect(lfoG); lfoG.connect(g1.gain);
    // Rain noise layer -- filtered hiss
    const bufSize = audioCtx.sampleRate * 3;
    const nBuf = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const nData = nBuf.getChannelData(0);
    for (let i=0; i<bufSize; i++) nData[i]=(Math.random()*2-1);
    const rainNoise = audioCtx.createBufferSource(); rainNoise.buffer=nBuf; rainNoise.loop=true;
    const rainFlt = audioCtx.createBiquadFilter(); rainFlt.type='bandpass'; rainFlt.frequency.value=3000; rainFlt.Q.value=0.5;
    const rainG = audioCtx.createGain(); rainG.gain.value=0.018;
    rainNoise.connect(rainFlt); rainFlt.connect(rainG); rainG.connect(ambientDroneGain);
    [o1,o2,o3].forEach((o,i) => {
      const g = [g1,g2,g3][i];
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=400;
      o.connect(flt); flt.connect(g); g.connect(ambientDroneGain); o.start();
    });
    lfo.start(); rainNoise.start();
    ambientDroneGain.gain.setTargetAtTime(0.45, t+1.5, 3.0);
    ambientDroneNode = { o1, o2, o3, lfo, rainNoise };

  } else if (currentPack === 'aliens') {
    // ALIENS: Deep reactor hum + tension drone -- LV-426 atmospheric processor
    const t = audioCtx.currentTime;
    // Low industrial rumble
    const rumble = audioCtx.createOscillator(); rumble.type='sawtooth'; rumble.frequency.value=28;
    const rumbleG = audioCtx.createGain(); rumbleG.gain.value=0.15;
    const rumbleFlt = audioCtx.createBiquadFilter(); rumbleFlt.type='lowpass'; rumbleFlt.frequency.value=80;
    rumble.connect(rumbleFlt); rumbleFlt.connect(rumbleG); rumbleG.connect(ambientDroneGain); rumble.start();
    // Mid tension drone -- slow pulse
    const drone = audioCtx.createOscillator(); drone.type='sine'; drone.frequency.value=44;
    const droneG = audioCtx.createGain(); droneG.gain.value=0.18;
    drone.connect(droneG); droneG.connect(ambientDroneGain); drone.start();
    // Tension LFO -- irregular pulse, like something alive
    const lfo = audioCtx.createOscillator(); lfo.type='sine'; lfo.frequency.value=0.08;
    const lfoG = audioCtx.createGain(); lfoG.gain.value=0.10;
    lfo.connect(lfoG); lfoG.connect(droneG.gain); lfo.start();
    // Atmospheric hiss -- vents, processor fans
    const bufSize = audioCtx.sampleRate * 2;
    const nBuf = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const nData = nBuf.getChannelData(0);
    for (let i=0; i<bufSize; i++) nData[i]=(Math.random()*2-1);
    const atmoNoise = audioCtx.createBufferSource(); atmoNoise.buffer=nBuf; atmoNoise.loop=true;
    const atmoFlt = audioCtx.createBiquadFilter(); atmoFlt.type='highpass'; atmoFlt.frequency.value=600;
    const atmoG = audioCtx.createGain(); atmoG.gain.value=0.022;
    atmoNoise.connect(atmoFlt); atmoFlt.connect(atmoG); atmoG.connect(ambientDroneGain); atmoNoise.start();
    ambientDroneGain.gain.setTargetAtTime(0.42, t+0.8, 2.0);
    ambientDroneNode = { rumble, drone, lfo, atmoNoise };

  } else if (currentPack === 'c64') {
    // C64 SID CHIP -- MOS 6581 approximation
    // Three oscillators with filter sweep -- the iconic SID sound
    const t = audioCtx.currentTime;
    // Osc 1 -- sawtooth lead, SID-style
    const osc1 = audioCtx.createOscillator();
    osc1.type = 'sawtooth'; osc1.frequency.value = 110; // A2
    // SID filter approximation -- bandpass with resonance
    const filter = audioCtx.createBiquadFilter();
    filter.type = 'bandpass'; filter.frequency.value = 800; filter.Q.value = 8;
    // Slow filter sweep LFO -- that SID wah effect
    const filterLFO = audioCtx.createOscillator();
    filterLFO.type = 'sine'; filterLFO.frequency.value = 0.18;
    const filterLFOg = audioCtx.createGain(); filterLFOg.gain.value = 600;
    filterLFO.connect(filterLFOg); filterLFOg.connect(filter.frequency);
    filterLFO.start();
    const g1 = audioCtx.createGain(); g1.gain.value = 0.22;
    osc1.connect(filter); filter.connect(g1); g1.connect(ambientDroneGain); osc1.start();
    // Osc 2 -- pulse wave (SID duty cycle ~50%), slightly detuned
    const osc2 = audioCtx.createOscillator();
    osc2.type = 'square'; osc2.frequency.value = 110.4; // slight detune
    const g2 = audioCtx.createGain(); g2.gain.value = 0.1;
    osc2.connect(g2); g2.connect(ambientDroneGain); osc2.start();
    // Osc 3 -- triangle sub bass
    const osc3 = audioCtx.createOscillator();
    osc3.type = 'triangle'; osc3.frequency.value = 55; // sub octave
    const g3 = audioCtx.createGain(); g3.gain.value = 0.18;
    osc3.connect(g3); g3.connect(ambientDroneGain); osc3.start();
    // Ring mod simulation -- SID's killer feature
    const ringMod = audioCtx.createOscillator();
    ringMod.type = 'sine'; ringMod.frequency.value = 165; // E3 -- SID ring
    const ringG = audioCtx.createGain(); ringG.gain.value = 0.04;
    ringMod.connect(ringG); ringG.connect(ambientDroneGain); ringMod.start();
    ambientDroneGain.gain.setTargetAtTime(0.44, t + 0.3, 1.5);
    ambientDroneNode = { osc1, osc2, osc3, ringMod, filterLFO };

  } else if (currentPack === 'nes') {
    // NES 2A03 -- Pulse wave + triangle bass + noise
    const t = audioCtx.currentTime;
    // Pulse 1 -- ~50% duty cycle melody channel
    const pulse1 = audioCtx.createOscillator();
    pulse1.type = 'square'; pulse1.frequency.value = 220; // A3
    const p1g = audioCtx.createGain(); p1g.gain.value = 0.12;
    pulse1.connect(p1g); p1g.connect(ambientDroneGain); pulse1.start();
    // Pulse 2 -- harmony a fifth up
    const pulse2 = audioCtx.createOscillator();
    pulse2.type = 'square'; pulse2.frequency.value = 330; // E4
    const p2g = audioCtx.createGain(); p2g.gain.value = 0.07;
    pulse2.connect(p2g); p2g.connect(ambientDroneGain); pulse2.start();
    // Triangle bass channel -- the warm NES bass
    const tri = audioCtx.createOscillator();
    tri.type = 'triangle'; tri.frequency.value = 55; // A1
    const tg = audioCtx.createGain(); tg.gain.value = 0.28;
    const triFilter = audioCtx.createBiquadFilter();
    triFilter.type = 'lowpass'; triFilter.frequency.value = 300;
    tri.connect(triFilter); triFilter.connect(tg); tg.connect(ambientDroneGain); tri.start();
    // Noise channel -- light hiss for ambience
    const bufSize = audioCtx.sampleRate * 2;
    const noiseBuffer = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const noiseData = noiseBuffer.getChannelData(0);
    // NES-style 1-bit LFSR noise approximation
    let lfsr = 1;
    for (let i = 0; i < bufSize; i++) {
      const bit = ((lfsr >> 0) ^ (lfsr >> 1)) & 1;
      lfsr = (lfsr >> 1) | (bit << 14);
      noiseData[i] = (lfsr & 1) ? 0.5 : -0.5;
    }
    const noiseSource = audioCtx.createBufferSource();
    noiseSource.buffer = noiseBuffer; noiseSource.loop = true;
    const noiseFilter = audioCtx.createBiquadFilter();
    noiseFilter.type = 'bandpass'; noiseFilter.frequency.value = 3000; noiseFilter.Q.value = 0.5;
    const noiseG = audioCtx.createGain(); noiseG.gain.value = 0.018;
    noiseSource.connect(noiseFilter); noiseFilter.connect(noiseG); noiseG.connect(ambientDroneGain);
    noiseSource.start();
    // Slow arpeggio feel -- LFO on pulse1
    const arpLFO = audioCtx.createOscillator();
    arpLFO.type = 'sine'; arpLFO.frequency.value = 0.3;
    const arpG = audioCtx.createGain(); arpG.gain.value = 0.07;
    arpLFO.connect(arpG); arpG.connect(ambientDroneGain.gain); arpLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.4, t + 0.2, 1.2);
    ambientDroneNode = { pulse1, pulse2, tri, noiseSource, arpLFO };

  } else if (currentPack === 'gameboy') {
    // GAME BOY DMG -- 4 channels, that specific tinny handheld magic
    const t = audioCtx.currentTime;
    // Channel 1 -- pulse with envelope (12.5% duty-ish via square + HPF)
    const ch1 = audioCtx.createOscillator();
    ch1.type = 'square'; ch1.frequency.value = 262; // C4 -- middle C
    const ch1Filter = audioCtx.createBiquadFilter();
    ch1Filter.type = 'highpass'; ch1Filter.frequency.value = 100;
    const ch1g = audioCtx.createGain(); ch1g.gain.value = 0.08;
    ch1.connect(ch1Filter); ch1Filter.connect(ch1g); ch1g.connect(ambientDroneGain); ch1.start();
    // Channel 2 -- second pulse, E4 harmony
    const ch2 = audioCtx.createOscillator();
    ch2.type = 'square'; ch2.frequency.value = 330; // E4
    const ch2g = audioCtx.createGain(); ch2g.gain.value = 0.05;
    ch2.connect(ch2g); ch2g.connect(ambientDroneGain); ch2.start();
    // Channel 3 -- wave (custom waveform -- GB wave channel)
    const ch3 = audioCtx.createOscillator();
    ch3.type = 'triangle'; ch3.frequency.value = 131; // C3 bass
    const ch3g = audioCtx.createGain(); ch3g.gain.value = 0.2;
    const ch3Filter = audioCtx.createBiquadFilter();
    ch3Filter.type = 'lowpass'; ch3Filter.frequency.value = 500;
    ch3.connect(ch3Filter); ch3Filter.connect(ch3g); ch3g.connect(ambientDroneGain); ch3.start();
    // Characteristic GB slight pitch warble (battery-dying feel)
    const warpLFO = audioCtx.createOscillator();
    warpLFO.type = 'sine'; warpLFO.frequency.value = 0.06;
    const warpG = audioCtx.createGain(); warpG.gain.value = 1.5;
    warpLFO.connect(warpG); warpG.connect(ch1.frequency); warpLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.38, t + 0.2, 1.0);
    ambientDroneNode = { ch1, ch2, ch3, warpLFO };

  } else if (currentPack === 'genesis') {
    // SEGA GENESIS YM2612 -- FM synthesis approximation
    // FM synthesis: carrier + modulator = complex metallic tones
    const t = audioCtx.currentTime;
    // FM operator pair 1 -- carrier
    const carrier1 = audioCtx.createOscillator();
    carrier1.type = 'sine'; carrier1.frequency.value = 110; // A2
    // Modulator feeds into carrier frequency -- FM effect
    const modulator1 = audioCtx.createOscillator();
    modulator1.type = 'sine'; modulator1.frequency.value = 220; // 2:1 ratio
    const modGain1 = audioCtx.createGain(); modGain1.gain.value = 180; // modulation index
    modulator1.connect(modGain1); modGain1.connect(carrier1.frequency);
    modulator1.start();
    const c1g = audioCtx.createGain(); c1g.gain.value = 0.2;
    carrier1.connect(c1g); c1g.connect(ambientDroneGain); carrier1.start();
    // FM pair 2 -- higher metallic shimmer
    const carrier2 = audioCtx.createOscillator();
    carrier2.type = 'sine'; carrier2.frequency.value = 220;
    const modulator2 = audioCtx.createOscillator();
    modulator2.type = 'sine'; modulator2.frequency.value = 550; // 2.5:1 -- inharmonic = metallic
    const modGain2 = audioCtx.createGain(); modGain2.gain.value = 120;
    modulator2.connect(modGain2); modGain2.connect(carrier2.frequency);
    modulator2.start();
    const c2g = audioCtx.createGain(); c2g.gain.value = 0.08;
    carrier2.connect(c2g); c2g.connect(ambientDroneGain); carrier2.start();
    // Bass FM -- that Genesis kick bass sub
    const bassFM = audioCtx.createOscillator();
    bassFM.type = 'sine'; bassFM.frequency.value = 55;
    const bassMod = audioCtx.createOscillator();
    bassMod.type = 'sine'; bassMod.frequency.value = 110;
    const bassModG = audioCtx.createGain(); bassModG.gain.value = 80;
    bassMod.connect(bassModG); bassModG.connect(bassFM.frequency); bassMod.start();
    const bassg = audioCtx.createGain(); bassg.gain.value = 0.3;
    bassFM.connect(bassg); bassg.connect(ambientDroneGain); bassFM.start();
    ambientDroneGain.gain.setTargetAtTime(0.42, t + 0.4, 1.5);
    ambientDroneNode = { carrier1, carrier2, bassFM, modulator1, modulator2, bassMod };

  } else if (currentPack === 'atari') {
    // ATARI 2600 TIA CHIP -- POKEY-style harsh distorted tones
    const t = audioCtx.currentTime;
    // TIA distortion -- harsh sawtooth through distortion-like waveshaper
    const osc1 = audioCtx.createOscillator();
    osc1.type = 'sawtooth'; osc1.frequency.value = 60;
    // Waveshaper for TIA "buzzy" distortion character
    const curve = new Float32Array(256);
    for (let i = 0; i < 256; i++) {
      const x = (i * 2 / 256) - 1;
      curve[i] = x < 0 ? -Math.pow(Math.abs(x), 0.4) : Math.pow(x, 0.4); // heavy clip
    }
    const shaper = audioCtx.createWaveShaper(); shaper.curve = curve;
    const shapFilter = audioCtx.createBiquadFilter();
    shapFilter.type = 'lowpass'; shapFilter.frequency.value = 1200;
    const g1 = audioCtx.createGain(); g1.gain.value = 0.15;
    osc1.connect(shaper); shaper.connect(shapFilter); shapFilter.connect(g1);
    g1.connect(ambientDroneGain); osc1.start();
    // Second TIA voice -- slightly higher, classic 2600 "blip" chord
    const osc2 = audioCtx.createOscillator();
    osc2.type = 'square'; osc2.frequency.value = 90; // rough minor third
    const g2 = audioCtx.createGain(); g2.gain.value = 0.1;
    osc2.connect(g2); g2.connect(ambientDroneGain); osc2.start();
    // Slow irregular wobble -- old CRT/RF modulator interference feel
    const wobbleLFO = audioCtx.createOscillator();
    wobbleLFO.type = 'sine'; wobbleLFO.frequency.value = 0.12;
    const wobbleG = audioCtx.createGain(); wobbleG.gain.value = 8;
    wobbleLFO.connect(wobbleG); wobbleG.connect(osc1.frequency); wobbleLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.36, t + 0.5, 2.0);
    ambientDroneNode = { osc1, osc2, wobbleLFO };

  } else if (currentPack === 'amiga') {
    // AMIGA PAULA -- 4-channel PCM, warm sampled character
    const t = audioCtx.currentTime;
    // Paula approximation -- warm bandlimited tones (sampled instrument feel)
    const ch1 = audioCtx.createOscillator();
    ch1.type = 'sawtooth'; ch1.frequency.value = 130.8; // C3
    const ch1Filter = audioCtx.createBiquadFilter();
    ch1Filter.type = 'lowpass'; ch1Filter.frequency.value = 2000; // Paula's 7kHz limit at 8bit
    ch1Filter.Q.value = 0.5;
    const ch1g = audioCtx.createGain(); ch1g.gain.value = 0.14;
    ch1.connect(ch1Filter); ch1Filter.connect(ch1g); ch1g.connect(ambientDroneGain); ch1.start();
    // Channel 2 -- bass warmth
    const ch2 = audioCtx.createOscillator();
    ch2.type = 'triangle'; ch2.frequency.value = 65.4; // C2
    const ch2g = audioCtx.createGain(); ch2g.gain.value = 0.2;
    ch2.connect(ch2g); ch2g.connect(ambientDroneGain); ch2.start();
    // Channel 3 -- tracker-style arp pad
    const ch3 = audioCtx.createOscillator();
    ch3.type = 'sawtooth'; ch3.frequency.value = 196; // G3
    const ch3Filter = audioCtx.createBiquadFilter();
    ch3Filter.type = 'lowpass'; ch3Filter.frequency.value = 1500;
    const ch3g = audioCtx.createGain(); ch3g.gain.value = 0.06;
    ch3.connect(ch3Filter); ch3Filter.connect(ch3g); ch3g.connect(ambientDroneGain); ch3.start();
    // Paula stereo width simulation -- slight detune between channels
    const ch4 = audioCtx.createOscillator();
    ch4.type = 'sawtooth'; ch4.frequency.value = 131.4; // ever so slightly detuned
    const ch4g = audioCtx.createGain(); ch4g.gain.value = 0.1;
    ch4.connect(ch4g); ch4g.connect(ambientDroneGain); ch4.start();
    // Slow modtracker-style vibrato
    const vibratoLFO = audioCtx.createOscillator();
    vibratoLFO.type = 'sine'; vibratoLFO.frequency.value = 5.5;
    const vibG = audioCtx.createGain(); vibG.gain.value = 3;
    vibratoLFO.connect(vibG); vibG.connect(ch3.frequency); vibratoLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.4, t + 0.4, 1.8);
    ambientDroneNode = { ch1, ch2, ch3, ch4, vibratoLFO };

  } else if (currentPack === 'synthwave') {
    // SYNTHWAVE -- Oberheim-style arp pad, lush analog warmth, gated shimmer
    const t = audioCtx.currentTime;
    // Root pad -- detuned saw duo (Juno chorus effect)
    const saw1 = audioCtx.createOscillator(); saw1.type = 'sawtooth'; saw1.frequency.value = 55;
    const saw2 = audioCtx.createOscillator(); saw2.type = 'sawtooth'; saw2.frequency.value = 55.6; // chorus detune
    const saw3 = audioCtx.createOscillator(); saw3.type = 'sawtooth'; saw3.frequency.value = 110.3;
    const flt = audioCtx.createBiquadFilter(); flt.type = 'lowpass'; flt.frequency.value = 800; flt.Q.value = 3.5;
    // Filter envelope LFO -- slow sweep for that classic synth pad breathe
    const fltLFO = audioCtx.createOscillator(); fltLFO.type = 'sine'; fltLFO.frequency.value = 0.12;
    const fltLFOg = audioCtx.createGain(); fltLFOg.gain.value = 320;
    fltLFO.connect(fltLFOg); fltLFOg.connect(flt.frequency); fltLFO.start();
    const sg1 = audioCtx.createGain(); sg1.gain.value = 0.18;
    const sg2 = audioCtx.createGain(); sg2.gain.value = 0.14;
    const sg3 = audioCtx.createGain(); sg3.gain.value = 0.10;
    saw1.connect(flt); saw2.connect(flt); saw3.connect(flt);
    flt.connect(sg1); sg1.connect(ambientDroneGain);
    saw2.connect(sg2); sg2.connect(ambientDroneGain);
    saw3.connect(sg3); sg3.connect(ambientDroneGain);
    saw1.start(); saw2.start(); saw3.start();
    // High shimmer -- glass pad above
    const shimmer = audioCtx.createOscillator(); shimmer.type = 'triangle'; shimmer.frequency.value = 880;
    const shimLFO = audioCtx.createOscillator(); shimLFO.type = 'sine'; shimLFO.frequency.value = 0.07;
    const shimLFOg = audioCtx.createGain(); shimLFOg.gain.value = 0.025;
    shimLFO.connect(shimLFOg); shimLFOg.connect(shimmer.frequency); shimLFO.start();
    const shimG = audioCtx.createGain(); shimG.gain.value = 0.04;
    shimmer.connect(shimG); shimG.connect(ambientDroneGain); shimmer.start();
    ambientDroneGain.gain.setTargetAtTime(0.45, t + 0.8, 3.0);
    ambientDroneNode = { saw1, saw2, saw3, shimmer, fltLFO, shimLFO };

  } else if (currentPack === 'deepspace') {
    // DEEP SPACE -- near silence, sub only, vast emptiness
    const t = audioCtx.currentTime;
    // 12Hz infrasonic rumble -- felt more than heard
    const sub = audioCtx.createOscillator(); sub.type = 'sine'; sub.frequency.value = 12;
    const subG = audioCtx.createGain(); subG.gain.value = 0.55;
    sub.connect(subG); subG.connect(ambientDroneGain); sub.start();
    // 28Hz harmonic -- distant cosmos
    const sub2 = audioCtx.createOscillator(); sub2.type = 'sine'; sub2.frequency.value = 28;
    const sub2G = audioCtx.createGain(); sub2G.gain.value = 0.12;
    sub2.connect(sub2G); sub2G.connect(ambientDroneGain); sub2.start();
    // Very slow amplitude modulation -- breathing void
    const voidLFO = audioCtx.createOscillator(); voidLFO.type = 'sine'; voidLFO.frequency.value = 0.022;
    const voidLFOg = audioCtx.createGain(); voidLFOg.gain.value = 0.08;
    voidLFO.connect(voidLFOg); voidLFOg.connect(ambientDroneGain.gain); voidLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.18, t + 2.0, 6.0); // very slow fade in -- you are far away
    ambientDroneNode = { sub, sub2, voidLFO };

  } else if (currentPack === 'industrial') {
    // INDUSTRIAL -- distorted grinding metal, NIN energy
    const t = audioCtx.currentTime;
    // Sawtooth through waveshaper distortion
    const saw = audioCtx.createOscillator(); saw.type = 'sawtooth'; saw.frequency.value = 46;
    const wshaper = audioCtx.createWaveShaper();
    const curve = new Float32Array(512);
    for (let i = 0; i < 512; i++) { const x = (i * 2) / 512 - 1; curve[i] = (Math.PI + 280) * x / (Math.PI + 280 * Math.abs(x)); }
    wshaper.curve = curve; wshaper.oversample = '4x';
    const distFlt = audioCtx.createBiquadFilter(); distFlt.type = 'bandpass'; distFlt.frequency.value = 380; distFlt.Q.value = 1.2;
    const distG = audioCtx.createGain(); distG.gain.value = 0.12;
    saw.connect(wshaper); wshaper.connect(distFlt); distFlt.connect(distG); distG.connect(ambientDroneGain); saw.start();
    // Metal grind -- high freq noise via detuned saws
    const grind1 = audioCtx.createOscillator(); grind1.type = 'sawtooth'; grind1.frequency.value = 183;
    const grind2 = audioCtx.createOscillator(); grind2.type = 'sawtooth'; grind2.frequency.value = 187.5;
    const grindFlt = audioCtx.createBiquadFilter(); grindFlt.type = 'lowpass'; grindFlt.frequency.value = 600;
    const grindG = audioCtx.createGain(); grindG.gain.value = 0.06;
    grind1.connect(grindFlt); grind2.connect(grindFlt); grindFlt.connect(grindG); grindG.connect(ambientDroneGain);
    grind1.start(); grind2.start();
    // Rhythmic pulse LFO -- machinery thud
    const pulseLFO = audioCtx.createOscillator(); pulseLFO.type = 'square'; pulseLFO.frequency.value = 1.6;
    const pulseLFOg = audioCtx.createGain(); pulseLFOg.gain.value = 0.08;
    pulseLFO.connect(pulseLFOg); pulseLFOg.connect(distG.gain); pulseLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.42, t + 0.3, 1.5);
    ambientDroneNode = { saw, grind1, grind2, pulseLFO };

  } else if (currentPack === 'calm') {
    // CALM / FOCUS -- meditation bowl partials, near silence, barely-there
    const t = audioCtx.currentTime;
    // Singing bowl fundamental + two harmonics (Tibetan bowl ratios)
    const bowl1 = audioCtx.createOscillator(); bowl1.type = 'sine'; bowl1.frequency.value = 220; // A3
    const bowl2 = audioCtx.createOscillator(); bowl2.type = 'sine'; bowl2.frequency.value = 342; // bowl partial ~1.56×
    const bowl3 = audioCtx.createOscillator(); bowl3.type = 'sine'; bowl3.frequency.value = 502; // 2nd partial ~2.28×
    const b1g = audioCtx.createGain(); b1g.gain.value = 0.09;
    const b2g = audioCtx.createGain(); b2g.gain.value = 0.045;
    const b3g = audioCtx.createGain(); b3g.gain.value = 0.02;
    bowl1.connect(b1g); b1g.connect(ambientDroneGain);
    bowl2.connect(b2g); b2g.connect(ambientDroneGain);
    bowl3.connect(b3g); b3g.connect(ambientDroneGain);
    bowl1.start(); bowl2.start(); bowl3.start();
    // Ultra slow breathing LFO
    const breathLFO = audioCtx.createOscillator(); breathLFO.type = 'sine'; breathLFO.frequency.value = 0.04;
    const breathG = audioCtx.createGain(); breathG.gain.value = 0.04;
    breathLFO.connect(breathG); breathG.connect(ambientDroneGain.gain); breathLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.22, t + 1.5, 5.0); // very gentle fade in
    ambientDroneNode = { bowl1, bowl2, bowl3, breathLFO };

  } else if (currentPack === 'horror') {
    // HORROR -- tritone cluster, unsettling detuned dissonance
    const t = audioCtx.currentTime;
    // Tritone pair -- the "devil's interval"
    const h1 = audioCtx.createOscillator(); h1.type = 'sine'; h1.frequency.value = 196; // G3
    const h2 = audioCtx.createOscillator(); h2.type = 'sine'; h2.frequency.value = 277.2; // C#4 -- tritone above
    // Slow microtonal drift -- unsettling beating
    const h3 = audioCtx.createOscillator(); h3.type = 'triangle'; h3.frequency.value = 197.4; // barely off unison
    const h1g = audioCtx.createGain(); h1g.gain.value = 0.11;
    const h2g = audioCtx.createGain(); h2g.gain.value = 0.07;
    const h3g = audioCtx.createGain(); h3g.gain.value = 0.09;
    h1.connect(h1g); h1g.connect(ambientDroneGain);
    h2.connect(h2g); h2g.connect(ambientDroneGain);
    h3.connect(h3g); h3g.connect(ambientDroneGain);
    h1.start(); h2.start(); h3.start();
    // Occasional unpredictable pitch creep
    const creepLFO = audioCtx.createOscillator(); creepLFO.type = 'sine'; creepLFO.frequency.value = 0.031;
    const creepG = audioCtx.createGain(); creepG.gain.value = 14;
    creepLFO.connect(creepG); creepG.connect(h2.frequency); creepLFO.start();
    // Sub dread
    const dread = audioCtx.createOscillator(); dread.type = 'sine'; dread.frequency.value = 36;
    const dreadG = audioCtx.createGain(); dreadG.gain.value = 0.22;
    dread.connect(dreadG); dreadG.connect(ambientDroneGain); dread.start();
    ambientDroneGain.gain.setTargetAtTime(0.38, t + 0.5, 2.5);
    ambientDroneNode = { h1, h2, h3, dread, creepLFO };

  } else if (currentPack === 'military') {
    // MILITARY OPS -- ops room tension, comms static undertone
    const t = audioCtx.currentTime;
    // Deep ops room hum -- 60Hz hum (equipment rooms)
    const hum = audioCtx.createOscillator(); hum.type = 'sine'; hum.frequency.value = 60;
    const hum2 = audioCtx.createOscillator(); hum2.type = 'sine'; hum2.frequency.value = 120;
    const humG = audioCtx.createGain(); humG.gain.value = 0.16;
    const hum2G = audioCtx.createGain(); hum2G.gain.value = 0.06;
    hum.connect(humG); humG.connect(ambientDroneGain);
    hum2.connect(hum2G); hum2G.connect(ambientDroneGain);
    hum.start(); hum2.start();
    // Radio static undertone -- filtered noise
    const bufSize = audioCtx.sampleRate * 2;
    const noiseBuffer = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const nd = noiseBuffer.getChannelData(0);
    for (let i = 0; i < bufSize; i++) nd[i] = Math.random() * 2 - 1;
    const noiseSource = audioCtx.createBufferSource(); noiseSource.buffer = noiseBuffer; noiseSource.loop = true;
    const noiseFlt = audioCtx.createBiquadFilter(); noiseFlt.type = 'bandpass'; noiseFlt.frequency.value = 2200; noiseFlt.Q.value = 8;
    const noiseG = audioCtx.createGain(); noiseG.gain.value = 0.03;
    noiseSource.connect(noiseFlt); noiseFlt.connect(noiseG); noiseG.connect(ambientDroneGain); noiseSource.start();
    // Slow tension pulse
    const tensionLFO = audioCtx.createOscillator(); tensionLFO.type = 'sine'; tensionLFO.frequency.value = 0.18;
    const tensionG = audioCtx.createGain(); tensionG.gain.value = 0.06;
    tensionLFO.connect(tensionG); tensionG.connect(humG.gain); tensionLFO.start();
    ambientDroneGain.gain.setTargetAtTime(0.48, t + 0.4, 2.0);
    ambientDroneNode = { hum, hum2, noiseSource, tensionLFO };

  } else if (currentPack === 'lofi') {
    // LO-FI -- warm tape flutter, vinyl warmth, barely-there pad
    const t = audioCtx.currentTime;
    // Warm pad -- slightly detuned triangle waves (cassette tape feel)
    const lo1 = audioCtx.createOscillator(); lo1.type = 'triangle'; lo1.frequency.value = 110;
    const lo2 = audioCtx.createOscillator(); lo2.type = 'triangle'; lo2.frequency.value = 110.8;
    const loFlt = audioCtx.createBiquadFilter(); loFlt.type = 'lowpass'; loFlt.frequency.value = 900; loFlt.Q.value = 0.4;
    const lo1g = audioCtx.createGain(); lo1g.gain.value = 0.13;
    const lo2g = audioCtx.createGain(); lo2g.gain.value = 0.10;
    lo1.connect(loFlt); lo2.connect(loFlt); loFlt.connect(lo1g); lo1g.connect(ambientDroneGain);
    lo2.connect(lo2g); lo2g.connect(ambientDroneGain);
    lo1.start(); lo2.start();
    // Vinyl crackle -- sparse noise bursts via noise + fast LFO gate
    const bufSize = audioCtx.sampleRate;
    const crackleBuffer = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const cd = crackleBuffer.getChannelData(0);
    for (let i = 0; i < bufSize; i++) cd[i] = Math.random() * 2 - 1;
    const crackle = audioCtx.createBufferSource(); crackle.buffer = crackleBuffer; crackle.loop = true;
    const crackleFlt = audioCtx.createBiquadFilter(); crackleFlt.type = 'highpass'; crackleFlt.frequency.value = 4000;
    const crackleG = audioCtx.createGain(); crackleG.gain.value = 0.018;
    crackle.connect(crackleFlt); crackleFlt.connect(crackleG); crackleG.connect(ambientDroneGain); crackle.start();
    // Tape flutter -- slow wow/flutter pitch LFO
    const flutter = audioCtx.createOscillator(); flutter.type = 'sine'; flutter.frequency.value = 0.8;
    const flutterG = audioCtx.createGain(); flutterG.gain.value = 0.9;
    flutter.connect(flutterG); flutterG.connect(lo1.frequency); flutter.start();
    ambientDroneGain.gain.setTargetAtTime(0.35, t + 1.0, 3.5);
    ambientDroneNode = { lo1, lo2, crackle, flutter };

  } else {
    const osc1 = audioCtx.createOscillator();
    osc1.type = 'sine'; osc1.frequency.value = 42;
    const g1 = audioCtx.createGain(); g1.gain.value = 0.35;
    osc1.connect(g1); g1.connect(ambientDroneGain); osc1.start();

    const osc2 = audioCtx.createOscillator();
    osc2.type = 'sine'; osc2.frequency.value = 44.5;
    const g2 = audioCtx.createGain(); g2.gain.value = 0.2;
    osc2.connect(g2); g2.connect(ambientDroneGain); osc2.start();

    const osc3 = audioCtx.createOscillator();
    osc3.type = 'triangle'; osc3.frequency.value = 126;
    const g3 = audioCtx.createGain(); g3.gain.value = 0.06;
    osc3.connect(g3); g3.connect(ambientDroneGain); osc3.start();

    ambientDroneGain.gain.setTargetAtTime(0.5, audioCtx.currentTime + 0.5, 2.5);
    ambientDroneNode = { osc1, osc2, osc3 };
  }
}

// ─── RADAR PING ──────────────────────────────────────────────
function startRadarPing() {
  if (!audioCtx) return;
  if (radarInterval) { clearInterval(radarInterval); radarInterval = null; }
  const pingEvery = currentPack === 'redalert' ? 6800
    : currentPack === 'akira'       ? 3200
    : currentPack === 'tron'        ? 5000
    : currentPack === 'knightrider' ? 2200
    : currentPack === 'airwolf'     ? 7000
    : currentPack === 'c64'         ? 3800
    : currentPack === 'nes'         ? 2800
    : currentPack === 'gameboy'     ? 3200
    : currentPack === 'genesis'     ? 2400
    : currentPack === 'atari'       ? 4000
    : currentPack === 'amiga'       ? 3600
    : currentPack === 'synthwave'   ? 4400
    : currentPack === 'deepspace'   ? 9500
    : currentPack === 'industrial'  ? 2200
    : currentPack === 'calm'        ? 7000
    : currentPack === 'horror'      ? 3300
    : currentPack === 'military'    ? 5500
    : currentPack === 'lofi'        ? 5800
    : currentPack === 'matrix'      ? 3800
    : currentPack === 'hal9000'     ? 6500
    : currentPack === 'hackers'     ? 4800
    : currentPack === 'bladerunner' ? 5200
    : currentPack === 'aliens'      ? 2200
    : 4200;
  radarInterval = setInterval(playRadarPing, pingEvery);
}

function playRadarPing() {
  if (!audioCtx || isMuted) return;
  if      (currentPack === 'redalert')    playSonarPing();
  else if (currentPack === 'akira')       playAkiraPing();
  else if (currentPack === 'tron')        playTronPing();
  else if (currentPack === 'knightrider') playKITTPing();
  else if (currentPack === 'airwolf')     playAirwolfPing();
  else if (currentPack === 'c64')         playC64Ping();
  else if (currentPack === 'nes')         playNESPing();
  else if (currentPack === 'gameboy')     playGameBoyPing();
  else if (currentPack === 'genesis')     playGenesisPing();
  else if (currentPack === 'atari')       playAtariPing();
  else if (currentPack === 'amiga')       playAmigaPing();
  else if (currentPack === 'synthwave')   playSynthwavePing();
  else if (currentPack === 'deepspace')   playDeepSpacePing();
  else if (currentPack === 'industrial')  playIndustrialPing();
  else if (currentPack === 'calm')        playCalmPing();
  else if (currentPack === 'horror')      playHorrorPing();
  else if (currentPack === 'military')    playMilitaryPing();
  else if (currentPack === 'lofi')        playLofiBell();
  else if (currentPack === 'matrix')      playMatrixPing();
  else if (currentPack === 'hal9000')     playHALPing();
  else if (currentPack === 'hackers')     playHackersPing();
  else if (currentPack === 'bladerunner') playBladeRunnerPing();
  else if (currentPack === 'aliens')      playAliensPing();
  else                                    playClassicRadarPing();
}

function playClassicRadarPing() {
  const t = audioCtx.currentTime;
  const g = audioCtx.createGain();
  g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.18, t + 0.01);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 1.2);
  const osc = audioCtx.createOscillator();
  osc.type = 'sine';
  osc.frequency.setValueAtTime(1480, t);
  osc.frequency.exponentialRampToValueAtTime(900, t + 1.2);
  osc.connect(g); osc.start(t); osc.stop(t + 1.3);
  const gc = audioCtx.createGain();
  gc.connect(masterGain);
  gc.gain.setValueAtTime(0.12, t);
  gc.gain.exponentialRampToValueAtTime(0.0001, t + 0.08);
  const osc2 = audioCtx.createOscillator();
  osc2.frequency.value = 80;
  osc2.connect(gc); osc2.start(t); osc2.stop(t + 0.1);
}

// ─── RETRO CHIP PINGS ─────────────────────────────────────────

function playC64Ping() {
  // SID chip ping -- ascending arpeggio with filter sweep
  const t = audioCtx.currentTime;
  // Three-note SID arpeggio: A-C#-E
  [220, 277, 330].forEach((freq, i) => {
    const g = audioCtx.createGain(); g.connect(masterGain);
    const f = audioCtx.createBiquadFilter();
    f.type = 'bandpass'; f.frequency.value = freq * 3; f.Q.value = 5;
    g.gain.setValueAtTime(0, t + i*0.065);
    g.gain.linearRampToValueAtTime(0.22, t + i*0.065 + 0.01);
    g.gain.exponentialRampToValueAtTime(0.0001, t + i*0.065 + 0.28);
    const osc = audioCtx.createOscillator();
    osc.type = 'sawtooth'; osc.frequency.value = freq;
    osc.connect(f); f.connect(g);
    osc.start(t + i*0.065); osc.stop(t + i*0.065 + 0.3);
  });
  // SID filter sweep whoosh
  const wg = audioCtx.createGain(); wg.connect(masterGain);
  wg.gain.setValueAtTime(0.08, t); wg.gain.exponentialRampToValueAtTime(0.0001, t + 0.5);
  const wf = audioCtx.createBiquadFilter(); wf.type = 'bandpass'; wf.Q.value = 12;
  wf.frequency.setValueAtTime(300, t); wf.frequency.exponentialRampToValueAtTime(3000, t + 0.5);
  const wosc = audioCtx.createOscillator(); wosc.type = 'sawtooth'; wosc.frequency.value = 110;
  wosc.connect(wf); wf.connect(wg); wosc.start(t); wosc.stop(t + 0.55);
}

function playNESPing() {
  // NES 2A03 -- pulse wave blip + triangle accent
  const t = audioCtx.currentTime;
  // Pulse 1 -- short blip, pitch falls slightly
  const g1 = audioCtx.createGain(); g1.connect(masterGain);
  g1.gain.setValueAtTime(0.28, t); g1.gain.exponentialRampToValueAtTime(0.0001, t + 0.18);
  const p1 = audioCtx.createOscillator(); p1.type = 'square';
  p1.frequency.setValueAtTime(880, t); p1.frequency.linearRampToValueAtTime(660, t + 0.18);
  p1.connect(g1); p1.start(t); p1.stop(t + 0.2);
  // Triangle accent -- softer second hit
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0, t + 0.12); g2.gain.linearRampToValueAtTime(0.18, t + 0.14);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.5);
  const p2 = audioCtx.createOscillator(); p2.type = 'triangle'; p2.frequency.value = 440;
  p2.connect(g2); p2.start(t + 0.12); p2.stop(t + 0.55);
  // Noise burst -- NES percussion
  const bufSize = Math.floor(audioCtx.sampleRate * 0.06);
  const buf = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
  const data = buf.getChannelData(0);
  let lf = 1;
  for (let i = 0; i < bufSize; i++) {
    const bit = ((lf >> 0) ^ (lf >> 1)) & 1;
    lf = (lf >> 1) | (bit << 14);
    data[i] = (lf & 1) ? 0.8 : -0.8;
  }
  const ns = audioCtx.createBufferSource(); ns.buffer = buf;
  const ng = audioCtx.createGain(); ng.connect(masterGain);
  ng.gain.setValueAtTime(0.14, t); ng.gain.exponentialRampToValueAtTime(0.0001, t + 0.06);
  ns.connect(ng); ns.start(t);
}

function playGameBoyPing() {
  // Game Boy DMG -- that iconic descending square blip
  const t = audioCtx.currentTime;
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0.24, t); g.gain.exponentialRampToValueAtTime(0.0001, t + 0.35);
  const osc = audioCtx.createOscillator(); osc.type = 'square';
  // Classic GB descending pitch -- Tetris/Zelda pickup feel
  osc.frequency.setValueAtTime(1046, t);
  osc.frequency.setValueAtTime(784, t + 0.06);
  osc.frequency.setValueAtTime(523, t + 0.13);
  osc.connect(g); osc.start(t); osc.stop(t + 0.38);
  // Tiny HPF to get that battery-powered tinny quality
  const hpf = audioCtx.createBiquadFilter(); hpf.type = 'highpass'; hpf.frequency.value = 120;
  const g2 = audioCtx.createGain(); g2.gain.value = 0.1; g2.connect(masterGain);
  osc.connect(hpf); hpf.connect(g2);
}

function playGenesisPing() {
  // Sega Genesis YM2612 -- FM metallic sting
  const t = audioCtx.currentTime;
  // FM pair -- carrier + modulator = metallic attack
  const carrier = audioCtx.createOscillator(); carrier.type = 'sine'; carrier.frequency.value = 440;
  const modulator = audioCtx.createOscillator(); modulator.type = 'sine'; modulator.frequency.value = 880;
  const modIndex = audioCtx.createGain(); modIndex.gain.value = 440; // high modulation = metallic
  modulator.connect(modIndex); modIndex.connect(carrier.frequency);
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.0001, t + 0.6);
  // Envelope decay -- YM2612 has fast attack, variable decay
  const env = audioCtx.createGain(); env.gain.setValueAtTime(1, t); env.gain.exponentialRampToValueAtTime(0.2, t + 0.08);
  carrier.connect(env); env.connect(g);
  carrier.start(t); carrier.stop(t + 0.65);
  modulator.start(t); modulator.stop(t + 0.65);
  // Second FM voice -- bass thud
  const bass = audioCtx.createOscillator(); bass.type = 'sine'; bass.frequency.value = 110;
  const bassMod = audioCtx.createOscillator(); bassMod.type = 'sine'; bassMod.frequency.value = 220;
  const bassModG = audioCtx.createGain(); bassModG.gain.value = 200;
  bassMod.connect(bassModG); bassModG.connect(bass.frequency);
  const bg = audioCtx.createGain(); bg.connect(masterGain);
  bg.gain.setValueAtTime(0.2, t); bg.gain.exponentialRampToValueAtTime(0.0001, t + 0.25);
  bass.connect(bg); bass.start(t); bass.stop(t + 0.28);
  bassMod.start(t); bassMod.stop(t + 0.28);
}

function playAtariPing() {
  // Atari 2600 TIA -- harsh buzzy blip
  const t = audioCtx.currentTime;
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0.22, t); g.gain.exponentialRampToValueAtTime(0.0001, t + 0.22);
  const osc = audioCtx.createOscillator(); osc.type = 'sawtooth';
  // TIA pitch quantization -- coarse steps
  osc.frequency.setValueAtTime(240, t);
  osc.frequency.setValueAtTime(180, t + 0.04);
  osc.frequency.setValueAtTime(120, t + 0.1);
  // Waveshaper for TIA distortion
  const curve = new Float32Array(64);
  for (let i = 0; i < 64; i++) { const x = (i*2/64)-1; curve[i] = x > 0.3 ? 1 : x < -0.3 ? -1 : x*3; }
  const ws = audioCtx.createWaveShaper(); ws.curve = curve;
  const f = audioCtx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.value = 800;
  osc.connect(ws); ws.connect(f); f.connect(g);
  osc.start(t); osc.stop(t + 0.25);
}

function playAmigaPing() {
  // Amiga Paula -- warm sampled chime with tracker feel
  const t = audioCtx.currentTime;
  const g1 = audioCtx.createGain(); g1.connect(masterGain);
  g1.gain.setValueAtTime(0.2, t); g1.gain.exponentialRampToValueAtTime(0.0001, t + 0.8);
  const f1 = audioCtx.createBiquadFilter(); f1.type = 'lowpass'; f1.frequency.value = 3500;
  const o1 = audioCtx.createOscillator(); o1.type = 'sawtooth'; o1.frequency.value = 523;
  o1.connect(f1); f1.connect(g1); o1.start(t); o1.stop(t + 0.85);
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0, t + 0.018); g2.gain.linearRampToValueAtTime(0.12, t + 0.028);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.9);
  const f2 = audioCtx.createBiquadFilter(); f2.type = 'lowpass'; f2.frequency.value = 2800;
  const o2 = audioCtx.createOscillator(); o2.type = 'sawtooth'; o2.frequency.value = 659;
  o2.connect(f2); f2.connect(g2); o2.start(t + 0.018); o2.stop(t + 0.95);
  const g3 = audioCtx.createGain(); g3.connect(masterGain);
  g3.gain.setValueAtTime(0.14, t); g3.gain.exponentialRampToValueAtTime(0.0001, t + 0.4);
  const o3 = audioCtx.createOscillator(); o3.type = 'triangle'; o3.frequency.value = 261;
  o3.connect(g3); o3.start(t); o3.stop(t + 0.45);
}

function playSynthwavePing() {
  // Synthwave -- arpeggiated Oberheim-style chord stab with gated reverb tail
  const t = audioCtx.currentTime;
  const notes = [523.25, 659.25, 783.99, 1046.5]; // C5 E5 G5 C6 major arp
  notes.forEach((freq, i) => {
    const g = audioCtx.createGain(); g.connect(masterGain);
    const attack = t + i * 0.065;
    g.gain.setValueAtTime(0, attack);
    g.gain.linearRampToValueAtTime(0.16 - i * 0.025, attack + 0.018);
    g.gain.exponentialRampToValueAtTime(0.0001, attack + 0.55 - i * 0.04);
    const flt = audioCtx.createBiquadFilter(); flt.type = 'lowpass';
    flt.frequency.setValueAtTime(4000, attack);
    flt.frequency.exponentialRampToValueAtTime(800, attack + 0.5);
    const o = audioCtx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = freq;
    o.connect(flt); flt.connect(g); o.start(attack); o.stop(attack + 0.6);
  });
  // Gated reverb ping -- long wash
  const rev = audioCtx.createGain(); rev.connect(masterGain);
  rev.gain.setValueAtTime(0.08, t + 0.1); rev.gain.exponentialRampToValueAtTime(0.0001, t + 2.2);
  const revOsc = audioCtx.createOscillator(); revOsc.type = 'sine'; revOsc.frequency.value = 523;
  revOsc.connect(rev); revOsc.start(t + 0.1); revOsc.stop(t + 2.3);
}

function playDeepSpacePing() {
  // Deep Space -- a single distant metallic tone, rare as a star
  const t = audioCtx.currentTime;
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.14, t + 0.04);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 4.5); // very long decay
  const flt = audioCtx.createBiquadFilter(); flt.type = 'bandpass'; flt.frequency.value = 440; flt.Q.value = 18;
  const o = audioCtx.createOscillator(); o.type = 'sine'; o.frequency.value = 440;
  o.connect(flt); flt.connect(g); o.start(t); o.stop(t + 5.0);
  // Faint harmonic -- like metal ringing in vacuum
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0, t + 0.008); g2.gain.linearRampToValueAtTime(0.04, t + 0.025);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 3.8);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 1108; // non-harmonic partial
  o2.connect(g2); o2.start(t + 0.008); o2.stop(t + 4.0);
}

function playIndustrialPing() {
  // Industrial -- hard metallic clang, distorted transient
  const t = audioCtx.currentTime;
  const wshaper = audioCtx.createWaveShaper();
  const curve = new Float32Array(256);
  for (let i = 0; i < 256; i++) { const x = (i * 2) / 256 - 1; curve[i] = Math.sign(x) * Math.pow(Math.abs(x), 0.3); }
  wshaper.curve = curve;
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0.22, t); g.gain.exponentialRampToValueAtTime(0.0001, t + 0.35);
  const flt = audioCtx.createBiquadFilter(); flt.type = 'bandpass'; flt.frequency.value = 1800; flt.Q.value = 2.5;
  const o = audioCtx.createOscillator(); o.type = 'sawtooth';
  o.frequency.setValueAtTime(880, t); o.frequency.exponentialRampToValueAtTime(220, t + 0.3);
  o.connect(wshaper); wshaper.connect(flt); flt.connect(g); o.start(t); o.stop(t + 0.4);
  // Metal tail -- high ring
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0.08, t + 0.02); g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.9);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 3400;
  o2.connect(g2); o2.start(t + 0.02); o2.stop(t + 1.0);
}

function playCalmPing() {
  // Calm -- soft meditation bowl strike, pure and slow
  const t = audioCtx.currentTime;
  // Bowl fundamental
  const g1 = audioCtx.createGain(); g1.connect(masterGain);
  g1.gain.setValueAtTime(0, t); g1.gain.linearRampToValueAtTime(0.14, t + 0.025);
  g1.gain.exponentialRampToValueAtTime(0.0001, t + 3.2);
  const o1 = audioCtx.createOscillator(); o1.type = 'sine'; o1.frequency.value = 528; // "healing" frequency
  o1.connect(g1); o1.start(t); o1.stop(t + 3.5);
  // First partial
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0, t + 0.01); g2.gain.linearRampToValueAtTime(0.055, t + 0.03);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 2.2);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 825; // bowl partial
  o2.connect(g2); o2.start(t + 0.01); o2.stop(t + 2.5);
}

function playHorrorPing() {
  // Horror -- irregular dissonant stab, wrong in every way
  const t = audioCtx.currentTime;
  // Random tritone displacement for unpredictability
  const baseFreq = 180 + Math.random() * 80;
  const tritone = baseFreq * 1.414; // exactly a tritone up
  const g1 = audioCtx.createGain(); g1.connect(masterGain);
  g1.gain.setValueAtTime(0, t); g1.gain.linearRampToValueAtTime(0.18, t + 0.008);
  g1.gain.exponentialRampToValueAtTime(0.0001, t + 1.4 + Math.random() * 0.6);
  const flt = audioCtx.createBiquadFilter(); flt.type = 'bandpass'; flt.frequency.value = baseFreq * 2; flt.Q.value = 4;
  const o1 = audioCtx.createOscillator(); o1.type = 'triangle'; o1.frequency.value = baseFreq;
  o1.connect(flt); flt.connect(g1); o1.start(t); o1.stop(t + 2.2);
  // Dissonant shadow tone
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0.10, t + 0.05); g2.gain.exponentialRampToValueAtTime(0.0001, t + 1.8);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = tritone;
  o2.connect(g2); o2.start(t + 0.05); o2.stop(t + 2.0);
  // Scratchy high transient -- wrong texture
  const g3 = audioCtx.createGain(); g3.connect(masterGain);
  g3.gain.setValueAtTime(0.06, t); g3.gain.exponentialRampToValueAtTime(0.0001, t + 0.15);
  const o3 = audioCtx.createOscillator(); o3.type = 'sawtooth'; o3.frequency.value = 2200 + Math.random() * 800;
  o3.connect(g3); o3.start(t); o3.stop(t + 0.18);
}

function playMilitaryPing() {
  // Military -- clean tactical sonar, precise and clipped
  const t = audioCtx.currentTime;
  // Primary ping -- short, clean, professional
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.20, t + 0.01);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 1.1);
  const o = audioCtx.createOscillator(); o.type = 'sine';
  o.frequency.setValueAtTime(1200, t); o.frequency.exponentialRampToValueAtTime(1100, t + 1.0);
  o.connect(g); o.start(t); o.stop(t + 1.2);
  // Tactical click -- hard attack transient
  const gc = audioCtx.createGain(); gc.connect(masterGain);
  gc.gain.setValueAtTime(0.12, t); gc.gain.exponentialRampToValueAtTime(0.0001, t + 0.04);
  const oc = audioCtx.createOscillator(); oc.type = 'square'; oc.frequency.value = 3200;
  oc.connect(gc); oc.start(t); oc.stop(t + 0.05);
}

function playLofiBell() {
  // Lo-fi -- muffled, warm, slightly off-pitch like an old cassette
  const t = audioCtx.currentTime;
  // Warm muffled bell -- heavy lowpass
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.16, t + 0.02);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 1.8);
  const flt = audioCtx.createBiquadFilter(); flt.type = 'lowpass'; flt.frequency.value = 1200; flt.Q.value = 0.6;
  // Slightly flat -- like a worn cassette pitch-drifting
  const o = audioCtx.createOscillator(); o.type = 'triangle'; o.frequency.value = 718; // D5 but flat
  o.connect(flt); flt.connect(g); o.start(t); o.stop(t + 2.0);
  // Tiny vinyl crackle burst on hit
  const bufSize = Math.floor(audioCtx.sampleRate * 0.04);
  const buf = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
  const bd = buf.getChannelData(0);
  for (let i = 0; i < bufSize; i++) bd[i] = (Math.random() * 2 - 1) * (1 - i / bufSize);
  const crackle = audioCtx.createBufferSource(); crackle.buffer = buf;
  const crackleFlt = audioCtx.createBiquadFilter(); crackleFlt.type = 'highpass'; crackleFlt.frequency.value = 3500;
  const crackleG = audioCtx.createGain(); crackleG.gain.value = 0.06;
  crackle.connect(crackleFlt); crackleFlt.connect(crackleG); crackleG.connect(masterGain); crackle.start(t);
}

function playMatrixPing() {
  // Matrix ping -- a crisp digital blip, like a character being written to the simulation
  const t = audioCtx.currentTime;
  // Sharp high digital click with quick decay
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.18, t + 0.008);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 0.35);
  const flt = audioCtx.createBiquadFilter(); flt.type = 'bandpass'; flt.frequency.value = 2400; flt.Q.value = 8;
  const o = audioCtx.createOscillator(); o.type = 'square'; o.frequency.value = 1200;
  o.connect(flt); flt.connect(g); o.start(t); o.stop(t + 0.4);
  // Brief harmonic -- data echo
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0.06, t + 0.04);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.8);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 600;
  o2.connect(g2); o2.start(t + 0.04); o2.stop(t + 0.9);
}

function playHALPing() {
  // HAL 9000 -- a clean, precise computer processing tone. Unsettlingly calm.
  const t = audioCtx.currentTime;
  // Primary tone -- pure sine, clinical precision
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.14, t + 0.02);
  g.gain.setValueAtTime(0.14, t + 0.18);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 2.8);
  const o = audioCtx.createOscillator(); o.type = 'sine'; o.frequency.value = 880; // A5
  o.connect(g); o.start(t); o.stop(t + 3.0);
  // Very faint lower harmonic -- depth
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0.04, t + 0.05);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 2.2);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 440;
  o2.connect(g2); o2.start(t + 0.05); o2.stop(t + 2.5);
}

function playHackersPing() {
  // Terminal bell -- the classic ASCII \a · BBS door chime
  const t = audioCtx.currentTime;
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.16, t + 0.006);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 0.38);
  const flt = audioCtx.createBiquadFilter();
  flt.type = 'bandpass'; flt.frequency.value = 1000; flt.Q.value = 14;
  const o = audioCtx.createOscillator(); o.type = 'sine'; o.frequency.value = 1000;
  o.connect(flt); flt.connect(g); o.start(t); o.stop(t + 0.42);
  // Faint 2nd harmonic -- old speaker resonance
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0.04, t + 0.01);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.22);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 2000;
  o2.connect(g2); o2.start(t + 0.01); o2.stop(t + 0.25);
}

function playBladeRunnerPing() {
  // Vangelis-style -- warm, melancholic, slightly detuned chord hit
  const t = audioCtx.currentTime;
  // Primary tone -- slightly detuned synth pad hit
  [[220, 0.14, 0.0], [277.2, 0.10, 0.02], [329.6, 0.07, 0.04]].forEach(([f, v, d]) => {
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t+d);
    g.gain.linearRampToValueAtTime(v, t+d+0.08);
    g.gain.exponentialRampToValueAtTime(0.0001, t+d+3.5);
    const o = audioCtx.createOscillator(); o.type = 'sine';
    o.frequency.setValueAtTime(f, t+d);
    o.frequency.linearRampToValueAtTime(f * 0.997, t+d+2.0); // slight pitch drift
    const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=1200;
    o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+4.0);
  });
  // Sub bass thud -- the city breathing
  const bg = audioCtx.createGain(); bg.connect(masterGain);
  bg.gain.setValueAtTime(0.18, t); bg.gain.exponentialRampToValueAtTime(0.0001, t+0.8);
  const bo = audioCtx.createOscillator(); bo.type='sine'; bo.frequency.value=55;
  bo.connect(bg); bo.start(t); bo.stop(t+1.0);
}

function playAliensPing() {
  // Motion tracker BEEP -- short, clean, electronic, slightly urgent
  const t = audioCtx.currentTime;
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.22, t + 0.008);
  g.gain.setValueAtTime(0.22, t + 0.06);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 0.28);
  const flt = audioCtx.createBiquadFilter(); flt.type='bandpass'; flt.frequency.value=1800; flt.Q.value=8;
  const o = audioCtx.createOscillator(); o.type='square'; o.frequency.value=1800;
  o.connect(flt); flt.connect(g); o.start(t); o.stop(t+0.32);
  // Tiny click at the front -- gives it that plastic hardware feel
  const cg = audioCtx.createGain(); cg.connect(masterGain);
  cg.gain.setValueAtTime(0.08, t); cg.gain.exponentialRampToValueAtTime(0.0001, t+0.015);
  const co = audioCtx.createOscillator(); co.type='square'; co.frequency.value=4000;
  co.connect(cg); co.start(t); co.stop(t+0.018);
}

function playSonarPing() {
  // Deep hollow sonar ping with ocean reverb tail
  const t = audioCtx.currentTime;

  // Primary sonar tone -- deep, resonant
  const g = audioCtx.createGain();
  g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.22, t + 0.015);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 2.8);

  const osc = audioCtx.createOscillator();
  osc.type = 'sine';
  osc.frequency.setValueAtTime(520, t);
  osc.frequency.exponentialRampToValueAtTime(480, t + 2.8);
  osc.connect(g); osc.start(t); osc.stop(t + 3.0);

  // Harmonic overtone -- sonar ring
  const g2 = audioCtx.createGain();
  g2.connect(masterGain);
  g2.gain.setValueAtTime(0.08, t + 0.01);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 1.8);
  const osc2 = audioCtx.createOscillator();
  osc2.type = 'sine'; osc2.frequency.value = 1040;
  osc2.connect(g2); osc2.start(t + 0.01); osc2.stop(t + 2.0);

  // Sub thump on impact
  const gs = audioCtx.createGain();
  gs.connect(masterGain);
  gs.gain.setValueAtTime(0.3, t);
  gs.gain.exponentialRampToValueAtTime(0.0001, t + 0.12);
  const oscs = audioCtx.createOscillator();
  oscs.type = 'sine'; oscs.frequency.value = 55;
  oscs.connect(gs); oscs.start(t); oscs.stop(t + 0.15);
}

function playAkiraPing() {
  // AKIRA: sharp metallic impact + choral shimmer tail
  // Like a taiko drum hit with a chorus of voices behind it
  const t = audioCtx.currentTime;

  // Sharp metallic impact -- aggressive high transient
  const impactG = audioCtx.createGain();
  impactG.connect(masterGain);
  impactG.gain.setValueAtTime(0.28, t);
  impactG.gain.exponentialRampToValueAtTime(0.0001, t + 0.15);
  const impact = audioCtx.createOscillator();
  impact.type = 'sawtooth';
  impact.frequency.setValueAtTime(280, t);
  impact.frequency.exponentialRampToValueAtTime(60, t + 0.15);
  const impactFilter = audioCtx.createBiquadFilter();
  impactFilter.type = 'bandpass'; impactFilter.frequency.value = 800; impactFilter.Q.value = 2;
  impact.connect(impactFilter); impactFilter.connect(impactG);
  impact.start(t); impact.stop(t + 0.2);

  // Choral shimmer tail -- voices rising and fading
  const choralG = audioCtx.createGain();
  choralG.connect(masterGain);
  choralG.gain.setValueAtTime(0, t + 0.05);
  choralG.gain.linearRampToValueAtTime(0.10, t + 0.3);
  choralG.gain.exponentialRampToValueAtTime(0.0001, t + 1.8);

  // Two voices a minor third apart -- unsettling harmony
  [660, 784].forEach(freq => {
    const v = audioCtx.createOscillator();
    v.type = 'sine'; v.frequency.value = freq;
    // Add vibrato
    const vib = audioCtx.createOscillator();
    vib.type = 'sine'; vib.frequency.value = 6.5;
    const vibG = audioCtx.createGain(); vibG.gain.value = 8;
    vib.connect(vibG); vibG.connect(v.frequency);
    v.connect(choralG); v.start(t + 0.05); v.stop(t + 2.0);
    vib.start(t + 0.05); vib.stop(t + 2.0);
  });

  // Sub bass punch
  const bassG = audioCtx.createGain();
  bassG.connect(masterGain);
  bassG.gain.setValueAtTime(0.35, t);
  bassG.gain.exponentialRampToValueAtTime(0.0001, t + 0.08);
  const bass = audioCtx.createOscillator();
  bass.type = 'sine'; bass.frequency.value = 70;
  bass.connect(bassG); bass.start(t); bass.stop(t + 0.1);
}

function playTronPing() {
  // TRON: clean digital tone -- pure sine, Wendy Carlos-style
  const t = audioCtx.currentTime;
  // Primary recognition tone -- precise and cold
  const g1 = audioCtx.createGain(); g1.connect(masterGain);
  g1.gain.setValueAtTime(0, t);
  g1.gain.linearRampToValueAtTime(0.14, t + 0.015);
  g1.gain.setValueAtTime(0.14, t + 0.18);
  g1.gain.exponentialRampToValueAtTime(0.0001, t + 0.8);
  const o1 = audioCtx.createOscillator(); o1.type = 'sine'; o1.frequency.value = 880;
  o1.connect(g1); o1.start(t); o1.stop(t + 0.85);
  // Harmonic fifth above -- digital clarity
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0, t + 0.12);
  g2.gain.linearRampToValueAtTime(0.07, t + 0.16);
  g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.9);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 1320;
  o2.connect(g2); o2.start(t + 0.12); o2.stop(t + 0.95);
}

function playKITTPing() {
  // KNIGHT RIDER: scanner chirp -- the sound of KITT's eye passing
  const t = audioCtx.currentTime;
  // Frequency sweep -- like the LED scanning
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0.16, t);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 0.22);
  const o = audioCtx.createOscillator(); o.type = 'sine';
  o.frequency.setValueAtTime(400, t);
  o.frequency.exponentialRampToValueAtTime(1200, t + 0.11);
  o.frequency.exponentialRampToValueAtTime(400, t + 0.22);
  o.connect(g); o.start(t); o.stop(t + 0.25);
  // Soft sub hit underneath
  const bg = audioCtx.createGain(); bg.connect(masterGain);
  bg.gain.setValueAtTime(0.1, t); bg.gain.exponentialRampToValueAtTime(0.0001, t + 0.08);
  const bo = audioCtx.createOscillator(); bo.type = 'sine'; bo.frequency.value = 80;
  bo.connect(bg); bo.start(t); bo.stop(t + 0.1);
}

function playAirwolfPing() {
  // AIRWOLF: RADAR sweep -- the sound of a rotary radar dish completing a pass
  const t = audioCtx.currentTime;
  // Clean ping with slow exponential decay -- professional military radar
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.18, t + 0.02);
  g.gain.exponentialRampToValueAtTime(0.0001, t + 1.4);
  const o = audioCtx.createOscillator(); o.type = 'sine'; o.frequency.value = 660;
  o.connect(g); o.start(t); o.stop(t + 1.5);
  // Very faint octave above -- adds realism
  const g2 = audioCtx.createGain(); g2.connect(masterGain);
  g2.gain.setValueAtTime(0.04, t + 0.01); g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.8);
  const o2 = audioCtx.createOscillator(); o2.type = 'sine'; o2.frequency.value = 1320;
  o2.connect(g2); o2.start(t + 0.01); o2.stop(t + 0.85);
}

// ─── KEYBOARD/TYPING CLICK ────────────────────────────────────
function playKeyClick() {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;
  if (currentPack === 'akira') {
    // Harder, drier click -- mechanical keyboard on metal
    const g = audioCtx.createGain(); g.gain.value = 0.11;
    const f = audioCtx.createBiquadFilter(); f.type='bandpass'; f.frequency.value=2800; f.Q.value=2.5;
    const buf = audioCtx.createBuffer(1, audioCtx.sampleRate*0.025, audioCtx.sampleRate);
    const d = buf.getChannelData(0);
    for (let i=0;i<d.length;i++) d[i]=(Math.random()*2-1)*Math.pow(1-i/d.length,6);
    const src = audioCtx.createBufferSource(); src.buffer=buf;
    src.connect(f); f.connect(g); g.connect(masterGain); src.start(t);
    return;
  }
  // Default noise click
  const buf = audioCtx.createBuffer(1, audioCtx.sampleRate * 0.04, audioCtx.sampleRate);
  const data = buf.getChannelData(0);
  for (let i = 0; i < data.length; i++) {
    data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i/data.length, 4);
  }
  const src = audioCtx.createBufferSource(); src.buffer = buf;
  const g = audioCtx.createGain(); g.gain.value = 0.07;
  const f = audioCtx.createBiquadFilter(); f.type='bandpass'; f.frequency.value=3200; f.Q.value=1.5;
  src.connect(f); f.connect(g); g.connect(masterGain); src.start(t);
}

// ─── UI SELECT BEEP ──────────────────────────────────────────
function playSelectBeep() {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;

  // Route to each pack's own ping for selection feedback
  if (currentPack === 'redalert')    { playSonarPing(); return; }
  if (currentPack === 'akira')       { playAkiraPing(); return; }
  if (currentPack === 'tron')        { playTronPing(); return; }
  if (currentPack === 'knightrider') { playKITTPing(); return; }
  if (currentPack === 'airwolf')     { playAirwolfPing(); return; }
  if (currentPack === 'c64')         { playC64Ping(); return; }
  if (currentPack === 'nes')         { playNESPing(); return; }
  if (currentPack === 'gameboy')     { playGameBoyPing(); return; }
  if (currentPack === 'genesis')     { playGenesisPing(); return; }
  if (currentPack === 'atari')       { playAtariPing(); return; }
  if (currentPack === 'amiga')       { playAmigaPing(); return; }
  if (currentPack === 'synthwave')   { playSynthwavePing(); return; }
  if (currentPack === 'deepspace')   { playDeepSpacePing(); return; }
  if (currentPack === 'industrial')  { playIndustrialPing(); return; }
  if (currentPack === 'calm')        { playCalmPing(); return; }
  if (currentPack === 'horror')      { playHorrorPing(); return; }
  if (currentPack === 'military')    { playMilitaryPing(); return; }
  if (currentPack === 'lofi')        { playLofiBell(); return; }
  if (currentPack === 'matrix')      { playMatrixPing(); return; }
  if (currentPack === 'hal9000')     { playHALPing(); return; }
  if (currentPack === 'hackers')     { playHackersPing(); return; }
  if (currentPack === 'bladerunner') { playBladeRunnerPing(); return; }
  if (currentPack === 'aliens')      { playAliensPing(); return; }

  // WarGames default -- G.L.S.S. terminal key click
  [[880,0],[1100,0.06],[880,0.12]].forEach(([freq, delay]) => {
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t+delay);
    g.gain.linearRampToValueAtTime(0.12, t+delay+0.01);
    g.gain.exponentialRampToValueAtTime(0.0001, t+delay+0.12);
    const o = audioCtx.createOscillator(); o.type = 'square'; o.frequency.value = freq;
    const f = audioCtx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.value = 1800;
    o.connect(f); f.connect(g); o.start(t+delay); o.stop(t+delay+0.15);
  });
}

// ─── ALERT / IMMINENT LAUNCH ALARM ───────────────────────────
function playAlertAlarm() {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;

  if (currentPack === 'akira') {
    // AKIRA: rapid taiko triplets -- urgent drumline
    for (let rep = 0; rep < 4; rep++) {
      const offset = rep * 0.28;
      const bassG = audioCtx.createGain(); bassG.connect(masterGain);
      bassG.gain.setValueAtTime(0.32, t+offset);
      bassG.gain.exponentialRampToValueAtTime(0.0001, t+offset+0.18);
      const bass = audioCtx.createOscillator(); bass.type = 'sine';
      bass.frequency.setValueAtTime(120, t+offset);
      bass.frequency.exponentialRampToValueAtTime(55, t+offset+0.18);
      bass.connect(bassG); bass.start(t+offset); bass.stop(t+offset+0.2);
      // Choral shriek on top
      const shriekG = audioCtx.createGain(); shriekG.connect(masterGain);
      shriekG.gain.setValueAtTime(0, t+offset+0.02);
      shriekG.gain.linearRampToValueAtTime(0.08, t+offset+0.06);
      shriekG.gain.exponentialRampToValueAtTime(0.0001, t+offset+0.22);
      const shriek = audioCtx.createOscillator(); shriek.type = 'sawtooth';
      shriek.frequency.value = 880 + rep * 110;
      const sf = audioCtx.createBiquadFilter(); sf.type='bandpass'; sf.frequency.value=1200; sf.Q.value=3;
      shriek.connect(sf); sf.connect(shriekG); shriek.start(t+offset+0.02); shriek.stop(t+offset+0.25);
    }
    return;
  }

  if (currentPack === 'redalert') {
    // RED OCTOBER: deep klaxon
    for (let rep = 0; rep < 2; rep++) {
      const offset = rep * 0.8;
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0, t+offset);
      g.gain.linearRampToValueAtTime(0.28, t+offset+0.04);
      g.gain.setValueAtTime(0.28, t+offset+0.55);
      g.gain.linearRampToValueAtTime(0, t+offset+0.7);
      const o = audioCtx.createOscillator(); o.type = 'sawtooth';
      o.frequency.value = 220;
      const f = audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=800;
      o.connect(f); f.connect(g); o.start(t+offset); o.stop(t+offset+0.75);
    }
    return;
  }

  // WARGAMES default
  for (let rep = 0; rep < 3; rep++) {
    const offset = rep * 0.55;
    const g1 = audioCtx.createGain(); g1.connect(masterGain);
    g1.gain.setValueAtTime(0, t+offset);
    g1.gain.linearRampToValueAtTime(0.22, t+offset+0.02);
    g1.gain.setValueAtTime(0.22, t+offset+0.18);
    g1.gain.linearRampToValueAtTime(0, t+offset+0.22);
    const o1 = audioCtx.createOscillator(); o1.type = 'sawtooth';
    o1.frequency.value = 880;
    const f1 = audioCtx.createBiquadFilter(); f1.type='lowpass'; f1.frequency.value=2200;
    o1.connect(f1); f1.connect(g1); o1.start(t+offset); o1.stop(t+offset+0.25);
    const g2 = audioCtx.createGain(); g2.connect(masterGain);
    g2.gain.setValueAtTime(0, t+offset+0.24);
    g2.gain.linearRampToValueAtTime(0.2, t+offset+0.26);
    g2.gain.setValueAtTime(0.2, t+offset+0.42);
    g2.gain.linearRampToValueAtTime(0, t+offset+0.46);
    const o2 = audioCtx.createOscillator(); o2.type = 'sawtooth';
    o2.frequency.value = 660;
    const f2 = audioCtx.createBiquadFilter(); f2.type='lowpass'; f2.frequency.value=2000;
    o2.connect(f2); f2.connect(g2); o2.start(t+offset+0.24); o2.stop(t+offset+0.5);
  }
}

function playBootBeeps() {
  if (!audioCtx) return;
  const t = audioCtx.currentTime;

  // Theme-matched boot sounds
  if (currentPack === 'redalert') {
    // Deep sub thud -- diving klaxon
    [0, 0.5].forEach(delay => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0.28, t+delay); g.gain.exponentialRampToValueAtTime(0.0001, t+delay+0.6);
      const o = audioCtx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = 110;
      const f = audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=400;
      o.connect(f); f.connect(g); o.start(t+delay); o.stop(t+delay+0.65);
    });
    return;
  }
  if (currentPack === 'c64' || currentPack === 'nes' || currentPack === 'gameboy' || currentPack === 'atari') {
    // Chip tune power-on sequence
    const seq = [220,0, 330,0.1, 440,0.2, 660,0.32, 880,0.46];
    seq.forEach(([freq,delay],i,arr) => {
      if (i%2!==0) return;
      const d=arr[i+1], f2=arr[i];
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0, t+d); g.gain.linearRampToValueAtTime(0.14, t+d+0.012);
      g.gain.exponentialRampToValueAtTime(0.0001, t+d+0.09);
      const o = audioCtx.createOscillator(); o.type = 'square'; o.frequency.value = f2;
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=2000;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+0.1);
    });
    return;
  }
  if (currentPack === 'genesis') {
    // SEGA! FM stab
    [98,196,294,392,490].forEach((freq,i) => {
      const d = i*0.055;
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0.18, t+d); g.gain.exponentialRampToValueAtTime(0.0001, t+d+0.25);
      const o = audioCtx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = freq;
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=1200;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+0.28);
    });
    return;
  }
  if (currentPack === 'amiga') {
    // Amiga Workbench click + warm chord
    [523,659,784].forEach((freq,i) => {
      const d = i*0.08;
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0, t+d); g.gain.linearRampToValueAtTime(0.14, t+d+0.02);
      g.gain.exponentialRampToValueAtTime(0.0001, t+d+0.6);
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=3000;
      const o = audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=freq;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+0.65);
    });
    return;
  }
  if (currentPack === 'synthwave') {
    // Synth power-on sweep
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.18, t+0.3);
    g.gain.exponentialRampToValueAtTime(0.0001, t+1.8);
    const flt = audioCtx.createBiquadFilter(); flt.type='lowpass';
    flt.frequency.setValueAtTime(200, t); flt.frequency.exponentialRampToValueAtTime(4000, t+0.8);
    const o = audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=110;
    o.connect(flt); flt.connect(g); o.start(t); o.stop(t+2.0);
    return;
  }
  if (currentPack === 'deepspace') {
    // Single low resonant tone fading in from silence
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(0.12, t+1.5);
    g.gain.exponentialRampToValueAtTime(0.0001, t+3.5);
    const o = audioCtx.createOscillator(); o.type='sine'; o.frequency.value=110;
    o.connect(g); o.start(t); o.stop(t+4.0);
    return;
  }
  if (currentPack === 'industrial') {
    // Power-on grind burst
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0.22, t); g.gain.exponentialRampToValueAtTime(0.0001, t+0.5);
    const o = audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=80;
    const wshaper = audioCtx.createWaveShaper();
    const curve = new Float32Array(256);
    for (let i=0;i<256;i++){const x=(i*2)/256-1; curve[i]=Math.sign(x)*Math.pow(Math.abs(x),0.25);}
    wshaper.curve=curve;
    const flt = audioCtx.createBiquadFilter(); flt.type='bandpass'; flt.frequency.value=400; flt.Q.value=2;
    o.connect(wshaper); wshaper.connect(flt); flt.connect(g); o.start(t); o.stop(t+0.55);
    return;
  }
  if (currentPack === 'calm') {
    // Single bowl strike -- pure and clean
    playCalmPing(); return;
  }
  if (currentPack === 'horror') {
    // Unsettling ascending dissonant cluster
    [180, 254, 360].forEach((freq,i) => {
      const d = i * 0.18;
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+d); g.gain.linearRampToValueAtTime(0.10,t+d+0.02);
      g.gain.exponentialRampToValueAtTime(0.0001,t+d+1.4);
      const o = audioCtx.createOscillator(); o.type='triangle'; o.frequency.value=freq;
      o.connect(g); o.start(t+d); o.stop(t+d+1.5);
    });
    return;
  }
  if (currentPack === 'military') {
    // Two-tone comms ready signal
    [[1200,0],[1000,0.18],[1200,0.36]].forEach(([freq,delay]) => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+delay); g.gain.linearRampToValueAtTime(0.16,t+delay+0.01);
      g.gain.exponentialRampToValueAtTime(0.0001,t+delay+0.14);
      const o = audioCtx.createOscillator(); o.type='sine'; o.frequency.value=freq;
      o.connect(g); o.start(t+delay); o.stop(t+delay+0.16);
    });
    return;
  }
  if (currentPack === 'lofi') {
    // Warm muffled rising tones -- like an old stereo powering up
    [220,277,330,440].forEach((freq,i) => {
      const d = i*0.12;
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+d); g.gain.linearRampToValueAtTime(0.10,t+d+0.025);
      g.gain.exponentialRampToValueAtTime(0.0001,t+d+0.9);
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=1000;
      const o = audioCtx.createOscillator(); o.type='triangle'; o.frequency.value=freq;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+1.0);
    });
    return;
  }
  if (currentPack === 'matrix') {
    // Matrix boot -- descending digital cascade, then a deep thud
    [1760,1320,880,660,440,330].forEach((freq,i) => {
      const d = i*0.07;
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+d); g.gain.linearRampToValueAtTime(0.12,t+d+0.01);
      g.gain.exponentialRampToValueAtTime(0.0001,t+d+0.15);
      const flt = audioCtx.createBiquadFilter(); flt.type='bandpass'; flt.frequency.value=freq*2; flt.Q.value=6;
      const o = audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=freq;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+0.18);
    });
    // Final deep thud
    const tg = audioCtx.createGain(); tg.connect(masterGain);
    tg.gain.setValueAtTime(0.25,t+0.55); tg.gain.exponentialRampToValueAtTime(0.0001,t+1.4);
    const tf = audioCtx.createBiquadFilter(); tf.type='lowpass'; tf.frequency.value=180;
    const to = audioCtx.createOscillator(); to.type='sine'; to.frequency.value=55;
    to.connect(tf); tf.connect(tg); to.start(t+0.55); to.stop(t+1.5);
    return;
  }
  if (currentPack === 'hal9000') {
    // Also Sprach Zarathustra opening -- C, G, C octave, dramatic pause, then the brass hit
    // C2 low drone
    const drone = audioCtx.createGain(); drone.connect(masterGain);
    drone.gain.setValueAtTime(0, t); drone.gain.linearRampToValueAtTime(0.20, t+0.8);
    drone.gain.setValueAtTime(0.20, t+2.0); drone.gain.linearRampToValueAtTime(0, t+3.0);
    const dOsc = audioCtx.createOscillator(); dOsc.type='sine'; dOsc.frequency.value=65; // C2
    dOsc.connect(drone); dOsc.start(t); dOsc.stop(t+3.2);
    // G2
    [[0.8, 98, 0.16],[1.4, 146.8, 0.16]].forEach(([delay, freq, vol]) => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+delay); g.gain.linearRampToValueAtTime(vol,t+delay+0.12);
      g.gain.exponentialRampToValueAtTime(0.0001,t+delay+1.2);
      const o = audioCtx.createOscillator(); o.type='triangle'; o.frequency.value=freq;
      o.connect(g); o.start(t+delay); o.stop(t+delay+1.4);
    });
    // The big C3 hit -- brass-like with harmonics
    [2.2].forEach(delay => {
      [130.8, 261.6, 392, 523.2].forEach((freq, i) => {
        const g = audioCtx.createGain(); g.connect(masterGain);
        const vol = [0.22, 0.18, 0.10, 0.06][i];
        g.gain.setValueAtTime(0,t+delay); g.gain.linearRampToValueAtTime(vol,t+delay+0.05);
        g.gain.exponentialRampToValueAtTime(0.0001,t+delay+2.5);
        const o = audioCtx.createOscillator(); o.type = i===0?'sawtooth':'triangle'; o.frequency.value=freq;
        const f = audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=2000;
        o.connect(f); f.connect(g); o.start(t+delay); o.stop(t+delay+2.8);
      });
    });
    return;
  }
  if (currentPack === 'hackers') {
    // MODEM HANDSHAKE -- ATZ · dial tone · carrier · negotiation squeal · CONNECT 28800
    const t = audioCtx.currentTime;
    // ATZ beep -- short double click
    [[0, 880, 0.06],[0.12, 880, 0.06]].forEach(([d,f,v]) => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(v,t+d); g.gain.exponentialRampToValueAtTime(0.0001,t+d+0.08);
      const o = audioCtx.createOscillator(); o.type='square'; o.frequency.value=f;
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=1800;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+0.1);
    });
    // Dial tone -- 350Hz + 440Hz combined
    [[350,0.10],[440,0.10]].forEach(([f,v]) => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+0.3); g.gain.linearRampToValueAtTime(v,t+0.35);
      g.gain.setValueAtTime(v,t+0.9); g.gain.linearRampToValueAtTime(0,t+0.95);
      const o = audioCtx.createOscillator(); o.type='sine'; o.frequency.value=f;
      o.connect(g); o.start(t+0.3); o.stop(t+1.0);
    });
    // Carrier detect -- 2100Hz ANS tone burst
    const cg = audioCtx.createGain(); cg.connect(masterGain);
    cg.gain.setValueAtTime(0,t+1.1); cg.gain.linearRampToValueAtTime(0.12,t+1.15);
    cg.gain.setValueAtTime(0.12,t+1.5); cg.gain.linearRampToValueAtTime(0,t+1.55);
    const co = audioCtx.createOscillator(); co.type='sine'; co.frequency.value=2100;
    co.connect(cg); co.start(t+1.1); co.stop(t+1.6);
    // Negotiation squeal -- rapidly sweeping frequencies, the iconic sound
    const sg = audioCtx.createGain(); sg.connect(masterGain);
    sg.gain.setValueAtTime(0,t+1.7); sg.gain.linearRampToValueAtTime(0.18,t+1.75);
    sg.gain.setValueAtTime(0.18,t+3.2); sg.gain.exponentialRampToValueAtTime(0.0001,t+3.5);
    const so = audioCtx.createOscillator(); so.type='sawtooth'; so.frequency.value=1200;
    // Sweep the frequency wildly -- this IS the modem sound
    so.frequency.setValueAtTime(1200,t+1.7);
    so.frequency.linearRampToValueAtTime(2400,t+2.0);
    so.frequency.linearRampToValueAtTime(600,t+2.3);
    so.frequency.linearRampToValueAtTime(3000,t+2.6);
    so.frequency.linearRampToValueAtTime(1800,t+2.9);
    so.frequency.linearRampToValueAtTime(2100,t+3.2);
    const sf = audioCtx.createBiquadFilter(); sf.type='bandpass'; sf.frequency.value=2000; sf.Q.value=1.5;
    so.connect(sf); sf.connect(sg); so.start(t+1.7); so.stop(t+3.6);
    return;
  }
  if (currentPack === 'bladerunner') {
    // Blade Runner: Vangelis brass stab + rising synth -- the opening titles feel
    const t = audioCtx.currentTime;
    // Low bass hit -- the city waking up
    [[55,0.25,0.0],[82.5,0.18,0.04],[110,0.12,0.08]].forEach(([f,v,d]) => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+d); g.gain.linearRampToValueAtTime(v,t+d+0.12);
      g.gain.exponentialRampToValueAtTime(0.0001,t+d+2.8);
      const flt = audioCtx.createBiquadFilter(); flt.type='lowpass'; flt.frequency.value=500;
      const o = audioCtx.createOscillator(); o.type='sawtooth'; o.frequency.value=f;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+3.0);
    });
    // Rising synth arp -- the iconic ascending line
    [0.4,0.7,1.0,1.3,1.6].forEach((d,i) => {
      const freqs = [220, 277.2, 329.6, 369.9, 440];
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+d); g.gain.linearRampToValueAtTime(0.10,t+d+0.06);
      g.gain.exponentialRampToValueAtTime(0.0001,t+d+0.5);
      const o = audioCtx.createOscillator(); o.type='sine'; o.frequency.value=freqs[i];
      o.connect(g); o.start(t+d); o.stop(t+d+0.6);
    });
    return;
  }
  if (currentPack === 'aliens') {
    // Aliens: motion tracker boot -- electronics initializing, then first sweep beep
    const t = audioCtx.currentTime;
    // Power-on click
    const cg = audioCtx.createGain(); cg.connect(masterGain);
    cg.gain.setValueAtTime(0.15,t); cg.gain.exponentialRampToValueAtTime(0.0001,t+0.04);
    const co = audioCtx.createOscillator(); co.type='square'; co.frequency.value=2000;
    co.connect(cg); co.start(t); co.stop(t+0.05);
    // Rising init tone
    const ig = audioCtx.createGain(); ig.connect(masterGain);
    ig.gain.setValueAtTime(0,t+0.1); ig.gain.linearRampToValueAtTime(0.12,t+0.2);
    ig.gain.exponentialRampToValueAtTime(0.0001,t+0.7);
    const io = audioCtx.createOscillator(); io.type='sine';
    io.frequency.setValueAtTime(400,t+0.1); io.frequency.linearRampToValueAtTime(1800,t+0.6);
    io.connect(ig); io.start(t+0.1); io.stop(t+0.75);
    // Three tracker beeps -- calibrating
    [0.9, 1.3, 1.7].forEach(d => {
      const g = audioCtx.createGain(); g.connect(masterGain);
      g.gain.setValueAtTime(0,t+d); g.gain.linearRampToValueAtTime(0.18,t+d+0.008);
      g.gain.exponentialRampToValueAtTime(0.0001,t+d+0.25);
      const flt = audioCtx.createBiquadFilter(); flt.type='bandpass'; flt.frequency.value=1800; flt.Q.value=8;
      const o = audioCtx.createOscillator(); o.type='square'; o.frequency.value=1800;
      o.connect(flt); flt.connect(g); o.start(t+d); o.stop(t+d+0.28);
    });
    return;
  }

  // WarGames / TRON / KnightRider / Airwolf / Akira default -- G.L.S.S. boot sequence
  const seq = [440,0, 550,0.12, 440,0.24, 660,0.36, 880,0.52, 1100,0.68, 880,0.84, 660,1.0, 440,1.16, 1320,1.36, 1320,1.52, 1760,1.72];
  for (let i=0; i<seq.length; i+=2) {
    const freq=seq[i], delay=seq[i+1];
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t+delay); g.gain.linearRampToValueAtTime(0.15, t+delay+0.015);
    g.gain.exponentialRampToValueAtTime(0.0001, t+delay+0.09);
    const o = audioCtx.createOscillator(); o.type='square'; o.frequency.value=freq;
    const f = audioCtx.createBiquadFilter(); f.type='lowpass'; f.frequency.value=2400;
    o.connect(f); f.connect(g); o.start(t+delay); o.stop(t+delay+0.1);
  }
  [440,554,659,880].forEach((freq) => {
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t+2.0); g.gain.linearRampToValueAtTime(0.1, t+2.05);
    g.gain.exponentialRampToValueAtTime(0.0001, t+3.2);
    const o = audioCtx.createOscillator(); o.type='triangle'; o.frequency.value=freq;
    o.connect(g); o.start(t+2.0); o.stop(t+3.5);
  });
}

// ─── ISS OVERHEAD CHIME ──────────────────────────────────────
function playISSChime() {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;
  const notes = [1046.5, 1318.5, 1568, 2093]; // C6 E6 G6 C7
  notes.forEach((freq, i) => {
    const delay = i * 0.18;
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0, t+delay);
    g.gain.linearRampToValueAtTime(0.14, t+delay+0.02);
    g.gain.exponentialRampToValueAtTime(0.0001, t+delay+1.4);
    const o = audioCtx.createOscillator(); o.type = 'sine';
    o.frequency.value = freq;
    // Add slight vibrato
    const lfo = audioCtx.createOscillator(); lfo.frequency.value = 6;
    const lfoG = audioCtx.createGain(); lfoG.gain.value = 3;
    lfo.connect(lfoG); lfoG.connect(o.frequency);
    lfo.start(t+delay); lfo.stop(t+delay+1.5);
    o.connect(g); o.start(t+delay); o.stop(t+delay+1.5);
  });
}

// ─── COUNTDOWN TICK ──────────────────────────────────────────
function playCountdownTick() {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;
  if (currentPack === 'akira') {
    // Sharp wood-block hit
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0.22, t); g.gain.exponentialRampToValueAtTime(0.0001, t+0.05);
    const o = audioCtx.createOscillator(); o.type = 'sine';
    o.frequency.setValueAtTime(300, t); o.frequency.exponentialRampToValueAtTime(80, t+0.05);
    o.connect(g); o.start(t); o.stop(t+0.06);
    return;
  }
  if (currentPack === 'redalert') {
    // Deep sonar tick
    const g = audioCtx.createGain(); g.connect(masterGain);
    g.gain.setValueAtTime(0.14, t); g.gain.exponentialRampToValueAtTime(0.0001, t+0.1);
    const o = audioCtx.createOscillator(); o.type = 'sine'; o.frequency.value = 480;
    o.connect(g); o.start(t); o.stop(t+0.12);
    return;
  }
  // Wargames default
  const g = audioCtx.createGain(); g.connect(masterGain);
  g.gain.setValueAtTime(0.18, t); g.gain.exponentialRampToValueAtTime(0.0001, t+0.06);
  const o = audioCtx.createOscillator(); o.type = 'square'; o.frequency.value = 1200;
  const f = audioCtx.createBiquadFilter(); f.type='bandpass'; f.frequency.value=1200; f.Q.value=5;
  o.connect(f); f.connect(g); o.start(t); o.stop(t+0.07);
}

// ─── MODEM DIAL-UP NOISE (on data fetch) ─────────────────────
function playModemNoise(durationSec=1.5) {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;
  // Carrier tone
  const carrier = audioCtx.createOscillator();
  carrier.type = 'sawtooth';
  carrier.frequency.setValueAtTime(1200, t);
  carrier.frequency.setValueAtTime(2400, t+0.3);
  carrier.frequency.setValueAtTime(1200, t+0.6);
  carrier.frequency.setValueAtTime(2400, t+0.9);
  carrier.frequency.setValueAtTime(1800, t+1.2);
  const gC = audioCtx.createGain(); gC.gain.value = 0.06;
  const fC = audioCtx.createBiquadFilter(); fC.type='bandpass'; fC.frequency.value=1800; fC.Q.value=0.8;
  carrier.connect(fC); fC.connect(gC); gC.connect(masterGain);
  carrier.start(t); carrier.stop(t+durationSec);

  // Noise bursts
  for (let i=0; i<6; i++) {
    const nb = audioCtx.createBuffer(1, audioCtx.sampleRate*0.08, audioCtx.sampleRate);
    const d = nb.getChannelData(0);
    for (let j=0;j<d.length;j++) d[j] = Math.random()*2-1;
    const src = audioCtx.createBufferSource(); src.buffer = nb;
    const gN = audioCtx.createGain(); gN.gain.value = 0.04;
    const fN = audioCtx.createBiquadFilter(); fN.type='bandpass';
    fN.frequency.value = 800 + Math.random()*1600; fN.Q.value = 2;
    src.connect(fN); fN.connect(gN); gN.connect(masterGain);
    src.start(t + i*(durationSec/6));
  }
}

// ─── T-0 LIFTOFF EVENT -- THE BIG ONE ─────────────────────────
function playLiftoffEvent() {
  if (!audioCtx || isMuted) return;
  const t = audioCtx.currentTime;

  // 1. Rumble -- low freq noise burst building up
  for (let i = 0; i < 4; i++) {
    const dur = 0.4 + i * 0.3;
    const buf = audioCtx.createBuffer(1, audioCtx.sampleRate * dur, audioCtx.sampleRate);
    const data = buf.getChannelData(0);
    for (let j = 0; j < data.length; j++) {
      const env = j / data.length;
      data[j] = (Math.random() * 2 - 1) * env * 0.9;
    }
    const src = audioCtx.createBufferSource(); src.buffer = buf;
    const gR = audioCtx.createGain();
    gR.gain.setValueAtTime(0, t + i * 0.25);
    gR.gain.linearRampToValueAtTime(0.18 + i * 0.04, t + i * 0.25 + dur * 0.5);
    gR.gain.linearRampToValueAtTime(0, t + i * 0.25 + dur);
    const fR = audioCtx.createBiquadFilter(); fR.type = 'lowpass'; fR.frequency.value = 120 + i * 40;
    src.connect(fR); fR.connect(gR); gR.connect(masterGain);
    src.start(t + i * 0.25);
  }

  // 2. Rising siren sweep
  const gs = audioCtx.createGain(); gs.connect(masterGain);
  gs.gain.setValueAtTime(0, t + 0.2);
  gs.gain.linearRampToValueAtTime(0.22, t + 0.5);
  gs.gain.setValueAtTime(0.22, t + 2.5);
  gs.gain.linearRampToValueAtTime(0, t + 3.5);
  const os = audioCtx.createOscillator(); os.type = 'sawtooth';
  os.frequency.setValueAtTime(80, t + 0.2);
  os.frequency.exponentialRampToValueAtTime(880, t + 2.8);
  const fs = audioCtx.createBiquadFilter(); fs.type = 'lowpass'; fs.frequency.value = 2000;
  os.connect(fs); fs.connect(gs);
  os.start(t + 0.2); os.stop(t + 3.6);

  // 3. Triumphant chord stab at T+1s
  const chordNotes = [220, 277.2, 329.6, 440, 554.4];
  chordNotes.forEach((freq, i) => {
    const gc = audioCtx.createGain(); gc.connect(masterGain);
    gc.gain.setValueAtTime(0, t + 1.2);
    gc.gain.linearRampToValueAtTime(0.14, t + 1.25);
    gc.gain.exponentialRampToValueAtTime(0.0001, t + 4.0);
    const oc = audioCtx.createOscillator(); oc.type = i < 2 ? 'sawtooth' : 'triangle';
    oc.frequency.value = freq;
    const fc = audioCtx.createBiquadFilter(); fc.type = 'lowpass'; fc.frequency.value = 3000;
    oc.connect(fc); fc.connect(gc);
    oc.start(t + 1.2); oc.stop(t + 4.2);
  });

  // 4. Three sharp klaxon blasts at T+0
  for (let b = 0; b < 3; b++) {
    const d = b * 0.38;
    const gk = audioCtx.createGain(); gk.connect(masterGain);
    gk.gain.setValueAtTime(0, t + d);
    gk.gain.linearRampToValueAtTime(0.28, t + d + 0.02);
    gk.gain.setValueAtTime(0.28, t + d + 0.18);
    gk.gain.linearRampToValueAtTime(0, t + d + 0.22);
    const ok = audioCtx.createOscillator(); ok.type = 'square';
    ok.frequency.value = b % 2 === 0 ? 1046 : 783;
    const fk = audioCtx.createBiquadFilter(); fk.type = 'bandpass'; fk.frequency.value = 1200; fk.Q.value = 0.8;
    ok.connect(fk); fk.connect(gk);
    ok.start(t + d); ok.stop(t + d + 0.25);
  }

  // 5. Sub-bass thump
  const gb = audioCtx.createGain(); gb.connect(masterGain);
  gb.gain.setValueAtTime(0.4, t);
  gb.gain.exponentialRampToValueAtTime(0.0001, t + 0.8);
  const ob = audioCtx.createOscillator(); ob.type = 'sine';
  ob.frequency.setValueAtTime(55, t);
  ob.frequency.exponentialRampToValueAtTime(28, t + 0.8);
  ob.connect(gb); ob.start(t); ob.stop(t + 0.9);

  // 6. Swell the ambient drone dramatically
  if (ambientDroneGain) {
    ambientDroneGain.gain.setTargetAtTime(1.2, t, 0.3);
    setTimeout(() => {
      if (ambientDroneGain) ambientDroneGain.gain.setTargetAtTime(0.45, audioCtx.currentTime, 3);
    }, 5000);
  }
}

// ─── HOOK INTO EXISTING FUNCTIONS ────────────────────────────

// Keyboard typing sound during boot
const _origTypeText = typeText;
window.typeText = async function(el, text, speed) {
  return new Promise(resolve => {
    let i = 0;
    const interval = setInterval(() => {
      el.textContent += text[i];
      if (typeof audioCtx !== "undefined" && audioCtx && text[i] !== '\n' && Math.random() > 0.3) playKeyClick();
      i++;
      el.scrollTop = el.scrollHeight;
      if (i >= text.length) { clearInterval(interval); resolve(); }
    }, speed);
  });
};

// Modem on fetch
const _origFetchLaunches = fetchLaunches;
window.fetchLaunches = async function() {
  if (typeof audioCtx !== "undefined" && audioCtx) playModemNoise(2.0);
  return _origFetchLaunches();
};

// Select beep on card click
const _origSelectLaunch = selectLaunch;
window.selectLaunch = function(...args) {
  if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
  return _origSelectLaunch(...args);
};

// Alert alarm on imminent launches found
const _origLog = log;
window.log = function(msg, type) {
  if (type === 'crit' && audioCtx) playAlertAlarm();
  return _origLog(msg, type);
};

// ISS overhead chime
let lastISSVisible = false;
const _origFetchISSChime = fetchISS;
window.fetchISS = async function() {
  const result = await _origFetchISSChime();
  const isNowVisible = document.getElementById('iss-vis')?.textContent?.includes('YES');
  if (typeof audioCtx !== "undefined" && audioCtx && isNowVisible && !lastISSVisible) {
    playISSChime();
    log('ISS OVERHEAD -- CHIME TRIGGERED', 'alert');
  }
  lastISSVisible = isNowVisible;
  return result;
};

// Countdown urgent tick (every second when <1h)
setInterval(() => {
  if (!audioCtx) return;
  const urgentEls = document.querySelectorAll('.card-time.urgent');
  if (urgentEls.length > 0) playCountdownTick();
}, 1000);

// Filter tab beep
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => { if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep(); });
});

// Ambient drone volume swell on alert
const _origAlert = function() {};
setInterval(() => {
  if (!audioCtx || !ambientDroneGain) return;
  const urgentCount = document.querySelectorAll('.card-time.urgent').length;
  const targetVol = urgentCount > 0 ? 0.75 : 0.45;
  ambientDroneGain.gain.setTargetAtTime(targetVol, audioCtx.currentTime, 3);
}, 5000);

// ============================================================
// RECOVERY FLEET VESSEL TRACKING
// (Constant name stays SPACEX_VESSELS for backward compat; array now
//  includes Blue Origin's Jacklyn as of v2.23 -- rename later if needed.)
// ============================================================
const SPACEX_VESSELS = [
  // Both ASOG and JRTI now operate from Port Canaveral in the Atlantic
  { name:"ASOG", fullName:"A Shortfall of Gravitas", role:"DRONE SHIP -- BOOSTER RECOVERY",
    mmsi:"368219910",  // confirmed MMSI
    marinetraffic:"https://www.marinetraffic.com/en/ais/details/ships/mmsi:368219910",
    vesselfinder:"https://www.vesselfinder.com/vessels/details/368219910",
    type:"drone_ship", atlantic: true,
    stagingZones:[
      { label:"LEO / STARLINK ZONE",  lat: 27.5,    lng: -74.5   },
      { label:"GTO DEPLOY ZONE",      lat: 26.5,    lng: -69.8   },
      { label:"PORT CANAVERAL",       lat: 28.4157, lng: -80.5982 },
    ]},
  { name:"JRTI", fullName:"Just Read The Instructions", role:"DRONE SHIP -- BOOSTER RECOVERY",
    mmsi:"368219920",  // confirmed MMSI
    marinetraffic:"https://www.marinetraffic.com/en/ais/details/ships/mmsi:368219920",
    vesselfinder:"https://www.vesselfinder.com/vessels/details/368219920",
    type:"drone_ship", atlantic: true,
    stagingZones:[
      { label:"ATLANTIC DEPLOY ZONE", lat: 27.8,    lng: -76.2   },
      { label:"PORT CANAVERAL",       lat: 28.4157, lng: -80.5982 },
    ]},
  { name:"BOB", fullName:"SpaceX GO Ms. Tree", role:"FAIRING / CREW RECOVERY",
    mmsi:"368456000",
    marinetraffic:"https://www.marinetraffic.com/en/ais/details/ships/mmsi:368456000",
    vesselfinder:"https://www.vesselfinder.com/vessels/details/368456000",
    type:"support", atlantic: true,
    stagingZones:[
      { label:"FAIRING RECOVERY ZONE", lat: 28.9,    lng: -76.8   },
      { label:"PORT CANAVERAL",        lat: 28.4157, lng: -80.5982 },
    ]},
  { name:"DOUG", fullName:"SpaceX GO Navigator", role:"FAIRING / CREW RECOVERY",
    mmsi:"368485000",
    marinetraffic:"https://www.marinetraffic.com/en/ais/details/ships/mmsi:368485000",
    vesselfinder:"https://www.vesselfinder.com/vessels/details/368485000",
    type:"support", atlantic: true,
    stagingZones:[
      { label:"SUPPORT ZONE",   lat: 28.7,    lng: -77.5   },
      { label:"PORT CANAVERAL", lat: 28.4157, lng: -80.5982 },
    ]},
  { name:"OCISLY", fullName:"Of Course I Still Love You", role:"DRONE SHIP -- PACIFIC OPS",
    mmsi:"367309440",
    marinetraffic:"https://www.marinetraffic.com/en/ais/details/ships/mmsi:367309440",
    vesselfinder:"https://www.vesselfinder.com/vessels/details/367309440",
    type:"drone_ship", atlantic: false,
    stagingZones:[
      { label:"VANDENBERG OPS", lat: 33.2, lng: -121.5 },
    ]},
  // v2.23 -- Blue Origin drone ship. MMSI/external URLs TBD until Jacklyn's
  // first operational booster-recovery deployment; swap these when real data
  // lands. Atlantic ops from Port Canaveral, serving New Glenn from LC-36.
  // 600km downrange placeholder zone until NOTMAR data tightens the estimate.
  { name:"JACKLYN", fullName:"Jacklyn", role:"DRONE SHIP -- NEW GLENN BOOSTER RECOVERY",
    mmsi:"TBD",  // confirm from MarineTraffic when Jacklyn ships out for first recovery mission
    marinetraffic:"https://www.marinetraffic.com/en/ais/home/centerx:-75/centery:28/zoom:5",
    vesselfinder:"https://www.vesselfinder.com/vessels/",
    type:"drone_ship", atlantic: true, provider: "Blue Origin",
    stagingZones:[
      { label:"ATLANTIC NEW GLENN ZONE", lat: 28.0,    lng: -75.0   },
      { label:"PORT CANAVERAL",          lat: 28.4157, lng: -80.5982 },
    ]},
];

// vessel globals moved to top-of-script

// Last-known positions cache -- persists across failed fetches
// Populated from vessel_state, never replaced with fake data
const _lastKnownPositions = {};

function getLastKnownPosition(vessel) {
  // Return cached last-known if available, otherwise null (vessel hidden)
  return _lastKnownPositions[vessel.name] || null;
}

// Build trail from real vessel_positions history if available, else skip
function getVesselTrailPoints(historyPoints) {
  // historyPoints: array of {lat, lon} from vessel_positions table, newest last
  if (!historyPoints || historyPoints.length < 2) return [];
  return historyPoints.map(p => [p.lat, p.lon]);
}

// ── LIVE VESSEL DATA FROM SUPABASE ───────────────────────────────────────────
async function fetchLiveVesselPositions() {
  try {
    const res = await fetch('/.netlify/functions/get-vessels');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    const live = {};
    (data.vessels || []).forEach(r => {
      live[r.vessel_name] = r;
      // Update dead reckoning dark state on every vessel poll
      // CRITICAL: use last_seen (actual AIS timestamp from VF), NOT updated_at (our write time)
      // updated_at changes every poll even when AIS is dark -- that's what broke DR detection
      updateAisDarkState(r.vessel_name, {
        lat: r.lat, lng: r.lon,
        speed: r.speed_kts,
        course: r.course_deg,
        heading: r.heading_deg,
        recorded_at: r.last_seen,   // AIS timestamp -- frozen when vessel goes dark
      });
      // Cache every successful fetch as last-known
      _lastKnownPositions[r.vessel_name] = {
        lat: r.lat, lng: r.lon,
        label: r.vessel_state || r.nav_status || 'LAST KNOWN',
        speed: r.speed_kts,
        heading: r.heading_deg,
        course:  r.course_deg,   // v3.14: COG fallback for marker rotation when heading is null
        last_seen: r.last_seen || r.updated_at,
        isLive: true,
        isLastKnown: false,
      };
    });
    return Object.keys(live).length > 0 ? live : null;
  } catch (e) {
    console.warn('[Fleet] get-vessels failed, using last-known positions:', e.message);
    return null;
  }
}

// Fetch recent trail history from vessel_positions for a specific vessel
async function fetchVesselTrailHistory(vesselName, points = 20) {
  try {
    const url = `/.netlify/functions/get-vessel-history?vessel=${encodeURIComponent(vesselName)}&limit=${points}`;
    const res = await fetch(url);
    if (!res.ok) return [];
    const data = await res.json();
    return data.history || [];
  } catch (e) {
    return [];
  }
}

function navStatusLabel(code) {
  const labels = {
    0: 'UNDERWAY ENGINE', 1: 'AT ANCHOR', 2: 'NOT UNDER COMMAND',
    3: 'RESTRICTED MANEUVER', 4: 'CONSTRAINED DRAUGHT', 5: 'MOORED',
    6: 'AGROUND', 7: 'ENGAGED FISHING', 8: 'UNDERWAY SAILING',
  };
  return labels[code] || (code === null ? 'UNKNOWN' : `STATUS ${code}`);
}

function initVesselTracking() {
  // Clear any false dark states for vessels near port at startup
  Object.keys(AIS_DARK_STATE || {}).forEach(vName => {
    const state = AIS_DARK_STATE[vName];
    const pos = vesselPositions[vName];
    if (!state?.darkDeclaredAt || !pos) return;
    const distFromPort = haversineKm(pos.lat||0, pos.lng||0, 28.415, -80.59);
    if (distFromPort < 25 && (pos.speed||0) < 3) {
      delete AIS_DARK_STATE[vName];
      log(`AIS: ${vName} dark state cleared -- vessel at port`, 'info');
    }
  });
  updateVesselPositions();
  log('SPACEX FLEET TRACKING -- LIVE AIS DATA', 'alert');
}

async function updateVesselPositions() {
  // Clear old markers and trails
  vesselMarkers.forEach(m => map.removeLayer(m));
  vesselTrails.forEach(t => map.removeLayer(t));
  vesselMarkers = [];
  vesselTrails = [];

  // Try live Supabase data, fall back to last-known (never simulate)
  const liveData = await fetchLiveVesselPositions();
  const isLive = liveData && Object.keys(liveData).length > 0;

  // Only show SpaceX vessels when a SpaceX launch is selected
  const _activeIsSpaceX = !selectedLaunch || (() => {
    const p = (selectedLaunch.launch_service_provider?.name || '').toLowerCase();
    return p.includes('spacex') || p.includes('space exploration') || !selectedLaunch;
  })();

  // If non-SpaceX launch selected, clear all vessel markers from map
  if (!_activeIsSpaceX) {
    vesselMarkers.forEach(m => map.removeLayer(m));
    vesselTrails.forEach(t => map.removeLayer(t));
    vesselMarkers = [];
    vesselTrails = [];
    return; // skip vessel rendering entirely
  }

  SPACEX_VESSELS.forEach(vessel => {
    const live = liveData && liveData[vessel.name];
    let pos;
    if (live && live.lat && live.lon) {
      pos = {
        lat: live.lat, lng: live.lon,
        label: live.vessel_state || 'TRACKING',
        speed: live.speed_kts,
        heading: live.heading_deg,
        course:  live.course_deg,   // v3.14: COG fallback for marker rotation when heading is null
        last_seen: live.last_seen || live.updated_at,
        isLive: true,
        isLastKnown: false,
      };
    } else {
      // Use last-known position -- real data, just stale
      const lastKnown = getLastKnownPosition(vessel);
      if (!lastKnown) return; // No data at all -- skip vessel entirely, don't fake it
      pos = { ...lastKnown, isLive: false, isLastKnown: true };
    }
    vesselPositions[vessel.name] = pos;
    if (!vessel.atlantic) return;

    // --- TRAIL -- real history + client-side interpolation (zero extra API calls) ---
    // Return-to-port vessels: cyan trail (cold/heading home)
    // Active/deployed vessels: orange trail (hot/on mission)
    // AIS dark DR vessels handled separately (amber)
    const _portLat = 28.415, _portLon = -80.59; // Port Canaveral
    const _distFromPort = haversineKm(pos.lat, pos.lng, _portLat, _portLon);
    const _drActive = !!getDRPosition(vessel.name);
    const _trailCourse = pos?.course || pos?.heading || 0;
    const _isReturningToPort = !_drActive && _distFromPort < 600 && (pos.speed||0) > 1 && _trailCourse >= 190 && _trailCourse <= 320;
    const _isDeployingOut = !_drActive && _distFromPort > 30 && _distFromPort < 1500 && (pos.speed||0) > 3 && (_trailCourse <= 120 || _trailCourse >= 340);
    const trailColor = _isReturningToPort
      ? (pos.isLive ? '#0099CC' : '#0099CC66')   // cyan -- returning home
      : _isDeployingOut
      ? (pos.isLive ? '#FFB000' : '#FFB00066')   // amber -- heading outbound to recovery zone
      : (pos.isLive ? '#ff6b35' : '#ff6b3566');   // orange -- active/deployed
    (async () => {
      try {
        // Trail cache -- rebuild max every 5 minutes, not every 30s poll
        if (!window._vesselTrailCache) window._vesselTrailCache = {};
        if (!window._vesselTrailTime)  window._vesselTrailTime  = {};
        const _cacheAge = Date.now() - (window._vesselTrailTime[vessel.name] || 0);
        let histData = _cacheAge < 300000 ? window._vesselTrailCache[vessel.name] : null;
        if (!histData) {
          const histRes = await fetch(`/.netlify/functions/get-vessel-history?vessel=${encodeURIComponent(vessel.name)}&limit=${TRAIL_LIMIT}&hours=${TRAIL_HOURS}`);
          if (!histRes.ok) return;
          histData = await histRes.json();
          window._vesselTrailCache[vessel.name] = histData;
          window._vesselTrailTime[vessel.name]  = Date.now(); // cache for 5min
        }

        // v3.10 -- carry timestamps through so we can detect AIS-dark transit gaps
        const rawWithTime = (histData.history || []).map(p => ({
          lat: p.lat, lon: p.lon, t: new Date(p.recorded_at).getTime()
        }));

        // Dedup exact-consecutive points (BUG-025 mitigation -- backend writes
        // duplicate rows; collapse them so Catmull-Rom isn't fed straight-line
        // garbage where the vessel was actually stationary).
        const dedupedTimed = [];
        for (let i = 0; i < rawWithTime.length; i++) {
          const prev = dedupedTimed[dedupedTimed.length - 1];
          if (!prev
              || Math.abs(rawWithTime[i].lat - prev.lat) >= TRAIL_DEDUP_EPSILON
              || Math.abs(rawWithTime[i].lon - prev.lon) >= TRAIL_DEDUP_EPSILON) {
            dedupedTimed.push(rawWithTime[i]);
          }
        }

        if (dedupedTimed.length < 2) {
          // Only one (or zero) deduped point -- draw a tiny stub from last known toward current
          if (dedupedTimed.length === 1) {
            const stub = L.polyline([[dedupedTimed[0].lat, dedupedTimed[0].lon], [pos.lat, pos.lng]],
              { color: trailColor, weight: 1, opacity: 0.3, dashArray: '4 6', smoothFactor: 1 }
            ).addTo(map);
            vesselTrails.push(stub);
          }
          return;
        }

        // Append current live position as the final trail point
        dedupedTimed.push({ lat: pos.lat, lon: pos.lng, t: Date.now() });

        // Catmull-Rom interpolation -- fills gaps between sparse AIS pings
        // with a smooth curve that follows the vessel's natural path
        function interpolateCatmullRom(pts, steps = 6) {
          const out = [];
          for (let i = 0; i < pts.length - 1; i++) {
            const p0 = pts[Math.max(0, i - 1)];
            const p1 = pts[i];
            const p2 = pts[i + 1];
            const p3 = pts[Math.min(pts.length - 1, i + 2)];
            for (let s = 0; s <= steps; s++) {
              const t = s / steps;
              const t2 = t * t, t3 = t2 * t;
              const lat = 0.5 * ((2*p1[0]) + (-p0[0]+p2[0])*t + (2*p0[0]-5*p1[0]+4*p2[0]-p3[0])*t2 + (-p0[0]+3*p1[0]-3*p2[0]+p3[0])*t3);
              const lon = 0.5 * ((2*p1[1]) + (-p0[1]+p2[1])*t + (2*p0[1]-5*p1[1]+4*p2[1]-p3[1])*t2 + (-p0[1]+3*p1[1]-3*p2[1]+p3[1])*t3);
              out.push([lat, lon]);
            }
          }
          return out;
        }

        // Split deduped trail into runs (continuous travel) + gaps (AIS-dark transits).
        // v3.11: implied-speed only -- no time-only check. A vessel sailing at 5kt
        // for 12h with sparse AIS pings is real continuous transit, not a gap.
        // No vessel in the fleet sustains 15kt true, so anything implying faster is
        // AIS-dark with a teleport in the backend.
        const runs = [[dedupedTimed[0]]];
        const gaps = [];
        for (let i = 1; i < dedupedTimed.length; i++) {
          const p0 = dedupedTimed[i - 1], p1 = dedupedTimed[i];
          const distKm = haversineKm(p0.lat, p0.lon, p1.lat, p1.lon);
          const hours  = (p1.t - p0.t) / 3600000;
          // Skip <1min steps (rare; would divide by ~0 and produce noise)
          const impliedKts = hours > 0.0167 ? (distKm * 0.539957 / hours) : 0;
          const isGap = impliedKts > TRAIL_GAP_MAX_KTS;
          if (isGap) {
            gaps.push([p0, p1]);
            runs.push([p1]);
          } else {
            runs[runs.length - 1].push(p1);
          }
        }

        // v3.10 -- per-run N-bucket smooth fade. Each continuous run gets its own
        // Catmull-Rom + N-bucket linear-ramp fade (TRAIL_FADE_BUCKETS = 16 default).
        // Layer count: ~16 buckets × runs × vessels. For a 2-run mission (port +
        // recovery zone) across 4 vessels = 128 layers max. Canvas-fast.
        const canvasRenderer = L.canvas();
        const buckets = TRAIL_FADE_BUCKETS;
        runs.forEach(run => {
          if (run.length < 2) return;
          const runLatLon = run.map(p => [p.lat, p.lon]);
          const smoothPts = interpolateCatmullRom(runLatLon, 4);
          const n = smoothPts.length;
          for (let b = 0; b < buckets; b++) {
            const startIdx = Math.floor(n * (b / buckets));
            const endIdx   = Math.floor(n * ((b + 1) / buckets));
            if (endIdx - startIdx < 1) continue;
            const ramp = buckets === 1 ? 1 : b / (buckets - 1);
            const line = L.polyline(smoothPts.slice(startIdx, Math.min(endIdx + 1, n)), {
              color:   trailColor,
              weight:  TRAIL_WEIGHT_MIN  + (TRAIL_WEIGHT_MAX  - TRAIL_WEIGHT_MIN)  * ramp,
              opacity: TRAIL_OPACITY_MIN + (TRAIL_OPACITY_MAX - TRAIL_OPACITY_MIN) * ramp,
              smoothFactor: 2,
              renderer: canvasRenderer,
            }).addTo(map);
            vesselTrails.push(line);
          }
        });

        // Render each AIS-dark gap as a single faint dashed connector.
        // Visually says: "she went there, we don't have the actual path."
        gaps.forEach(([p0, p1]) => {
          const gapLatLng = [[p0.lat, p0.lon], [p1.lat, p1.lon]];
          // v3.13 -- two-layer gap connector: faint solid base + dashed overlay.
          // The solid underlay disambiguates this from other dashed UX in the app.
          const gapBase = L.polyline(gapLatLng, {
            color:     trailColor,
            weight:    TRAIL_GAP_BASE_WEIGHT,
            opacity:   TRAIL_GAP_BASE_OPACITY,
            smoothFactor: 1,
            renderer:  canvasRenderer,
          }).addTo(map);
          vesselTrails.push(gapBase);
          const gapLine = L.polyline(gapLatLng, {
            color:     trailColor,
            weight:    TRAIL_GAP_DASH_WEIGHT,
            opacity:   TRAIL_GAP_DASH_OPACITY,
            dashArray: TRAIL_GAP_DASH_PATTERN,
            smoothFactor: 1,
            renderer:  canvasRenderer,
          }).addTo(map);
          vesselTrails.push(gapLine);
        });
      } catch(e) { /* no trail if history unavailable */ }
    })();

    // --- MARKER -- rotated arrow if direction known, diamond if not ---
    // v3.15: route direction through getVesselDirection() helper -- the DR engine is the
    // canonical source. Helper returns {value, source} from the priority chain
    // DR -> state.lastCourse -> live COG -> live gyro heading -> 0. Source tag drives tooltip.
    const _dirInfo = getVesselDirection(vessel.name, pos);
    const headingRot = _dirInfo.value;
    const isMoving = pos.speed > 0.5;
    // Return-to-port vessels get cyan color (cold = heading home)
    // Active/deployed vessels get orange (hot = on mission)
    // Check if vessel is heading back to pad -- show pad orbit ring
    const _shelterName = isInWeatherShelter(pos.lat, pos.lng) ? getShelterName(pos.lat, pos.lng) : null;
    // v3.16: route through DR engine -- direction may be in state.lastCourse
    // even when current pos.heading/course are both null
    const _returnPad = (!getDRPosition(vessel.name) && _shelterName === null)
      ? isReturningToPad(pos.lat, pos.lng, getVesselDirection(vessel.name, pos).value)
      : null;

    if (_returnPad && selectedLaunch) {
      // Draw a pad orbit ring around the target pad -- shows booster is inbound
      try {
        const _padRing = L.circle([_returnPad.pad.lat, _returnPad.pad.lng], {
          radius: _returnPad.pad.radiusKm * 1000,
          color: '#00BFFF', fillColor: '#00BFFF', fillOpacity: 0.03,
          weight: 1, opacity: 0.5, dashArray: '6,6',
          className: 'pad-return-ring'
        }).addTo(map);
        activeLaunchArcFan.push(_padRing);
      } catch(e) {}
    }

    const _isReturning = (() => {
      const drPos = getDRPosition(vessel.name);
      if (drPos) return false; // DR active = on mission
      // Check if vessel is heading toward port (dist from port < 400km and decreasing)
      const padLat = 28.415, padLon = -80.59; // Port Canaveral
      const distFromPort = haversineKm(pos.lat, pos.lng, padLat, padLon);
      return distFromPort < 350 && pos.speed > 1; // Close to port and moving = returning
    })();
    const _vesselColor = _isReturning ? '#00BFFF' : '#ff6b35';
    const _vesselGlow = _isReturning ? 'rgba(0,191,255,0.8)' : 'rgba(255,107,53,0.8)';
    const _vesselShadow = _isReturning ? 'rgba(0,191,255,0.6)' : 'rgba(255,107,53,0.6)';

    const markerHtml = isMoving
      ? `<div style="width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:14px solid ${_vesselColor};transform:rotate(${headingRot}deg);filter:drop-shadow(0 0 6px ${_vesselGlow});"></div>`
      : `<div style="width:12px;height:12px;background:${_vesselColor};border:1px solid rgba(255,255,255,0.4);transform:rotate(45deg);box-shadow:0 0 10px ${_vesselShadow};"></div>`;

    const icon = L.divIcon({ html: markerHtml, className: '', iconAnchor:[6,6] });

    // Use DR projected position for distance if vessel is AIS dark
    const _drP = getDRPosition(vessel.name);
    const _effLat = _drP ? _drP.lat : pos.lat;
    const _effLng = _drP ? _drP.lon : pos.lng;
    const distKm = Math.round(haversineKm(OBSERVER.lat, OBSERVER.lng, _effLat, _effLng));
    const distNote = _drP ? ` (EST·DR)` : '';
    const latStr = `${Math.abs(_effLat).toFixed(3)}°${_effLat>=0?'N':'S'}`;
    const lngStr = `${Math.abs(_effLng).toFixed(3)}°${_effLng>=0?'E':'W'}`;
    const speedStr = pos.speed != null ? `${pos.speed.toFixed(1)} KTS` : '--';
    // v3.15: tooltip heading display reads from the same getVesselDirection() helper as
    // the marker rotation. Source tag distinguishes DR / last-known / COG / gyro / null.
    const headingStr = _dirInfo.source === 'NULL' ? '--'
                     : _dirInfo.source === 'HDG'  ? `${Math.round(_dirInfo.value)}°`
                                                  : `${Math.round(_dirInfo.value)}° (${_dirInfo.source})`;
    const tsStr = pos.ais_timestamp ? new Date(pos.ais_timestamp).toUTCString().replace('GMT','UTC') : '--';
    const dataTag = pos.isLive
      ? `<div style="margin-top:6px;font-size:0.55rem;color:#00ff88">● LIVE AIS -- LAST UPDATE: ${tsStr}</div>`
      : `<div style="margin-top:6px;font-size:0.55rem;color:var(--blue-dim)">⚠ ESTIMATED POSITION -- AIS UNAVAILABLE</div>`;

    const marker = L.marker([pos.lat, pos.lng], {icon})
      .addTo(map)
      .bindTooltip(`<span style="font-family:'VT323',monospace;font-size:0.95rem;color:#ff6b35;letter-spacing:0.08em;">⚓ ${vessel.name}</span>`, {
        permanent: false, direction: 'right', offset: [10, 0], opacity: 1, className: 'vessel-tooltip'
      })
      .bindPopup(`
        <div class="popup-title">⚓ ${vessel.name}</div>
        <div class="popup-row"><span class="popup-label">VESSEL</span><span class="popup-val">${vessel.fullName}</span></div>
        <div class="popup-row"><span class="popup-label">ROLE</span><span class="popup-val" style="font-size:0.6rem">${vessel.role}</span></div>
        <div class="popup-row"><span class="popup-label">STATUS</span><span class="popup-val" style="color:#ff6b35">${pos.label}</span></div>
        <div class="popup-row"><span class="popup-label">POSITION</span><span class="popup-val">${latStr} ${lngStr}${_drP?" <span style=\"color:#FFB000;font-size:0.55rem;\">[DR EST]</span>":""}</span></div>
        <div class="popup-row"><span class="popup-label">SPEED</span><span class="popup-val">${speedStr}</span></div>
        <div class="popup-row"><span class="popup-label">HEADING</span><span class="popup-val">${headingStr}</span></div>
        <div class="popup-row"><span class="popup-label">DIST</span><span class="popup-val">${distKm}${distNote} KM FROM OBS</span></div>
        ${dataTag}
        <div style="margin-top:5px;display:flex;gap:6px;flex-wrap:wrap;">
          <a href="${vessel.marinetraffic}" target="_blank"
            style="color:#ff6b35;font-size:0.6rem;text-decoration:none;border:1px solid #ff6b35;padding:2px 6px;">
            ▶ MARINETRAFFIC
          </a>
          <a href="${vessel.vesselfinder}" target="_blank"
            style="color:#ffb000;font-size:0.6rem;text-decoration:none;border:1px solid #ffb000;padding:2px 6px;">
            ▶ VESSELFINDER
          </a>
        </div>
      `);
    vesselMarkers.push(marker);
  });

  renderVesselList();

  // After vessel data is fresh, redraw booster ring if a launch is selected
  if (selectedLaunch) {
    const isSpaceX = (selectedLaunch.launch_service_provider?.name || '').toLowerCase().includes('spacex');
    if (isSpaceX) {
      const droneShip = resolveBoosterShip(selectedLaunch);
      if (droneShip) {
        const pos = vesselPositions[droneShip.name];
        if (pos) {
          const isOnStation = pos.speed != null && pos.speed < 0.5;
          drawBoosterRing(pos.lat, pos.lng, droneShip.name, isOnStation);
        }
      }
    }
  }

  // v2.30 Patch U-Live -- refresh vessel projection trails after AIS update
  try { renderVesselMotionNarrative(); } catch(e) { console.warn('vessel narrative render failed:', e.message); }
}

function renderVesselList() {
  const container = document.getElementById('vessel-list');
  if (!container) return;
  container.innerHTML = '';
  SPACEX_VESSELS.forEach(vessel => {
    const pos = vesselPositions[vessel.name];
    if (!pos) return;
    // Use DR projected position for dark vessels
    const _drRP = getDRPosition(vessel.name);
    const _rpLat = _drRP ? _drRP.lat : pos.lat;
    const _rpLng = _drRP ? _drRP.lon : pos.lng;
    const distKm = vessel.atlantic ? Math.round(haversineKm(OBSERVER.lat, OBSERVER.lng, _rpLat, _rpLng)) : null;
    const inPort  = vessel.atlantic ? isVesselInPort(vessel.name) : false;
    const aisStatus = vessel.atlantic ? getVesselAisStatus(vessel.name) : 'unknown';

    // AIS status badge
    const aisBadgeMap = {
      live:    { label: 'AIS LIVE',  color: '#00FF88' },
      stale:   { label: 'AIS STALE', color: '#FFB000' },
      dark:    { label: 'AIS DARK',  color: '#FF1744' },
      unknown: { label: 'AIS N/A',   color: '#444444' },
    };
    const aisBadge = aisBadgeMap[aisStatus];
    const ageHours = pos.ais_timestamp ?
      ((Date.now() - new Date(pos.ais_timestamp)) / 3600000).toFixed(1) : null;

    // Status line: IN PORT override if docked, else normal label
    let statusLine = vessel.atlantic ? pos.label : 'PACIFIC OPS';
    if (inPort) statusLine = 'IN PORT -- EXCLUDED';

    const card = document.createElement('div');
    card.className = `vessel-card${vessel.atlantic ? ' live' : ''}${inPort ? ' in-port' : ''}`;
    card.innerHTML = `
      <div style="flex:1;min-width:0">
        <div class="vessel-name" style="${inPort ? 'opacity:0.5' : ''}">${vessel.name}</div>
        <div class="vessel-role">${vessel.role}</div>
        <div class="vessel-pos" style="${inPort ? 'color:#FF1744' : ''}">${statusLine}</div>
      </div>
      <div style="text-align:right;flex-shrink:0">
        <div class="vessel-status ${vessel.atlantic?'deployed':'standby'}">${vessel.atlantic?'▶ ATLANTIC':'-- PACIFIC'}</div>
        <div class="vessel-dist">${vessel.atlantic && pos.speed > 0.5 ? pos.speed.toFixed(1)+' KTS' : vessel.atlantic ? distKm+' KM' : 'N/A'}</div>
        <div style="font-size:0.6rem;letter-spacing:0.05em;margin-top:2px;color:${aisBadge.color};text-shadow:0 0 6px ${aisBadge.color}88">
          ${aisBadge.label}${ageHours ? ' +'+ageHours+'H' : ''}
        </div>
      </div>`;
    if (vessel.atlantic) {
      card.onclick = () => {
        map.setView([pos.lat, pos.lng], 6, {animate:true});
        const mIdx = SPACEX_VESSELS.filter(v=>v.atlantic).indexOf(vessel);
        if (vesselMarkers[mIdx]) vesselMarkers[mIdx].openPopup();
        if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
        updateCompass(bearingFromObserver(_effLat, _effLng), distKm, vessel.name);
        log(`VESSEL TARGETED: ${vessel.name} -- ${vessel.fullName} // ${distKm}KM FROM OBS`, 'alert');
        if (inPort) log(`WARNING: ${vessel.name} IS IN PORT -- NOT ASSIGNED TO ACTIVE LAUNCH`, 'alert');
        if (aisStatus === 'dark') log(`WARNING: ${vessel.name} AIS DARK -- LAST UPDATE ${ageHours}H AGO`, 'alert');
      };
    }
    container.appendChild(card);
  });
}

// ============================================================
// MOBILE DEVICE + ORIENTATION DETECTION
// Handles Android landscape where CSS media queries break
// because landscape width > 767px threshold
// ============================================================
function isMobileDevice() {
  // Match phones AND tablets (iPad, Android tablet)
  // NOTE: maxTouchPoints must be guarded by screen width -- touchscreen laptops
  // (Surface, MacBook Touch Bar, etc.) report maxTouchPoints=10 even when used
  // as a desktop. Without the width guard they incorrectly get the mobile layout.
  return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent) ||
    (navigator.maxTouchPoints > 1 && window.screen.width < 1024) ||
    (window.screen.width < 768 && 'ontouchstart' in window);
}

function applyMobileLayout() {
  // Run on ALL devices -- CSS breakpoints alone are unreliable on Android Chrome
  const isLandscape = window.innerWidth > window.innerHeight;
  const isMobile = isMobileDevice();
  const body = document.body;

  const lp  = document.getElementById('left-panel');
  const rp  = document.getElementById('right-panel');
  const mh  = document.getElementById('mobile-handle');
  const tb  = document.getElementById('topbar');

  if (!isMobile) {
    // Desktop: always show panels, hide mobile drawer
    if (lp) { lp.style.display = ''; lp.style.width = ''; lp.style.minWidth = ''; }
    if (rp) { rp.style.display = ''; rp.style.width = ''; rp.style.minWidth = ''; }
    if (mh) mh.style.display = 'none';
    body.classList.remove('mobile-landscape', 'mobile-portrait');
    setTimeout(() => { if (window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize(); }, 400);
    return;
  }

  // ── MOBILE ──────────────────────────────────────────────────────────────
  // Clear all inline overrides first -- clean slate every call
  if (lp) { lp.style.cssText = ''; lp.removeAttribute('style'); }
  if (rp) { rp.style.cssText = ''; rp.removeAttribute('style'); }
  if (mh) mh.style.display = '';
  if (tb) tb.style.padding = '';
  document.querySelectorAll('.panel-collapse-tab').forEach(t => t.style.display = '');
  document.querySelectorAll('.topbar-meta').forEach(el => el.style.display = '');

  if (isLandscape) {
    body.classList.add('mobile-landscape');
    body.classList.remove('mobile-portrait');
    // Landscape mobile = same as portrait: full-map + bottom tray
    if (lp) { lp.style.cssText = ''; lp.style.setProperty('display', 'none', 'important'); }
    if (rp) { rp.style.cssText = ''; rp.style.setProperty('display', 'none', 'important'); }
    if (mh) mh.style.display = 'flex';
    document.querySelectorAll('.panel-collapse-tab').forEach(t => t.style.display = 'none');
    if (tb) tb.style.padding = '3px 8px';
    // Re-snap drawer to current state
    if (typeof snapToState === 'function') setTimeout(() => snapToState(drawerState || 'peek'), 100);
    const sb = document.getElementById('statusbar');
    if (sb) sb.style.display = 'none';
  } else {
    body.classList.add('mobile-portrait');
    body.classList.remove('mobile-landscape');
    if (lp) lp.style.display = 'none';
    if (rp) rp.style.display = 'none';
    if (mh) mh.style.display = 'flex';
    document.querySelectorAll('.panel-collapse-tab').forEach(t => t.style.display = 'none');
    const sb = document.getElementById('statusbar');
    if (sb) sb.style.display = '';
    // Re-snap drawer to peek on orientation change so it doesn't get stuck
    if (typeof snapToState === 'function') setTimeout(() => snapToState(drawerState || 'peek'), 100);
  }

  // Recalculate map after layout settles -- double fire for Android
  setTimeout(() => { if (window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize(); }, 350);
  setTimeout(() => { if (window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize(); }, 800);
}

// Run on load and orientation/resize change
// orientationchange fires before dimensions update -- use longer delay on Android
window.addEventListener('orientationchange', () => {
  if (typeof snapToState === 'function') snapToState('peek');
  setTimeout(applyMobileLayout, 350);
  setTimeout(applyMobileLayout, 750);
  setTimeout(applyMobileLayout, 1300);
});
window.addEventListener('resize', () => applyMobileLayout());

// ============================================================
// LANDSCAPE PANEL COLLAPSE
// ============================================================
const panelCollapseState = { left: false, right: false };

function togglePanelCollapse(side) {
  const panel = document.getElementById(side + '-panel');
  const tab   = document.getElementById(side + '-collapse-tab');
  panelCollapseState[side] = !panelCollapseState[side];
  const collapsed = panelCollapseState[side];
  panel.classList.toggle('collapsed', collapsed);
  // Update inline width when collapsing so map fills correctly on Android
  if (collapsed) {
    panel.style.minWidth = '0px';
  } else {
    panel.style.minWidth = side === 'left' ? '200px' : '180px';
  }
  if (side === 'left')  tab.textContent = collapsed ? '▶' : '◀';
  if (side === 'right') tab.textContent = collapsed ? '◀' : '▶';
  // Double-nudge Leaflet map size for Android
  setTimeout(() => { if (window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize(); }, 300);
  setTimeout(() => { if (window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize(); }, 600);
}

// ============================================================
// MOBILE DRAWER SYSTEM -- 3-STATE SNAP
// States: PEEK (collapsed, ~72px drawer) → HALF (~48% vh) → FULL (~84% vh)
// ============================================================
let drawerState = 'peek'; // 'peek' | 'half' | 'full'
let drawerHeight = 0;
let touchStartY = 0;
let touchStartHeight = 0;
let isDragging = false;
let activeMobileTab = 'launches';

function getSnapHeights() {
  const vh = window.innerHeight;
  const isLandscape = window.innerWidth > window.innerHeight;
  return {
    peek: isLandscape ? 64 : 72,  // landscape peek is shorter since screen is short
    half: isLandscape ? Math.round(vh * 0.55) : Math.round(vh * 0.48),
    full: isLandscape ? Math.round(vh * 0.78) : Math.round(vh * 0.84),
  };
}

let mobileDrawerInited = false;
function initMobileDrawer() {
  // No width gate -- phones can be > 1024px in landscape
  if (mobileDrawerInited) { snapToState('peek'); return; }
  mobileDrawerInited = true;

  const grip = document.getElementById('mobile-grip');
  const statusBar = document.getElementById('mobile-status-bar');

  // Touch drag on grip and status bar
  [grip, statusBar].forEach(el => {
    el.addEventListener('touchstart', onDragStart, { passive: true });
    el.addEventListener('touchmove', onDragMove, { passive: false });
    el.addEventListener('touchend', onDragEnd, { passive: true });
  });

  // Populate initial data
  renderMobileLaunches();
  renderMobileWeather();
  renderMobileVessels();
  renderMobileISS();
  updateMobileStatusBar();
  setInterval(updateMobileStatusBar, 1000);

  // Start in peek state -- show a sliver so user knows drawer exists
  snapToState('peek');
}

function onDragStart(e) {
  touchStartY = e.touches[0].clientY;
  touchStartHeight = drawerHeight;
  isDragging = false;
}

function onDragMove(e) {
  const dy = touchStartY - e.touches[0].clientY;
  if (Math.abs(dy) > 8) isDragging = true;
  if (!isDragging) return;
  const snaps = getSnapHeights();
  const newH = Math.max(0, Math.min(touchStartHeight + dy, snaps.full + 20));
  setDrawerHeight(newH);
  e.preventDefault();
}

function onDragEnd() {
  if (!isDragging) {
    // Tap -- cycle through states
    cycleDrawerState();
  } else {
    // Drag -- snap to nearest state
    const snaps = getSnapHeights();
    const dy = touchStartHeight - drawerHeight; // negative = dragged up (opened more)
    if (drawerHeight < snaps.peek * 0.5) {
      snapToState('peek');
    } else if (drawerHeight < (snaps.peek + snaps.half) / 2) {
      snapToState(dy > 0 ? 'peek' : 'half');
    } else if (drawerHeight < (snaps.half + snaps.full) / 2) {
      snapToState(dy > 0 ? 'half' : 'full');
    } else {
      snapToState('full');
    }
  }
  isDragging = false;
}

function cycleDrawerState() {
  if (drawerState === 'peek') snapToState('half');
  else if (drawerState === 'half') snapToState('full');
  else snapToState('peek');
}

function snapToState(state) {
  const snaps = getSnapHeights();
  drawerState = state;
  const handle = document.getElementById('mobile-handle');
  const drawer = document.getElementById('mobile-drawer');

  // Always ensure handle is visible -- force it regardless of CSS state
  handle.style.display = 'flex';
  handle.classList.toggle('open', state !== 'peek');

  // Cap drawer height to 80% of current viewport (important in landscape)
  const maxH = Math.round(window.innerHeight * 0.80);
  const h = state === 'peek' ? 0 : Math.min(snaps[state], maxH);
  drawer.style.display = h > 0 ? 'flex' : 'none';
  setDrawerHeight(h);

  // ISS marker -- hide when drawer takes over most of screen
  const hideISS = state === 'full';
  if (issMarker) issMarker.getElement && issMarker.getElement()?.style &&
    (issMarker.getElement().style.opacity = hideISS ? '0' : '1');
}

// Legacy compat aliases used elsewhere in the file
function toggleDrawer() { cycleDrawerState(); }
function openDrawer()   { snapToState('half'); }
function closeDrawer()  { snapToState('peek'); }

function setDrawerHeight(h) {
  drawerHeight = h;
  const drawer = document.getElementById('mobile-drawer');
  drawer.style.height = h + 'px';
  if (h > 0) drawer.style.display = 'flex';
}

function switchMobileTab(tab) {
  activeMobileTab = tab;
  document.querySelectorAll('.mobile-tab').forEach(t => t.classList.remove('active'));
  document.querySelector(`.mobile-tab[data-tab="${tab}"]`).classList.add('active');
  document.querySelectorAll('.mobile-section').forEach(s => s.classList.remove('active'));
  document.getElementById(`mobile-section-${tab}`).classList.add('active');
  if (tab === 'compass') drawCompass(compassAngle);
  if (tab === 'settings') renderMobileObserverSettings();
  if (tab === 'starlink') syncMobileStarlinkPanel();
  if (tab === 'history') renderMobileHistory();
}

// ============================================================
// MOBILE DETAIL SHEET
// ============================================================
let mobileDetailFadeTimer = null;
let mobileDetailFadeAnim = null;

function showMobileDetail(launch, distKm, isVis, isMaybe) {
  const sheet = document.getElementById('mobile-detail-sheet');
  const body = document.getElementById('mobile-detail-body');
  const timerBar = document.getElementById('mobile-detail-timer-bar');
  if (!sheet || !body) return;

  const name = launch.mission?.name || launch.name || 'UNKNOWN';
  const rocket = launch.rocket?.configuration?.name || '--';
  const provider = launch.launch_service_provider?.name || '--';
  const pad = launch.pad?.name || '--';
  const loc = launch.pad?.location?.name || '--';
  const t = formatCountdown(launch.net || launch.window_start);
  const elev = estimateElevationAngle(distKm);
  const visScore = Math.max(0, Math.min(100, 100 - (distKm / visibilityRadius) * 100));
  const visColor = isVis ? '#00BFFF' : isMaybe ? '#ffb000' : '#333';
  // Compute real bearing from observer to launch pad
  const _mPLat = parseFloat(launch.pad?.latitude || 0) * Math.PI/180;
  const _mPLng = parseFloat(launch.pad?.longitude || 0) * Math.PI/180;
  const _mOLat = OBSERVER.lat * Math.PI/180;
  const _mOLng = OBSERVER.lng * Math.PI/180;
  const _mDLng = _mPLng - _mOLng;
  const _mY = Math.sin(_mDLng) * Math.cos(_mPLat);
  const _mX = Math.cos(_mOLat)*Math.sin(_mPLat) - Math.sin(_mOLat)*Math.cos(_mPLat)*Math.cos(_mDLng);
  const _mBrng = ((Math.atan2(_mY,_mX)*180/Math.PI) + 360) % 360;
  const _mDirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
  const _mDir = _mDirs[Math.round(_mBrng/22.5) % 16];
  const visText = isVis ? '▶ VISIBLE -- LOOK TO ' + _mDir + ' (' + Math.round(_mBrng) + '°)'
    : isMaybe ? '~ MARGINAL -- LOOK TO ' + _mDir + ' (' + Math.round(_mBrng) + '°)'
    : '✗ OUT OF RANGE';

  body.innerHTML = `
    <div class="m-detail-name">${name}</div>
    <div class="m-detail-grid">
      <div class="m-detail-cell">
        <div class="m-detail-label">ROCKET</div>
        <div class="m-detail-val">${rocket}</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">PROVIDER</div>
        <div class="m-detail-val">${provider.split(' ')[0]}</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">LAUNCH PAD</div>
        <div class="m-detail-val">${pad.substring(0,20)}</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">LOCATION</div>
        <div class="m-detail-val">${loc.split(',')[0]}</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">T-MINUS</div>
        <div class="m-detail-val" style="color:#ffb000">${t}</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">DISTANCE</div>
        <div class="m-detail-val">${Math.round(distKm)} KM</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">PEAK ELEVATION</div>
        <div class="m-detail-val">${elev.toFixed(1)}°</div>
      </div>
      <div class="m-detail-cell">
        <div class="m-detail-label">VISIBILITY</div>
        <div class="m-detail-val" style="color:${visColor}">${isVis?'YES':isMaybe?'MARGINAL':'NO'}</div>
      </div>
    </div>
    <div style="font-size:0.52rem;color:var(--blue-dark);letter-spacing:0.1em;margin-bottom:3px;">VISIBILITY SCORE</div>
    <div class="m-detail-vis-bar">
      <div class="m-detail-vis-fill" style="width:${visScore}%;background:${visColor};box-shadow:0 0 6px ${visColor};"></div>
    </div>
    <div class="m-detail-status" style="color:${visColor}">${visText}</div>
  `;

  // Open the sheet
  sheet.style.display = 'block';
  requestAnimationFrame(() => sheet.classList.add('open'));

  // 6-second auto-fade timer bar -- reset on touch
  clearMobileDetailTimer();
  timerBar.style.display = 'block';
  // Restart animation by cloning
  const newBar = timerBar.cloneNode(true);
  timerBar.parentNode.replaceChild(newBar, timerBar);
  newBar.style.display = 'block';

  mobileDetailFadeTimer = setTimeout(() => {
    closeMobileDetail();
  }, 6000);

  // Touch anywhere on sheet resets the timer
  sheet.ontouchstart = () => {
    clearMobileDetailTimer();
    // Restart 6s from touch
    const bar = document.getElementById('mobile-detail-timer-bar');
    if (bar) {
      const fresh = bar.cloneNode(true);
      bar.parentNode.replaceChild(fresh, bar);
      fresh.style.display = 'block';
    }
    mobileDetailFadeTimer = setTimeout(() => closeMobileDetail(), 6000);
  };
}

function closeMobileDetail() {
  clearMobileDetailTimer();
  const sheet = document.getElementById('mobile-detail-sheet');
  if (!sheet) return;
  sheet.classList.remove('open');
  setTimeout(() => { sheet.style.display = 'none'; }, 320);
}

function clearMobileDetailTimer() {
  if (mobileDetailFadeTimer) { clearTimeout(mobileDetailFadeTimer); mobileDetailFadeTimer = null; }
}

// ============================================================
// MOBILE OBSERVER SETTINGS
// ============================================================
function renderMobileObserverSettings() {
  // Update header display
  const nameEl = document.getElementById('m-obs-name');
  const coordsEl = document.getElementById('m-obs-coords');
  if (nameEl) nameEl.textContent = '▶ ' + OBSERVER.name;
  if (coordsEl) coordsEl.textContent =
    `${Math.abs(OBSERVER.lat).toFixed(4)}°${OBSERVER.lat>=0?'N':'S'}  ${Math.abs(OBSERVER.lng).toFixed(4)}°${OBSERVER.lng>=0?'E':'W'}`;

  // Radius slider
  const slider = document.getElementById('mobile-radius-slider');
  const valEl = document.getElementById('mobile-radius-val');
  if (slider) {
    slider.value = visibilityRadius;
    if (valEl) valEl.textContent = visibilityRadius + 'KM';
    slider.oninput = () => {
      visibilityRadius = parseInt(slider.value);
      if (valEl) valEl.textContent = visibilityRadius + 'KM';
      // Sync desktop slider
      const desktopSlider = document.getElementById('radius-slider');
      const desktopVal = document.getElementById('radius-val');
      if (desktopSlider) desktopSlider.value = visibilityRadius;
      if (desktopVal) desktopVal.textContent = visibilityRadius + 'KM';
      renderMapMarkers();
      renderLaunchList();
      renderMobileLaunches();
    };
  }

  // Location presets
  const container = document.getElementById('mobile-loc-presets');
  if (!container) return;
  container.innerHTML = '';
  const regions = [...new Set(LOCATION_PRESETS.map(l => l.region))];
  regions.forEach(region => {
    const label = document.createElement('div');
    label.className = 'm-region-label';
    label.textContent = `-- ${region} --`;
    container.appendChild(label);
    const row = document.createElement('div');
    row.className = 'm-region-row';
    LOCATION_PRESETS.filter(l => l.region === region).forEach(loc => {
      const btn = document.createElement('button');
      btn.className = 'm-loc-btn' + (loc.name === OBSERVER.name ? ' active' : '');
      btn.textContent = loc.name.split(',')[0];
      btn.ontouchend = (e) => {
        e.preventDefault();
        setObserverLocation(loc.lat, loc.lng, loc.name, loc.elev);
        renderMobileObserverSettings();
        updateMobileStatusBar();
      };
      row.appendChild(btn);
    });
    container.appendChild(row);
  });
}

// ============================================================
// FIX COMPASS IDs -- mobile compass uses m- prefixed IDs
// ============================================================
function updateCompassMobile(bearing, distKm, targetLabel) {
  const cardinal = bearingToCardinal(bearing);
  const bEl = document.getElementById('m-compass-bearing');
  const cEl = document.getElementById('m-compass-cardinal');
  const lEl = document.getElementById('m-compass-label');
  if (bEl) bEl.textContent = Math.round(bearing) + '°';
  if (cEl) cEl.textContent = cardinal;
  if (lEl) lEl.textContent = targetLabel ? targetLabel.substring(0, 18) : 'MAP CURSOR';
}

// ============================================================
// PRO BETA SIGNUP MODAL
// ============================================================
function openBetaSignupModal() {
  const overlay = document.getElementById('beta-modal-overlay');
  if (overlay) {
    overlay.classList.add('open');
    setTimeout(() => {
      const inp = document.getElementById('beta-email-input');
      if (inp) inp.focus();
    }, 100);
  }
}

function closeBetaSignupModal() {
  const overlay = document.getElementById('beta-modal-overlay');
  if (overlay) overlay.classList.remove('open');
}

function closeBetaModalOnOverlay(e) {
  if (e.target.id === 'beta-modal-overlay') closeBetaSignupModal();
}

async function submitBetaSignup() {
  const input  = document.getElementById('beta-email-input');
  const btn    = document.getElementById('beta-submit-btn');
  const status = document.getElementById('beta-status');
  if (!input || !btn || !status) return;

  const email = input.value.trim().toLowerCase();
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    status.textContent = '✗ ENTER A VALID EMAIL ADDRESS';
    status.className = 'beta-status-err';
    return;
  }

  btn.disabled = true;
  btn.textContent = 'TRANSMITTING...';
  status.textContent = '';

  try {
    const res = await fetch('/.netlify/functions/beta-signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    });
    const data = await res.json();

    if (data.success) {
      status.textContent = '✓ REQUEST RECEIVED -- CHECK YOUR INBOX';
      status.className = 'beta-status-ok';
      btn.textContent = '✓ REQUEST SENT';
      input.value = '';
      // Store email for later session verification
      localStorage.setItem('lw_email', email);
      userEmail = email;
      // Auto-close after 3s
      setTimeout(() => closeBetaSignupModal(), 3000);
    } else {
      throw new Error(data.error || 'Unknown error');
    }
  } catch(e) {
    status.textContent = '✗ TRANSMISSION FAILED -- TRY AGAIN';
    status.className = 'beta-status-err';
    btn.disabled = false;
    btn.textContent = '⚡ REQUEST PRO BETA ACCESS';
  }
}

// Apply pro-locked styling to all Pro cards on page load
function initProLockedCards() {
  if (PRO_UNLOCKED) return;
  document.querySelectorAll('.pro-theme-card').forEach(c => c.classList.add('pro-locked'));
  document.querySelectorAll('.pro-sound-card').forEach(c => c.classList.add('pro-locked'));
}

// Allow Enter key to submit beta form

// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  LaunchWatch -- PRO PREFERENCES (localStorage persistence)               ║
// ╚══════════════════════════════════════════════════════════════════════════╝

const PREFS_KEY = 'lw_pro_prefs';
const PREFS_DEFAULTS = {
  locationName:    null,
  customLat:       null,
  customLng:       null,
  showTrails:      true,
  showOrbit:       true,
  showTerminator:  true,
  compactManifest: false,
  alert24:         true,
  alert6:          true,
  alert1:          true,
  visibleOnly:     false,
  theme:           'wargames',
  soundPack:       'wargames',
};

function loadPrefs() {
  try {
    const stored = localStorage.getItem(PREFS_KEY);
    return stored ? { ...PREFS_DEFAULTS, ...JSON.parse(stored) } : { ...PREFS_DEFAULTS };
  } catch { return { ...PREFS_DEFAULTS }; }
}

function savePref(key, value) {
  try {
    const prefs = loadPrefs();
    prefs[key] = value;
    localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
    log('PREFS: ' + key + ' = ' + value, 'info');
  } catch(e) { console.warn('savePref failed:', e); }
}

function resetPrefs() {
  try {
    localStorage.removeItem(PREFS_KEY);
    applyPrefs(PREFS_DEFAULTS);
    populatePrefInputs(PREFS_DEFAULTS);
    log('PREFS: Reset to defaults', 'alert');
  } catch(e) {}
}

function populatePrefInputs(prefs) {
  const set = (id, val) => { const el = document.getElementById(id); if (el) {
    if (el.type === 'checkbox') el.checked = val !== false;
    else el.value = val || '';
  }};
  set('pref-location-name', prefs.locationName);
  set('pref-lat',           prefs.customLat);
  set('pref-lng',           prefs.customLng);
  set('pref-show-trails',   prefs.showTrails);
  set('pref-show-orbit',    prefs.showOrbit);
  set('pref-show-terminator', prefs.showTerminator);
  set('pref-compact',       prefs.compactManifest);
  set('pref-alert-24',      prefs.alert24);
  set('pref-alert-6',       prefs.alert6);
  set('pref-alert-1',       prefs.alert1);
  set('pref-visible-only',  prefs.visibleOnly);
}

function applyPrefs(prefs) {
  // Apply saved theme (only if not the default wargames to avoid flash)
  if (prefs.theme && prefs.theme !== 'wargames') applyMovieTheme(prefs.theme);
  // Apply custom location
  if (prefs.customLat && prefs.customLng) {
    OBSERVER.lat = prefs.customLat;
    OBSERVER.lng = prefs.customLng;
    if (prefs.locationName) OBSERVER.name = prefs.locationName;
    map.setView([prefs.customLat, prefs.customLng], map.getZoom());
  }
  // Apply display prefs
  if (prefs.showTrails === false) toggleVesselTrails(false);
  if (prefs.compactManifest) toggleCompactManifest(true);
}

function applyCustomLocation() {
  const lat = parseFloat(document.getElementById('pref-lat')?.value);
  const lng = parseFloat(document.getElementById('pref-lng')?.value);
  const name = document.getElementById('pref-location-name')?.value || 'CUSTOM LOCATION';
  if (!isFinite(lat) || !isFinite(lng)) { alert('Enter valid lat/lng coordinates'); return; }
  OBSERVER.lat = lat; OBSERVER.lng = lng; OBSERVER.name = name;
  savePref('customLat', lat); savePref('customLng', lng); savePref('locationName', name);
  map.setView([lat, lng], map.getZoom());
  updateObserverDisplay();
  renderLaunchList();
  log('PREFS: Custom location set -- ' + name + ' ' + lat.toFixed(4) + ',' + lng.toFixed(4), 'alert');
}

function toggleVesselTrails(show) {
  vesselTrails.forEach(t => show ? map.addLayer(t) : map.removeLayer(t));
}

function toggleCompactManifest(compact) {
  document.getElementById('launch-list')?.classList.toggle('compact-manifest', compact);
}

// PRO gate for prefs section
function initPrefsGate() {
  const gate = document.getElementById('pro-prefs-gate');
  const content = document.getElementById('pro-prefs-content');
  if (!gate || !content) return;
  // Show to all for now (beta) -- gate later when PRO is paid
  gate.style.display = 'none';
  content.style.display = 'block';
}

// Load and apply saved preferences on startup
function useGPSLocation() {
  if (!navigator.geolocation) { log('GPS: not supported in this browser', 'warn'); return; }
  log('GPS: requesting location...', 'info');
  navigator.geolocation.getCurrentPosition(pos => {
    const lat = +pos.coords.latitude.toFixed(4);
    const lng = +pos.coords.longitude.toFixed(4);
    const el_lat = document.getElementById('pref-lat');
    const el_lng = document.getElementById('pref-lng');
    if (el_lat) el_lat.value = lat;
    if (el_lng) el_lng.value = lng;
    savePref('customLat', lat);
    savePref('customLng', lng);
    OBSERVER.lat = lat; OBSERVER.lng = lng;
    map.setView([lat, lng], map.getZoom());
    updateObserverDisplay();
    renderLaunchList();
    log('GPS: location set to ' + lat + ', ' + lng, 'alert');
  }, err => log('GPS: error -- ' + err.message, 'warn'));
}

function initPrefs() {
  initPrefsGate();
  const prefs = loadPrefs();
  populatePrefInputs(prefs);
  // Only apply non-destructive prefs on load (don't force-move map)
  if (prefs.compactManifest) toggleCompactManifest(true);
}

document.addEventListener('DOMContentLoaded', () => {
  const inp = document.getElementById('beta-email-input');
  if (inp) {
    inp.addEventListener('keydown', e => {
      if (e.key === 'Enter') submitBetaSignup();
    });
  }
  initProLockedCards();
});

// Also wire the topbar PRO BETA button to open modal instead of Beehiiv
window.addEventListener('load', () => {
  const btn = document.getElementById('pro-beta-btn');
  if (btn && !PRO_UNLOCKED) {
    btn.removeAttribute('href');
    btn.setAttribute('role', 'button');
    btn.onclick = (e) => { e.preventDefault(); openBetaSignupModal(); };
    btn.style.cursor = 'pointer';
  }
  const mobileCta = document.getElementById('mobile-beta-cta');
  if (mobileCta && !PRO_UNLOCKED) {
    mobileCta.removeAttribute('href');
    mobileCta.onclick = (e) => { e.preventDefault(); openBetaSignupModal(); };
  }
  // Also wire settings panel beta CTA
  const settingsCta = document.querySelector('.settings-footer a[href*="beehiiv"]');
  if (settingsCta && !PRO_UNLOCKED) {
    settingsCta.removeAttribute('href');
    settingsCta.onclick = (e) => { e.preventDefault(); openBetaSignupModal(); };
  }
});

function updateMobileStatusBar() {
  const obsEl = document.getElementById('mobile-obs');
  const nextEl = document.getElementById('mobile-next-launch');
  if (obsEl) obsEl.textContent = OBSERVER.name.split(',')[0];

  // Find next launch
  if (nextEl && currentLaunches.length) {
    const now = Date.now();
    const next = currentLaunches
      .filter(l => l.net && new Date(l.net).getTime() > now)
      .sort((a,b) => new Date(a.net) - new Date(b.net))[0];
    if (next) {
      const diff = new Date(next.net).getTime() - now;
      const h = Math.floor(diff/3600000);
      const m = Math.floor((diff%3600000)/60000);
      const s = Math.floor((diff%60000)/1000);
      const name = (next.mission?.name || next.name || '').substring(0,16);
      nextEl.textContent = h > 48
        ? `${name} -- ${Math.floor(h/24)}d`
        : `${name} -- T-${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
    } else {
      nextEl.textContent = 'NO LAUNCHES SCHEDULED';
    }
  }
}

function renderMobileLaunches() {
  const container = document.getElementById('mobile-launches-list');
  if (!container || !currentLaunches.length) return;
  container.innerHTML = '';
  const now = Date.now();

  currentLaunches.slice(0, 20).forEach(launch => {
    const pad = launch.pad || {};
    const launchLat = parseFloat(pad.latitude);
    const launchLng = parseFloat(pad.longitude);
    if (isNaN(launchLat)) return;

    const distKm = haversineKm(OBSERVER.lat, OBSERVER.lng, launchLat, launchLng);
    const isVis = distKm <= visibilityRadius;
    const isMaybe = !isVis && distKm <= visibilityRadius * 1.3;
    const netDate = new Date(launch.net);
    const diff = netDate.getTime() - now;
    const isUrgent = diff > 0 && diff < 86400000;

    const h = Math.floor(Math.abs(diff)/3600000);
    const m = Math.floor((Math.abs(diff)%3600000)/60000);
    const timeStr = diff < 0 ? 'LAUNCHED' :
      h > 48 ? `T-${Math.floor(h/24)}D ${h%24}H` :
      `T-${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;

    const card = document.createElement('div');
    card.className = `mobile-launch-card${isVis?' vis':isMaybe?' maybe':''}`;
    const visLabel = isVis ? '✓ VISIBLE' : isMaybe ? '~ MARGINAL' : '✗ OUT OF RANGE';
    const visCls = isVis ? 'vis' : isMaybe ? 'maybe' : 'nope';
    card.innerHTML = `
      <div class="mobile-launch-name">${(launch.mission?.name||launch.name||'UNKNOWN').substring(0,30)}</div>
      <div class="mobile-launch-meta">
        <span class="mobile-launch-meta-site">${launch.pad?.location?.name?.split(',')[0]||'--'}</span>
        <span class="mobile-launch-vis-badge ${visCls}">${visLabel}</span>
      </div>
      <div class="mobile-launch-time${isUrgent?' urgent':''}">${timeStr} &nbsp;·&nbsp; ${Math.round(distKm)} KM</div>
    `;
    card.onclick = () => {
      selectLaunch(launch, {classList:{add:()=>{},remove:()=>{}},dataset:{idx:0}}, launchLat, launchLng, distKm, isVis, isMaybe, pad.location?.name||'');
      closeDrawer();
      if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
    };
    container.appendChild(card);
  });
}

function renderMobileWeather() {
  // Mirror desktop weather data into mobile cells
  const fields = ['cloud','vis','hum','wind','temp','cond'];
  fields.forEach(f => {
    const desktop = document.getElementById(`wx-${f}`);
    const mobile = document.getElementById(`m-wx-${f}`);
    if (desktop && mobile) mobile.textContent = desktop.textContent;
  });
  const fill = document.getElementById('wx-clarity-fill');
  const label = document.getElementById('wx-clarity-label');
  const mFill = document.getElementById('m-wx-clarity-fill');
  const mLabel = document.getElementById('m-wx-clarity-label');
  if (fill && mFill) { mFill.style.width = fill.style.width; mFill.style.background = fill.style.background; }
  if (label && mLabel) mLabel.textContent = label.textContent;
}

function renderMobileVessels() {
  const container = document.getElementById('mobile-vessels-list');
  if (!container) return;
  container.innerHTML = '';
  SPACEX_VESSELS.forEach(vessel => {
    const pos = vesselPositions[vessel.name];
    if (!pos) return;
    // Use DR projected position for dark vessels
    const _drRP = getDRPosition(vessel.name);
    const _rpLat = _drRP ? _drRP.lat : pos.lat;
    const _rpLng = _drRP ? _drRP.lon : pos.lng;
    const distKm = vessel.atlantic ? Math.round(haversineKm(OBSERVER.lat, OBSERVER.lng, _rpLat, _rpLng)) : null;
    const card = document.createElement('div');
    card.className = 'mobile-vessel-card';
    if (!vessel.atlantic) card.style.borderLeftColor = 'var(--blue-dark)';
    card.innerHTML = `
      <div class="mobile-vessel-name">${vessel.name}</div>
      <div class="mobile-vessel-role">${vessel.role}</div>
      <div class="mobile-vessel-meta">
        <span>${vessel.atlantic ? (getDRPosition(vessel.name) && (pos.label === 'IN_PORT' || pos.label === 'MOORED') ? 'AIS DARK · AT SEA'
          : (() => {
              // Check if sheltering near coast
              if (isInWeatherShelter(pos.lat||0, pos.lng||0)) {
                return 'SHELTERING · ' + (getShelterName(pos.lat||0, pos.lng||0) || 'COASTAL ANCHORAGE');
              }
              const _c = getVesselDirection(vessel.name, pos).value;  // v3.16: DR-aware
              const _s = pos.speed || 0;
              const _d = haversineKm(pos.lat||0, pos.lng||0, 28.415, -80.59);
              if (_s > 3 && _d > 30 && _d < 1500 && (_c <= 120 || _c >= 340)) return 'UNDERWAY · OUTBOUND';
              if (_s > 3 && _d < 800 && _c >= 190 && _c <= 320) return 'UNDERWAY · RETURNING';
              return pos.label;
            })()) : 'PACIFIC OPS'}</span>
        <span style="color:${vessel.atlantic?'#ff6b35':'var(--blue-dark)'}">${vessel.atlantic ? distKm+' KM' : 'N/A'}</span>
      </div>
      ${vessel.atlantic ? `<div class="mobile-vessel-links">
        <a href="${vessel.marinetraffic}" target="_blank" class="mobile-ais-link">▶ MARINETRAFFIC</a>
        <a href="${vessel.vesselfinder}" target="_blank" class="mobile-ais-link" style="border-color:var(--amber);color:var(--amber);">▶ VESSELFINDER</a>
      </div>` : ''}
    `;
    if (vessel.atlantic) {
      card.onclick = (e) => {
        if (e.target.tagName === 'A') return;
        map.setView([pos.lat, pos.lng], 6, {animate:true});
        closeDrawer();
        if (typeof audioCtx !== "undefined" && audioCtx) playSelectBeep();
      };
    }
    container.appendChild(card);
  });
}

function renderMobileISS() {
  const fields = ['lat','lng','alt','dist','vis','status'];
  fields.forEach(f => {
    const desktop = document.getElementById(`iss-${f}`);
    const mobile = document.getElementById(`m-iss-${f}`);
    if (desktop && mobile) mobile.textContent = desktop.textContent;
  });
}

function syncMobileStarlinkPanel() {
  // Sync toggle button state
  const mBtn = document.getElementById('m-sl-toggle-btn');
  if (mBtn) {
    mBtn.textContent = _starlinkEnabled ? '■ DISABLE TRACKER' : '▶ ENABLE TRACKER';
    mBtn.style.background = _starlinkEnabled
      ? 'rgba(0,191,255,0.15)' : 'rgba(0,191,255,0.06)';
    mBtn.style.borderColor = _starlinkEnabled
      ? 'var(--blue)' : 'rgba(0,191,255,0.4)';
  }

  // Sync stats
  const desktopStats = document.getElementById('sl-stats');
  const mStats = document.getElementById('m-sl-stats');
  if (mStats) {
    mStats.textContent = desktopStats
      ? desktopStats.textContent
      : (_starlinkEnabled ? 'LOADING...' : 'TRACKER DISABLED');
  }

  // Sync pass list
  const desktopPasses = document.getElementById('sl-pass-list');
  const mPasses = document.getElementById('m-sl-pass-list');
  if (mPasses) {
    if (!_starlinkEnabled) {
      mPasses.textContent = 'Enable tracker to see passes';
    } else if (desktopPasses) {
      mPasses.innerHTML = desktopPasses.innerHTML || 'No satellites currently overhead';
    }
  }

  // Show Pro nudge if not unlocked and tracker is enabled
  const nudge = document.getElementById('m-sl-pro-nudge');
  if (nudge) nudge.style.display = (_starlinkEnabled && !PRO_UNLOCKED) ? 'block' : 'none';
}

function renderMobileHistory() {
  const container = document.getElementById('mobile-history-list');
  const gate      = document.getElementById('m-history-pro-gate');
  const badge     = document.getElementById('m-history-pro-badge');
  if (!container) return;

  // PRO gate
  if (!PRO_UNLOCKED) {
    if (gate)  gate.style.display  = 'block';
    if (badge) badge.style.display = 'inline';
    container.innerHTML = '';
    return;
  }
  if (gate)  gate.style.display  = 'none';
  if (badge) badge.style.display = 'inline';

  // Load history -- reuse existing function
  const history = typeof loadLaunchHistory === 'function' ? loadLaunchHistory() : [];
  const upcoming = allLaunches || [];
  // Merge: past launches + recovery window launches
  const now = Date.now();
  const pastLaunches = [
    ...upcoming.filter(l => isInRecovery && isInRecovery(l)),
    ...history.filter(l => {
      const net = new Date(l.net || l.window_start).getTime();
      return net < now && !upcoming.find(u => u.id === l.id);
    }),
  ].sort((a, b) => new Date(b.net||b.window_start) - new Date(a.net||a.window_start))
   .slice(0, 25);

  container.innerHTML = '';
  if (!pastLaunches.length) {
    container.innerHTML = '<div style="font-size:0.58rem;color:var(--blue-dim);padding:12px 0;">No launch history yet -- check back after the next launch.</div>';
    return;
  }

  pastLaunches.forEach(launch => {
    const pad = launch.pad || {};
    const launchLat = parseFloat(pad.latitude || launch.pad_lat || 0);
    const launchLng = parseFloat(pad.longitude || launch.pad_lon || 0);
    const name = launch.mission?.name || launch.title || launch.name || 'UNKNOWN';
    const net  = new Date(launch.net || launch.window_start);
    const msSince = now - net.getTime();
    const hSince  = Math.floor(msSince / 3600000);
    const dSince  = Math.floor(hSince / 24);
    const ageStr  = dSince > 0 ? `${dSince}D AGO` : `${hSince}H AGO`;
    const isStarlink = name.toLowerCase().includes('starlink');
    const inRecov = typeof isInRecovery === 'function' && isInRecovery(launch);

    const card = document.createElement('div');
    card.className = 'mobile-launch-card';
    card.style.borderLeftColor = inRecov ? '#00BFFF' : 'rgba(0,191,255,0.2)';
    card.style.opacity = inRecov ? '1' : '0.75';
    card.innerHTML = `
      <div class="mobile-launch-name">${name.substring(0, 30)}</div>
      <div class="mobile-launch-meta">
        <span class="mobile-launch-meta-site">${pad.location?.name?.split(',')[0] || launch.launch_pad || '--'}</span>
        <span style="font-size:0.55rem;color:${inRecov?'#00BFFF':'#555'};">
          ${inRecov ? '● RECOVERY' : '✓ COMPLETE'}
        </span>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:3px;">
        <div class="mobile-launch-time" style="color:#888;">${ageStr} · ${net.toUTCString().substring(5,16)}</div>
        ${isStarlink ? '<span style="font-size:0.52rem;color:#FFD700;">🌟 TRAIN</span>' : ''}
      </div>
      <div onclick="event.stopPropagation();playMissionReplay('${launch.id}','${encodeURIComponent(name)}',${launchLat},${launchLng})" style="
        margin-top:6px;text-align:center;padding:5px;
        border:1px solid rgba(0,191,255,0.3);background:rgba(0,191,255,0.05);
        font-family:'VT323',monospace;font-size:0.85rem;color:var(--blue);
        letter-spacing:0.08em;cursor:pointer;-webkit-tap-highlight-color:transparent;
      ">▶ REPLAY MISSION</div>
    `;
    card.onclick = () => {
      if (launchLat && launchLng) {
        map.setView([launchLat, launchLng], 5, { animate: true });
        closeDrawer();
      }
    };
    container.appendChild(card);
  });
}

// Hook into existing data refresh functions to keep mobile in sync
const _origFetchWeather = fetchWeatherForLocation;
fetchWeatherForLocation = async function(...args) {
  const r = await _origFetchWeather(...args);
  setTimeout(renderMobileWeather, 500);
  return r;
};

// Patch fetchISS to also sync mobile ISS panel (chime hook already wraps fetchISS above)
const _origFetchISSMobile = fetchISS;
fetchISS = async function(...args) {
  const r = await _origFetchISSMobile(...args);
  setTimeout(renderMobileISS, 500);
  return r;
};

</script>

<!-- MOBILE HANDLE + DRAWER -->
<div id="mobile-handle">
  <div id="mobile-grip">
    <div id="mobile-grip-bar"></div>
    <div id="mobile-grip-chevron">▲</div>
  </div>
  <div id="mobile-status-bar">
    <span>⌖ <span id="mobile-obs">KSC</span></span>
    <span id="mobile-next-launch">LOADING...</span>
    <a id="mobile-beta-cta" href="https://launchwatch.beehiiv.com/subscribe" target="_blank">PRO BETA</a>
  </div>
  <div id="mobile-drawer">
    <!-- Tab Bar -->
    <div id="mobile-tabs">
      <div class="mobile-tab active" data-tab="launches" onclick="switchMobileTab('launches')">
        <span class="mobile-tab-icon">🚀</span>LAUNCHES
      </div>
      <div class="mobile-tab" data-tab="history" onclick="switchMobileTab('history')">
        <span class="mobile-tab-icon">🕐</span>HISTORY
      </div>
      <div class="mobile-tab" data-tab="fleet" onclick="switchMobileTab('fleet')">
        <span class="mobile-tab-icon">⚓</span>FLEET
      </div>
      <div class="mobile-tab" data-tab="weather" onclick="switchMobileTab('weather')">
        <span class="mobile-tab-icon">🌤</span>WEATHER
      </div>
      <div class="mobile-tab" data-tab="iss" onclick="switchMobileTab('iss')">
        <span class="mobile-tab-icon">🛰</span>ISS
      </div>
      <div class="mobile-tab" data-tab="compass" onclick="switchMobileTab('compass')">
        <span class="mobile-tab-icon">🧭</span>COMPASS
      </div>
      <div class="mobile-tab" data-tab="starlink" onclick="switchMobileTab('starlink')">
        <span class="mobile-tab-icon">🌟</span>STARLINK
      </div>
      <div class="mobile-tab" data-tab="settings" onclick="switchMobileTab('settings')">
        <span class="mobile-tab-icon">⌖</span>OBSERVER
      </div>
    </div>
    <!-- Content -->
    <div id="mobile-content">
      <!-- Launches -->
      <div id="mobile-section-launches" class="mobile-section active">
        <div class="mobile-section-title">[ LAUNCH MANIFEST ]</div>
        <div id="mobile-launches-list"></div>
      </div>
      <!-- History -->
      <div id="mobile-section-history" class="mobile-section">
        <div class="mobile-section-title" style="display:flex;justify-content:space-between;align-items:center;">
          <span>[ LAUNCH HISTORY ]</span>
          <span id="m-history-pro-badge" style="font-size:0.55rem;color:var(--amber);border:1px solid var(--amber);padding:1px 5px;letter-spacing:0.08em;display:none;">PRO</span>
        </div>
        <div id="m-history-pro-gate" style="padding:12px 0;font-size:0.58rem;color:var(--blue-dim);line-height:1.7;display:none;">
          <div style="color:var(--amber);margin-bottom:6px;">🔒 PRO FEATURE</div>
          Launch history, vessel tracks &amp; mission replay.<br>
          <span onclick="openBetaSignupModal()" style="color:var(--blue);text-decoration:underline;cursor:pointer;">
            Join Pro Beta to unlock →
          </span>
        </div>
        <div id="mobile-history-list"></div>
      </div>
      <!-- Fleet -->
      <div id="mobile-section-fleet" class="mobile-section">
        <div class="mobile-section-title">[ SPACEX FLEET ]</div>
        <div id="mobile-vessels-list"></div>
      </div>
      <!-- Weather -->
      <div id="mobile-section-weather" class="mobile-section">
        <div class="mobile-section-title">[ LOCAL CONDITIONS ]</div>
        <div class="mobile-wx-grid">
          <div class="mobile-wx-cell"><div class="mobile-wx-label">CLOUD COVER</div><div class="mobile-wx-val" id="m-wx-cloud">--</div></div>
          <div class="mobile-wx-cell"><div class="mobile-wx-label">VISIBILITY</div><div class="mobile-wx-val" id="m-wx-vis">--</div></div>
          <div class="mobile-wx-cell"><div class="mobile-wx-label">HUMIDITY</div><div class="mobile-wx-val" id="m-wx-hum">--</div></div>
          <div class="mobile-wx-cell"><div class="mobile-wx-label">WIND</div><div class="mobile-wx-val" id="m-wx-wind">--</div></div>
          <div class="mobile-wx-cell"><div class="mobile-wx-label">TEMP</div><div class="mobile-wx-val" id="m-wx-temp">--</div></div>
          <div class="mobile-wx-cell"><div class="mobile-wx-label">CONDITIONS</div><div class="mobile-wx-val" id="m-wx-cond">--</div></div>
        </div>
        <div class="mobile-section-title" style="margin-top:8px;">SKY CLARITY</div>
        <div class="wx-clarity" style="margin:0;">
          <div class="wx-clarity-fill" id="m-wx-clarity-fill" style="width:0%"></div>
          <div class="wx-clarity-label" id="m-wx-clarity-label">--</div>
        </div>
      </div>
      <!-- ISS -->
      <div id="mobile-section-iss" class="mobile-section">
        <div class="mobile-section-title">[ ISS TRACKING ]</div>
        <div class="mobile-iss-grid">
          <div class="mobile-iss-cell"><div class="mobile-iss-label">STATUS</div><div class="mobile-iss-val" id="m-iss-status">--</div></div>
          <div class="mobile-iss-cell"><div class="mobile-iss-label">DISTANCE</div><div class="mobile-iss-val" id="m-iss-dist">--</div></div>
          <div class="mobile-iss-cell"><div class="mobile-iss-label">LATITUDE</div><div class="mobile-iss-val" id="m-iss-lat">--</div></div>
          <div class="mobile-iss-cell"><div class="mobile-iss-label">LONGITUDE</div><div class="mobile-iss-val" id="m-iss-lng">--</div></div>
          <div class="mobile-iss-cell"><div class="mobile-iss-label">ALTITUDE</div><div class="mobile-iss-val" id="m-iss-alt">408 KM</div></div>
          <div class="mobile-iss-cell"><div class="mobile-iss-label">VISIBLE</div><div class="mobile-iss-val" id="m-iss-vis">--</div></div>
        </div>
      </div>
      <!-- Compass -->
      <div id="mobile-section-compass" class="mobile-section">
        <div class="mobile-section-title">[ BEARING FROM OBSERVER ]</div>
        <div id="mobile-compass-wrap">
          <canvas id="mobile-compass-canvas" width="160" height="160"></canvas>
          <div id="compass-readout" style="font-size:0.9rem;">
            <div id="m-compass-bearing" style="font-size:2rem;">---°</div>
            <div id="m-compass-cardinal" style="font-size:1.4rem;">--</div>
            <div id="m-compass-label">HOVER MAP<br>TO TRACK</div>
          </div>
        </div>
        <div style="font-size:0.6rem;color:var(--blue-dark);text-align:center;margin-top:8px;">TAP MAP TO SET BEARING</div>
      </div>
      <!-- Starlink -->
      <div id="mobile-section-starlink" class="mobile-section">
        <div class="mobile-section-title">[ STARLINK TRACKER ]</div>

        <!-- Enable/disable toggle -->
        <div onclick="toggleStarlinkLayer()" id="m-sl-toggle-btn" style="
          display:block;text-align:center;padding:10px;margin-bottom:10px;
          border:1px solid rgba(0,191,255,0.4);background:rgba(0,191,255,0.06);
          color:var(--blue);font-family:'VT323',monospace;font-size:1rem;
          letter-spacing:0.12em;cursor:pointer;-webkit-tap-highlight-color:transparent;
          transition:all 0.15s;
        ">▶ ENABLE TRACKER</div>

        <!-- Stats -->
        <div id="m-sl-stats" style="
          font-size:0.58rem;color:var(--blue-dim);letter-spacing:0.06em;
          margin-bottom:10px;line-height:1.6;padding:6px 8px;
          background:rgba(0,8,20,0.4);border:1px solid var(--blue-dark);
        ">TRACKER DISABLED</div>

        <!-- Free vs Pro info -->
        <div style="font-size:0.55rem;color:var(--blue-dim);line-height:1.7;margin-bottom:10px;padding:0 2px;">
          <span style="color:#00BFFF;">●</span> CYAN -- established sats in 800km ring<br>
          <span style="color:#FFD700;">●</span> GOLD -- fresh deployment train<br>
          <span style="font-size:0.5rem;color:var(--blue-dark);">
            FREE: gold + cyan within 800km · PRO: gold trails extend globally
          </span>
        </div>

        <!-- Pass list -->
        <div class="mobile-section-title" style="margin-top:4px;">OVERHEAD PASSES</div>
        <div id="m-sl-pass-list" style="
          font-size:0.58rem;color:var(--blue-dim);line-height:1.8;
          max-height:140px;overflow-y:auto;letter-spacing:0.04em;
          padding:4px 0;
        ">Enable tracker to see passes</div>

        <!-- Pro upgrade nudge if not unlocked -->
        <div id="m-sl-pro-nudge" style="
          margin-top:10px;padding:8px 10px;
          border:1px solid rgba(255,176,0,0.3);background:rgba(255,176,0,0.05);
          font-size:0.55rem;color:var(--amber);line-height:1.6;
          display:none;
        ">
          ⭐ PRO -- gold trails extend globally across the map<br>
          <span onclick="openBetaSignupModal()" style="text-decoration:underline;cursor:pointer;">
            Join Pro Beta →
          </span>
        </div>
      </div>

      <!-- Observer / Settings -->
      <div id="mobile-section-settings" class="mobile-section">
        <div class="mobile-section-title">[ OBSERVER STATION ]</div>
        <div class="m-obs-current" id="m-obs-name">▶ KENNEDY SPACE CENTER, FL</div>
        <div class="m-obs-coords" id="m-obs-coords">28.3922°N &nbsp; 80.6077°W</div>
        <div class="m-radius-row">
          <label>VIS. RADIUS</label>
          <input type="range" id="mobile-radius-slider" min="200" max="3000" value="1000" step="50">
          <span class="m-radius-val" id="mobile-radius-val">1000KM</span>
        </div>
        <div id="mobile-loc-presets"></div>
      </div>
    </div>
  </div>
</div>

<!-- PRO BETA SIGNUP MODAL -->
<div id="beta-modal-overlay" onclick="closeBetaModalOnOverlay(event)">
  <div id="beta-modal">
    <div class="beta-modal-header">
      <span>[ PRO BETA ACCESS ]</span>
      <span class="beta-modal-close" onclick="closeBetaSignupModal()">✕</span>
    </div>
    <div class="beta-modal-body">
      <div class="beta-modal-pitch">
        <strong>Unlock all Pro themes and features.</strong><br>
        Enter your email to join the Pro Beta -- free while we're building.
        You'll get an access link the moment you're approved.
      </div>
      <div class="beta-modal-features">
        <span>→</span> All 13 cinematic &amp; retro themes<br>
        <span>→</span> All 8 immersive sound packs<br>
        <span>→</span> Moon phase overlay<br>
        <span>→</span> Push notifications T-24hr + T-1hr<br>
        <span>→</span> ✈ Telegram: custom providers + space news<br>
        <span>→</span> Everything we ship during beta
      </div>
      <input type="email" id="beta-email-input" placeholder="your@email.com" autocomplete="email" inputmode="email">
      <button id="beta-submit-btn" onclick="submitBetaSignup()">⚡ REQUEST PRO BETA ACCESS</button>
      <div id="beta-status"></div>
      <div class="beta-modal-note">
        No credit card. No spam.<br>
        Beta is free -- Pro will be ~$3.99/mo when we launch.
      </div>
    </div>
  </div>
</div>

<!-- MOBILE DETAIL SHEET -->
<div id="mobile-detail-sheet">
  <div id="mobile-detail-header">
    <span>[ MISSION DETAIL ]</span>
    <span id="mobile-detail-close" onclick="closeMobileDetail()">✕</span>
  </div>
  <div id="mobile-detail-timer-bar" class="m-detail-timer" style="display:none;"></div>
  <div id="mobile-detail-body"></div>
</div>

<!-- FEEDBACK BUTTON -->
<button id="feedback-btn" onclick="openFeedbackModal()">⌖ FEEDBACK</button>

<!-- FEEDBACK MODAL -->
<div id="feedback-modal-overlay" onclick="closeFeedbackModal(event)">
  <div id="feedback-modal">
    <div class="fm-title">[ MISSION CONTROL ]</div>
    <div class="fm-sub">CONNECT WITH THE LAUNCHWATCH TEAM</div>
    <a class="fm-option amber" href="https://launchwatch.beehiiv.com/subscribe" target="_blank">
      <span class="fm-icon">⚡</span>
      <span class="fm-label">PRO BETA ACCESS
        <span class="fm-label-sub">JOIN WAITLIST -- LAUNCHING WITH STARSHIP</span>
      </span>
    </a>
    <a class="fm-option" href="https://launchwatchapp.canny.io/launchwatch" target="_blank">
      <span class="fm-icon">💡</span>
      <span class="fm-label">FEATURE REQUEST
        <span class="fm-label-sub">VOTE ON WHAT GETS BUILT NEXT</span>
      </span>
    </a>
    <a class="fm-option" href="https://tally.so/r/NpV5MQ" target="_blank">
      <span class="fm-icon">🐛</span>
      <span class="fm-label">BUG REPORT
        <span class="fm-label-sub">SOMETHING BROKE? LET US KNOW</span>
      </span>
    </a>
    <button class="fm-close" onclick="closeFeedbackModal()">[ CLOSE ]</button>
  </div>
</div>

<script>
function openFeedbackModal() {
  document.getElementById('feedback-modal-overlay').classList.add('open');
}
function closeFeedbackModal(e) {
  if (!e || e.target === document.getElementById('feedback-modal-overlay')) {
    document.getElementById('feedback-modal-overlay').classList.remove('open');
  }
}
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') document.getElementById('feedback-modal-overlay')?.classList.remove('open');
});

// ============================================================
// LaunchWatch v2.19 -- TRAJECTORY CONE RENDERER
// ============================================================
// NOTE: trajectoryLayer and recoveryZoneLayer are initialized lazily
// inside startTrajectoryTracking() after map exists -- NOT at parse time.
let trajectoryLayer = null;
let recoveryZoneLayer = null;

// ── Patch HH (v2.44, 2026-04-26) -- SVG renderer for NOTMAR polygons ─────────
// ── NOTMAR Canvas Animation System (v2.62) ───────────────────────────────────
// map uses preferCanvas:true -- all layers default to Canvas, zero zoom snap.
// CSS keyframes don't work on Canvas layers (no per-path DOM element).
// Pulse/breath driven by rAF loop calling layer.setStyle() each frame.
// Replaces _ensureNotmarSvgRenderer (SVG forced for CSS) + _attachNotmarZoomListeners (dead).
const _NOTMAR_ANIM_PARAMS = {
  base:    { oPeriod:  4.0, oMin: 0.72, oRange: 0.28, fPeriod:  5.0, fMin: 0.012, fRange: 0.073 },
  focused: { oPeriod:  1.5, oMin: 0.78, oRange: 0.22, fPeriod:  2.0, fMin: 0.05,  fRange: 0.150 },
  ambient: { oPeriod:  6.0, oMin: 0.42, oRange: 0.30, fPeriod:  7.0, fMin: 0.008, fRange: 0.032 },
};
let _notmarAnimAmbient = [];
let _notmarAnimFocused = [];
let _notmarAnimRafId   = null;

function _notmarAnimTick() {
  const all = _notmarAnimAmbient.concat(_notmarAnimFocused);
  if (!all.length) { _notmarAnimRafId = null; return; }
  const t = Date.now() / 1000;
  for (const e of all) {
    const p = e.params;
    const opacity     = p.oMin + p.oRange * (0.5 - 0.5 * Math.cos(2 * Math.PI * (t + e.oPhase) / p.oPeriod));
    const fillOpacity = p.fMin + p.fRange * (0.5 - 0.5 * Math.cos(2 * Math.PI * (t + e.fPhase) / p.fPeriod));
    try { e.layer.setStyle({ opacity, fillOpacity }); } catch (_) {}
  }
  _notmarAnimRafId = requestAnimationFrame(_notmarAnimTick);
}
function _notmarAnimStart() {
  if (!_notmarAnimRafId) _notmarAnimRafId = requestAnimationFrame(_notmarAnimTick);
}
function _notmarPhase(zoneIdx, siteClass) {
  const ZO = [0.0, 0.8, 1.6, 2.4], ZF = [0.0, 1.2, 2.4, 3.6];
  const SO = { ksc: 0.0, vafb: 1.0, wff: 2.0, bc: 3.0 };
  const SF = { ksc: 0.0, vafb: 1.5, wff: 3.0, bc: 4.5 };
  const s  = (siteClass || '').replace('notmar-site-', '') || 'ksc';
  return { oPhase: (ZO[zoneIdx % 4] || 0) + (SO[s] || 0),
           fPhase: (ZF[zoneIdx % 4] || 0) + (SF[s] || 0) };
}
function _ensureConeLayers() {
  if (!map) return false;
  if (!trajectoryLayer)   { trajectoryLayer   = L.layerGroup().addTo(map); }
  if (!recoveryZoneLayer) { recoveryZoneLayer  = L.layerGroup().addTo(map); }
  return true;
}
const PHASE_STYLES_CONE = {
  UNDEPLOYED: { color: '#4a6fa5', weight: 1, opacity: 0.4, dashArray: '6,8' },
  TRANSIT:    { color: '#4a9fd4', weight: 1, opacity: 0.5, dashArray: '6,6' },
  APPROACH:   { color: '#f0a500', weight: 2, opacity: 0.7, dashArray: '4,4' },
  ON_STATION: { color: '#00e5ff', weight: 2.5, opacity: 0.9, dashArray: null },
  AIS_DARK:   { color: '#ff6b35', weight: 2, opacity: 0.8, dashArray: '2,4' },
};
const CONF_COLORS = { HIGH:'#00e5ff', MEDIUM:'#f0a500', LOW:'#4a6fa5', INSUFFICIENT:'#555' };
function _td2(lat,lon,brng,d){var R=6371,dist=d/R,b=brng*Math.PI/180,la1=lat*Math.PI/180,lo1=lon*Math.PI/180,la2=Math.asin(Math.sin(la1)*Math.cos(dist)+Math.cos(la1)*Math.sin(dist)*Math.cos(b)),lo2=lo1+Math.atan2(Math.sin(b)*Math.sin(dist)*Math.cos(la1),Math.cos(dist)-Math.sin(la1)*Math.sin(la2));return[la2*180/Math.PI,lo2*180/Math.PI];}
function _arc2(lat,lon,bearing,half,dist,steps){steps=steps||40;half=half||7;var pts=[];for(var i=0;i<=steps;i++)pts.push(_td2(lat,lon,(bearing-half)+(half*2)*(i/steps),dist));return pts;}

function drawTrajectoryCone(prediction, padLat, padLon) {
  if (!_ensureConeLayers()) return;
  trajectoryLayer.clearLayers();
  recoveryZoneLayer.clearLayers();
  if (!prediction||!padLat||!padLon) return;
  var phase=prediction.vessel_phase||'UNDEPLOYED';
  var style=PHASE_STYLES_CONE[phase]||PHASE_STYLES_CONE.UNDEPLOYED;
  var confColor=CONF_COLORS[prediction.confidence_tier]||'#555';
  var bearing=prediction.predicted_bearing_deg;
  var uncertainty=prediction.bearing_uncertainty_deg||7;
  var dist=prediction.dist_km||700;
  if(prediction.recovery_zone_lat&&prediction.recovery_zone_lon){
    var zr=(prediction.recovery_zone_radius_km||80)*1000;
    L.circle([prediction.recovery_zone_lat,prediction.recovery_zone_lon],
      {radius:zr,color:confColor,fillColor:confColor,fillOpacity:0.06,weight:1,opacity:0.5,dashArray:'4,6'})
      .addTo(recoveryZoneLayer)
      .bindPopup('<div class="popup-title">Recovery Zone</div><div class="popup-row"><span class="popup-label">DIST</span><span class="popup-val">~'+dist+'km</span></div>');
    L.circleMarker([prediction.recovery_zone_lat,prediction.recovery_zone_lon],
      {radius:4,color:confColor,fillColor:confColor,fillOpacity:0.6,weight:1}).addTo(recoveryZoneLayer);
  }
  // ─ Patch W (v2.43, 2026-04-26) -- FAIRING-axis render ────────────────────
  // trajectory-engine v3.3 (Patch FF) emits a SECOND axis on the same
  // prediction row for Falcon Heavy: fairing_zone_lat/lon/radius_km +
  // fairing_bearing_deg + fairing_phase + fairing_prediction_source.
  // Phase-colored dashed ring + pad->zone bearing line + "FAIRING xxx°"
  // label anchored at the line endpoint so it scales with zoom.
  if (prediction.fairing_zone_lat != null && prediction.fairing_zone_lon != null) {
    var fPhase = prediction.fairing_phase || 'UNDEPLOYED';
    var fStyle = PHASE_STYLES_CONE[fPhase] || PHASE_STYLES_CONE.UNDEPLOYED;
    var fr = (prediction.fairing_zone_radius_km || 150) * 1000;
    var fBearing = prediction.fairing_bearing_deg;
    var fDist = prediction.fairing_dist_km || 1500;
    L.circle([prediction.fairing_zone_lat, prediction.fairing_zone_lon], {
      radius: fr, color: fStyle.color, fillColor: fStyle.color,
      fillOpacity: fPhase === 'ON_STATION' ? 0.10 : 0.04,
      weight: fStyle.weight + 0.5, opacity: fStyle.opacity, dashArray: '6,10'
    }).addTo(recoveryZoneLayer).bindPopup(
      '<div class="popup-title">Fairing Recovery Zone</div>'
      + '<div class="popup-row"><span class="popup-label">VESSEL</span><span class="popup-val">' + (prediction.fairing_vessel || '?') + '</span></div>'
      + '<div class="popup-row"><span class="popup-label">PHASE</span><span class="popup-val">' + fPhase + '</span></div>'
      + '<div class="popup-row"><span class="popup-label">DIST</span><span class="popup-val">~' + Math.round(fDist) + 'km @ ' + Math.round(fBearing||0) + '°</span></div>'
      + '<div class="popup-row"><span class="popup-label">SOURCE</span><span class="popup-val">' + (prediction.fairing_prediction_source||'?') + '</span></div>'
    );
    L.circleMarker([prediction.fairing_zone_lat, prediction.fairing_zone_lon], {
      radius: 5, color: fStyle.color, fillColor: fStyle.color, fillOpacity: 0.7, weight: 1.5
    }).addTo(recoveryZoneLayer);
    if (fBearing != null && Number.isFinite(fBearing)) {
      var fTip = _td2(padLat, padLon, fBearing, fDist * 0.92);
      L.polyline([[padLat, padLon], fTip], {
        color: fStyle.color, weight: fStyle.weight, opacity: fStyle.opacity * 0.7, dashArray: '4,8'
      }).addTo(trajectoryLayer);
      // Patch W (v2.47) -- FAIRING label anchored AT the line endpoint (fTip)
      // with a left-side iconAnchor so the label sits to the right of the
      // line tip. Scales correctly with zoom because it's pinned at fTip
      // which is itself a lat/lng (moves with the map).
      L.marker(fTip, {
        icon: L.divIcon({
          className: '',
          // Patch W (v2.48) -- iconSize: null lets the inner div size to its
          // natural text width. Default L.divIcon constrains to 12x12 so the
          // "FAIRING xxx°" text overflowed the bordered box, looking broken.
          // bgPos: null + className: '' suppresses Leaflet's default sprite.
          html: '<div style="background:rgba(0,0,0,0.75);border:1px solid '+fStyle.color+';color:'+fStyle.color+';font-family:Share Tech Mono,monospace;font-size:10px;padding:2px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;">FAIRING '+Math.round(fBearing)+'°</div>',
          iconSize: null,
          iconAnchor: [-6, 8]
        }), interactive: false
      }).addTo(trajectoryLayer);
    }
  }
  if(prediction.orbit_bearing_deg&&phase!=='UNDEPLOYED'){
    L.polyline([[padLat,padLon],_td2(padLat,padLon,prediction.orbit_bearing_deg,dist)],
      {color:'#4a6fa5',weight:1,opacity:0.3,dashArray:'3,8'}).addTo(trajectoryLayer);
  }
  // Patch W (v2.43) -- guard the cone polygon + fan + tip on a finite bearing.
  // For Falcon Heavy the booster axis is RTLS-only and `predicted_bearing_deg`
  // is null; the fairing axis above already drew its own cone, so skipping
  // the booster cone for FH is correct.
  if (bearing != null && Number.isFinite(bearing)) {
  var arcPts=_arc2(padLat,padLon,bearing,uncertainty,dist);
  L.polygon([[padLat,padLon]].concat(arcPts).concat([[padLat,padLon]]),
    {color:style.color,fillColor:style.color,fillOpacity:phase==='ON_STATION'?0.08:0.05,weight:0}).addTo(trajectoryLayer);
  [bearing-uncertainty,bearing+uncertainty].forEach(function(b){
    L.polyline([[padLat,padLon],_td2(padLat,padLon,b,dist)],
      {color:style.color,weight:style.weight,opacity:style.opacity*0.6,dashArray:'3,6'}).addTo(trajectoryLayer);
  });
  var tip=_td2(padLat,padLon,bearing,dist*0.92);
  L.polyline([[padLat,padLon],tip],{color:style.color,weight:style.weight+0.5,opacity:style.opacity,dashArray:style.dashArray}).addTo(trajectoryLayer);
  var ab=_td2(padLat,padLon,bearing,dist*0.87),al=_td2(padLat,padLon,bearing-3,dist*0.90),ar=_td2(padLat,padLon,bearing+3,dist*0.90);
  L.polygon([tip,al,ab,ar],{color:style.color,fillColor:style.color,fillOpacity:0.9,weight:0}).addTo(trajectoryLayer);
  // Patch W (v2.47) -- booster label now reads "BOOSTER xxx°" for symmetry
  // with the FAIRING label, anchored at line tip so it scales with zoom.
  L.marker(tip,{icon:L.divIcon({className:'',
    // Patch W (v2.48) -- iconSize: null fixes the constrained-width box.
    html:'<div style="background:rgba(0,0,0,0.75);border:1px solid '+style.color+';color:'+style.color+';font-family:Share Tech Mono,monospace;font-size:10px;padding:2px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;">BOOSTER '+Math.round(bearing)+'°</div>',
    iconSize:null,
    iconAnchor:[-6,8]}),interactive:false}).addTo(trajectoryLayer);
  }
}
async function fetchAndRenderTrajectory(launchId,padLat,padLon,launch){
  try{
    var resp=await fetch('/.netlify/functions/trajectory-engine?launch='+encodeURIComponent(launchId));
    if(!resp.ok)return;
    var data=await resp.json();
    var pred=(data.predictions&&data.predictions[0])||data.prediction;
    if(!pred){
      // v2.27 Patch Q (2026-04-24) -- trajectory/recovery layers may be null
      // on first-select. Match the safe pattern in stopTrajectoryTracking().
      try{if(trajectoryLayer)trajectoryLayer.clearLayers();}catch(e){}
      try{if(recoveryZoneLayer)recoveryZoneLayer.clearLayers();}catch(e){}
      // v3.2 traj-polish -- clear stale cache when backend returns no prediction
      try{ if(window._backendPrediction && launchId) delete window._backendPrediction[launchId]; }catch(e){}
      return;
    }
    // v3.2 traj-polish -- cache backend prediction for getLaunchAzimuth (Priority -1).
    // System B fetch --> System A cache wiring; previously these two trajectory
    // render paths computed off different data with the orbit-model fan dominating.
    try {
      window._backendPrediction = window._backendPrediction || {};
      window._backendPrediction[launchId] = Object.assign({}, pred, { _fetchedAt: Date.now() });
    } catch(e) { console.warn('[LaunchWatch] backend prediction cache write failed:', e.message); }
    drawTrajectoryCone(pred,parseFloat(padLat),parseFloat(padLon));
    // v3.4 traj-polish -- close the race: drawLaunchArc fires synchronously from
    // selectLaunch click, often before this fetch completes. With cache now
    // populated, redraw the arc so getLaunchAzimuth's Priority -1 branch fires
    // and DR ghost / AIS LOCKED visuals match the backend data. Only redraws
    // when the launch is still selected to avoid stomping on a different
    // user selection.
    try {
      if (typeof selectedLaunch !== 'undefined' && selectedLaunch &&
          selectedLaunch.id === launchId &&
          typeof drawLaunchArc === 'function') {
        drawLaunchArc(launch);
      }
    } catch(e) { console.warn('[LaunchWatch] arc redraw post-cache failed:', e.message); }
    log('TRAJ CONE: '+Math.round(pred.predicted_bearing_deg)+'deg '+(pred.confidence_tier||'')+' ['+(pred.vessel_phase||'UNDEPLOYED')+']','alert');
  }catch(e){console.warn('[LaunchWatch] cone fetch failed:',e);}
}
var trajectoryRefreshInterval=null;
function startTrajectoryTracking(launchId,padLat,padLon,launch){
  stopTrajectoryTracking();
  if(!launchId||!padLat||!padLon)return;
  fetchAndRenderTrajectory(launchId,padLat,padLon,launch);
  trajectoryRefreshInterval=setInterval(function(){fetchAndRenderTrajectory(launchId,padLat,padLon,launch);},5*60*1000);
}
function stopTrajectoryTracking(){
  if(typeof trajectoryRefreshInterval!=='undefined'&&trajectoryRefreshInterval){clearInterval(trajectoryRefreshInterval);trajectoryRefreshInterval=null;}
  try{if(trajectoryLayer)trajectoryLayer.clearLayers();}catch(e){}
  try{if(recoveryZoneLayer)recoveryZoneLayer.clearLayers();}catch(e){}
}

// ── SCRUB POLLING (Patch LL -- scrub-banner Phase 3) ─────────────────────────
// Polls patchLaunchesFromSupabase every 30s while the selected launch is
// inside T-12h to T+1h, so a status change or NET slip propagates to the
// SCRUB BANNER without a page reload. Mirrors startTrajectoryTracking
// lifecycle. Idempotent -- calling startScrubPolling clears the prior timer.
var _scrubPollInterval = null;
const _SCRUB_POLL_MS = 30000;
const _SCRUB_POLL_WINDOW_BEFORE_HRS = 12;
const _SCRUB_POLL_WINDOW_AFTER_HRS  = 1;

function _scrubPollEligible(launch) {
  if (!launch || !launch.window_start) return false;
  try {
    const hrsUntil = (new Date(launch.window_start) - Date.now()) / 3600000;
    return hrsUntil <= _SCRUB_POLL_WINDOW_BEFORE_HRS && hrsUntil >= -_SCRUB_POLL_WINDOW_AFTER_HRS;
  } catch (e) { return false; }
}

// v2.53 -- narrow scrub-fields-only refresh. Skips the patched++/drawLaunchArc
// path of patchLaunchesFromSupabase. Returns true if any scrub field changed.
async function _refreshScrubFieldsOnly(launch) {
  if (!launch) return false;
  try {
    const res = await fetch('/.netlify/functions/get-launch-data');
    if (!res.ok) return false;
    const rows = await res.json();
    if (!Array.isArray(rows)) return false;
    const name = (launch.mission && launch.mission.name) || launch.name || '';
    const slug = name
      .replace(/^falcon\s+9\s+(block\s+5\s+)?\|\s*/i, '')
      .replace(/^falcon\s+9\s+[•·]\s*/i, '')
      .replace(/^falcon\s+heavy\s+(\|\s*|[•·]\s*)/i, '')
      .replace(/\s+group\s+/i, ' ')
      .replace(/\s*\(([^)]+)\)\s*$/, ' $1')
      .trim()
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').substring(0, 80);
    const row = rows.find(r => r.id === launch.id) || rows.find(r => r.id === slug);
    if (!row) return false;

    let changed = false;
    function setIf(key) {
      if (row[key] != null && row[key] !== launch[key]) {
        launch[key] = row[key];
        changed = true;
      }
    }
    setIf('status');
    setIf('status_name');
    setIf('window_start');
    setIf('hold_reason');
    setIf('fail_reason');
    setIf('updated_at');
    setIf('previous_net');
    setIf('previous_status');
    setIf('status_changed_at');
    return changed;
  } catch (e) {
    console.warn('_refreshScrubFieldsOnly:', e && e.message);
    return false;
  }
}

function startScrubPolling(launch) {
  stopScrubPolling();
  if (!_scrubPollEligible(launch)) return;
  console.log('[Scrub] poll start ' + launch.id + ' (T-' + Math.round((new Date(launch.window_start) - Date.now())/60000) + 'min)');
  _scrubPollInterval = setInterval(async function() {
    try {
      if (!selectedLaunch || !_scrubPollEligible(selectedLaunch)) {
        stopScrubPolling();
        return;
      }
      const before = {
        status:       selectedLaunch.status,
        window_start: selectedLaunch.window_start,
      };
      // v2.53 hotfix: was patchLaunchesFromSupabase but that triggers
      // drawLaunchArc on every tick (patched++ counts row matches not diffs).
      // Replaced with narrow scrub-fields-only refresh that has no map redraw
      // side effect.
      await _refreshScrubFieldsOnly(selectedLaunch);
      const after = {
        status:       selectedLaunch.status,
        window_start: selectedLaunch.window_start,
      };
      const statusChanged = before.status !== after.status;
      const netSlipped    = before.window_start !== after.window_start;
      if (statusChanged || netSlipped) {
        console.log('[Scrub] state change detected', { before, after });
        if (typeof renderScrubBanner === 'function') {
          try { renderScrubBanner(selectedLaunch); } catch (e) { console.warn('renderScrubBanner failed', e); }
        }
        if (statusChanged && typeof log === 'function') {
          log('STATUS CHANGE: ' + (before.status || '?') + ' -> ' + (after.status || '?'), 'warn');
        }
      } else {
        // No state change -- refresh the freshness chip so it ticks live.
        if (typeof renderScrubBanner === 'function') {
          try { renderScrubBanner(selectedLaunch); } catch (e) {}
        }
      }
    } catch (e) {
      console.warn('[Scrub] poll error:', e && e.message);
    }
  }, _SCRUB_POLL_MS);
}

function stopScrubPolling() {
  if (_scrubPollInterval) { clearInterval(_scrubPollInterval); _scrubPollInterval = null; }
}



// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  LaunchWatch -- STARLINK SATELLITE TRACKER                               ║
// ║  Celestrak TLEs + satellite.js SGP4 propagation                        ║
// ║  Hard cap: 800km from observer -- performance-safe on mobile             ║
// ╚══════════════════════════════════════════════════════════════════════════╝

const STARLINK_VIS_RADIUS_KM = 800;  // hard cap -- sats beyond never render
const STARLINK_TLE_CACHE_KEY = 'lw_starlink_tles';
const STARLINK_TLE_CACHE_TTL = 3600000; // 1 hour in ms
const STARLINK_UPDATE_INTERVAL = 10000; // propagate every 10s

let _starlinkEnabled   = false;
let _starlinkTLEs      = [];        // parsed TLE records [{name, line1, line2, satrec, launchDate}]
let _starlinkDots      = {};        // vessel_name → L.circleMarker
let _starlinkTimer     = null;
let _starlinkLoaded    = false;
let _starlinkLayerGroup = null;

// ── TLE FETCH ─────────────────────────────────────────────────────────────────
async function fetchStarlinkTLEs() {
  // Check cache first -- warm cache works fine, cold cache needs the Netlify function
  try {
    const cached = JSON.parse(localStorage.getItem(STARLINK_TLE_CACHE_KEY) || '{}');
    if (cached.ts && (Date.now() - cached.ts) < STARLINK_TLE_CACHE_TTL && cached.raw) {
      const tles = parseTLEs(cached.raw);
      if (tles.length > 100) {
        console.log(`[Starlink] Cache hit: ${tles.length} sats`);
        return tles;
      }
    }
  } catch(e) {}

  // Fetch via Netlify function -- server-side proxy avoids mobile CORS/security blocks
  // Direct Celestrak fetches from browser get blocked on mobile (query string policy)
  // Netlify function must have timeout = 26 set in netlify.toml
  console.log('[Starlink] Fetching TLEs via Netlify proxy...');
  try {
    // Use AbortController instead of AbortSignal.timeout() -- better Android Chrome compat
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 25000);
    const res = await fetch('/.netlify/functions/get-starlink-tles', {
      signal: controller.signal,
    });
    clearTimeout(timeoutId);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const text = await res.text();
    // Wait for satellite.js to be ready before parsing -- Android Chrome loads it slower
    let waitMs = 0;
    while (typeof satellite === 'undefined' && waitMs < 8000) {
      await new Promise(r => setTimeout(r, 200));
      waitMs += 200;
    }
    const tles = parseTLEs(text);
    if (tles.length < 100) throw new Error(`Only ${tles.length} TLEs returned`);
    console.log(`[Starlink] Loaded ${tles.length} TLEs from proxy`);
    try { localStorage.setItem(STARLINK_TLE_CACHE_KEY, JSON.stringify({ ts: Date.now(), raw: text })); } catch(e) {}
    return tles;
  } catch(e) {
    console.error('[Starlink] Proxy fetch failed:', e.message);
    // Last resort: stale cache beats nothing
    try {
      const cached = JSON.parse(localStorage.getItem(STARLINK_TLE_CACHE_KEY) || '{}');
      if (cached.raw) {
        console.warn('[Starlink] Using stale cache');
        return parseTLEs(cached.raw);
      }
    } catch(e2) {}
    return [];
  }
}

// ── TLE PARSER ────────────────────────────────────────────────────────────────
function parseTLEs(text) {
  // Guard -- satellite.js CDN may still be loading on slow mobile connections
  // Return empty but caller must handle this -- use waitAndParseTLEs for async context
  if (typeof satellite === 'undefined' || typeof satellite.twoline2satrec !== 'function') {
    console.warn('[parseTLEs] satellite.js not loaded yet');
    return [];
  }
  const lines = text.replace(/\r/g, '').split('\n').map(l => l.trim()).filter(Boolean);
  const tles = [];
  for (let i = 0; i + 2 < lines.length; i++) {
    const name  = lines[i];
    const line1 = lines[i+1];
    const line2 = lines[i+2];
    if (!line1.startsWith('1 ') || !line2.startsWith('2 ')) continue;
    try {
      const satrec = satellite.twoline2satrec(line1, line2);
      if (!satrec) { i += 2; continue; }
      // Extract launch year from NORAD ID epoch for freshness detection
      const epochYear = parseInt(line1.substring(18, 20));
      const fullYear = epochYear > 57 ? 1900 + epochYear : 2000 + epochYear;
      const noradId = parseInt(line1.substring(2, 7).trim());
      // Parse full epochMs from TLE epoch field (YYDDD.DDDDDDDD)
      const epochStr = line1.substring(18, 32).trim();
      const epochDoy = parseFloat(epochStr.substring(2));
      const epochMs  = Date.UTC(fullYear, 0, 1) + (epochDoy - 1) * 86400000;
      tles.push({ name: name.replace('STARLINK-', 'SL-'), line1, line2, satrec, epochYear: fullYear, noradId, epochMs });
      i += 2;
    } catch(e) { i += 2; }
  }
  return tles;
}

// ── PROPAGATE ONE SAT ─────────────────────────────────────────────────────────
function propagateSat(satrec, date) {
  try {
    const posVel = satellite.propagate(satrec, date);
    if (!posVel.position || posVel.position === true) return null;
    const gmst = satellite.gstime(date);
    const geo  = satellite.eciToGeodetic(posVel.position, gmst);
    return {
      lat: satellite.degreesLat(geo.latitude),
      lon: satellite.degreesLong(geo.longitude),
      alt: geo.height, // km
    };
  } catch(e) { return null; }
}

// ── ELEVATION CALC ───────────────────────────────────────────────────────────
function calcElevationAngle(obsLat, obsLon, satLat, satLon, satAltKm) {
  const R = 6371;
  const obsLatR = obsLat * Math.PI / 180;
  const obsLonR = obsLon * Math.PI / 180;
  const satLatR = satLat * Math.PI / 180;
  const satLonR = satLon * Math.PI / 180;

  // Observer position vector (on Earth surface)
  const ox = Math.cos(obsLatR) * Math.cos(obsLonR);
  const oy = Math.cos(obsLatR) * Math.sin(obsLonR);
  const oz = Math.sin(obsLatR);

  // Satellite position vector
  const sr = R + satAltKm;
  const sx = Math.cos(satLatR) * Math.cos(satLonR) * sr / R;
  const sy = Math.cos(satLatR) * Math.sin(satLonR) * sr / R;
  const sz = Math.sin(satLatR) * sr / R;

  // Range vector
  const rx = sx - ox, ry = sy - oy, rz = sz - oz;
  const rMag = Math.sqrt(rx*rx + ry*ry + rz*rz);

  // Dot with observer normal (elevation angle)
  const dot = (rx*ox + ry*oy + rz*oz) / rMag;
  return Math.asin(dot) * 180 / Math.PI;
}

// ── RENDER DOTS ───────────────────────────────────────────────────────────────
function renderStarlinkDots() {
  if (!_starlinkEnabled || !_starlinkLayerGroup) return;

  const now    = new Date();
  const obsLat = OBSERVER?.lat || 28.54;
  const obsLon = OBSERVER?.lng || -80.65;
  const isPro  = PRO_UNLOCKED === true;

  // FREE: 20 cyan dots in vis radius only -- no gold, no trails, no global layer
  // PRO:  all cyan dots + trails + gold train globally + pass list + tooltips
  const FREE_SAT_LIMIT = 20;
  const FRESH_MS       = 7 * 24 * 60 * 60 * 1000; // 7 days -- covers full train dispersal
  const freshCutoff    = now.getTime() - FRESH_MS;

  const visible  = []; // sats inside vis radius (cyan)
  const allFresh = []; // fresh sats globally (gold train) -- PRO only

  for (const tle of _starlinkTLEs) {
    const pos = propagateSat(tle.satrec, now);
    if (!pos) continue;

    // NORAD strategy: fresh = in the set built from recent Starlink launches
    // epochMs approach is BROKEN -- Celestrak refreshes ALL epochs every 2hrs
    const isFresh = window._starlinkFreshNoradIds
      ? window._starlinkFreshNoradIds.has(tle.noradId)
      : false;

    // ── GLOBAL GOLD TRAIN: PRO only ───────────────────────────────────────────
    if (isFresh && isPro) {
      allFresh.push({ ...pos, name: tle.name, isFresh: true, distKm: 0, elev: 0, global: true });
    }

    // ── LOCAL CYAN LAYER: vis radius ──────────────────────────────────────────
    const distKm = haversineKm(obsLat, obsLon, pos.lat, pos.lon);
    if (distKm > STARLINK_VIS_RADIUS_KM) continue;

    const elev = calcElevationAngle(obsLat, obsLon, pos.lat, pos.lon, pos.alt);
    if (elev < 0) continue;

    visible.push({ ...pos, distKm, elev, name: tle.name, isFresh, global: false });
  }

  // FREE: cap at 20 closest -- PRO: all of them
  const visibleCapped = isPro
    ? visible
    : [...visible].sort((a, b) => a.distKm - b.distKm).slice(0, FREE_SAT_LIMIT);

  // Merge local + global fresh (PRO only adds global)
  const visibleNames = new Set(visibleCapped.map(s => s.name));
  const combined = [
    ...visibleCapped,
    ...allFresh.filter(s => !visibleNames.has(s.name)),
  ];
  const allNames = new Set(combined.map(s => s.name));

  // Remove stale dots
  for (const [name, dot] of Object.entries(_starlinkDots)) {
    if (!allNames.has(name)) {
      _starlinkLayerGroup.removeLayer(dot);
      delete _starlinkDots[name];
    }
  }

  // Add/update dots
  for (const sat of combined) {
    let color, opacity, radius;

    if (sat.isFresh) {
      // Gold everywhere -- fresh deployment train
      color   = '#FFD700';
      opacity = sat.global ? 0.75 : 1.0; // slightly dimmer outside vis radius
      radius  = sat.global ? 3.5 : 5;    // slightly smaller outside vis radius
    } else {
      // Cyan -- established sat inside vis radius only
      color   = sat.elev > 30 ? '#00BFFF' : '#0088AA';
      opacity = sat.elev < 5 ? 0.3 : sat.distKm > 600 ? 0.5 : 0.85;
      radius  = 2.5;
    }

    // Tooltips: PRO gets full data, FREE gets upgrade nudge
    let tooltip;
    if (sat.isFresh && sat.global) {
      tooltip = `${sat.name} · FRESH DEPLOY 🌟 · PRO`;
    } else if (isPro) {
      tooltip = `${sat.name} · ${Math.round(sat.distKm)}km · ${Math.round(sat.elev)}° elev${sat.isFresh ? ' 🌟' : ''}`;
    } else {
      tooltip = `${sat.name} · PRO -- upgrade for full tracking`;
    }

    if (_starlinkDots[sat.name]) {
      _starlinkDots[sat.name].setLatLng([sat.lat, sat.lon]);
      _starlinkDots[sat.name].setStyle({ color, fillColor: color, opacity, fillOpacity: opacity, radius });
    } else {
      const dot = L.circleMarker([sat.lat, sat.lon], {
        radius, color, fillColor: color,
        opacity, fillOpacity: opacity,
        weight: sat.isFresh ? 1.5 : 1,
        interactive: true,
      }).bindTooltip(tooltip, { className: 'starlink-tooltip', sticky: true });
      _starlinkLayerGroup.addLayer(dot);
      _starlinkDots[sat.name] = dot;
    }
  }

  // ── DRAW TRAILS ───────────────────────────────────────────────────────────
  // FREE:  cyan trails inside 800km ring only
  // PRO:   cyan trails inside ring + GOLD trails globally for fresh sats
  //
  // Trail config
  const TRAIL_STEPS      = 10;   // number of back-propagation steps
  const TRAIL_STEP_MS    = 45000; // 45s per step = ~7.5 min trail
  // Gold global trail is longer/brighter -- the money shot
  const GOLD_TRAIL_STEPS = 14;
  const GOLD_TRAIL_STEP_MS = 60000; // 1min per step = ~14 min gold trail
  const GOLD_TRAIL_WEIGHT  = 1.5;
  const GOLD_TRAIL_OPACITY = 0.28; // toned down -- subtle but visible
  const CYAN_TRAIL_WEIGHT  = 1.0;
  const CYAN_TRAIL_OPACITY = 0.12;

  if (!window._starlinkTrails) window._starlinkTrails = {};

  // Build set of all names that should have trails this frame
  const trailNamesExpected = new Set();
  if (isPro) {
    // Cyan trails -- local vis radius sats
    visibleCapped.forEach(s => trailNamesExpected.add(s.name));
    // Gold trails -- ALL fresh sats globally (the killer feature)
    allFresh.forEach(s => trailNamesExpected.add('gold_' + s.name));
  } else {
    // FREE: only cyan trails inside vis radius
    visibleCapped.forEach(s => trailNamesExpected.add(s.name));
  }

  // Remove stale trails
  for (const [key, trail] of Object.entries(window._starlinkTrails)) {
    if (!trailNamesExpected.has(key)) {
      if (trail._layers) {
        trail._layers.forEach(l => { try { _starlinkLayerGroup.removeLayer(l); } catch(e) {} });
      } else {
        try { _starlinkLayerGroup.removeLayer(trail); } catch(e) {}
      }
      delete window._starlinkTrails[key];
    }
  }

  // ── CYAN TRAILS -- inside vis radius ───────────────────────────────────────
  const cyanTrailSats = isPro ? visibleCapped : visibleCapped.filter(s => !s.global);
  for (const sat of cyanTrailSats) {
    const tle = _starlinkTLEs.find(t => t.name === sat.name);
    if (!tle) continue;
    const trailPts = [];
    const now2 = new Date();
    for (let step = 0; step <= TRAIL_STEPS; step++) {
      const tp = new Date(now2.getTime() - step * TRAIL_STEP_MS);
      const pos2 = propagateSat(tle.satrec, tp);
      if (!pos2) continue;
      const d = haversineKm(obsLat, obsLon, pos2.lat, pos2.lon);
      if (d > STARLINK_VIS_RADIUS_KM * 1.15) { if (step === 0) continue; break; }
      trailPts.push([pos2.lat, pos2.lon]);
    }
    if (trailPts.length < 2) continue;
    const trailColor = sat.isFresh ? '#FFD700' : '#00BFFF';
    const trailOpacity = sat.isFresh ? 0.35 : CYAN_TRAIL_OPACITY;
    const key = sat.name;
    if (window._starlinkTrails[key]) {
      window._starlinkTrails[key].setLatLngs(trailPts);
    } else {
      const trail = L.polyline(trailPts, {
        color: trailColor, weight: CYAN_TRAIL_WEIGHT,
        opacity: trailOpacity, interactive: false,
        lineCap: 'round', lineJoin: 'round',
      });
      _starlinkLayerGroup.addLayer(trail);
      window._starlinkTrails[key] = trail;
    }
  }

  // ── GOLD TRAILS -- GLOBAL (PRO ONLY) ───────────────────────────────────────
  // These are the money shot -- fresh sat trails extending across the whole globe
  // Each sat gets a longer, brighter trail so the train is visually stunning
  if (isPro) {
    for (const sat of allFresh) {
      const tle = _starlinkTLEs.find(t => t.name === sat.name);
      if (!tle) continue;
      const trailPts = [];
      const now2 = new Date();
      for (let step = 0; step <= GOLD_TRAIL_STEPS; step++) {
        const tp = new Date(now2.getTime() - step * GOLD_TRAIL_STEP_MS);
        const pos2 = propagateSat(tle.satrec, tp);
        if (!pos2) continue;
        trailPts.push([pos2.lat, pos2.lon]);
      }
      if (trailPts.length < 2) continue;

      // Fade: tail dim, head bright -- gradient effect via opacity on weight
      // Split trail at antimeridian -- prevents horizontal lines across the map
      // when sat crosses ±180° longitude boundary
      function splitAtAntimeridian(pts) {
        const segments = [];
        let current = [];
        for (let i = 0; i < pts.length; i++) {
          current.push(pts[i]);
          if (i < pts.length - 1) {
            const lonDiff = Math.abs(pts[i][1] - pts[i+1][1]);
            if (lonDiff > 180) {
              // Antimeridian crossing -- start a new segment
              segments.push(current);
              current = [];
            }
          }
        }
        if (current.length > 1) segments.push(current);
        return segments;
      }

      const segments = splitAtAntimeridian(trailPts);
      const key = 'gold_' + sat.name;

      if (window._starlinkTrails[key]) {
        // Update: remove old layers, redraw
        const old = window._starlinkTrails[key];
        if (old._layers) old._layers.forEach(l => { try { _starlinkLayerGroup.removeLayer(l); } catch(e) {} });
        delete window._starlinkTrails[key];
      }

      const addedLayers = [];
      for (const seg of segments) {
        if (seg.length < 2) continue;
        // Outer glow
        const glowTrail = L.polyline(seg, {
          color: '#FFD700', weight: GOLD_TRAIL_WEIGHT + 2,
          opacity: GOLD_TRAIL_OPACITY * 0.25,
          interactive: false, lineCap: 'round', lineJoin: 'round',
        });
        _starlinkLayerGroup.addLayer(glowTrail);
        addedLayers.push(glowTrail);
        // Core line
        const coreTrail = L.polyline(seg, {
          color: '#FFD700', weight: GOLD_TRAIL_WEIGHT,
          opacity: GOLD_TRAIL_OPACITY,
          interactive: false, lineCap: 'round', lineJoin: 'round',
        });
        _starlinkLayerGroup.addLayer(coreTrail);
        addedLayers.push(coreTrail);
      }
      window._starlinkTrails[key] = {
        setLatLngs: () => {}, // handled by delete+redraw above
        _layers: addedLayers,
      };
    }
  }

  // Update stats panel
  const statsEl = document.getElementById('sl-stats');
  if (statsEl) {
    const localCount   = visibleCapped.filter(s => !s.global).length;
    const totalInRange = visible.length;
    const freshGlobal  = allFresh.length; // only populated for PRO
    // Count fresh sats in full data for teaser number
    const freshTotal = window._starlinkFreshNoradIds ? window._starlinkFreshNoradIds.size : 0;
    if (isPro) {
      statsEl.textContent = `${localCount} IN RANGE · ${_starlinkTLEs.length} TOTAL` +
        (freshGlobal ? ` · ${freshGlobal} FRESH 🌟` : '');
    } else {
      statsEl.innerHTML =
        `${localCount} OF ${totalInRange} IN RANGE` +
        (freshTotal ? ` · <span style="color:#FFD700">🌟 ${freshTotal} fresh sats -- </span>` +
          `<span style="color:var(--blue);cursor:pointer;text-decoration:underline" onclick="showProModal()">PRO to see train</span>` : '') +
        ` · <span style="color:var(--blue);cursor:pointer" onclick="showProModal()">upgrade</span> for all ${totalInRange}`;
    }
  }

  // Update pass list
  updatePassList(visible);
  // Keep mobile Starlink panel in sync
  if (typeof syncMobileStarlinkPanel === 'function') syncMobileStarlinkPanel();
}

function updatePassList(visible) {
  const el = document.getElementById('sl-pass-list');
  if (!el) return;
  const isPro = PRO_UNLOCKED === true;

  if (!isPro) {
    // FREE: basic count + gold train teaser
    const local = visible.filter(s => !s.global);
    el.innerHTML =
      `<span style="color:var(--blue-dim)">` +
      `${local.length} sats in range · ` +
      `<span style="color:var(--blue);cursor:pointer;text-decoration:underline" onclick="showProModal()">PRO</span>` +
      ` unlocks trails, gold train &amp; pass list` +
      `</span>`;
    return;
  }

  // PRO: full pass list sorted by elevation
  const local = visible.filter(s => !s.global);
  if (!local.length) {
    el.innerHTML = '<span style="color:var(--blue-dim)">No satellites currently overhead</span>';
    return;
  }
  const sorted = [...local].sort((a, b) => b.elev - a.elev).slice(0, 5);
  el.innerHTML = sorted.map(s =>
    `<div class="starlink-pass-row${s.elev > 10 ? ' visible' : ''}">` +
    `${s.name} · ${Math.round(s.elev)}° · ${Math.round(s.distKm)}km` +
    (s.isFresh ? ' 🌟' : '') +
    `</div>`
  ).join('');
}

// ── LAUNCH ↔ TLE INTEGRATION ─────────────────────────────────────────────────

// Is a launch a Starlink mission?
function isStarlinkLaunch(launch) {
  const title = (launch.title || launch.name || launch.mission?.name || '').toLowerCase();
  return title.includes('starlink');
}

// Is a Starlink launch within the 7-day fresh window?
// Two modes: (a) if launch is past, check age. (b) check if TLEs exist for this launch.
function isStarlinkFresh(launch) {
  if (!isStarlinkLaunch(launch)) return false;
  const launchMs = new Date(launch.window_start || launch.net).getTime();
  const age = Date.now() - launchMs;
  const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000;
  // If launched in past 7 days -- definitely fresh
  if (age > 0 && age < SEVEN_DAYS) return true;
  // If TLEs are loaded, check if any TLE epoch matches this launch window
  // This catches launches where LL2 hasn't updated status yet
  if (_starlinkTLEs?.length && typeof getStarlinkTLEsForLaunch === 'function') {
    const matched = getStarlinkTLEsForLaunch(launch);
    if (matched.length > 0) return true;
  }
  return false;
}

// Link TLEs to their launch using TLE epoch matching the launch day
function getStarlinkTLEsForLaunch(launch) {
  if (!_starlinkTLEs?.length) return [];
  const launchMs = new Date(launch.window_start || launch.net).getTime();
  const ageDays  = (Date.now() - launchMs) / 86400000;

  // Only link TLEs for launches within 7 days
  if (ageDays < 0 || ageDays > 7) return [];

  // Strategy: NORAD IDs are assigned sequentially at launch.
  // The highest NORAD IDs in the feed = most recently launched batch(es).
  // For a launch N days ago, the top ~29-60 highest NORAD IDs are its sats.
  // We use launch index within the 7-day window to pick the right group.

  // Sort all TLEs by NORAD ID descending
  const sorted = [..._starlinkTLEs].sort((a, b) => b.noradId - a.noradId);

  // Find other Starlink launches in allLaunches within 7 days that are NEWER than this one
  const newerLaunches = (typeof allLaunches !== 'undefined' ? allLaunches : [])
    .filter(l => isStarlinkLaunch(l))
    .filter(l => {
      const ms = new Date(l.window_start || l.net).getTime();
      return ms > launchMs && ms < Date.now(); // launched after this one, already happened
    });

  // Each newer launch has ~29 sats with higher NORAD IDs
  // Skip those and return the next batch
  const batchSize = 29;
  const skipCount = newerLaunches.length * batchSize;
  const batch = sorted.slice(skipCount, skipCount + batchSize);

  if (batch.length > 0) {
    console.log('[getStarlinkTLEsForLaunch]', launch.title||launch.name,
      '| skip', skipCount, '| batch', batch.length,
      '| NORAD range:', batch[batch.length-1]?.noradId, '-', batch[0]?.noradId);
    return batch;
  }
  return [];
}

// ── MISSION REPLAY ────────────────────────────────────────────────────────────
// One click -- full mission timeline (~25 seconds total):
// 0-2.5s:  Fly to pad + draw arc + NOTMAR
// 2.5-8s:  Fetch + draw vessel trail line
// 8-13s:   Animate vessel along trail (AIS dark = amber dot)
// 13-14s:  Fly back to pad
// 14-23s:  Liftoff rings fire + fade (9.5s)
// 23-25s:  [Starlink only] zoom out → gold train appears globally

// _replayActive/_replayTimers/_replayLayers declared at top of script

function clearMissionReplay() {
  _replayTimers.forEach(t => clearTimeout(t));
  _replayTimers = [];
  _replayLayers.forEach(l => { try { map.removeLayer(l); } catch(e) {} });
  _replayLayers = [];
  // Remove replay train layer
  if (window._replayTrainLayer) {
    try { map.removeLayer(window._replayTrainLayer); } catch(e) {}
    window._replayTrainLayer = null;
  }
  // Clear train highlight (from focusStarlinkTrain)
  window._starlinkTrainLaunchId = null;
  window._starlinkTrainTLENames = null;
  _replayActive = false;
  log('REPLAY: Cleared', 'info');
}

async function playMissionReplay(launchId, encodedName, padLat, padLng) {
  if (_replayActive) clearMissionReplay();
  _replayActive = true;

  const launchName = decodeURIComponent(encodedName).replace('Falcon 9 Block 5 | ', '');
  const history    = loadLaunchHistory ? loadLaunchHistory() : [];
  const launch     = history.find(l => l.id === launchId) || { id: launchId };
  const launchMs   = new Date(launch.window_start || launch.net || 0).getTime();

  log('🎬 REPLAY: ' + launchName, 'alert');

  // ── STEP 1: Fetch all data in parallel ────────────────────────────────────
  const startIso = new Date(launchMs - 48 * 3600000).toISOString();
  const endIso   = new Date(launchMs +  6 * 3600000).toISOString();

  // Determine mission type -- only SpaceX Falcon 9 has drone ship recovery
  const provider = (launch.launch_service_provider?.name || launch.rocket?.configuration?.name || '').toLowerCase();
  const isSpaceX  = provider.includes('spacex') || provider.includes('falcon');
  const isStarlink = typeof isStarlinkLaunch === 'function' && isStarlinkLaunch(launch);

  // Parallel fetch -- vessels only for SpaceX, TLEs only for Starlink
  const fetchPromises = [
    // Vessel trail -- SpaceX only
    isSpaceX
      ? fetch(`/.netlify/functions/get-vessel-history?vessel=JRTI&start=${startIso}&end=${endIso}&limit=200`)
          .then(r => r.json()).catch(() => ({ positions: [] }))
      : Promise.resolve({ positions: [] }),
    isSpaceX
      ? fetch(`/.netlify/functions/get-vessel-history?vessel=BOB&start=${startIso}&end=${endIso}&limit=100`)
          .then(r => r.json()).catch(() => ({ positions: [] }))
      : Promise.resolve({ positions: [] }),
    // TLEs -- Starlink only
    (isStarlink && !_starlinkTLEs?.length)
      ? fetchStarlinkTLEs().then(tles => { _starlinkTLEs = tles; return tles; })
      : Promise.resolve(_starlinkTLEs || []),
  ];

  const [jrtiData, bobData] = await Promise.all(fetchPromises);
  const vesselPositions = jrtiData.positions || [];
  const bobPositions    = bobData.positions   || [];

  log(`REPLAY: ${launch.launch_service_provider?.name || 'Unknown provider'} | SpaceX:${isSpaceX} | Starlink:${isStarlink}`, 'info');
  if (isSpaceX) log(`REPLAY DATA: ${vesselPositions.length} JRTI + ${bobPositions.length} BOB positions`, 'info');

  // ── STEP 2: Fly to pad and zoom in ──────────────────────────────────────────
  map.flyTo([padLat, padLng], 6, { duration: 2, easeLinearity: 0.5 });
  await new Promise(r => setTimeout(r, 2500)); // wait for fly animation

  // ── STEP 3: Draw trajectory arc (orbit model) ─────────────────────────────
  // Reuse existing drawLaunchArc if this launch is in allLaunches
  // Otherwise draw a basic arc using stored orbit data
  const liveMatch = (typeof allLaunches !== 'undefined' ? allLaunches : [])
    .find(l => l.id === launchId);
  if (liveMatch && typeof drawLaunchArc === 'function') {
    drawLaunchArc(liveMatch);
    log('REPLAY: Drew live trajectory arc', 'info');
  } else {
    // No live LL2 match -- draw arc from orbit/mission type
    const orbit = (launch.mission?.orbit_abbrev || launch.mission?.orbit || '').toUpperCase();
    const missionName = (launch.title || launch.name || '').toUpperCase();

    let arcAzDeg = 45, arcDistKm = 630, arcColor = '#00BFFF', arcLabel = 'LEO';
    let showZone = true;

    if (missionName.includes('ARTEMIS') || orbit.includes('TLI') || orbit.includes('LUNAR')) {
      // Lunar trajectory -- goes SE out over ocean, no recovery zone
      arcAzDeg = 100; arcDistKm = 1800; arcColor = '#FFD700'; arcLabel = 'LUNAR'; showZone = false;
    } else if (orbit.includes('GTO') || orbit.includes('GSO')) {
      arcAzDeg = 95; arcDistKm = 1100; arcLabel = 'GTO';
    } else if (orbit.includes('SSO') || orbit.includes('POLAR')) {
      arcAzDeg = 182; arcDistKm = 480; arcLabel = 'SSO';
    } else if (orbit.includes('ISS')) {
      arcAzDeg = 44; arcDistKm = 380; arcLabel = 'ISS';
    }

    // Compute endpoint
    const R = 6371, az = arcAzDeg * Math.PI / 180, dist = arcDistKm / R;
    const la1 = padLat * Math.PI / 180, lo1 = padLng * Math.PI / 180;
    const la2 = Math.asin(Math.sin(la1)*Math.cos(dist) + Math.cos(la1)*Math.sin(dist)*Math.cos(az));
    const lo2 = lo1 + Math.atan2(Math.sin(az)*Math.sin(dist)*Math.cos(la1), Math.cos(dist)-Math.sin(la1)*Math.sin(la2));
    const zoneLat = la2 * 180 / Math.PI, zoneLon = lo2 * 180 / Math.PI;

    const arcLine = L.polyline([[padLat, padLng], [zoneLat, zoneLon]], {
      color: arcColor, weight: 2, opacity: 0.7, dashArray: '8 5', interactive: false
    }).addTo(map);
    _replayLayers.push(arcLine);

    if (showZone) {
      const zoneCircle = L.circle([zoneLat, zoneLon], {
        radius: 80000, color: arcColor, weight: 1, opacity: 0.5, fill: false, dashArray: '4 4', interactive: false
      }).addTo(map);
      _replayLayers.push(zoneCircle);
    }
    log(`REPLAY: Arc drawn -- ${arcLabel} ${arcAzDeg}° ${arcDistKm}km`, 'info');
  }

  // ── STEP 4: Draw NOTMAR polygon if available ──────────────────────────────
  // Get NOTMAR from Supabase via get-launch-data
  try {
    const notmarRes = await fetch('/.netlify/functions/get-launch-data?notmar=true').then(r => r.json());
    const notmarList = Object.values(notmarRes || {});
    // Find NOTMAR closest to this launch date
    const relevantNotmar = notmarList.find(n => {
      if (!n.polygon_coords) return false;
      const issued = new Date(n.issued_at || n.created_at || 0).getTime();
      return Math.abs(issued - launchMs) < 7 * 24 * 3600000; // within 7 days
    });
    if (relevantNotmar?.polygon_coords) {
      const coords = relevantNotmar.polygon_coords;
      const notmarPoly = L.polygon(coords, {
        color: '#FF4444', weight: 2, opacity: 0.8,
        fillColor: '#FF4444', fillOpacity: 0.08,
        interactive: false
      }).addTo(map);
      _replayLayers.push(notmarPoly);
      // Pulse effect
      let pulse = true;
      const pulseTimer = setInterval(() => {
        notmarPoly.setStyle({ opacity: pulse ? 0.4 : 0.8, fillOpacity: pulse ? 0.03 : 0.08 });
        pulse = !pulse;
      }, 1000);
      _replayTimers.push(pulseTimer);
      log('REPLAY: NOTMAR polygon drawn', 'info');
    }
  } catch(e) {
    log('REPLAY: NOTMAR fetch failed -- ' + e.message, 'warn');
  }

  // ── STEP 5: Animate vessel trail (SpaceX only) ────────────────────────────
  if (isSpaceX && vesselPositions.length > 2) {
    // Draw full trail as faint line
    const trailPts = vesselPositions.map(p => [p.lat, p.lon]);
    const trailLine = L.polyline(trailPts, {
      color: '#00BFFF', weight: 1.5, opacity: 0.35,
      dashArray: '3 4', interactive: false
    }).addTo(map);
    _replayLayers.push(trailLine);

    // Vessel dot
    const vesselIcon = L.divIcon({
      html: '<div style="width:12px;height:12px;background:#00BFFF;border-radius:50%;box-shadow:0 0 10px #00BFFF;border:1px solid rgba(255,255,255,0.5)"></div>',
      className: '', iconAnchor: [6, 6]
    });
    const vesselDot = L.marker(trailPts[0], { icon: vesselIcon, interactive: false }).addTo(map);
    _replayLayers.push(vesselDot);

    // Also show BOB if available
    let bobDot = null;
    if (bobPositions.length > 2) {
      const bobIcon = L.divIcon({
        html: '<div style="width:8px;height:8px;background:#FFB000;border-radius:50%;box-shadow:0 0 6px #FFB000"></div>',
        className: '', iconAnchor: [4, 4]
      });
      const bobPts = bobPositions.map(p => [p.lat, p.lon]);
      bobDot = L.marker(bobPts[0], { icon: bobIcon, interactive: false }).addTo(map);
      _replayLayers.push(bobDot);
      const bobLine = L.polyline(bobPts, { color: '#FFB000', weight: 1, opacity: 0.25, interactive: false }).addTo(map);
      _replayLayers.push(bobLine);
    }

    // Animate vessel over 5 seconds -- tight enough to feel snappy
    const ANIM_MS = 5000;
    const stepMs  = ANIM_MS / trailPts.length;
    const bobPts  = bobPositions.length > 2 ? bobPositions.map(p => [p.lat, p.lon]) : null;

    trailPts.forEach((pt, i) => {
      const t = setTimeout(() => {
        vesselDot.setLatLng(pt);
        if (bobDot && bobPts && bobPts[i]) bobDot.setLatLng(bobPts[Math.floor(i * bobPts.length / trailPts.length)]);
        // Show AIS dark state
        const state = vesselPositions[i]?.vessel_state;
        if (state === 'AIS_DARK') {
          vesselDot.setIcon(L.divIcon({
            html: '<div style="width:12px;height:12px;background:#F5A623;border-radius:50%;box-shadow:0 0 10px #F5A623;border:1px solid rgba(255,255,255,0.5)"></div>',
            className: '', iconAnchor: [6, 6]
          }));
        }
      }, i * stepMs);
      _replayTimers.push(t);
    });

    await new Promise(r => setTimeout(r, ANIM_MS + 500));
  }

  // ── STEP 6: Liftoff rings at pad ──────────────────────────────────────────
  map.flyTo([padLat, padLng], 7, { duration: 1, easeLinearity: 0.5 });
  await new Promise(r => setTimeout(r, 1200));
  if (typeof triggerLiftoffAnimation === 'function') {
    triggerLiftoffAnimation({ pad: { latitude: padLat, longitude: padLng } });
  }
  // Wait for ALL 4 waves to complete (4 × 1800ms wave delay + 1200ms expand = ~9s total)
  // Then train appears right as the last ring fades -- seamless handoff
  log('🔴 LIFTOFF -- waiting for rings to fade...', 'alert');
  await new Promise(r => setTimeout(r, 9500));

  // ── STEP 7: Starlink train -- appears right as liftoff rings fade ───────────
  if (isStarlink) {
    const linkedTLEs = typeof getStarlinkTLEsForLaunch === 'function'
      ? getStarlinkTLEsForLaunch(launch) : [];

    if (linkedTLEs.length > 0) {
      log(`🌟 TRAIN DEPLOYED -- ${linkedTLEs.length} SATS NOW IN ORBIT`, 'alert');

      // Zoom out to show global train -- seamless after liftoff rings fade
      map.flyTo([20, -20], 2, { duration: 2, easeLinearity: 0.5 });
      await new Promise(r => setTimeout(r, 2500));

      // Render train dots -- gold, no tracker needed
      const trainLayer = L.layerGroup().addTo(map);
      window._replayTrainLayer = trainLayer;
      const now = new Date();
      const positions = [];

      linkedTLEs.forEach(tle => {
        const pos = propagateSat(tle.satrec, now);
        if (!pos) return;
        positions.push(pos);
        // Main dot
        const dot = L.circleMarker([pos.lat, pos.lon], {
          radius: 5, color: '#FFD700', fillColor: '#FFD700',
          opacity: 1.0, fillOpacity: 1.0, weight: 1.5, interactive: true,
        }).bindTooltip(`${tle.name} · FRESH DEPLOY 🌟`, { className: 'starlink-tooltip', sticky: true });
        trainLayer.addLayer(dot);

        // Short trail behind each sat (show where it's been last 5 mins)
        const trailPts = [];
        for (let s = 5; s >= 0; s--) {
          const tp = propagateSat(tle.satrec, new Date(now.getTime() - s * 60000));
          if (tp) trailPts.push([tp.lat, tp.lon]);
        }
        if (trailPts.length > 1) {
          const trail = L.polyline(trailPts, {
            color: '#FFD700', weight: 1, opacity: 0.3, interactive: false
          });
          trainLayer.addLayer(trail);
        }
      });

      // Fly to train centroid
      if (positions.length) {
        const centLat = positions.reduce((s, p) => s + p.lat, 0) / positions.length;
        const centLon = positions.reduce((s, p) => s + p.lon, 0) / positions.length;
        await new Promise(r => setTimeout(r, 300));
        map.flyTo([centLat, centLon], 3, { duration: 1.5 });
      }

      // Auto-clear after 90 seconds
      const clearT = setTimeout(() => {
        if (window._replayTrainLayer) {
          try { map.removeLayer(window._replayTrainLayer); } catch(e) {}
          window._replayTrainLayer = null;
        }
      }, 90000);
      _replayTimers.push(clearT);

    } else {
      log('REPLAY: No TLEs linked to this launch yet -- sats may have dispersed (> 7 days)', 'warn');
    }
  }

  _replayActive = false;
  log('🎬 REPLAY COMPLETE: ' + launchName, 'alert');
}

// Fly map to the current centroid of the gold train for a specific launch
async function focusStarlinkTrain(launchId) {
  const launch = (allLaunches || []).find(l => l.id === launchId);
  if (!launch) { log('TRAIN: launch not found', 'warn'); return; }

  // Enable tracker first if not on
  if (!_starlinkEnabled) {
    await toggleStarlinkLayer();
    await new Promise(r => setTimeout(r, 4000)); // wait for TLEs
  }

  const tles = getStarlinkTLEsForLaunch(launch);
  const statsEl = document.getElementById('sl-stats');

  if (!tles.length) {
    log(`TRAIN: No TLEs for ${launch.title || launch.name} -- not cataloged yet`, 'warn');
    if (statsEl) statsEl.textContent = 'TRAIN NOT YET CATALOGED -- CHECK BACK IN A FEW HOURS';
    return;
  }

  // Propagate current positions for this launch's sats
  const now = new Date();
  const positions = [];
  for (const tle of tles) {
    const pos = propagateSat(tle.satrec, now);
    if (pos) positions.push(pos);
  }

  if (!positions.length) { log('TRAIN: no positions computed', 'warn'); return; }

  // Compute centroid of the train
  const centLat = positions.reduce((s, p) => s + p.lat, 0) / positions.length;
  const centLon = positions.reduce((s, p) => s + p.lon, 0) / positions.length;

  // Fly to train
  map.flyTo([centLat, centLon], 3, { duration: 2, easeLinearity: 0.5 });

  // Mark these sats for highlighting in render
  window._starlinkTrainLaunchId = launchId;
  window._starlinkTrainTLENames = new Set(tles.map(t => t.name));

  // Show train info in stats panel
  const ageMs  = Date.now() - new Date(launch.window_start || launch.net).getTime();
  const ageHrs = Math.round(ageMs / 3600000);
  const ageStr = ageHrs > 48 ? Math.floor(ageHrs/24) + 'D ' + (ageHrs%24) + 'H' : ageHrs + 'H';
  const launchName = (launch.title || launch.name || '').replace('Falcon 9 Block 5 | ', '');
  if (statsEl) statsEl.textContent = `🌟 ${tles.length} SATS · ${launchName} · ${ageStr} OLD`;

  renderStarlinkDots();
  log(`TRAIN: Focused on ${tles.length} sats -- ${launchName} -- ${ageStr} old`, 'alert');
}

// ── TOGGLE ────────────────────────────────────────────────────────────────────
async function toggleStarlinkLayer() {
  // Clear any active mission replay when user enables the tracker
  if (_replayActive || (typeof _replayLayers !== 'undefined' && _replayLayers.length)) {
    clearMissionReplay();
  }
  _starlinkEnabled = !_starlinkEnabled;
  const btn  = document.getElementById('sl-toggle-btn');
  const mBtn = document.getElementById('m-sl-toggle-btn');
  const stats = document.getElementById('sl-stats');

  // Sync BOTH buttons immediately so disable feels instant
  function syncBtns(text, active) {
    if (btn) {
      btn.textContent = active ? '■ DISABLE' : '▶ ENABLE';
      active ? btn.classList.add('active') : btn.classList.remove('active');
    }
    if (mBtn) {
      mBtn.textContent = active ? '■ DISABLE TRACKER' : '▶ ENABLE TRACKER';
      mBtn.style.background = active ? 'rgba(0,191,255,0.15)' : 'rgba(0,191,255,0.06)';
      mBtn.style.borderColor = active ? 'var(--blue)' : 'rgba(0,191,255,0.4)';
    }
  }

  if (_starlinkEnabled) {
    syncBtns('loading', true);

    // Init layer group
    if (!_starlinkLayerGroup) {
      _starlinkLayerGroup = L.layerGroup().addTo(map);
    }

    // Wait for satellite.js to load -- on mobile CDN can be slow
    let satWait = 0;
    while (typeof satellite === 'undefined' && satWait < 10000) {
      if (stats) stats.textContent = 'LOADING satellite.js...';
      await new Promise(r => setTimeout(r, 300));
      satWait += 300;
    }
    if (typeof satellite === 'undefined') {
      console.error('[Starlink] satellite.js failed to load');
      if (stats) stats.textContent = 'ERROR: satellite.js failed to load';
      syncBtns('enable', false);
      _starlinkEnabled = false;
      return;
    }

    // Load TLEs on first enable
    if (!_starlinkLoaded || _starlinkTLEs.length === 0) {
      if (stats) stats.textContent = 'FETCHING TLEs...';
      if (btn) btn.textContent = '⟳ LOADING...';
      if (mBtn) mBtn.textContent = '⟳ LOADING...';

      // Retry up to 3 times -- mobile networks can be flaky
      let tles = [];
      for (let attempt = 1; attempt <= 3; attempt++) {
        tles = await fetchStarlinkTLEs();
        if (tles.length > 100) break;
        console.warn(`[Starlink] Attempt ${attempt} got ${tles.length} TLEs -- retrying`);
        if (attempt < 3) await new Promise(r => setTimeout(r, 1500));
      }

      _starlinkTLEs = tles;
      _starlinkLoaded = tles.length > 0;

      if (tles.length === 0) {
        if (stats) stats.textContent = 'ERROR: TLE fetch failed -- check connection';
        syncBtns('enable', false);
        _starlinkEnabled = false;
        return;
      }

      // Build fresh NORAD ID set
      const sorted = [...tles].sort((a, b) => b.noradId - a.noradId);
      const batchSize = 29;
      const recentStarlinkCount = (typeof allLaunches !== 'undefined' ? allLaunches : [])
        .filter(l => isStarlinkLaunch(l) && isStarlinkFresh(l)).length;
      const freshBatches = Math.max(1, recentStarlinkCount);
      const freshSats = sorted.slice(0, freshBatches * batchSize);
      window._starlinkFreshNoradIds = new Set(freshSats.map(t => t.noradId));
      console.log(`[Starlink] Fresh: ${freshSats.length} sats from ${freshBatches} recent launch(es)`);
      if (stats) stats.textContent = `${tles.length} SATS LOADED`;
    }

    syncBtns(null, true);
    // Start update loop
    renderStarlinkDots();
    _starlinkTimer = setInterval(renderStarlinkDots, STARLINK_UPDATE_INTERVAL);
    log(`STARLINK TRACKER ACTIVE -- ${_starlinkTLEs.length} satellites loaded, ${STARLINK_VIS_RADIUS_KM}km radius`, 'alert');

  } else {
    syncBtns(null, false);
    clearInterval(_starlinkTimer);
    _starlinkTimer = null;
    if (_starlinkLayerGroup) {
      _starlinkLayerGroup.clearLayers();
      _starlinkDots = {};
      window._starlinkTrails = {};
    }
    if (stats) stats.textContent = `${_starlinkTLEs.length} SATS LOADED -- DISABLED`;
    log('STARLINK TRACKER DISABLED', 'info');
  }
  // Sync mobile panel after any state change
  if (typeof syncMobileStarlinkPanel === 'function') syncMobileStarlinkPanel();
}

// Starlink tracker initialises on first ENABLE click -- no auto-init race condition
// G10-44 launched March 26 2026 -- before we built history tracking
// Inject it once so it appears in HISTORY tab with train badge
(function seedLaunchHistory() {
  try {
    const SEED_KEY = 'lw_history_seeded_v1';
    if (localStorage.getItem(SEED_KEY)) return; // already seeded
    const existing = (() => {
      try { const r = JSON.parse(localStorage.getItem('lw_launch_history') || '{}'); return r.data || []; } catch(e) { return []; }
    })();
    const hasG1044 = existing.some(l => (l.title||l.name||'').includes('10-44'));
    if (!hasG1044) {
      const g1044Seed = {
        id: 'starlink-g10-44-seed',
        title: 'Falcon 9 Block 5 | Starlink Group 10-44',
        name: 'Starlink Group 10-44',
        window_start: '2026-03-26T12:22:00Z',
        net: '2026-03-26T12:22:00Z',
        status: { abbrev: 'Success', name: 'Launch Successful' },
        _seededHistory: true,
        pad: { latitude: '28.5618', longitude: '-80.5772', name: 'SLC-40, Cape Canaveral', location: { name: 'Cape Canaveral, FL, USA' } },
        mission: { name: 'Starlink Group 10-44', orbit: 'LEO', orbit_abbrev: 'LEO' },
        rocket: { configuration: { name: 'Falcon 9 Block 5' } },
        launch_service_provider: { name: 'SpaceX' },
      };
      const merged = [g1044Seed, ...existing].slice(0, 50);
      localStorage.setItem('lw_launch_history', JSON.stringify({ ts: Date.now(), data: merged }));
      localStorage.setItem(SEED_KEY, '1');
      console.log('[LaunchWatch] Seeded G10-44 into launch history');
    } else {
      localStorage.setItem(SEED_KEY, '1');
    }
  } catch(e) { console.warn('[LaunchWatch] History seed failed:', e.message); }
})();

</script>


<!-- ═══════════════════════════════════════════════════════
     TELEGRAM SIGNUP MODAL
     ════════════════════════════════════════════════════ -->
<div id="tg-modal-overlay" onclick="if(event.target===this)closeTgModal()">
  <div id="tg-modal">

    <div class="tg-modal-header">
      <div class="tg-modal-title">✈ TELEGRAM ALERTS -- LAUNCHWATCH</div>
      <div class="tg-modal-close" onclick="closeTgModal()">✕</div>
    </div>

    <div class="tg-modal-body">

      <!-- STEP 1: Preferences -->
      <div id="tg-step-1" class="tg-step active">

        <div class="tg-section">
          <div class="tg-section-label">-- ALERT WINDOWS --</div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">T-24HR -- Plan ahead</div></div>
            <div class="tg-toggle on" id="tg-pref-t24" onclick="tgToggle('t24')"></div>
          </div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">T-6HR -- Tonight!</div></div>
            <div class="tg-toggle on" id="tg-pref-t6" onclick="tgToggle('t6')"></div>
          </div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">T-1HR -- Head outside</div></div>
            <div class="tg-toggle on" id="tg-pref-t1" onclick="tgToggle('t1')"></div>
          </div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">T-30MIN -- Go now!</div></div>
            <div class="tg-toggle on" id="tg-pref-t30m" onclick="tgToggle('t30m')"></div>
          </div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">SCRUB / DELAY alerts</div></div>
            <div class="tg-toggle on" id="tg-pref-scrub" onclick="tgToggle('scrub')"></div>
          </div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">SPLASHDOWN confirmed</div></div>
            <div class="tg-toggle on" id="tg-pref-splashdown" onclick="tgToggle('splashdown')"></div>
          </div>
        </div>

        <div class="tg-section">
          <div class="tg-section-label">-- LAUNCH PROVIDERS --</div>
          <div class="tg-toggle-row">
            <div><div class="tg-toggle-label">SpaceX</div></div>
            <div class="tg-toggle on" id="tg-pref-spacex" onclick="tgToggle('spacex','provider')"></div>
          </div>
          <div class="tg-toggle-row">
            <div>
              <div class="tg-toggle-label">Blue Origin <span class="tg-pro-badge">SOON</span></div>
            </div>
            <div class="tg-toggle" id="tg-pref-blueorigin" onclick="tgToggle('blueorigin','provider')"></div>
          </div>
          <div class="tg-toggle-row">
            <div>
              <div class="tg-toggle-label">ULA / Rocket Lab <span class="tg-pro-badge">SOON</span></div>
            </div>
            <div class="tg-toggle" id="tg-pref-ula" onclick="tgToggle('ula','provider')"></div>
          </div>
        </div>

        <div class="tg-section">
          <div class="tg-section-label">-- EXTRAS --</div>
          <div class="tg-toggle-row">
            <div>
              <div class="tg-toggle-label">Space news digest <span class="tg-pro-badge">PRO</span></div>
              <div class="tg-toggle-sub">Weekly space headlines to your Telegram</div>
            </div>
            <div class="tg-toggle" id="tg-pref-news" onclick="tgToggle('news','extra',true)"></div>
          </div>
          <div class="tg-toggle-row">
            <div>
              <div class="tg-toggle-label">Visible launches only <span class="tg-pro-badge">PRO</span></div>
              <div class="tg-toggle-sub">Only alert when launch is visible from your location</div>
            </div>
            <div class="tg-toggle" id="tg-pref-visonly" onclick="tgToggle('visonly','extra',true)"></div>
          </div>
          <div id="tg-pro-gate" class="tg-pro-gate" style="display:none;">
            ⭐ Pro features -- coming soon at ~$3.99/mo<br>
            <a href="https://launchwatch.app" style="color:var(--amber);">Join the Pro Beta →</a>
          </div>
        </div>

        <button class="tg-cta-btn" onclick="tgStep2()">
          CONTINUE → SET LOCATION
        </button>

      </div>

      <!-- STEP 2: Location + Launch -->
      <div id="tg-step-2" class="tg-step">

        <div class="tg-section">
          <div class="tg-section-label">-- YOUR LOCATION --</div>
          <div style="font-size:0.52rem;color:var(--blue-dim);margin-bottom:10px;line-height:1.5;">
            Used to calculate visibility score + bearing.<br>
            Optional -- you can skip and set it later.
          </div>
          <div style="display:flex;gap:6px;margin-bottom:8px;">
            <div onclick="tgUseCurrentLocation()" style="
              flex:1;text-align:center;padding:7px;cursor:pointer;
              border:1px solid var(--blue-dim);font-size:0.55rem;
              color:var(--blue);letter-spacing:0.08em;
            ">📍 USE MY LOCATION</div>
            <div onclick="tgSkipLocation()" style="
              flex:1;text-align:center;padding:7px;cursor:pointer;
              border:1px solid rgba(0,191,255,0.2);font-size:0.55rem;
              color:var(--blue-dim);letter-spacing:0.08em;
            ">SKIP →</div>
          </div>
          <div id="tg-location-status" style="font-size:0.52rem;color:var(--green);display:none;margin-bottom:8px;">
            ✓ LOCATION SET
          </div>
        </div>

        <div class="tg-section">
          <div class="tg-section-label">-- OPEN TELEGRAM --</div>
          <div style="font-size:0.52rem;color:var(--blue-dim);margin-bottom:10px;line-height:1.5;">
            Click the button below to open @LaunchWatchBot.<br>
            Tap <b style="color:var(--blue);">START</b> in Telegram to activate your alerts.
          </div>
          <button class="tg-cta-btn" onclick="tgLaunchBot()" id="tg-launch-btn">
            ✈ OPEN @LAUNCHWATCHBOT
          </button>
          <div id="tg-launched-msg" style="display:none;margin-top:10px;font-size:0.52rem;color:var(--green);text-align:center;line-height:1.5;">
            ✓ BOT OPENED -- TAP START IN TELEGRAM<br>
            <span style="color:var(--blue-dim);">Your preferences have been saved.</span>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>


<!-- === UPDATE BANNER =================================================
     Detects new build via TWO signals:
       1. <meta name="lw-build"> content change (auto-stamped by
          netlify/build.sh when that script works)
       2. window.LW_BUILD.version change (manual bump on every release)
     Belt-and-suspenders: either signal alone triggers the banner.
-->
<script>
(function initUpdateBanner() {
  // v2.26 Patch P (2026-04-24) -- banner polling reliability. Previously the
  // visibility guard inside checkForUpdate silently skipped ticks when tab
  // was backgrounded, and the 5-min interval often missed the deploy window.
  // Changes: (1) no visibility guard inside checkForUpdate; (2) added focus
  // and pageshow wake-ups so any tab-return triggers a check; (3) kept 5-min
  // interval and 30s first-check. Bandwidth cost per check: ~800KB HTML,
  // negligible for ops-level UI feedback.

  const meta = document.querySelector('meta[name="lw-build"]');
  const bootBuild = meta && meta.getAttribute('content');
  const bootVersion = (window.LW_BUILD && window.LW_BUILD.version) || null;
  if (!bootBuild && !bootVersion) return;

  const LS_DISMISSED_KEY = 'lw-build-dismissed';
  const POLL_INTERVAL_MS = 5 * 60 * 1000;
  const FIRST_CHECK_MS   = 30 * 1000;
  const MIN_CHECK_GAP_MS = 20 * 1000;   // throttle: no more than 1 check per 20s

  let lastCheckAt = 0;

  async function checkForUpdate() {
    const now = Date.now();
    if (now - lastCheckAt < MIN_CHECK_GAP_MS) return;
    lastCheckAt = now;

    try {
      const res = await fetch('/', { cache: 'no-store', method: 'GET' });
      if (!res.ok) return;
      const text = await res.text();

      const m = text.match(/<meta\s+name=["']lw-build["']\s+content=["']([^"']+)["']/i);
      const serverBuild = m && m[1];
      if (bootBuild && serverBuild && serverBuild !== bootBuild) {
        showUpdateBanner(serverBuild);
        return;
      }

      const v = text.match(/version:\s*['"]([^'"]+)['"][\s\S]{0,200}?buildTime:/);
      const serverVersion = v && v[1];
      if (bootVersion && serverVersion && serverVersion !== bootVersion) {
        showUpdateBanner(serverVersion);
        return;
      }
    } catch (_) {}
  }

  function showUpdateBanner(key) {
    if (localStorage.getItem(LS_DISMISSED_KEY) === key) return;
    if (document.getElementById('lw-update-banner')) return;

    const banner = document.createElement('div');
    banner.id = 'lw-update-banner';
    banner.setAttribute('role', 'alert');
    banner.innerHTML =
      '<span class="lw-update-text">▸ NEW VERSION AVAILABLE -- TAP TO RELOAD</span>' +
      '<button class="lw-update-dismiss" aria-label="Dismiss">×</button>';

    banner.addEventListener('click', (e) => {
      if (e.target.classList.contains('lw-update-dismiss')) {
        localStorage.setItem(LS_DISMISSED_KEY, key);
        banner.remove();
        return;
      }
      if (navigator.serviceWorker && navigator.serviceWorker.controller) {
        navigator.serviceWorker.controller.postMessage({ type: 'SKIP_WAITING' });
      }
      location.reload();
    });

    document.body.appendChild(banner);
  }

  // Wake-up triggers -- any of these fires checkForUpdate (throttled 20s min).
  setTimeout(checkForUpdate, FIRST_CHECK_MS);
  setInterval(checkForUpdate, POLL_INTERVAL_MS);
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') checkForUpdate();
  });
  window.addEventListener('focus', checkForUpdate);
  window.addEventListener('pageshow', checkForUpdate);
})();
</script>

</body>
</html>