@font-face {
            font-family: 'Fixedsys Excelsior';
            src: url('../../fonts/FixedsysExcelsior.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        :root {
            --terminal-green: #33ff00;
            --terminal-bg: #0a0a0a;
            --phosphor-rgb: 51,255,0;
        }

        .font-fixedsys { font-family: 'Fixedsys Excelsior', 'Courier New', monospace; }
        .font-sharetech { font-family: 'Share Tech Mono', 'Courier New', monospace; }

        body, html {
            margin: 0; padding: 0;
            background-color: var(--terminal-bg);
            color: var(--terminal-green);
            font-family: 'Courier New', Courier, monospace;
            min-height: 100%;
            text-shadow: 0 0 5px var(--terminal-green);
        }

        .crt::before {
            content: " "; display: block; position: fixed; inset: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            z-index: 100; background-size: 100% 4px, 6px 100%; pointer-events: none;
        }

        .crt::after {
            content: " "; display: block; position: fixed; inset: 0;
            background: rgba(51, 255, 0, 0.05);
            z-index: 100; pointer-events: none;
            animation: crt-flicker var(--crt-flicker-period, 10s) step-start infinite;
        }

        /* flickerPeriodSec === 0 → JS adds .crt-flicker-off to body */
        body.crt-flicker-off .crt::after { animation: none; }

        @keyframes crt-flicker {
            0%, 91%, 94%, 97%, 100% { opacity: 1; }
            92%  { opacity: 0.85; }
            95%  { opacity: 0.92; }
            98%  { opacity: 0.88; }
        }

        @media (prefers-reduced-motion: reduce) {
            .crt::after { animation: none; }
        }

        /* scanlinesEnabled: false → JS adds .no-scanlines to body */
        body.no-scanlines .crt::before { display: none; }

        /* CRT vignette — injected into #terminal-container by crt-wave.js, fixed so
           it darkens the whole viewport above every screen (below the scanline
           layer at z-index 100 and the controls panel at 200). */
        .crt-vignette {
            position: fixed; inset: 0;
            pointer-events: none; z-index: 99;
        }

        /* Injected scanline / flicker overlays (crt-wave.js) — mirror the
           .crt::before/::after pseudo-elements but live as real divs inside the
           terminal container so they can be spec-inspected. While mounted, the
           pseudo-elements are suppressed (body.crt-injected) to avoid doubling. */
        .crt-scanlines {
            position: fixed; inset: 0; pointer-events: none; z-index: 100;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 4px, 6px 100%;
        }
        body.no-scanlines .crt-scanlines { display: none; }

        .crt-flicker {
            position: fixed; inset: 0; pointer-events: none; z-index: 100;
            background: rgba(51, 255, 0, 0.05);
            animation: crt-flicker var(--crt-flicker-period, 10s) step-start infinite;
        }
        body.crt-flicker-off .crt-flicker { animation: none; }
        @media (prefers-reduced-motion: reduce) {
            .crt-flicker { animation: none; }
        }

        /* Injected overlays take precedence inside the terminal container. */
        body.crt-injected .crt::before,
        body.crt-injected .crt::after { display: none; }

        /* Live CRT controls panel */
        #crt-controls {
            position: fixed; top: 1rem; right: 1rem;
            background: rgba(0, 0, 0, 0.75);
            border: 1px solid rgba(51, 255, 0, 0.4);
            color: var(--terminal-green);
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            padding: 0.75rem 1rem;
            z-index: 200;
            min-width: 200px;
        }
        #crt-controls label { display: flex; flex-direction: column; margin-bottom: 0.4rem; gap: 2px; }
        #crt-controls .ctl-head { display: flex; justify-content: space-between; gap: 0.5rem; }
        #crt-controls .ctl-val { opacity: 0.8; font-variant-numeric: tabular-nums; }
        #crt-controls input[type="range"] { width: 100%; accent-color: var(--terminal-green); cursor: pointer; }

        #boot-screen, #campaign-select-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--terminal-bg); z-index: 10;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: center;
            padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
            box-sizing: border-box;
            overflow-y: auto;
        }

        #terminal-container {
            padding: 2rem max(2rem, env(safe-area-inset-right)) 2rem max(2rem, env(safe-area-inset-left));
            max-width: 1200px; margin: 0 auto; 
            position: relative; z-index: 1; display: none;
            box-sizing: border-box;
        }

        #screen-content { min-height: 200px; }
        #choices-container { margin-top: 2rem; display: none; }

        .choice-btn {
            display: block; color: var(--terminal-green); background: transparent;
            border: none; font-family: inherit; font-size: 1.1rem;
            text-align: left; cursor: pointer; margin-bottom: 0.5rem; text-shadow: inherit; transition: all 0.2s;
        }

        .choice-btn::before { content: "> "; }
        .choice-btn:hover, .choice-btn:focus { background-color: var(--terminal-green); color: var(--terminal-bg); text-shadow: none; outline: none; }

        .choice-btn-system { opacity: 0.5; text-shadow: none; font-size: 0.9rem; }
        .choice-btn-system:hover, .choice-btn-system:focus { opacity: 1; }

        .system-separator { opacity: 0.3; margin: 0.5rem 0 0.25rem 0; line-height: 1; }

        /* Status footer for the campaign / terminal-selection screens: groups
           the session identity with the destructive logout, separated from the
           navigation actions above it. */
        .boot-status-footer {
            margin-top: 36px; padding-top: 18px;
            border-top: 1px dashed rgba(51, 255, 102, 0.25);
            color: #1f8a3b; font-size: 0.85em; letter-spacing: 0.06em; text-align: center;
            display: flex; flex-direction: column; align-items: center;
        }
        .boot-status-footer .who { margin: 0 0 6px; }

        /* Logout = destructive action, color-coded distinct from the green nav. */
        .choice-btn.is-logout { color: #ff5a3a; text-shadow: 0 0 4px rgba(255, 90, 58, 0.5), 0 0 12px rgba(255, 90, 58, 0.18); }
        .choice-btn.is-logout:hover, .choice-btn.is-logout:focus {
            background: rgba(255, 90, 58, 0.12); color: #ff5a3a;
            text-shadow: 0 0 4px rgba(255, 90, 58, 0.5); outline: none;
        }

        h1, h2, h3 { text-transform: uppercase; margin-bottom: 1rem; }
        p { line-height: 1.5; }
        .cursor { animation: blink 1s step-end infinite; }
        @keyframes blink { 50% { opacity: 0; } }

        #login-screen,
        #login-real-screen {
            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--terminal-bg); z-index: 20;
            flex-direction: column; justify-content: center; align-items: center;
            text-align: center; gap: 1rem;
            padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
            box-sizing: border-box;
        }
        #login-screen select,
        #login-screen input[type="password"],
        #login-real-screen input[type="text"],
        #login-real-screen input[type="password"] {
            background: transparent; color: var(--terminal-green);
            border: 1px solid var(--terminal-green); font-family: inherit;
            font-size: 1rem; padding: 0.4rem; margin: 0.3rem 0;
            text-shadow: 0 0 5px var(--terminal-green); display: block;
        }

        #hidden-input {
            background: transparent; color: var(--terminal-green);
            border: 1px solid var(--terminal-green); font-family: inherit;
            font-size: 1rem; padding: 0.4rem;
            text-shadow: 0 0 5px var(--terminal-green); margin-top: 1rem; margin-bottom: 0.15rem;
        }
        /* CRT autocomplete dropdown for the hidden-terminal input */
        .hidden-autocomplete-dropdown {
            background: transparent;
            border: 1px solid var(--terminal-green);
            border-top: none;
            font-family: inherit;
            font-size: 1rem;
            color: var(--terminal-green);
            text-shadow: 0 0 5px var(--terminal-green);
            max-height: 10rem;
            overflow-y: auto;
            margin-bottom: 0.15rem;
        }
        .hidden-autocomplete-item {
            padding: 0.25rem 0.4rem;
            cursor: pointer;
            text-align: left;
        }
        .hidden-autocomplete-item.active,
        .hidden-autocomplete-item:hover {
            background-color: var(--terminal-green);
            color: var(--terminal-bg);
            text-shadow: none;
        }

        #login-screen select option { background: var(--terminal-bg); }
        #login-error,
        #login-real-error { color: red; display: none; margin: 0; }

        #choices-container .input-field {
            background: transparent; color: var(--terminal-green);
            border: 1px solid var(--terminal-green); font-family: inherit;
            font-size: 1rem; padding: 0.4rem; margin: 0.3rem 0;
            text-shadow: 0 0 5px var(--terminal-green); display: block;
            width: 100%; box-sizing: border-box;
        }

        /* ─── Options overlay ─────────────────────────────────────────────── */
        #options-overlay {
            position: fixed; inset: 0; z-index: 300;
            background: rgba(0, 0, 0, 0.88);
            display: flex; align-items: center; justify-content: center;
            font-family: inherit;
        }
        .opts-panel {
            background: var(--terminal-bg);
            border: 1px solid var(--terminal-green);
            box-shadow: 0 0 24px rgba(var(--phosphor-rgb), 0.18);
            padding: 2rem 2.5rem;
            min-width: min(480px, 92vw);
            max-width: 560px;
            max-height: 90vh;
            overflow-y: auto;
            color: var(--terminal-green);
        }
        .opts-panel h2 {
            text-align: center; letter-spacing: 0.2em;
            margin: 0 0 1.8rem; font-size: 1rem;
            text-shadow: 0 0 8px var(--terminal-green);
        }
        .opts-row {
            display: flex; align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem; gap: 1rem;
        }
        .opts-row.opts-row--slider { flex-direction: column; align-items: stretch; }
        .opts-label { font-size: 0.9rem; letter-spacing: 0.1em; opacity: 0.85; flex: 1; }
        .opts-helper { font-size: 0.72rem; opacity: 0.55; margin-top: 0.2rem; letter-spacing: 0.05em; }

        /* Toggle switch */
        .opts-toggle {
            position: relative; width: 60px; height: 26px; flex-shrink: 0;
        }
        .opts-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
        .opts-toggle-track {
            position: absolute; inset: 0; cursor: pointer;
            background: rgba(51, 255, 0, 0.12);
            border: 1px solid rgba(51, 255, 0, 0.4);
            transition: background 0.2s;
        }
        .opts-toggle-track::after {
            content: ''; position: absolute; top: 3px; left: 4px;
            width: 18px; height: 18px;
            background: var(--terminal-green);
            transition: transform 0.2s;
            box-shadow: 0 0 4px var(--terminal-green);
        }
        .opts-toggle input:checked + .opts-toggle-track { background: rgba(51, 255, 0, 0.22); }
        .opts-toggle input:checked + .opts-toggle-track::after { transform: translateX(32px); }
        .opts-toggle input:disabled + .opts-toggle-track { opacity: 0.35; cursor: not-allowed; }

        /* Volume slider */
        .opts-slider { width: 100%; accent-color: var(--terminal-green); cursor: pointer; margin-top: 0.4rem; }

        /* Segmented phosphor selector */
        .opts-segment { display: flex; gap: 0.4rem; flex-shrink: 0; }
        .opts-segment-btn {
            background: transparent; color: var(--terminal-green);
            border: 1px solid rgba(51, 255, 0, 0.4);
            font-family: inherit; font-size: 0.78rem;
            padding: 0.25rem 0.6rem; cursor: pointer; letter-spacing: 0.08em;
            transition: background 0.15s, border-color 0.15s;
        }
        .opts-segment-btn.active {
            background: rgba(51, 255, 0, 0.25);
            border-color: var(--terminal-green);
            text-shadow: 0 0 6px var(--terminal-green);
        }
        .opts-segment-btn:hover { background: rgba(51, 255, 0, 0.1); }

        /* Tune button */
        .opts-tune-btn {
            background: transparent; color: var(--terminal-green);
            border: 1px solid var(--terminal-green);
            font-family: inherit; font-size: 0.8rem;
            padding: 0.25rem 0.75rem; cursor: pointer;
            letter-spacing: 0.08em;
            transition: background 0.15s;
        }
        .opts-tune-btn:hover { background: rgba(51, 255, 0, 0.1); }

        /* Divider */
        .opts-divider { border: none; border-top: 1px dashed rgba(51, 255, 0, 0.2); margin: 1rem 0; }

        /* Footer */
        .opts-footer { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem; }
        .opts-footer-btn {
            background: transparent; color: var(--terminal-green);
            border: 1px solid rgba(51, 255, 0, 0.5);
            font-family: inherit; font-size: 0.82rem;
            padding: 0.35rem 0.9rem; cursor: pointer; letter-spacing: 0.1em;
            transition: background 0.15s, border-color 0.15s;
        }
        .opts-footer-btn:hover { background: rgba(51, 255, 0, 0.1); border-color: var(--terminal-green); }
        .opts-footer-btn.opts-footer-btn--reset {
            color: #ff7a5a; border-color: rgba(255, 120, 90, 0.4);
            margin-right: auto;
        }
        .opts-footer-btn.opts-footer-btn--reset:hover {
            background: rgba(255, 90, 58, 0.08); border-color: #ff7a5a;
        }
        .opts-footer-btn.opts-footer-btn--primary {
            border-color: var(--terminal-green);
            text-shadow: 0 0 5px var(--terminal-green);
        }

        /* ─── Wave Tuner overlay ──────────────────────────────────────────── */
        #wave-tuner-overlay {
            position: fixed; inset: 0; z-index: 310;
            background: rgba(0, 0, 0, 0.94);
            display: flex; flex-direction: column;
            align-items: center;
            overflow-y: auto;
            padding: 2rem 1rem;
            font-family: inherit;
        }
        .tuner-header {
            text-align: center; margin-bottom: 1.5rem;
            color: var(--terminal-green); letter-spacing: 0.18em;
        }
        .tuner-header h2 { font-size: 0.95rem; margin: 0 0 0.3rem; }
        .tuner-header p  { font-size: 0.72rem; opacity: 0.55; margin: 0; }
        .tuner-body {
            display: flex; gap: 2rem; width: 100%; max-width: 900px;
            flex-wrap: wrap;
        }
        .tuner-preview {
            flex: 1 1 300px;
            border: 1px solid rgba(51, 255, 0, 0.25);
            padding: 1rem 1.2rem;
            color: var(--terminal-green);
            min-height: 260px;
        }
        .tuner-controls {
            flex: 0 0 260px;
        }
        .tuner-controls label {
            display: flex; flex-direction: column; margin-bottom: 0.7rem; gap: 2px;
            color: var(--terminal-green); font-size: 0.82rem;
        }
        .tuner-controls .ctl-head {
            display: flex; justify-content: space-between; gap: 0.5rem;
        }
        .tuner-controls .ctl-val { opacity: 0.8; font-variant-numeric: tabular-nums; }
        .tuner-controls input[type="range"] { width: 100%; accent-color: var(--terminal-green); cursor: pointer; }
        .tuner-footer {
            display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: center;
        }
        .tuner-btn {
            background: transparent; color: var(--terminal-green);
            border: 1px solid rgba(51, 255, 0, 0.5);
            font-family: inherit; font-size: 0.85rem;
            padding: 0.4rem 1.2rem; cursor: pointer; letter-spacing: 0.1em;
            transition: background 0.15s;
        }
        .tuner-btn:hover { background: rgba(51, 255, 0, 0.1); }
        .tuner-btn.tuner-btn--primary { border-color: var(--terminal-green); text-shadow: 0 0 5px var(--terminal-green); }