@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* DYNAMIC CSS VARIABLES */
:root {
    --bg-color: #0d0d12;
    --hud-bg: rgba(10, 10, 15);
    --text-color: #e0e0e0;
    --neon-cyan: #0ff;
    --neon-pink: #f0f;

    /* >>> NEW: ADD THESE TWO MISSING SENSOR COLORS! <<< */
    --alert-red: #ff0033;
    --warn-orange: #ffaa00;

    /* AUDIO REACTIVE DEFAULTS */
    --bass-level: 0;
    --mid-level: 0;
    --high-level: 0;
}

/* =========================================
   >> INTERMISSION OVERLAY (PACING SYSTEM)
   ========================================= */
#intermission-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* >>> THE FIX: Dropped opacity to 0.65 and softened the blur to 6px */
    background: rgba(5, 5, 8, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#intermission-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.intermission-content {
    width: 100%;
    text-align: center;
}

.intermission-stats {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.15);
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.05);
}

.i-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.i-label {
    color: #888;
    font-size: 0.75em;
    letter-spacing: 1px;
    font-weight: bold;
}

.i-value {
    color: var(--neon-pink);
    font-weight: bold;
    font-size: 1.4em;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.4);
}

.intermission-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Modifiers for the standard .btn-cyber */
.btn-int-primary {
    background: rgba(0, 255, 255, 0.1);
    font-size: 1.1em;
    padding: 15px;
    margin-bottom: 5px;
}

.btn-int-secondary {
    background: transparent;
    border-color: #333;
    color: #888;
    font-size: 0.85em;
    padding: 10px;
    margin-bottom: 0;
    box-shadow: none;
}

.btn-int-secondary:hover {
    border-color: var(--neon-pink);
    color: var(--neon-pink);
    box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.1);
}

/* Lyrics Modal Custom Scrollbar */
#lyrics-modal-content::-webkit-scrollbar {
    width: 6px;
}
#lyrics-modal-content::-webkit-scrollbar-track {
    background: #0a0a0f;
}
#lyrics-modal-content::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 3px;
}

/* =========================================
   >> THE FINAL 10 SECONDS (PRE-CRASH OVERRIDE)
   ========================================= */
#cyber-hud.hud-pre-crash #hud-sensor-matrix {
    /* The entire box inverts, chromatic aberrations fire, and it shakes violently */
    animation: brutal-glitch 0.15s infinite !important;
    background: rgba(255, 0, 51, 0.2) !important;
    border-color: #fff !important;
}

#cyber-hud.hud-pre-crash #hud-sensor-matrix * {
    /* Destroys all remaining cyan/blue in the final moments */
    filter: hue-rotate(180deg) saturate(3) !important;
}

/* =========================================
   >> CODEX ACCORDION SYSTEM
   ========================================= */
.codex-entry {
    border-left: 2px solid var(--neon-cyan);
    background: rgba(0, 255, 255, 0.02);
    margin-bottom: 10px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* The Clickable Bar */
.codex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.codex-header:hover {
    background: rgba(0, 255, 255, 0.05);
}

.codex-title {
    color: var(--neon-pink);
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px var(--neon-pink);
    pointer-events: none;
    /* Prevents text-selection when clicking */
}

.codex-toggle {
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    pointer-events: none;
}

/* --- THE CSS GRID MAGIC (Smooth Auto-Height) --- */
.codex-body-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* Collapsed state */
    transition: grid-template-rows 0.3s ease-out;
}

.codex-body {
    overflow: hidden;
    /* Hides the text when grid is 0fr */
    padding: 0 20px;
    /* Keep top/bottom padding 0 so it shuts completely */
    color: #aaa;
    font-size: 0.9em;
    line-height: 1.6;
}

/* --- OPEN STATE --- */
.codex-entry.is-open {
    background: rgba(0, 255, 255, 0.05);
}

.codex-entry.is-open .codex-body-wrapper {
    grid-template-rows: 1fr;
    /* Expands to fit the exact height of the text */
}

.codex-entry.is-open .codex-body {
    padding: 0 20px 20px 20px;
    /* Adds bottom padding only when open */
}

/* --- LOCKED STATE TWEAKS --- */
.codex-locked {
    border-left-color: #444;
    background: rgba(255, 255, 255, 0.01);
}

.codex-locked .codex-header {
    cursor: not-allowed;
}

.codex-locked .codex-title,
.codex-locked .codex-toggle {
    color: #555;
    text-shadow: none;
}

/* Guarantee the Codex Archive outranks the Terminal */
#modal-codex {
    z-index: 20000000 !important; 
}

/* =========================================
           THE NUCLEAR OPTION (UNSTOPPABLE LYRIC GLITCH)
           ========================================= */
#track-16.lyric-panic-mode .active-line,
#track-16.lyric-panic-mode p.active-line,
#track-16.lyric-panic-mode span.active-line,
#track-16.lyric-panic-mode div.active-line {
    display: inline-block !important;
    animation: brutal-glitch 0.15s infinite !important;
    color: var(--neon-pink) !important;
    /* Massive chromatic aberration */
    text-shadow: 5px 0 var(--neon-cyan), -5px 0 red !important;
    /* Forces a visual block behind the text to guarantee you see the glitch */
    background-color: rgba(255, 0, 80, 0.1) !important;
}

@keyframes brutal-glitch {
    0% {
        transform: translate(0, 0) skewX(0deg) scale(1);
        filter: invert(0);
    }

    25% {
        transform: translate(-5px, 2px) skewX(-30deg) scale(1.05);
        filter: invert(0.2);
    }

    50% {
        transform: translate(5px, -2px) skewX(30deg) scale(0.95);
        filter: invert(0);
    }

    75% {
        transform: translate(-3px, 3px) skewX(-15deg) scale(1.1);
        filter: invert(0.8) hue-rotate(90deg);
    }

    100% {
        transform: translate(0, 0) skewX(0deg) scale(1);
        filter: invert(0);
    }
}

/* =========================================
           BACKGROUND FX KILL SWITCH
           ========================================= */

.fx-toggle-container {
    display: inline-block;
    margin: 15px 0;
    font-family: monospace;
    color: var(--neon-cyan, #00ffff);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Simple, clean styling for the checkbox (Matched to Sync Toggle) */
.fx-toggle-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--neon-cyan, #00ffff);
    background: transparent;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
    margin: 0;

    /* Flexbox perfectly centers the checkmark inside the 16px box */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-toggle-label input[type="checkbox"]:checked {
    background-color: var(--neon-cyan, #00ffff);
    box-shadow: 0 0 8px var(--neon-cyan, #00ffff);
}

.fx-toggle-label input[type="checkbox"]:checked::after {
    content: "✔";
    color: #000;
    font-size: 12px;
    /* Scaled down slightly to fit the 16px box */
    font-weight: bold;
}

/* THE MASTER OVERRIDE: Kills all animations and hides the layers */
body.disable-fx #global-blackwater-layer,
body.disable-fx #global-sinking-layer,
body.disable-fx #global-tectonic-layer,
body.disable-fx #global-lumen-layer,
body.disable-fx #global-coil-layer,
body.disable-fx #global-party-layer,
body.disable-fx #global-satellites-layer,
body.disable-fx #global-fractal-layer,
body.disable-fx #global-weather-layer,
body.disable-fx #global-tsunami-layer,
body.disable-fx #global-vulture-layer {
    display: none !important;
    animation: none !important;
}

/* =========================================
           GLOBAL LAYER MANAGEMENT
           ========================================= */
/* Push all environments to the background */
#global-blackwater-layer,
#global-sinking-layer,
#global-tectonic-layer,
#global-lumen-layer,
#global-coil-layer,
#global-party-layer,
#global-satellites-layer,
#global-fractal-layer,
#global-weather-layer,
#global-tsunami-layer,
#global-vulture-layer {
    z-index: 0 !important;
}

/* Pull the actual content (lyrics, visualizer, UI) to the front */
.page,
.track-page {
    position: relative;
    z-index: 10;
}

/* =========================================
           PRE-CRASH HUD CORRUPTION (TRACK 16 FINAL 10 SECONDS)
           ========================================= */
.hud-pre-crash {
    /* Violently vibrates the entire HUD container */
    animation: hud-panic-shake 0.15s infinite;
    filter: drop-shadow(0 0 8px rgba(255, 0, 50, 0.8));
    color: var(--neon-pink) !important;
}

.hud-pre-crash * {
    /* Force all text inside the corrupted HUD to turn red/pink */
    color: var(--neon-pink) !important;
    text-shadow: 0 0 5px var(--neon-pink) !important;
}

@keyframes hud-panic-shake {
    0% {
        transform: translate(2px, 1px) rotate(0deg) skew(0deg);
    }

    20% {
        transform: translate(-3px, -2px) rotate(-1deg) skew(2deg);
    }

    40% {
        transform: translate(-1px, 3px) rotate(1deg) skew(-2deg);
    }

    60% {
        transform: translate(3px, 1px) rotate(0deg) skew(1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg) skew(-1deg);
    }

    100% {
        transform: translate(1px, 2px) rotate(-1deg) skew(0deg);
    }
}

/* -----------------------------------------
           PRE-CRASH TEXT ANIMATIONS
           ----------------------------------------- */
.animated-error {
    color: var(--neon-pink) !important;
    text-shadow: 0 0 8px var(--neon-pink) !important;
    font-weight: bold;
    /* Combines a harsh blink with a physical left/right text jitter */
    animation: fatal-blink 0.15s steps(2) infinite, text-jitter 0.1s infinite !important;
}

@keyframes fatal-blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes text-jitter {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px) skew(-2deg);
    }

    50% {
        transform: translateX(2px) skew(2deg);
    }

    75% {
        transform: translateX(-1px) skew(-1deg);
    }

    100% {
        transform: translateX(1px) skew(1deg);
    }
}

/* =========================================
           END OF LOOP SEQUENCE (KERNEL PANIC)
           ========================================= */
#end-of-loop-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #050000;
    /* Deep, suffocating system-failure red/black */
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    /* Transition removed here so the crash is instant! We will add it back dynamically in JS for the fade-out. */
}

#end-of-loop-screen.active {
    opacity: 1;
    pointer-events: all;
}

/* The rapid-fire hexadecimal memory dump */
#kernel-panic-stream {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85em;
    overflow: hidden;
    text-align: left;
    opacity: 0;
    z-index: 1;
}

#reboot-text {
    color: var(--neon-pink);
    font-size: 3em;
    letter-spacing: 5px;
    text-align: center;
    opacity: 0;
    z-index: 2;
    text-shadow: 0 0 15px var(--neon-pink);
}

#reboot-text.show {
    opacity: 1;
}

/* =========================================
           SCREEN SHUTTER OVERLAY (HEAVY TEAR GLITCH)
           ========================================= */
#screen-shutter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;

    /* Thicker, more aggressive CRT scanlines */
    background-image: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.3) 3px,
            transparent 3px,
            transparent 6px);
}

/* Extended to 450ms to let the violence play out */
.global-glitch {
    animation: shutter-heavy 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes shutter-heavy {
    0% {
        opacity: 0;
        transform: translate(0, 0) skew(0deg);
        clip-path: inset(0 0 0 0);
    }

    /* Slice 1: Yank the top half left, invert colors, inject magenta */
    10% {
        opacity: 1;
        backdrop-filter: invert(1) contrast(3) hue-rotate(90deg);
        background-color: rgba(255, 0, 255, 0.3);
        transform: translate(-20px, 5px) skew(-10deg);
        clip-path: inset(10% 0 50% 0);
    }

    /* Slice 2: Yank the middle right, blow out contrast, inject cyan */
    20% {
        opacity: 1;
        backdrop-filter: invert(0) contrast(2) sepia(1);
        background-color: rgba(0, 255, 255, 0.4);
        transform: translate(25px, -10px) skew(15deg);
        clip-path: inset(40% 0 10% 0);
    }

    /* Full Screen Static: Grayscale flash */
    30% {
        opacity: 1;
        backdrop-filter: invert(1) grayscale(1) brightness(3);
        background-color: rgba(255, 255, 255, 0.2);
        transform: translate(-5px, 15px) skew(-5deg);
        clip-path: inset(0 0 0 0);
    }

    /* Slice 3: Tiny, highly-saturated horizontal tear */
    45% {
        opacity: 0.9;
        backdrop-filter: hue-rotate(-180deg) saturate(4);
        transform: translate(15px, -5px) skew(0deg);
        clip-path: inset(20% 0 60% 0);
    }

    /* Slice 4: Harsh red system-failure tear */
    60% {
        opacity: 1;
        backdrop-filter: invert(1) contrast(4);
        background-color: rgba(255, 0, 0, 0.4);
        transform: translate(-25px, 10px) skew(10deg);
        clip-path: inset(60% 0 20% 0);
    }

    /* Re-alignment blur */
    75% {
        opacity: 1;
        backdrop-filter: blur(8px) saturate(5);
        transform: translate(5px, -5px);
        clip-path: inset(0 0 0 0);
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0);
        transform: translate(0, 0) skew(0deg);
        clip-path: inset(0 0 0 0);
    }
}

/* =========================================
           TRACK 10: VULTURE CIRCUIT (THE STALKER PEEKS)
           ========================================= */
#global-vulture-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s;
    overflow: hidden;

    /* Pitch black void, but now with a super faint predator HUD grid and drifting dust */
    background-color: #030202;
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><circle cx="20" cy="20" r="1.5" fill="rgba(255,100,0,0.06)"/><rect x="100" y="80" width="2" height="2" fill="rgba(255,0,0,0.04)"/></svg>'),
        linear-gradient(rgba(255, 50, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 50, 0, 0.1) 1px, transparent 1px);

    /* Sized perfectly so the math loops without snapping */
    background-size: 150px 150px, 60px 60px, 60px 60px;

    box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.9);

    /* The entire background slowly drifts to simulate the vulture circling above */
    animation: vulture-hud-drift 15s linear infinite;
}


@keyframes vulture-hud-drift {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: -150px 150px, -60px 60px, -60px 60px;
    }
}

/* 1. STALKER ONE (Hunts the Right and Top edges) */
#global-vulture-layer::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;

    /* A very bright, hot amber core fading into a soft red glow */
    background: radial-gradient(circle at center, rgba(255, 120, 0, 0.8) 0%, rgba(255, 30, 0, 0.4) 30%, transparent 70%);
    filter: blur(15px);

    /* Runs on a 14-second cycle */
    animation: peek-stalker-one 14s infinite;
}

/* 2. STALKER TWO (Hunts the Left and Bottom edges) */
#global-vulture-layer::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;

    /* A slightly more intense, larger orange/pink predator flare */
    background: radial-gradient(circle at center, rgba(255, 150, 0, 0.85) 0%, rgba(200, 0, 50, 0.3) 35%, transparent 75%);
    filter: blur(20px);

    /* Runs on a 19-second cycle to mathematically guarantee it feels "random" */
    animation: peek-stalker-two 19s infinite;
}

body.is-vulture #global-vulture-layer {
    opacity: 1;
    visibility: visible;
}

/* Stalker One sneaks in from the right, vanishes, then drops in from the top */
@keyframes peek-stalker-one {

    0%,
    100% {
        right: -400px;
        top: 15%;
        opacity: 0;
    }

    /* Peek 1: Right Side */
    10% {
        right: -250px;
        top: 15%;
        opacity: 1;
    }

    15% {
        right: -400px;
        top: 15%;
        opacity: 0;
    }

    /* Wait in the dark... */
    45% {
        right: 20%;
        top: -400px;
        opacity: 0;
    }

    /* Peek 2: Top Edge */
    55% {
        right: 20%;
        top: -250px;
        opacity: 1;
    }

    60% {
        right: 20%;
        top: -400px;
        opacity: 0;
    }
}

/* Stalker Two stalks the left, retreats, then flares up from the bottom */
@keyframes peek-stalker-two {

    0%,
    100% {
        left: -500px;
        bottom: 10%;
        opacity: 0;
    }

    /* Wait in the dark... */
    20% {
        left: -500px;
        bottom: 10%;
        opacity: 0;
    }

    /* Peek 1: Left Side */
    30% {
        left: -300px;
        bottom: 10%;
        opacity: 1;
    }

    40% {
        left: -500px;
        bottom: 10%;
        opacity: 0;
    }

    /* Relocate... */
    70% {
        left: 60%;
        bottom: -500px;
        opacity: 0;
    }

    /* Peek 2: Bottom Edge */
    80% {
        left: 60%;
        bottom: -300px;
        opacity: 0.9;
    }

    90% {
        left: 60%;
        bottom: -500px;
        opacity: 0;
    }
}

/* =========================================
           TRACK 1: BLACKWATER FEVER (SMOOTH & SUBTLE)
           ========================================= */
#global-blackwater-layer {
    position: fixed;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 998;

    opacity: 0;
    visibility: hidden;
    transition: opacity 3s ease, visibility 3s;

    /* Much softer, diffused glow instead of a harsh neon shadow */
    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.15));

    /* Particles are smaller and much more transparent */
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"><circle cx="50" cy="200" r="3" fill="rgba(0,255,255,0.25)"/><circle cx="180" cy="100" r="4" fill="rgba(0,255,255,0.15)"/><circle cx="100" cy="40" r="2" fill="rgba(255,0,255,0.2)"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><circle cx="30" cy="90" r="2" fill="rgba(0,255,255,0.2)"/><circle cx="90" cy="40" r="3" fill="rgba(255,0,255,0.1)"/></svg>');

    /* Slowed way down to 20 seconds for a lazy, ambient drift */
    animation: toxic-rise 20s linear infinite;
}

/* The Fever Steam (Dialed back to a soft haze) */
#global-blackwater-layer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 255, 255, 0.05) 0%, rgba(255, 0, 255, 0.02) 50%, transparent 80%);
    pointer-events: none;
    /* Gentle 6-second breathing loop */
    animation: fever-pulse 6s ease-in-out infinite alternate;
}

body.is-blackwater #global-blackwater-layer {
    opacity: 1;
    visibility: visible;
}

/* THE SEAMLESS LOOP FIX:
           Layer 1 moves X: +250px, Y: -250px (Matches the 250x250 SVG box)
           Layer 2 moves X: +120px, Y: -120px (Matches the 120x120 SVG box)
        */
@keyframes toxic-rise {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 250px -250px, 120px -120px;
    }
}

/* Smooth, subtle pulsing for the bottom steam */
@keyframes fever-pulse {
    0% {
        opacity: 0.5;
        height: 40vh;
    }

    100% {
        opacity: 0.9;
        height: 50vh;
    }
}

/* =========================================
           TRACK 8: TECTONIC TWITCH ENVIRONMENT
           ========================================= */
#global-tectonic-layer {
    position: fixed;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: 997;

    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s;
}

/* The Grinding Fault Lines */
#global-tectonic-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Two offset fracture patterns: Pink (Large) and Cyan (Small) */
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><path d="M0,150 L50,130 L90,180 L160,140 L220,190 L300,160 M90,180 L80,300 M160,140 L180,0 M220,190 L240,300 M50,130 L30,0" fill="none" stroke="rgba(255,0,255,0.25)" stroke-width="1.5"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M0,100 L40,80 L100,120 L160,70 L200,90 M100,120 L120,200 M40,80 L20,0 M160,70 L180,0" fill="none" stroke="rgba(0,255,255,0.15)" stroke-width="1"/></svg>');

    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.2));

    /* Runs two animations: The slow plate grind, and the sudden seismic twitch */
    animation: plate-grind 40s linear infinite, seismic-twitch 8s infinite;
}

/* The Subterranean Magma Pulse */
#global-tectonic-layer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh;
    background: radial-gradient(ellipse at 50% 120%, rgba(255, 0, 255, 0.08) 0%, transparent 70%);
    /* Syncs up perfectly with the 8-second twitch timer! */
    animation: magma-surge 8s infinite;
}

body.is-tectonic #global-tectonic-layer {
    opacity: 1;
    visibility: visible;
}

/* Moves the pink grid Down/Right, and the cyan grid Up/Left */
@keyframes plate-grind {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 300px 300px, -200px -200px;
    }
}

/* The Twitch: Dormant until 93%, then rapidly stutters X and Y coordinates */
@keyframes seismic-twitch {

    0%,
    92%,
    97%,
    100% {
        transform: translate(0, 0);
        opacity: 0.6;
    }

    93% {
        transform: translate(-10px, 5px);
        opacity: 0.9;
    }

    94% {
        transform: translate(8px, -4px);
        opacity: 0.5;
    }

    95% {
        transform: translate(-5px, 6px);
        opacity: 1.0;
    }

    96% {
        transform: translate(3px, -2px);
        opacity: 0.7;
    }
}

/* The magma flares up right as the plates twitch */
@keyframes magma-surge {

    0%,
    92%,
    100% {
        opacity: 0.5;
        height: 35vh;
    }

    95% {
        opacity: 1;
        height: 55vh;
    }
}

/* =========================================
           TRACK Z: DARK SATELLITES (SUBTLE OSCILLOSCOPE)
           ========================================= */
#global-satellites-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s;
    overflow: hidden;

    background:
        linear-gradient(rgba(0, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(10, 15, 20, 0.9) 0%, rgba(0, 0, 5, 1) 100%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
}

/* 1. THE SATELLITE SCAN */
#global-satellites-layer::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    right: 0;
    height: 25vh;

    background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.03) 80%, rgba(0, 255, 255, 0.1) 100%);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);

    animation: frequency-scan 6s linear infinite;
}

/* 2. THE OSCILLOSCOPE (Dimmed & Softened) */
#global-satellites-layer::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    height: 100px;

    /* Drastically lowered the stroke-opacity for all three waves */
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100"><path d="M0,50 Q100,-10 200,50 T400,50" fill="none" stroke="%2300FFFF" stroke-opacity="0.25" stroke-width="2.5"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"><path d="M0,50 L50,50 L50,20 L150,20 L150,80 L250,80 L250,50 L300,50" fill="none" stroke="%23FF00FF" stroke-opacity="0.15" stroke-width="1.5"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><path d="M0,50 L50,20 L150,80 L200,50" fill="none" stroke="%23FFFFFF" stroke-opacity="0.08" stroke-width="1"/></svg>');

    background-repeat: repeat-x;
    background-position: center;
    background-size: 400px 100px, 300px 100px, 200px 100px;

    /* Softened the drop shadow so it doesn't glare */
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.15));

    animation: signal-scroll 8s linear infinite, signal-flicker 5s infinite;
}

body.is-satellites #global-satellites-layer {
    opacity: 1;
    visibility: visible;
}

@keyframes frequency-scan {
    0% {
        top: -25vh;
    }

    100% {
        top: 120vh;
    }
}

@keyframes signal-scroll {
    0% {
        background-position: 0 center, 0 center, 0 center;
    }

    100% {
        background-position: -1200px center, -1200px center, -1200px center;
    }
}

/* The Flicker (Capped at 60% opacity instead of 100%) */
@keyframes signal-flicker {

    0%,
    46%,
    54%,
    100% {
        opacity: 0.35;
    }

    /* Base state is very faint */
    48% {
        opacity: 0.1;
    }

    /* Drops out almost entirely */
    50% {
        opacity: 0.6;
    }

    /* The spike is now muted */
    52% {
        opacity: 0.2;
    }
}

/* =========================================
           TRACK 12: FRACTAL (THE TESSERACT LATTICE)
           ========================================= */
#global-fractal-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    transition: opacity 3s ease, visibility 3s;
    overflow: hidden;

    /* A cold, deep architectural void */
    background: radial-gradient(circle at 50% 50%, #0a0a0f 0%, #020203 100%);
}

/* 1. THE STRAIGHT GRID (The Foundation) */
#global-fractal-layer::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;

    background-image:
        repeating-linear-gradient(to right,
            transparent 0, transparent 58px,
            rgba(255, 215, 0, 0.08) 59px, rgba(255, 255, 255, 0.15) 60px),
        repeating-linear-gradient(to bottom,
            transparent 0, transparent 58px,
            rgba(255, 215, 0, 0.08) 59px, rgba(255, 255, 255, 0.15) 60px);

    /* Moves diagonally to create an infinite slide */
    animation: tesseract-slide 15s linear infinite;
}

/* 2. THE DIAGONAL GRID (The Fracture) */
#global-fractal-layer::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;

    /* Intersecting 45-degree lines that create a diamond matrix */
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 83px,
            rgba(255, 215, 0, 0.05) 84px, rgba(0, 255, 255, 0.1) 85px),
        repeating-linear-gradient(-45deg,
            transparent 0, transparent 83px,
            rgba(255, 215, 0, 0.05) 84px, rgba(0, 255, 255, 0.1) 85px);

    /* Breathes in and out to create shifting geometric intersections */
    animation: tesseract-breathe 25s ease-in-out infinite alternate;

    /* Softens the edges into the darkness */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 75%);
}

body.is-fractal #global-fractal-layer {
    opacity: 1;
    visibility: visible;
}

/* Flawless infinite diagonal scroll (60px matches the straight grid spacing) */
@keyframes tesseract-slide {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 60px);
    }
}

/* Slow scaling forces the straight lines to intersect in wild new shapes */
@keyframes tesseract-breathe {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.5);
        opacity: 1;
    }
}

/* =========================================
           TRACK 2: A SINKING SHIP (BURNING ABYSS)
           ========================================= */
#global-sinking-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    transition: opacity 3s ease, visibility 3s;
    overflow: hidden;

    /* The deep, crushing dark ocean blue gradient at the bottom */
    background: linear-gradient(to top, rgba(0, 10, 25, 0.9) 0%, rgba(0, 5, 15, 0.4) 40%, transparent 100%);
}

/* THE EMBERS (Floating upward) */
#global-sinking-layer::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -20%;
    right: -20%;
    bottom: -50%;

    /* Two layers of glowing orange and red cinders */
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><circle cx="50" cy="250" r="3" fill="rgba(255,80,0,0.8)"/><circle cx="200" cy="150" r="2" fill="rgba(255,40,0,0.6)"/><circle cx="120" cy="50" r="4" fill="rgba(255,120,0,0.5)"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><circle cx="40" cy="100" r="2" fill="rgba(255,60,0,0.9)"/><circle cx="100" cy="40" r="1.5" fill="rgba(255,100,0,0.7)"/></svg>');

    /* Explicitly lock in the sizes so the math works */
    background-size: 300px 300px, 150px 150px;
    background-repeat: repeat;

    filter: drop-shadow(0 0 4px rgba(255, 60, 0, 0.8));

    animation: ember-drift 12s linear infinite;
}

/* THE RED LIGHT FADES (A pulsing fiery glow at the bottom) */
#global-sinking-layer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Moved from top to bottom */
    height: 40vh;

    /* The fire source below you, pushing light and embers upward */
    background: radial-gradient(ellipse at 50% 120%, rgba(255, 20, 0, 0.15) 0%, transparent 80%);
    animation: fire-pulse 5s ease-in-out infinite alternate;
}

body.is-sinking #global-sinking-layer {
    opacity: 1;
    visibility: visible;
}

/* Embers drift UP and slightly sideways */
@keyframes ember-drift {
    0% {
        background-position: 0 0, 0 0;
    }

    /* X and Y now move by EXACT multiples of 300 and 150! */
    100% {
        background-position: 300px -300px, -150px -150px;
    }
}

/* The fire above flickers */
@keyframes fire-pulse {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}


/* =========================================
           TRACK 11: LUMEN CAGE ENVIRONMENT (REFINED)
           ========================================= */
#global-lumen-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 996;

    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s;
    overflow: hidden;

    box-shadow: inset 0 0 150px 60px rgba(0, 0, 0, 0.98);
}

/* =========================================
   >> LUMEN CAGE: HUD HARDWARE FAILURE
   ========================================= */
.hud-box-blackout {
    background: #000000 !important;
    border-color: #020202 !important; /* A tiny hint of gray so it doesn't flatten instantly */
    background-image: none !important; /* Kills the scratched metal CRT texture */
    box-shadow: none !important;
    /* Smoothly drain the background and borders over 2 seconds instead of 0.1s */
    transition: background 2s ease-out, border-color 2s ease-out, box-shadow 0.5s ease-out !important;
}

/* =========================================
   >> LUMEN CAGE: HUD HARDWARE FAILURE
   ========================================= */
.hud-box-blackout {
    background: #000000 !important;
    border-color: #020202 !important; 
    background-image: none !important; 
    box-shadow: none !important;
    transition: background 2s ease-out, border-color 2s ease-out, box-shadow 0.5s ease-out !important;
}

.hud-box-blackout * {
    /* 1. Kill native smoothing so the keyframes can snap violently */
    transition: none !important;
    
    /* 2. Hand full control over to the stutter animation */
    animation: system-power-drain 1.5s forwards !important;
}

/* Harder, faster snaps to guarantee a mechanical sputter */
@keyframes system-power-drain {
    0%   { opacity: 1; }
    10%  { opacity: 0; }     /* Hard snap off */
    15%  { opacity: 0.8; }   /* Surge back */
    25%  { opacity: 0; }     /* Off */
    40%  { opacity: 0.5; }   /* Weak surge */
    60%  { opacity: 0.1; }   /* Dimming */
    75%  { opacity: 0.3; }   /* Last gasp */
    100% { opacity: 0; }     /* Dead */
}

#global-lumen-layer.freeze-beam::before {
    animation-play-state: paused !important;
}

#global-lumen-layer.freeze-fog::after {
    animation-play-state: paused !important;
}

#global-lumen-layer.lumen-flicker-out {
    /* Aggressive, rapid 200ms hardware glitch */
    animation: lumen-flicker-die 0.2s step-end forwards !important;
}

/* Lumen Cage: Embrace the Twitch Hijack */
#track-11.embrace-the-twitch .active-line {
    animation: brutal-glitch 0.1s infinite !important;
    color: var(--neon-pink) !important;
    text-shadow: 5px 0 var(--neon-cyan), -5px 0 red !important;
    background-color: rgba(255, 0, 80, 0.15) !important;
    transform: scale(1.1) translateX(10px) !important;
}

@keyframes lumen-flicker-die {
    0%   { opacity: 1; filter: contrast(200%) hue-rotate(90deg); }
    20%  { opacity: 0; }
    40%  { opacity: 0.9; filter: invert(1); }
    60%  { opacity: 0; }
    80%  { opacity: 0.8; }
    100% { opacity: 0; visibility: hidden; }
}

/* Force the entire webpage background pitch black instantly */
body.lumen-blackout {
    background-color: #000000 !important;
    transition: background-color 0s !important; /* Kills the slow color fade */
}

/* 1. THE BEAM (Anchored Top-Right & Diffused Bottom) */
#global-lumen-layer::before {
    content: "";
    position: absolute;
    top: -5vh;
    left: -100%;
    right: -100%;
    
    /* >>> THE FIX: Massively extended the length of the box so the bottom corners never swing onto the screen <<< */
    height: 250vh;

    background: conic-gradient(at 65% -10%,
            transparent 160deg,
            rgba(0, 255, 255, 0.1) 175deg,
            rgba(255, 255, 255, 0.25) 180deg,
            rgba(0, 255, 255, 0.1) 185deg,
            transparent 200deg);

    /* >>> THE FIX: Feathered the bottom edge (70% to 100%) so the light naturally dies out into the fog <<< */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 70%, transparent 100%);

    transform-origin: 65% 0%;
    animation: lumen-sweep 5s ease-in-out infinite alternate;
    z-index: 1;
}

/* 2. THE FOG (Raised Height) */
#global-lumen-layer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    /* Cranked height up from 35vh to 55vh so the fog bank sits higher */
    height: 55vh;

    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="150"><path d="M0,100 Q100,50 200,100 T400,100 L400,150 L0,150 Z" fill="rgba(0,255,255,0.12)"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120"><path d="M0,80 Q75,40 150,80 T300,80 L300,120 L0,120 Z" fill="rgba(255,255,255,0.08)"/></svg>');

    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 800px 50vh, 600px 40vh;

    filter: blur(15px);

    animation: sea-fog-roll 10s linear infinite;
    z-index: 2;
}

body.is-lumen #global-lumen-layer {
    opacity: 1;
    visibility: visible;
}

@keyframes lumen-sweep {
    0% {
        /* Points almost straight down, hovering safely on the right side of the screen */
        transform: rotate(5deg);
    }

    100% {
        /* Sweeps across the screen toward the bottom left, but stops before falling off */
        transform: rotate(50deg);
    }
}

@keyframes sea-fog-roll {
    0% {
        background-position: 0 bottom, 0 bottom;
    }

    100% {
        background-position: -800px bottom, 600px bottom;
    }
}

/* =========================================
           TRACK 16: THE COIL (THE DEAD MACHINE)
           ========================================= */
#global-coil-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    /* A glacially slow fade-in so the user barely realizes it's getting darker */
    transition: opacity 5s ease, visibility 5s;
    overflow: hidden;

    /* An absolute, crushing void with a faint, bruised red center */
    background: radial-gradient(circle at 50% 50%, rgba(15, 0, 5, 0.6) 0%, #000000 80%);
    box-shadow: inset 0 0 200px 50px rgba(0, 0, 0, 1);
}

/* 1. THE FALLOUT (Microscopic ash and dead data drifting downward) */
#global-coil-layer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    bottom: -100%;

    /* Ghostly white and dark red specks scattered randomly */
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="20" cy="50" r="1.5" fill="rgba(255,255,255,0.04)"/><circle cx="150" cy="120" r="1" fill="rgba(255,50,50,0.06)"/><circle cx="80" cy="180" r="2" fill="rgba(100,0,0,0.08)"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"><circle cx="100" cy="100" r="1" fill="rgba(255,255,255,0.02)"/><circle cx="250" cy="300" r="2" fill="rgba(150,0,0,0.04)"/></svg>');

    /* Exact sizes locked in for the infinite loop */
    background-size: 200px 200px, 350px 350px;

    /* An excruciatingly slow, mournful descent */
    animation: dead-ash-fall 40s linear infinite;
}

/* 2. THE DYING PULSE (A solitary, fading heartbeat) */
#global-coil-layer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Starts as a small circle in the dead center */
    width: 10vh;
    height: 10vh;
    margin-top: -5vh;
    margin-left: -5vh;
    border-radius: 50%;

    /* A soft, blurred ring of crimson light */
    box-shadow: 0 0 40px 5px rgba(200, 0, 20, 0.15), inset 0 0 20px 2px rgba(255, 0, 0, 0.05);

    opacity: 0;

    /* 14 seconds between pulses creates an agonizing wait */
    animation: dying-pulse 14s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
}

body.is-coil #global-coil-layer {
    opacity: 1;
    visibility: visible;
}

/* 1400px is the Least Common Multiple of 200 and 350, ensuring a flawless loop! */
@keyframes dead-ash-fall {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 1400px, 0 1400px;
    }
}

/* The pulse expands outward, flares slightly, and dissolves into the void */
@keyframes dying-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    50% {
        transform: scale(8);
        opacity: 0;
    }

    100% {
        transform: scale(8);
        opacity: 0;
    }
}

/* =========================================
           TRACK Y: PARTY AT THE END OF THE WORLD (THE SPECTACLE)
           ========================================= */
#global-party-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    /* Stays safely behind the lyrics */

    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s;

    /* THE DANCEFLOOR: A soft, vibrant glow at the bottom of the room */
    background: radial-gradient(ellipse at 50% 120%, rgba(255, 0, 128, 0.2) 0%, rgba(0, 255, 255, 0.1) 40%, transparent 70%);

    /* Slowly shifts the colors of the dancefloor through the entire spectrum */
    animation: party-colors 10s linear infinite;
}

/* FLASH LAYER 1 (Left and Center Flashes) */
#global-party-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Three distinct flashbulbs: White core, neon halo, fading out */
    background:
        radial-gradient(circle at 15% 40%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 255, 255, 0.3) 2%, transparent 8%),
        radial-gradient(circle at 45% 70%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.3) 3%, transparent 10%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.6) 0%, rgba(0, 255, 255, 0.2) 1%, transparent 6%);

    opacity: 0;
    /* Runs on a 3.7 second loop */
    animation: camera-flash 3.7s infinite;
}

/* FLASH LAYER 2 (Right and High Flashes) */
#global-party-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Two more flashbulbs scattered elsewhere */
    background:
        radial-gradient(circle at 75% 60%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.4) 2%, transparent 10%),
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 255, 255, 0.2) 2%, transparent 7%);

    opacity: 0;
    /* Runs on a 5.1 second loop. Because 3.7 and 5.1 are mismatched, 
               the flashes will feel completely random and organic! */
    animation: camera-flash-alt 5.1s infinite;
}

body.is-party #global-party-layer {
    opacity: 1;
    visibility: visible;
}

/* Slowly rotates the color wheel of the bottom gradient */
@keyframes party-colors {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* The Flash Animations: Stays invisible, pops violently, fades fast */
@keyframes camera-flash {

    0%,
    85%,
    100% {
        opacity: 0;
    }

    87% {
        opacity: 1;
    }

    /* Main pop */
    89% {
        opacity: 0;
    }

    /* Dark */
    92% {
        opacity: 0.4;
    }

    /* Secondary softer pop (like a flash charging) */
    94% {
        opacity: 0;
    }
}

@keyframes camera-flash-alt {

    0%,
    75%,
    100% {
        opacity: 0;
    }

    78% {
        opacity: 0.8;
    }

    81% {
        opacity: 0;
    }

    84% {
        opacity: 0.5;
    }

    87% {
        opacity: 0;
    }
}

/* =========================================
           TRACK 15: SIGNAL TSUNAMI (THE COLD LIGHT TIDE)
           ========================================= */
#global-tsunami-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    visibility: hidden;
    /* A slow, creeping fade-in */
    transition: opacity 3s ease, visibility 3s;
    overflow: hidden;

    /* "Monitors bleed cold light" - A suffocating, dark digital blue */
    background: linear-gradient(to top, rgba(0, 15, 30, 0.95) 0%, rgba(5, 5, 10, 0.9) 60%, #050508 100%);
}

/* 1. THE RISING BINARY ("Binary rises through the hollow floorboards") */
#global-tsunami-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Three massive, irregularly scattered SVG canvases to break the grid */
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><text x="45" y="80" font-family="monospace" font-size="10" fill="rgba(0,255,255,0.4)">1</text><text x="220" y="150" font-family="monospace" font-size="12" fill="rgba(255,0,255,0.25)">0</text><text x="130" y="280" font-family="monospace" font-size="9" fill="rgba(255,255,255,0.15)">[ ]</text><path d="M260,40 L266,40 M263,37 L263,43" stroke="rgba(0,255,255,0.3)" stroke-width="1"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><text x="80" y="320" font-family="monospace" font-size="11" fill="rgba(0,255,255,0.3)">0</text><text x="310" y="90" font-family="monospace" font-size="10" fill="rgba(255,255,255,0.2)">1</text><text x="150" y="190" font-family="monospace" font-size="14" fill="rgba(255,0,255,0.15)">{ }</text><rect x="350" y="250" width="1" height="12" fill="rgba(0,255,255,0.2)"/><text x="20" y="120" font-family="monospace" font-size="8" fill="rgba(255,255,255,0.1)">1</text></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><text x="250" y="150" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.1)">0</text><text x="500" y="450" font-family="monospace" font-size="18" fill="rgba(255,0,255,0.1)">1</text><text x="100" y="520" font-family="monospace" font-size="12" fill="rgba(255,255,255,0.05)">[ DATA ]</text><text x="420" y="80" font-family="monospace" font-size="14" fill="rgba(0,255,255,0.08)">1</text></svg>');

    /* Locked sizes for the math loop */
    background-size: 300px 300px, 400px 400px, 600px 600px;

    /* Slower drift since the canvas is larger */
    animation: binary-code-rise 40s linear infinite;
}

body.global-tsunami-layer #radar-blip{
    display: none !important;
}

/* Flawless vertical parallax loop! 
           Layer 1 (300px): Moves 1200px up (Fastest - 4 cycles)
           Layer 2 (400px): Moves 800px up (Medium - 2 cycles)
           Layer 3 (600px): Moves 600px up (Slowest - 1 cycle)
        */
@keyframes binary-code-rise {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 0 -1200px, 0 -800px, 0 -600px;
    }
}

/* 2. THE SILICON TIDES ("Information starts to boil") */
#global-tsunami-layer::after {
    content: "";
    position: absolute;
    bottom: -10vh;
    left: 0;
    right: 0;
    height: 50vh;

    /* A heavy, slow-moving pool of data bleeding light at the bottom */
    background:
        radial-gradient(ellipse at 30% 100%, rgba(0, 255, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 100%, rgba(0, 100, 255, 0.05) 0%, transparent 50%);

    filter: blur(10px);

    /* Slowly shifting and boiling up and down */
    animation: tide-boil 10s ease-in-out infinite alternate;
}

body.is-tsunami #global-tsunami-layer {
    opacity: 1;
    visibility: visible;
}

/* Slow, heavy liquid shifting to simulate boiling data */
@keyframes tide-boil {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0.6;
    }

    100% {
        transform: translateY(-5vh) scaleX(1.05);
        opacity: 1;
    }
}

/* =========================================
           GLOBAL WEATHER ENGINE (TRACK-REACTIVE)
           ========================================= */
#global-weather-layer {
    position: fixed;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    transition: opacity 2.5s ease, visibility 2.5s;

    transform: rotate(15deg);

    /* SVGs are now much larger with irregularly scattered lines to eliminate the repeating pattern */
    background-image:
        /* Foreground (Fast, thick, bright) - 200x200 canvas */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><line x1="20" y1="10" x2="20" y2="40" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/><line x1="130" y1="80" x2="130" y2="115" stroke="rgba(255,255,255,0.15)" stroke-width="1.5"/><line x1="70" y1="150" x2="70" y2="190" stroke="rgba(255,255,255,0.2)" stroke-width="1.2"/></svg>'),

        /* Midground (Medium, thinner, dimmer) - 150x150 canvas */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><line x1="40" y1="20" x2="40" y2="45" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><line x1="110" y1="90" x2="110" y2="120" stroke="rgba(255,255,255,0.12)" stroke-width="1"/><line x1="10" y1="130" x2="10" y2="145" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><line x1="80" y1="40" x2="80" y2="55" stroke="rgba(255,255,255,0.08)" stroke-width="1"/></svg>'),

        /* Background (Slow, tiny, very dim) - 100x100 canvas */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><line x1="30" y1="10" x2="30" y2="20" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/><line x1="80" y1="60" x2="80" y2="75" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/><line x1="15" y1="80" x2="15" y2="95" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/><line x1="60" y1="20" x2="60" y2="30" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/></svg>');

    /* Spread the animation out to 0.8s so the speed variations are visible */
    animation: cyber-storm 2.5s linear infinite;
}

/* Distant Lightning - Cut the brightness in half */
#global-weather-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    pointer-events: none;
    animation: lightning-strike 12s infinite;
}

/* Ground Mist - Dropped from 0.08 opacity to a whisper-thin 0.03 */
#global-weather-layer::after {
    content: "";
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(-15deg, rgba(0, 255, 255, 0.03), transparent);
    pointer-events: none;
}

/* Master Opacity - Cut in half from 0.7 down to 0.35 */
body.is-raining #global-weather-layer {
    opacity: 0.35;
    visibility: visible;
}

@keyframes widow-pulse {
    0% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px red);
    }

    15% {
        opacity: 1.0;
        filter: drop-shadow(0 0 12px red);
    }

    /* First beat */
    30% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px red);
    }

    45% {
        opacity: 0.8;
        filter: drop-shadow(0 0 8px red);
    }

    /* Second, weaker beat */
    60% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px red);
    }

    100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px red);
    }

    /* Long rest */
}

.widow-heartbeat {
    animation: widow-pulse 2.5s infinite ease-in-out;
}

@keyframes cyber-storm {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 0 1000px, 0 900px, 0 700px;
    }
}

/* Subtle Lightning Keyframes */
@keyframes lightning-strike {

    0%,
    94%,
    98%,
    100% {
        background: rgba(255, 255, 255, 0);
    }

    95% {
        background: rgba(255, 255, 255, 0.04);
    }

    96% {
        background: rgba(255, 255, 255, 0);
    }

    97% {
        background: rgba(255, 255, 255, 0.07);
    }
}

/* =========================================
   PERMANENT RADAR BLIP (HERO DRONE)
   ========================================= */
#radar-blip {
    fill: var(--neon-cyan);
    filter: drop-shadow(0 0 4px var(--neon-cyan));
    /* >>> THE FIX: Direct radius animation replaces wonky matrix scaling <<< */
    animation: hero-breathe 1.5s infinite alternate ease-in-out;
    /* Cleaned up shorthand properties to prevent calculation thrashing */
    transition: fill 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
    display: block !important;
    z-index: 999;
}

@keyframes hero-breathe {
    0% {
        r: 1.2px;
    }
    100% {
        r: 1.6px;
    }
}

/* =========================================
           KARAOKE LYRIC HIGHLIGHTING (UPDATED)
           ========================================= */
/* ========================================= */
.lyric-line {
    display: block;
    transition: all 0.3s ease;
    margin-bottom: 5px;
    /* Default state for upcoming lyrics: highly readable soft white */
    color: rgba(255, 255, 255, 0.7);
    transform: scale(1) translateX(0);
    /* Anchor for the transition */
    transform-origin: left center;
}

/* The style for the currently playing line (The Pop) */
.lyric-line.active-line {
    color: #ffffff !important;
    /* A sharp cyan glow to cut through the background environments */
    text-shadow:
        0 0 5px var(--neon-cyan),
        0 0 15px var(--neon-cyan) !important;
    /* Pops forward and slides slightly right */
    transform: scale(1.05) translateX(5px);
    font-weight: bold;
}

/* CRITICAL: Force the individual word spans to inherit the line's pop */
.lyric-line.active-line .lyric-word {
    color: inherit !important;
    text-shadow: inherit !important;
}

/* The style for previously played lines */
.lyric-line.passed-line {
    /* >> CHANGED: Matches the default unread color so it doesn't fade */
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
    text-shadow: none;
}

/* =========================================
           TRACK VISUAL ART (STICKY LEFT COLUMN)
           ========================================= */
.track-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

.track-visual {
    flex: 0 0 80px;
    /* This makes the art float and follow you down the page! */
    position: sticky;
    top: 250px;
    display: flex;
    justify-content: center;
    opacity: 0.8;
    z-index: 10;
}

/* Overrides the old 55px margin since Flexbox handles the spacing now */
.track-content .lyrics {
    margin-left: 0;
    flex: 1;
}



/* =========================================
           IMMERSION POLISH (SCROLLBAR, SELECTION, CRT)
           ========================================= */

/* 1. Cyberpunk Highlight/Selection Color */
::selection {
    background: var(--neon-pink);
    color: var(--bg-color);
    text-shadow: none;
}

/* 2. Custom Neon Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-left: 1px solid #222;
}

::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-pink);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Share Tech Mono', monospace;
    margin: 0;
    padding: 0;
    padding-bottom: 140px;
    padding-right: 390px; /* <--- UPDATED: Clears the Cyber-HUD & Spine */
    padding-left: 460px;  /* <--- UPDATED: Clears the massive 420px Radar */
    overflow-x: hidden;
    transition: background-color 1.5s ease;
}

/* GLOBALLY SMOOTH COLOR TRANSITIONS */
#track-indicator,
.hud-box,
.spine-fill,
.spine-node,
#audio-footer,
.track-icon,
.btn-audio,
.dropdown-content,
.glitch,
#hud-art-text,
.meta-value,
.term-error,
.term-sys,
#bg-grid,
.shard,
#decryption-key {
    transition: background-color 1.5s ease, color 1.5s ease, border-color 1.5s ease, stroke 1.5s ease;
}

/* =========================================
           SCREEN SHUTTER OVERLAY (EASTER EGGS ONLY)
           ========================================= */
#screen-shutter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}

.global-glitch {
    animation: shutter-anim 0.15s linear both;
}

@keyframes shutter-anim {
    0% {
        backdrop-filter: contrast(1) brightness(1) hue-rotate(0deg);
        opacity: 1;
        background: transparent;
    }

    20% {
        backdrop-filter: contrast(1.2) brightness(0.8) hue-rotate(5deg);
        background: rgba(0, 0, 0, 0.1);
    }

    40% {
        backdrop-filter: contrast(1.3) brightness(1.2) hue-rotate(-5deg);
        background: rgba(255, 255, 255, 0.05);
    }

    60% {
        backdrop-filter: contrast(1.1) brightness(0.7) hue-rotate(3deg);
        background: rgba(0, 0, 0, 0.15);
    }

    80% {
        backdrop-filter: contrast(1.2) brightness(1.1) hue-rotate(-3deg);
        background: transparent;
    }

    100% {
        backdrop-filter: contrast(1) brightness(1) hue-rotate(0deg);
        opacity: 0;
    }
}

/* =========================================
           BACKGROUND EFFECTS & REACTIVE FLASHLIGHT
           ========================================= */
#bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(var(--neon-cyan) 1px, transparent 1px);
    background-size: 256px 256px;
    opacity: 0.08;
    z-index: -3;
    pointer-events: none;
}

#shards-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.shard {
    position: absolute;
    bottom: -100px;
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    pointer-events: none;
    animation: floatUp linear infinite;
    text-shadow: 0 0 5px var(--neon-cyan);
}

@keyframes floatUp {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(-120vh) rotate(360deg);
    }
}

#flashlight {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    animation: flashlight-breathe 4s infinite alternate ease-in-out;
}

@keyframes flashlight-breathe {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* =========================================
           LEFT HUD: DECRYPTION KEY
           ========================================= */
#decryption-key {
    position: fixed;
    top: 80px;
    left: 20px;
    width: 180px;
    border: 1px solid var(--neon-cyan);
    background: var(--hud-bg);
    padding: 10px;
    font-size: 0.85em;
    color: var(--neon-cyan);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 5px var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
    letter-spacing: 1px;
    z-index: 500;
}

/* =========================================
           NAVIGATION
           ========================================= */
#track-indicator {
    position: fixed;
    /* Locks it to the viewport */
    top: 20px;
    /* Floats it 20px down from the very top edge */
    left: 50%;
    /* Pushes the left edge to the center of the screen... */
    transform: translateX(-50%);
    /* ...then pulls it back exactly half its width to center it */
    width: max-content;
    /* Shrink-wraps the box to fit the text */
    z-index: 999;
    /* Keeps it above the visualizer, text, and anomalies */

    /* The Cyber-Glass Effect (Highly recommended for readability!) */
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--neon-cyan);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.nav-content {
    z-index: 99999;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

#dropdown-menu {
    position: absolute;
    top: 100%;
    /* Forces the menu to open directly beneath the pill */
    left: 50%;
    transform: translateX(-50%);
    min-width: max-content;
    margin-top: 10px;
    /* Adds a slight gap between the pill and the open menu */

    /* Match the glass effect on the dropdown */
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid var(--neon-cyan);
}


.highlight-pink {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
}

.dropdown-icon {
    font-size: 0.8em;
    color: var(--neon-pink);
    margin-left: 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 13, 18, 0.95);
    border: 1px solid var(--neon-cyan);
    border-top: none;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
    min-width: 350px;
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    border-left: 3px solid transparent;
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--neon-cyan);
    border-left: 3px solid var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
    letter-spacing: 3px;
}

.dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #000;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
}

/* =========================================
           MAIN LYRICS COLUMN
           ========================================= */
#content-column {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.page {
    padding: 100px 40px 60px 40px;
    min-height: 100vh;
    box-sizing: border-box;
    border-bottom: 1px dashed #333;
    scroll-margin-top: 60px;
}

.cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 80px;
    scroll-margin-top: 0;
}

.lyrics {
    font-size: 16px;
    margin-left: 55px;
    line-height: 1.8;
    color: #b0b0c0;
}

.protocol-badge {
    display: table;
    background: rgba(0, 255, 255, 0.05);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    padding: 2px 8px;
    margin-top: 25px;
    margin-bottom: 5px;
    font-size: 0.85em;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.1);
}

.lyric-word {
    display: inline-block;
    transition: color 0.3s;
}

.lyric-word:hover {
    animation: word-glitch 0.2s infinite;
    color: var(--neon-pink) !important;
    text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-pink);
    cursor: crosshair;
}

@keyframes word-glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-1px, 1px);
    }

    40% {
        transform: translate(1px, -1px);
    }

    60% {
        transform: translate(-1px, -1px);
    }

    80% {
        transform: translate(1px, 1px);
    }

    100% {
        transform: translate(0);
    }
}

.title-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.track-icon {
    width: 40px;
    height: 40px;
    stroke: var(--neon-cyan);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px var(--neon-cyan));
    flex-shrink: 0;
}

/* AUDIO REACTIVE GLITCH TITLE */
.glitch {
    position: relative;
    color: #fff;
    font-size: 2.5em;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--neon-cyan);
    display: inline-block;
    margin: 0;
    word-wrap: break-word;
}

.cover .glitch {
    font-size: 5em;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    word-wrap: break-word;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-pink);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
    color: transparent;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-cyan);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
    color: transparent;
}

@keyframes glitch-anim {
    0% {
        clip: rect(10px, 9999px, 80px, 0);
    }

    20% {
        clip: rect(40px, 9999px, 10px, 0);
    }

    40% {
        clip: rect(70px, 9999px, 50px, 0);
    }

    60% {
        clip: rect(20px, 9999px, 90px, 0);
    }

    80% {
        clip: rect(90px, 9999px, 30px, 0);
    }

    100% {
        clip: rect(50px, 9999px, 60px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(60px, 9999px, 20px, 0);
    }

    20% {
        clip: rect(10px, 9999px, 70px, 0);
    }

    40% {
        clip: rect(90px, 9999px, 30px, 0);
    }

    60% {
        clip: rect(40px, 9999px, 80px, 0);
    }

    80% {
        clip: rect(20px, 9999px, 50px, 0);
    }

    100% {
        clip: rect(80px, 9999px, 10px, 0);
    }
}

/* UI BUTTONS & COVER SYSTEM REQUIREMENTS */
.sys-req-box {
    background: rgba(0, 255, 255, 0.05);
    border-left: 3px solid var(--neon-cyan);
    padding: 15px 20px;
    margin: 20px 0 30px 0;
    text-align: left;
    font-size: 0.9em;
    color: #aaa;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.05);
    width: 100%;
    max-width: 600px;
}

.sys-req-box h3 {
    margin: 0 0 10px 0;
    color: var(--neon-cyan);
    font-size: 1.1em;
    letter-spacing: 2px;
}

.sys-req-item {
    margin: 5px 0;
    color: #ddd;
}

.sys-req-item span {
    color: var(--neon-pink);
}

.btn-cyber {
    display: inline-block;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(0, 255, 255, 0.05);
    text-decoration: none;
    padding: 15px 30px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.2em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1);
    cursor: pointer;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.btn-cyber:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--neon-cyan);
}

#intermission-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    background: rgba(5, 5, 8, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    
    /* NEW: Allows scroll on smaller screens when Thank You box is visible */
    overflow-y: auto;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#btn-agree-disclaimer:hover {
    background: var(--alert-red) !important;
    color: var(--bg-color) !important;
    box-shadow: 0 0 20px var(--alert-red) !important;
}

.btn-donate {
    display: inline-block;
    border: 1px solid var(--neon-pink);
    color: var(--neon-pink);
    text-decoration: none;
    padding: 10px 20px;
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    transition: all 0.3s ease;
    background: transparent;
    box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.1);
    margin-top: 30px;
    cursor: pointer;
}

.btn-donate:hover {
    background: var(--neon-pink);
    color: var(--bg-color);
    box-shadow: 0 0 15px var(--neon-pink);
}

/* NEURAL SPINE TRACK LABELS */
.spine-label {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    white-space: nowrap;
    letter-spacing: 1px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* The "+" sign targets the adjacent sibling, keeping it safe from the dot's scaling! */
.spine-node.active+.spine-label {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.spine-node:hover+.spine-label {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
}



/* Terminal Liner Notes & Easter Egg */
.terminal-log {
    background: #050508;
    border: 1px solid #333;
    padding: 30px;
    margin-top: 10px;
    color: var(--neon-pink);
    font-size: 0.9em;
    box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.05);
    text-align: left;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    pointer-events: auto;
}

.terminal-log p {
    margin: 5px 0;
}

.terminal-text {
    color: #aaa;
    margin-top: 20px !important;
}

.input-line {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

#easter-egg-input {
    background: transparent;
    border: none;
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1em;
    text-transform: uppercase;
    outline: none;
    margin-left: 10px;
    flex: 1;
    text-shadow: 0 0 5px var(--neon-cyan);
}

#easter-egg-input::placeholder {
    color: rgba(0, 255, 255, 0.3);
}

/* EASTER EGG CLASSES */
.quake-mode {
    animation: quake-anim 0.1s infinite !important;
}

@keyframes quake-anim {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(2px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.void-mode {
    --neon-cyan: #333 !important;
    --neon-pink: #555 !important;
    --text-color: #444 !important;
}

.void-mode #bg-grid,
.void-mode #shards-container,
.void-mode #flashlight {
    display: none !important;
}

/* =========================================
           NEURAL SPINE (REACTIVE PULSE)
           ========================================= */
#neural-spine {
    position: fixed;
    top: 120px;
    right: 350px;
    height: calc(100vh - 280px);
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.spine-track {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
}

.spine-fill {
    position: absolute;
    top: 0;
    width: 2px;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    z-index: -1;
    height: 0%;
}

.spine-node {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 2px solid #555;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s;
}

.spine-node:hover {
    border-color: var(--neon-pink);
}

.spine-node.active {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    transform: scale(1.5);
    box-shadow: 0 0 15px var(--neon-cyan);
    animation: spine-pulse 1.5s infinite alternate ease-in-out;
}

@keyframes spine-pulse {
    0% { transform: scale(1.4); box-shadow: 0 0 10px var(--neon-cyan); }
    100% { transform: scale(1.7); box-shadow: 0 0 20px var(--neon-cyan); }
}

/* =========================================
           CYBER-HUD (REACTIVE BORDERS)
           ========================================= */
#cyber-hud {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 300px;
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 500;
}

.hud-box {
    background: var(--hud-bg);
    border: 1px solid var(--neon-cyan);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 0 0 5px var(--neon-cyan);
    padding: 15px;
    position: relative;
    overflow: hidden;
}

/* --- COMPACT TRACK NUMBER DISPLAY --- */
/* =========================================
   >> HUD ART CONTAINER (COMPLETION METRICS)
   ========================================= */
#hud-art-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Bumped up slightly to balance the new border */
    padding: 8px 20px !important;
    height: 45px;
    min-width: 100px;
    box-sizing: border-box;
}

.hud-art-icon {
    width: 22px;
    height: 22px;
    stroke: var(--neon-pink);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px var(--neon-pink));
    flex-shrink: 0;
    transition: stroke 1.5s ease, filter 1.5s ease;
}

#hud-art-text {
    font-size: 1.2em;
    font-family: 'Share Tech Mono', monospace;
    color: var(--neon-pink);
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    white-space: nowrap;
    letter-spacing: 2px;
    
    /* >>> THE FIX: The mechanical divider */
    padding-left: 15px;
    border-left: 1px dashed var(--neon-cyan);
}

/* ... keep your existing #hud-metadata, #hud-visualizer-container, etc ... */

/* -----------------------------------------
           NEW: HUD BUTTONS & MODALS
           ----------------------------------------- */
.hud-buttons {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.btn-hud {
    flex: 1;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;

    /* THE FIX: Lock the text to one line and tweak the sizing */
    white-space: nowrap;
    font-size: 0.7em;
    /* Dropped slightly from 0.8em */
    padding: 10px 2px;
    /* Reduced side padding to give the words room */

    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease;
    /* Dropped letter-spacing from 1px to 0px to save horizontal space */
    letter-spacing: 0px;
    box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.1);
}

.btn-notify {
    background: rgba(255, 0, 255, 0.1) !important;
    border-color: var(--neon-pink) !important;
    color: var(--neon-pink) !important;
    box-shadow: 0 0 15px var(--neon-pink) !important;
    animation: notify-pulse 1s infinite alternate !important;
}

@keyframes notify-pulse {
    0% {
        box-shadow: inset 0 0 5px rgba(255, 0, 255, 0.2), 0 0 5px var(--neon-pink);
    }

    100% {
        box-shadow: inset 0 0 15px rgba(255, 0, 255, 0.4), 0 0 20px var(--neon-pink);
    }
}

.btn-hud:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.cyber-modal {
    display: none;
    position: fixed;
    z-index: 9999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cyber-modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: rgba(10, 10, 15, 0.95);
    border: 2px solid var(--neon-cyan);
    box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.1), 0 0 20px rgba(0, 255, 255, 0.2);
    padding: 40px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
}

.modal-content h3 {
    color: var(--neon-pink);
    margin: 0 0 25px 0;
    font-size: 1.5em;
    letter-spacing: 2px;
    text-shadow: 0 0 10px var(--neon-pink);
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--neon-cyan);
    font-size: 24px;
    cursor: pointer;
    text-shadow: 0 0 5px var(--neon-cyan);
    transition: 0.3s;
}

.close-modal:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
}

.modal-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

#hud-metadata h3 {
    margin: 0 0 10px 0;
    font-size: 1em;
    color: var(--neon-cyan);
    border-bottom: 1px dashed var(--neon-cyan);
    padding-bottom: 5px;
}

.meta-line {
    font-size: 0.85em;
    color: #aaa;
    margin: 5px 0;
}

.meta-value {
    color: var(--neon-pink);
    float: right;
}

#hud-visualizer-container {
    flex: 0 0 80px;
    padding: 10px;
    border-color: var(--neon-cyan);
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#hud-terminal-stream {
    flex: 1;
    font-size: 0.75em;
    color: #777;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.term-line {
    margin: 2px 0;
    font-family: 'Share Tech Mono', monospace;
}

/* --- BOOT SEQUENCE STYLES --- */
#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(5, 5, 10, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;

    display: none;
    /* Hidden until triggered via JS */
    justify-content: center;
    /* Centers the modal horizontally */
    align-items: center;
    /* Centers the modal vertically */

    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    transition: opacity 0.5s ease-out, filter 0.5s ease-out;
}

/* The physical floating window */
#boot-modal {
    width: 100%;
    max-width: 650px;
    min-height: 450px;
    /* >> CHANGED: Keeps it tall on desktop */
    height: auto;
    /* >> CHANGED: Lets it flex on mobile */
    max-height: 90vh;
    /* >> CHANGED: Stops it from growing taller than the screen */
    background-color: rgba(0, 0, 5, 0.9);
    /* Deep black/blue background */
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.15), inset 0 0 10px rgba(0, 255, 255, 0.05);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Keeps the rounded corners clean */
}

/* The fake OS window bar at the top */
.boot-header {
    background-color: var(--neon-cyan);
    color: #000;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    padding: 5px 15px;
    font-size: 0.9em;
    letter-spacing: 1px;
    text-shadow: none;
}

/* The text area */
#boot-terminal {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1em;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
    line-height: 1.5;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* >> CHANGED: Allows the text to scroll on small phones! */
    /* justify-content: flex-end; <-- Remove this if you want it to type top-down like a real BIOS! */
}

.boot-line {
    margin: 0;
    padding: 0;
}

/* The class JS uses to show it */
.boot-active {
    display: flex !important;
}

/* The glitch-out fade effect */
.boot-complete {
    opacity: 0;
    filter: contrast(300%) brightness(500%) blur(2px);
}



@keyframes pulse {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.8;
    }
}

/* =========================================
           STICKY AUDIO FOOTER & SYNC/VOLUME
           ========================================= */
#audio-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(13, 13, 18, 0.95);
    border-top: 2px solid var(--neon-pink);
    color: var(--text-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    box-sizing: border-box;
    z-index: 99999;
    backdrop-filter: blur(5px);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
    gap: 15px;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1em;
    flex: 1;
    min-width: 300px;
}

.btn-audio {
    background: none;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    padding: 5px 15px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-audio:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* Hidden class to disable Previous/Next buttons when needed */
.btn-hidden {
    visibility: hidden;
    pointer-events: none;
}

#now-playing-title {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
    text-align: left;
    white-space: nowrap;
}

.seek-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 2;
    min-width: 250px;
    font-size: 0.9em;
    color: var(--neon-cyan);
    text-shadow: 0 0 3px var(--neon-cyan);
}

.sync-vol-container {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    /* The Magic Fix: Prevents the container from shrinking! */
    flex-wrap: wrap;
    /* Allows items to wrap nicely on very small screens */
    justify-content: flex-end;
}

.sync-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--neon-cyan);
    cursor: pointer;
    user-select: none;
}

.sync-wrapper label {
    cursor: pointer;
    text-shadow: 0 0 3px var(--neon-cyan);
}

.vol-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    color: var(--neon-cyan);
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #333;
    border-radius: 2px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 10px;
    background: var(--neon-cyan);
    margin-top: -6px;
    border: 1px solid var(--bg-color);
    box-shadow: 0 0 5px var(--neon-cyan);
}

.vol-wrapper input[type=range] {
    width: 80px;
}



/* SOCIAL NETWORK BUTTONS */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.btn-social {
    display: inline-block;
    border: 1px solid #444;
    color: #aaa;
    background: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    padding: 8px 15px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-social:hover {
    color: var(--bg-color);
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan);
}

/* =========================================
   >> HUD TELEMETRY (THE UNBREAKABLE LAYOUT)
   ========================================= */
#hud-telemetry {
    height: auto !important;
    min-height: fit-content;

    /* >> BUMPED UP: Increased from 380px to 420px */
    width: 420px !important;
    box-sizing: border-box;
    padding: 20px !important;

    /* >>> THE FIX: Match the outer box corners to the inner SVG curve <<< */
    border-radius: 8px !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px !important;

    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 500;

    transform: translate(calc(var(--bass-level) * 3px),
            calc(var(--bass-level) * -4px)) rotate(calc(var(--bass-level) * 0.5deg));
    will-change: transform, box-shadow;
}

/* =========================================
   >> TELEMETRY COORDINATES
   ========================================= */
.telemetry-coords {
    width: 100%;
    text-align: center;
    font-size: 1.15em !important;
    /* Slightly dialed in so it fits beautifully */
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    /* >> THE FIX: Strictly forbids wrapping to a second line */
}

#coord-x,
#coord-y,
#coord-z {
    color: var(--neon-pink);
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    display: inline-block;
    width: 55px;
    /* >> CHANGED: Tightened up the dead space around the numbers */
    text-align: right;
    font-weight: bold;
}

/* =========================================
   >> RADAR BAY
   ========================================= */
.radar-container {
    position: relative !important;
    /* Forces it back into normal document flow */
    width: 100%;
    display: flex !important;
    justify-content: center;
    margin: 0 !important;
    padding-top: 15px !important;
    border-top: 1px dashed rgba(0, 255, 255, 0.2);

    transform: translate(var(--g-x, 0px), var(--g-y, 0px)) scale(var(--g-scale, 1)) skew(var(--g-skew, 0deg));
    filter: hue-rotate(var(--g-hue, 0deg)) invert(var(--g-inv, 0)) contrast(var(--g-cont, 100%));
    opacity: var(--g-op, 1);
    will-change: transform, filter, opacity;
}

.radar-container svg {
    position: relative !important; 
    display: block;
    
    width: 100% !important; 
    height: auto !important; 
    max-width: 420px; 
    
    /* >>> THE FIX: Force the radar to respect the bottom of the screen <<< */
    /* 100vh (Screen Height) minus ~500px of UI (Gyro, Padding, Top Offset, Footer) */
    max-height: calc(100vh - 500px) !important; 
}


/* =========================================
   >> TELEMETRY KINETIC UPGRADES
   ========================================= */

/* 1. The Gyroscope Container */
.telemetry-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--neon-cyan);
    font-size: 0.9em;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

/* =========================================
   TRIGGERABLE RADAR / GYRO ANOMALIES
   ========================================= */

/* 1. The Hyper-Spin: A smooth, high-speed rotation that scales and shifts to pink */
body.fsm-gyro-spin .gyro-svg {
    animation: fsm-hyper-spin 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
    transform-origin: center center !important;
}

@keyframes fsm-hyper-spin {
    0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 5px var(--neon-cyan)); }
    50% { transform: rotate(180deg) scale(1.15); filter: drop-shadow(0 0 20px var(--neon-pink)); }
    100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 5px var(--neon-cyan)); }
}

/* 2. The Radar Freakout: Exposes the erratic Track 16 glitch to be triggerable anywhere */
body.fsm-radar-freakout .radar-container svg {
    animation: radar-freakout 3s infinite linear !important;
}

/* --- ACTIVE RADAR OPTICS --- */
.gyro-svg {
    width: 220px;
    height: 220px;
    filter: drop-shadow(0 0 5px var(--neon-cyan));
    overflow: visible;
    /* 2. Buttery smooth release out of the warp jump */
    transition: transform 1.5s cubic-bezier(0.1, 0.7, 0.3, 1), filter 1.5s ease;
}

/* Isolate the spin to just the mechanical rings */
.gyro-hardware {
    transform-origin: 50px 50px;
}

/* The Anomaly Orbit (Hidden by default) */
.track-orbit {
    opacity: 0;
    transform-origin: 50px 50px;
    transform: rotate(-25deg);
    /* Tilts the orbit for a cool 3D perspective */
    transition: opacity 1.5s ease;
}

/* Enable smooth resizing/snapping for the terminal */
#modal-terminal {
    transition: background-color 0.3s ease;
}

.terminal-window {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover effect for the new dock button (matching your light theme) */
#btn-dock-terminal:hover {
    color: #b30024 !important;
    /* Matches your term-error red */
}

/* Guarantee the Settings Modal outranks the Terminal and all HUDs */
#modal-settings {
    z-index: 2147483647 !important; /* The absolute maximum z-index allowed by browsers */
}
/* =========================================
   THE DOCKED HUD STATE (BOTTOM CENTER)
   ========================================= */
#modal-terminal.is-docked {
    background: transparent !important;
    backdrop-filter: none !important;
    /* Kills the blur */
    -webkit-backdrop-filter: none !important;
    /* Kills the blur on Safari */
    pointer-events: none;
    /* Let clicks pass through the background */
}

#modal-terminal.is-docked .terminal-window {
    pointer-events: auto;
    position: fixed;
    bottom: 95px;
    left: 50%;
    width: 600px;
    height: 220px;
    max-width: 90vw;
    margin: 0;
    transform: translateX(-50%);

    /* >>> THE FIX: Nuke the white/cyan background and harsh shadow! <<< */
    background-color: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* Ensure the input box stays highly visible when docked */
#modal-terminal.is-docked .terminal-input-line {
    background-color: rgba(0, 255, 255, 0.05);
}

/* >> THE MAGIC: Show the orbit ONLY on these specific tracks! << */
/* body.is-satellites .track-orbit {
    opacity: 1;
} */



/* --- THE RADAR BAY --- */
.radar-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    /* Pushes it down away from the numbers */
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 255, 255, 0.2);
    /* Draws a slick mechanical divider line */
}

/* =========================================
   >> MEDIA CONTROL HARDWARE UPGRADE
   ========================================= */

/* Base styling for the new icon buttons */
.btn-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    /* Overrides the old text padding */
    border: 1px solid var(--neon-cyan);
    background: rgba(0, 255, 255, 0.05);
    border-radius: 4px;
    /* Slight rounding for a hardware feel */
    transition: all 0.3s ease;
}

/* Force the SVGs to take on the neon colors */
.btn-media svg {
    width: 20px;
    height: 20px;
    fill: var(--neon-cyan);
    transition: all 0.3s ease;
}

.btn-media:hover {
    transform: scale(1.1);
    background: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan);
}

.btn-media:hover svg {
    fill: var(--bg-color);
    /* Inverts the icon color on hover */
}

/* Make the Play button a massive, primary target */
.btn-play-main {
    width: 50px;
    height: 50px;
    border-color: var(--neon-pink);
    background: rgba(255, 0, 255, 0.05);
    box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.1);
}

.btn-play-main svg {
    width: 26px;
    height: 26px;
    fill: var(--neon-pink);
    margin-left: 3px;
    /* Optical centering to make the triangle look balanced */
}

.btn-play-main:hover {
    background: var(--neon-pink);
    box-shadow: 0 0 20px var(--neon-pink);
}

/* When the JS adds the 'is-paused' class, remove the optical centering */
.btn-play-main.is-paused svg {
    margin-left: 0;
}

/* =========================================
   >> HYPER-JUMP TRANSITION
   ========================================= */

#warp-drive {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200vw;
    height: 200vh;
    pointer-events: none;
    z-index: 10;
    opacity: 0;

    /* 1. THE COLORS: Drastically lowered the alpha opacity of the cyan and pink lines */
    background: repeating-conic-gradient(from 0deg,
            transparent 0deg,
            transparent 4deg,
            rgba(0, 255, 255, 0.12) 4.1deg,
            transparent 5deg,
            rgba(255, 0, 255, 0.08) 5.1deg,
            transparent 5.5deg);

    /* 2. THE MASK: Expanded the center hole so the lines don't crowd the lyrics/UI, and softened the outer fade */
    -webkit-mask-image: radial-gradient(circle, transparent 35%, rgba(0, 0, 0, 0.6) 80%);
    mask-image: radial-gradient(circle, transparent 35%, rgba(0, 0, 0, 0.6) 80%);
}

/* =========================================
   >> THE KINETIC WARP CORE RESET
   ========================================= */
body.is-warping .gyro-svg {
    filter: drop-shadow(0 0 10px var(--neon-pink)) contrast(1.3) !important;
    transform: scale3d(1.05, 1.05, 1) rotate(4deg) !important;
    /* Buttery smooth ease-out release out of the warp jump */
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.2s ease !important;
}

/* Ensure background environments have an identical release curve */
#warp-drive {
    will-change: transform, opacity;
}

/* =========================================
   >> GPU-ACCELERATED PHANTOM LAYER DISSOLVE
   ========================================= */
.phantom-warp-layer {
    /* Promotes the temporary container to its own independent GPU layer */
    animation: phantom-fade-out 0.5s cubic-bezier(0.25, 1, 0.3, 1) forwards !important;
    pointer-events: none !important;
    transform-origin: 50px 50px;
}

@keyframes phantom-fade-out {
    0% {
        opacity: 1;
        transform: scale3d(1, 1, 1) rotate(0deg);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        /* Snappy outward expansion + micro-twist to simulate entering warp speed */
        transform: scale3d(1.12, 1.12, 1) rotate(3deg);
        filter: blur(5px);
    }
}

/* 4. THE ANIMATION: Lowered the peak opacity from 1.0 down to 0.4 */
@keyframes warp-tunnel {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }

    20% {
        opacity: 0.4;
    }

    80% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3) rotate(30deg);
    }
}

/* Smooth transition for the radar blip */
#radar-blip {
    /* >>> THE FIX: Stripped 'r' from here to stop the layout engine race condition <<< */
    transition: fill 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

/* >> THE WARP CORE IGNITION << */
/* When jumping, the drone blip flashes white-hot with a massive pink corona */
body.is-warping #radar-blip {
    fill: #ffffff !important;
    filter: drop-shadow(0 0 10px var(--neon-pink)) drop-shadow(0 0 25px var(--neon-pink)) !important;
}

/* =========================================
   >> SENSOR BANK (HEAVY HARDWARE UPGRADE)
   ========================================= */
.sensor-bank {
    display: none !important; /* >>> THE FIX: Erased from the timeline <<< */
    
    /* You can leave the rest of the properties here so they are ready when you move them later! */
    width: 100%;
    margin-top: 5px; 
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
    border-top: 1px dashed rgba(0, 255, 255, 0.2);
    padding-top: 10px; 
}

/* The Hardware Housing */
.sensor-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 255, 255, 0.02);
    border: 1px solid rgba(0, 255, 255, 0.1);
    padding: 6px 8px; /* Sleeker padding */
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    transition: all 0.3s ease;
    
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* The Label */
.sensor-row span {
    font-size: 0.75em; /* Scaled down from 0.85em */
    letter-spacing: 1px; 
    margin-bottom: 5px; /* Reduced from 8px */
    color: #666;
    font-weight: bold;
    white-space: nowrap; 
    transition: color 0.3s ease;
    display: inline-block;
    will-change: transform;
}   

/* The seamless infinite scroll animation */
@keyframes sensor-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* The Physical Glass Lightbar */
.sensor-row .led {
    width: 100%;
    height: 10px; /* Thinner, satisfying bar (down from 14px) */
    background-color: #111;
    
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.6) 2px,
        rgba(0, 0, 0, 0.6) 4px
    );
    
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

/* --- STATE: SAFE (CYAN) --- */
.sensor-row.state-safe {
    border-color: rgba(0, 255, 255, 0.2);
}

.sensor-row.state-safe span {
    color: var(--neon-cyan);
}

.sensor-row.state-safe .led {
    background-color: var(--neon-cyan);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 255, 255, 0.3);
}

/* --- STATE: WARNING (ORANGE) --- */
.sensor-row.state-warn {
    border-color: rgba(255, 170, 0, 0.4);
    background: rgba(255, 170, 0, 0.05);
}

.sensor-row.state-warn span {
    color: #ffaa00;
}

.sensor-row.state-warn .led {
    background-color: #ffaa00;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 170, 0, 0.5);
}

/* --- STATE: CRITICAL (FLASHING RED) --- */
.sensor-row.state-crit {
    border-color: rgba(255, 0, 51, 0.6);
    background: rgba(255, 0, 51, 0.08);
}

.sensor-row.state-crit span {
    color: #ff0033;
    text-shadow: 0 0 5px rgba(255, 0, 51, 0.5);
}

.sensor-row.state-crit .led {
    background-color: #ff0033;
    animation: led-panic-bar 0.35s infinite alternate;
}

@keyframes led-panic-bar {
    0% {
        opacity: 0.4;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 5px #ff0033;
    }

    100% {
        opacity: 1;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px #ff0033;
    }
}

/* =========================================
   >> SYSTEM FRACTURE SPARKS (TRUE PHYSICS)
   ========================================= */
.coil-spark {
    position: fixed;
    top: 0;
    left: 0;
    /* JS handles the physical positioning via transform */
    width: 2px;
    height: 24px;
    /* Slightly longer to emphasize the speed */
    background: linear-gradient(to bottom, #fff, #ffaa00, #ff0033);
    box-shadow: 0 0 10px #ffaa00, 0 0 20px #ff0033;
    clip-path: polygon(0% 0%, 100% 20%, 50% 100%, 0% 20%);
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
    /* Tells the browser to hardware-accelerate this */
    animation: spark-flicker 0.05s infinite alternate;
}

@keyframes spark-flicker {
    0% {
        filter: contrast(150%) brightness(100%);
    }

    100% {
        filter: contrast(300%) brightness(300%);
    }
}

/* =========================================
   >> ATMOSPHERIC DEEP RUMBLE (ANTI-CLIP FIX)
   ========================================= */
/* Applying the shake directly to your specific UI and lyric containers */
body.is-rumbling #cyber-hud,
body.is-rumbling #hud-telemetry,
body.is-rumbling .lyrics,
body.is-rumbling canvas {
    /* We use the independent 'translate' property so we don't overwrite your bass transforms! */
    animation: deep-structural-hum 0.15s ease-in-out infinite;
}

/* Sub-pixel movements create a soft, heavy vibration */
@keyframes deep-structural-hum {
    0% {
        translate: 0px 0px;
    }

    25% {
        translate: 0.5px 1px;
    }

    50% {
        translate: -0.5px -0.5px;
    }

    75% {
        translate: 1px 0.5px;
    }

    100% {
        translate: 0px 0px;
    }
}

/* =========================================
   >> RADAR UI FAILURE (TRACK 16)
   ========================================= */
.radar-container.glitch-critical svg {
    /* Runs a 3-second erratic loop constantly when active */
    animation: radar-freakout 3s infinite linear;
}

@keyframes radar-freakout {
    0% {
        transform: translate(0, 0) scale(1) skew(0deg);
        filter: hue-rotate(0deg) contrast(100%);
    }

    2% {
        transform: translate(-3px, 2px) scale(1.05) skew(8deg);
        filter: hue-rotate(90deg) contrast(200%);
        opacity: 0.8;
    }

    4% {
        transform: translate(2px, -2px) scale(0.95) skew(-8deg);
        filter: hue-rotate(0deg) contrast(100%);
        opacity: 1;
    }

    20% {
        transform: translate(0, 0) scale(1) skew(0deg);
    }

    45% {
        transform: translate(0, 0) scale(1) skew(0deg);
        opacity: 1;
    }

    46% {
        transform: translate(4px, 4px) scale(1.15);
        filter: invert(1) hue-rotate(180deg);
        opacity: 0.5;
    }

    48% {
        transform: translate(-4px, -2px) scale(0.85);
        filter: invert(0) hue-rotate(0deg);
        opacity: 1;
    }

    75% {
        transform: translate(0, 0) scale(1) skew(0deg);
    }

    95% {
        transform: translate(0, 0) scale(1) skew(0deg);
    }

    96% {
        transform: translate(2px, -2px);
        opacity: 0.2;
    }

    98% {
        transform: translate(-2px, 2px);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0) scale(1) skew(0deg);
    }
}

/* =========================================
   >> HARDWARE BOLTS & SCRATCHED METAL CRT
   ========================================= */
.hud-box,
#decryption-key,
#track-indicator {
    background-image:
        /* 4. Asymmetrical Hex Caps (Rotated uniquely per corner) */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g transform="translate(12,12) rotate(15)"><polygon points="0,-3 2.6,-1.5 2.6,1.5 0,3 -2.6,1.5 -2.6,-1.5" fill="%23050505" stroke="rgba(0,255,255,0.4)" stroke-width="1"/><circle cx="0" cy="0" r="0.75" fill="rgba(0,255,255,0.3)"/></g></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g transform="translate(12,12) rotate(-22)"><polygon points="0,-3 2.6,-1.5 2.6,1.5 0,3 -2.6,1.5 -2.6,-1.5" fill="%23050505" stroke="rgba(0,255,255,0.4)" stroke-width="1"/><circle cx="0" cy="0" r="0.75" fill="rgba(0,255,255,0.3)"/></g></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g transform="translate(12,12) rotate(40)"><polygon points="0,-3 2.6,-1.5 2.6,1.5 0,3 -2.6,1.5 -2.6,-1.5" fill="%23050505" stroke="rgba(0,255,255,0.4)" stroke-width="1"/><circle cx="0" cy="0" r="0.75" fill="rgba(0,255,255,0.3)"/></g></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g transform="translate(12,12) rotate(-5)"><polygon points="0,-3 2.6,-1.5 2.6,1.5 0,3 -2.6,1.5 -2.6,-1.5" fill="%23050505" stroke="rgba(0,255,255,0.4)" stroke-width="1"/><circle cx="0" cy="0" r="0.75" fill="rgba(0,255,255,0.3)"/></g></svg>'),

        /* Subtle CRT Scanlines */
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);

    /* Positions the 4 hex caps exactly in the corners */
    background-position: 0px 0px, 100% 0px, 0px 100%, 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat;
    background-color: var(--hud-bg);
}

/* =========================================
   >> TRACK 18: FALSE LIGHT (CREDITS / EPILOGUE)
   ========================================= */
/* Update the Master Curtain in style.css to also hide the Theatre Mode lyrics box */

/* The Master Curtain: Fades out ALL hardware UI and Lyrics */
body.state-credits #hud-telemetry,
body.state-credits #hud-art-container,
body.state-credits #hud-metadata,
body.state-credits #hud-sensor-matrix,
body.state-credits .hud-buttons,
body.state-credits #neural-spine,
body.state-credits #cyber-hud,
body.state-credits #modal-terminal,
body.state-credits .page .lyrics,
body.state-credits #theatre-lyrics-box,
body.state-credits .radar-container > svg,
body.state-credits #global-weather-layer,
body.state-credits #track-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* =========================================
   >> EPILOGUE PLAYER BAR (PLAY/PAUSE ONLY)
   ========================================= */
body.state-credits #audio-footer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.state-credits #btn-prev,
body.state-credits #btn-next,
body.state-credits #btn-restart,
body.state-credits .seek-wrapper,
body.state-credits .sync-vol-container {
    display: none !important;
}

body.state-credits .player-controls {
    justify-content: center !important;
    width: 100% !important;
}

/* Standalone Centered Typography Canvas */
#credits-text-canvas {
    position: fixed; /* Changed from absolute */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 800px; 
    height: 100vh; /* Changed to viewport height */
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    z-index: 99999 !important; 
    pointer-events: none; user-select: none;
    
    display: none; /* Stealth by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px; 
}

/* Make canvas visible ONLY during epilogue state */
body.state-credits #credits-text-canvas { display: flex !important; }

/* The Core Bleed Background */
#credits-core-bleed {
    position: fixed; /* Changed from absolute */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; height: 100vh;
    background: radial-gradient(circle, rgba(255, 170, 0, 0.15) 0%, rgba(0,0,0,0) 60%);
    opacity: 0;
    transition: opacity 8s ease-in-out;
    z-index: 99997;
    pointer-events: none;
}

/* The Shockwave Final Flash */
#credits-shockwave {
    position: fixed; /* Changed from absolute */
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: 99998;
    pointer-events: none;
}
.trigger-shockwave {
    animation: credits-supernova 3.5s cubic-bezier(0.8, 0, 0.2, 1) forwards;
}

/* Typography Line Classes & 3-Line Depth */
.credits-line { 
    font-size: 1.85em; 
    letter-spacing: 2px; 
    line-height: 1.6; 
    text-transform: uppercase; 
    transition: color 0.4s ease, opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease; 
}

/* The Ghosted Lines (Smooth transition when advancing) */
.credits-prev {
    opacity: 0.25;
    transform: scale(0.85) translateY(-10px);
    filter: blur(2px);
}
.credits-next {
    opacity: 0.25;
    transform: scale(0.85) translateY(10px);
    filter: blur(2px);
}
.credits-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px);
}

/* Phase Styles (All continuous animations stripped) */
.credits-stark, .credits-flicker, .credits-drift { 
    color: #555555; 
    text-shadow: none; 
}
.credits-echo { 
    color: #444; 
    text-shadow: none;
}
.credits-transcendent, .credits-heartbeat { 
    color: var(--neon-cyan); 
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); 
}
.credits-glitch { 
    color: var(--alert-red) !important; 
    text-shadow: 2px 0 0 #ff00c8, -2px 0 0 #00ffff !important; 
}
/* 1. Base structure ONLY. No colors here! */
.credits-triumphant { 
    font-size: 2.2em !important; 
    font-weight: bold !important; 
    letter-spacing: 6px !important; 
}

/* 2. When waiting in the "next" slot, it sits pitch black in the dark */
.credits-next.credits-triumphant {
    color: #000000 !important;
    text-shadow: none !important;
}

/* 3. The moment it hits the active slot, it triggers the flare */
.credits-active.credits-triumphant { 
    animation: triumphant-flare 3s ease-in forwards !important;
}

/* 4. The GPU handles the smooth fade natively without !important blocking it */
@keyframes triumphant-flare {
    0% {
        color: #000000;
        text-shadow: none;
    }
    100% {
        color: #ffffff;
        text-shadow: 0 0 25px #ffffff, 0 0 50px var(--neon-cyan);
    }
}

/* Subdued Skip Hint - Positioned just above the player bar */
#credits-skip-hint {
    position: fixed;
    bottom: 90px; /* Clears the audio footer safely */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85em;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.25); /* Highly transparent and subtle */
    z-index: 99999;
    pointer-events: none;
    user-select: none;
    display: none; /* Hidden by default */
    animation: hint-breathe 4s infinite alternate ease-in-out;
}

/* Show it only during the epilogue */
body.state-credits #credits-skip-hint { 
    display: block !important; 
}

/* A very slow, non-distracting pulse */
@keyframes hint-breathe {
    0% { opacity: 0.4; }
    100% { opacity: 1.0; }
}
/* =========================================
   >> PURE HTML ATMOSPHERIC PARTICLES
   ========================================= */
#credits-particles {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99996; /* Behind the text and gradient */
    pointer-events: none;
    overflow: hidden;
    display: block;
}

.credit-dust {
    position: absolute;
    top: 0; left: 0;
    border-radius: 50%;
    will-change: transform;
    opacity: 0.9;
    /* Explicitly target background-color for the GPU */
    transition: background-color 2s ease, box-shadow 2s ease; 
}

/* Phase 1: Deep Sea Snow (Brighter Gray + Soft Glow) */
#credits-particles.phase-1 .credit-dust { 
    background-color: #888888; 
    box-shadow: 0 0 3px rgba(136, 136, 136, 0.4); 
}

/* Phase 2: Abyssal Current (Silver Drift) */
#credits-particles.phase-2 .credit-dust { 
    background-color: #aaaaaa; 
    box-shadow: 0 0 4px rgba(170, 170, 170, 0.5); 
}

/* Phase 3: Ignition (Warm Embers) */
#credits-particles.phase-3 .credit-dust { 
    background-color: #ffaa00; 
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.8); 
}

/* Phase 4: Ascension (Warp Cyan) */
#credits-particles.phase-4 .credit-dust { 
    background-color: #00ffff; 
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.9); 
}
/* Custom Animations */
@keyframes credits-dying-flare { 0% { opacity: 0.6; } 100% { opacity: 1; text-shadow: 0 0 2px rgba(255,255,255,0.2); } }
@keyframes credits-water-weight { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
@keyframes credits-pulse { 0% { transform: scale(1); } 15% { transform: scale(1.03); } 30% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes credits-jitter { 0% { transform: translate(1px, 1px); } 25% { transform: translate(-1px, -1px); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, -1px); } }
/* Custom Animations (Only the final flash remains) */
@keyframes credits-supernova { 
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 
    80% { transform: translate(-50%, -50%) scale(300); opacity: 1; } 
    100% { transform: translate(-50%, -50%) scale(350); opacity: 0; } 
}

/* =========================================
   >> CODEX TAB SYSTEM
   ========================================= */
.codex-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px dashed var(--neon-cyan);
    padding-bottom: 15px;
    margin-bottom: 10px;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    /* Prevents the tabs from squishing */
}

.tab-btn {
    position: relative; /* This is the anchor point for the badge */
    overflow: visible;  /* Ensures the badge isn't cut off at the edges */
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    color: #888;
    padding: 8px 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.tab-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(0, 255, 255, 0.05);
}

.tab-btn.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2);
    text-shadow: 0 0 5px var(--neon-cyan);
}

.tab-content {
    display: none;
    animation: tabFadeIn 0.3s ease-out forwards;
}

.tab-content.active {
    display: block;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbar for the Codex Content Area */
#codex-container::-webkit-scrollbar {
    width: 6px;
}

#codex-container::-webkit-scrollbar-track {
    background: #0a0a0f;
}

#codex-container::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 3px;
}

/* --- CODEX TAB NOTIFICATIONS --- */
.tab-notify {
    background: rgba(255, 0, 255, 0.1) !important;
    border-color: var(--neon-pink) !important;
    color: var(--neon-pink) !important;
    text-shadow: 0 0 5px var(--neon-pink) !important;
    animation: notify-pulse 1s infinite alternate !important;
}

/* Dynamically injects the warning symbol */
.tab-notify::after {
    content: ' [!]';
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* =========================================
   >> CODEX LOG FORMATTING
   ========================================= */
/* Character Voices */
.c-jax {
    color: #00e5ff;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 229, 255, 0.4);
}

/* Cyan */
.c-fio {
    color: #ff00ff;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 0, 255, 0.4);
}

/* Pink */
.c-kae {
    color: #39ff14;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(57, 255, 20, 0.4);
}

/* Bio-Green (Foreshadowing the mold) */
.c-lau {
    color: #ff9900;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 153, 0, 0.4);
}

/* Warning Orange */
.c-npc {
    color: #cccccc;
    font-weight: bold;
}

/* The Captain - Cold, corporate white/blue */
.c-cap {
    color: #e0f7fa;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(224, 247, 250, 0.5);
}

/* Standard Gray for Pilots/Cops */

/* Environmental & Threats */
.c-snd {
    color: #777777;
    font-style: italic;
}

/* Dim gray for ambient sounds */
.c-err {
    color: #ff003c;
    font-weight: bold;
    text-shadow: 0 0 5px #ff003c;
}

/* Fatal errors, fire, mob chants */
.c-ano {
    color: #ffff00;
    font-style: italic;
    text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
}

/* Yellow for The Anomaly/Glowing objects */

/* Minigame Modal Styles */
#minigame-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    /* FORCE IT TO THE VERY TOP */
    font-family: monospace;
    color: #0f0;
}

#minigame-modal.hidden {
    display: none;
}

#minigame-window {
    width: 90%;
    max-width: 500px;
    background: #111;
    border: 2px solid #0f0;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.minigame-header {
    background: #0f0;
    color: #000;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

#minigame-close {
    background: #000;
    color: #0f0;
    border: 1px solid #000;
    cursor: pointer;
    font-family: monospace;
}

#minigame-content {
    padding: 20px;
    text-align: center;
}

#minigame-status {
    padding: 10px;
    border-top: 1px dashed #0f0;
    text-align: center;
    font-size: 0.9em;
}

/* Specific Game Styles */
.cipher-log {
    height: 150px;
    overflow-y: auto;
    text-align: left;
    margin-bottom: 10px;
    border: 1px solid #333;
    padding: 5px;
}

.cipher-input {
    background: #000;
    border: 1px solid #0f0;
    color: #0f0;
    padding: 5px;
    width: 80%;
}

.wave-canvas {
    background: #000;
    border: 1px solid #333;
    width: 100%;
    height: 150px;
}

.wave-sliders {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.circuit-grid {
    display: grid;
    gap: 2px;
    margin: 0 auto;
    background: #222;
    padding: 2px;
    border: 1px solid #0f0;
}

.circuit-tile {
    background: #000;
    color: #0f0;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
}

.success-text {
    color: #0f0;
    font-weight: bold;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* STATE 1: System completely offline (Cover page only) */
body.system-offline #modal-terminal.is-docked,
body.system-offline #cyber-hud,
body.system-offline #hud-telemetry,
body.system-offline #neural-spine,
body.system-offline #audio-footer,
body.system-offline #track-indicator,
body.system-offline #hud-art-container,
body.system-offline #hud-metadata,
body.system-offline #hud-sensor-matrix, /* << NEW ID! */
body.system-offline .hud-buttons {
    opacity: 0 !important;
    pointer-events: none !important;
    filter: blur(10px);
    transform: translateY(30px);
}

/* STATE 2: Booting up. Cyber-HUD frame and Terminal are visible, everything else is hidden */
body.system-booting #modal-terminal.is-docked,
body.system-booting #hud-telemetry,
body.system-booting #neural-spine,
body.system-booting #audio-footer,
body.system-booting #track-indicator,
body.system-booting #hud-art-container,
body.system-booting #hud-metadata,
body.system-booting #hud-sensor-matrix, /* << NEW ID! */
body.system-booting .hud-buttons {
    opacity: 0 !important;
    pointer-events: none !important;
    filter: blur(10px);
    transform: translateY(30px);
}

/* Hides all tracks/lyrics ONLY when completely offline, so they show during the boot sequence! */
body.system-offline .page+.page {
    display: none !important;
}

/* The Animations: Disabled on load to prevent fade-out glitches */
body:not(.system-offline) #modal-terminal.is-docked,
body:not(.system-offline) #cyber-hud,
body:not(.system-offline) #hud-telemetry,
body:not(.system-offline) #neural-spine,
body:not(.system-offline) #audio-footer,
body:not(.system-offline) #track-indicator,
body:not(.system-offline) #hud-art-container,
body:not(.system-offline) #hud-metadata,
body:not(.system-offline) #hud-sensor-matrix, /* << NEW ID! */
body:not(.system-offline) .hud-buttons {
    transition: opacity 2s ease-out, filter 2s ease-out, transform 2s cubic-bezier(0.1, 0.8, 0.1, 1);
    will-change: opacity, filter, transform;
}

/* =========================================
   M.O.T.H. SENSOR MATRIX (HARDWARE DASHBOARD)
   ========================================= */
#hud-sensor-matrix {
    width: 100%;
    flex-grow: 1; 
    min-height: 380px; 
    background: var(--hud-bg);
    border: 1px solid var(--neon-cyan);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 0 0 5px var(--neon-cyan);
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 85px 1.5fr 1fr; /* Restored back to the original 3 rows */
    gap: 15px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; 
}

/* Mechanical details (Screws and panel seams) */
#hud-sensor-matrix::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g transform="translate(12,12) rotate(15)"><polygon points="0,-3 2.6,-1.5 2.6,1.5 0,3 -2.6,1.5 -2.6,-1.5" fill="%23050505" stroke="rgba(0,255,255,0.4)" stroke-width="1"/><circle cx="0" cy="0" r="0.75" fill="rgba(0,255,255,0.3)"/></g></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g transform="translate(12,12) rotate(40)"><polygon points="0,-3 2.6,-1.5 2.6,1.5 0,3 -2.6,1.5 -2.6,-1.5" fill="%23050505" stroke="rgba(0,255,255,0.4)" stroke-width="1"/><circle cx="0" cy="0" r="0.75" fill="rgba(0,255,255,0.3)"/></g></svg>');
    background-position: 0 0, 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}

.matrix-box {
    background: rgba(0, 255, 255, 0.02);
    border: 1px solid rgba(0, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.matrix-box-title {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.65em;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    opacity: 0.7;
    font-weight: bold;
    z-index: 5;
}

/* 0A. ATMOSPHERIC SPECTROMETER */
.spectrometer-box {
    padding: 20px 10px 5px 10px;
    align-items: flex-end;
}

.spectrometer-bars {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    position: relative;
}

.spec-bar {
    flex: 1;
    background: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan);
    transform-origin: bottom;
    transition: background 0.3s, box-shadow 0.3s;
    
    /* >>> THE FIX: Use 100% height and hardware-accelerated scaling! <<< */
    height: 100%; 
    transform: scaleY(0.1);
    will-change: transform; 
}

/* GPU-Accelerated Keyframes */
@keyframes bar-bounce-1 { 0% { transform: scaleY(0.1); } 100% { transform: scaleY(0.95); } }
@keyframes bar-bounce-2 { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1.0); } }
@keyframes bar-bounce-3 { 0% { transform: scaleY(0.05); } 100% { transform: scaleY(0.6); } }

.spec-scanner {
    position: absolute;
    top: -5px; bottom: 0; left: 0;
    width: 2px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 10px #fff;
    /* TranslateX uses % of its own width, so we use a wrapper trick below, 
       but since the width is fluid, an easy hack is using viewport/container widths.
       Let's stick to the simplest hardware-accelerated fix: */
    animation: scan-left-right 2s linear infinite alternate;
    z-index: 2;
    will-change: transform;
}

.spec-readout {
    position: absolute;
    bottom: 5px;         /* Keeps it safely at the bottom */
    left: 50%;           /* Pushes it to the middle */
    transform: translateX(-50%); /* Pulls it back to true dead-center */
    
    font-size: 0.65em;
    font-weight: bold;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    z-index: 10;
    
    background: rgba(10, 10, 15, 0.85); /* Dark glass backing for legibility */
    padding: 2px 6px;
    border-radius: 2px;
    text-align: center;
    white-space: nowrap; /* Prevents the brackets from ever wrapping to a new line */
}

@keyframes scan-left-right {
    0% { left: 0%; }
    100% { left: calc(100% - 2px); }
}


/* 0B. ACTIVE PROTOCOL */
.protocol-box {
    padding: 20px 5px 5px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.protocol-icon-container {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.protocol-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px var(--neon-cyan));
    transition: stroke 0.3s, filter 0.3s;
}

.protocol-text {
    font-size: 0.6em;
    letter-spacing: 1px;
    color: var(--neon-cyan);
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    text-shadow: 0 0 4px var(--neon-cyan);
    animation: proto-blink 2s infinite alternate;
}

.icon-spin { animation: engine-spin 4s linear infinite; }
.icon-pulse { animation: pulse-scale 0.5s infinite alternate; }
.icon-dash { stroke-dasharray: 2 4; animation: dash-march 1s linear infinite; }

@keyframes pulse-scale { 0% { transform: scale(0.9); opacity: 0.7;} 100% { transform: scale(1.1); opacity: 1;} }
@keyframes dash-march { to { stroke-dashoffset: -12; } }
@keyframes proto-blink { 0%, 90% { opacity: 1; } 95% { opacity: 0.3; } 100% { opacity: 1; } }

/* 1. THRUST VECTOR */
.thrust-box {
    grid-column: span 2;
}

.quad-container {
    width: 140px;  /* >>> THE FIX: Locked perfect square <<< */
    height: 140px; /* >>> THE FIX: Locked perfect square <<< */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 15px auto 0 auto; /* Centers the square in the HUD */
    flex-shrink: 0; /* Prevents squishing */
}

.drone-chassis {
    position: absolute;
    width: 85%;
    height: 85%;
    z-index: 1;
    transition: transform 0.1s, filter 0.1s;
}

/* Move the glow to the wrapper! */
.rotor-wrapper {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    will-change: filter; /* Helps the GPU process the glow */
}

/* Bolted firmly to the 4 corners of the 140px square forever */
.rotor-tl { top: 10px; left: 10px; }
.rotor-tr { top: 10px; right: 10px; }
.rotor-bl { bottom: 10px; left: 10px; }
.rotor-br { bottom: 10px; right: 10px; }

.rotor-housing {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.2);
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.05);
    position: absolute;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rotor-blade {
    width: 80%;
    height: 80%;
    position: absolute;
    stroke: var(--neon-cyan);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    transition: stroke 0.2s; /* Removed filter */
}


.rotor-damaged .rotor-blade {
    stroke: #ff0033 !important;
    filter: drop-shadow(0 0 5px #ff0033);
    animation: rotor-stutter 0.1s infinite !important;
}
.rotor-damaged .rotor-housing {
    border-color: #ff0033 !important;
    box-shadow: inset 0 0 15px rgba(255,0,51,0.4) !important;
}

@keyframes rotor-stutter {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-5deg); }
}

/* Add these back to re-center the JS rotation! */
.engine-ring-1 { transform-origin: 50px 50px; }
.engine-ring-2 { transform-origin: 50px 50px; }

/* 2. KINETIC DRIVE */
.engine-svg {
    width: 80px;
    height: 80px;
    margin-top: 15px;
}

.engine-core { 
    fill: var(--neon-cyan); 
    filter: drop-shadow(0 0 5px var(--neon-cyan)); 
    transition: fill 0.2s, filter 0.2s, transform 0.1s; 
    transform-origin: 50px 50px;
}

@keyframes engine-spin { 100% { transform: rotate(360deg); } }

.rpm-readout {
    position: absolute;
    bottom: 5px;
    font-size: 0.7em;
    color: var(--neon-cyan);
    font-weight: bold;
}

/* 3. THERMAL CORE */
.thermal-container {
    width: 30px;
    height: 60px; /* Shrunk from 80px to fit the button */
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #000;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    margin-top: 15px;
    margin-bottom: 25px; /* Margin to push the button below */
    overflow: hidden;
}

.thermal-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Replaced scaleY with height. JS will control this now! */
    height: 10%; 
    background: linear-gradient(to top, var(--neon-cyan), #0088ff);
    box-shadow: 0 0 15px var(--neon-cyan);
    /* Added a fast height transition so JS updates still look smooth at 60fps */
    transition: height 0.1s linear, background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Crucial: Masks the bubbles so they don't spill out the top */
}

.thermal-liquid::after {
    content: "";
    position: absolute;
    bottom: 0; 
    left: 0; 
    right: 0; 
    /* Force the bubble layer to be taller than the container will ever be */
    height: 300px; 
    background-image: 
        radial-gradient(circle at 30% 10%, rgba(255,255,255,0.4) 1px, transparent 2px),
        radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5) 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,0.3) 1px, transparent 2px);
    /* 30px height on the pattern is the magic number for the loop */
    background-size: 20px 30px; 
    
    /* Animate the background-position instead of transform to avoid clipping */
    animation: thermal-boil 2s linear infinite;
    opacity: 0.5;
}

.thermal-glass-lines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(0,255,255,0.2) 10px);
    pointer-events: none;
}
/* Infinitely scrolls the pattern exactly one tile height (30px) upwards */
@keyframes thermal-boil {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px; }
    100% { background-position: 0px -30px, 0px -30px, 0px -30px; }
}

.temp-readout {
    position: absolute;
    bottom: 5px; /* Restored back to the bottom edge */
    left: 10px;
    font-size: 0.65em;
    color: #aaa;
}

#cyber-hud {
    transition-delay: 0s;
}

#hud-telemetry {
    transition-delay: 0.2s;
}

#audio-footer {
    transition-delay: 0.8s;
}

#neural-spine {
    transition-delay: 1.2s;
}

#track-indicator {
    transition-delay: 1.5s;
}

#hud-art-container {
    transition-delay: 0.3s;
}

#hud-metadata {
    transition-delay: 0.5s;
}

#hud-sensor-matrix { 
    transition-delay: 0.7s; 
} /* NEW MATRIX ID */

.hud-buttons {
    transition-delay: 0.9s;
}

/* =========================================
   CENTRALIZED BIOS BOOT STREAM
   ========================================= */
#boot-init-stream {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.95);
    width: 90vw;
    max-width: 650px;
    height: 50vh;
    max-height: 400px;
    
    /* Nearly pitch black, completely opaque */
    background-color: rgba(5, 5, 8, 0.98); 
    backdrop-filter: blur(10px);
    
    /* Hardware Window Styling */
    border: 2px solid var(--neon-cyan);
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.15), inset 0 0 40px rgba(0, 0, 0, 1);
    
    font-family: 'Share Tech Mono', monospace;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.1, 0.8, 0.3, 1);
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#boot-init-stream.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; /* The JS bug is gone, so this actually works now! */
}

/* The Solid Cyan OS Bar */
.bios-header {
    background: var(--neon-cyan);
    color: #000;
    font-weight: bold;
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    letter-spacing: 2px;
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);
    z-index: 10;
}

.bios-blink {
    animation: fatal-blink 1s steps(2) infinite;
}

#boot-stream-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* The rugged technical footer */
.bios-footer {
    border-top: 1px dashed rgba(0, 255, 255, 0.3);
    color: rgba(0, 255, 255, 0.5);
    padding: 6px 15px;
    font-size: 0.75em;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
}

/* Subtle CRT Scanlines over the BIOS */
#boot-init-stream::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 5;
}
/* =========================================
   >> COVER PAGE: SHIFTING PILLARS OF LIGHT (CINEMATIC PASS)
   ========================================= */
/* =========================================
   >> COVER PAGE: THE SLOW DESCENT (NIGHTMARE MODE)
   ========================================= */

/* >>> NEW: Solid Backdrop <<< */
#cover-black-backdrop {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    background-color: #020305;
    z-index: 2;
    pointer-events: none;
    
    /* Hidden by default so it doesn't block the tracks */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

#cover-pillars-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
    
    transform-origin: center center;
    
    /* THE BASELINE: Establishes 3D space and pure colors so the browser can do the math */
    transform: perspective(1000px) scale(1) rotateX(0deg) rotate(0deg);
    filter: hue-rotate(0deg) saturate(1) grayscale(0%) contrast(100%) brightness(1);
    
    /* 20-second timer for both movement AND color corruption */
    transition: transform 20s ease-in, filter 20s ease-in, opacity 1s ease-out, visibility 1s ease-out;
    background-color: #020305;

    /* >>> THE MAGIC HACK: Infinitely extends the background color in all directions! 
           Because it's a box-shadow, the filter perfectly color-shifts it along with the canvas,
           guaranteeing zero seams when it tilts! <<< */
    box-shadow: 0 0 0 100vmax #020305;
}

/* The Spooky Deep Red Glow */
#cover-pillars-layer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at center, rgba(180, 0, 30, 0.45) 0%, transparent 65%);
    opacity: 0;
    z-index: 3; 
    /* Keep the red glow at 12s so it peaks right as the screen goes black */
    transition: opacity 12s ease-in; 
    pointer-events: none;
}

/* The Active Boot State */
#cover-pillars-layer.boot-sequence-active {
    /* 1. THE FREEFALL: Zooms in (1.25x), tips forward (20deg), and drifts sideways (5deg) */
    transform: perspective(1000px) scale(1.25) rotateX(20deg) rotate(5deg);
    
    /* 2. THE ROT: Shifts to toxic green (-45deg), bleaches the life out (60%), 
          cranks the harshness (150%), and dims the lights (0.4) */
    filter: hue-rotate(-45deg) saturate(1.5) grayscale(60%) contrast(150%) brightness(0.4); 
}

/* The Pitch Black Transition Overlay */
#boot-blackout {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000000;
    /* >>> THE FIX: Drops the blackout BEHIND the terminal and HUD! */
    z-index: 3; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-in-out;
}

body.system-offline #cover-pillars-layer,
body.system-booting #cover-pillars-layer,
body.system-offline #cover-black-backdrop,
body.system-booting #cover-black-backdrop {
    opacity: 1;
    visibility: visible;
}



/* =========================================
   >> CRT IMPLODE TRANSITION (COVER PAGE)
   ========================================= */
.crt-implode-active {
    /* Uses a sharp cubic-bezier to make the snap feel mechanical and violent */
    animation: crt-implode 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    transform-origin: center center;
}

@keyframes crt-implode {
    0% {
        transform: scale(1, 1);
        filter: contrast(1) brightness(1);
        opacity: 1;
    }
    40% {
        /* Stage 1: Squash Y, extreme brightness for the horizontal line */
        transform: scale(1, 0.005);
        filter: contrast(2) brightness(5) drop-shadow(0 0 20px var(--neon-cyan));
        opacity: 1;
    }
    70% {
        /* Stage 2: Hold the line, start squeezing X into a single point */
        transform: scale(0.005, 0.005);
        filter: contrast(3) brightness(10) drop-shadow(0 0 50px var(--neon-pink));
        opacity: 1;
    }
    100% {
        /* Stage 3: Pop out of existence */
        transform: scale(0, 0);
        filter: contrast(3) brightness(10);
        opacity: 0;
        visibility: hidden;
    }
}

body.system-offline #global-blackwater-layer {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}



/* 2. The Blurred Volumetric Light (Softened Edges + Eased Gradients) */
#cover-pillars-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* Stripped the hard math stops. Creates a beautiful, soft bell-curve of light */
    background-image: linear-gradient(to right,
            rgba(240, 245, 255, 0.0) 0vw,
            rgba(240, 245, 255, 0.04) 2.5vw,
            rgba(240, 245, 255, 0.15) 5vw,
            /* Glowing Core */
            rgba(240, 245, 255, 0.04) 7.5vw,
            rgba(240, 245, 255, 0.0) 10vw,
            transparent 20vw);
    background-size: 20vw 100vh;
    background-repeat: repeat-x;
    z-index: 1;

    /* THE OPTICAL SCATTER: Destroys the hard CSS pixel edges */
    filter: blur(12px);

    /* THE CEILING & FLOOR FADE: Light enters from the dark and dissipates before hitting the UI */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);

    animation: pillar-shift-endless 16s infinite;
}

/* 3. The Dust Mask (Perfectly tracks the eased light beams) */
.pillar-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    /* Softened the mask edges so the dust doesn't cut off sharply */
    -webkit-mask-image: linear-gradient(to right,
            transparent 0vw,
            rgba(0, 0, 0, 0.3) 2.5vw,
            rgba(0, 0, 0, 1) 5vw,
            rgba(0, 0, 0, 0.3) 7.5vw,
            transparent 10vw,
            transparent 20vw);
    -webkit-mask-size: 20vw 100vh;
    -webkit-mask-repeat: repeat-x;
    animation: pillar-mask-shift 16s infinite;
}

.omen-text {
    position: relative;
    display: inline-block;
    /* The main text just breathes slightly, almost imperceptibly */
    animation: slow-sink 12s infinite alternate ease-in-out;
}

@keyframes slow-sink {
    0% {
        transform: translateY(0);
        opacity: 0.85;
    }

    100% {
        transform: translateY(1px);
        opacity: 0.7;
        filter: blur(0.3px);
    }
}

/* The thing that shouldn't be there */
.omen-text::after {
    content: attr(data-text);
    /* Clones the text exactly */
    position: absolute;
    left: 0;
    top: 0;
    color: #ff0033;
    /* A dark, hostile red */
    opacity: 0;
    pointer-events: none;

    /* This slices the clone in half horizontally. Only the bottom "legs" of the letters exist */
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);

    /* 8.7 seconds is a prime number, making the loop incredibly hard for the brain to predict */
    animation: parasite-bleed 8.7s infinite normal;
}

@keyframes parasite-bleed {

    0%,
    42%,
    46%,
    79%,
    83%,
    100% {
        opacity: 0;
        transform: translate(0, 0) skewX(0);
    }

    /* The primary detachment */
    43% {
        opacity: 0.8;
        transform: translate(-2px, 3px) skewX(15deg);
        filter: blur(1px);
    }

    44% {
        opacity: 0.4;
        transform: translate(1px, 4px) skewX(-5deg);
    }

    45% {
        opacity: 0.9;
        transform: translate(-1px, 5px);
    }

    /* A secondary, microscopic twitch much later to ruin the rhythm */
    80% {
        opacity: 0.6;
        transform: translate(2px, -2px) skewX(-10deg);
    }

    81% {
        opacity: 0.3;
        transform: translate(-1px, 1px);
    }
}

/* --- THE HIDDEN HUD TRIGGER --- */
/* --- THE HUD TERMINAL BUTTON --- */
#terminal-access-link {
    margin-top: 15px;
    width: 100%;
    /* Spans the full width of the telemetry box */
    box-sizing: border-box;
    padding: 10px 15px;

    background: var(--neon-cyan);
    /* Solid cyan background makes it obvious */
    color: var(--bg-color);
    /* Dark text for contrast */
    border: 1px solid var(--neon-cyan);
    border-radius: 2px;

    text-align: center;
    font-size: 0.9em;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    pointer-events: auto;

    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    transition: all 0.2s ease;
}

#terminal-access-link:hover {
    background: transparent;
    /* Hollows out on hover */
    color: var(--neon-cyan);
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2), 0 0 15px var(--neon-cyan);
}

/* Failsafe: Forces the physical terminal window to ignore clicks before the system is fully booted */
body.system-offline #modal-terminal.is-docked .terminal-window,
body.system-booting #modal-terminal.is-docked .terminal-window {
    pointer-events: none !important;
}

/* =========================================
   TRACK 13: THE STORM SYNC & WHITEOUT
   ========================================= */
body.is-tsunami #radar-blip,
body.is-raining #radar-blip{
    display: none !important;
}

body.is-turbulence #radar-blip {
    display: none !important;
}

/* The Storm Surge (Bridge Intensity) */
body.is-raining.storm-surge #global-weather-layer {
    /* Packs the rain layers closer together to increase density without speeding it up! */
    background-size: 120px 120px, 90px 90px, 60px 60px !important;
    opacity: 0.6;
}
body.is-raining.storm-surge #global-weather-layer::before {
    /* Lightning strikes every 3 seconds instead of 12 */
    animation: lightning-strike 3s infinite !important;
    background: rgba(255, 255, 255, 0.05);
}

/* The Calm (Outro Fade) */
body.is-raining.storm-calm #global-weather-layer {
    opacity: 0 !important;
    transition: opacity 10s ease-in-out !important;
}

/* The Global Whiteout (The Touch) */
.global-whiteout {
    position: absolute;
    top: 0;
    left: 50%;
    
    /* Create a massive circle perfectly centered at the top edge of the screen */
    width: 200vw;
    height: 200vw;
    margin-left: -100vw;
    margin-top: -100vw; 
    
    background: radial-gradient(circle at center, #ffffff 30%, rgba(255,255,255,0.5) 60%, transparent 80%);
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    
    /* Start small and soft */
    transform: scale(0.1);
    
    /* Slowly expand over 8 seconds */
    transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 4s ease-in;
}

.global-whiteout.active {
    opacity: 1;
    /* Bloom outward to consume the entire background */
    transform: scale(1.5); 
}

/* --- THE POWERSHELL MODAL (DARK MODE) --- */
.terminal-window {
    background-color: rgba(10, 10, 15, 0.95);
    border: 1px solid var(--neon-cyan);
    width: 90%;
    max-width: 650px;
    height: 50vh;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.05), 0 5px 25px rgba(0, 0, 0, 0.8);
    font-family: 'Share Tech Mono', monospace;
    color: #aaa;
    position: relative;
    overflow: hidden;
}

/* Subtle scanlines over the dark background */
.terminal-window::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
}

.terminal-header {
    background-color: rgba(0, 255, 255, 0.05);
    color: var(--neon-cyan);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-bottom: 1px dashed var(--neon-cyan);
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

#close-terminal {
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    color: var(--neon-cyan);
}

#close-terminal:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 8px var(--neon-pink);
}

#terminal-output {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95em;
}

#terminal-output p {
    margin: 0;
    line-height: 1.4;
}

/* The red error text */
.term-error {
    color: var(--alert-red);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 51, 0.4);
}

/* Align the prompt text with the new input box */
.terminal-input-line {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.terminal-input-line .prompt {
    margin-right: 10px;
    color: var(--neon-cyan);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

/* The actual input box */
#terminal-cmd-input {
    flex-grow: 1;
    background: rgba(0, 255, 255, 0.02);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 2px;
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1em;
    padding: 6px 10px;
    outline: none;
    text-transform: uppercase;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

/* When the user clicks inside the box */
#terminal-cmd-input:focus {
    background: rgba(0, 255, 255, 0.05);
    border-color: var(--neon-cyan);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 255, 255, 0.2);
}

#terminal-cmd-input::placeholder {
    color: rgba(0, 255, 255, 0.2);
    text-transform: none;
}

/* 4. Cinematic Grain & Illuminated Atmospheric Dust (Stays Razor Sharp) */
.pillar-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        /* Layer A: Sharp Cinematic SVG Grain */
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.12"/></svg>'),
        /* Layer B & C: Drifting Dust Particles */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><circle cx="50" cy="200" r="1.5" fill="rgba(255,255,255,0.8)"/><circle cx="180" cy="100" r="2.5" fill="rgba(255,255,255,0.4)"/><circle cx="250" cy="250" r="1" fill="rgba(255,255,255,0.6)"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><circle cx="30" cy="90" r="1.5" fill="rgba(255,255,255,0.5)"/><circle cx="90" cy="40" r="1" fill="rgba(255,255,255,0.3)"/></svg>');

    /* Lock the noise scale, let the dust tile */
    background-size: 200px 200px, 300px 300px, 150px 150px;
    animation: dust-drift-up 15s linear infinite;

    /* Matches the ceiling/floor fade of the light */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
}

/* --- ANIMATIONS --- */

/* The Dust Drifts Upward (But the noise stays perfectly still at 0,0!) */
@keyframes dust-drift-up {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 0 0, 300px -300px, -150px -150px;
    }
}

/* The Blurred Light Snap-Shift */
@keyframes pillar-shift-endless {

    0%,
    42% {
        background-position: 0 0;
        opacity: 1;
    }

    43% {
        opacity: 0;
        background-position: 0 0;
    }

    44% {
        opacity: 0.6;
        background-position: 0 0;
    }

    /* Electrical flicker */
    45% {
        opacity: 0;
        background-position: 0 0;
    }

    47.9% {
        opacity: 0;
        background-position: 0 0;
    }

    /* MECHANICAL SNAP TO -10vw */
    48.0% {
        opacity: 0;
        background-position: -10vw 0;
    }

    49% {
        opacity: 0.8;
        background-position: -10vw 0;
    }

    50%,
    92% {
        opacity: 1;
        background-position: -10vw 0;
    }

    93% {
        opacity: 0;
        background-position: -10vw 0;
    }

    94% {
        opacity: 0.6;
        background-position: -10vw 0;
    }

    95% {
        opacity: 0;
        background-position: -10vw 0;
    }

    97.9% {
        opacity: 0;
        background-position: -10vw 0;
    }

    /* MECHANICAL SNAP TO -20vw */
    98.0% {
        opacity: 0;
        background-position: -20vw 0;
    }

    99% {
        opacity: 0.8;
        background-position: -20vw 0;
    }

    100% {
        opacity: 1;
        background-position: -20vw 0;
    }
}

/* The Dust Mask Snap-Shift (Syncs perfectly with the light) */
@keyframes pillar-mask-shift {

    0%,
    42% {
        -webkit-mask-position: 0 0;
        opacity: 1;
    }

    43% {
        opacity: 0;
        -webkit-mask-position: 0 0;
    }

    44% {
        opacity: 0.6;
        -webkit-mask-position: 0 0;
    }

    45% {
        opacity: 0;
        -webkit-mask-position: 0 0;
    }

    47.9% {
        opacity: 0;
        -webkit-mask-position: 0 0;
    }

    48.0% {
        opacity: 0;
        -webkit-mask-position: -10vw 0;
    }

    49% {
        opacity: 0.8;
        -webkit-mask-position: -10vw 0;
    }

    50%,
    92% {
        opacity: 1;
        -webkit-mask-position: -10vw 0;
    }

    93% {
        opacity: 0;
        -webkit-mask-position: -10vw 0;
    }

    94% {
        opacity: 0.6;
        -webkit-mask-position: -10vw 0;
    }

    95% {
        opacity: 0;
        -webkit-mask-position: -10vw 0;
    }

    97.9% {
        opacity: 0;
        -webkit-mask-position: -10vw 0;
    }

    98.0% {
        opacity: 0;
        -webkit-mask-position: -20vw 0;
    }

    99% {
        opacity: 0.8;
        -webkit-mask-position: -20vw 0;
    }

    100% {
        opacity: 1;
        -webkit-mask-position: -20vw 0;
    }
}

/* =========================================
   SETTINGS MODAL & CYBER-TOGGLES
   ========================================= */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.1);
    padding: 12px 15px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.setting-row:hover {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
}

.setting-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85em;
    color: var(--neon-cyan);
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

/* Custom Hollow Cyberpunk Toggle */
input[type="checkbox"].cyber-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 20px;
    border: 1px solid #555;
    background: transparent;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="checkbox"].cyber-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #555;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background 0.3s ease;
}

input[type="checkbox"].cyber-toggle:checked {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.2);
}

input[type="checkbox"].cyber-toggle:checked::after {
    background: var(--neon-cyan);
    transform: translateX(20px);
    box-shadow: 0 0 5px var(--neon-cyan);
}

/* Red styling specifically for the shake toggle to indicate 'disabling' a feature */
#shake-toggle:checked, #fx-toggle:checked {
    border-color: var(--neon-pink);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.2);
}
#shake-toggle:checked::after, #fx-toggle:checked::after {
    background: var(--neon-pink);
    box-shadow: 0 0 5px var(--neon-pink);
}

/* =========================================
   STAGGERED RESPONSIVE DESIGN BREAKPOINTS
   ========================================= */


/* 0. ULTRAWIDE & 4K SCREENS: The Cinematic Upscale */
@media (min-width: 2560px) {
    body {
        /* Pushes the padding out to clear the newly upscaled HUDs */
        padding-left: 700px;
        padding-right: 550px;
    }

    #content-column {
        /* Breaks the 800px trap and lets the lyrics spread out! */
        max-width: 1400px; 
    }

    /* --- UPSCALED TYPOGRAPHY --- */
    .lyrics { font-size: 24px; line-height: 2; }
    .cover .glitch { font-size: 8em; letter-spacing: 10px; }
    .glitch { font-size: 3.5em; }
    #decryption-key { width: 250px; font-size: 1.1em; left: 40px; padding: 20px; }
    .terminal-log { max-width: 1000px; font-size: 1.1em; padding: 50px; }

    /* --- UPSCALED LEFT HUD (THE RADAR) --- */
    #hud-telemetry {
        width: 600px !important; /* Massive 600px width */
        padding: 40px !important;
        left: 40px;
        gap: 30px !important;
    }
    
    .telemetry-coords { font-size: 1.5em !important; }

    .radar-container svg { max-width: 500px !important; }
    .gyro-svg { width: 340px !important; height: 340px !important; }

    /* --- UPSCALED RIGHT HUD (TERMINAL & MATRIX) --- */
    #cyber-hud {
        width: 600px !important; 
        right: 40px;
        gap: 25px;
        /* >>> THE FIX: Pulls the bottom of the HUD up so the buttons clear the footer <<< */
        height: calc(100vh - 250px) !important; 
    }

    #hud-sensor-matrix { 
        min-height: 650px; 
        padding: 30px; 
        gap: 25px;
        grid-template-rows: 120px 1.5fr 1fr;
    }
    
    .matrix-box-title { font-size: 1em; top: 10px; left: 10px; }
    #hud-terminal-stream { font-size: 0.95em; line-height: 1.6; }
    .btn-hud { font-size: 1em; padding: 15px 5px; }

    /* --- UPSCALED NEURAL SPINE --- */
    #neural-spine {
        right: 510px; /* Snaps exactly between the new 450px HUD and the lyrics */
        width: 30px;
    }
    .spine-node { width: 12px; height: 12px; }
    .spine-label { font-size: 14px; right: 25px; }

    /* --- UPSCALED AUDIO PLAYER (SLIMMED DOWN) --- */
    #audio-footer { 
        /* >>> THE FIX: Shrunk the padding to slim the bar down <<< */
        padding: 20px 40px; 
    }
    
    .btn-media { width: 60px; height: 60px; }
    .btn-media svg { width: 30px; height: 30px; }
    
    .btn-play-main { width: 80px; height: 80px; }
    .btn-play-main svg { width: 45px; height: 45px; }
    
    #now-playing-title { font-size: 1.4em; }
    .seek-wrapper { font-size: 1.2em; }
}

/* 1. Large Laptops (~13" MacBooks): Kill the spine first, keep the terminal. */
@media (max-width: 1400px) {
    #decryption-key {
        display: none;
    }
    #neural-spine {
        display: none !important; /* Spine dies first. Dropdown takes over. */
    }
    body {
        padding-left: 460px;  /* Still clears the massive 420px left Radar */
        padding-right: 340px; /* Only needs to clear the 300px right Cyber-HUD now */
    }
}

/* 2. Tablets & Mid Laptops (768px to 1150px): The "Dense Cockpit" Squeeze */
@media (max-width: 1150px) {
    body {
        /* Leaves exactly 288px in the center on a 768px iPad */
        padding-left: 240px; 
        padding-right: 240px;
    }
    
    /* Shrink the Left Radar */
    #hud-telemetry {
        width: 220px !important; 
        padding: 15px 10px !important;
    }
    .radar-container svg { max-width: 180px !important; }
    .gyro-svg { width: 140px !important; height: 140px !important; }

    /* Shrink the Right Matrix */
    #cyber-hud {
        width: 220px !important;
        padding: 10px !important;
    }
    
    /* Force the matrix components to fit the skinny 220px column */
    #hud-sensor-matrix { padding: 10px; min-height: 300px; gap: 8px; }
    .matrix-box-title { font-size: 0.55em; top: 3px; left: 3px; }
    
    /* Shrink Drone Chassis */
    .quad-container { width: 100px !important; height: 100px !important; margin-top: 10px; }
    .rotor-wrapper { width: 28px; height: 28px; }
    .rotor-tl { top: 5px; left: 5px; }
    .rotor-tr { top: 5px; right: 5px; }
    .rotor-bl { bottom: 5px; left: 5px; }
    .rotor-br { bottom: 5px; right: 5px; }
    
    /* Shrink Engine & Thermals */
    .engine-svg { width: 60px; height: 60px; margin-top: 10px;}
    .rpm-readout { font-size: 0.6em; bottom: 2px; }
    .thermal-container { width: 20px; height: 60px; margin-top: 10px; }
    .temp-readout { font-size: 0.55em; left: 5px; }
    
    #hud-terminal-stream { font-size: 0.65em; }
    .btn-hud { font-size: 0.65em; padding: 10px 2px; }
}

/* =========================================
   STAGGERED RESPONSIVE DESIGN BREAKPOINTS
   ========================================= */

/* 0. ULTRAWIDE & 4K SCREENS: The Cinematic Upscale */
@media (min-width: 2560px) {
    body {
        padding-left: 700px;
        padding-right: 700px; 
    }

    #content-column {
        max-width: 1600px; 
    }

    .lyrics { font-size: 28px; line-height: 2.2; }
    .cover .glitch { font-size: 8em; letter-spacing: 10px; }
    .glitch { font-size: 4em; }
    #decryption-key { width: 300px; font-size: 1.2em; left: 40px; padding: 25px; }
    .terminal-log { max-width: 1200px; font-size: 1.3em; padding: 60px; }

    #hud-telemetry {
        width: 600px !important;
        padding: 40px !important;
        left: 40px;
        gap: 30px !important;
    }
    
    .telemetry-coords { font-size: 1.5em !important; }
    .radar-container svg { max-width: 500px !important; }
    .gyro-svg { width: 400px !important; height: 400px !important; }

    #cyber-hud {
        width: 600px !important; 
        right: 40px;
        gap: 25px;
        height: calc(100vh - 250px) !important; /* Clears the buttons from the footer */
    }

    #hud-sensor-matrix { 
        min-height: 650px; 
        padding: 30px; 
        gap: 25px;
        grid-template-rows: 120px 1.5fr 1fr;
    }
    
    .matrix-box-title { font-size: 1em; top: 10px; left: 10px; }
    
    .spectrometer-bars { height: 60px; }
    .spec-readout { font-size: 0.9em; bottom: 10px; }
    .protocol-icon-container { width: 60px; height: 60px; }
    .protocol-text { font-size: 0.9em; }

    .quad-container {
        width: 240px !important;  
        height: 240px !important;
        margin-top: 25px !important;
    }
    .rotor-wrapper { width: 70px; height: 70px; }
    .rotor-tl { top: 15px; left: 15px; }
    .rotor-tr { top: 15px; right: 15px; }
    .rotor-bl { bottom: 15px; left: 15px; }
    .rotor-br { bottom: 15px; right: 15px; }

    .engine-svg { width: 140px; height: 140px; margin-top: 25px; }
    .rpm-readout { font-size: 1em; bottom: 10px; }
    
    .thermal-container { width: 50px; height: 140px; margin-top: 25px; }
    .temp-readout { font-size: 0.9em; bottom: 10px; left: 15px; }

    #hud-terminal-stream { font-size: 1.1em; line-height: 1.8; }
    .btn-hud { font-size: 1.1em; padding: 20px 10px; }

    #modal-terminal.is-docked .terminal-window {
        width: 1000px;
        height: 350px;
        bottom: 120px;
    }
    .terminal-header { font-size: 1.2em; padding: 12px 20px; }
    #terminal-output { font-size: 1.2em; padding: 25px; line-height: 1.6; }
    .terminal-input-line { padding: 15px 25px; font-size: 1.2em; }

    #neural-spine {
        right: 680px; 
        width: 30px;
    }
    .spine-node { width: 14px; height: 14px; }
    .spine-label { font-size: 16px; right: 30px; }

    #audio-footer { padding: 20px 40px; } /* Slimmed down player bar */
    
    .btn-media { width: 60px; height: 60px; }
    .btn-media svg { width: 30px; height: 30px; }
    
    .btn-play-main { width: 75px; height: 75px; }
    .btn-play-main svg { width: 40px; height: 40px; }
    
    #now-playing-title { font-size: 1.4em; }
    .seek-wrapper { font-size: 1.3em; }
}

/* =========================================
   1. Large Laptops (~1440px MacBooks): Slim footer, kill spine.
   ========================================= */
@media (max-width: 1450px) {
    #decryption-key {
        display: none;
    }
    #neural-spine {
        display: none !important; 
    }
    body {
        padding-left: 460px;  
        padding-right: 340px; 
    }

    /* >>> THE FIX: Move the Left HUD up to prevent bottom-collision <<< */
    #hud-telemetry {
        top: 40px !important; 
    }

    /* >>> THE FIX: Slim down the Audio Footer so it doesn't cover the Terminal Button <<< */
    #audio-footer {
        padding: 10px 20px !important;
    }
    
    /* Shrink the chunky media buttons slightly */
    .btn-media { width: 35px; height: 35px; }
    .btn-media svg { width: 18px; height: 18px; }
    
    .btn-play-main { width: 45px; height: 45px; }
    .btn-play-main svg { width: 22px; height: 22px; }
}

/* =========================================
   2. Mid Laptops (up to 1150px): Centered Floating Dashboards
   ========================================= */
@media (max-width: 1150px) {
    body {
        padding-left: 340px; 
        padding-right: 340px;
    }
    
    #hud-telemetry {
        width: 300px !important; 
        padding: 15px !important;
        /* >>> THE FIX: Mathematically suspends it in the vertical center <<< */
        top: 0 !important; 
        bottom: 100px !important; 
        margin-top: auto !important;
        margin-bottom: auto !important;
        height: fit-content !important;
    }

    #cyber-hud {
        /* >>> THE FIX: Shrinks the container to wrap the modules, then floats it in the center! <<< */
        top: 0 !important;
        bottom: 100px !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        height: fit-content !important; 
    }

    .gyro-svg {
        width: 180px !important;
        height: 180px !important;
    }
    
    .sensor-bank {
        grid-template-columns: 1fr !important; 
    }
}


/* =========================================
   CODEX: ENCRYPTED / LOCKED ITEMS
   ========================================= */
.codex-locked-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(10, 10, 15, 0.6);
    border: 1px dashed #333;
    padding: 15px;
    margin-bottom: 15px;
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: not-allowed;
}

.codex-locked-item:hover {
    opacity: 1;
    border-color: #ffaa00; /* MOTH OS Warning Orange */
    background: rgba(255, 170, 0, 0.05);
}

.locked-icon-wrapper svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: #555;
    stroke-width: 1.5;
    transition: all 0.3s ease;
}

.codex-locked-item:hover .locked-icon-wrapper svg {
    stroke: #ffaa00;
    filter: drop-shadow(0 0 5px #ffaa00);
}

.locked-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.locked-title {
    color: #777;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 1px;
}

.codex-locked-item:hover .locked-title {
    color: #ffaa00;
}

.locked-subtitle {
    color: #555;
    font-size: 0.85em;
    margin-top: 3px;
    font-family: 'Share Tech Mono', monospace;
}

.locked-corrupted-data {
    color: #444;
    font-size: 0.8em;
    margin-top: 6px;
    letter-spacing: 2px;
    animation: pulse-corruption 2s infinite alternate;
}

@keyframes pulse-corruption {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}

/* =========================================
   >> HUD POWER ON: LASER SCAN WIPE
   ========================================= */
@keyframes crt-flicker-on {
    0% {
        opacity: 0;
        transform: translateY(20px);
        /* Hides everything from the bottom up */
        clip-path: inset(0 0 100% 0); 
        filter: brightness(2) drop-shadow(0 10px 10px var(--neon-cyan));
    }
    70% {
        opacity: 1;
        transform: translateY(-2px);
        /* Panel is fully unrolled */
        clip-path: inset(0 0 0% 0); 
        filter: brightness(1.5) drop-shadow(0 0 0 transparent);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0% 0);
        filter: brightness(1);
    }
}


/* =========================================
   >> THEATRE MODE OVERRIDES (UNIFIED & CLEANED)
   ========================================= */
body.theatre-mode {
    overflow: hidden !important; 
    padding-bottom: 0 !important;
}

body.theatre-mode #content-column {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide standard Spine */
body.theatre-mode #neural-spine {
    display: none !important;
}

/* Keep Right HUD docked right */
body.theatre-mode #cyber-hud {
    right: 20px !important;
}

/* Track Pill - Absolute Top Left */
body.theatre-mode #track-indicator {
    top: 20px !important;
    left: 20px !important; 
    transform: none !important; 
    width: 450px !important; 
    z-index: 99999999 !important;
}

body.theatre-mode #dropdown-menu {
    width: 100% !important;
    min-width: 100% !important;
}

/* =========================================
   >> GPU-ACCELERATED COCKPIT FLUSH (SMOOTH REBOOT)
   ========================================= */
/* Stage 1: Graceful downward slip out */
.gyro-svg-flush {
    transform: translate3d(0, 40px, 0) scale3d(0.95, 0.95, 1) !important;
    opacity: 0 !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease-in !important;
}

/* Stage 2: Clean, text-shielded neon scale bounce back in */
.gyro-svg-fade-in {
    animation: radar-reboot-fade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards !important;
}

@keyframes radar-reboot-fade {
    0% {
        opacity: 0;
        transform: scale3d(0.95, 0.95, 1);
    }
    70% {
        opacity: 1;
        transform: scale3d(1.02, 1.02, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Ensure the layout holds perfectly steady across screen scales */
@media (min-width: 2560px) {
    #buffer-phase-overlay { top: 0; height: 100%; padding: 20px; }
    #buffer-manifest-feed { font-size: 0.9em; max-height: calc(100% - 90px); }
    #buffer-phase-overlay .bios-header { font-size: 1.1em; margin: -20px -20px 15px -20px !important; }
}

/* Ensure perfect responsiveness on mobile portrait views */
@media (max-width: 850px) {
    #buffer-phase-screen .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 20px !important;
    }
    #buffer-phase-screen .bios-header {
        margin: -20px -20px 15px -20px !important;
        font-size: 0.8em !important;
    }
}
/* =========================================
   RECURRING MOTIF: "RIGHT NOW" EFFECT
   ========================================= */

/* The Subliminal Text */
#phosphor-burn {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 15vw; 
    font-weight: bold;
    color: var(--neon-pink);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    
    /* >>> THE FIX: Pushed from -2 up to 5 so it clears opaque backgrounds! <<< */
    z-index: 5; 
    opacity: 0;
}

.phosphor-flash {
    animation: phosphor-burn-anim 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes phosphor-burn-anim {
    0% { 
        opacity: 0; 
        filter: blur(15px) drop-shadow(0 0 50px var(--neon-pink)); 
        transform: translate(-50%, -50%) scale(0.9); 
    }
    10% { 
        opacity: 0.15; /* Barely visible, subliminal */
        filter: blur(4px) drop-shadow(0 0 100px var(--neon-pink)); 
        transform: translate(-50%, -50%) scale(1.1); 
    }
    30% { 
        opacity: 0.05; 
        filter: blur(8px); 
        transform: translate(-50%, -50%) scale(1.05); 
    }
    100% { 
        opacity: 0; 
        filter: blur(20px);
        transform: translate(-50%, -50%) scale(1);
    }
}

/* The Grid Desync Tear - UPGRADED */
#bg-grid.grid-desync-active {
    z-index: 5;
    /* Force the baseline grid to light up from 0.08 to 0.4 opacity */
    opacity: 0.4 !important; 
    animation: motif-grid-tear 0.4s steps(4) forwards;
}

#bg-grid.grid-desync-active::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: inherit;
    background-size: inherit;
    opacity: 1; /* Maximum brightness for the chromatic clone */
    mix-blend-mode: screen;
    animation: motif-grid-stutter 0.4s steps(4) forwards;
}

@keyframes motif-grid-tear {
    0% { transform: scale(1); filter: none; }
    /* Scaled up from 1.05 to 1.15, and doubled the brightness */
    10% { transform: scale(1.15); filter: contrast(2) brightness(2); }
    80% { transform: scale(1.15); filter: contrast(2) brightness(2); }
    100% { transform: scale(1); filter: none; }
}

@keyframes motif-grid-stutter {
    /* Increased the drop-shadow spread and the physical XY tearing distances */
    0% { transform: translate(0, 0); filter: drop-shadow(-10px 0 var(--neon-pink)) drop-shadow(10px 0 var(--neon-cyan)); }
    20% { transform: translate(-40px, 20px); }
    40% { transform: translate(40px, -20px); }
    60% { transform: translate(-20px, 30px); }
    80% { transform: translate(30px, -30px); filter: drop-shadow(-30px 0 var(--neon-pink)) drop-shadow(30px 0 var(--neon-cyan)); }
    100% { transform: translate(0, 0); filter: none; opacity: 0; }
}
/* =========================================
   CENTER COLUMN: VISUALS & COMMS
   ========================================= */

/* The Unified Container (Re-using HUD Telemetry) */
/* =========================================
   CENTER COLUMN: VISUALS & COMMS
   ========================================= */

/* The Unified Container (Re-using HUD Telemetry) */
body.theatre-mode #hud-telemetry {
    display: flex !important; 
    position: fixed !important;
    top: 20px !important; 
    
    /* >>> THE FIX: Undoing the 250px constraint so it natively shrink-wraps! <<< */
    bottom: auto !important; 
    
    left: 50% !important;
    transform: translateX(-50%) !important; 
    width: 600px !important; 
    max-width: 80vw !important;
    height: auto !important;
    margin: 0 !important;
    
    padding: 0 !important; 
    box-sizing: border-box !important; 
    
    z-index: 100 !important;
    justify-content: center !important; 
}

/* Hide the extra HUD elements inside the container */
body.theatre-mode #hud-telemetry .sensor-bank,
body.theatre-mode #hud-telemetry #terminal-access-link,
body.theatre-mode #hud-telemetry .telemetry-header,
body.theatre-mode #hud-telemetry .telemetry-coords,
body.theatre-mode #hud-telemetry > div:first-child /* >>> THE FIX: Hides the title <<< */ {
    display: none !important;
}

/* Massive Centered Radar */
body.theatre-mode .radar-container {
    position: relative !important;
    top: auto !important; 
    left: auto !important;
    width: 100% !important; 
    /* >>> THE FIX: Prevents the height from collapsing inside the flex parent <<< */
    flex: 1 !important; 
    min-height: 0 !important; 
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transform: translate(var(--g-x, 0px), var(--g-y, 0px)) scale(var(--g-scale, 1)) skew(var(--g-skew, 0deg)) !important;
}

body.theatre-mode .radar-container svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Scaled-down Gyro (Tucked inside the container under the radar) */
body.theatre-mode #hud-gyro {
    position: relative !important;
    bottom: auto !important; 
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 400px !important;
    height: 120px !important;
    margin: 0 !important;
    
    /* >>> THE FIX: Removed padding and dashed border so it sits flush <<< */
    padding: 0 !important;
    border-top: none !important;
    
    flex-shrink: 0 !important;
}

/* 3-Line Comms Intercept Box */
#theatre-lyrics-box {
    display: none;
    position: fixed !important;
    bottom: 110px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important; 
    max-width: 80vw !important;
    height: 120px !important; 
    box-sizing: border-box;
    text-align: center; 
    background: rgba(10, 10, 15, 0.98); 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--neon-cyan);
    box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.1), 0 5px 15px rgba(0, 0, 0, 0.8);
    padding: 15px 20px;
    z-index: 600;
    font-family: 'Share Tech Mono', monospace;
    border-radius: 4px;
    overflow: hidden; 
}

body.theatre-mode #theatre-lyrics-box {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: fixed !important;
    
    /* >>> THE FIX: Nudged down another 10px closer to the footer <<< */
    bottom: 85px !important; 
    
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 520px !important; 
    max-width: 80vw !important;

    /* >>> THE FIX: Shaved 20px off the top to expose the bottom of the Gyro <<< */
    height: 100px !important; 
}

.t-line { 
    transition: all 0.3s ease; 
    white-space: normal; 
    word-wrap: break-word;
}
.t-prev, .t-next { color: rgba(255, 255, 255, 0.3); font-size: 0.8em; }
.t-active { color: var(--neon-cyan); font-size: 1.1em; font-weight: bold; text-shadow: 0 0 8px var(--neon-cyan); }

/* =========================================
   LEFT COLUMN: DATA & COMMS
   ========================================= */
/* MOTH Terminal */
body.theatre-mode #modal-terminal.is-docked .terminal-window {
    position: fixed !important;
    left: 20px !important;
    top: 80px !important;
    bottom: auto !important;
    transform: none !important; 
    width: 450px !important; 
    height: calc(100vh - 210px) !important; 
    margin: 0 !important;
    /* >>> THE FIX: Updated box-shadow to dark mode colors <<< */
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.05), 0 5px 25px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    
    /* >>> THE FIX: Nuke the white/cyan background! <<< */
    background-color: rgba(10, 10, 15, 0.98) !important; 
}

body.theatre-mode #close-terminal {
    display: none !important;
}

/* =========================================
   THEATRE MODE: GPU PERFORMANCE RESCUE
   ========================================= */
/* Note: Using descendant selector ' .radar-container' instead of direct child '>' */
body.theatre-mode .radar-container {
    will-change: transform !important; 
}

body.theatre-mode .radar-container svg,
body.theatre-mode .radar-container g,
body.theatre-mode .radar-container text,
body.theatre-mode .radar-container rect {
    mix-blend-mode: normal !important;
}

body.theatre-mode .radar-container [role="offline_term"],
body.theatre-mode .radar-container [role="offline_hex_bg"] {
    filter: none !important; 
}

body.theatre-mode .radar-container [role="offline_hex_bg"] {
    opacity: 0.1 !important; 
    text-rendering: optimizeSpeed !important;
}

/* =========================================
   PARTY SCENE: GPU ACCELERATED ANIMATIONS
   ========================================= */
@keyframes aviation-blink {
    0%, 49% { opacity: 0.1; }
    50%, 100% { opacity: 1; }
}

@keyframes siren-flash {
    0%, 49% { stroke: rgba(0, 150, 255, 0.9); filter: drop-shadow(0 0 15px blue); }
    50%, 100% { stroke: rgba(255, 0, 51, 0.9); filter: drop-shadow(0 0 15px red); }
}

/* =========================================
   >>> THEATRE MODE: RESPONSIVE TIERS
   ========================================= */

/* GLOBAL DROPDOWN FIX (Desktop Default) */
/* GLOBAL DROPDOWN FIX (Desktop Default) */
body.theatre-mode #dropdown-menu,
body.theatre-mode .dropdown-content {
    /* >>> THE FIX: Restores true mathematical centering beneath the pill <<< */
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.theatre-mode .dropdown-content {
    min-width: 100% !important; 
    width: max-content !important; /* Lets the menu breathe on desktop */
}

body.theatre-mode .dropdown-content a {
    white-space: nowrap !important; 
    font-size: 0.9em !important;    
}

body.theatre-mode #track-indicator {
    font-size: 0.9em !important;
}

/* 1. ULTRAWIDE & 4K (2000px+): The Cinematic Upscale */
@media (min-width: 2000px) {
    body.theatre-mode #hud-telemetry { 
        top: 40px !important; 
        bottom: auto !important; 
        height: auto !important;
        /* >>> THE FIX: Shrunk from 1200px to 850px so the height easily fits a 1440p monitor <<< */
        width: 1080px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important; 
    }

    body.theatre-mode .radar-container {
        /* >>> THE FIX: Still 100% edge-to-edge, but now scales to a perfect 850x850 square <<< */
        width: 100% !important;
        height: auto !important;
        max-height: none !important; 
        aspect-ratio: 1 / 1 !important;
        flex: none !important;
        margin: 0 !important;
    }
    
    body.theatre-mode .radar-container svg { 
        width: 100% !important; 
        height: 100% !important;
        max-width: none !important; 
        max-height: none !important;
    }
    
    body.theatre-mode #hud-gyro { 
        /* Shrunk proportionately to look great under the 850px Radar */
        width: 600px !important; 
        height: 180px !important; 
        max-width: none !important;
        flex: none !important;
        align-self: center !important;
        margin: 0 !important;
    }
    
    body.theatre-mode #theatre-lyrics-box { 
        width: 1000px !important; 
        height: 200px !important; 
        bottom: 180px !important; /* Left exactly where it was! */
    }
    body.theatre-mode .t-active { font-size: 2.2em !important; }
    body.theatre-mode .t-prev, body.theatre-mode .t-next { font-size: 1.4em !important; }

    /* Upscaled UI Elements */
    body.theatre-mode #track-indicator { width: 600px !important; font-size: 1.2em !important; }
    body.theatre-mode .dropdown-content a { font-size: 1.2em !important; padding: 15px 25px !important; }
    
    body.theatre-mode #modal-terminal.is-docked .terminal-window { 
        width: 600px !important; 
        left: 40px !important; 
        /* >>> THE FIX: Shrink the height to leave 300px of safe space for the upscaled footer <<< */
        height: calc(100vh - 300px) !important; 
    }
    body.theatre-mode .terminal-log, body.theatre-mode #terminal-output p { font-size: 1.4em !important; line-height: 1.6 !important; }
    body.theatre-mode .terminal-input-line, body.theatre-mode #terminal-cmd-input { font-size: 1.3em !important; }

    /* Upscaled Audio Footer */
    body.theatre-mode #audio-footer { padding: 30px 40px !important; }
    body.theatre-mode .player-controls { font-size: 1.6em !important; gap: 25px !important; }
    body.theatre-mode .sync-wrapper, body.theatre-mode .vol-wrapper { font-size: 1.4em !important; }
    body.theatre-mode .vol-wrapper input[type=range] { width: 180px !important; height: 6px !important; }
    body.theatre-mode .btn-audio, body.theatre-mode .btn-hud { font-size: 1.2em !important; padding: 15px 25px !important; }

    body.theatre-mode .btn-media { width: 70px !important; height: 70px !important; border-width: 2px !important; }
    body.theatre-mode .btn-media svg { width: 36px !important; height: 36px !important; }
    body.theatre-mode .btn-play-main { width: 90px !important; height: 90px !important; }
    body.theatre-mode .btn-play-main svg { width: 45px !important; height: 45px !important; }
}

/* 2. STANDARD LAPTOPS (~1450px): The Safe Zone Stretch */
@media (max-width: 1450px) {
    body.theatre-mode #track-indicator { left: 20px !important; width: 320px !important; max-width: 320px !important; transform: none !important; }
    body.theatre-mode #modal-terminal.is-docked .terminal-window { left: 20px !important; width: 320px !important; transform: none !important; }

    body.theatre-mode #hud-telemetry,
    body.theatre-mode #theatre-lyrics-box {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 700px) !important; 
        max-width: 600px !important; 
    }
    
    body.theatre-mode #hud-telemetry {
        /* >>> THE FIX: Moved up to align perfectly with the top of the dropdown <<< */
        top: 20px !important; 
        bottom: auto !important; 
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    body.theatre-mode .radar-container {
        width: 100% !important; 
        height: auto !important;
        max-height: none !important; 
        aspect-ratio: 1 / 1 !important;
        flex: none !important; 
        margin: 0 !important;
    }
    
    body.theatre-mode #hud-gyro {
        width: 400px !important;
        height: 120px !important;
        flex: none !important;
        align-self: center !important;
        transform: scale(0.9) !important; 
        margin: 0 !important;
    }
    
    body.theatre-mode #theatre-lyrics-box { 
        top: auto !important; 
        /* >>> THE FIX: Nudged down a smidge so it hovers cleanly above the player controls <<< */
        bottom: 85px !important; 
    }
}

/* 3. TABLETS & SMALL LAPTOPS (~1150px): Edge-to-Edge Radar */
@media (max-width: 1150px) {
    body.theatre-mode #track-indicator { left: 15px !important; width: 280px !important; max-width: 280px !important; transform: none !important; }
    body.theatre-mode #modal-terminal.is-docked .terminal-window { display: flex !important; left: 15px !important; width: 280px !important; transform: none !important; }
    
    body.theatre-mode #terminal-cmd-input { box-sizing: border-box !important; width: 100% !important; }
    body.theatre-mode .terminal-input-line { padding: 10px !important; box-sizing: border-box !important; }
    body.theatre-mode .vol-wrapper input[type=range] { width: 100px !important; min-width: 80px !important; }
    body.theatre-mode #cyber-hud { right: 15px !important; width: 220px !important; }

    body.theatre-mode #hud-telemetry,
    body.theatre-mode #theatre-lyrics-box {
        left: 310px !important;
        transform: none !important;
        width: calc(100vw - 560px) !important; 
        max-width: none !important;
    }
    
    body.theatre-mode #hud-telemetry { 
        top: 40px !important; 
        bottom: auto !important; /* >>> THE FIX: Let the container grow downwards naturally <<< */
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    body.theatre-mode .radar-container {
        width: 100% !important; /* >>> THE FIX: True edge-to-edge width <<< */
        height: auto !important;
        max-height: none !important; /* Kill the vertical squish limit */
        aspect-ratio: 1 / 1 !important;
        flex: none !important; 
        margin: 0 !important;
    }
    
    body.theatre-mode #hud-gyro {
        width: 400px !important;
        height: 120px !important;
        flex: none !important;
        align-self: center !important;
        transform: scale(0.75) !important; 
        margin: 0 !important;
    }

    body.theatre-mode #theatre-lyrics-box { top: auto !important; bottom: 100px !important; }
}

/* =========================================
   4. Small Tablets / Mobile: THE VERTICAL FLIGHT STACK
   ========================================= */
@media (max-width: 850px) {
    body { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 50px !important; overflow-y: auto !important; overflow-x: hidden !important; }

    body.theatre-mode #neural-spine, body.theatre-mode .sensor-bank, body.theatre-mode #terminal-access-link,   
    body.theatre-mode #hud-telemetry > div:first-child, body.theatre-mode .telemetry-coords, body.theatre-mode #decryption-key, 
    body.theatre-mode #bg-grid, body.theatre-mode #flashlight, body.theatre-mode #shards-container, body.theatre-mode #now-playing-title,      
    body.theatre-mode #fx-toggle, body.theatre-mode label[for="fx-toggle"], body.theatre-mode #hud-metadata, body.theatre-mode .hud-buttons,
    body.theatre-mode #modal-terminal, body.theatre-mode #cyber-hud, body.theatre-mode #content-column { display: none !important; }

    #btn-theatre-toggle { display: none !important; }

    /* 1. HEADER & DROPDOWN: Fixed Anchors */
    body.theatre-mode #track-indicator {
        top: 15px !important;
        /* >>> THE FIX: True centering for the pill <<< */
        left: 50% !important; 
        transform: translateX(-50%) !important; 
        
        width: 90vw !important; 
        max-width: 400px !important; /* Keeps it from stretching too wide on 768px iPads */
        box-sizing: border-box !important;
        font-size: 0.9em !important;
    }

    /* >>> 768 / MOBILE FIX: Center the menu and lock the width <<< */
    body.theatre-mode #dropdown-menu,
    body.theatre-mode .dropdown-content {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    body.theatre-mode .dropdown-content {
        width: 90vw !important; 
        max-width: 450px !important; /* Allows it to be slightly wider than the pill, but perfectly centered */
        min-width: 0 !important;
        box-sizing: border-box !important;
        max-height: 40vh !important; 
    }

    body.theatre-mode .dropdown-content a {
        /* >>> THE FIX: Let the text wrap cleanly, and center it so it looks intentional <<< */
        white-space: normal !important; 
        text-align: center !important; 
        font-size: 0.85em !important;
        padding: 12px 15px !important;
    }

    body.theatre-mode #hud-telemetry {
        left: 0 !important; transform: none !important; top: 90px !important; bottom: 270px !important; width: 100vw !important; max-width: 100vw !important; padding: 10px 0 !important; 
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; 
    }

    body.theatre-mode .radar-container {
        height: 100% !important; max-height: calc(100% - 130px) !important; width: auto !important; max-width: 95vw !important; aspect-ratio: 1 / 1 !important; margin: 0 auto !important; flex: none !important; 
    }

    body.theatre-mode .radar-container svg { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }

    body.theatre-mode #hud-gyro {
        width: 400px !important; height: 120px !important; max-width: none !important; 
        align-self: center !important; transform: scale(0.75) !important; transform-origin: center center !important; margin: 0 !important; flex: none !important;
    }

    body.theatre-mode #theatre-lyrics-box { left: 5vw !important; transform: none !important; width: 90vw !important; max-width: 90vw !important; height: 90px !important; bottom: 175px !important; padding: 10px 15px !important; }
    .t-active { font-size: 1.0em; } .t-prev, .t-next { font-size: 0.75em; }

    #audio-footer { height: auto !important; min-height: 150px !important; padding: 15px 15px 30px 15px !important; flex-direction: column !important; justify-content: center !important; gap: 15px !important; z-index: 600 !important; }
    .player-controls { width: 100%; justify-content: center !important; gap: 20px !important; margin: 0 auto; }
    .seek-wrapper { width: 100% !important; margin: 0 auto; }
    .sync-vol-container { width: 100%; justify-content: center !important; gap: 25px; }
}

/* =========================================
   FSM EVENT-DRIVEN UI CORRUPTION
   ========================================= */

/* The 1-Second Critical Impact Radar Tear */
body.fsm-radar-crit .gyro-svg {
    animation: radar-tear 0.2s steps(2) infinite !important;
    filter: sepia(1) hue-rotate(-50deg) contrast(2) drop-shadow(0 0 10px var(--warn-orange)) !important;
}
@keyframes radar-tear { 
    0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%, 0 33%, 100% 33%, 100% 66%, 0 66%, 0 66%, 100% 66%, 100% 100%, 0 100%); transform: translateX(0); }
    50% { clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%, -5% 33%, 95% 33%, 95% 66%, -5% 66%, 5% 66%, 105% 66%, 105% 100%, 5% 100%); transform: translateX(8px); }
}




/* The Violent Text Shearing Animation */
@keyframes fsm-text-shear {
    0%, 100% { transform: translate(0, 0) skewX(0deg); opacity: 1; filter: none; }
    
    /* First Glitch: Heavy horizontal skew */
    10% { transform: translate(-3px, 0) skewX(25deg); opacity: 0.7; }
    11% { transform: translate(0, 0) skewX(0deg); opacity: 1; }
    
    /* Second Glitch: Vertical crush and color inversion */
    45% { transform: translate(0, 0) skewX(0deg); }
    46% { transform: translate(2px, 2px) scaleY(0.4); filter: hue-rotate(180deg) invert(1); opacity: 0.8; }
    48% { transform: translate(0, 0) scaleY(1); filter: none; opacity: 1; }
    
    /* Third Glitch: Micro-stutter */
    80% { transform: translate(-2px, -1px); opacity: 0.5; }
    81% { transform: translate(2px, 1px); opacity: 0.9; }
    82% { transform: translate(0, 0); opacity: 1; }
}

/* HARDWARE SEVERED: DIGITAL GLITCH */
.module-offline {
    position: relative !important;
    pointer-events: auto !important; 
    overflow: hidden !important; 
}
.module-offline > * {
    opacity: 0 !important;
    visibility: hidden !important; 
}

/* Make sure there is NO .module-offline::after anywhere in your CSS! */

.module-offline::before {
    content: attr(data-err) !important;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 0, 0, 0.95) !important;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,51,0.15) 3px, transparent 4px) !important;
    color: #ff0033 !important; 
    font-weight: bold; font-family: 'Share Tech Mono', monospace; font-size: 14px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: pre-wrap; word-break: break-all;
    z-index: 100;
    /* Slowed down to 3s for a moody, dark red strobe with occasional physical tears */
    animation: fsm-dark-strobe 3s infinite linear !important;
    animation-delay: var(--rng-delay, 0s) !important;
}

@keyframes fsm-dark-strobe {
    0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.95; filter: drop-shadow(0 0 5px #ff0033); }
    45%  { opacity: 0.25; filter: drop-shadow(0 0 1px #660000); } 
    85%  { transform: translateX(0) skewX(0deg); opacity: 0.8; }
    87%  { transform: translateX(-2px) skewX(12deg); opacity: 0.5; } 
    89%  { transform: translateX(2px) skewX(-12deg); opacity: 1.0; }
    91%  { transform: translateX(0) skewX(0deg); opacity: 0.9; }
}

/* Adjust font size for the tiny thermal container */
.thermal-container.module-offline::after {
    font-size: 0.8em;
}

@keyframes spark-twitch-hard {
    0%, 96%, 98%, 100% { opacity: 1; }
    97% { opacity: 0.1; }
}

/* The 2.5-Second Repair Spectacle */
.module-rebooting {
    position: relative !important;
}
.module-rebooting::after {
    content: "[ REBOOTING ]";
    position: absolute; top:0; left:0; right:0; bottom:0;
    background: rgba(0, 255, 0, 0.85); color: #000; font-weight: bold;
    display: flex; align-items: center; justify-content: center; z-index: 100;
    font-family: 'Share Tech Mono', monospace; font-size: 0.9em;
    box-shadow: inset 0 0 20px #0f0;
    animation: reboot-scan 2.5s ease-out forwards;
}
@keyframes reboot-scan {
    0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    20% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background: rgba(0, 255, 0, 0.85); color: #000;}
    80% { background: rgba(0, 255, 0, 0.85); color: #000; filter: brightness(1); }
    95% { background: #fff; color: transparent; filter: brightness(5); }
    100% { background: transparent; color: transparent; filter: brightness(1); clip-path: inset(0 0 0 0); }
}

/* Stress Bleed: Font Rot & Parallax Tear */
.fsm-font-rot {
    font-family: 'Times New Roman', serif !important;
    letter-spacing: -2px !important;
    text-transform: none !important;
}
body.fsm-parallax-tear #content-column {
    animation: chromatic-tear 0.2s infinite;
}
@keyframes chromatic-tear {
    0% { text-shadow: 3px 0 red, -3px 0 blue; transform: skewX(1deg); }
    50% { text-shadow: -3px 0 red, 3px 0 blue; transform: skewX(-1deg); }
    100% { text-shadow: 2px 0 red, -2px 0 blue; transform: skewX(0); }
}

/* T10: Global Kinetic Brownout (GPU Optimized) */
body.fsm-brownout::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75); /* Darkened slightly to make the radar pop more */
    pointer-events: none;
    z-index: 99998; 
}
body.fsm-brownout .radar-container {
    z-index: 99999; /* Pops ONLY the radar above the shadow */
    position: relative; /* Guarantee the z-index triggers */
}

/* T6 / T20: Background Grid Infection (GPU Optimized) */
body.fsm-grid-rot #bg-grid {
    background-image: radial-gradient(var(--alert-red) 1.5px, transparent 1.5px) !important;
    animation: grid-rot-warp 2s infinite alternate ease-in-out !important;
    transform-origin: center center;
}
@keyframes grid-rot-warp {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* =========================================
   THE 56-SECOND TECTONIC DROP
   ========================================= */
.fsm-global-shockwave {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 2px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0; /* Sits right on top of your background, but behind the UI */
    animation: tectonic-core-flash 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.fsm-global-shockwave::before,
.fsm-global-shockwave::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 6px solid #00ffff;
    box-shadow: 0 0 40px #00ffff, inset 0 0 40px #00ffff;
    opacity: 0;
    animation: tectonic-ring-expand 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* Secondary delayed ring */
.fsm-global-shockwave::after {
    animation-delay: 0.25s;
    border-color: #ffffff;
    box-shadow: 0 0 50px #ffffff, inset 0 0 50px #ffffff;
}

@keyframes tectonic-core-flash {
    0% { width: 0; height: 0; background: rgba(0, 255, 255, 1); box-shadow: 0 0 200px #00ffff; }
    15% { background: rgba(0, 255, 255, 0); box-shadow: 0 0 100px #00ffff; }
    100% { width: 300vw; height: 300vw; background: transparent; }
}

@keyframes tectonic-ring-expand {
    0% { width: 0; height: 0; opacity: 1; border-width: 40px; }
    100% { width: 300vw; height: 300vw; opacity: 0; border-width: 1px; }
}

/* Guarantee the System Credits Modal outranks the Terminal and all HUDs */
#modal-credits {
    z-index: 2147483647 !important; /* The absolute maximum z-index allowed by browsers */
}

/* Sleek, tracked-out cinematic subtitle */
.cover-subtitle {
    font-size: 1.1em;
    color: var(--neon-cyan);
    letter-spacing: 4px;
    font-weight: normal;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Consolidated ultra-minimal technical footer */
.cover-sys-notes {
    margin-top: 40px;
    font-size: 0.75em;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cover-sys-notes p {
    margin: 5px 0;
}

/* Post-game fragment container styling */
.end-journey-box {
    margin-top: 40px;
    padding: 30px;
    background: rgba(255, 0, 255, 0.02);
    border: 1px solid rgba(255, 0, 255, 0.2);
    box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.05);
    text-align: center;
    width: 100%;
    max-width: 600px;
    border-radius: 4px;
}

/* =========================================
   >> M.O.T.H. OS TOAST NOTIFICATIONS
   ========================================= */
#moth-toast-container {
    position: fixed;
    /* >>> THE FIX: Anchored to the top, safely below the track indicator! <<< */
    top: 80px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999999;
    pointer-events: none; 
    align-items: center;
}

.moth-toast {
    background: rgba(10, 10, 15, 0.95);
    border-left: 3px solid var(--neon-cyan);
    color: #fff;
    padding: 12px 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85em;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 255, 255, 0.1);
    
    opacity: 0;
    /* >>> THE FIX: Start slightly higher (-20px) so it slides down into place <<< */
    transform: translateY(-20px); 
    transition: all 0.4s cubic-bezier(0.1, 0.8, 0.3, 1);
}

.moth-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   >> CODEX DATA TABLES
   ========================================= */
.codex-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9em;
    border: 1px solid var(--neon-cyan);
    background: rgba(0, 255, 255, 0.02);
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.05);
}

.codex-table th {
    text-align: left;
    padding: 10px 15px;
    color: var(--neon-pink);
    border-bottom: 1px dashed var(--neon-cyan);
    font-weight: bold;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.4);
}

.codex-table td {
    padding: 10px 15px;
    color: #ddd;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

/* Removes the bottom border from the last row so it looks clean */
.codex-table th:first-child, 
.codex-table td:first-child {
    width: 45%;
    padding-right: 30px;
}

.codex-table tr:last-child td {
    border-bottom: none;
}

/* A class to make the actual stats pop */
.td-highlight {
    color: var(--neon-cyan);
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

/* This replaces the heavy JavaScript loop entirely */
body.engine-frozen * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* The 'Scanning' pulse - purely GPU accelerated (NO DROP SHADOWS!) */
.scanning-entity {
    /* Use brightness and screen blending to create a "glow" without expensive blur math */
    filter: brightness(2.5) !important;
    mix-blend-mode: screen !important;
    
    will-change: opacity; 
    animation: scan-pulse-gpu 0.4s infinite alternate ease-in-out;
}

@keyframes scan-pulse-gpu {
    0% { 
        opacity: 0.5; 
    }
    100% { 
        opacity: 1.0; 
    }
}

/* The 'Lock' flash */
.scan-locked-flash {
    /* Blinding flash without the drop-shadow overhead */
    filter: brightness(5) !important;
    mix-blend-mode: screen !important;
    transition: filter 0.4s ease-out;
}

/* LIDAR Accordion Styles */
.codex-location-group {
    margin-bottom: 10px;
    border: 1px solid rgba(0, 255, 255, 0.1);
}

.codex-loc-header {
    background: rgba(0, 255, 255, 0.05);
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: background 0.2s;
}

.codex-loc-header:hover {
    background: rgba(0, 255, 255, 0.15);
}

.codex-loc-title {
    color: #fff;
    letter-spacing: 2px;
    font-weight: bold;
}

.codex-loc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: rgba(0, 0, 0, 0.4);
}

.codex-location-group.is-open .codex-loc-body {
    max-height: 2000px; /* Large enough to hold all cards */
    padding: 15px;
}

/* Scan Card Layout */
.scans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 10px;
}

.scan-card {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Restore the "Cool" blurred thumb look */
.scan-thumb-box {
    width: 55px;
    height: 55px;
    background: #000;
    border: 1px solid rgba(0, 255, 255, 0.15);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1);
}

.scan-thumb-box svg {
    width: 80%;
    height: 80%;
    /* This restores the soft atmospheric look inside the codex */
    filter: blur(0.5px); 
}

/* Perfect Centering for the Question Mark */
.scan-thumb-box.locked svg {
    filter: none;
    opacity: 0.3;
}

.scan-card-id { 
    font-weight: bold; 
    font-size: 13px; 
    letter-spacing: 1px;
    text-shadow: 0 0 5px currentColor;
}

.scan-card-meta, .scan-card-status { 
    font-size: 10px; 
    margin-top: 2px;
}

.scan-card.locked { 
    opacity: 0.5; 
}

/* Location Accordion Notification Dot */
.loc-notify-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--neon-pink);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--neon-pink);
    animation: blink-fast 0.3s infinite alternate;
}

@keyframes blink-fast {
    from { opacity: 0.4; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1.2); }
}

/* Ensure tab-notify works on the scans tab */
.tab-btn.tab-notify::after {
    content: "!";
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--neon-pink);
    color: white;
    font-size: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px var(--neon-pink);
}

.scan-card-id { font-weight: bold; font-size: 14px; margin-bottom: 2px; }
.scan-card-meta, .scan-card-status { font-size: 10px; }

.scan-card.locked { opacity: 0.4; filter: grayscale(1); }

/* This stops everything instantly without a single line of JS iteration */
body.engine-frozen .radar-container, 
body.engine-frozen .page,
body.engine-frozen .lyric-word {
    animation-play-state: paused !important;
    pointer-events: none; /* Prevents hover calculations while frozen */
}

/* Keep the modals alive */
body.engine-frozen .cyber-modal {
    pointer-events: auto !important;
}

/* =========================================
   >> MARKET TELEMETRY COLORS
   ========================================= */
.market-table th, .market-table td {
    padding: 10px 8px; /* Slightly tighter padding for the 4 columns */
}

.mkt-up {
    color: #39ff14; /* Hacker Green */
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.4);
}

.mkt-down {
    color: var(--alert-red); /* Fatal Red */
    text-shadow: 0 0 5px rgba(255, 0, 51, 0.4);
}

/* ==========================================
   IMMUTABLE FRAME: UI HIJACK OVERRIDES
========================================== */
body.immutable-hijack .hud-box,
body.immutable-hijack .matrix-box,
body.immutable-hijack .radar-container,
body.immutable-hijack #hud-gyro {
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important; /* <--- Strips the Hex Bolts and Scanlines! */
}

/* Kill Hardware Matrix Animations */
body.immutable-hijack .rotor-blade,
body.immutable-hijack .protocol-svg,
body.immutable-hijack .engine-ring-1,
body.immutable-hijack .engine-ring-2,
body.immutable-hijack .thermal-liquid {
    animation-play-state: paused !important;
    filter: grayscale(100%) brightness(0.4) !important;
}




/* 1. Un-hide the pure black void to block out the normal background */
body.immutable-hijack #cover-black-backdrop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: -2 !important; /* Send it to the absolute back */
}

/* 2. Resurrect the light pillars and mutate them */
body.immutable-hijack #cover-pillars-layer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: -1 !important; /* Sit right behind the UI and lyrics */
    
    /* THE MUTATION: Converts the soft white/blue beams into harsh crimson */
    filter: sepia(1) hue-rotate(-50deg) saturate(8) contrast(150%) brightness(0.6) !important;
    
    /* Give the pillars a slight, eerie tilt (less intense than the boot sequence fall) */
    transform: perspective(1000px) scale(1.1) rotateX(5deg) !important;
    
    /* Override the 20s boot transition so the red filter applies instantly */
    transition: opacity 1s ease-in-out !important; 
}

/* A. THE MELTING GRID */
body.immutable-hijack #bg-grid {
    background-image: radial-gradient(rgba(255, 0, 51, 0.6) 1px, transparent 1px) !important;
    /* Starts at scale 1, rotates and skews harder as the song progresses */
    transform: scale(calc(1 + var(--track-progress, 0) * 3)) 
               rotate(calc(var(--track-progress, 0) * 90deg)) 
               skew(calc(var(--track-progress, 0) * 30deg));
    /* Slowly fades in from 2% to 15% opacity */
    opacity: calc(0.02 + (var(--track-progress, 0) * 0.13)) !important;
    transition: transform 0.2s linear;
}

/* C. THE MALIGNANT FLASHLIGHT */
body.immutable-hijack #flashlight {
    /* Multiplies the red opacity as the song progresses */
    background: radial-gradient(circle, rgba(255, 0, 51, calc(var(--track-progress, 0) * 0.15)) 0%, transparent 50%) !important;
    /* Uses exclusion blending so it interacts weirdly with the grid and UI */
    mix-blend-mode: exclusion;
}

/* =========================================
   >> M.O.T.H. OPERATOR MECHANICS
   ========================================= */

.radar-static {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.3"/></svg>');
    opacity: 0; 
    pointer-events: none; 
    mix-blend-mode: overlay; 
    z-index: 10;
    transition: opacity 0.2s ease;
}

.gyro-svg.just-locked {
    filter: drop-shadow(0 0 50px var(--neon-cyan)) brightness(2) !important;
    transition: all 0.2s ease-out;
}

.tuner-box {
    grid-column: span 2;
    padding: 15px 10px 5px 10px;
}

.btn-vent {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    padding: 6px 10px; cursor: pointer; text-transform: uppercase; font-weight: bold;
    transition: 0.1s; width: 90%; margin-top: 5px; font-size: 0.7em;
    position: absolute; bottom: 5px; left: 5%;
}

.btn-vent:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 10px var(--neon-cyan); }
.btn-vent:active { transform: scale(0.95); background: #fff; border-color: #fff; box-shadow: 0 0 20px #fff; }

.tuner-wrapper { position: relative; width: 100%; height: 30px; margin-top: 10px; display: flex; align-items: center; }
.tuner-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: #222; transform: translateY(-50%); }
.tuner-target {
    position: absolute; top: 50%; width: 12px; height: 20px;
    background: transparent; border: 2px solid rgba(0, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    transition: left 0.1s linear; pointer-events: none; z-index: 1;
}

input[type="range"].cyber-slider { -webkit-appearance: none; width: 100%; background: transparent; position: relative; z-index: 2; margin: 0; cursor: pointer; }
input[type="range"].cyber-slider:focus { outline: none; }
input[type="range"].cyber-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; background: transparent; }
input[type="range"].cyber-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px; width: 8px;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    margin-top: -8px; border-radius: 2px;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
input[type="range"].thumb-drifting::-webkit-slider-thumb {
    background: var(--warn-orange); box-shadow: 0 0 10px var(--warn-orange);
}
input[type="range"].thumb-locked::-webkit-slider-thumb {
    background: #fff; box-shadow: 0 0 15px #fff; transform: scale(1.2);
}
.tuner-status { font-size: 10px; color: var(--neon-cyan); margin-top: 5px; text-align: center; font-weight: bold; transition: color 0.2s; }

#hud-sensor-matrix.venting {
    animation: panel-shake 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);
    border-color: #fff; box-shadow: 0 0 20px rgba(0,255,255,0.5);
}
#hud-sensor-matrix.overheating {
    animation: panel-shake 0.2s infinite;
    border-color: var(--alert-red);
    background: rgba(255, 0, 51, 0.1);
}
#hud-sensor-matrix.overheating .thermal-fill {
    background: linear-gradient(to top, #ffaa00, var(--alert-red));
    box-shadow: 0 0 20px var(--alert-red);
}
#hud-sensor-matrix.overheating .btn-vent {
    border-color: var(--alert-red); color: var(--alert-red); background: rgba(255, 0, 51, 0.2);
    animation: pulse-red 0.5s infinite alternate;
}

/* =========================================
   >> TUTORIAL: TIME DILATION
   ========================================= */
#tutorial-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    background: rgba(10, 10, 15, 0.95);
    padding: 30px;
    border: 2px solid var(--warn-orange);
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    pointer-events: none;
    animation: tutorial-pulse 2s infinite alternate;
}

@keyframes tutorial-pulse {
    from { box-shadow: 0 0 15px rgba(255, 170, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8); }
    to { box-shadow: 0 0 30px rgba(255, 170, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.8); }
}

/* Dim the background layers to make the Lydian Spike pop */
body.tutorial-active #layer-base,
body.tutorial-active #layer-deep,
body.tutorial-active #layer-water {
    opacity: 0.15 !important;
    transition: opacity 1s ease;
}

/* =========================================
   >> TUTORIAL: TACTICAL TARGET LOCK
   ========================================= */

body.tutorial-active .spike-core {
   
    transform-origin: center !important;
    transform-box: fill-box !important;
    /* A smooth, slow breath rather than a frantic strobe */
    animation: tutorial-core-breathe 0.8s infinite alternate ease-in-out !important;
}

body.tutorial-active .spike-hud-ring {

    stroke-width: 2 !important; /* Slightly thicker, but not obnoxious */
    stroke-dasharray: 8 6 !important; /* Chunkier dashes to look like a targeting reticle */
    opacity: 1 !important;
    transform-origin: center !important;
    transform-box: fill-box !important;
    /* A smooth, continuous scanning rotation */
    animation: tutorial-ring-scan 2.5s infinite linear !important;
}

/* The core smoothly shifts between Cyan and White, scaling just enough to pop */
@keyframes tutorial-core-breathe {
    0% { 
        transform: scale(1.5); 
    
    }
    100% { 
        transform: scale(2.5); 
        
    }
}

/* The ring expands slightly and rotates, looking like a camera lens focusing */
@keyframes tutorial-ring-scan {
    0% { 
        transform: scale(1.2) rotate(0deg); 
     
    }
    50% { 
        transform: scale(1.6) rotate(180deg); 
     
    }
    100% { 
        transform: scale(1.2) rotate(360deg); 
      
    }
}
/* =========================================
   >> TUTORIAL: UI LOCKOUT
   ========================================= */

/* 
  Disables all clicks, hovers, and dragging on the audio player, 
  track dropdown, neural spine, and HUD buttons during the tutorial. 
*/
body.tutorial-active #audio-footer,
body.tutorial-active #track-indicator,
body.tutorial-active #neural-spine,
body.tutorial-active .hud-buttons {
    pointer-events: none !important;
    filter: grayscale(100%) !important;
    opacity: 0.3 !important;
    transition: opacity 0.4s ease, filter 0.4s ease !important;
}

.cipher-letter {
    display: inline-block !important; 
}

/* In Theatre Mode, the cipher letters become "hollow" wireframes */
body.theatre-mode .t-active .cipher-letter {
    color: transparent !important; 
    -webkit-text-stroke: 1px var(--neon-cyan) !important;
    text-shadow: 0 0 2px var(--neon-cyan) !important;
}

/* =========================================
   >> ARG: TRAPPED ECHO (CORRUPTED LUMEN CAGE)
   ========================================= */

body.is-trapped-echo #global-lumen-layer {
    /* Rotates the standard cyan/white fog into a hostile, blinding crimson and blows out the contrast */
    filter: hue-rotate(160deg) saturate(3) contrast(1.5) drop-shadow(0 0 50px rgba(255, 0, 51, 0.4));
    
    /* Adds a sickly, failing-power flicker to the entire background */
    animation: trapped-echo-strobe 4s infinite;
}

body.is-trapped-echo #global-lumen-layer::before {
    /* Slowed drastically from 1.5s to 8s for a heavy, dreadful search pattern */
    animation: lumen-sweep-menacing 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate !important;
}

body.is-trapped-echo #global-lumen-layer::after {
    /* Forces the fog to roll at triple speed, creating a feeling of panic */
    animation-duration: 3s !important;
}

@keyframes lumen-sweep-menacing {
    0% { transform: rotate(-5deg); }
    20% { transform: rotate(20deg); }
    25% { transform: rotate(18deg); } /* A sudden mechanical shudder/hesitation */
    75% { transform: rotate(55deg); }
    100% { transform: rotate(65deg); }
}

@keyframes trapped-echo-strobe {
    0%, 90%, 94%, 98%, 100% { opacity: 1; }
    92% { opacity: 0.4; }
    96% { opacity: 0.1; }
}

@keyframes moth-spin {
    100% { transform: rotate(360deg); }
}

.moth-spinner {
    animation: moth-spin 1s linear infinite;
    transform-origin: center;
}

.media-locked {
    pointer-events: none !important;
    opacity: 0.4 !important;
    cursor: wait !important;
}