:root{--bg:#030708;--panel:#071013;--line:#173238;--text:#c9d9dc;--muted:#60797e;--green:#54d5c1;--blue:#57a8dc;--gold:#d5b158;--purple:#9a82db;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;min-height:100%;background:var(--bg);color:var(--text);font-family:Consolas,"SFMono-Regular",monospace}body{overflow:hidden;overscroll-behavior:none}.app{height:100vh;height:100dvh;min-height:100vh;padding:max(8px,var(--safe-top)) max(10px,var(--safe-right)) max(7px,var(--safe-bottom)) max(10px,var(--safe-left));display:flex;flex-direction:column;gap:0}
.topbar{height:48px;flex:0 0 48px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 8px 8px}.brand{display:flex;align-items:center;gap:11px;min-width:0}.mark{width:29px;height:29px;flex:0 0 29px;border:1px solid var(--green);display:grid;place-items:center;color:var(--green);font-weight:bold}.brand strong{display:block;font-size:15px;letter-spacing:.22em}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:.16em;margin-top:2px}.status{font-size:9px;color:var(--muted);display:flex;gap:9px;align-items:center;white-space:nowrap}.status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.status b{height:13px;width:1px;background:var(--line)}
main{flex:1;min-height:0;padding-top:9px;display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:minmax(450px,1fr) 175px;gap:9px}.panel{background:rgba(7,16,19,.96);border:1px solid var(--line);min-height:0;overflow:hidden}.map-panel{display:flex;flex-direction:column}.panel-head{min-height:56px;height:56px;flex:0 0 56px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px;gap:10px}.panel-head.small{height:47px;min-height:47px;flex-basis:47px}.panel-head label{font-size:8px;color:var(--muted);letter-spacing:.18em}.panel-head h1,.panel-head h2{font-size:13px;letter-spacing:.12em;margin:3px 0 0}.panel-head h1{font-size:15px}.panel-head h2{white-space:nowrap}.panel-head em{font-style:normal;font-size:8px;color:var(--green);border:1px solid #245e57;padding:4px 6px;white-space:nowrap}.controls{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.controls button,.controls select{min-height:34px;background:#081114;border:1px solid var(--line);color:var(--muted);padding:7px 9px;font:8px Consolas;cursor:pointer;touch-action:manipulation}.controls button.active{color:var(--green);border-color:#246b63}.controls select{outline:none}
.map-stage{position:relative;flex:1;min-height:0;background:#061014;overflow:hidden}.map-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.map-stage canvas.dragging{cursor:grabbing}.map-readout,.sim-readout,.map-help{position:absolute;z-index:5;pointer-events:none;color:#537176;font-size:8px;line-height:1.7;text-shadow:0 1px 2px #000}.map-readout{left:11px;top:10px}.sim-readout{right:11px;bottom:9px;text-align:right}.sim-readout strong{color:var(--green);font-size:11px}.map-help{left:50%;top:10px;transform:translateX(-50%);font-size:7px;color:#3d5b60;letter-spacing:.08em;white-space:nowrap}.mobile-help{display:none}
aside{display:grid;grid-template-rows:1fr 1.15fr;gap:9px;min-height:0}.units-panel,.comms{display:flex;flex-direction:column;min-height:0}.units-panel>div:last-child{overflow:auto;-webkit-overflow-scrolling:touch}.unit{min-height:59px;height:59px;border-bottom:1px solid #10272b;padding:9px 12px;display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;cursor:pointer;touch-action:manipulation}.unit:hover,.unit.selected{background:#0b1a1d;box-shadow:inset 2px 0 var(--green)}.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}.dot.ship{background:var(--gold);box-shadow:0 0 7px var(--gold)}.dot.sub{background:var(--purple);box-shadow:0 0 7px var(--purple)}.uname{font-size:10px}.utype{font-size:7px;color:var(--muted);margin-top:3px}.ustate{font-size:7px;color:var(--green)}#log{flex:1;overflow:auto;padding:10px 12px;font-size:8px;line-height:1.7;-webkit-overflow-scrolling:touch}.logline{margin-bottom:7px}.time{color:#3c5b60}.source{color:var(--green)}.hq{color:var(--gold)}.system{color:var(--blue)}#cmd{border-top:1px solid var(--line);min-height:50px;height:50px;display:flex;align-items:center;gap:7px;padding:0 11px}#cmd span{color:var(--green);font-size:8px}#input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:10px Consolas}#input::placeholder{color:#49656a}
.bottom{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:9px;min-height:0}.details,.systems{min-height:0}.details #detail{padding:12px 14px;font-size:8px;color:var(--muted);overflow:auto}.metricgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric label{display:block;color:var(--muted);font-size:7px;margin-bottom:3px}.metric strong{color:var(--text);font-size:10px}.systems-list{padding:4px 14px}.systems-list p{margin:0;padding:6px 0;border-bottom:1px solid #10272b;font-size:8px;display:flex;justify-content:space-between}.systems-list b{color:var(--green);font-size:7px;font-weight:normal}footer{height:22px;flex:0 0 22px;color:#304a4e;font-size:7px;padding:5px 8px 0;display:flex;justify-content:space-between;gap:10px;white-space:nowrap}footer span:last-child{overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 290px}.bottom{grid-template-columns:minmax(0,1fr) 290px}.controls button,.controls select{padding-inline:7px}.panel-head{padding-inline:11px}}
@media(max-width:900px){body{overflow:hidden}.app{padding-top:max(6px,var(--safe-top));padding-bottom:max(6px,var(--safe-bottom));padding-left:max(7px,var(--safe-left));padding-right:max(7px,var(--safe-right))}.topbar{height:52px;flex-basis:52px;padding:0 5px 7px}.brand{gap:8px}.mark{width:27px;height:27px;flex-basis:27px}.brand strong{font-size:13px}.brand small{font-size:7px}.status{display:none}main{grid-template-columns:1fr;grid-template-rows:minmax(300px,52dvh) minmax(220px,31dvh) minmax(120px,auto);gap:7px;padding-top:7px;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.map-panel{min-height:300px}.panel-head{height:51px;min-height:51px;flex-basis:51px;padding:0 9px}.panel-head h1{font-size:12px}.panel-head label{font-size:7px}.panel-head.small{height:43px;min-height:43px;flex-basis:43px}.panel-head h2{font-size:11px}.panel-head em{font-size:7px;padding:3px 5px}.controls{gap:3px}.controls button,.controls select{min-height:38px;height:38px;padding:7px 8px;font-size:8px}.map-readout{left:8px;top:8px;font-size:7px}.sim-readout{right:8px;bottom:7px}.map-help{top:auto;bottom:8px}.desktop-help{display:none}.mobile-help{display:inline}.map-stage canvas{touch-action:none}aside{grid-template-rows:minmax(0,1fr) minmax(170px,.8fr);gap:7px;min-height:0}.units-panel,.comms{min-height:0}.unit{height:58px;min-height:58px;padding:8px 10px}.uname{font-size:10px}.utype{font-size:7px}.ustate{font-size:7px}.bottom{grid-column:auto;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(125px,auto) minmax(135px,auto);gap:7px;min-height:0}.details #detail{padding:10px}.metricgrid{grid-template-columns:repeat(2,1fr);gap:9px}.metric strong{font-size:9px}.systems-list{padding:3px 10px}.systems-list p{padding:5px 0}footer{height:18px;flex-basis:18px;padding:3px 5px 0;font-size:6px}}
@media(max-width:900px) and (orientation:landscape){.app{padding-top:max(5px,var(--safe-top));padding-bottom:max(5px,var(--safe-bottom))}.topbar{height:43px;flex-basis:43px}.mark{width:25px;height:25px;flex-basis:25px}.brand strong{font-size:12px}.brand small{font-size:6px}main{grid-template-columns:minmax(0,1fr) 285px;grid-template-rows:minmax(0,1fr) 125px;gap:7px;overflow:hidden}.map-panel{grid-column:1;grid-row:1;min-height:0}.map-panel .panel-head{height:44px;min-height:44px;flex-basis:44px}.panel-head h1{font-size:11px}.controls button,.controls select{min-height:34px;height:34px;padding:6px 7px;font-size:7px}aside{grid-column:2;grid-row:1;grid-template-rows:minmax(0,1fr) 155px;gap:7px}.bottom{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) 285px;grid-template-rows:1fr;gap:7px}.details,.systems{min-height:0}.details .panel-head,.systems .panel-head{height:39px;min-height:39px;flex-basis:39px}.details #detail{padding:8px}.metricgrid{grid-template-columns:repeat(4,1fr);gap:7px}.metric label{font-size:6px}.metric strong{font-size:8px}.systems-list{padding:2px 8px}.systems-list p{padding:4px 0;font-size:7px}footer{display:none}.unit{height:51px;min-height:51px;padding:6px 9px}.uname{font-size:9px}.utype,.ustate{font-size:6px}#cmd{min-height:43px;height:43px}.map-readout{font-size:6px}.sim-readout{font-size:6px}.sim-readout strong{font-size:9px}}
@media(max-width:430px) and (orientation:portrait){main{grid-template-rows:minmax(280px,50dvh) minmax(220px,34dvh) minmax(125px,auto)}.map-panel .panel-head{height:48px;min-height:48px;flex-basis:48px}.panel-head h1{font-size:11px}.controls button{font-size:7px;padding:6px}.controls select{font-size:7px;padding:6px}.controls button:nth-child(1),.controls button:nth-child(2),.controls button:nth-child(3){min-width:54px}.unit{height:55px;min-height:55px}.ustate{display:none}.brand small{display:none}.bottom{grid-template-rows:minmax(135px,auto) minmax(135px,auto)}}
@media(hover:none){.unit:hover{background:transparent;box-shadow:none}.unit.selected{background:#0b1a1d;box-shadow:inset 3px 0 var(--green)}.controls button:active,.controls select:active{background:#0d2023}.unit:active{background:#0d2023}}