@import"https://fonts.googleapis.com/css2?family=Creepster&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;font-family:Segoe UI,system-ui,sans-serif}#gameCanvas{width:100%;height:100%;display:block;touch-action:none}#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;opacity:0;transition:opacity .3s ease}#hud.visible{opacity:1}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#fffc;text-shadow:0 0 4px rgba(0,0,0,.8);font-weight:300}#powerMeter{position:absolute;bottom:60px;left:50%;transform:translate(-50%);width:80px;height:80px;border-radius:50%;background:#0006;border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0000004d}#powerMeter:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:conic-gradient(transparent var(--power-angle, 0deg),rgba(255,255,255,.05) var(--power-angle, 0deg))}#powerFill{position:absolute;width:100%;height:100%;border-radius:50%;background:conic-gradient(from -90deg,var(--power-color-start, #22c55e) 0deg,var(--power-color-end, #4ade80) var(--power-angle, 0deg),transparent var(--power-angle, 0deg));transition:none;mask:radial-gradient(transparent 55%,black 56%);-webkit-mask:radial-gradient(transparent 55%,black 56%)}#powerMeter .power-inner{width:50px;height:50px;border-radius:50%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1}#powerMeter .power-text{font-family:Segoe UI,system-ui,sans-serif;font-size:14px;font-weight:600;color:#ffffffe6;text-shadow:0 1px 3px rgba(0,0,0,.5)}#powerMeter.reloading #powerFill{opacity:.7}#powerMeter.reloading .power-text{color:#f97316e6}#scoreDisplay{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:12px 16px;background:#0006;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #0000004d}#scoreDisplay .score-label{display:flex;align-items:center;gap:6px;font-family:Creepster,cursive;font-size:12px;letter-spacing:3px;color:#4ade80cc;text-transform:uppercase}#scoreDisplay .score-icon{font-size:14px;filter:drop-shadow(0 0 3px rgba(74,222,128,.5))}#scoreDisplay #score{font-family:Segoe UI,system-ui,sans-serif;font-size:28px;font-weight:700;color:#fffffff2;text-shadow:0 0 15px rgba(74,222,128,.4),0 2px 4px rgba(0,0,0,.5);letter-spacing:2px}@keyframes scorePopup{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-20px) scale(1.1)}to{opacity:0;transform:translateY(-40px) scale(.9)}}.score-popup{z-index:100}#startScreen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:80px;background-image:url(/assets/training_background.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:100;transition:opacity .5s ease,visibility .5s ease}#startScreen.hidden{opacity:0;visibility:hidden;pointer-events:none}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.drawing #crosshair{color:#4ade80;transform:translate(-50%,-50%) scale(1.2);transition:all .1s ease}#loadingScreen{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(/assets/loadbackground.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:80px;gap:20px;transition:opacity .5s ease,visibility .5s ease}#loadingScreen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-spinner{width:60px;height:60px;position:relative}.loading-spinner:before,.loading-spinner:after{content:"";position:absolute;border-radius:50%}.loading-spinner:before{width:100%;height:100%;border:3px solid rgba(255,255,255,.1);border-top-color:#4ade80e6;animation:spinnerRotate 1s linear infinite}.loading-spinner:after{width:70%;height:70%;top:15%;left:15%;border:2px solid rgba(255,255,255,.05);border-bottom-color:#4ade8099;animation:spinnerRotate .8s linear infinite reverse}@keyframes spinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-family:Creepster,cursive;font-size:1.2rem;letter-spacing:4px;color:#ffffffb3;text-shadow:0 2px 10px rgba(0,0,0,.5);animation:loadingPulse 1.5s ease-in-out infinite}.loading-asset-name{font-family:Segoe UI,system-ui,sans-serif;font-size:.85rem;letter-spacing:1px;color:#fff6;max-width:300px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes loadingPulse{0%,to{opacity:.6}50%{opacity:1}}.loading-tips{position:fixed;bottom:120px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:120;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}.loading-tips.visible{opacity:1;visibility:visible}.loading-tips .tip-spinner{width:28px;height:28px;position:relative}.loading-tips .tip-spinner:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:#4ade80e6;animation:spinnerRotate .9s linear infinite}.loading-tips .tip-content{display:flex;align-items:center;gap:12px;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 24px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.loading-tips .tip-text{font-family:Segoe UI,system-ui,sans-serif;font-size:.95rem;letter-spacing:.5px;color:#ffffffd9;max-width:320px;text-align:center;line-height:1.4;transition:opacity .2s ease}.loading-tips .tip-label{font-family:Creepster,cursive;font-size:.8rem;letter-spacing:3px;color:#4ade80b3;text-transform:uppercase}.loading-tips.survival .tip-spinner:before{border-top-color:#ef4444e6}.loading-tips.survival .tip-label{color:#ef6464b3}.btn-loading{position:relative;pointer-events:none}.btn-loading:after{content:"";position:absolute;width:20px;height:20px;top:50%;right:-30px;transform:translateY(-50%);border:2px solid rgba(255,255,255,.2);border-top-color:#4ade80cc;border-radius:50%;animation:spinnerRotate .8s linear infinite}.start-btn.btn-loading:after{width:24px;height:24px;right:-40px}.start-btn.survival.btn-loading:after{border-top-color:#ef4444cc}#controlsHint{position:fixed;top:20px;left:20px;font-size:13px;color:#fff6;letter-spacing:1px;pointer-events:none;z-index:15;opacity:0;transition:opacity .3s ease}#hud.visible #controlsHint{opacity:1}.training-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:500;transition:opacity .3s ease,visibility .3s ease}.training-panel.hidden{opacity:0;visibility:hidden;pointer-events:none}.training-panel .panel-content{background:#0a0a0feb;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:2px solid rgba(255,255,255,.08);border-radius:4px;padding:28px 36px;min-width:300px;box-shadow:0 0 40px #0009,inset 0 1px #ffffff0d}.training-panel h2{font-family:Creepster,cursive;color:#ffffffe6;font-size:2rem;font-weight:400;margin-bottom:24px;text-align:center;letter-spacing:4px;text-shadow:0 0 15px rgba(255,255,255,.3)}.training-panel .control-group{margin-bottom:16px}.toggle-label{display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:#ffffffbf;font-family:Segoe UI,system-ui,sans-serif;font-size:14px;letter-spacing:1px;transition:color .2s ease}.toggle-label:hover{color:#fffffff2}.toggle-label input[type=checkbox]{display:none}.toggle-switch{width:44px;height:24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:12px;position:relative;transition:all .3s ease}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff9;border-radius:50%;transition:all .3s ease}.toggle-label input:checked+.toggle-switch{background:#4ade804d;border-color:#4ade8080;box-shadow:0 0 15px #4ade804d}.toggle-label input:checked+.toggle-switch:after{transform:translate(20px);background:#4ade80f2;box-shadow:0 0 8px #4ade8080}.slider-label{display:flex;flex-direction:column;gap:8px;color:#ffffffbf;font-size:14px;letter-spacing:1px}.slider-label input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;background:#ffffff1a;border-radius:2px;cursor:pointer}.slider-label input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#4ade80e6;border-radius:50%;cursor:pointer;box-shadow:0 0 10px #4ade8066}.time-attack-group .time-attack-controls{display:none;flex-direction:column;gap:10px;margin-top:12px;padding:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:4px}.time-display{font-family:Creepster,cursive;font-size:2rem;font-weight:400;color:#4ade80f2;text-align:center;text-shadow:0 0 15px rgba(74,222,128,.4)}.btn-start{font-family:Creepster,cursive;padding:10px 20px;font-size:1.2rem;letter-spacing:3px;color:#fffffff2;background:transparent;border:1px solid rgba(74,222,128,.4);border-radius:4px;cursor:pointer;transition:all .3s ease}.btn-start:hover{border-color:#4ade80cc;text-shadow:0 0 15px rgba(74,222,128,.6);box-shadow:0 0 20px #4ade8033}.btn-reset{font-family:Creepster,cursive;width:100%;margin-top:16px;padding:12px 20px;font-size:1.1rem;letter-spacing:3px;color:#facc15e6;background:transparent;border:1px solid rgba(250,204,21,.3);border-radius:4px;cursor:pointer;transition:all .3s ease}.btn-reset:hover{border-color:#facc1599;text-shadow:0 0 15px rgba(250,204,21,.5);box-shadow:0 0 20px #facc1526}.btn-resume{font-family:Creepster,cursive;width:100%;margin-top:10px;padding:14px 24px;font-size:1.3rem;letter-spacing:4px;color:#fffffff2;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .3s ease}.btn-resume:hover{border-color:#ffffff80;text-shadow:0 0 15px rgba(255,255,255,.5);box-shadow:0 0 20px #ffffff1a}.btn-menu{font-family:Creepster,cursive;width:100%;margin-top:8px;padding:12px 20px;font-size:1.1rem;letter-spacing:3px;color:#ef6464e6;background:transparent;border:1px solid rgba(239,68,68,.25);border-radius:4px;cursor:pointer;transition:all .3s ease}.btn-menu:hover{border-color:#ef444480;text-shadow:0 0 15px rgba(239,68,68,.5);box-shadow:0 0 20px #ef444426}#timeAttackTimer{position:fixed;top:20px;left:50%;transform:translate(-50%);font-size:32px;font-weight:700;color:#4ade80f2;text-shadow:0 2px 8px rgba(0,0,0,.5);z-index:15;opacity:0;transition:opacity .3s ease;pointer-events:none}#timeAttackTimer.visible{opacity:1}#timeAttackTimer.warning{color:#facc15f2}#timeAttackTimer.critical{color:#ef4444f2;animation:timerPulse .5s ease-in-out infinite}@keyframes timerPulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.1)}}#modeSelectScreen{display:flex;flex-direction:row;justify-content:center;align-items:flex-end;gap:4rem;padding-bottom:10vh}.mode-btn{font-family:Creepster,cursive;font-size:2.8rem;letter-spacing:8px;padding:1rem 2rem;color:#ffffffe6;background:transparent;border:none;cursor:pointer;transition:all .3s ease;text-transform:uppercase;text-shadow:0 0 10px rgba(255,255,255,.3),0 4px 20px rgba(0,0,0,.8);position:relative;overflow:hidden}.mode-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.mode-btn:hover:before{left:100%}.mode-btn:hover{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.6),0 0 40px rgba(255,255,255,.3),0 4px 20px rgba(0,0,0,.8);transform:scale(1.1)}.mode-btn:active{transform:scale(.98)}.mode-btn.survival{color:#ff9696f2;text-shadow:0 0 10px rgba(255,50,50,.4),0 4px 20px rgba(0,0,0,.8)}.mode-btn.survival:hover{color:#f66;text-shadow:0 0 30px rgba(255,50,50,.8),0 0 60px rgba(255,50,50,.4),0 4px 20px rgba(0,0,0,.8)}#modeSelectScreen,#startScreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;transition:opacity .5s ease,visibility .5s ease}#startScreen{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1.5rem;padding-bottom:10vh;background-size:cover;background-position:center}#modeSelectScreen{background-image:url(/assets/loadbackground.jpg);background-size:cover;background-position:center}#modeSelectScreen.hidden,#startScreen.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-btn{font-family:Creepster,cursive;font-size:3.5rem;letter-spacing:10px;padding:.5rem 2rem;color:#fffffff2;background:transparent;border:none;cursor:pointer;transition:all .3s ease;text-transform:uppercase;text-shadow:0 0 15px rgba(255,255,255,.4),0 4px 25px rgba(0,0,0,.8)}.start-btn:hover{color:#fff;text-shadow:0 0 30px rgba(255,255,255,.7),0 0 50px rgba(255,255,255,.4),0 4px 25px rgba(0,0,0,.8);transform:scale(1.1)}.start-btn:active{transform:scale(.95)}.start-btn.survival{font-size:4rem;color:#ff6464f2;text-shadow:0 0 20px rgba(255,50,50,.5),0 4px 25px rgba(0,0,0,.8)}.start-btn.survival:hover{color:#f55;text-shadow:0 0 40px rgba(255,50,50,.8),0 0 60px rgba(255,50,50,.5),0 4px 25px rgba(0,0,0,.8)}.back-btn{font-family:Creepster,cursive;font-size:1.5rem;letter-spacing:6px;padding:.5rem 1.5rem;color:#ffffff80;background:transparent;border:none;cursor:pointer;transition:all .3s ease;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.8)}.back-btn:hover{color:#ffffffe6;text-shadow:0 0 15px rgba(255,255,255,.4),0 2px 10px rgba(0,0,0,.8);transform:scale(1.05)}