:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#d7f4f8;background:#030918}
*{box-sizing:border-box}html,body,#gameShell{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden}
button,select{font:inherit;color:#d7f4f8;background:#061522;border:1px solid #3a6878;border-radius:3px;padding:7px 9px;cursor:pointer}
button:hover,select:hover{border-color:#6ce0ea;background:#102b3c}button:focus-visible,select:focus-visible{outline:2px solid #84e8f5}
#gameShell{position:relative;min-height:320px;isolation:isolate}#renderHost{position:absolute;inset:0;touch-action:none}
#renderHost canvas{display:block;width:100%;height:100%;touch-action:none;cursor:none}
.topbar,.bottomBar{position:absolute;left:0;right:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(2,8,16,.90),rgba(3,12,22,.52));border-bottom:1px solid rgba(75,155,175,.20)}
.topbar{top:0;min-height:60px;display:flex;align-items:center;gap:16px;padding:7px max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left));flex-wrap:wrap}
.identity{display:grid;min-width:210px}.identity small{font-size:9px;letter-spacing:.22em;color:#6eb5be}.identity b{font-size:13px;letter-spacing:.09em}
.topstats{display:flex;flex:1;justify-content:space-around;gap:9px}.topstats>div{display:grid;gap:2px;min-width:42px}
small{color:#7caab8}.topstats small{font-size:9px;letter-spacing:.1em}.topstats b{font-size:16px;color:#e5fdff;font-variant-numeric:tabular-nums}
.actions{display:flex;align-items:center;gap:5px;pointer-events:auto}.actions button,.actions select{font-size:10px;padding:7px}.qualityLabel{font-size:9px;color:#8abec6;white-space:nowrap}
.radarPanel{position:absolute;top:76px;left:max(12px,env(safe-area-inset-left));z-index:3;display:flex;gap:9px;align-items:center;color:#a8ddca;pointer-events:none;background:rgba(1,12,18,.38);border:1px solid rgba(80,155,135,.20);padding:4px}
.radarPanel canvas{width:98px;height:98px}.radarPanel>div{display:grid;gap:3px}.radarPanel b{font-size:25px;color:#d6ffeb}
.signalBanner{position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:5;font-size:clamp(16px,2.2vw,32px);letter-spacing:.18em;color:#e5feff;text-shadow:0 0 18px #49eeff;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.signalBanner.is-visible{opacity:1}
.bottomBar{bottom:0;min-height:79px;border-top:1px solid rgba(75,155,175,.20);border-bottom:0;background:linear-gradient(0deg,rgba(1,7,14,.92),rgba(3,12,22,.52));display:flex;align-items:center;gap:18px;padding:9px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.alert{display:grid;min-width:110px}.alert small{font-size:9px}.alert b{color:#ffb97c}.bases{display:flex;gap:12px;flex:1;justify-content:center}.baseGauge{min-width:90px;max-width:170px;flex:1}.baseGauge header{display:flex;justify-content:space-between;font-size:11px}.baseGauge strong{color:#81f8ff}.baseGauge.low strong{color:#ffc66d}.baseGauge.offline strong,.baseGauge.empty strong{color:#ff6972}
.baseGauge .bar{height:7px;display:flex;gap:1px;margin-top:5px}.baseGauge i{display:block;height:100%;flex:1;background:#244153}.baseGauge i.on{background:#72e9ef;box-shadow:0 0 5px #35cbdb}.baseGauge.low i.on{background:#ffb65a}.hint{font-size:9px;letter-spacing:.12em;max-width:170px;color:#8ab4c0}
.statusOverlay{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;padding:20px;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(1,8,15,.36),rgba(1,8,15,.76))}
.statusOverlay.is-visible{display:flex}.overlayCard{pointer-events:auto;text-align:center;max-width:580px;padding:clamp(20px,4vw,44px);border:1px solid rgba(102,224,237,.65);background:linear-gradient(145deg,rgba(3,20,33,.94),rgba(4,14,27,.87));box-shadow:0 0 44px rgba(35,177,197,.16),inset 0 0 40px rgba(54,136,170,.06)}
.overlayCard .eyebrow{font-size:11px;letter-spacing:.3em;color:#82dbe5}.overlayCard h1{font-size:clamp(25px,5vw,50px);line-height:1.05;letter-spacing:.08em;margin:18px 0 12px;text-shadow:0 0 25px rgba(95,231,255,.45)}
.overlayCard p{color:#b8d5dd;font-size:14px;line-height:1.6}.overlayCard button{font-weight:800;letter-spacing:.12em;font-size:15px;padding:14px 22px;margin:18px 0;background:#0a3d52;border-color:#74eefa;box-shadow:0 0 22px rgba(91,233,248,.26);animation:pulse 2s ease-in-out infinite}
.instructions{display:block;font-size:10px;letter-spacing:.1em}@keyframes pulse{50%{box-shadow:0 0 32px rgba(95,241,255,.5)}}
.orientation{display:none}.perfPanel{position:absolute;right:10px;top:72px;z-index:8;width:min(340px,calc(100vw - 20px));max-height:calc(100dvh - 150px);overflow:auto;background:rgba(2,13,21,.94);border:1px solid #549bae;padding:12px;box-shadow:0 8px 30px #0008;font-size:11px}
.perfPanel[hidden]{display:none}.perfPanel>b{color:#a1efff}.perfPanel #perfRows{display:grid;grid-template-columns:1fr auto;gap:4px;margin:10px 0}.perfPanel .value{text-align:right;color:#f0fcff;font-variant-numeric:tabular-nums}.perfButtons{display:flex;gap:5px}.perfButtons button{font-size:10px}.perfPanel textarea{width:100%;height:75px;margin-top:7px}.perfPanel p{min-height:14px;margin:6px 0;color:#a9ecfa}
@media(max-width:850px){.topbar{gap:5px;padding:5px 8px}.identity{min-width:0;flex:1}.identity b{font-size:10px}.identity small{font-size:7px}.topstats{order:3;width:100%;flex:auto;justify-content:space-between}.topstats small{font-size:7px}.topstats b{font-size:13px}.actions{justify-content:flex-end}.actions button,.actions select{font-size:9px;padding:5px;min-height:29px;touch-action:manipulation}.qualityLabel{font-size:8px}.radarPanel{top:94px}.radarPanel canvas{width:70px;height:70px}.radarPanel>div{display:none}.bottomBar{gap:5px;min-height:67px}.alert{min-width:72px}.alert b{font-size:10px}.bases{gap:5px}.baseGauge{min-width:55px}.baseGauge header{font-size:9px}.hint{display:none}.perfPanel{top:95px}}
@media(max-width:520px){.identity small{display:none}.topstats>div:nth-child(2),.topstats>div:nth-child(6){display:none}.radarPanel{top:85px;padding:2px}.radarPanel canvas{width:55px;height:55px}.bottomBar{min-height:58px}.alert{display:none}.baseGauge header{font-size:8px}.baseGauge .bar{height:5px}}
@media(orientation:portrait) and (max-width:850px){.orientation{display:block;position:absolute;z-index:4;top:145px;right:10px;background:#0a2635bb;color:#ccebf4;font-size:10px;padding:6px}.radarPanel{top:143px}.bottomBar{padding-bottom:max(8px,env(safe-area-inset-bottom))}}