:root{color-scheme:dark;--cyan:#83eaf8;--cyan-dim:#367c91;--amber:#ffb568;--danger:#ff6e60;--ink:#020911;--panel:rgba(4,18,29,.62);font-family:"Arial Narrow","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.07em}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#030911;color:#d9f7ff}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.game{position:relative;width:100%;height:100dvh;min-height:240px;overflow:hidden;background:radial-gradient(ellipse at 48% 46%,#122839 0,#030a14 57%,#010308 100%);isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#scene{display:block;width:100%;height:100%;touch-action:none}
#damage-vignette,#flash,#velocity-lines{position:absolute;inset:0;pointer-events:none}
#damage-vignette{background:radial-gradient(ellipse at center,transparent 45%,rgba(255,51,47,.62) 100%);opacity:0;transition:opacity .12s}
#flash{background:#d7ffff;opacity:0}
#velocity-lines{background:repeating-conic-gradient(from 0deg at center,transparent 0deg 11deg,rgba(127,231,255,.045) 12deg 12.12deg,transparent 12.3deg 19deg);mask-image:radial-gradient(ellipse at center,transparent 30%,black 98%);opacity:0;transition:opacity .24s}
.hud{position:absolute;inset:0;pointer-events:none;z-index:2;padding: max(14px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));font-variant-numeric:tabular-nums}
.hud-top-left,.hud-top-center,.hud-top-right,.hud-bottom-left,.hud-bottom-center,.hud-bottom-right{position:absolute}
.hud-top-left{left:max(24px,env(safe-area-inset-left));top:max(17px,env(safe-area-inset-top));width:236px}
.brand{font-size:17px;font-weight:900;letter-spacing:.18em;line-height:1.4;color:#e6f9fd;text-shadow:0 0 16px #31849a55;white-space:nowrap}.brand-mark{color:var(--cyan);font-size:20px}.brand-light{color:#518b97;margin:0 2px}.brand small{font-weight:500;letter-spacing:.12em;color:#638d99;font-size:8px;display:block;margin:2px 0 0 24px}
.mission-label{margin:18px 0 16px;font-size:10px;color:#b4d7df;display:flex;align-items:center;gap:8px}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.stat-line{display:flex;align-items:center;gap:7px;margin:6px 0;font-size:9px;font-weight:700;color:#79b2be}.stat-line>span{width:45px}.stat-line b{min-width:25px;text-align:right;font-size:10px;color:#c7f6ff}.meter{height:5px;background:#19323f;flex:1;transform:skew(-15deg);overflow:hidden}.meter-fill{height:100%;width:100%;transition:width .17s}.meter-fill.shield{background:linear-gradient(90deg,#25859d,#84eafa);box-shadow:0 0 8px #65daf4}.meter-fill.hull{background:linear-gradient(90deg,#b57845,#ffc685)}
.hud-top-center{top:6.4%;left:50%;transform:translateX(-50%);width:34%;text-align:center}.combat-message{font-size:12px;font-weight:800;letter-spacing:.24em;color:#e8faff;text-shadow:0 0 12px #29dffa}.message-detail{font-size:9px;color:#8eb8c5;margin-top:6px;letter-spacing:.08em;line-height:1.4}
.hud-top-right{right:max(24px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));width:184px}.radar-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:#96c3cd;border-bottom:1px solid #3d727f80;padding-bottom:5px}.radar-title span:last-child{color:var(--cyan)}#radar{width:184px;height:120px;display:block;opacity:.86}.radar-legend{font-size:8px;color:#72939d;display:flex;align-items:center;gap:6px;justify-content:flex-end}.legend-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:5px}.legend-dot.enemy{background:#ff8b72}.legend-dot.missile{background:#ffd36d}
.reticle{position:absolute;top:50%;left:50%;height:90px;width:90px;transform:translate(-50%,-50%);opacity:.9;transition:opacity .08s;filter:drop-shadow(0 0 5px rgba(72,210,234,.3))}
.reticle-corner{position:absolute;width:16px;height:16px;border:2px solid var(--cyan);opacity:.75}.r1{left:0;top:0;border-right:0;border-bottom:0}.r2{right:0;top:0;border-left:0;border-bottom:0}.r3{left:0;bottom:0;border-right:0;border-top:0}.r4{right:0;bottom:0;border-left:0;border-top:0}
.reticle-center{position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%)}.reticle-center span{position:absolute;background:#d8fbff;box-shadow:0 0 7px var(--cyan)}.reticle-center span:nth-child(1){width:5px;height:1px;left:-6px;top:8px}.reticle-center span:nth-child(2){width:5px;height:1px;right:-6px;top:8px}.reticle-center span:nth-child(3){width:1px;height:5px;left:8px;top:-6px}.reticle-center span:nth-child(4){width:1px;height:5px;left:8px;bottom:-6px}
.reticle-hit{position:absolute;top:50%;left:50%;height:22px;width:22px;transform:translate(-50%,-50%) rotate(45deg) scale(.5);border:2px solid #fff;opacity:0}.reticle-hit.active{animation:hitmark .17s linear forwards}@keyframes hitmark{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.45)}}
#target-layer{position:absolute;inset:0;pointer-events:none}.target-marker{position:absolute;width:62px;height:62px;transform:translate(-50%,-50%);border:1px solid rgba(255,114,93,.75);clip-path:polygon(0 0,26% 0,26% 5%,74% 5%,74% 0,100% 0,100% 25%,95% 25%,95% 75%,100% 75%,100% 100%,74% 100%,74% 95%,26% 95%,26% 100%,0 100%,0 75%,5% 75%,5% 25%,0 25%);box-shadow:inset 0 0 18px #ff5b4520}
.target-marker.locked{border-color:#ffca74;filter:drop-shadow(0 0 4px #ffc05d)}.target-marker .marker-name{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:8px;white-space:nowrap;color:#ffb29a}.target-marker .marker-range{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:9px;color:#b3ced7}.target-offscreen{position:absolute;transform:translate(-50%,-50%);font-size:21px;color:#ff9d83;text-shadow:0 0 9px #e7534a;line-height:1}
.aim-lead{position:absolute;width:28px;height:28px;border:1px dashed #ffd588;border-radius:50%;transform:translate(-50%,-50%);opacity:0}.aim-lead span{position:absolute;top:12px;left:12px;width:2px;height:2px;background:#ffd588}.lock-text{position:absolute;left:50%;top:calc(50% + 68px);transform:translateX(-50%);font-size:9px;letter-spacing:.17em;color:#ffbd7d;opacity:0;white-space:nowrap}.heading-label{position:absolute;left:50%;bottom:calc(50% + 89px);transform:translateX(-50%);font-size:10px;color:#75afb9;letter-spacing:.18em}.heading-separator{color:#426c77;margin:0 8px}.damage-direction{position:absolute;left:50%;top:24%;color:#ff7768;font-size:17px;text-shadow:0 0 12px #ff605e;opacity:0;transform:translate(-50%,-50%)}
.hud-bottom-left{left:max(24px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:185px}.speed-caption{display:flex;justify-content:space-between;font-size:9px;color:#76b3be;letter-spacing:.15em}.speed-caption span{color:var(--cyan)}.speed-value{font-size:34px;letter-spacing:.01em;font-weight:200;line-height:1.25;text-shadow:0 0 16px #62cfeb33}.speed-value small{font-size:10px;color:#729fa9;margin-left:6px}.speed-bar{height:3px;background:#1e4048;margin:3px 0 8px}.speed-bar>div{height:100%;width:65%;background:#9beafa}.flight-caption{display:flex;justify-content:space-between;font-size:9px;color:#6c9ba6}.flight-caption b{color:#e2faff}.boost-meter{height:2px;background:#1a3b42;margin-top:7px}.boost-meter div{background:#ffa75f;height:100%;width:100%}
.hud-bottom-center{left:50%;bottom:max(17px,env(safe-area-inset-bottom));transform:translateX(-50%);text-align:center;width:310px}.weapon-label{font-size:9px;color:#9fcfd3}.weapon-label i{display:inline-block;height:5px;width:5px;border-radius:50%;background:#9df0e3;box-shadow:0 0 8px #9df0e3;margin-right:6px}.weapon-label span{color:var(--cyan);margin-left:8px}.target-readout{display:flex;justify-content:center;gap:15px;font-size:11px;color:#e1ffff;margin-top:7px;letter-spacing:.1em}.target-readout span:last-child{color:#ffa984}.center-tip{font-size:9px;color:#537b87;margin-top:9px;white-space:nowrap}.hud-bottom-right{right:max(25px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));text-align:right}.missile-readout{font-size:10px;color:#80b1bb}.missile-readout strong{font-size:21px;color:#e2f8fb;margin-left:8px}.missile-readout span{font-size:8px;color:#e5b56b;margin-left:6px}.score-readout{margin-top:13px;display:flex;justify-content:flex-end;align-items:baseline;gap:7px}.score-readout span{font-size:9px;color:#7eb5bf}.score-readout b{font-size:19px;color:#ffe0a4}.score-readout small{font-size:9px;color:#9fa38e}
.pause-button{position:absolute;right:max(222px,calc(env(safe-area-inset-right) + 197px));top:16px;background:rgba(14,44,55,.28);border:1px solid #426b7a80;color:#9bd1dc;font-weight:800;font-size:15px;padding:4px 9px;pointer-events:auto;touch-action:manipulation}
.screen{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:linear-gradient(100deg,rgba(1,7,15,.93),rgba(3,16,29,.72) 55%,rgba(2,9,18,.4));overflow:hidden}.screen.hidden{display:none}.start-grid{position:absolute;inset:0;background:linear-gradient(transparent 97%,#1b617113 98%),linear-gradient(90deg,transparent 97%,#1b617113 98%);background-size:44px 44px;transform:perspective(340px) rotateX(24deg) scale(1.2);opacity:.5;pointer-events:none}.start-panel{position:relative;width:min(540px,85%);margin-top:-2%;border-left:2px solid #71d7e4;padding:5px 0 5px 30px}.eyebrow{font-size:10px;color:#68d8e5;letter-spacing:.3em;font-weight:800}.start-panel h1{font-size:clamp(40px,7vw,80px);letter-spacing:.08em;line-height:.99;margin:22px 0 19px;font-weight:900;color:#f0fcff;white-space:nowrap;text-shadow:0 2px 35px #4197ad55}.start-panel h1 em{font-style:normal;color:#7fe7ef}.start-rule{width:80px;height:2px;background:var(--cyan)}.start-panel p{font-size:17px;letter-spacing:.18em;margin:19px 0 10px;font-weight:700}.start-descr{font-size:11px;color:#95bdc8;line-height:1.8;letter-spacing:.05em}.primary-button{margin-top:24px;background:#8eeefa;border:0;color:#052433;padding:13px 19px;font-size:13px;letter-spacing:.14em;font-weight:900;min-width:184px;text-align:left;display:inline-flex;justify-content:space-between;align-items:center;box-shadow:0 0 20px #3bdeeb38;touch-action:manipulation}.primary-button:active{transform:translateY(1px);background:#d1ffff}.primary-button span{font-size:21px}.start-controls{color:#638e99;font-size:10px;line-height:1.9;margin-top:26px;letter-spacing:.01em}.start-controls span{color:#99d1d8;margin-right:10px;font-size:9px;letter-spacing:.15em}.start-index{position:absolute;bottom:23px;right:26px;font-size:9px;letter-spacing:.2em;color:#547988;display:flex;gap:23px}.overlay-screen{background:rgba(1,9,17,.77);backdrop-filter:blur(7px)}.overlay-panel{min-width:min(420px,80%);border-top:2px solid #7de8f2;background:rgba(5,25,37,.92);padding:29px 35px 34px;box-shadow:0 12px 50px #0008}.overlay-panel h2{margin:14px 0;font-size:34px;letter-spacing:.08em}.overlay-panel p{font-size:12px;color:#9fc8d0}.text-button{margin-left:18px;background:none;border:0;color:#95bac5;font-size:11px;padding:12px}.result-stats{display:flex;gap:24px;border-top:1px solid #275261;border-bottom:1px solid #275261;padding:14px 0;margin-top:25px}.result-stats>div{display:flex;flex-direction:column;gap:8px}.result-stats span{font-size:9px;color:#78acb6}.result-stats b{font-size:19px;color:#f3faff}
.touch-controls{display:none}.touch-label{font-size:9px;color:#aad1d8;letter-spacing:.13em}.orientation-note{display:none}
@media(pointer:coarse){.touch-controls{display:block;position:absolute;inset:0;pointer-events:none}.stick-wrap{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:max(23px,env(safe-area-inset-left));width:132px;height:153px;pointer-events:none}.stick-label{position:absolute;bottom:141px;left:14px;white-space:nowrap}.stick{position:absolute;bottom:0;left:0;width:132px;height:132px;border-radius:50%;border:1px solid rgba(127,222,239,.42);background:radial-gradient(circle,rgba(78,186,211,.08) 0 31%,rgba(9,47,65,.26) 32% 100%);box-shadow:inset 0 0 18px #0bb1d711;pointer-events:auto;touch-action:none}.stick-axis{position:absolute;background:#59b5c153}.axis-x{height:1px;width:85%;left:7.5%;top:50%}.axis-y{height:85%;width:1px;top:7.5%;left:50%}.stick-knob{position:absolute;width:47px;height:47px;border-radius:50%;left:calc(50% - 23.5px);top:calc(50% - 23.5px);background:rgba(106,210,229,.22);border:2px solid #8fdfeb91;box-shadow:0 0 15px #6fe6e22a,inset 0 0 12px #5cd6df25;transition:transform .06s}.touch-right{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));display:flex;gap:15px;align-items:end;pointer-events:none}.throttle-wrap{display:flex;align-items:center;flex-direction:column;gap:5px}.throttle-rail{position:relative;height:150px;width:38px;background:rgba(8,47,65,.35);border:1px solid #65c2d074;border-radius:7px;pointer-events:auto;touch-action:none}.throttle-rail:before{content:"";position:absolute;left:17px;top:7%;bottom:7%;width:2px;background:#56c0d36b}.throttle-rail:after{content:"0";position:absolute;left:-11px;bottom:0;font-size:9px;color:#7aadb8}.throttle-handle{position:absolute;top:23%;left:-6px;width:48px;height:19px;border:1px solid #8cdeea;background:rgba(34,111,135,.78);border-radius:3px;box-shadow:0 0 8px #6bcee962}.touch-actions{display:flex;flex-direction:column;gap:8px;align-items:end}.touch-row{display:flex;gap:8px;justify-content:flex-end}.action-button{color:#dffaff;background:rgba(19,70,86,.3);border:1px solid #84c6d188;box-shadow:inset 0 0 13px #34b0d017;pointer-events:auto;touch-action:none;font-size:10px;letter-spacing:.07em;font-weight:800;border-radius:9px;min-width:60px;height:35px}.action-button:active,.action-button.active{background:rgba(78,194,211,.48);box-shadow:0 0 14px #2eddeb88}.action-button.micro{height:33px;min-width:53px;border-color:#6c929b88;color:#8bbdc7;font-size:9px}.action-button.secondary{height:39px}.action-button.fire{border-radius:50%;height:84px;width:84px;min-width:84px;border:2px solid #ffb67d;color:#ffeddd;background:rgba(163,82,49,.42);box-shadow:0 0 22px #ff8e4766,inset 0 0 15px #ff8e4766;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;letter-spacing:.16em}.action-button.fire small{font-size:8px;letter-spacing:.12em;color:#ffd4b7;margin-top:2px}
.hud-bottom-left{bottom:190px;left:max(21px,env(safe-area-inset-left));width:139px}.hud-bottom-right{bottom:241px;right:max(18px,env(safe-area-inset-right))}.hud-top-left{width:176px;top:max(11px,env(safe-area-inset-top));left:max(15px,env(safe-area-inset-left))}.mission-label{margin:7px 0 6px}.brand{font-size:12px}.brand-mark{font-size:15px}.brand small{display:none}.hud-top-right{top:max(11px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:123px}.radar-title{font-size:7px}#radar{width:123px;height:81px}.radar-legend{display:none}.hud-top-center{top:11%;width:52%}.combat-message{font-size:10px}.message-detail{font-size:8px}.hud-bottom-center{bottom:4px;width:43%}.center-tip{display:none}.weapon-label{font-size:7px}.target-readout{font-size:9px;margin-top:3px}.pause-button{right:max(153px,calc(env(safe-area-inset-right) + 138px));top:8px;font-size:12px}.speed-value{font-size:23px}.speed-caption,.flight-caption{font-size:8px}.score-readout{margin-top:4px}.missile-readout strong{font-size:15px}.score-readout b{font-size:14px}.heading-label{bottom:calc(50% + 65px)}.reticle{width:70px;height:70px}.lock-text{top:calc(50% + 51px)}.target-marker{width:48px;height:48px}.start-controls{font-size:8px;margin-top:12px}.start-panel{padding-left:17px}.start-panel h1{margin:12px 0;font-size:clamp(35px,7vw,60px)}.start-panel p{margin:11px 0 4px;font-size:12px}.start-descr{font-size:10px}.primary-button{margin-top:13px;padding:9px 13px}.start-index{display:none}}
@media(pointer:coarse) and (max-height:390px){.hud-bottom-left{bottom:143px}.hud-bottom-right{bottom:177px}.stick-wrap{transform:scale(.75);transform-origin:bottom left}.touch-right{transform:scale(.79);transform-origin:bottom right}.hud-top-center{top:9%}.hud-top-right #radar{height:55px}.start-panel{margin-top:0}.start-controls{display:none}}
@media(pointer:coarse) and (orientation:portrait){.orientation-note{display:flex;position:absolute;z-index:10;inset:0;background:#061623;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#dcf9fd;text-align:center}.orientation-note .orient-icon{font-size:56px;color:#75e2f0;transform:rotate(-90deg)}.orientation-note strong{font-size:18px}.orientation-note span{font-size:12px;color:#8eb5c0}}