:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #030507; color: #fff5e0; font-family: 'Courier New', monospace; }
#retroLogoCanvas { background: transparent !important; touch-action: none; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 44%, #ffbf8010, transparent 48%), linear-gradient(#ffbf8009 1px, transparent 1px), linear-gradient(90deg,#ffbf8009 1px,transparent 1px); background-size: auto, 64px 64px,64px 64px; }
body::after { content: ''; position: fixed; inset: 18px; pointer-events: none; border: 1px solid #ffbf8020; }
.telemetry { position: fixed; top: 38px; left: 40px; right: 40px; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .18em; color: #b9aa94; pointer-events: none; }
.telemetry span:last-child { color: #a0d8ef; }
#retroLogoEnterButton { border: 1px solid #ffbf8070; padding: 11px 24px; font-size: 14px !important; letter-spacing: .16em; background: #ffbf800a; text-shadow: none !important; transition: background .2s, box-shadow .2s; }
#retroLogoEnterButton:hover { background: #ffbf8020; box-shadow: 0 0 28px #ffbf8015; }
#trailerLink { font-size: 12px !important; letter-spacing: .05em; text-shadow: none !important; animation: none !important; padding: 10px; white-space: nowrap; }
#xLink { bottom: 37px !important; right: 40px !important; font-size: 11px !important; letter-spacing: .07em; }
#gameTeaser { white-space: nowrap; font-size: 12px !important; letter-spacing: .04em; text-shadow: none !important; }
.hint { position: fixed; bottom: 37px; left: 40px; font-size: 10px; letter-spacing: .12em; color: #b9aa94; pointer-events: none; }
:focus-visible { outline: 2px solid #a0d8ef; outline-offset: 5px; }
@media(max-width:600px) { body::after { inset: 10px; } .telemetry { top: 25px; left: 25px; right: 25px; font-size: 9px; } .telemetry span:last-child { display: none; } .hint { left: 25px; bottom: 28px; font-size: 8px; } #xLink { right: 25px !important; bottom: 27px !important; font-size: 9px !important; } }
@media(prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }


    @keyframes glitchFlicker {
        0% { filter: brightness(1); }
        20% { filter: brightness(1.05); }
        40% { filter: brightness(0.95); }
        60% { filter: brightness(1.03); }
        80% { filter: brightness(0.97); }
        100% { filter: brightness(1.02); }
    }
    @keyframes flicker {
        0% { filter: brightness(1); }
        10% { filter: brightness(0.8); }
        20% { filter: brightness(1.2); }
        30% { filter: brightness(0.9); }
        40% { filter: brightness(1.1); }
        100% { filter: brightness(1); }
    }
    /* Applied flicker only during scramble phase via JS */