.inventory-grid { max-height: 540px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.battle-records { max-height: 320px; overflow-y: auto; display: grid; gap: 6px; margin-block: 12px; }
:focus-visible { outline: 2px solid #70edee; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
:root {
  color-scheme: dark;
  scroll-padding-block: 24px;
  --bg: #080e12; --panel: #101b23; --panel-2: #17262d; --line: #274552;
  --text: #ecf3f5; --muted: #a6bbc3; --soft: #718c98;
  --accent: #57d9e8; --accent-2: #ffce72; --danger: #ff727e;
  --blue: #68b6f4; --core: #a4dc8a; --radius: 0;
  --weapon-hud-band: 80px;
  --weapon-button-size: 66px;
  --weapon-art-size: 48px;
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
[hidden] { display: none !important; }
button, select, input { font: inherit; image-rendering: pixelated; }
button {
  min-height: 40px; padding: 4px 10px; color: var(--text); cursor: pointer;
  border: 8px solid transparent; border-image: url("assets/ui/themes/cyan/button_normal.png") 4 fill / 8px / 0 stretch;
  border-radius: 0; background: none; line-height: 1.35; overflow-wrap: anywhere; transition: color 100ms ease;
}
button:hover:not(:disabled), button:focus-visible {
  border-image-source: url("assets/ui/themes/cyan/button_hover.png"); color: #fff;
}
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #efffff; outline-offset: 2px; }
button:active:not(:disabled), button[aria-pressed="true"] { border-image-source: url("assets/ui/themes/cyan/button_pressed.png"); }
button:disabled { border-image-source: url("assets/ui/themes/cyan/button_disabled.png"); color: var(--soft); cursor: not-allowed; }
button.primary { color: #b8f8ff; font-weight: 700; border-image-source: url("assets/ui/themes/cyan/button_hover.png"); }
button.primary:disabled { color: var(--soft); border-image-source: url("assets/ui/themes/cyan/button_disabled.png"); }
button.danger { color: #ffa0a5; }
button.ghost { color: var(--muted); }
select {
  width: 100%; min-width: 0; min-height: 40px; padding: 4px 22px 4px 8px; color: var(--text);
  border: 6px solid transparent; border-image: url("assets/ui/themes/cyan/line_edit.png") 4 fill / 6px / 0 stretch;
  background: url("assets/ui/themes/cyan/arrow.png") no-repeat right 5px center / 14px 8px;
  border-radius: 0; appearance: none;
}
option { background: #10212b; color: var(--text); }
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; margin: 0 4px; flex: 0 0 20px; background: url("assets/ui/themes/cyan/checkbox_off.png") center / 18px 18px no-repeat; cursor: pointer; }
input[type="checkbox"]:checked { background-image: url("assets/ui/themes/cyan/checkbox_on.png"); }
input[type="checkbox"]:disabled { opacity: 0.4; }
img { image-rendering: pixelated; object-fit: contain; }
a { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 800; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 16px; margin-bottom: 8px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.fine, .meta { color: var(--muted); line-height: 1.5; font-size: 12px; overflow-wrap: anywhere; }
.fine { margin-top: 8px; }
.shell { width: min(1600px, 100%); margin: auto; padding: 12px 24px 10px; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 40px; height: 40px; flex: 0 0 40px; }
.brand-copy { min-width: 0; }
.brand-copy .eyebrow { margin: 5px 0 0; }
.clock-panel { margin-left: auto; text-align: right; font-size: 11px; color: var(--muted); }
.clock-panel strong { display: block; font-size: 13px; margin-top: 4px; color: var(--text); }
.resource-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.resource-strip article { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 14px; align-items: center; border-right: 1px solid var(--line); }
.resource-strip article:first-child { padding-left: 0; }
.resource-strip article:last-child { border: 0; }
.resource-icon { grid-row: 1 / 3; width: 32px; height: 32px; }
.resource-strip span { color: var(--muted); font-size: 11px; grid-column: 2; }
.resource-strip strong { font-size: 18px; grid-column: 2; grid-row: 2; font-variant-numeric: tabular-nums; }
.resource-strip small { grid-column: 3; grid-row: 2; color: var(--soft); font-size: 11px; }
.layout { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.tabs { display: grid; gap: 6px; }
.tab { display: flex; justify-content: start; align-items: center; gap: 8px; text-align: left; min-height: 46px; width: 100%; padding: 2px 6px; }
.tab.is-active { border-image-source: url("assets/ui/themes/cyan/button_pressed.png"); color: #fff; font-weight: 700; }
.tab-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.view { display: none; min-width: 0; min-height: 600px; padding: 4px 0 14px; }
.view.is-active { display: block; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.stack { display: grid; gap: 12px; }
.cards > article, .unit-card, .report, .contract-item, .commander-candidate, .loot-drop {
  min-width: 0; border: 8px solid transparent; border-image: url("assets/ui/themes/cyan/panel.png") 4 fill / 8px / 0 stretch; padding: 12px;
}
.card-top, .unit-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card-top > div, .unit-top > div { flex: 1; min-width: 0; }
.building-icon { width: 48px; height: 48px; flex: 0 0 48px; }
.commander-portrait { width: 64px; height: 64px; flex: 0 0 64px; border: 6px solid transparent; border-image: url("assets/ui/themes/cyan/panel_inset.png") 3 fill / 6px / 0 stretch; }
.building-card > button { width: 100%; }
.badge { display: inline-flex; align-items: center; padding: 4px 6px; min-height: 24px; background: #173b43; color: #b8f3ec; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.warning { background: #353027; color: var(--accent-2); }
.badge.danger { background: #392329; color: var(--danger); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin: 8px 0 10px; }
.stat { min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stat span { display: block; color: var(--muted); font-size: 11px; }
.stat strong { display: block; margin-top: 3px; font-size: 14px; overflow-wrap: anywhere; }
.progress, .meter-track { height: 18px; padding: 4px; border: 0; border-image: url("assets/ui/themes/cyan/progress_bg.png") 3 fill / 6px / 0 stretch; overflow: hidden; }
.progress > span, .meter-track i { display: block; height: 100%; background: url("assets/ui/bars/bar_blue.png") repeat-x left center / auto 100%; }
.combat-view { position: relative; min-height: 0; overflow: hidden; padding: 0; border: 1px solid var(--line); background: #060c10; }
.combat-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.combat-options label, .stage-result label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.combat-options select, .stage-result select { width: 214px; max-width: 100%; font-size: 12px; }
#fire-weapons { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.command-icon { width: 20px; height: 20px; }
.action-icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; }
.heading-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
#combat-run-status { color: var(--accent-2); }
#combat-season { margin: 0; font-size: 11px; }
.combat-lab { padding: 8px 10px; border-bottom: 1px solid var(--line); }
summary { cursor: pointer; }
.combat-lab summary { font-size: 12px; font-weight: 700; color: var(--muted); }
.lab-config, .lab-weapons { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.combat-lab label { min-width: 0; font-size: 12px; color: var(--muted); }
.combat-lab select { margin-top: 6px; font-size: 12px; }
.lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; }
.ship-portrait { width: 64px; height: 64px; flex: 0 0 64px; }
.ship-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ship-identity > div { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.combat-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; min-height: 520px; max-height: calc(100vh - 200px); background: #030709; }
canvas { display: block; }
#combat-canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; touch-action: none; }
.combat-top-hud, .combat-side-hud, .target-hud, .combat-message, .loot-reveal, .boss-hud { position: absolute; z-index: 2; }
.combat-top-hud { top: 14px; left: 16px; right: 16px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: start; gap: 8px; pointer-events: none; }
.combat-identity, .wave-readout, .combat-score, .target-hud, .combat-side-hud, .boss-hud, .manual-guide, .combat-tooltip {
  border: 6px solid transparent; border-image: url("assets/ui/themes/cyan/panel.png") 4 fill / 6px / 0 stretch;
}
.combat-identity { display: flex; align-items: center; gap: 8px; justify-self: start; max-width: 260px; padding: 6px 8px; }
.status-light { width: 8px; height: 8px; flex: 0 0 8px; background: url("assets/ui/icons/check.png") center / contain no-repeat; }
.combat-top-hud small, .combat-top-hud span, .target-hud span, .footer-label { display: block; color: var(--muted); font-size: 10px; font-weight: 600; }
.combat-top-hud strong { font-size: 14px; }
.stage-hud { display: grid; justify-items: center; gap: 4px; }
.wave-readout { min-width: 80px; padding: 4px 12px; text-align: center; }
.wave-readout strong { display: block; font-size: 24px; color: #fff; }
#combat-mode { width: 112px; height: 32px; min-height: 32px; padding: 0; font-size: 12px; font-weight: 700; color: var(--accent); pointer-events: auto; }
#combat-mode[data-mode="manual"] { color: #061a21; }
.combat-score { justify-self: end; min-width: 120px; padding: 6px 8px; text-align: right; }
.combat-side-hud { top: 88px; left: 16px; width: 286px; display: grid; gap: 8px; padding: 8px; }
.combat-meter { display: grid; grid-template-columns: 24px minmax(0, 1fr) 35px; align-items: center; gap: 8px; }
.combat-meter strong { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.hud-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.flip-icon { transform: scaleX(-1); }
.meter-track i { width: 100%; transition: width 120ms linear; }
.hull-meter .meter-track i { background-image: url("assets/ui/bars/bar_red.png"); }
.armor-meter .meter-track i { background-image: url("assets/ui/bars/bar_gold.png"); }
.target-hud { top: 88px; right: 16px; min-width: 100px; padding: 6px 8px; text-align: right; cursor: help; }
.target-hud strong { color: var(--danger); font-size: 18px; }
.boss-hud { top: 128px; left: 50%; transform: translateX(-50%); width: min(260px, 38%); padding: 4px 8px; pointer-events: none; background: #06111bcc; border-image: none; border: 1px solid #3ee8fa80; }
.boss-hud strong, .boss-hud span { display: block; font-size: 12px; line-height: 17px; }
.boss-hud small { display: block; font-size: 11px; color: var(--muted); }
.boss-hud strong { color: #ffb9d6; }
.boss-hud span { color: var(--muted); }
progress { display: block; appearance: none; width: 100%; height: 8px; border: 0; background: #142833; }
progress::-webkit-progress-bar { background: #142833; }
progress::-webkit-progress-value { background: url("assets/ui/bars/bar_blue.png") repeat-x left center / auto 100%; }
progress::-moz-progress-bar { background: url("assets/ui/bars/bar_blue.png") repeat-x left center / auto 100%; }
.boss-hud progress { margin-top: 5px; height: 10px; }
.boss-hud progress::-webkit-progress-value { background-image: url("assets/ui/bars/bar_red.png"); }
.combat-message, .loot-reveal { left: 50%; transform: translate(-50%, -50%); border: 10px solid transparent; border-image: url("assets/ui/themes/cyan/panel.png") 4 fill / 10px / 0 stretch; overflow-y: auto; padding: 14px; }
.combat-message { top: calc(50% + 56px); width: min(440px, calc(100% - 32px)); max-height: calc(100% - 144px); text-align: left; }
.combat-message h2 { font-size: 22px; margin-bottom: 6px; }
.combat-message p:not(.eyebrow) { font-size: 12px; color: var(--muted); line-height: 1.4; }
.sector-picker { display: grid; gap: 4px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.sector-summary { padding: 8px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.combat-loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.combat-message .combat-loadout { display: none; }
.single-loadout > div { min-width: 0; border-top: 1px solid var(--line); padding-top: 8px; }
.single-loadout span, .assigned-unit span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.single-loadout strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.combat-launch { width: 100%; }
.loot-reveal { top: 50%; width: min(580px, calc(100% - 32px)); max-height: calc(100% - 34px); }
.loot-reveal h2 { margin-bottom: 14px; }
.loot-reveal-list { display: grid; gap: 8px; margin-bottom: 12px; }
.loot-drop-top, .loot-actions, .candidate-actions, .module-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loot-drop-top { justify-content: space-between; }
.loot-drop .module-copy { margin: 9px 0; }
.loot-comparison { color: var(--accent-2); margin: 8px 0; font-size: 12px; }
.manual-guide { position: absolute; z-index: 2; right: 12px; bottom: 4px; display: flex; gap: 12px; padding: 2px 6px; font-size: 13px; line-height: 18px; max-width: calc(100% - 24px); pointer-events: none; }
.manual-guide kbd { font: inherit; font-weight: 700; color: var(--accent-2); }
.combat-commandbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line); }
.combat-controls { display: flex; gap: 8px; }
.combat-controls button, .dock-control { position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; }
.combat-control-group { min-width: 0; }
.control-cooldown { position: absolute; inset: 0; display: grid; place-items: center; background: #0c1820ee; color: var(--muted); font-size: 12px; font-weight: 700; }
.control-cooldown:empty { display: none; }
.combat-frame { box-sizing: content-box; padding-bottom: var(--weapon-hud-band); }
.weapon-readiness { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 6px; padding: 0; }
#combat-flight-mode { display: none; }
.weapon-mounts { display: grid; grid-template-columns: repeat(var(--mount-count, 4), minmax(0, var(--weapon-button-size))); gap: 6px; }
.weapon-mount { position: relative; display: grid; place-items: center; width: 100%; height: var(--weapon-button-size); padding: 0 0 4px; border: 4px solid transparent; border-image: url("assets/ui/themes/cyan/skill_slot.png") 3 fill / 4px / 0 stretch; cursor: help; }
.weapon-mount[aria-pressed="true"] { outline: 1px solid var(--accent); outline-offset: 1px; }
.weapon-condition { position: absolute; right: 0; top: 0; background: #081219; color: #ffb17d; font-size: 10px; font-weight: 700; line-height: 12px; }
.weapon-condition:empty { display: none; }
.weapon-mount[data-state="ready"], .weapon-mount:hover, .weapon-mount:focus-visible { border-image-source: url("assets/ui/themes/cyan/skill_slot_active.png"); }
.weapon-mount:focus-visible { outline: 2px solid #efffff; outline-offset: 2px; }
.weapon-hud-icon { width: var(--weapon-art-size); height: var(--weapon-art-size); image-rendering: pixelated; }
.weapon-mount progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; }
.weapon-mount[data-state="reloading"] progress::-webkit-progress-value { background-image: url("assets/ui/bars/bar_gold.png"); }
.combat-tooltip { position: absolute; z-index: 8; padding: 6px 8px; border-image-source: url("assets/ui/themes/cyan/tooltip.png"); color: var(--text); font-size: 12px; line-height: 18px; pointer-events: none; }
.stage-result { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.stage-result > strong { color: var(--accent-2); }
.stage-result-actions { display: flex; gap: 8px; }
.stage-result-actions button { display: grid; place-items: center; width: 40px; padding: 0; }
#result-finish { width: auto; padding: 2px 8px; }
.combat-footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.combat-footer > div { min-width: 0; padding: 8px 10px; border-right: 1px solid var(--line); }
.combat-footer > div:last-child { border: 0; }
.combat-footer strong { display: block; font-size: 13px; line-height: 1.35; min-height: 36px; margin-top: 3px; overflow-wrap: anywhere; }
.combat-footer .footer-primary { display: block; }
.combat-footer strong small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.combat-information { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 3fr); border-top: 1px solid var(--line); }
.combat-information:has(.stage-result[hidden]) { grid-template-columns: 1fr; }
.combat-information .stage-result { padding: 8px; gap: 6px; border: 0; }
.combat-information .combat-footer { border: 0; }
.combat-information .combat-footer > div { padding: 6px 8px; }
.combat-information .combat-footer strong { min-height: 0; }
.manual-guide { bottom: calc(var(--weapon-hud-band) + 4px); }
.manual-guide { border-image-slice: 4; background: #06111b80; }
.action-notices { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 0; margin-bottom: 8px; border-block: 1px solid var(--line); }
.action-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.action-notice[data-priority="0"] { color: #ffafbf; }
.action-notice button, .launch-reason button { font-size: 12px; min-height: 30px; padding: 2px 8px; }
.launch-reason { font-size: 12px; line-height: 18px; margin-top: 6px; color: #ffbf96; }
.launch-reason p { margin: 0 0 4px; }
.building-card h3:has(.building-repair-link) { display: flex; align-items: center; gap: 8px; }
.building-repair-link { min-height: 24px; font-size: 11px; line-height: 16px; border-width: 4px; border-image-width: 4px; padding: 0 4px; }
.repairs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.repair-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.repair-row > span { min-width: 0; overflow-wrap: anywhere; }
.repair-row > .module-icon, .repair-row > .inventory-ship { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.workshop-icon { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.workshop-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 12px; border-block: 1px solid var(--line); padding-block: 12px; }
.workshop-bands section { min-width: 0; }
.workshop-bands h3 { font-size: 16px; }
.workshop-bands p { font-size: 12px; }
.workshop-bands select { width: 100%; }
.compact-workshop { padding-block: 6px; gap: 10px; }
.rarity-name, .tile-name, .equipment-slot small, .equipped-ship strong, .inventory-tile small { color: var(--rarity, var(--text)); }
.rarity-common { --rarity: #a9b4bf; } .rarity-uncommon { --rarity: #64f2c7; } .rarity-rare { --rarity: #57b8ff; } .rarity-epic { --rarity: #d787ff; } .rarity-legendary { --rarity: #ffca63; }
.loot-drop strong { color: var(--rarity, var(--text)); }
details[data-secondary-panel] > summary { color: var(--text); cursor: pointer; padding: 7px 0; }
.secondary-panel-body { max-height: min(60dvh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 8px 0; }
.panel-close { display: block; margin: 0 0 8px auto; min-height: 30px; font-size: 12px; }
.equip-best-toolbar, .merge-toolbar, .inventory-pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; margin: 6px 0; }
.equip-best-toolbar label, .merge-toolbar label { flex: 1; min-width: 100px; }
.inventory-pagination { align-items: center; font-size: 12px; }
.inventory-pagination button { width: 40px; }
.batch-preview-groups { max-height: 280px; overflow-y: auto; border-block: 1px solid var(--line); }
.automatic-equipment-preview > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; padding-block: 4px; border-bottom: 1px solid var(--line); }
.automatic-equipment-preview span { overflow-wrap: anywhere; }
@media (max-width: 450px) { .automatic-equipment-preview > div { grid-template-columns: minmax(0, 1fr); } }
.merge-input { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.merge-input .inventory-ship { width: 44px; height: 44px; object-fit: contain; }
.merge-input span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.merge-input small { display: block; color: var(--muted); font-size: 11px; }
#auto-repair-panel { border-bottom: 1px solid var(--accent); padding-bottom: 10px; margin-bottom: 10px; }
#auto-repair-panel > summary { font-size: 16px; color: var(--accent); }
#ship-workshop pre, #repair-history pre, #workshop-history pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
@media (max-width: 700px) { .workshop-bands { grid-template-columns: minmax(0, 1fr); } }
.repair-row small { display: block; color: var(--muted); }
.repair-row button { flex: 0 0 auto; font-size: 12px; }
.active-orders { margin: 8px 0 12px; }
.active-order { padding: 8px 0; border-bottom: 1px solid var(--line); }
.active-order header { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.active-order h4 { font-size: 14px; margin: 0; }
.active-order p { font-size: 12px; margin: 4px 0; }
.active-order progress { height: 8px; margin: 6px 0; }
#view-missions .pool-band { padding: 8px 0; margin: 8px 0; }
#view-missions .mission-builder { gap: 8px; padding: 8px 0; }
#view-missions .contract-inventory { padding: 8px 0; }
#view-missions .contract-inventory { margin: 8px 0 12px; }
#view-missions .contract-inventory > summary { padding: 6px 0; }
#view-missions .contract-inventory > .grid-details-layout { padding-bottom: 8px; }
#view-missions .item-detail-pane, #view-missions .inventory-grid { min-height: 0; }
#view-missions .mission-builder .launch-reason { grid-column: 1 / -1; }
#view-missions .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
#view-missions .inventory-tile { min-height: 116px; height: 116px; padding: 4px; grid-template-rows: 40px 32px 26px; }
#view-missions .inventory-tile > .ui-icon { width: 36px; height: 36px; }
.construction-banner { display: none; padding: 8px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.construction-banner > .fine { display: block; margin-top: 2px; }
.construction-banner.is-visible { display: block; }
.construction-banner .progress { margin-top: 10px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.module-bay { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.module-count { font-size: 12px; color: var(--muted); }
.module-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 20px; }
.module-slots, .module-inventory { display: grid; gap: 8px; }
.module-slot, .module-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.module-icon, .module-symbol { width: 48px; height: 48px; border: 6px solid transparent; border-image: url("assets/ui/themes/cyan/slot_common.png") 3 fill / 6px / 0 stretch; background: none; image-rendering: pixelated; }
.rarity-uncommon { --rarity-frame: url("assets/ui/themes/cyan/slot_uncommon.png"); --rarity-color: #97df99; }
.rarity-rare { --rarity-frame: url("assets/ui/themes/cyan/slot_rare.png"); --rarity-color: #8ac8ff; }
.rarity-epic { --rarity-frame: url("assets/ui/themes/cyan/slot_epic.png"); --rarity-color: #dba5f5; }
.rarity-legendary { --rarity-frame: url("assets/ui/themes/cyan/slot_legendary.png"); --rarity-color: #ffce72; }
[class*="rarity-"] .module-icon { border-image-source: var(--rarity-frame, url("assets/ui/themes/cyan/slot_common.png")); }
[class*="rarity-"] .module-copy > strong, .contract-item > div > strong { color: var(--rarity-color, var(--text)); }
.module-copy { min-width: 0; }
.module-copy strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.module-copy span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.module-actions { grid-column: 2; justify-content: start; }
.module-actions button { min-height: 34px; font-size: 11px; padding: 2px 6px; }
.module-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.module-filters select { font-size: 12px; }
.module-slot.is-empty { opacity: 0.65; }
.module-item.is-locked .module-copy > strong::after, .module-slot.is-locked .module-copy > strong::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 5px; background: url("assets/ui/icons/lock.png") center / contain no-repeat; vertical-align: middle; }
.module-empty-copy { padding: 20px 0; color: var(--muted); font-size: 13px; }
.commander-candidate { margin-top: 12px; }
.candidate-trait { padding: 12px 0; border-top: 1px solid var(--line); }
.candidate-trait strong, .candidate-trait span { display: block; }
.candidate-trait span { font-size: 12px; margin-top: 5px; color: var(--muted); }
.candidate-actions { margin-top: 12px; }
.nft-boundary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-block: 1px solid var(--line); }
.nft-boundary > div { min-width: 0; }
.nft-boundary span { display: block; color: var(--muted); font-size: 11px; }
.nft-boundary strong { display: block; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.mission-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 16px; padding: 12px 0 20px; border-bottom: 1px solid var(--line); }
.mission-builder label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.assigned-unit strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.contract-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.contract-icon { float: left; width: 48px; height: 48px; margin-right: 12px; }
.contract-item .stats { clear: both; }
.contract-item > button { width: 100%; margin-top: 12px; }
.mission-subheading { margin-top: 24px; }
.galaxy-tabs { display: grid; grid-template-columns: repeat(10, minmax(112px, 1fr)); gap: 4px; overflow-x: auto; padding: 0 0 12px; }
.galaxy-tab { min-height: 64px; padding: 2px 4px; text-align: left; border-image: url("assets/ui/themes/cyan/tab_unselected.png") 4 5 4 2 fill / 8px / 0 stretch; }
.galaxy-tab:hover:not(:disabled) { border-image-source: url("assets/ui/themes/cyan/tab_hover.png"); }
.galaxy-tab[aria-pressed="true"] { border-image-source: url("assets/ui/themes/cyan/tab_selected.png"); }
.galaxy-tab span { display: block; color: var(--accent); font-size: 10px; }
.galaxy-tab strong { display: block; margin-top: 4px; font-size: 12px; line-height: 1.25; }
.galaxy-tab.is-locked span { color: var(--soft); }
.galaxy-travel-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 20px; }
.galaxy-level-sidebar { min-width: 0; border-right: 1px solid var(--line); padding-right: 12px; }
.galaxy-list-heading { display: flex; justify-content: space-between; padding: 10px 0 14px; font-size: 11px; }
.galaxy-list-heading span { color: var(--muted); }
.galaxy-levels { max-height: 550px; overflow-y: auto; }
.galaxy-level-option { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; min-height: 66px; width: 100%; padding: 4px; margin-bottom: 6px; text-align: left; }
.galaxy-level-option > span { align-self: center; font-size: 12px; color: var(--accent); }
.galaxy-level-option strong { display: block; font-size: 12px; }
.galaxy-level-option small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.galaxy-level-option.is-cleared small { color: var(--core); }
.galaxy-level-option.is-locked > span { color: var(--soft); }
.galaxy-level-option[aria-pressed="true"], .galaxy-level-option[aria-pressed="true"] :is(span, small, strong), .route-node[aria-pressed="true"] { color: #061a21; }
.galaxy-route-content { min-width: 0; }
.galaxy-route-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; font-size: 12px; }
.route-legend { display: flex; gap: 12px; font-size: 10px; color: var(--muted); }
.route-legend span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--soft); }
.route-legend .route-cleared::before { background: var(--core); }
.route-legend .route-open::before { background: var(--accent); }
.galaxy-route { position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 340px; overflow: hidden; border: 8px solid transparent; border-image: url("assets/ui/themes/cyan/panel_inset.png") 3 fill / 8px / 0 stretch; background: #060c12; }
#galaxy-canvas { position: absolute; width: 100%; height: 100%; inset: 0; }
.galaxy-route-nodes { position: absolute; inset: 0; }
.route-node { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0; transform: translate(-50%, -50%); font-size: 14px; font-weight: 700; }
.route-node:hover:not(:disabled) { transform: translate(-50%, -50%); }
.route-node[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 2px; }
.route-node.is-cleared { color: var(--core); }
.route-node.is-locked { color: var(--soft); }
.route-node small { position: absolute; top: calc(100% + 8px); color: var(--muted); font-size: 10px; white-space: nowrap; pointer-events: none; }
.galaxy-level-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 20px; }
.galaxy-level-detail h3 { font-size: 20px; margin: 6px 0; }
.level-status { font-size: 11px; color: var(--accent); }
.level-stage-track { display: flex; gap: 6px; margin-top: 12px; }
.level-stage-track span { flex: 1; min-width: 0; display: grid; gap: 4px; min-height: 42px; padding: 6px 0; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 10px; }
.level-stage-track .is-cleared { border-color: var(--core); color: var(--core); }
.level-stage-track .is-boss { border-color: var(--danger); }
.level-facts { margin: 0; font-size: 12px; }
.level-facts > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.level-facts dt { color: var(--muted); }
.level-facts dd { margin: 0; text-align: right; }
.galaxy-deploy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.galaxy-deploy p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.galaxy-deploy button { flex-shrink: 0; }
.report { display: grid; gap: 6px; }
.report h3 { margin: 0; }
.report time { color: var(--soft); font-size: 11px; }
.report > p:last-child { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.game-credits { margin-top: 16px; color: var(--soft); font-size: 11px; }
.game-credits p { padding-top: 8px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
* { scrollbar-width: thin; scrollbar-color: #376475 #0b141b; }
input[type="number"], input[type="text"], input:not([type]) { min-width: 0; width: 100%; min-height: 40px; padding: 4px 8px; background: none; color: var(--text); border: 6px solid transparent; border-image: url("assets/ui/themes/cyan/line_edit.png") 4 fill / 6px / 0 stretch; font-size: 13px; }
.upgrade-funding { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.upgrade-funding select { width: 220px; }
.upgrade-funding small { color: var(--muted); }
.shipyard-panel, .pool-band { padding: 14px 0; border-block: 1px solid var(--line); margin: 14px 0; }
.pool-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.active-commander { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.commander-row { border-bottom: 1px solid var(--line); padding: 12px 0; }
.commander-row > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.commander-row img { width: 28px; height: 28px; }
.commander-row > button { margin-top: 8px; }
.compact-module { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 8px; gap: 6px 10px; min-width: 0; }
.compact-module .module-actions { grid-column: 2; flex-wrap: wrap; gap: 4px; }
.compact-module .module-actions button { min-height: 34px; padding: 3px 6px; font-size: 11px; }
.compact-module .module-copy strong { font-size: 13px; }
.compact-module .module-copy span { font-size: 11px; }
.module-slots { gap: 6px; }
.module-slot.is-empty { min-height: 50px; padding: 8px; display: flex; gap: 10px; align-items: center; }
.module-slot.is-empty span { font-size: 12px; color: var(--muted); }
.manual-guide { flex-wrap: wrap; max-width: calc(100% - 16px); }
.manual-guide strong { width: 100%; color: #b9efb0; font-size: 11px; text-align: right; }
.market-form { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 14px; align-items: end; margin-top: 20px; }
.market-form label { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.market-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.market-row .module-actions { grid-column: 2 / -1; }
.simulation-tools, .economy-history { margin-top: 20px; }
.ledger-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 8px; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 12px; overflow-wrap: anywhere; }
.ledger-row small { grid-column: 2 / -1; color: var(--muted); }
.delta-up { color: #96e59e; }
.delta-down { color: #ff8791; }
dialog { width: min(740px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 14px; color: var(--text); background: #0d1920; border: 8px solid transparent; border-image: url("assets/ui/themes/cyan/panel.png") 4 fill / 8px / 0 stretch; overflow-y: auto; }
dialog::backdrop { background: #000b; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.dialog-heading h2 { font-size: 20px; }
.dialog-heading > button { flex: 0 0 40px; width: 40px; padding: 0; }
#transaction-detail p { line-height: 1.6; margin-bottom: 20px; }
.equipment-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.equipment-comparison section { min-width: 0; }
.equipment-comparison section > strong { display: block; min-height: 38px; overflow-wrap: anywhere; }
.comparison-stats { font-size: 12px; }
.comparison-stats > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.comparison-stats dt, .comparison-stats dd { min-width: 0; overflow-wrap: anywhere; }
.comparison-stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.equipment-tooltip { position: fixed; z-index: 20; pointer-events: none; background: #0b1920; border: 1px solid var(--accent); padding: 12px; width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.5; }
.summary-items > div { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary-items img, .summary-items canvas { flex: 0 0 32px; width: 32px; height: 32px; }
.summary-items small { display: block; font-size: 11px; color: var(--muted); }
#session-summary h3 { margin-top: 20px; }
#session-dialog { overflow: hidden; padding: 0; }
#session-dialog[open] { display: flex; flex-direction: column; }
#session-dialog .dialog-heading { position: relative; padding: 10px 12px; margin: 0; align-items: center; background: #0d1920; }
#session-dialog .dialog-heading, #session-actions { flex: 0 0 auto; }
#session-dialog .dialog-heading h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
#session-summary { overflow: auto; min-height: 0; padding: 0 12px 10px; }
#session-summary h3 { margin: 12px 0 6px; font-size: 15px; }
#session-summary .stats { gap: 6px; }
#session-summary details { margin-top: 10px; }
#session-actions { margin: 0; padding: 8px 12px; background: #0d1920; border-top: 1px solid var(--line); }
#session-actions button { flex: 1 1 auto; }
#session-actions > p { flex-basis: 100%; margin: 0; }
.outcome-destroyed { color: #ff8098; }
.armor-meter[data-inactive="true"] .meter-track { opacity: .35; }
.armor-meter[data-inactive="true"] strong { color: var(--muted); font-size: 11px; }
.save-warning { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 12px; background: #5e2030; color: #fff; }
@media (max-width: 1100px) { .resource-strip #pwr-pending { display: block; grid-column: 2; grid-row: 3; } }
@media (max-width: 620px) {
  .market-form { grid-template-columns: 1fr; }
  .market-row { grid-template-columns: 32px minmax(0, 1fr); }
  .market-row > strong, .market-row .module-actions { grid-column: 2; }
  .compact-module .module-actions { grid-column: 1 / -1; }
  .equipment-comparison { gap: 12px; }
  .comparison-stats > div { flex-direction: column; gap: 4px; }
  .comparison-stats dd { text-align: left; }
  .equipment-comparison h3 { font-size: 14px; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-row time { grid-column: 1 / -1; }
  .ledger-row small { grid-column: 1 / -1; }
  .resource-strip article:last-child { grid-column: 1 / -1; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .combat-side-hud { width: 230px; }
  .boss-hud { top: 128px; left: 50%; width: min(260px, 34%); transform: translateX(-50%); }
}
@media (max-width: 1100px) {
  .resource-strip article { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; }
  .resource-strip small { display: none; }
  .module-layout { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .galaxy-travel-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; }
  .galaxy-level-detail { grid-template-columns: 1fr; }
  .mission-builder { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; gap: 12px; }
  .tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .tab { flex-direction: column; justify-content: center; gap: 4px; text-align: center; font-size: 11px; min-height: 60px; }
  .section-heading { align-items: start; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .shell { padding: 12px 10px; }
  h1 { font-size: 22px; }
  h2 { font-size: 20px; }
  .topbar { gap: 8px; }
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .clock-panel { display: none; }
  .resource-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
  .resource-strip article { border-bottom: 1px solid var(--line); padding: 8px; gap: 2px 8px; }
  .resource-strip article:first-child { padding-left: 8px; }
  .resource-strip article:nth-child(2) { border-right: 0; }
  .resource-strip strong { font-size: 16px; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab { flex-direction: row; min-height: 42px; font-size: 11px; gap: 6px; padding: 2px; }
  .tab-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .view { min-height: 0; }
  .combat-frame { aspect-ratio: 4 / 5; min-height: 440px; max-height: none; }
  #combat-canvas { object-fit: fill; }
  .combat-top-hud { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); left: 10px; right: 10px; }
  .combat-identity { display: none; }
  .stage-hud { grid-column: 2; }
  .combat-score { grid-column: 3; min-width: 0; width: 100%; padding: 4px 0; overflow-wrap: anywhere; }
  .combat-score strong { font-size: 12px; }
  .combat-side-hud { top: 122px; left: 10px; right: 10px; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px; }
  .combat-meter { grid-template-columns: 20px minmax(0, 1fr); gap: 4px; }
  .combat-meter .hud-icon { width: 20px; height: 20px; grid-column: 1; grid-row: 1; }
  .combat-meter strong { grid-column: 2; grid-row: 1; font-size: 11px; }
  .combat-meter .meter-track { grid-column: 1 / -1; grid-row: 2; height: 14px; padding: 3px; }
  .target-hud { display: none; }
  .boss-hud { top: 190px; left: 50%; right: auto; width: min(260px, calc(100% - 24px)); padding: 4px 8px; }
  .boss-hud strong, .boss-hud span { font-size: 12px; line-height: 17px; }
  .combat-message { top: calc(50% + 86px); padding: 8px; max-height: calc(100% - 192px); }
  .combat-message h2 { font-size: 20px; }
  .combat-message .sector-picker { margin-top: 8px; }
  .combat-frame:has(.combat-message:not([hidden])) :is(.wave-readout, .combat-score, .combat-side-hud, .target-hud) { display: none; }
  .combat-message { top: calc(50% + 20px); max-height: calc(100% - 64px); }
  .combat-message .combat-loadout { display: none; }
  .combat-loadout { margin: 8px 0; }
  .combat-options { gap: 8px; }
  .combat-options label:has(select) { width: 100%; }
  .combat-options select { flex: 1; width: auto; }
  #combat-season { width: 100%; }
  .combat-commandbar { padding: 8px; }
  .combat-controls { gap: 6px; }
  .combat-controls button, .dock-control { width: 40px; height: 40px; min-width: 40px; }
  .combat-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combat-footer > div { padding: 8px; border-bottom: 1px solid var(--line); }
  .combat-footer > div:nth-child(2n) { border-right: 0; }
  .manual-guide { right: 8px; gap: 8px; font-size: 13px; }
  .combat-information { grid-template-columns: 1fr; }
  .repairs-grid { grid-template-columns: minmax(0, 1fr); }
  .repair-row { flex-wrap: wrap; }
  #view-fleet > .inventory-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-fleet > .inventory-tabs button { font-size: 12px; overflow-wrap: normal; }
  .module-actions { grid-column: 1 / -1; }
  .cards > article, .unit-card, .report { padding: 8px; }
  .unit-top { flex-wrap: wrap; }
  .galaxy-travel-layout { display: flex; flex-direction: column; }
  .galaxy-level-sidebar { border: 0; padding: 0; }
  .galaxy-list-heading { display: none; }
  .galaxy-levels { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
  .galaxy-level-option { flex: 0 0 136px; min-height: 60px; padding: 4px; }
  .galaxy-route { min-height: 290px; aspect-ratio: 1.2 / 1; }
  .route-node { width: 40px; height: 40px; }
  .galaxy-route-heading { flex-wrap: wrap; padding-bottom: 10px; }
  .galaxy-deploy { flex-direction: column; align-items: stretch; }
}

.inventory-workbench { display: grid; grid-template-columns: 210px minmax(230px, 1fr) 280px; gap: 14px; align-items: start; }
.tab[data-view="commanders"] { font-size: 11px; gap: 6px; }
@media (max-width: 620px) { .tab[data-view="commanders"] { font-size: 10px; gap: 4px; white-space: nowrap; } .tab[data-view="commanders"] .tab-icon { width: 16px; height: 16px; flex-basis: 16px; } }
.inventory-tile > .item-icon { width: 56px; height: 56px; object-fit: contain; }
.equipment-slot .item-icon { width: 40px; height: 40px; flex: 0 0 40px; }
.detail-image .item-icon { width: 88px; height: 88px; object-fit: contain; }
.grid-details-layout { display: grid; grid-template-columns: minmax(230px, 1fr) 300px; gap: 14px; align-items: start; }
.equipped-pane, .inventory-pane, .item-detail-pane { min-width: 0; }
.equipped-pane { border-right: 1px solid var(--line); padding-right: 12px; }
.item-detail-pane { border-left: 1px solid var(--line); padding-left: 16px; min-height: 260px; overflow-wrap: anywhere; }
.inventory-tabs, .inventory-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.inventory-tabs button { font-size: 13px; padding: 6px 8px; min-height: 40px; }
.inventory-tabs .is-active { color: var(--cyan); background-color: #12323b; }
.inventory-controls label { flex: 1 1 95px; font-size: 12px; min-width: 0; }
.inventory-controls select { width: 100%; min-width: 0; padding: 7px; min-height: 40px; font-size: 13px; }
.recycle-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; border-block: 1px solid var(--line); padding: 8px 0; margin-bottom: 10px; }
.recycle-toolbar[hidden] { display: none; }
.recycle-choice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; align-content: start; flex: 1 1 170px; min-width: 0; }
.recycle-choice label, .recycle-label { flex-basis: 100%; font-size: 12px; }
.recycle-choice select { flex: 1 1 90px; min-width: 0; min-height: 40px; }
.recycle-choice button { min-height: 40px; font-size: 12px; padding: 6px 10px; }
.recycle-choice small { flex-basis: 100%; color: #c5d7df; font-size: 12px; }
.recycle-toolbar p { flex-basis: 100%; margin: 0; }
.recycle-toolbar p:empty { display: none; }
@media (max-width: 700px) { .recycle-toolbar { flex-direction: column; } .recycle-choice { flex: auto; width: 100%; } }
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; }
.inventory-tile { position: relative; display: grid; grid-template-rows: 56px 32px 30px; align-items: center; justify-items: center; gap: 4px; width: 100%; min-width: 0; height: 144px; border: 1px solid var(--rarity); border-image: none; border-radius: 4px; background: color-mix(in srgb, var(--rarity) 8%, #070c10); padding: 8px 6px; box-shadow: inset 0 0 12px color-mix(in srgb, var(--rarity) 7%, transparent); font-size: 12px; }
.inventory-tile:hover, .inventory-tile.is-selected { background: color-mix(in srgb, var(--rarity) 18%, #070c10); outline: 1px solid var(--rarity); outline-offset: 1px; }
.inventory-tile .module-icon, .inventory-tile > .ui-item-icon, .inventory-tile .inventory-ship { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; }
.tile-name { width: 100%; line-height: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.inventory-tile small { font-size: 11px; line-height: 15px; color: #d1e0e6; }
.tile-badge, .tile-stack { position: absolute; top: 3px; right: 4px; background: #050a0e; color: var(--rarity); font-size: 11px; padding: 1px 3px; }
.tile-stack { top: auto; bottom: 4px; }
.tile-lock { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; image-rendering: pixelated; }
.grid-empty { grid-column: 1 / -1; }
.equipped-ship { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; margin-bottom: 8px; font-size: 12px; }
.equipped-ship .inventory-ship { width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; }
.equipped-pane > #ship-list > button { width: 100%; }
.equipment-slot { display: flex; align-items: center; gap: 7px; width: 100%; height: 64px; min-width: 0; margin: 4px 0; padding: 6px; border: 1px solid var(--rarity, #30424a); border-image: none; border-radius: 4px; background: #081015; text-align: left; }
.equipment-slot .module-icon, .equipment-slot .ui-item-icon { width: 40px; height: 40px; flex: 0 0 40px; }
.equipment-slot span { flex: 1; min-width: 0; }
.equipment-slot strong { display: block; font-size: 12px; line-height: 16px; }
.equipment-slot small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11px; line-height: 15px; color: #c5d7df; }
.equipment-slot b { font-size: 11px; color: var(--rarity); }
.equipment-slot:disabled { border-image: none; border-color: var(--line); background: #081015; }
.detail-image { width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid var(--rarity); border-radius: 4px; margin: 0 auto 8px; background: color-mix(in srgb, var(--rarity) 8%, #070c10); }
.detail-image .module-icon, .detail-image .ui-item-icon, .detail-image .inventory-ship { width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; }
.item-detail-pane > h3, .detail-rarity { text-align: center; }
.detail-rarity { color: var(--rarity); font-size: 12px; }
.item-stats { font-size: 13px; margin: 10px 0; }
.item-stats > div { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #203138; }
.item-stats dt { color: #c5d7df; }
.item-stats dd { margin: 0; text-align: right; }
.detail-actions { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.detail-actions button { width: 100%; min-width: 0; min-height: 44px; font-size: 13px; padding: 4px 6px; overflow-wrap: anywhere; }
.commander-portrait { width: 72px; height: 72px; flex-basis: 72px; object-fit: contain; image-rendering: pixelated; }
.detail-image .commander-portrait { width: 96px; height: 96px; }
.commander-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.commander-grid .inventory-tile { height: 164px; grid-template-rows: 72px 32px 30px; }
.contract-inventory { margin: 16px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contract-inventory > summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.contract-inventory > summary span { float: right; font-size: 12px; font-weight: 400; }
.contract-inventory > .grid-details-layout { padding-bottom: 16px; }
#recruitment-dialog { width: min(940px, calc(100vw - 32px)); max-width: 940px; }
.recruitment-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 12px 0; font-size: 12px; }
.inventory-pane > .inventory-grid { min-height: 140px; }
@media (max-width: 1160px) { .inventory-workbench { grid-template-columns: 180px minmax(200px, 1fr); } .inventory-workbench .item-detail-pane { grid-column: 2; } }
@media (min-width: 621px) and (max-width: 920px) { .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .inventory-workbench, .grid-details-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } .inventory-workbench .item-detail-pane { grid-column: auto; } .equipped-pane { border-right: 0; padding-right: 0; } #module-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .equipment-slot { margin: 0; } .item-detail-pane { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; } .equipped-ship { display: grid; grid-template-columns: 64px minmax(0, 1fr); text-align: left; } .equipped-ship .inventory-ship { width: 64px; height: 64px; grid-row: 1 / 4; } .inventory-tabs { gap: 5px; } .inventory-tabs button { flex: 1; font-size: 11px; padding: 4px; } }
@media (max-width: 400px) { #module-slots { grid-template-columns: minmax(0, 1fr); } }
.game-feedback { position: fixed; left: 16px; bottom: 16px; z-index: 100; max-width: calc(100vw - 32px); margin: 0; padding: 10px 12px; border: 1px solid #67828c; background: #081015; font-size: 13px; color: #ffdb82; pointer-events: none; }
.game-feedback:empty { display: none; }
.shipyard-panel .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inventory-tabs [data-destination] { border-color: #60858e; }
.resource-strip article[role="button"] { cursor: pointer; }
.resource-strip article[role="button"]:hover { background: #12232b; }
.tab-icon { width: 26px; height: 26px; flex-basis: 26px; }
.disabled-action { display: inline-flex; max-width: 100%; cursor: help; }
.disabled-action > :is(button, select) { pointer-events: none; }
.disabled-action:has(select) { width: 100%; }
.disabled-action:focus-visible { outline: 2px solid #51d9ef; outline-offset: 3px; }
#auto-repair-panel { padding: 8px 12px; border-bottom: 1px solid #274552; }
#auto-repair-panel .lab-config { padding: 8px 0; }
#auto-repair-panel input { width: 100%; min-width: 0; }
#auto-repair-panel input[type="checkbox"] { width: 20px; height: 20px; }
#loadout-panel { margin-top: 10px; }
#loadout-panel button { margin: 4px 4px 4px 0; }
.building-card { padding: 10px; gap: 6px; }
.building-card .meta, .building-card .fine { line-height: 1.4; }
.building-card .stat strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.building-card .stat-next { display: inline; font-size: inherit; color: var(--accent); }
.building-card .stats { margin-bottom: 6px; }
.building-level-preview { font-size: 12px; color: var(--accent); margin-block: 6px; }
.building-cost { font-size: 12px; min-height: 34px; margin-block: 6px; }
.building-cost > span { display: block; color: var(--muted); }
.building-cost strong { display: block; margin-top: 3px; font-size: 13px; }
.building-requirement { min-height: 18px; margin-top: 6px; }
.building-note { margin-top: 4px; }
.building-progress { margin: 6px 0; font-size: 12px; color: var(--accent-2); }
.building-progress progress { height: 10px; margin-bottom: 4px; }
.building-card > .disabled-action { display: flex; width: 100%; }
.building-card > .disabled-action > button { width: 100%; }
.item-summary-stats dd { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.commander-rolls dd { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: end; gap: 6px; }
.commander-rolls dd small { font-weight: 400; color: var(--muted); font-size: 11px; }
.commander-passive { font-size: 13px; line-height: 1.5; color: var(--accent); margin-block: 8px; }
.condition-warning { color: var(--accent-2); font-size: 13px; }
.summary-price { font-size: 17px; font-weight: 700; color: var(--accent-2); margin-block: 10px; font-variant-numeric: tabular-nums; }
.item-detail-pane > details { margin-block: 8px; }
.item-detail-pane > details > summary { min-height: 32px; padding-block: 6px; font-size: 13px; color: var(--muted); }
.inventory-details .detail-actions { gap: 8px; }
.combat-meter strong { white-space: pre-line; font-size: 11px; line-height: 1.15; }
@media (min-width: 621px) { .combat-meter { grid-template-columns: 24px minmax(0, 1fr) 66px; gap: 6px; } }

/* Owner-approved battlefield shell: existing feature views are mounted in one window. */
.battlefield-layout { height: 100dvh; overflow: hidden; }
.battlefield-layout .shell { width: 100%; height: 100dvh; padding: 0; display: grid; grid-template-rows: 58px minmax(0, 1fr) 86px; }
.battlefield-layout .topbar { padding: 6px 14px; border: 0; width: 250px; min-width: 0; }
.battlefield-layout h1 { font-size: 20px; }
.battlefield-layout .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
.battlefield-layout .brand-copy .eyebrow { font-size: 10px; margin-top: 2px; }
.battlefield-layout .clock-panel { display: none; }
.battlefield-layout .resource-strip { position: absolute; z-index: 4; top: 6px; right: 12px; width: min(800px, calc(100% - 270px)); margin: 0; border: 0; gap: 4px; }
.battlefield-layout .resource-strip article { height: 46px; padding: 4px 7px; grid-column: auto; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: 14px 20px; gap: 0 5px; border: 1px solid var(--line); background: #06141b; cursor: pointer; }
.battlefield-layout .resource-strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battlefield-layout .resource-icon { width: 20px; height: 20px; }
.battlefield-layout .resource-strip strong { font-size: 14px; }
.battlefield-layout .resource-strip small { display: none; }
.battlefield-layout .resource-strip #pwr-pending { display: none; }
.battlefield-layout .layout { display: block; grid-row: 2; min-height: 0; }
.battlefield-layout #view-combat { height: 100%; display: flex; flex-direction: column; border: 0; background: #000; }
.battlefield-layout .combat-options { min-height: 36px; padding: 3px 12px; gap: 4px 8px; flex-shrink: 0; }
.battlefield-layout .combat-options select { min-height: 30px; width: 175px; }
.battlefield-layout .combat-options button { min-height: 30px; font-size: 11px; }
.battlefield-layout .combat-lab { flex-shrink: 0; padding: 0 12px; }
.battlefield-layout .combat-lab[open] > .secondary-panel-body { position: fixed; z-index: 8; top: 100px; right: 18px; width: min(720px, calc(100% - 36px)); padding: 12px; background: #0a1720; border: 1px solid var(--accent); box-shadow: 0 10px 35px #0009; }
.battlefield-layout .combat-frame { flex: 1; width: calc(100% - 16px); margin-inline: 8px; aspect-ratio: auto; height: auto; min-height: 0; max-height: none; box-sizing: border-box; padding-bottom: 0; background: #000; }
.battlefield-layout .combat-information { flex-shrink: 0; }
.battlefield-layout .combat-side-hud { pointer-events: none; }
.battlefield-layout .combat-message { top: calc((100% - var(--weapon-hud-band)) / 2 + 56px); max-height: calc(100% - var(--weapon-hud-band) - 144px); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.battlefield-layout .combat-launch-content { min-height: 0; overflow-y: auto; flex: 1 1 auto; }
.battlefield-layout .combat-message #start-combat { flex-shrink: 0; }
.battlefield-layout .combat-footer { grid-template-columns: 2fr 2fr 1fr 1fr; }
.battlefield-layout .combat-footer strong { font-size: 12px; }
.battlefield-layout .combat-commandbar { flex-shrink: 0; padding: 3px 10px; }
.battlefield-layout .tabs { position: fixed; z-index: 5; bottom: 10px; left: 12px; right: 12px; display: flex; gap: 6px; overflow-x: auto; align-items: stretch; padding: 2px; }
.battlefield-layout .tab { flex: 0 0 94px; width: 94px; height: 70px; flex-direction: column; justify-content: center; gap: 4px; text-align: center; font-size: 11px; padding: 4px; }
.battlefield-layout .tab-icon { width: 32px; height: 32px; flex-basis: 32px; }
.battlefield-layout .action-notices { position: absolute; top: 8px; right: 12px; width: min(310px, 40%); z-index: 5; max-height: 120px; overflow: auto; background: #08151be8; }
.battlefield-layout .action-notice { font-size: 11px; padding: 4px; }
.battlefield-layout .game-feedback { position: fixed; top: 58px; right: 12px; z-index: 40; max-width: min(440px, 90vw); }
.battlefield-layout .game-credits { position: fixed; bottom: 0; right: 8px; z-index: 6; font-size: 10px; }
.battlefield-layout .game-credits details[open] { width: min(360px, calc(100vw - 24px)); background: #0d1920; padding: 10px; }
#game-window { width: min(1240px, calc(100vw - 24px)); max-width: none; height: min(850px, calc(100dvh - 48px)); max-height: calc(100dvh - 24px); overflow: hidden; padding: 0; }
#game-window[open] { display: flex; flex-direction: column; }
#game-window::backdrop { background: #0008; }
.game-window-heading { flex-shrink: 0; padding: 10px 14px; margin: 0; align-items: center; border-bottom: 1px solid var(--line); }
.window-switch-label { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.window-switch-label select { width: 160px; }
#game-window-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; }
#game-window .view { min-height: 0; }
#game-window .section-heading h2 { display: none; }
.summary-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.summary-items > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px; border: 1px solid var(--line); }
.summary-items img, .summary-items .module-icon { width: 48px; height: 48px; }
.loot-session-state { margin-bottom: 12px; color: var(--accent); }
@media (min-width: 921px) {
  .battlefield-layout .boss-hud { top: 14px; left: calc(50% + 72px); width: 220px; transform: none; }
  .weapon-condition { font-size: 14px; line-height: 16px; }
}
@media (min-width: 621px) and (max-width: 920px) {
  :root { --weapon-hud-band: 80px; --weapon-button-size: 68px; --weapon-art-size: 48px; }
}
@media (max-width: 620px) {
  :root { --weapon-hud-band: 56px; --weapon-button-size: 44px; --weapon-art-size: 32px; }
}
@media (max-width: 700px) {
  .battlefield-layout .shell { grid-template-rows: 105px minmax(0,1fr) 78px; }
  .battlefield-layout .topbar { height: 47px; }
  .battlefield-layout .resource-strip { top: 48px; left: 6px; right: 6px; width: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .battlefield-layout .resource-strip article { height: 46px; padding: 3px; grid-template-columns: 14px minmax(0,1fr); grid-template-rows: 14px 20px; gap: 0 2px; }
  .battlefield-layout .resource-strip span { font-size: 8px; grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .battlefield-layout .resource-strip strong { grid-column: 1 / -1; grid-row: 2; font-size: 11px; white-space: nowrap; }
  .battlefield-layout .resource-strip #pwr-pending { display: none; }
  .battlefield-layout .resource-icon { width: 14px; height: 14px; grid-row: 1; grid-column: 1; }
  .battlefield-layout .tabs { bottom: 8px; left: 6px; right: 6px; gap: 4px; }
  .battlefield-layout .tab { flex-basis: 82px; width: 82px; height: 62px; font-size: 10px; }
  .battlefield-layout .tab-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .battlefield-layout .combat-options { font-size: 10px; gap: 2px 6px; }
  .battlefield-layout .combat-options label:has(select) { width: auto; flex: 1 1 180px; }
  .battlefield-layout .combat-options select { width: 160px; }
  .battlefield-layout #combat-season { width: auto; }
  .battlefield-layout .combat-top-hud { top: 8px; }
  .battlefield-layout .wave-readout { min-width: 68px; padding: 0; border-width: 4px; }
  .battlefield-layout .wave-readout strong { font-size: 20px; line-height: 24px; }
  .battlefield-layout .wave-readout span { line-height: 12px; }
  .battlefield-layout .combat-side-hud { top: 88px; }
  .battlefield-layout .boss-hud { top: 153px; padding: 1px 4px; }
  .battlefield-layout .boss-hud small { line-height: 12px; }
  .battlefield-layout .boss-hud strong, .battlefield-layout .boss-hud span { font-size: 11px; line-height: 14px; }
  .battlefield-layout .boss-hud progress { margin-top: 4px; height: 8px; }
  .battlefield-layout .manual-guide { gap: 6px; padding: 2px 4px; }
  .battlefield-layout .manual-guide strong { width: auto; font-size: 11px; }
  .battlefield-layout .combat-frame:has(.combat-message:not([hidden])) .wave-readout { display: block; }
  .battlefield-layout .combat-frame:has(.combat-message:not([hidden])) .combat-side-hud { display: grid; }
  .battlefield-layout .combat-message { top: auto; bottom: calc(var(--weapon-hud-band) + 4px); transform: translateX(-50%); max-height: calc(100% - 228px); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
  .battlefield-layout .combat-launch-content { min-height: 0; overflow-y: auto; flex: 1 1 auto; }
  .battlefield-layout .combat-message #start-combat { flex-shrink: 0; }
  .battlefield-layout #combat-launch-reason { flex-shrink: 0; max-height: 80px; overflow-y: auto; }
  .battlefield-layout .combat-footer { grid-template-columns: 2fr 2fr; }
  .battlefield-layout .combat-footer strong { font-size: 11px; }
  .battlefield-layout .action-notices { top: 8px; right: 6px; width: min(250px, 70%); max-height: 100px; }
  .battlefield-layout .game-feedback { top: 100px; }
  #game-window { width: calc(100vw - 12px); height: calc(100dvh - 24px); }
  #game-window-content { padding: 8px; }
  .game-window-heading { padding: 6px 8px; gap: 6px; }
  .game-window-heading h2 { font-size: 17px; }
  .window-switch-label { font-size: 0; gap: 0; }
  .window-switch-label select { width: 120px; font-size: 11px; }
}

.battlefield-layout .game-feedback { left: auto; bottom: auto; max-height: 100px; overflow-y: auto; pointer-events: none; }
.notification-toolbar { display: contents; }
#open-notifications { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
#open-notifications img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
#notification-count { min-width: 20px; color: #ffcb70; font-weight: bold; }
.store-grid, #module-inventory:has(.store-product) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: 10px; margin: 12px 0; }
.store-product { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--rarity,var(--accent)); background: #0b131b; border-radius: 4px; min-width: 0; }
.store-product img { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; image-rendering: pixelated; }
.store-product > div { min-width: 0; flex: 1; }
.store-product h3 { font-size: 15px; color: var(--rarity,var(--accent)); margin: 0 0 6px; }
.store-product strong, .store-product small { display: block; margin-bottom: 7px; }
.store-product p { margin: 4px 0 8px; }
.store-product button { max-width: 100%; white-space: normal; }
.blocked-reason { font-size: 12px; color: #ffc98a; }
.notification-row { border-bottom: 1px solid var(--line); padding: 10px 0; }
.notification-row small { display: block; margin: 6px 0; color: #b8c9d5; }
[data-void-indicator] { color: #72e4fa; font-weight: bold; font-size: 12px; }
[data-void-indicator][data-urgency="warning"] { color: #ffc266; }
[data-void-indicator][data-urgency="critical"] { color: #ff8a96; }
/* Void status card: same frame, padding and type scale as the galaxy/level card beside it. */
.hud-left { display: flex; align-items: stretch; gap: 8px; justify-self: start; min-width: 0; }
#void-hud { display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 6px 8px; border: 6px solid transparent; border-image: url("assets/ui/themes/cyan/panel.png") 4 fill / 6px / 0 stretch; }
#void-hud[hidden] { display: none; }
#void-hud .void-hud-icon { width: 16px; height: 16px; flex: 0 0 16px; image-rendering: pixelated; }
#void-hud .void-hud-copy { min-width: 0; }
#void-hud strong { display: block; font-size: 14px; color: #72e4fa; white-space: nowrap; }
#void-hud[data-urgency="warning"] strong { color: #ffc266; }
#void-hud[data-urgency="critical"] strong { color: #ff8a96; }
#void-time-bar { width: 100%; height: 4px; display: block; margin: 3px 0 0; accent-color: #6de8ff; }
.dialog-heading { flex-wrap: wrap; }
#open-store img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
#store-dialog { width: min(1120px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
#store-dialog .dialog-heading button, #music-dialog .dialog-heading button, #notifications-dialog .dialog-heading button { width: auto; min-width: 60px; white-space: nowrap; flex-shrink: 0; }
#ship-acquire-view { min-width: 0; }
#ship-section-tabs { margin-bottom: 10px; }
#music-dialog label { display: flex; gap: 10px; align-items: center; margin: 14px 0; }
#music-volume { min-width: 100px; max-width: 260px; }
.combat-quick-controls { display: flex; gap: 6px; align-items: center; margin-left: auto; max-width: 100%; }
.combat-quick-controls #open-notifications { margin-left: 0; }
@media (max-width: 620px) {
  .combat-quick-controls { gap: 4px; }
  .combat-quick-controls button { padding: 2px 4px; border-width: 6px; min-height: 44px; font-size: 10px; }
  .combat-quick-controls img { width: 18px !important; height: 18px !important; }
  .combat-quick-controls #notification-count { min-width: 12px; }
  .store-product img { width: 48px; height: 48px; flex-basis: 48px; }
}
.activity-row { --event:#51dbea; display:grid;grid-template-columns:32px minmax(0,1fr) 76px;gap:10px;align-items:center;width:100%;min-height:66px;margin:4px 0;padding:8px 12px;text-align:left;font-size:14px;box-shadow:inset 3px 0 var(--event); }
.event-success { --event:#68db9b }.event-reward { --event:#ffd166 }.event-warning { --event:#ffb454 }.event-failure { --event:#ff6b83 }.event-void { --event:#bd91fa }
.activity-row > img {width:28px;height:28px;object-fit:contain;image-rendering:pixelated}.activity-copy {display:grid;gap:3px;min-width:0}.activity-copy strong {font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--event)}.activity-copy > span,.activity-copy small {font-size:12px;line-height:1.35;overflow-wrap:anywhere}.activity-copy small {color:var(--soft)}.activity-end {display:grid;gap:5px;justify-items:end;font-size:12px;color:var(--soft)}.unread-dot {color:var(--event)}.activity-row.is-selected {outline:1px solid var(--event);outline-offset:-4px}
#notifications-dialog {width:min(620px,calc(100vw - 24px))}#notification-history {margin-top:8px}#notification-history .activity-row {min-height:62px}.report-layout {align-items:start}.report-layout > section {min-width:0}#report-detail {position:sticky;top:0;min-width:0}#report-detail pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:none}#report-tabs {margin-bottom:10px}.compact-command {width:auto}
#ship-acquire-view {display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,330px);gap:16px;align-items:start}.acquisition-main {min-width:0}.acquisition-quote {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}.acquisition-quote strong {font-size:18px;color:var(--gold)}#ship-acquisition-panel > label {display:block;margin:8px 0}#ship-acquisition-panel > button {margin:6px 6px 6px 0}#acquisition-odds-panel {margin:8px 0}#acquisition-detail .inventory-ship {width:96px;height:96px;object-fit:contain}#acquisition-completed {margin-top:12px}#contract-inventory {margin-top:12px}.view .section-heading {margin-bottom:12px}.pool-band {padding:10px}.active-orders {margin-bottom:12px}#guide-content {line-height:1.7}#view-reports .report-layout .item-detail-pane {max-height:none;overflow:visible}
@media(max-width:700px) { #ship-acquire-view,.report-layout {grid-template-columns:1fr}#report-detail {position:static}.activity-row {grid-template-columns:28px minmax(0,1fr) 62px;gap:7px;padding:8px}.activity-copy strong {font-size:14px}.acquisition-quote strong {font-size:16px} }
.activity-row {padding:4px 10px;min-height:58px}.activity-copy small {font-size:13px;color:#b8cddd}#notification-history .activity-row {min-height:58px}.decision-stats h4 {margin:12px 0 6px}#ship-acquisition-panel select {max-width:100%}.galaxy-purchase {border-top:1px solid var(--line);padding-top:10px;grid-column:1/-1}.galaxy-purchase p {margin:6px 0;font-size:13px}
#game-window-content .item-detail-pane,#game-window-content .secondary-panel-body {max-height:none;overflow:visible}#last-session-summary {margin-bottom:10px}#auto-repair-panel,#loadout-panel {padding:8px 0}#auto-repair-panel h4,#loadout-panel h4 {margin:6px 0 10px}.order-details h4 {font-size:13px;margin:8px 0 4px}
#game-window-content .inventory-grid {max-height:none;overflow:visible}
.game-window-heading .guide-shortcut {width:34px;min-width:34px;padding:2px;font-size:18px}
@media(max-width:360px) {
  .battlefield-layout .boss-hud {top:153px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;padding:0 4px}
  .boss-hud #boss-name {grid-column:1;grid-row:1}
  .boss-hud #boss-attack {grid-column:2;grid-row:2;text-align:right}
  .boss-hud #boss-phase {grid-column:2;grid-row:1}
  .boss-hud #boss-health {grid-column:1;grid-row:2;min-width:0;width:100%}
  .battlefield-layout.has-void-access .boss-hud {top:214px}
  .battlefield-layout .boss-hud progress { margin-top: 3px; height: 6px; }
  .battlefield-layout .boss-hud strong, .battlefield-layout .boss-hud span { line-height: 13px; }
}

/* Compact Missions + Store (Claude, 2026-10-13): summary strip, tabs, stacked contracts, combine, Store tooltips. */
.test-economy-badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--accent-2); color: var(--accent-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: #1a1408; white-space: nowrap; }
#view-missions .mission-summary { padding: 8px 0; margin: 4px 0 8px; }
.mission-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mission-summary-head h3 { margin: 0; font-size: 15px; }
.mission-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mission-summary-grid .stat { padding: 6px 8px; border: 1px solid var(--line); background: #0b151b; min-width: 0; }
.mission-summary-grid .stat > span { display: block; font-size: 11px; color: var(--muted); }
.mission-summary-grid .stat strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mission-summary-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.mission-summary-foot p, .mission-legacy { margin: 0; }
.mission-summary-foot .compact-command { min-height: 32px; padding: 0 8px; font-size: 12px; }
.mission-tabs { display: flex; gap: 6px; margin: 4px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.mission-tabs button { min-height: 36px; font-size: 13px; }
.mission-tabs button[aria-selected="true"] { color: #fff; font-weight: 700; border-image-source: url("assets/ui/themes/cyan/button_pressed.png"); }
.mission-tabs button[aria-selected="true"] .tab-count { color: #fff; }
.tab-count { display: inline-block; min-width: 20px; padding: 0 4px; margin-left: 4px; background: #050a0e; color: var(--muted); font-size: 11px; text-align: center; }
#contract-list .tile-stack { font-size: 12px; font-weight: 700; color: var(--text); border: 1px solid var(--rarity); bottom: auto; top: 3px; right: 3px; }
#contract-list .tile-stack::before { content: "×"; }
#view-missions #contract-list .inventory-tile { height: 112px; min-height: 112px; grid-template-rows: 40px 34px 20px; }
.contract-combine { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.contract-combine h4 { margin: 0 0 6px; font-size: 13px; }
.combine-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.combine-flow > span:not(.combine-arrow) { border: 1px solid var(--rarity); background: color-mix(in srgb, var(--rarity) 8%, #070c10); padding: 6px; font-size: 12px; min-width: 0; }
.combine-flow small { display: block; color: var(--rarity); }
.combine-arrow { color: var(--accent); font-size: 18px; }
.contract-combine .detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 920px) { .mission-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mission-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mission-tabs button { flex: 1; font-size: 12px; padding: 4px; } }
.store-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.store-heading h3 { margin: 0; }
.store-reset { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.store-category-label { display: block; max-width: 320px; }
.store-grid .store-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; }
.store-tip-trigger { position: relative; width: 56px; height: 56px; min-height: 56px; padding: 0; border: 0; border-image: none; background: transparent; cursor: help; }
.store-tip-trigger img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; display: block; margin: 4px; }
.store-tip-mark { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; border: 1px solid var(--accent); background: #050a0e; color: var(--accent); font: 700 11px/14px Georgia, serif; text-align: center; }
.store-tip-trigger:focus-visible { outline: 2px solid #efffff; outline-offset: 2px; }
.store-tooltip { position: fixed; z-index: 30; left: 8px; top: 68px; width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; padding: 10px; border: 1px solid var(--rarity, var(--accent)); background: #050b10; box-shadow: 0 8px 24px #000c; font-size: 12px; line-height: 1.45; display: none; pointer-events: none; }
.store-tooltip > * { display: block; margin-bottom: 4px; }
.store-tooltip strong { color: var(--rarity, var(--accent)); }
.store-card:has(.store-tip-trigger:hover) .store-tooltip, .store-card:has(.store-tip-trigger:focus-visible) .store-tooltip, .store-card.is-tip-open .store-tooltip { display: block; }
.store-card-body { min-width: 0; }
.store-card-body h3 { margin: 0 0 2px; font-size: 15px; color: var(--rarity, var(--accent)); }
.store-effect { margin: 0 0 6px; font-size: 13px; color: var(--text); }
.store-price { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0 0 6px; }
.store-price strong { font-size: 15px; color: var(--accent-2); margin: 0; }
.store-price span { font-size: 12px; color: var(--muted); }
.store-card-body button[data-buy-product] { min-height: 36px; min-width: 72px; }
.store-status { margin: 4px 0 0; font-size: 12px; color: #ffc98a; }
.store-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.store-balances { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.store-balances strong { color: var(--text); margin-left: 4px; }
.store-footer .compact-command { min-height: 34px; font-size: 13px; padding: 0 8px; }
@media (max-width: 620px) { .store-grid .store-card { grid-template-columns: 48px minmax(0, 1fr); padding: 8px; } .store-tip-trigger { width: 48px; height: 48px; min-height: 48px; } .store-tip-trigger img { width: 40px; height: 40px; } .store-reset { margin-left: 0; width: 100%; } }
.store-card.tip-suppressed:not(.is-tip-open) .store-tooltip { display: none !important; }

/* Shared Hull (Claude, 2026-10-13): one Hull bar, one Repair Hull action, collapsed auto-repair. */
.hull-meter { display: grid; gap: 4px; min-width: 0; }
.hull-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.hull-meter-head strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.hull-track { height: 10px; border: 1px solid #7a2b33; background: #1a0b0e; overflow: hidden; }
.hull-track > span { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff6f7c 0 8px, #d84a58 8px 10px); transition: width 200ms ease; }
.hull-meter[data-tone="low"] .hull-meter-head strong { color: #ffc98a; }
.hull-meter[data-tone="depleted"] .hull-meter-head strong { color: var(--danger); }
.hull-meter[data-tone="depleted"] .hull-track { border-color: var(--danger); }
.hull-meter.is-compact .hull-track { height: 6px; }
.hull-repair-panel { padding: 12px; border: 1px solid var(--line); background: #0b151b; margin-bottom: 12px; }
#hull-repair-main { display: grid; grid-template-columns: minmax(180px, 240px) minmax(200px, 1fr) minmax(200px, 260px); gap: 12px 20px; align-items: center; }
.hull-repair-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.hull-repair-head .inventory-ship { width: 56px; height: 56px; object-fit: contain; }
.hull-repair-head h3 { margin: 0; font-size: 15px; }
.hull-repair-head p { margin: 2px 0 0; }
.hull-repair-action { display: grid; gap: 4px; }
.hull-repair-button { min-height: 48px; font-size: 15px; font-weight: 700; }
#hull-repair-main > .fine, #hull-repair-main > .hull-breakdown { grid-column: 1 / -1; margin: 0; }
.is-warning { color: #ffc98a; }
.hull-breakdown summary, .hull-auto summary { cursor: pointer; padding: 6px 0; }
.hull-breakdown .item-stats { max-width: 420px; }
.hull-auto { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 4px; }
.hull-auto summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.hull-auto summary > span:first-child { font-weight: 600; }
.hull-auto-form { display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(2, minmax(140px, 1fr)) auto; gap: 8px 12px; align-items: end; margin: 6px 0; }
.hull-auto-form .toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.hull-history { margin: 4px 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
#hull-other-ships .repair-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
#hull-other-ships .inventory-ship { width: 40px; height: 40px; }
@media (max-width: 760px) { #hull-repair-main { grid-template-columns: minmax(0, 1fr); } .hull-auto-form { grid-template-columns: minmax(0, 1fr); } }
/* Inventory declutter (Claude, 2026-10-13): one ship card, compact slots, Salvage section. */
#ship-list { display: grid; gap: 8px; }
#ship-list .hull-meter { padding: 0 2px; }
.ship-card-facts { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }
.ship-card-facts b { color: var(--text); font-weight: 600; }
.ship-repair-shortcut { min-height: 36px; font-size: 13px; }
.ship-repair-shortcut.needs-repair { color: #ffd9a8; font-weight: 700; }
.equipment-slot b { font-size: 11px; color: #ff9aa4; font-weight: 600; white-space: nowrap; }
.equipment-slot small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salvage-section { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.salvage-section > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; cursor: pointer; padding: 6px 0; }
.salvage-section > summary > span:first-child { font-weight: 600; }
.salvage-section .recycle-toolbar { margin: 4px 0 0; padding: 0; border: 0; }
.salvage-preview { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.salvage-preview li { border-left: 3px solid var(--rarity); padding-left: 8px; color: var(--muted); }
.salvage-preview b { color: var(--rarity); margin-right: 6px; }
.ownership-record { margin: 8px 0; }
.ownership-record > summary { cursor: pointer; padding: 4px 0; color: var(--muted); }
#inventory-details .hull-meter { margin: 8px 0; }
#ship-list .equipped-ship { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; justify-items: start; text-align: left; margin: 0; min-height: 0; }
#ship-list .equipped-ship .inventory-ship { width: 64px; height: 64px; grid-row: 1 / 3; }
#ship-list .equipped-ship strong { align-self: end; font-size: 14px; }
#ship-list .equipped-ship span { align-self: start; color: var(--muted); }
/* Acquisition + merge (Claude, 2026-10-13) */
.acquire-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); background: #0b151b; }
.acquire-card .acquisition-quote { margin: 0; }
.acquire-action { display: grid; gap: 4px; }
.acquire-action #acquire-ship { min-height: 44px; font-weight: 700; }
.acquire-action p:empty, #acquisition-contribution[hidden] { display: none; }
#acquisition-odds-panel > summary, #merge-advanced > summary { cursor: pointer; padding: 6px 0; }
#acquisition-probabilities { display: grid; gap: 0; }
.odds-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.odds-row s { color: var(--soft); font-weight: 400; margin-right: 4px; }
.link-command { min-height: 32px; font-size: 12px; padding: 0 8px; justify-self: start; }
.acquisition-active { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--accent); background: #0b1a20; margin: 10px 0; }
.acquisition-active header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.acquisition-active progress { width: 100%; height: 10px; }
.acquisition-remaining { font-variant-numeric: tabular-nums; font-weight: 600; }
.merge-head h3 { margin: 0 0 2px; }
.merge-head p { margin: 0 0 10px; }
.merge-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.merge-slot { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 24px; border: 1px solid var(--rarity, var(--line)); background: color-mix(in srgb, var(--rarity, #57d9e8) 6%, #070c10); text-align: center; min-width: 0; font-size: 12px; }
.merge-slot .inventory-ship { width: 52px; height: 52px; object-fit: contain; }
.merge-slot strong { color: var(--rarity); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.merge-slot small { color: var(--muted); }
.merge-role { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.merge-slot.is-primary .merge-role { background: #12323b; color: var(--accent); }
.merge-slot.is-consumed .merge-role { background: #2a1216; color: #ff9aa4; }
.merge-slot.is-empty { border-style: dashed; color: var(--soft); align-content: center; min-height: 110px; padding-bottom: 8px; }
.merge-outcome { margin: 6px 0; }
.merge-subhead { margin: 14px 0 6px; }
.merge-restriction { color: #ffc98a; }
#merge-ships { min-height: 42px; margin: 4px 0 6px; }
/* Commanders: focused hero above the owned grid (Claude, 2026-10-13; ref 073543). */
#view-commanders .grid-details-layout { grid-template-columns: minmax(0, 1fr); }
#view-commanders .grid-details-layout > #commander-details { order: -1; border-left: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; max-height: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 20px; align-items: start; }
#commander-details > * { grid-column: auto; }
#commander-details > .commander-hero, #commander-details > .trait-box { grid-column: 1; }
#commander-details > .commander-rolls-block { grid-column: 2; grid-row: 1 / 3; align-self: start; }
#commander-details > .fine, #commander-details > .detail-actions, #commander-details > details, #commander-details > .disabled-action, #commander-details > button, #commander-details > p { grid-column: 1 / -1; }
.commander-hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--rarity); background: color-mix(in srgb, var(--rarity) 6%, #070c10); }
.commander-hero .detail-image { width: 96px; height: 96px; margin: 0; }
.commander-hero .commander-portrait { width: 88px; height: 88px; }
.commander-hero h3 { margin: 0 0 6px; font-size: 18px; text-align: left; }
.rarity-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; border: 1px solid var(--rarity); color: var(--rarity); }
.commander-level { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.commander-level > span { font-weight: 700; padding: 1px 6px; border: 1px solid var(--accent-2); color: var(--accent-2); }
.level-track { height: 8px; border: 1px solid var(--line); background: #050a0e; }
.level-track > span { display: block; height: 100%; background: linear-gradient(90deg, #9b7a3a, var(--accent-2)); }
.effect-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; }
.effect-chip { font-size: 11px; padding: 2px 6px; border: 1px solid var(--line); background: #0b151b; color: var(--muted); }
.effect-chip b { color: var(--text); }
.commander-hero-body p { margin: 4px 0 0; }
.trait-box { display: grid; gap: 2px; margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent-2); background: #121008; }
.trait-box strong { color: var(--accent-2); }
.commander-rolls-title { margin: 0; font-size: 13px; }
#recruitment-details .commander-hero { margin-bottom: 8px; }
@media (max-width: 760px) { #view-commanders .grid-details-layout > #commander-details { grid-template-columns: minmax(0, 1fr); } #commander-details > .commander-rolls-block { grid-column: 1; grid-row: auto; } .commander-hero { grid-template-columns: 72px minmax(0, 1fr); } .commander-hero .detail-image { width: 72px; height: 72px; } .commander-hero .commander-portrait { width: 64px; height: 64px; } }
#commander-details .detail-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
#commander-details .detail-actions button, #commander-details #upgrade-commander { width: auto; min-width: 140px; flex: 0 0 auto; }
#commander-details > .disabled-action, #commander-details > #upgrade-commander { justify-self: start; }

/* Redesign (Claude, 2026-10-13): contextual dialogs, Void tab, pilot card, HUD repair chip. */
.compact-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; padding: 0 16px 16px; }
.compact-dialog .dialog-heading { position: sticky; top: 0; z-index: 2; background: var(--panel, #101b23); padding: 12px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compact-dialog .dialog-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.compact-dialog .heading-icon { width: 24px; height: 24px; image-rendering: pixelated; }
#repair-dialog .hull-repair-panel { border: 0; padding: 0; margin: 0; background: none; }
#repair-dialog #hull-repair-main { grid-template-columns: minmax(0, 1fr); gap: 10px; }
#repair-dialog .hull-auto { border: 1px solid var(--line); padding: 4px 10px 8px; background: #0b151b; margin-top: 12px; }
#repair-dialog .hull-auto-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#repair-dialog .hull-auto-form .toggle { grid-column: 1 / -1; }
#repair-dialog .hull-auto-form button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
#merge-dialog { width: min(760px, calc(100vw - 24px)); }
#merge-dialog .merge-head p { margin-top: 0; }
.merge-launcher { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); background: #0b151b; margin: 8px 0; }
.merge-launcher img { width: 36px; height: 36px; image-rendering: pixelated; }
.merge-launcher small { display: block; color: var(--muted); }
.void-tab { position: relative; }
.void-tab small { display: block; font-size: 10px; line-height: 1.1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.void-tab[data-void-state="running"] small { color: #64f2c7; }
.void-tab[data-void-state="paused"] small { color: #ffc98a; }
.void-tab[data-void-state="elapsed"] small { color: #d7b4ff; }
.void-tab:not([data-void-state="idle"]) { box-shadow: inset 0 -3px 0 #c58bff; }
.void-active { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--rarity); background: color-mix(in srgb, var(--rarity) 8%, #070c10); }
.void-active img { width: 56px; height: 56px; image-rendering: pixelated; }
.void-active h3 { margin: 0; color: var(--rarity); }
.void-clock { margin: 2px 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.void-links { flex-direction: row; flex-wrap: wrap; }
.void-links button { width: auto; flex: 0 0 auto; }
.combat-side-hud .hud-repair { pointer-events: auto; display: flex; align-items: center; gap: 6px; width: auto; min-height: 30px; padding: 0 8px; margin: 2px 0 4px auto; font-size: 12px; font-weight: 700; color: #ffd9a8; border-width: 6px; }
.combat-side-hud .hud-repair img { width: 18px; height: 18px; image-rendering: pixelated; }
.combat-side-hud .hud-repair[hidden] { display: none; }
#destroyed-repair { flex: 0 0 auto; position: relative; z-index: 2; width: 100%; margin-bottom: 10px; color: #ffd9a8; font-weight: 700; }
#combat-pilot { display: block; }
.pilot-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; max-width: 280px; min-height: 0; padding: 4px 6px; text-align: left; border: 1px solid var(--rarity, var(--line)); border-image: none; background: color-mix(in srgb, var(--rarity, #57d9e8) 7%, #070c10); }
.pilot-card:hover { border-color: #efffff; }
.pilot-frame { width: 44px; height: 44px; border: 2px solid var(--rarity, var(--line)); background: #050a0e; display: grid; place-items: center; overflow: hidden; }
.pilot-frame .commander-portrait { width: 40px; height: 40px; object-fit: cover; image-rendering: pixelated; }
.pilot-copy { display: grid; min-width: 0; line-height: 1.25; }
.pilot-copy .footer-primary { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-copy small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-copy .rarity-badge { margin: 0 2px 0 0; font-size: 9px; padding: 0 4px; }
.pilot-card.is-empty .pilot-frame { border-style: dashed; }
@media (max-width: 620px) { .pilot-card { grid-template-columns: 36px minmax(0, 1fr); } .pilot-frame { width: 36px; height: 36px; } .pilot-frame .commander-portrait { width: 32px; height: 32px; } .pilot-stats { display: none; } .void-active { grid-template-columns: 44px minmax(0, 1fr); } .void-active button { grid-column: 1 / -1; } #repair-dialog .hull-auto-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .pilot-card { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 2px 4px; border-width: 1px; }
  .pilot-frame { width: 28px; height: 28px; border-width: 1px; } .pilot-frame .commander-portrait { width: 26px; height: 26px; }
  .pilot-copy .footer-primary { font-size: 12px; } .pilot-copy small { font-size: 10px; }
}
@media (max-width: 620px) { .pilot-card { height: 34px; line-height: 1.1; overflow: hidden; align-content: center; } .pilot-copy { line-height: 1.1; } }

/* ---- Redesign follow-up (Oct 13 18:30): uniform quick controls, merge rows ---- */
.combat-quick-controls button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 12px; line-height: 1; white-space: nowrap; }
.combat-quick-controls button img { width: 20px !important; height: 20px !important; object-fit: contain; image-rendering: pixelated; }
#merge-dialog .merge-input { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); background: #0b151c; }
#merge-dialog .merge-input span button { min-height: 26px; margin-top: 4px; padding: 2px 8px; font-size: 11px; }
#merge-dialog .merge-input input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
#merge-dialog .merge-input input[type="checkbox"]:disabled { opacity: .3; }
#merge-dialog .merge-restriction { color: #ffc98a; }
#merge-dialog .merge-slot.is-empty { min-height: 72px; }
#merge-primary:disabled { opacity: .6; }
.merge-eligibility-host { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.merge-eligibility { flex: 1 1 260px; margin: 0; padding: 8px 10px; border-left: 3px solid #ffc266; background: #1a1608; font-size: 12px; }
.merge-eligibility.is-ready { border-left-color: #51dbea; background: #08161c; }
@media (max-width: 620px) {
  .combat-quick-controls button { height: 44px; min-height: 44px; padding: 0 8px; gap: 4px; }
  #void-hud { min-width: 0; padding: 4px 6px; gap: 6px; }
  #void-hud .void-hud-icon { display: none; }
  #void-hud small { font-size: 9px; }
  #void-hud strong { font-size: 11px; }
}
@media (max-width: 620px) { #combat-pilot .pilot-stats { display: none; } #combat-pilot .pilot-copy { align-content: center; } }
@media (max-width: 420px) {
  .combat-quick-controls { flex: 1 1 100%; min-width: 0; }
  .combat-quick-controls button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 360px) { .combat-quick-controls button { padding: 0 4px; gap: 3px; font-size: 9px; } }

/* ---- Equip Best compact review (Oct 13 19:30) ---- */
#equipment-dialog:has(.equip-best-review) { width: min(560px, calc(100vw - 24px)); }
.equip-best-review { display: grid; gap: 10px; }
.eb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.eb-objectives { display: inline-flex; gap: 4px; }
.eb-objectives button { min-height: 30px; padding: 2px 10px; font-size: 12px; }
.eb-objectives button.is-active { background: #13505d; color: #efffff; box-shadow: inset 0 0 0 1px #51dbea; }
.eb-verdict { margin: 0; font-size: 13px; }
.eb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.eb-kpi { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); background: #0b151c; min-width: 0; }
.eb-kpi small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.eb-kpi strong { font-size: 18px; }
.eb-kpi span { font-size: 11px; }
.eb-kpi.is-up span, .eb-all .is-up b { color: #6ff0a4; }
.eb-kpi.is-down span, .eb-all .is-down b { color: #ff8a96; }
.eb-kpi.is-same span { color: var(--muted); }
.eb-actions { margin: 0; }
.eb-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.eb-changes li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 8px; background: #0b151c; border-left: 2px solid #51dbea; font-size: 13px; }
.eb-slot { color: var(--muted); font-size: 12px; }
.eb-add { color: #6ff0a4; font-weight: 700; } .eb-remove { color: #ff8a96; font-weight: 700; } .eb-arrow { color: var(--muted); }
.eb-changes small { color: var(--muted); }
.eb-all summary { cursor: pointer; font-size: 13px; }
.eb-all .comparison-stats { margin: 6px 0; }
.eb-all .is-same { opacity: .55; }
@media (max-width: 520px) { .eb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eb-kpi strong { font-size: 16px; } }
.eb-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.eb-actions > *, .eb-actions button { width: 100%; margin: 0; }
.account-connection { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:6px 12px; color:#b8ecf5; border-bottom:1px solid #28abc4; background:#070e13; font-size:13px; }
.account-connection a { color:#72e3f3; }
.combat-options > .account-connection { flex:1 1 100%; min-width:0; padding:2px 0; border:0; }
.account-connection #account-status { flex:1; min-width:100px; overflow-wrap:anywhere; }
.account-loading { position:fixed; inset:0; z-index:1000; background:#08121bf5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:24px; text-align:center; }
.account-loading[hidden] { display:none; }
.account-loading p { max-width:560px; }
.account-loading a { color:#72e3f3; }
/* Owner-approved galaxy unlock card, integrated from Claude's released draft. */
.galaxy-level-detail .galaxy-purchase { display: none; }
.galaxy-lock-card { margin: 0 0 12px; padding: 12px; border: 1px solid #ffc266aa; background: linear-gradient(180deg, #1b1608, #0b1218); box-shadow: inset 0 0 0 1px #00000080; }
.galaxy-lock-card.is-ready { border-color: #51dbea; background: linear-gradient(180deg, #08202a, #0b1218); }
.galaxy-lock-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; color: #ffd27a; }
.galaxy-lock-card.is-ready h3 { color: #8ff3ff; }
.galaxy-lock-card h3 img { width: 18px; height: 18px; image-rendering: pixelated; }
.galaxy-lock-card > p { margin: 0 0 10px; font-size: 12px; color: #d5e4ec; line-height: 1.4; }
.glc-box { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #ffffff1f; background: #050b10b3; }
.glc-box h4 { margin: 0 0 6px; font-size: 10px; letter-spacing: 0; color: #ffc266; }
.galaxy-lock-card.is-ready .glc-box h4 { color: #51dbea; }
.glc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.glc-row img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.glc-row b { font-size: 15px; color: #ffe2a3; }
.glc-row b.is-short { color: #ff8a96; }
.glc-row b.is-up { color: #ff9aa5; }
.galaxy-lock-card button { width: 100%; margin-top: 4px; }
.galaxy-lock-card .disabled-action { display: block; width: 100%; }
.galaxy-lock-card .fine { margin: 6px 0 0; font-size: 11px; color: #9fb4c0; }

/* Compact Workshop (Claude, Oct17; owner: "compress workshop to be like the commander tab"): action bar + ship grid
   + details. Equipment column, category tabs and recent activity are hidden in Workshop (see src/workshop-compact.js). */
#view-fleet.is-workshop #inventory-tabs, #view-fleet.is-workshop #inventory-workbench > .equipped-pane,
#view-fleet.is-workshop #workshop-short-history, #view-fleet.is-workshop #ship-acquire-view,
#view-fleet.is-workshop #ship-workshop > .workshop-bands { display: none !important; }
#view-fleet.is-workshop #inventory-workbench, .online-portrait #view-fleet.is-workshop #inventory-workbench { grid-template-columns: minmax(0, 1fr) 280px; }
.workshop-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0 0 12px; }
.workshop-actions > .workshop-action, .workshop-actions > .merge-launcher { flex: 1 1 260px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 8px 12px; border: 1px solid var(--line, #24485a); background: #071820; }
.workshop-action img { width: 32px; height: 32px; image-rendering: pixelated; }
.workshop-action strong { display: block; } .workshop-action small { color: #8fb3c2; }
.workshop-order-host { flex: 1 1 100%; } .workshop-order-host:empty { display: none; }
#acquire-dialog .acquire-card { margin: 0; }
@media (max-width: 700px) { #view-fleet.is-workshop #inventory-workbench { grid-template-columns: minmax(0, 1fr); } }

/* Chest opening reel (Claude, Oct17; owner: "an animation of a like rolling / gacha"). See src/chest-reel.js. */
.chest-reel-dialog { width: min(860px, calc(100vw - 24px)); padding: 26px 0 22px; color: #e8f4f8; text-align: center; border: 1px solid var(--rc, #57b8ff); background: radial-gradient(120% 90% at 50% 0%, #10283a 0%, #050d14 70%); box-shadow: 0 0 60px #000c, 0 0 0 1px #0008 inset; }
.chest-reel-dialog::backdrop { background: #02060acc; backdrop-filter: blur(3px); }
.chest-reel-dialog .reel-kicker { margin: 0; font-size: 11px; letter-spacing: .35em; color: var(--rc, #57b8ff); }
.chest-reel-dialog h2 { margin: 8px 0 4px; font-size: 28px; letter-spacing: .04em; }
.chest-reel-dialog .reel-sub { margin: 0 0 16px; min-height: 1.3em; color: #9fc3d1; }
.chest-reel-dialog.is-done .reel-sub { color: var(--rc, #57b8ff); font-weight: 700; }
.reel-window { position: relative; overflow: hidden; height: 172px; border-block: 1px solid #2d4e5e; background: #03080d; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.reel-strip { position: absolute; top: 12px; left: 0; display: flex; gap: 10px; will-change: transform; }
.reel-marker { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #ffd27a; box-shadow: 0 0 10px #ffd27a; }
.reel-marker::before { content: ""; position: absolute; top: 0; left: -7px; border: 8px solid transparent; border-top-color: #ffd27a; }
.reel-tile { flex: 0 0 128px; height: 148px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 8px; background: linear-gradient(180deg, #0c1c27, #08131b); border: 1px solid #1d3442; border-bottom: 4px solid var(--rc); box-shadow: inset 0 -30px 40px -30px var(--rc); }
.reel-tile img { width: 48px; height: 48px; image-rendering: pixelated; }
.reel-tile b { font-size: 12px; line-height: 1.2; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-tile small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }
.chest-reel-dialog.is-done .reel-tile:not(.is-win) { opacity: .35; filter: grayscale(.6); transition: opacity .4s, filter .4s; }
.chest-reel-dialog.is-done .reel-tile.is-win { border-color: var(--rc); box-shadow: 0 0 24px var(--rc), inset 0 0 30px -10px var(--rc); animation: reel-win 1.2s ease-out 1; }
@keyframes reel-win { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 100% { transform: scale(1); } }
.chest-reel-dialog .reel-skip { margin-top: 18px; min-width: 190px; }
.chest-reel-dialog .reel-note { margin: 10px 0 0; font-size: 11px; color: #7f9ca8; }
@media (max-width: 560px) { .reel-tile { flex-basis: 128px; } .chest-reel-dialog h2 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .chest-reel-dialog.is-done .reel-tile.is-win { animation: none; } }