/* Cosmic Starship 3.11 — Fleet Command (demo). Loaded after simulator.css, whose stage, HUD, controls and setup it reuses. */
.command .stage { position: fixed; inset: 0; }
#cmd-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.command #sim-canvas { cursor: crosshair; touch-action: none; }

.cmd-paused { position: fixed; left: 50%; top: 96px; transform: translateX(-50%); z-index: 6; margin: 0; padding: 7px 16px; border-radius: 8px; background: #050b11e6; border: 1px solid #e2c69466; color: #e2c694; font: 600 12px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; white-space: nowrap; }
.cmd-paused kbd, .cmd-orders kbd { font: inherit; padding: 1px 6px; border: 1px solid #ffffff3d; border-radius: 4px; color: #fff; }

.cmd-panel { position: fixed; left: 14px; bottom: 14px; z-index: 6; width: min(340px, calc(100vw - 28px)); display: grid; gap: 8px; }
.cmd-sel { max-height: 38vh; overflow: auto; padding: 10px 12px; border-radius: 10px; background: #050b11e0; border: 1px solid #ffffff1f; color: #dfe7e2; font-size: 13px; line-height: 1.4; }
.cmd-sel h2 { margin: 0 0 6px; font: 600 11px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; color: #a2b8b1; }
.cmd-sel p { margin: 0; color: #a2b8b1; }
.cmd-ship { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-top: 1px solid #ffffff14; }
.cmd-ship:first-of-type { border-top: 0; }
.cmd-ship b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-ship span { color: #a2b8b1; font-size: 12px; }
.cmd-ship em { font-style: normal; color: #a1e1c8; font-size: 12px; text-align: right; }
.cmd-ship i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.cmd-ship i u { display: block; height: 100%; background: #a1e1c8; text-decoration: none; }
.cmd-ship i u.low { background: #ff8f74; }
.cmd-orders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmd-orders button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffffff26; background: #0b1820e6; color: #e6ebe3; font: inherit; font-size: 13px; cursor: pointer; }
.cmd-orders button:hover, .cmd-orders button:focus-visible { border-color: #a1e1c8; }
.cmd-orders button:disabled { opacity: .45; cursor: default; border-color: #ffffff26; }
.cmd-orders b { font-weight: 600; }
.cmd-orders kbd { font-size: 10.5px; color: #a2b8b1; }

.cmd-setup { max-width: 640px; }
.cmd-how { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: #cfd9d4; }
.cmd-how b { display: inline-block; min-width: 68px; color: #e2c694; font-weight: 600; }
.command .cam-hint { max-width: min(760px, 92vw); }

@media (max-width: 720px) {
  .cmd-panel { left: 8px; right: 8px; bottom: 96px; width: auto; }
  .cmd-sel { max-height: 22vh; }
  .cmd-orders { grid-template-columns: repeat(4, 1fr); }
  .cmd-orders kbd { display: none; }
  .cmd-paused { top: 84px; font-size: 11px; }
}

/* The battle controls sit bottom right, clear of the selection panel. */
.command .sim-controls { left: auto; right: 14px; transform: none; max-width: min(430px, calc(100vw - 380px)); }
.command .cam-hint { font-size: 12px; }
@media (max-width: 720px) { .command .sim-controls { left: 8px; right: 8px; max-width: none; } .command .cam-hint { display: none; } }

/* 3.12: decks and the mothership's yard */
.cmd-orders { grid-template-columns: 1fr 1fr 1fr; }
.cmd-ship .deck { text-align: right; font: 600 10.5px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; color: #a2b8b1; }
.cmd-ship .deck.d1 { color: #8fc9ff; } .cmd-ship .deck.d-1 { color: #e2c694; }
.cmd-yard { position: fixed; right: 14px; top: 86px; z-index: 6; width: min(270px, calc(100vw - 28px)); max-height: calc(100vh - 250px); overflow: auto; padding: 10px 12px; border-radius: 10px; background: #050b11e0; border: 1px solid #ffffff1f; color: #dfe7e2; font-size: 13px; }
.cmd-yard h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 600 11px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; color: #a2b8b1; }
.cmd-yard h2 span { letter-spacing: 0; color: #a2b8b1; font-weight: 400; } .cmd-yard h2 b { color: #e2c694; font-size: 15px; }
.yard-queue { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.yard-queue li { display: grid; gap: 3px; font-size: 12px; } .yard-queue li.idle { color: #a2b8b1; }
.yard-queue i { display: block; height: 4px; border-radius: 2px; background: #ffffff1a; overflow: hidden; } .yard-queue u { display: block; height: 100%; width: 0; background: #e2c694; }
.yard-list { display: grid; gap: 5px; }
.yard-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; text-align: left; padding: 7px 9px; border-radius: 8px; border: 1px solid #ffffff26; background: #0b1820e6; color: #e6ebe3; font: inherit; font-size: 13px; cursor: pointer; }
.yard-list button:hover:not(:disabled), .yard-list button:focus-visible { border-color: #e2c694; }
.yard-list button:disabled { opacity: .45; cursor: default; }
.yard-list b { font-weight: 600; } .yard-list span { grid-column: 1; color: #a2b8b1; font-size: 11.5px; } .yard-list em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; color: #e2c694; font-variant-numeric: tabular-nums; }
.yard-note { margin: 8px 0 0; color: #a2b8b1; font-size: 11.5px; line-height: 1.4; }
@media (max-width: 720px) { .cmd-yard { top: 74px; right: 8px; width: 200px; max-height: 34vh; } .yard-note { display: none; } .cmd-orders { grid-template-columns: repeat(3, 1fr); } }