:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#050b12;color:#e9f2f4;font-synthesis:none;--steel: #a8bcc4;--muted: #6f858e;--orange: #ff7a32;--orange-soft: #ffad68;--panel: rgba(7, 16, 23, .76);--line: rgba(164, 198, 208, .2)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#050b12;overscroll-behavior:none}button{color:inherit;font:inherit}#app{position:relative;isolation:isolate;background:radial-gradient(circle at 50% 45%,#132635 0,#050b12 62%)}#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle,transparent 50%,rgba(1,5,8,.3) 78%,rgba(1,5,8,.72) 110%)}.vignette:after{content:"";position:absolute;inset:0;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(140,185,200,.08) 4px);mix-blend-mode:screen}.hud{position:absolute;z-index:4;top:0;left:0;right:0;min-height:94px;display:grid;grid-template-columns:1fr minmax(210px,300px) 190px 130px;gap:1px;pointer-events:none;background:linear-gradient(180deg,#03090ee0,#03090e2e);border-bottom:1px solid var(--line)}.hud:after{content:"";position:absolute;bottom:-1px;left:26%;width:22%;height:1px;background:var(--orange);box-shadow:0 0 18px #ff7a3299}.brand-panel,.orbit-panel,.cargo-panel,.score-panel{min-height:93px;padding:21px 26px;display:flex;align-items:center}.brand-panel{gap:13px}.brand-panel strong{display:block;font-size:15px;line-height:1;letter-spacing:.2em}.brand-panel small,.score-panel small{display:block;color:var(--muted);font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}.brand-mark{width:35px;height:35px;position:relative;transform:rotate(30deg)}.brand-mark i{position:absolute;inset:3px;border:2px solid var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.brand-mark i:nth-child(2){inset:9px;border-color:var(--steel);opacity:.6}.brand-mark i:nth-child(3){inset:15px;background:var(--orange);border:0}.orbit-panel{flex-direction:column;align-items:stretch;justify-content:center;padding-block:15px;border-inline:1px solid var(--line)}.orbit-panel>span,.cargo-panel>span,.score-panel>span,.readout span{color:var(--muted);font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em}.orbit-panel strong{align-self:flex-end;margin-top:-19px;font:300 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.orbit-panel strong.danger{color:#ff633f;text-shadow:0 0 14px rgba(255,99,63,.7)}.meter{height:3px;overflow:hidden;background:#a4c6d021}.meter i{display:block;width:100%;height:100%;background:var(--orange);transform-origin:left}.cargo-panel{flex-direction:column;align-items:flex-start;justify-content:center;border-right:1px solid var(--line)}.cargo-slots{display:flex;gap:8px;margin-top:12px}.cargo-slots i{width:28px;height:7px;border:1px solid #536873;background:#5668731f;transform:skew(-22deg);transition:background .18s,box-shadow .18s}.cargo-slots i.filled{border-color:var(--orange-soft);background:var(--orange);box-shadow:0 0 12px #ff7a328c}.score-panel{flex-direction:column;align-items:flex-end;justify-content:center}.score-panel strong{font:400 24px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.score-panel b{color:var(--steel);font-weight:400}.telemetry{position:absolute;z-index:4;left:26px;top:119px;width:192px;padding:15px;background:linear-gradient(110deg,#071017cc,#0710174d);border-left:2px solid var(--orange);pointer-events:none}.telemetry-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.telemetry-label span,.readout span{color:var(--muted);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em}.telemetry-label strong{color:#dce9ec;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.telemetry-bar{height:4px;margin-bottom:14px;background:#86a5b021;overflow:hidden}.telemetry-bar i{display:block;width:100%;height:100%;transform-origin:left;transition:transform .12s linear}.telemetry-bar.hull i{background:#b7d0d7}.telemetry-bar.fuel i{background:var(--orange)}.telemetry-bar i.critical{background:#ff4e39;box-shadow:0 0 9px #ff4e39}.readout{display:flex;justify-content:space-between;padding-top:9px;margin-top:9px;border-top:1px solid rgba(164,198,208,.13)}.readout b{color:var(--steel);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}.alarm{display:none;margin-top:13px;padding:7px;color:#ff775d;background:#ff412c1f;border:1px solid rgba(255,85,60,.4);font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;text-align:center;animation:alarm-blink .8s steps(2) infinite}.alarm.active{display:block}@keyframes alarm-blink{50%{opacity:.35}}.reticle{position:absolute;z-index:3;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);pointer-events:none;opacity:.65}.reticle i{position:absolute;background:#dbebefcc}.reticle i:nth-child(1),.reticle i:nth-child(2){width:1px;height:9px;left:18px}.reticle i:nth-child(1){top:0}.reticle i:nth-child(2){bottom:0}.reticle i:nth-child(3),.reticle i:nth-child(4){height:1px;width:9px;top:18px}.reticle i:nth-child(3){left:0}.reticle i:nth-child(4){right:0}.reticle span{position:absolute;inset:16px;border:1px solid var(--orange);transform:rotate(45deg)}.context-hint{position:absolute;z-index:4;left:50%;bottom:76px;transform:translate(-50%);min-width:240px;padding:9px 20px;text-align:center;color:var(--steel);background:#03090ea6;border-top:1px solid rgba(164,198,208,.2);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;pointer-events:none}.target-marker{position:fixed;z-index:5;left:0;top:0;min-width:112px;padding:7px 10px;opacity:0;text-align:center;pointer-events:none;transform:translate(-1000px,-1000px);transition:opacity .12s,color .12s}.target-marker.visible{opacity:1}.target-marker:before,.target-marker:after{content:"";position:absolute;top:11px;width:30px;height:1px;background:currentColor;opacity:.45}.target-marker:before{right:100%}.target-marker:after{left:100%}.target-marker span:not(.target-diamond){color:#d9e5e8;font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.target-marker small{display:block;margin-top:3px;color:var(--orange-soft);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.target-diamond{display:block;width:9px;height:9px;margin:0 auto 5px;border:1px solid currentColor;transform:rotate(45deg)}.target-marker.ready{color:#75e4ff;text-shadow:0 0 10px rgba(80,206,255,.7)}.target-marker.ready span:not(.target-diamond),.target-marker.ready small{color:#9cecff}.target-marker.behind{opacity:.45}.key-guide{position:absolute;z-index:4;left:50%;bottom:18px;transform:translate(-50%);display:flex;gap:17px;color:#6e838b;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;white-space:nowrap;pointer-events:none}kbd{padding:4px 5px;margin-right:4px;color:#b7c8cd;background:#73909a1a;border:1px solid rgba(164,198,208,.2);border-radius:2px;font:inherit}.mute-button{position:absolute;z-index:6;right:24px;top:110px;padding:7px 9px;color:#7f959d;background:#050c11a6;border:1px solid rgba(164,198,208,.16);font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;cursor:pointer}.mute-button:hover{color:var(--orange-soft);border-color:#ff7a3273}.touch-controls{display:none;position:absolute;z-index:6;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none}.touch-cluster{display:grid;gap:6px;pointer-events:auto}.touch-cluster.movement{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px)}.touch-cluster.movement button:first-child{grid-column:2}.touch-cluster.movement button:nth-child(2){grid-column:1;grid-row:2}.touch-cluster.movement button:nth-child(3){grid-column:3;grid-row:2}.touch-cluster.movement button:nth-child(4){grid-column:2;grid-row:2}.touch-cluster.rotation{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px)}.touch-cluster.rotation button:first-child{grid-column:1;grid-row:1 / 3}.touch-cluster.rotation button:nth-child(2){grid-column:2;grid-row:1}.touch-cluster.rotation button:nth-child(3){grid-column:2;grid-row:2}.touch-cluster.rotation button:nth-child(4){grid-column:3;grid-row:1 / 3}.touch-cluster.actions{display:flex;align-items:end;gap:7px}.touch-controls button{min-width:44px;min-height:44px;padding:0;color:#a9bbc0;background:#061017b3;border:1px solid rgba(164,198,208,.28);border-radius:3px;font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;touch-action:none;user-select:none}.touch-controls button:active{color:#061017;background:var(--orange-soft)}.touch-controls .grapple-button{width:68px;height:68px;color:#fff0e6;border-color:var(--orange);background:#a03a128c;font-size:9px}.touch-controls .boost-button{width:50px;color:#9cecff;border-color:#4a94aa;font-size:8px}.modal{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:24px;overflow-y:auto;visibility:hidden;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,#0e212c61,#010509d9);transition:opacity .25s,visibility .25s}.modal.visible{visibility:visible;opacity:1;pointer-events:auto}.modal-card{position:relative;width:min(580px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:40px 46px 34px;text-align:center;background:linear-gradient(135deg,#0c1921f5,#050d13f5);border:1px solid rgba(164,198,208,.24);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);box-shadow:0 30px 90px #0000008c}.modal-card:before,.modal-card:after{content:"";position:absolute;width:50px;height:2px;top:0;background:var(--orange)}.modal-card:before{left:18px}.modal-card:after{right:18px}.kicker{margin:0 0 14px;color:var(--orange-soft);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.28em}.modal h1{margin:0;color:#e4edef;font-size:clamp(34px,7vw,62px);font-weight:300;line-height:.92;letter-spacing:.1em}.modal h1 span{color:var(--orange);font-weight:700}.modal-copy{max-width:450px;margin:24px auto;color:#9eb0b6;font:12px/1.8 ui-sans-serif,system-ui,sans-serif}.briefing{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:24px 0;background:#a4c6d01f}.briefing span{padding:11px 6px;color:#71868e;background:#0a151c;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.briefing b{display:block;margin-bottom:5px;color:var(--orange-soft);font-size:9px}.primary-action{min-width:210px;padding:14px 22px;color:#071017;background:var(--orange);border:0;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;cursor:pointer;transition:filter .15s,transform .15s}.primary-action:hover{filter:brightness(1.18);transform:translateY(-1px)}.primary-action:focus-visible,.touch-controls button:focus-visible,.mute-button:focus-visible{outline:2px solid #9cecff;outline-offset:3px}.modal-foot{margin:24px 0 0;color:#50636b;font:7px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}@media(pointer:coarse),(max-width:900px){.touch-controls{display:flex}.key-guide{display:none}.context-hint{bottom:140px}}@media(max-width:760px){.hud{grid-template-columns:1fr 170px;min-height:78px}.brand-panel,.orbit-panel,.cargo-panel,.score-panel{min-height:77px;padding:13px 15px}.brand-panel small,.cargo-panel,.score-panel{display:none}.brand-mark{width:28px;height:28px}.brand-panel strong{font-size:12px}.orbit-panel{border-left:1px solid var(--line)}.orbit-panel>span{font-size:7px}.orbit-panel strong{font-size:20px}.telemetry{top:92px;left:14px;width:155px;padding:11px}.mute-button{top:93px;right:14px}.reticle{width:30px;height:30px}.reticle i:nth-child(1),.reticle i:nth-child(2){left:14px;height:7px}.reticle i:nth-child(3),.reticle i:nth-child(4){top:14px;width:7px}.reticle span{inset:12px}.modal-card{padding:34px 22px 27px}.modal-copy{font-size:11px}}@media(max-width:520px){.telemetry{width:142px}.readout{display:none}.alarm{font-size:8px}.context-hint{min-width:210px;width:calc(100% - 28px)}.touch-cluster.movement,.touch-cluster.rotation{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}.touch-cluster.actions{flex-direction:column;align-items:end}.touch-controls .grapple-button{width:62px;height:62px}.briefing{margin-block:18px}.modal h1{letter-spacing:.04em}}@media(max-width:360px){.touch-controls{left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:end}.touch-cluster.movement,.touch-cluster.rotation{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}.touch-cluster.actions{grid-column:1 / -1;flex-direction:row;justify-content:flex-end;align-items:center}.context-hint{bottom:190px}.modal{padding:12px}.modal-card{padding:28px 18px 22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media(pointer:coarse),(max-width:900px){html,body,#app{overflow-x:clip}.hud,.brand-panel,.orbit-panel,.cargo-panel,.score-panel{min-width:0}.brand-panel,.orbit-panel,.cargo-panel,.score-panel{overflow:hidden}.touch-controls{right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px}.context-hint{right:14px;left:14px;width:auto;min-width:0;max-width:calc(100% - 28px)}.modal{overflow-y:auto}.modal-card{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}}@media(max-width:760px){.hud{grid-template-columns:minmax(0,1fr) minmax(150px,170px)}.brand-panel strong{font-size:11px;letter-spacing:.14em}.orbit-panel>span,.brand-panel small{letter-spacing:.1em}.telemetry{top:94px;width:min(155px,calc(100% - 28px))}.mute-button{top:95px}}@media(max-width:520px){.context-hint{bottom:210px}.touch-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:end}.touch-cluster.actions{grid-column:1 / -1;flex-direction:row;justify-content:flex-end;align-items:center;gap:5px}.briefing span{font-size:8px}.modal-card{padding:30px 20px 24px}.target-marker{max-width:calc(100vw - 28px)}}@media(min-width:901px)and (pointer:fine){.telemetry{max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain}.modal-card{max-height:calc(100dvh - 48px)}.briefing span{background:#09151cf5}.context-hint{background:#03090ed1}}