@charset "UTF-8";
/**
 * SKYSCAPE // SILKY SILENCE (ver4b)
 * Production Modular Stylesheet (css/skyscape.css)
 * Zero !important rules — clean specificity hierarchy & responsive media queries
 */

:root {
    color-scheme: only dark;
    --sentinel-cyan: #00ffcc;
    --sentinel-blue: #00ccff;
    --sentinel-gold: #ffd700;
    --sentinel-red: #ff3333;
    --bg-void: #020202;
    --font-display: 'Orbitron', 'Rajdhani', sans-serif;
    --font-tech: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    /* #2 & #4: Configurable Logo Backlight Glow CSS Variables (synced from js/map-data.js) */
    --logo-glow-rgb: 0, 230, 215;
    --logo-core-rgb: 210, 250, 255;
    --logo-glow-intensity: 0.72;
    --logo-glow-spread: 150px;
}

/* ============================================================================
   1. BASE LAYOUT & UNIVERSAL SCROLLING FIX (#2)
   ============================================================================ */
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #020202;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #020202;
    font-family: var(--font-tech);
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* Unlocked unified page scrolling in Story Mode — works everywhere on screen (#2) */
html.story-scroll-unlocked {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
}

html.story-scroll-unlocked body {
    overflow-y: visible;
    overflow-x: hidden;
    height: auto;
}

#viewport-stabilizer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

/* Background WebGL & Grain Layers (pointer-events: none so scroll works everywhere) */
canvas#gl-canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sensor-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

#ui-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    pointer-events: none;
}

canvas#signal-canvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

canvas#fx-climax-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 95;
    pointer-events: none;
}

/* ============================================================================
   2. ENGAGE SENTINEL START SCREEN — TECHNICAL DECORATION (#0)
   ============================================================================ */
#start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 28, 20, 0.45) 0%, rgba(0, 5, 3, 0.94) 75%),
        linear-gradient(180deg, rgba(0, 255, 204, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 4px;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 1.5s ease-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}

.engage-tech-frame {
    position: relative;
    padding: 48px 64px 40px 64px;
    background: linear-gradient(145deg, rgba(0, 18, 14, 0.72) 0%, rgba(0, 6, 8, 0.88) 100%);
    border: 1px solid rgba(0, 255, 204, 0.28);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 255, 204, 0.08),
        inset 0 0 30px rgba(0, 255, 204, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.engage-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: #00ffcc;
    border-style: solid;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.45);
    pointer-events: none;
}

.engage-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.engage-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.engage-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.engage-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.engage-reticle-emblem {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 204, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 22px;
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.15), inset 0 0 15px rgba(0, 255, 204, 0.12);
}

.engage-reticle-emblem::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 255, 204, 0.4);
    animation: spinSlow 22s linear infinite;
}

.engage-reticle-emblem::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border-top: 2px solid #00ffcc;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid rgba(0, 204, 255, 0.6);
    animation: spinSlow 6s linear infinite reverse;
}

.engage-emblem-core {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 12px #00ffcc;
    animation: pulseDot 2s infinite;
}

.engage-pre-header {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3.5px;
    color: rgba(0, 255, 204, 0.75);
    margin-bottom: 18px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.engage-pre-header::before,
.engage-pre-header::after {
    content: '';
    width: 24px;
    height: 1px;
    background: rgba(0, 255, 204, 0.4);
}

@keyframes spinBorder {
    0% { clip-path: inset(0 0 95% 0); }
    25% { clip-path: inset(0 95% 0 0); }
    50% { clip-path: inset(95% 0 0 0); }
    75% { clip-path: inset(0 0 0 95%); }
    100% { clip-path: inset(0 0 95% 0); }
}

@keyframes spinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#start-btn {
    position: relative;
    background: rgba(0, 20, 10, 0.85);
    color: #00ffcc;
    border: 2px solid #00ffcc;
    padding: 24px 52px;
    font-family: var(--font-mono);
    font-size: 1.8rem;
    cursor: pointer;
    letter-spacing: 4px;
    transition: all 0.3s;
    pointer-events: auto;
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.3), inset 0 0 18px rgba(0, 255, 204, 0.1);
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
    text-transform: uppercase;
}

#start-btn.loading {
    color: rgba(0, 255, 204, 0.65);
    border-color: rgba(0, 255, 204, 0.25);
    pointer-events: none;
}

#start-btn.loading::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #00ffcc;
    animation: spinBorder 2s linear infinite reverse;
}

#start-btn:hover:not(.loading),
#start-btn:active:not(.loading) {
    background: rgba(0, 255, 204, 0.2);
    box-shadow: 0 0 50px rgba(0, 255, 204, 0.6);
    transform: scale(1.04);
}

.engage-telemetry-row {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 255, 204, 0.18);
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(175, 255, 223, 0.6);
}

.engage-telemetry-row span strong {
    color: #00ffcc;
    font-weight: normal;
}

/* ============================================================================
   3. SKIP & AUDIO BUTTONS + INTRO TEXT STREAMS
   ============================================================================ */
#skip-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 12, 8, 0.65);
    color: rgba(0, 255, 204, 0.7);
    border: 1px solid rgba(0, 255, 204, 0.35);
    padding: 10px 22px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.3s;
    z-index: 2001;
    pointer-events: auto;
    display: none;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

#skip-btn:hover {
    background: rgba(0, 255, 204, 0.15);
    color: #00ffcc;
    border-color: #00ffcc;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
}

#audio-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 4000;
    background: rgba(0, 10, 8, 0.6);
    border: 1px solid rgba(0, 255, 204, 0.5);
    color: rgba(0, 255, 204, 0.9);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 9px 15px;
    cursor: pointer;
    pointer-events: auto;
    display: none;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

#audio-toggle:hover {
    background: rgba(0, 255, 204, 0.15);
    border-color: #00ffcc;
}

/* Intro Center & Drifting Texts */
.text-a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    color: #afffdf;
    letter-spacing: 8px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
    opacity: 0;
    white-space: nowrap;
    z-index: 30;
}

.text-a.active {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.text-a.fade-out {
    opacity: 0;
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(1.2);
    transition: all 2s ease-out;
}

.text-b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    font-weight: 300;
    letter-spacing: 2px;
    color: rgba(200, 255, 240, 0.22);
    text-shadow: 0 0 40px rgba(0, 255, 204, 0.32);
    white-space: nowrap;
    will-change: transform, opacity;
    display: inline-block;
    z-index: 30;
}

@keyframes driftStream {
    0%   { transform: translate3d(60vw, -50%, 0) translateX(-50%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate3d(-60vw, -50%, 0) translateX(-50%); opacity: 0; }
}

.text-b.stream {
    animation: driftStream 10s linear forwards;
}

/* ============================================================================
   4. SKYSCAPE LOGO, CONFIGURABLE BACKLIGHT HALO & TOP-STAGE DECORATION (#2, #4, #7)
   ============================================================================ */
#top-logo-backlight {
    position: fixed;
    top: 47px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--logo-glow-spread) * 2.5);
    height: calc(var(--logo-glow-spread) * 0.76);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(var(--logo-core-rgb), calc(var(--logo-glow-intensity) * 0.56)) 0%,
            rgba(var(--logo-glow-rgb), calc(var(--logo-glow-intensity) * 0.42)) 36%,
            rgba(var(--logo-glow-rgb), calc(var(--logo-glow-intensity) * 0.14)) 66%,
            rgba(0, 0, 0, 0) 100%
        );
    filter: blur(12px);
    opacity: 0;
    z-index: 58;
    pointer-events: none;
    transition: opacity 3.8s cubic-bezier(0.22, 1, 0.36, 1), background 1.2s ease, width 1.2s ease, height 1.2s ease;
}

#top-logo-backlight.active {
    opacity: 1;
}

#final-logo-img {
    position: fixed;
    top: 50%;
    left: 50%;
    width: clamp(500px, 46vw, 680px);
    max-width: none;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    filter: blur(20px);
    height: auto;
    z-index: 40;
    cursor: pointer;
    pointer-events: none;
}

#final-logo-img.center-stage {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.0);
    filter: blur(0px);
    transition: opacity 4s ease-in-out, transform 4s ease-out, filter 4s ease-out;
}

#final-logo-img.top-stage {
    position: fixed;
    opacity: 1;
    /* Exact optical center inside #top-logo-hud-frame [   ] brackets (top: 6px, height: 86px -> center 47px) */
    top: 47px;
    left: 50%;
    width: clamp(174px, 18.2vw, 236px);
    transform: translate(-50%, -50%) scale(1.0);
    /* While sliding up to top-stage (3s), keep glow at 0; .glow-ready activates after settling at top */
    filter:
        blur(0px)
        drop-shadow(0 0 0px rgba(var(--logo-core-rgb), 0))
        drop-shadow(0 0 0px rgba(var(--logo-glow-rgb), 0))
        drop-shadow(0 0 0px rgba(var(--logo-glow-rgb), 0));
    transition:
        top 3s cubic-bezier(0.2, 0.8, 0.2, 1),
        left 3s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 3s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 3s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 3s ease,
        filter 3.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 60;
    pointer-events: auto;
}

#final-logo-img.top-stage.glow-ready {
    filter:
        blur(0px)
        drop-shadow(0 0 10px rgba(var(--logo-core-rgb), calc(var(--logo-glow-intensity) * 0.85)))
        drop-shadow(0 0 24px rgba(var(--logo-glow-rgb), calc(var(--logo-glow-intensity) * 0.75)))
        drop-shadow(0 0 46px rgba(var(--logo-glow-rgb), calc(var(--logo-glow-intensity) * 0.45)));
}

/* Precision Interferometer & Astrolabe Top Logo Companion HUD Frame (#4, #7) */
#top-logo-hud-frame {
    position: fixed;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(620px, 66vw, 860px);
    height: 86px;
    z-index: 56;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 1.5s ease;
}

body.feat-logo-hud #top-logo-hud-frame.active {
    opacity: 1;
}

body.logo-style-none #top-logo-hud-frame {
    display: none;
}

.logo-zenith-scale {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: 2px;
    color: rgba(0, 255, 204, 0.52);
    white-space: nowrap;
}

.logo-zenith-scale .zenith-center {
    color: rgba(255, 215, 0, 0.78);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

.logo-zenith-scale .zenith-ticks {
    color: rgba(0, 255, 204, 0.32);
    letter-spacing: 3px;
}

.logo-tech-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.logo-center-spacer {
    width: 240px;
    flex-shrink: 0;
}

.logo-hud-wing {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.8px;
    color: rgba(0, 255, 204, 0.72);
    padding: 6px 16px;
    background: linear-gradient(90deg, rgba(0, 18, 16, 0.76) 0%, rgba(0, 18, 16, 0.12) 100%);
    border-top: 1px solid rgba(0, 255, 204, 0.32);
    border-bottom: 1px solid rgba(0, 255, 204, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.logo-hud-wing.wing-left {
    text-align: right;
    align-items: flex-end;
    border-left: 2px solid #00ffcc;
    padding-right: 22px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    box-shadow: -8px 0 20px -10px rgba(0, 255, 204, 0.45);
}

.logo-hud-wing.wing-right {
    text-align: left;
    align-items: flex-start;
    border-right: 2px solid #00ffcc;
    padding-left: 22px;
    background: linear-gradient(270deg, rgba(0, 18, 16, 0.76) 0%, rgba(0, 18, 16, 0.12) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);
    box-shadow: 8px 0 20px -10px rgba(0, 255, 204, 0.45);
}

.logo-wing-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-wing-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 6px #00ffcc;
    animation: pulseDot 2s infinite;
}

.logo-wing-badge {
    font-size: 7px;
    padding: 0 4px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    letter-spacing: 1.5px;
}

.logo-wing-label {
    color: rgba(175, 255, 223, 0.52);
    font-size: 7.5px;
    letter-spacing: 2.2px;
}

.logo-wing-val {
    color: #00ffcc;
    font-size: 9.5px;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.45);
    font-variant-numeric: tabular-nums;
}

.logo-wing-micro-bars {
    display: flex;
    gap: 3px;
    margin-top: 2px;
}

.logo-wing-micro-bars span {
    width: 10px;
    height: 2px;
    background: rgba(0, 255, 204, 0.65);
    box-shadow: 0 0 4px rgba(0, 255, 204, 0.4);
}

.logo-wing-micro-bars.right-bars span {
    background: rgba(255, 215, 0, 0.55);
}

/* Style Variant B: orbital_astrolabe */
body.logo-style-orbital_astrolabe .svg-interferometer-rail,
body.logo-style-orbital_astrolabe .svg-vernier-ticks {
    opacity: 0.25;
}

body.logo-style-orbital_astrolabe .svg-horizon-curve,
body.logo-style-orbital_astrolabe .svg-astrolabe-upper {
    stroke-width: 1.8;
}

/* Style Variant C: minimal_stealth */
body.logo-style-minimal_stealth .logo-zenith-scale,
body.logo-style-minimal_stealth .logo-wing-micro-bars,
body.logo-style-minimal_stealth .svg-astrolabe-upper,
body.logo-style-minimal_stealth .svg-vernier-ticks {
    display: none;
}

body.logo-style-minimal_stealth .logo-hud-wing {
    background: transparent;
    border-top: none;
    box-shadow: none;
}

/* ============================================================================
   5. INTRO HUD PANELS & TECHNICAL DECORATIONS (#0)
   ============================================================================ */
.hud-panel {
    position: absolute;
    color: rgba(0, 255, 204, 0.9);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}

.hud-panel.active {
    opacity: 1;
}

#hud-left {
    bottom: 40px;
    left: 40px;
    text-align: left;
    border-left: 2px solid #00ffcc;
    padding-left: 10px;
}

#hud-right {
    bottom: 40px;
    right: 120px;
    text-align: right;
    border-right: 2px solid #00ffcc;
    padding-right: 10px;
}

/* Hide bottom corner panels in Story Mode when the bottom Statusbar is active (#4) */
body.story-mode-calm.feat-statusbar #hud-left,
body.story-mode-calm.feat-statusbar #hud-right {
    opacity: 0;
    visibility: hidden;
}

.data-row {
    display: block;
    margin-bottom: 4px;
}

.label {
    color: #008866;
    margin-right: 5px;
}

.value {
    color: #ccffee;
}

/* Shared Precision Console Aesthetics for Intro HUD Panels */
.hud-console {
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 204, 0.025) 0px,
        rgba(0, 255, 204, 0.025) 1px,
        transparent 1px,
        transparent 3px
    );
}

.hud-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #00ffcc;
    border-style: solid;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.55);
}

#hud-analysis .hud-corner {
    border-color: #00ccff;
    box-shadow: 0 0 8px rgba(0, 204, 255, 0.55);
}

.hud-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hud-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hud-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hud-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.hud-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 8px #00ffcc;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulseDot 1.8s infinite;
}

.hud-live-dot.cyan {
    background: #00ccff;
    box-shadow: 0 0 8px #00ccff;
}

/* Decorated Tactical Map & Targets Panel (#hud-targets) */
#hud-targets {
    position: absolute;
    top: 17%;
    right: 115px;
    width: 336px;
    height: 382px;
    background: linear-gradient(160deg, rgba(0, 22, 16, 0.90) 0%, rgba(0, 8, 12, 0.94) 100%);
    border: 1px solid rgba(0, 255, 204, 0.55);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.78), 0 0 25px rgba(0, 255, 204, 0.14), inset 0 0 22px rgba(0, 255, 204, 0.06);
    backdrop-filter: blur(8px);
    transform: translateX(50px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

#hud-targets.active {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.hud-panel-tech-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: rgba(0, 255, 204, 0.11);
    border-bottom: 1px solid rgba(0, 255, 204, 0.38);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #afffdf;
}

.hud-tech-tag {
    color: #00ffcc;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}

.hud-tech-sub {
    color: rgba(204, 255, 238, 0.72);
    font-size: 8px;
}

canvas#tactical-map {
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: calc(100% - 24px);
    z-index: 0;
    pointer-events: none;
}

/* Radar grid crosshair overlay on tactical map */
.map-reticle-overlay {
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: 190px;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 28%, rgba(0, 255, 204, 0.07) 29%, transparent 30%),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 255, 204, 0.07) 59%, transparent 60%),
        linear-gradient(90deg, transparent 49.5%, rgba(0, 255, 204, 0.09) 50%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(0, 255, 204, 0.09) 50%, transparent 50.5%);
}

.map-compass-tag {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: 1.2px;
    color: rgba(0, 255, 204, 0.55);
    pointer-events: none;
}

.map-tag-n { top: 4px; left: 50%; transform: translateX(-50%); }
.map-tag-e { right: 6px; top: 50%; transform: translateY(-50%); }
.map-tag-scale { bottom: 4px; left: 8px; color: rgba(255, 215, 0, 0.65); }

#hud-targets .header-container {
    margin-top: 192px;
    padding: 8px 14px 4px 14px;
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 20, 15, 0) 0%, rgba(0, 16, 12, 0.94) 25%);
}

#target-list-content {
    padding: 0 14px 6px 14px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    flex-grow: 1;
    background: rgba(0, 14, 10, 0.82);
}

.hud-console-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    background: rgba(0, 24, 18, 0.9);
    border-top: 1px solid rgba(0, 255, 204, 0.28);
    font-size: 8px;
    letter-spacing: 1.2px;
    color: rgba(175, 255, 223, 0.65);
}

.hud-console-footer strong {
    color: #00ffcc;
    font-weight: normal;
}

/* Decorated Situational Understanding Panel (#hud-analysis) */
#hud-analysis {
    position: absolute;
    top: 64%;
    right: 115px;
    width: 336px;
    background: linear-gradient(160deg, rgba(0, 18, 24, 0.90) 0%, rgba(0, 8, 14, 0.94) 100%);
    border: 1px solid rgba(0, 200, 255, 0.6);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.78), 0 0 25px rgba(0, 200, 255, 0.14), inset 0 0 22px rgba(0, 200, 255, 0.06);
    padding: 0;
    backdrop-filter: blur(8px);
    transform: translateX(50px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
    height: auto;
    min-height: 162px;
    box-sizing: border-box;
}

#hud-analysis.active {
    opacity: 1;
    transform: translateX(0) scale(1);
}

#hud-analysis .analysis-inner {
    padding: 9px 14px 8px 14px;
}

.analysis-lock-badge {
    font-size: 8px;
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: rgba(255, 215, 0, 0.08);
    padding: 1px 5px;
    letter-spacing: 1px;
}

.analysis-telemetry-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 200, 255, 0.25);
    font-size: 8px;
    letter-spacing: 1.2px;
    color: rgba(180, 235, 255, 0.68);
}

.analysis-telemetry-strip strong {
    color: #00ccff;
    font-weight: normal;
}

.analysis-wave-indicator {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 9px;
}

.analysis-wave-indicator i {
    display: inline-block;
    width: 2px;
    height: 4px;
    background: #00ccff;
    animation: waveBarPulse 1.1s infinite ease-in-out;
}

.analysis-wave-indicator i:nth-child(2) { height: 8px; animation-delay: 0.2s; }
.analysis-wave-indicator i:nth-child(3) { height: 6px; animation-delay: 0.4s; }
.analysis-wave-indicator i:nth-child(4) { height: 9px; animation-delay: 0.6s; }

@keyframes waveBarPulse {
    0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
    50%      { transform: scaleY(1.0); opacity: 1.0; }
}

.hud-header {
    border-bottom: 1px solid #00ffcc;
    padding-bottom: 5px;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-header.analysis {
    border-color: #00ccff;
    color: #ccffff;
    font-size: 10px;
    letter-spacing: 1.5px;
}

#hud-targets .hud-header,
.target-item {
    display: grid;
    grid-template-columns: 35px 45px 45px 45px 50px 40px;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 10px;
    opacity: 0.92;
    white-space: nowrap;
}

.t-alt { color: #aaddff; }
.t-id { color: #afffdf; }
.t-type { color: #00ffcc; font-weight: bold; }
.t-hdg { color: #ccffff; }
.t-spd { color: #ccffee; }
.t-acc { color: #ffccaa; }
.t-class-unknown { color: #ffff00; }
.t-class-bird { color: #00ff00; }
.t-class-drone { color: #ff3333; }

#analysis-content {
    height: 108px;
    overflow: hidden;
}

.analysis-log {
    font-size: 10px;
    margin-bottom: 6px;
    border-left: 2px solid rgba(0, 204, 255, 0.35);
    padding-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 12px;
}

.analysis-log.alert {
    border-color: #ff3333;
    color: #ffcccc;
    background: linear-gradient(90deg, rgba(255, 51, 51, 0.12), transparent);
}

.analysis-log.predict {
    border-color: #ffff00;
    color: #feffcc;
    background: linear-gradient(90deg, rgba(255, 255, 0, 0.08), transparent);
}

.log-time {
    opacity: 0.55;
    margin-right: 5px;
    font-size: 9px;
}

/* Threat Library Panel (#hud-library) */
#hud-library {
    position: absolute;
    top: 17%;
    left: 40px;
    width: 305px;
    height: 455px;
    background: linear-gradient(160deg, rgba(0, 18, 12, 0.90) 0%, rgba(0, 8, 6, 0.94) 100%);
    border: 1px solid rgba(0, 255, 204, 0.52);
    border-left: 3px solid #00ffcc;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.78), 0 0 25px rgba(0, 255, 204, 0.12), inset 0 0 20px rgba(0, 255, 204, 0.05);
    backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    z-index: 20;
    transition: opacity 0.8s, transform 0.8s;
    transform: translateX(-50px);
    opacity: 0;
}

#hud-library.active {
    opacity: 1;
    transform: translateX(0);
    display: flex;
}

#hud-library .library-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 8px 12px 10px 12px;
    overflow: hidden;
}

.library-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #00ffcc;
    padding-bottom: 5px;
    margin-bottom: 5px;
    color: #00ffcc;
    font-weight: bold;
    letter-spacing: 1px;
}

.lib-cols {
    display: grid;
    grid-template-columns: 90px 50px 50px auto;
    font-size: 9px;
    color: #00aa88;
    margin-bottom: 5px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(0, 255, 204, 0.2);
}

#library-content {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.lib-row {
    display: grid;
    grid-template-columns: 90px 50px 50px auto;
    font-size: 10px;
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(0, 255, 204, 0.05);
    opacity: 0.7;
    transition: all 0.2s;
}

.lib-row.scanning {
    background: rgba(0, 255, 204, 0.1);
    color: #fff;
    opacity: 1;
    border-left: 2px solid #00ffcc;
    padding-left: 5px;
}

.lib-row.match {
    background: rgba(255, 50, 50, 0.2);
    color: #ffcccc;
    border-left: 2px solid #ff3333;
    padding-left: 5px;
    text-shadow: 0 0 5px red;
}

.lib-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ccffee; }
.lib-type { color: #aaaaaa; }
.lib-rcs  { color: #00ffcc; }
.lib-sig  { color: #ffffaa; font-size: 9px; }

.lib-status {
    margin-top: 5px;
    border-top: 1px solid rgba(0, 255, 204, 0.3);
    padding-top: 5px;
    font-size: 9.5px;
}

.lib-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lib-snr-tag {
    font-size: 8.5px;
    color: #ffd700;
    letter-spacing: 1px;
}

.scan-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 50, 40, 0.5);
    margin-top: 3px;
    position: relative;
    overflow: hidden;
}

.scan-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: #00ffcc;
    animation: scanMove 1s infinite linear;
    box-shadow: 0 0 10px #00ffcc;
}

@keyframes scanMove {
    0% { left: -30%; }
    100% { left: 100%; }
}

/* ============================================================================
   6. SEEKER RETICLE (#center-reticle) WITH ZOOM-OUT EXIT (#0) & RPM1-4 (#11)
   ============================================================================ */
#center-reticle {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 290px;
    height: 220px;
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition:
        opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.55s cubic-bezier(0.19, 1, 0.22, 1),
        filter 0.55s ease,
        visibility 0.45s;
    will-change: transform, left, top, opacity;
}

#center-reticle.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
}

/* #0: Smooth Zoom-Out Exit when Seeker phase finishes at 57s */
#center-reticle.zoom-exit {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(2.75);
    filter: blur(8px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease,
        visibility 0.85s;
}

#center-reticle .center-dot,
#center-reticle .reticle-data {
    display: none;
}

.corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border-color: #00ffcc;
    border-style: solid;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.65);
    transition: border-color 0.25s, box-shadow 0.25s;
}

#center-reticle.locked .corner {
    border-color: #ffd700;
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.85);
}

.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

canvas#seeker-hud-canvas {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    pointer-events: none;
}

.seeker-telemetry-top {
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.8);
}

#center-reticle.locked .seeker-telemetry-top {
    color: #ffd700;
}

/* Live RPM1-4 row inside Seeker */
.seeker-rpm-row {
    position: absolute;
    bottom: 2px;
    left: 6px;
    right: 6px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    background: rgba(0, 12, 10, 0.72);
    padding: 2px 5px;
    border-top: 1px solid rgba(0, 255, 204, 0.25);
}

.seeker-rpm-row.rpm-hidden {
    display: none;
}

.seeker-rpm-cell {
    display: flex;
    justify-content: space-between;
    color: #afffdf;
}

.seeker-rpm-cell span:first-child {
    color: rgba(0, 255, 204, 0.65);
}

#center-reticle.locked .seeker-rpm-cell span:last-child {
    color: #ffd700;
}

.seeker-telemetry-bottom {
    position: absolute;
    bottom: -38px;
    left: -20px;
    width: calc(100% + 40px);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 1.5px;
    color: #ccffee;
    background: rgba(0, 16, 12, 0.76);
    border-top: 1px solid rgba(0, 255, 204, 0.45);
    border-bottom: 1px solid rgba(0, 255, 204, 0.45);
    padding: 4px 8px;
    backdrop-filter: blur(4px);
}

.seeker-telemetry-bottom strong {
    color: #00ffcc;
}

#center-reticle.locked .seeker-telemetry-bottom strong {
    color: #ffd700;
}

@keyframes pulseDot {
    0%   { opacity: 0.4; transform: scale(1); }
    50%  { opacity: 1.0; transform: scale(1.4); }
    100% { opacity: 0.4; transform: scale(1); }
}

/* ============================================================================
   7. SCROLLER & MYSTICAL STORY MONOLITH BOXES — CENTERED RISE (#3)
   Tarinalaatikoiden (.story-content) leveydet eri tilanteissa (säädettävissä myös js/map-data.js -> storyBoxWidth):
   ============================================================================ */
:root {
    --story-box-width-desktop: 740px;          /* 1) PC / Desktop & Läppäri */
    --story-box-width-pad-landscape: 720px;    /* 2) Pad / Tabletti vaaka-asennossa */
    --story-box-width-pad-portrait: 680px;     /* 3) Pad / Tabletti pystyasennossa */
    --story-box-width-phone-landscape: 660px;  /* 4) Puhelin vaaka-asennossa (Phone Landscape) */
    --story-box-width-phone-portrait: 92%;     /* 5) Puhelin pystyasennossa (Phone Portrait) */
}

#scroller {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 900vh;
    z-index: 20;
    pointer-events: none;
    display: none;
}

/* #3: All story boxes rise in the center of the screen */
.story-section {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5vw;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    perspective: 1200px;
    pointer-events: none;
}

.story-section.visible {
    opacity: 1;
}

.story-content {
    --rx: 0deg;
    --ry: 0deg;
    --gx: 50%;
    --gy: 50%;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--story-box-width-desktop, 740px);
    background: linear-gradient(145deg, rgba(4, 18, 20, 0.82) 0%, rgba(2, 8, 12, 0.90) 100%);
    border-top: 1px solid rgba(0, 255, 204, 0.75);
    border-bottom: 1px solid rgba(0, 255, 204, 0.75);
    border-left: 1px solid rgba(0, 255, 204, 0.22);
    border-right: 1px solid rgba(0, 255, 204, 0.22);
    padding: 38px 44px 34px 44px;
    color: #ccffee;
    pointer-events: auto;
    backdrop-filter: blur(15px) saturate(140%);
    -webkit-backdrop-filter: blur(15px) saturate(140%);
    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.88),
        0 0 35px rgba(0, 255, 204, 0.12),
        inset 0 0 30px rgba(0, 255, 204, 0.06);
    transform: translateY(55px) rotateX(8deg) scale(0.96);
    transition:
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s ease,
        border-color 0.6s ease;
    overflow: hidden;
    will-change: transform;
    text-align: left;
}

.story-section.visible .story-content {
    transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.0);
}

.story-content:hover {
    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.92),
        0 0 50px rgba(0, 255, 204, 0.24),
        inset 0 0 35px rgba(0, 255, 204, 0.1);
    border-color: rgba(0, 255, 204, 0.95);
}

/* Glass surface light reflection */
.story-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        420px circle at var(--gx) var(--gy),
        rgba(0, 255, 204, 0.13),
        rgba(0, 180, 255, 0.04) 40%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 0;
}

/* LiDAR sweep line across card when revealed */
.story-content::after {
    content: '';
    position: absolute;
    left: 0;
    top: -120%;
    width: 100%;
    height: 55%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 255, 204, 0.08) 85%,
        rgba(180, 255, 245, 0.55) 100%
    );
    pointer-events: none;
    transition: top 1.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

.story-section.visible .story-content::after {
    top: 140%;
}

.monolith-hud-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2.5px;
    color: rgba(0, 255, 204, 0.78);
    border-bottom: 1px solid rgba(0, 255, 204, 0.2);
    padding-bottom: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.monolith-hud-top .hud-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #00ffcc;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #00ffcc;
    animation: pulseDot 2s infinite;
}

.monolith-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #00ffcc;
    border-style: solid;
    pointer-events: none;
    opacity: 0.75;
    z-index: 3;
}

.monolith-corner.tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.monolith-corner.tr { top: 6px; right: 6px; border-width: 2px 2px 0 0; }
.monolith-corner.bl { bottom: 6px; left: 6px; border-width: 0 0 2px 2px; }
.monolith-corner.br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }

.story-content h2 {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.32rem, 1.85vw, 1.66rem);
    margin: 0 0 18px 0;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3.2px;
    text-shadow: 0 0 22px rgba(0, 255, 204, 0.45);
}

.story-content p {
    position: relative;
    z-index: 2;
    font-family: var(--font-tech);
    font-size: clamp(1.04rem, 1.25vw, 1.16rem);
    font-weight: 400;
    line-height: 1.72;
    color: rgba(220, 255, 245, 0.92);
    margin: 0;
}

/* Punchline reveal at the bottom of each story card */
.story-punchline {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 2.0px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #88ffee 45%, #ffd700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 25px rgba(0, 255, 204, 0.45);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s ease 0.45s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

.story-section.visible .story-punchline {
    opacity: 1;
    transform: translateY(0);
}

/* LISÄÄ TÄMÄ TÄHÄN VÄLIIN: */
.portrait-br {
    display: none;
}

/* Subtle mystical keyword highlights inside story paragraphs (#3) */
.kw-signal {
    color: #ffffff;
    font-weight: 600;
}

body.feat-story-keywords .story-section.visible .kw-signal {
    background: linear-gradient(90deg, #ffffff 0%, #00ffcc 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: keywordShimmer 5s linear infinite;
}

body.feat-story-keywords .story-section.visible .kw-lock {
    display: inline-block;
    padding: 0 5px;
    border-left: 1px solid rgba(0, 255, 204, 0.65);
    border-right: 1px solid rgba(0, 255, 204, 0.65);
    background: rgba(0, 255, 204, 0.08);
    color: #00ffcc;
}

@keyframes keywordShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.monolith-footer-bar {
    margin-top: 22px;
    height: 2px;
    width: 100%;
    background: rgba(0, 255, 204, 0.12);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.monolith-footer-fill {
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, transparent, #00ffcc, #ffd700);
    box-shadow: 0 0 12px #00ffcc;
    transition: width 0.2s ease;
}

/* ============================================================================
   8. CALM STORY STATUSBAR AT BOTTOM (#1, #4, #8 — Fixed-Width Fields + CIR/I/Q Console)
   ============================================================================ */
#story-statusbar {
    position: fixed;
    bottom: 14px;
    left: 32px;
    right: 32px;
    height: 42px;
    z-index: 3500;
    background: rgba(2, 10, 10, 0.82);
    border: 1px solid rgba(0, 255, 204, 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), inset 0 0 18px rgba(0, 255, 204, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    font-variant-numeric: tabular-nums;
    color: rgba(175, 255, 223, 0.85);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1.2s ease, visibility 1.2s ease, border-color 0.5s ease;
}

body.story-mode-calm.feat-statusbar #story-statusbar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.statusbar-left,
.statusbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

/* #8: Fixed-width telemetry slots so SCAN / FREQ / NSE never jump when length changes */
.sb-metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.sb-slot-1 { width: 106px; }
.sb-slot-2 { width: 138px; }
.sb-slot-3 { width: 142px; }

.sb-slot-4 { width: 144px; justify-content: flex-end; }
.sb-slot-5 { width: 118px; justify-content: flex-end; }
.sb-slot-6 {
    width: 126px;
    justify-content: flex-end;
    cursor: pointer;
    padding: 4px 6px;
    margin-right: -6px;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
}

.sb-slot-6:hover {
    background: rgba(0, 255, 204, 0.12);
    border-color: rgba(0, 255, 204, 0.45);
    box-shadow: 0 0 12px rgba(0, 255, 204, 0.22);
}

.sb-slot-6:hover .sb-val {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.65);
}

.sb-slot-6:active {
    transform: translateY(1px);
}

.sb-label {
    color: rgba(0, 255, 204, 0.52);
    flex-shrink: 0;
}

.sb-val {
    color: #ccffee;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.sb-slot-1 .sb-val { min-width: 5.5ch; }
.sb-slot-2 .sb-val { min-width: 9.0ch; }
.sb-slot-3 .sb-val { min-width: 10.0ch; }
.sb-slot-4 .sb-val { min-width: 11.0ch; text-align: left; }
.sb-slot-5 .sb-val { min-width: 7.5ch; text-align: left; }
.sb-slot-6 .sb-val { min-width: 7.2ch; text-align: left; }

.statusbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 10px;
    background: rgba(0, 18, 15, 0.55);
    border-left: 1px solid rgba(0, 255, 204, 0.25);
    border-right: 1px solid rgba(0, 255, 204, 0.25);
    z-index: 1;
}

.sb-correlator-tag {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(0, 255, 204, 0.62);
    white-space: nowrap;
}

.sb-correlator-tag.sb-tag-right {
    color: rgba(255, 215, 0, 0.78);
}

/* #1: Wide, high-amplitude Multi-Target CIR Cross-Correlation + Real-Time I/Q Canvas */
#statusbar-fft-canvas {
    width: 420px;
    height: 32px;
    display: block;
}

/* Secure Protocol Button integrated cleanly (hidden on Comms Box finale stage so it never overlaps) */
#footer-controls {
    position: fixed;
    bottom: 66px;
    width: 100%;
    text-align: center;
    z-index: 4000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

body.at-finale-stage #footer-controls {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#privacy-btn {
    background: rgba(0, 12, 8, 0.85);
    border: 1px solid rgba(0, 255, 204, 0.45);
    color: rgba(0, 255, 204, 0.8);
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 8px 16px;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s;
}

#privacy-btn:hover {
    background: rgba(0, 255, 204, 0.14);
    color: #00ffcc;
    border-color: #00ffcc;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
}

/* Privacy Modal */
#privacy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 5000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

#privacy-modal.open {
    display: flex;
    opacity: 1;
}

.modal-content {
    width: 90%;
    max-width: 500px;
    background: #020504;
    border: 1px solid #00ffcc;
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
    padding: 2px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#privacy-modal.open .modal-content {
    transform: scale(1);
}

.modal-header {
    background: rgba(0, 255, 204, 0.1);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #00ffcc;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: 2px;
}

#close-modal {
    background: none;
    border: 1px solid #ff3333;
    color: #ff3333;
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.2s;
}

#close-modal:hover {
    background: #ff3333;
    color: #000;
}

.modal-body {
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #afffdf;
    line-height: 1.6;
}

.highlight {
    color: #ffff00;
    border-bottom: 1px dashed #ffff00;
    display: inline-block;
    margin-bottom: 10px;
}

/* ============================================================================
   9. FINALE — 3D METALLIC SENTINEL EMBLEM + THX SPARKLE SWEEP & CAUSTIC SINGULARITY
   ============================================================================ */
:root {
    --sentinel-glow-rgb: 0, 225, 255;
    --sentinel-core-rgb: 255, 225, 165;
    --sentinel-glow-intensity: 0.42;
    --sentinel-glow-spread: 145px;
}

#final-contact-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
    pointer-events: none;
    /* #2 & #3: Background darkening is controlled cleanly by WebGL uFinaleBgVisibility
       so the top SKYSCAPE logo and its backlight glow are never dimmed by an overlay! */
    background: radial-gradient(circle at 50% 52%, rgba(0, 4, 8, 0.45) 0%, rgba(0, 0, 0, 0.0) 70%);
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

#finale-ellipses-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Configurable subtle background glow behind the Finale Whisper Terminal */
#sentinel-glow-backdrop {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(92vw, 760px);
    height: 360px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background:
        radial-gradient(
            ellipse 52% 46% at 50% 50%,
            rgba(var(--sentinel-core-rgb), calc(var(--sentinel-glow-intensity) * 0.45)) 0%,
            rgba(var(--sentinel-glow-rgb), calc(var(--sentinel-glow-intensity) * 0.36)) 45%,
            rgba(var(--sentinel-glow-rgb), calc(var(--sentinel-glow-intensity) * 0.12)) 74%,
            rgba(0, 0, 0, 0) 100%
        );
    filter: blur(22px);
    transition: opacity 0.35s linear;
}

/* ============================================================================
   9B. WHISPER COMMS TERMINAL & 3D SLANTED ROUTE MAP HUD
   ============================================================================ */
#whisper-terminal-stage {
    position: relative;
    z-index: 5;
    width: min(92vw, 650px);
    max-height: calc(100vh - 142px);
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s linear;
    pointer-events: none;
}

#whisper-terminal-stage.interactive {
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#whisper-hero-header {
    text-align: center;
    margin-bottom: 14px;
    padding: 4px 14px 6px 14px;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#whisper-hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.16rem, 2.15vw, 1.68rem);
    line-height: 1.24;
    font-weight: 600;
    letter-spacing: 2.4px;
    color: #ecf8fc;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.96),
        0 0 22px rgba(0, 235, 255, 0.24);
}

#whisper-hero-title .hero-line-1 {
    display: block;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: rgba(224, 244, 250, 0.88);
}

#whisper-hero-title .hero-line-2 {
    display: block;
    white-space: nowrap;
    margin-top: 2px;
    font-weight: 700;
    letter-spacing: 2.7px;
    color: #ffffff;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.98),
        0 0 24px rgba(0, 255, 204, 0.32),
        0 0 42px rgba(0, 215, 255, 0.16);
}

.whisper-hero-divider {
    width: 96px;
    height: 1px;
    margin: 9px auto 8px auto;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 204, 0.45) 35%, rgba(255, 220, 130, 0.45) 65%, transparent 100%);
    opacity: 0.82;
}

#whisper-hero-subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.86rem, 1.32vw, 1.04rem);
    font-weight: 400;
    letter-spacing: 1.4px;
    color: rgba(196, 235, 245, 0.88);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.96);
}

#whisper-comms-box {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(165deg, rgba(2, 16, 22, 0.88) 0%, rgba(1, 9, 14, 0.92) 100%);
    border: 1px solid rgba(0, 255, 204, 0.32);
    border-radius: 4px;
    padding: 16px 20px 15px 20px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.82),
        0 0 28px rgba(0, 255, 204, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

#whisper-comms-box:hover,
#whisper-comms-box.is-stabilized {
    border-color: rgba(0, 255, 204, 0.54);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.84),
        0 0 34px rgba(0, 255, 204, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Subtle tactical carrier-signal vibration before the operator's mouse enters the Comms Box */
#whisper-comms-box.is-vibrating {
    animation: whisperCarrierTremor 3.2s infinite linear;
}

@keyframes whisperCarrierTremor {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        border-color: rgba(0, 255, 204, 0.30);
    }
    12% {
        transform: translate3d(-0.9px, 0.5px, 0);
    }
    14% {
        transform: translate3d(1.1px, -0.6px, 0);
        border-color: rgba(0, 255, 204, 0.55);
    }
    16% {
        transform: translate3d(-0.6px, -0.4px, 0);
    }
    18%, 48% {
        transform: translate3d(0, 0, 0);
        border-color: rgba(0, 255, 204, 0.32);
    }
    52% {
        transform: translate3d(1.2px, 0.6px, 0);
        border-color: rgba(255, 218, 120, 0.48);
    }
    54% {
        transform: translate3d(-1.1px, -0.5px, 0);
    }
    56% {
        transform: translate3d(0.7px, -0.4px, 0);
        border-color: rgba(0, 255, 204, 0.52);
    }
    58%, 84% {
        transform: translate3d(0, 0, 0);
        border-color: rgba(0, 255, 204, 0.30);
    }
    86% {
        transform: translate3d(-0.8px, 0.7px, 0);
    }
    88% {
        transform: translate3d(0.9px, -0.5px, 0);
    }
}

/* Charging state while the user presses and holds EMIT */
#whisper-comms-box.is-charging {
    border-color: rgba(255, 220, 125, 0.85);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.88),
        0 0 42px rgba(0, 255, 204, 0.28),
        0 0 24px rgba(255, 215, 0, 0.22),
        inset 0 0 26px rgba(0, 255, 204, 0.12);
}

#whisper-comms-box.is-charging .whisper-corner {
    border-color: #ffd700;
    width: 14px;
    height: 14px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.65);
}

.whisper-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border-color: #00ffcc;
    border-style: solid;
    opacity: 0.85;
}

.whisper-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.whisper-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.whisper-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.whisper-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.whisper-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 255, 204, 0.18);
}

.whisper-header-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.whisper-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 10px #00ffcc;
    animation: whisperPulseDot 2.2s infinite ease-in-out;
}

@keyframes whisperPulseDot {
    0%, 100% { opacity: 0.45; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.18); }
}

.whisper-box-title {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    letter-spacing: 2.6px;
    color: #00ffcc;
    font-weight: 700;
}

.whisper-header-right {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: rgba(165, 235, 245, 0.78);
    padding: 2px 8px;
    border: 1px solid rgba(0, 255, 204, 0.22);
    background: rgba(0, 24, 28, 0.55);
    border-radius: 2px;
}

.whisper-section {
    margin-bottom: 11px;
}

.whisper-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 8px;
}

.whisper-field-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 1.6px;
    color: rgba(155, 228, 240, 0.82);
}

.whisper-field-meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1.2px;
    color: rgba(0, 255, 204, 0.68);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* 1. Topic Radio Buttons Grid */
.whisper-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.whisper-topic-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    background: rgba(0, 22, 28, 0.65);
    border: 1px solid rgba(0, 255, 204, 0.24);
    border-radius: 3px;
    color: #d4f4f8;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-align: left;
    cursor: pointer;
    transition: all 0.22s ease;
}

.whisper-topic-btn:hover {
    background: rgba(0, 42, 48, 0.78);
    border-color: rgba(0, 255, 204, 0.58);
    color: #ffffff;
}

.whisper-topic-btn.selected {
    background: linear-gradient(135deg, rgba(0, 68, 62, 0.85) 0%, rgba(0, 36, 44, 0.92) 100%);
    border-color: #00ffcc;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 255, 204, 0.24), inset 0 0 10px rgba(0, 255, 204, 0.12);
}

.whisper-radio-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 255, 204, 0.55);
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.whisper-topic-btn.selected .whisper-radio-pip {
    border-color: #ffd700;
    background: #00ffcc;
    box-shadow: 0 0 8px #00ffcc;
}

.whisper-topic-code {
    color: #ffd700;
    font-weight: 700;
    opacity: 0.88;
    flex-shrink: 0;
}

.whisper-topic-name {
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Customize Payload */
.whisper-payload-wrap {
    position: relative;
    background: rgba(0, 10, 15, 0.78);
    border: 1px solid rgba(0, 255, 204, 0.24);
    border-radius: 3px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.whisper-payload-wrap:focus-within {
    border-color: #00ffcc;
    box-shadow: 0 0 14px rgba(0, 255, 204, 0.16);
}

#whisper-payload {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: #e8faff;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.42;
    padding: 8px 11px 4px 11px;
    resize: none;
}

#whisper-payload::placeholder {
    color: rgba(130, 190, 205, 0.42);
}

#whisper-waveform-canvas {
    display: block;
    width: 100%;
    height: 22px;
    opacity: 0.92;
    pointer-events: none;
}

/* 3. Echo Channel (//signal, //email) */
.whisper-echo-label-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whisper-channel-pills {
    display: inline-flex;
    gap: 5px;
}

.whisper-channel-pill {
    background: rgba(0, 20, 26, 0.7);
    border: 1px solid rgba(0, 255, 204, 0.25);
    border-radius: 2px;
    color: rgba(160, 225, 235, 0.75);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 1px;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.whisper-channel-pill:hover {
    border-color: rgba(0, 255, 204, 0.55);
    color: #ffffff;
}

.whisper-channel-pill.active {
    background: rgba(0, 255, 204, 0.18);
    border-color: #00ffcc;
    color: #00ffcc;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.2);
}

.whisper-echo-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(0, 10, 15, 0.78);
    border: 1px solid rgba(0, 255, 204, 0.24);
    border-radius: 3px;
    padding: 0 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.whisper-echo-input-wrap:focus-within {
    border-color: #00ffcc;
    box-shadow: 0 0 14px rgba(0, 255, 204, 0.16);
}

#whisper-echo-section.is-required .whisper-echo-input-wrap {
    border-color: rgba(255, 215, 0, 0.65);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.12);
}

#whisper-echo-section.is-required #whisper-echo-req-badge {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

#whisper-echo-section.is-verified .whisper-echo-input-wrap {
    border-color: #00ffcc;
    box-shadow: 0 0 14px rgba(0, 255, 204, 0.2);
}

#whisper-echo-section.is-verified #whisper-echo-req-badge {
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

#whisper-echo-section.is-error .whisper-echo-input-wrap,
#whisper-echo-section.is-error-shake .whisper-echo-input-wrap {
    border-color: #ff4d4d;
    box-shadow: 0 0 16px rgba(255, 77, 77, 0.35);
    animation: whisperErrorShake 0.42s ease;
}

#whisper-echo-section.is-error #whisper-echo-req-badge,
#whisper-echo-section.is-error-shake #whisper-echo-req-badge {
    color: #ff6666;
}

#whisper-hp-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@keyframes whisperErrorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.whisper-echo-prefix {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: #ffd700;
    margin-right: 8px;
    flex-shrink: 0;
    user-select: none;
}

#whisper-echo-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #e8faff;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 8px 0;
}

#whisper-echo-input::placeholder {
    color: rgba(130, 190, 205, 0.42);
}

/* 4. Footer & EMIT Button */
.whisper-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 255, 204, 0.16);
}

.whisper-route-preview {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.65px;
    line-height: 1.38;
    color: rgba(168, 232, 244, 0.82);
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
}

.uplink-origin-seg,
.uplink-target-seg {
    display: inline-block;
    white-space: nowrap;
}

.uplink-target-seg {
    color: rgba(210, 246, 255, 0.90);
}

#whisper-origin-label {
    color: #00ffcc;
}

#whisper-emit-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 158px;
    background: linear-gradient(135deg, rgba(0, 58, 54, 0.92) 0%, rgba(0, 30, 38, 0.96) 100%);
    border: 1px solid #00ffcc;
    border-radius: 3px;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 8px 22px 7px 22px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.22);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.emit-hold-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 255, 204, 0.38) 0%, rgba(0, 225, 255, 0.55) 60%, rgba(255, 218, 115, 0.78) 100%);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.65);
    pointer-events: none;
    z-index: 0;
}

.emit-btn-content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.emit-btn-sub {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 400;
    letter-spacing: 1.6px;
    color: rgba(175, 242, 250, 0.78);
    transition: color 0.2s ease;
}

#whisper-emit-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 204, 0.22) 0%, rgba(0, 82, 92, 0.92) 100%);
    box-shadow: 0 0 26px rgba(0, 255, 204, 0.48), 0 0 8px rgba(255, 215, 0, 0.35);
    transform: translateY(-1px) scale(1.02);
}

#whisper-emit-btn.is-holding {
    border-color: #ffd700;
    box-shadow:
        0 0 34px rgba(0, 255, 204, 0.75),
        0 0 18px rgba(255, 215, 0, 0.65);
    transform: scale(0.985);
}

#whisper-emit-btn.is-holding .emit-btn-sub {
    color: #ffd700;
}

.emit-btn-brackets {
    color: #ffd700;
    font-family: var(--font-mono);
    font-weight: 400;
}

/* Stage A: Cipher Scramble Overlay inside Comms Box */
#whisper-cipher-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 10, 15, 0.94);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 10;
}

#whisper-cipher-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cipher-overlay-header {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 2.4px;
    color: #ffd700;
    margin-bottom: 12px;
    text-align: center;
}

.cipher-overlay-stream {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    line-height: 1.55;
    letter-spacing: 1.8px;
    color: #00ffcc;
    text-shadow: 0 0 12px rgba(0, 255, 204, 0.65);
    word-break: break-all;
    text-align: center;
    max-width: 92%;
    min-height: 54px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 255, 204, 0.28);
    background: rgba(0, 22, 28, 0.6);
    border-radius: 3px;
}

.cipher-overlay-sub {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 1.8px;
    color: rgba(175, 235, 245, 0.78);
    text-align: center;
}

/* Stage B & C: Flight Telemetry & "WHISPER ACQUIRED" Final Card */
#whisper-terminal-stage.in-flight #whisper-hero-header,
#whisper-terminal-stage.in-flight #whisper-comms-box {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
    pointer-events: none;
}

#whisper-flight-hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 96px 24px 64px 24px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.45s ease;
}

#whisper-terminal-stage.in-flight #whisper-flight-hud,
#whisper-flight-hud.active {
    opacity: 1;
}

#whisper-flight-telemetry {
    width: min(92vw, 660px);
    background: rgba(1, 12, 18, 0.78);
    border: 1px solid rgba(0, 255, 204, 0.32);
    border-radius: 3px;
    padding: 10px 16px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
    transition: all 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

#whisper-flight-hud.acquired-locked #whisper-flight-telemetry {
    border-color: rgba(0, 255, 204, 0.22);
    background: rgba(1, 10, 15, 0.66);
    transform: translateY(-4px);
}

.flight-tel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 1.8px;
    color: #00ffcc;
    margin-bottom: 6px;
}

.flight-tel-hop {
    color: #ffd700;
}

.flight-tel-progress-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 255, 204, 0.14);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 7px;
}

.flight-tel-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00ffcc, #ffd700);
    box-shadow: 0 0 8px #00ffcc;
    transition: width 0.08s linear;
}

.flight-tel-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 1px;
    color: rgba(170, 230, 240, 0.72);
}

.flight-hop-pill {
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid rgba(0, 255, 204, 0.2);
    background: rgba(0, 18, 24, 0.65);
    transition: all 0.25s ease;
}

.flight-hop-pill.passed {
    border-color: #00ffcc;
    color: #00ffcc;
    background: rgba(0, 255, 204, 0.14);
}

.flight-hop-pill.current {
    border-color: #ffd700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.18);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Final "WHISPER ACQUIRED" Card */
#whisper-acquired-card {
    position: relative;
    width: min(90vw, 520px);
    background: linear-gradient(165deg, rgba(2, 18, 24, 0.92) 0%, rgba(1, 10, 15, 0.95) 100%);
    border: 1px solid rgba(0, 255, 204, 0.52);
    border-radius: 4px;
    padding: 24px 28px;
    text-align: center;
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.88),
        0 0 36px rgba(0, 255, 204, 0.18);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(16px) scale(0.95);
    pointer-events: none;
    transition: all 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 18px;
}

#whisper-acquired-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.acquired-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #ffd700;
    border-style: solid;
    pointer-events: none;
}

.acquired-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.acquired-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.acquired-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.acquired-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.acquired-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 2.2px;
    color: #ffd700;
    margin-bottom: 8px;
}

.acquired-title {
    margin: 0 0 8px 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.88rem);
    font-weight: 800;
    letter-spacing: 4px;
    color: #00ffcc;
    text-shadow: 0 0 22px rgba(0, 255, 204, 0.55);
}

.acquired-subtitle {
    margin: 0 0 12px 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 1.4px;
    color: #d8f6fc;
    line-height: 1.45;
}

.acquired-cipher-proof {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1.3px;
    color: rgba(165, 228, 240, 0.76);
    padding: 6px 10px;
    background: rgba(0, 22, 28, 0.65);
    border: 1px solid rgba(0, 255, 204, 0.22);
    border-radius: 2px;
    margin-bottom: 14px;
}

.acquired-apex-seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid rgba(0, 255, 204, 0.14);
}

#acquired-apex-canvas {
    width: min(100%, 320px);
    height: 54px;
    display: block;
    margin: 0 auto 6px auto;
}

.acquired-apex-caption {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 2.3px;
    color: rgba(255, 222, 138, 0.88);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.28);
    text-align: center;
}

/* ============================================================================
   10. SEEKER WAYPOINT EDITOR & CALIBRATION STUDIO (Alt + E)
   ============================================================================ */
#seeker-editor-toggle {
    position: fixed;
    bottom: 65px;
    right: 24px;
    z-index: 9000;
    background: rgba(0, 18, 14, 0.92);
    border: 1px solid #00ffcc;
    color: #00ffcc;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 8px 14px;
    cursor: pointer;
    display: none;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.25);
    pointer-events: auto;
    touch-action: manipulation;
}

#seeker-editor-toggle:hover,
#seeker-editor-toggle.editor-open {
    background: rgba(0, 255, 204, 0.2);
    color: #ffffff;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.45);
}

body.feat-seeker-editor #seeker-editor-toggle,
#seeker-editor-toggle.force-visible {
    display: block;
}

#seeker-editor-panel {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9005;
    background: rgba(2, 14, 12, 0.95);
    border: 1px solid #00ffcc;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.88), 0 0 25px rgba(0, 255, 204, 0.25);
    padding: 8px 12px;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: #ccffee;
    max-width: 96vw;
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

#seeker-editor-panel.open {
    display: flex;
}

.se-btn {
    background: rgba(0, 30, 24, 0.85);
    border: 1px solid rgba(0, 255, 204, 0.45);
    color: #afffdf;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 1px;
    padding: 5px 9px;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.se-btn:hover {
    border-color: #00ffcc;
    color: #fff;
}

.se-btn.active {
    background: rgba(255, 215, 0, 0.22);
    border-color: #ffd700;
    color: #ffd700;
    font-weight: bold;
}

.se-btn.se-copy {
    background: rgba(0, 255, 204, 0.18);
    border-color: #00ffcc;
    color: #00ffcc;
    font-weight: bold;
}

.se-btn.se-close {
    border-color: #ff4444;
    color: #ff9999;
}

.se-readout {
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
    font-size: 9.5px;
    letter-spacing: 1px;
    min-width: 170px;
    text-align: center;
}

.editor-wp-pin {
    position: fixed;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    margin-top: -17px;
    border: 2px solid #ffd700;
    border-radius: 50%;
    background: rgba(10, 25, 20, 0.85);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 9002;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.85);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

.editor-wp-pin.selected {
    border-color: #00ffcc;
    background: rgba(0, 255, 204, 0.32);
    box-shadow: 0 0 22px rgba(0, 255, 204, 1.0), 0 0 8px #fff;
    transform: scale(1.12);
}

.editor-wp-pin .pin-coord-tag {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 12, 10, 0.92);
    border: 1px solid rgba(255, 215, 0, 0.55);
    color: #ffd700;
    font-size: 8.5px;
    padding: 1px 4px;
    white-space: nowrap;
    pointer-events: none;
}

#seeker-export-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 9010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(6px);
}

#seeker-export-modal.open {
    display: flex;
}

.se-modal-box {
    width: min(92vw, 680px);
    background: #020c0a;
    border: 1px solid #00ffcc;
    box-shadow: 0 0 35px rgba(0, 255, 204, 0.3);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-mono);
    color: #ccffee;
}

.se-modal-box textarea {
    width: 100%;
    height: 280px;
    background: #010605;
    border: 1px solid rgba(0, 255, 204, 0.4);
    color: #00ffcc;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
}

/* ============================================================================
   11. RESPONSIVE MEDIA QUERIES (Zero !important rules)
   ============================================================================ */
@media only screen and (max-width: 1360px) {
    .sb-hide-tablet {
        display: none;
    }
    #statusbar-fft-canvas {
        width: 260px;
    }
}

/* Pad Landscape (Tablets in Landscape: 768px - 1400px, height > 500px) */
@media only screen and (min-width: 768px) and (max-width: 1400px) and (orientation: landscape) and (min-height: 501px) {
    .story-content {
        max-width: var(--story-box-width-pad-landscape, 720px);
        padding: 34px 40px 30px 40px;
    }
    #ui-layer #hud-library {
        top: 92px;
        left: 32px;
        width: 292px;
        height: 410px;
    }
    #ui-layer #hud-targets {
        top: 92px;
        right: 90px;
        width: 332px;
        height: 374px;
    }
    #ui-layer #hud-analysis {
        top: auto;
        bottom: 84px;
        right: 90px;
        width: 332px;
    }
}

/* Pad Portrait (Tablets in Portrait: 600px - 1200px width, e.g. Samsung Tab S10 Ultra / iPad Portrait):
   Place Library (top-left) and Tactical Map (top-right) symmetrically in the upper sky,
   and Situational Understanding at bottom-right above the telemetry bar, leaving the entire
   central city airspace (y = 28%..82%) completely open for the Seeker! */
@media only screen and (min-width: 600px) and (max-width: 1200px) and (orientation: portrait) {
    .story-content {
        max-width: var(--story-box-width-pad-portrait, 680px);
        padding: 34px 36px 30px 36px;
    }
    .story-content h2 {
        font-size: clamp(1.26rem, 2.1vw, 1.54rem);
        letter-spacing: 2.8px;
    }
    .story-punchline {
        font-size: 0.88rem;
        letter-spacing: 1.8px;
    }
    #ui-layer #hud-library {
        top: 74px;
        left: 32px;
        width: 300px;
        height: 382px;
    }
    #ui-layer #hud-targets {
        top: 74px;
        right: 84px;
        width: 336px;
        height: 382px;
    }
    #ui-layer #hud-analysis {
        top: auto;
        bottom: 88px;
        right: 84px;
        left: auto;
        width: 336px;
    }
    #top-logo-hud-frame {
        width: min(94vw, 760px);
    }
    .logo-center-spacer {
        width: 205px;
    }
    #final-logo-img.top-stage {
        width: clamp(162px, 20.5vw, 212px);
        top: 47px;
    }
    #statusbar-fft-canvas {
        width: 180px;
    }
    .sb-slot-3,
    .sb-slot-4 {
        display: none;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    #top-logo-hud-frame {
        width: min(94vw, 720px);
    }
    .logo-center-spacer {
        width: 200px;
    }
    #final-logo-img.top-stage {
        width: clamp(158px, 20.5vw, 208px);
        top: 47px;
    }
    #statusbar-fft-canvas {
        width: 180px;
    }
    .sb-slot-3,
    .sb-slot-4 {
        display: none;
    }
}

/* Hide Seeker only on mobile phones (< 740px width or low phone landscape), keep visible on tablets in both landscape & portrait! */
@media only screen and (max-width: 740px),
       only screen and (max-height: 500px) and (orientation: landscape) {
    #ui-layer #center-reticle {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    #ui-layer #hud-targets,
    #ui-layer #hud-analysis,
    #ui-layer #hud-library {
        width: 92%;
        left: 4%;
        right: auto;
        transform: none;
    }

    .engage-tech-frame {
        padding: 32px 24px 28px 24px;
        width: 90%;
    }

    .engage-telemetry-row {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    #top-logo-hud-frame {
        display: none;
    }

    #story-statusbar {
        left: 10px;
        right: 10px;
        bottom: 8px;
        padding: 0 10px;
        font-size: 8.5px;
    }

    #statusbar-fft-canvas {
        width: 110px;
        height: 24px;
    }

    .statusbar-center {
        padding: 1px 4px;
    }

    .sb-slot-1 { width: 84px; }
    .sb-slot-2 { width: 104px; }
    .sb-slot-6 { width: 96px; }

    .sb-hide-mobile {
        display: none;
    }

    /* Hide bottom statusbar on mobile phones when on the Finale / Comms Box page so it never covers the EMIT button */
    body.at-finale-stage #story-statusbar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

body.dev-phone.at-finale-stage #story-statusbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Phone Portrait: Utilize fullscreen space by moving Tactical Map & Situational Understanding up,
   and fitting the ESM Signature Library panel cleanly in the lower section! */
@media only screen and (max-width: 767px) and (orientation: portrait) {
    #start-btn {
        padding: 18px 26px;
        font-size: 1.35rem;
        width: 100%;
        text-align: center;
    }

    #start-btn.loading {
        font-size: 0.9rem;
        letter-spacing: 2px;
        padding: 18px 10px;
    }

    #skip-btn {
        bottom: auto;
        top: 16px;
    }

    .text-a {
        font-size: 5vw;
        width: 90%;
        text-align: center;
    }

    .text-b {
        font-size: 12vw;
    }

    #final-logo-img.center-stage {
        max-width: none;
        width: 92vw;
        height: auto;
    }

    #final-logo-img.top-stage {
        max-width: none;
        width: 48vw;
        top: 47px;
        transform: translate(-50%, -50%) scale(1.0);
    }

    /* #4: On mobile phones in portrait mode (e.g. Pixel 9 Pro portrait), hide FREQ (.sb-slot-2) so it never overlaps the center CIR curves */
    .sb-slot-2 {
        display: none;
    }

    #ui-layer #hud-left,
    #ui-layer #hud-right {
        top: 50px;
        bottom: auto;
        font-size: 9.5px;
        line-height: 1.28;
        border: none;
        padding: 0;
    }

    #ui-layer #hud-left  { left: 14px; }
    #ui-layer #hud-right { right: 14px; }

    #ui-layer #hud-targets {
        top: 104px;
        bottom: auto;
        height: 344px;
        display: flex;
    }

    #ui-layer #hud-targets .map-reticle-overlay {
        height: 152px;
    }

    #ui-layer #hud-targets .header-container {
        margin-top: 154px;
    }

    #ui-layer #hud-analysis {
        top: 458px;
        bottom: auto;
        min-height: 142px;
        height: 148px;
    }

    #ui-layer #hud-analysis #analysis-content {
        height: 76px;
    }

    #ui-layer #hud-library {
        top: 616px;
        bottom: 14px;
        height: auto;
        min-height: 150px;
    }

    #final-contact-container #whisper-terminal-stage {
        width: 94vw;
        max-height: calc(100dvh - 84px);
        margin-top: 38px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 14px;
    }

    #final-contact-container #whisper-comms-box {
        padding: 11px 13px;
    }

    #final-contact-container .whisper-topics-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #final-contact-container .whisper-topic-btn {
        padding: 6px 10px;
    }

    #final-contact-container .whisper-box-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #final-contact-container #whisper-emit-btn {
        width: 100%;
    }

    #final-contact-container {
        overflow: hidden;
    }

    .story-section {
        padding: 0 4vw;
        justify-content: center;
    }

    .story-content {
        width: var(--story-box-width-phone-portrait, 92%);
        max-width: var(--story-box-width-phone-portrait, 92%);
        padding: 22px 18px;
    }

    .story-content h2 {
        font-size: clamp(1.08rem, 4.4vw, 1.32rem);
        letter-spacing: 2.0px;
    }

    .story-content p {
        font-size: 0.95rem;
        line-height: 1.56;
    }

    .story-punchline {
        font-size: clamp(0.74rem, 3.2vw, 0.88rem);
        letter-spacing: 1.4px;
    }
	/* LISÄÄ NÄMÄ TÄHÄN VÄLIIN: */
    .portrait-br {
        display: inline;
    }

    #story-4 .story-punchline,
    #story-5 .story-punchline {
        white-space: nowrap;
    }
}

/* Shorter Phone Portrait fallback (< 750px tall) so panels never overflow */
@media only screen and (max-width: 767px) and (orientation: portrait) and (max-height: 750px) {
    #ui-layer #hud-library.active {
        display: none;
    }
}

/* Phone Landscape: Move HUD panels slightly higher to balance the screen,
   and enable Skyscape top logo companion decorations (#top-logo-hud-frame) scaled cleanly! */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    #start-btn {
        font-size: 1.2rem;
        padding: 10px 25px;
        width: auto;
        min-width: 200px;
    }

    #start-btn.loading {
        font-size: 0.75rem;
        padding: 10px 15px;
        letter-spacing: 2px;
    }

    #ui-layer #hud-left,
    #ui-layer #hud-right {
        top: auto;
        bottom: 2px;
        width: auto;
        border: none;
        padding: 2px 5px;
        font-size: 9px;
        z-index: 60;
        background: rgba(0, 0, 0, 0.6);
        line-height: 1.1;
    }

    #ui-layer #hud-left {
        left: 10px;
        border-left: 2px solid #00ffcc;
    }

    #ui-layer #hud-right {
        left: auto;
        right: 25px;
        text-align: right;
        border-right: 2px solid #00ffcc;
    }

    #ui-layer #hud-left .data-row,
    #ui-layer #hud-right .data-row {
        margin-bottom: 0;
    }

    #audio-toggle {
        top: 5px;
        left: 5px;
        padding: 2px 5px;
        font-size: 9px;
    }

    #skip-btn {
        top: auto;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 180px;
        border-bottom: none;
        background: rgba(0, 20, 15, 0.95);
        z-index: 5000;
        padding: 5px;
        font-size: 10px;
        height: 25px;
    }

    #ui-layer #hud-library.active {
        display: none;
    }

    #ui-layer #hud-targets {
        top: auto;
        bottom: 46px;
        right: 16px;
        left: auto;
        transform: none;
        width: min(56vw, 520px);
        height: min(236px, calc(100vh - 86px));
        display: block;
    }

    #ui-layer #hud-analysis {
        top: auto;
        bottom: 46px;
        left: 12px;
        right: auto;
        transform: none;
        width: min(38vw, 285px);
        height: min(236px, calc(100vh - 86px));
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #ui-layer #hud-targets .map-reticle-overlay {
        width: 50%;
        height: calc(100% - 24px);
    }

    #ui-layer #hud-targets .hud-console-footer {
        display: none;
    }

    #ui-layer #hud-targets canvas#tactical-map {
        width: 50%;
        height: calc(100% - 24px);
    }

    #ui-layer #hud-targets .header-container {
        margin-top: 0;
        position: absolute;
        top: 24px;
        right: 0;
        width: 50%;
        box-sizing: border-box;
        padding: 6px 5px 4px 5px;
        background: rgba(0, 20, 15, 0.9);
        height: 24px;
        z-index: 5;
    }

    #ui-layer #target-list-content {
        position: absolute;
        top: 48px;
        right: 0;
        width: 50%;
        bottom: 0;
        overflow-y: auto;
        padding: 0 5px 5px 5px;
    }

    /* Enable Skyscape top logo decorations in Phone Landscape! */
    #ui-layer #top-logo-hud-frame {
        display: flex;
        top: 2px;
        width: min(88vw, 640px);
        height: 52px;
    }

    #ui-layer #top-logo-hud-frame .logo-center-spacer {
        width: 154px;
    }

    #ui-layer #top-logo-hud-frame .logo-zenith-scale {
        font-size: 6px;
        top: 0px;
    }

    #ui-layer #top-logo-hud-frame .logo-hud-wing {
        padding: 3px 10px;
        font-size: 7.5px;
    }

    #ui-layer #top-logo-hud-frame .logo-wing-label {
        font-size: 6px;
        letter-spacing: 1.4px;
    }

    #ui-layer #top-logo-hud-frame .logo-wing-val {
        font-size: 7.5px;
    }

    #ui-layer #top-logo-hud-frame .logo-wing-micro-bars {
        display: none;
    }

    #top-logo-backlight          { top: 28px; }
    #final-logo-img.center-stage { width: 40vw; }
    #final-logo-img.top-stage    { top: 28px; width: clamp(116px, 18vw, 148px); transform: translate(-50%, -50%) scale(1.0); }
    .text-a { font-size: 5vh; }
    .text-b { font-size: 18vh; }

    /* Hide bottom statusbar on Phone Landscape when at Finale so EMIT button is never obscured */
    body.at-finale-stage #story-statusbar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* --- FINALE COMMS BOX TASAPAINOITETTU VAAKATILA --- */
    #final-contact-container {
        align-items: flex-start;
        padding-top: 58px;   /* Siirtää tekstin puhtaasti Skyscape-logon ja alakaaren alapuolelle */
        padding-bottom: 8px;
        box-sizing: border-box;
    }

    #final-contact-container #whisper-terminal-stage {
        width: min(94vw, 680px);
        max-height: calc(100dvh - 64px);
        margin-top: 0;
        transform: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0 4px 8px 4px;
        box-sizing: border-box;
    }

    /* 1. Otsikko kahdella rivillä + väliviiva palautettuna */
    #final-contact-container #whisper-hero-header {
        margin-bottom: 6px;
        padding: 0;
    }

    #final-contact-container #whisper-hero-title {
        font-size: 0.94rem;
        line-height: 1.2;
        letter-spacing: 1.8px;
        margin: 0;
    }

    #final-contact-container #whisper-hero-title .hero-line-1 {
        display: block;
        white-space: nowrap;
    }

    #final-contact-container #whisper-hero-title .hero-line-2 {
        display: block;
        white-space: nowrap;
        margin-top: 1px;
    }

    #final-contact-container .whisper-hero-divider {
        display: block;
        width: 72px;
        height: 1px;
        margin: 5px auto 4px auto;
        opacity: 0.75;
    }

    #final-contact-container #whisper-hero-subtitle {
        font-size: 0.66rem;
        letter-spacing: 0.9px;
        margin: 0;
        opacity: 0.88;
    }

    /* 2. Comms Boxin tilavampi ja tasapainoinen asettelu */
    #final-contact-container #whisper-comms-box {
        padding: 8px 14px 8px 14px;
    }

    #final-contact-container .whisper-box-header {
        padding-bottom: 4px;
        margin-bottom: 6px;
    }

    #final-contact-container .whisper-box-title {
        font-size: 0.76rem;
        letter-spacing: 1.8px;
    }

    #final-contact-container .whisper-header-right {
        font-size: 0.62rem;
        padding: 1px 6px;
    }

    #final-contact-container .whisper-section {
        margin-bottom: 6px;
    }

    #final-contact-container .whisper-label-row {
        margin-bottom: 3px;
    }

    #final-contact-container .whisper-field-label {
        font-size: 0.62rem;
        letter-spacing: 1.2px;
    }

    #final-contact-container .whisper-field-meta {
        font-size: 0.58rem;
    }

    /* Aihe-napit (01, 02, 03) */
    #final-contact-container .whisper-topics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    #final-contact-container .whisper-topic-btn {
        padding: 5px 8px;
        font-size: 0.64rem;
        gap: 6px;
    }

    #final-contact-container .whisper-radio-pip {
        width: 9px;
        height: 9px;
    }

    /* Tekstialue ja aaltomuotokanvas */
    #final-contact-container #whisper-payload {
        height: 32px;
        min-height: 32px;
        padding: 4px 8px;
        font-size: 0.74rem;
        line-height: 1.3;
    }

    #final-contact-container #whisper-waveform-canvas {
        height: 12px;
        margin-top: 1px;
    }

    /* Yhteyskanavan syöttökenttä */
    #final-contact-container .whisper-echo-input-wrap {
        padding: 0 8px;
    }

    #final-contact-container .whisper-echo-prefix {
        font-size: 0.66rem;
        margin-right: 6px;
    }

    #final-contact-container #whisper-echo-input {
        padding: 4px 0;
        font-size: 0.74rem;
    }

    #final-contact-container .whisper-channel-pill {
        padding: 1px 6px;
        font-size: 0.60rem;
    }

    /* Alareuna ja EMIT-painike */
    #final-contact-container .whisper-box-footer {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
        padding-top: 6px;
    }

    #final-contact-container .whisper-route-preview {
        font-size: 0.58rem;
        line-height: 1.3;
    }

    #final-contact-container #whisper-emit-btn {
        min-width: 140px;
        padding: 5px 16px 5px 16px;
        font-size: 0.76rem;
        letter-spacing: 2px;
    }

    #final-contact-container .emit-btn-sub {
        font-size: 0.50rem;
        letter-spacing: 1.2px;
    }

    #whisper-flight-hud {
        padding: 54px 16px 12px 16px;
        gap: 8px;
    }

    #whisper-acquired-card {
        padding: 12px 18px;
        margin-bottom: 4px;
    }

    .acquired-title {
        font-size: 1.15rem;
        margin-bottom: 4px;
    }

    #acquired-apex-canvas {
        height: 36px;
    }

    /* Phone Landscape Story Monolith Boxes: wider & vertically compact so title + punchline fit on 1 line and never touch #story-statusbar */
    .story-section {
        padding: 12px 4vw 28px 4vw;
        justify-content: center;
        align-items: center;
    }

    .story-content {
        width: min(92vw, var(--story-box-width-phone-landscape, 660px));
        max-width: var(--story-box-width-phone-landscape, 660px);
        padding: 14px 26px 12px 26px;
    }

    .monolith-hud-top {
        padding-bottom: 5px;
        margin-bottom: 8px;
        font-size: 9px;
    }

    .story-content h2 {
        font-size: clamp(1.04rem, 2.15vw, 1.28rem);
        letter-spacing: 2.4px;
        margin: 0 0 7px 0;
        white-space: nowrap;
    }

    .story-content p {
        font-size: clamp(0.84rem, 1.6vw, 0.94rem);
        line-height: 1.44;
    }

    .story-content p br + br {
        display: none;
    }

    .story-punchline {
        display: block;
        margin-top: 7px;
        font-size: clamp(0.76rem, 1.45vw, 0.86rem);
        letter-spacing: 1.6px;
        white-space: nowrap;
    }

    .monolith-footer-bar {
        margin-top: 10px;
    }
}