:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}#app{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}#hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;font-size:24px;text-shadow:2px 2px 4px #000;opacity:0;transition:opacity 2s ease-in-out}#hud.visible{opacity:1}#city-name{position:absolute;top:20px;right:20px;font-weight:700;font-size:32px;color:#fff}#hud-bars{position:absolute;top:50%;right:20px;transform:translateY(-50%);display:flex;gap:20px;align-items:center}.hud-bar-group{display:flex;flex-direction:column;align-items:center;gap:5px}.hud-track{width:14px;height:250px;background:#00140066;border:1px solid rgba(0,255,0,.3);border-radius:4px;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 0 10px #00000080}.hud-track:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,transparent 19%,rgba(0,255,0,.3) 20%,transparent 21%,transparent 39%,rgba(0,255,0,.3) 40%,transparent 41%,transparent 59%,rgba(0,255,0,.3) 60%,transparent 61%,transparent 79%,rgba(0,255,0,.3) 80%,transparent 81%,transparent 100%);pointer-events:none;z-index:1}.hud-fill{position:absolute;bottom:0;left:0;width:100%;height:0%;transition:height .1s linear;box-shadow:0 0 8px currentColor}.hud-fill-speed{background:linear-gradient(to top,#0f0,#ff0,#f50);color:#ff0}.hud-fill-alt{background:linear-gradient(to top,#0af,#0ff);color:#0ff}.hud-label{font-family:Consolas,Monaco,monospace;font-size:12px;font-weight:700;color:#0f0;text-shadow:0 0 4px #00ff00;letter-spacing:1px}.hud-value{font-family:Consolas,Monaco,monospace;font-weight:700;font-size:16px;color:#cfc;min-width:80px;text-align:center;text-shadow:0 0 2px #00ff00}#enemies-down-info{position:absolute;top:20px;left:20px}#target-reticle{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border:2px solid red;box-shadow:0 0 5px red,inset 0 0 5px red;display:block;z-index:20}@media (max-width: 768px){#city-name{font-size:20px}}#radar{position:absolute;top:50%;left:20px;transform:translateY(-50%);width:150px;height:150px;background:#00320080;border:2px solid rgba(0,255,0,.5);border-radius:50%;overflow:hidden}#hp-container{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#0009;padding:5px 15px;border-radius:20px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hp-label{font-family:Impact,sans-serif;font-size:20px;color:#f44;text-shadow:0 0 5px red}.hp-track{width:200px;height:15px;background:#333;border-radius:10px;overflow:hidden;border:1px solid #555}#hp-fill{height:100%;background:linear-gradient(90deg,red,#f80,#0f0);width:100%;transition:width .2s ease-out}#hp-val{font-family:Courier New,monospace;font-weight:700;font-size:18px;color:#fff;min-width:30px;text-align:right}#radar-player{position:absolute;top:50%;left:50%;width:10px;height:14px;background:#0f0;clip-path:polygon(50% 0%,0% 100%,100% 100%);transform:translate(-50%,-50%);z-index:2;border-radius:0}#radar .radar-blip.home-base{width:6px;height:16px;background-color:#0ff;border-radius:2px;box-shadow:0 0 6px #0ff;z-index:5}#radar .radar-blip{position:absolute;width:6px;height:6px;background-color:red;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px red}#radar .radar-label{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:14px;text-shadow:1px 1px 2px black;pointer-events:none}#center-message{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:fit-content;max-width:90%;white-space:nowrap;text-align:center;font-family:Impact,sans-serif;font-size:48px;color:#fbff00;text-shadow:0 0 10px #ff0000,2px 2px 4px black;opacity:0;transition:opacity .5s ease-in-out;pointer-events:none;z-index:100;padding:20px;border-radius:10px}#center-message.visible{opacity:1;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:2px solid rgba(255,215,0,.3);box-shadow:0 0 20px #ffd70033}.msg-blue{color:#08f!important;text-shadow:0 0 10px #0088ff!important}.msg-white{color:#fff!important;text-shadow:0 0 10px #ffffff!important}#warning-overlay{position:absolute;top:80px;left:50%;transform:translate(-50%);font-family:Impact,Arial Black,sans-serif;font-size:60px;color:red;text-shadow:0 0 15px #ff0000,2px 2px 4px #000;pointer-events:none;z-index:1000;opacity:0;transition:opacity .2s;text-transform:uppercase;letter-spacing:4px}#warning-overlay.visible{animation:warning-pulse .4s infinite alternate ease-in-out}@keyframes warning-pulse{0%{opacity:.3;transform:translate(-50%) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1.1)}}#cruise-status{position:absolute;top:50%;right:200px;transform:translateY(-160px);font-family:Consolas,Monaco,monospace;font-size:18px;font-weight:700;color:#0ff;text-shadow:0 0 10px #00ffff,0 0 20px rgba(0,255,255,.5);background:#00282866;padding:5px 15px;border:1px solid rgba(0,255,255,.4);border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;z-index:100;letter-spacing:1px}#cruise-status.visible{opacity:1;animation:cruise-pulse 2s infinite alternate ease-in-out}@keyframes cruise-pulse{0%{text-shadow:0 0 10px #00ffff}to{text-shadow:0 0 20px #00ffff,0 0 30px rgba(0,255,255,.8)}}#fail-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2000;opacity:0;pointer-events:none;transition:opacity 1s ease-in-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#fail-screen.visible{opacity:1;pointer-events:all}#fail-title{font-family:Impact,sans-serif;font-size:80px;color:red;text-shadow:0 0 20px #ff0000,4px 4px 8px #000;margin-bottom:20px;letter-spacing:5px;animation:fail-pulse 2s infinite alternate ease-in-out}@keyframes fail-pulse{0%{transform:scale(1);text-shadow:0 0 20px #ff0000}to{transform:scale(1.05);text-shadow:0 0 40px #ff0000,0 0 60px #ff5500}}#fail-msg{font-family:Inter,sans-serif;font-size:28px;color:#fff;margin-bottom:40px}.fail-buttons{display:flex;gap:30px}.fail-btn{padding:15px 40px;font-family:Impact,sans-serif;font-size:24px;color:#fff;background:#ffffff1a;border:2px solid white;border-radius:5px;cursor:pointer;transition:all .3s;text-transform:uppercase;pointer-events:all}.btn-yes:hover{background:#0f0;color:#000;box-shadow:0 0 20px #0f0;border-color:#0f0}.btn-no:hover{background:red;color:#000;box-shadow:0 0 20px red;border-color:red}#intro-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3000;color:#fff;overflow:hidden}.intro-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity 1.5s ease-in-out,visibility 1.5s;background:#000}.intro-screen.active{opacity:1;visibility:visible}#screen-splash{background:linear-gradient(#0000004d,#000000b3),url(/starting_image.jpeg);background-size:cover;background-position:center}#start-title{font-family:Impact,sans-serif;font-size:100px;text-shadow:0 0 20px rgba(0,0,0,.8),0 0 40px rgba(255,184,0,.4);letter-spacing:10px;margin-bottom:300px;text-align:center}#start-prompt{font-family:Inter,sans-serif;font-size:28px;background:#0009;padding:10px 40px;border:2px solid white;letter-spacing:5px;animation:prompt-blink 1.5s infinite alternate ease-in-out}#screen-story{padding:40px;padding-top:10vh;background:radial-gradient(circle at center,#1a1a1a,#000);display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#story-title{font-family:Impact,sans-serif;font-size:48px;color:#ffb800;text-shadow:0 0 20px rgba(255,184,0,.6),0 0 40px rgba(0,0,0,.8);margin-bottom:40px;text-align:center;letter-spacing:3px;text-transform:uppercase;animation:title-float 3s infinite alternate ease-in-out}#story-content{font-family:Courier New,Courier,monospace;font-size:22px;line-height:1.6;max-width:1100px;text-align:center;color:#0fc;text-shadow:0 0 10px rgba(0,255,204,.4)}#skip-prompt{position:absolute;bottom:40px;color:#555;font-size:14px;text-transform:uppercase;letter-spacing:2px}#screen-controls{background:#050505;border:1px solid #333}#controls-title{font-family:Impact,sans-serif;font-size:36px;color:#ff0;margin-bottom:30px;text-shadow:0 0 10px #ffff00}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px}.control-item{background:#ffffff0d;padding:15px;border-left:5px solid #00ff00;display:flex;flex-direction:column;gap:8px;min-width:300px}.control-item span{font-size:14px;color:#888;text-transform:uppercase}.control-item strong{font-size:20px;color:#fff}#launch-prompt{margin-top:30px;font-size:20px;color:#0f0;animation:prompt-blink 1.5s infinite alternate ease-in-out}@keyframes title-float{0%{transform:translateY(0)}to{transform:translateY(-20px)}}#shift-hint{position:absolute;bottom:18%;left:30%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;pointer-events:none;opacity:0;transition:opacity .5s ease-in-out;z-index:1000}#shift-hint.visible{opacity:.7}#shift-hint .key,#pitch-hint .key{width:140px;height:60px;background:#ffffff1a;border:4px solid rgba(255,255,255,.6);border-radius:12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;font-family:Impact,sans-serif;font-size:24px;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5);box-shadow:0 5px #fff6,0 0 20px #fff3;animation:key-pulse 1.5s infinite ease-in-out}#pitch-hint{position:absolute;bottom:18%;right:30%;transform:translate(50%);display:flex;flex-direction:column;align-items:center;gap:15px;pointer-events:none;opacity:0;transition:opacity .5s ease-in-out;z-index:1000}#pitch-hint.visible{opacity:.7}#pitch-hint .key{border-color:#ff09;color:#ff0;font-size:48px;text-shadow:0 0 15px rgba(255,255,0,.6)}#pitch-hint .hint-text{color:#ff0}#shift-hint .hint-text,#pitch-hint .hint-text{font-family:Inter,sans-serif;font-size:20px;color:#fff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(0,0,0,.8)}@keyframes key-pulse{0%{transform:translateY(0);box-shadow:0 5px #fff6,0 0 20px #fff3}50%{transform:translateY(5px);box-shadow:0 0 #fff6,0 0 40px #fff6}to{transform:translateY(0);box-shadow:0 5px #fff6,0 0 20px #fff3}}#bgm-toggle{position:absolute;top:70px;right:20px;z-index:4000;padding:10px 20px;background:#0009;border:1px solid rgba(0,255,255,.5);color:#0ff;font-family:Consolas,monospace;font-size:14px;font-weight:700;cursor:pointer;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s;letter-spacing:1px;pointer-events:all;text-shadow:0 0 5px rgba(0,255,255,.5)}#bgm-toggle:hover{background:#0ff3;box-shadow:0 0 15px #00ffff4d;border-color:#0ff}#bgm-toggle.off{color:#888;border-color:#444;text-shadow:none}#mobile-controls{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2500;pointer-events:none;display:none}body.mobile-touch #mobile-controls{display:block}#joystick-zone{position:absolute;bottom:10%;left:10%;width:150px;height:150px;pointer-events:all}#joystick-base{width:120px;height:120px;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:50%;position:relative;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#joystick-pad{width:50px;height:50px;background:#0ff6;border:2px solid #00ffff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #00ffff80}#mobile-actions{position:absolute;bottom:8%;right:5%;display:flex;flex-direction:column;gap:15px;pointer-events:all}.mobile-btn{width:80px;height:80px;background:#00ffff1a;border:2px solid rgba(0,255,255,.5);border-radius:50%;color:#0ff;display:flex;justify-content:center;align-items:center;font-family:Impact,sans-serif;font-size:14px;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 15px #00000080;transition:transform .1s,background .1s}.mobile-btn:active{transform:scale(.9);background:#00ffff4d;border-color:#0ff}#btn-fire{width:100px;height:100px;background:#ff000026;border-color:#f009;color:#f44;margin-left:-20px;font-size:18px}#btn-fire:active{background:#f006;border-color:red}@media (max-width: 900px){#hud-bars{right:10px;scale:.8}}#warning-overlay.flicker{animation:hazard-flicker .2s infinite alternate;color:red;text-shadow:0 0 20px #ff0000}@keyframes hazard-flicker{0%{opacity:.3}to{opacity:1}}@keyframes prompt-blink{0%{opacity:.2}to{opacity:.9}}