:root {
    --bg-base: #020508;
    --hud-cyan: #00f0ff;
    --hud-cyan-dim: rgba(0, 240, 255, 0.15);
    --hud-red: #ff2a2a;
    --hud-orange: #ff8c00;
    --text-main: #e0f8ff;
    --panel-bg: rgba(3, 10, 15, 0.9);
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--bg-base);
    color: var(--text-main);
    margin: 0; padding: 0;
    overflow-x: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

@keyframes lightFlicker {
    0%, 18%, 22%, 25%, 53%, 56%, 57%, 62%, 63%, 88%, 100% {
        opacity: 1; filter: brightness(1) contrast(1);
    }
    19%, 21., 24%, 54%, 55%, 58%, 61%, 87% {
        opacity: 0.25; filter: brightness(0.3) contrast(1.4) saturate(0.5);
    }
}
.wrapper {
    animation: lightFlicker 12s infinite;
}

@keyframes textFlicker {
    0%, 91%, 93%, 100% { opacity: 1; text-shadow: 0 0 8px var(--hud-cyan); }
    92% { opacity: 0.1; text-shadow: none; }
}
.flicker-text { animation: textFlicker 4s infinite; }

@keyframes glitchAnimation {
    0% { transform: translate(0,0); opacity: 0; }
    4% { transform: translate(-2px, 3px) skewX(2deg); opacity: 0.06; }
    5% { transform: translate(3px, -1px) skewX(-3deg); opacity: 0; }
    61% { transform: translate(0,0); opacity: 0; }
    62% { transform: translate(4px, 1px) scaleY(1.1); opacity: 0.1; }
    63% { transform: translate(-3px, -2px); opacity: 0; }
    100% { transform: translate(0,0); opacity: 0; }
}
.glitch-noise {
    position: fixed; top: -20px; left: -20px; width: calc(100vw + 40px); height: calc(100vh + 40px);
    background: repeating-linear-gradient(0deg, rgba(0,240,255,0.1), rgba(0,240,255,0.1) 1px, transparent 1px, transparent 3px);
    pointer-events: none; z-index: 990; opacity: 0;
    animation: glitchAnimation 2s infinite;
}

@keyframes cautionFlash {
    0%, 100% { background-color: rgba(255, 42, 42, 0); box-shadow: inset 0 0 0px rgba(255,42,42,0); }
    50% { background-color: rgba(255, 42, 42, 0.25); box-shadow: inset 0 0 100px rgba(255,42,42,0.6); }
}
.caution-overlay {
    position: fixed; top:0; left:0; width:100vw; height:100vh;
    pointer-events: none; z-index: 995; display: none;
}
.caution-overlay.active {
    display: block; animation: cautionFlash 0.3s infinite;
}

.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
    background-size: 100% 4px, 5px 100%; pointer-events: none; z-index: 999;
}
.vignette {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    box-shadow: 0 0 200px rgba(0,0,0,0.98) inset; pointer-events: none; z-index: 998;
}

.wrapper {
    max-width: 1300px; margin: 40px auto; padding: 20px;
    opacity: 0; animation: hudUp 1.2s 3.8s forwards cubic-bezier(0.1, 0.8, 0.2, 1);
}
@keyframes hudUp {
    0% { opacity: 0; transform: scale(0.97) translateY(15px); filter: blur(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.hud-layout { display: grid; grid-template-columns: 1fr 340px; gap: 25px; }
@media (max-width: 950px) { .hud-layout { grid-template-columns: 1fr; } }

.main-panel { background: var(--panel-bg); border: 1px solid var(--hud-cyan-dim); padding: 25px; box-shadow: 0 0 20px rgba(0,240,255,0.03); }
.header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--hud-cyan-dim); padding-bottom: 12px; margin-bottom: 25px; }
h1 { font-size: 22px; margin: 0; letter-spacing: 2px; font-weight: normal; color: var(--hud-cyan); text-shadow: 0 0 5px var(--hud-cyan-dim); }
.status-box { font-size: 11px; color: var(--hud-cyan); text-align: right; line-height: 1.5; font-family: monospace; }

.controls { background: rgba(0, 240, 255, 0.02); border-left: 3px solid var(--hud-cyan); padding: 12px 20px; margin-bottom: 25px; }
.controls label { display: flex; align-items: center; gap: 20px; width: 100%; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
input[type="range"] { -webkit-appearance: none; flex-grow: 1; height: 2px; background: var(--hud-cyan-dim); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 18px; background: var(--hud-cyan); cursor: pointer; box-shadow: 0 0 8px var(--hud-cyan); }
#vol-val { min-width: 30px; text-align: right; color: var(--hud-cyan); font-weight: bold; }

.section { margin-bottom: 30px; }
.section-title { font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; color: var(--hud-cyan); font-weight: bold; }
.section-title::before { content: '◤ '; font-size: 10px; }
.section.hostile .section-title { color: var(--hud-red); }
.section.foley .section-title { color: var(--hud-orange); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
button { font-family: inherit; cursor: pointer; text-transform: uppercase; background: rgba(0,0,0,0.6); color: var(--text-main); outline: none; }

.se-btn {
    border: 1px solid var(--hud-cyan-dim); padding: 12px 10px; font-size: 13px; text-align: left;
    display: flex; flex-direction: column; min-height: 65px; justify-content: center;
    transition: background 0.1s, border-color 0.1s, transform 0.05s;
}
.se-btn .sub { font-size: 9px; color: var(--hud-cyan); opacity: 0.5; margin-top: 5px; font-weight: normal; text-transform: none; }
.se-btn:hover { background: rgba(0, 240, 255, 0.08); border-color: var(--hud-cyan); transform: translateY(-1px); }
.se-btn:active { background: var(--hud-cyan); color: #000; transform: translateY(1px); }
.se-btn:active .sub { color: #000; }

.hostile .se-btn { border-color: rgba(255,42,42,0.2); }
.hostile .se-btn .sub { color: var(--hud-red); }
.hostile .se-btn:hover { background: rgba(255,42,42,0.08); border-color: var(--hud-red); }
.hostile .se-btn:active { background: var(--hud-red); color: #fff; }

.foley .se-btn { border-color: rgba(255,140,0,0.2); }
.foley .se-btn .sub { color: var(--hud-orange); }
.foley .se-btn:hover { background: rgba(255,140,0,0.08); border-color: var(--hud-orange); }
.foley .se-btn:active { background: var(--hud-orange); color: #000; }

.side-monitor {
    background: var(--panel-bg); border: 1px solid var(--hud-cyan-dim); padding: 20px;
    display: flex; flex-direction: column; height: fit-content; transition: border-color 0.3s;
}
.monitor-header {
    font-size: 12px; color: var(--hud-cyan); border-bottom: 1px solid var(--hud-cyan-dim);
    padding-bottom: 8px; margin-bottom: 15px; letter-spacing: 1px; font-weight: bold;
}
.monitor-desc { font-size: 11px; color: rgba(224,248,255,0.6); margin: 0 0 15px 0; line-height: 1.5; }
.math-display {
    background: #000; border: 1px dashed var(--hud-cyan-dim); text-align: center;
    padding: 18px 0; font-size: 24px; color: var(--hud-cyan); font-weight: bold;
    letter-spacing: 3px; margin-bottom: 15px; text-shadow: 0 0 6px rgba(0,240,255,0.4);
}

.side-monitor.caution-mode { border-color: var(--hud-red); }
.side-monitor.caution-mode .math-display { color: var(--hud-red); border-color: var(--hud-red); text-shadow: 0 0 6px rgba(255,42,42,0.4); }
input:disabled, button:disabled {
    opacity: 0.4 !important; cursor: not-allowed !important;
    background: rgba(40, 0, 0, 0.3) !important; border-color: var(--hud-red) !important;
}

.input-area { display: flex; gap: 5px; margin-bottom: 15px; }
#math-input {
    background: #000; border: 1px solid var(--hud-cyan-dim); color: var(--hud-cyan);
    padding: 10px; font-family: inherit; font-size: 16px; width: 100%; outline: none; text-align: center;
}
#math-input:focus { border-color: var(--hud-cyan); }
#math-submit-btn {
    background: rgba(0,240,255,0.05); border: 1px solid var(--hud-cyan); color: var(--hud-cyan);
    padding: 0 18px; font-size: 11px; font-weight: bold; letter-spacing: 1px; transition: all 0.2s;
}
#math-submit-btn:hover:not(:disabled) { background: var(--hud-cyan); color: #000; }

.status-msg { font-size: 11px; text-align: center; letter-spacing: 1px; padding: 6px; margin-bottom: 5px; min-height: 15px; }
.status-msg.ok { color: var(--hud-cyan); text-shadow: 0 0 3px var(--hud-cyan); }
.status-msg.ng { color: var(--hud-red); font-weight: bold; text-shadow: 0 0 3px var(--hud-red); }

.special-btn {
    background: rgba(255, 140, 0, 0.1); border: 1px solid var(--hud-orange); color: var(--hud-orange);
    padding: 14px 10px; font-size: 11px; font-weight: bold; width: 100%; margin-top: 10px;
    letter-spacing: 1px; transition: all 0.2s; text-shadow: 0 0 4px rgba(255,140,0,0.4);
}
.special-btn:hover { background: var(--hud-orange); color: #000; box-shadow: 0 0 15px rgba(255,140,0,0.3); }

#credit-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(1, 3, 5, 0.97); z-index: 5000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.credit-content {
    width: 85%; max-width: 650px; background: #000; border: 1px solid var(--hud-orange);
    padding: 35px; box-shadow: 0 0 40px rgba(255,140,0,0.15); text-align: left;
}
#credit-text { font-size: 15px; line-height: 1.8; color: var(--hud-orange); margin-bottom: 25px; white-space: pre-wrap; font-weight: bold; letter-spacing: 1px; }
#close-credit-btn {
    background: transparent; border: 1px solid var(--hud-orange); color: var(--hud-orange);
    padding: 10px 22px; font-size: 11px; display: block; margin: 0 auto; letter-spacing: 1px; transition: all 0.2s;
}
#close-credit-btn:hover { background: var(--hud-orange); color: #000; }
.hidden { display: none !important; }

#boot-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #001; z-index: 10000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.6s cubic-bezier(0.1, 0.8, 0.2, 1);
}
#boot-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.22; pointer-events: none; }
.boot-console { position: relative; z-index: 2; color: var(--hud-cyan); width: 85%; max-width: 600px; }
.matrix-loader { font-size: 18px; font-weight: bold; letter-spacing: 4px; margin-bottom: 10px; text-shadow: 0 0 8px var(--hud-cyan); text-align: center; }
.ascii-art { font-family: monospace; white-space: pre; font-size: 9px; line-height: 1.2; color: var(--hud-cyan); opacity: 0.85; margin-bottom: 25px; text-align: center; }
.boot-log { margin: 8px 0; font-size: 12px; opacity: 0; font-family: monospace; letter-spacing: 1px; transform: translateX(-5px); transition: all 0.3s; }
.progress-container { width: 100%; height: 4px; background: #06131a; margin-top: 25px; position: relative; display: flex; align-items: center; }
.progress-fill { height: 100%; background: var(--hud-cyan); width: 0%; box-shadow: 0 0 12px var(--hud-cyan); transition: width 0.1s linear; }
.progress-percent { position: absolute; right: 0; top: -18px; font-size: 11px; font-weight: bold; }