:root{color-scheme:dark;--pink:#ed3348;--cyan:#52caff;--yellow:#ffe465;--blue:#005bc1}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#09061f}
body{font-family:Arial,Helvetica,sans-serif;color:#fff}
button{font:inherit;cursor:pointer}
.game-shell{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#00337f;touch-action:none;user-select:none}
.game-shell:fullscreen{width:100%;height:100%}
#game{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#09051b15 4px);mix-blend-mode:multiply}
.hud{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:calc(18px + env(safe-area-inset-top)) 24px 34px;background:linear-gradient(to bottom,#00265fe8 0,#00265f76 55%,transparent 100%);pointer-events:none}
.hud-logo{width:118px;height:auto;max-height:36px;object-fit:contain;align-self:center;filter:drop-shadow(0 2px 3px #001b49)}
.hud-metrics,.hud-status{display:flex;align-items:center;gap:24px}
.hud-status{gap:16px}
.hud-stat{display:flex;flex-direction:column;gap:5px;min-width:max-content}
.hud-stat span{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#d5eafa}
.hud-stat strong{font-size:21px;line-height:1;font-weight:1000;font-style:italic;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.hud-score strong{color:var(--yellow)}
.stage-hud strong{font-size:14px;color:#aee6ff;letter-spacing:1.2px}
.hud-health strong{color:var(--pink);letter-spacing:3px}
.dash-hud{width:100px}
.dash-meter{height:7px;width:100px;border-radius:10px;background:#292146;border:1px solid #75659b;overflow:hidden;margin-top:3px}
.dash-meter div{width:100%;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan));transition:width .1s linear}
.hud-icon{pointer-events:auto;display:grid;place-items:center;width:38px;height:38px;margin-top:3px;padding:0;border:1px solid #ffffff57;border-radius:8px;background:#221743b8;color:#fff;font-size:21px;line-height:1;backdrop-filter:blur(5px)}
.hud-icon:hover{border-color:var(--cyan);color:var(--cyan)}
#sound-toggle{color:var(--cyan)}
.game-overlay{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:95px 20px 65px;background:radial-gradient(ellipse at center,#00337faa 0,#00153ce9 82%)}
.hidden{display:none!important}
.title-logo{width:clamp(172px,21vw,270px);height:auto;max-height:76px;object-fit:contain;margin-bottom:19px;filter:drop-shadow(0 5px 8px #001136)}
.title-spark{font-size:46px;line-height:1;color:var(--yellow);text-shadow:0 0 22px var(--yellow);margin-bottom:9px}
.game-overlay h1,.game-overlay h2{margin:0;font-size:clamp(52px,7.7vw,116px);font-weight:1000;font-style:italic;line-height:.87;letter-spacing:-.07em;text-shadow:6px 7px 0 #001e5a}
.game-overlay h1 span,.game-overlay h2 span{color:#ff4251}
.game-overlay h2{font-size:clamp(55px,9vw,118px);line-height:1}
.game-overlay p{margin:21px 0 25px;color:#d7ccf1;font-size:13px;font-weight:900;letter-spacing:3px}
.primary-button{min-width:232px;min-height:58px;padding:0 28px;border:0;border-bottom:5px solid #8e1224;border-radius:9px;background:linear-gradient(120deg,#ff6b62,#e80000);color:#fff;font-size:17px;font-weight:1000;font-style:italic;letter-spacing:1px;box-shadow:0 9px 34px #e800007a;transition:transform .15s,filter .15s}
.primary-button:hover{transform:translateY(-3px);filter:brightness(1.13)}
.primary-button:active{transform:translateY(1px)}
.instructions{display:flex;gap:24px;align-items:center;justify-content:center;margin-top:27px;color:#d6cbed;font-size:11px;font-weight:900;letter-spacing:1px}
kbd{display:inline-block;margin-right:5px;padding:5px 8px;border:1px solid #796b9e;border-bottom-width:3px;border-radius:5px;background:#352554;color:#fff;font:900 11px Arial}
.touch-instructions{display:none;color:#c5b9df;font-size:9px;line-height:1.5;letter-spacing:1px;max-width:280px;margin-top:20px}
.result-stats{display:flex;gap:44px;margin:28px 0 4px}
.result-stats div{display:flex;flex-direction:column;gap:5px}
.result-stats span{font-size:10px;font-weight:900;letter-spacing:2px;color:#bcaedb}
.result-stats strong{font-size:31px;font-style:italic;color:var(--yellow)}
#end-screen p{letter-spacing:1px;font-size:12px;margin:14px 0 22px}
.game-toast{position:absolute;z-index:6;top:15%;left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;white-space:nowrap;color:var(--yellow);font-size:clamp(21px,3vw,38px);font-weight:1000;font-style:italic;text-shadow:0 0 18px #ff63ad,3px 3px 0 #52136d;transition:opacity .2s,transform .2s}
.game-toast.show{opacity:1;transform:translate(-50%,0)}
.touch-controls{display:none;position:absolute;z-index:4;left:20px;right:20px;bottom:calc(17px + env(safe-area-inset-bottom));justify-content:space-between;align-items:center;pointer-events:none}
.touch-right{display:flex;gap:13px}
.touch-button{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:70px;border-radius:15px;border:1px solid #aa77b8;background:#352052db;color:#fff;font-size:30px;line-height:.85;box-shadow:0 5px 0 #120a2b;touch-action:none;backdrop-filter:blur(6px)}
.touch-button small{margin-top:8px;font-size:10px;font-weight:900;letter-spacing:1px}
.flap-button{color:var(--pink)}
.shoot-button{color:var(--cyan)}
.dash-button{color:var(--yellow)}
.touch-button:active,.touch-button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #120a2b}
button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(pointer:coarse){.touch-controls{display:flex}.touch-instructions{display:block}.instructions{display:none}}
@media(max-width:940px){.hud-logo{position:absolute;left:50%;top:calc(22px + env(safe-area-inset-top));width:100px;transform:translateX(-50%)}.stage-hud{display:none}}
@media(max-width:740px){.touch-controls{display:flex}.touch-instructions{display:block}.instructions{display:none}.hud{padding-left:15px;padding-right:15px}.hud-metrics,.hud-status{gap:12px}.hud-stat span{font-size:8px;letter-spacing:.8px}.hud-stat strong{font-size:16px}.dash-hud{display:none}.hud-icon{width:32px;height:32px;font-size:18px}.game-overlay h1{font-size:clamp(43px,10.5vw,78px)}.game-overlay h2{font-size:clamp(52px,11vw,88px)}}
@media(max-width:620px){.hud-logo{display:none}.hud-metrics .hud-stat:nth-child(2){display:none}.hud{gap:6px}.hud-metrics,.hud-status{gap:9px}.hud-health strong{letter-spacing:1px}.game-overlay p{font-size:10px;letter-spacing:1.6px}.title-logo{margin-bottom:14px}.primary-button{min-width:205px;min-height:53px;font-size:15px}}
@media(max-width:360px){.hud-metrics .hud-stat:nth-child(3){display:none}.hud-icon{width:29px;height:29px}.touch-controls{left:12px;right:12px}.touch-button{width:64px;height:63px}}
@media(max-height:520px){.game-overlay{padding:65px 16px 40px}.title-logo{width:140px;max-height:42px;margin-bottom:6px}.game-overlay h1{font-size:clamp(40px,9vh,72px)}.game-overlay h2{font-size:clamp(44px,10vh,68px)}.game-overlay p{margin:9px 0 13px}.primary-button{min-height:42px;border-bottom-width:3px;font-size:13px}.touch-instructions{margin-top:10px}.instructions{margin-top:14px}.touch-button{width:59px;height:52px;font-size:23px}.touch-button small{font-size:8px;margin-top:5px}.hud{padding-top:8px}}
