: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; }

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; }
.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); }

.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;
}

/* 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; }

/* ---- 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-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-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: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-sort { width: 100%; margin-bottom: 6px; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); border-radius: 8px; padding: 6px 8px; }