/* Nectaris remake — stylesheet. Original design; dark lunar palette. */

* { box-sizing: border-box; }

:root {
  --ui-text: #f2ecdc;
  --ui-secondary: #ded5c1;
  --union-color: #4a90e8;
  --xenon-color: #3cb44b;
}

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: #14110c;
  color: #e8e2d4;
  font-family: "Segoe UI", system-ui, sans-serif;
}

.hidden { display: none !important; }

button, .btn-like, .filebtn {
  background: #2c2820;
  color: #e8e2d4;
  border: 1px solid #55503f;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button, .btn-like, .filebtn, select { transition: none !important; animation: none !important; }
button:hover:not(:disabled), .btn-like:hover, .filebtn:hover { background: #3d382c; }
button:disabled { opacity: 1; color: var(--ui-secondary); background: #211d16; border-style: dashed; cursor: not-allowed; }
.filebtn input { display: none; }
select, input[type="url"] {
  background: #17140f;
  color: #e8e2d4;
  border: 1px solid #55503f;
  border-radius: 4px;
  padding: 6px 8px;
}

/* ---------- mission library ---------- */

#menu-screen { max-width: 1580px; margin: 0 auto; padding: 28px 28px 60px; }
.menu-header { margin-bottom: 24px; }
.menu-brand { margin: 0 0 12px; color: #e9cb69; font-size: 13px; font-weight: 700; letter-spacing: 4px; }
.menu-brand span { margin-left: 14px; color: var(--ui-secondary); font-size: 10px; letter-spacing: 2px; }
.menu-header h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -1px; margin: 0; color: #f0e9d9; }
.subtitle { color: var(--ui-secondary); margin: 10px 0 0; font-size: 14px; }
#menu-screen .profile-panel { margin: 0 0 22px; padding: 16px 20px; border-color: #433c2e; border-radius: 6px; background: #1d1a14; }
#menu-screen .profile-panel .profile-eyebrow { margin: 0; font-size: 10px; color: var(--ui-secondary); }
#menu-screen .profile-panel h2 { font-size: 18px; margin: 6px 0 12px; font-weight: 600; }
#menu-screen #profile-record { margin: 0; font-size: 13px; color: var(--ui-secondary); }
.profile-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.profile-summary .profile-actions { font-size: 12px; }
#menu-screen .profile-panel > .section-note { margin: 6px 0 0; font-size: 12px; }
.opening-settings { border: 1px solid #85724e; background: #252017; padding: 18px; margin: 0 0 24px; border-radius: 8px; }
.opening-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.opening-heading h2 { margin: 0; font-size: 20px; }
.opening-settings fieldset { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.opening-settings legend { font-size: 13px; margin-bottom: 8px; }
.opening-option { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; padding: 14px; border: 1px solid #85724e; border-radius: 5px; cursor: pointer; }
.opening-option:has(input:checked) { border-color: #ffda76; background: #43381f; }
.opening-option small { display: block; font-size: 13px; line-height: 1.5; margin-top: 6px; color: var(--ui-secondary); }
.opening-default { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.opening-settings p { font-size: 13px; line-height: 1.5; margin: 14px 0 0; }
.library-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 0 0 16px;
  color: var(--ui-secondary); font-size: 12px; }
.library-toolbar label { display: inline-flex; align-items: center; gap: 7px; }
.library-toolbar > span { margin-left: auto; color: var(--ui-secondary); }
.library-toolbar select { font-size: 12px; }
.help-key { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1px solid #625945; border-radius: 50%; margin-left: 4px; font-size: 12px; }
#level-groups-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px;
  padding: 12px 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #5d5035 #211b12;
  background: #14110c; border-top: 1px solid #393326; border-bottom: 1px solid #393326; }
#level-groups-nav a { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  border-radius: 4px; text-decoration: none; color: var(--ui-secondary); font-size: 12px; }
#level-groups-nav a:hover, #level-groups-nav a:focus-visible { color: #ffe498; background: #2c261a; }
#level-groups-nav a span { color: var(--ui-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.level-group { margin-top: 24px; scroll-margin-top: 86px; }
.level-group-header { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.level-group-intro { flex: 1; min-width: 0; }
.level-group-kind { color: var(--ui-secondary); margin: 0 0 5px; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; }
.level-group h2 { font-size: 20px; letter-spacing: -.3px; font-weight: 600; margin: 0; color: #e9e0cc; }
.section-note { color: var(--ui-secondary); font-size: 13px; line-height: 1.5; }
.level-group .section-note { margin: 5px 0 0; }
.group-progress { flex-shrink: 0; color: var(--ui-secondary); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.level-library { --level-tracks: 3.5ch minmax(max-content, 1fr) 6ch repeat(3, 6ch) minmax(max-content, 12ch) 32px;
  display: grid; grid-template-columns: var(--level-tracks);
  gap: 3px 6px; overflow-x: auto; font-size: 12px; scrollbar-width: thin; scrollbar-color: #8b7850 #211d16; }
.level-columns, .level-card { display: grid; grid-template-columns: subgrid; grid-column: span 8; white-space: nowrap; }
.level-columns { align-items: center; padding: 6px 0; border: 1px solid transparent; color: var(--ui-secondary); }
.level-columns-2, .level-columns-3 { display: none; }
.level-card { align-items: stretch; padding: 0; background: #211d16;
  border: 1px solid #685b40; border-radius: 4px; }
.level-card.cleared { border-color: #d4af43; }
.level-play { display: grid; grid-template-columns: subgrid; grid-column: 1 / -2; align-items: center;
  min-height: 34px; padding: 6px 0; border: 0; border-radius: 3px 0 0 3px;
  text-align: left; color: var(--ui-text); background: transparent; font: inherit; white-space: nowrap; }
.level-play:hover:not(:disabled) { background: #28251e; }
.level-card:has(.level-play:hover), .level-card:focus-within { border-color: #ffdb59; }
.level-card-top, .level-card-forces { display: contents; }
.level-number { padding-left: 9px; color: #ffdb59; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.level-card-heading { font-size: 13px; line-height: 1.4; font-weight: 650; color: var(--ui-text); }
.level-card-meta { color: var(--ui-secondary); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.level-force { color: var(--ui-text); font-size: 12px; line-height: 1.3; font-weight: 600; white-space: nowrap; text-align: right; }
.level-force.force-union { color: var(--union-color); }
.level-force.force-xenon { color: var(--xenon-color); }
.level-force.force-neutral { color: var(--ui-text); }
.force-count { font: inherit; font-variant-numeric: tabular-nums; }
.level-play .mission-record { margin: 0; color: var(--ui-secondary); font-size: 11px; line-height: 1.3; }
.level-card > .level-help-wrap { display: flex; align-items: center; justify-content: center; border-left: 1px solid #514733; }
.level-help-wrap { flex-shrink: 0; }
.level-help { display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid #514936; border-radius: 50%; background: transparent; color: var(--ui-secondary); font: 13px/1 Georgia, serif; }
.level-help:hover:not(:disabled), .level-help[aria-expanded="true"] { background: #342c1e; color: #e8cc83; border-color: #9a8043; }
.level-help:focus-visible, .level-play:focus-visible, #level-groups-nav a:focus-visible { outline: 2px solid #e6c867; outline-offset: 3px; }
.level-play:focus-visible { outline-offset: -2px; }
.level-briefing { position: fixed; z-index: 50; width: 360px; max-width: calc(100vw - 24px);
  max-height: min(520px, calc(100vh - 24px)); overflow-y: auto; padding: 18px 20px; border: 1px solid #77613a;
  border-radius: 6px; background: #282219; box-shadow: 0 8px 28px #0008; cursor: default; white-space: normal; }
.level-briefing .briefing-title { margin: 0 0 15px; color: #edda9e; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.level-briefing h4 { margin: 14px 0 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ui-secondary); }
.level-briefing p { margin: 0 0 10px; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
.level-briefing .level-tags { color: var(--ui-secondary); font-size: 11px; }
.level-source { display: inline-block; margin-top: 8px; color: #e2c885; font-size: 12px; text-underline-offset: 3px; }
.empty-levels { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px dashed #4a412f; border-radius: 5px;
  color: var(--ui-secondary); font-size: 13px; }
.menu-controls { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.url-import { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.url-import input { min-width: 0; flex: 1 1 240px; }
#level-import-status { font-size: 12px; }
#level-import-status.success { color: #8bcf8b; }
#level-import-status.error { color: #ff8f6f; }
#custom-level-tools a { color: var(--ui-secondary); }
.menu-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #393326; color: var(--ui-secondary); font-size: 12px; line-height: 1.7; }
.menu-footer a { color: var(--ui-secondary); }
@media (min-width: 920px) {
  .level-library { grid-template-columns: var(--level-tracks) var(--level-tracks); }
  .level-columns-2 { display: grid; }
}
@media (min-width: 1360px) {
  .level-library { grid-template-columns: var(--level-tracks) var(--level-tracks) var(--level-tracks); }
  .level-columns-3 { display: grid; }
}
@media (max-width: 620px) {
  #menu-screen { padding: 24px 16px 40px; }
  .menu-brand { letter-spacing: 3px; }.menu-brand span { margin-left: 6px; font-size: 9px; }
  .library-toolbar { gap: 12px; }.library-toolbar > span { margin-left: 0; }
  .level-group-header { flex-wrap: wrap; gap: 10px; }.level-group-intro { flex-basis: calc(100% - 42px); }
  .level-group-header > .level-help-wrap { order: 1; }.group-progress { order: 2; width: 100%; }
  .level-group h2 { font-size: 20px; }
}

/* ---------- compensation opening ---------- */
#balance-screen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.balance-header { display: flex; align-items: center; gap: 18px; flex-shrink: 0; min-height: 56px;
  padding: 10px 16px; background: #211d16; border-bottom: 1px solid #685b40; }
#balance-map-name { color: var(--ui-secondary); font-size: 13px; }
.balance-body { display: flex; flex: 1; min-height: 0; }
.balance-board { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; }
.balance-map-controls { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: #1c1913; }
#balance-union { border-color: var(--union-color); color: var(--union-color); }
#balance-xenon { border-color: var(--xenon-color); color: var(--xenon-color); }
#balance-canvas-wrap { flex: 1; min-height: 0; overflow: hidden; }
#balance-canvas { display: block; cursor: crosshair; }
.balance-map-caption { flex: 0 0 auto; padding: 8px 16px; font-size: 12px; line-height: 1.4; background: #211d16; }
.balance-map-caption p { margin: 3px 0; }
#balance-hex-info { max-height: 72px; overflow-y: auto; color: var(--ui-secondary); }
.balance-panel { flex: 0 0 410px; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  border-left: 1px solid #685b40; background: #1c1913; }
.balance-intro { padding: 16px 18px 10px; flex: 0 0 auto; }
.balance-intro .profile-eyebrow { margin: 0; color: #ffda76; font-size: 10px; letter-spacing: 1.6px; }
.balance-intro h2 { font-size: 19px; margin: 9px 0; }
.balance-intro p { font-size: 12px; line-height: 1.45; margin: 8px 0; }
#balance-rules { color: var(--ui-secondary); }
#balance-offers { flex: 1 1 150px; min-height: 85px; overflow-y: auto; padding: 4px 12px 10px; }
.balance-offer { display: block; width: 100%; padding: 9px 10px; text-align: left; font-size: 12px;
  margin: 3px 0; border-color: #685b40; }
.balance-offer.selected { background: #44391f; border: 2px solid #ffda76; padding: 8px 9px; }
.balance-offer.future { border-style: dashed; color: var(--ui-secondary); }
.balance-choice { flex: 0 0 auto; padding: 12px 18px; background: #292319; border-top: 1px solid #685b40; }
#balance-package-name { font-size: 14px; color: #ffdf88; }
#balance-placement-list { margin: 7px 0; max-height: 165px; overflow-y: auto; }
#balance-placement-list p { font-size: 12px; margin: 5px 0; }
.balance-location { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 7px;
  width: 100%; padding: 2px 4px; text-align: left; font-size: 12px; margin-bottom: 3px; }
#balance-choice-note { font-size: 11px; margin: 8px 0; color: var(--ui-secondary); }
.balance-buttons { display: flex; flex-direction: column; gap: 7px; }
.balance-buttons button { min-height: 36px; font-size: 13px; }
#balance-handoff { position: fixed; inset: 0; z-index: 100; background: #17140f; display: grid; place-items: center; padding: 24px; }
#balance-handoff > div { max-width: 440px; text-align: center; }
#balance-match-label { font-size: 11px; color: #ffdf88; white-space: nowrap; }
@media (max-width: 760px) {
  .balance-header { gap: 8px; flex-wrap: wrap; padding: 8px; }
  .balance-header strong { font-size: 14px; }
  #balance-map-name { display: none; }
  .balance-body { flex-direction: column; overflow-y: auto; }
  .balance-board { flex: 0 0 48vh; min-height: 280px; }
  .balance-panel { flex: 0 0 auto; border-left: 0; border-top: 1px solid #685b40; }
  #balance-offers { flex: none; height: 180px; }
  .balance-intro { padding-top: 12px; }
}

/* ---------- game ---------- */

#game-screen {
  --controls-top-height: 48px;
  --controls-left-width: 184px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
#topbar {
  display: flex;
  flex: 0 0 var(--controls-top-height);
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 8px;
  background: #1d1912;
  border-bottom: 1px solid #3d382c;
}
.topbar-scroll { display: flex; flex: 1 1 auto; align-items: center; gap: 10px;
  min-width: 64px; height: 100%; overflow-x: auto; overflow-y: hidden; }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.view-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
#topbar button { padding: 5px 9px; }
#topbar select { padding: 5px 4px; }
.opponent-control { display: inline-flex; align-items: center; gap: 6px; }
#opponent-select { max-width: 235px; }
.controls-left .opponent-control { display: flex; flex-direction: column; align-items: stretch; }
.controls-left #opponent-select { width: 100%; min-width: 0; }
.history-controls { display: inline-flex; }
.history-controls button { min-width: 78px; border-radius: 0; }
.history-controls button:first-child { border-radius: 4px 0 0 4px; }
.history-controls button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.history-controls button:not(:disabled) { color: #ffe185; border-color: #a58d45; opacity: 1; position: relative; }
.range-own-move { color: #78b7ff; }
.topbar-scroll > *, .topbar-actions > * { flex-shrink: 0; white-space: nowrap; }
#topbar, .topbar-scroll, #action-menu { scrollbar-width: thin; scrollbar-color: #6b6350 #1d1912; }
/* Extremely narrow top layouts may scroll as a whole. Avoid a second
   scrollbar consuming the settings row's height. Keyboard focus still scrolls. */
#topbar { scrollbar-width: none; }
#map-title { font-weight: 700; letter-spacing: 3px; color: #ffd94a; }
#map-jump { max-width: 150px; }
#btn-watch[aria-pressed="true"] { color: #bfe95c; border-color: #6f8d31; }
#btn-music[aria-pressed="true"] { color: #ffd94a; border-color: #8c7930; }
#btn-endturn { margin-left: auto; }

#game-main { flex: 1; display: flex; min-width: 0; min-height: 0; }

/* Dock the same controls in a narrow column; the board owns the full height. */
#game-screen.controls-left { flex-direction: row; }
.controls-left #topbar { flex: 0 0 var(--controls-left-width); width: var(--controls-left-width); min-height: 0;
  flex-direction: column; align-items: stretch; gap: 8px; padding: 8px;
  overflow-x: hidden; overflow-y: auto; border-bottom: 0; border-right: 1px solid #3d382c; }
.controls-left .view-controls { order: 0; display: grid; grid-template-columns: 1fr auto; }
.controls-left #board-orientation { grid-column: 1 / -1; }
.controls-left .topbar-scroll { order: 1; flex: 1 1 auto; flex-direction: column;
  align-items: stretch; justify-content: flex-start; gap: 8px; min-height: 60px;
  min-width: 0; height: auto; overflow-x: hidden; overflow-y: auto; }
.controls-left .topbar-scroll > * { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.controls-left #map-title { letter-spacing: 1px; }
.controls-left #map-jump { max-width: 100%; width: 100%; }
.controls-left .topbar-actions { order: 2; flex-direction: column; align-items: stretch;
  padding-top: 8px; border-top: 1px solid #3d382c; }
.controls-left .history-controls { display: flex; }
.controls-left .history-controls button { flex: 1; min-width: 0; }
.controls-left #btn-endturn { margin-left: 0; }
.controls-left #end-turn-warning { top: auto; bottom: 8px; left: 192px; right: auto;
  max-width: calc(100% - 200px); max-height: calc(100dvh - 16px); }
#dock-unit-controls:empty { display: none; }
.controls-left #dock-unit-controls { order: 2; flex: 0 1 auto; min-height: 0;
  max-height: 40%; overflow-y: auto; }
.controls-left #action-menu, .controls-left #range-legend { position: static;
  width: 100%; max-width: none; flex-wrap: wrap; }
.controls-left #action-menu { margin-top: 5px; }
.controls-left #action-menu > .unload-prompt { white-space: normal; }
.controls-left #range-legend { padding: 6px; gap: 5px 8px; }
#end-turn-warning { position: fixed; right: 12px; top: 60px; z-index: 30;
  width: 360px; max-width: calc(100% - 24px); max-height: calc(100vh - 72px);
  overflow-y: auto; border-color: #d1a85a; font-size: 13px; line-height: 1.5; }
#end-turn-warning-text { margin: 0 0 10px; }
#end-turn-available { max-height: 240px; overflow-y: auto; }
#end-turn-available button { font-size: 12px; padding: 3px 5px; text-align: left; }
#btn-confirm-endturn { color: #ffe09a; border-color: #a98544; }

#canvas-wrap { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; }
#game-canvas { display: block; width: 100%; height: 0; flex: 1; min-height: 0; cursor: crosshair; }
#map-action-rail { flex-shrink: 0; background: #19160f; border-top: 1px solid #302b22; }
#btn-details[aria-expanded="true"], #btn-details.has-forecast { color: #ffd94a; border-color: #8c7930; }

#sidebar {
  width: 340px;
  flex: 0 0 340px;
  background: #1d1912;
  border-right: 1px solid #3d382c;
  padding: 12px;
  overflow-y: auto;
  font-size: 13px;
}
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sidebar-heading > strong { color: #ffd94a; }
#btn-details-close { font-size: 20px; line-height: 20px; padding: 2px 8px; }
#hex-info { margin-top: 14px; color: var(--ui-secondary); }
.ui-name { font-weight: 700; color: #ffd94a; margin-bottom: 6px; }
/* One compact stat row; only exceptions need a second line. Shared by the
   nearby card and selection inspector so both disclose the same details. */
.unit-card-head { display: flex; align-items: center; gap: 8px;
  min-height: 32px; margin-bottom: 8px; }
.unit-card-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.unit-card-portrait { position: relative; display: block; flex: 0 0 32px; height: 32px; }
.unit-card-portrait .unit-card-icon { display: block; }
.unit-card-rank { flex: 0 0 32px; width: 32px; height: 32px; }
.unit-card-head .ui-name { font-size: 14px; line-height: 18px; margin: 0;
  flex: 1; min-width: 0; overflow-wrap: anywhere; }
.unit-strength { position: absolute; left: -2px; bottom: -2px; padding: 0 2px;
  background: #211d16; color: #ffca92; font: 700 18px/20px monospace; }
.unit-combat-grid { display: grid; grid-auto-flow: column;
  grid-template-columns: minmax(0, 1.3fr); grid-auto-columns: minmax(0, 1fr);
  background: #15120e; border-radius: 3px; font-variant-numeric: tabular-nums; }
.unit-stat { min-width: 0; padding: 5px 4px; }
.unit-stat + .unit-stat { border-left: 1px solid #332d22; }
.unit-stat-label { display: block; color: var(--ui-secondary); font-size: 10px; line-height: 14px; }
.unit-stat > strong { display: block; color: #fff1cb; font: 700 22px/27px monospace; }
.unit-stat > strong small { color: var(--ui-secondary); font-size: 12px; }
.unit-stat-detail { display: block; color: #edcd83; font-size: 10px; line-height: 14px; }
.unit-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 10px;
  margin-top: 7px; color: var(--ui-secondary); font-size: 11px; line-height: 15px; }
.unit-card-foot > span { max-width: 100%; overflow-wrap: anywhere; }
.unit-card-foot strong { color: #e7dcc0; font-weight: 600; }
.unit-label { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; min-width: 0; }
.unit-label-icon { width: 32px; height: 32px; flex: 0 0 32px; order: -1; image-rendering: pixelated; }
.unit-label > span { min-width: 0; overflow-wrap: anywhere; }
.unit-inventory { margin-top: 8px; border-top: 1px solid #494032; padding-top: 5px; }
.inventory-caption { color: var(--ui-secondary); font-size: 11px; margin-bottom: 4px; }
.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; }
.inventory-entry { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 12px; }
.inventory-entry small { color: #ffca92; }

#unit-hover {
  position: absolute;
  z-index: 9;
  width: 280px;
  max-width: calc(100% - 16px);
  padding: 9px 10px;
  background: #211d16;
  border: 1px solid #8e805d;
  border-radius: 5px;
  box-shadow: 0 6px 20px #0009;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  overflow-wrap: anywhere;
}
#unit-hover { transition: none; animation: none; }

/* ---------- popups ---------- */

.popup {
  position: absolute;
  background: #241f17;
  border: 1px solid #6b6350;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  z-index: 20;
}
#action-menu { position: absolute; z-index: 10; display: flex; flex-wrap: nowrap;
  max-width: calc(100% - 16px); overflow-x: auto; overflow-y: hidden; gap: 2px; padding: 2px;
  background: #14110c; border: 1px solid #8e805d; border-radius: 5px; }
#action-menu button { flex-shrink: 0; white-space: nowrap; font-size: 12px; line-height: 18px; padding: 1px 8px; }
#action-menu button:last-child { color: #ffdf78; }
#range-legend { position: absolute; top: 8px; left: 8px; z-index: 9; pointer-events: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; max-width: calc(100% - 16px);
  padding: 5px 8px; border-radius: 4px; background: #14110cee; color: #eee0ba; font-size: 12px; }
#range-legend .unit-label { font-weight: bold; }
#range-legend .range-move::before, #range-legend .range-ground::before,
#range-legend .range-air::before { content: ""; display: inline-block; width: 12px; height: 8px;
  margin-right: 5px; border: 2px solid; vertical-align: -1px; }
#range-legend .range-move::before { border-color: #ffb441; background: #ffb44160; }
#range-legend .range-ground::before { border-color: #ff7770; }
#range-legend .range-air::before { border-color: #dab0ff; border-style: dashed; }
#range-legend .range-note { color: var(--ui-secondary); }
#action-status { padding: 9px 10px; margin-bottom: 12px; border-left: 2px solid #ffb467;
  background: #30271a; color: #eee0ba; line-height: 1.5; }
#transport-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#transport-actions button { font-size: 12px; padding: 5px 8px; }
#attack-targets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#attack-targets button { font-size: 11px; padding: 4px 6px; border-color: #864e39; }
.forecast-final { display: flex; gap: 14px; margin: 9px 0; font-size: 11px; color: var(--ui-secondary); }
.forecast-final strong { display: block; font: 700 16px monospace; color: #eee6cb; margin-top: 3px; }
#combat-inspector { color: #e9e4d4; }
.forecast-eyebrow { color: #d4b878; font-size: 10px; letter-spacing: 1.2px; }
#combat-inspector h3 { color: #ffe5a1; margin: 5px 0; font-size: 19px; }
.forecast-matchup { color: #ddd3ba; font-size: 12px; }
.forecast-note { color: var(--ui-secondary); font-size: 11px; line-height: 1.5; margin: 8px 0; }
.forecast-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 0; border-top: 1px solid #464030; border-bottom: 1px solid #464030; }
.forecast-summary strong { display: block; font-size: 19px; color: #ffe5a1; font-variant-numeric: tabular-nums; }
.forecast-summary span { font-size: 11px; color: var(--ui-secondary); }
.forecast-chart-title { margin-top: 12px; }
.outcome-map { width: 100%; max-width: 280px; display: block; margin: 6px auto 0; }
.outcome-map text { font: 9px monospace; pointer-events: none; }
.outcome-map .axis-tick { fill: #c4bea8; font-size: 10px; }
.outcome-map .axis-label { fill: #e9e2cb; font-size: 11px; }
.outcome-map g:focus { outline: none; }
.outcome-map g:focus rect, .outcome-map g:hover rect { stroke: #fff; stroke-width: 2px; }
.forecast-calculations { border-top: 1px solid #464030; margin-top: 12px; padding-top: 8px; }
.forecast-calculations summary { cursor: pointer; font-weight: 700; color: #ffe5a1; }
.forecast-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forecast-side h4 { margin: 10px 0 4px; color: var(--ui-secondary); font-size: 11px; }
.forecast-side > strong { font-size: 12px; }
.forecast-calculations p { color: var(--ui-secondary); font-size: 11px; line-height: 1.45; }
.forecast-side table { width: 100%; border-collapse: collapse; font: 10px monospace; }
.forecast-side td, .forecast-side th { text-align: right; padding: 3px 1px; border-bottom: 1px solid #383323; }
.forecast-side th:first-child { text-align: left; font-weight: 400; }
.forecast-side tr:last-child { color: #ffe5a1; }
@media (max-width: 850px) { #sidebar { width: 290px; flex-basis: 290px; padding: 10px; } }
.popup-title { font-weight: 700; color: #ffd94a; margin-bottom: 8px; letter-spacing: 1px; }
.popup-buttons { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }

#factory-panel { width: 340px; max-width: calc(100% - 16px); min-width: 0;
  display: flex; flex-direction: column; overflow: hidden; }
.factory-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
#factory-title { font-size: 15px; font-weight: 800; margin: 0; }
#factory-close { font-size: 20px; line-height: 22px; padding: 0 6px; }
#factory-summary { color: #d0c8b0; margin: 7px 0; font-size: 12px; flex-shrink: 0; }
#factory-list { min-height: 0; overflow-y: auto; gap: 6px; padding: 2px; }
.factory-row { display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  min-width: 0; min-height: 48px; padding: 5px 6px; gap: 3px; text-align: left;
  background: #1c1912; border: 1px solid #494032; border-radius: 4px; font-size: 12px; }
.factory-row .inventory-entry { flex: 1; }
.factory-row .unit-label { flex: 1; }
.factory-row[aria-disabled="true"] { color: var(--ui-secondary); }
.factory-row.is-ready { border-color: #8c7930; }
button.factory-row:hover, button.factory-row:focus-visible { background: #49402c; border-color: #ffd94a; }
button.factory-row:focus-visible { outline: 2px solid #ffd94a; outline-offset: -2px; }
.factory-unit-status { color: var(--ui-secondary); font-size: 11px; text-align: right; }
.is-ready .factory-unit-status { color: #ffe09a; font-weight: 700; }
.deploy-prompt { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding-right: 6px; }
.unload-prompt, #action-menu .unload-available, #transport-actions .unload-available {
  color: #ffb653; }
#action-menu .unload-available, #transport-actions .unload-available { border-color: #c67f2e; }
.unload-prompt::before { content: "⬡"; margin-right: 5px; color: #ff9b2d; }

#battle-panel { left: 50%; top: 18%; transform: translateX(-50%); min-width: 420px; }
#battle-detail { display: flex; gap: 18px; flex-wrap: wrap; }
.battle-side { flex: 1; min-width: 180px; }
.battle-exp { color: #ffd94a; font: 11px/1.4 monospace; margin: -2px 0 5px; }
.battle-steps { border-collapse: collapse; width: 100%; font-family: monospace; font-size: 13px; }
.battle-steps th, .battle-steps td { padding: 2px 8px; text-align: right; border-bottom: 1px solid #2c2820; }
.battle-steps td:first-child { text-align: left; color: var(--ui-secondary); }
.battle-note { width: 100%; color: var(--ui-secondary); margin-top: 6px; font-size: 13px; }
.battle-result { width: 100%; margin-top: 8px; font-weight: 700; color: #ffb08a; }

#watch-panel {
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  min-width: 460px;
  max-width: 620px;
  border-width: 2px;
  pointer-events: none;
  text-align: center;
}
#watch-title { color: #bfe95c; letter-spacing: 3px; }
.watch-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 5px 0;
}
.watch-side { font-weight: 700; font-size: 15px; }
.watch-versus { color: var(--ui-secondary); font-size: 12px; letter-spacing: 2px; }
.watch-strength { color: #ffe9a0; font-family: monospace; font-size: 17px; }
.watch-survived { color: #cfc8b4; font-size: 12px; margin-top: 3px; }
.watch-destroyed { color: #ff8f6f; text-transform: uppercase; letter-spacing: 1px; }
.watch-calcs { color: var(--ui-secondary); font: 12px monospace; margin-top: 5px; }
.watch-move { color: #d8d2c0; font-size: 14px; }
#battle-detail > .watch-matchup { width: 100%; }

#gameover-panel { left: 50%; top: 35%; transform: translateX(-50%); min-width: 320px; text-align: center; }
#gameover-text { font-size: 18px; margin: 10px 0; }

#toast {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 17, 12, 0.92);
  border: 1px solid #6b6350;
  border-radius: 4px;
  padding: 8px 18px;
  z-index: 30;
}

/* ---------- editor ---------- */

#editor-screen { display: flex; height: 100vh; }
#editor-tools {
  width: 300px;
  background: #1d1912;
  border-right: 1px solid #3d382c;
  padding: 12px;
  overflow-y: auto;
  font-size: 13px;
}
#editor-tools h2 { font-size: 15px; letter-spacing: 2px; color: #ffd94a; margin: 0 0 10px; }
#editor-tools h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ui-secondary); margin: 16px 0 6px; border-bottom: 1px solid #2c2820;
}
.tool-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-grid button { padding: 4px 8px; font-size: 12px; }
.tool-grid button.active { background: #6b5c22; border-color: #ffd94a; }
.editor-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.editor-row label { flex: 1; }
.editor-row input[type="number"] { width: 60px; background: #14110c; color: #e8e2d4; border: 1px solid #55503f; }
.editor-row input[type="text"] { flex: 1; background: #14110c; color: #e8e2d4; border: 1px solid #55503f; padding: 3px 6px; }
#editor-canvas-wrap { flex: 1; position: relative; }
#editor-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
#editor-msg { color: #ffb08a; min-height: 18px; margin-top: 8px; }
textarea#custom-units-json {
  width: 100%; height: 120px;
  background: #14110c; color: #e8e2d4;
  border: 1px solid #55503f; font-family: monospace; font-size: 11px;
}

.action-hint {
  max-width: 180px;
  padding: 7px 10px;
  color: #ffd9b4;
  font-size: 12px;
  line-height: 1.4;
}

/* Player identity, resume and match history. */
.profile-panel {
  margin-top: 28px; padding: 22px; background: #221e17;
  border: 1px solid #625337; border-radius: 8px;
}
.profile-panel h2 { margin: 6px 0 18px; overflow-wrap: anywhere; }
.profile-eyebrow { font-size: 11px; letter-spacing: 3px; color: #ffd94a; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
button.primary { background: #ffd94a; color: #211b0a; font-weight: 700; border-color: #ffd94a; }
button.primary:hover { background: #ffe985; }
#continue-match { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; border-top: 1px solid #625337; padding-top: 18px; margin-top: 18px; }
#continue-detail { color: var(--ui-secondary); font-size: 13px; margin-bottom: 0; }
#profile-record { color: #e4cf98; }
#history-section { margin-top: 20px; }
#history-section summary { cursor: pointer; }
#profile-history { padding-left: 22px; color: var(--ui-secondary); font-size: 14px; line-height: 1.8; }
#profile-dialog { width: min(460px, calc(100vw - 32px)); padding: 28px;
  color: #e8e2d4; background: #221e17; border: 1px solid #857044; border-radius: 10px; }
#profile-dialog::backdrop { background: rgba(0,0,0,.8); }
#profile-dialog p { line-height: 1.5; }
#profile-dialog label { display: block; margin-bottom: 8px; }
#profile-name { width: 100%; padding: 12px; font: inherit; background: #14110c;
  color: #fff; border: 1px solid #857044; border-radius: 4px; }
#profile-error { color: #ffb2a2; font-size: 14px; }
#save-error { position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 12px 20px; background: #652a1f; color: #fff; text-align: center; }
#playing-profile { padding: 0 0 14px; overflow-wrap: anywhere; color: #e4cf98; font-size: 12px; letter-spacing: 1px; }

#profile-history li { margin-bottom: 12px; }
#profile-history strong, #profile-history li > span { display: block; }
.outcome-win { color: #bfe95c; }
.outcome-loss { color: #ffb2a2; }
.outcome-hotseat { color: #e4cf98; }
.mission-record { flex-basis: 100%; color: var(--ui-secondary); font-size: 12px; margin-top: 4px; }
#gameover-record { color: #e4cf98; font-size: 14px; }
.forecast-unit { margin: 8px 0 12px; padding: 8px; background: #242018; border: 1px solid #454030; font-size: 11px; }
.forecast-unit > div { color: #d4b878; text-transform: capitalize; }
.forecast-unit dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 7px 0 0; }
.forecast-unit dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.forecast-unit p { margin: 6px 0 0; color: var(--ui-secondary); }
.forecast-tactics h4 { margin-bottom: 4px; color: #ffe5a1; }