@media (max-width: 800px) {
  body { min-width: 0; }
  .app-shell { width: 100%; }
  .topbar { height: 64px; padding: 0 17px; }
  .brand-lockup { min-width: 0; }
  .brand-lockup h1 { font-size: 20.9px; }
  .topbar-center { display: none; }
  .topbar-actions { margin-left: auto; }
  .dashboard-grid { display: flex; flex-direction: column; min-height: 0; }
  .map-stage { order: 1; }
  .left-panel { order: 2; border-width: 1px 0 0; }
  .right-panel { order: 3; border-width: 1px 0 0; }
  .map-toolbar { height: 78px; padding: 20px 17px 14px; }
  .map-toolbar h2 { font-size: 19.1px; }
  .map-controls { flex-shrink: 0; }
  .map-wrap { height: 62vw; min-height: 350px; margin: 0 10px; }
  .map-footer { height: auto; min-height: 52px; padding: 11px 17px; gap: 10px; flex-wrap: wrap; }
  .map-legend { left: 10px; bottom: 10px; gap: 8px; padding: 7px 8px; font-size: 11px; }
  .region-tooltip { right: 10px; bottom: 10px; min-width: 145px; padding: 8px 9px; }
  .left-panel, .right-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .left-panel .panel-section, .right-panel .panel-section { min-width: 0; }
  .left-panel .ruler-section, .right-panel .turn-section,
  .left-panel .grow-section, .right-panel .log-section { grid-column: 1 / -1; }
  .panel-section { padding: 21px 17px; }
  .app-footer { height: auto; min-height: 40px; padding: 10px 17px; gap: 12px; flex-wrap: wrap; }
  .app-footer span:nth-child(2) { margin-left: auto; }
  .app-footer span:last-child { display: none; }
}
@media (max-width: 480px) {
  .left-panel, .right-panel { display: block; }
  .map-toolbar .eyebrow { font-size: 10px; }
  .map-toolbar h2 { font-size: 17.3px; }
  .map-controls { transform: scale(.9); transform-origin: right center; }
  .map-wrap { height: 72vw; min-height: 330px; }
  .map-legend { right: 10px; left: auto; bottom: 10px; display: grid; gap: 5px; }
  .region-tooltip { left: 10px; right: auto; bottom: 10px; }
}

/* Command sidebar scrolls independently of the map. */
.right-panel { max-height: calc(100vh - 74px); overflow-y: auto; overflow-x: visible; scrollbar-color: #8cae9b #e4e9e1; scrollbar-width: thin; }
.right-panel::-webkit-scrollbar { width: 8px; }
.right-panel::-webkit-scrollbar-thumb { background: #8cae9b; border-radius: 4px; }
.map-view-switcher { position: absolute; z-index: 4; top: 14px; left: 16px; display: flex; gap: 3px; padding: 4px; background: #f6f5ebdd; border: 1px solid #c4d3c4; box-shadow: 0 4px 14px #2645391c; }
.map-view { border: 0; padding: 8px 10px; background: transparent; color: #597368; cursor: pointer; font: 12.8px 'DM Mono', monospace; }
.map-view.active { background: #28534b; color: #f1f3e8; }
.sea-layer { transition: fill .35s ease; }
.land-underlay { pointer-events: none; }
.sea-current { fill: none; stroke: #d2eeee; stroke-width: 8; opacity: .45; stroke-dasharray: 28 18; animation: sea-flow 9s linear infinite; }
.continent-silhouettes { opacity: .62; pointer-events: none; }
.continent { fill: #b4c7a8; stroke: #eef3e8; stroke-width: 3; stroke-linejoin: round; }
.continent.main { fill: #a8bea0; }
.continent.east { fill: #c0c79d; }
.continent.south { fill: #aebf9b; }
.island-chain { fill: none; stroke: #dce8d5; stroke-width: 9; stroke-linecap: round; }
.map-grid { opacity: .16; pointer-events: none; }
.map-grid path { fill: none; stroke: #f4fff5; stroke-width: 1; stroke-dasharray: 3 9; }
.sea-labels text { fill: #467d84; opacity: .75; font: 12.8px 'DM Mono', monospace; letter-spacing: 1px; }
.trade-route { opacity: 0; transition: opacity .3s ease; }
.trade-route path { fill: none; stroke: #d39a4d; stroke-width: 3; stroke-dasharray: 8 9; animation: route-flow 1.2s linear infinite; }
.map-stage[data-map-mode="terrain"] .sea-layer { fill: #9bb9b4; }
.map-stage[data-map-mode="terrain"] .territory path { filter: sepia(.25) saturate(.7); }
.map-stage[data-map-mode="terrain"] .road { opacity: .9; stroke-width: 4; }
.map-stage[data-map-mode="seas"] .territory { opacity: .35; }
.map-stage[data-map-mode="seas"] .sea-layer { fill: #568f9c; }
.map-stage[data-map-mode="seas"] .sea-labels text { fill: #e8ffff; opacity: .9; }
.map-stage[data-map-mode="seas"] .sea-current { opacity: .8; }
.map-stage[data-map-mode="trade"] .trade-route { opacity: 1; }
.map-stage[data-map-mode="trade"] .trade-node circle { fill: #f0c879; }
.map-stage[data-map-mode="war"] .territory-rival path { animation: hostile-pulse 1.5s ease-in-out infinite; }
.map-stage[data-map-mode="war"] .road { opacity: 1; stroke: #bb6259; stroke-width: 4; }
.map-stage[data-map-mode="war"] .trade-route { opacity: .45; }
.map-toolbar { align-items: flex-start; }
.play-hint { margin: 6px 0 0; color: #718078; font-size: 12.8px; }
@media (max-width: 800px) {
  .dashboard-grid { display: flex; }
  .play-hint { font-size: 11.9px; }
}

.lighting-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid #527068; border-radius: 4px; }
.light-mode { width: 24px; height: 23px; border: 0; border-radius: 2px; background: transparent; color: #a9c2b1; cursor: pointer; font-size: 15.5px; }
.light-mode.active { background: #d99f50; color: #203b31; }
.play-hint { font-family: Manrope, sans-serif; }
.territory-tribe path { fill: #a68972; stroke-dasharray: 5 2; }
.territory-occupied path { fill: #b56f65; stroke: #f3eee1; stroke-width: 4; animation: occupation-wave 2.4s ease-in-out infinite; }
.territory-free path { fill: #b8c8a1; stroke: #f3eee1; stroke-width: 3; stroke-dasharray: 8 3; }
.territory-free text { fill: #4e6951; }
.kingdom-border { fill: none; stroke: #e9f1dd; stroke-width: 3; stroke-dasharray: 4 4; opacity: .9; pointer-events: none; }
.territory-tribe text { fill: #604c40; }
.legend-dot.tribe { background: #a68972; }
.puppet-slice { fill: #bc9e73; opacity: .95; stroke: #f3eee1; stroke-width: 3; stroke-dasharray: 7 3; animation: puppet-breathe 2.8s ease-in-out infinite; }
.puppet-label { fill: #513f35; font: 700 12.8px 'DM Mono', monospace; letter-spacing: 1px; text-anchor: middle; }
.live-status { display: flex; align-items: center; gap: 9px; color: #315b4c; font-size: 16.4px; }
.live-status .status-dot { width: 9px; height: 9px; }
.status-copy { margin: 10px 0 0; color: #718078; font-size: 13.7px; line-height: 1.5; }
.action-response { display: flex; align-items: flex-start; gap: 9px; padding: 10px; margin: 0 0 13px; border-left: 3px solid #5f9b78; background: #dcebdd; animation: response-in .25s ease-out; }
.global-response { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 17px; border-bottom: 1px solid #c7dcc9; background: #dcebdd; animation: response-in .25s ease-out; }
.global-response.warning { border-color: #e1b7a6; background: #f2ded3; }
.global-response strong { display: block; font-size: 14.6px; }
.global-response p { margin: 3px 0 0; color: #60766b; font-size: 12.8px; line-height: 1.45; }
.action-response.warning { border-color: #c77d60; background: #f2ded3; }
.response-mark { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #5f9b78; color: white; font: 700 14.6px 'DM Mono', monospace; }
.warning .response-mark { background: #c77d60; }
.action-response strong { display: block; font-size: 12.8px; }
.action-response p { margin: 3px 0 0; color: #60766b; font-size: 11.9px; line-height: 1.45; }
.realm-score { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; margin: 17px 0 14px; padding: 13px 0; border-block: 1px solid #d8ded4; }
.realm-score>div { padding-left: 10px; border-left: 1px solid #d8ded4; }
.realm-score>div:first-child { padding-left: 0; border-left: 0; }
.score-label, .people-heading span { display: block; color: #84928a; font: 11.9px 'DM Mono', monospace; letter-spacing: 1px; }
.realm-score strong { display: block; color: #28534b; font: 800 29px 'Playfair Display', serif; line-height: 1.05; }
.realm-score small { color: #73837a; font-size: 12.8px; }
.people-score { padding: 12px; background: #edf3e9; border: 1px solid #d5e3d4; }
.people-heading { display: flex; align-items: center; justify-content: space-between; }
.people-heading strong { color: #327258; font: 700 18.2px 'DM Mono', monospace; }
.people-score .meter { margin: 9px 0 7px; }
.people-score p { margin: 0; color: #718078; font-size: 12.8px; }
.people-score p strong { color: #3b6756; }
.command-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #d8ded4; background: #f7f6f0; }
.command-tab { min-height: 48px; border: 0; border-right: 1px solid #d8ded4; background: transparent; color: #789084; cursor: pointer; font: 12.8px Manrope; }
.kingdom-tab { background: #f0ead5; color: #83652d; }
.command-tab:last-child { border-right: 0; }
.command-tab span { display: block; margin-top: 3px; }
.command-tab.active { color: #28534b; background: #e2eee1; box-shadow: inset 0 -3px #d69b50; }
.tab-panel.hidden { display: none; }
.tab-panel:not(.hidden) { position: fixed; z-index: 25; top: 92px; right: 24px; width: min(390px, calc(100vw - 48px)); max-height: calc(100vh - 120px); overflow-y: auto; background: #fbfaf6; border: 1px solid #cbd8cc; box-shadow: 0 18px 45px #19382b36; }
.popup-close { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 17px; border: 0; border-bottom: 1px solid #d8ded4; background: #f1f4ed; color: #547064; cursor: pointer; font: 600 13.7px Manrope; text-align: left; }
.popup-close span { color: #b26754; font-size: 23.6px; font-weight: 400; line-height: 12px; }
.popup-close:hover { background: #e4eee2; }
.right-panel.mode-task .focus-section, .right-panel.mode-task .log-section { display: none; }
.dispatch-list { max-height: 210px; overflow-y: auto; padding-right: 7px; scrollbar-color: #8cae9b #e4e9e1; scrollbar-width: thin; }
.dispatch-list::-webkit-scrollbar { width: 7px; }
.dispatch-list::-webkit-scrollbar-track { background: #e4e9e1; }
.dispatch-list::-webkit-scrollbar-thumb { background: #8cae9b; border-radius: 4px; }
.education-strip { display: flex; align-items: center; gap: 8px; padding: 9px 17px; border-bottom: 1px solid #d8ded4; background: #f7f6f0; }
.education-strip span, .army-overview span { color: #84928a; font: 11.9px 'DM Mono', monospace; letter-spacing: 1px; }
.education-strip strong { color: #326d58; font: 700 18.2px 'DM Mono', monospace; }
.education-strip small { color: #77877d; font-size: 12.8px; }
.army-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; margin-bottom: 4px; border-block: 1px solid #d8ded4; }
.army-overview div { border-left: 1px solid #d8ded4; padding-left: 9px; }
.army-overview div:first-child { border-left: 0; padding-left: 0; }
.army-overview strong { display: block; color: #28534b; font: 700 19.1px 'DM Mono', monospace; margin-top: 4px; }
.attack-strategies { display: flex; align-items: center; gap: 5px; margin: 0 0 12px; }
.attack-action { width: 100%; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 11px 10px; border: 1px solid #c47768; border-radius: 2px; background: #f3d8cf; color: #733f38; cursor: pointer; text-align: left; }
.attack-action>span:first-child { width: 18px; font-size: 20px; }
.attack-action strong { display: block; font-size: 14.6px; }
.attack-action small { display: block; margin-top: 3px; color: #95655b; font-size: 12.8px; }
.attack-action b { margin-left: auto; font-size: 20px; font-weight: 400; }
.attack-action:hover { background: #edc6ba; }
.attack-strategies>span { margin-right: auto; color: #84928a; font: 11.9px 'DM Mono', monospace; letter-spacing: 1px; }
.strategy { border: 1px solid #d5ddd3; border-radius: 2px; background: transparent; color: #718279; padding: 6px 7px; cursor: pointer; font: 12.8px Manrope; }
.strategy.active { border-color: #c59b58; background: #f1e5c8; color: #755c2d; }
.notification-button { position: relative; width: 30px; height: 30px; border: 1px solid #527068; border-radius: 50%; background: transparent; color: #d9a052; cursor: pointer; font: 700 16.4px Manrope; }
.notification-button span { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 2px 4px; border-radius: 8px; background: #c96f5e; color: white; font: 11.9px 'DM Mono', monospace; }
.notification-tray { position: fixed; z-index: 40; top: 63px; right: 20px; width: 290px; padding: 14px; border: 1px solid #9eb7a5; background: #fffdf6; color: #182a25; box-shadow: 0 12px 30px #243a2c40; }
.notification-tray>strong { display: block; padding-bottom: 9px; border-bottom: 1px solid #d8ded4; font-size: 14.6px; }
.critical-item { padding: 10px 0; border-bottom: 1px solid #e0e5dd; }
.critical-item strong { font-size: 13.7px; }
.critical-item p { margin: 3px 0 0; color: #75847b; font-size: 12.8px; line-height: 1.4; }
.defend-card, .alliance-card { padding: 11px 0; border-bottom: 1px solid #e0e5dd; }
.defend-card:last-child, .alliance-card:last-of-type { border-bottom: 0; }
.defend-card strong, .alliance-card strong, .frontier-row strong { font-size: 14.6px; }
.defend-card p, .alliance-card p, .frontier-intro, .frontier-row p { margin: 4px 0 8px; color: #75847b; font-size: 12.8px; line-height: 1.4; }
.defend-button, .wide-action, .invest-button { border: 1px solid #c3d8c4; border-radius: 2px; background: #e2eee1; color: #315e4c; padding: 8px 10px; cursor: pointer; font: 600 12.8px Manrope; }
.defend-button span, .wide-action span { margin-left: 8px; font-size: 17.3px; }
.alliance-card { display: flex; align-items: center; gap: 9px; }
.alliance-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #d8e9d7; color: #56816e; }
.alliance-state { margin-left: auto; color: #749481; font: 11.9px 'DM Mono', monospace; }
.wide-action { width: 100%; margin-top: 14px; }
.frontier-intro { margin-bottom: 12px; }
.frontier-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e0e5dd; }
.frontier-row p { margin-bottom: 0; }
.invest-button { padding: 7px 9px; background: #f1e6c8; border-color: #dec891; color: #775d2b; }
.kingdom-panel { min-height: 540px; }
.town-map { margin: 12px 0; background: #dbe8d6; border: 1px solid #c2d4c0; }
.town-map svg { width: 100%; display: block; }
.town-map text { fill: #486558; font: 700 11.9px 'DM Mono', monospace; letter-spacing: .8px; }
.town-road { fill: none; stroke: #b79666; stroke-width: 4; stroke-dasharray: 5 5; }
.town-road.broken { stroke: #c77d72; stroke-dasharray: 2 10; opacity: .7; }
.town-road.upgraded { stroke: #5c907a; stroke-width: 7; stroke-dasharray: none; animation: road-flow 2s linear infinite; }
.town-node { fill: #f3f1df; stroke: #49735f; stroke-width: 3; }
.town-node.capital { fill: #e3b263; stroke: #74552b; }
.town-actions, .domestic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0; }
.domestic-action { border: 1px solid #c7d9c5; background: #e4eee0; color: #315e4c; padding: 9px 8px; cursor: pointer; font: 600 12.8px Manrope; text-align: left; }
.domestic-action small { display: block; margin-top: 3px; color: #718579; font-size: 11.9px; font-weight: 400; }
.rules-box { margin-top: 14px; padding: 12px; background: #f0f3e8; border: 1px solid #d4dfd0; }
.rules-box label { display: block; color: #536e61; font: 11.9px 'DM Mono', monospace; letter-spacing: 1px; text-transform: uppercase; }
.rules-box textarea { width: 100%; margin: 8px 0; resize: vertical; border: 1px solid #c8d5c5; background: #fffef8; color: #263d34; padding: 8px; font: 13.7px Manrope; }
.rules-box p { margin: 8px 0 0; color: #718178; font-size: 12.8px; line-height: 1.4; }
.ai-council { margin-top: 14px; padding-top: 13px; border-top: 1px solid #d8ded4; }
.ai-council p { margin: 5px 0 10px; color: #6e7e74; font-size: 12.8px; line-height: 1.45; }
.ai-actions { display: flex; gap: 7px; }
.ai-actions .domestic-action { flex: 1; }
.war-room { position: fixed; z-index: 60; inset: 8vh 12vw; padding: 22px; background: #fbfaf6; border: 1px solid #b6cbb8; box-shadow: 0 25px 80px #112b234d; }
.war-room-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #d8ded4; padding-bottom: 14px; }
.war-room-head h2 { margin: 4px 0 0; color: #274b40; font: 700 25.4px 'Playfair Display', serif; }
.war-room-head .popup-close { width: 100px; border: 1px solid #d8ded4; }
.war-live { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 18px; color: #bd6257; font: 11.9px 'DM Mono', monospace; letter-spacing: 1px; }
.war-live i { width: 7px; height: 7px; border-radius: 50%; background: #cf6b5f; box-shadow: 0 0 0 5px #cf6b5f22; animation: live-pulse 1s ease-in-out infinite; }
.war-room-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 18px; }
.battle-scene { display: grid; grid-template-columns: 1fr .8fr 1fr; min-height: 176px; margin-top: 18px; overflow: hidden; background: #293e39; border: 1px solid #415f52; position: relative; }
.battle-lane { position: relative; min-width: 0; overflow: hidden; }
.friendly-lane { background: linear-gradient(110deg, #315d50, #557e68); }
.enemy-lane { background: linear-gradient(250deg, #81514e, #b7756a); }
.army-banner { position: absolute; top: 13px; left: 16px; color: #e2f0dc; font: 700 13.7px 'DM Mono', monospace; letter-spacing: 1px; }
.enemy-banner { left: auto; right: 16px; text-align: right; }
.army-banner span { display: block; margin-top: 4px; color: #b8d0bb; font-size: 11px; letter-spacing: 1px; }
.enemy-banner span { color: #f0c8bd; }
.formation { position: absolute; top: 71px; display: grid; grid-template-columns: repeat(4, 17px); gap: 11px; padding: 12px; }
.friendly-formation { left: 20%; animation: formation-advance 4s ease-in-out infinite alternate; }
.enemy-formation { right: 20%; animation: formation-hold 4s ease-in-out infinite alternate; }
.formation i { width: 12px; height: 19px; display: block; border-radius: 7px 7px 2px 2px; background: #dcebd2; box-shadow: 0 5px 0 #1c4036; }
.enemy-formation i { background: #f3d1c8; box-shadow: 0 5px 0 #713f3d; }
.battle-label { position: absolute; bottom: 16px; left: 16px; color: #c0d8c2; font: 12.8px 'DM Mono', monospace; }
.enemy-lane .battle-label { left: auto; right: 16px; color: #f2cec4; }
.battle-ground { position: relative; background: radial-gradient(ellipse at center, #627064 0, #3b514a 55%, #263a37 100%); overflow: hidden; }
.battle-line { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed #e2c27d99; }
.impact-zone { position: absolute; top: 73px; left: 50%; transform: translateX(-50%); width: 74px; height: 44px; border: 1px solid #e4c47c; border-radius: 50%; display: grid; place-items: center; background: #d59c5733; color: #f4d596; font: 11px 'DM Mono', monospace; animation: impact-pulse 1.8s ease-in-out infinite; }
.battle-smoke { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #c4cabb55; filter: blur(4px); animation: smoke-rise 3s ease-in-out infinite; }
.smoke-one { left: 26%; top: 114px; }.smoke-two { right: 25%; top: 104px; animation-delay: 1.2s; }
.tracer { position: absolute; width: 68px; height: 2px; background: linear-gradient(90deg, transparent, #f2d07a, transparent); transform-origin: left center; animation: tracer-fire 1.7s linear infinite; }
.tracer-one { left: 6%; top: 83px; transform: rotate(-18deg); }.tracer-two { right: 6%; top: 126px; transform: rotate(198deg); animation-delay: .85s; }
.battle-flash { position: absolute; left: 48%; top: 94px; width: 11px; height: 11px; border-radius: 50%; background: #ffd88b; box-shadow: 0 0 22px 9px #eeb76988; animation: muzzle-flash 1.7s ease-in-out infinite; }
.war-event { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 8px 10px; border-left: 2px solid #d59b4f; background: #1a312ddd; color: #d8e7d7; font-size: 12.8px; line-height: 1.3; }
.war-map { background: #dce8d5; border: 1px solid #c2d4c0; min-height: 240px; }
.war-map svg { width: 100%; height: 100%; min-height: 240px; }
.war-route { fill: none; stroke: #bd765f; stroke-width: 4; stroke-dasharray: 9 8; animation: route-flow 1.2s linear infinite; }
.army-marker { fill: #28534b; stroke: #f3eee1; stroke-width: 4; }
.army-marker.moving { animation: troop-move 3s ease-in-out infinite alternate; }
.target-marker { fill: #c77d72; stroke: #fff1e2; stroke-width: 4; }
.war-map text { fill: #486558; font: 700 12.8px 'DM Mono', monospace; letter-spacing: 1px; }
.war-map .route-label { fill: #a36555; font-size: 11.9px; }
.war-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.war-stats div { padding: 15px 12px; background: #edf3e9; border: 1px solid #d5e3d4; }
.war-stats span { display: block; color: #84928a; font: 11.9px 'DM Mono', monospace; letter-spacing: 1px; }
.war-stats strong { display: block; margin-top: 7px; color: #28534b; font: 800 25.4px 'Playfair Display', serif; }
.war-actions { display: flex; gap: 8px; margin-top: 18px; }
.war-command { border: 1px solid #c9d9c8; padding: 10px 15px; background: #f3f5ed; color: #567064; cursor: pointer; font: 600 13.7px Manrope; }
.war-command.active { background: #2d5b4d; color: white; border-color: #2d5b4d; }
.war-status { margin: 15px 0 0; color: #64796d; font-size: 14.6px; }
@keyframes route-flow { to { stroke-dashoffset: -34px; } }
@keyframes road-flow { to { stroke-dashoffset: -20px; } }
@keyframes sea-flow { to { stroke-dashoffset: -160px; } }
@keyframes hostile-pulse { 50% { filter: brightness(1.12) drop-shadow(0 0 8px #c86e5e99); } }
@keyframes occupation-wave { 50% { filter: brightness(1.13) drop-shadow(0 0 9px #d6a05b88); } }
@keyframes puppet-breathe { 50% { opacity: .68; stroke: #e8c27f; } }
@keyframes formation-advance { to { transform: translateX(28px); } }
@keyframes formation-hold { to { transform: translateX(-10px); } }
@keyframes impact-pulse { 50% { transform: translateX(-50%) scale(1.15); box-shadow: 0 0 24px #e9b96766; } }
@keyframes smoke-rise { 50% { transform: translateY(-20px) scale(1.35); opacity: .2; } }
@keyframes tracer-fire { 0% { opacity: 0; transform: translateX(0) rotate(-18deg) scaleX(.3); } 25% { opacity: 1; } 55% { opacity: .1; transform: translateX(105px) rotate(-18deg) scaleX(1); } 100% { opacity: 0; } }
@keyframes muzzle-flash { 0%, 68%, 100% { opacity: 0; transform: scale(.3); } 73% { opacity: 1; transform: scale(1.5); } 78% { opacity: 0; transform: scale(.5); } }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes troop-move { from { transform: translate(0, 0); } to { transform: translate(300px, -140px); } }
@keyframes response-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

body.mode-dusk { background: #d5d2c8; color: #2c302b; }
body.mode-dusk .app-shell { background: #e6e1d6; }
body.mode-dusk .map-stage { background: #d4d0c3; }
body.mode-dusk .sidebar { background: #eee9de; }
/* This used to be `filter: sepia(.18) brightness(.88) saturate(.8)` on the whole
   map. A filter over a continent of paths is re-evaluated every frame the view
   moves, which made panning at dusk visibly worse than panning at noon. A flat
   translucent wash over the top costs one composited rectangle instead.

   ...and then the wash was `mix-blend-mode: multiply`, which was the same
   mistake wearing different clothes, and cost more than the filter ever did.

   A blend has to READ ITS BACKDROP. That means the backdrop cannot be promoted
   to its own compositor layer, which means every animation underneath it — the
   sea swell, the weather drift, eight bobbing ships, six trade routes — stops
   being a cheap GPU transform and becomes a full CPU re-rasterisation of the
   entire map, 907 paths and 62,822 path points, at 60fps, forever. Night is the
   default mode, so this was every player, from the first frame, on an idle
   realm with nothing happening.

   Measured with `tools/idlecost.html`: 702 Mpx/s before, 32 Mpx/s after. A
   player on a fanless MacBook Air reported the machine getting hot and the game
   being "super laggy", and this was the whole of it.

   The replacement is plain alpha over black, which is not an approximation of
   multiply but an identity: multiplying by a colour C at opacity a leaves
   B * (1 - a(1 - C/255)), and compositing black at that same computed alpha
   leaves exactly the same thing. The colours below carry a few points of tint
   so the cast stays warm at dusk and cool at night; everything else is the
   arithmetic above.

   THE RULE: never put `mix-blend-mode` or `backdrop-filter` over the map. There
   is nothing either can do that is worth re-rasterising a continent for. */
body.mode-dusk .map-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: rgba(58, 34, 4, .105);
}
body.mode-dusk .topbar { background: #302f2a; }
body.mode-dusk .action-response { background: #d7e0d4; }

body.mode-night { background: #091110; color: #d8e2d8; }
body.mode-night .app-shell { background: #121d1c; }
body.mode-night .map-stage { background: #172522; }
body.mode-night .sidebar { background: #14201f; border-color: #2c403c; }
body.mode-night .map-wrap { border-color: #39504b; }
body.mode-night .map-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: rgba(2, 10, 14, .27);
}
body.mode-night .topbar { background: #07100f; }
body.mode-night .map-toolbar h2, body.mode-night .section-heading, body.mode-night .focus-title h3, body.mode-night .dispatch strong { color: #d8e5d8; }
body.mode-night .play-hint, body.mode-night .focus-copy, body.mode-night .dispatch p, body.mode-night .focus-stats span { color: #9db3a5; }
body.mode-night .map-footer, body.mode-night .app-footer { color: #8da498; background: #101b1a; }
body.mode-night .map-legend { background: #172723dd; border-color: #415b51; color: #c0d2c2; }
body.mode-night .region-tooltip { background: #071512; }
body.mode-night .action-response { background: #203b32; }
body.mode-night .action-response p { color: #adc7b5; }
body.mode-night .global-response { background: #203b32; border-color: #355a4b; }
body.mode-night .global-response p { color: #adc7b5; }
body.mode-night .realm-score { border-color: #2c403c; }
body.mode-night .realm-score>div { border-color: #2c403c; }
body.mode-night .realm-score strong { color: #cce3d0; }
body.mode-night .people-score { background: #1d342d; border-color: #355a4b; }
/* The note under the founding and building buttons.
   
   It carried the light theme's colours only - #eef3ec ground, #55665c text -
   and night is the DEFAULT mode, so it painted a white card in a dark sidebar
   directly under the first buttons a new player ever presses. Found by
   `tools/contrast.html`, which sweeps every visible element in each lighting
   mode for exactly this: a rule written once and never given its counterpart. */
body.mode-night .focus-detail { background: #1d342d; border-color: #355a4b; color: #a6bcae; }
body.mode-dusk .focus-detail { background: #e6ebe2; border-color: #ccd6c6; color: #4c5b52; }
body.mode-night .people-score p, body.mode-night .defend-card p, body.mode-night .alliance-card p, body.mode-night .frontier-intro, body.mode-night .frontier-row p { color: #a6bcae; }
body.mode-night .command-tabs { background: #10201d; border-color: #2c403c; }
body.mode-night .command-tab { border-color: #2c403c; color: #a5bcae; }
body.mode-night .command-tab.active { color: #d0e6d2; background: #203d33; }
body.mode-night .defend-card, body.mode-night .alliance-card, body.mode-night .frontier-row { border-color: #2c403c; }
body.mode-night .defend-button, body.mode-night .wide-action { background: #284d3e; border-color: #456f59; color: #d6ead7; }
body.mode-night .education-strip { background: #10201d; border-color: #2c403c; }
body.mode-night .education-strip strong, body.mode-night .army-overview strong { color: #cce3d0; }
body.mode-night .army-overview, body.mode-night .army-overview div { border-color: #2c403c; }
body.mode-night .strategy { border-color: #385048; color: #b3c9b8; }
body.mode-night .strategy.active { background: #5b4b2e; border-color: #b99555; color: #f2dfb7; }
body.mode-night .attack-action { background: #54332f; border-color: #a9685d; color: #f0d9d1; }
body.mode-night .attack-action small { color: #d6a69c; }
body.mode-night .notification-tray { background: #14221f; border-color: #385048; }
body.mode-night .war-room { background: #14221f; border-color: #385048; }
body.mode-night .war-room-head { border-color: #2c403c; }
body.mode-night .war-room-head h2, body.mode-night .war-stats strong { color: #d8e5d8; }
body.mode-night .war-map { background: #1c352e; border-color: #385048; }
body.mode-night .war-stats div { background: #203b32; border-color: #385048; }
body.mode-night .war-command { background: #1c352e; color: #bed5c3; border-color: #385048; }
body.mode-night .war-status { color: #abc1b0; }
body.mode-night .war-event { background: #0d211ddd; color: #c8dfcb; }
body.mode-night .kingdom-tab { background: #4e4328; color: #f0d9a0; }
body.mode-night .town-map { background: #1c352e; border-color: #385048; }
body.mode-night .town-map text { fill: #c3d8c5; }
body.mode-night .domestic-action { background: #284d3e; border-color: #456f59; color: #d6ead7; }
body.mode-night .domestic-action small { color: #abc1b0; }
body.mode-night .rules-box { background: #1b332c; border-color: #385048; }
body.mode-night .rules-box textarea { background: #10201d; border-color: #385048; color: #d8e5d8; }
body.mode-night .rules-box p, body.mode-night .ai-council p { color: #abc1b0; }
body.mode-night .battle-ground { background: radial-gradient(ellipse at center, #50645a 0, #263b36 60%, #182925 100%); }
body.mode-night .popup-close { background: #1b332c; border-color: #2c403c; color: #c0d6c4; }
body.mode-night .popup-close:hover { background: #26473c; }
body.mode-night .notification-tray>strong, body.mode-night .critical-item { border-color: #2c403c; color: #d8e5d8; }
body.mode-night .critical-item p { color: #a6bcae; }
body.mode-night .primary-action { background: #26473c; border-color: #416b58; color: #e1eee1; }
body.mode-night .secondary-action { border-color: #385048; color: #c5d6c7; }
body.mode-night .end-turn { background: #5b805f; color: #f1f5ea; }
body.mode-night .live-status { color: #b9d8bf; }
body.mode-night .status-copy { color: #a1b7a8; }
body.mode-night .puppet-label { fill: #f0e7cf; }

@media (max-width: 480px) {
  .lighting-switch { margin-right: 0; }
  .light-mode { width: 21px; }
  .action-response { margin-bottom: 10px; }
}

/* Keep the strategy surface readable at a glance. */
body { font-size: 17.3px; }
.topbar-center { font-size: 15.5px; }
.section-heading { font-size: 14.6px; }
.eyebrow { font-size: 12.8px; }
.map-toolbar h2 { font-size: 23.6px; }
.map-toolbar { height: 108px; }
.play-hint { font-size: 14.6px; }
.map-footer, .app-footer { font-size: 13.7px; }
.focus-title p, .focus-stats span, .turn-label, .dispatch-time { font-size: 12.8px; }
.focus-copy, .dispatch p { font-size: 13.7px; }
.focus-stats strong { font-size: 18.2px; }
.action-stack strong { font-size: 14.6px; }
.action-stack small { font-size: 12.8px; }
.dispatch strong { font-size: 14.6px; }
.region-tooltip strong { font-size: 14.6px; }
.region-tooltip span { font-size: 12.8px; }
.territory text { font-size: 14.6px; }
.territory .capital { font-size: 12.8px; }
.map-label text { font-size: 12.8px; }
body.mode-night .play-hint, body.mode-night .focus-copy, body.mode-night .dispatch p { color: #b5cbbb; }
@media (max-width: 480px) {
  .map-toolbar { height: 90px; }
  .map-toolbar h2 { font-size: 20.9px; }
  .play-hint { font-size: 13.7px; }
  .territory text { font-size: 13.7px; }
  .tab-panel:not(.hidden) { top: 74px; right: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 88px); }
  .notification-tray { top: 58px; right: 10px; width: calc(100vw - 20px); }
  .map-view-switcher { top: 8px; left: 8px; max-width: calc(100% - 16px); overflow-x: auto; }
  .map-view { padding: 7px 8px; font-size: 11.9px; }
  .war-room { inset: 5vh 10px; padding: 14px; overflow-y: auto; }
  .war-room-grid { grid-template-columns: 1fr; }
  .battle-scene { min-height: 220px; grid-template-columns: 1fr; grid-template-rows: 1fr .55fr 1fr; }
  .battle-ground { min-height: 70px; }
  .friendly-formation { left: 30%; }.enemy-formation { right: 30%; }
  .war-room-head h2 { font-size: 20px; }
  .war-live { margin-right: 8px; font-size: 11px; }
  .war-actions { flex-wrap: wrap; }
  .town-actions, .domestic-grid { grid-template-columns: 1fr; }
}