:root {
  color-scheme: dark;
  --ink: #111415;
  --panel: #1b252d;
  --line: #65727b;
  --text: #f0eadb;
  --muted: #a9b6bf;
  --mint: #dab16b;
  --sand: #e4bb72;
  --gas: #91ced8;
  --charge: #c3b9ed;
  --data: #90e3c5;
  --danger: #e78b72;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
}

* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #171b1c; color: var(--text); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; transition: background .12s, border-color .12s, color .12s; }
button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
button, a, canvas { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
canvas { display: block; }
#battlefield { position: fixed; inset: 0; width: 100%; height: 100%; cursor: default; }
.vignette { display: none; }

.topbar { --topbar-height: 56px; --boost-report-height: 30px; position: fixed; z-index: 4; inset: 0 0 auto; height: var(--topbar-height); display: flex; align-items: center; gap: 24px; padding: 0 18px; background: #171b1cf5; border-bottom: 1px solid #676354; box-shadow: 0 2px #0c1011; }
.topbar.has-boost-report { height: calc(var(--topbar-height) + var(--boost-report-height)); padding-bottom: var(--boost-report-height); }
.production-boost-report { position: absolute; inset: auto 0 0; height: var(--boost-report-height); display: flex; justify-content: center; align-items: center; gap: 9px; padding: 3px 34px 3px 10px; color: #c4dfd3; border-top: 1px solid #3e685e; background: #142c2d; pointer-events: none; font-size: 10px; }
.production-boost-report > strong { color: #e0d4a7; font-size: 10px; white-space: nowrap; }
.boost-income-caption { color: #9bb9ae; font-size: 9px; white-space: nowrap; }
#production-boost-income { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; min-width: 0; color: #9bb9ae; font: 10px Consolas, monospace; }
#production-boost-income > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#production-boost-income b { font-weight: 600; }
#production-boost-dismiss { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 23px; height: 23px; padding: 0; color: #a6c3b8; border: 1px solid #52726a; background: #203934; pointer-events: auto; font-size: 17px; line-height: 1; }
#production-boost-dismiss:hover { color: #ffe5b3; border-color: #c9aa71; }
.production-boost-report.complete { border-top-color: #57695c; background: #202c2b; }
body:has(.has-boost-report) .field-info, body:has(.has-boost-report) .notifications { transform: translateY(var(--boost-report-height, 30px)); }
.brand { display: flex; align-items: center; gap: 9px; padding: 0; text-align: left; flex-shrink: 0; }
.brand-mark { color: var(--mint); font: 38px/1 Georgia, serif; transform: skew(-8deg); }
.brand strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.05px; }
.brand small { display: block; color: #8c948e; font-size: 8px; letter-spacing: 1.1px; margin-top: 3px; }
.resources { display: flex; align-items: center; justify-content: center; flex: 1; gap: clamp(24px, 4vw, 68px); min-width: 0; }
.resource { display: flex; align-items: center; gap: 8px; min-width: 126px; }
.resource-symbol { width: 22px; font: 26px/1 Georgia, serif; text-align: center; }
.resource-symbol .resource-icon { width: 24px; height: 24px; display: block; }
.resource-icon { flex-shrink: 0; vertical-align: middle; }
.resource-cost { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.resource-cost.insufficient { color: var(--danger); }
.brief-resource > span .resource-icon { display: block; }
.command-card.unaffordable:not(.locked) .command-icon { opacity: .45; }
.resource small { display: block; color: #b0b7af; font-size: 9px; font-weight: 600; letter-spacing: .6px; line-height: 1.2; margin-bottom: 2px; white-space: nowrap; }
.resource strong { font: 700 23px/1 Consolas, monospace; letter-spacing: -.7px; color: #f4f0e4; }
.resource-sand .resource-symbol { color: var(--sand); }
.resource-gas .resource-symbol { color: var(--gas); }
.resource-charge .resource-symbol { color: var(--charge); }
.resource-data .resource-symbol, .data-text { color: var(--data); }
.has-data-resource .resources { gap: clamp(12px, 2vw, 32px); }
.resource-data { min-width: 104px; }
.resource-rate { color: #8e9b92; font: 10px/1.2 Consolas, monospace; align-self: flex-end; margin-bottom: 2px; white-space: nowrap; }
.power-panel { flex: 0 0 auto; min-width: 83px; display: grid; gap: 1px; padding-left: 12px; border-left: 1px solid #4b554b; }
.power-panel > span { color: #b5bca5; font-size: 8px; font-weight: 650; letter-spacing: .6px; }
.power-panel strong { color: #cfdbad; font: 700 15px/1.1 Consolas, monospace; white-space: nowrap; }
.power-panel small { color: #97a88a; font: 8px/1.2 Consolas, monospace; white-space: nowrap; }
.power-panel.deficit strong, .power-panel.deficit small { color: #f1a280; }
.energy-gauge { position: fixed; z-index: 3; left: 14px; width: 96px; height: 174px; display: flex; flex-direction: column; gap: 7px; padding: 8px; color: #becbb6; border: 1px solid #5a6657; border-left: 2px solid #a9b986; background: #1a2321f2; }
.energy-gauge-heading { display: flex; align-items: center; gap: 5px; min-height: 14px; font-size: 8px; font-weight: 650; letter-spacing: .7px; }
.energy-gauge-heading svg { color: #d8bb7b; flex-shrink: 0; }
.energy-gauge-body { display: flex; gap: 9px; flex: 1; min-height: 0; }
.energy-track { position: relative; width: 12px; flex-shrink: 0; overflow: hidden; background: #111a17; border: 1px solid #56634f; }
.energy-used, .energy-reserved { position: absolute; left: 0; right: 0; }
.energy-used { bottom: 0; height: var(--power-used, 0%); background: #a1b985; }
.energy-reserved { bottom: var(--power-used, 0%); height: var(--power-reserved, 0%); background: repeating-linear-gradient(135deg, #d1ad6e 0 3px, #8a723e 3px 5px); }
.energy-capacity { position: absolute; left: 0; right: 0; bottom: clamp(0px, var(--power-capacity, 100%), calc(100% - 1px)); height: 1px; background: #f0e5c5; }
.energy-gauge-stats { display: grid; align-content: space-between; min-width: 0; }
.energy-gauge-stats small { display: block; color: #899d8b; font-size: 6px; letter-spacing: .35px; }
.energy-gauge-stats strong { display: block; margin-top: 1px; color: #dce3ca; font: 700 12px/1.15 Consolas, monospace; }
.energy-gauge-stats > div:last-child strong { color: #d7b574; }
.energy-gauge-footer { padding-top: 5px; border-top: 1px solid #40503e; white-space: nowrap; }
.energy-gauge-footer > span { display: block; color: #a0b397; font-size: 8px; }
.energy-gauge-footer > strong { display: block; margin-top: 2px; font: 9px/1.2 Consolas, monospace; }
.energy-gauge.deficit { border-left-color: #e58d6c; }
.energy-gauge.deficit .energy-used { background: #d67b5f; }
.energy-gauge.deficit .energy-gauge-footer > span, .energy-gauge.deficit .energy-gauge-footer > strong { color: #edaa87; }
.energy-gauge.compact { height: 128px; width: 90px; padding: 6px; gap: 5px; }
.energy-gauge.compact .energy-gauge-footer { padding-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 5px; }
.mission-clock { display: flex; align-items: center; gap: 7px; margin-right: 8px; font: 12px Consolas, monospace; white-space: nowrap; color: #d5d9d0; }
.live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #9cc2a8; }
.icon-button { width: 29px; height: 29px; color: #b7c0b8; border: 1px solid #4c5550; background: #252b2b; font-size: 15px; }
.icon-button:hover, .icon-button.active { color: #f0cb87; background: #383426; border-color: #a98c56; }
.icon-button.muted { color: #727e77; }
.icon-button svg { display: block; width: 18px; height: 18px; margin: auto; }
.icon-button .play-triangle { display: none; }
.icon-button.active .pause-lines { display: none; }
.icon-button.active .play-triangle { display: block; }
.icon-button.muted svg { opacity: .5; }
.setup-flow-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; min-width: 0; }
#launch-audio-settings-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; padding: 8px 10px; color: #d5ddcf; border: 1px solid #78928e77; border-radius: 5px; background: #182b34; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
#launch-audio-settings-button svg { width: 16px; height: 16px; }
#launch-audio-settings-button:hover, #launch-audio-settings-button.active { color: #f3d79f; border-color: #c8ac77; background: #30403e; }
#launch-audio-settings-button:focus-visible { outline: 2px solid #e0c28a; outline-offset: 3px; }
.audio-settings-panel { position: fixed; z-index: 30; top: 64px; right: 12px; width: min(316px, calc(100vw - 20px)); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; padding: 15px; border: 1px solid #73807d; border-top: 2px solid #d5b47a; background: #16252bf9; box-shadow: 0 12px 36px #000b; }
.audio-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audio-settings-heading h2 { margin: 0; color: #e8d0a4; font-size: 11px; letter-spacing: 1.4px; }
.audio-settings-heading button { width: 26px; height: 26px; padding: 0; color: #bfcfce; border: 1px solid #566c70; font-size: 21px; line-height: 1; }
.audio-settings-heading button:hover { color: #ffe1aa; border-color: #c3a56a; }
.audio-track { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 12px 0; border-block: 1px solid #455b5b; }
.audio-track > div { min-width: 0; }
.audio-track small { display: block; margin-bottom: 5px; color: #a5b8b5; font-size: 8px; font-weight: 650; letter-spacing: .9px; }
.audio-track strong { display: block; color: #f2dfbb; font-size: 17px; font-weight: 600; line-height: 1.25; }
.audio-track-artist, .audio-track-style { display: block; margin-top: 4px; color: #b4c6c3; font-size: 11px; line-height: 1.4; }
.audio-track-style { color: #94adaa; font-size: 10px; }
.audio-playlist-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: #c1d4cd; font-size: 11px; }
.audio-playlist-controls button { padding: 7px 9px; border: 1px solid #667e79; color: #ebd2a5; background: #243b3e; font-size: 11px; }
.audio-playlist-controls button:hover:not(:disabled) { border-color: #d5b47a; background: #344b49; }
.audio-playlist-controls button:focus-visible { outline: 2px solid #d5b47a; outline-offset: 2px; }
.audio-playlist-controls button:disabled { opacity: .45; cursor: default; }
.audio-credits { margin-top: 10px; color: #92aaa4; font-size: 10px; }
.audio-credits summary { cursor: pointer; }
.audio-spectrum { display: flex; align-items: center; justify-content: center; gap: 3px; flex: 0 0 38px; height: 31px; color: #dab16b; }
.audio-spectrum i { width: 3px; height: 15px; border-radius: 1px; background: currentColor; transform: scaleY(.3); }
.audio-spectrum i:nth-child(2) { height: 25px; }
.audio-spectrum i:nth-child(3) { height: 31px; }
.audio-spectrum i:nth-child(4) { height: 22px; }
.audio-settings-panel[data-audio-state="playing"] .audio-spectrum i { animation: audio-meter 1.2s ease-in-out infinite alternate; }
.audio-settings-panel[data-audio-state="playing"] .audio-spectrum i:nth-child(2) { animation-delay: -.45s; }
.audio-settings-panel[data-audio-state="playing"] .audio-spectrum i:nth-child(3) { animation-delay: -.8s; }
.audio-settings-panel[data-audio-state="playing"] .audio-spectrum i:nth-child(4) { animation-delay: -.25s; }
.audio-settings-panel[data-audio-state="playing"] .audio-spectrum i:nth-child(5) { animation-delay: -.6s; }
@keyframes audio-meter { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.audio-playback-status { min-height: 27px; margin: 10px 0 12px; color: #a8bdb8; font-size: 10px; line-height: 1.5; }
.audio-enable { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; color: #e1e8dd; font-size: 12px; cursor: pointer; }
.audio-enable input { width: 18px; height: 18px; margin: 0; accent-color: #d4ae6b; cursor: pointer; }
.audio-sliders { display: grid; gap: 15px; }
.audio-channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.audio-channel label { color: #c7d2cb; font-size: 11px; }
.audio-channel output { min-width: 35px; color: #e2c48f; font: 11px Consolas, monospace; text-align: right; }
.audio-channel input { grid-column: 1 / -1; width: 100%; height: 18px; margin: 0; accent-color: #d1ae71; cursor: pointer; }
.audio-channel input:focus-visible, .audio-enable input:focus-visible { outline: 2px solid #e0c28a; outline-offset: 3px; }
.audio-settings-note { margin: 17px 0 8px; color: #91a9a5; font-size: 9px; line-height: 1.5; }
.audio-credit { display: block; margin-top: 5px; color: #b4c5ba; font-size: 9px; text-underline-offset: 3px; }
.audio-credit:hover { color: #f2d6a3; }
body:has(.topbar.has-boost-report) .audio-settings-panel { top: 94px; max-height: calc(100dvh - 106px); }
@media (prefers-reduced-motion: reduce) { .audio-settings-panel .audio-spectrum i { animation: none !important; } }
@media (max-width: 640px) {
  .setup-flow-tools .eyebrow { display: none; }
  .topbar .top-actions { flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 24px); grid-template-rows: 21px 24px; gap: 2px; }
  .topbar .top-actions .icon-button { width: 24px; height: 24px; }
  .topbar .admin-button { grid-column: 1 / -1; grid-row: 1; height: 21px; padding: 0 5px; font-size: 9px; }
  .audio-settings-panel { top: 62px; right: 8px; padding: 13px; max-height: calc(100dvh - 74px); }
  body:has(.topbar.has-boost-report) .audio-settings-panel { top: 106px; max-height: calc(100dvh - 118px); }
}
@media (max-width: 440px) {
  #launch-audio-settings-button { width: 32px; height: 32px; padding: 6px; }
  #launch-audio-settings-button span { display: none; }
}
@media (max-width: 520px) {
  .topbar .resources { gap: 5px; }
  .topbar .resources .resource { flex: 1; min-width: 0; }
  .topbar .resources .resource > div { min-width: 0; }
  .topbar .resources .resource small { overflow: hidden; max-width: 50px; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .resources .resource strong { font-size: 16px; }
}
.admin-button { flex-shrink: 0; height: 29px; padding: 0 9px; color: #a8bbb9; border: 1px solid #53666a; background: #203036; font-size: 10px; }
.admin-button:hover, .admin-button[aria-expanded="true"] { color: #f4dbab; border-color: #b39a6a; background: #3b3b30; }
.admin-button.enabled { color: #f0ce91; box-shadow: inset 0 -2px #caa66d; }
.admin-button:disabled { opacity: .45; }
.admin-panel { position: fixed; z-index: 7; top: 64px; right: 12px; width: min(330px, calc(100vw - 20px)); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; padding: 13px; color: #c6d3d2; border: 1px solid #75817a; border-top: 2px solid #c8aa73; background: #13232bf8; box-shadow: 0 8px 26px #0009; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e4cca0; font-size: 11px; letter-spacing: 1px; }
.admin-heading button { width: 25px; height: 25px; border: 1px solid #526b70; color: #b9cbca; font-size: 19px; line-height: 1; }
.admin-panel p { margin: 9px 0; font-size: 10px; line-height: 1.5; color: #8fa9ae; }
#admin-mode-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; margin-top: 10px; padding: 7px 9px; border: 1px solid #536f74; background: #22383e; font-size: 10px; text-align: left; }
#admin-mode-toggle b { color: #8a9d9e; font: 10px Consolas, monospace; }
#admin-mode-toggle[aria-checked="true"] { border-color: #bea16e; background: #3a3c31; }
#admin-mode-toggle[aria-checked="true"] b { color: #efcf93; }
.admin-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.admin-resources button, #admin-science-all { min-height: 34px; padding: 6px; color: #cce2d8; border: 1px solid #59766d; background: #243e3c; font-size: 10px; }
.admin-resources button:hover:enabled, #admin-science-all:hover:enabled { color: #fff0ce; border-color: #cfb57f; background: #415047; }
.admin-panel button:disabled { opacity: .4; }
#admin-science-all { width: 100%; margin-top: 10px; border-color: #7883a3; background: #303b50; }
#admin-science-count { display: block; margin-top: 7px; color: #d0d7ee; font: 10px/1.5 Consolas, monospace; }
#admin-status { display: block; padding-top: 9px; border-top: 1px solid #456069; color: #d7c59d; font-size: 10px; line-height: 1.5; }
.admin-unit-controls { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid #526a73; }
.admin-unit-controls legend { color: #b8c6dc; font-size: 10px; }
.admin-unit-controls label { display: block; min-width: 0; color: #9db3bb; font-size: 9px; }
.admin-unit-controls select, .admin-unit-controls input { display: block; width: 100%; min-width: 0; height: 30px; margin-top: 4px; padding: 4px 6px; color: #d4e3df; border: 1px solid #58717b; background: #192f3a; font: 10px system-ui, sans-serif; }
.admin-unit-row { display: grid; grid-template-columns: 1fr 85px; gap: 8px; margin: 9px 0; }
#admin-place-unit { width: 100%; min-height: 32px; color: #d0e3dc; border: 1px solid #6f958c; background: #2a4643; font-size: 10px; }
.admin-unit-controls [data-admin-input]:disabled { opacity: .4; }

.field-info { position: fixed; z-index: 3; inset: 69px 18px auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; pointer-events: none; }
.eyebrow { display: block; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: 1.1px; }
.objective { padding: 7px 12px 8px; background: #1b2121f0; border-left: 2px solid #bb975c; max-width: 330px; }
.objective .eyebrow { color: #919d95; font-size: 8px; }
.objective > div { display: flex; gap: 7px; align-items: center; margin: 3px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; }
.target-symbol { color: #dfb66f; font-size: 16px; line-height: 1; }
.objective > small { display: none; }
.objective > #objective-remaining { display: block; margin-top: 4px; color: #aebcb6; font: 8px/1.3 Consolas, monospace; }
.weather { display: flex; gap: 10px; align-items: center; max-width: 370px; padding: 8px 11px; background: #1b2121f0; border-right: 2px solid #a68c5f; pointer-events: auto; }
.weather .eyebrow { display: none; }
.weather-icon { color: #d6b276; font: 25px/1 Georgia, serif; }
.weather strong { display: block; color: #e9e3d5; font-size: 12px; font-weight: 650; line-height: 1.25; }
.weather small { display: block; color: #a3afa6; font-size: 10px; line-height: 1.3; margin-top: 3px; }
.text-button { color: #d7b576; font-size: 9px; letter-spacing: .5px; padding: 4px 0; white-space: nowrap; }
.text-button:hover { color: #fff0ce; }
.weather .text-button { margin-left: 3px; font-size: 8px; }
.notifications { position: fixed; z-index: 5; top: 125px; left: 18px; max-width: 340px; pointer-events: none; }
.notification { padding: 8px 10px; margin-bottom: 4px; border-left: 2px solid #8baa98; background: #1a2221e8; font-size: 11px; line-height: 1.45; animation: notice-in .18s ease-out; }
.notification.warning, .notification.error { border-color: var(--danger); }
.notification.local { border-color: var(--sand); }
.notification:nth-last-child(n+3) { display: none; }
.frontier-panel { position: fixed; z-index: 4; right: 18px; width: 280px; display: flex; flex-direction: column; color: #d8e2df; background: #152129f5; border: 1px solid #596d74; border-top: 2px solid #c9ae76; box-shadow: 0 5px 18px #0005; }
.frontier-heading { flex: 0 0 34px; display: flex; align-items: center; gap: 9px; padding: 0 10px; width: 100%; text-align: left; background: linear-gradient(90deg, #324048, #1b2a32); }
.frontier-heading:hover { background: #33474c; }
.frontier-heading strong { flex: 1; font-size: 10px; letter-spacing: 1.1px; }
.frontier-heading-mark { color: #e7c780; font-size: 21px; line-height: 1; }
#frontier-summary { color: #b8cbbb; font: 10px Consolas, monospace; }
#frontier-chevron { color: #d7b878; font-size: 18px; }
.frontier-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #78968e #19272f; }
.frontier-row { --frontier-tone: #a8b4ad; position: relative; display: flex; min-height: 62px; border-bottom: 1px solid #50616a66; }
.frontier-row[data-tone="friendly"] { --frontier-tone: #91cbb5; }
.frontier-row[data-tone="enemy"] { --frontier-tone: #e3937e; }
.frontier-row[data-tone="contested"] { --frontier-tone: #f0c46b; background: #68522922; }
.frontier-focus { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 6px 8px 10px; text-align: left; }
.frontier-focus:hover { background: #8fa6ad16; }
.frontier-symbol { width: 24px; flex: 0 0 24px; color: var(--frontier-tone); text-align: center; font-size: 25px; text-shadow: 0 0 12px #a6c7b92b; }
.frontier-copy { flex: 1; min-width: 0; }
.frontier-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.4; }
.frontier-copy small { display: block; line-height: 1.5; font-size: 9px; }
.frontier-benefit { color: #c5b694; }
.frontier-status { color: var(--frontier-tone); font-size: 8px !important; }
.frontier-locate { color: #a4b7bd; font-size: 11px; }
.frontier-send { flex: 0 0 26px; align-self: center; height: 28px; margin-right: 7px; color: #dbbd83; background: #2b4148; border: 1px solid #6b8587; font-size: 16px; }
.frontier-send:hover:not(:disabled) { background: #45605e; }
.frontier-send:disabled { opacity: .3; }
.frontier-progress { position: absolute; inset: auto 0 0; height: 2px; pointer-events: none; }
.frontier-progress span { display: block; height: 100%; background: var(--frontier-tone); transition: width .12s linear; }
.frontier-convoy-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 6px; color: #d7be8a; background: #25333b; }
.frontier-convoy-heading strong { font-size: 8px; letter-spacing: .6px; }
.frontier-convoy-heading span { color: #aebdc0; font-size: 8px; }
#frontier-timer { color: #e2d2af; font: 10px Consolas, monospace; }
.frontier-empty { margin: 0; padding: 10px; color: #96a9ad; font-size: 9px; line-height: 1.5; }
.frontier-footer { padding: 8px 10px; border-top: 1px solid #54667166; background: #111e25; }
.frontier-footer p { margin: 0 0 4px; color: #c3d1cd; font-size: 9px; line-height: 1.4; }
.frontier-footer small { display: block; color: #829b9e; font-size: 8px; line-height: 1.5; }
.launch-frontier { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: -3px 0 15px; padding: 8px 10px; border-left: 2px solid #bda26c; background: #90b9b70b; }
.launch-frontier strong { color: #e2c994; font-size: 9px; letter-spacing: 1px; }
.launch-frontier span { color: #b1c1c1; font-size: 10px; }
@media (max-width: 900px) { .frontier-panel { right: 10px; width: 254px; } }
@media (max-width: 520px) { .frontier-panel { right: 8px; width: 224px; } .frontier-heading strong { font-size: 9px; } .frontier-copy strong { font-size: 10px; } .frontier-focus { gap: 5px; padding-left: 7px; } .frontier-symbol { width: 20px; flex-basis: 20px; font-size: 21px; } .frontier-locate { display: none; } .launch-frontier { margin-bottom: 10px; } }
@keyframes notice-in { from { transform: translateX(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.command-dock { position: fixed; z-index: 4; bottom: 22px; left: 12px; width: min(1080px, calc(100% - 24px)); height: 196px; display: grid; grid-template-columns: 210px 230px minmax(0, 1fr); gap: 7px; }
.command-dock:not(.is-science-dock):not(.is-tactics-dock) { grid-template-rows: minmax(0, 1fr); }
.command-dock > section { min-width: 0; background: #1b2222f5; border: 1px solid #535d56; box-shadow: 0 -2px #0c1111aa; }
.panel-title { height: 25px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; border-bottom: 1px solid #3e4942; color: #9fb0a4; font-size: 8px; font-weight: 650; letter-spacing: 1.1px; }
.panel-title .live-dot { width: 4px; height: 4px; }
.radar-panel { padding: 0 7px 5px; }
.radar-panel .panel-title { margin: 0 -7px; }
#zoom-level { margin-left: auto; margin-right: 8px; color: var(--gold); font: 10px Consolas, monospace; letter-spacing: 0; }
.radar-panel canvas { width: 100%; height: 139px; margin-top: 5px; cursor: crosshair; background: #151d1d; border: 1px solid #35463c; }
.radar-caption { display: flex; justify-content: space-between; margin-top: 5px; color: #8d9f92; font: 8px Consolas, monospace; letter-spacing: .5px; }
.selection-panel { position: relative; overflow: hidden; }
#selection-content { padding: 9px 10px; }
.selection-heading { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.entity-portrait { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 44px; background: #292f2f; border: 1px solid #5c6a61; }
.entity-portrait svg { width: 33px; height: 34px; color: #c7be9e; }
.entity-portrait .sprite-icon { width: 42px; height: 42px; }
.selection-heading h3 { margin: 0 0 4px; color: #ede8d9; font-size: 12px; font-weight: 650; line-height: 1.2; }
.selection-heading small { color: #8ba392; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
.selection-heading > div:last-child { min-width: 0; flex: 1; }
.selection-heading small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veterancy { display: flex; align-items: center; gap: 5px; margin-top: 5px; min-width: 0; }
.veterancy-stars { display: flex; gap: 1px; flex-shrink: 0; }
.veterancy-stars svg { fill: #303c30; stroke: #788266; stroke-width: 1; }
.veterancy-stars .earned { fill: #e1ba73; stroke: #f0d19c; }
.experience-readout { color: #b9c69e; font: 8px Consolas, monospace; white-space: nowrap; }
.experience-track { height: 2px; min-width: 12px; flex: 1; background: #3b4837; }
.experience-track > span { display: block; height: 100%; background: #bea66c; }
.health-row { display: flex; gap: 8px; align-items: center; }
.health-track { flex: 1; height: 4px; background: #354737; }
.health-fill { height: 100%; background: #9abd8d; transition: width .2s; }
.health-row small { color: #c3cec4; font: 9px Consolas, monospace; white-space: nowrap; }
.selection-description { color: #a7b4aa; font-size: 10px; line-height: 1.4; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.selection-order { color: #d5b476; font: 9px Consolas, monospace; margin-top: 5px; }
.selection-panel:has(.production-queue) .selection-description { display: none; }
.selection-panel.has-repair-control .selection-description, .selection-panel.has-repair-control .selection-order { display: none; }
.repair-control { position: absolute; left: 9px; right: 9px; bottom: 8px; }
.repair-control button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; gap: 7px; padding: 5px 7px; text-align: left; color: #e5c58c; border: 1px solid #8d7955; background: #37372b; }
.repair-control button:hover { border-color: #d8b77c; background: #444332; }
.repair-control button:focus-visible { outline: 2px solid #d8b77c; outline-offset: 2px; }
.repair-control button:disabled { color: #8c9c91; background: #242f28; border-color: #44584a; cursor: default; }
.repair-control button.repairing { border-color: #a2b384; background: #34422f; color: #d4e3b7; }
.repair-control button.waiting { border-color: #cd9663; background: #493a2a; }
.repair-control strong { display: block; font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.repair-control small { display: block; color: #a9b59f; font-size: 8px; line-height: 1.3; margin-top: 3px; white-space: nowrap; }
.repair-control .waiting small { color: #e3b787; }
.repair-cost { display: flex; flex-wrap: wrap; justify-content: end; gap: 4px 7px; font: 10px Consolas, monospace; }
.repair-cost .resource-cost { gap: 3px; }
.depot-status { margin-top: 7px; color: #d5b476; font: 9px Consolas, monospace; }
.depot-status span, .depot-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-status small { margin-top: 3px; color: #a9b59f; font-size: 8px; }
.selection-empty { display: flex; gap: 10px; align-items: center; margin: 5px 0 9px; }
.selection-empty > span { color: #7a9684; font-size: 30px; }
.selection-empty strong { display: block; font-size: 12px; margin-bottom: 4px; }
.selection-empty small { color: #a4b6a9; font-size: 10px; line-height: 1.4; }
.selection-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 31px; overflow: auto; margin-top: 5px; }
.selection-chip { padding: 2px 5px; color: #c4d2c6; border: 1px solid #495f4d; font: 9px Consolas, monospace; }
.production-queue { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: #736b4e #151b19; }
.queue-item { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 34px; position: relative; overflow: hidden; border: 1px solid #647561; color: #e5c88e; background: #292f29; font-size: 9px; }
.queue-cancel { position: absolute; z-index: 2; top: 1px; right: 1px; display: grid; place-items: center; width: 13px; height: 13px; padding: 0; color: #f0ceba; border: 1px solid #a38b78; background: #30251ff0; font: 12px/1 Consolas, monospace; }
.queue-cancel:hover:not(:disabled) { color: #fff1d0; background: #7a3f2e; border-color: #f0ceba; }
.queue-cancel:focus-visible { outline: 2px solid #ffe1a3; outline-offset: -2px; }
.queue-cancel:disabled { opacity: .45; }
.queue-item .sprite-icon { width: 31px; height: 27px; }
.queue-item svg { width: 25px; height: 25px; }
.queue-slot { position: absolute; top: 2px; left: 3px; color: #c5c8b9; font: 7px Consolas, monospace; }
.queue-time { position: absolute; right: 3px; bottom: 4px; color: #eee1bd; background: #111b18bf; font: 8px Consolas, monospace; }
.queue-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: #d0ab68; }

.commands-panel { position: relative; padding: 0 10px; border-top-color: #b19159 !important; }
.command-scroll { position: absolute; z-index: 1; top: 5px; right: 8px; display: flex; gap: 3px; background: #1b2222; }
.command-scroll button { display: grid; place-items: center; width: 19px; height: 21px; border: 1px solid #60715b; color: #d8bd83; background: #293329; padding: 0; }
.command-scroll button:hover { border-color: #d8bd83; }
.command-scroll button:disabled { opacity: .3; }
.command-tabs { display: flex; gap: 20px; align-items: stretch; height: 33px; padding-right: 48px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #3f4b41; }
.command-tabs > button { flex-shrink: 0; }
.command-tabs > button { padding: 0; color: #aebdb0; border-bottom: 2px solid transparent; font-size: 10px; font-weight: 650; letter-spacing: .6px; white-space: nowrap; }
.command-tabs > button.active { color: #f0c981; border-bottom-color: #caa260; }
.command-tabs > button:hover { color: #eee8d7; }
.command-tabs > button:last-child { margin-left: auto; font-size: 9px; color: #8fa58f; }
kbd { padding: 0 3px; margin-left: 3px; color: #7e927d; border: 1px solid #435742; border-radius: 1px; font: 8px Consolas, monospace; }
.command-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 110px; grid-template-columns: none; gap: 6px; height: 134px; padding: 7px 0; align-content: start; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #9c875d #151e1a; scroll-snap-type: x proximity; }
.command-card { min-width: 0; height: 112px; position: relative; overflow: hidden; text-align: left; padding: 6px 7px; border: 1px solid #4d5d51; background: #262e2c; box-shadow: inset 0 1px #566553; scroll-snap-align: start; }
.command-card:hover { background: #343b33; border-color: #c9aa71; }
.command-card.chosen { background: #3c3929; border-color: #e2ba72; box-shadow: inset 0 -2px #c5a162; }
.command-card.prerequisite-target { outline: 2px solid #ffe1a3; outline-offset: -3px; border-color: #ffe1a3; box-shadow: inset 0 0 14px #edbb5940; }
.command-card.unaffordable { opacity: 1; }
.command-lock { display: none; position: absolute; z-index: 1; top: 6px; left: 6px; place-items: center; width: 18px; height: 18px; color: #cfb67e; background: #151d1be6; border: 1px solid #626d58; pointer-events: none; }
.command-lock svg { width: 12px; height: 12px; }
.command-card.locked { opacity: 1; }
.command-card.locked .command-lock { display: grid; }
.command-card.locked .command-icon { opacity: .35; filter: grayscale(.55); }
.command-badge { display: none; position: absolute; top: 5px; left: 5px; right: 17px; color: #cfdfad; background: #18261de8; font: 8px Consolas, monospace; padding: 3px 4px; text-align: center; }
.command-card.completed .command-badge, .command-card.researching .command-badge { display: block; }
.command-card.capacity-limited .command-badge { display: block; color: #f2c89a; background: #3c3027ed; font-size: 7px; }
.command-card.completed { border-color: #8b9d6e; background: #2b3429; }
.command-card.researching { border-color: #c2a46d; }
.command-card .command-number { position: absolute; top: 5px; right: 5px; color: #788c77; font: 9px Consolas, monospace; }
.command-icon { height: 40px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; color: #d1c9a7; }
.command-icon svg { width: 36px; height: 36px; }
.sprite-icon { display: block; width: 100%; height: 100%; }
.command-icon .sprite-icon { width: 57px; height: 40px; max-width: 100%; object-fit: contain; }
.model-icon { object-fit: contain; user-select: none; }
.command-name { display: block; min-height: 28px; color: #e8e8d8; font-size: 11px; font-weight: 600; line-height: 1.25; }
.command-cost { display: flex; gap: 6px; margin-top: 5px; font: 10px Consolas, monospace; white-space: nowrap; }
.sand-text { color: var(--sand); }
.gas-text { color: var(--gas); }
.charge-text { color: var(--charge); }
.command-context { margin-top: 6px; padding-top: 5px; border-top: 1px solid #3b473c; color: #96a895; font-size: 9px; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.command-groups { display: flex; align-items: stretch; gap: 8px; height: 26px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #8a7955 #171f1b; }
.command-groups button { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 3px 6px; color: #9fae9f; border-bottom: 2px solid transparent; font-size: 9px; white-space: nowrap; }
.command-groups button:hover { color: #f0d29a; background: #2d382d; }
.command-groups button.active { color: #e8c88e; border-bottom-color: #c6a564; background: #34392b; }
.command-groups button.missing:not(.active) { color: #788b7b; }
.command-groups button small { min-width: 11px; color: #a4bb91; font: 8px Consolas, monospace; text-align: center; }
.command-groups button.missing small { color: #a48862; }
.producer-context { height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #adbea4; border-bottom: 1px solid #3d4b3e; font-size: 9px; }
.producer-context strong { font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.producer-context > span { flex-shrink: 0; color: #c3b289; font: 8px Consolas, monospace; white-space: nowrap; }
.has-command-groups .command-grid { height: 114px; padding-block: 5px; }
.has-command-groups .command-card { height: 100px; padding: 5px 6px; }
.has-command-groups .command-icon { height: 36px; margin-bottom: 3px; }
.has-command-groups .command-icon .sprite-icon { height: 36px; width: 56px; }
.has-command-groups .command-name { min-height: 24px; font-size: 10px; }
.has-command-groups .command-cost { margin-top: 3px; }
.has-command-groups .command-context { margin-top: 2px; padding-top: 3px; font-size: 8px; line-height: 1.15; }
.is-training .command-grid { height: 96px; }
.is-training .command-card { height: 82px; }
.is-training .command-icon { height: 30px; }
.is-training .command-icon .sprite-icon { height: 30px; width: 50px; }
.is-training .command-name { min-height: 23px; }
.is-training .command-cost { font-size: 9px; }
.command-card.cooling:after { content: attr(data-cooldown); position: absolute; inset: 0; display: grid; place-items: center; background: #131c1ae8; color: #d8d2e7; font: 22px Consolas, monospace; }
.controls-strip { position: fixed; z-index: 4; bottom: 0; left: 0; right: 0; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #7e9584; background: #141c1bf5; font-size: 8px; }
.controls-strip b { color: #acbfae; font-weight: 400; }
.placement-hint { position: fixed; z-index: 5; bottom: 234px; left: 50%; transform: translateX(-50%); max-width: 94vw; padding: 10px 16px; border: 1px solid #bc9d62; background: #1c2821f5; color: #ece4ce; font-size: 12px; pointer-events: none; }
.placement-hint.invalid { color: #f0ab91; border-color: var(--danger); }
.pause-banner { position: fixed; z-index: 6; top: 42%; left: 50%; transform: translate(-50%, -50%); padding: 15px 25px; border: 1px solid #8e8a6c; border-top: 2px solid #c6a16a; background: #192522f5; color: #e7e6d6; font-size: 13px; font-weight: 650; letter-spacing: 2px; pointer-events: none; }
.pause-banner > span { color: #d5b374; margin-right: 10px; }
.pause-banner small { display: block; margin-top: 7px; color: #9eb59e; text-align: center; font-size: 10px; font-weight: 400; letter-spacing: .5px; }

.command-tooltip { position: fixed; z-index: 12; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 76px); padding: 13px 14px 11px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8faeaa #182a30; color: #dfdfd0; background: #171f1dfc; border: 1px solid #748063; border-top: 2px solid #c3a36a; box-shadow: 0 7px 18px #0006; pointer-events: auto; }
.tooltip-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 10px; border-bottom: 1px solid #414f3c; }
.tooltip-portrait { display: grid; place-items: center; flex: 0 0 53px; width: 53px; height: 49px; background: #2b3429; border: 1px solid #59694f; }
.tooltip-portrait .sprite-icon { width: 49px; height: 45px; }
.tooltip-portrait svg { width: 36px; height: 36px; color: #c5bc96; }
.tooltip-heading > div:nth-child(2) { min-width: 0; flex: 1; }
.tooltip-heading small { color: #9aa993; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; }
.tooltip-heading h3 { margin: 3px 0 0; color: #f1e6c7; font-size: 14px; font-weight: 650; line-height: 1.25; }
.tooltip-heading kbd { align-self: flex-start; color: #d1bd86; border-color: #6c7051; padding: 2px 5px; font-size: 10px; }
.command-tooltip > p { margin: 10px 0; color: #b8c3ae; font-size: 12px; line-height: 1.5; }
.tooltip-metrics { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.tooltip-metrics span { padding: 3px 5px; background: #283327; color: #b8c9ac; font: 10px Consolas, monospace; }
.tooltip-requirements { color: #d5c49d; font-size: 11px; line-height: 1.5; padding: 7px 0 0; border-top: 1px solid #414f3c; }
.tooltip-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #414f3c; }
.tooltip-cost { display: flex; align-items: center; gap: 10px; font: 12px Consolas, monospace; }
.tooltip-footer > small { max-width: 145px; color: #acbc9d; font-size: 10px; line-height: 1.3; text-align: right; }

.modal-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: #070d0cd1; }
.primary-button { display: flex; justify-content: center; align-items: center; gap: 20px; min-height: 47px; padding: 0 21px; color: #20291e; background: #d4b071; border: 1px solid #edce91; font-size: 10px; font-weight: 750; letter-spacing: 1px; }
.primary-button:hover { background: #e7c78c; }
.primary-button > span { font-size: 20px; }
#launch-overlay { display: block; padding: 0; overflow: auto; background: #171d20 url('../assets/v9/menu-frontier.png') 65% center / cover no-repeat; }
#launch-overlay::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(90deg, #13191cf7 0%, #13191cf0 29%, #13191cc2 45%, #13191c36 66%, #13191c05 100%), linear-gradient(0deg, #10171be6, transparent 46%); }
#launch-overlay .launch-panel { position: relative; width: 100%; min-height: 100svh; display: flex; align-items: center; isolation: isolate; }
#launch-overlay .launch-main { width: min(620px, 54vw); padding: 34px 30px 28px clamp(32px, 4.5vw, 80px); }
#launch-overlay .launch-kicker { display: flex; align-items: center; gap: 12px; color: #c2c4bb; font-size: 9px; font-weight: 600; letter-spacing: 2px; }
#launch-overlay .launch-rule { flex: 0 0 32px; height: 2px; background: #d8b573; }
#launch-overlay .launch-title-block { margin: 33px 0 31px; }
#launch-overlay h1 { margin: 0; color: #f2eddf; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(52px, 5.5vw, 80px); font-weight: 900; line-height: .97; letter-spacing: -3.3px; text-shadow: 0 2px 25px #12171930; }
#launch-overlay h1 em { color: #d9b878; font-style: normal; letter-spacing: 4px; }
#launch-overlay .launch-title-block p { margin: 20px 0 0; color: #c5c9c4; font-size: 15px; line-height: 1.6; }
#launch-overlay .faction-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #e1d8c5; font-size: 9px; font-weight: 650; letter-spacing: 1.5px; }
#launch-overlay .faction-heading > span:last-child { color: #7f8b8d; font-size: 8px; letter-spacing: 1px; }
#launch-overlay .faction-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
#launch-overlay .faction-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 88px; align-items: center; gap: 14px; min-height: 70px; padding: 12px 14px; text-align: left; color: #c5ccc7; border: 1px solid #a7b5b325; border-left: 3px solid #a7b5b335; background: #1a2226c4; transition: background .15s, border-color .15s, color .15s; }
#launch-overlay .faction-card:hover { background: #2b3437ed; border-color: #8e9d9d85; }
#launch-overlay .faction-card.selected { color: #e3c591; background: #3c3a30ed; border-color: #d6b77e82; border-left-color: #e2c18b; box-shadow: none; }
#launch-overlay .faction-card:focus-visible, #launch-overlay .difficulty button:focus-visible, #launch-overlay #launch-button:focus-visible { outline: 2px solid #f0d09a; outline-offset: 4px; }
#launch-overlay .faction-sigil { display: flex; align-items: center; justify-content: center; color: inherit; }
#launch-overlay .faction-sigil svg { width: 36px; height: 36px; }
#launch-overlay .faction-copy strong { display: block; color: #eee9de; font-size: 13px; font-weight: 650; line-height: 1.25; }
#launch-overlay .faction-copy small { display: block; margin-top: 6px; color: #a3afad; font-size: 10px; line-height: 1.35; }
#launch-overlay .selected .faction-copy small { color: #c1baa9; }
#launch-overlay .faction-features { display: flex; flex-wrap: wrap; gap: 3px 5px; margin-top: 6px; }
#launch-overlay .faction-features b { padding: 2px 4px; color: #b9c8c4; background: #14212a88; border: 1px solid #829a9640; font: 500 7px/1.1 Consolas, monospace; white-space: nowrap; }
#launch-overlay .selected .faction-features b { color: #f2d9ac; border-color: #c4a56b70; }
#launch-overlay [data-faction="directorate"].selected { border-left-color: #a4afff; background: #30364aed; }
#launch-overlay [data-faction="nomads"].selected { border-left-color: #7edbc4; background: #28413ced; }
#launch-overlay .faction-bonus { padding-left: 12px; border-left: 1px solid #c1c9be25; text-align: right; }
#launch-overlay .faction-bonus b { display: block; color: #d6c6a6; font: 600 22px/1.1 "Segoe UI", sans-serif; letter-spacing: -.7px; }
#launch-overlay .selected .faction-bonus b { color: #edce91; }
#launch-overlay .faction-bonus small { display: block; margin-top: 5px; color: #919d9b; font-size: 8px; letter-spacing: .8px; white-space: nowrap; }
#launch-overlay .selected .faction-bonus small { color: #c5b99e; }
#launch-overlay .army-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; margin-top: 12px; padding: 5px 0; color: #b7c4c5; }
#launch-overlay .army-color-row > label { flex-shrink: 0; color: #bac7c8; font-size: 8px; font-weight: 650; letter-spacing: .8px; }
#launch-overlay .army-color-dot { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border: 1px solid #f0f4e866; box-shadow: 0 0 0 2px #0c1826; }
#launch-overlay #army-color-select { min-width: 108px; max-width: 145px; height: 28px; padding: 3px 20px 3px 7px; color: #ecede3; background: #1d2a32; border: 1px solid #738786; border-radius: 0; font: 10px "Segoe UI", sans-serif; cursor: pointer; }
#launch-overlay #army-color-select:focus-visible { outline: 2px solid #f0d09a; outline-offset: 2px; }
#launch-overlay .enemy-color-choice { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#launch-overlay .enemy-color-choice > small { color: #95a7aa; font-size: 7px; letter-spacing: .6px; }
#launch-overlay .enemy-color-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 4px 7px; color: #d9dfd7; background: #14222bcc; border: 1px solid #617377; }
#launch-overlay .enemy-color-chip b { font-size: 9px; font-weight: 550; }
#launch-overlay .army-color-row + .launch-bottom { margin-top: 12px; }
#launch-overlay .launch-bottom { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: end; gap: 10px 18px; margin-top: 25px; }
#launch-overlay .difficulty { grid-column: 1; grid-row: 1; min-width: 0; }
#launch-overlay .difficulty > span { display: block; margin-bottom: 9px; color: #8f9b9b; font-size: 8px; letter-spacing: 1.6px; }
#launch-overlay .difficulty > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#launch-overlay .difficulty button { min-height: 28px; padding: 4px 0 7px; color: #8d9a9c; border: 0; border-bottom: 2px solid #78868630; font-size: 9px; font-weight: 600; letter-spacing: .25px; text-transform: uppercase; white-space: nowrap; }
#launch-overlay .difficulty button:hover { color: #ebe4d3; }
#launch-overlay .difficulty button.selected { color: #ead3a8; border-bottom-color: #d5b373; }
#launch-overlay .difficulty-description { grid-column: 1 / -1; grid-row: 2; min-height: 28px; margin: 0; color: #b4beb7; font-size: 11px; line-height: 1.45; }
#launch-overlay #launch-button { grid-column: 2; grid-row: 1; width: 100%; min-height: 56px; justify-content: space-between; gap: 12px; padding: 0 17px; color: #262a27; background: #dfc28b; border: 1px solid #f0d9a7; border-radius: 0; box-shadow: 0 5px 0 #9d804833; font-size: 10px; font-weight: 800; letter-spacing: .7px; transition: background .15s, transform .15s; }
#launch-overlay #launch-button:hover { background: #f0d7a5; transform: translateY(-1px); }
#launch-overlay #launch-button:active { transform: translateY(1px); }
#launch-overlay #launch-button svg { flex-shrink: 0; }
#launch-overlay .launch-mode { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; color: #79878a; font-size: 8px; font-weight: 500; letter-spacing: 1.4px; }
#launch-overlay .launch-mode > span { color: #a4aea9; }
#launch-overlay .launch-briefing { position: absolute; right: clamp(30px, 4vw, 70px); bottom: 33px; width: min(450px, 36vw); padding: 0; color: #f0e9d9; }
#launch-overlay .briefing-sector { color: #d3c9b1; font-size: 9px; letter-spacing: 2px; }
#launch-overlay .launch-briefing h2 { margin: 12px 0 7px; color: #ece7d9; font-size: 29px; font-weight: 450; letter-spacing: -.8px; }
#launch-overlay .launch-briefing > p { margin: 0; color: #b8c1bb; font-size: 12px; line-height: 1.5; }
#launch-overlay .briefing-resources { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #c2cec03b; }
#launch-overlay .brief-resource { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; }
#launch-overlay .brief-resource > span { flex: 0 0 25px; }
#launch-overlay .brief-resource strong { display: block; color: #d8ddd4; font-size: 10px; font-weight: 600; line-height: 1.3; }
#launch-overlay .brief-resource small { display: block; color: #8f9c98; margin-top: 5px; font-size: 9px; }
@media (max-height: 760px) and (min-width: 901px) {
  #launch-overlay .launch-main { padding-top: 16px; padding-bottom: 16px; }
  #launch-overlay .launch-title-block { margin: 10px 0 12px; }
  #launch-overlay h1 { font-size: 48px; }
  #launch-overlay .launch-title-block p { margin-top: 8px; font-size: 12px; line-height: 1.35; }
  #launch-overlay .faction-card { min-height: 62px; padding-block: 8px; }
  #launch-overlay .army-color-row { margin-top: 8px; }
  #launch-overlay .launch-bottom { margin-top: 18px; }
  #launch-overlay .launch-mode { margin-top: 12px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  #launch-overlay .launch-main { width: 57vw; padding-left: 32px; padding-right: 22px; }
  #launch-overlay .faction-heading > span:last-child { display: none; }
  #launch-overlay .faction-card { grid-template-columns: 32px minmax(0, 1fr) 78px; gap: 11px; }
  #launch-overlay .faction-copy strong { font-size: 12px; }
  #launch-overlay .faction-copy small { font-size: 9px; }
  #launch-overlay .launch-bottom { grid-template-columns: 220px minmax(0, 1fr); gap: 10px 14px; }
  #launch-overlay #launch-button { padding-inline: 13px; font-size: 10px; }
  #launch-overlay .briefing-resources { gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  #launch-overlay { background-position: 66% center; }
  #launch-overlay::before { background: linear-gradient(90deg, #12191cf5, #12191cb0 72%, #12191c4d), linear-gradient(0deg, #12191cf7 8%, #12191cc9 52%, #12191c12 100%); }
  #launch-overlay .launch-panel { align-items: center; }
  #launch-overlay .launch-main { width: min(650px, 100%); padding: 42px 34px 36px; }
  #launch-overlay .launch-title-block { margin: 42px 0 40px; }
  #launch-overlay h1 { font-size: clamp(48px, 9.6vw, 76px); }
  #launch-overlay .launch-title-block p { font-size: 16px; }
  #launch-overlay .faction-card { min-height: 78px; grid-template-columns: 40px minmax(0, 1fr) 94px; padding: 14px 16px; }
  #launch-overlay .faction-copy strong { font-size: 15px; }
  #launch-overlay .faction-copy small { font-size: 11px; }
  #launch-overlay .faction-bonus b { font-size: 25px; }
  #launch-overlay .launch-bottom { grid-template-columns: 250px minmax(0, 1fr); margin-top: 31px; gap: 10px 18px; }
  #launch-overlay .difficulty button { font-size: 10px; }
  #launch-overlay #launch-button { min-height: 60px; font-size: 11px; }
  #launch-overlay .launch-mode { margin-top: 25px; }
  #launch-overlay .launch-briefing { display: none; }
}
@media (max-width: 540px) {
  #launch-overlay .launch-main { padding: 30px 20px; }
  #launch-overlay .launch-kicker { font-size: 8px; letter-spacing: 1.3px; }
  #launch-overlay .launch-title-block { margin-block: 31px; }
  #launch-overlay h1 { font-size: clamp(38px, 10.4vw, 56px); letter-spacing: -2px; }
  #launch-overlay h1 em { letter-spacing: 3px; }
  #launch-overlay .launch-title-block p { font-size: 14px; }
  #launch-overlay .faction-heading { font-size: 8px; }
  #launch-overlay .faction-heading > span:last-child { display: none; }
  #launch-overlay .faction-card { grid-template-columns: 30px minmax(0, 1fr) 69px; gap: 10px; min-height: 77px; padding: 12px 10px; }
  #launch-overlay .faction-sigil svg { width: 30px; height: 30px; }
  #launch-overlay .faction-copy strong { font-size: 12px; }
  #launch-overlay .faction-copy small { font-size: 10px; }
  #launch-overlay .faction-bonus { padding-left: 7px; }
  #launch-overlay .faction-bonus b { font-size: 22px; }
  #launch-overlay .faction-bonus small { font-size: 7px; letter-spacing: .3px; }
  #launch-overlay .launch-bottom { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  #launch-overlay .difficulty { grid-column: 1; grid-row: 1; }
  #launch-overlay .difficulty > span { margin-bottom: 8px; }
  #launch-overlay .difficulty > div { gap: 10px; }
  #launch-overlay .difficulty-description { grid-column: 1; grid-row: 2; }
  #launch-overlay #launch-button { grid-column: 1; grid-row: 3; width: 100%; min-height: 57px; }
  #launch-overlay .launch-mode { font-size: 7px; letter-spacing: 1px; }
}
@media (max-height: 640px) {
  #launch-overlay .launch-panel { align-items: flex-start; }
  #launch-overlay .launch-main { padding-top: 24px; padding-bottom: 24px; }
  #launch-overlay .launch-title-block { margin-block: 22px; }
  #launch-overlay .launch-title-block p { margin-top: 14px; }
  #launch-overlay .faction-card { min-height: 62px; padding-block: 9px; }
  #launch-overlay .launch-briefing { position: fixed; bottom: 24px; }
}
.info-modal { position: relative; width: min(740px, 96vw); max-height: 94vh; overflow: auto; padding: 32px 35px; background: #1d2924; border: 1px solid #687b59; border-top: 2px solid #b4975b; }
.info-modal h2 { margin: 12px 0 24px; font-size: 27px; font-weight: 550; letter-spacing: -.5px; }
.modal-close { position: absolute; right: 18px; top: 14px; color: var(--muted); font-size: 27px; }
.help-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.help-columns h3 { color: #d1b071; font-size: 12px; margin: 0 0 12px; }
.help-columns p { color: #afbea4; font-size: 12px; line-height: 1.85; margin: 0 0 12px; }
.help-columns b { color: var(--text); font-weight: 500; }
.help-note { margin: 14px 0 24px; padding: 13px 16px; color: #d9ceaa; border-left: 2px solid #bd9f63; background: #2b3328; font-size: 12px; line-height: 1.7; }
.result-panel { width: min(560px, 96vw); padding: 36px; text-align: center; background: #1d2924; border: 1px solid #687b59; border-top: 2px solid #b4975b; }
.result-symbol { color: #d5b376; font: 85px/1 Georgia, serif; margin: 22px 0; }
.result-panel h2 { margin: 0 0 14px; font-size: 25px; letter-spacing: 1px; }
.result-panel > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.result-stats { display: flex; justify-content: space-around; border-block: 1px solid #4b5a40; padding: 17px; margin: 24px 0; }
.result-stats strong { display: block; color: #d5b376; font: 24px Consolas, monospace; }
.result-stats small { color: var(--muted); font-size: 8px; letter-spacing: 1px; }
.result-panel .primary-button { width: 100%; }
.error-message { position: fixed; z-index: 100; inset: 25%; padding: 40px; background: #1c2924; border: 1px solid var(--danger); font-size: 15px; line-height: 1.8; }

@media (min-width: 1650px) {
  .command-dock { width: 1130px; grid-template-columns: 220px 240px minmax(0, 1fr); }
  .command-grid { grid-auto-columns: 120px; }
  .command-name { font-size: 12px; }
  .command-cost { font-size: 11px; }
}

@media (max-width: 1150px) {
  .topbar { gap: 15px; padding-inline: 13px; }
  .brand strong { font-size: 11px; letter-spacing: .6px; }
  .brand small { font-size: 7px; letter-spacing: .5px; }
  .resources { gap: 24px; }
  .resource { min-width: 107px; gap: 6px; }
  .resource small { font-size: 8px; letter-spacing: .1px; }
  .resource strong { font-size: 22px; }
  .resource-rate { font-size: 9px; }
  .power-panel { min-width: 75px; padding-left: 9px; }
  .command-dock { left: 10px; width: calc(100% - 20px); grid-template-columns: 180px 205px minmax(0, 1fr); gap: 6px; }
  .commands-panel { padding-inline: 8px; }
  .command-tabs { gap: 13px; }
  .command-tabs > button { font-size: 9px; letter-spacing: .3px; }
  .command-grid { gap: 5px; }
  .command-card { padding-inline: 6px; }
  .command-name { font-size: 10px; }
  .command-cost { font-size: 9px; gap: 4px; }
  .selection-heading h3 { font-size: 11px; }
  .selection-description { font-size: 9px; }
  .radar-caption { font-size: 7px; }
}

@media (max-width: 950px) {
  .brand small, .mission-clock, .resource-rate { display: none; }
  .resources { gap: 18px; }
  .resource { min-width: 101px; }
  .command-dock { grid-template-columns: 164px 186px minmax(0, 1fr); }
  .command-tabs { gap: 10px; }
  .command-tabs kbd { display: none; }
  .command-cost { font-size: 9px; gap: 3px; }
  .command-card { padding-inline: 4px; }
}

@media (max-width: 850px) {
  .topbar { padding-inline: 10px; gap: 12px; }
  .brand { gap: 7px; }
  .brand strong { display: none; }
  .brand-mark { font-size: 32px; }
  .brand strong { font-size: 10px; letter-spacing: .3px; }
  .resource { min-width: 88px; gap: 5px; }
  .resource-symbol { width: 18px; font-size: 23px; }
  .resource small { font-size: 8px; }
  .resource strong { font-size: 21px; }
  .resources { gap: 14px; }
  .icon-button { width: 27px; height: 28px; }
  .top-actions { gap: 4px; }
  .field-info { inset: 67px 10px auto; gap: 16px; }
  .objective { padding: 6px 9px; }
  .objective > div { font-size: 11px; }
  .weather { max-width: 285px; padding: 7px 9px; gap: 7px; }
  .weather strong { font-size: 11px; }
  .weather small { font-size: 9px; }
  .weather .text-button { display: none; }
  .notifications { top: 120px; left: 10px; max-width: 310px; }
  .notification { font-size: 10px; padding: 7px 9px; }
  .command-dock { height: 200px; grid-template-columns: 160px minmax(0, 1fr); }
  .selection-panel { display: none; }
  body.has-selection .selection-panel { display: block; position: absolute; left: 168px; right: 0; bottom: calc(100% + 8px); height: 80px; }
  body.has-selection .selection-panel .panel-title { display: none; }
  body.has-selection #selection-content { height: 100%; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 43px 13px; gap: 2px 10px; }
  body.has-selection .selection-heading { grid-column: 1; grid-row: 1 / 3; align-items: flex-start; min-width: 0; gap: 8px; margin: 0; }
  body.has-selection .selection-heading > div:last-child { min-width: 0; padding-top: 2px; }
  body.has-selection .selection-heading h3 { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
  body.has-selection .selection-heading small { font-size: 7px; }
  body.has-selection .entity-portrait { width: 44px; height: 44px; }
  body.has-selection .health-row { grid-column: 1; grid-row: 2; align-self: end; margin-left: 52px; gap: 6px; }
  body.has-selection .health-row small { font-size: 8px; }
  body.has-selection .selection-description, body.has-selection .selection-order, body.has-selection .selection-chips { display: none; }
  body.has-selection .production-queue { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; max-width: 226px; }
  body.has-selection .selection-panel.has-repair-control #selection-content { padding-right: 180px; }
  body.has-selection .has-repair-control .repair-control { left: auto; right: 8px; top: 8px; bottom: auto; width: 160px; }
  body.has-selection .has-repair-control .repair-control button { min-height: 34px; }
  body.has-selection .depot-status { position: absolute; right: 8px; bottom: 7px; width: 160px; margin: 0; font-size: 8px; line-height: 1.15; }
  body.has-selection .depot-status small { margin-top: 2px; font-size: 7px; }
  body.has-selection .has-repair-control .production-queue { position: absolute; right: 8px; bottom: 7px; max-width: 160px; height: 24px; }
  body.has-selection .has-repair-control .queue-item { flex-basis: 27px; width: 27px; height: 22px; }
  body.has-selection .has-repair-control .queue-item .sprite-icon { width: 22px; height: 19px; }
  body.has-selection .has-repair-control .queue-item svg { width: 19px; height: 19px; }
  body.has-selection .has-repair-control .queue-slot { font-size: 6px; }
  body.has-selection .has-repair-control .queue-time { right: 2px; bottom: 3px; font-size: 6px; }
  .command-tabs { gap: 14px; height: 34px; }
  .command-tabs > button { font-size: 10px; }
  .command-tabs kbd { display: inline; }
  .command-grid { grid-auto-columns: 108px; height: 136px; gap: 5px; }
  .command-card { height: 114px; padding: 6px; }
  .command-name { font-size: 11px; min-height: 29px; }
  .command-cost { font-size: 10px; gap: 4px; }
  .command-icon { height: 42px; }
  .command-icon .sprite-icon { height: 42px; width: 60px; }
  .command-context { font-size: 9px; margin-top: 8px; }
  .command-groups { height: 28px; gap: 5px; }
  .command-groups button { padding-inline: 5px; }
  .has-command-groups .command-grid { height: 118px; }
  .has-command-groups .command-card { height: 106px; }
  .has-command-groups .command-icon { height: 38px; }
  .has-command-groups .command-icon .sprite-icon { height: 38px; width: 58px; }
  .is-training .command-grid { height: 100px; }
  .is-training .command-card { height: 90px; }
  .is-training .command-icon { height: 34px; }
  .is-training .command-icon .sprite-icon { height: 34px; width: 54px; }
  .radar-panel canvas { height: 143px; }
  .controls-strip > span:last-child { display: none; }
  .placement-hint { bottom: 238px; }
  .help-columns { gap: 20px; }
}

@media (max-height: 760px) and (min-width: 851px) {
  .topbar { --topbar-height: 52px; }
  .field-info { top: 64px; }
  .notifications { top: 119px; }
  .command-dock { height: 188px; }
  .radar-panel canvas { height: 131px; }
  .command-grid { height: 128px; padding-top: 7px; }
  .has-command-groups .command-grid { height: 110px; padding-top: 5px; }
  .has-command-groups .command-card { height: 98px; }
  .is-training .command-grid { height: 92px; }
  .is-training .command-card { height: 82px; }
  .command-card { height: 106px; }
  .command-icon { height: 36px; margin-bottom: 4px; }
  .command-icon .sprite-icon { height: 36px; width: 54px; }
  .command-context { margin-top: 8px; padding-top: 5px; }
  .placement-hint { bottom: 226px; }
}

@media (max-width: 640px) {
  .topbar { --boost-report-height: 44px; }
  .production-boost-report { flex-wrap: wrap; gap: 3px 8px; justify-content: flex-start; padding-left: 8px; }
  .production-boost-report > strong { flex: 0 0 100%; font-size: 9px; }
  .boost-income-caption { font-size: 8px; }
  #production-boost-income { gap: 4px 7px; font-size: 9px; }
  body:has(.has-boost-report) .field-info, body:has(.has-boost-report) .notifications { transform: translateY(44px); }
  .brand strong { max-width: 94px; font-size: 9px; line-height: 1.25; }
  .brand-mark { font-size: 27px; }
  .topbar { gap: 8px; padding-inline: 8px; }
  .resource { min-width: 75px; gap: 4px; }
  .resource-symbol { display: none; }
  .resources { gap: 11px; }
  .resource strong { font-size: 20px; }
  .resource small { font-size: 7px; }
  .power-panel { min-width: 61px; padding-left: 6px; }
  .power-panel strong { font-size: 13px; }
  .power-panel > span { font-size: 7px; letter-spacing: .2px; }
  .power-panel small { font-size: 7px; }
  .top-actions { gap: 3px; }
  .icon-button { width: 24px; height: 27px; font-size: 14px; }
  .weather { max-width: 235px; }
  .weather-icon { display: none; }
  .weather small { max-width: 200px; }
  .command-dock { grid-template-columns: 130px minmax(0, 1fr); left: 7px; width: calc(100% - 14px); gap: 5px; }
  .commands-panel { padding-inline: 6px; }
  .command-tabs { gap: 12px; }
  .command-tabs > button { font-size: 9px; letter-spacing: 0; }
  .command-tabs kbd { display: none; }
  .command-card { padding-inline: 4px; }
  .command-name { font-size: 10px; }
  .command-cost { font-size: 9px; gap: 3px; }
  .radar-panel { padding-inline: 5px; }
  .radar-panel .panel-title { margin-inline: -5px; padding-inline: 7px; font-size: 7px; letter-spacing: .4px; }
  .radar-caption { font-size: 7px; letter-spacing: 0; }
  .controls-strip { padding-inline: 9px; font-size: 7px; }
}

@media (max-width: 520px) {
  .topbar { --topbar-height: 54px; gap: 7px; }
  .brand strong { display: none; }
  .brand-mark { font-size: 30px; }
  .resources { gap: 9px; justify-content: space-evenly; }
  .resource { min-width: 65px; }
  .resource small { font-size: 7px; max-width: 76px; white-space: normal; }
  .resource strong { font-size: 20px; }
  .field-info { top: 64px; inset-inline: 8px; }
  .objective { max-width: 260px; }
  .objective .eyebrow { font-size: 7px; }
  .weather { display: none; }
  .notifications { top: 115px; left: 8px; max-width: 280px; }
  .command-dock { height: 205px; grid-template-columns: 105px minmax(0, 1fr); }
  body.has-selection .selection-panel { left: 0; }
  body.has-selection .production-queue { max-width: 90px; }
  body.has-selection .selection-panel.has-repair-control #selection-content { padding-right: 160px; }
  body.has-selection .has-repair-control .repair-control, body.has-selection .has-repair-control .production-queue { width: 142px; max-width: 142px; }
  body.has-selection .has-repair-control .repair-control strong { font-size: 9px; }
  body.has-selection .has-repair-control .repair-cost { font-size: 9px; gap: 3px 5px; }
  body.has-selection .depot-status { width: 142px; }
  .command-tabs { height: 31px; gap: 9px; }
  .command-tabs > button { font-size: 8px; }
  .command-tabs > button:last-child { font-size: 7px; }
  .command-grid { grid-auto-columns: 100px; grid-template-rows: repeat(2, 73px); height: 168px; gap: 4px; padding: 4px 0 6px; }
  .command-card { height: 73px; padding: 3px 5px; }
  .command-card .command-number { font-size: 7px; top: 3px; right: 3px; }
  .command-icon { height: 27px; margin-bottom: 1px; }
  .command-icon .sprite-icon { width: 39px; height: 27px; }
  .command-icon svg { width: 26px; height: 26px; }
  .command-name { font-size: 9px; line-height: 1.15; min-height: 21px; }
  .command-cost { font-size: 9px; gap: 3px; margin-top: 3px; }
  .command-context { display: none; }
  .command-groups { height: 27px; gap: 4px; }
  .command-groups button { font-size: 8px; padding-inline: 5px; }
  .producer-context { height: 16px; font-size: 8px; }
  .producer-context > span { font-size: 7px; }
  .has-command-groups .command-grid { height: 142px; grid-template-rows: repeat(2, 66px); padding-block: 3px; }
  .has-command-groups .command-card { height: 66px; padding: 3px 5px; }
  .has-command-groups .command-icon { height: 22px; margin-bottom: 2px; }
  .has-command-groups .command-icon .sprite-icon { height: 22px; width: 36px; }
  .has-command-groups .command-name { min-height: 21px; font-size: 9px; }
  .has-command-groups .command-cost { font-size: 9px; margin-top: 2px; }
  .is-training .command-grid { height: 126px; grid-template-rows: repeat(2, 58px); }
  .is-training .command-card { height: 58px; }
  .is-training .command-icon { height: 18px; margin-bottom: 1px; }
  .is-training .command-icon .sprite-icon { height: 18px; width: 32px; }
  .is-training .command-name { min-height: 18px; font-size: 8px; }
  .is-training .command-cost { margin-top: 1px; font-size: 8px; }
  .radar-panel canvas { height: 148px; }
  .radar-panel .panel-title { font-size: 6px; letter-spacing: .2px; padding-inline: 5px; }
  .radar-caption { font-size: 6px; }
  .controls-strip { font-size: 6px; padding-inline: 7px; }
  .placement-hint { bottom: 243px; font-size: 10px; padding: 8px 11px; }
  .pause-banner { width: max-content; max-width: 92vw; padding: 13px 18px; text-align: center; font-size: 11px; letter-spacing: 1px; line-height: 1.5; }
  .pause-banner > span { margin-right: 5px; }
  .command-tooltip { padding: 11px; }
  .modal-overlay { padding: 10px; }
  .primary-button { min-height: 44px; padding-inline: 12px; font-size: 8px; letter-spacing: .6px; }
  .info-modal { padding: 26px 21px; }
  .info-modal h2 { font-size: 23px; }
  .help-columns { grid-template-columns: 1fr; gap: 8px; }
  .result-panel { padding: 28px 20px; }
  .result-panel h2 { font-size: 21px; }
}

@media (max-width: 380px) {
  .topbar { padding-inline: 6px; gap: 4px; }
  .brand-mark { font-size: 25px; }
  .resource { min-width: 57px; }
  .resources { gap: 6px; }
  .resource small { font-size: 6px; }
  .resource strong { font-size: 19px; }
  .power-panel { min-width: 49px; padding-left: 4px; }
  .power-panel strong { font-size: 11px; }
  .power-panel small { font-size: 6px; }
  .icon-button { width: 22px; }
  .top-actions { gap: 2px; }
  .command-dock { grid-template-columns: 90px minmax(0, 1fr); }
  .command-tabs { gap: 7px; }
  .command-tabs > button { font-size: 7px; }
  .command-card { padding-inline: 3px; }
  .command-grid { grid-auto-columns: 96px; }
  .command-name, .command-cost { font-size: 8px; }
  .radar-panel .panel-title { font-size: 6px; letter-spacing: 0; }
}

.topbar { background: #111b24f7; border-bottom-color: #65717a; box-shadow: 0 2px #090e14, inset 0 -3px #1c2a34; }
.resource strong { color: #fff4dd; text-shadow: 0 1px #070d13; }
.resource small { color: #bcc6ca; }
.resource-symbol .resource-icon { filter: drop-shadow(0 1px 1px #0007); }
.resource-rate { color: #a6b8c2; }
.icon-button { color: #c6d1d7; background: #23323d; border-color: #586b79; box-shadow: inset 0 1px #76848a33; }
.icon-button:hover, .icon-button.active { background: #35434b; border-color: #e0bb78; }
.objective, .weather { background: #16232df2; box-shadow: 0 2px 6px #080e1644; }
.weather small, .objective .eyebrow { color: #b1c0c8; }
.notification { color: #eee8db; background: #182831f0; box-shadow: 0 2px 4px #080e1633; }
.command-dock > section { background: #18232bf7; border-color: #60707a; box-shadow: 0 -2px #0a1219bb, inset 0 1px #9eabb022; }
.panel-title { color: #becbd1; background: #21323e; border-bottom-color: #536470; font-weight: 700; }
.radar-panel canvas { border-color: #758187; box-shadow: 0 0 0 2px #101922, inset 0 0 0 1px #bbc1b440; }
.radar-caption { color: #a6b6c0; }
.entity-portrait { border-color: #7e8c91; background: #233641; box-shadow: inset 2px 0 #c9ac75, inset 0 1px #d6e0e01c; }
.selection-heading h3 { color: #f5eddb; }
.selection-heading small { color: #b0c1cc; }
.selection-description, .selection-empty small { color: #b7c3c8; }
.selection-chip { color: #d7e3e6; border-color: #657d8b; background: #263d4b; }
.health-track { background: #101c24; box-shadow: 0 0 0 1px #52656e; }
.health-fill { background: #9fcaad; }
.commands-panel { border-top-color: #d8b77b !important; }
.command-tabs { border-bottom-color: #536571; }
.command-tabs > button { color: #bcc9cf; }
.command-tabs > button.active { color: #ffe0a1; border-bottom-color: #dfba77; }
.command-tabs > button:last-child { color: #b4c5cd; }
.command-tabs kbd { border-color: #596d78; color: #a8b9c4; }
.command-scroll { background: #18232b; }
.command-scroll button { background: #2a3c48; border-color: #6a7d88; color: #f0d5a0; }
.command-card { color: #f1ebdd; background: #24343f; border-color: #637682; box-shadow: inset 0 1px #acb9bd33, inset 0 -2px #101c2466; }
.command-card:hover { background: #304652; border-color: #e3c184; }
.command-card:focus-visible { outline: 2px solid #f0d29a; outline-offset: -3px; }
.command-card.chosen { background: #3b4650; border-color: #f0d294; box-shadow: inset 3px 0 #e0b775, inset 0 -2px #d5b06c; }
.command-card .command-number { color: #bbcbd4; }
.command-icon { background: #18263080; border-bottom: 1px solid #71838b44; }
.command-name { color: #f4eddd; }
.command-groups { border-bottom: 1px solid #435864; }
.command-groups button { color: #b4c4cd; }
.command-groups button:hover { background: #2c414e; color: #ffe0a6; }
.command-groups button.active { color: #f4d69a; background: #304956; border-bottom-color: #e0ba7b; }
.command-groups button.missing:not(.active) { color: #8f9fa9; }
.command-groups button small { color: #c4d5bf; }
.producer-context { color: #c2d0d6; border-bottom-color: #4d6470; }
.command-context { color: #acbdc7; border-top-color: #435965; }
.command-tooltip { color: #e9e8de; background: #14212bfc; border-color: #7a8d97; border-top-color: #dfbd7e; }
.controls-strip { color: #a0b4c1; background: #111c26f7; }
.controls-strip b { color: #d0dce0; }
.energy-gauge { color: #c6d2d5; background: #172730f5; border-color: #667f87; border-left-color: #b4c9a1; box-shadow: 0 2px 8px #080e1633; }
.energy-gauge-stats small { color: #a3bac5; }
.energy-gauge-footer { border-top-color: #526975; }
.energy-gauge-footer > span { color: #c4d4bd; }
.tactical-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 21px; border-bottom: 1px solid #526571; }
.tactical-context > strong { min-width: 0; color: #e5dbc6; font-size: 8px; font-weight: 750; letter-spacing: .65px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tactical-count { margin-left: auto; flex-shrink: 0; padding: 2px 4px; color: #dfc89a; background: #31424b; border: 1px solid #697a7d; font: 7px/1 Consolas, monospace; white-space: nowrap; }
#tactical-charge { display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--charge); }
#tactical-charge strong { color: #eee3ff; font: 700 12px Consolas, monospace; }
#tactical-charge small { color: #a9b7c4; font-size: 7px; letter-spacing: .5px; }
.commands-panel.is-tactics .command-grid { height: 140px; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: 1fr; grid-auto-flow: row; grid-auto-columns: auto; gap: 7px; padding: 5px 0 7px; overflow: visible; scroll-snap-type: none; }
.commands-panel.is-tactics .command-context { display: none; }
.commands-panel.is-tactics .tactical-card { --tactical-accent: #e5b576; height: 128px; padding: 0; background: #202e39; border: 1px solid #87908b; box-shadow: inset 0 -1px #090e14; }
.commands-panel.is-tactics .tactical-shield { --tactical-accent: #8ecbf0; }
.commands-panel.is-tactics .tactical-boost { --tactical-accent: #a1d8ba; }
.commands-panel.is-tactics .tactical-massrepair { --tactical-accent: #b8d6a2; }
.commands-panel.is-tactics .tactical-supply { --tactical-accent: #ded09b; }
.commands-panel.is-tactics .tactical-nuke { --tactical-accent: #ffbb68; border-color: #b78b5f; }
.commands-panel.is-tactics .tactical-weather { --tactical-accent: #b5bdff; border-color: #8393c8; }
.commands-panel.is-tactics .tactical-orbital { --tactical-accent: #96ead7; border-color: #6aa99c; }
.commands-panel.is-tactics .tactical-recon { --tactical-accent: #9ee9cc; border-color: #78a995; }
.tactical-recon .tactical-art { color: #a2f1cc; background: radial-gradient(ellipse at 50% 100%, #45906f66, transparent 70%), #1b3332; }
.recon-tactical-art { display: block; width: 100%; height: 100%; }
.tactical-weather .tactical-art { color: #bfcaff; background: radial-gradient(ellipse at 50% 100%, #7586da88, transparent 65%), #252c45; }
.tactical-orbital .tactical-art { color: #a6ffe7; background: radial-gradient(ellipse at 50% 100%, #3eaa9688, transparent 65%), #1d3638; }
.superweapon-tactical-art { display: block; width: 100%; height: 100%; }
.tactical-weather .tactical-footer, .tactical-orbital .tactical-footer { gap: 3px; }
.commands-panel.is-tactics .tactical-weather .command-cost, .commands-panel.is-tactics .tactical-orbital .command-cost { gap: 3px; font-size: 9px; }
.tactical-weather .resource-cost, .tactical-orbital .resource-cost { gap: 2px; }
.tactical-weather .resource-cost svg, .tactical-orbital .resource-cost svg { width: 10px; height: 10px; }
.tactical-weather .tactical-reset, .tactical-orbital .tactical-reset { font-size: 7px; }
.tactical-weather[data-tactical-state="locked"] .tactical-state, .tactical-orbital[data-tactical-state="locked"] .tactical-state { color: #b9c1d2; }
.tactical-weather[data-tactical-state="charging"] .tactical-state, .tactical-orbital[data-tactical-state="charging"] .tactical-state { color: var(--tactical-accent); }
.tactical-nuke .tactical-art { color: #f1bb70; background: radial-gradient(ellipse at 50% 100%, #b85b2c99, transparent 65%), repeating-linear-gradient(135deg, #a67d3540 0 5px, transparent 5px 12px), #312b27; }
.nuclear-tactical-art { display: block; width: 100%; height: 100%; }
.tactical-nuke .tactical-footer { gap: 3px; }
.commands-panel.is-tactics .tactical-nuke .command-cost { gap: 3px; font-size: 9px; }
.tactical-nuke .resource-cost { gap: 2px; }
.tactical-nuke .resource-cost svg { width: 10px; height: 10px; }
.tactical-nuke .tactical-reset { font-size: 7px; }
.tactical-nuke[data-tactical-state="locked"] .tactical-state { color: #d8b39a; }
.tactical-nuke[data-tactical-state="charging"] .tactical-state { color: #f2cd8e; }
.tactical-nuke[data-tactical-state="locked"] .nuclear-tactical-art { opacity: .5; }
.nuclear-charge-status { margin-top: 6px; color: #d3be9c; }
.nuclear-charge-status > span { display: flex; justify-content: space-between; font: 8px Consolas, monospace; letter-spacing: .5px; }
.nuclear-charge-status b { color: #ffca7c; font-weight: 600; }
.nuclear-charge-status > div { height: 4px; margin: 5px 0; background: #17212a; border: 1px solid #685a43; }
.nuclear-charge-status > div > span { display: block; height: 100%; background: #e4ae60; }
.nuclear-charge-status > small { display: block; overflow: hidden; color: #c7bdab; font: 8px/1.4 Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.selection-panel.has-nuclear-control .nuclear-charge-status { display: none; }
.nuclear-launch-control { position: absolute; left: 9px; right: 9px; bottom: 49px; }
.nuclear-launch-control button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 34px; overflow: hidden; padding: 4px 7px; text-align: left; color: #ffe1a5; background: #674026; border: 1px solid #e1ab61; }
.nuclear-launch-control button > span:first-child { min-width: 0; }
.nuclear-launch-control button:hover:not(:disabled) { color: #fff2cf; background: #815030; border-color: #ffd393; }
.nuclear-launch-control button:focus-visible { outline: 2px solid #ffd393; outline-offset: 2px; }
.nuclear-launch-control button:disabled { color: #bdac96; background: #35322d; border-color: #776c58; cursor: default; }
.nuclear-launch-control button.chosen { color: #ffdc99; background: #5d432c; border-color: #edb770; }
.nuclear-launch-control strong { display: block; font: 650 10px/1.15 system-ui, sans-serif; }
.nuclear-launch-control small { display: block; overflow: hidden; margin-top: 2px; color: inherit; font: 7px/1.2 Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.nuclear-launch-symbol { flex-shrink: 0; font-size: 23px; line-height: 1; }
.nuclear-launch-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #161c23; }
.nuclear-launch-progress > span { display: block; height: 100%; background: #ffc279; }
.nuclear-launch-control[data-weapon="weather"] button { color: #e0e4ff; background: #394568; border-color: #a4afff; }
.nuclear-launch-control[data-weapon="orbital"] button { color: #d6fff3; background: #2e554c; border-color: #7edbc4; }
.nuclear-launch-control[data-weapon="weather"] button:disabled, .nuclear-launch-control[data-weapon="orbital"] button:disabled { color: #adb8c4; background: #29353d; border-color: #617381; }
.nuclear-launch-control[data-weapon="weather"] .nuclear-launch-progress > span { background: #b9c2ff; }
.nuclear-launch-control[data-weapon="orbital"] .nuclear-launch-progress > span { background: #7edbc4; }
.mcv-deploy-control { position: absolute; left: 9px; right: 9px; bottom: 49px; }
.mcv-deploy-control button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 34px; overflow: hidden; padding: 4px 7px; text-align: left; color: #dce8c5; background: #344839; border: 1px solid #a4bd80; }
.mcv-deploy-control button > span:first-child { min-width: 0; }
.mcv-deploy-control button:hover:not(:disabled) { color: #f1f9dd; background: #47634d; border-color: #cee2ad; }
.mcv-deploy-control button:focus-visible { outline: 2px solid #cee2ad; outline-offset: 2px; }
.mcv-deploy-control button:disabled { color: #a8b5aa; background: #29352f; border-color: #5b7160; cursor: default; }
.mcv-deploy-control strong { display: block; font: 650 10px/1.15 system-ui, sans-serif; white-space: nowrap; }
.mcv-deploy-control small { display: block; overflow: hidden; margin-top: 2px; color: inherit; font: 7px/1.2 Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.mcv-deploy-symbol { flex-shrink: 0; font-size: 23px; line-height: 1; }
.tactical-art { position: relative; display: block; height: 53px; overflow: hidden; border-bottom: 1px solid #8f9b9b66; background: #17252f; }
.tactical-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transition: filter .15s; }
.tactical-operation { position: absolute; top: 5px; left: 5px; max-width: calc(100% - 24px); padding: 2px 4px; color: #f1ecdd; background: #101c24d9; font: 6px/1.2 Consolas, monospace; letter-spacing: .35px; white-space: nowrap; }
.tactical-card .command-number { z-index: 1; top: 4px; right: 4px; padding: 2px 4px; color: #f5e8c6; background: #13212be8; border: 1px solid #9ca29399; font-size: 8px; }
.tactical-body { display: block; padding: 5px 7px 4px; }
.commands-panel.is-tactics .tactical-card .command-name { min-height: 14px; color: #fff0d6; font-size: 11px; line-height: 1.1; font-weight: 650; }
.tactical-metrics { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #b7c7cf; font: 7px/1.15 Consolas, monospace; white-space: nowrap; }
.tactical-metrics b { color: var(--tactical-accent); font-size: 7px; font-weight: 600; }
.tactical-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 17px; margin-top: 3px; }
.commands-panel.is-tactics .tactical-card .command-cost { margin: 0; font-size: 11px; }
.tactical-reset { color: #a5b6c1; font: 8px Consolas, monospace; white-space: nowrap; }
.tactical-state { display: block; overflow: hidden; margin-top: 2px; color: #c7d7c8; font: 8px/1.2 Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }
.tactical-progress { position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 3px; background: #0b151d; }
.tactical-progress > span { display: block; height: 100%; background: var(--tactical-accent); transition: width .15s linear; }
.commands-panel.is-tactics .tactical-card:hover { border-color: var(--tactical-accent); background: #2d414d; }
.tactical-card:hover .tactical-art img { filter: brightness(1.12); }
.commands-panel.is-tactics .tactical-card.chosen { border-color: var(--tactical-accent); box-shadow: inset 2px 0 var(--tactical-accent), 0 0 0 1px #ead3a733; }
.tactical-card[data-tactical-state="shortage"] .tactical-state { color: #e8ad97; }
.tactical-card[data-tactical-state="shortage"] .tactical-progress > span { background: #7a8c97; }
.tactical-card[data-tactical-state="cooldown"] .tactical-state { color: #c5bde7; }
.tactical-card[data-tactical-state="cooldown"] .tactical-art img { filter: saturate(.65) brightness(.85); }
.tactical-card[data-tactical-state="targeting"] .tactical-state { color: var(--tactical-accent); }
.tactical-card.cooling:after { content: none; }
.placement-hint.ability-aim { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; width: min(520px, 94vw); padding: 10px 13px; background: #142530f7; border-color: #d9b478; border-left-width: 3px; box-shadow: 0 3px 12px #08111c66; }
.ability-aim[data-ability="shield"] { border-color: #92c9e9; }
.ability-aim[data-ability="boost"] { border-color: #9fd4ba; }
.ability-aim[data-ability="massrepair"] { border-color: #bad6a7; }
.ability-aim[data-ability="nuke"] { border-color: #ffba67; background: #342a23f7; }
.ability-aim[data-ability="nuke"] .aim-readiness { color: #ffc27c; }
.ability-aim[data-ability="nuke"] > small { color: #f4bd9a; }
.ability-aim[data-ability="weather"] { border-color: #a4afff; background: #222e49f7; }
.ability-aim[data-ability="orbital"] { border-color: #7edbc4; background: #1e3b39f7; }
.ability-aim > strong { color: #fff0d5; font-size: 12px; font-weight: 650; }
.aim-radius { margin-left: auto; color: #b7cbd5; font: 9px Consolas, monospace; }
.aim-readiness { flex: 1 0 100%; color: #b9d3bd; font-size: 10px; }
.ability-aim > small { color: #c3cbd0; font: 9px Consolas, monospace; }
.placement-hint.ability-aim.invalid { border-color: #dc967d; }
.ability-aim.invalid .aim-readiness { color: #f1ad92; }
.tactical-help { color: #bccbd2; font-size: 12px; line-height: 1.8; }
.tactical-help b { color: #efdfbd; font-weight: 600; }
.faction-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.faction-help article { padding: 10px; background: #172b31; border: 1px solid #68808a; border-top: 2px solid #d8b573; }
.faction-help article:nth-child(2) { border-top-color: #a4afff; }
.faction-help article:nth-child(3) { border-top-color: #7edbc4; }
.faction-help strong { color: #e9d8b7; font: 700 8px/1.4 Consolas, monospace; }
.faction-help p { margin: 7px 0 0; color: #b8c9d0; font-size: 10px; line-height: 1.6; }

@media (max-height: 760px) and (min-width: 851px) {
  .commands-panel.is-tactics .command-grid { height: 132px; }
  .commands-panel.is-tactics .tactical-card { height: 120px; }
  .tactical-art { height: 45px; }
}

@media (max-width: 850px) {
  body.has-selection .placement-hint.ability-aim { bottom: 326px; }
}

@media (max-width: 850px) {
  body.has-selection .has-nuclear-control .nuclear-launch-control { left: auto; right: 8px; top: 46px; bottom: auto; width: 160px; }
  body.has-selection .nuclear-launch-control button { height: 27px; padding: 3px 6px; }
  body.has-selection .nuclear-launch-control strong { font-size: 9px; }
  body.has-selection .nuclear-launch-control small { margin-top: 1px; font-size: 6px; }
  body.has-selection .nuclear-launch-symbol { font-size: 20px; }
  body.has-selection .has-mcv-control .mcv-deploy-control { left: auto; right: 8px; top: 46px; bottom: auto; width: 160px; }
  body.has-selection .mcv-deploy-control button { height: 27px; padding: 3px 6px; }
  body.has-selection .mcv-deploy-control strong { font-size: 8px; }
  body.has-selection .mcv-deploy-control small { margin-top: 1px; font-size: 6px; }
  body.has-selection .mcv-deploy-symbol { font-size: 18px; }
}

@media (max-width: 520px) {
  .commands-panel.is-tactics .command-grid { gap: 6px; }
  .commands-panel.is-tactics .tactical-card { height: 134px; }
  .tactical-art { height: 59px; }
  .tactical-context { height: 23px; }
  .tactical-context > strong { font-size: 7px; letter-spacing: .3px; }
  #tactical-charge small { display: none; }
  .placement-hint.ability-aim { padding: 8px 10px; gap: 5px 8px; }
  body.has-selection .placement-hint.ability-aim { bottom: 331px; }
  body.has-selection .has-nuclear-control .nuclear-launch-control { width: 142px; }
  body.has-selection .has-mcv-control .mcv-deploy-control { width: 142px; }
  .ability-aim > strong { font-size: 11px; }
  .ability-aim > small { font-size: 8px; }
  .faction-help { grid-template-columns: minmax(0, 1fr); }
}

.commands-panel.is-research .command-grid { grid-auto-columns: 158px; }
.commands-panel.is-research .research-card { height: 120px; padding: 6px 7px; }
.research-card .command-icon { position: absolute; top: 7px; left: 7px; width: 25px; height: 26px; }
.research-card .command-icon svg { width: 24px; height: 24px; }
.research-card .command-name { min-height: 29px; padding-left: 31px; padding-right: 6px; font-size: 10px; }
.research-levels { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.research-levels i { display: grid; place-items: center; width: 22px; height: 14px; color: #90a3aa; background: #17272c; border: 1px solid #50636a; font: 8px Consolas, monospace; }
.research-levels i.earned { color: #f3d494; background: #465048; border-color: #c5ac76; }
.research-levels b { margin-left: auto; color: #d2c6a4; font: 9px Consolas, monospace; }
.research-effect { display: block; margin-top: 5px; overflow: hidden; color: #b9dfc8; font: 8px/1.2 Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }
.research-time { display: block; margin-top: 4px; color: #a7b8c1; font: 8px/1.2 Consolas, monospace; }
.research-card .command-cost { margin-top: 5px; font-size: 9px; }
.research-card .command-badge { top: auto; bottom: 5px; left: auto; right: 5px; padding: 2px 3px; font-size: 6px; }
.command-dock.is-science-dock { height: 222px; }
.commands-panel.is-research .command-grid { height: 136px; grid-template-rows: none; }
.commands-panel.is-research .research-card { height: 120px; }
.ai-research-card { border-top-color: #83bda9; }
.ai-research-card .command-icon { width: 32px; height: 29px; }
.ai-research-card .command-icon .sprite-icon { width: 34px; height: 29px; }
.ai-research-card .command-name { padding-left: 37px; }
.ai-research-card .research-effect { height: 22px; margin-top: 3px; color: #a5e2ca; white-space: normal; line-height: 1.3; }
.ai-research-card .research-time { margin-top: 2px; }
.ai-research-card .command-cost { margin-top: 4px; }
.research-levels em { color: #8cbbad; font: 8px Consolas, monospace; letter-spacing: .5px; }
.ai-help { margin-top: 20px; padding: 15px; border: 1px solid #54786b; background: #213b352e; }
.ai-help h3 { margin: 0 0 8px; color: #a9e5c8; font-size: 13px; letter-spacing: 1px; }
.ai-help p { color: #bfcbc7; font-size: 11px; line-height: 1.7; }
.ai-help .faction-help { margin-top: 12px; }
@media (max-width: 1150px) {
  .has-data-resource .brand strong, .has-data-resource .brand small { display: none; }
  .has-data-resource .resource { min-width: 87px; }
}
@media (max-width: 850px) {
  .has-data-resource .resources { gap: 10px; }
  .has-data-resource .resource { min-width: 79px; }
}
@media (max-width: 640px) {
  .has-data-resource .resources { gap: 6px; }
  .has-data-resource .resource { min-width: 57px; }
  .has-data-resource .resource small { font-size: 6px; }
  .has-data-resource .resource strong { font-size: 18px; }
}
@media (max-width: 380px) {
  .has-data-resource .resources { gap: 4px; }
  .has-data-resource .resource { min-width: 42px; }
  .has-data-resource .resource strong { font-size: 16px; }
}
.command-dock.is-tactics-dock { left: 12px; right: 12px; width: auto; height: 202px; }
.command-dock.is-tactics-dock .command-scroll { display: none; }
.command-dock.is-tactics-dock .command-tabs { padding-right: 0; }
.command-dock.is-tactics-dock .command-grid { overflow-x: visible; }
.command-dock.is-tactics-dock .placement-hint { bottom: auto; }
body:has(.is-tactics-dock) .placement-hint.ability-aim { bottom: 238px; }

@media (max-width: 1569px) {
  .command-dock.is-tactics-dock { height: 329px; }
  .command-dock.is-tactics-dock .command-grid { height: 275px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 7px; }
  .command-dock.is-tactics-dock .tactical-card { height: 128px; }
  .command-dock.is-tactics-dock .tactical-art { height: 53px; }
  body:has(.is-tactics-dock) .placement-hint.ability-aim { bottom: 365px; }
}

@media (max-width: 1100px) {
  .command-dock.is-tactics-dock { left: 10px; right: 10px; height: 358px; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: 90px 262px; max-height: calc(100dvh - 150px); overflow-y: auto; overflow-x: hidden; }
  .command-dock.is-tactics-dock .radar-panel { grid-column: 1; grid-row: 1; }
  .command-dock.is-tactics-dock .radar-panel canvas { height: 48px; margin-top: 3px; }
  .command-dock.is-tactics-dock .radar-caption { margin-top: 2px; font-size: 6px; }
  .command-dock.is-tactics-dock .selection-panel { display: block; position: relative; grid-column: 2; grid-row: 1; left: auto; right: auto; bottom: auto; height: 90px; }
  .command-dock.is-tactics-dock .selection-panel .panel-title { display: none; }
  .command-dock.is-tactics-dock #selection-content { padding: 6px 8px; }
  .command-dock.is-tactics-dock .selection-heading { margin-bottom: 4px; }
  .command-dock.is-tactics-dock .selection-description, .command-dock.is-tactics-dock .selection-order { display: none; }
  .command-dock.is-tactics-dock .production-queue { position: absolute; right: 8px; top: 24px; max-width: 240px; margin-top: 0; }
  .command-dock.is-tactics-dock .commands-panel { grid-column: 1 / -1; grid-row: 2; }
  .command-dock.is-tactics-dock .command-grid { height: 208px; gap: 6px; }
  .command-dock.is-tactics-dock .tactical-card { height: 95px; }
  .command-dock.is-tactics-dock .tactical-art { height: 28px; }
  .command-dock.is-tactics-dock .tactical-body { padding: 4px 6px 3px; }
  .command-dock.is-tactics-dock .tactical-card .command-name { font-size: 10px; }
  .command-dock.is-tactics-dock .tactical-state { font-size: 7px; }
  .command-dock.is-tactics-dock .nuclear-launch-control, .command-dock.is-tactics-dock .mcv-deploy-control { top: 46px; bottom: auto; left: auto; right: 8px; width: 160px; }
  body:has(.is-tactics-dock) .placement-hint.ability-aim { bottom: min(394px, calc(100dvh - 114px)); }
}

@media (max-width: 600px) {
  .command-dock.is-tactics-dock { left: 7px; right: 7px; height: 459px; grid-template-columns: 105px minmax(0, 1fr); grid-template-rows: 90px 363px; }
  .command-dock.is-tactics-dock .command-grid { height: 309px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); }
  .command-dock.is-tactics-dock .tactical-operation { font-size: 5px; letter-spacing: 0; }
  .command-dock.is-tactics-dock .tactical-card .command-name { font-size: 9px; }
  .command-dock.is-tactics-dock .tactical-metrics { gap: 2px; font-size: 6px; }
  .command-dock.is-tactics-dock .tactical-metrics b { font-size: 6px; }
  .command-dock.is-tactics-dock .tactical-card .command-cost { font-size: 9px; }
  .command-dock.is-tactics-dock .tactical-reset { font-size: 6px; }
  .command-dock.is-tactics-dock .selection-heading h3 { font-size: 10px; }
  .command-dock.is-tactics-dock .production-queue { max-width: 90px; }
  body:has(.is-tactics-dock) .placement-hint.ability-aim { bottom: min(495px, calc(100dvh - 114px)); }
}

@media (max-width: 420px) {
  .command-dock.is-tactics-dock { height: 560px; grid-template-rows: 90px 464px; }
  .command-dock.is-tactics-dock .command-grid { height: 410px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 1fr); }
  body:has(.is-tactics-dock) .placement-hint.ability-aim { bottom: min(596px, calc(100dvh - 114px)); }
}

.selection-panel.has-hq-upgrades { height: 310px; align-self: end; }
.selection-panel.has-hq-upgrades:has(.production-queue) { height: 350px; }
.has-hq-upgrades .selection-description, .has-hq-upgrades .selection-order { display: none; }
.hq-upgrade-control { position: absolute; left: 9px; right: 9px; bottom: 52px; display: grid; gap: 5px; }
.hq-upgrade-heading { color: #b4c9c5; font: 8px Consolas, monospace; letter-spacing: .7px; }
.hq-upgrade-control > button { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; height: 44px; padding: 6px 7px; overflow: hidden; text-align: left; color: #e6d3a5; border: 1px solid #829079; background: #2a3b35; }
.hq-upgrade-control > button:hover:not(:disabled) { border-color: #dbbd80; background: #37483a; }
.hq-upgrade-control > button:disabled { cursor: default; border-color: #53675f; background: #23302d; }
.hq-upgrade-control > button.installed { border-color: #719d88; background: #294036; }
.hq-upgrade-control > button.installing { border-color: #baa36d; }
.hq-upgrade-control strong { display: block; font-size: 10px; line-height: 1.2; }
.hq-upgrade-control small { display: block; margin-top: 3px; overflow: hidden; color: #b7c6ba; font: 8px Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }
.hq-upgrade-cost { display: flex; flex-wrap: wrap; justify-content: end; gap: 3px 6px; font: 9px Consolas, monospace; }
.hq-upgrade-cost .resource-icon { width: 10px; height: 10px; }
.hq-upgrade-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #142a23; }
.hq-upgrade-progress > span { display: block; height: 100%; background: #c9b375; }
.installed .hq-upgrade-progress > span { background: #91c7ab; }
.hq-dome-status { padding: 4px 0 0; color: #9fd5ec; }
.hq-dome-status > span { display: block; overflow: hidden; font: 8px Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }
.hq-dome-status > div { height: 5px; margin-top: 5px; background: #16313a; border: 1px solid #4a737d; }
.hq-dome-status > div > span { display: block; height: 100%; background: #7cc5e2; }
.hq-dome-status.recharging { color: #deb176; }
.hq-dome-status.recharging > div { border-color: #8e704d; }
.refinery-capacity, .air-repair-status { margin-top: 7px; color: #b6d7c3; font: 8px/1.4 Consolas, monospace; }
.refinery-capacity small, .air-repair-status small { display: block; margin-top: 3px; color: #a4b8bd; font: 8px/1.3 Consolas, monospace; }
.air-repair-status .resource-cost { margin-left: 4px; }

@media (max-width: 850px) {
  body.has-selection .selection-panel:has(.refinery-capacity), body.has-selection .selection-panel:has(.air-repair-status) { height: 110px; }
  body.has-selection .selection-panel.has-hq-upgrades, body.has-selection .selection-panel.has-hq-upgrades:has(.production-queue) { height: 238px; }
  body.has-selection .selection-panel.has-hq-upgrades #selection-content { height: 80px; padding-right: 8px; }
  .has-hq-upgrades .hq-upgrade-control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .has-hq-upgrades .hq-upgrade-heading, .has-hq-upgrades .hq-dome-status { grid-column: 1 / -1; }
  body.has-selection .has-hq-upgrades .repair-control { left: 9px; right: 9px; top: auto; bottom: 8px; width: auto; }
  body.has-selection .has-hq-upgrades .production-queue { position: static; max-width: 150px; height: auto; }
  body.has-selection .refinery-capacity, body.has-selection .air-repair-status { position: absolute; left: 8px; bottom: 7px; margin: 0; max-width: calc(100% - 185px); font-size: 7px; }
  body.has-selection .refinery-capacity small, body.has-selection .air-repair-status small { font-size: 7px; margin-top: 1px; }
  body.has-selection .air-repair-status { max-width: calc(100% - 16px); }
}
@media (max-width: 520px) {
  body.has-selection .selection-panel.has-hq-upgrades, body.has-selection .selection-panel.has-hq-upgrades:has(.production-queue) { height: 310px; }
  .has-hq-upgrades .hq-upgrade-control { grid-template-columns: minmax(0, 1fr); }
  body.has-selection .refinery-capacity { max-width: calc(100% - 160px); }
}

.command-dock.is-science-dock { left: 12px; right: 12px; width: auto; height: auto; min-height: 294px; max-height: calc(100dvh - 150px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #779890 #18252a; }
.is-science-dock .commands-panel { padding-bottom: 7px; }
.is-science-dock .command-scroll { display: none; }
.is-science-dock .command-tabs { padding-right: 0; }
.is-science-dock .command-groups { gap: 6px; overflow: visible; }
.is-science-dock .command-groups button { min-width: 130px; justify-content: center; font-size: 10px; }
.science-context { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 24px; border-bottom: 1px solid #506b6d; }
.science-context > strong { color: #c0d8d5; font-size: 8px; font-weight: 750; letter-spacing: .8px; }
.science-context > span { color: #b7cfbf; font: 9px Consolas, monospace; white-space: nowrap; }
.science-cancellations { display: flex; flex-wrap: wrap; gap: 5px; max-height: 104px; overflow-y: auto; padding-top: 5px; scrollbar-width: thin; }
.science-cancel-order { display: flex; align-items: center; flex: 1 1 290px; gap: 8px; min-width: 0; padding: 5px 7px; border: 1px solid #6f7170; background: #29353a; text-align: left; font-size: 9px; }
.science-cancel-order > span:first-child { flex: 1; min-width: 0; color: #e1e9e1; }
.science-cancel-order small { display: block; margin-top: 2px; color: #a5bcb8; font-size: 8px; }
.science-cancel-order > strong { color: #edc69b; font-size: 8px; }
.science-cancel-order .science-refund { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.science-cancel-order .resource-cost { display: inline-flex; align-items: center; gap: 3px; }
.science-cancel-order:hover { border-color: #edc69b; background: #3b3d39; }
.science-cancel-order:focus-visible { outline: 2px solid #ffe1a3; outline-offset: -3px; }
.science-cancel-order:disabled { opacity: .5; cursor: default; }
.is-science-dock .commands-panel.is-research .command-grid { height: auto; padding: 7px 0; display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--science-columns, 5), minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 170px; gap: 8px; overflow: visible; scroll-snap-type: none; }
.is-science-dock .commands-panel.is-research .research-card { --science-accent: #9ed4c4; display: flex; flex-direction: column; gap: 2px; height: 170px; padding: 6px; border: 1px solid #526e71; border-top-color: var(--science-accent); background: linear-gradient(145deg, #243941, #1b2b33 68%); box-shadow: inset 0 1px #b7dfcc24, 0 2px 5px #07131b55; }
.is-science-dock .research-card.science-armor { --science-accent: #d7c18e; }
.is-science-dock .research-card.science-infantry { --science-accent: #bad696; }
.is-science-dock .research-card.science-weapons { --science-accent: #e6ae82; }
.is-science-dock .research-card.science-airweapons { --science-accent: #9bcaeb; }
.is-science-dock .research-card.science-advanced { --science-accent: #b6addb; }
.is-science-dock .research-card.science-gasextraction { --science-accent: #9ce7cd; }
.is-science-dock .research-card.science-advanced2 { --science-accent: #a2e1c6; }
.is-science-dock .research-card.science-collectorarmor { --science-accent: #dcc28a; }
.is-science-dock .research-card.science-collectorrepair { --science-accent: #a8d8ac; }
.is-science-dock .research-card.science-collectorrange { --science-accent: #a7d9eb; }
.is-science-dock .research-card.science-collectorrange .research-effect { flex: 0 0 20px; min-height: 20px; height: 20px; white-space: normal; font-size: 7px; }
.is-science-dock .research-card.science-stormpower { --science-accent: #e0c6f2; }
.is-science-dock .research-card:hover, .is-science-dock .research-card:focus-visible { border-color: var(--science-accent); background: linear-gradient(145deg, #2e4950, #21343d 70%); }
.is-science-dock .research-card .command-number { z-index: 2; top: 10px; right: 10px; padding: 1px 4px; color: #d3e8df; background: #172a31dc; border: 1px solid #84b3ab80; font-size: 8px; }
.is-science-dock .research-card .command-lock { z-index: 3; top: 9px; left: 9px; width: 16px; height: 16px; }
.is-science-dock .research-card .command-badge { display: none !important; }
.science-card-art { position: relative; flex: 0 0 48px; overflow: hidden; border: 1px solid #628d8a5c; background: radial-gradient(ellipse at 60% 110%, #9dd7be32, transparent 70%), linear-gradient(0deg, #78b5b415 1px, transparent 1px), linear-gradient(90deg, #78b5b415 1px, transparent 1px), #1a303a; background-size: auto, 12px 12px, 12px 12px, auto; }
.science-card-art::before { content: ''; position: absolute; left: 8px; right: 8px; top: 9px; bottom: 7px; border: 1px solid #9ac9b732; clip-path: polygon(0 0, 19% 0, 19% 4%, 1% 4%, 1% 45%, 0 45%, 0 100%, 100% 100%, 100% 55%, 99% 55%, 99% 96%, 81% 96%, 81% 100%, 0 100%); }
.science-category { position: absolute; z-index: 1; top: 4px; left: 5px; max-width: calc(100% - 30px); overflow: hidden; color: var(--science-accent); font: 6px Consolas, monospace; letter-spacing: .5px; white-space: nowrap; text-overflow: ellipsis; }
.is-science-dock .research-card.locked .science-category { left: 24px; max-width: calc(100% - 52px); }
.is-science-dock .research-card .command-icon { position: absolute; top: 8px; left: 50%; width: 92px; height: 42px; margin: 0 0 0 -46px; color: var(--science-accent); filter: drop-shadow(0 3px 2px #071519); }
.is-science-dock .research-card .command-icon .sprite-icon { width: 92px; height: 44px; }
.is-science-dock .research-card .command-icon svg { width: 39px; height: 39px; }
.science-circuit-mark { position: absolute; right: 5px; bottom: 1px; color: var(--science-accent); opacity: .25; font: 700 18px Consolas, monospace; letter-spacing: -1px; }
.is-science-dock .research-card .command-name { flex: 0 0 26px; min-height: 26px; margin-top: 2px; padding: 0; color: #f1eee1; font-size: 11px; line-height: 1.15; }
.is-science-dock .research-card .research-levels { min-height: 16px; margin: 0; }
.is-science-dock .research-card .research-levels i { height: 16px; width: 24px; color: #adc2c5; border-color: #617d7d; background: #132931; font-size: 9px; }
.is-science-dock .research-card .research-levels i.earned { color: #f2e4b7; border-color: #c5b77b; background: #4b5140; }
.is-science-dock .research-card .research-levels b { color: #d4dfcf; font-size: 10px; }
.is-science-dock .research-card .research-levels em { color: #a6c6bf; font-size: 7px; }
.is-science-dock .research-card .research-effect { flex: 0 0 12px; min-height: 12px; height: 12px; margin: 0; color: var(--science-accent); font-size: 8px; line-height: 1.3; white-space: nowrap; }
.science-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2px 6px; min-height: 23px; margin-top: auto; }
.is-science-dock .research-card .command-cost { margin: 0; font-size: 10px; gap: 5px; }
.is-science-dock .research-card .research-time { margin: 0; color: #b2c3c6; font-size: 7px; line-height: 1.25; }
.science-state { flex: 0 0 11px; display: block; overflow: hidden; padding-top: 1px; color: #a5d8be; font: 7px Consolas, monospace; letter-spacing: .2px; white-space: nowrap; text-overflow: ellipsis; }
.science-card-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #142a30; }
.science-card-progress > span { display: block; height: 100%; background: var(--science-accent); }
.is-science-dock .research-card[data-science-state='researching'] { border-color: #c4ae7e; }
.is-science-dock .research-card[data-science-state='researching'] .science-state { color: #f3d595; }
.is-science-dock .research-card[data-science-state='complete'] { border-color: #789e88; background: linear-gradient(145deg, #2d473d, #20342f 70%); }
.is-science-dock .research-card[data-science-state='complete'] .science-state { color: #b4e5bf; }
.is-science-dock .research-card[data-science-state='locked'] .science-state { color: #cfbb94; }
.is-science-dock .research-card[data-science-state='shortage'] .science-state { color: #efae8e; }
.is-science-dock .research-card.locked .command-icon { opacity: .58; filter: grayscale(.35) drop-shadow(0 3px 2px #071519); }
.is-science-dock .command-context { margin-top: 2px; font-size: 8px; }

@media (max-width: 1399px) {
  .is-science-dock .commands-panel.is-research .command-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 162px; }
  .is-science-dock .commands-panel.is-ai-research .command-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .is-science-dock .commands-panel.is-research .research-card { height: 162px; }
  .is-science-dock .science-card-art { flex-basis: 42px; }
  .is-science-dock .research-card .command-icon { top: 5px; height: 39px; }
}
@media (max-width: 1100px) {
  .command-dock.is-science-dock { left: 10px; right: 10px; min-height: 0; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: 90px auto; }
  .is-science-dock .radar-panel { grid-column: 1; grid-row: 1; }
  .is-science-dock .radar-panel canvas { height: 48px; margin-top: 3px; }
  .is-science-dock .radar-caption { margin-top: 2px; font-size: 6px; }
  .command-dock.is-science-dock .selection-panel { display: block; position: relative; grid-column: 2; grid-row: 1; left: auto; right: auto; bottom: auto; height: 90px; }
  .is-science-dock .selection-panel .panel-title { display: none; }
  .is-science-dock .selection-panel #selection-content { padding: 7px 8px; }
  .is-science-dock .selection-panel .selection-description, .is-science-dock .selection-panel .selection-order { display: none; }
  .is-science-dock .commands-panel { grid-column: 1 / -1; grid-row: 2; }
  .command-dock.is-science-dock:has(.has-hq-upgrades) { grid-template-rows: 238px auto; }
  .command-dock.is-science-dock .selection-panel.has-hq-upgrades { height: 238px; }
  .is-science-dock .has-hq-upgrades .hq-upgrade-control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-science-dock .has-hq-upgrades .hq-upgrade-heading, .is-science-dock .has-hq-upgrades .hq-dome-status { grid-column: 1 / -1; }
  .is-science-dock .has-hq-upgrades .repair-control { left: 9px; right: 9px; top: auto; bottom: 8px; width: auto; }
  .command-dock.is-science-dock:has(.refinery-capacity), .command-dock.is-science-dock:has(.air-repair-status) { grid-template-rows: 110px auto; }
  .command-dock.is-science-dock .selection-panel:has(.refinery-capacity), .command-dock.is-science-dock .selection-panel:has(.air-repair-status) { height: 110px; }
}
@media (max-width: 600px) {
  .command-dock.is-science-dock { left: 7px; right: 7px; grid-template-columns: 105px minmax(0, 1fr); }
  .is-science-dock .commands-panel.is-research .command-grid, .is-science-dock .commands-panel.is-ai-research .command-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .is-science-dock .command-groups button { min-width: 112px; font-size: 9px; }
  .is-science-dock .science-context > strong { font-size: 7px; letter-spacing: .2px; }
  .is-science-dock .science-context > span { font-size: 8px; }
  .is-science-dock .research-card .command-name { font-size: 10px; }
  .is-science-dock .research-card .command-cost { font-size: 9px; }
  .is-science-dock .science-category { font-size: 5px; letter-spacing: 0; }
}
@media (max-width: 520px) {
  .command-dock.is-science-dock:has(.has-hq-upgrades) { grid-template-rows: 310px auto; }
  .command-dock.is-science-dock .selection-panel.has-hq-upgrades { height: 310px; }
  .is-science-dock .has-hq-upgrades .hq-upgrade-control { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .is-science-dock .commands-panel.is-research .command-grid, .is-science-dock .commands-panel.is-ai-research .command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.production-status { margin-top: 9px; padding-top: 7px; border-top: 1px solid #63778066; color: #b9cbd0; font-size: 10px; line-height: 1.4; }
.production-status span, .production-status strong { display: block; }
.production-status strong { color: #f0cf91; font: 12px/1.5 Consolas, monospace; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) { display: flex; flex-direction: column; height: auto; max-height: min(440px, calc(100dvh - 160px)); align-self: end; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) .panel-title { flex: 0 0 25px; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) #selection-content { display: block; flex: 1 1 auto; min-height: 0; height: auto; padding: 9px 10px; overflow-y: auto; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) .selection-heading { margin-bottom: 8px; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) .health-row { margin-left: 0; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) :is(.air-repair-status, .refinery-capacity, .depot-status) { position: static; width: auto; max-width: none; margin-top: 7px; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) .production-queue { position: static; width: auto; max-width: none; height: auto; margin-top: 6px; flex-shrink: 0; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) .queue-item { flex-basis: 42px; width: 42px; height: 39px; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) .queue-time { right: 3px; bottom: 4px; font-size: 9px; }
body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) :is(.repair-control, .hq-upgrade-control) { position: static; flex: 0 0 auto; width: auto; max-width: none; margin: 0 9px 8px; }
@media (max-width: 1100px) {
  .command-dock:is(.is-science-dock, .is-tactics-dock):has(.production-queue, .has-hq-upgrades) { grid-template-rows: auto auto; }
}
@media (max-width: 850px) {
  body.has-selection .command-dock .selection-panel:is(:has(.production-queue), .has-hq-upgrades) { max-height: min(360px, calc(100dvh - 300px)); }
}

.garrison-control { margin-top: 8px; padding-top: 7px; border-top: 1px solid #667e8266; }
.garrison-control > strong { display: block; color: #d6e7c3; font: 10px/1.4 Consolas, monospace; }
.garrison-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 6px 0; }
.garrison-slot { display: grid; place-items: center; height: 32px; min-width: 0; color: #6a817e; background: #14262c; border: 1px dashed #577276; }
.garrison-slot.occupied { border-style: solid; border-color: #b3c997; background: #293f3d; }
.garrison-slot .sprite-icon, .garrison-slot svg { width: 28px; height: 28px; }
.garrison-control > small { display: block; color: #acc4c3; font-size: 9px; line-height: 1.4; }
.garrison-control > button { width: 100%; min-height: 30px; margin-top: 7px; border: 1px solid #8ca58c; background: #304740; color: #e0ecd2; font-size: 10px; }
.garrison-control > button:hover:not(:disabled) { background: #426052; border-color: #d4e6aa; }
.garrison-control > button:focus-visible { outline: 2px solid #f1d38b; outline-offset: 2px; }
.garrison-control > button:disabled { opacity: .5; cursor: default; }
body.has-selection .command-dock .selection-panel:has(.garrison-control) { display: flex; flex-direction: column; height: auto; max-height: min(380px, calc(100dvh - 180px)); align-self: end; }
body.has-selection .command-dock .selection-panel:has(.garrison-control) .panel-title { flex: 0 0 25px; }
body.has-selection .command-dock .selection-panel:has(.garrison-control) #selection-content { display: block; height: auto; min-height: 0; padding: 9px 10px; overflow-y: auto; }
body.has-selection .command-dock .selection-panel:has(.garrison-control) .health-row { margin-left: 0; }
body.has-selection .command-dock .selection-panel:has(.garrison-control) .selection-order { display: none; }
body.has-selection .command-dock .selection-panel:has(.garrison-control) .repair-control { position: static; flex: 0 0 auto; width: auto; max-width: none; margin: 0 9px 8px; }
@media (max-width: 1100px) {
  .command-dock:is(.is-science-dock, .is-tactics-dock):has(.garrison-control) { grid-template-rows: auto auto; }
}