* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  overflow-x: hidden;              /* never a horizontal scrollbar */
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #22262e;
  color: #e8eaed;
  min-height: 100vh;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px;
  background: #171a20;
  border-bottom: 2px solid #0d0f13;
  flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 17px; letter-spacing: 0.3px; }
.dim { color: #9aa0a6; font-weight: 400; }

#hud { display: flex; gap: 10px; align-items: center; flex: 1; }
#hud span {
  background: #2b303a; padding: 5px 12px; border-radius: 6px;
  font-weight: 600; font-size: 14px;
}
#hud-player { color: #fff; }
#hud-funds { color: #ffd75e; }

.top-buttons { display: flex; gap: 8px; align-items: center; position: relative; }

/* "More" dropdown: admin tools out of the way, End Turn always reachable */
#tools-menu { position: relative; }
#tools-menu summary {
  list-style: none; cursor: pointer;
  background: #3a4150; border: 1px solid #4c5568; border-radius: 6px;
  padding: 7px 14px; font-weight: 600; user-select: none;
}
#tools-menu summary::-webkit-details-marker { display: none; }
#tools-menu[open] summary { background: #4a5468; }
.tools-drop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  display: flex; flex-direction: column; gap: 6px;
  background: #171a20; border: 1px solid #4c5568; border-radius: 8px;
  padding: 8px; min-width: 170px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.tools-drop button, .tools-drop select { width: 100%; text-align: left; }
.top-buttons select {
  font: inherit; font-weight: 600; font-size: 13px;
  background: #3a4150; color: #e8eaed;
  border: 1px solid #4c5568; border-radius: 6px;
  padding: 6px 6px; cursor: pointer;
}
#zoom-in, #zoom-out { padding: 7px 11px; }

button {
  font: inherit; cursor: pointer;
  background: #3a4150; color: #e8eaed;
  border: 1px solid #4c5568; border-radius: 6px;
  padding: 7px 14px; font-weight: 600;
}
button:hover:not(:disabled) { background: #4a5468; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: #e8703a; border-color: #b95425; }
button.primary:hover { background: #f5823f; }

/* ---------- layout ----------
   Desktop: board and sidebar stay SIDE BY SIDE — the canvas shrinks to
   the space the window actually has (window − sidebar − gaps) instead of
   shoving the sidebar below the map. Single column only on small screens. */
#layout {
  display: flex; gap: 16px; padding: 16px;
  align-items: flex-start; justify-content: center;
  flex-wrap: nowrap;
}

#board-wrap {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;                    /* let the canvas give way, never overflow */
}
#board {
  display: block;
  background: #4796d8;
  border: 3px solid #0d0f13;
  border-radius: 4px;
  image-rendering: pixelated;      /* keep the pixel art crisp, never smoothed */
  cursor: pointer;
  touch-action: none;              /* the canvas handles its own gestures */
  max-width: 100%;                 /* fill the flex slot, no horizontal scroll */
  height: auto;
}

#sidebar {
  flex: 0 0 250px;
  width: 250px;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 8px;      /* stays in view while the board scrolls */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
#sidebar section {
  background: #2b303a; border-radius: 8px; padding: 12px 14px;
  font-size: 13px; line-height: 1.55;
}
#sidebar h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #9aa0a6; margin-bottom: 6px;
}
.info-title { font-weight: 700; font-size: 15px; }
.dmg-preview { color: #ff8a75; font-weight: 700; margin-top: 4px; }
.dmg-preview.counter { color: #8ecbff; margin-top: 0; }

/* workshop (crafting bench) & profiles */
#upgrades-me { font-size: 14px; margin-bottom: 8px; }
.craft-area { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.craft-bench { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#craft-grid {
  display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 5px;
  background: #1b1f27; padding: 8px; border-radius: 10px; border: 1px solid #454b57;
}
.craft-cell {
  font-size: 22px; padding: 0; border-radius: 8px;
  background: #2b303a; border: 1px dashed #4c5568;
}
.craft-cell:hover { background: #39404e; }
#craft-palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#craft-palette button { padding: 6px 10px; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
#craft-palette button.active { background: #4a5468; border-color: #9db1d8; }
.resource-pixel-sprite {
  display: inline-block; width: 24px; height: 24px; flex: 0 0 auto;
  background-image: var(--resource-sprite); background-size: 400% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; vertical-align: middle;
  animation: resource-pixel-frames .72s linear infinite;
}
.craft-cell .resource-pixel-sprite { width: 40px; height: 40px; }
.book-pattern-row { display: flex; justify-content: center; height: 17px; }
.book-pattern .resource-pixel-sprite { width: 17px; height: 17px; }
.book-pattern-empty { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; }
@keyframes resource-pixel-frames {
  0%, 24.99% { background-position: 0 0; }
  25%, 49.99% { background-position: 33.333% 0; }
  50%, 74.99% { background-position: 66.666% 0; }
  75%, 100% { background-position: 100% 0; }
}
#craft-out { min-height: 22px; font-size: 14px; text-align: center; }
#craft-btn { width: 100%; }
#craft-book {
  flex: 1; min-width: 240px; max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.book-row {
  display: flex; gap: 10px; align-items: center;
  background: #232833; border-radius: 8px; padding: 6px 10px;
}
.book-row.owned { outline: 1px solid #3f9a6c; }
.book-pattern {
  font-size: 11px; line-height: 1.25; text-align: center; min-width: 52px;
  font-family: "Consolas", monospace; color: #b9c2cf;
}
.book-info { flex: 1; font-size: 13px; line-height: 1.35; }

/* replay bar */
#replay-bar {
  display: flex; gap: 6px; align-items: center;
  background: #171a20; border: 1px solid #454b57; border-radius: 8px;
  padding: 6px 10px; margin-bottom: 8px;
}
#replay-bar button { padding: 5px 11px; }
#replay-label { flex: 1; font-weight: 600; }

/* Always-visible local AI playtest controls.  The full lab still exists for
   feedback/export, but common hot-swap work should not be hidden in Tools. */
.ai-quick-bar {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  background: #171d1b; border: 1px solid #3f5b53; border-radius: 8px;
  padding: 7px 9px; margin-bottom: 8px;
}
.ai-quick-title { white-space: nowrap; margin-right: 2px; }
.ai-quick-field {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #aebbb7;
}
.ai-quick-field select {
  min-height: 31px; padding: 4px 7px; max-width: 235px;
  background: #222a28; color: #edf5f2; border: 1px solid #465550; border-radius: 6px;
}
.ai-quick-controller-field { flex: 1 1 250px; }
.ai-quick-controller-field select { flex: 1; min-width: 180px; }
.ai-quick-bar button { padding: 6px 9px; white-space: nowrap; }
.ai-quick-status { flex: 1 1 100%; min-width: 220px; font-size: 12px; }
.ai-quick-bar.is-busy { opacity: .82; }
@media (pointer: coarse) {
  .ai-quick-bar button, .ai-quick-bar select { min-height: 44px; font-size: 14px; }
  .ai-quick-field { font-size: 13px; }
}
@media (max-width: 700px) {
  .ai-quick-field, .ai-quick-controller-field { flex: 1 1 100%; }
  .ai-quick-field select { flex: 1; max-width: none; min-width: 0; }
  .ai-quick-bar button { flex: 1 1 auto; }
}

/* macro orders bar */
#macro-order-btn.active {
  background: #255180; border-color: #5da4e8; color: #fff;
  box-shadow: 0 0 8px rgba(93, 164, 232, 0.45);
}
#macro-bar {
  display: flex; flex-direction: column; gap: 8px;
  background: #181d26; border: 1.5px solid #3c5478; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.macro-row {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.macro-title {
  font-weight: 700; font-size: 14px; color: #e2e8f0; display: flex; align-items: center; gap: 6px;
}
.macro-status {
  font-size: 12.5px; color: #94a3b8; flex: 1; min-width: 180px;
}
.macro-btn-group {
  display: flex; gap: 6px; align-items: center;
}
.macro-stances {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.macro-stance-label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500;
  padding: 5px 9px; background: #232936; border: 1px solid #3b4559; border-radius: 6px;
  cursor: pointer; user-select: none;
}
.macro-stance-label:has(input:checked) {
  background: #23436d; border-color: #4f87c9; color: #fff;
}
.macro-stance-label input { margin: 0; cursor: pointer; }
.macro-actions {
  display: flex; gap: 8px; align-items: center;
}
.secondary-select {
  background: #232936; color: #e2e8f0; border: 1px solid #3b4559; border-radius: 6px;
  padding: 5px 8px; font-size: 13px;
}
.macro-unit-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
  justify-content: flex-start;
  gap: 12px;
}
.macro-unit-focus-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}
.macro-unit-focus-label {
  font-size: 13px;
  color: #fbbf24;
  font-weight: 600;
  display: flex;
  align-items: center;
}
#macro-unit-focus {
  flex: 1;
  max-width: 420px;
}
.macro-unit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.macro-replay-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  background: #232936;
  border: 1px solid #3b4559;
  border-radius: 6px;
}
.macro-replay-label input {
  margin: 0;
  cursor: pointer;
}
.macro-replay-label:has(input:checked) {
  background: #1e3a5f;
  border-color: #38bdf8;
  color: #fff;
}
.macro-ghost-menu {
  position: absolute;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 8px;
  min-width: 175px;
  backdrop-filter: blur(8px);
  pointer-events: auto;
  transform: translate(-50%, -100%);
  margin-top: -12px;
}
.macro-ghost-title {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  padding: 2px 4px 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2px;
  text-align: center;
}
.macro-gm-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #f1f5f9;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-height: 38px;
  transition: background 0.15s, border-color 0.15s;
}
.macro-gm-btn:hover, .macro-gm-btn:active {
  background: #334155;
  border-color: #38bdf8;
}
.macro-gm-btn.danger {
  color: #fca5a5;
}
.macro-gm-btn.danger:hover, .macro-gm-btn.danger:active {
  background: #7f1d1d;
  border-color: #ef4444;
}
#replays-list { display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow-y: auto; }
.profile-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.profile-table th, .profile-table td { padding: 5px 10px; text-align: right; }
.profile-table td:first-child { text-align: left; color: #9aa0a6; }
.profile-table tr:nth-child(even) { background: rgba(255,255,255,0.04); }
.profile-table tr.derived td { border-top: 1px solid #454b57; font-weight: 700; }
#login-pass {
  font: inherit; padding: 9px 12px; border-radius: 6px; width: 100%;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568;
}

/* commanders panel */
#co-panel .co-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 5px; border-radius: 4px;
}
#co-panel .co-row.current { background: rgba(255,255,255,0.08); }
#co-panel .co-row.dead { opacity: 0.4; text-decoration: line-through; }
#co-panel .co-name { font-weight: 700; }
#co-panel .co-co { flex: 1; text-align: right; }
#co-panel .co-charge { min-width: 74px; text-align: right; }
#co-panel .stars { color: #ffd75e; letter-spacing: 1px; }
.dmg-preview.counter { color: #ffc36e; }

/* ---------- floating menus ---------- */
#action-menu, #build-menu {
  position: absolute; z-index: 20;
  display: none; flex-direction: column; gap: 2px;
  background: #171a20ee; border: 1px solid #4c5568; border-radius: 8px;
  padding: 5px; min-width: 120px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
#action-menu button, #build-menu button {
  text-align: left; padding: 6px 10px; border: none; background: transparent;
  border-radius: 5px; display: flex; justify-content: space-between; gap: 10px;
}
#action-menu button:hover, #build-menu button:hover:not(:disabled) { background: #3a4150; }
#action-menu .sub { color: #9aa0a6; font-weight: 400; }
#build-menu { min-width: 180px; max-height: 420px; overflow-y: auto; }
#build-menu .bm-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #9aa0a6; padding: 4px 10px 6px;
}
.bm-cost { color: #ffd75e; }
button:disabled .bm-cost { color: inherit; }

/* ---------- banner ---------- */
#banner {
  position: absolute; z-index: 15;
  top: 42%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
  padding: 12px 36px; border-radius: 10px;
  font-size: 24px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
#banner.show { animation: bannerpop 1.6s ease forwards; }
@keyframes bannerpop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  20%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* CO dialogue is part of the save, so it also appears in replays. */
.co-speech {
  position: absolute; left: 14px; bottom: 14px; z-index: 18;
  display: flex; align-items: center; gap: 10px; width: min(390px, calc(100% - 28px));
  padding: 10px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px;
  background: rgba(13,28,29,.95); box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  color: #eef5f1;
}
.co-speech.show { opacity: 1; transform: translateY(0); }
.co-speech img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.co-speech img[src$=".svg"] { image-rendering: auto; }
.co-speech strong { color: #ffe08a; }
.co-speech p { margin: 3px 0 0; line-height: 1.3; color: #eef5f1; }
#ai-comms { display: grid; gap: 8px; }
.ai-message { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: start; }
.ai-message img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.ai-message img[src$=".svg"] { image-rendering: auto; }
.ai-message p { margin: 2px 0; font-size: 12px; line-height: 1.35; }
.ai-message small { opacity: .65; }
#campaign-objective-progress { margin-top: 7px; color: #ffe08a; font-weight: 700; }
.campaign-card { padding: 16px; margin: 10px 0; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; }
.campaign-stage { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.campaign-stage:first-of-type { border-top: 0; }
.campaign-stage p { margin: 3px 0; }
.compact-tabs { justify-content: flex-start; }
.match-history { max-height: 260px; overflow: auto; }
.match-history table { width: 100%; border-collapse: collapse; font-size: 12px; }
.match-history th, .match-history td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; }

/* ---------- Advance Wars Cutscene Dialogues ---------- */
.cutscene-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px; pointer-events: auto;
}
.cutscene-box {
  background: #1e232d; border: 2px solid #5a667f; border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
  display: flex; gap: 16px; padding: 16px; width: 680px; max-width: 95vw;
  animation: slideUpDialog 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
@keyframes slideUpDialog {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.cutscene-portrait-frame {
  flex-shrink: 0; width: 80px; height: 80px;
  background: #11141a; border: 2px solid #3c4558; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cutscene-portrait {
  width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated;
}
.cutscene-content {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.cutscene-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.cutscene-name {
  font-weight: 700; font-size: 16px; color: #ffd15c; text-transform: uppercase; letter-spacing: 0.5px;
}
.cutscene-counter {
  font-size: 12px; color: #8a94a6;
}
.cutscene-text {
  font-size: 15px; line-height: 1.45; color: #f0f2f5; margin: 0 0 10px 0;
}
.cutscene-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.cutscene-btn {
  font-size: 12px; padding: 4px 10px; border-radius: 4px; border: 1px solid #4a5468;
  background: #2b3240; color: #e8eaed; cursor: pointer;
}
.cutscene-btn.primary {
  background: #2b6cb0; border-color: #4299e1; color: #fff;
}

/* ---------- Campaign Hub & Saves ---------- */
.campaign-hub-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 12px; margin-bottom: 14px;
}
.campaign-nav-tabs {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.campaign-nav-tab {
  padding: 8px 14px; border-radius: 6px; background: #1a1e26; border: 1px solid #3c4558;
  color: #cdd4e0; cursor: pointer; font-size: 13px; font-weight: 600;
}
.campaign-nav-tab.active {
  background: #2b6cb0; border-color: #4299e1; color: #fff;
}
.campaign-saves-panel {
  background: #191c23; border: 1px solid #363e4f; border-radius: 8px; padding: 12px; margin-bottom: 16px;
}
.campaign-saves-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.campaign-save-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #232834; border: 1px solid #3a4456; border-radius: 6px; margin-bottom: 8px;
}
.campaign-save-item.current {
  border-color: #48bb78; background: #1c2b24;
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 12, 16, 0.75);
  display: flex; align-items: center; justify-content: center;
}
.panel {
  background: #2b303a; border: 1px solid #4c5568; border-radius: 12px;
  padding: 28px 32px; width: 360px; max-width: 92vw;
  max-height: 92vh; overflow-y: auto;   /* modals scroll inside themselves */
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.panel h2 { font-size: 22px; }
.panel label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 600; color: #9aa0a6;
}
.panel select {
  font: inherit; padding: 8px 10px; border-radius: 6px;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568;
}
.panel-buttons { display: flex; gap: 10px; margin-top: 6px; }
.panel-buttons button { flex: 1; padding: 10px; }
.panel input[type="number"], .panel input[type="text"], .panel input:not([type]) {
  font: inherit; padding: 8px 10px; border-radius: 6px;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568;
}
.check-row { flex-direction: row !important; align-items: center; gap: 8px !important; }

/* ---------- boot error ---------- */
#boot-error {
  margin: 16px; padding: 14px 18px; border-radius: 8px;
  background: #5b2320; border: 1px solid #a04a45; font-weight: 600;
}

/* ---------- wide panels (editor / wizard / saves) ---------- */
.panel.wide { width: 780px; max-width: 95vw; max-height: 92vh; overflow-y: auto; }

#editor-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
#editor-tabs button {
  padding: 5px 10px; font-size: 12px; border-radius: 6px 6px 0 0;
  background: #22262e; border-color: #3a4150;
}
#editor-tabs button.active { background: #171a20; border-color: #6c7890; color: #ffd75e; }
#editor-text {
  width: 100%; height: 46vh; resize: vertical;
  font: 12.5px/1.5 Consolas, "Cascadia Mono", monospace;
  background: #171a20; color: #d7e3f4; border: 1px solid #4c5568; border-radius: 0 6px 6px 6px;
  padding: 10px; white-space: pre; tab-size: 4;
}

.wz-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.wz-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa0a6; font-weight: 600; }
.wz-grid input, .wz-grid select {
  font: inherit; padding: 6px 8px; border-radius: 6px;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568; min-width: 0;
}
.wz-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #9aa0a6; }
.wz-abilities { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wz-abilities .check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.ue-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.ue-preview-col label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa0a6; font-weight: 600; margin-bottom: 8px; }
.ue-preview-col select { font: inherit; padding: 6px 8px; border-radius: 6px; background: #171a20; color: #e8eaed; border: 1px solid #4c5568; }
.ue-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ue-preview-grid figure { margin: 0; text-align: center; }
.ue-preview-grid canvas {
  width: 96px; height: 96px; image-rendering: pixelated;
  background: repeating-conic-gradient(#2a2f3a 0 25%, #22262e 0 50%) 0 0 / 16px 16px;
  border: 1px solid #4c5568; border-radius: 6px;
}
.ue-preview-grid figcaption { font-size: 11px; color: #9aa0a6; margin-top: 4px; }
.ue-form-col { min-width: 0; }
.ue-dmg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ue-dmg-cols h4 { margin: 4px 0; font-size: 12px; color: #9aa0a6; }
.ue-dmg { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.ue-dmg label { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 6px; font-size: 12px; }
.ue-dmg input { font: inherit; padding: 3px 6px; border-radius: 6px; background: #171a20; color: #e8eaed; border: 1px solid #4c5568; min-width: 0; }

.save-input-row { display: flex; gap: 10px; }
.save-input-row input { flex: 1; }
#saves-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.save-row {
  display: flex; align-items: center; gap: 10px;
  background: #171a20; border: 1px solid #3a4150; border-radius: 6px; padding: 8px 12px;
}
.save-row .save-name { flex: 1; font-weight: 600; }
.save-row button { padding: 4px 12px; }

/* ---------- Quartel hub: ongoing games (AWBW-style open-games list) ---------- */
#ongoing-box { display: flex; flex-direction: column; gap: 10px; }
.ongoing-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ongoing-head h3 { margin: 0; font-size: 15px; }
#refresh-ongoing { padding: 6px 14px; min-height: 36px; font-size: 15px; }
#ongoing-list { display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
#setup.is-page #ongoing-list { max-height: 46vh; }
.ongoing-card {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 12px 14px; text-align: left; font: inherit;
  border: 1px solid var(--line); border-left: 4px solid var(--forest-2); border-radius: 6px;
  background: #f6f7ef; color: var(--ink); cursor: pointer;
}
.ongoing-card:hover { border-color: var(--line-strong); background: #fff1eb; }
.ongoing-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ongoing-card.is-loading { opacity: 0.55; pointer-events: none; }
.ongoing-card.ongoing-live { border-left-color: var(--orange); background: #fff1eb; }
.og-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.og-title { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.og-badge { flex: none; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.og-badge.og-open { background: rgba(54, 150, 103, 0.16); color: #1f6b45; }
.og-badge.og-done { background: rgba(114, 130, 125, 0.18); color: var(--muted); }
.og-badge.og-error { background: rgba(155, 60, 49, 0.14); color: #9b3c31; }
.og-map, .og-seats, .og-foot { font-size: 12.5px; color: var(--muted); }
.og-turn { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.og-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.og-go { align-self: flex-end; font-weight: 800; font-size: 13.5px; color: var(--orange-dark); }
.newgame-toggle { width: 100%; min-height: 48px; font-size: 16px; }
.newgame-toggle .ng-sign { font-weight: 800; }
#newgame-form { display: flex; flex-direction: column; gap: 14px; }
#newgame-form[hidden] { display: none; }

/* ---------- eval bar ---------- */
#eval-bar {
  display: flex; height: 18px; margin-bottom: 6px;
  border-radius: 5px; overflow: hidden;
  border: 1px solid #0d0f13;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.92);
}
.eval-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; transition: width 0.6s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#toggle-eval.active { background: #2e6f4e; border-color: #3f9a6c; }

/* ---------- CO power buttons + lobby ---------- */
.power-btn {
  padding: 5px 12px; font-size: 13px;
  background: #7443b8; border-color: #9a6ae0;
}
.power-btn:hover:not(:disabled) { background: #8a55d4; }
.power-btn.super { background: #b8438f; border-color: #e06ab8; }
.power-btn.super:hover:not(:disabled) { background: #d455aa; }
#power-log { font-size: 12px; }

.lobby-grid {
  display: grid; grid-template-columns: 36px 1.2fr 1fr 0.8fr 0.9fr; gap: 8px;
  align-items: center;
}
.lobby-rows { display: contents; }
.warn { color: #ffb08a; font-size: 13px; min-height: 18px; }

/* ---------- online box ---------- */
#online-box {
  border-top: 1px solid #4c5568; padding-top: 10px; margin-top: 4px;
}
#online-box summary { cursor: pointer; font-weight: 700; color: #9cc0f5; }
#online-box p { font-size: 12.5px; margin: 8px 0; }
.online-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.online-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa0a6; font-weight: 600; }
.online-grid input, .online-grid select {
  font: inherit; padding: 7px 9px; border-radius: 6px;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568; min-width: 0;
}

/* ---------- map editor ---------- */
#map-editor-bar {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 16px; padding: 10px 14px;
  background: #2b303a; border-radius: 8px;
}
.me-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.me-row input, .me-row select {
  font: inherit; padding: 6px 8px; border-radius: 6px;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568;
}
#me-name { width: 160px; }
.me-size input { width: 60px; }
.me-size { color: #9aa0a6; font-size: 13px; display: flex; gap: 4px; align-items: center; }
#me-palette { display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  max-height: 220px; overflow-y: auto; }
#me-palette button {
  padding: 5px 9px; font-size: 12px;
}
#me-palette button.active { background: #e8703a; border-color: #b95425; }
#me-palette .me-unit { background: #2f4a63; }
#me-palette .me-sep { width: 14px; }
#me-palette .me-group { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: #9aa0a6; margin: 0 4px; }
/* Icon tools: the tile / unit art is the button — 44px touch targets. */
#me-palette .me-icon-btn { width: 44px; height: 44px; padding: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer; }
#me-palette .me-icon-btn:hover { transform: translateY(-1px); }
#me-palette .me-icon-btn canvas,
#me-palette .me-icon-btn .me-icon { width: 36px; height: 36px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  border-radius: 4px; display: block; pointer-events: none;
  background-repeat: no-repeat; flex-shrink: 0; }
#me-palette .me-erase-btn { font-size: 18px; font-weight: 800; line-height: 1; }
#me-armies { display: inline-flex; gap: 6px; align-items: center; }
#me-armies .me-army { width: 30px; height: 30px; min-width: 30px; padding: 0;
  border-radius: 7px; border: 2px solid; cursor: pointer; }
#me-armies .me-army:hover { transform: translateY(-1px); }
#me-armies .me-army.active { outline: 3px solid #fff; outline-offset: 1px; }
/* The raw owner/country selects stay in the DOM as the editor's state
   backbone; the army picker dropdown is their visible face. */
#map-editor-bar #me-owner, #map-editor-bar #me-country { display: none; }
#me-army-picker { position: relative; }
#me-army-toggle { display: inline-flex; gap: 7px; align-items: center; }
#me-army-toggle .me-caret { opacity: 0.7; font-size: 11px; }
#me-army-panel { position: absolute; z-index: 70; top: calc(100% + 6px); left: 0;
  min-width: 264px; max-width: min(92vw, 340px); padding: 6px 10px 8px;
  border-radius: 8px; border: 1px solid var(--line, #4c5568);
  background: var(--paper, #2b303a); color: var(--ink, #e8eaed);
  box-shadow: 0 12px 30px rgb(0 0 0 / 25%); }
.me-army-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.me-army-row + .me-army-row { border-top: 1px solid var(--line, #4c5568); }
.me-army-row.active .me-army-pick { outline: 2px solid #e8703a; outline-offset: 1px; }
.me-army-dot { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px;
  border: 2px solid rgb(0 0 0 / 35%); }
.me-army-pick { min-width: 44px; }
.me-army-country { flex: 1; min-width: 0; font: inherit; padding: 6px 8px; border-radius: 6px; }
.me-army-check { display: inline-flex; align-items: center; }
.me-army-check input { width: 20px; height: 20px; accent-color: #e8703a; }
.me-symm { display: inline-block; min-width: 22px; height: 22px; line-height: 22px;
  border-radius: 11px; text-align: center; font-weight: 800; font-size: 12px; padding: 0 5px; }
.me-symm.ok { color: #7ddf9a; }
.me-symm.bad { background: #c0392b; color: #fff; }
#me-info:empty { display: none; }
.lobby-head { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9aa0a6; font-weight: 700; }
.lobby-name { font-weight: 800; font-size: 15px; }
.lobby-grid select {
  font: inherit; padding: 8px 10px; border-radius: 6px;
  background: #171a20; color: #e8eaed; border: 1px solid #4c5568; min-width: 0; width: 100%;
}

/* ---------- World Engine mode ---------- */
.mode-picks { display: flex; gap: 10px; }
.mode-pick {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  text-align: left; padding: 12px 14px; line-height: 1.3;
}
.mode-pick b { font-size: 15px; }
.mode-pick span { font-size: 12px; font-weight: 400; opacity: 0.85; }

.param-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.param-row .p-label { width: 26px; text-align: center; font-size: 15px; }
.param-bar {
  flex: 1; height: 12px; border-radius: 6px; overflow: hidden;
  background: #171a20; border: 1px solid #454b57; position: relative;
}
.param-fill { height: 100%; border-radius: 5px; transition: width 0.6s ease; }
.param-fill.p-atmosphere { background: linear-gradient(90deg, #b5674a, #ffb13b); }
.param-fill.p-water { background: linear-gradient(90deg, #28529b, #5aa7e4); }
.param-fill.p-biosphere { background: linear-gradient(90deg, #276b31, #67b757); }
.param-row .p-num { min-width: 38px; text-align: right; font-weight: 700; font-size: 12px; }

#world-engine-status { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
#world-engine-status .we-parts { letter-spacing: 2px; font-size: 14px; }
#world-prestige { margin-top: 6px; }
#world-prestige .pr-row { display: flex; justify-content: space-between; padding: 1px 0; }
#world-prestige .pr-row b { font-weight: 700; }
.world-buttons { display: flex; gap: 6px; margin-top: 8px; }
.world-buttons button { flex: 1; padding: 6px 8px; font-size: 12.5px; }

#tick-report, #tick-preview {
  font-size: 12px; line-height: 1.5; max-height: 150px; overflow-y: auto;
  white-space: pre-line;
}
#tick-preview-box summary { cursor: pointer; font-size: 12px; color: #9cc0f5; margin-top: 6px; }
#activity-feed { font-size: 12px; line-height: 1.5; max-height: 140px; overflow-y: auto; }
#activity-feed .feed-day { color: #ffd75e; font-weight: 700; }

#guide-steps { font-size: 12.5px; line-height: 1.7; }
#guide-steps .g-done { color: #41d97c; }
#guide-steps .g-todo { color: #b9c2cf; }

.proj-row {
  display: flex; gap: 12px; align-items: flex-start;
  background: #232833; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.proj-row .proj-info { flex: 1; }
.proj-row .proj-name { font-weight: 700; font-size: 14px; }
.proj-row .proj-desc { font-size: 12.5px; color: #b9c2cf; margin: 2px 0; }
.proj-row .proj-cost { font-size: 12.5px; color: #ffd75e; }
.proj-row .proj-req { font-size: 12px; color: #ffb08a; }
.proj-row button { align-self: center; min-width: 84px; }
.proj-row.built { opacity: 0.55; }
.ms-row, .aw-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 4px 8px; border-radius: 6px;
}
.ms-row:nth-child(odd), .aw-row:nth-child(odd) { background: rgba(255,255,255,0.04); }
.ms-claimed { color: #ffd75e; font-weight: 700; }

.score-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.score-table th, .score-table td { padding: 5px 10px; text-align: right; }
.score-table td:first-child, .score-table th:first-child { text-align: left; color: #9aa0a6; }
.score-table tr:nth-child(even) { background: rgba(255,255,255,0.04); }
.score-table tr.total td { border-top: 1px solid #454b57; font-weight: 800; font-size: 14px; }
#gameover .score-table { margin-top: 4px; }
#gameover .panel { max-height: 88vh; overflow-y: auto; }

/* ---------- touch devices (iPad & co) ---------- */
button { touch-action: manipulation; }        /* no 300ms delay / double-tap zoom */
select, input { touch-action: manipulation; }

@media (pointer: coarse) {
  button { padding: 12px 16px; font-size: 15px; min-height: 44px; min-width: 44px; }
  .power-btn { padding: 9px 14px; }
  #action-menu button, #build-menu button { padding: 12px 14px; font-size: 15px; min-height: 44px; }
  #macro-bar button, #macro-bar select, .macro-stance-label { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  #hud span { padding: 7px 12px; }
  #layout { padding: 10px; gap: 10px; }
  .panel select, .panel input, .lobby-grid select { padding: 11px 12px; font-size: 15px; min-height: 44px; }
  #tools-menu summary { padding: 12px 16px; min-height: 44px; }
}

/* tablets & phones: stack into one column, sidebar under the map */
@media (max-width: 900px) {
  #layout { flex-direction: column; flex-wrap: wrap; align-items: center; }
  #sidebar {
    flex: 1 1 auto; width: 100%; max-width: 680px;
    position: static; max-height: none; overflow-y: visible;
  }
  #topbar { gap: 8px; padding: 8px 10px; }
  #hud { flex-wrap: wrap; row-gap: 6px; }
  .top-buttons { flex-wrap: wrap; row-gap: 6px; width: 100%; }
  #end-turn { order: -1; flex: 1; min-width: 130px; }  /* always reachable */
}

@media (max-width: 480px) {
  .brand { display: none; }               /* phones: every pixel counts */
  #hud span { font-size: 12px; padding: 4px 8px; }
  .mode-picks { flex-direction: column; }
}

/* AI Controller Lab: local hot-swap/debug surface. */
.ai-controller-lab-panel { max-width: 860px; }
.ai-controller-rows { display: grid; gap: 10px; margin: 14px 0; }
.ai-controller-row { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(220px, 2fr) minmax(130px, .9fr) minmax(80px, .55fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #3e4d4a); border-radius: 10px; }
.ai-controller-row strong { white-space: nowrap; }
.ai-controller-row select { width: 100%; min-width: 0; }
.ai-controller-row small { opacity: .72; }
.ai-controller-actions { flex-wrap: wrap; }
@media (max-width: 620px) { .ai-controller-row { grid-template-columns: 1fr; } }
.ai-controller-decisions { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line, #3e4d4a); border-radius: 10px; }
.ai-controller-decisions h3 { margin: 0 0 8px; font-size: 14px; }
.ai-controller-decision-list { display: grid; gap: 6px; max-height: 180px; overflow: auto; }
.ai-controller-decision { padding: 7px 8px; border-radius: 7px; background: color-mix(in srgb, var(--panel, #182321) 82%, transparent); line-height: 1.35; }
.ai-controller-decision b { color: var(--text, #eef7f5); }
.ai-controller-feedback { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(260px, 2fr); gap: 10px; margin: 10px 0 14px; }
.ai-controller-feedback select, .ai-controller-feedback textarea { width: 100%; min-width: 0; }
.ai-controller-feedback textarea { resize: vertical; }
@media (max-width: 620px) { .ai-controller-feedback { grid-template-columns: 1fr; } }

/* Commander powers are intentionally separate from the zoom/action buttons. */
.co-power-cluster { display:flex; align-items:center; gap:6px; }
.co-power-cluster #hud-co {
  background:#2b303a; padding:5px 10px; border-radius:6px;
  font-weight:600; font-size:13px; white-space:nowrap;
}
.tools-control, .tools-check { font-size: 12px; }

/* Tactical Lab parameter editor: the 40 breadth-mutation weights, live presets. */
.ai-parameter-lab-panel {
  width: min(1180px, 96vw);
  max-width: 1180px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-param-title-row { display:flex; gap:18px; align-items:flex-start; justify-content:space-between; }
.ai-param-title-row h2 { margin-bottom:4px; }
.ai-param-title-row p { margin:0; max-width:900px; line-height:1.45; }
#ai-param-close-top { flex:0 0 auto; min-width:38px; }
.ai-param-toolbar {
  display:grid;
  grid-template-columns: minmax(210px,1.2fr) minmax(210px,1.2fr) minmax(150px,.7fr) minmax(180px,1fr);
  gap:10px;
  margin:14px 0 10px;
}
.ai-param-toolbar label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; }
.ai-param-toolbar select, .ai-param-toolbar input { width:100%; min-width:0; }
.ai-param-summary {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px;
  padding:9px 11px; margin-bottom:10px; border:1px solid var(--line,#3e4d4a); border-radius:9px;
  background:color-mix(in srgb, var(--panel,#182321) 88%, transparent); font-size:12px;
}
.ai-param-legend { opacity:.72; }
.ai-param-groups {
  min-height:0; overflow:auto; padding:2px 5px 8px 0; display:grid; gap:12px;
}
.ai-param-group { border:1px solid var(--line,#3e4d4a); border-radius:10px; overflow:hidden; }
.ai-param-group > h3 {
  position:sticky; top:0; z-index:2; margin:0; padding:9px 11px;
  background:color-mix(in srgb, var(--panel,#182321) 95%, #000 5%); font-size:13px;
}
.ai-param-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line,#3e4d4a); }
.ai-param-row {
  display:grid; grid-template-columns:minmax(155px,1.15fr) minmax(140px,1.8fr) 74px 92px 32px;
  gap:8px; align-items:center; padding:8px 9px; background:var(--panel,#182321); min-width:0;
}
.ai-param-row.is-changed { background:color-mix(in srgb, var(--panel,#182321) 88%, #7e5a18 12%); }
.ai-param-key { min-width:0; }
.ai-param-key b { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-param-key small { display:block; opacity:.62; font-size:10px; margin-top:2px; }
.ai-param-row input[type="range"] { width:100%; min-width:0; }
.ai-param-percent { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:11px; }
.ai-param-raw { width:100%; min-width:0; font-variant-numeric:tabular-nums; }
.ai-param-reset-one { min-width:30px; padding:5px 6px; }
.ai-param-actions { flex-wrap:wrap; margin-top:10px; }
#ai-param-status { min-height:18px; margin-top:7px; }
@media (max-width: 900px) {
  .ai-param-toolbar { grid-template-columns:1fr 1fr; }
  .ai-param-list { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .ai-parameter-lab-panel { width:98vw; max-height:96vh; padding:12px; }
  .ai-param-toolbar { grid-template-columns:1fr; }
  .ai-param-row { grid-template-columns:minmax(125px,1fr) minmax(100px,1.5fr) 64px 82px 30px; gap:5px; padding:7px 6px; }
  .ai-param-key small { display:none; }
  .ai-param-actions button { flex:1 1 44%; }
}