:root {
  color-scheme: dark;
  --ink: #e5e8d7;
  --muted: #98a293;
  --quiet: #677468;
  --panel: #131b16;
  --panel-soft: #19231c;
  --line: rgba(214, 226, 197, .11);
  --lime: #d5ef78;
  --blue: #73b8e8;
  --ember: #ef886c;
  --cursor-select: url('/assets/ui/cursors/select.png') 4 4, default;
  --cursor-select-add: url('/assets/ui/cursors/select-add.png') 4 4, default;
  --cursor-select-remove: url('/assets/ui/cursors/select-remove.png') 4 4, default;
  --cursor-box-select: url('/assets/ui/cursors/box-select.png') 4 4, default;
  --cursor-box-crossing: url('/assets/ui/cursors/box-crossing.png') 4 4, default;
  --cursor-move: url('/assets/ui/cursors/move.png') 4 4, default;
  --cursor-move-queued: url('/assets/ui/cursors/move-queued.png') 4 4, default;
  --cursor-attack: url('/assets/ui/cursors/attack.png') 4 4, default;
  --cursor-attack-move: url('/assets/ui/cursors/attack-move.png') 4 4, default;
  --cursor-attack-move-queued: url('/assets/ui/cursors/attack-move-queued.png') 4 4, default;
  --cursor-gather: url('/assets/ui/cursors/gather.png') 4 4, default;
  --cursor-gather-wood: url('/assets/ui/cursors/gather-wood.png') 4 4, default;
  --cursor-rally: url('/assets/ui/cursors/rally.png') 4 4, default;
  --cursor-build-valid: url('/assets/ui/cursors/build-valid.png') 6 6, default;
  --cursor-build-blocked: url('/assets/ui/cursors/build-blocked.png') 6 6, not-allowed;
  --cursor-unavailable: url('/assets/ui/cursors/unavailable.png') 4 4, not-allowed;
  --cursor-pan: grab;
  --cursor-panning: grabbing;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0d130f; color: var(--ink); }
button { color: inherit; font: inherit; }

.app-shell { width: 100%; height: 100%; min-width: 780px; display: flex; flex-direction: column; padding: 0 24px; background: radial-gradient(ellipse at 52% 58%, #172019 0%, #101713 62%, #0c120e 100%); }
.topbar { height: 82px; flex: 0 0 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 13px; min-width: 265px; }
.brand-mark { width: 31px; height: 31px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { background: var(--lime); border-radius: 2px; opacity: .9; }
.brand-mark span:nth-child(2) { opacity: .55; }
.brand-mark span:nth-child(3) { opacity: .32; }
.brand-mark span:nth-child(1) { grid-row: span 2; }
.eyebrow { font: 500 9px/1 'DM Mono', monospace; letter-spacing: .16em; color: #84917f; }
.eyebrow span { color: var(--lime); }
h1, h2 { margin: 5px 0 0; font-family: 'Manrope', sans-serif; letter-spacing: -.035em; }
h1 { font-size: 17px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 700; }
.topbar-center { display: flex; align-items: center; gap: 9px; color: #aab5a3; font: 500 9px 'DM Mono', monospace; letter-spacing: .12em; }
.live-dot, .status-led { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 11px rgba(213,239,120,.55); }
.live-dot.waiting { background: #dcad63; box-shadow: 0 0 10px rgba(220,173,99,.4); }
.live-dot.offline { background: #e07861; box-shadow: 0 0 10px rgba(224,120,97,.4); }
.topbar-divider { color: #4f5d51; margin: 0 3px; }
.build-tag { color: #879385; font: 500 9px 'DM Mono', monospace; letter-spacing: .12em; min-width: 125px; text-align: right; }
.build-tag span { color: var(--lime); padding: 0 3px; }
.room-actions { display: flex; align-items: center; gap: 6px; }
.room-action { min-height: 29px; padding: 0 9px; border: 1px solid rgba(214,226,197,.14); border-radius: 4px; background: rgba(255,255,255,.03); color: #a8b39f; font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; cursor: pointer; transition: .15s ease; white-space: nowrap; }
.room-action:hover { border-color: rgba(213,239,120,.38); color: var(--lime); }
.room-action:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.room-action:disabled { opacity: .45; cursor: wait; }
.room-action-primary { border-color: rgba(213,239,120,.32); background: rgba(213,239,120,.08); color: var(--lime); }
.room-action-primary:hover { border-color: rgba(213,239,120,.6); background: rgba(213,239,120,.14); }
.room-action[hidden] { display: none; }
.room-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(214,226,197,.18); border-radius: 8px; background: #131b16; color: var(--ink); box-shadow: 0 24px 90px rgba(0,0,0,.55); }
.room-dialog::backdrop { background: rgba(5,9,6,.68); backdrop-filter: blur(4px); }
.room-dialog-panel { display: flex; flex-direction: column; padding: 24px; }
.room-dialog-panel h2 { margin-top: 8px; }
.room-dialog-panel p { margin: 9px 0 20px; color: #98a293; font-size: 11px; line-height: 1.5; }
.room-dialog-panel label { margin-bottom: 6px; color: #8d9988; font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.room-dialog-panel input { min-height: 39px; padding: 0 11px; border: 1px solid rgba(214,226,197,.16); border-radius: 4px; outline: none; background: rgba(255,255,255,.035); color: var(--ink); font: 11px 'DM Mono', monospace; }
.room-dialog-panel input:focus { border-color: rgba(213,239,120,.52); box-shadow: 0 0 0 2px rgba(213,239,120,.08); }
#room-dialog-error { min-height: 18px; margin-top: 7px; color: var(--ember); font-size: 9px; }
.room-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.room-dialog-actions .room-action { min-width: 88px; }

.workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; padding: 18px 0 14px; }
.viewport { position: relative; min-width: 0; min-height: 420px; overflow: hidden; border: 1px solid rgba(214,226,197,.13); border-radius: 8px; background: #77836b; box-shadow: 0 18px 60px rgba(0,0,0,.2), inset 0 0 70px rgba(15,25,17,.15); }
.viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; outline: none; }
.viewport canvas[data-cursor-mode="select"] { cursor: var(--cursor-select, default); }
.viewport canvas[data-cursor-mode="select-add"] { cursor: var(--cursor-select-add, default); }
.viewport canvas[data-cursor-mode="select-remove"] { cursor: var(--cursor-select-remove, default); }
.viewport canvas[data-cursor-mode="box-select"] { cursor: var(--cursor-box-select, default); }
.viewport canvas[data-cursor-mode="box-crossing"] { cursor: var(--cursor-box-crossing, default); }
.viewport canvas[data-cursor-mode="move"] { cursor: var(--cursor-move, default); }
.viewport canvas[data-cursor-mode="move-queued"] { cursor: var(--cursor-move-queued, default); }
.viewport canvas[data-cursor-mode="attack"] { cursor: var(--cursor-attack, default); }
.viewport canvas[data-cursor-mode="attack-move"] { cursor: var(--cursor-attack-move, default); }
.viewport canvas[data-cursor-mode="attack-move-queued"] { cursor: var(--cursor-attack-move-queued, default); }
.viewport canvas[data-cursor-mode="gather"] { cursor: var(--cursor-gather, default); }
.viewport canvas[data-cursor-mode="gather-wood"] { cursor: var(--cursor-gather-wood, default); }
.viewport canvas[data-cursor-mode="rally"] { cursor: var(--cursor-rally, default); }
.viewport canvas[data-cursor-mode="build-valid"] { cursor: var(--cursor-build-valid, default); }
.viewport canvas[data-cursor-mode="build-blocked"] { cursor: var(--cursor-build-blocked, not-allowed); }
.viewport canvas[data-cursor-mode="unavailable"] { cursor: var(--cursor-unavailable, not-allowed); }
.viewport canvas[data-cursor-mode="pan"] { cursor: var(--cursor-pan, grab); }
.viewport canvas[data-cursor-mode="panning"] { cursor: var(--cursor-panning, grabbing); }
.viewport > canvas:focus-visible { outline: 1px solid var(--lime); outline-offset: -2px; }
.viewport-wash { pointer-events: none; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,24,17,.2), transparent 17%, transparent 76%, rgba(14,22,15,.27)); }
.map-label { position: absolute; z-index: 2; top: 17px; left: 18px; display: flex; align-items: center; gap: 7px; color: rgba(242,246,221,.85); text-shadow: 0 1px 5px rgba(0,0,0,.25); font: 500 9px 'DM Mono', monospace; letter-spacing: .12em; pointer-events: none; }
.map-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(213,239,120,.8); }
.map-label-sep { color: rgba(242,246,221,.5); }
.compass { position: absolute; z-index: 2; top: 17px; right: 18px; width: 28px; height: 34px; display: flex; flex-direction: column; align-items: center; color: rgba(242,246,221,.72); font: 500 8px 'DM Mono', monospace; pointer-events: none; }
.compass i { height: 18px; width: 1px; margin-top: 3px; background: linear-gradient(var(--lime), transparent); position: relative; }
.compass i::before { content: ''; position: absolute; top: 0; left: -3px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid var(--lime); }
.objective-panel { position: absolute; z-index: 2; top: 51px; right: 16px; width: min(238px, calc(100% - 32px)); max-height: min(190px, calc(100% - 300px)); display: flex; flex-direction: column; gap: 6px; overflow: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin; scrollbar-color: rgba(213,239,120,.6) rgba(13,23,16,.5); }
.objective-panel[hidden] { display: none; }
.objective-panel:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.objective-card { padding: 9px 10px 8px; border: 1px solid rgba(225,236,207,.19); border-radius: 5px; background: rgba(18,27,19,.76); box-shadow: 0 5px 18px rgba(0,0,0,.13); backdrop-filter: blur(7px); }
.objective-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.objective-kicker { color: #8a9885; font: 500 7px 'DM Mono', monospace; letter-spacing: .13em; white-space: nowrap; }
.objective-status { min-width: 0; max-width: 74%; overflow: hidden; color: var(--lime); font: 500 7px 'DM Mono', monospace; letter-spacing: .03em; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.objective-card[data-team="azure"] .objective-status { color: var(--blue); }
.objective-card[data-team="ember"] .objective-status { color: var(--ember); }
.objective-card[data-locked="true"] .objective-status { color: #d0ac63; }
.scenario-event-fields { border-color: rgba(228,189,99,.18); background: rgba(228,189,99,.035); }
.scenario-event-card { border-color: rgba(228,189,99,.24); }
.scenario-event-card .objective-kicker { color: #d0ac63; }
.scenario-event-card[data-state="fired"] .objective-status { color: var(--lime); }
.scenario-event-card[data-state="waiting"] .objective-status { color: #8a9885; }
.scenario-event-card[data-state="ended"] .objective-status { color: #8a9885; }
.timed-victory-card { position: sticky; z-index: 1; top: 0; border-color: rgba(213,239,120,.32); box-shadow: 0 6px 16px rgba(4,9,6,.35); }
.timed-victory-card .objective-kicker { color: var(--lime); }
.timed-victory-card[data-state="waiting"] .objective-status, .timed-victory-card[data-state="ended"] .objective-status { color: #8a9885; }
.timed-victory-card[data-state="ended"] .objective-status { color: var(--lime); }
.victory-hold-card { border-color: rgba(213,239,120,.32); }
.victory-hold-card .objective-kicker { color: var(--lime); }
.victory-hold-card[data-state="waiting"] .objective-status { color: #8a9885; }
.victory-hold-card[data-state="ended"] .objective-status { color: var(--lime); }
.studio-event-row .studio-trigger-marker { color: #d0ac63; }
.objective-title { display: block; margin-top: 4px; color: #e0e7d7; font-size: 10px; font-weight: 600; }
.objective-detail { display: block; margin-top: 3px; color: #8a9885; font-size: 8px; }
.objective-progress { height: 2px; margin-top: 7px; overflow: hidden; border-radius: 2px; background: rgba(226,237,212,.12); }
.objective-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left center; transition: transform .15s linear, background-color .15s ease; }
.objective-card[data-team="azure"] .objective-progress i { background: var(--blue); }
.objective-card[data-team="ember"] .objective-progress i { background: var(--ember); }
.match-result { position: absolute; z-index: 5; top: 58px; left: 50%; max-width: calc(100% - 32px); padding: 11px 16px; transform: translateX(-50%); border: 1px solid rgba(213,239,120,.48); border-radius: 5px; background: rgba(16,24,17,.9); box-shadow: 0 8px 24px rgba(0,0,0,.24); color: var(--lime); text-align: center; font: 600 9px 'DM Mono', monospace; letter-spacing: .1em; backdrop-filter: blur(8px); pointer-events: none; }
.match-result[data-team="azure"] { border-color: rgba(115,184,232,.58); color: var(--blue); }
.match-result[data-team="ember"] { border-color: rgba(239,136,108,.58); color: var(--ember); }
.match-result[hidden] { display: none; }
.minimap-panel { position: absolute; z-index: 4; right: 15px; bottom: 14px; width: min(218px, calc(100% - 30px)); padding: 8px; border: 1px solid rgba(222,235,203,.28); border-radius: 5px; background: rgba(17,26,19,.82); box-shadow: 0 9px 28px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
.minimap-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 1px 6px; color: #c9d4bf; font: 500 7px 'DM Mono', monospace; letter-spacing: .14em; }
.minimap-live { color: var(--lime); font-size: 6px; }
.minimap-live::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 4px 1px 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 5px rgba(213,239,120,.7); }
#minimap-canvas { position: relative; inset: auto; z-index: auto; width: 100%; height: auto; aspect-ratio: 1; display: block; border: 1px solid rgba(222,235,203,.15); border-radius: 2px; background: #53664b; image-rendering: pixelated; touch-action: none; cursor: crosshair; outline: none; }
#minimap-canvas:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.minimap-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 7px 1px 0; color: #97a393; font: 500 6px 'DM Mono', monospace; letter-spacing: .1em; }
.minimap-legend span { display: inline-flex; align-items: center; gap: 4px; }
.minimap-legend i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; }
.minimap-legend .food-dot { background: #e4bd63; }
.minimap-legend .elevation-dot { border-radius: 1px; background: linear-gradient(90deg, #ffd36d, #f68c5a); }
#minimap-elevation-legend[hidden] { display: none; }
.studio-elevation-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px; padding: 0 2px; color: #788779; font: 500 7px 'DM Mono', monospace; letter-spacing: .08em; }
.studio-elevation-key span { display: inline-flex; align-items: center; gap: 4px; }
.studio-elevation-key i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; }
.studio-elevation-key .elevation-level-one { background: #ffd36d; }
.studio-elevation-key .elevation-level-two { background: #f68c5a; }
.studio-elevation-key small { flex-basis: 100%; color: #788779; font-size: 7px; line-height: 1.5; letter-spacing: 0; }
.minimap-legend .wood-dot { background: #9bb877; }
.field-hint { position: absolute; z-index: 2; bottom: 15px; left: 17px; padding: 8px 10px; border: 1px solid rgba(238,245,220,.18); border-radius: 4px; background: rgba(20,29,21,.57); color: rgba(242,246,221,.82); backdrop-filter: blur(8px); font: 500 8px 'DM Mono', monospace; letter-spacing: .09em; pointer-events: none; }
.hint-key { display: inline-block; padding: 3px 5px; border: 1px solid rgba(226,239,205,.25); border-radius: 2px; color: var(--lime); margin-right: 4px; }
.hint-divider { color: rgba(242,246,221,.42); margin: 0 6px; }
.selection-box { display: none; position: absolute; z-index: 3; border: 1px solid rgba(213,239,120,.95); background: rgba(213,239,120,.12); box-shadow: inset 0 0 20px rgba(213,239,120,.08); pointer-events: none; }
.selection-box[data-mode="crossing"] { border-style: dashed; border-color: rgba(115,184,232,.98); background: rgba(115,184,232,.12); box-shadow: inset 0 0 20px rgba(115,184,232,.08); }
.toast { position: absolute; z-index: 4; top: 17px; left: 50%; transform: translate(-50%, -8px); padding: 9px 14px; border: 1px solid rgba(213,239,120,.26); border-radius: 4px; background: rgba(16,24,17,.85); color: var(--lime); font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none; white-space: nowrap; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.audio-caption { position: absolute; z-index: 5; top: 112px; left: 50%; max-width: min(480px, calc(100% - 32px)); padding: 8px 12px; transform: translateX(-50%); border: 1px solid rgba(213,239,120,.34); border-radius: 4px; background: rgba(16,24,17,.9); box-shadow: 0 8px 22px rgba(0,0,0,.24); color: #e4edcf; font: 600 9px/1.4 'DM Mono', monospace; letter-spacing: .08em; text-align: center; backdrop-filter: blur(8px); pointer-events: none; }
.audio-caption[hidden] { display: none; }
.runtime-error { display: none; position: absolute; z-index: 8; top: 52px; left: 16px; right: 16px; padding: 9px 12px; border: 1px solid rgba(224,120,97,.55); border-radius: 4px; background: rgba(50,22,19,.94); color: #ffd2c3; font: 500 9px 'DM Mono', monospace; overflow-wrap: anywhere; }
.runtime-error.visible { display: block; }

.control-dock { display: flex; flex-direction: column; min-height: 0; padding: 19px 17px 13px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(150deg, rgba(25,35,28,.96), rgba(17,25,20,.98)); box-shadow: 0 18px 60px rgba(0,0,0,.12); }
.dock-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.match-state { display: flex; align-items: center; gap: 6px; color: #9ca995; font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.match-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.match-state.waiting i { background: #dcad63; }
.match-state.offline i { background: #e07861; }
.match-state.full { color: var(--lime); }
.control-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.section-label { display: flex; align-items: center; justify-content: space-between; color: #899589; font: 500 8px 'DM Mono', monospace; letter-spacing: .13em; }
.unit-total { color: #728071; letter-spacing: .06em; }
.unit-total b { color: var(--lime); font-weight: 500; }
.size-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 11px; }
.size-options button { min-height: 32px; padding: 0; border: 1px solid rgba(214,226,197,.12); border-radius: 4px; background: rgba(255,255,255,.025); color: #a7b1a0; font: 500 9px 'DM Mono', monospace; cursor: pointer; transition: .15s ease; }
.size-options button:hover { border-color: rgba(213,239,120,.4); color: var(--ink); }
.size-options button:disabled { opacity: .36; cursor: not-allowed; }
.size-options button.active { background: rgba(213,239,120,.1); border-color: rgba(213,239,120,.48); color: var(--lime); box-shadow: inset 0 0 12px rgba(213,239,120,.04); }
.size-note { margin-top: 8px; color: #707e70; font-size: 9px; }
.map-picker { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.map-picker label { flex: 0 0 auto; color: #778477; font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.map-picker select { min-width: 0; width: 100%; height: 29px; padding: 0 8px; border: 1px solid rgba(214,226,197,.14); border-radius: 4px; background: rgba(255,255,255,.035); color: #c4cebb; font: 500 9px 'DM Mono', monospace; cursor: pointer; }
.map-picker select:hover:not(:disabled) { border-color: rgba(213,239,120,.4); }
.map-picker select:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.map-picker select:disabled { opacity: .55; cursor: not-allowed; }
.map-picker option { background: #19231c; color: var(--ink); }
.map-studio-open { width: 100%; margin-top: 9px; padding: 7px 9px; border: 1px solid rgba(213,239,120,.19); border-radius: 4px; background: rgba(213,239,120,.045); color: #aebc9f; text-align: left; font: 500 8px 'DM Mono', monospace; letter-spacing: .11em; cursor: pointer; transition: .15s ease; }
.map-studio-open span { float: right; color: var(--lime); }
.map-studio-open:hover:not(:disabled) { border-color: rgba(213,239,120,.48); color: var(--lime); background: rgba(213,239,120,.08); }
.map-studio-open:disabled { opacity: .4; cursor: not-allowed; }
.building-map-open { display: block; text-decoration: none; }
.selection-section { padding-bottom: 13px; }
.selection-pip { width: 5px; height: 5px; border-radius: 50%; background: #596b5b; }
.selection-count { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 12px; }
.selection-count strong { color: var(--ink); font: 700 26px/1 'Manrope', sans-serif; letter-spacing: -.06em; }
.selection-count span { color: #7f8c7d; font-size: 10px; }
.building-selection-card[hidden] { display: none; }
.selection-section[data-focus="building"] .selection-count,
.selection-section[data-focus="building"] .team-breakdown,
.selection-section[data-focus="building"] .selection-composition,
.selection-section[data-focus="building"] .selected-waypoints,
.selection-section[data-focus="building"] .control-groups,
.selection-section[data-focus="building"] .army-select-actions { display: none; }
.building-selection-card { margin-top: 12px; padding: 12px; border: 1px solid rgba(213,239,120,.22); border-radius: 5px; background: rgba(213,239,120,.045); }
.building-selection-heading, .building-health-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.building-selection-heading strong { color: #e5efd3; font: 700 14px 'Manrope', sans-serif; }
.building-selection-heading span { color: var(--lime); font: 600 8px 'DM Mono', monospace; letter-spacing: .08em; text-align: right; }
.building-selection-card[data-danger="medium"] .building-selection-heading span { color: #e3c46f; }
.building-selection-card[data-danger="high"] .building-selection-heading span { color: #ef9278; }
.building-health-row { margin-top: 16px; color: #9aaa96; font: 600 8px 'DM Mono', monospace; letter-spacing: .06em; }
.building-health-row strong { color: #d9e6d0; font-size: 9px; font-weight: 600; white-space: nowrap; }
.building-health-bar { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: rgba(225,237,209,.15); }
.building-health-bar i { display: block; width: 100%; height: 100%; transform: scaleX(var(--health-ratio, 1)); transform-origin: left; background: #9bd77d; }
.building-selection-card[data-danger="medium"] .building-health-bar i { background: #e3c46f; }
.building-selection-card[data-danger="high"] .building-health-bar i { background: #ef9278; }
.building-selection-production { margin: 11px 0 0; color: #c8d7bb; font: 500 10px/1.45 'DM Mono', monospace; }
.building-selection-art { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.building-selection-art[hidden], .building-selection-description[hidden], .building-selection-instruction[hidden] { display: none; }
.building-selection-art img { flex: 0 0 40px; }
.farm-selection-art-frame { display: block; position: relative; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; }
.farm-selection-art-frame[hidden] { display: none; }
.farm-selection-art-frame img { position: absolute; max-width: none; height: auto; }
.building-selection-art figcaption { color: #a8b49e; font: 500 10px/1.45 'DM Mono', monospace; }
.building-selection-description, .building-selection-instruction { margin: 10px 0 0; color: #c8d7bb; font: 500 11px/1.5 'Manrope', sans-serif; }
.building-selection-actions { display: none; gap: 7px; margin-top: 12px; }
.building-selection-actions button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(213,239,120,.26); border-radius: 3px; background: rgba(213,239,120,.07); color: #dbe9c6; font: 600 10px 'DM Mono', monospace; cursor: pointer; }
.building-selection-actions button span { color: var(--lime); }
.building-selection-actions button:hover { border-color: rgba(213,239,120,.6); background: rgba(213,239,120,.12); }
.building-selection-actions button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.team-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-breakdown div { display: flex; align-items: center; gap: 6px; color: #97a294; font-size: 9px; }
.team-breakdown b { margin-left: auto; color: #c6cebc; font: 500 9px 'DM Mono', monospace; }
.selection-composition { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(214,226,197,.07); }
.composition-stat { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; color: #728171; font: 500 6px 'DM Mono', monospace; letter-spacing: .02em; white-space: nowrap; }
.composition-stat b { color: #c6cebc; font: 500 8px 'DM Mono', monospace; }
.selected-waypoints { margin-top: 8px; padding: 6px 7px; border: 1px solid rgba(213,239,120,.2); border-radius: 3px; background: rgba(213,239,120,.045); color: #c4d489; font: 500 7px 'DM Mono', monospace; letter-spacing: .06em; }
.selected-waypoints[hidden] { display: none; }
.control-groups { margin-top: 11px; }
.control-groups-heading { display: flex; justify-content: space-between; gap: 6px; color: #798779; font: 500 7px 'DM Mono', monospace; letter-spacing: .09em; }
.control-groups-heading span:last-child { color: #6a786b; letter-spacing: .04em; }
.control-group-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.control-group { position: relative; display: flex; min-width: 0; height: 31px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 0 6px; border: 1px solid rgba(214,226,197,.12); border-radius: 3px; background: rgba(255,255,255,.025); color: #839080; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.control-group::after { position: absolute; right: 4px; bottom: 2px; left: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--group-worker-color, rgba(118,197,150,.14)) 0 32%, transparent 32% 34%, var(--group-infantry-color, rgba(213,239,120,.14)) 34% 66%, transparent 66% 68%, var(--group-archer-color, rgba(239,160,113,.14)) 68% 100%); content: ''; opacity: 0; transition: opacity .14s ease; }
.control-group.has-composition::after { opacity: .72; }
.control-group.active::after { opacity: 1; }
.control-group:hover:not(:disabled) { border-color: rgba(213,239,120,.4); color: var(--ink); }
.control-group:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.control-group.filled { color: #c5d0ba; background: rgba(255,255,255,.045); }
.control-group.active { border-color: rgba(213,239,120,.65); background: rgba(213,239,120,.11); box-shadow: inset 0 0 9px rgba(213,239,120,.05); }
.control-group:disabled { opacity: .4; cursor: not-allowed; }
.control-group-number { font: 600 9px/1 'DM Mono', monospace; }
.control-group-count { color: #728071; font: 500 7px/1 'DM Mono', monospace; }
.control-group.filled .control-group-count, .control-group.active .control-group-count { color: var(--lime); }
.control-group-hint { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; color: #657366; font: 7px 'DM Mono', monospace; letter-spacing: .06em; text-align: right; }
.control-group-mix-legend { display: flex; flex: 0 0 auto; gap: 4px; font: 600 7px/1 'DM Mono', monospace; letter-spacing: 0; }
.control-group-mix-legend i { font-style: normal; }
.control-group-mix-legend .worker-mix-key { color: #76c596; }
.control-group-mix-legend .infantry-mix-key { color: #d5ef78; }
.control-group-mix-legend .archer-mix-key { color: #efa071; }
.team-dot { width: 6px; height: 6px; border-radius: 1px; }
.blue-dot { background: var(--blue); box-shadow: 0 0 7px rgba(115,184,232,.55); }
.red-dot { transform: rotate(45deg); background: var(--ember); box-shadow: 0 0 7px rgba(239,136,108,.45); }
.field-strength { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(214,226,197,.07); color: #718070; font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.field-strength div { display: flex; align-items: center; gap: 6px; color: #687667; }
.field-strength b { color: #d1d9c7; font-weight: 500; }
.field-strength .blue-dot, .field-strength .red-dot { width: 5px; height: 5px; }
.text-button { margin-top: 14px; padding: 0; border: 0; background: none; color: #a9b59b; font-size: 9px; cursor: pointer; }
.text-button span { color: var(--lime); margin-left: 4px; }
.text-button:hover { color: var(--lime); }
.army-select-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.army-select-actions .text-button { margin-top: 0; font-size: 8px; }
.military-select-button { color: #d0ac63; }
.military-select-button span { color: #d0ac63; }
.military-select-button:hover { color: #ebcd8b; }
.economy-section { padding: 10px 0; }
.resource-stocks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.resource-stock { display: flex; align-items: baseline; gap: 5px; padding: 5px 7px; border: 1px solid rgba(214,226,197,.08); border-radius: 3px; background: rgba(255,255,255,.025); color: #7b897a; font: 500 7px 'DM Mono', monospace; letter-spacing: .08em; }
.resource-stock strong { color: #e4bd63; font: 600 13px 'Manrope', sans-serif; letter-spacing: -.02em; }
.resource-icon { display: block; width: 13px; height: 13px; flex: 0 0 13px; }
.wood-stock strong { color: #a8c381; }
.resource-stock[hidden] { display: none; }
.stone-stock strong { color: #aeb9c2; }
.worker-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.worker-select-button { min-width: 0; min-height: 24px; margin-left: 0; padding: 0 3px; border: 1px solid rgba(115,184,232,.2); border-radius: 3px; background: rgba(115,184,232,.045); color: #9fc8e2; font: 500 6.5px 'DM Mono', monospace; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: .15s ease; }
.worker-select-button:hover:not(:disabled) { border-color: rgba(115,184,232,.48); background: rgba(115,184,232,.1); color: #c4e4f6; }
.worker-select-button:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
.worker-select-button:disabled { opacity: .64; cursor: not-allowed; }
.worker-select-button:first-child { margin-left: 0; }
.idle-worker-select-button { border-color: rgba(213,239,120,.24); background: rgba(213,239,120,.055); color: var(--lime); }
.idle-worker-select-button:hover:not(:disabled) { border-color: rgba(213,239,120,.56); background: rgba(213,239,120,.12); color: #e3f5a8; }
.archer-select-button { border-color: rgba(190,196,138,.2); background: rgba(190,196,138,.045); color: #c8c994; }
.archer-select-button:hover:not(:disabled) { border-color: rgba(190,196,138,.48); background: rgba(190,196,138,.1); color: #e0e1af; }
.infantry-select-button { border-color: rgba(228,189,99,.2); background: rgba(228,189,99,.045); color: #d0ac63; }
.infantry-select-button:hover:not(:disabled) { border-color: rgba(228,189,99,.48); background: rgba(228,189,99,.1); color: #ebcd8b; }
.worker-load { margin-top: 5px; color: #6e7d6b; font: 500 6px 'DM Mono', monospace; letter-spacing: .08em; }
.economy-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; margin-top: 8px; }
#roster-building-options { display: contents; }
#roster-production-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.economy-action { display: flex; min-width: 0; min-height: 32px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 5px 7px; border: 1px solid rgba(213,239,120,.17); border-radius: 4px; background: rgba(213,239,120,.035); color: #bdc9ae; text-align: left; font-size: 8px; cursor: pointer; transition: .15s ease; }
.economy-action:hover:not(:disabled):not([aria-disabled="true"]), .economy-action.active { border-color: rgba(213,239,120,.48); background: rgba(213,239,120,.09); color: var(--lime); }
.economy-action:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.economy-action:disabled { opacity: .78; cursor: not-allowed; }
.build-action { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; }
.barracks-build-action { border-color: rgba(168,137,98,.26); background: rgba(168,137,98,.055); }
.barracks-build-action:hover:not(:disabled), .barracks-build-action.active { border-color: rgba(190,158,115,.55); background: rgba(168,137,98,.14); color: #e0c194; }
.worker-action { border-color: rgba(115,184,232,.2); background: rgba(115,184,232,.04); }
.worker-action:hover:not(:disabled) { border-color: rgba(115,184,232,.5); background: rgba(115,184,232,.1); color: #c4e4f6; }
.archer-action { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; border-color: rgba(190,196,138,.17); background: rgba(190,196,138,.035); }
.archer-action:hover:not(:disabled) { border-color: rgba(190,196,138,.48); background: rgba(190,196,138,.09); color: #e0e1af; }
.action-cost { flex: 0 0 auto; color: #e4bd63; font: 500 6px 'DM Mono', monospace; letter-spacing: .05em; white-space: nowrap; }
.wood-cost { color: #a8c381; }
.mixed-cost { color: #c7bc81; }
.building-status { display: block; min-height: 1em; margin-top: 6px; color: #92a477; font: 500 7px 'DM Mono', monospace; line-height: 1.35; }
.barracks-status { display: block; min-height: 1em; margin-top: 4px; color: #c2a47e; font: 500 7px 'DM Mono', monospace; line-height: 1.35; }
.worker-production-status { display: block; min-height: 1em; margin-top: 4px; color: #8fb8d0; font: 500 7px 'DM Mono', monospace; line-height: 1.35; }
.resume-range-button { display: flex; width: 100%; min-height: 25px; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; padding: 0 7px; border: 1px solid rgba(168,195,129,.22); border-radius: 3px; background: rgba(168,195,129,.045); color: #b5c994; text-align: left; font: 500 7px 'DM Mono', monospace; letter-spacing: .04em; cursor: pointer; }
.resume-range-button:hover:not(:disabled) { border-color: rgba(168,195,129,.48); background: rgba(168,195,129,.09); color: #d2e3b0; }
.resume-range-button:focus-visible { outline: 1px solid #a8c381; outline-offset: 2px; }
.resume-range-button:disabled { opacity: .38; cursor: not-allowed; }
.resume-range-button[hidden] { display: none; }
.resume-range-progress { color: #91a779; white-space: nowrap; }
.food-status { display: block; margin-top: 6px; color: #748171; font-size: 8px; line-height: 1.35; }
.command-mode { padding: 4px 6px; border: 1px solid rgba(213,239,120,.22); border-radius: 3px; color: var(--lime); font-size: 7px; }
.command-mode[data-mode="attack-move"] { border-color: rgba(239,174,112,.42); background: rgba(239,174,112,.08); color: #f0b47c; }
.command-card { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 10px; border-radius: 5px; background: rgba(255,255,255,.035); }
.building-command-details { display: grid; gap: 6px; margin-top: 7px; padding: 6px 7px; border: 1px solid rgba(213,239,120,.15); border-radius: 4px; background: rgba(213,239,120,.035); color: #a8b794; font: 7px 'DM Mono', monospace; letter-spacing: .06em; }
.building-command-details[hidden], .building-command-details button[hidden] { display: none; }
.building-command-row { display: flex; min-width: 0; min-height: 20px; align-items: center; justify-content: space-between; gap: 8px; }
.building-command-row > span { min-width: 0; line-height: 1.45; }
.building-research-row { padding-top: 5px; border-top: 1px solid rgba(214,226,197,.08); }
.building-command-details button { flex: 0 0 auto; padding: 4px 6px; border: 1px solid rgba(214,226,197,.14); border-radius: 3px; background: rgba(255,255,255,.03); color: #9ca995; font: 7px 'DM Mono', monospace; cursor: pointer; }
.building-command-details button:hover:not(:disabled) { border-color: rgba(213,239,120,.4); color: var(--lime); }
.building-command-details button:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.building-command-details button:disabled { opacity: .4; cursor: not-allowed; }
.command-icon { position: relative; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(213,239,120,.16); border-radius: 4px; color: var(--lime); font-size: 20px; }
.command-icon-fallback { grid-area: 1 / 1; }
.command-icon-image { position: absolute; inset: 0; width: 19px; height: 19px; margin: auto; opacity: 0; }
.command-icon.has-image .command-icon-fallback { opacity: 0; }
.command-icon.has-image .command-icon-image { opacity: 1; }
.command-icon.attack-move { border-color: rgba(239,174,112,.42); color: #f0b47c; }
.command-card strong, .command-card small { display: block; }
.command-card strong { color: #d5dccb; font-size: 10px; font-weight: 600; }
.command-card small { margin-top: 3px; color: #7b897a; font-size: 8px; }
.order-target-toggle { display: flex; width: 100%; min-height: 38px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin-top: 7px; padding: 5px 10px; border: 1px solid rgba(213,239,120,.42); border-radius: 4px; background: rgba(213,239,120,.11); color: #e3efbc; text-align: left; cursor: pointer; }
.order-target-toggle span { font: 650 10px 'DM Mono', monospace; }
.order-target-toggle small { color: #a9ba99; font: 500 8px 'DM Mono', monospace; }
.order-target-toggle:hover:not(:disabled), .order-target-toggle.active { border-color: var(--lime); background: rgba(213,239,120,.2); }
.order-target-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.order-target-toggle:disabled { opacity: .65; cursor: not-allowed; }
.order-status { display: flex; min-height: 23px; align-items: center; gap: 7px; margin-top: 7px; padding: 5px 8px; border: 1px solid rgba(214,226,197,.1); border-radius: 4px; background: rgba(255,255,255,.018); color: #778477; font: 500 7px/1.35 'DM Mono', monospace; letter-spacing: .045em; overflow-wrap: anywhere; }
.order-status::before { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #667466; content: ''; }
.order-status[data-state="pending"], .order-status[data-state="planning"] { border-color: rgba(213,239,120,.24); color: #cad99b; }
.order-status[data-state="pending"]::before, .order-status[data-state="planning"]::before { background: var(--lime); box-shadow: 0 0 6px rgba(213,239,120,.55); }
.order-status[data-state="applied"] { border-color: rgba(122,190,135,.2); color: #9ac59e; }
.order-status[data-state="applied"]::before { background: #82c68f; }
.order-status[data-state="failed"] { border-color: rgba(239,142,112,.27); color: #e69a7e; }
.order-status[data-state="failed"]::before { background: #df836a; }
.formation-picker { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.formation-picker label { flex: 0 0 auto; color: #778477; font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.formation-picker select { min-width: 0; width: min(148px, 64%); height: 29px; padding: 0 8px; border: 1px solid rgba(214,226,197,.14); border-radius: 4px; background: rgba(255,255,255,.035); color: #c4cebb; font: 500 9px 'DM Mono', monospace; cursor: pointer; }
.formation-picker select:hover { border-color: rgba(213,239,120,.4); }
.formation-picker select:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.formation-picker option { background: #19231c; color: var(--ink); }
.attack-move-toggle { display: flex; width: 100%; min-height: 31px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 9px; border: 1px solid rgba(214,226,197,.15); border-radius: 4px; background: rgba(255,255,255,.025); color: #aab6a2; text-align: left; font-size: 9px; cursor: pointer; transition: .15s ease; }
.attack-move-toggle:hover:not(:disabled), .attack-move-toggle.active { border-color: rgba(239,174,112,.46); background: rgba(239,174,112,.08); color: #f0b47c; }
.attack-move-toggle:focus-visible { outline: 1px solid #f0b47c; outline-offset: 2px; }
.attack-move-toggle:disabled { opacity: .65; cursor: not-allowed; }
.attack-move-key { min-width: 16px; padding: 3px 5px; border: 1px solid rgba(214,226,197,.17); border-radius: 3px; color: inherit; text-align: center; font: 8px 'DM Mono', monospace; }
.command-footnote { margin-top: 10px; color: #798677; font-size: 8px; line-height: 1.65; white-space: normal; }
.keycap { padding: 2px 4px; border: 1px solid rgba(214,226,197,.16); border-radius: 2px; color: #c0c9b8; font: 8px 'DM Mono', monospace; }
.footnote-sep { margin: 0 4px; color: #48574b; }
.performance-section { padding-bottom: 13px; }
.audio-section { display: grid; gap: 12px; color: #d9e3d3; font-size: 12px; }
.audio-check, .audio-range { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.audio-check input { accent-color: var(--lime); width: 16px; height: 16px; margin: 0; }
.audio-range input { flex: 1; min-width: 0; accent-color: var(--lime); }
.audio-range output { min-width: 36px; text-align: right; color: #b8cba9; font-variant-numeric: tabular-nums; }
.audio-preview-controls { display: flex; min-width: 0; align-items: center; gap: 6px; }
.audio-ambience-preview-controls { justify-content: space-between; }
.audio-preview-controls label { flex: 0 0 auto; color: #778477; font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.audio-preview-cue { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 6px; border: 1px solid rgba(214,226,197,.14); border-radius: 4px; background: rgba(255,255,255,.035); color: #c4cebb; font: 500 8px 'DM Mono', monospace; }
.audio-preview-cue:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.audio-preview-cue:disabled { opacity: .45; }
.audio-preview-cue option, .audio-preview-cue optgroup { background: #19231c; color: var(--ink); }
.audio-preview { flex: 0 0 auto; min-height: 28px; padding: 0 9px; border: 1px solid rgba(214,226,197,.16); border-radius: 4px; background: rgba(255,255,255,.025); color: #b8cba9; font: 8px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.audio-preview:hover:not(:disabled) { border-color: rgba(213,239,120,.4); background: rgba(255,255,255,.05); color: #e1e7d5; }
.audio-preview:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.audio-preview:disabled { opacity: .45; cursor: not-allowed; }
.audio-recognition-card { display: grid; gap: 8px; padding: 9px; border: 1px solid rgba(214,226,197,.12); border-radius: 4px; background: rgba(255,255,255,.018); }
.audio-recognition-heading, .audio-recognition-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.audio-recognition-heading > div { display: grid; gap: 4px; min-width: 0; }
.audio-recognition-heading strong, .audio-recognition-results strong { color: #cbd6c1; font: 600 8px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.audio-recognition-heading small, .audio-recognition-results small { color: #849182; font-size: 8px; line-height: 1.45; }
.audio-recognition-run { display: grid; gap: 7px; }
.audio-recognition-condition, .audio-recognition-progress { color: #a9b89e; font: 500 8px 'DM Mono', monospace; letter-spacing: .07em; }
.audio-recognition-prompt { margin: 0; color: #d9e3d3; font-size: 10px; }
.audio-recognition-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.audio-recognition-answers button { min-height: 29px; padding: 4px; border: 1px solid rgba(214,226,197,.16); border-radius: 4px; background: rgba(255,255,255,.025); color: #c4cebb; font: 8px 'DM Mono', monospace; cursor: pointer; }
.audio-recognition-answers button:hover:not(:disabled), .audio-recognition-answers button:focus-visible { border-color: rgba(213,239,120,.4); color: #e1e7d5; outline: none; }
.audio-recognition-answers button:disabled { opacity: .45; cursor: not-allowed; }
.audio-recognition-feedback { color: #aebea5; font-size: 9px; line-height: 1.4; }
.audio-recognition-results { display: grid; gap: 4px; }
.audio-recognition-results p { margin: 0; color: #d9e3d3; font-size: 9px; line-height: 1.5; }
.audio-recognition-report-details summary { color: #aebea5; font-size: 9px; cursor: pointer; }
.audio-recognition-report-details pre { margin: 5px 0 0; color: #b8cba9; font: 8px/1.5 'DM Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.audio-recognition-result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.audio-status { color: #aebea5; font-size: 10px; letter-spacing: .07em; }
.audio-status[data-state="running"] { color: var(--lime); }
.audio-status[data-state="unavailable"], .audio-status[data-state="interrupted"] { color: #f0ad8c; }
.perf-signal { color: var(--lime); font-size: 7px; text-shadow: 0 0 7px rgba(213,239,120,.7); }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 13px; }
.metric { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); }
.metric:last-child { border: 0; padding-left: 8px; }
.metric:nth-child(2) { padding-left: 8px; }
.metric strong { font: 600 15px 'Manrope', sans-serif; color: #e1e7d5; }
.metric span { color: #748171; font: 8px 'DM Mono', monospace; letter-spacing: .07em; }
.render-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: #94a18e; font-size: 8px; }
.render-icon { color: var(--lime); font-size: 12px; }
.render-note i { margin-left: auto; color: var(--lime); font: 500 7px 'DM Mono', monospace; letter-spacing: .1em; font-style: normal; }
.dock-spacer { flex: 1 1 auto; min-height: 8px; }
.reset-button { width: 100%; height: 35px; flex: 0 0 35px; border: 1px solid rgba(214,226,197,.14); border-radius: 4px; background: rgba(255,255,255,.035); color: #b0bbab; font-size: 9px; cursor: pointer; transition: .15s ease; }
.reset-button span { color: var(--lime); font-size: 15px; vertical-align: -1px; margin-right: 4px; }
.reset-button:hover { color: var(--ink); border-color: rgba(213,239,120,.38); background: rgba(213,239,120,.06); }
.reset-button:disabled { opacity: .38; cursor: not-allowed; }
.dock-footer { display: flex; justify-content: space-between; margin-top: 13px; color: #586658; font: 8px 'DM Mono', monospace; letter-spacing: .07em; }
.statusbar { height: 35px; flex: 0 0 35px; display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); color: #6f7c6f; font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.statusbar > div { display: flex; align-items: center; gap: 7px; }
.statusbar b { color: #a0ad9a; font-weight: 400; }
.status-led { width: 5px; height: 5px; }
.status-right { margin-left: auto; }
.status-sep { color: #4e5a4f; margin: 0 3px; }

.map-studio { width: min(1100px, calc(100vw - 36px)); max-width: none; max-height: calc(100vh - 36px); padding: 0; overflow: auto; border: 1px solid rgba(214,226,197,.18); border-radius: 9px; background: #121a15; color: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.map-studio::backdrop { background: rgba(6,10,7,.72); backdrop-filter: blur(5px); }
.map-studio-shell { display: flex; min-height: 600px; flex-direction: column; }
.studio-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 15px; border-bottom: 1px solid var(--line); }
.studio-header h2 { margin-top: 6px; font-size: 19px; }
.studio-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.035); color: #aeb9a8; font-size: 21px; line-height: 1; cursor: pointer; }
.studio-close:hover { border-color: rgba(213,239,120,.35); color: var(--lime); }
.studio-draft-recovery { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-bottom: 1px solid rgba(213,239,120,.18); background: rgba(213,239,120,.055); }
.studio-draft-recovery[hidden] { display: none; }
.studio-draft-recovery strong { color: var(--lime); font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.studio-draft-recovery p { margin: 5px 0 0; color: #aebaa8; font-size: 11px; line-height: 1.45; }
.studio-draft-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.studio-draft-actions button { min-height: 36px; padding: 0 12px; border-radius: 4px; font: 500 8px 'DM Mono', monospace; letter-spacing: .07em; cursor: pointer; }
.studio-draft-recovery button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.studio-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(285px,.85fr); gap: 17px; padding: 18px 22px; }
.studio-grid-section { position: sticky; top: 12px; align-self: start; min-width: 0; padding: 10px; border: 1px solid rgba(214,226,197,.12); border-radius: 6px; background: #0f1712; }
.studio-grid-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 7px; }
.studio-grid-navigation button { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid rgba(214,226,197,.14); border-radius: 4px; background: rgba(255,255,255,.03); color: #aeb9a8; font: 500 8px 'DM Mono', monospace; letter-spacing: .06em; cursor: pointer; }
.studio-grid-navigation button:hover { border-color: rgba(213,239,120,.38); color: var(--lime); }
.studio-grid-navigation button:disabled { opacity: .42; cursor: not-allowed; }
.studio-grid-navigation button:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.studio-grid-navigation button.active { border-color: rgba(213,239,120,.46); background: rgba(213,239,120,.09); color: var(--lime); }
.studio-grid-view-controls { display: flex; align-items: center; gap: 4px; }
.studio-grid-view-controls output { min-width: 42px; color: #9ba896; text-align: center; font: 8px 'DM Mono', monospace; }
.studio-grid-viewport { width: 100%; height: min(53vh, 510px); min-height: 290px; overflow: auto; border: 1px solid rgba(214,226,197,.1); border-radius: 3px; background: #0e1711; overscroll-behavior: contain; }
#studio-grid { display: block; width: auto; height: auto; max-width: none; max-height: none; border: 0; background: #76836c; cursor: crosshair; touch-action: none; }
#studio-grid[data-editor-tool="pan"] { cursor: grab; }
#studio-grid.is-panning { cursor: grabbing; }
.studio-grid-footer { display: flex; justify-content: space-between; gap: 8px; padding: 9px 2px 0; color: #788779; font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.studio-grid-footer #studio-grid-position { color: #aab79e; }
.studio-grid-footer span:first-child { color: var(--lime); }
.studio-controls { display: flex; min-width: 0; flex-direction: column; gap: 13px; }
.studio-fields { display: grid; gap: 10px; }
.studio-fields.two-up { grid-template-columns: repeat(2,minmax(0,1fr)); }
.studio-wide-field { grid-column: 1 / -1; }
.studio-fields label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #829081; font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; }
.studio-fields input, .studio-fields select { width: 100%; height: 32px; min-width: 0; padding: 0 8px; border: 1px solid rgba(214,226,197,.13); border-radius: 4px; outline: 0; background: rgba(255,255,255,.035); color: #d5decb; font: 500 10px 'DM Mono', monospace; letter-spacing: 0; }
.studio-fields input:focus, .studio-fields select:focus { border-color: rgba(213,239,120,.55); box-shadow: 0 0 0 2px rgba(213,239,120,.08); }
.studio-fields select option { background: #161c17; color: #d5decb; }
.studio-tool-heading { padding-top: 4px; color: #829081; font: 500 8px 'DM Mono', monospace; letter-spacing: .13em; }
.studio-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.studio-tools button { min-height: 32px; padding: 0 8px; border: 1px solid rgba(214,226,197,.12); border-radius: 4px; background: rgba(255,255,255,.025); color: #9ba896; text-align: left; font-size: 9px; cursor: pointer; }
.studio-tools button:hover { border-color: rgba(213,239,120,.33); color: var(--ink); }
.studio-tools button:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.studio-tools button:disabled { opacity: .38; cursor: not-allowed; }
.studio-tools button.active { border-color: rgba(213,239,120,.46); background: rgba(213,239,120,.09); color: var(--lime); }
.studio-tools [data-map-tool="azure"]::before { content: '● '; color: var(--blue); }
.studio-tools [data-map-tool="ember"]::before { content: '● '; color: var(--ember); }
.studio-tools [data-map-tool="resource-food"]::before { content: '◆ '; color: #e4bd63; }
.studio-tools [data-map-tool="resource-wood"]::before { content: '♣ '; color: #9bb877; }
.objective-fields { padding: 11px; border: 1px solid rgba(213,239,120,.12); border-radius: 5px; background: rgba(213,239,120,.025); }
.studio-deadline-rule { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(213,239,120,.2); border-radius: 4px; background: rgba(213,239,120,.035); }
.studio-deadline-rule label { display: flex; flex-direction: column; gap: 5px; color: #829081; font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; }
.studio-deadline-rule small { color: #788779; font-size: 8px; line-height: 1.5; }
.studio-trigger-heading { display: flex; align-items: center; justify-content: space-between; color: #829081; font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.studio-trigger-heading b { margin-left: 5px; color: #687769; font-weight: 500; letter-spacing: .02em; }
.studio-trigger-list { display: flex; max-height: 116px; flex-direction: column; gap: 3px; overflow-y: auto; padding: 1px 2px 1px 0; }
.studio-trigger-list:has(.studio-event-row) { max-height: 156px; }
.studio-trigger-row { display: flex; min-width: 0; min-height: 28px; align-items: center; gap: 8px; padding: 0 7px; border: 1px solid rgba(214,226,197,.1); border-radius: 3px; background: rgba(255,255,255,.022); color: #9ba896; text-align: left; font: 8px 'DM Mono', monospace; cursor: pointer; }
.studio-trigger-row:hover { border-color: rgba(213,239,120,.3); color: #d3ddc9; }
.studio-trigger-row.selected { border-color: rgba(213,239,120,.48); background: rgba(213,239,120,.08); color: var(--lime); }
.studio-trigger-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-trigger-marker { flex: 0 0 auto; color: #758274; font-size: 7px; letter-spacing: .08em; }
.studio-event-row { min-height: 39px; align-items: flex-start; padding-top: 5px; padding-bottom: 5px; }
.studio-event-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.studio-event-summary { display: -webkit-box; overflow: hidden; color: #768475; font: 6.5px/1.3 'DM Mono', monospace; text-transform: uppercase; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.studio-event-row .studio-trigger-marker { margin-top: 2px; }
.studio-trigger-marker.win { color: #e4bd63; }
.studio-trigger-marker.gated { color: #d0ac63; }
.studio-prerequisite-field { min-width: 0; margin: 0; padding: 8px; border: 1px solid rgba(214,226,197,.12); border-radius: 4px; }
.studio-event-source-field { grid-column: 1 / -1; }
.studio-prerequisite-field legend { padding: 0 4px; color: #829081; font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; }
.studio-prerequisite-list { display: flex; max-height: 112px; flex-direction: column; gap: 3px; overflow-y: auto; }
.studio-fields .studio-prerequisite-option { display: flex; min-height: 25px; flex-direction: row; align-items: center; gap: 7px; padding: 3px 6px; border: 1px solid rgba(214,226,197,.08); border-radius: 3px; color: #aeb9a8; font: 500 8px 'DM Mono', monospace; letter-spacing: 0; cursor: pointer; }
.studio-prerequisite-empty { padding: 4px 2px; color: #788779; font: 8px 'DM Mono', monospace; letter-spacing: 0; }
.studio-prerequisite-option:hover { border-color: rgba(213,239,120,.28); color: #d5decb; }
.studio-prerequisite-option input { width: 13px; height: 13px; flex: 0 0 auto; margin: 0; accent-color: var(--lime); }
.studio-prerequisite-option:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.studio-trigger-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.studio-trigger-actions button { min-height: 29px; padding: 0 7px; border: 1px solid rgba(214,226,197,.14); border-radius: 3px; background: rgba(255,255,255,.03); color: #aeb9a8; text-align: center; font: 500 7px 'DM Mono', monospace; letter-spacing: .05em; cursor: pointer; }
.studio-trigger-actions button:hover:not(:disabled) { border-color: rgba(213,239,120,.4); color: var(--lime); }
.studio-trigger-actions button:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.studio-trigger-actions button:disabled { opacity: .38; cursor: not-allowed; }
.studio-map-diagnostics { min-width: 0; border-top: 1px solid rgba(214,226,197,.14); padding-top: 9px; }
.studio-map-diagnostics summary { cursor: pointer; color: #aeb9a8; font: 500 8px 'DM Mono', monospace; }
.studio-map-diagnostics p, .studio-map-diagnostics li { color: #9ba896; font: 10px/1.5 'DM Sans', sans-serif; overflow-wrap: anywhere; }
.studio-map-diagnostics button { margin-top: 8px; min-height: 29px; padding: 0 9px; border: 1px solid rgba(214,226,197,.14); border-radius: 3px; background: rgba(255,255,255,.03); color: #aeb9a8; font: 500 8px 'DM Mono', monospace; cursor: pointer; }
.studio-map-diagnostics button:hover { border-color: rgba(213,239,120,.4); color: var(--lime); }
.studio-map-diagnostics :focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.studio-map-diagnostics ul { padding-left: 18px; }
.studio-diagnostics-table { max-width: 100%; overflow-x: auto; margin: 8px 0; }
.studio-diagnostics-table table { width: 100%; border-collapse: collapse; color: #c2cdbc; font: 9px/1.5 'DM Mono', monospace; }
.studio-diagnostics-table caption { text-align: left; color: #aeb9a8; padding-bottom: 5px; font: 500 10px/1.5 'DM Sans', sans-serif; }
.studio-diagnostics-table th, .studio-diagnostics-table td { padding: 4px 6px; border-bottom: 1px solid rgba(214,226,197,.1); text-align: right; white-space: nowrap; }
.studio-diagnostics-table th:first-child { text-align: left; }
.studio-resource-remove { display: flex; align-items: flex-end; }
.studio-resource-remove button { width: 100%; min-height: 32px; padding: 0 7px; border: 1px solid rgba(214,226,197,.14); border-radius: 3px; background: rgba(255,255,255,.03); color: #aeb9a8; text-align: center; font: 500 7px 'DM Mono', monospace; letter-spacing: .05em; cursor: pointer; }
.studio-resource-remove button:hover:not(:disabled) { border-color: rgba(213,239,120,.4); color: var(--lime); }
.studio-resource-remove button:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.studio-resource-remove button:disabled { opacity: .38; cursor: not-allowed; }
.studio-fields input[aria-invalid="true"] { border-color: rgba(239,136,108,.7); }
.studio-fields .objective-win-setting { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.objective-win-setting input { width: 13px !important; height: 13px !important; margin: 0; accent-color: var(--lime); }
.objective-fields small { color: #788779; font-size: 8px; line-height: 1.5; }
.studio-footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.studio-footer [class^="studio-"] { min-height: 36px; padding: 0 12px; border-radius: 4px; font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; cursor: pointer; }
.studio-footer .studio-draft-status { min-height: auto; padding: 0; color: #788779; font-size: 7px; white-space: nowrap; cursor: default; }
.studio-secondary { border: 1px solid rgba(214,226,197,.16); background: rgba(255,255,255,.035); color: #b3bead; }
.studio-secondary:hover { border-color: rgba(213,239,120,.36); color: var(--lime); }
.studio-footer #studio-message { flex: 1; color: #788779; font-size: 9px; }
.studio-primary { border: 1px solid rgba(213,239,120,.42); background: rgba(213,239,120,.12); color: var(--lime); }
.studio-primary:hover { background: rgba(213,239,120,.2); }
.studio-primary span { margin-left: 7px; }

@media (max-height: 760px) {
  .topbar { height: 68px; flex-basis: 68px; }
  .workspace { padding-top: 12px; padding-bottom: 10px; }
  .control-dock { padding-top: 14px; padding-bottom: 10px; }
  .control-section { padding-top: 11px; padding-bottom: 11px; }
  .selection-section { padding-bottom: 10px; }
  .control-groups { margin-top: 8px; }
  .control-group { height: 27px; }
  .control-group-hint { margin-top: 4px; }
  .command-footnote { font-size: 7px; }
}
@media (max-width: 980px) {
  .app-shell { padding: 0 14px; }
  .workspace { grid-template-columns: minmax(0,1fr) 270px; gap: 12px; }
  .topbar-center { display: none; }
  .control-dock { padding-left: 13px; padding-right: 13px; }
}
@media (max-width: 780px) {
  .map-studio-shell { min-height: 0; }
  .studio-layout { grid-template-columns: 1fr; }
  .studio-grid-section { position: static; }
  .studio-grid-viewport { height: 38vh; min-height: 220px; }
  .studio-controls { display: flex; }
  .studio-fields.two-up { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .objective-fields { grid-column: auto; }
  .studio-footer { flex-wrap: wrap; }
  .studio-footer #studio-message { flex-basis: 100%; order: 3; }
  .studio-draft-recovery { align-items: stretch; flex-direction: column; }
  .studio-draft-actions { justify-content: flex-end; }
}

@media (max-width: 780px) {
  html, body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-width: 0;
    padding: 0 12px;
  }

  .topbar {
    height: auto;
    min-height: 68px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 9px 0;
  }

  .brand-lockup { min-width: 0; flex: 1 1 200px; gap: 9px; }
  .brand-mark { width: 26px; height: 26px; flex: 0 0 26px; }
  h1 { font-size: 15px; }
  .room-actions { gap: 4px; }
  .room-action { min-height: 27px; padding: 0 7px; font-size: 7px; }

  .workspace {
    display: grid;
    flex: 0 0 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }

  .viewport {
    width: 100%;
    height: clamp(280px, 50vh, 420px);
    min-height: 280px;
  }

  .map-label {
    top: 11px;
    left: 10px;
    right: 42px;
    gap: 5px;
    font-size: 7px;
    letter-spacing: .07em;
    white-space: nowrap;
  }
  #map-label-title, #map-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .compass { top: 11px; right: 8px; }

  .objective-panel {
    top: 43px;
    right: 8px;
    width: min(190px, calc(100% - 16px));
    max-height: min(150px, calc(100% - 210px));
  }

  .minimap-panel {
    right: 8px;
    bottom: 8px;
    width: clamp(120px, 36vw, 160px);
    padding: 6px;
  }
  .minimap-heading { margin-bottom: 4px; font-size: 6px; }
  .minimap-legend { margin-top: 5px; }

  .field-hint {
    right: calc(clamp(120px, 36vw, 160px) + 18px);
    bottom: 8px;
    left: 8px;
    padding: 6px 7px;
    font-size: 7px;
    line-height: 1.6;
    letter-spacing: .04em;
  }
  .hint-key { margin-right: 2px; padding: 2px 3px; }
  .hint-divider { margin: 0 3px; }

  .control-dock {
    min-height: 0;
    padding: 14px 13px 12px;
  }
  .dock-heading { padding-bottom: 12px; }
  .control-section { padding: 12px 0; }
  .selection-section { padding-bottom: 10px; }
  .size-options button { min-height: 38px; }
  .worker-select-button { min-height: 30px; }
  .economy-action { min-height: 40px; }
  .build-action { min-height: 38px; }
  .map-picker select { height: 36px; }
  .formation-picker select { width: min(180px, 68%); height: 36px; }
  .control-groups { margin-top: 10px; }
  .control-group { height: 34px; }
  .control-group-hint { margin-top: 5px; }
  .dock-spacer { display: none; }
  .reset-button { height: 40px; flex-basis: 40px; }
  .dock-footer { margin-top: 10px; }

  .statusbar {
    height: auto;
    min-height: 35px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 7px 16px;
    padding: 9px 0 12px;
    line-height: 1.6;
  }
  .statusbar > div { gap: 5px; }
  .status-right { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; }
}

/* Battlefield HUD: the world owns the window; controls sit on its edges. */
html, body { width: 100%; height: 100%; overflow: hidden; }
.app-shell { position: relative; width: 100%; height: 100dvh; min-width: 0; padding: 0; overflow: hidden; background: #4f6349; }
.app-shell:fullscreen { width: 100vw; height: 100vh; height: 100dvh; }
.workspace { position: absolute; inset: 0; display: block; min-height: 0; padding: 0; }
.viewport { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.viewport-wash { background: linear-gradient(180deg, rgba(10,19,13,.33), transparent 25%, transparent 58%, rgba(9,17,11,.23)); }

.topbar { position: absolute; z-index: 10; inset: 0 0 auto; height: 67px; min-height: 0; display: flex; flex-wrap: nowrap; gap: 18px; padding: 0 20px; border: 0; background: linear-gradient(180deg, rgba(10,18,13,.96), rgba(10,18,13,.82) 82%, rgba(10,18,13,0)); backdrop-filter: blur(10px); }
.brand-lockup { flex: 0 0 auto; min-width: 0; gap: 10px; }
.brand-mark { width: 27px; height: 27px; flex: 0 0 27px; }
.brand-lockup h1 { font-size: 14px; white-space: nowrap; }
.brand-lockup .eyebrow { font-size: 8px; }
.topbar-center { flex: 0 1 auto; min-width: 0; margin-left: auto; font-size: 9px; white-space: nowrap; }
.hud-readouts { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.hud-team { display: flex; flex-direction: column; gap: 3px; color: #91a08d; font: 600 8px 'DM Mono', monospace; letter-spacing: .1em; }
.hud-team b { color: var(--blue); font: 700 10px 'DM Mono', monospace; letter-spacing: .05em; }
.hud-team b[data-team="ember"] { color: var(--ember); }
.hud-team b[data-team="spectator"] { color: #cbd4c2; }
.hud-readouts .resource-stocks { display: flex; gap: 5px; margin: 0; }
.hud-readouts .resource-stock { min-width: 65px; min-height: 36px; flex-direction: column; justify-content: center; gap: 0; padding: 2px 8px; border-color: rgba(228,238,211,.12); background: rgba(9,17,12,.42); font-size: 7px; }
.hud-readouts .resource-stock strong { font-size: 15px; line-height: 1.05; }
.hud-readouts .field-strength { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 83px; margin: 0; padding: 0 0 0 13px; border: 0; border-left: 1px solid rgba(228,238,211,.13); font-size: 8px; }
.hud-readouts .field-strength div { gap: 4px; font-size: 10px; }
.hud-readouts .field-strength b { font-weight: 600; }
.room-actions { flex: 0 0 auto; }
.room-action { min-height: 32px; padding: 0 10px; font-size: 9px; }
.hud-icon-button { width: 32px; min-width: 32px; padding: 0; color: #e0e9d8; font: 700 14px/1 'Manrope', sans-serif; }
.hud-icon-button[aria-expanded="true"] { border-color: rgba(213,239,120,.7); background: rgba(213,239,120,.13); color: var(--lime); }
.statusbar { display: none; }

.map-label { top: 80px; left: 20px; max-width: calc(100% - 320px); padding: 6px 8px 6px 10px; border: 1px solid rgba(230,238,217,.16); border-radius: 4px; background: rgba(13,23,15,.68); font-size: 9px; backdrop-filter: blur(7px); pointer-events: auto; }
.map-label > span { flex: 0 0 auto; pointer-events: none; }
.map-label #map-summary { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-brief-toggle { min-height: 24px; flex: 0 0 auto; margin-left: 5px; padding: 0 6px; border: 1px solid rgba(213,239,120,.22); border-radius: 3px; background: rgba(213,239,120,.06); color: #d4e6b7; font: 650 8px 'DM Mono', monospace; letter-spacing: .07em; cursor: pointer; }
.scenario-brief-toggle span { color: var(--lime); }
.scenario-brief-toggle:hover, .scenario-brief-toggle[aria-expanded="true"] { border-color: rgba(213,239,120,.55); background: rgba(213,239,120,.13); }
.scenario-brief-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.scenario-brief-panel { position: absolute; z-index: 8; top: 122px; left: 20px; width: min(345px, calc(100% - 40px)); max-height: min(310px, calc(100% - 155px)); overflow: auto; padding: 16px; border: 1px solid rgba(213,239,120,.35); border-radius: 5px; background: rgba(13,23,16,.96); box-shadow: 0 14px 40px rgba(0,0,0,.32); backdrop-filter: blur(10px); scrollbar-width: thin; }
.camera-toolbar { position: absolute; z-index: 5; right: 260px; bottom: 298px; display: flex; gap: 5px; padding: 5px; border: 1px solid rgba(225,237,209,.2); border-radius: 5px; background: rgba(13,23,16,.78); box-shadow: 0 8px 20px rgba(0,0,0,.2); backdrop-filter: blur(8px); }
.camera-toolbar button { min-height: 27px; padding: 0 9px; border: 1px solid rgba(225,237,209,.18); border-radius: 3px; background: rgba(255,255,255,.04); color: #e0e9d8; font: 600 9px 'DM Mono', monospace; cursor: pointer; }
.camera-toolbar button:hover { border-color: rgba(213,239,120,.55); color: var(--lime); }
.camera-toolbar button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.scenario-brief-panel[hidden], .scenario-brief-deadline[hidden] { display: none; }
.scenario-brief-heading { display: flex; align-items: center; justify-content: space-between; color: var(--lime); font: 650 9px 'DM Mono', monospace; letter-spacing: .12em; }
.scenario-brief-heading button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(225,237,209,.2); border-radius: 3px; background: rgba(255,255,255,.04); color: #dce7d5; font-size: 19px; cursor: pointer; }
.scenario-brief-heading button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.scenario-brief-panel > strong { display: block; margin-top: 11px; color: #eef2e5; font: 700 17px 'Manrope', sans-serif; }
.scenario-brief-panel p { margin: 7px 0 0; color: #d2dec9; font-size: 12px; line-height: 1.5; }
.scenario-brief-panel .scenario-brief-deadline { margin-top: 14px; padding: 9px 10px; border-left: 2px solid #d0ac63; background: rgba(208,172,99,.09); color: #e6d5af; font: 600 10px/1.45 'DM Mono', monospace; }
.scenario-brief-rule, .scenario-brief-zones { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(225,237,209,.15); }
.scenario-brief-rule > span, .scenario-brief-zones > span { color: var(--lime); font: 650 9px 'DM Mono', monospace; letter-spacing: .12em; }
.scenario-brief-rule p { margin-top: 7px; }
.scenario-brief-zones[hidden] { display: none; }
.scenario-brief-zones ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.scenario-brief-zones li { padding: 8px 9px; border: 1px solid rgba(225,237,209,.13); border-radius: 3px; background: rgba(255,255,255,.035); }
.scenario-brief-zones li strong, .scenario-brief-zones li small { display: block; }
.scenario-brief-zones li strong { color: #edf1e4; font-size: 11px; }
.scenario-brief-zones li small { margin-top: 3px; color: #aab9a1; font-size: 10px; line-height: 1.4; }
.compass { top: 85px; right: 279px; }
.objective-panel { top: 81px; right: 18px; width: 248px; max-height: min(330px, calc(100% - 390px)); }
.objective-card { padding: 11px 12px; background: rgba(13,23,16,.86); }
.objective-kicker { font-size: 9px; }
.objective-status { font-size: 9px; }
.objective-title { font-size: 12px; }
.objective-detail { font-size: 10px; }
.match-result { z-index: 7; top: calc((100% - 284px + 58px) / 2); width: min(400px, calc(100% - 28px)); max-width: none; max-height: calc(100% - 358px); overflow: auto; padding: 23px 24px 20px; transform: translate(-50%, -50%); border-color: rgba(213,239,120,.55); border-radius: 8px; background: rgba(12,22,15,.96); box-shadow: 0 20px 70px rgba(0,0,0,.42); text-align: left; pointer-events: auto; }
.match-result-kicker { color: #aabb9d; font: 600 9px 'DM Mono', monospace; letter-spacing: .16em; }
.match-result-title { display: block; margin-top: 8px; color: var(--lime); font: 750 29px/1.05 'Manrope', sans-serif; letter-spacing: -.045em; }
.match-result[data-team="azure"] .match-result-title { color: var(--blue); }
.match-result[data-team="ember"] .match-result-title { color: var(--ember); }
.match-result-detail { margin: 10px 0 0; color: #d1ddca; font: 500 10px/1.55 'DM Mono', monospace; letter-spacing: .055em; }
.match-result-actions { margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(225,237,209,.16); }
.match-result-actions [hidden] { display: none; }
.match-result-actions button { min-width: 150px; min-height: 42px; padding: 0 17px; border: 1px solid rgba(213,239,120,.58); border-radius: 4px; background: rgba(213,239,120,.14); color: var(--lime); font: 650 11px 'Manrope', sans-serif; cursor: pointer; }
.match-result-actions button:hover { background: rgba(213,239,120,.23); }
.match-result-actions button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.match-result-actions span { display: inline-block; color: #c0d0b5; font: 600 10px/1.4 'DM Mono', monospace; letter-spacing: .08em; }
.toast { top: 80px; }
.runtime-error { top: 125px; }
.minimap-panel { z-index: 6; right: 16px; bottom: 14px; width: 220px; padding: 8px; background: rgba(13,23,16,.92); border-color: rgba(229,241,211,.36); }
.minimap-heading { font-size: 8px; }
.minimap-legend { font-size: 7px; }
.field-hint { bottom: 300px; left: 18px; font-size: 10px; background: rgba(13,23,16,.78); }
.placement-status { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(225,237,209,.14); color: #d8eac2; letter-spacing: .055em; }
.placement-status[hidden] { display: none; }
.placement-status[data-state="blocked"] { color: #ffb39d; }
.placement-status[data-state="clear"] { color: var(--lime); }
.field-hint[hidden], .field-order-feedback[hidden] { display: none; }
.field-order-feedback { position: absolute; z-index: 5; bottom: 300px; left: 18px; display: flex; max-width: min(520px, calc(100% - 260px)); min-height: 34px; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(213,239,120,.38); border-radius: 4px; background: rgba(13,23,16,.9); box-shadow: 0 8px 22px rgba(0,0,0,.22); color: #e0edc9; font: 600 10px/1.4 'DM Mono', monospace; letter-spacing: .045em; backdrop-filter: blur(10px); pointer-events: none; }
.field-order-feedback::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(213,239,120,.5); content: ''; }
.field-order-feedback[data-state="applied"] { border-color: rgba(122,190,135,.42); color: #bfe2b7; }
.field-order-feedback[data-state="applied"]::before { background: #82c68f; }
.field-order-feedback[data-state="failed"] { border-color: rgba(239,142,112,.52); color: #ffd1bd; }
.field-order-feedback[data-state="failed"]::before { background: #df836a; box-shadow: 0 0 8px rgba(223,131,106,.45); }

.control-dock { position: absolute; z-index: 6; right: 252px; bottom: 14px; left: 16px; height: 270px; min-height: 0; display: grid; grid-template-columns: minmax(215px, 1fr) minmax(250px, 1.22fr) minmax(195px, .9fr); gap: 0; padding: 0; overflow: hidden; border: 1px solid rgba(226,240,211,.27); border-radius: 6px; background: rgba(11,21,14,.93); box-shadow: 0 18px 45px rgba(0,0,0,.32); backdrop-filter: blur(14px); }
.dock-tabs { display: none; }
.control-dock .control-section { min-width: 0; min-height: 0; overflow: auto; padding: 12px 13px 10px; border-right: 1px solid rgba(225,237,209,.13); border-bottom: 0; scrollbar-width: thin; scrollbar-color: rgba(213,239,120,.28) transparent; }
.control-dock .control-section:last-child { border-right: 0; }
.control-dock .section-label { color: #b2c19e; font-size: 9px; font-weight: 600; }
.selection-count { margin: 6px 0; }
.selection-count strong { font-size: 25px; }
.selection-count span { color: #aab9a1; font-size: 10px; }
.team-breakdown { gap: 10px; }
.team-breakdown div { font-size: 10px; }
.team-breakdown b { font-size: 10px; }
.selection-composition { margin-top: 7px; padding-top: 6px; }
.composition-stat { font-size: 8px; }
.composition-stat b { font-size: 10px; }
.control-groups { margin-top: 8px; }
.control-groups-heading { font-size: 8px; }
.control-groups-heading span:last-child { display: none; }
.control-group-grid { gap: 3px; }
.control-group { height: 31px; }
.control-group-number { font-size: 10px; }
.control-group-count { font-size: 8px; }
.control-group-hint { font-size: 7px; }
.army-select-actions { margin-top: 8px; }
.army-select-actions .text-button { font-size: 11px; }
.worker-tools { gap: 4px; margin-top: 8px; }
.worker-select-button { min-height: 29px; font-size: 10px; }
.worker-load { margin-top: 5px; font-size: 9px; }
.economy-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.economy-action { min-height: 55px; font-size: 12px; line-height: 1.18; }
.economy-actions .build-action, .economy-actions .archer-action { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: center; }
.economy-statuses { display: flex; min-width: 0; flex-direction: column; }
.economy-statuses .food-status { order: -1; }
.action-cost { font-size: 10px; }
.economy-section small { font-size: 9px; }
.economy-section .food-status { color: #a4b69a; }
.command-card { margin-top: 8px; padding: 8px; }
.command-card strong { font-size: 13px; }
.command-card small { font-size: 10px; }
.order-target-toggle span { font-size: 12px; }
.order-target-toggle small { font-size: 9px; }
.order-status { font-size: 10px; }
.formation-picker label { font-size: 9px; }
.formation-picker select { height: 32px; font-size: 11px; }
.attack-move-toggle { min-height: 34px; font-size: 11px; }
.building-command-details { font-size: 8px; }

.hud-scrim { position: absolute; z-index: 11; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(4,9,5,.48); cursor: default; }
.hud-scrim[hidden], .match-menu[hidden], .help-panel[hidden] { display: none; }
.match-menu, .help-panel { position: absolute; z-index: 12; top: 75px; right: 16px; width: min(340px, calc(100% - 32px)); max-height: calc(100% - 92px); overflow: auto; padding: 20px; border: 1px solid rgba(225,237,209,.27); border-radius: 7px; background: rgba(14,24,17,.97); box-shadow: 0 22px 75px rgba(0,0,0,.45); backdrop-filter: blur(18px); scrollbar-width: thin; }
.match-menu .dock-heading { padding-right: 22px; }
.match-menu .control-section { padding: 16px 0; }
.match-menu .performance-section { padding-bottom: 15px; }
.match-menu .dock-spacer { display: none; }
.match-menu .reset-button { min-height: 38px; }
.match-menu .dock-footer { margin-top: 14px; }
.navigation-settings-section small { display: block; margin-top: 8px; color: #9eac98; font-size: 9px; line-height: 1.5; }
.navigation-speed-control { display: grid; gap: 6px; margin: 13px 0 10px; color: #c7d3bf; font-size: 10px; }
.navigation-speed-control > span { display: flex; justify-content: space-between; gap: 8px; }
.navigation-speed-control output { color: var(--lime); font: 600 10px 'DM Mono', monospace; }
.navigation-speed-control input { width: 100%; accent-color: var(--lime); }
.fullscreen-toggle { width: 100%; min-height: 38px; border: 1px solid rgba(225,237,209,.2); border-radius: 4px; background: rgba(255,255,255,.04); color: #d9e3d3; font: 600 11px 'DM Mono', monospace; cursor: pointer; }
.fullscreen-toggle:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); background: rgba(213,239,120,.08); }
.fullscreen-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.fullscreen-toggle:disabled { color: #a5b0a0; cursor: not-allowed; }
.hud-panel-close { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(225,237,209,.2); border-radius: 4px; background: rgba(255,255,255,.04); color: #d9e3d3; font-size: 21px; cursor: pointer; }
.hud-panel-close:hover { border-color: var(--lime); color: var(--lime); }
.hud-panel-close:focus-visible, .dock-tabs button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.match-menu > .hud-panel-close { position: absolute; top: 16px; right: 16px; }
.help-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.help-heading h2 { font-size: 18px; }
.help-panel p { margin: 16px 0 10px; color: #c4d0bc; font-size: 11px; line-height: 1.55; }
.help-panel .command-footnote { margin: 0; color: #b3c1a9; font-size: 10px; line-height: 2.5; }
.help-panel .keycap { font-size: 9px; }

@media (max-width: 1180px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .topbar-center { display: none; }
  .hud-readouts { margin-left: auto; gap: 8px; }
  .hud-readouts .field-strength { min-width: 73px; padding-left: 9px; }
  .control-dock { grid-template-columns: minmax(185px, .92fr) minmax(235px, 1.22fr) minmax(185px, .88fr); right: 244px; left: 12px; }
  .control-dock .control-section { padding-right: 10px; padding-left: 10px; }
  .minimap-panel { right: 12px; width: 220px; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .topbar-center { display: flex; margin-left: auto; }
  .hud-readouts { margin-left: 0; }
}

@media (max-width: 980px) {
  .topbar-center { position: absolute; top: 108px; left: 20px; display: flex; min-height: 25px; margin: 0; padding: 0 8px; border: 1px solid rgba(225,237,209,.17); border-radius: 4px; background: rgba(13,23,16,.78); font-size: 8px; backdrop-filter: blur(7px); }
  .topbar-center .topbar-divider, .topbar-center #players-online { display: none; }
}

@media (max-width: 920px) {
  .workspace { --command-deck-height: min(302px, 45dvh); }
  .match-result { top: calc((100% - var(--command-deck-height) - 12px + 60px) / 2); max-height: calc(100% - var(--command-deck-height) - 96px); }
  .topbar { height: 60px; }
  .brand-lockup h1 { font-size: 13px; }
  .hud-readouts .field-strength { display: none; }
  .map-label { top: 69px; }
  .scenario-brief-panel { top: 141px; }
  .compass { top: 73px; right: 18px; }
  .objective-panel { top: 112px; right: 12px; max-height: min(230px, calc(100% - 430px)); }
  .control-dock { right: 12px; bottom: 12px; left: 12px; height: var(--command-deck-height); display: flex; flex-direction: column; }
  .camera-toolbar { top: 140px; right: auto; bottom: auto; left: 12px; width: 150px; flex-direction: column; gap: 4px; }
  .camera-toolbar button { width: 100%; min-height: 29px; text-align: left; }
  .dock-tabs { flex: 0 0 42px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(225,237,209,.18); }
  .dock-tabs button { border: 0; border-right: 1px solid rgba(225,237,209,.12); background: transparent; color: #a7b69f; font: 600 12px 'DM Mono', monospace; cursor: pointer; }
  .dock-tabs button:last-child { border-right: 0; }
  .dock-tabs button[aria-selected="true"] { border-bottom: 2px solid var(--lime); background: rgba(213,239,120,.1); color: var(--lime); }
  .control-dock .control-section { display: none; flex: 1 1 auto; width: 100%; padding: 13px 16px; border: 0; }
  .control-dock .section-label { font-size: 11px; }
  .building-selection-actions { display: flex; }
  .selection-count strong { font-size: 31px; }
  .selection-count span, .team-breakdown div, .team-breakdown b { font-size: 11px; }
  .selection-composition { gap: 7px; margin-top: 7px; padding-top: 7px; }
  .composition-stat { min-height: 28px; padding: 0 7px; border: 1px solid rgba(225,237,209,.1); border-radius: 3px; background: rgba(255,255,255,.03); font-size: 9px; }
  .composition-stat b { font-size: 11px; }
  .control-groups-heading { font-size: 9px; }
  .control-group { height: 38px; }
  .control-group-number { font-size: 11px; }
  .control-group-count, .control-group-hint { font-size: 8px; }
  .army-select-actions { margin-top: 8px; }
  .army-select-actions .text-button { min-height: 29px; padding: 0 10px; border: 1px solid rgba(225,237,209,.18); border-radius: 3px; background: rgba(255,255,255,.035); font-size: 10px; }
  .army-select-actions .text-button:hover { border-color: rgba(213,239,120,.42); }
  .worker-select-button { min-height: 33px; font-size: 11px; }
  .economy-action { min-height: 53px; font-size: 11px; }
  .action-cost { font-size: 9px; }
  .economy-section small { font-size: 9px; line-height: 1.4; }
  .command-card strong { font-size: 13px; }
  .command-card small { font-size: 11px; }
  .order-status { font-size: 10px; }
  .formation-picker label { font-size: 10px; }
  .formation-picker select, .attack-move-toggle { font-size: 11px; }
  .control-dock[data-active-panel="selection"] .selection-section,
  .control-dock[data-active-panel="economy"] .economy-section,
  .control-dock[data-active-panel="command"] .command-section { display: block; }
  .minimap-panel { bottom: calc(var(--command-deck-height) + 23px); width: 152px; }
  .field-hint { bottom: calc(var(--command-deck-height) + 24px); left: 12px; max-width: calc(100% - 185px); }
  .field-order-feedback { bottom: calc(var(--command-deck-height) + 24px); left: 12px; max-width: calc(100% - 185px); }
}

@media (min-width: 621px) and (max-width: 920px) {
  .economy-content { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-top: 7px; }
  .economy-content .economy-actions { margin-top: 0; }
  .economy-statuses { max-height: 117px; overflow: auto; padding-left: 11px; border-left: 1px solid rgba(225,237,209,.13); scrollbar-width: thin; }
  .economy-statuses .food-status { margin-top: 0; }
}

@media (max-width: 620px) {
  .workspace { --command-deck-height: min(340px, 44dvh); }
  .match-result { top: calc((100% - var(--command-deck-height) - 12px + 92px) / 2); max-height: calc(100% - var(--command-deck-height) - 128px); }
  .topbar { height: 92px; flex-wrap: wrap; align-content: center; gap: 4px 8px; padding: 5px 10px; }
  .brand-mark { width: 23px; height: 23px; flex-basis: 23px; }
  .brand-lockup { flex: 1 1 50%; }
  .brand-lockup .eyebrow { font-size: 7px; }
  .brand-lockup h1 { margin-top: 2px; font-size: 12px; }
  .room-actions { order: 1; margin-left: auto; }
  .room-action { min-height: 28px; padding: 0 6px; font-size: 8px; }
  .hud-icon-button { width: 28px; min-width: 28px; font-size: 12px; }
  .hud-readouts { order: 2; width: 100%; justify-content: flex-end; margin: 0; }
  .hud-team { margin-right: auto; }
  .hud-readouts .resource-stock { min-width: 74px; min-height: 31px; flex-direction: row; align-items: center; gap: 6px; }
  .hud-readouts .resource-stock strong { font-size: 14px; }
  .map-label { top: 101px; left: 10px; right: 10px; max-width: none; white-space: nowrap; font-size: 8px; }
  .scenario-brief-toggle { min-height: 44px; padding: 0 7px; font-size: 9px; }
  .scenario-brief-panel { top: 174px; left: 10px; width: calc(100% - 20px); max-height: min(300px, calc(100% - 190px)); }
  .topbar-center { top: 164px; left: 10px; }
  #map-label-title, #map-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .compass { display: none; }
  /* Reserve the minimap card and its 22px gap beneath the objective scroller. */
  .objective-panel { top: 164px; right: 10px; bottom: calc(var(--command-deck-height) + 182px); width: min(200px, 54vw); max-height: none; }
  .objective-card { padding: 8px; }
  .objective-title { font-size: 11px; }
  .objective-kicker, .objective-status { font-size: 9px; }
  .objective-detail { font-size: 9px; }
  .minimap-panel { right: 10px; width: 118px; padding: 5px; }
  .minimap-heading { font-size: 6px; }
  .minimap-legend { font-size: 6px; }
  .field-hint { left: 10px; max-width: calc(100% - 150px); padding: 5px; font-size: 9px; line-height: 1.5; }
  .control-dock { right: 10px; left: 10px; }
  .camera-toolbar { top: 194px; left: 10px; width: clamp(110px, calc(100vw - 210px), 150px); }
  .minimap-panel { bottom: calc(var(--command-deck-height) + 22px); }
  .field-hint { bottom: calc(var(--command-deck-height) + 22px); }
  .field-order-feedback { bottom: calc(var(--command-deck-height) + 22px); left: 10px; max-width: calc(100% - 150px); padding: 6px 8px; font-size: 9px; }
  .match-menu, .help-panel { top: 99px; right: 10px; max-height: calc(100% - 110px); }
}

@media (max-width: 620px) and (max-height: 720px) {
  .workspace { --command-deck-height: min(300px, 36dvh); }
  .objective-panel { top: 160px; bottom: calc(var(--command-deck-height) + 170px); }
  .minimap-panel { width: 96px; }
  .field-hint { max-width: calc(100% - 128px); }
  .field-order-feedback { max-width: calc(100% - 128px); }
}

@media (max-width: 620px) and (max-height: 620px) {
  .workspace {
    --command-deck-height: clamp(60px, calc(81dvh - 280px), 223px);
    --short-minimap-width: clamp(56px, calc(23.5dvh - 45px), 96px);
  }
  .objective-panel { top: 160px; bottom: calc(var(--command-deck-height) + var(--short-minimap-width) + 68px); }
  .minimap-panel { width: var(--short-minimap-width); }
  .minimap-heading, .minimap-legend { font-size: clamp(5px, calc(.25dvh + 4.5px), 6px); }
  .minimap-legend { gap: 3px; letter-spacing: 0; }
  .field-hint, .field-order-feedback { max-width: calc(100% - var(--short-minimap-width) - 32px); }
}

@media (max-width: 620px) and (max-height: 400px) {
  .minimap-legend { display: none; }
  .objective-panel { bottom: calc(var(--command-deck-height) + var(--short-minimap-width) + 42px); }
}

@media (max-width: 620px) and (max-height: 420px) {
  .workspace { --command-deck-height: 140px; --short-minimap-width: clamp(44px, calc(20dvh - 28px), 56px); }
  .topbar-center { display: none; }
  .objective-panel { left: 10px; right: auto; bottom: calc(var(--command-deck-height) + 12px); width: min(200px, calc(100% - var(--short-minimap-width) - 44px)); }
  .minimap-panel { bottom: calc(var(--command-deck-height) + 12px); }
  .minimap-legend { display: none; }
  .field-hint, .field-order-feedback { top: 160px; right: calc(var(--short-minimap-width) + 18px); bottom: auto; left: auto; z-index: 7; max-width: max(0px, min(140px, calc(100% - 236px - var(--short-minimap-width)))); padding: 3px 5px; font-size: 8px; line-height: 1.25; }
  .field-order-feedback { min-height: 0; }
}

@media (max-width: 620px) and (max-height: 380px) {
  .workspace { --command-deck-height: 132px; }
}

@media (max-width: 620px) and (max-height: 400px) {
  .field-hint, .field-order-feedback { padding: 2px 3px; font-size: 6px; letter-spacing: 0; line-height: 1.1; }
  .field-order-feedback { gap: 3px; }
  .hint-key { margin-right: 1px; padding: 1px 2px; }
  .hint-divider { margin: 0 1px; }
  .placement-status { margin-top: 3px; padding-top: 2px; font-size: 5px; line-height: 1.1; }
}

/* Frequent commands stay beside the battlefield; details retain existing controls. */
.contextual-command-bar, .asset-readability-panel { position:absolute; z-index:12; bottom:14px; left:268px; right:14px; max-height:128px; padding:7px; background:rgba(13,22,23,.96); border:1px solid #52625b; border-radius:8px; overflow:auto; pointer-events:auto; }
.contextual-summary { font-size:12px; line-height:18px; }
.contextual-identity { display:flex; align-items:center; gap:8px; }
.contextual-identity-text { min-width:0; overflow-wrap:anywhere; }
.contextual-identity-text strong { color:var(--ink); font-size:12px; line-height:18px; }
.contextual-command-bar .selection-portrait { flex:0 0 52px; width:52px; height:52px; padding:0; overflow:hidden; }
.contextual-command-bar .selection-portrait:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.selection-portrait-art { display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.selection-portrait-art img { position:absolute; max-width:none; height:auto; }
.unit-art-action { position:relative; padding-left:34px; }
.contextual-command-bar .unit-art-action { padding-left:34px; }
.unit-action-art { position:absolute; left:7px; top:50%; transform:translateY(-50%); width:20px; height:20px; overflow:hidden; pointer-events:none; }
.unit-action-art img { position:absolute; max-width:none; height:auto; }
.unit-action-art[hidden], .selection-portrait-art[hidden] { display:none; }
.contextual-command-bar .contextual-icon-command { display:inline-flex; align-items:center; gap:5px; }
.contextual-icon-command img { flex:0 0 20px; }
.attack-move-toggle.contextual-icon-command { justify-content:flex-start; gap:5px; }
.selected-worker-notes { padding:8px; border:1px solid var(--line); border-radius:4px; }
.selected-worker-notes p { margin:5px 0 0; font-size:12px; line-height:18px; }
.selected-worker-notes details { margin-top:5px; border-top:1px solid var(--line); }
.selected-worker-notes summary { min-height:44px; padding:12px 0; box-sizing:border-box; font-size:12px; line-height:20px; cursor:pointer; }
.selected-worker-notes a { color:var(--lime); text-underline-offset:3px; }
.selected-worker-notes summary:focus-visible, .selected-worker-notes a:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.contextual-summary:empty, [data-context-reason]:empty { display:none; }
.contextual-actions, .contextual-groups, .group-assignment { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.contextual-stances { display:flex; align-items:center; gap:5px; flex:0 0 auto; }
[data-stance-status] { font-size:12px; color:var(--muted); white-space:nowrap; }
/* Keep commands in one complete row beneath the portrait. The bounded strip
   exposes overflow without spending another button row over the battlefield. */
.contextual-command-bar > .contextual-actions { min-width:0; max-width:100%; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; }
.contextual-command-bar > .contextual-actions button { flex:0 0 auto; min-width:44px; white-space:nowrap; }
.contextual-command-bar > .contextual-actions .contextual-groups,
.contextual-command-bar > .contextual-actions #building-lifecycle-actions { flex:0 0 auto; flex-wrap:nowrap; }
.contextual-command-bar > .contextual-actions button:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
.contextual-command-bar > .contextual-actions::-webkit-scrollbar { height:8px; }
.contextual-command-bar > .contextual-actions::-webkit-scrollbar-track { background:var(--panel-soft); border-radius:4px; }
.contextual-command-bar > .contextual-actions::-webkit-scrollbar-thumb { background:var(--muted); border-radius:4px; }
.contextual-command-bar button, .asset-readability-panel button, .group-assignment button, .group-assignment select { min-height:44px; padding:6px 9px; color:#e7efd7; background:#233532; border:1px solid #52625b; border-radius:4px; font-size:14px; }
.contextual-command-bar button:disabled, .contextual-command-bar button[aria-disabled="true"], .asset-readability-panel button:disabled { opacity:.55; }
.contextual-command-bar button[aria-disabled="true"] { cursor:not-allowed; }
.contextual-command-bar button[aria-pressed="true"], .asset-readability-panel button[aria-pressed="true"] { border-color:#d5ef78; }
.contextual-command-bar [hidden] { display:none; }
.contextual-actions > [data-context-products]:not([hidden]),
.contextual-actions > [data-context-research-options]:not([hidden]) { display:contents; }
@media(max-width:920px) { .contextual-command-bar { left:10px; right:10px; max-height:128px; } .contextual-command-bar button { min-height:44px; } }
.action-disabled-reason { display:block; font-size:12px; line-height:16px; color:#e5c993; }
.contextual-command-bar small { font-size:12px; line-height:16px; }
/* Battlefield first shell. Panels occupy space only while explicitly open. */
.workspace { --command-deck-height: 0px; --context-bar-height: 0px; }
.topbar { height: 54px; gap: 14px; padding: 0 16px; }
.topbar .brand-lockup { display: none; }
.topbar .hud-readouts { order: -1; margin-right: auto; gap: 14px; }
.topbar .topbar-center { display: flex; margin-left: 0; font-size: 12px; }
.topbar .hud-team, .topbar .hud-team b, .topbar .resource-stock span,
.topbar .field-strength, .topbar .field-strength div { font-size: 12px; }
.topbar .resource-stock strong { font-size: 18px; }
.topbar .room-action { min-height: 44px; font-size: 12px; }
.topbar .hud-icon-button { width: 44px; min-width: 44px; }
.topbar #players-online, .topbar .topbar-divider { display: none; }
.map-label { top: 62px; }
.compass { display: none; }
.hud-quick-access { position: absolute; z-index: 6; left: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 5px; background: rgba(11,21,14,.94); }
.hud-quick-access button, .minimap-reopen, .minimap-heading button { min-height: 44px; padding: 0 12px; border: 1px solid rgba(225,237,209,.25); border-radius: 4px; background: #17271c; color: #e0e9d8; font: 600 14px 'Manrope', sans-serif; cursor: pointer; }
.hud-quick-access button:disabled { color: #9ba993; cursor: default; }
.hud-quick-access button:focus-visible, .minimap-heading button:focus-visible, .minimap-reopen:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.control-dock { left: 16px; right: auto; bottom: calc(var(--context-bar-height) + 72px); width: min(580px, calc(100% - 32px)); height: min(340px, calc(100dvh - var(--context-bar-height) - 140px)); display: flex; flex-direction: column; overflow: hidden; }
.control-dock[hidden], .control-dock .control-section[hidden], .minimap-panel[hidden], .minimap-reopen[hidden] { display: none !important; }
.control-dock > .dock-tabs { display: flex; flex: 0 0 auto; min-height: 48px; padding-right: 48px; }
.control-dock > .dock-tabs button { flex: 1; min-height: 44px; font-size: 14px; }
.control-dock > #dock-close { position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; }
.control-dock .control-section { display: block; flex: 1 1 auto; overflow: auto; padding: 12px; border: 0; }
.control-dock .control-section button { min-height: 44px; }
.control-dock .control-section small, .control-dock .control-section label { font-size: 12px; }
.control-dock .section-label { font-size: 12px; }
.camera-toolbar { left: auto; right: 16px; top: 62px; bottom: auto; width: auto; flex-direction: row; }
.camera-toolbar button { width: auto; min-height: 36px; font-size: 12px; }
.minimap-panel { right: 16px; bottom: 14px; width: 170px; padding: 6px; }
.minimap-heading { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.minimap-heading > span { flex: 1; }
.minimap-heading button { min-width: 32px; min-height: 32px; padding: 0 6px; }
.minimap-legend { font-size: 9px; }
.app-shell[data-minimap-size="large"] .minimap-panel { width: var(--hud-minimap-width); }
.minimap-reopen { position: absolute; z-index: 6; right: 16px; bottom: 14px; }
.field-hint, .field-order-feedback { bottom: calc(var(--context-bar-height) + 76px); }
.match-result { top: 45%; max-height: 65%; }
.match-menu, .help-panel { top: 62px; max-height: calc(100% - 76px); }
.hud-preference { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; color: #d1ddca; font-size: 14px; }
.hud-preference select { min-height: 44px; background: #17271c; color: #e0e9d8; border: 1px solid #65775a; border-radius: 4px; }
.app-shell[data-hud-density="comfortable"] .control-dock .control-section { padding: 20px; }
.app-shell[data-hud-density="comfortable"] .hud-quick-access { gap: 8px; padding: 6px; }
@media (max-width: 920px) {
  .topbar { height: 54px; gap: 8px; padding: 0 10px; }
  .topbar .hud-readouts { gap: 8px; }
  .topbar .topbar-center { display: none; }
  .camera-toolbar { top: 106px; right: 10px; left: auto; width: auto; flex-direction: row; }
  .map-label { top: 62px; left: 10px; max-width: calc(100% - 20px); }
  .minimap-panel { right: 10px; bottom: 14px; width: 144px; }
  .hud-quick-access { left: 10px; max-width: calc(100% - var(--hud-minimap-width) - 31px); overflow-x: auto; }
  .hud-quick-access button { flex: 0 0 auto; padding: 0 8px; }
  .control-dock { left: 10px; width: min(580px, calc(100% - 20px)); }
}
@media (max-width: 620px) {
  .topbar .hud-team { display: none; }
  .topbar .hud-readouts .field-strength { display: none; }
  .topbar .resource-stock { min-width: 0; padding: 0 4px; }
  .topbar .resource-stocks { gap: 2px; }
  .topbar .room-actions { gap: 2px; }
  .hud-quick-access { max-width: calc(100% - 20px); }
  .minimap-panel { bottom: 76px; width: 128px; }
  .minimap-reopen { bottom: 76px; }
  .field-hint, .field-order-feedback { max-width: calc(100% - 156px); }
}
@media (max-height: 500px) {
  .minimap-panel { width: 128px; }
  .control-dock { bottom: 68px; height: calc(100dvh - 130px); z-index: 8; }
  .camera-toolbar { top: 106px; }
}
.workspace .contextual-command-bar[hidden], .workspace .hud-quick-access[hidden] { display: none; }
.workspace:has(.contextual-command-bar) .control-dock { bottom: calc(var(--context-bar-height) + 22px); }
.workspace:has(.contextual-command-bar) .field-hint,
.workspace:has(.contextual-command-bar) .field-order-feedback { bottom: calc(var(--context-bar-height) + 26px); }
.workspace .contextual-command-bar { position: absolute; left: 16px; bottom: 14px; }
@media (max-height: 500px) {
  .workspace:has(.contextual-command-bar) .control-dock { bottom: 14px; height: calc(100dvh - 130px); }
}
.topbar .hud-readouts { margin-left: 0; }
.topbar .resource-stocks { margin-left: 0; }
.minimap-heading > span { min-width: 0; }
@media (max-width: 920px) {
  .topbar .topbar-center[data-urgent="true"] { display: flex; position: absolute; top: 54px; right: 10px; padding: 8px; border: 1px solid #d69870; border-radius: 4px; background: #18261d; }
}
/* Keep the shared contextual bar clear of the tactical map and below dialogs. */
.workspace { --hud-minimap-width: 170px; --hud-map-edge: 16px; --hud-map-gap: 16px; }
.workspace .minimap-panel { width: var(--hud-minimap-width); }
.workspace .contextual-command-bar { z-index: 6; right: calc(var(--hud-minimap-width) + var(--hud-map-edge) + var(--hud-map-gap)); width: max-content; max-width: calc(100% - var(--hud-minimap-width) - var(--hud-map-edge) - var(--hud-map-edge) - var(--hud-map-gap)); }
@media (max-width: 920px) {
  .workspace { --hud-minimap-width: 144px; --hud-map-edge: 10px; --hud-map-gap: 14px; }
  .workspace .contextual-command-bar { left: 10px; }
}
@media (max-width: 620px) {
  .workspace { --hud-minimap-width: 128px; }
  .workspace .contextual-command-bar { right: 10px; max-width: calc(100% - 20px); }
  .workspace:has(.contextual-command-bar) .minimap-panel,
  .workspace:has(.contextual-command-bar) .minimap-reopen { bottom: calc(var(--context-bar-height) + 22px); }
}
@media (max-height: 500px) {
  .workspace { --hud-minimap-width: 128px; }
}
.app-shell[data-minimap-size="large"] .workspace { --hud-minimap-width: min(280px, 36vw); }
/* Compact objectives keep live deadlines outside the optional field brief. */
.map-label { flex-wrap: wrap; font-size: 12px; letter-spacing: 0; }
.map-label #map-label-title, .map-label .map-label-sep, .map-label-dot { display: none; }
.map-label #map-summary { white-space: normal; overflow: visible; }
.map-label #objective-urgent { flex: 1 0 100%; color: #ffe0a0; font-size: 12px; line-height: 1.4; }
.map-label #objective-urgent[hidden] { display: none; }
.scenario-brief-toggle { font-size: 12px; min-height: 36px; }
.scenario-brief-panel .objective-panel { position: static; width: auto; max-height: none; overflow: visible; margin-top: 12px; }
.scenario-brief-panel .objective-detail, .scenario-brief-panel .objective-status { font-size: 12px; }
.scenario-brief-panel .objective-heading { flex-wrap: wrap; }
.scenario-brief-panel .scenario-brief-zones { display: none; } /* Live cards retain the same capture rules. */
.scenario-brief-panel { max-height: calc(100% - 160px); }
.notice-history { margin-top: 14px; font-size: 12px; line-height: 1.5; }
.notice-history summary { cursor: pointer; padding: 10px 0; }
.notice-history ol { padding-left: 20px; }
.notice-history li + li { margin-top: 8px; }
.field-hint { pointer-events: auto; }
#guidance-toggle { color: inherit; background: transparent; border: 1px solid #70816a; border-radius: 3px; padding: 6px; cursor: pointer; }
.field-hint [data-building-rotate] { color: inherit; background: #1b2e20; border: 1px solid #70816a; border-radius: 3px; padding: 6px 8px; margin-left: 6px; font: inherit; cursor: pointer; }
.field-hint [data-building-rotate]:disabled { opacity: .55; cursor: wait; }
.field-hint [data-building-rotate]:focus-visible { outline: 2px solid #d5e6b5; outline-offset: 2px; }
@media (pointer: coarse) { .field-hint [data-building-rotate] { min-height: 44px; min-width: 44px; } }
.field-hint.guidance-dismissed > span { display: none; }
@media (pointer: coarse) { #guidance-toggle, .scenario-brief-toggle, .scenario-brief-heading button { min-height: 44px; min-width: 44px; } }

/* Size the wrapped header to its contents and stack narrow HUD rows using
   measured heights, including wrapped objective text and live deadlines. */
.topbar { height: auto; min-height: 54px; flex-wrap: wrap; align-content: flex-start; padding-top: 5px; padding-bottom: 5px; }
.topbar .hud-readouts { width: auto; }
.map-label { top: calc(var(--hud-header-height, 54px) + 8px); max-width: calc(100% - 380px); }
.camera-toolbar { top: calc(var(--hud-header-height, 54px) + 8px); }
.match-menu, .help-panel { top: calc(var(--hud-header-height, 54px) + 8px); max-height: calc(100% - var(--hud-header-height, 54px) - 22px); }
.scenario-brief-panel { top: calc(var(--hud-controls-bottom, 154px) + 8px); max-height: calc(100% - var(--hud-controls-bottom, 154px) - 22px); }
@media (max-width: 920px) {
  .map-label { max-width: calc(100% - 20px); }
  .camera-toolbar { top: calc(var(--hud-header-height, 54px) + var(--hud-objective-height, 44px) + 16px); max-width: calc(100% - 20px); flex-wrap: wrap; }
  .topbar .topbar-center[data-urgent="true"] { position: static; order: 3; margin-left: auto; }
}
@media (max-width: 620px) {
  .topbar .hud-readouts { flex-basis: 100%; justify-content: flex-start; }
  .topbar .room-actions { margin-left: 0; max-width: 100%; flex-wrap: wrap; }
}

/* Owned capacity uses the former FIELD slot without inheriting its narrow-screen hide rule. */
.topbar .population-readout { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 83px; padding-left: 13px; border-left: 1px solid rgba(228,238,211,.13); color: #718070; font: 12px 'DM Mono', monospace; letter-spacing: .08em; }
.topbar .population-readout strong { color: #d1d9c7; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 920px) { .topbar .population-readout { min-width: 73px; padding-left: 9px; } }
@media (max-width: 620px) { .topbar .population-readout { min-width: 0; padding-left: 6px; } }