:root {
  color-scheme: dark;
  --bg: #11140f;
  --panel: #1a1e17;
  --panel-2: #22271d;
  --line: #3f4736;
  --text: #e9eadf;
  --muted: #aeb5a0;
  --allied: #497fb2;
  --axis: #9b5048;
  --neutral: #7c806f;
  --accent: #d6c17a;
  --good: #8dc07d;
  --bad: #cf756d;
  --font: "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

button,
select {
  font: inherit;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #141810;
}

.brand h1,
.setup-copy h2,
.left-panel h2,
.left-panel h3 {
  margin: 0;
  letter-spacing: 0;
}

.brand h1 {
  font-size: 24px;
}

.kicker,
.section-label {
  display: block;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
}

.war-clock {
  display: flex;
  align-items: center;
  gap: 10px;
}

#clock {
  min-width: 164px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #0f130d;
  color: var(--accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.icon-button,
.text-button,
.mode-button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.icon-button {
  width: 38px;
  height: 38px;
}

.text-button,
.mode-button {
  min-height: 38px;
  padding: 0 12px;
}

.return-button {
  border-color: #6c5f34;
  color: var(--accent);
}

.setup-screen {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(360px, 680px);
  gap: 28px;
  align-items: center;
  justify-content: center;
  padding: 44px;
  background:
    linear-gradient(rgba(17, 20, 15, 0.88), rgba(17, 20, 15, 0.84)),
    repeating-linear-gradient(35deg, #1d2419 0 2px, #151912 2px 14px);
}

.setup-copy h2 {
  margin-top: 8px;
  font-size: 42px;
}

.setup-copy p {
  color: var(--muted);
  line-height: 1.7;
}

.faction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.faction-card {
  min-height: 230px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

.faction-card.allied {
  background: linear-gradient(145deg, #1d3140, #253a2f);
}

.faction-card.axis {
  background: linear-gradient(145deg, #3e2620, #273022);
}

.faction-card span,
.faction-card strong,
.faction-card small {
  display: block;
}

.faction-card span {
  color: var(--accent);
  font-size: 13px;
}

.faction-card strong {
  margin-top: 20px;
  font-size: 23px;
  line-height: 1.25;
}

.faction-card small {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.game-shell {
  display: grid;
  grid-template-columns: 280px minmax(560px, 1fr) 300px;
  height: calc(100vh - 76px);
  min-height: 0;
}

.hidden {
  display: none;
}

.left-panel,
.right-panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow: auto;
}

.right-panel {
  border-right: 0;
  border-left: 1px solid var(--line);
}

.panel-section {
  border-bottom: 1px solid var(--line);
}

.panel-content {
  padding: 0 14px 14px;
}

.panel-section.collapsed .panel-content {
  display: none;
}

.panel-toggle {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.panel-toggle:hover {
  background: rgba(214, 193, 122, 0.08);
}

.panel-icon {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  border: 1px solid var(--line);
  background: #10140d;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.panel-caret {
  color: var(--muted);
  transform: rotate(180deg);
}

.panel-section.collapsed .panel-caret {
  transform: rotate(0deg);
}

.panel-section p {
  color: var(--muted);
  line-height: 1.5;
}

.legend {
  display: grid;
  gap: 7px;
  margin-top: 0;
  color: var(--muted);
  font-size: 13px;
}

.legend div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch {
  width: 18px;
  height: 12px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.allied-swatch {
  background: var(--allied);
}

.axis-swatch {
  background: var(--axis);
}

.contested-swatch {
  background: #8d7d4e;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0;
}

.mode-button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #2f2c1b;
}

.stance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.stance-row select {
  width: 132px;
  min-height: 34px;
  border: 1px solid var(--line);
  background: #10140d;
  color: var(--text);
}

.hint {
  min-height: 42px;
  font-size: 13px;
}

.center-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(96px, 118px) minmax(320px, 1fr) minmax(150px, 210px);
  background: #101510;
  overflow: hidden;
}

.center-top-panel,
.center-bottom-panel {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: #111710;
}

.center-bottom-panel {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  overflow: auto;
}

.faction-summary {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
}

.faction-summary > div:first-child {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-areas:
    "icon title"
    "icon brief";
  gap: 2px 12px;
  align-items: center;
  min-width: 0;
}

.faction-summary .panel-icon {
  grid-area: icon;
}

.faction-summary h2 {
  grid-area: title;
  margin: 0;
  font-size: 24px;
}

.faction-summary p {
  grid-area: brief;
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.selected-summary {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  grid-template-areas:
    "title stats"
    "actions actions"
    "units units";
  gap: 7px 12px;
  padding: 12px 14px;
  min-height: 100%;
  align-content: start;
}

.selected-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.selected-title h3 {
  margin: 3px 0 0;
  font-size: 22px;
  line-height: 1.15;
}

.selected-summary #regionStats {
  grid-area: stats;
  margin-top: 0;
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  gap: 6px;
}

.selected-summary .unit-actions {
  grid-area: actions;
  margin-top: 0;
  align-self: start;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 6px;
}

.selected-summary .unit-actions .text-button {
  min-height: 34px;
  padding: 0 6px;
}

.selected-summary #regionStats .stat {
  min-height: 34px;
  padding: 6px 7px;
  gap: 4px;
}

.selected-summary #regionStats .stat span,
.selected-summary #regionStats .stat strong {
  white-space: nowrap;
}

.selected-summary #regionStats .stat strong {
  font-size: 15px;
}

.selected-summary #unitList {
  grid-area: units;
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-content: start;
  max-height: 74px;
  overflow: auto;
}

.selected-summary .unit-card {
  padding: 8px;
}

.selected-summary .unit-card header {
  grid-template-columns: 1fr auto;
}

.selected-summary .unit-bars {
  font-size: 12px;
}

.selected-summary #selectedBattle {
  grid-column: 1 / -1;
  margin: 0;
}

.map-wrap {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0f1716;
}

#map {
  width: 100%;
  height: 100%;
  display: block;
}

#units {
  pointer-events: auto;
}

#airSeaAssets {
  pointer-events: none;
}

.sea {
  fill: #8fcfdb;
}

.coast {
  fill: #cfe8c9;
  stroke: #9ac69c;
  stroke-width: 3;
}

.map-detail {
  pointer-events: none;
}

.real-map-base {
  pointer-events: none;
}

.normandy-boundary {
  fill: rgba(198, 231, 199, 0.18);
  stroke: rgba(224, 89, 73, 0.78);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 5;
}

.regional-road {
  fill: none;
  stroke: rgba(135, 159, 167, 0.42);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.major-road {
  stroke: rgba(129, 151, 165, 0.62);
  stroke-width: 5.2;
}

.minor-road {
  stroke: rgba(116, 144, 145, 0.34);
  stroke-width: 2.4;
  stroke-dasharray: 7 7;
}

.sea-label {
  fill: rgba(33, 85, 99, 0.52) !important;
  font-family: var(--font);
  font-size: 19px !important;
  font-style: normal !important;
  font-weight: 800;
  letter-spacing: 0;
  transform: rotate(-14deg);
  transform-origin: 304px 93px;
}

.town-labels circle {
  fill: #f7f6ee;
  stroke: rgba(53, 66, 56, 0.72);
  stroke-width: 2;
}

.town-labels text {
  fill: rgba(30, 39, 34, 0.82) !important;
  font-family: var(--font);
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(241, 244, 227, 0.82);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.route-shields rect {
  fill: #d96e68;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 2;
}

.route-shields text {
  fill: #fff7ef !important;
  font-family: var(--font);
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  stroke: none;
}

.terrain-surface {
  pointer-events: none;
}

.terrain-surface path {
  stroke-width: 1;
}

.terrain-plain {
  fill: rgba(185, 219, 170, 0.28);
  stroke: rgba(113, 153, 105, 0.18);
}

.terrain-bocage {
  fill: rgba(122, 174, 118, 0.32);
  stroke: rgba(70, 127, 76, 0.2);
}

.terrain-marsh {
  fill: rgba(91, 174, 159, 0.3);
  stroke: rgba(50, 129, 125, 0.3);
  stroke-dasharray: 8 8;
}

.terrain-upland {
  fill: rgba(166, 188, 138, 0.28);
  stroke: rgba(117, 139, 93, 0.2);
}

.terrain-valley {
  fill: rgba(96, 176, 164, 0.22);
  stroke: rgba(62, 147, 154, 0.24);
}

.map-detail text {
  fill: rgba(44, 62, 48, 0.62);
  font-family: Georgia, serif;
  font-size: 20px;
  font-style: italic;
  letter-spacing: 0;
}

.river {
  fill: none;
  stroke: rgba(60, 142, 173, 0.42);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.river-major {
  stroke: rgba(42, 133, 169, 0.55);
  stroke-width: 5;
}

.river-label-path {
  fill: none;
  stroke: none;
}

.river-name {
  fill: #16576d !important;
  font-family: var(--font);
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(234, 245, 235, 0.94);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.contour {
  fill: none;
  stroke: rgba(93, 121, 83, 0.28);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 7;
}

.contour-major {
  stroke: rgba(77, 110, 72, 0.42);
  stroke-width: 3.1;
  stroke-dasharray: none;
}

.contour-minor {
  stroke: rgba(104, 131, 92, 0.22);
  stroke-width: 1.8;
  stroke-dasharray: 7 9;
}

.beach-ridge {
  stroke: rgba(111, 133, 87, 0.32);
  stroke-width: 2.4;
  stroke-dasharray: 14 8;
}

.hydro-overlay {
  pointer-events: none;
}

.river-overlay {
  fill: none;
  stroke: rgba(16, 75, 92, 0.68);
  stroke-width: 5.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
  paint-order: stroke;
}

.river-overlay::after {
  content: "";
}

.river-overlay {
  filter: drop-shadow(0 0 1px rgba(242, 255, 255, 0.6));
}

.river-overlay-major {
  stroke-width: 6.8;
}

.hydro-overlay .river-overlay {
  stroke: rgba(48, 151, 183, 0.72);
}

.hydro-overlay .river-overlay-major {
  stroke: rgba(38, 145, 183, 0.86);
}

.terrain-label {
  fill: rgba(51, 73, 51, 0.58) !important;
  font-size: 15px !important;
  stroke: rgba(235, 245, 221, 0.7);
  stroke-width: 3px;
  paint-order: stroke;
}

.road {
  fill: none;
  stroke: rgba(139, 151, 118, 0.44);
  stroke-width: 3.2;
  stroke-dasharray: 10 7;
  stroke-linecap: round;
}

.connection {
  stroke: rgba(41, 59, 44, 0.26);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.45;
}

.region {
  cursor: pointer;
  filter: url(#softShadow);
}

.region-area {
  stroke: #0e120d;
  stroke-width: 2.5;
  fill-opacity: 0.68;
}

.region:hover .region-area {
  fill-opacity: 0.88;
}

.control-halo {
  opacity: 0.18;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 8;
}

.control-badge {
  pointer-events: none;
}

.control-badge rect {
  stroke: #11140f;
  stroke-width: 2;
}

.control-badge text {
  fill: #f4f1df;
  font-size: 11px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #11140f;
  stroke-width: 2px;
}

.region-label-group {
  pointer-events: none;
}

.region-label-group text {
  fill: #f1f1e6;
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #11140f;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.region.selected .region-area {
  stroke: var(--accent);
  stroke-width: 5;
}

.region.order-source .region-area {
  stroke: #f1e5a1;
}

.unit-box {
  stroke: #d8dccd;
  stroke-width: 2;
}

.unit-token {
  cursor: pointer;
}

.unit-token text,
.unit-type-icon {
  pointer-events: none;
}

.unit-token.selected .unit-box {
  stroke: #f1e5a1;
  stroke-width: 4;
}

.unit-token.selected .unit-type-icon rect {
  stroke: #f1e5a1;
  stroke-width: 3;
}

.unit-box.allied-unit {
  fill: #244a70;
}

.unit-box.axis-unit {
  fill: #6b332d;
}

.unit-box.enemy-unit {
  stroke: #ffd0c8;
  stroke-width: 3;
}

.unit-label {
  fill: #e9eadf;
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
}

.unit-strength {
  fill: #d9ddc9;
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
}

.unit-type-icon {
  pointer-events: none;
}

.unit-type-icon rect {
  stroke: #10140f;
  stroke-width: 2;
}

.unit-type-glyph {
  fill: #10140f;
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  letter-spacing: 0;
}

.asset {
  pointer-events: auto;
  cursor: pointer;
  filter: url(#softShadow);
}

.asset rect {
  stroke: #e5e1c7;
  stroke-width: 2;
}

.asset.allied-asset rect {
  fill: #1f5278;
}

.asset.axis-asset rect {
  fill: #73352e;
}

.asset.selected rect {
  stroke: var(--accent);
  stroke-width: 4;
}

.asset text {
  fill: #f3f0dd;
  font-size: 11px;
  font-weight: 900;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: #11140f;
  stroke-width: 2px;
}

.asset-line {
  stroke: rgba(214, 193, 122, 0.72);
  stroke-width: 3;
  stroke-dasharray: 9 6;
  pointer-events: none;
}

.battle-marker {
  pointer-events: none;
}

.battle-marker circle {
  fill: rgba(207, 117, 109, 0.26);
  stroke: #ffd0c8;
  stroke-width: 4;
  stroke-dasharray: 8 5;
}

.battle-marker rect {
  fill: #351815;
  stroke: #ffd0c8;
  stroke-width: 2;
}

.battle-marker text {
  fill: #ffe5df;
  font-size: 13px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #11140f;
  stroke-width: 3px;
}

.plan-arrow {
  stroke: #d6c17a;
  stroke-width: 5;
  fill: none;
  marker-end: url(#arrowHead);
  opacity: 0.86;
  cursor: pointer;
}

.plan-arrow.axis-plan {
  stroke: #d98578;
}

.plan-arrow.own-plan:hover {
  stroke-width: 8;
}

.stat-list,
.resource-list,
.objective-list,
.score-board,
.plan-list,
.unit-list,
.battle-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.stat,
.objective,
.score-item,
.plan-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: #12160f;
}

.support-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: #12160f;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.support-choice.selected {
  border-color: var(--accent);
  background: #252515;
}

.support-choice:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.support-choice strong,
.support-choice small {
  display: block;
}

.support-choice small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.support-choice b {
  color: var(--accent);
  font-size: 18px;
}

.plan-card {
  align-items: center;
}

.plan-card strong {
  display: block;
  font-size: 13px;
}

.plan-card small {
  color: var(--muted);
}

.plan-card button {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid #68433d;
  background: #2b1715;
  color: #f1c0ba;
  cursor: pointer;
}

.empty-state {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.unit-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.unit-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  background: #12160f;
}

.unit-card.enemy {
  border-color: #7f4d47;
  background: #211513;
}

.unit-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.unit-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.unit-card strong {
  font-size: 13px;
}

.unit-card small {
  color: var(--muted);
}

.unit-bars {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.battle-card,
.battle-detail {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #7f4d47;
  background: #211513;
  color: var(--text);
  text-align: left;
}

.battle-card {
  width: 100%;
  cursor: pointer;
}

.battle-card strong,
.battle-detail strong {
  font-size: 13px;
}

.battle-card small,
.battle-detail small {
  color: var(--muted);
  line-height: 1.4;
}

.battle-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0f130d;
}

.battle-meter span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.stat span,
.score-item span {
  color: var(--muted);
}

.objective {
  display: block;
}

.objective strong {
  display: block;
  margin-bottom: 4px;
}

.objective small {
  color: var(--muted);
}

.log-section {
  min-height: 220px;
  padding: 12px 14px;
}

.log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-height: 240px;
  overflow: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.log-entry {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.result-modal,
.tutorial-modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 10, 7, 0.72);
}

.result-modal.hidden,
.tutorial-modal.hidden {
  display: none;
}

.result-card,
.tutorial-card {
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid var(--accent);
  background: #171b13;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

.tutorial-card {
  width: min(980px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
}

.tutorial-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.tutorial-head h2 {
  margin: 8px 0 0;
  font-size: 30px;
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tutorial-card article,
.tutorial-section,
.tutorial-command-list div {
  border: 1px solid var(--line);
  background: #12160f;
}

.tutorial-card article {
  padding: 12px;
}

.tutorial-card h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 16px;
}

.tutorial-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.tutorial-section {
  margin-top: 12px;
  padding: 12px;
}

.tutorial-command-list {
  display: grid;
  gap: 8px;
}

.support-guide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tutorial-command-list div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  padding: 10px;
}

.tutorial-command-list strong {
  color: var(--text);
}

.tutorial-command-list span {
  color: var(--muted);
  line-height: 1.45;
}

.result-card h2 {
  margin: 8px 0 10px;
  font-size: 34px;
}

.result-card p {
  color: var(--muted);
  line-height: 1.6;
}

.result-stats {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.result-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 980px) {
  .topbar {
    height: auto;
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }

  .setup-screen,
  .game-shell {
    grid-template-columns: 1fr;
  }

  .game-shell {
    grid-template-rows: auto minmax(640px, 1fr) auto;
  }

  .center-column {
    grid-template-rows: auto 60vh auto;
  }

  .faction-summary,
  .selected-summary,
  .selected-summary #regionStats {
    grid-template-columns: 1fr;
  }

  .selected-summary {
    grid-template-areas:
      "title"
      "stats"
      "actions"
      "units";
  }

  .faction-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-grid,
  .support-guide,
  .tutorial-command-list div {
    grid-template-columns: 1fr;
  }
}