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

        :root {
            --bg-color: #0a0a0a;
            --bezel-color: #1a1a1a;
            --screen-color: #010801;
            --term-color: #39ff14;
            --term-dim: #1a7a05;
            --err-color: #ff5555;
            --warn-color: #ffaa00;
            --font-family: 'Share Tech Mono', 'Courier New', monospace;
            --font-size: 19px;
            --line-height: 1.5;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background-color: var(--bg-color);
            font-family: var(--font-family);
            font-size: var(--font-size);
            line-height: var(--line-height);
            height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* ── Mobile: full-screen terminal, no bezel ── */
        @media (max-width: 768px) {
            :root {
                --font-size: 14px;
            }
            body {
                align-items: stretch;
                justify-content: stretch;
                padding: 0;
            }
            #bezel {
                width: 100% !important;
                height: 100dvh !important;
                aspect-ratio: unset !important;
                border-radius: 0 !important;
                padding: max(12px, env(safe-area-inset-top)) 14px env(safe-area-inset-bottom, 16px) !important;
                box-shadow: none !important;
            }
            #bezel::after { display: none; } /* hide bottom label */
            /* iOS zooms page when focused input font < 16px — fix it */
            #cmd { font-size: 16px !important; }
        }

        /* Outer bezel — the monitor frame, locked to 4:3 */
        #bezel {
            background: var(--bezel-color);
            border-radius: 12px;
            padding: 28px 32px 36px;
            box-shadow:
                0 0 0 2px #2a2a2a,
                0 0 40px rgba(0,0,0,0.8),
                inset 0 2px 4px rgba(255,255,255,0.05);
            aspect-ratio: 4 / 3;
            height: min(calc(100vh - 16px), calc((100vw - 16px) * 0.75));
            width: auto;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Screen label */
        #bezel::after {
            content: 'INNOTECH LAB  ◉  PIP-BOX';
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-family);
            font-size: 10px;
            color: #444;
            letter-spacing: 2px;
            white-space: nowrap;
        }

        /* CRT Screen */
        #crt {
            flex: 1;
            background: var(--screen-color);
            border-radius: 6px;
            border: 2px solid #111;
            padding: 16px 20px;
            position: relative;
            overflow: hidden;
            box-shadow:
                inset 0 0 60px rgba(0,0,0,0.5),
                inset 0 0 20px rgba(51, 255, 0, 0.03),
                0 0 20px rgba(51, 255, 0, 0.08);
            display: flex;
            flex-direction: column;
        }

        /* Scanlines overlay */
        #crt::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 4px,
                rgba(0, 0, 0, 0.12) 4px,
                rgba(0, 0, 0, 0.12) 5px
            );
            pointer-events: none;
            z-index: 10;
        }

        /* CRT vignette */
        #crt::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);
            pointer-events: none;
            z-index: 9;
        }

        #terminal {
            flex: 1;
            display: flex;
            flex-direction: column;
            color: var(--term-color);
            text-shadow: none;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        #output {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 8px;
            word-break: break-word;
            white-space: pre-wrap;
        }

        #output::-webkit-scrollbar { display: none; }

        .line {
            min-height: calc(var(--font-size) * var(--line-height));
            white-space: pre-wrap;
            word-break: break-word;
        }

        .input-line {
            display: flex;
            align-items: center;
            border-top: 1px solid var(--term-dim);
            padding-top: 14px;
            padding-bottom: 14px;
            margin-top: 4px;
            flex-shrink: 0;
            cursor: text;
        }

        #prompt {
            margin-right: 8px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        #cmd {
            background: transparent;
            border: none;
            color: var(--term-color);
            font-family: var(--font-family);
            font-size: var(--font-size);
            line-height: var(--line-height);
            outline: none;
            flex-grow: 1;
            caret-color: transparent; /* default hidden; shown when typing via JS */
            text-shadow: inherit;
            width: 0;
        }
        #cmd.typing {
            caret-color: var(--term-color);
        }

        #cmd:disabled, .input-line.processing {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .input-line.processing #block-cursor {
            animation: none;
            opacity: 0.5;
        }

        .hidden { display: none !important; }

        /* Message classes */
        .panic {
            color: var(--err-color);
            text-shadow: 0 0 8px rgba(255, 60, 60, 0.7);
        }

        .sys {
            color: var(--term-dim);
            text-shadow: 0 0 4px rgba(51, 255, 0, 0.3);
        }

        .msg-me {
            color: #99ff99;
            text-shadow: 0 0 6px rgba(153, 255, 153, 0.5);
        }

        .msg-them {
            color: var(--term-color);
            font-weight: bold;
        }

        /* Moving scanline */
        @keyframes scanline {
            0%   { transform: translateY(-100%); }
            100% { transform: translateY(2000%); }
        }

        .scanline {
            position: absolute;
            left: 0; right: 0;
            height: 60px;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(51, 255, 0, 0.04) 50%,
                transparent 100%
            );
            animation: scanline 12s linear infinite;
            pointer-events: none;
            z-index: 8;
        }

        /* Cursor blink on prompt */
        @keyframes blinker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .blink { animation: blinker 1s step-end infinite; }

        /* Phosphor flicker */
        @keyframes flicker {
            0%, 95%, 100% { opacity: 1; }
            96% { opacity: 0.92; }
            97% { opacity: 1; }
            98% { opacity: 0.95; }
        }
        .status-tag {
            font-size: 0.75em;
            opacity: 0.6;
            margin-left: 6px;
            animation: blinker 0.8s step-end infinite;
        }
        .status-ok {
            animation: none;
            opacity: 0.5;
        }
        .status-fail {
            animation: none;
            color: var(--err-color);
            opacity: 0.9;
        }
        /* Block cursor */
        #block-cursor {
            display: inline-block;
            width: 0.6em;
            height: 1.1em;
            background: #7fff50;       /* bright lime — vivid green, brighter than text, not white */
            box-shadow:
                0 0 0 1px #39ff14,     /* hard 1px green border */
                0 0 3px rgba(57,255,20,0.6);
            vertical-align: text-bottom;
            margin-right: 2px;
            animation: blinker 1s step-end infinite;
            flex-shrink: 0;
        }
        #block-cursor.hidden { display: none !important; }
        #crt { animation: flicker 8s infinite; }

        /* ─── Real HDR on capable displays ─── */
        /* On HDR screens, display-p3 values > 1 push beyond SDR peak brightness */
        @media (dynamic-range: high) {
            :root {
                --term-color: color(display-p3 0.05 1.8 0.02);
                --term-dim:   color(display-p3 0.02 0.7 0.01);
                --err-color:  color(display-p3 1.8 0.05 0.05);
                --screen-color: #000400;
            }
            #terminal {
                text-shadow: none;
            }
            #block-cursor {
                background: color(display-p3 0.3 2.5 0.1); /* bright green HDR, not white */
                box-shadow:
                    0 0 0 1px color(display-p3 0 3 0),
                    0 0 4px  color(display-p3 0 2 0);
            }
        }

        /* ── Interactive EULA link ── */
        .eula-link {
            text-decoration: underline;
            cursor: pointer;
            color: var(--term-color);
            transition: opacity 0.25s;
        }
        .eula-link:hover { opacity: 0.65; }
        .eula-link-used {
            text-decoration: none;
            cursor: default;
            opacity: 0.35;
        }