:root{--bg-color:#050505;--primary-color:#0fc;--secondary-color:#f0f;--text-color:#fff;--track-bg:#ffffff0d;--track-border:#00ffcc4d;--font-main:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif}*{box-sizing:border-box;margin:0;padding:0}#loading-text.hidden,#fever-text.hidden{display:none!important}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-main);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:hidden}#youtube-container{z-index:0;opacity:.55;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}#youtube-player{width:100%;height:100%}#app{mix-blend-mode:screen;background:0 0;width:100%;height:100%;position:relative}.input-group{gap:10px;display:flex}#youtube-url{border:2px solid var(--primary-color);color:#fff;background:#00000080;border-radius:5px;outline:none;width:400px;padding:15px;font-size:1.2rem}#youtube-url:focus{box-shadow:0 0 15px #00ffcc80}.key-input{text-align:center;text-transform:uppercase;width:40px;height:40px;color:var(--secondary-color);border:1px solid var(--secondary-color);background:#000;border-radius:5px;outline:none;font-size:1.5rem;font-weight:700}.key-input:focus{box-shadow:0 0 10px var(--secondary-color)}#fever-text{color:#fa0;text-shadow:0 0 20px red,0 0 40px #fa0;letter-spacing:5px;z-index:10;pointer-events:none;font-size:3rem;font-weight:700;animation:.3s infinite alternate feverPulse;position:absolute;top:150px;left:50%;transform:translate(-50%)}@keyframes feverPulse{0%{opacity:.8;transform:translate(-50%)scale(1)}to{opacity:1;transform:translate(-50%)scale(1.1)}}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}#game-canvas{z-index:1;mix-blend-mode:screen;width:100%;height:100%;position:absolute;top:0;left:0}#ui-layer{z-index:10;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.screen{pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .6s,transform .6s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:0;left:0;transform:scale(1)translateY(0)}.screen.hidden{opacity:0;pointer-events:none;transform:scale(.95)translateY(30px)}#start-screen{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#050505d9}.glitch{text-transform:uppercase;text-shadow:.05em 0 0 var(--primary-color), -.025em -.05em 0 var(--secondary-color), .025em .05em 0 var(--text-color);margin-bottom:1rem;font-size:5rem;font-weight:900;animation:.5s infinite glitch;position:relative}.glitch span{position:absolute;top:0;left:0}#start-screen p{color:#aaa;letter-spacing:2px;text-transform:uppercase;margin-bottom:2rem;font-size:1.2rem}.custom-file-upload{border:2px solid var(--primary-color);color:var(--primary-color);cursor:pointer;text-transform:uppercase;letter-spacing:2px;background:0 0;border-radius:5px;padding:15px 40px;font-size:1.5rem;font-weight:700;transition:all .3s;box-shadow:0 0 15px #00ffcc4d,inset 0 0 10px #00ffcc1a}.custom-file-upload:hover{background:var(--primary-color);color:var(--bg-color);box-shadow:0 0 30px #0fcc,inset 0 0 20px #00ffcc80}input[type=file]{display:none}.hud{pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:20px;left:20px;right:20px}.score-box,.combo-box,.offset-box{border:1px solid var(--track-border);background:#00000080;border-radius:8px;flex-direction:column;padding:10px 20px;display:flex;box-shadow:0 0 10px #0fc3}.combo-box{border-color:var(--secondary-color);align-items:flex-end;box-shadow:0 0 10px #f0f3}.offset-box{border-color:#fff;align-items:center;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #fff3}.label{color:#888;letter-spacing:2px;font-size:.8rem}.value{font-family:monospace;font-size:2.5rem;font-weight:700}#score{color:var(--primary-color);text-shadow:0 0 10px var(--primary-color)}#combo{color:var(--secondary-color);text-shadow:0 0 10px var(--secondary-color)}#offset{color:#fff;text-shadow:0 0 10px #fff;font-size:1.5rem}.feedback{text-transform:uppercase;opacity:0;font-size:3rem;font-weight:700;transition:opacity .1s;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)}.feedback.show{opacity:1;animation:.5s forwards popInOut}@keyframes popInOut{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.2)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes glitch{0%{text-shadow:.05em 0 0 var(--primary-color), -.025em -.05em 0 var(--secondary-color), .025em .05em 0 var(--text-color)}14%{text-shadow:.05em 0 0 var(--primary-color), -.025em -.05em 0 var(--secondary-color), .025em .05em 0 var(--text-color)}15%{text-shadow:-.05em -.025em 0 var(--primary-color), .025em .025em 0 var(--secondary-color), -.05em -.05em 0 var(--text-color)}49%{text-shadow:-.05em -.025em 0 var(--primary-color), .025em .025em 0 var(--secondary-color), -.05em -.05em 0 var(--text-color)}50%{text-shadow:.025em .05em 0 var(--primary-color), .05em 0 0 var(--secondary-color), 0 -.05em 0 var(--text-color)}99%{text-shadow:.025em .05em 0 var(--primary-color), .05em 0 0 var(--secondary-color), 0 -.05em 0 var(--text-color)}to{text-shadow:-.025em 0 0 var(--primary-color), -.025em -.025em 0 var(--secondary-color), -.025em -.05em 0 var(--text-color)}}#touch-controls{z-index:50;pointer-events:none;width:100%;height:45%;display:flex;position:absolute;bottom:0;left:0}#game-screen:not(.hidden) #touch-controls{pointer-events:auto}.touch-zone{touch-action:none;-webkit-tap-highlight-color:transparent;border-right:1px dashed #ffffff1a;flex:1;height:100%;transition:background .1s}.touch-zone:last-child{border-right:none}.touch-zone.active{background:linear-gradient(#0000,#fff3)}@media (width<=768px){.glitch{text-align:center;font-size:3.5rem}#start-screen p{text-align:center;padding:0 10px;font-size:.9rem}.custom-file-upload{text-align:center;box-sizing:border-box;width:90%;max-width:300px;padding:12px 20px;font-size:1.1rem}.key-input{width:35px;height:35px;font-size:1.2rem}#result-rank{font-size:4rem!important}#result-screen h1.glitch{font-size:2.5rem!important}.settings-row{gap:10px!important}.settings-row>div{padding:10px!important}}
