/* War Table skin: vellum panels, brass fittings and walnut leather over the
   classic layout. Loaded last; it restyles surfaces only, never layout or ids. */
:root {
  --vellum: #e9d8b0; --vellum-light: #f6ecd2; --vellum-deep: #d6bf8e; --vellum-edge: #b89a64;
  --ink: #2c2017; --ink-soft: #5a4532; --ink-faint: #7f6b52;
  --brass: #b48b3c; --brass-light: #e6c873; --brass-dark: #6c4f1f;
  --walnut: #2a1e15; --walnut-2: #3a2a1d; --walnut-3: #513b27;
  --table-light: #f1e9d8; --table-mid: #e6dbc3; --table-edge: #d3c3a2;
  --oxblood: #8a2b1f; --verdigris: #2f6b63;
  --display-face: "Hoefler Text", "Baskerville", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
  --text-face: Palatino, "Palatino Linotype", "Book Antiqua", "Iowan Old Style", "Noto Serif", Georgia, serif;
  --leather: linear-gradient(#45321f, #2d2016);
  --parchment: linear-gradient(170deg, var(--vellum-light), var(--vellum) 70%, #e2cc9e);
  --brass-fill: linear-gradient(#f0d488, #c79c45 55%, #a27a31);
  --brass-ring: 0 0 0 1px var(--brass-dark), inset 0 0 0 1px rgba(255, 233, 170, .35);
  --panel-lift: 0 10px 26px rgba(14, 8, 3, .42);
  font-family: var(--text-face);
  color: var(--ink);
}
body { font-family: var(--text-face); color: var(--ink); background: var(--table-light); font-variant-numeric: lining-nums; }
button, input, select, textarea, summary { font-family: inherit; }
button, summary { letter-spacing: -.01em; }
h1, h2, h3, .eyebrow, #turn-label, .player-name, #human-name,
.primary-button, .new-game-heading, .turn-dock-title, .city-overview strong {
  font-family: var(--display-face);
  letter-spacing: .01em;
}
.eyebrow { letter-spacing: .14em; color: var(--brass-dark); }

/* ---- the table the diorama stands on ---- */
/* A soft, light linen table. Finished games keep the winner's colour from
   style.css. The sky mist is replaced by the table; it also hung 42px below
   the frame, letting focus scroll the HUD off the top of phones. */
.board-frame { overflow: clip; }
body[data-world] .board-frame::before { display: none; }
body:not([data-match-result="winner"], [data-match-result="draw"]) .board-frame {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 252, 244, .9), transparent 58%),
    repeating-linear-gradient(90deg, rgba(120, 96, 60, .025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(120, 96, 60, .02) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 45%, var(--table-light) 30%, var(--table-mid) 72%, var(--table-edge)) !important;
}

/* ---- parchment chips along the top ---- */
.topbar .text-button, #stats-button, .stats-button {
  background: linear-gradient(#fbf4e2, #ecdcb6) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px rgba(108, 79, 31, .55), 0 3px 10px rgba(80, 56, 20, .18) !important;
}
.topbar .text-button svg, #stats-button svg { color: var(--brass-dark); stroke: currentColor; }
.turn-summary {
  background: var(--parchment) !important;
  border-color: var(--vellum-edge) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), inset 0 0 0 1px rgba(255, 244, 214, .7), 0 4px 12px rgba(10, 6, 2, .35) !important;
  color: var(--ink) !important;
}
.turn-summary .round-label { color: var(--oxblood) !important; }

/* ---- kingdom card ---- */
.player-card.human-card, .scorebar .player-card {
  background: var(--parchment) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(108, 79, 31, .55), 0 4px 12px rgba(80, 56, 20, .18) !important;
}
.player-card.human-card * { color: inherit; }
.player-card.human-card small, .player-card.human-card .player-meta, #human-army { color: var(--ink-soft) !important; }
.player-card .player-resource strong, .player-card .player-resource b { color: var(--brass-dark) !important; }
.player-avatar { box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px var(--walnut) !important; }
.matchbar, #turn-subtitle { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 250, 238, .8); }

/* ---- bottom command dock ---- */
.turn-dock, .control-dock {
  background: var(--parchment) !important;
  border-color: var(--vellum-edge) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), inset 0 1px 0 rgba(255, 248, 225, .9), var(--panel-lift) !important;
}
.turn-dock-title { color: var(--ink) !important; }
.turn-dock-status { color: var(--ink-soft) !important; }
#assist-turn, .assist-turn, .turn-assist summary, .next-unit, .navigation-icon, #recruit-types-toggle {
  background: linear-gradient(#fbf3de, #ead7ab) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 var(--brass-dark), 0 3px 8px rgba(40, 24, 8, .2) !important;
}
.assist-choice-panel {
  background: var(--parchment) !important;
  border-color: var(--brass) !important;
  color: var(--ink) !important;
}

/* ---- brass primary actions (never tribe-tinted) ---- */
.primary-button, #end-turn-button {
  background: var(--brass-fill) !important;
  color: #2a1a0c !important;
  border-color: var(--brass-dark) !important;
  text-shadow: 0 1px 0 rgba(255, 238, 190, .55);
  box-shadow: inset 0 1px 0 rgba(255, 246, 210, .85), inset 0 -2px 0 rgba(90, 60, 18, .35), 0 0 0 1px var(--brass-dark), 0 5px 12px rgba(20, 10, 2, .35) !important;
}
.primary-button:disabled, #end-turn-button:disabled { filter: grayscale(.55) brightness(.92); }
.outline-button {
  background: linear-gradient(#fbf3de, #efdfb8) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
}

/* ---- city and unit panel ---- */
.selection-controls {
  background: var(--parchment) !important;
  border-color: var(--vellum-edge) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), inset 0 1px 0 rgba(255, 248, 225, .9), var(--panel-lift) !important;
}
.city-menu-tabs button {
  background: rgba(255, 248, 228, .55) !important;
  color: var(--ink-soft) !important;
  border-color: rgba(108, 79, 31, .3) !important;
  box-shadow: none !important;
}
.city-menu-tabs button[aria-selected="true"], .city-menu-tabs button[aria-pressed="true"], .city-menu-tabs button.active {
  background: linear-gradient(#fffaf0, #f1e2bd) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
  box-shadow: inset 0 -3px 0 var(--brass), 0 0 0 1px rgba(108, 79, 31, .5), 0 2px 6px rgba(80, 56, 20, .15) !important;
}
.city-menu-tabs button[aria-selected="true"] .interface-icon { color: var(--brass-dark) !important; }

/* ---- rally and unit orders ---- */
.control-dock .army-panel .order-buttons button, .control-dock .order-target button, .rally-picker .order-buttons button, .rally-target button, .army-panel .troop-orders-toggle, .formation-choices button {
  font-family: var(--text-face);
  background: linear-gradient(#fbf4e2, #ecdcb6) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(108, 79, 31, .45) !important;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 0 rgba(108, 79, 31, .2) !important;
  font-weight: 700;
}
.control-dock .army-panel .order-buttons button, .rally-picker .order-buttons button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; padding: 5px 2px; font-size: 13px; line-height: 1.1;
}
.order-buttons .order-icon {
  width: 20px; height: 20px; fill: none; stroke: var(--order-tint, currentColor);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Icons share the mission colours drawn on the map. */
[data-order="attack"], [data-rally-order="attack"] { --order-tint: #9a3a2c; }
[data-order="defend"], [data-rally-order="defend"] { --order-tint: #5a4a96; }
[data-order="explore"], [data-rally-order="explore"] { --order-tint: #8a6420; }
[data-order="hold"], [data-rally-order="hold"] { --order-tint: #2f6b63; }
.control-dock .army-panel .order-buttons button[aria-pressed="true"], .rally-picker .order-buttons button[aria-pressed="true"], .formation-choices button[aria-pressed="true"] {
  background: var(--brass-fill) !important;
  color: #2a1a0c !important;
  border-color: var(--brass-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 246, 210, .85), inset 0 -2px 0 rgba(90, 60, 18, .3), 0 0 0 1px var(--brass-dark) !important;
}
.control-dock .army-panel .order-buttons button[aria-pressed="true"] .order-icon, .rally-picker .order-buttons button[aria-pressed="true"] .order-icon { stroke: #2a1a0c; }
.city-menu-status, .army-mission span { color: var(--ink-soft) !important; }
:focus-visible { outline-color: #9a6b1f !important; }
.recruit-figure { box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px rgba(42, 30, 21, .5), 0 4px 10px rgba(30, 18, 6, .3) !important; background-color: #efe0bb !important; }
.recruit-price { background: var(--brass-fill) !important; color: #2a1a0c !important; border-color: var(--brass-dark) !important; }

/* ---- dialogs and the start screen ---- */
.game-dialog {
  background: var(--parchment) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), 0 0 0 4px rgba(42, 30, 21, .9), 0 0 0 5px var(--brass), 0 24px 60px rgba(8, 4, 1, .6) !important;
}
.game-dialog::backdrop { background: rgba(20, 12, 6, .62); }
.game-dialog.start-screen {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 252, 244, .9), transparent 60%),
    linear-gradient(var(--table-light), var(--table-mid)) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.start-screen .start-header h1 { color: var(--ink) !important; }
.start-screen .start-header p, .start-screen .start-header h1 span { color: var(--ink-soft) !important; }
.start-screen .start-header .eyebrow { color: var(--brass-dark) !important; }
.start-screen .continue-panel { background: none !important; border: 0 !important; box-shadow: none !important; }
.start-screen .new-game-section, .start-screen .start-entry-actions .outline-button {
  background: var(--parchment) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), inset 0 1px 0 rgba(255, 248, 225, .9), 0 10px 24px rgba(6, 3, 1, .45) !important;
}
.tribe-pickers button[aria-pressed="true"], .tribe-pickers button[aria-checked="true"], .tribe-pickers .selected {
  background: rgba(255, 248, 228, .7) !important;
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), 0 3px 8px rgba(40, 24, 8, .2) !important;
}
.tribe-halo { opacity: .55; filter: sepia(.5) saturate(1.2); }
.tribe-about-arrow { stroke: var(--brass-dark); }
.seat-setup-row, .multiplayer-card {
  background: rgba(255, 248, 228, .6) !important;
  border-color: rgba(108, 79, 31, .35) !important;
}
.dialog-close {
  background: linear-gradient(#fbf4e2, #ecdcb6) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
}
select, input[type="text"], input[type="number"] {
  background-color: #fbf4e0 !important;
  border-color: var(--brass) !important;
  color: var(--ink) !important;
}

/* The unit card reads as one sheet of parchment: orders sit on the card. */
.control-dock[data-focus="unit"] .army-panel, .control-dock[data-focus="unit"] .selection-controls .army-panel {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
}
.unit-close span { border-color: var(--brass) !important; background: linear-gradient(#fbf4e2, #ecdcb6) !important; color: var(--ink) !important; }
.squad-sheet {
  background: var(--parchment) !important;
  border-color: var(--vellum-edge) !important;
  box-shadow: 0 0 0 1px var(--brass-dark), var(--panel-lift) !important;
}
.squad-sheet-heading>button { color: var(--brass-dark); }

/* ---- watching bots: one row of brass controls ---- */
.spectator-controls:not([hidden]) { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; }
.spectator-steps { display: flex; gap: 8px; }
.watch-play {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  border: 1px solid var(--brass-dark); background: var(--brass-fill); color: #2a1a0c; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 246, 210, .85), inset 0 -2px 0 rgba(90, 60, 18, .35), 0 0 0 1px var(--brass-dark), 0 5px 12px rgba(20, 10, 2, .35);
}
.watch-play .watch-icon { width: 26px; height: 26px; fill: currentColor; }
.watch-play[data-playing="true"] .play, .watch-play:not([data-playing="true"]) .pause { display: none; }
.watch-step, .watch-speed {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 13px;
  border: 1px solid var(--brass); border-radius: 22px; background: linear-gradient(#fbf3de, #efdfb8); color: var(--ink);
  font: 600 13px/1 var(--text-face); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 250, 232, .9), 0 2px 5px rgba(40, 24, 8, .16);
}
.watch-step svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.watch-speed { min-width: 54px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.watch-play:disabled, .watch-step:disabled, .watch-speed:disabled { filter: grayscale(.6); opacity: .5; cursor: default; }
.watch-play:focus-visible, .watch-step:focus-visible, .watch-speed:focus-visible { outline: 3px solid #078dbc; outline-offset: 2px; }
@media (max-width: 359px) { .watch-step span { display: none; } .watch-step { padding: 0 12px; } }
#watch-speed[hidden] { display: none !important; }
.board-frame[data-layout="sides"] .spectator-controls:not([hidden]) { flex-direction: column; align-items: stretch; }
.board-frame[data-layout="sides"] .watch-play { align-self: center; }
.board-frame[data-layout="sides"] .spectator-steps { flex-direction: row; }
.board-frame[data-layout="sides"] .watch-step { flex: 1; }

/* Speed menu: four speeds in one row above the pill. */
.watch-speed-menu { margin: 0; padding: 6px; gap: 6px; border: 1px solid var(--brass); border-radius: 26px; background: var(--parchment); box-shadow: var(--panel-lift); }
.watch-speed-menu:popover-open { display: flex; }
.watch-speed-menu button { min-width: 52px; min-height: 44px; border: 1px solid transparent; border-radius: 22px; background: transparent; color: var(--ink); font: 700 14px/1 var(--text-face); font-variant-numeric: tabular-nums; cursor: pointer; }
.watch-speed-menu button[aria-checked="true"] { background: var(--brass-fill); border-color: var(--brass-dark); color: #2a1a0c; }
.watch-speed-menu button:focus-visible { outline: 3px solid #078dbc; outline-offset: 1px; }