/* Campaign phases, square states, and navigation. */
[hidden] { display: none !important; }
* { letter-spacing: 0 !important; }
body { background: #f1f4f5; }
h1 { font-size: 36px; line-height: 1.15; }
.topbar { grid-template-columns: auto 1fr auto; }
.turn-chip { border-radius: 6px; color: #205b38; background: #e1f2e6; }
.turn-chip.computer-turn { color: #8c272d; background: #fce7e9; }
.turn-status { border-left: 5px solid #2f7d4d; background: #e1f2e6; padding: 12px 16px; }
.turn-status.computer-turn { border-color: #b8463d; background: #fce7e9; }
.turn-status p { margin: 8px 0 0; font-weight: 700; }
.phase-track { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; list-style: none; }
.phase-track li { color: #55625c; border-bottom: 3px solid transparent; padding: 4px 0; }
.phase-track .current { color: #163d26; border-color: #2f7d4d; font-weight: 800; }
.computer-turn .phase-track .current { color: #8c272d; border-color: #b8463d; }
.view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #bcc9c9; margin: 16px 0; }
.view-tabs button { border: 0; border-radius: 0; background: none; border-bottom: 3px solid transparent; }
.view-tabs button[aria-selected="true"] { color: #205b38; border-color: #2f7d4d; }
.game-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.map-panel, .command-panel, .moba-panel { background: none; box-shadow: none; border: 0; border-radius: 0; min-width: 0; min-height: 0; }
.map-panel { padding: 0; display: block; align-self: start; }
.map-panel .setup-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0; margin-bottom: 12px; border-bottom: 1px solid #cdd8d5; }
.map-panel .setup-title, .map-panel .setup-type-grid, .map-panel [data-setup-progress] { grid-column: 1 / -1; }
.map-panel .setup-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.map-panel [data-setup-progress] { margin: 0; }
@media (max-width: 620px) { .map-panel .setup-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.command-panel { padding: 0 0 0 16px; border-left: 1px solid #cdd8d5; }
.phase-card, .selection-box, .metric, .map-meta, .event-log, .setup-panel { border: 0; border-radius: 0; background: transparent; }
.phase-card, .selection-box, .metric, .setup-panel { padding: 6px 0; }
.selection-box { min-height: 58px; }
.selection-box strong { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.phase-card { border-bottom: 1px solid #cdd8d5; }
.selection-grid, .score-grid, .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-grid button { font-size: 14px; min-height: 48px; white-space: normal; overflow-wrap: anywhere; }
.map-toolbar { margin-bottom: 12px; }
.map-select select { min-width: 0; width: 100%; }
.board-viewport { overflow: auto; max-width: 100%; }
.map-zoom { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 13px; }
.map-zoom input { width: 140px; accent-color: #2f7d4d; }
.battle-map { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; min-height: 0; }
.province-heading { text-anchor: middle; font-size: 16px; font-weight: 800; fill: #14211b; pointer-events: none; }
.battle-cell-label { font-size: 17px; text-anchor: middle; pointer-events: none; fill: white; font-weight: 700; }
.battle-cell { stroke: #fff; stroke-width: 1; }
.battle-cell.unassigned { fill: #687578; }
.battle-cell.setup-reveal { animation: setup-reveal 450ms ease-out; stroke: #ffe063; stroke-width: 4; }
@keyframes setup-reveal { from { opacity: .2; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .battle-cell.setup-reveal { animation: none; } }
.battle-cell.spent { opacity: .5; }
.battle-cell.engaged { stroke: #172627; stroke-width: 4; stroke-dasharray: 5 3; opacity: 1; }
.battle-cell.source-square { stroke: #ffe063; stroke-width: 5; }
.battle-cell.selected-cell { stroke: #111; stroke-width: 5; }
.battle-cell.selectable { stroke: #fff47c; stroke-width: 3; }
.battle-cell:focus-visible { outline: none; stroke: #fff47c; stroke-width: 5; }
.battle-cell.knocked-out { fill: #ccd2d3; }
.event-log { max-height: 190px; overflow: auto; font-size: 13px; }
.map-meta { font-size: 12px; padding: 4px 0; }
@media (max-width: 980px) {
  .game-grid { grid-template-columns: 1fr; }
  .command-panel { border-left: 0; padding: 0; grid-template-columns: 1fr 1fr; }
  .phase-card, .selection-grid, .action-grid, .setup-panel, .score-grid, .battle-legend, .map-meta, .event-log { grid-column: auto; }
  .selection-grid, .action-grid, .setup-panel { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  h1 { font-size: 27px; }
  .topbar { gap: 10px; grid-template-columns: auto 1fr; }
  .turn-chip { grid-column: 1 / -1; justify-self: start; }
  .shell { width: calc(100% - 20px); padding-top: 14px; }
  .map-toolbar { flex-direction: row; gap: 12px; }
  .map-toolbar button, .map-select { width: auto; flex: 1; min-width: 0; }
  .battle-map { min-height: 0; }
  .command-panel { grid-template-columns: 1fr; }
  .phase-card, .score-grid, .battle-legend, .map-meta, .event-log { grid-column: 1 / -1; }
  .phase-track { gap: 14px; font-size: 14px; }
}