:root{color-scheme:dark;font-family:Orbitron,ui-sans-serif,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;background:#000;color:#fafafa;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#root{display:flex;justify-content:center;align-items:center}.game-container{position:relative;width:100%;height:100%;max-width:600px;max-height:100vh;margin:0 auto;overflow:hidden;background:#000}canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:0;left:0;right:0;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:10;font-family:"Press Start 2P",monospace}.hud-left,.hud-right{display:flex;flex-direction:column;gap:4px}.hud-right{align-items:flex-end}.hud-label{font-size:7px;color:#ffffff80;letter-spacing:.1em}.hud-value{font-size:11px;color:#0ff;text-shadow:0 0 8px rgba(0,255,255,.6)}.hud-value.score{color:#fff;font-size:14px;text-shadow:0 0 10px rgba(255,255,255,.5)}.hud-value.high-score{color:#ff0;text-shadow:0 0 8px rgba(255,255,0,.5)}.hp-bar-container{width:80px;height:6px;background:#ffffff1a;border:1px solid rgba(0,255,255,.3);border-radius:3px;overflow:hidden}.hp-bar{height:100%;background:linear-gradient(90deg,#0f0,#0ff);transition:width .3s;border-radius:2px}.pause-btn{pointer-events:auto;position:absolute;top:8px;right:8px;top:max(8px,env(safe-area-inset-top));width:36px;height:36px;background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pause-btn:active{background:#fff3}.screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}.title{font-family:"Press Start 2P",monospace;font-size:clamp(18px,6vw,32px);text-align:center;color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.8),0 0 30px rgba(0,255,255,.4),0 0 60px rgba(0,255,255,.2);margin-bottom:8px;animation:titleGlow 2s ease-in-out infinite alternate}.subtitle{font-family:Orbitron,sans-serif;font-size:clamp(10px,3vw,16px);color:#f0f;text-shadow:0 0 15px rgba(255,0,255,.6);letter-spacing:.3em;margin-bottom:40px}@keyframes titleGlow{0%{text-shadow:0 0 10px rgba(0,255,255,.8),0 0 30px rgba(0,255,255,.4)}to{text-shadow:0 0 20px rgba(0,255,255,1),0 0 50px rgba(0,255,255,.6),0 0 80px rgba(0,255,255,.3)}}.menu-btn{font-family:"Press Start 2P",monospace;font-size:clamp(10px,3vw,14px);padding:14px 32px;margin:8px;background:transparent;border:2px solid #0ff;color:#0ff;cursor:pointer;letter-spacing:.1em;transition:all .2s;min-width:200px;text-align:center}.menu-btn:hover,.menu-btn:active{background:#00ffff26;box-shadow:0 0 20px #00ffff4d,inset 0 0 20px #00ffff1a}.menu-btn.primary{border-color:#0f0;color:#0f0;animation:btnPulse 1.5s ease-in-out infinite}.menu-btn.primary:hover,.menu-btn.primary:active{background:#00ff0026;box-shadow:0 0 20px #00ff004d}@keyframes btnPulse{0%,to{box-shadow:0 0 5px #0f03}50%{box-shadow:0 0 20px #0f06,0 0 40px #0f03}}.game-over-title{font-family:"Press Start 2P",monospace;font-size:clamp(20px,7vw,36px);color:red;text-shadow:0 0 20px rgba(255,0,0,.8),0 0 40px rgba(255,0,0,.4);margin-bottom:20px;animation:shakeTitle .5s ease-in-out}@keyframes shakeTitle{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.final-score-label{font-family:"Press Start 2P",monospace;font-size:8px;color:#ffffff80;margin-top:16px}.final-score{font-family:"Press Start 2P",monospace;font-size:clamp(20px,6vw,32px);color:#ff0;text-shadow:0 0 15px rgba(255,255,0,.6);margin:8px 0}.new-high-score{font-family:"Press Start 2P",monospace;font-size:10px;color:#f0f;text-shadow:0 0 10px rgba(255,0,255,.6);animation:blink .5s step-end infinite;margin-bottom:16px}@keyframes blink{50%{opacity:0}}.wave-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Press Start 2P",monospace;font-size:clamp(16px,5vw,28px);color:#0ff;text-shadow:0 0 20px rgba(0,255,255,.8);z-index:30;pointer-events:none;animation:waveIn 2s ease-out forwards}@keyframes waveIn{0%{opacity:0;transform:translate(-50%,-50%) scale(2)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.boss-hp-container{position:absolute;bottom:max(60px,calc(env(safe-area-inset-bottom) + 60px));left:10%;right:10%;height:8px;background:#ffffff1a;border:1px solid rgba(255,0,0,.4);border-radius:4px;overflow:hidden;z-index:15;pointer-events:none}.boss-hp-bar{height:100%;background:linear-gradient(90deg,red,#ff0);transition:width .2s;border-radius:3px}.boss-name{position:absolute;bottom:max(72px,calc(env(safe-area-inset-bottom) + 72px));left:0;right:0;text-align:center;font-family:"Press Start 2P",monospace;font-size:8px;color:red;text-shadow:0 0 8px rgba(255,0,0,.5);z-index:15;pointer-events:none}.combo-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Press Start 2P",monospace;font-size:clamp(14px,4vw,24px);color:#ff0;text-shadow:0 0 15px rgba(255,255,0,.8);z-index:25;pointer-events:none;animation:comboFade 1s ease-out forwards}@keyframes comboFade{0%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}to{opacity:0;transform:translate(-50%,-70%) scale(.8)}}.settings-panel{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px}.setting-row{display:flex;justify-content:space-between;align-items:center;font-family:"Press Start 2P",monospace;font-size:9px;color:#aaa}.toggle-btn{font-family:"Press Start 2P",monospace;font-size:8px;padding:6px 14px;background:transparent;border:1px solid #555;color:#888;cursor:pointer}.toggle-btn.active{border-color:#0f0;color:#0f0;box-shadow:0 0 8px #00ff004d}
