:root {
  /* Military dark-slate theme: charcoal/steel ground, muted olive-drab
     accent, brass-gold for secondary highlights/emphasis. */
  --bg: #14171a;
  --panel: #1d2124;
  --panel-light: #272c30;
  --panel-lighter: #34393e;
  --accent: #8a9a5f;
  --accent-dark: #67753f;
  --accent-ink: #14170c; /* dark text set on top of the accent color */
  --text: #e9e7dc;
  --text-dim: #9a9c90;
  --ocean: #33586a;
  --border: #34393e;
  --war: #bf5350;
  --peace: #4f9d7a;
  --alliance: #5c7fa3;
  --gold: #c6a136;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, .brand-font {
  font-family: 'Oswald', 'Segoe UI', system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
}

#app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

.screen { display: none; }
.screen.active { display: block; }
.hidden { display: none !important; }

/* ---- Continue-game list (title screen) ---- */
.continue-section { max-width: 640px; margin: 0 auto 24px; }
.continue-title { text-align: center; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 10px; }
.continue-list { display: flex; flex-direction: column; gap: 8px; }
.continue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s;
}
.continue-card:hover { border-color: var(--accent); }
.continue-card-main { flex: 1; cursor: pointer; }
.continue-card-title { font-weight: 700; }
.continue-card-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }
.continue-card-delete {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.continue-card-delete:hover { color: var(--text); border-color: var(--text-dim); }

#new-game-btn { display: block; margin: 0 auto 36px; }

/* ---- New-game wizard ---- */
.wizard-step { max-width: 720px; margin: 0 auto; }
#wizard-step-map { max-width: 1040px; }

.wizard-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  margin: 0 auto 8px;
}
.map-choice-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s, transform 0.1s;
}
.map-choice-card:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.map-choice-card:disabled { opacity: 0.4; cursor: not-allowed; }
.map-thumb {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}
.map-thumb-svg { width: 100%; height: auto; display: block; }
.map-thumb-ocean { fill: var(--ocean); }
.map-thumb-land { fill: var(--accent-dark); stroke: var(--accent); stroke-width: 0.4; }
.map-choice-label { font-weight: 700; font-size: 0.92rem; text-align: left; }
.map-choice-count { font-size: 0.75rem; color: var(--text-dim); text-align: left; }

/* ---- Wizard diplomacy step ---- */
.wizard-diplomacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 20px;
}
.diplomacy-choice-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s, transform 0.1s;
}
.diplomacy-choice-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.diplomacy-choice-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset, 0 4px 14px rgba(0, 0, 0, 0.25); }
.diplomacy-choice-title { font-weight: 700; font-size: 1rem; }
.diplomacy-choice-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }
.wizard-settings-box { background: var(--panel); border: 1px solid var(--border); border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.wizard-map-choice { font-weight: 700; margin-bottom: 14px; color: var(--accent); }
.wizard-nav { display: flex; justify-content: center; gap: 12px; }
.wizard-nav .primary-btn { margin: 0; }

/* ---- Custom map picker ---- */
#wizard-step-custom-map { max-width: 1040px; }
.custom-map-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.custom-map-mode-switch { display: flex; gap: 8px; }
.custom-map-mode-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.custom-map-mode-btn:hover { border-color: var(--accent); }
.custom-map-mode-btn.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.custom-map-hint { font-size: 0.8rem; color: var(--text-dim); }
.custom-map-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.custom-map-svg { width: 100%; height: auto; display: block; background: var(--ocean); border-radius: 6px; }
.custom-map-country { fill: var(--accent-dark); stroke: var(--panel); stroke-width: 0.4; cursor: pointer; transition: fill 0.1s; }
.custom-map-country:hover { fill: var(--accent); }
.custom-map-country.selected { fill: var(--gold); stroke: var(--accent-ink); }
.custom-map-country.excluded { fill: #8a3a3a; stroke: #e0a0a0; }
.custom-map-svg.square-mode .custom-map-country { cursor: crosshair; }
.custom-map-square-rect { fill: rgba(138, 154, 95, 0.25); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.custom-map-svg.panning, .custom-map-svg.panning .custom-map-country { cursor: grabbing !important; }

h1 {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 1.5px;
  background: linear-gradient(120deg, var(--accent), #c7d19b 50%, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  text-align: center;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

/* ---- Start screen info cards ---- */
.start-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto 36px;
}

.info-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.info-icon { font-size: 1.8rem; }
.info-title { font-weight: 700; font-size: 1.02rem; }
.info-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }

.primary-btn {
  display: block;
  margin: 0 auto;
  padding: 16px 40px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background 0.15s, opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.primary-btn:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
.primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.start-btn-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.start-btn-row .primary-btn { margin: 0; }
.primary-btn.secondary {
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 24px;
  font-size: 0.95rem;
  box-shadow: none;
}
.primary-btn.secondary:hover:not(:disabled) { background: var(--panel-lighter); }
.primary-btn.hidden { display: none; }

.back-link { text-align: center; margin-top: 16px; font-size: 0.9rem; }
.back-link a { color: var(--text-dim); text-decoration: none; }
.back-link a:hover { color: var(--accent); }

.how-to {
  border: 1px solid var(--panel-light);
  border-radius: 8px;
  margin-top: 20px;
  background: var(--panel);
  max-width: 520px;
  width: 100%;
  text-align: left;
}

.how-to-summary {
  display: block;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.how-to-summary::-webkit-details-marker { display: none; }
.how-to-summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s;
}
details.how-to[open] > .how-to-summary::before { transform: rotate(90deg); }
.how-to-summary:hover { color: var(--text); }

.how-to-body { padding: 0 16px 12px; max-height: 60vh; overflow-y: auto; }
.how-to-body p {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 10px;
}
.how-to-body p:last-child { margin-bottom: 0; }
.how-to-body strong { color: var(--text); }
.how-to-body h4 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 6px;
}
.how-to-body h4:first-child { margin-top: 0; }
.how-to-body ul { margin: 0 0 10px; padding-left: 18px; }
.how-to-body li {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 6px;
}
.how-to-body li:last-child { margin-bottom: 0; }

.text-btn {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: 0.9rem; text-decoration: underline;
}
.text-btn:hover { color: var(--text); }

/* ---- Game header ---- */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.hud {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hud-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  width: 40px; height: 40px;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.hud-btn:hover { border-color: var(--accent); background: var(--panel-light); }

.speed-group { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.speed-btn {
  background: none; border: none; color: var(--text-dim);
  padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.speed-btn:hover { color: var(--text); }
.speed-btn.selected { background: var(--accent); color: var(--accent-ink); }

.mapmode-btn {
  background: none; border: none; color: var(--text-dim);
  padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.mapmode-btn:hover { color: var(--text); }
.mapmode-btn.selected { background: var(--accent); color: var(--accent-ink); }

.clock {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold);
  min-width: 150px;
}

.hud-stat {
  font-size: 0.9rem;
  color: var(--war);
  font-weight: 600;
}

/* ---- Game area layout ---- */
.game-area {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.map-wrap {
  position: relative;
  background: var(--ocean);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex: 1;
  min-width: 0;
  height: 82vh;
  max-height: 780px;
}

.map-fullscreen-btn {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 10;
  width: 36px; height: 36px;
  background: rgba(20, 22, 24, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
  transition: border-color 0.15s, background 0.15s;
}
.map-fullscreen-btn:hover { border-color: var(--accent); background: rgba(20, 22, 24, 0.9); }

/* ---- Fullscreen map mode ----
   The map takes over the whole viewport (position: fixed, so it's placed
   relative to the viewport itself, ignoring #app's own max-width/padding);
   the header and side panel float on top of it as semi-transparent
   overlays instead of sitting beside it in the normal flex layout. The
   map's own ResizeObserver (see setMapFitTransform in app.js) already
   re-fits the projection to .map-wrap's current size on any layout change,
   so toggling these rules is enough on its own — no extra JS resize logic
   needed. */
body.map-fullscreen .game-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  margin: 0;
  padding: 10px 20px;
  background: rgba(15, 17, 19, 0.82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
body.map-fullscreen .game-area { display: block; }
body.map-fullscreen .map-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  height: 100vh;
  max-height: none;
  border-radius: 0;
  border: none;
}
body.map-fullscreen #side-panel {
  position: fixed;
  top: 68px; right: 16px; bottom: 16px;
  z-index: 100;
  width: 360px;
  overflow-y: auto;
  padding-right: 2px; /* keeps a scrollbar, if one appears, off the panel's own rounded edge */
}
/* A flex column's children shrink to fit the container by default — with a
   fixed-height container, that meant the country panel and log/stats panel
   were being squashed down to whatever space was left instead of keeping
   their natural height and actually overflowing it, so #side-panel's own
   overflow-y:auto never had anything to scroll (its scrollHeight equaled
   its clientHeight) and the extra content just clipped silently against
   each .panel's own `overflow: hidden`. Pinning them to their natural
   content height is what makes the column actually taller than the
   container and gives the scrollbar something real to do. */
body.map-fullscreen #side-panel > .panel { flex-shrink: 0; }
/* Exit button pinned to the screen's top-right corner, above the header
   bar (the header gets extra right padding so nothing hides under it). */
body.map-fullscreen .map-fullscreen-btn { position: fixed; top: 12px; right: 12px; bottom: auto; z-index: 120; }
body.map-fullscreen .game-header { padding-right: 60px; }
body.map-fullscreen .map-legend { top: 80px; right: 392px; } /* below the overlaid header, left of the side panel */

/* The province canvas used to live inside the SVG via a <foreignObject> so
   one zoom transform could move both at once — but HTML content embedded
   that way is composited on a separate path from the rest of the SVG, and
   on mobile Chrome/Safari it's a known bug that this content doesn't get
   repainted at its new position during a page scroll (it visually freezes
   while everything else, including plain SVG content like the capital
   markers, scrolls normally). #map-inner is a plain, un-transformed
   960x500 logical box (see setMapFitTransform in app.js, which scales/
   centers it to fit .map-wrap) holding the canvas and the svg as ordinary
   siblings instead — each gets the live pan/zoom transform applied to it
   directly in plain CSS/SVG-attribute terms, with no foreignObject
   involved anywhere. */
#map-inner {
  position: absolute;
  top: 0; left: 0;
  width: 960px;
  height: 500px;
  transform-origin: 0 0;
}

#map-canvas-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 960px;
  height: 500px;
  transform-origin: 0 0;
}

#map-svg {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 960px;
  height: 500px;
  cursor: grab;
  /* Purely a decorative overlay now (capital markers, ship/flag animations,
     the annex lasso path — every one of those layers already sets its own
     pointer-events:none in app.js) — this lets every click/drag/touch pass
     straight through to the province canvas sitting behind it, which is
     what actually handles map interaction. Without this the svg, sitting
     on top in stacking order, would swallow every pointer event itself. */
  pointer-events: none;
}
#map-svg:active { cursor: grabbing; }

.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(16, 18, 21, 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text);
  z-index: 10;
  white-space: nowrap;
}
.map-tooltip.hidden { display: none; }
.map-tooltip .tt-owner { font-weight: 700; }
.map-tooltip .tt-sub { color: var(--text-dim); }

.map-legend {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(16, 18, 21, 0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--text);
  z-index: 9;
  pointer-events: none;
  max-width: 150px;
}
.map-legend.hidden { display: none; }
.map-legend .legend-title { font-weight: 700; margin-bottom: 4px; color: var(--text-dim); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.04em; }
.map-legend .legend-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.map-legend .legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.map-legend .legend-gradient { height: 10px; border-radius: 4px; margin-top: 2px; }
.map-legend .legend-gradient-labels { display: flex; justify-content: space-between; color: var(--text-dim); margin-top: 2px; }
/* The legend is click-through so it never blocks the map — except the named
   alliance rows in Alliance mode, which open that alliance's panel. */
.map-legend:has(.legend-alliance-btn) { max-width: 220px; }
.map-legend .legend-alliance-btn {
  pointer-events: auto;
  width: 100%;
  background: none; border: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  border-radius: 4px; padding: 2px 3px; margin: 0 -3px;
}
.map-legend .legend-alliance-btn:hover { background: rgba(255, 255, 255, 0.08); }
.map-legend .legend-note { color: var(--text-dim); font-style: italic; }

/* ---- Alliance panel (Alliance map mode) ---- */
.alliance-swatch { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
.alliance-member-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.alliance-member-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-light); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 0.85rem; text-align: left;
  padding: 6px 8px; cursor: pointer;
}
.alliance-member-row:hover { border-color: var(--accent); }
.alliance-member-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.alliance-member-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alliance-member-stat { color: var(--text-dim); font-size: 0.75rem; white-space: nowrap; }
.cp-alliance-link {
  background: none; border: none; padding: 0;
  color: var(--alliance); font: inherit; font-weight: 700; text-align: right;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.cp-alliance-link:hover { color: var(--text); }

/* ---- Provinces ----
   Rendered on a <canvas> now, not as individual SVG DOM elements — 42,000+
   live nodes (each with their own event listeners) was a real, constant
   cost just from existing, independent of animation or tick rate, which is
   why the map felt laggy even paused and idle. All province styling
   (fill/stroke/frontline/selection) is drawn directly in app.js's
   redrawProvinceCanvas() instead of through CSS classes. */

/* ---- Side panel ---- */
#side-panel {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.panel-empty {
  color: var(--text-dim);
  font-size: 0.88rem;
  text-align: center;
  padding: 20px 4px;
  margin: 0;
}

/* ---- Country panel ---- */
.cp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cp-flag { width: 32px; height: 24px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }
.cp-name { font-weight: 800; font-size: 1.15rem; flex: 1; }
.cp-fly-btn {
  background: var(--panel-light); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); font-size: 0.9rem; line-height: 1; padding: 5px 7px;
  cursor: pointer; flex-shrink: 0;
}
.cp-fly-btn:hover { color: var(--text); border-color: var(--text-dim); }
.cp-status {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 999px;
}
.cp-status.at-peace { background: rgba(79,157,122,0.18); color: var(--peace); }
.cp-status.at-war { background: rgba(191,83,80,0.18); color: var(--war); }
.cp-status.conquered { background: rgba(154,156,144,0.15); color: var(--text-dim); }
.cp-status.exiled { background: rgba(198,161,54,0.18); color: var(--gold); }

.cp-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cp-stat-row { display: flex; justify-content: space-between; font-size: 0.85rem; }
.cp-stat-label { color: var(--text-dim); }
.cp-stat-value { font-weight: 700; }

.cp-bar-track {
  background: var(--panel-light);
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
  margin-top: 3px;
}
.cp-bar-fill { height: 100%; border-radius: 6px; background: var(--accent); }
.cp-bar-fill.manpower { background: var(--war); }
.cp-bar-fill.territory { background: var(--gold); }

.cp-section-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); margin: 10px 0 6px;
  font-weight: 700;
}

.cp-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-tag {
  font-size: 0.76rem;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--text);
}
.cp-tag.war { border-color: var(--war); color: var(--war); }
.cp-tag.ally { border-color: var(--alliance); color: var(--alliance); }
.cp-tag.resource { border-color: var(--gold); color: var(--gold); }

/* ---- Diplomacy controls ---- */
.cp-diplomacy-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-diplo-btn {
  flex: 1 1 auto;
  min-width: 90px;
  border: 1px solid var(--border);
  background: var(--panel-light);
  color: var(--text);
  padding: 7px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}
.cp-diplo-btn:hover { background: var(--panel-lighter); }
.cp-diplo-btn.war:hover { border-color: var(--war); color: var(--war); }
.cp-diplo-btn.peace:hover { border-color: var(--peace); color: var(--peace); }
.cp-diplo-btn.ally:hover { border-color: var(--alliance); color: var(--alliance); }
.cp-diplo-btn.war.armed { background: var(--war); border-color: var(--war); color: #2a0a0a; }
.cp-diplo-btn.peace.armed { background: var(--peace); border-color: var(--peace); color: #062b12; }
.cp-diplo-btn.ally.armed { background: var(--alliance); border-color: var(--alliance); color: #08213f; }
.cp-diplo-btn.leave-alliance:hover { border-color: var(--war); color: var(--war); }
.cp-diplo-btn.fight { border-color: var(--war); color: var(--war); }
.cp-diplo-btn.fight:hover { background: rgba(191, 83, 80, 0.14); }
.cp-diplo-btn.fight.armed { background: var(--war); border-color: var(--war); color: #2a0a0a; }
.cp-diplo-btn.naval { border-color: var(--alliance); color: var(--alliance); }
.cp-diplo-btn.naval:hover { background: rgba(92, 127, 163, 0.16); }
.cp-diplo-btn.annex { border-color: var(--peace); color: var(--peace); }
.cp-diplo-btn.annex:hover { background: rgba(79, 157, 122, 0.14); }
.cp-diplo-btn.annex.armed { background: var(--peace); border-color: var(--peace); color: #062b12; }
.cp-diplo-btn.ai { border-color: var(--peace); color: var(--peace); }
.cp-diplo-btn.ai:hover { background: rgba(74, 222, 128, 0.12); }
.cp-diplo-btn.ai.off { border-color: var(--text-dim); color: var(--text-dim); }
.cp-diplo-btn.ai.off:hover { background: var(--panel-lighter); }
.cp-power-row { display: flex; gap: 6px; margin-top: 6px; }
.cp-power-input {
  width: 64px;
  border: 1px solid var(--border);
  background: var(--panel-light);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 0.76rem;
}
.cp-diplo-btn.power { border-color: var(--gold); color: var(--gold); flex: 1 1 auto; }
.cp-diplo-btn.power:hover { background: rgba(198, 161, 54, 0.16); }
.cp-diplo-msg, .cp-diplo-hint {
  margin: 8px 0 0;
  font-size: 0.76rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ---- Tabs ---- */
.panel-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tab-btn {
  flex: 1; background: var(--panel-light); border: none; color: var(--text-dim);
  padding: 8px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.tab-btn.selected { background: var(--accent); color: var(--accent-ink); }
.tab-content { display: none; }
.tab-content.selected { display: block; }

/* ---- Event log ---- */
#event-log {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.log-entry {
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--panel-light);
  border-left: 3px solid var(--text-dim);
  animation: log-in 0.3s ease;
}
.log-entry .log-week { color: var(--text-dim); font-size: 0.7rem; margin-right: 5px; }
.log-entry.war { border-left-color: var(--war); }
.log-entry.alliance { border-left-color: var(--alliance); }
.log-entry.capture { border-left-color: var(--gold); }
.log-entry.peace { border-left-color: var(--peace); }
.log-entry.conquest { border-left-color: #a780c4; }
.log-entry.mobilization { border-left-color: var(--alliance); }
.log-entry.annex { border-left-color: var(--peace); }
.log-entry.revolt { border-left-color: #c17d3f; }
.log-entry.puppet { border-left-color: #8c81b8; }

@keyframes log-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Ranking ---- */
#ranking-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.rank-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.rank-row:hover { background: var(--panel-light); }
.rank-num { color: var(--text-dim); width: 18px; font-weight: 700; }
.rank-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.rank-name { flex: 1; }
.rank-value { color: var(--text-dim); font-size: 0.78rem; }

/* ---- Loading overlay ---- */
.ocean-rect { fill: var(--ocean); }

#loading-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; color: var(--text-dim); z-index: 100;
}
#loading-overlay.hidden { display: none; }
.loading-tip {
  max-width: 480px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  padding: 12px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  min-height: 3em;
}

/* ---- Settings modal ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 14, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 22px 26px;
  width: min(440px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.modal-box h2 { margin: 0 0 16px; font-size: 1.2rem; }
.settings-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 0.95rem;
}
.settings-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.settings-desc {
  margin: 0 0 14px 27px;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.4;
}
.modal-box .primary-btn.secondary { width: 100%; margin-top: 6px; }

/* ---- In-game Settings modal: grouped sections, toggle switches, and
   one-off bulk-action rows, instead of a flat list of checkboxes ---- */
.settings-box { width: min(480px, 92vw); }
.settings-group { margin-bottom: 18px; }
.settings-group.hidden { display: none; }
.settings-advanced-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
}
.settings-advanced-toggle:hover { border-color: var(--accent); }
.settings-advanced-caret { transition: transform 0.15s; }
.settings-advanced-toggle.open .settings-advanced-caret { transform: rotate(180deg); }
.settings-group:last-of-type { margin-bottom: 0; }
.settings-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.settings-toggle-row, .settings-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-toggle-row:last-child, .settings-action-row:last-child { border-bottom: none; }
.settings-toggle-text { flex: 1; min-width: 0; }
.settings-toggle-label { font-size: 0.9rem; font-weight: 600; }
.settings-toggle-desc { font-size: 0.76rem; color: var(--text-dim); line-height: 1.4; margin-top: 2px; }
.settings-action-btn {
  flex-shrink: 0;
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.settings-action-btn:hover { background: var(--panel-lighter); border-color: var(--accent); }

.diplo-admin-row { display: flex; gap: 6px; align-items: center; }
.diplo-admin-select {
  flex: 1;
  min-width: 0;
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 6px;
  font-size: 0.8rem;
}
.diplo-admin-changes-list {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  resize: vertical;
}

/* iOS-style toggle switch, replacing a plain checkbox */
.toggle-switch { position: relative; flex-shrink: 0; cursor: pointer; display: block; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track {
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--panel-lighter);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.toggle-thumb {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s, background 0.15s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent-dark); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); background: var(--accent); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A small floating popup, not a full-screen modal — the scrim is an
   invisible full-viewport click-catcher (so clicking anywhere outside the
   box dismisses it) but never dims/covers the map itself. */
.annex-popup-scrim {
  position: fixed; inset: 0;
  z-index: 200;
}
.annex-popup-scrim.hidden { display: none; }
.annex-popup-box {
  position: absolute;
  top: 70px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 14px 16px;
  width: min(300px, 88vw);
}
.annex-popup-box h3 { margin: 0 0 6px; font-size: 1rem; }
.annex-popup-desc { margin: 0 0 10px; color: var(--text-dim); font-size: 0.78rem; line-height: 1.35; }
.annex-popup-cancel { display: block; width: 100%; text-align: center; margin-top: 4px; }

.annex-territory-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.annex-territory-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  font-size: 0.9rem;
  text-align: left;
}
.annex-territory-row:hover { border-color: var(--accent); }
.annex-territory-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.annex-territory-name { flex: 1; }
.annex-territory-count { color: var(--text-dim); font-size: 0.8rem; }

.annex-lasso-path {
  fill: rgba(90, 170, 255, 0.18);
  stroke: #5aaaff;
  stroke-width: 0.35;
  stroke-dasharray: 1.2 0.8;
  vector-effect: non-scaling-stroke;
}

.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--panel-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .game-area { flex-direction: column; }
  #side-panel { width: 100%; flex-direction: row; flex-wrap: wrap; }
  #side-panel .panel { flex: 1; min-width: 280px; }
  /* flex:none, not the base flex:1 — in this column layout flex-basis 0
     would override the height and collapse the map to nothing now that
     the svg no longer supplies the box's height itself. */
  .map-wrap { flex: none; height: 60vh; }
}

@media (max-width: 600px) {
  h1 { font-size: 1.7rem; }
  .hud { gap: 8px; }
  .clock { min-width: 0; font-size: 0.9rem; }
}
.cp-lock-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.cp-edit-name { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); border-radius: 8px; padding: 7px 8px; }
.cp-edit-color { width: 40px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; }
.cp-name-editable { cursor: pointer; } .cp-name-editable:hover { text-decoration: underline dotted; }
.ranking-controls { display: flex; gap: 6px; margin-bottom: 6px; }
.ranking-order { flex-shrink: 0; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.ranking-order:hover { border-color: var(--text); }
.ranking-sort { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); border-radius: 8px; padding: 6px 8px; }

/* Front-line troop counts (Settings > Advanced). Sized in map units so
   they scale with the map — see scaleTroopLabels in app.js. */
.troop-label text {
  font-size: 10px; /* map units — scales with the map (see scaleTroopLabels in app.js) */
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(10, 12, 14, 0.85);
  stroke-width: 2px;
  stroke-linejoin: round;
}

/* Yearly population/GDP growth in the Stats list (see growthBadge in app.js). */
.rank-growth { font-size: 0.72rem; font-weight: 600; margin-left: 4px; }
.rank-growth.up { color: #6fbf73; }
.rank-growth.down { color: #d9665b; }
.rank-growth.flat { color: var(--text-dim); }

/* Slider controls in Settings (e.g. Advanced > Flag size). */
.settings-range { width: 160px; accent-color: var(--accent); flex-shrink: 0; }