/* SRC / Expedition command hardware. Human-built hull rims, live data apertures.
   This layer preserves the existing rectangular data and control footprints. */
:root {
  color-scheme:dark;--bg:#070b10;--panel:rgba(8,13,20,.72);--line:#8c9aa547;
  --white:#e1e7eb;--muted:#acb9c4;--cyan:#78bded;--amber:#f1c75f;
  --red:#ff7886;--blue:#76c3ff;--yellow:#f4ce66;--green:#77e4a8;--purple:#c5a2fa;
  --read:Tahoma,"Liberation Sans",Arial,sans-serif;--number:'Barlow Semi Condensed',Arial,sans-serif;
  --rim:url('assets/hud-module-r3.png');
  --key-rim:url('assets/hud-key-r3.png');
}
html,body {font-family:var(--read);color:var(--white)}
button,input,select {font-family:var(--read);font-size:12px;letter-spacing:.025em}
button {border:1px solid #a3b3bd55;border-radius:3px;color:#dbe4e9;background:rgba(12,18,25,.66);box-shadow:inset 0 1px #e9f4ff10;text-shadow:0 1px 2px #000;transition:border-color .12s,background .12s}
button:hover {background:rgba(28,36,44,.8);border-color:#d1dae2aa;color:#fff}
button:active {background:rgba(4,9,15,.9);box-shadow:inset 0 1px 3px #000}
button:disabled {opacity:.48;filter:saturate(.3);cursor:not-allowed}
button.active,button[aria-pressed="true"] {color:var(--green);border-color:#77e4a88c;background:rgba(12,18,25,.72)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:2px solid #f9d782;outline-offset:2px}
[hidden] {display:none!important}
a {color:#b0d4ef}h1,h2,h3,.brand {font-family:"Arial Narrow","Liberation Sans Narrow",var(--read)}h1,h2 {font-weight:700;letter-spacing:-.02em}
.vignette {box-shadow:inset 0 0 80px #02060a40}
/* Open upper rail. Accent colors identify readings, never fill the registers. */
.topbar {background:rgba(5,10,16,.62);border-top:3px solid transparent;border-bottom:3px solid #b7c6d72b;box-shadow:0 2px 6px #0006}
.brand {min-width:210px;text-decoration:none}
.brand .command-logo {display:block;width:218px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 2px #000)}
.session {font:10px var(--number);letter-spacing:0;color:#b4bfc8}
.topbar .resource-deck {background:rgba(4,9,15,.45);border:2px solid #8ea2b52b;border-radius:3px;padding:1px 7px;grid-template-rows:29px 20px}
.resource-deck .resources>div {padding-left:8px;border-left:1px solid #8295a532}
.resource-deck .resources>div:first-child {border:0;padding-left:0}
.resource-deck .resources strong {font:700 20px/1 var(--number);letter-spacing:-.04em;color:#e1e7eb;text-shadow:0 1px 3px #000}
.resource-deck .resources strong span {font:11px var(--number);color:#a7b8c5}
.resource-deck .resources small {font:9px/1 var(--read);letter-spacing:.05em;color:#b1bec8}
.resource-deck .resources>div:nth-child(1) .resource-icon {color:var(--purple)}
.resource-deck .resources>div:nth-child(2) .resource-icon {color:var(--blue)}
.resource-deck .resources>div:nth-child(3) .resource-icon {color:var(--yellow)}
.resource-deck .resources>div:nth-child(4) .resource-icon {color:var(--green)}
.resource-deck .resources>div:nth-child(5) .resource-icon {color:var(--red)}
.raw-materials {border-color:#8798a32b}.raw-materials>strong,.raw-materials span {color:#a6b7c4}.raw-materials b {color:#d8dde1;font-family:var(--number)}
.status-dot {width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 4px #77e4a844}
.online-button,.online-button.connected {color:#cfb8ef;border-color:#bca0ee61;background:rgba(12,18,25,.66);font-size:10px}
.icon-button {background:rgba(9,15,22,.68);border-color:#91a9b45c;color:#cbd8e4}
#pause {color:var(--yellow)}
/* Unboxed world-side information remains easy to read over bright planets. */
.mission-panel,.sector {text-shadow:0 1px 3px #000,0 0 5px #000}
.mission-panel .eyebrow {color:#d5dce2;border-top:1px solid #9fb1bf55;padding-top:6px;font-size:11px;letter-spacing:.12em}
.mission-panel .eyebrow>span {color:#b8c8d4;font-family:var(--number)}
.mission-panel h1 {font-size:25px;color:#e5e8e5;margin:8px 0}
.objective {font-size:12px;color:#c1cad1;gap:8px;margin:12px 0}
.objective>b {font:11px var(--number);background:rgba(5,10,17,.7);border:1px solid #a0b2c263;color:#d5dfe7;box-shadow:none}
.objective.current>b {color:var(--yellow);border-color:#f4ce6688;background:rgba(5,10,17,.75)}
.objective.current {color:#e7e4d6}.objective.done,.objective.done>b {color:var(--green)}
.objective.done>b {background:rgba(5,10,17,.7);border-color:#77e4a866}
.incoming {color:#d6c9bb;border-color:#9caab43d;font:12px var(--number);margin-top:18px;padding-top:9px}
.incoming>i {border-radius:50%;background:var(--red)}
.sector strong {font:700 12px var(--number);letter-spacing:.06em;color:#d8e3eb}
.sector small {font:10px var(--read);letter-spacing:.04em;color:#bdcbd6}
.sector-marker {background:var(--blue);box-shadow:none}
.sector button {background:rgba(8,14,21,.67);color:#d7e3ea;border-color:#a1b4c263;font-size:11px;border-radius:3px}
.sector button span {color:var(--blue)}
.asset-shortcuts button {font-size:10px;color:#c5d1db;background:rgba(6,12,19,.7);border-color:#91a6b35b;border-radius:3px;box-shadow:none}
#selectBuilder {color:var(--yellow)}#selectCapital {color:var(--green)}#selectFacility {color:var(--purple)}
.right-tools {gap:5px;padding:5px;border:0;border-top:2px solid transparent;border-bottom:2px solid transparent;background:rgba(6,10,16,.35);border-radius:4px}
.right-tools button {color:#b9cbd9;background:rgba(8,14,22,.72);border:1px solid #acbcc65a;border-radius:3px;box-shadow:none}
.right-tools button.active {color:var(--green);border-color:#77e4a87d;background:rgba(8,14,22,.78)}
.right-tools button span {font-size:9px;letter-spacing:.04em}
/* Hull plates and compact key seats share a material, with separate native detail.
   The existing 2px layout border and every data aperture stay fixed. */
.bottom-ui {gap:8px}
.bottom-ui>section,.bottom-ui>.selection-panel,.bottom-ui>.command-panel {
  border:2px solid transparent;
  background:rgba(6,11,18,.68);background-clip:padding-box;
  border-radius:3px;clip-path:none;box-shadow:0 2px 7px #0004;backdrop-filter:none;
}
.bottom-ui>.selection-panel,.bottom-ui>.command-panel {position:relative;isolation:isolate}
@media(min-width:1101px) {.minimap-panel {position:relative;isolation:isolate}}
.bottom-ui>section::before {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border:1px solid transparent;
}
.panel-heading,.command-panel .panel-heading,.minimap-panel .panel-heading {background:rgba(12,19,27,.58);border-bottom:1px solid #9caeb73d;color:#cbd8e1;font:700 11px var(--read);letter-spacing:.08em;padding-left:15px}
.panel-heading>span:last-child,.command-panel .panel-heading>span:last-child {color:#b2c1cc;font:10px var(--number);letter-spacing:0}
#minimap {background:rgba(4,9,15,.76);border:3px solid transparent;outline:0}
.map-footer {background:rgba(8,14,21,.62);color:#adbfc9;font-size:9px;letter-spacing:.03em}
.map-footer>span {font:12px var(--number);color:#d2dbe1}
.selection-tabs {background:rgba(8,15,22,.45);border-bottom:1px solid #90a4b338;flex-basis:28px;padding-right:0}
.selection-tabs button {border:0;border-right:1px solid #94aaba32;border-radius:0;background:transparent;color:#b7c8d6;font-size:12px;letter-spacing:.025em;box-shadow:none}
.selection-tabs button[aria-selected="true"] {color:#e3ebf1;background:rgba(133,163,181,.08);box-shadow:inset 0 -2px var(--blue)}
.selection-content {gap:8px}
.selection-content .unit-portrait {width:72px;min-width:72px;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse,#8ca4b414,transparent 72%);align-self:stretch}
.selection-content .unit-portrait img {width:68px;height:78px;filter:drop-shadow(0 2px 3px #000)}
.unit-portrait>span {padding:3px 1px;background:rgba(4,10,16,.4);width:100%;text-align:center;color:#aebfcf;font:9px var(--number);letter-spacing:0}
.unit-details .eyebrow {font:10px var(--number);color:#afc7d7;letter-spacing:.03em}
.unit-details h2 {font-size:24px;color:#e1e9ef;line-height:1.08}
.unit-details>p {color:#bbcad4;font-size:12px}
/* Retain the accepted segmented hull / shield artwork. */
.vital {font:10px var(--read);letter-spacing:0;gap:6px}
.vital>span {color:#b9c9d5;width:44px}.vital>b {font:11px var(--number);color:#dce8ef;width:85px}
.vital>div {height:8px;border:1px solid #0b1114;outline:1px solid #70818c66;background:#080e16;box-shadow:inset 0 1px 2px #000}
.vital i {background:repeating-linear-gradient(90deg,transparent 0,transparent 9px,#0b141c99 9px,#0b141c99 11px),linear-gradient(#9bffae,#18c36b)}
.vital.shield i {background:repeating-linear-gradient(90deg,transparent 0,transparent 9px,#0b141c99 9px,#0b141c99 11px),linear-gradient(#90e5ff,#168bec)}
.crew-energy {color:#bccfc6;font:11px/1.3 var(--number)}
.subsystem-status {color:#aebfca;font-size:11px}.subsystem-status.damaged {color:var(--red);font-weight:700}
.weapon-output {color:#e1c5b1;font-size:12px}.cargo-hold {color:#dacdac;font:11px/1.35 var(--number)}
.queue {scrollbar-color:#8197a4 #101821}.work-item>span {color:#decb9e;font-size:11px}.work-item>div {border:1px solid #a0b5bd33;background:#080f17}
.work-item i {background:repeating-linear-gradient(90deg,#bca367 0,#bca367 8px,#554b34 8px,#554b34 10px)}
.selection-panel .fleet-settings {background:transparent}
.selection-panel .fleet-settings label {background:rgba(9,16,24,.52);border:1px solid #90a5b33d;border-radius:2px;color:#c0c9d7;font:10px var(--read)}
.selection-panel .fleet-settings select {border:1px solid #8b9eac47;border-radius:2px;background:rgba(5,11,19,.82);color:#d8e2e9;padding:2px 3px;font:12px var(--read)}
.selection-panel .fleet-settings #researchStatus,.selection-panel .fleet-settings .officer-status {color:#cabdd8;font:11px/1.3 var(--number)}
.command-pages {background:rgba(5,11,18,.5);border-bottom:1px solid #a3b5c138;color:#c0ccd5;font:11px var(--number)}
.command-pages button {color:#c1cfdb;border-color:#96acb649;background:rgba(9,16,24,.6);font-size:10px}

.command {--key:var(--blue);background:rgba(5,11,18,.38);border:1px solid #92a6b12e;border-radius:2px;clip-path:none;box-shadow:none;grid-template-columns:34px minmax(0,1fr);gap:3px}
.command[data-discipline="industry"] {--key:var(--yellow)}.command[data-discipline="science"] {--key:var(--purple)}
.command[data-discipline="support"] {--key:var(--green)}.command[data-discipline="combat"] {--key:var(--red)}
.command:hover {background:rgba(130,153,169,.11);border-color:#bed1e078;box-shadow:none}
.command::before {
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.72;
  border:1px solid transparent;
}
.command::after {content:"";position:absolute;right:4px;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--key);pointer-events:none}
.command img {width:32px;height:38px;filter:drop-shadow(0 2px 2px #000);background:none}
.command .text {font-size:12px;line-height:1.15;color:#e0e8ef;font-weight:700;text-shadow:0 1px 2px #000}
.command small {font:10px/1.2 var(--number);color:#b8c7d0;margin-top:3px}
.command .weapon-preview {color:#d3b4a4;font:10px/1.1 var(--read)}
.command .shortcut {font:9px var(--number);color:var(--key);background:rgba(4,9,15,.58);border:0;border-radius:0;padding:1px 3px;top:0;right:0}
.command.symbol {grid-template-columns:30px minmax(0,1fr)}.command.symbol>span:first-child {color:var(--key);font-size:26px;text-shadow:0 1px 2px #000}
.command:disabled {opacity:.5;border-style:dashed;filter:saturate(.4)}
.command-footer {background:rgba(8,15,22,.7);border-top:1px solid #96a9b341}
.command-footer button {background:transparent;border-radius:0;color:#c2d0d9;box-shadow:none;font-size:11px;letter-spacing:.015em}
.command-footer button+button {border-color:#95a8b038}.command-footer button:hover {background:rgba(126,150,169,.1);color:#fff}
#stop {color:#e3a5aa}#patrol {color:#a8d7bc}#attackMove {color:#dbc893}
.hintbar {background:rgba(5,10,16,.64);border-top:1px solid #a5b7c33b;color:#9db0be;font-size:10px}
.hintbar kbd {font:10px var(--number);background:rgba(6,13,21,.6);border:1px solid #96acba38;padding:1px 3px;color:#c4d7e5}
.hintbar #saveStatus {font:10px var(--number);color:#adc9b9;letter-spacing:0}
.toast {background:rgba(7,14,21,.85);border:1px solid #a2b4bd4f;border-bottom:2px solid #77e4a88c;color:#d5e0e7;font-size:13px;box-shadow:0 2px 6px #0005}
.toast.error {background:rgba(16,12,17,.9);border-color:#ff78865f;color:#f2b5ae}
.mode-banner {background:rgba(8,14,22,.86);border:1px solid #c5a2fa77;border-radius:3px;clip-path:none;color:#d8c7ec;font:13px var(--read);box-shadow:0 2px 7px #0006}
.mode-banner button {color:#ddcfaa;font-size:11px}
.performance-panel {background:rgba(5,11,18,.9);border:1px solid #90a4b355;border-radius:3px;color:#bdd3c5;font:12px/1.6 var(--number)}
/* Reading surfaces stay opaque enough for a manual. Same rim, same fixed aperture. */
dialog {border:2px solid transparent;border-radius:3px;clip-path:none;padding:28px 32px;background:rgba(7,13,20,.94);color:#dce5eb;box-shadow:0 20px 65px #000a;max-height:calc(100dvh - 36px);overflow:auto;scrollbar-color:#8195a3 #0c141d}
dialog::backdrop {background:#02060a91;backdrop-filter:none}
.briefing-logo {display:block;width:430px;max-width:90%;height:auto;margin:12px auto 8px;filter:drop-shadow(0 3px 4px #000)}
.dialog-eyebrow {min-height:44px;display:flex;align-items:center;padding-right:175px;padding-bottom:11px;background:none;border-bottom:1px solid #8ea4b33f;color:#b3c9d9;font:700 11px var(--number);letter-spacing:.1em}
.startup-dialog .dialog-eyebrow {min-height:0;display:block;padding-right:0;background:none}
.startup-dialog h2,dialog h2 {color:#e2e9ee;font-size:34px;margin:14px 0 12px}
dialog h3,.play-choices h3 {color:#d5dee6;font-family:var(--read);font-size:20px;font-weight:700;letter-spacing:0}
dialog p,.play-choices p,.expanded-help li {font:15px/1.65 var(--read);color:#c1cdd6}
dialog strong {color:#e1e6e9}.settings-note {color:#aebfcb!important;font-size:13px!important;line-height:1.55!important}.fineprint {color:#a7b7c2!important;font-size:12px!important;line-height:1.6!important}
.match-settings {padding:12px;background:rgba(3,9,15,.45);border:1px solid #91a7b13e;border-radius:3px;gap:12px}
.match-settings label,.field-label {color:#b6c8d5;font:11px var(--read);letter-spacing:.05em}
dialog select,dialog input:not([type=range]) {border:1px solid #96abb656;border-radius:2px;background:rgba(3,9,15,.86);color:#dde7ed;font:14px var(--read);padding:9px 10px;box-shadow:inset 0 1px 3px #0004}
.play-choices {gap:14px}.play-choices section,.play-choices section:nth-child(2) {border:1px solid #9eb3bd38;border-radius:3px;background:rgba(11,19,27,.55);padding:18px;box-shadow:none}
.choice-number {font:12px var(--number);color:#a9c8dd;letter-spacing:.04em;border-bottom:1px solid #93acbb3f;padding-bottom:7px;display:block}
.play-choices section:nth-child(2) .choice-number {color:#c5b4dc}.play-choices h3 {font-size:24px;margin:14px 0 8px}
.play-choices button,.menu-actions button {font-size:12px;min-height:42px}
.primary {color:#e8dfc7;border:1px solid #f4ce6699;border-radius:3px;background:rgba(15,22,28,.83);font-weight:700;box-shadow:inset 0 -2px #f4ce6644}
.primary:hover {color:#fff5dd;background:rgba(39,44,43,.85);border-color:#f4ce66}
.menu-actions button:nth-child(4) {color:#d7a5a4}
.help-index {border:1px solid #98aeb743;background:rgba(6,13,21,.96);padding:7px;gap:7px}
.help-index a {padding:7px;color:#c7b7e1;background:rgba(25,31,40,.66);border:1px solid #a5b7c23b;border-radius:2px;font-size:13px;text-decoration:none}
.expanded-help section {border-color:#91a5af3b;scroll-margin-top:12px}.expanded-help h3 {font-size:21px}
.fleet-guide article {background:rgba(9,17,24,.5);border:1px solid #94aab53b;border-radius:3px;box-shadow:none}
.fleet-guide h3 {font-size:19px;color:#ccdce6}.fleet-guide strong,.fleet-guide small {font-size:12px;color:#c8bfa7}.fleet-guide p {font-size:14px}
.expanded-help #closeHelp {background:#111c26;box-shadow:0 0 0 5px #09131b}
.room-heading,.server-list-heading {border-bottom:1px solid #91a7b33e;padding-bottom:9px}
.server-entry {border:1px solid #92a9b44c;border-radius:3px;background:rgba(10,19,28,.66)}
.server-entry[aria-pressed="true"] {background:rgba(18,29,35,.8);border-color:#77e4a899;box-shadow:none}
.server-entry strong {color:#dbe5eb}.server-entry span {color:#bbcad5}.server-entry small {color:#b4caba}
.host-join-code {border:1px solid #c5a2fa77;border-radius:3px;background:rgba(5,11,18,.6);box-shadow:none}
.host-join-code strong {font-family:var(--number);color:#d1b2f4}.host-join-code small {color:#aebfc9}
.field-label strong {font:700 23px var(--read);letter-spacing:.03em;color:#d3e0e9}
.lobby-players>div,.lobby-players>.player-slot {border:1px solid #93a9b449;border-radius:3px;clip-path:none;background:rgba(9,18,26,.55)}
.slot-actions label,.slot-actions .relationship,.slot-actions .pending-invite {color:#bfccd5}.slot-actions button,.slot-actions select {border-radius:2px;font-size:12px}
.lobby-status,#serverListStatus,#selectedGame {color:#b8ccbf!important;font-size:13px}.online-error {color:#f2a2ae!important}
.plain-close {color:#d3dce3;border-color:#91a8b348;background:rgba(12,20,28,.8);font-size:12px}
.volume-control,.graphics-control {color:#becdd6;font-size:14px}.volume-control input {accent-color:#a6c7db}
.graphics-control select {border-radius:2px;background:#08131b;color:#d7e3eb;font-family:var(--read)}#performanceToggle {color:#b9cbbf;border-color:#91a8b348;background:rgba(12,20,28,.8);font-size:12px}
.team-red {--cyan:#ff9e9f}
@media(max-width:1100px) {.topbar .brand {min-width:155px}.brand .command-logo {width:155px;height:46px}.resource-deck .resources strong {font-size:18px}.resource-deck .resources>div {padding-left:4px}.command {grid-template-columns:28px minmax(0,1fr)}.command img {width:26px}}
@media(max-width:850px) {.topbar .brand {min-width:145px}.brand .command-logo {width:145px;height:43px}.resource-deck .resources strong {font-size:18px}.raw-materials span {font-size:9px}.bottom-ui {gap:6px}.command .text {font-size:11px}.command small {font-size:10px}}
@media(max-width:700px) {.topbar .resource-deck {padding:1px 5px;grid-template-rows:26px 24px}.resource-deck .resources small {font-size:9px}.raw-materials>strong {font-size:8px}}
@media(max-width:620px) {
  .topbar .brand {min-width:142px}.brand .command-logo {width:142px;height:38px}.topbar .online-button {font-size:9px;padding:7px 5px}
  dialog {padding:20px 16px;width:calc(100% - 20px)}.startup-dialog h2,dialog h2 {font-size:28px}.mission-panel h1 {font-size:22px}
  .right-tools button span {font-size:8px}.play-choices section {padding:14px}.match-settings {padding:10px}
  .bottom-ui>.selection-panel {height:178px}.selection-content .vital>b {width:85px}.command .text {font-size:12px}.command {grid-template-columns:30px minmax(0,1fr)}.hintbar #saveStatus {font-size:9px}
  .dialog-eyebrow {background-size:115px auto;padding-right:125px;min-height:38px;font-size:10px}.startup-dialog .dialog-eyebrow {padding-right:0}
}
@media(max-width:620px) and (min-height:800px) {.right-tools {top:22%}}
@media(prefers-reduced-motion:reduce) {button {transition:none}.toast {animation:none}}
/* Shared milestone: preserve the other chat's footer/version markup. */
.hintbar {height:18px}

/* Atlas hardware. Overlays stay inside old bounds and never intercept input. */
.brand .command-logo,.briefing-logo {display:flex;flex-direction:column;justify-content:center;gap:2px}
.command-logo>img,.briefing-logo>img {display:block;width:100%;height:auto;min-height:0;object-fit:contain}
.logo-command {display:flex;align-items:center;justify-content:center;gap:1.6%;width:100%;height:27%}
.logo-command img {display:block;object-fit:contain;width:23%;height:100%}
.logo-command img:nth-child(2) {width:50%}
.logo-command img:last-child {transform:scaleX(-1)}
.briefing-logo {aspect-ratio:3/1}
.hintbar {position:absolute;isolation:isolate}
.hintbar::before {content:"";position:absolute;inset:0;pointer-events:none;border:1px solid transparent;opacity:.8;z-index:-1}
.selection-tabs button {position:relative}
.selection-tabs button::before,.asset-shortcuts button::before {content:"";position:absolute;inset:0;pointer-events:none;border:1px solid transparent;opacity:.5}
.asset-shortcuts button {position:relative}
.vital>div {position:relative}
.vital>div::after {content:"";position:absolute;inset:-1px;pointer-events:none;border:1px solid transparent;}
.unit-details h2 {text-shadow:0 1px 2px #000;border:0;background:var(--art-label) no-repeat left bottom/100% 2px}
/* R5: readable spacecraft hardware. Keep logo's approved centered assembly. */
@font-face {font-family:Oxanium;src:url('fonts/Oxanium.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face {font-family:'Exo 2';src:url('fonts/Exo2.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root {--read:'Barlow Semi Condensed',Arial,sans-serif;--heading:'Chakra Petch',Arial,sans-serif;--rim:linear-gradient(#a49a88,#455766);--key-rim:var(--rim);--panel-rail:10px}
html,body,button,input,select,textarea {font-family:var(--read)}
h1,h2,h3,.brand,.panel-heading,.play-choices h3 {font-family:var(--heading);letter-spacing:.025em;font-stretch:normal}
#startupDialog h2,dialog h2 {font-family:var(--heading);font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.25;letter-spacing:.035em;margin:22px 0 18px}
dialog p,.play-choices p,.expanded-help li {font:400 16px/1.7 var(--read);letter-spacing:.012em}
.play-choices h3 {font-size:26px;line-height:1.25;letter-spacing:.02em;margin:16px 0 10px}
.choice-number {letter-spacing:.14em;font-size:11px}
dialog {padding:32px 34px;background:#080f18f5}
.play-choices>section,.play-choices>section:nth-child(2),.match-settings {padding:18px;background:#0a131dcc}
/* Dedicated raw-cargo heading track: it must never collide with Carbon. */
.topbar {height:76px;border-bottom-width:4px}
.topbar .resource-deck {grid-template-rows:31px 24px;padding:4px 9px;border:2px solid #899da555;}
.resource-deck .resources {height:31px}
.raw-materials {grid-template-columns:minmax(100px,1.2fr) repeat(5,minmax(0,1fr));gap:10px;padding-top:3px;min-height:20px}
.raw-materials>strong {max-width:none;white-space:normal;font:600 10px/1.2 var(--read);letter-spacing:.04em}
.raw-materials>div {gap:5px;justify-content:space-between}
.raw-materials span {font:500 10px/1.2 var(--read)}
.raw-materials b {font:600 12px/1.2 var(--number)}
/* A large optical rim surrounds the controls, outside their content area. */
.bottom-ui {bottom:30px;gap:20px;left:24px;right:24px}
.bottom-ui>section,.bottom-ui>.selection-panel,.bottom-ui>.command-panel {position:relative;isolation:isolate;overflow:visible;border:2px solid #879ba666;box-shadow:0 3px 9px #0008;background:#07101be0}
.bottom-ui>section::before,.bottom-ui>.minimap-panel::before,.bottom-ui>.command-panel::before {inset:-8px;opacity:1;z-index:2}
.panel-heading,.command-panel .panel-heading,.minimap-panel .panel-heading {font-family:var(--heading);font-size:11px;letter-spacing:.04em}
.selection-content {padding:6px 9px}.unit-details h2 {background:none;font:600 22px/1.2 var(--heading);letter-spacing:.015em}
.unit-details>p {font:12px/1.35 var(--read)}
.selection-tabs button {font-family:var(--heading);font-size:11px}
.selection-tabs button::before,.asset-shortcuts button::before {opacity:1}
.selection-tabs button {padding:5px 10px}

.command {padding:7px 9px;overflow:hidden}
.command::before,.command:has(.weapon-preview)::before {inset:0;opacity:1}
.command .shortcut {top:4px;right:5px}.command::after {right:7px;bottom:6px;width:3px;height:3px}
.command .text {font-family:var(--read);line-height:1.2;letter-spacing:.01em}
.command .weapon-preview {font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.command-footer {border-bottom:3px solid transparent}
.command-footer button {padding:7px}
.right-tools {background:#060e18c9;padding:6px}
.asset-shortcuts button {padding:8px 11px}.icon-button {min-width:30px;min-height:30px}
.selection-panel .fleet-settings label {padding:8px}
.vital>div {height:12px;outline:0;border:0;background:#030a12}
.vital>div::after {inset:-2px -4px;}
.vital i {height:12px;background:repeating-linear-gradient(90deg,transparent 0 17px,#07121c88 17px 18px),linear-gradient(#b4ffd4,#36b776)}
.vital.shield i {background:repeating-linear-gradient(90deg,transparent 0 17px,#07121c88 17px 18px),linear-gradient(#b6edff,#2789da)}
.hintbar {height:18px;padding:0 14px;background:#070f19f2;font-size:10px;letter-spacing:0}
.hintbar::before {opacity:1}
.hintbar>span>span {margin:0 3px}
@media(max-width:1100px) {.raw-materials{grid-template-columns:90px repeat(5,minmax(0,1fr));gap:6px}.raw-materials>strong{font-size:9px}.raw-materials span{font-size:9px}.bottom-ui{left:18px;right:18px;gap:20px}}
@media(max-width:850px) {.raw-materials{grid-template-columns:76px repeat(5,minmax(0,1fr));gap:4px}.raw-materials>strong{font-size:9px;max-width:none}.raw-materials>div{gap:3px}.raw-materials span{font-size:8px}.raw-materials b{font-size:11px}}
@media(max-width:700px) {.topbar{height:118px}.topbar .resource-deck{grid-template-rows:29px 28px;padding:3px 7px}.raw-materials{grid-template-columns:70px repeat(5,minmax(0,1fr));gap:5px}.raw-materials>div{display:grid;gap:0;justify-items:center}.raw-materials span{font-size:9px}.raw-materials>strong{font-size:9px}.mission-panel{top:132px}.sector{top:131px}.asset-shortcuts{top:215px}}
@media(max-width:620px) {:root{--panel-rail:9px}.bottom-ui{bottom:30px;left:14px;right:14px;gap:20px}.bottom-ui>.selection-panel{height:188px}.selection-content{padding:6px 9px}.command,.command.symbol{grid-template-columns:30px minmax(0,1fr)}.command .text{font-size:12px}.unit-details h2{font-size:21px}dialog{padding:25px 23px}.play-choices>section,.play-choices>section:nth-child(2),.match-settings{padding:17px}.hintbar #saveStatus{font-size:8px}.hintbar #clientVersion{font-size:9px}.startup-dialog .briefing-logo{max-width:100%}}
/* Keep the thicker horizontal corner blocks outside the minimap/data aperture. */
.bottom-ui {column-gap:32px}
.bottom-ui>section::before,.bottom-ui>.minimap-panel::before,.bottom-ui>.command-panel::before {inset:-8px -14px}
@media(max-width:620px) {.bottom-ui{row-gap:20px;left:16px;right:16px}}
/* Preserve the established floating minimap at tablet widths. */
@media(max-width:1100px) {.bottom-ui>.minimap-panel{position:absolute}}
/* Tall enough for a wrapped ship name, resource costs and weapon readout on phones. */

/* Leave clearance above the taller phone command deck for every camera key. */
@media(max-width:620px) {.right-tools{top:128px;gap:3px;padding:4px}}
/* R6 / white hull armor; the world remains visible between individual instruments. */
:root {--panel-rail:14px;--rim:linear-gradient(#f2f5f7,#8c9ba6);--key-rim:var(--rim)}
.topbar,.hintbar,.right-tools,.mission-panel,.sector,.bottom-ui {background:none;border:0;box-shadow:none;backdrop-filter:none}
.topbar::before,.topbar::after,.hintbar::before {content:none}
.vignette {box-shadow:none}
.topbar .resource-deck,.topbar button,.right-tools button,.asset-shortcuts button {background:#08131e}
/* No page-wide or group-wide separator lines across the game. */
.mission-panel .eyebrow,.incoming {border-top:0}
.mission-panel .eyebrow {display:table;width:auto;background:#08131e;border:1px solid transparent;padding:7px 12px;letter-spacing:.1em}
.incoming {padding-top:2px}.sector-marker {visibility:hidden}
.sector>div {background:#08131e;border:1px solid transparent;padding:9px 13px}
.sector strong {font:600 13px/1.25 var(--heading);letter-spacing:.05em}
.sector small {font:10px/1.4 var(--read)}
.sector button {background:#08131e;border:1px solid transparent;min-height:44px;padding:9px 15px;font:600 11px var(--heading)}
.hintbar>span {background:#08131e;padding:1px 7px;max-height:18px;border:1px solid transparent;line-height:14px}
.hintbar>span:first-child {width:max-content;max-width:75%}
/* Thicker optical surrounds stay outside the unchanged content rectangles. */
.bottom-ui {bottom:34px;gap:28px 44px}
.bottom-ui>section::before,.bottom-ui>.minimap-panel::before,.bottom-ui>.command-panel::before {inset:-12px -20px;}
@media(max-width:1100px) {.bottom-ui{left:24px;right:24px}}
@media(max-width:620px) {
 :root{--panel-rail:12px}
 .bottom-ui{bottom:32px;left:18px;right:18px;gap:24px}
 .bottom-ui>section::before,.bottom-ui>.minimap-panel::before,.bottom-ui>.command-panel::before{inset:-10px -16px;}
 .right-tools{top:118px}
 .sector{right:68px}.sector>div{padding:0;border:0;background:none}
 .sector button{min-height:38px;padding:7px 10px;font-size:10px}
 .hintbar>span{padding:0 5px}
}
.topbar .online-button,.topbar .online-button.connected,.right-tools button.active {background:#08131e}

/* R7: one quiet bezel family. Square corner crops retain their proportions;
   straight rails repeat instead of stretching a complete illustrated panel. */
:root {--panel-rail:18px;--rim:none;--key-rim:none;--instrument-line:#a8b9c180}
dialog {border:2px solid transparent;border-image:var(--rim) 136 / 40px / 0 round;padding:32px 34px;background:#09131df5;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
/* A menu has one continuous surface. Sections are grouped by space and rules. */
.play-choices>section,.play-choices>section:nth-child(2),.match-settings,.fleet-guide article,.lobby-players>div,.lobby-players>.player-slot,.host-join-code,.server-entry,.help-index,.help-index a {background:transparent;box-shadow:none;border:0;border-image:none;clip-path:none}
.match-settings {border-block:1px solid #a8b9c13b;padding:18px 0}
.play-choices>section,.play-choices>section:nth-child(2) {padding:12px 8px 4px}
.play-choices>section+section {border-left:1px solid #a8b9c13b;padding-left:22px}
.fleet-guide article,.lobby-players>div,.server-entry {border-bottom:1px solid #a8b9c13b}
.server-entry[aria-pressed="true"] {background:#9eb9cd12}
dialog select,dialog input:not([type=range]) {background:#030b13a6;border:1px solid #a8b9c15e;box-shadow:none}
.bottom-ui>section,.bottom-ui>.selection-panel,.bottom-ui>.command-panel {border:2px solid transparent;background:transparent;box-shadow:none}
.bottom-ui>section::before,.bottom-ui>.minimap-panel::before,.bottom-ui>.command-panel::before {inset:-10px;border:1px solid transparent;border-image:var(--rim) 136 / var(--panel-rail) / 0 round;opacity:1}
.bottom-ui>section::after {content:"";position:absolute;inset:-5px;z-index:-1;pointer-events:none;background:#07121deb;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.panel-heading,.command-panel .panel-heading,.minimap-panel .panel-heading,.map-footer,.selection-tabs,.command-footer,.command-pages,.selection-panel .fleet-settings label {background:transparent;box-shadow:none}
#minimap {background:transparent}
.command {background:#b6c9d006;border:1px solid #a8b9c147;border-radius:3px}
.command::before,.command:has(.weapon-preview)::before,.selection-tabs button::before,.asset-shortcuts button::before,.vital>div::after {content:none}
.command:hover {background:#b6c9d014;border-color:#c9dbe0b3}
.right-tools button,.icon-button,.objective>b,.toast,.mode-banner,.performance-panel,.asset-shortcuts button,.online-button,.plain-close,.primary,.menu-actions button,.sector>div,.sector button,.mission-panel .eyebrow,.hintbar>span,.command-footer button {border:1px solid var(--instrument-line);border-image:none;box-shadow:inset 0 1px #e7edf324,0 1px 2px #0005;border-radius:3px;background:#09141fef}
.topbar .resource-deck {border:2px solid transparent;border-image:var(--rim) 136 / 24px / 0 round;background:#07121deb}
.right-tools button.active {border-color:#6dd1ae;color:#9fe4bf}
.primary {border-color:#b7a57d;color:#e7dfcb;background:#b7a57d0a;box-shadow:inset 0 -2px #b7a57d35}
.primary:hover {background:#b7a57d18;border-color:#d9c797}
.selection-tabs button[aria-selected="true"] {background:transparent}
.hintbar>span {border:0;border-top:1px solid #a8b9c147;box-shadow:none}
.sector>div {padding:8px 12px}.sector button {padding:8px 14px}
.mission-panel .eyebrow {border:0;border-bottom:1px solid #a8b9c147;background:transparent;padding:4px 0}
.objective>b {background:transparent;border-color:#a8b9c147}
.vital>div {height:8px;border:1px solid #a8b9c180;border-radius:1px;background:#030a12;overflow:hidden}
.vital i,.vital.shield i {height:100%;background:#63cc99}
.vital.shield i {background:#49afdb}
/* Reserve a lane beside the camera keys and below the sector controls. */
#notifications {top:158px;right:98px;max-width:min(320px,calc(100vw - 120px));max-height:calc(100dvh - 500px);overflow:hidden;z-index:8;align-items:stretch}
.toast {max-width:none;padding:10px 12px;font-size:13px;line-height:1.4;border-left:2px solid #7cbfa8;flex-shrink:0}
.toast.error {border-left-color:#e3a47b;background:#131820f5;color:#f1c4ad}
#notifications {overflow-y:auto;overflow-x:hidden;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#a8b9c180 #09141f;overscroll-behavior:contain}
dialog {background:#09131d}
.startup-dialog .briefing-logo {width:380px;max-width:90%;margin:8px auto}
.startup-dialog h2 {margin:16px 0}
.startup-dialog .play-choices {margin-top:12px;align-items:stretch}
.startup-dialog .play-choices>section,.startup-dialog .play-choices>section:nth-child(2) {padding:10px 8px 4px}
.startup-dialog .play-choices>section+section {padding-left:22px}
@media(max-width:700px) {#notifications{top:184px;right:78px;max-width:calc(100vw - 96px);max-height:150px}.play-choices>section+section{border-left:0;border-top:1px solid #a8b9c13b;padding:20px 8px 4px}}
@media(max-width:700px) {.toast{font-size:12px;line-height:1.35;padding:8px 10px}.startup-dialog .play-choices>section+section{padding:16px 8px 4px}}
@media(max-width:620px) {:root{--panel-rail:16px}.bottom-ui>section::before,.bottom-ui>.minimap-panel::before,.bottom-ui>.command-panel::before{inset:-8px}.bottom-ui{bottom:30px}dialog{padding:26px 24px;border-image-width:32px}.topbar .resource-deck{border-image-width:20px}}

/* Gunmetal shipboard instruments: steel fasteners and graphite, without gold trim. */
:root {--amber:#bcc7ce;--yellow:#c6cfd5;--instrument-line:#a5afb780}
dialog {background:#14191e}
.bottom-ui>section::after {background:#11171df5}
.topbar .resource-deck {background:#11171df2}
.right-tools button,.icon-button,.objective>b,.toast,.mode-banner,.performance-panel,.asset-shortcuts button,.online-button,.plain-close,.menu-actions button,.sector>div,.sector button,.command-footer button {background:#171d23f5}
.primary {color:#e0e6ea;border-color:#9aa6b1;background:#71808b16;box-shadow:inset 0 1px #ced6dc30,inset 0 -2px #090d11}
.primary:hover {color:#fff;background:#71808b30;border-color:#c7d1da}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline-color:#c2d5e1}
.objective.current>b {color:#d4dce2;border-color:#9caab480;background:#171d23}
.work-item>span,.fleet-guide strong,.fleet-guide small,.mode-banner button,#attackMove {color:#c0cbd3}
.work-item i {background:repeating-linear-gradient(90deg,#899ca9 0 8px,#34414b 8px 10px)}
.right-tools button.active {background:#171d23}
.toast.error {border-left-color:#d98d8d;color:#efc0c0;background:#241d20f5}
.command::after {content:none}

/* R8 / shipboard type system. Readouts and prose share legible narrow forms;
   headings use machined terminals without expanded tracking or fake monospace. */
@font-face {font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face {font-family:'Chakra Petch';src:url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:500 600;font-display:swap}
@font-face {font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
@font-face {font-family:'Barlow Semi Condensed';src:url('fonts/BarlowSemiCondensed-Regular.ttf') format('truetype');font-weight:100 400;font-display:swap}
@font-face {font-family:'Barlow Semi Condensed';src:url('fonts/BarlowSemiCondensed-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face {font-family:'Barlow Semi Condensed';src:url('fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root {--heading:'Chakra Petch',Arial,sans-serif;--read:'Barlow Semi Condensed',Arial,sans-serif;--number:var(--read)}
html,body,button,input,select,textarea,option {font-family:var(--read);font-variant-numeric:tabular-nums;font-synthesis:none}
/* Reserve actual border space so scrolled text cannot paint under the bezel. */
dialog {border-width:16px;padding:18px 20px}
h1,h2,h3,.eyebrow,.panel-heading,.selection-tabs button,.sector strong,.choice-number,.room-heading,.server-list-heading {font-family:var(--heading);font-weight:600;letter-spacing:.015em;line-height:1.25}
.mission-panel h1 {font:600 27px/1.2 var(--heading);letter-spacing:0}
dialog h2,#startupDialog h2 {font:600 clamp(27px,2.5vw,36px)/1.2 var(--heading);letter-spacing:0}
.play-choices h3,.expanded-help h3,.fleet-guide h3 {font-family:var(--heading);letter-spacing:0}
dialog p,.play-choices p,.expanded-help li,.fleet-guide p {font:400 17px/1.5 var(--read);letter-spacing:.005em}
.selection-content .unit-details h2 {font:600 22px/1.2 var(--heading);letter-spacing:0}
.unit-details>p,.crew-energy,.cargo-hold,.subsystem-status,.officer-status {font-family:var(--read);font-size:13px;line-height:1.3;letter-spacing:0}
.unit-details h2 {margin:0}
.unit-details>p {margin:2px 0 5px}
.vital {margin-top:5px}
.crew-energy {margin-top:5px}
.weapon-output {margin-top:5px;line-height:1.2}
.subsystem-status {margin-top:2px}
/* One scrollport, with a shared row for weapon and crew/energy readouts. */
.selection-content .unit-details {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:2px;max-height:none;overflow:visible;align-self:flex-start}
.selection-content .unit-details>* {grid-column:1/-1}
.selection-content .unit-details h2,.selection-content .unit-details>p,.selection-content .vital,.selection-content .crew-energy,.selection-content .weapon-output,.selection-content .subsystem-status {margin:0}
.selection-content .weapon-output {grid-column:1;grid-row:6}
.selection-content .crew-energy {grid-column:2;grid-row:6}
.online-button {inline-size:96px;min-inline-size:96px;max-inline-size:96px;flex:0 0 96px;white-space:nowrap;font-variant-numeric:tabular-nums}
.session,.sector small,.hintbar,.hintbar kbd,.hintbar #saveStatus,.hintbar #clientVersion,.map-footer,.map-footer span {font-family:var(--number);letter-spacing:0}
.sector small {font-size:12px;line-height:1.4}
.selection-panel .fleet-settings label {font:500 12px/1.3 var(--read)}
.selection-panel .fleet-settings select {font:400 14px/1.2 var(--read)}
.right-tools button span {font:500 10px/1.2 var(--read);letter-spacing:0}
.command .text {font:600 14px/1.15 var(--read);letter-spacing:0;overflow-wrap:normal;word-break:normal}
.command small,.command .weapon-preview {font:400 11px/1.2 var(--read);letter-spacing:0}
.command .shortcut {left:4px;right:auto;top:3px;font:500 9px/1 var(--number);padding:0;background:none}
.command img {align-self:center}
/* Costs and weapon figures get full-width tracks below the icon/name row. */


.command,.command.symbol {grid-template-columns:28px minmax(0,1fr);grid-template-rows:32px 12px 12px;gap:2px 5px;padding:6px 7px}
.command .text {display:contents}
.command img,.command.symbol>span:first-child {grid-column:1;grid-row:1;width:28px;height:30px;align-self:center}
.command .command-name {grid-column:2;grid-row:1;font:600 14px/1.1 var(--read);align-self:center}
.command small {grid-column:1/-1;grid-row:2;margin:0;font:400 11px/12px var(--read);white-space:nowrap;overflow:visible;text-overflow:clip}
.command .weapon-preview {grid-column:1/-1;grid-row:3;font:400 11px/12px var(--read);white-space:nowrap;overflow:visible;text-overflow:clip}
/* The text aperture begins inside the bezel, including the topmost numerals. */
.topbar {height:84px}
.topbar .resource-deck {grid-template-rows:30px 22px;padding:9px 14px;border-width:2px;min-width:0}
.resource-deck .resources {height:30px;align-items:center}
.resource-deck .resources strong {font:600 23px/1 var(--number);letter-spacing:0}
.resource-deck .resources small {font:500 10px/1.1 var(--read);letter-spacing:.02em}
.resource-deck .resources strong span {font:400 11px/1 var(--number)}
.raw-materials {min-height:22px;padding:2px 0 0;align-items:center;grid-template-columns:minmax(100px,1.2fr) repeat(5,minmax(0,1fr));gap:10px}
.raw-materials>strong {font:500 11px/1.1 var(--heading);letter-spacing:0}
.raw-materials span {font:400 11px/1.1 var(--read);letter-spacing:0}
.raw-materials b {font:600 13px/1.1 var(--number)}
/* Every standalone instrument uses the same neutral mechanical edge. */
.sector>div,.sector button,.right-tools button,.online-button,.icon-button,.mode-banner,.performance-panel,.menu-actions button,.plain-close,.server-entry,.host-join-code,.asset-shortcuts button,.primary {
 border:1px solid transparent;border-image:var(--rim) 136 / 12px / 0 round;border-radius:0;box-shadow:none;background:#151b21f5
}
.sector>div,.sector button {padding:9px 14px}
.icon-button {font-size:18px}.right-tools button {padding:5px;font-size:20px;line-height:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
/* Feedback is one instrument with neutral separators; no left-color cards. */
#notifications {padding:10px 12px;border:1px solid transparent;border-image:var(--rim) 136 / 18px / 0 round;background:#151b21f5;gap:0;scrollbar-gutter:stable}
#notifications:empty {display:none}
.toast,.toast.error {border:0;border-radius:0;background:none;box-shadow:none;padding:8px 0;font:400 15px/1.3 var(--read);animation:none;opacity:1;transform:none}
.toast+.toast {border-top:1px solid #abb7bf3d}
.toast.error {color:#efb5b5}
#notifications {overflow:hidden;display:flex;flex-direction:column}
#notifications:not(:has(.toast)) {display:none}
.notification-log {min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#a5afb780 transparent;display:flex;flex-direction:column}
.selection-content {min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#a5afb780 transparent}
@media(max-width:1450px) {
 .right-tools button{width:44px;height:40px;padding:3px;font-size:14px;line-height:16px;border-image-width:4px}
 .right-tools button span{font-size:9px;line-height:10px;letter-spacing:0;margin-top:0}
}
@media(max-width:1100px) {.raw-materials{grid-template-columns:94px repeat(5,minmax(0,1fr));gap:7px}}
@media(max-width:1100px) {.mission-panel h1{font-size:22px;line-height:1.1;margin:5px 0 0}}
@media(min-width:621px) and (max-width:1100px) {.bottom-ui>.selection-panel{height:190px}}
@media(max-width:700px) {
 .online-button{inline-size:80px;min-inline-size:80px;max-inline-size:80px;flex-basis:80px}
 dialog{border-width:13px;padding:15px 13px}
 .topbar{height:126px}.topbar .resource-deck{grid-template-rows:29px 25px;padding:8px 12px}
 .resource-deck .resources{height:29px}.resource-deck .resources strong{font-size:21px}
 .raw-materials{grid-template-columns:72px repeat(5,minmax(0,1fr));gap:6px;min-height:25px;padding-top:2px}
 .raw-materials>strong{font-size:10px}.raw-materials span{font-size:10px}.raw-materials b{font-size:12px}
 .sector{top:137px}.mission-panel{top:137px}.right-tools{top:132px}
 .sector button{padding:8px 12px;font:600 11px var(--heading)}
 .mission-panel{width:calc(100vw - 220px);min-width:150px;max-width:260px}
 .mission-panel h1{font-size:22px;line-height:1.1;margin:5px 0 0}.asset-shortcuts{top:215px}
 .right-tools button{padding:3px;font-size:14px;line-height:16px}
 .right-tools button span{font-size:9px;line-height:10px;margin-top:0}
 .right-tools button{height:36px}
 #notifications{padding:3px 8px;border-image-width:5px}
 .toast,.toast.error{font-size:13px;line-height:1.15;padding:2px 0}
 .command .text{font-size:14px}.command .weapon-preview{white-space:normal}
}

/* Current main: fixed crew-icon footprint. */
.resource-icon.crew img {display:block;width:26px;height:20px;object-fit:contain}

/* Shared outline personnel emblem for every crew command. */
.command.symbol .crew-command-icon {display:block;width:26px;height:20px;object-fit:contain;filter:none}

/* Mining now feeds the core currencies; no separate raw-cargo row. */
.topbar .resource-deck {grid-template-rows:auto;align-content:center}

/* Blocked builds remain inspectable and explain the requirement on click or hover. */
.command.blocked {opacity:.7}

#developerConsole {position:fixed;left:16px;bottom:40px;z-index:20;max-height:calc(100vh - 120px);overflow-y:auto;pointer-events:auto;width:min(340px,calc(100vw - 36px));padding:10px;background:rgba(5,16,28,.94);border:1px solid #6ce4ff66;border-radius:5px;color:#d6eef7;font:16px "Barlow Semi Condensed",sans-serif;box-shadow:0 8px 24px #0006}
#developerConsole[hidden] {display:none}
#developerConsole label {display:block;color:#6ce4ff;font-size:13px;letter-spacing:1px}
#developerOutput {margin:6px 0;overflow-wrap:anywhere}
#developerForm {display:flex;gap:6px;align-items:center}
#developerInput {min-width:0;width:100%;padding:5px;background:#020b13;color:#fff;border:1px solid #6ce4ff55;font:16px monospace}

/* Production previews share the selection header, above the hull and shield rows. */
.selection-content .unit-details {grid-template-columns:minmax(100px,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto auto auto auto auto auto}
.selection-content #selectionTag {grid-column:1;grid-row:1}
.selection-content #selectionName {grid-column:1;grid-row:2;font-size:clamp(16px,1.3vw,22px)}
.selection-content #selectionStatus {grid-column:1;grid-row:3;font:13px/1.2 var(--read)}
.selection-content #queue.visual-queue {grid-column:2;grid-row:2/4;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;max-height:none;min-width:0;margin:0;padding:0 0 4px;align-items:start}
.selection-content #queue[hidden] {display:none}
.selection-content .vital {grid-row:4}
.selection-content .vital.shield {grid-row:5}
.selection-content .weapon-output {grid-row:6}.selection-content .crew-energy {grid-row:6}
.visual-queue>.queue-card {position:relative;flex:0 0 84px;width:84px;height:auto;min-height:94px;min-width:84px;border:1px solid #82b5c56b;background:#0b1620;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.queue-preview {position:relative;display:block;width:100%;height:72px;border:0;padding:3px;background:radial-gradient(ellipse,#27465866,transparent);cursor:pointer}
.queue-preview img {width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}
.queue-state {position:absolute;bottom:2px;right:4px;font:600 11px var(--number);color:#e6f3ff;text-shadow:0 1px 2px #000}
.queue-card.paused {border-color:#e0b55c}.queue-card.paused img {opacity:.55}.queue-card.paused .queue-state {color:#ffd681}
.queue-card progress {display:block;width:100%;height:4px;border:0;accent-color:#7bc5d8}.queue-card progress::-webkit-progress-bar{background:#18272e}.queue-card progress::-webkit-progress-value{background:#7bc5d8}
.queue-owner {display:block;padding:2px 3px;font:600 9px var(--number);color:#a9c1ce;white-space:nowrap;overflow:hidden}
.queue-actions {position:absolute;top:3px;right:3px;display:flex;gap:3px;opacity:0;pointer-events:none}
.queue-card:hover .queue-actions,.queue-card:focus-within .queue-actions {opacity:1;pointer-events:auto}
.queue-actions button {width:29px;height:28px;padding:0;border:1px solid #a5c7d3;background:#10232ff2;color:#dff5ff;font-size:18px;cursor:pointer}.queue-actions button:last-child{color:#ffac94;border-color:#df846a}
.queue-preview:focus-visible,.queue-actions button:focus-visible {outline:2px solid #f5d685;outline-offset:-2px}
@media(pointer:coarse){.queue-actions{opacity:1;pointer-events:auto}}
@media(max-width:620px){.visual-queue>.queue-card{flex-basis:76px;width:76px;min-width:76px;min-height:88px}.queue-preview{height:66px}}

/* Mission outcomes use the same gunmetal instrument as the command deck.
   Keep the existing nonmodal footprint and leave the map interactive. */
.result-hud {
 --outcome-top:88px;
 position:fixed;z-index:15;top:var(--outcome-top);left:50%;transform:translateX(-50%);
 width:min(520px,calc(100vw - 40px));max-height:calc(100dvh - var(--outcome-top) - 18px);overflow:auto;
 border:12px solid var(--instrument-line);border-image:var(--rim) 136 / 24px / 0 round;
 border-radius:0;padding:8px 12px 10px;background:#14191ef5;box-shadow:none;
 color:var(--white);font-family:var(--read);scrollbar-width:thin;scrollbar-color:#a5afb780 transparent;
}
.result-hud[hidden] {display:none}
.result-hud .dialog-eyebrow {
 min-height:0;display:block;margin:0;padding:0 0 7px;border-bottom:1px solid #a8b9c13b;
 color:#bdcbd5;font:600 11px/1.25 var(--heading);letter-spacing:.04em;
}
.result-hud h2 {margin:7px 0 5px;color:#e2e9ee;font:600 clamp(22px,2vw,25px)/1.2 var(--heading);letter-spacing:0}
.result-hud p {margin:0 0 10px;color:#c1cdd6;font:400 15px/1.35 var(--read);letter-spacing:0;overflow-wrap:break-word}
.result-hud .menu-actions {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;margin:0}
.result-hud .menu-actions button {min-width:0;min-height:42px;padding:8px 10px;font:600 13px/1.2 var(--read);letter-spacing:.015em}
.result-hud .menu-actions button:hover {background:#303b44;color:#fff}
.result-hud .menu-actions button:active {background:#0d1319}
@media(max-width:1150px){.result-hud {--outcome-top:140px}}
@media(max-width:480px){.result-hud {padding-inline:8px}.result-hud p{font-size:14px}.result-hud .menu-actions button{font-size:12px;padding-inline:8px}}
/* Shipboard audio shares the SRC instrument bezel and machined heading forms. */
:root {--shortcut-height:30px}
.asset-shortcuts button {height:var(--shortcut-height);padding:4px 11px}
.mission-panel .music-hud {pointer-events:auto;position:relative;margin-top:10px;width:38px;max-width:calc(100vw - 32px);border:1px solid transparent;border-image:var(--rim) 136 / 12px / 0 round;border-radius:0;background:#151b21f5;color:#d5e0e9;text-shadow:none;box-shadow:none}
.mission-panel .music-hud[open] {width:280px}
.music-hud summary {display:flex;align-items:center;gap:7px;width:100%;height:30px;padding:4px 9px;cursor:pointer;list-style:none;font:600 10px var(--read);letter-spacing:.08em;border-radius:0}
.music-hud summary::-webkit-details-marker {display:none}.music-hud summary:hover {background:#ffffff0b}
.music-hud summary:focus-visible {outline:2px solid var(--cyan);outline-offset:3px}
.music-note {font-size:17px;line-height:1;color:#a9bed0}.music-label {flex:1}
.music-hud:not([open]) summary {justify-content:center;padding-inline:6px}
.music-hud:not([open]) .music-label,.music-hud:not([open]) .music-deck {display:none}
.music-deck {padding:2px 12px 12px;border-top:1px solid #8baac821}
.music-heading {display:flex;align-items:center;justify-content:space-between;min-height:27px;color:#8fa8bb;font:10px var(--read);letter-spacing:.09em}
.music-hud strong {display:block;font:500 14px/1.4 var(--read);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e1e9ef}
.music-transport {display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 12px}
.music-hud button {display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:1px solid transparent;border-image:var(--rim) 136 / 10px / 0 round;border-radius:0;background:#171d23f5;color:#b9cbd9;box-shadow:none;font:18px/1 var(--read);letter-spacing:0}
.music-hud button:hover {color:#ecf8ff;background:#ffffff0d}
.music-hud #musicPlay {width:38px;height:32px;background:#283541;color:#d8efff;font-size:20px}
.music-hud #musicPlay:hover {background:#a9d7f031}
.music-hud #musicClose {width:24px;height:24px;font-size:19px;border:0;border-image:none;background:transparent}
.music-volume {display:flex;align-items:center;gap:9px;color:#99afc0;font:11px var(--read)}
.music-volume input {flex:1;min-width:0;width:100%;height:16px;margin:0;accent-color:#a9cfe5;cursor:pointer}
.music-volume output {width:4ch;text-align:right;font-variant-numeric:tabular-nums}
#resumeMatchChoices[hidden],#newMatchChoices[hidden],#newMatchSettings[hidden],#newMatchNote[hidden] {display:none}


/* Stable multiplayer instrument spacing: role, labels and changing values. */
.hintbar .connection-readout{display:inline-flex;align-items:center;gap:14px;flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.hintbar .connection-readout>span{margin:0}
.hintbar .connection-role:not([hidden]){display:inline-block;inline-size:7ch;flex:0 0 7ch;font-weight:700;color:#8ee8ff;text-align:left}
.hintbar #saveStatus.sync-status{display:inline-grid;grid-template-columns:13ch 10ch 6ch 10ch;column-gap:12px;align-items:baseline;inline-size:max-content;font-variant-numeric:tabular-nums}
.hintbar .sync-label{display:block;text-align:left;overflow:hidden;text-overflow:ellipsis}
.hintbar .sync-value{display:block;text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hintbar>span:first-child{min-width:0;flex:1 1 auto;overflow:hidden}
@media(max-width:620px){.hintbar .connection-readout{gap:8px;font-size:8px}.hintbar #saveStatus.sync-status{column-gap:8px}}

/* Route and lifecycle use fixed tracks beside the existing ping instrument. */
.hintbar .connection-status:not([hidden]){display:inline-grid;grid-template-columns:13ch 14ch;column-gap:8px;flex:0 0 auto;font:500 9px/14px var(--number);letter-spacing:0;text-align:left}
.hintbar .connection-status>span{margin:0;white-space:nowrap}
.hintbar #connectionTransport{color:#c5d1db;font-weight:700}
.hintbar .connection-status[data-tone="good"] #connectionState{color:#adc9b9}
.hintbar .connection-status[data-tone="waiting"] #connectionState{color:#ffc779}
.hintbar .connection-status[data-tone="error"] #connectionState{color:#ff9298}
.hintbar .connection-status:focus-visible{outline:1px solid #c2d5e1;outline-offset:2px}
.hintbar #clientVersion::before{content:'·';margin-right:8px}
@media(max-width:720px){
 .hintbar .connection-readout{gap:6px}
 .hintbar .connection-status:not([hidden]){font-size:8px;column-gap:5px}
 .hintbar #saveStatus.sync-status{grid-template-columns:13ch 8ch 5ch 8ch;column-gap:5px}
}
@media(max-width:560px){
 .hintbar{height:32px}
 .hintbar .connection-readout{display:grid;grid-template-columns:7ch minmax(0,1fr) auto;column-gap:8px;row-gap:0;inline-size:100%;height:32px;max-height:32px;align-content:center}
 .hintbar .connection-role{grid-column:1;grid-row:1}
 .hintbar .connection-status{grid-column:2;grid-row:1}
 .hintbar #clientVersion{grid-column:3;grid-row:1;font-size:8px}
 .hintbar #clientVersion::before{content:none}
 .hintbar #saveStatus{grid-column:1/-1;grid-row:2;justify-content:end;text-align:right}
}

/* Provider choice belongs to the existing multiplayer instrument. */
.hosting-controls{padding:14px 0 20px;margin-bottom:16px;border-bottom:1px solid #8c9aa547}
.hosting-controls .match-settings{margin:0 0 12px}.hosting-controls .settings-note{margin:8px 0 0}
.provider-link{display:inline-block;margin-top:14px;padding:12px 18px;border:1px solid #8c9aa5;background:#242e3a;color:#e1e7eb;font-family:'Chakra Petch',sans-serif;font-size:15px;text-decoration:none}
.provider-link:focus-visible{outline:2px solid #f1c75f;outline-offset:3px}
#hostJoinCode{font-family:'Chakra Petch',sans-serif;font-size:20px;letter-spacing:.12em;color:#f1c75f;margin:10px 0}

#onlineDialog #joinCode::placeholder{letter-spacing:0;font-size:14px}

/* Shared match chat occupies the left-side clearance above the developer console. */
#matchChat {position:fixed;z-index:19;width:min(340px,calc(100vw - 36px));display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;padding:12px;background:#151b21f5;color:#d5e0e9;border:1px solid #73808b;border-image:var(--rim) 136 / 18px / 0 round;border-radius:0;pointer-events:auto;font:15px/1.35 var(--read);opacity:1;transition:opacity .2s ease}
#matchChat.chat-idle:not(.chat-collapsed) {opacity:.5}
.chat-heading {display:flex;align-items:center;gap:8px;flex:none;min-height:24px;font:600 11px/1.2 var(--heading);letter-spacing:.04em}
#chatToggle {margin-left:auto;min-height:24px;flex:none;padding:3px 6px;border:1px solid #8494a750;border-radius:0;background:#242e3a;color:#d5e0e9;box-shadow:none;font:600 10px/1.2 var(--heading);letter-spacing:.02em}
#chatToggle:hover {background:#35424e;color:#fff}
#chatToggle:focus-visible,#chatInput:focus-visible {outline:2px solid var(--cyan);outline-offset:2px}
#chatUnread {color:#f1c75f;white-space:nowrap;font:600 11px/1.2 var(--read);font-variant-numeric:tabular-nums}
#chatHistory {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overflow-wrap:anywhere}
.chat-message {padding:3px 0;text-shadow:0 1px 2px #000}
#chatForm {flex:none;margin:0}
#chatInput {display:block;width:100%;min-width:0;padding:7px 6px;background:#080d13c9;color:#e1e7eb;border:1px solid #7b9cb370;border-radius:0;font:15px var(--read)}
.chat-hint {font:11px var(--read);color:#acb9c4;flex:none}
#matchChat.chat-collapsed {padding-block:8px}
@media(prefers-reduced-motion:reduce){#matchChat{transition:none}}
.color-preview {flex-wrap:wrap;gap:10px}
/* Native fleet-strip anchor; column layout is defined with the shared combat controls below. */
.selection-panel>.unit-shortcuts {position:absolute;left:-2px;right:-2px;bottom:calc(100% + 14px);pointer-events:auto;z-index:3}
.unit-shortcuts button {min-width:0;height:30px;padding:4px 3px;white-space:nowrap;font:600 clamp(9px,.8vw,12px)/1 var(--number);letter-spacing:.02em;color:#c5d1db;background:#151b21f5;border:1px solid transparent;border-image:var(--rim) 136 / 12px / 0 round;border-radius:0;box-shadow:none}
@media(max-width:620px){}

/* Fleet confirmations use the same gunmetal frame and controls as the game menus. */
.unit-action-dialog {width:min(480px,calc(100vw - 32px));max-width:none}
.unit-action-dialog h2 {font:600 27px/1.2 var(--heading);margin:12px 0}
.unit-action-dialog .unit-action-selection {padding:9px 11px;background:#ffffff06;border-left:2px solid var(--cyan);font:600 15px/1.4 var(--read);overflow-wrap:anywhere}
.unit-action-dialog .menu-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.unit-action-dialog .menu-actions button {min-width:0;font-size:12px;padding:10px 6px}
.unit-action-dialog[data-action="selfdestruct"] #confirmUnitAction {color:#ffc2c2;border-color:#ff78866b;background:#56242b80}
@media(max-width:480px){.unit-action-dialog {padding:24px 20px}.unit-action-dialog h2{font-size:24px}}

/* One fixed-height command carousel for every selection state. */
.bottom-ui {--command-panel-height:232px}
.bottom-ui>.minimap-panel {height:var(--command-panel-height)}
.bottom-ui>.minimap-panel #minimap {height:calc(var(--command-panel-height) - 64px);min-height:0}
.bottom-ui>.command-panel {container-type:inline-size;height:var(--command-panel-height);min-height:0;max-height:none;position:relative;overflow:visible;padding:4px}
.command-carousel {display:grid;grid-template-columns:26px minmax(0,1fr) 26px;gap:4px;height:100%;min-height:0}
.command-nav-side {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;width:100%;height:100%;padding:3px 0;border:1px solid #9baab440;background:#18212b88;color:#dce8ef}
.command-nav-side>span {font:400 32px/1 var(--read)}
.command-nav-side kbd {font:600 12px/1 var(--number);color:#bdd1de}
.command-nav-side:hover:not(:disabled) {background:#354653;color:#fff}
.command-nav-side:focus-visible {outline:2px solid var(--cyan);outline-offset:-2px}
.command-nav-side:disabled {opacity:.4}
.command-viewport {position:relative;min-width:0;min-height:0;height:100%;overflow:hidden}
.command-track {display:flex;min-width:0;height:100%;padding:0;gap:0;overflow:visible;will-change:transform}
.command-page {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));flex:0 0 100%;width:100%;height:100%;min-width:0;min-height:0;gap:4px;overflow:hidden}
.command-slot {position:relative;min-width:0;min-height:0;height:100%}
.command-slot .command {position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:4px;width:100%;height:100%;min-width:0;min-height:0;padding:3px 4px;text-align:left;overflow:hidden;background:#141d25;color:#e0e8ef}
.command-slot .command>img,.command-slot .command>.command-symbol {position:static;grid-column:1;grid-row:1;width:44px;height:44px;min-width:44px;object-fit:contain}
.command-slot .command>.command-symbol {display:flex;align-items:center;justify-content:center;color:var(--key);font-size:30px;line-height:1}
.command-slot .command .crew-command-icon,.command-slot .command .addon-command-icon {width:40px;height:40px;object-fit:contain}
.command-slot .command .text {grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:center;gap:1px;height:auto;min-height:0;min-width:0;width:auto}
.command-slot .command .command-name {display:block;grid-column:1;grid-row:1;min-height:0;padding:0;align-self:center;font:600 15px/1.05 var(--read);letter-spacing:0;white-space:normal;overflow-wrap:normal}
.command-slot .command .command-costs {display:flex;grid-column:1;grid-row:2;flex-wrap:wrap;gap:0 5px;min-width:0;margin:0;color:#c1d0da;font:400 12px/13px var(--number);white-space:normal}
.command-slot .command .command-cost {white-space:nowrap}
.command-slot .command .shortcut {position:absolute;left:2px;top:2px;right:auto;z-index:1;padding:1px 2px;color:#e4edf4;background:#080e16e6;font:600 10px/1 var(--number);letter-spacing:0}
.command-slot .command::after {content:none}
.command-slot .command-status {position:absolute;left:32px;top:2px;color:#cce5df;background:#0b141ee8;font:600 12px/1 var(--read);pointer-events:none}
.command-slot .command:disabled,.command-slot .command[aria-disabled="true"] {opacity:.65;cursor:default;border-style:dashed}
.command-info-icon {position:absolute;overflow:clip;left:30px;bottom:2px;z-index:2;display:grid;place-content:center;width:22px;height:22px;min-width:22px;padding:0;border:1px solid #92acbc70;border-radius:50%;background:#0b141ef2;color:#b5d5e7;font:600 16px/1 var(--read);letter-spacing:0}
.command-info-icon[aria-label*="Unavailable"] {color:#efc687;border-color:#cba1648c}
.command-info-icon:focus-visible {outline:2px solid var(--cyan);outline-offset:-2px}
.command-info {position:absolute;inset:0;padding:12px 8px;background:#0c151fee;color:#c6d3dd;font:400 15px/1.4 var(--read);overflow-wrap:anywhere}
.command-info:focus-visible {outline:2px solid var(--cyan);outline-offset:-2px}
.command-announcement {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.command-requirement-tooltip {max-width:min(350px,calc(100vw - 16px));white-space:pre-line;color:#dfeaf1}
@media(max-width:1150px){.bottom-ui {--command-panel-height:210px}.command-slot .command .command-name {font-size:14px}.command-slot .command .command-costs {font-size:12px;line-height:12px}}
@media(min-width:701px) and (max-width:800px){.bottom-ui {grid-template-columns:minmax(0,1fr) 430px}.bottom-ui>.selection-panel {grid-column:1;grid-row:1}.bottom-ui>.command-panel {grid-column:2;grid-row:1}}
@media(max-height:500px) and (min-width:621px){.bottom-ui {--command-panel-height:232px}}
@media(prefers-reduced-motion:reduce){.command-track,.command-page {animation:none!important;transition:none!important}}

/* Roster edge controls remain usable beside the fleet instrument's vertical pan. */
.bottom-ui>.selection-panel {padding:4px}
.selection-carousel {display:grid;grid-template-columns:26px minmax(0,1fr) 26px;gap:4px;flex:1;min-width:0;min-height:0;height:100%}
.selection-viewport {position:relative;isolation:isolate;min-width:0;min-height:0;height:100%;overflow:hidden}
.selection-viewport>.selection-content {position:absolute;inset:0;display:flex;align-items:flex-start;min-width:0;min-height:0;width:100%;height:100%;margin:0;padding:4px 5px 8px;overflow:auto;overscroll-behavior:contain}
.selection-viewport>#fleetControlsPane.fleet-settings {position:absolute;inset:0;display:block;min-width:0;min-height:0;width:100%;height:100%;margin:0;padding:6px 5px 8px;overflow:auto;overscroll-behavior:contain}
.selection-viewport>[aria-hidden=true] {pointer-events:none}
.selection-viewport>.selection-content,.selection-viewport>#fleetControlsPane {will-change:transform}
@media(prefers-reduced-motion:reduce){.selection-viewport>.selection-content,.selection-viewport>#fleetControlsPane {animation:none!important;transition:none!important;will-change:auto}}

/* SRC grouped fleet instruments */
.selection-panel {container-type:inline-size;container-name:selection}
#fleetControlsPane.fleet-settings {position:static;inset:auto;display:block;width:auto;height:calc(100% - 28px);padding:6px 10px 10px;overflow:auto;background:transparent;border:0;box-shadow:none;scrollbar-width:thin}
#fleetControlsPane[hidden] {display:none}
.fleet-control-groups {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 12px}
.fleet-scroll-hint {display:none}
.fleet-control-group {min-width:0;margin:0;padding:0;border:0}
.fleet-control-group[data-setting=formation] {grid-column:span 2}
.fleet-control-group legend {display:flex;align-items:center;gap:7px;width:100%;padding:0 0 3px;font:600 11px/1.25 var(--heading);color:#c3d2dc;letter-spacing:.035em}
.fleet-mixed {font:600 10px var(--read);color:#e4ce91}.fleet-mixed[hidden] {display:none}
.fleet-control-options {display:flex;gap:3px}
.fleet-setting {display:flex;flex:1;min-width:0;min-height:42px;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2px 3px;border:1px solid #667580;background:#171f27;color:#c7d4dd;font:500 12px/1.15 var(--read);letter-spacing:0;cursor:pointer}
.fleet-setting .fleet-symbol {font:500 19px/1 var(--heading);height:20px}
.fleet-setting:hover {background:#33434f;border-color:#b9cbd8;color:#fff}
.fleet-setting[aria-pressed=true] {background:#2d404b;border-color:#b9d6e6;box-shadow:inset 0 -3px #b9d6e6;color:#fff}
.fleet-setting[aria-pressed=true] .fleet-symbol::after {content:'·';position:absolute;margin-left:3px;font-size:14px}
.fleet-setting:focus-visible {outline:2px solid #f4d999;outline-offset:1px}
.fleet-control-group:disabled .fleet-setting {opacity:.45;cursor:default}
#fleetControlsPane #researchStatus,#fleetControlsPane #officerStatus {display:inline-block;margin:4px 8px 0 0;font:400 12px var(--read);color:#aabcc9}
.fleet-control-tooltip {position:fixed;z-index:45;max-width:min(310px,calc(100vw - 16px));padding:10px 12px;border:6px solid transparent;border-image:var(--rim) 136 / 12px / 0 round;background:#151b21fa;color:#e1e8ee;pointer-events:none;font:400 15px/1.3 var(--read);letter-spacing:0;box-shadow:0 3px 15px #0008}
.fleet-control-tooltip[hidden] {display:none}
#space:focus {outline:none}
@media(max-width:500px){.fleet-control-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fleet-control-group[data-setting=formation]{grid-column:1 / -1}.fleet-control-group[data-setting=formationMode]{grid-column:1 / -1}.fleet-setting{min-height:44px}.resources>div{padding-inline:4px}.resources strong{font-size:19px}.resources .resource-icon{width:16px;font-size:15px}.resources strong span{font-size:11px}}
@container selection (max-width:500px){.fleet-control-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fleet-control-group[data-setting=formation],.fleet-control-group[data-setting=formationMode]{grid-column:1 / -1}.fleet-scroll-hint{display:block;margin:0 0 7px;color:#b4c9d6;font:400 12px var(--read)}.fleet-setting{min-height:44px}}
/* Tablet portrait: retain usable fleet choices inside the narrower Z/C instrument. */
@container selection (max-width:350px){.fleet-control-groups{grid-template-columns:minmax(0,1fr);gap:9px}.fleet-control-group[data-setting]{grid-column:1}.fleet-control-group legend{flex-wrap:wrap;gap:3px 6px}.fleet-control-shortcut{white-space:nowrap}.fleet-control-group[data-setting=formation] .fleet-control-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:1000px){.topbar{height:126px;flex-wrap:wrap;align-content:center;gap:5px}.topbar .brand{margin-right:auto}.topbar .resource-deck{order:2;flex:0 0 100%;width:100%;max-width:none;margin:0;height:48px;padding:7px 12px}.resource-deck .resources strong{font-size:20px}.sector,.mission-panel{top:137px}}
@media(max-width:700px){.topbar .resource-deck{height:95px}.resource-deck .resources strong{font-size:21px}}
@media(max-width:500px){.resource-deck .resources strong{font-size:19px}}
@media(max-height:500px) and (min-width:701px){.bottom-ui>.selection-panel{max-height:calc(100dvh - 166px)}}


/* Resource instrument: artwork and two readable rows inside the metal bezel. */
.topbar .resource-deck {height:62px;padding:13px 16px;align-content:center;min-width:0}
.resource-deck .resources {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:auto;gap:0;width:100%;margin:0;align-items:center}
.resource-deck .resources>div {min-width:0;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:7px;row-gap:2px;padding:0 10px;align-items:center}
.resource-deck .resources>div:first-child {padding-left:0}
.resource-deck .resources .resource-icon {grid-row:1 / 3;display:grid;place-items:center;width:30px;height:30px}
.resource-deck .resources .resource-icon img {display:block;width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
.resource-deck .resources .resource-icon.gold img {filter:sepia(1) saturate(2) drop-shadow(0 1px 2px #000)}
.resource-deck .resources .resource-icon.crew img {height:23px}
.resource-deck .resources strong {font:600 clamp(18px,1.6vw,23px)/1 var(--number);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0}
.resource-deck .resources strong span {font-size:12px}
.resource-deck .resources small {margin:0;font:500 11px/1.1 var(--read);letter-spacing:.02em;white-space:nowrap}
@media(max-width:1150px){.resource-deck .resources>div{padding-inline:6px;grid-template-columns:26px minmax(0,1fr);gap:2px 5px}.resource-deck .resources .resource-icon,.resource-deck .resources .resource-icon img{width:26px;height:26px}}
@media(min-width:701px) and (max-width:1000px){.topbar .resource-deck{height:62px;padding:13px 16px}}
@media(max-width:700px){.topbar{height:158px}.topbar .resource-deck{height:94px;padding:12px 14px}.resource-deck .resources{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:9px}.resource-deck .resources>div{padding-inline:5px}.resource-deck .resources>div:nth-child(4){border-left:0;padding-left:0}.resource-deck .resources strong{font-size:18px}.sector,.mission-panel{top:170px}}

@media(max-width:700px){.resource-deck .resources>div{padding-inline:2px;grid-template-columns:24px minmax(0,1fr);column-gap:4px}.resource-deck .resources .resource-icon,.resource-deck .resources .resource-icon img{width:24px;height:24px}}

/* SRC production circles: one actual hull per stable queue job. */
.selection-content #queue.visual-queue {gap:8px;padding:2px 2px 5px;align-items:flex-start}
.visual-queue>.queue-card {--queue-color:#91d4e9;flex:0 0 80px;width:80px;min-width:80px;min-height:96px;border:0;background:transparent;clip-path:none}
.visual-queue .queue-preview {display:block;width:76px;height:76px;margin:0 auto;padding:7px;border:1px solid #8999a666;border-radius:50%;background:conic-gradient(from 0deg,var(--queue-color) var(--queue-progress,0%),#2b3741 0);box-shadow:0 2px 4px #0008;isolation:isolate}
.visual-queue .queue-preview::before {content:'';position:absolute;inset:5px;z-index:-1;border:1px solid #64727f6b;border-radius:50%;background:radial-gradient(circle at 50% 35%,#23313b,#10171e 72%)}
.visual-queue .queue-preview img {display:block;width:100%;height:100%;padding:1px 1px 8px;object-fit:contain;filter:drop-shadow(0 2px 2px #000)}
.visual-queue .queue-state {bottom:9px;left:0;right:0;text-align:center;font:600 11px/1 var(--number);color:#e0edf5;text-shadow:0 1px 3px #000,0 1px 3px #000}
.visual-queue .queue-owner {padding:5px 0 0;text-align:center;font:500 10px/1.2 var(--read);color:#aebfcb;overflow:visible}
.visual-queue .queue-card.paused {--queue-color:#e6be75}
.visual-queue .queue-card.paused .queue-state {color:#f6d391}
.visual-queue .queue-card.waiting:not(.paused) {--queue-color:#7c919e}
.visual-queue .queue-card.waiting img {opacity:.65}
.visual-queue .queue-card.waiting .queue-state {color:#b6c7d3}
.visual-queue .queue-actions {z-index:2;top:0;right:-2px;gap:2px}
.visual-queue .queue-actions button {width:30px;height:30px;border-radius:0;background:#16212bf5}
.visual-queue .queue-preview:focus-visible {outline:2px solid #f5d685;outline-offset:2px}
.visual-queue .queue-card .queue-progress {position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;clip-path:inset(50%);overflow:hidden}
@media(max-width:620px){.visual-queue>.queue-card{flex-basis:74px;width:74px;min-width:74px;min-height:91px}.visual-queue .queue-preview{width:70px;height:70px}}
@media(pointer:coarse){.visual-queue>.queue-card{padding-top:29px}.visual-queue .queue-actions{top:0;right:5px}}

/* Original equipment artwork stays readable in refit/research controls. */
.command-panel .command.symbol .addon-command-icon{display:block;width:44px;height:54px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}

/* Long per-facility queues retain their footprint and expose all jobs by scrolling. */
.selection-content .queue-navigation {grid-column:2;grid-row:1;display:flex;align-items:center;gap:5px;min-width:0;min-height:23px;margin-bottom:3px;font:600 10px/1.2 var(--heading);color:#c5d1db}
.queue-navigation[hidden] {display:none}
.queue-count {flex:1;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.queue-navigation button {flex:none;width:26px;height:23px;padding:0;border:1px solid #8494a750;border-radius:0;background:#242e3a;color:#e1e8ee;font:600 19px/1 var(--read);box-shadow:none}
.queue-navigation button:disabled {opacity:.35;cursor:default}
.queue-navigation button:focus-visible,#queue:focus-visible {outline:2px solid var(--cyan);outline-offset:-2px}
#queue.visual-queue {scrollbar-width:thin;scrollbar-color:#7d8b97 #10171e;overscroll-behavior:contain;scroll-snap-type:x proximity}
.visual-queue>.queue-card {scroll-snap-align:start}
/* Keep hull and shield readings visible beneath the compact queue track. */
.selection-content .visual-queue>.queue-card {min-height:70px}
.selection-content .queue-preview {width:50px;height:50px;padding:5px}
.selection-content .queue-preview::before {inset:4px}
.selection-content .queue-preview img {padding-bottom:6px}
.selection-content .queue-state {bottom:6px;font-size:10px}
/* Keep the elapsed expedition timer stable as its digits change. */
#clock {font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}

/* Approved complete Star Rangers wordmark replaces the legacy split title. */
.command-logo>img,.briefing-logo>img {width:100%;height:100%;object-fit:contain}
.brand .command-logo,.startup-dialog .briefing-logo {display:block}
.startup-dialog .briefing-logo {aspect-ratio:2132 / 409;height:auto}

/* Preserve the approved broad metal rails after normalizing large source caps. */
:root {--panel-rail:36px}
@media(max-width:620px){:root{--panel-rail:32px}}

/* A queued selection keeps weapon/crew readings clear of the lower bezel. */
.selection-content:has(#queue.visual-queue:not([hidden])) {padding-top:4px;padding-bottom:8px}
.selection-content:has(#queue.visual-queue:not([hidden])) .unit-details {row-gap:1px}
.selection-content .queue-navigation {margin-bottom:0}
.selection-content #queue.visual-queue {padding:1px 2px 2px}
.selection-content .visual-queue>.queue-card {min-height:64px}
.selection-content .visual-queue .queue-owner {padding-top:2px}

/* Fleet navigation and combat orders share one native control strip. */
.selection-panel>.unit-shortcuts {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.unit-shortcuts button {display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:30px;padding:3px 4px;font:600 10px/1 var(--read);letter-spacing:0}
.unit-shortcuts .shortcut-symbol {flex:none;font-size:14px}
.unit-shortcuts .shortcut-label {min-width:0;white-space:nowrap}
#selectBuilder {order:1}#selectStation {order:2}#selectYard {order:3}#selectFacility {order:4}#selectCapital {order:5}#stop {order:6}#patrol {order:7}#attackMove {order:8}
@container selection (max-width:600px){.selection-panel>.unit-shortcuts {grid-template-columns:repeat(4,minmax(0,1fr));top:auto}.unit-shortcuts button {min-height:32px}.unit-shortcuts .shortcut-label {font-size:10px}}
@container selection (max-width:350px){.unit-shortcuts button {flex-direction:column;gap:0;padding:3px 1px}.unit-shortcuts .shortcut-symbol {font-size:12px}.unit-shortcuts .shortcut-label {line-height:1}.selection-content {overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7d8b97 #10171e}}

/* Match controls belong to the command menu; the resource instrument keeps its footprint. */
.topbar #onlineButton {display:none!important}
#menuDialog [hidden],#multiplayerContent [hidden] {display:none!important}
.match-menu-heading {display:flex;align-items:center;justify-content:space-between;gap:16px}
.match-menu-heading h2 {margin:10px 0 18px}
#closeMatchMenu {font-size:22px;min-width:32px;min-height:32px;padding:0 8px}
#menuDialog>.dialog-eyebrow {display:flex;justify-content:space-between;gap:20px}
#matchMenuRole {color:#8bcbd7;letter-spacing:.03em;text-align:right;overflow-wrap:anywhere}
#menuDialog.multiplayer-command-menu {width:940px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px)}
.match-menu-tabs {display:flex;gap:7px;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid #61758150}
.match-menu-tabs button {padding:10px 14px;font:600 13px var(--read);letter-spacing:.02em}
.match-menu-tabs button.active {background:#263b45;border-color:#7ac3d4}
.match-menu-multiplayer {display:grid;grid-template-columns:235px minmax(0,1fr);gap:26px}
#menuSessionControls {padding-right:23px;border-right:1px solid #61758140;min-width:0}
#menuSessionControls h3 {font:600 12px var(--heading);letter-spacing:.05em;margin:0 0 14px}
#menuSessionControls button {display:block;width:100%;min-height:38px;padding:9px 8px;margin:0 0 10px;font:600 13px var(--read);letter-spacing:.02em}
#menuSessionControls .match-settings {display:grid;grid-template-columns:1fr;gap:14px;padding:20px 0 14px;margin:0}
#menuSessionControls .match-settings label {font-size:11px}
#menuSessionControls select {width:100%;font-size:14px;min-height:36px}
#menuSessionControls #quitSession {margin-top:24px;color:#e3b5ad}
#menuMultiplayerBody {min-width:0}
#menuMultiplayerBody #multiplayerContent>.dialog-eyebrow,#menuMultiplayerBody #multiplayerContent>h2,#menuMultiplayerBody #multiplayerContent>p:first-of-type,#menuMultiplayerBody .hosting-controls,#menuMultiplayerBody .commander-fields,#menuMultiplayerBody #closeOnline,#menuMultiplayerBody #multiplayerContent>.fineprint,#menuMultiplayerBody #leaveRoom {display:none}
#menuMultiplayerBody .room-heading {margin:0;min-width:0}
#menuMultiplayerBody .room-heading .field-label {margin:0;font-size:11px}
#menuMultiplayerBody .field-label strong {font:600 20px var(--read);letter-spacing:0;overflow-wrap:anywhere}
#menuMultiplayerBody #inviteLink {font-size:12px;padding:8px;margin-top:10px}
#menuMultiplayerBody .lobby-players {grid-template-columns:minmax(0,1fr);margin:14px 0;gap:0}
#menuMultiplayerBody .lobby-players>.player-slot {display:block;min-height:0;padding:9px 0;border-bottom:1px solid #61758140}
#menuMultiplayerBody .slot-heading {display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#menuMultiplayerBody .slot-heading strong {font:600 17px var(--read);overflow-wrap:anywhere}
#menuMultiplayerBody .slot-heading small {margin-left:auto;font-size:10px}
#menuMultiplayerBody .slot-actions {display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:7px 0 0 18px}
#menuMultiplayerBody .slot-actions button,#menuMultiplayerBody .slot-actions select,#menuMultiplayerBody #joinRequests button {min-height:32px;padding:7px 10px;font:600 12px var(--read);letter-spacing:.01em}
#menuMultiplayerBody .slot-actions .relationship {font-size:10px;letter-spacing:.02em;margin:0;width:auto;order:2}
#menuMultiplayerBody #joinRequests h3 {font:600 12px var(--heading);margin:18px 0 10px}
#menuMultiplayerBody #joinRequests .player-slot {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
#menuMultiplayerBody #joinRequests strong {flex:1;overflow-wrap:anywhere}
#menuMultiplayerBody .lobby-status {font:13px/1.45 var(--read)!important;margin:10px 0}
#menuMultiplayerBody .menu-actions {margin:12px 0 0}
#menuMultiplayerBody #launchRoom {min-height:38px;padding:9px 14px;font:600 13px var(--read)}
#menuMultiplayerBody .online-error:empty {display:none}
@media(max-width:1000px){#menuDialog.multiplayer-command-menu{padding:14px 16px}.match-menu-multiplayer{grid-template-columns:200px minmax(0,1fr);gap:18px}#menuSessionControls{padding-right:16px}}
@media(max-width:800px){.match-menu-multiplayer{grid-template-columns:175px minmax(0,1fr);gap:14px}#menuDialog.multiplayer-command-menu{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}#menuMultiplayerBody .slot-heading small{margin-left:18px;width:100%}}
#menuMultiplayerBody .slot-actions label {font-size:11px}

/* One upper rail: System View stays immediately left of the resource instrument. */
.topbar{--hud-top-offset:26px;align-items:flex-start;padding-top:var(--hud-top-offset)}
.topbar>.icon-button,.topbar>.hud-resource-group{align-self:flex-start;margin-top:0;margin-bottom:0}
.topbar .hud-session-group{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.topbar .hud-session-group>.session{display:flex;min-width:0;max-width:220px}
.topbar .hud-session-group>#performancePanel{position:static;inset:auto;margin:0;min-height:30px;padding:5px 10px;white-space:nowrap;flex:0 0 auto;pointer-events:none;border-image-width:7px;font:12px/18px var(--number)}
.topbar .hud-resource-group{display:flex;align-items:flex-start;gap:12px;flex:1 1 0;max-width:994px;min-width:0;margin-left:auto}
.topbar .hud-resource-group>.resource-deck{order:0;flex:1 1 0;width:auto;min-width:0;margin:0;align-self:flex-start}
.topbar .sector.system-view-control{position:static;top:auto;left:auto;right:auto;transform:none;translate:none;z-index:5;display:flex;flex:0 0 auto;max-width:none;margin:0}
.sector.system-view-control button {margin:0;height:30px;min-height:30px;padding:4px 14px;white-space:nowrap}
@media(min-width:1001px){
 .topbar .resource-deck {align-self:flex-start;margin-bottom:0;height:48px;padding:5px 16px}
 .resource-deck .resources strong {font-size:21px}
 .resource-deck .resources .resource-icon,.resource-deck .resources .resource-icon img {width:26px;height:26px}
}

@media(max-width:1000px){
 .topbar{--hud-top-offset:10px;align-content:flex-start}
 .topbar .hud-resource-group{order:2;flex:0 0 100%;max-width:none;margin-left:0;gap:8px}
 .topbar .hud-resource-group>.resource-deck{padding-inline:12px}
 .topbar .sector.system-view-control button{padding-inline:10px;font-size:10px}
}

/* Build refusals use the shared notification instrument and stay readable after the pulse. */
#notifications:has(.build-failure){top:104px;max-width:min(365px,calc(100vw - 120px));max-height:min(420px,calc(100dvh - 380px));}
.toast.build-failure{padding:10px 2px;overflow-wrap:anywhere;}
.failure-heading{color:#ff7b83;font:600 14px/1.3 var(--heading);letter-spacing:.035em;margin-bottom:7px;}
.failure-unit{display:block;color:#e3edf3;font:600 18px/1.3 var(--read);margin-bottom:6px;}
.failure-reason{margin:0;color:#ff8790;font:600 17px/1.45 var(--read);animation:build-reason-pulse 1.2s ease-in-out 3;}
@keyframes build-reason-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:1100px){.failure-unit{font-size:16px}.failure-reason{font-size:15px}}
@media(prefers-reduced-motion:reduce){.failure-reason{animation:none}}

/* Approved in-game command menu: larger framed actions and solo-style graphics control. */

#menuDialog{width:790px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);padding:32px 40px;background:linear-gradient(145deg,#17212b,#0b121b 65%);overflow-y:auto}#menuDialog::backdrop{background:#02070db0}#menuDialog .match-menu-heading{align-items:center;gap:22px;margin:12px 0 21px}#menuDialog .match-menu-heading h2{font:500 31px/1.25 var(--heading);letter-spacing:-.025em;margin:0;color:#edf3f6}#menuDialog>.dialog-eyebrow{font:12px var(--heading);letter-spacing:.13em;color:#88a6b8}#menuGamePane>p:first-child{font:16px/1.5 var(--read);color:#a5b6c2;margin:0 0 17px}#matchSettingsSummary{font:13px var(--heading);letter-spacing:.04em;color:#91b9c9;border-block:1px solid #8397a133;padding:12px 0;margin:0 0 21px}
#menuDialog .menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 21px}#menuDialog .menu-actions button,#closeMatchMenu,#performanceToggle{border:1px solid transparent;border-image:var(--rim) 136 / 12px / 0 round;border-radius:0;background:linear-gradient(110deg,#1d303d,#0d1923);color:#d9e7ee;box-shadow:inset 0 1px #edf4f312,0 2px 6px #0004;font:500 16px var(--heading);letter-spacing:.035em}#menuDialog .menu-actions button{min-height:53px;padding:12px 16px}#menuDialog #resume{background:linear-gradient(110deg,#294451,#152a37);color:#e6f6ff}#menuDialog #quitSession{color:#e0a59d}#closeMatchMenu{width:48px;height:48px;min-width:48px;padding:0;display:grid;place-items:center;font:400 27px var(--heading);line-height:1}#menuDialog #performanceToggle{min-height:52px;padding:12px 18px;width:100%;font:500 16px var(--heading)!important;color:#d9e7ee;margin-top:5px}
#menuDialog .volume-control{font:500 14px var(--heading);letter-spacing:.07em;gap:20px;padding:16px 0;border-top:1px solid #8397a133;color:#b9c9d4}#menuDialog .volume-control span{width:46px;text-align:right;font:17px var(--read);color:#d9e7ee}#menuDialog .volume-control input{accent-color:#91c7da}#menuDialog .graphics-control{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:8px 0 22px;font:500 14px var(--heading);letter-spacing:.07em;color:#b9c9d4}#menuDialog .graphics-control select{width:330px;height:49px;max-width:65%;padding:0 15px;font:500 17px var(--read);letter-spacing:normal;background:linear-gradient(#18232c,#101a23);color:#dde7ed;border:1px solid #8c9ea451;border-radius:3px;box-shadow:none}#menuDialog .graphics-control option{background:#101b25;color:#dde7ed}#menuDialog .fineprint{font:13px/1.4 var(--read);color:#7f98a8;margin:18px 0 0;text-align:center}#menuDialog :is(button,select):focus-visible{outline:2px solid #9ddff1;outline-offset:3px}

#menuDialog .match-menu-tabs button{font-size:16px}#menuDialog #menuSessionControls button{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:850px){#menuDialog{padding:26px 28px}#menuDialog .match-menu-heading h2{font-size:27px}#menuDialog .menu-actions{gap:10px}#menuDialog .menu-actions button{font-size:15px;padding:11px 12px}}
@media(max-height:800px){#menuDialog{padding:24px 30px}#menuDialog .match-menu-heading{margin:8px 0 16px}#menuDialog .volume-control{padding:12px 0}#menuDialog .menu-actions{margin-bottom:16px}}

/* Approved graphics option list: same rows, checkmark and hover state as solo setup. */
#menuDialog .graphics-picker{position:relative;width:330px;max-width:65%;font:500 17px var(--read);letter-spacing:normal}
#menuDialog .graphics-picker-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:49px;padding:0 15px;border:1px solid #8c9ea451;border-radius:3px;background:linear-gradient(#18232c,#101a23);color:#dde7ed;box-shadow:none;font:500 17px var(--read);letter-spacing:normal}
#menuDialog .graphics-picker-trigger b{font-weight:400;font-size:18px;color:#9fb3bf}
#menuDialog .graphics-picker-options{position:absolute;left:0;right:0;z-index:5;padding:5px;background:#101b25;border:1px solid #8ca5b178;border-radius:3px;box-shadow:0 14px 30px #0009;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#menuDialog .graphics-picker[data-placement="above"] .graphics-picker-options{bottom:calc(100% + 5px)}#menuDialog .graphics-picker[data-placement="below"] .graphics-picker-options{top:calc(100% + 5px)}
#menuDialog .graphics-picker-options button{display:flex;align-items:center;justify-content:space-between;min-height:42px;width:100%;padding:9px 12px;border:1px solid transparent;border-radius:2px;background:transparent;box-shadow:none;text-align:left;color:#d9e7ee;font:16px var(--read);letter-spacing:normal}
#menuDialog .graphics-picker-options [aria-selected="true"]{background:#6ce4ff15}#menuDialog .graphics-picker-options i{font-style:normal;color:#6ce4ff;font-size:17px;visibility:hidden}#menuDialog .graphics-picker-options [aria-selected="true"] i{visibility:visible}
#menuDialog .graphics-picker-options button:is(:hover,:focus-visible){background:linear-gradient(90deg,#365567,#243d4e);border-color:#86c7df80;color:#f2f8fb;box-shadow:inset 0 1px #d1efff12}

/* In-match admission stays in the existing notification instrument until reviewed. */
.join-request-list{flex-shrink:0;max-height:100%;overflow-y:auto;scrollbar-width:thin}.join-request-list:empty{display:none}
#notifications:has(.join-request){overflow-y:auto}.join-request-list+.notification-log{flex-shrink:0}
#notifications .join-request{padding:10px 0;font:17px/1.4 var(--read)}.join-request+.join-request{border-top:1px solid #8397a133}
.join-request .request-label{font:500 12px var(--heading);letter-spacing:.08em;color:#ff8585;margin-bottom:10px}.join-request .request-label:before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#ff8585;box-shadow:0 0 6px #ff85854d}
.join-request p{color:#ffaaaa;margin:0 0 10px;overflow-wrap:anywhere}.join-request strong{color:#ff9999;font-weight:600}.join-request small{display:block;color:#a7bbc8;font:14px/1.4 var(--read);margin-bottom:14px}.join-request .request-error{color:#ffaaaa;margin:8px 0 0}.join-request .request-error:empty{display:none}
.request-actions{display:flex;gap:10px}.request-actions button{flex:1;min-width:0;min-height:46px;padding:10px 12px;border:1px solid transparent;border-image:var(--rim) 136 / 11px / 0 round;border-radius:0;background:linear-gradient(110deg,#243c4c,#112431);color:#e3edf2;box-shadow:inset 0 1px #edf4f312,0 3px 8px #0004;font:500 15px var(--heading);letter-spacing:.05em}.request-actions button:last-child{background:linear-gradient(110deg,#262b31,#141d25);color:#c4ced5}.request-actions button:disabled{opacity:.5;cursor:wait}
/* Match report: the approved results instrument, with separate scroll tracks. */
#resultDialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);right:auto;bottom:auto;z-index:20;width:1120px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);padding:30px 40px 26px;border:1px solid transparent;border-image:var(--rim) 136 / 21px / 0 round;background:rgba(11,17,23,.97);display:flex;flex-direction:column;overflow:auto;text-align:left;letter-spacing:0}
#resultDialog[hidden]{display:none}.report-top{display:flex;justify-content:space-between;gap:16px;align-items:center;color:#9db1be;font:12px var(--heading);letter-spacing:.06em;flex-shrink:0}.report-outcome{display:flex;justify-content:space-between;align-items:center;margin:17px 0 23px;gap:30px;flex-shrink:0}.report-outcome>div{flex:1;min-width:0}#resultDialog h2{font:600 54px/1.1 var(--heading);margin:0 0 12px;color:#e8f6f0}#resultDialog #resultText{font:20px/1.45 var(--read);color:#b9cbd6;margin:0;overflow-wrap:anywhere}.report-outcome>img{width:142px;height:142px;object-fit:contain}.player-colored{font:inherit}
.opponent-tags{display:flex;flex-wrap:wrap;gap:12px 17px;margin-top:16px}.opponent-tags>span{font:12px var(--heading);overflow-wrap:anywhere}.opponent-tags small{display:block;color:#738c9d;font:10px var(--read);margin-top:4px}
.report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #94acbb39;border-bottom:1px solid #94acbb39;padding:16px 0;gap:15px;flex-shrink:0}.report-metrics>div+div{border-left:1px solid #94acbb28;padding-left:24px}.report-metrics span{display:block;font:11px var(--heading);color:#96aebb;letter-spacing:.04em}.report-metrics strong{display:block;font:500 33px/1.2 var(--read);font-variant-numeric:tabular-nums;color:#e7eff4;margin-top:6px;overflow-wrap:anywhere}
.report-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px;margin:23px 0 24px;min-height:100px;overflow:auto;scrollbar-width:thin}.report-timeline{border-left:1px solid #94acbb39;padding-left:32px}#resultDialog h3{font:500 13px var(--heading);letter-spacing:.06em;margin:0 0 15px;color:#cedde5}#resultDialog h4{font:500 11px var(--heading);letter-spacing:.05em;margin:0 0 7px;color:#809aa9}.stat-group+.stat-group{margin-top:17px}.stat-group dl{margin:0}.stat-group dl>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:5px 0;font:16px var(--read);color:#b6c7d2}.stat-group dd{margin:0;color:#e4edf3;font-variant-numeric:tabular-nums;flex-shrink:0}.timeline-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.timeline-heading>span{font:10px var(--heading);color:#6e8797;white-space:nowrap}.report-timeline ol{list-style:none;margin:0;padding:0}.report-timeline li{display:flex;gap:15px;position:relative;padding:0 0 13px}.report-timeline li:last-child{padding-bottom:0}.report-timeline li time{flex:0 0 58px;color:#8da8ba;font:14px var(--read);font-variant-numeric:tabular-nums;padding-top:2px}.report-timeline li>div{border-left:1px solid #68849466;padding-left:15px;position:relative}.report-timeline li>div:before{content:'';position:absolute;left:-3px;top:6px;width:5px;height:5px;background:#a6c4d3;border-radius:50%}.report-timeline li strong{display:block;font:500 15px/1.2 var(--read);color:#d6e3eb}.report-timeline li div>span{display:block;font:13px/1.3 var(--read);color:#829eaf;margin-top:3px;overflow-wrap:anywhere}.report-timeline .player-colored{display:inline;font:inherit;margin:0}
#resultDialog footer{border-top:1px solid #94acbb39;padding-top:20px;flex-shrink:0}#resultDialog .menu-actions{display:grid;grid-template-columns:1fr 1.3fr .9fr;gap:15px;margin:0}#resultDialog .menu-actions button{min-height:53px;font:500 16px var(--heading);letter-spacing:.02em;padding:12px 18px}#resultDialog #resultQuit{color:#edb5ac}.report-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font:12px var(--read);color:#819aa9;margin-top:14px}#resultDialog .report-note{font:13px/1.3 var(--read);color:#a4b9c6;margin:10px 0 0}#resultQuitStatus:empty{display:none}#resultDialog[data-outcome="defeat"] h2{color:#efa8a6}
@media(max-width:850px){#resultDialog{padding:24px}.report-outcome{gap:15px}.report-outcome>img{width:90px;height:90px}#resultDialog h2{font-size:40px}#resultDialog #resultText{font-size:18px}.report-columns{grid-template-columns:1fr;gap:24px}.report-timeline{border-left:0;border-top:1px solid #94acbb39;padding:20px 0 0}.report-metrics>div+div{padding-left:12px}.report-metrics strong{font-size:27px}#resultDialog .menu-actions{gap:8px}#resultDialog .menu-actions button{font-size:14px;padding:10px}.report-columns{min-height:120px}}
@media(max-height:800px){#resultDialog{padding:24px 30px}.report-outcome{margin:10px 0 15px}.report-outcome>img{width:80px;height:80px}#resultDialog h2{font-size:36px}#resultDialog #resultText{font-size:18px}.report-metrics{padding:10px 0}.report-columns{margin:15px 0}#resultDialog footer{padding-top:14px}}

#resultDialog{background-color:rgba(11,17,23,.97)!important}

/* Unpadded ping readings retain their fixed track and use the existing status palette. */
.hintbar .sync-value[data-tone="good"]{color:#8ed6a4;font-weight:700}
.hintbar .sync-value[data-tone="waiting"]{color:#ffc779;font-weight:700}
.hintbar .sync-value[data-tone="error"]{color:#ff9298;font-weight:700}
.hintbar .sync-value[data-tone="neutral"]{color:inherit}

/* Command entity usage is a sixth instrument, alongside the existing currencies and supply. */
.resource-deck .resources {grid-template-columns:repeat(4,minmax(0,1fr)) minmax(104px,1.15fr) minmax(88px,1fr)}
#entityStatus {outline-offset:4px}
#entityStatus:focus-visible {outline:2px solid var(--cyan)}
#entityStatus[data-state="near"] strong,#entityStatus[data-state="near"] strong span {color:var(--amber)}
#entityStatus[data-state="full"] strong,#entityStatus[data-state="full"] strong span {color:var(--red)}
@media(min-width:1001px) and (max-width:1500px){
 .topbar{height:126px;flex-wrap:wrap;align-content:flex-start;gap:5px;--hud-top-offset:10px}
 .topbar .brand{margin-right:auto}
 .topbar .hud-resource-group{order:2;flex:0 0 100%;max-width:none;margin-left:0;gap:8px}
 .topbar .hud-resource-group>.resource-deck{padding-inline:16px}
 .sector,.mission-panel{top:137px}
}
@media(min-width:701px) and (max-width:1000px){
 .topbar .hud-resource-group>.resource-deck{height:100px;padding:12px 16px}
 .resource-deck .resources{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
 .resource-deck .resources>div:nth-child(4){border-left:0;padding-left:0}
 .topbar{height:174px}.sector,.mission-panel{top:185px}
}
@media(max-width:700px){.resource-deck .resources{grid-template-columns:repeat(3,minmax(0,1fr))}}