*{box-sizing:border-box}body{margin:0;background:#0b1722;color:#e4edf0;font:14px system-ui,sans-serif}header{height:92px;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #29404b}.eyebrow{font-size:10px;letter-spacing:2px;color:#79bbbf;font-weight:700}h1{font-size:27px;margin:5px 0}h1 span{font-size:11px;font-weight:500;color:#8ba4b0;letter-spacing:1.6px;margin-left:16px}.badge{font-size:10px;letter-spacing:1px;color:#f8bf65;border:1px solid #806240;padding:9px 12px;border-radius:5px}main{display:grid;grid-template-columns:minmax(0,1fr) 294px;height:calc(100dvh - 92px)}.viewport{min-height:460px;position:relative;overflow:hidden}#view{width:100%;height:100%;display:block;outline:none;touch-action:none}.view-label{position:absolute;top:22px;left:26px;pointer-events:none}.view-label b{font-size:15px;display:block}.view-label span{font-size:11px;color:#9eb9c3;display:block;margin-top:5px}#message{position:absolute;bottom:53px;left:26px;right:26px;color:#f8d38d;font-size:12px;background:#10232ce6;padding:10px 14px;border-left:2px solid #eeb459;pointer-events:none}.legend{position:absolute;bottom:20px;left:26px;font-size:11px;color:#b0c6cd;display:flex;gap:9px;align-items:center}.legend i{width:15px;height:3px;background:#6addd0;margin-left:8px}.legend i.orange{background:#e9a85f}.legend span{margin-left:15px;color:#70939f}aside{border-left:1px solid #29404b;background:#10202c;padding:22px;overflow:auto}h2{font-size:44px;font-weight:500;margin:8px 0 16px;font-variant-numeric:tabular-nums}h2 small{font-size:16px;color:#89a7b3}.metrics{border-top:1px solid #29404b;margin-bottom:20px}.metrics div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #233641;font-size:9px;letter-spacing:.4px;color:#8fa9b5}.metrics b{font-size:11px;color:#dce9eb;font-weight:500;font-variant-numeric:tabular-nums}label{font-size:11px;color:#8fa9b5;display:block;margin-bottom:7px}select,button{font:inherit;font-size:12px;color:#dce9eb;background:#193341;border:1px solid #35525f;border-radius:5px;min-height:44px;padding:9px;cursor:pointer}select{width:100%;font-size:16px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0 7px}#recover,#fullscreen{width:100%;margin-bottom:7px}button:hover,button:focus-visible{background:#2c505d;outline:1px solid #82cfcd}.controls{font-size:11px;line-height:1.8;color:#9cb7c2}.scope{border-top:1px solid #29404b;padding-top:14px;font-size:11px;color:#8ca7b2;line-height:1.55}.scope b{color:#d0e0e3}.scope p{margin:5px 0 12px}.touch{display:none;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0}@media(pointer:coarse){.touch{display:grid}}@media(max-width:820px){header{height:86px;padding:15px}h1{font-size:22px}h1 span{display:block;margin:3px 0 0;font-size:9px}.badge{font-size:8px;padding:7px}main{height:auto;display:block}.viewport{height:66dvh;min-height:420px}aside{border-left:0;border-top:1px solid #29404b}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.legend{font-size:9px;left:12px;gap:5px}.legend span{display:none}.view-label{left:15px;top:16px}#message{left:15px;right:15px}.touch{display:grid}}
.raceSummary{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding:12px;background:#183b42;border:1px solid #3d7777;border-radius:5px}.raceSummary b{font-size:23px;color:#8ae3d5}.raceSummary span{font-size:10px;color:#ffcf8d}#team{margin-bottom:14px;font-size:14px}#teamScores{position:absolute;right:22px;top:22px;color:#9de1d7;font-size:12px;background:#10232ce6;padding:9px 12px;border-radius:4px;white-space:pre}#damage{width:100%;margin-bottom:7px;border-color:#a27849;color:#ffce91}#ledger{white-space:pre-line;font:11px/1.8 monospace;color:#94c9c1;margin:12px 0}@media(max-width:820px){#teamScores{top:63px;left:15px;right:auto;font-size:10px}}

label:has(#shipKeys){display:flex;align-items:center;gap:9px;min-height:44px}#shipKeys{width:22px;height:22px}#helmStatus{color:#91e7df;font-weight:600}button:disabled{opacity:.5;cursor:default}

#playablePanel input[type=number]{box-sizing:border-box;width:100%;min-height:44px;font-size:16px;color:#dbe9e9;background:#17323e;border:1px solid #41616d;border-radius:5px;padding:10px;} #playablePanel button{min-height:44px;}
#playtestGuide{border-top:0;padding-top:0;padding-bottom:18px}#playtestGuide h3{font-size:16px;margin:12px 0 8px;color:#c9eee7}#guideSteps{padding-left:20px;font-size:12px;line-height:1.6}#guideSteps li{margin-bottom:8px}#playtestGuide summary{min-height:44px;padding:12px 0;cursor:pointer;color:#b9dfda}#guidePause{width:100%;margin:4px 0 10px}#guideLinks button{font-size:12px;min-height:44px}#playtestGuide .guideNote{font-size:11px}#playtestGuide label{margin-top:10px}#researchStatus:focus{outline:2px solid #82cfcd;outline-offset:4px}

.dock-nav{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px;background:#102630;border-bottom:1px solid #31505c}.dock-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;color:#91e5d9;font:14px system-ui;text-decoration:none;border:1px solid #365963;border-radius:5px}.dock-nav a:focus-visible{outline:3px solid #ffca6e}select,input{font-size:16px!important}button,summary{min-height:44px}
@media(min-width:851px){body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}header,.dock-nav,footer{flex-shrink:0}main{flex:1;min-height:0;height:auto}main>.viewport,main>.stage,main>section{min-height:0;height:auto}aside{min-height:0;height:auto;max-height:none;overflow:auto}}

#vehicleHud{position:absolute;left:12px;bottom:46px;max-width:calc(100% - 24px);white-space:pre-line;background:#091c2ee8;border:1px solid #62cfc0;border-radius:8px;padding:10px 14px;color:#eef8ff;font:600 14px/1.5 system-ui;pointer-events:none}@media(max-width:600px){#vehicleHud{font-size:11px;padding:6px;bottom:42px}}

@media(min-width:821px){body{height:100dvh;display:grid;grid-template-rows:92px auto minmax(0,1fr)}main{height:auto;min-height:0}.viewport{min-height:0}aside{min-height:0}}