/* Battle readout shared by the match and the tournament replay.
   Neutral text is white. Counts are the largest type in the dock. */

#war-dock, #replay-war, #replay-ledger {
  color: #fff;
  background: #14110c;
}
#war-dock, #replay-war {
  flex: 0 1 auto;
  width: 100%;
  max-height: 32%;
  overflow: auto;
  box-sizing: border-box;
  padding: 8px 12px 10px;
  border-top: 2px solid #ffd94a;
}
#replay-ledger { flex: 0 0 auto; padding: 6px 10px 8px; border-top: 1px solid #ffd94a; }
.war-scene { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.war-headline { flex: 1 0 100%; margin: 0; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.1; }
.war-headline strong { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.war-verb { color: #fff; font-size: 18px; font-weight: 800; }
.war-side { display: flex; align-items: center; gap: 8px; color: #fff; flex-wrap: wrap; }
.war-count { color: #fff; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.war-count-label { color: #fff; font-size: 16px; font-weight: 800; }
.war-destroyed .war-count-label { color: #ff5c33; }
.war-lost .war-count-label { color: #ffbf2a; }
.war-left { color: #fff; font-size: 14px; font-weight: 700; }
.war-left strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.war-faction { font-size: 15px; font-weight: 800; }
.war-faction-0 { color: #9fd0ff; }
.war-faction-1 { color: #9dffb0; }
.war-math-line { margin: 4px 0 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.35; }
.war-math-line strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.war-math-label { font-weight: 800; font-size: 16px; }
.war-ledger { display: flex; flex-wrap: wrap; gap: 6px 22px; color: #fff; }
.war-ledger-side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.war-ledger-side strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.war-ledger-side span, .war-ledger-note { font-size: 13px; font-weight: 700; color: #fff; }
.war-ledger-note { flex: 1 0 100%; margin: 2px 0 0; }
.seek-scale { display: flex; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
#replay-follow[aria-pressed="true"] { border-color: #80d5e8; font-weight: 800; }
.replay-viewer .war-math-line, .replay-viewer .war-headline, .replay-viewer .war-verb,
.replay-viewer .war-ledger-note, .replay-viewer #replay-position { color: #fff; }
.replay-viewer #replay-position { font-size: 15px; font-weight: 700; }

/* Fixed left rail: content grows inside it, never into the battlefield. */
#game-screen { flex-direction: row; --controls-left-width: clamp(210px, 27vw, 330px); }
#game-screen #topbar { display: block; flex: 0 0 var(--controls-left-width); width: var(--controls-left-width);
  height: 100%; min-height: 0; overflow: auto; padding: 10px; border-right: 1px solid #686045; border-bottom: 0; }
#game-screen .topbar-scroll { display: flex; flex-direction: column; align-items: stretch; overflow: visible;
  height: auto; min-height: 0; flex: none; gap: 8px; }
#game-screen .topbar-scroll > *, #game-screen #map-jump { width: 100%; max-width: 100%; white-space: normal; }
#game-screen .view-controls { display: flex; margin: 12px 0; flex-wrap: wrap; }
#game-screen .topbar-actions { display: flex; flex-direction: column; margin: 10px 0; gap: 7px; }
#game-screen #dock-unit-controls { max-height: none; overflow: visible; }
#game-screen #sidebar { width: 100%; padding: 10px 0; border: 0; overflow: visible; }
#game-screen #war-dock { width: 100%; max-height: none; overflow: visible; padding: 12px 0; }
#game-screen #canvas-wrap { overflow: hidden; min-height: 0; }
#game-screen #action-menu, #game-screen #range-legend { position: static; width: 100%; max-width: none; flex-wrap: wrap; }
#game-screen #map-action-rail { display: none; }
#game-screen #btn-battle-map { width: 100%; margin: 8px 0; }

#lab-viewer.replay-viewer { display: grid; grid-template-columns: clamp(220px, 28vw, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
#replay-sidebar { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; border-right: 1px solid #52627a; }
#replay-board { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.replay-viewer #replay-canvas { width: 100%; height: 100%; border: 0; border-radius: 0; }
.replay-viewer .section-bar, .replay-viewer .replay-tools, .replay-viewer .replay-controls { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; }
.replay-viewer .section-bar { margin-bottom: 12px; }
.replay-viewer h2 { white-space: normal; }
.replay-viewer #replay-detail { white-space: normal; margin: 12px 0; }
.replay-viewer details { max-height: none; overflow: visible; margin: 12px 0; }
.replay-viewer #replay-war, .replay-viewer #replay-ledger { max-height: none; overflow: visible; padding: 10px 0; margin-top: 12px; }
.replay-viewer #replay-position, .replay-viewer #replay-hover { margin: 10px 0; }
.replay-viewer #replay-seek { margin-top: 12px; }
.war-scene { gap: 8px; }
.war-math-line { font-size: 13px; overflow-wrap: anywhere; }
.war-math-line strong { font-size: 15px; }
.war-ledger { display: block; }
.war-ledger-side { margin-bottom: 10px; }
.war-ledger-side .war-faction-0 { color: #9fd0ff; }
.war-ledger-side .war-faction-1 { color: #9dffb0; }

/* The battle screen occupies the board's existing viewport without resizing it. */
#battle-stage, #replay-battle-stage { position: absolute; inset: 0; z-index: 12; display: grid;
  place-items: center; padding: clamp(8px, 2vw, 24px); background: #080a18; overflow: auto; }
.battle-screen { width: min(100%, 950px); color: #fff; background: #121d53; border: 3px solid #d5bc43;
  box-shadow: 0 12px 50px #0008; font-family: monospace; }
.battle-heading, .battle-stat-panels { display: grid; grid-template-columns: 1fr 1fr; }
.battle-combatant { padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.battle-combatant h3 { font-size: clamp(16px, 2vw, 26px); color: white; margin: 0; }
.battle-combatant .war-faction { grid-column: 1 / -1; }
.battle-count { grid-column: 2; grid-row: 2 / 4; display: flex; align-items: center; gap: 6px; }
.battle-count strong { border: 2px solid #f7d758; padding: 3px 9px; color: #ffe668; font-size: clamp(26px, 4vw, 48px); }
.battle-count span { font-size: 12px; }
/* Each faction keeps its own terrain, including when Xenon initiates. */
.battle-field { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border-block: 2px solid #dabf4d; overflow: hidden; }
.battle-ground { position: relative; display: grid; align-items: center; min-height: 230px;
  padding: 25px 22px 15px; overflow: hidden; }
.battle-terrain { position: absolute; width: 100%; height: 100%; inset: 0; }
.battle-formation { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center; justify-items: center; }
.battle-formation-left { transform: translateX(calc(var(--battle-approach, 0) * -70px)) skewY(-8deg); }
.battle-formation-right { transform: translateX(calc(var(--battle-approach, 0) * 70px)) skewY(8deg); }
.battle-machine { display: grid; place-items: center; width: clamp(32px, 5vw, 64px); height: clamp(32px, 5vw, 64px); }
.battle-machine .unit-label-icon { width: 100%; height: 100%; image-rendering: pixelated; }
.battle-casualty { color: #ffd54f; font-size: clamp(24px, 4vw, 48px); text-shadow: 0 0 10px #f50; }
.battle-crossfire { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 30px; color: #ffdf77; text-shadow: 0 1px 3px #000; }
.battle-one-way { font-size: 25px; padding: 0 5px; border-radius: 3px; background: #24251ed9; }
.battle-stats { padding: 10px 12px; }
.battle-stats dl { margin: 0; display: grid; gap: 6px; }
.battle-stats dl > div { display: flex; justify-content: space-between; gap: 8px; }
.battle-stats dt { font-size: 15px; }
.battle-stats dd { margin: 0; font-size: 24px; color: #ffe668; font-weight: 800; }
.battle-stats p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.battle-outcome { text-align: center; font-size: 20px; font-weight: 800; padding: 10px; margin: 0; border-top: 1px solid #d5bc43; }
@media (max-width: 700px) {
  #game-screen { --controls-left-width: 190px; }
  #lab-viewer.replay-viewer { grid-template-columns: 190px minmax(0, 1fr); }
  .battle-count span { display: none; }
  .battle-combatant { padding: 6px; }
  .battle-ground { min-height: 150px; padding: 15px 4px 10px; }
  .battle-stats { padding: 8px 6px; }
}

.battle-presentation { width: min(100%, 950px); }
.battle-presentation .battle-screen { width: 100%; box-sizing: border-box; }
.battle-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding: 10px; color: #fff; background: #121d53; border: 3px solid #d5bc43; border-top: 0; }
.battle-controls button { min-width: 100px; color: #fff; background: #24376e; border: 2px solid #f7d758; font-size: 16px; padding: 7px 15px; }
.battle-controls button[aria-pressed="true"] { background: #614c16; }
#replay-battle-stage[data-paused="true"] { cursor: pointer; }
#replay-battle-hint { font-size: 13px; }
.battle-exp-gain { display: block; margin-top: 4px; color: #ffe668; font-weight: 800; }
.battle-combatant .unit-label, .replay-viewer .unit-label { display: inline-flex; align-items: center; gap: 5px; }
.battle-combatant .unit-label-icon, .replay-viewer .unit-label-icon { width: 32px; height: 32px; flex: 0 0 32px; image-rendering: pixelated; }
.replay-viewer .battle-machine .unit-label-icon { width: 100%; height: 100%; }
.battle-exp-gain { grid-column: 1 / -1; }

.battle-phases { display: flex; justify-content: center; gap: 10px; padding: 6px; border-bottom: 1px solid #5e6281;
  font-size: 12px; color: #d4d9ee; letter-spacing: .04em; }
.battle-phases [aria-current="step"] { color: #ffe668; font-weight: 800; border-bottom: 2px solid #ffe668; }