html,body{margin:0;height:100%;background:#05070d;overflow:hidden;font-family:system-ui,Segoe UI,Arial,sans-serif;color:#cfe8ff}
canvas{display:block;cursor:crosshair}
#hangar{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--ui-scale,1));width:460px;max-height:calc(85vh / var(--ui-scale,1));overflow-y:auto;background:rgba(8,14,28,.96);
  border:1px solid #2b6cb0;border-radius:10px;padding:16px 18px;box-shadow:0 0 40px #0a3a7a88}
#hangar[hidden]{display:none}
#death{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--ui-scale,1));width:400px;background:rgba(8,14,28,.96);
  border:1px solid #b03a3a;border-radius:10px;padding:16px 18px;box-shadow:0 0 40px #7a0a0a88;z-index:10}
#death[hidden]{display:none}
#death h2{margin:0 0 8px;font-size:18px;color:#ff7777}
#death .hint{font-size:13px;color:#cfe8ff;line-height:1.5;margin-bottom:12px}
#death .warn{color:#ffb347}
#deathBtns{display:flex;flex-direction:column;gap:6px}
#hangar h2{margin:0 0 4px;font-size:18px;color:#7fd0ff}
#hangar .hint{font-size:12px;color:#8aa;margin-bottom:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #16304f}
.row small{color:#8fb;display:block}
.row.empty{color:#567;font-style:italic}
.row>div:first-child{min-width:0;flex:1}
.row .desc{color:#8aa;font-size:12px;display:block;margin-top:2px}
.row .rw{color:#ffd54a;font-size:12px;display:block;margin-top:2px}
.row.locked{opacity:.5}
.row .why{flex-shrink:0;color:#8aa}
.tag{font-size:10px;padding:1px 6px;border-radius:8px;background:#0d1b33;color:#7fd0ff;margin-left:6px;vertical-align:1px}
.tag.risk{color:#ffb347}
button.ghost{background:#333}
.btns{display:flex;gap:6px;flex-shrink:0}
.group{margin-top:12px;font-size:13px;font-weight:bold;color:#7fd0ff}
.stats{font-size:13px;color:#cfe8ff;background:#0d1b33;border-radius:6px;padding:6px 8px}
#hangarTabs{display:flex;gap:6px;margin-bottom:6px}
#hangarTabs button{background:#16304f}
#hangarTabs button.active{background:#2a6fc0}
.cats{display:flex;gap:4px;margin:6px 0 4px}
.cats button{flex:1;background:#10243f;padding:5px 6px;font-size:12px}
.cats button.active{background:#2a6fc0}
button{background:#1b4f8a;color:#fff;border:0;border-radius:6px;padding:7px 12px;cursor:pointer;font-size:13px}
button:hover:not(:disabled){background:#2a6fc0}
button:disabled{opacity:.35;cursor:not-allowed}
#hangarFoot{display:flex;justify-content:space-between;margin-top:10px}
#close{background:#333}
#resetSave{background:#6a1f1f}
#resetSave:hover{background:#9a2a2a}
#help{position:fixed;left:12px;bottom:12px;font-size:12px;color:#7a93ad;background:rgba(5,10,20,.6);padding:8px 10px;border-radius:8px;line-height:1.5;
  transform:scale(var(--ui-scale,1));transform-origin:left bottom}
/* Drag and drop grids (ship tab) */
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:6px}
.cell{position:relative;aspect-ratio:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#0d1b33;border:1px solid #1d3a63;border-radius:6px;
  user-select:none;-webkit-user-select:none;font-size:18px;color:#cfe8ff}
.cell.item{cursor:grab;touch-action:none;background:#12284a}
.cell.laser{border-color:#ff6b6b}.cell.shield{border-color:#4dabf7}.cell.engine{border-color:#ffd54a}.cell.battery{border-color:#ffa94d}.cell.consumable{border-color:#69db7c}.cell.action{border-color:#b197fc}
.cell .k{position:absolute;left:3px;top:1px;font-size:9px;color:#7a93ad}
.cell .t{position:absolute;left:3px;bottom:1px;font-size:9px;color:#8aa}
.cell .n{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:bold;color:#fff}
.cell.bat-on{border-color:#4be36b;box-shadow:0 0 0 1px #4be36b inset,0 0 8px #4be36b}
.cell.dd-src{opacity:.35}
.cell.dd-ok{box-shadow:0 0 0 2px #3ddc84 inset;background:#12382f}
.cell.dd-no{opacity:.4}
.cell.dd-over{background:#1d6a4a;box-shadow:0 0 0 2px #7dffb2 inset}
.cell.sell{aspect-ratio:auto;height:34px;margin-top:8px;font-size:12px;color:#ffb3b3;border:1px dashed #a33;background:#2a1216}
.cell.sell.dd-ok{background:#4a1c22;box-shadow:0 0 0 2px #ff6b6b inset}
.cell.sell.dd-over{background:#7a2a30}
.cell.ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.9;transform:scale(1.1);background:#1b3d70}
.dd-hint{margin-top:8px;font-size:11px;color:#7a93ad}
#tip{position:fixed;z-index:1001;pointer-events:none;max-width:260px;background:rgba(5,10,20,.97);border:1px solid #2b6cb0;border-radius:6px;padding:6px 9px;font-size:12px;color:#cfe8ff;line-height:1.4}
#tip b{color:#7fd0ff}#tip small{display:block;color:#8fb}

/* Telemetry overlay (F3), above the help box */
#telemetry{position:fixed;left:12px;bottom:120px;font:12px/1.4 monospace;color:#9fb6cc;background:rgba(5,10,20,.6);padding:6px 10px;border-radius:8px;pointer-events:none;z-index:5}
#telemetry[hidden]{display:none}
#telemetry .good{color:#6f6}
#telemetry .warn{color:#fd5}
#telemetry .bad{color:#f66}
#telemetry .head{color:#7fd0ff;font-weight:bold;margin-top:4px}
#telemetry .head:first-child{margin-top:0}