@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. */
body.mode-dusk .map-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: #b98a4a; mix-blend-mode: multiply; opacity: .17;
}
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: #0b1a24; mix-blend-mode: multiply; opacity: .3;
}
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; }
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; }
}