/* ========================================
   ENHANCED CRT EMULATION
   ======================================== */

/* CRT Screen Curvature & Container */
body.crt-active #app {
    /* Subtle barrel distortion like real CRT monitors */
    transform: perspective(500px) rotateY(0deg);
    transform-style: preserve-3d;
}

/* Main CRT Overlay - Scanlines, RGB, and Effects */
.crt-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.crt-active .crt-overlay {
    opacity: 1;
    /* Scanlines - horizontal lines */
    background:
        linear-gradient(
            to bottom,
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.15) 50%
        );
    background-size: 100% 2px;

    /* Add subtle RGB shadow/chromatic aberration */
    box-shadow:
        inset 0 0 3px rgba(255, 0, 0, 0.05),
        inset 0 0 3px rgba(0, 255, 0, 0.05),
        inset 0 0 3px rgba(0, 0, 255, 0.05);
}

/* CRT Scanline Animation - Subtle vertical refresh */
.crt-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 100% 200%;
    animation: none;
    opacity: 0;
}

body.crt-active .crt-overlay::before {
    opacity: 1;
    animation: crt-scan 8s linear infinite;
}

@keyframes crt-scan {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

/* CRT Vignette - Darkening at edges */
.crt-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.5) 100%
    );
    opacity: 0;
}

body.crt-active .crt-overlay::after {
    opacity: 1;
}

/* CRT Flicker Animation - Subtle brightness variation */
body.crt-active {
    animation: crt-flicker 0.3s infinite alternate;
}

@keyframes crt-flicker {
    0% {
        opacity: 0.995;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.997;
    }
}

/* Restore monospace font for chat in CRT mode */
body.crt-active #chat-messages,
body.crt-active #chat-input {
    font-family: 'IBM Plex Mono', 'VT323', 'Courier New', monospace;
}

/* Phosphor Glow - Text glow effect */
body.crt-active * {
    text-shadow:
        0 0 1px var(--text-color),
        0 0 2px var(--text-color),
        0 0 var(--glow-spread) var(--text-color);
}

/* Remove glow from dim elements */
body.crt-active .dim,
body.crt-active .msg-time,
body.crt-active .msg-time *,
body.crt-active [style*="var(--dim-color)"] {
    text-shadow: none;
}

/* Keep progress bar text readable - preserve outline shadow only */
body.crt-active .progress-label-inside {
    text-shadow:
        -1px -1px 0 var(--bg-color),
        1px -1px 0 var(--bg-color),
        -1px 1px 0 var(--bg-color),
        1px 1px 0 var(--bg-color);
}

/* Enhanced glow for bright elements */
body.crt-active .stat-value,
body.crt-active .panel-header,
body.crt-active button {
    text-shadow:
        0 0 2px var(--text-color),
        0 0 4px var(--text-color),
        0 0 8px var(--text-color);
}

/* Screen Bloom/Glow on panels */
body.crt-active .panel {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
}

/* Add subtle noise/grain texture */
body.crt-active::before {
    content: '';
    position: fixed;
    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="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05" /></svg>');
    pointer-events: none;
    z-index: 9998;
    opacity: 0.3;
    animation: crt-noise 0.2s steps(2) infinite;
}

@keyframes crt-noise {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-2px, 2px);
    }
    100% {
        transform: translate(2px, -2px);
    }
}