/* ═══════════════════════════════════════════════════════════════════
   BASILEUS — Byzantine Dynasty Strategy Game
   Visual Language: Illuminated manuscript, mosaic gold, imperial court
   Fonts: Cinzel (inscriptions) + EB Garamond (body text)
   Palette: Parchment ground · Umber darks · Byzantine gold · Imperial purple
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
  /* Parchment ground */
  --parch-0:   #fdf6e3;   /* lightest — card surfaces */
  --parch-1:   #f5e9c8;   /* base parchment */
  --parch-2:   #e8d5a3;   /* mid — subtle separators */
  --parch-3:   #d4b878;   /* warm tan — strong borders */

  /* Umber darks */
  --umber-0:   #2e1e0f;   /* deepest text */
  --umber-1:   #4a3018;   /* primary text */
  --umber-2:   #6b4a28;   /* secondary text */
  --umber-3:   #8c6840;   /* muted / placeholder */
  --umber-4:   #b08050;   /* very muted */

  /* Imperial Gold */
  --gold-0:    #c8921e;   /* primary action gold */
  --gold-1:    #a87420;   /* standard gold */
  --gold-2:    #7c5416;   /* muted gold */
  --gold-3:    #f0c85a;   /* bright highlight */
  --gold-4:    #fae8a0;   /* very pale gold wash */

  /* Imperial Purple */
  --purple-0:  #5a3472;   /* deep purple */
  --purple-1:  #7a4d99;   /* standard purple */
  --purple-2:  #9d6fb8;   /* light purple */

  /* Crimson / danger */
  --crimson-0: #7a2020;
  --crimson-1: #a03030;
  --crimson-2: #c04848;

  /* Church blue */
  --church-0:  #1e3a5f;
  --church-1:  #2e5490;
  --church-2:  #6888b0;

  /* Status: victory / defeat / stalemate */
  --win:       #3a6b28;
  --lose:      var(--crimson-1);
  --draw:      var(--umber-3);

  /* Map province fills */
  --free-fill:    #6a4a8a;  /* deep amethyst — unowned, no dynasty uses this hue */
  --free-border:  var(--purple-0);
  --church-fill:  #1a1a1a;  /* black — church estate */
  --church-border: #000000;
  --occupied-fill: color-mix(in srgb, #888 20%, var(--parch-1) 80%);
  --empire-border: #2e1e0f;
  --empire-border-hover: #4a3018;
  --capital-fill:  #9a7010;

  /* Typography */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:    'EB Garamond', 'Garamond', 'Times New Roman', serif;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Radii */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(46,30,15,0.10), 0 1px 2px rgba(46,30,15,0.06);
  --shadow-panel: 0 4px 20px rgba(46,30,15,0.12);
  --shadow-inset: inset 0 1px 0 rgba(255,250,230,0.55);

  /* Responsive shell */
  --topbar-height: 52px;
  --sidebar-width: clamp(500px, 43vw, 760px);
  --map-aspect: 297 / 210;
  --map-reserve-bottom: var(--map-shell-pad);
  --map-shell-pad: clamp(14px, 1.8vw, 24px);
  --sidebar-gap: clamp(12px, 1.3vw, 18px);
  --main-panel-pad: clamp(16px, 1.7vw, 24px);
  --touch-target: 44px;
  --game-vh: 100vh;

  /* Legacy aliases for JS-generated markup */
  --bg-deep:       var(--parch-1);
  --bg-surface:    var(--parch-0);
  --bg-elevated:   var(--parch-1);
  --bg-card:       var(--parch-0);
  --border-subtle: var(--parch-2);
  --border-accent: var(--parch-3);
  --gold-bright:   var(--gold-0);
  --gold-standard: var(--gold-1);
  --gold-muted:    var(--gold-2);
  --gold-dim:      var(--gold-2);
  --purple-bright: var(--purple-1);
  --purple-deep:   var(--purple-0);
  --crimson:       var(--crimson-1);
  --church-blue:   var(--church-1);
  --text-primary:  var(--umber-1);
  --text-secondary:var(--umber-2);
  --text-muted:    var(--umber-3);
  --text-gold:     var(--gold-1);
  --occupied:      var(--occupied-fill);
  --occupied-border: #9a8060;
  --invasion-lost-fill: rgba(210, 200, 178, 0.88);
  --invasion-lost-border: var(--occupied-border);
  --region-border: var(--empire-border);
}

/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { min-height: 100%; }

@supports (height: 100dvh) {
  :root { --game-vh: 100dvh; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--umber-1);
  background: var(--parch-1);
  overflow: hidden;
  min-height: var(--game-vh);
  height: var(--game-vh);
  width: 100%;
  /* Subtle parchment texture via repeating gradient */
  background-image:
    radial-gradient(ellipse 120% 80% at 8% 0%, rgba(200,146,30,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 95% 5%, rgba(90,52,114,0.09) 0%, transparent 50%),
    linear-gradient(160deg, #fdf6e3 0%, #f5e9c8 40%, #e8d5a3 100%);
}

/* Fine diagonal linen texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(139,100,40,0.4) 0px, rgba(139,100,40,0.4) 1px,
      transparent 1px, transparent 6px
    );
}

/* ── App Layout ──────────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-columns: minmax(360px, 1fr) minmax(500px, var(--sidebar-width));
  grid-template-areas:
    "topbar topbar"
    "map    sidebar";
  min-height: var(--game-vh);
  height: var(--game-vh);
  width: 100%;
  min-width: 0;
}

/* ── Top Bar ──────────────────────────────────────────────────────── */
#topBar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, var(--sp-5));
  padding: 0 max(var(--sp-4), env(safe-area-inset-left)) 0 max(var(--sp-4), env(safe-area-inset-right));
  min-width: 0;
  flex-wrap: wrap;
  align-content: center;
  /* Deep imperial header — burgundy-umber with gold light */
  background:
    linear-gradient(180deg, #2a1608 0%, #1e1005 100%);
  border-bottom: 2px solid var(--gold-1);
  box-shadow: 0 3px 16px rgba(20,10,0,0.35);
  z-index: 10;
}

/* Decorative gold rule under top bar */
#topBar::after {
  content: '';
  position: absolute;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity: 0.4;
  pointer-events: none;
}

.game-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-3);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 12px rgba(240,200,90,0.25);
}

#roundDisplay {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(240,220,170,0.88);
}

.phase-badge {
  padding: 4px 14px;
  cursor: default;
  transition: background 0.15s;
  border-radius: var(--r-sm);
  border: 1px solid rgba(200,146,30,0.5);
  background: rgba(200,146,30,0.14);
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.phase-court    { border-color: rgba(200,146,30,0.5);  background: rgba(200,146,30,0.16); }
.phase-orders   { border-color: rgba(160,48,48,0.6);   background: rgba(160,48,48,0.18); }
.phase-resolution { border-color: rgba(130,52,160,0.5); background: rgba(130,52,160,0.15); }
.phase-scoring  { border-color: rgba(200,146,30,0.7);  background: rgba(200,146,30,0.22); }
.phase-empire-fallen { border-color: rgba(160,48,48,0.7); background: rgba(160,48,48,0.22); color: #e08888; }

#invasionDisplay {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(240,200,150,0.9);
  letter-spacing: 0.5px;
}

.invasion-strength {
  font-size: 11px;
  color: rgba(240,180,120,0.7);
  letter-spacing: 0.5px;
}

.connection-badge {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(200,146,30,0.3);
  background: rgba(200,146,30,0.1);
  color: rgba(240,220,170,0.8);
}
.connection-badge.connected  { color: #a0c880; border-color: rgba(100,180,80,0.35); }
.connection-badge.connecting,
.connection-badge.disconnected { color: #e08888; border-color: rgba(160,80,80,0.4); }

.empire-fallen-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  padding: 4px 12px;
  border: 1px solid rgba(160,48,48,0.45);
  border-radius: var(--r-sm);
  background: rgba(160,48,48,0.15);
  color: rgba(240,190,190,0.85);
  font-size: 12px;
  white-space: nowrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empire-fallen-banner strong {
  color: #e06060;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Map Area ────────────────────────────────────────────────────── */
#mapArea {
  grid-area: map;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%, rgba(240,225,190,0.9) 0%, rgba(215,195,155,0.95) 100%);
}

/* Elegant inner border frame for the map */
#mapArea::before {
  content: none;
}

#mapContainer {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: var(--map-shell-pad) var(--map-shell-pad) var(--map-reserve-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.game-map {
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: var(--map-aspect);
  max-width: min(100%, 1120px);
  max-height: 100%;
  border: 1px solid rgba(100,70,20,0.14);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(230,240,248,0.85) 0%, rgba(220,210,180,0.80) 100%);
  box-shadow:
    0 20px 50px rgba(80,50,10,0.20),
    inset 0 0 0 1px rgba(100,70,20,0.12);
  filter: saturate(0.92) contrast(1.02);
  touch-action: none;
  user-select: none;
}

/* ── Player Tabs ─────────────────────────────────────────────────── */
#playerTabBar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 9px;
  padding: var(--main-panel-pad);
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255,250,235,0.72) 0%, rgba(240,228,198,0.52) 100%);
  border: 1px solid rgba(168,116,32,0.16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* Player tabs reuse the cartouche grammar at a larger scale: thick role
   outline, dynasty-color fill, parchment ink, gold-leaf inner hairline. */
.player-tab {
  flex: 1 1 clamp(132px, 31%, 190px);
  min-width: min(100%, 132px);
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 4px solid var(--role-outline-color, var(--role-color, var(--empire-border)));
  border-radius: var(--r-md);
  background-color: var(--player-color, var(--parch-3));
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,250,225,0.07) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(180deg, rgba(255,248,220,0.18) 0%, rgba(20,8,0,0.18) 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(20,8,0,0.55);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.35px;
  transition: filter 0.15s, box-shadow 0.15s;
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.45),
    inset 0 1px 0 rgba(255,250,228,0.18),
    inset 0 -1px 0 rgba(20,8,0,0.22),
    0 2px 8px rgba(30,16,0,0.12);
}

.player-tab:hover { filter: brightness(1.06); }

.player-tab.active {
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.70),
    inset 0 1px 0 rgba(255,250,228,0.22),
    inset 0 -1px 0 rgba(20,8,0,0.22),
    0 3px 12px rgba(30,16,0,0.18);
}

.player-tab,
.player-tab .tab-name,
.player-tab .tab-finance,
.player-tab .tab-finance-value,
.player-tab .tab-you,
.player-tab .tab-crown { color: #ffffff; text-shadow: inherit; }

.tab-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tab-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.12;
}

.tab-finance {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.05;
  font-weight: 700;
}

.tab-finance-value,
.tab-finance-separator {
  display: inline-block;
  min-width: 0;
}

.tab-finance-separator {
  opacity: 0.72;
  font-weight: 500;
}

.tab-you {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tab-crown { font-size: 14px; }

.tab-flags {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}


/* ── Sidebar ──────────────────────────────────────────────────────── */
#sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  gap: var(--sidebar-gap);
  padding: var(--sidebar-gap);
  background:
    linear-gradient(180deg, var(--parch-0) 0%, var(--parch-1) 100%);
  border-left: 1px solid var(--parch-3);
  scrollbar-gutter: stable;
  min-width: 0;
  min-height: 0;
  box-shadow: -8px 0 24px rgba(80,50,10,0.10);
  scrollbar-width: thin;
  scrollbar-color: var(--parch-3) var(--parch-1);
}

#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-track { background: var(--parch-1); }
#sidebar::-webkit-scrollbar-thumb {
  background: var(--parch-3);
  border-radius: 999px;
  border: 2px solid var(--parch-1);
}
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--gold-1); }

#playerDashboard, #historyPanel, #actionPanel {
  display: flex;
  flex-direction: column;
  min-height: auto;
  flex: 0 0 auto;
  overflow: visible;
}

#playerDashboard.panel-collapsed,
#historyPanel.panel-collapsed,
#actionPanel.panel-collapsed {
  overflow: hidden;
}

/* ── Sidebar Panel Shell ─────────────────────────────────────────── */
.sidebar-panel {
  display: flex;
  flex-direction: column;
  background: rgba(255,252,240,0.54);
  overflow: visible;
  border: 1px solid rgba(168,116,32,0.16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.sidebar-panel-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: clamp(10px, 1.6vw, 14px) var(--main-panel-pad);
  border: 0;
  border-bottom: 1px solid var(--parch-2);
  background: linear-gradient(180deg, rgba(255,250,235,0.8) 0%, rgba(240,228,198,0.6) 100%);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  min-height: 0;
  height: auto;
  overflow: visible;
  /* Reset button defaults that can collapse height */
  box-sizing: border-box;
  line-height: normal;
  white-space: normal;
}
.sidebar-panel-head:hover {
  background: linear-gradient(180deg, rgba(255,252,240,0.95) 0%, rgba(245,234,210,0.85) 100%);
}

.sidebar-panel-head-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.sidebar-panel-kicker {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--umber-3);
  line-height: 1.2;
}

.sidebar-panel-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-1);
  line-height: 1.3;
}

.sidebar-panel-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-2);
  line-height: 1.3;
}

.sidebar-panel-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(168,116,32,0.12);
  border: 1px solid rgba(168,116,32,0.22);
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--gold-2);
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.sidebar-panel-body {
  padding: var(--main-panel-pad);
}

.player-dashboard .sidebar-panel-body,
.action-shell .sidebar-panel-body {
  padding: var(--main-panel-pad);
}

.history-panel .sidebar-panel-body {
  overflow: visible;
}

/* ── Dynasty View / Player Dashboard ─────────────────────────────────
   The dashboard panel itself is one large cartouche: 4px role-color
   border, dynasty-color fill with parchment-linen overlay, gold inner
   hairline, parchment ink text. Everything inside inherits that grammar. */
.player-dashboard {
  padding: 0;
}

.player-dashboard.sidebar-panel {
  background-color: var(--player-color, var(--parch-3));
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,250,225,0.07) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(180deg, rgba(255,248,220,0.18) 0%, rgba(20,8,0,0.18) 100%);
  border: 4px solid var(--role-outline-color, var(--role-color, var(--empire-border)));
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.45),
    inset 0 1px 0 rgba(255,250,228,0.18),
    inset 0 -1px 0 rgba(20,8,0,0.22),
    var(--shadow-card);
}

.player-dashboard .sidebar-panel-head {
  background: transparent;
  border-color: transparent;
  color: inherit;
  min-height: 56px;
  height: auto;
  overflow: visible;
  align-items: flex-start;
}

.player-dashboard .sidebar-panel-body {
  background: transparent;
  color: inherit;
  border-top: 1px solid rgba(240,200,90,0.32);
}

/* All text inside the dashboard inherits the parchment ink color and
   text shadow set on the panel root. */
.player-dashboard,
.player-dashboard .sidebar-panel-title,
.player-dashboard .sidebar-panel-kicker,
.player-dashboard .sidebar-panel-subtitle,
.player-dashboard .dynasty-name,
.player-dashboard .dynasty-title,
.player-dashboard .dashboard-list-title,
.player-dashboard .dashboard-list-note,
.player-dashboard .dashboard-list-value,
.player-dashboard .dashboard-tag,
.player-dashboard .gold-display,
.player-dashboard .gold-amount,
.player-dashboard .gold-projection,
.player-dashboard .stat-label,
.player-dashboard .stat-value,
.player-dashboard .stat-icon,
.player-dashboard .player-role-name {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(20,8,0,0.55);
}

/* Display type for headings to match the cartouche grammar. */
.player-dashboard .sidebar-panel-title,
.player-dashboard .sidebar-panel-kicker,
.player-dashboard .dynasty-name,
.player-dashboard .stat-label,
.player-dashboard .stat-icon { font-family: var(--font-display); letter-spacing: 0.4px; }

.player-dashboard .stat {
  background: rgba(20,8,0,0.18);
  border: 1px solid rgba(240,200,90,0.32);
  border-radius: 2px;
}

.player-dashboard .stat-button:hover { filter: brightness(1.06); }

.player-dashboard .stat-button.active {
  background: rgba(20,8,0,0.32);
  border-color: rgba(240,200,90,0.65);
  box-shadow: inset 0 0 0 1px rgba(240,200,90,0.45);
}

.player-dashboard .sidebar-panel-badge,
.player-dashboard .dashboard-tag {
  background: rgba(20,8,0,0.28);
  color: inherit;
  text-shadow: inherit;
  border: 1px solid rgba(240,200,90,0.32);
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}

.dynasty-crest {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dynasty-color, var(--player-color, var(--parch-3)));
  background: color-mix(in srgb, var(--dynasty-color, var(--player-color)) 72%, #1a1008 28%);
  border: 2px solid rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.dashboard-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.dynasty-info { flex: 1; min-width: 0; }

.dynasty-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.dynasty-title {
  font-family: var(--font-body);
  font-size: 12px;
  opacity: 0.8;
  margin-top: 1px;
}

.gold-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.gold-amount {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.gold-projection {
  font-size: 10px;
  opacity: 0.75;
  letter-spacing: 0.2px;
}

.gold-icon { font-size: 14px; }

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.stat {
  flex: 1;
  padding: 10px var(--sp-3);
  border-radius: var(--r-sm);
  text-align: center;
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.12);
}

.stat-button {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}

.stat-button:hover { filter: brightness(1.08); }

.stat-button.active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.8;
}

.stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.75;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

/* ── Fold Sections ─────────────────────────────────────────────────── */
.fold-section {
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  background: rgba(255,252,240,0.7);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.fold-section + .fold-section { margin-top: var(--sp-3); }
.fold-section.focused { border-color: var(--parch-3); }

.fold-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--touch-target);
  padding: 9px 12px;
  cursor: pointer;
  background: rgba(240,228,195,0.4);
  transition: background 0.12s;
}
.fold-summary:hover { background: rgba(240,228,195,0.7); }
.fold-summary::-webkit-details-marker { display: none; }

.fold-summary-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-1);
}

.fold-summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fold-summary-badge,
.fold-summary-note {
  font-size: 12px;
  color: var(--umber-3);
}

.fold-body {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-top: 1px solid rgba(168,116,32,0.15);
}

/* ── Dashboard Lists ─────────────────────────────────────────────── */
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-list.compact { margin-top: var(--sp-2); }

.dashboard-list-row,
.dashboard-opinion-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: rgba(255,252,240,0.85);
  border: 1px solid rgba(168,116,32,0.14);
}

.dashboard-list-title {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-1);
  font-weight: 500;
}

.dashboard-list-note {
  font-size: 11px;
  color: var(--umber-2);
  margin-top: 2px;
  line-height: 1.4;
}

.dashboard-list-value {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--umber-1);
  text-align: right;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.dashboard-empty {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-3);
  font-style: italic;
  padding: var(--sp-2) 0;
}

.dashboard-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168,116,32,0.12);
  border: 1px solid rgba(168,116,32,0.2);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-2);
}

.dashboard-tag.loyal, .dashboard-tag.warm {
  background: rgba(58,107,40,0.12);
  border-color: rgba(58,107,40,0.22);
  color: var(--win);
}
.dashboard-tag.cold, .dashboard-tag.hostile {
  background: rgba(160,48,48,0.10);
  border-color: rgba(160,48,48,0.20);
  color: var(--crimson-1);
}

.dashboard-opinion-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.dashboard-opinion-debt { font-size: 11px; color: var(--umber-2); }

.dashboard-opinion-row.human-target {
  border-color: var(--player-color, var(--parch-3));
  border-color: color-mix(in srgb, var(--player-color, var(--parch-3)) 55%, var(--parch-2) 45%);
}

/* Finance cards */
.finance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.finance-card {
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,252,240,0.9);
  border: 1px solid var(--parch-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow-card);
}

.finance-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--umber-3);
}

.finance-card strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--umber-1);
}

/* ── Phase Headers ─────────────────────────────────────────────────── */
.phase-header {
  padding: var(--main-panel-pad);
  border-bottom: 1px solid var(--parch-2);
  background: linear-gradient(180deg, rgba(240,230,195,0.5) 0%, transparent 100%);
}

.phase-header h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-1);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.phase-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-2);
  margin-top: 3px;
  font-style: italic;
}

/* ── Court / Orders / Resolution Sections ─────────────────────────── */
.court-section,
.orders-section,
.resolution-section {
  padding: var(--main-panel-pad);
  border-bottom: 1px solid var(--parch-2);
}

.court-section h4,
.orders-section h4,
.resolution-section h4 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  color: var(--gold-1);
}

.orders-section h4 { color: var(--crimson-1); }
.resolution-section h4 { color: var(--umber-1); }

.section-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-2);
  font-style: italic;
  margin-bottom: var(--sp-2);
  line-height: 1.45;
}

.revocation { border-left: 3px solid var(--crimson-1); }
.revocation-cost { color: var(--umber-1); font-style: normal; }

/* ── Market / Gift items ─────────────────────────────────────────── */
.theme-market,
.gift-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  gap: var(--sp-2);
}

.market-item,
.gift-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: var(--touch-target);
  padding: 9px 12px;
  background: var(--parch-0);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  color: var(--umber-1);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  transition: all 0.12s;
  box-shadow: var(--shadow-card);
  min-width: 0;
  touch-action: manipulation;
}
.market-name { min-width: 0; flex: 1 1 auto; }

.market-item:hover:not(.disabled),
.gift-item:hover {
  border-color: var(--parch-3);
  background: var(--parch-0);
  box-shadow: 0 3px 12px rgba(168,116,32,0.15);
}

.market-item.selected,
.gift-item.selected {
  border-color: var(--gold-1);
  background: rgba(200,146,30,0.08);
  box-shadow: 0 0 0 1px rgba(168,116,32,0.2);
}

.market-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.market-cost {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-1);
  font-weight: 600;
  white-space: nowrap;
  overflow-wrap: anywhere;
}


/* ── Appointment blocks ──────────────────────────────────────────── */
.appointment-block { margin-bottom: var(--sp-4); }
.appointment-block.done { opacity: 0.65; }
.appointment-block.done .appt-label { color: var(--gold-2); }

.appt-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-2);
  margin-bottom: var(--sp-1);
}

.appt-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.appt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: var(--sp-2);
  align-items: start;
}

.appt-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.appt-column-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--umber-3);
}

@media (max-width: 720px) {
  .appt-grid { grid-template-columns: 1fr; }
}

.appt-select,
.revoke-select {
  width: 100%;
  padding: 9px 12px;
  background: var(--parch-0);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  color: var(--umber-1);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.appt-select:focus, .revoke-select:focus { outline: none; border-color: var(--parch-3); }
.appt-select option, .revoke-select option { background: var(--parch-0); color: var(--umber-1); }

.appt-btn {
  align-self: flex-start;
  min-height: 38px;
  padding: 7px 14px;
  background: rgba(168,116,32,0.10);
  border: 1px solid rgba(168,116,32,0.35);
  border-radius: var(--r-sm);
  color: var(--gold-1);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.12s;
}
.appt-btn:hover {
  background: rgba(168,116,32,0.18);
  border-color: var(--gold-1);
}
.appt-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Appt cooldown notice */
.appointment-block.has-self-lockout {
  padding: 8px;
  border: 1px solid rgba(160,48,48,0.20);
  border-radius: var(--r-sm);
  background: rgba(160,48,48,0.04);
}

.self-appoint-lockout {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 4px 0 7px;
  padding: 6px 8px;
  border: 1px solid rgba(160,48,48,0.25);
  border-radius: var(--r-sm);
  background: rgba(160,48,48,0.07);
  color: var(--crimson-1);
  font-size: 12px;
  line-height: 1.4;
}
.self-appoint-lockout-icon { font-weight: 700; flex-shrink: 0; }

/* ── Army Management ─────────────────────────────────────────────── */
.army-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.army-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 0;
  border-bottom: 1px solid rgba(168,116,32,0.12);
}
.army-row:last-child { border-bottom: none; }

.army-office {
  display: flex;
  flex: 1 1 160px;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.army-office span:first-child {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-1);
}

.army-office .title-token,
.army-office .title-token:first-child,
.army-office .province-token,
.army-office .province-token:first-child {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(20,8,0,0.55);
}

.army-count {
  font-size: 11px;
  color: var(--umber-2);
}

.army-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.army-dismiss { display: flex; align-items: center; gap: 5px; }

.army-dismiss-count {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  background: var(--parch-0);
  color: var(--umber-1);
  font-family: var(--font-body);
  font-size: 13px;
}

.btn-recruit {
  min-height: 34px;
  padding: 5px 10px;
  background: rgba(168,116,32,0.08);
  border: 1px solid rgba(168,116,32,0.30);
  border-radius: var(--r-sm);
  color: var(--gold-1);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.5px;
  transition: all 0.12s;
}
.btn-recruit:hover { background: rgba(168,116,32,0.16); border-color: var(--gold-1); }
.btn-recruit.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-dismiss {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(160,48,48,0.25);
  border-radius: var(--r-sm);
  background: rgba(160,48,48,0.07);
  color: var(--crimson-1);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  transition: all 0.12s;
}
.btn-dismiss:hover { background: rgba(160,48,48,0.13); }
.btn-dismiss.disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Orders Panel ─────────────────────────────────────────────────── */
.deploy-grid { display: flex; flex-direction: column; gap: var(--sp-2); }

.deploy-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 12px;
  background: var(--parch-0);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  box-shadow: var(--shadow-card);
}

.office-name {
  flex: 1;
  min-width: 90px;
  font-family: var(--font-body);
  color: var(--umber-1);
  font-weight: 500;
}

.troop-count {
  font-size: 11px;
  color: var(--umber-2);
}

.deploy-toggle {
  display: flex;
  min-width: min(100%, 150px);
  gap: 2px;
  background: rgba(168,116,32,0.08);
  border: 1px solid rgba(168,116,32,0.20);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.toggle-btn {
  padding: 4px 11px;
  border: none;
  background: transparent;
  color: var(--umber-3);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-body);
  transition: all 0.12s;
}
.toggle-btn.active {
  background: var(--parch-0);
  color: var(--umber-1);
  font-weight: 500;
  box-shadow: var(--shadow-card);
}
.toggle-btn:hover:not(.active) { color: var(--umber-2); }

.deploy-row-locked { opacity: 0.85; }
.deploy-toggle-locked .toggle-btn[disabled] {
  cursor: default;
  opacity: 1;
  font-style: italic;
  color: var(--umber-2);
}

/* Mercenaries */
.merc-hiring { display: flex; flex-direction: column; gap: var(--sp-1); }

.merc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 9px 12px;
  background: var(--parch-0);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-1);
}

.merc-controls {
  margin-left: auto;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 7px;
}

.merc-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--parch-3);
  background: var(--parch-1);
  color: var(--umber-1);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.12s;
}
.merc-btn:hover { border-color: var(--gold-1); background: var(--parch-0); }

.merc-count {
  min-width: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--umber-1);
}

.merc-total {
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-2);
}
.merc-total .over-budget { color: var(--crimson-1); font-weight: 600; }

/* Candidate buttons — share the cartouche grammar at row scale. */
.candidate-grid { display: flex; flex-direction: column; gap: var(--sp-2); }

.candidate-btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 10px 14px 11px;
  background-color: var(--player-color, var(--parch-3));
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,250,225,0.07) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(180deg, rgba(255,248,220,0.18) 0%, rgba(20,8,0,0.18) 100%);
  border: 4px solid var(--role-outline-color, var(--role-color, var(--empire-border)));
  border-radius: 3px;
  color: #fceec3;
  text-shadow: 0 1px 0 rgba(20,8,0,0.55);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  transition: filter 0.12s;
  text-align: left;
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.45),
    inset 0 1px 0 rgba(255,250,228,0.18),
    inset 0 -1px 0 rgba(20,8,0,0.22),
    var(--shadow-card);
}
.candidate-btn:hover { filter: brightness(1.06); }
.candidate-btn.selected {
  border-color: var(--role-outline-color, var(--role-color, var(--gold-1)));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 0 0 4px var(--role-outline-color, var(--role-color, var(--gold-1)));
}
.candidate-btn, .candidate-btn * { color: inherit; text-shadow: inherit; }

.candidate-crest {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.current-basileus-tag {
  margin-left: auto;
  white-space: normal;
  text-align: right;
  font-size: 9px;
  color: var(--gold-2);
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Primary Action Buttons ──────────────────────────────────────── */
.court-actions,
.orders-actions,
.resolution-actions {
  padding: var(--main-panel-pad);
}

.btn-confirm,
.btn-lock-orders,
.btn-continue,
.btn-new-game {
  width: 100%;
  min-height: var(--touch-target);
  padding: 11px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid rgba(168,116,32,0.55);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(200,146,30,0.20) 0%, rgba(168,116,32,0.10) 100%);
  color: var(--gold-1);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-inset), var(--shadow-card);
}
.btn-confirm:hover, .btn-lock-orders:hover, .btn-continue:hover, .btn-new-game:hover {
  background: linear-gradient(180deg, rgba(200,146,30,0.30) 0%, rgba(168,116,32,0.16) 100%);
  border-color: var(--gold-1);
  box-shadow: var(--shadow-inset), 0 4px 18px rgba(168,116,32,0.18);
}
.btn-confirm.disabled,
.btn-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Resolution Panel ─────────────────────────────────────────────── */
.war-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: var(--sp-2);
}

.empire-force { color: var(--gold-1); font-weight: 700; }
.vs { color: var(--umber-3); font-size: 12px; letter-spacing: 1px; }
.invader-force { color: var(--crimson-1); font-weight: 700; }

.war-outcome {
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px;
  border-radius: var(--r-sm);
  font-weight: 500;
}
.war-result.victory .war-outcome  { background: rgba(58,107,40,0.10);  color: var(--win); }
.war-result.defeat  .war-outcome  { background: rgba(160,48,48,0.10);  color: var(--crimson-1); }
.war-result.stalemate .war-outcome{ background: rgba(100,80,40,0.08);  color: var(--umber-2); }

.war-estimate {
  text-align: center;
  font-size: 12px;
  color: var(--umber-3);
  margin-bottom: 4px;
}

.coup-winner {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--umber-1);
  margin-bottom: var(--sp-2);
}

.vote-breakdown { font-size: 12px; }
.vote-row { padding: 2px 0; color: var(--umber-2); }

.empire-falls {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--crimson-1);
  letter-spacing: 2px;
  padding: var(--sp-3);
  background: rgba(160,48,48,0.08);
  border: 1px solid rgba(160,48,48,0.30);
  border-radius: var(--r-md);
  margin-top: var(--sp-3);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }

.title-reassignment-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.title-reassignment-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-1);
}

.resolution-error {
  min-height: 16px;
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--crimson-1);
  font-style: italic;
}

/* ── Scoring Panel ────────────────────────────────────────────────── */
.scoring-panel {
  padding: var(--sp-5) var(--sp-4);
}

.scoring-panel h3 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold-1);
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.score-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  background: var(--parch-0);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.score-row.winner {
  border-color: var(--gold-1);
  background: rgba(200,146,30,0.07);
  box-shadow: 0 4px 18px rgba(168,116,32,0.14);
}

.score-rank {
  font-family: var(--font-display);
  font-size: 18px;
  width: 28px;
  text-align: center;
  color: var(--umber-3);
}

.score-row.winner .score-rank { color: var(--gold-1); }

.score-dynasty {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--player-color, var(--umber-1));
  letter-spacing: 0.5px;
}

.score-breakdown {
  margin-left: auto;
  font-size: 11px;
  color: var(--umber-2);
}

.score-total {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold-1);
  min-width: 44px;
  text-align: right;
  font-weight: 700;
}

/* ── History Panel ────────────────────────────────────────────────── */
.history-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
}

.history-panel-count {
  font-size: 11px;
  color: var(--umber-3);
}

.history-panel-empty {
  padding: var(--sp-3);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-3);
  font-style: italic;
}

.history-panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
}

.history-entry-card {
  border: 1px solid var(--parch-2);
  border-radius: var(--r-md);
  background: rgba(255,252,240,0.9);
  box-shadow: var(--shadow-card);
}

.history-entry-card.ai-entry {
  border-left: 3px solid rgba(90,52,114,0.45);
}

.history-entry-expandable summary {
  list-style: none;
  cursor: pointer;
}
.history-entry-expandable summary::-webkit-details-marker { display: none; }

.history-entry-head {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 9px 10px 0;
}

.history-entry-round,
.history-entry-phase {
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(168,116,32,0.10);
  border: 1px solid rgba(168,116,32,0.18);
  color: var(--umber-3);
}

.history-entry-tag {
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(90,52,114,0.10);
  border: 1px solid rgba(90,52,114,0.20);
  color: var(--purple-0);
}

.history-entry-actor {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--umber-1);
  letter-spacing: 0.3px;
}

.history-entry-summary {
  padding: 5px 10px 9px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--umber-1);
}

.history-entry-detail {
  border-top: 1px solid rgba(168,116,32,0.12);
  padding: 0 10px 10px;
}

.history-subhead {
  margin-top: 10px;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-1);
}

.history-breakdown-group,
.history-breakdown-list,
.history-factor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-breakdown-block {
  padding: 8px;
  border-radius: var(--r-sm);
  background: rgba(168,116,32,0.06);
  border: 1px solid rgba(168,116,32,0.12);
}

.history-breakdown-head,
.history-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-1);
}

.history-breakdown-head {
  font-family: var(--font-display);
  font-size: 11px;
  margin-bottom: 4px;
}

.history-breakdown-note {
  font-size: 11px;
  color: var(--umber-2);
  font-style: italic;
}

.history-factor {
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: rgba(255,252,240,0.85);
  border: 1px solid rgba(168,116,32,0.12);
}
.history-factor.for     { border-left: 3px solid var(--win); }
.history-factor.against { border-left: 3px solid var(--crimson-1); }

.history-factor-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--umber-1);
}
.history-factor-value {
  float: right;
  font-size: 11px;
  color: var(--umber-2);
}
.history-factor-note {
  margin-top: 3px;
  font-size: 11px;
  color: var(--umber-2);
  line-height: 1.35;
}

/* ── Panel Empty / Spectator ─────────────────────────────────────── */
.panel-empty {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--umber-2);
}
.panel-empty h3 {
  font-family: var(--font-display);
  color: var(--gold-1);
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
}

/* Theme chips */
.dashboard-themes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.theme-chip {
  padding: 2px 9px;
  background: var(--parch-0);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 12px;
  border: 1px solid var(--parch-2);
  color: var(--umber-1);
}
.theme-chip.exempt {
  border-color: rgba(168,116,32,0.40);
  background: rgba(200,146,30,0.08);
  color: var(--gold-1);
}
.theme-values { color: var(--umber-3); margin-left: 3px; }

/* Dashboard province */
.dashboard-province {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--parch-0);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}
.dashboard-province-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 4px;
}
/* Province name + region are encoded by the cartouche itself
   (outline = region, background = owner). No wrapper styling needed. */
.dashboard-province-meta,
.dashboard-province-detail {
  font-size: 12px;
  color: var(--umber-2);
  line-height: 1.4;
}
.dashboard-province-detail + .dashboard-province-detail { margin-top: 2px; }

/* ── Map SVG Styles ──────────────────────────────────────────────── */
.adjacency-line {
  stroke: rgba(100,70,20,0.15);
  stroke-width: 0.2;
}

.province-shape {
  fill: rgba(230,218,190,0.25);
  fill-opacity: 1;
  stroke: none;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.18s, filter 0.18s;
}

.province-shape.imperial { stroke: none; }
.province-shape:hover, .province-shape.hovered { filter: brightness(1.04) saturate(0.95); }
.province-shape.occupied {
  fill: rgba(210,200,178,0.18);
  fill-opacity: 1;
}
.province-shape.church {
  /* Black — church land, unmistakable */
  fill: rgba(20, 20, 20, 0.82);
  fill-opacity: 1;
}
.province-shape.owned {
  /* Dynasty color mixed with warm parchment — saturated enough to read ownership clearly */
  fill: var(--owner-color, #888);
  fill: color-mix(in srgb, var(--owner-color, #888) 52%, rgba(240,228,195,0.48) 48%);
  fill-opacity: 1;
}
.province-shape.tax-exempt {
  filter: drop-shadow(0 0 1px rgba(154,112,16,0.65));
}
.province-shape.capital {
  /* Deep gold for Constantinople */
  fill: var(--capital-fill);
  fill: color-mix(in srgb, var(--capital-fill) 48%, rgba(255,245,210,0.52) 52%);
  fill-opacity: 1;
}
.province-shape.free {
  /* Muted amethyst — unowned themes, readable but not dominant */
  fill: var(--free-fill);
  fill: color-mix(in srgb, var(--free-fill) 45%, rgba(235,220,190,0.55) 55%);
  fill-opacity: 1;
}
.province-shape.selected,
.province-shape.selected:hover,
.province-shape.selected.hovered {
  fill-opacity: 1;
  filter: drop-shadow(0 0 1.2px rgba(200,146,30,0.75));
}

/* Province strokes live on the region-stroke layer only */
.province-shape,
.province-shape.imperial,
.province-shape.imperial:hover,
.province-shape:hover,
.province-shape.hovered,
.province-shape.occupied,
.province-shape.church,
.province-shape.owned,
.province-shape.tax-exempt,
.province-shape.capital,
.province-shape.free,
.province-shape.selected { stroke: none; }

.region-stroke {
  fill: none;
  stroke: var(--region-border, var(--empire-border));
  stroke-width: 2.6;
  stroke-opacity: 0.88;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke-width 0.18s, stroke-opacity 0.18s, stroke 0.18s;
}
.region-stroke.hovered  { stroke-width: 3.1; stroke-opacity: 1; }
.region-stroke.selected,
.region-stroke.selected.hovered {
  stroke-width: 3.5;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,0.25));
}

.province-hitbox {
  fill: #ffffff;
  fill-opacity: 0.001;
  stroke: none;
  cursor: pointer;
  pointer-events: all;
}

/* ── Map cartouches ──────────────────────────────────────────────────
   SVG counterpart of the HTML .province-token. Same visual grammar:
   outline = region color (--cart-border), fill = owner color (--cart-bg),
   gold-leaf inner hairline. Two stacked text lines: name / P-T-L.
   Built and laid out by mapRenderer.js. */
.map-cartouche { cursor: pointer; pointer-events: auto; }

.map-cart-bg {
  pointer-events: visiblePainted;
  fill: var(--cart-bg, var(--free-fill));
  stroke: var(--cart-border, var(--empire-border));
  stroke-width: 0.55;
  paint-order: stroke fill;
}
.map-cartouche.church .map-cart-bg { fill: #1a1a1a; }
.map-cartouche.occupied .map-cart-bg { fill: #625c52; opacity: 0.85; }
.map-cartouche.free .map-cart-bg { fill: var(--free-fill); }
.map-cartouche.capital .map-cart-bg { fill: var(--capital-fill); }

.map-cart-inner {
  fill: none;
  stroke: rgba(240,200,90,0.55);
  stroke-width: 0.12;
}
.map-cartouche.tax-exempt .map-cart-inner { stroke: rgba(240,200,90,0.85); stroke-width: 0.18; }

.map-cart-id,
.map-cart-name,
.map-cart-values {
  fill: #ffffff;
  text-shadow: 0 0.05px 0 rgba(20,8,0,0.6);
  dominant-baseline: auto;
  alignment-baseline: baseline;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke fill;
}
.map-cart-id    { font-family: var(--font-display); font-weight: 700; font-size: 1.6px; letter-spacing: 0.18px; }
.map-cart-name  { font-family: var(--font-display); font-weight: 600; font-size: 1.45px; letter-spacing: 0.06px; }
.map-cart-values{ font-family: var(--font-body);    font-weight: 500; font-size: 1.15px; opacity: 0.92; }

/* Capital cartouche: text leans into the imperial gold a touch more */
.map-cartouche.is-capital .map-cart-id,
.map-cartouche.is-capital .map-cart-name { fill: #ffffff; }

/* Selected: stronger gold inner ring + slight scale-in via transform */
.map-cartouche.selected .map-cart-inner {
  stroke: var(--gold-3);
  stroke-width: 0.22;
}
.map-cartouche.selected .map-cart-bg { stroke-width: 0.75; }

.officer-badge { stroke: rgba(46,30,15,0.9); stroke-width: 0.3; }

/* Invasion route */
.invasion-route {
  fill: none;
  stroke: var(--invasion-lost-border);
  stroke-width: 0.95;
  stroke-dasharray: 1.8 1.2;
  opacity: 0.96;
  animation: marchingAnts 1s linear infinite;
}
@keyframes marchingAnts { to { stroke-dashoffset: -3; } }

.invasion-marker {
  fill: var(--invasion-lost-border);
  opacity: 0.96;
}

.invasion-cartouche {
  pointer-events: none;
}

.invasion-cartouche-bg {
  fill: var(--invasion-lost-fill);
  fill-opacity: 0.92;
  stroke: var(--invasion-lost-border);
  stroke-width: 0.7;
  paint-order: stroke fill;
}

.invasion-cartouche-inner {
  fill: none;
  stroke: rgba(255,250,228,0.78);
  stroke-width: 0.14;
}

.invasion-cartouche-name,
.invasion-cartouche-strength {
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--invasion-lost-border);
  paint-order: stroke fill;
  stroke: rgba(255,250,228,0.46);
  stroke-width: 0.08;
  pointer-events: none;
}

.invasion-cartouche-name {
  font-family: var(--font-display);
  font-size: 2.15px;
  font-weight: 700;
  letter-spacing: 0.12px;
}

.invasion-cartouche-strength {
  font-family: var(--font-body);
  font-size: 1.72px;
  font-weight: 600;
}

.province-threat-overlay {
  display: none;
  visibility: hidden;
  fill: url(#threat-hatch);
  fill-opacity: 1;
  stroke: var(--region-border, #2e1e0f);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.province-threat-overlay.active {
  display: inline !important;
  visibility: visible !important;
}

/* Map dim & bg */
#layer-bg-map { opacity: 0.28; filter: saturate(0.6); }
.map-dim-overlay { opacity: 0.06; pointer-events: none; }
#layer-bg-map .fil0, #layer-bg-map .fil2 { fill: #a2d9f7 !important; }
#layer-bg-map .fil1, #layer-bg-map .fil7 { fill: #ffffff !important; }
#layer-bg-map .fil6, #layer-bg-map .fil11 { fill: #d9dada !important; }
#layer-bg-map .str0, #layer-bg-map .str1, #layer-bg-map .str2 { stroke: #003399 !important; }

/* ── Player & Province Cartouches ─────────────────────────────────────
   Shared visual grammar: a small Byzantine-style nameplate.
   • Background = owner / dynasty color  (--cart-bg)
   • Outline   = region / role color    (--cart-border)
   • Inner gold hairline (var(--gold-3)) suggests a leafed manuscript
     border; subtle parchment-linen overlay tones the dynasty color
     down to feel "painted onto vellum" rather than flat web-coloured.
   ────────────────────────────────────────────────────────────────── */
.player-role-name,
.province-token,
.title-token {
  --cart-bg: var(--parch-3);
  --cart-border: var(--empire-border);

  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 11px 6px;
  border: 5px solid var(--cart-border);
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(20,8,0,0.55);
  white-space: nowrap;
  overflow-wrap: anywhere;
  vertical-align: baseline;

  background-color: var(--cart-bg);
  background-image:
    /* fine linen texture */
    repeating-linear-gradient(
      45deg,
      rgba(255,250,225,0.07) 0 1px,
      transparent 1px 5px
    ),
    /* soft top→bottom shading: highlight, ink */
    linear-gradient(
      180deg,
      rgba(255,248,220,0.18) 0%,
      rgba(20,8,0,0.18) 100%
    );

  box-shadow:
    /* gold-leaf inner hairline (sits between the role outline and the fill) */
    inset 0 0 0 1px rgba(240,200,90,0.45),
    /* upper highlight + lower ink shadow → engraved feel */
    inset 0 1px 0 rgba(255,250,228,0.16),
    inset 0 -1px 0 rgba(20,8,0,0.24),
    /* settled-on-parchment lift */
    0 1px 0 rgba(255,248,220,0.22),
    0 1px 2px rgba(46,30,15,0.20);
}

.player-role-name {
  --cart-bg: var(--player-color, var(--parch-3));
  --cart-border: var(--role-outline-color, var(--role-color, var(--empire-border)));
}

.province-token {
  --cart-bg: var(--province-owner-color, var(--free-fill));
  --cart-border: var(--province-region-color, var(--empire-border));
}

/* Title cartouches (Basileus, Strategos of X, Bishop of Y, …).
   Outline encodes the role's region; background is the holder's dynasty
   color, or parchment-cream when the title is vacant. */
.title-token.vacant {
  --cart-bg: var(--parch-0);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(20,8,0,0.55);
}
.title-token.vacant .v,
.title-token.vacant .province-token-values { color: #ffffff; }

/* Compact title-token shares the same compact rules as province-token. */
.title-token.compact {
  font-size: 11px;
  padding: 4px 9px 5px;
  letter-spacing: 0.3px;
}

/* Compact variant — used inline inside flowing label text
   ("Strategos of <badge>"). Slightly tighter but keeps the same
   role-color outline so the region remains legible. */
.province-token.compact {
  font-size: 11px;
  padding: 4px 9px 5px;
  letter-spacing: 0.3px;
}

.province-token-values {
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.88;
  padding-left: 5px;
  margin-left: 1px;
  border-left: 1px solid rgba(240,200,90,0.32);
  color: #ffffff;
}

/* State variants */
.province-token.occupied { opacity: 0.78; filter: saturate(0.6); }
.province-token.tax-exempt {
  /* extra outer gold ring — like a wax sigil over the cartouche */
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.70),
    inset 0 1px 0 rgba(255,250,228,0.18),
    inset 0 -1px 0 rgba(20,8,0,0.24),
    0 0 0 1.5px rgba(240,200,90,0.40),
    0 1px 2px rgba(46,30,15,0.20);
}
.province-token.church {
  /* church land is black-on-black; lean on the gold hairline for legibility */
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
}

.player-role-name *,
.province-token *,
.title-token * {
  color: #ffffff;
}

/* ── Choice grids (player picker / province picker) ─────────────────── */
.player-choice-grid,
.province-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.player-choice-btn,
.province-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s;
}

.player-choice-btn:hover,
.province-choice-btn:hover { filter: brightness(1.06); }

.player-choice-btn.selected .player-role-name,
.province-choice-btn.selected .province-token {
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.70),
    inset 0 1px 0 rgba(255,250,228,0.20),
    inset 0 -1px 0 rgba(20,8,0,0.24),
    0 0 0 1.5px var(--gold-4),
    0 0 0 4px var(--cart-border, var(--gold-1)),
    0 1px 4px rgba(46,30,15,0.24);
}

.province-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.province-choice-grid [data-role="theme-choice-buttons"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* Revocation choice grid — same cartouche pattern as player/province
   choice grids. Each button wraps one or two cartouches that describe
   what the revocation will affect. */
.revocation-shell { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: 6px; }
.revocation-group { display: flex; flex-direction: column; gap: 4px; }
.revocation-group-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--umber-3);
}
.revocation-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.revocation-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.12s;
}
.revocation-choice-btn:hover { filter: brightness(1.06); }
.revocation-choice-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.revocation-choice-btn.selected .player-role-name,
.revocation-choice-btn.selected .province-token,
.revocation-choice-btn.selected .title-token {
  box-shadow:
    inset 0 0 0 1px rgba(240,200,90,0.70),
    inset 0 1px 0 rgba(255,250,228,0.20),
    inset 0 -1px 0 rgba(20,8,0,0.24),
    0 0 0 1.5px var(--gold-4),
    0 0 0 4px var(--cart-border, var(--gold-1)),
    0 1px 4px rgba(46,30,15,0.24);
}

/* ── Nested-cartouche flattening ─────────────────────────────────────
   When a player cartouche appears INSIDE a container that already
   carries the same player+role visual language (the dashboard panel
   head, the player tab, the candidate row, the score row), the inner
   chip dissolves into plain inline text. This avoids the chip-in-chip
   double-bordered look while preserving identical typography. */
.player-tab .player-role-name,
.candidate-btn .player-role-name,
.score-row .player-role-name,
.player-dashboard .sidebar-panel-head .player-role-name,
.player-dashboard .sidebar-panel-badge .player-role-name {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: inherit;
  text-shadow: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.35px;
}

/* ── Game Over Overlay ────────────────────────────────────────────── */
#gameOverOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,16,5,0.78);
  backdrop-filter: blur(6px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.game-over-content {
  text-align: center;
  padding: var(--sp-6);
  max-width: 480px;
}

.game-over-content h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--crimson-1);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.game-over-content p {
  font-family: var(--font-body);
  color: rgba(240,225,195,0.85);
  font-size: 16px;
  margin-bottom: var(--sp-4);
}

.game-over-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.game-over-subnote {
  font-size: 13px;
  color: rgba(200,180,140,0.7);
  max-width: 360px;
  margin: 0 auto;
}

.btn-review-game {
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(200,146,30,0.45);
  background: rgba(200,146,30,0.12);
  color: rgba(240,215,155,0.9);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.btn-review-game:hover {
  background: rgba(200,146,30,0.20);
  border-color: var(--gold-3);
}

/* ── Setup Dialog ─────────────────────────────────────────────────── */
#setupDialog {
  position: fixed;
  inset: 0;
  background: rgba(26,14,4,0.82);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
}

.setup-card {
  background:
    linear-gradient(160deg, var(--parch-0) 0%, var(--parch-1) 100%);
  border: 1px solid var(--parch-3);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  width: 440px;
  max-width: 90vw;
  max-height: calc(var(--game-vh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-shadow:
    0 40px 80px rgba(26,14,4,0.35),
    0 0 0 1px rgba(200,146,30,0.15),
    inset 0 1px 0 rgba(255,250,235,0.7);
}

/* Setup title with elegant ruled lines */
.setup-card h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-1);
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(168,116,32,0.15);
  /* Decorative ruling lines either side of the title */
  position: relative;
}
.setup-card h1::before,
.setup-card h1::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-1), transparent);
  margin: var(--sp-3) 0;
  opacity: 0.5;
}

.setup-subtitle {
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-2);
  font-style: italic;
  margin-bottom: var(--sp-5);
  letter-spacing: 0.3px;
}

.setup-field { margin-bottom: var(--sp-4); }

.setup-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold-1);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.setup-field select,
.setup-field input {
  min-height: var(--touch-target);
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,252,240,0.85);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  color: var(--umber-1);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-shadow: inset 0 1px 3px rgba(168,116,32,0.06);
}
.setup-field select:focus,
.setup-field input:focus {
  outline: none;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px rgba(168,116,32,0.10), inset 0 1px 3px rgba(168,116,32,0.04);
}
.setup-field select option { background: var(--parch-0); color: var(--umber-1); }

.setup-hint {
  margin: 4px 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--umber-2);
  font-style: italic;
  line-height: 1.45;
}

.setup-ai-roster { display: grid; gap: var(--sp-2); }
.setup-ai-seat { display: grid; gap: 4px; }
.setup-ai-seat span { font-size: 12px; color: var(--umber-2); }

.setup-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.setup-actions .btn-start { margin-top: 0; }

/* Primary CTA — the "Begin" button */
.btn-start {
  width: 100%;
  min-height: var(--touch-target);
  padding: 13px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  border: 1px solid rgba(168,116,32,0.65);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(200,146,30,0.22) 0%, rgba(168,116,32,0.10) 100%);
  color: var(--gold-0);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,0.55),
    0 6px 24px rgba(168,116,32,0.12);
}
.btn-start:hover {
  background: linear-gradient(180deg, rgba(200,146,30,0.32) 0%, rgba(168,116,32,0.18) 100%);
  border-color: var(--gold-0);
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,0.65),
    0 8px 28px rgba(168,116,32,0.20);
}
.btn-start:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target);
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--parch-2);
  background: rgba(168,116,32,0.04);
  color: var(--umber-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-secondary-link:hover {
  border-color: var(--parch-3);
  color: var(--gold-1);
  background: rgba(168,116,32,0.08);
}
.btn-secondary-link:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Multiplayer ─────────────────────────────────────────────────── */
.multiplayer-lobby-card { width: min(720px, calc(100vw - 40px)); }

.multiplayer-room-meta {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(240,228,198,0.6);
  border: 1px solid var(--parch-2);
}

.room-code {
  font-family: "Courier New", monospace;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--umber-1);
}

.multiplayer-seat-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.multiplayer-seat {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--parch-2);
  background: rgba(255,252,240,0.75);
}
.multiplayer-seat.is-you {
  border-color: rgba(58,107,40,0.35);
  background: rgba(58,107,40,0.04);
}
.multiplayer-seat-copy { display: flex; flex-direction: column; gap: 4px; }
.multiplayer-seat-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-seat-kind, #btnLeaveRoom {
  border: 1px solid rgba(168,116,32,0.3);
  background: rgba(168,116,32,0.08);
  color: var(--gold-1);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.12s;
}
.btn-seat-kind:hover, #btnLeaveRoom:hover {
  background: rgba(168,116,32,0.15);
  border-color: var(--gold-1);
}

.multiplayer-banner {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(240,228,198,0.7);
  border: 1px solid var(--parch-2);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--umber-1);
}
.multiplayer-banner.error {
  color: var(--crimson-1);
  border-color: rgba(160,48,48,0.30);
  background: rgba(160,48,48,0.06);
}

@media (max-width: 820px) {
  .multiplayer-seat { flex-direction: column; align-items: flex-start; }
  .multiplayer-seat-actions { justify-content: flex-start; }
}




/* ── Breathing layout pass ──────────────────────────────────────────
   Keeps the SVG canvas locked to the map aspect ratio, widens the usable
   interface column, and gives repeated controls/cards consistent space. */
@media (min-width: 981px) {
  #mapContainer {
    justify-content: center;
  }

  .sidebar-panel + .sidebar-panel,
  #historyPanel + #actionPanel {
    margin-top: 0;
  }
}

.sidebar-panel-head {
  min-height: var(--touch-target);
}

.sidebar-panel-badge,
.dashboard-list-value,
.score-breakdown,
.current-basileus-tag {
  max-width: 48%;
}

.fold-body,
.court-section,
.orders-section,
.resolution-section,
.phase-header,
.court-actions,
.orders-actions,
.resolution-actions {
  min-width: 0;
}

.toggle-btn,
.merc-btn,
.btn-recruit,
.btn-dismiss,
.btn-seat-kind,
#btnLeaveRoom,
.inline-button {
  min-height: 36px;
}

.market-item,
.gift-item,
.candidate-btn,
.deploy-row,
.merc-row,
.history-entry-card,
.dashboard-list-row,
.dashboard-opinion-row,
.finance-card,
.theme-chip,
.score-row {
  min-width: 0;
}

@media (max-width: 1180px) and (min-width: 981px) {
  #app {
    grid-template-columns: minmax(320px, 1fr) minmax(460px, var(--sidebar-width));
  }

  .deploy-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .deploy-toggle {
    width: 100%;
  }
}

/* ── Responsive Ergonomics & Firefox/Mobile Compatibility ─────────────
   The desktop game stays two-column. Narrow screens become a scrollable
   map-first document so the sidebar no longer crushes the map. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #playerTabBar { background: rgba(240,228,198,0.98); }
  #setupDialog { background: rgba(26,14,4,0.92); }
  #gameOverOverlay { background: rgba(30,16,5,0.88); }
}

button,
select,
input,
summary { touch-action: manipulation; }

button,
select,
input,
textarea {
  font-size: 1rem;
}

.sidebar-panel-body,
.action-shell,
.history-panel,
.player-dashboard,
.market-item,
.gift-item,
.candidate-btn,
.deploy-row,
.merc-row,
.finance-card,
.dashboard-list-row,
.dashboard-opinion-row {
  font-size: 1rem;
  line-height: 1.5;
}


/* ── Interface readability scale ──────────────────────────────────── */
#sidebar {
  font-size: 17px;
}

#sidebar > :not(#playerTabBar),
#sidebar .sidebar-panel-body,
#sidebar .history-panel-list,
#sidebar .action-shell {
  font-size: 1.05rem;
  line-height: 1.58;
}

.sidebar-panel-kicker { font-size: 10.5px; }
.sidebar-panel-title { font-size: 13px; }
.sidebar-panel-subtitle { font-size: 13px; }
.sidebar-panel-badge { font-size: 12px; }

.section-hint,
.dashboard-list-note,
.dashboard-list-value,
.dashboard-province-detail,
.dashboard-province-meta,
.dashboard-opinion-debt,
.theme-detail,
.market-detail,
.gift-detail,
.deploy-note,
.merc-note,
.history-entry-body,
.history-entry-meta,
.fold-summary-note,
.war-estimate,
.section-empty {
  font-size: 0.98rem;
  line-height: 1.55;
}

.dashboard-list-title,
.market-title,
.gift-title,
.theme-title,
.appt-label,
.deploy-title,
.merc-title,
.history-entry-title,
.fold-title,
.candidate-name {
  font-size: 1.05rem;
  line-height: 1.35;
}

.stat-label,
.dashboard-tag,
.current-basileus-tag,
.finance-label,
.score-label,
.vote-breakdown,
.badge-detail {
  font-size: 0.82rem;
}

.btn-confirm,
.btn-lock-orders,
.btn-continue,
.btn-new-game,
button.deploy-toggle,
button.market-buy,
button.gift-button,
button.merc-button {
  font-size: 0.9rem;
}

@media (max-width: 1180px) {
  :root { --sidebar-width: clamp(460px, 46vw, 620px); --main-panel-pad: 17px; }
  .game-title { letter-spacing: 3px; }
  .phase-badge { padding-inline: 10px; }
}

@media (max-width: 980px) {
  body {
    overflow: auto;
    min-height: var(--game-vh);
    height: auto;
  }

  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto clamp(330px, 50svh, 540px) auto;
    grid-template-areas:
      "topbar"
      "map"
      "sidebar";
    min-height: var(--game-vh);
    height: auto;
  }

  #topBar {
    min-height: var(--topbar-height);
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #invasionDisplay {
    margin-left: 0;
    flex: 1 1 220px;
    min-width: 0;
  }

  .empire-fallen-banner {
    max-width: 100%;
    white-space: normal;
  }

  #mapArea {
    min-height: 320px;
    border-bottom: 1px solid var(--parch-3);
  }

  #sidebar {
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--parch-3);
    box-shadow: 0 -8px 24px rgba(80,50,10,0.08);
    padding: var(--main-panel-pad);
  }

  #playerDashboard,
  #historyPanel,
  #actionPanel { min-width: 0; }

  .sidebar-panel-body,
  .player-dashboard .sidebar-panel-body,
  .action-shell .sidebar-panel-body { padding: var(--main-panel-pad); }

  .history-panel-list { padding: var(--main-panel-pad); }
}

@media (max-width: 720px) {
  :root {
    --main-panel-pad: 14px;
    --touch-target: 46px;
  }

  #app {
    grid-template-rows: auto clamp(300px, 46svh, 500px) auto;
  }

  #topBar {
    gap: 7px 10px;
    align-items: center;
  }

  .game-title {
    font-size: 15px;
    letter-spacing: 2.5px;
    flex: 1 1 130px;
  }

  #roundDisplay,
  .phase-badge,
  .connection-badge {
    font-size: 10px;
    letter-spacing: 1px;
  }

  #invasionDisplay {
    order: 10;
    flex-basis: 100%;
    font-size: 12px;
    white-space: normal;
  }

  #mapArea::before { inset: 10px 10px calc(68px + env(safe-area-inset-bottom)); border-radius: 14px; }
  #mapContainer { padding: 10px; }
  .game-map { border-radius: 12px; }

  #playerTabBar { gap: 8px; padding: 12px; }
  .player-tab {
    flex-basis: clamp(124px, 45%, 180px);
    min-width: min(100%, 124px);
    padding: 8px 10px;
    font-size: 12px;
    border-width: 3px;
  }
  .tab-finance { font-size: 12px; }

  .sidebar-panel-head,
  .history-panel-head {
    padding: 12px var(--main-panel-pad);
  }

  .sidebar-panel-badge { white-space: normal; text-align: right; }
  .fold-summary { align-items: flex-start; flex-wrap: wrap; }
  .fold-summary-meta { flex-wrap: wrap; justify-content: flex-end; }

  .dashboard-header,
  .army-row,
  .score-row,
  .multiplayer-seat {
    align-items: stretch;
  }

  .dashboard-list-row,
  .dashboard-opinion-row,
  .army-row,
  .merc-row,
  .score-row {
    flex-wrap: wrap;
  }

  .dashboard-list-row,
  .dashboard-opinion-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
  }

  .dashboard-list-value,
  .dashboard-opinion-meta,
  .score-breakdown,
  .score-total {
    text-align: right;
  }

  .theme-market,
  .gift-options,
  .appt-grid,
  .finance-grid {
    grid-template-columns: 1fr;
  }

  .market-item,
  .gift-item,
  .deploy-row,
  .merc-row,
  .candidate-btn {
    padding: 10px 12px;
  }

  .deploy-row,
  .merc-row { align-items: stretch; }
  .deploy-toggle,
  .merc-controls { margin-left: 0; width: 100%; }
  .toggle-btn { flex: 1; min-height: 38px; }

  .army-controls,
  .army-dismiss {
    width: 100%;
    justify-content: stretch;
  }
  .army-controls > *,
  .army-dismiss > * { flex: 1; }
  .army-dismiss-count { width: auto; min-width: 64px; }

  .player-choice-grid,
  .province-choice-grid,
  .revocation-choice-grid {
    gap: 7px;
  }

  .player-role-name,
  .province-token,
  .title-token {
    border-width: 3px;
    padding: 5px 9px 6px;
    white-space: normal;
    line-height: 1.35;
  }

  .province-token-values {
    display: inline-block;
    padding-left: 4px;
  }

  #setupDialog { align-items: flex-start; }
  .setup-card {
    width: min(100%, 520px);
    max-width: 100%;
    padding: 24px 18px;
  }
  .setup-card h1 { font-size: 25px; letter-spacing: 4px; }
  .setup-field select,
  .setup-field input,
  .setup-ai-seat select {
    min-height: var(--touch-target);
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  #app { grid-template-rows: auto clamp(280px, 44svh, 440px) auto; }
  .game-title { flex-basis: 100%; }
  #roundDisplay { margin-right: auto; }
  .phase-badge { padding: 4px 8px; }
  .connection-badge { padding: 4px 8px; }
  .dashboard-header { flex-wrap: wrap; }
  .gold-display { align-items: flex-start; width: 100%; }
  .dashboard-list-row,
  .dashboard-opinion-row { grid-template-columns: 1fr; }
  .dashboard-list-value,
  .dashboard-opinion-meta,
  .score-breakdown,
  .score-total { text-align: left; }
  .score-row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .score-breakdown, .score-total { grid-column: 2; }
  .court-actions,
  .orders-actions,
  .resolution-actions,
  .scoring-panel { padding: var(--main-panel-pad); }
}


@media (max-width: 720px) {
  #sidebar {
    gap: var(--sp-3);
  }

  .sidebar-panel {
    border-radius: var(--r-md);
  }

  .sidebar-panel-badge,
  .dashboard-list-value,
  .score-breakdown,
  .current-basileus-tag {
    max-width: 100%;
  }

  .deploy-row {
    grid-template-columns: 1fr;
  }

  .merc-controls,
  .deploy-toggle {
    justify-content: stretch;
  }

  .merc-btn,
  .merc-count {
    flex: 1;
  }

  .market-cost {
    margin-left: 0;
  }
}

/* ── Scrollbar (global) ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--parch-1); }
::-webkit-scrollbar-thumb { background: var(--parch-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-1); }

/* ── Misc small utilities ──────────────────────────────────────────── */
.panel-collapsed .sidebar-panel-body { display: none; }

#multiplayerActions.setup-actions { flex-direction: row; flex-wrap: wrap; }
#multiplayerActions .btn-start { flex: 1; min-width: 120px; }

#setupMultiplayerError { color: var(--crimson-1); font-style: normal; }

/* Fold sections inside a dynasty-colored dashboard should blend with the role color */
.player-dashboard .fold-section {
  background: rgba(0,0,0,0.12);
  border-color: var(--role-outline-color, var(--role-color, rgba(255,255,255,0.16)));
}
.player-dashboard .fold-summary {
  background: rgba(0,0,0,0.10);
}
.player-dashboard .fold-summary:hover {
  background: rgba(0,0,0,0.18);
}
.player-dashboard .fold-body {
  border-top-color: rgba(255,255,255,0.12);
}
.player-dashboard .fold-summary-title { color: rgba(255,255,255,0.85); }
.player-dashboard .fold-summary-badge,
.player-dashboard .fold-summary-note { color: rgba(255,255,255,0.6); }
.player-dashboard .finance-card,
.player-dashboard .fold-section .finance-card {
  background: rgba(255,255,255,0.14) !important;
  border-color: var(--role-outline-color, var(--role-color, rgba(255,255,255,0.14))) !important;
}
.player-dashboard .finance-label,
.player-dashboard .fold-section .finance-label {
  color: rgba(255,255,255,0.6) !important;
}
.player-dashboard .finance-card strong,
.player-dashboard .fold-section .finance-card strong {
  color: rgba(255,255,255,0.95) !important;
}
.player-dashboard .dashboard-list-row,
.player-dashboard .dashboard-opinion-row {
  background: rgba(255,255,255,0.12);
  border-color: var(--role-outline-color, var(--role-color, rgba(255,255,255,0.12)));
}
.player-dashboard .dashboard-list-title { color: rgba(255,255,255,0.95); }
.player-dashboard .dashboard-list-note { color: rgba(255,255,255,0.65); }
.player-dashboard .dashboard-list-value { color: rgba(255,255,255,0.95); }
.player-dashboard .dashboard-empty { color: rgba(255,255,255,0.55); }

/* Sidebar section divider — thin gold rule */
.sidebar-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--parch-3) 30%, var(--parch-3) 70%, transparent 100%);
  margin: 0;
  opacity: 0.6;
}

/* Score row winner crown */
.score-row.winner .score-rank::after {
  content: ' ☩';
  font-size: 14px;
  color: var(--gold-1);
}

/* Tighter label sizing for very small stat icons */
.stat-icon { font-size: 9px; }

/* Action panel gets a slight warm tint header */
#actionPanel > .court-panel > .phase-header,
#actionPanel > .orders-panel > .phase-header,
#actionPanel > .resolution-panel > .phase-header {
  background: linear-gradient(180deg, rgba(240,228,195,0.7) 0%, transparent 100%);
}

/* Ensure setup-card ai roster selects match overall style */
.setup-ai-seat select {
  width: 100%;
  padding: 7px 10px;
  background: rgba(255,252,240,0.85);
  border: 1px solid var(--parch-2);
  border-radius: var(--r-sm);
  color: var(--umber-1);
  font-family: var(--font-body);
  font-size: 13px;
}
.setup-ai-seat select:focus {
  outline: none;
  border-color: var(--gold-1);
}