:root{--bg-color:#070612;--neon-pink:#ff007f;--neon-cyan:#00f0ff;--neon-violet:#8a2be2;--neon-yellow:#ffdf00;--hud-bg:#0f0c2373;--hud-border:#00f0ff33;--font-display:"Orbitron", sans-serif;--font-mono:"Share Tech Mono", monospace}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}html,body{background:var(--bg-color);color:#fff;height:100%;font-family:var(--font-display);margin:0;padding:0;overflow:hidden}#visualizer-container{width:100vw;height:100vh;position:relative;overflow:hidden}canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}#crt-scanlines{pointer-events:none;z-index:10;opacity:.75;background:linear-gradient(#12101000 50%,#00000061 50%) 0 0/100% 8px,linear-gradient(90deg,#ff00000a,#00ff0003,#0000ff0a) 0 0/6px 100%;width:100%;height:calc(100% + 24px);animation:24s linear infinite scanline-scroll,.15s infinite crt-flicker;position:absolute;top:0;left:0}@keyframes scanline-scroll{0%{transform:translateY(0)}to{transform:translateY(-24px)}}@keyframes crt-flicker{0%{opacity:.72}50%{opacity:.77}to{opacity:.73}}#vignette{pointer-events:none;z-index:9;background:radial-gradient(circle,#0000 25%,#04030ce0 100%),#00000047;position:absolute;inset:0}#hud{background:var(--hud-bg);border:1px solid var(--hud-border);-webkit-backdrop-filter:blur(12px);z-index:20;will-change:transform, opacity;border-radius:16px;justify-content:space-between;align-items:center;width:calc(100% - 400px);max-width:850px;padding:20px 30px;transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .4s,left .5s,width .5s;display:flex;position:absolute;bottom:30px;left:40px;box-shadow:0 10px 30px #0009,inset 0 0 15px #00f0ff0d}#hud.hidden{opacity:0;pointer-events:none;transform:translateY(150%)}.hud-left{flex-direction:column;gap:8px;display:flex}.hud-title{letter-spacing:2px;color:var(--neon-cyan);text-transform:uppercase;text-shadow:0 0 5px #00f0ff80;font-size:14px;font-weight:700}.hud-layers{font-family:var(--font-mono);gap:20px;font-size:13px;display:flex}.layer-status{color:#ffffffb3}.layer-status span{color:#fff;font-weight:700}.hud-center{flex-direction:column;align-items:center;gap:4px;display:flex}.timer-label{letter-spacing:1px;color:#ffffff80;text-transform:uppercase;font-size:10px}.timer-display{font-family:var(--font-mono);color:#fff;text-shadow:0 0 8px #fff6;align-items:baseline;gap:4px;font-size:28px;font-weight:900;display:flex}.timer-sec{color:var(--neon-pink)}.timer-bar-container{background:#ffffff1a;border-radius:2px;width:100px;height:4px;margin-top:4px;overflow:hidden}.timer-bar{background:linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));border-radius:2px;width:0%;height:100%;transition:width .1s linear}.hud-right{align-items:center;gap:12px;display:flex}.btn{color:#fff;font-family:var(--font-display);letter-spacing:1px;cursor:pointer;text-transform:uppercase;background:0 0;border:1px solid #ffffff26;border-radius:8px;align-items:center;gap:6px;padding:10px 16px;font-size:11px;font-weight:700;transition:all .3s;display:flex}.btn:hover{border-color:var(--neon-cyan);text-shadow:0 0 5px #fffc;background:#00f0ff0d;box-shadow:0 0 10px #00f0ff4d}.btn.active{border-color:var(--neon-pink);color:#fff;background:#ff007f26;box-shadow:0 0 12px #ff007f66}.sound-wave{align-items:flex-end;gap:2px;width:12px;height:10px;display:inline-flex}.sound-bar{background-color:#fff;border-radius:1px;width:2px;height:2px}.btn.active .sound-bar{background-color:var(--neon-pink);animation:.8s ease-in-out infinite alternate bounce}.btn.active .sound-bar:first-child{animation-delay:.1s}.btn.active .sound-bar:nth-child(2){animation-delay:.3s}.btn.active .sound-bar:nth-child(3){animation-delay:.2s}@keyframes bounce{0%{height:2px}to{height:10px}}#hide-hint{font-family:var(--font-mono);color:#ffffff59;z-index:25;pointer-events:none;-webkit-backdrop-filter:blur(4px);background:#07061280;border:1px solid #ffffff0d;border-radius:6px;padding:6px 12px;font-size:11px;position:absolute;top:20px;right:20px}#flash-overlay{opacity:0;pointer-events:none;z-index:15;mix-blend-mode:color-dodge;background:#fff;position:absolute;inset:0}.glitch-text{position:relative}.glitch-text:before,.glitch-text:after{content:attr(data-text);background:var(--bg-color);width:100%;height:100%;position:absolute;top:0;left:0}.glitch-text:before{text-shadow:-1px 0 var(--neon-pink);clip:rect(44px, 450px, 56px, 0);animation:5s linear infinite alternate-reverse glitch-anim;left:2px}.glitch-text:after{text-shadow:-1px 0 var(--neon-cyan), 0 1px var(--neon-cyan);clip:rect(85px, 450px, 140px, 0);animation:5s linear infinite alternate-reverse glitch-anim2;left:-2px}@keyframes glitch-anim{0%{clip:rect(15px, 9999px, 66px, 0)}10%{clip:rect(85px, 9999px, 5px, 0)}20%{clip:rect(34px, 9999px, 78px, 0)}30%{clip:rect(67px, 9999px, 12px, 0)}40%{clip:rect(4px, 9999px, 90px, 0)}50%{clip:rect(123px, 9999px, 20px, 0)}60%{clip:rect(88px, 9999px, 60px, 0)}70%{clip:rect(2px, 9999px, 110px, 0)}80%{clip:rect(56px, 9999px, 85px, 0)}90%{clip:rect(110px, 9999px, 30px, 0)}to{clip:rect(40px, 9999px, 75px, 0)}}@keyframes glitch-anim2{0%{clip:rect(65px, 9999px, 105px, 0)}10%{clip:rect(12px, 9999px, 85px, 0)}20%{clip:rect(95px, 9999px, 45px, 0)}30%{clip:rect(3px, 9999px, 115px, 0)}40%{clip:rect(54px, 9999px, 12px, 0)}50%{clip:rect(78px, 9999px, 95px, 0)}60%{clip:rect(115px, 9999px, 3px, 0)}70%{clip:rect(43px, 9999px, 60px, 0)}80%{clip:rect(90px, 9999px, 130px, 0)}90%{clip:rect(5px, 9999px, 50px, 0)}to{clip:rect(100px, 9999px, 15px, 0)}}#vhs-glitch-bar{pointer-events:none;z-index:11;opacity:.35;background:#ffffff26;width:100%;height:22px;animation:8s linear infinite vhs-roll;position:absolute;top:0;left:0;transform:translateY(-100px);box-shadow:0 0 10px #fff3}@keyframes vhs-roll{0%{transform:translateY(-100px)}90%{transform:translateY(105vh)}to{transform:translateY(105vh)}}#vhs-noise-overlay{pointer-events:none;z-index:12;opacity:.16;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHg9IjAiIHk9IjAiLz48cmVjdCB3aWRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InJnYmEoMCwwLDAsMC4zKSIgeD0iMiIgeT0iMiIvPjwvc3ZnPg==);background-position:0 0,2px 2px;background-size:4px 4px;width:200%;height:200%;animation:80ms steps(4,end) infinite noise-jitter;position:absolute;top:-50%;left:-50%}@keyframes noise-jitter{0%{transform:translate(0)}25%{transform:translate(2px,3px)}50%{transform:translate(-3px,1px)}75%{transform:translate(3px,-2px)}to{transform:translate(-2px,-3px)}}#terminator-hud{box-sizing:border-box;z-index:18;pointer-events:none;width:320px;font-family:var(--font-mono);color:#ff1e3ca6;text-shadow:0 0 4px #ff003259;background:linear-gradient(90deg,#f000 0%,#14020273 100%);border-left:1px solid #ff00321f;flex-direction:column;justify-content:flex-end;padding:20px 25px;font-size:11px;line-height:1.4;display:flex;position:absolute;top:0;bottom:0;right:0;overflow:hidden}.terminator-line{white-space:pre-wrap;margin-bottom:2px;animation:.1s ease-out fade-in-red}@keyframes fade-in-red{0%{color:#f36;opacity:0}to{color:#ff1e3ca6;opacity:1}}@media (width<=768px){#hud{flex-direction:column;gap:12px;padding:12px 18px;bottom:15px;width:95%!important;max-width:none!important;left:50%!important;transform:translate(-50%)!important}#hud.hidden{opacity:0;pointer-events:none;transform:translate(-50%,150%)!important}.hud-layers{flex-direction:column;align-items:center;gap:4px}.hud-right{justify-content:center;width:100%}#hide-hint{display:none}#terminator-hud{background:linear-gradient(#1402028c 80%,#f000 100%);border-bottom:1px solid #ff00321f;border-left:none;width:100%;height:140px;padding:10px 15px;transition:height .4s,background .4s;inset:0 0 auto}#hud.hidden~#terminator-hud{background:linear-gradient(#140202bf 0%,#14020266 100%)!important;height:100%!important}:fullscreen #terminator-hud{background:linear-gradient(#140202bf 0%,#14020266 100%)!important;height:100%!important}}#terminal-overlay{z-index:1000;box-sizing:border-box;pointer-events:none;background:#07061273;flex-direction:column;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}#terminal-overlay *{pointer-events:auto}#terminal-output{color:#00ff41;text-shadow:0 0 5px #00ff41b3;flex-direction:column;flex:1;justify-content:flex-end;margin-bottom:10px;font-family:Share Tech Mono,monospace;font-size:1.2rem;display:flex;overflow-y:hidden}.terminal-line{margin:2px 0;transition:opacity 1s ease-out;animation:.3s ease-out fadeIn}.prompt-line{color:#00ff41;opacity:.8}#terminal-input-line{color:#00ff41;align-items:center;font-family:Share Tech Mono,monospace;font-size:1.2rem;display:flex}#terminal-prompt{white-space:nowrap;margin-right:10px}#terminal-input{color:#00ff41;text-shadow:0 0 5px #00ff41b3;background:0 0;border:none;outline:none;flex:1;font-family:Share Tech Mono,monospace;font-size:1.2rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.mute-btn{color:#00ff41;cursor:pointer;text-shadow:0 0 5px #00ff41b3;z-index:1010;background:0 0;border:1px solid #00ff4166;border-radius:6px;padding:6px 12px;font-family:Share Tech Mono,monospace;font-size:.9rem;transition:all .3s;position:absolute;top:20px;right:20px;box-shadow:0 0 5px #00ff411a}.mute-btn:hover{background:#00ff4126;border-color:#00ff41;box-shadow:0 0 10px #00ff4166}.mute-btn.active{border-color:var(--neon-pink);color:var(--neon-pink);text-shadow:0 0 5px #ff007fb3;box-shadow:0 0 10px #ff007f66}.mute-btn.active:hover{background:#ff007f26}
