:root {
  --bg: #f4f0e6; --panel: #fff; --ink: #2a2419; --muted: #6b6455;
  --line: #d8cfba; --accent: #8a4b2b; --accent-ink: #fff;
  --gold: #b8860b; --stone: #555; --food: #7a8c3a; --books: #4a5b8c;
  --good: #2f7a3d; --bad: #a8342a;
  font-family: Georgia, 'Times New Roman', serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1c1811; --panel: #2a2419; --ink: #ece5d3; --muted: #a49a83; --line: #4a4230; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
#app { max-width: 1100px; margin: 0 auto; padding: 1rem; }
h1, h2, h3 { font-variant: small-caps; letter-spacing: .02em; }
button {
  font-family: inherit; background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 4px; padding: .4rem .8rem; cursor: pointer; font-size: .95rem;
}
button:disabled { opacity: .4; cursor: default; }
button.secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
input, select { font-family: inherit; padding: .3rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
input.color { width: 2.6rem; padding: .15rem; cursor: pointer; }
a { color: var(--accent); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }

.res { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2rem; margin-right: .7rem; white-space: nowrap; }
.res .n { font-weight: bold; }
/* This round's projected change, wrapped onto its own line right under the icon+total. */
.res .proj { flex-basis: 100%; font-size: .72rem; color: var(--muted); }
.g::before { content: "🪙"; } .s::before { content: "🪨"; } .f::before { content: "🌾"; }
.b::before { content: "📖"; } .vp::before { content: "🏆"; } .ms::before { content: "⚔️"; } .st::before { content: "⚖️"; }

.board {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; padding: .6rem;
  border-radius: 8px; background: #2a2419 url(images/board/progress-board-bg.jpg) center/cover;
}
.board .col-hidden { visibility: hidden; }
.card {
  border: 1px solid var(--line); border-radius: 6px; padding: .4rem; background: var(--bg);
  font-size: .82rem; min-height: 4.5rem; display: flex; flex-direction: column; gap: .2rem; cursor: pointer;
}
.card:hover { border-color: var(--accent); }
.card.selected { outline: 2px solid var(--accent); }
.card .price { font-size: .72rem; color: var(--muted); }
/* Empty/hidden progress-board cells keep a full card's footprint so a row that's been bought
   out doesn't collapse and shrink the whole board image under it. */
.card.empty { visibility: hidden; aspect-ratio: 2 / 3.45; }

/* Card art. Only ~300 of ~420 cards have a scan; the rest render as .cardtext instead. */
.card { padding: 0; overflow: hidden; }
.cardart { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.cardcap {
  font-size: .72rem; text-align: center; padding: .15rem .2rem;
  background: var(--panel); border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardtext { padding: .4rem; }
/* Capped rather than full aspect-ratio: your own board is the thing you interact with most,
   so keeping all 5 slots plus their controls on screen matters more than large art here.
   Hover gives the full-size read. object-position keeps the title band visible when cropped. */
.slotart {
  width: 100%; height: 120px; object-fit: cover; object-position: top;
  border-radius: 4px; margin-bottom: .2rem; display: block;
}

/* Full-size hover preview — the board thumbnails are too small to read icons/numbers on. */
#cardpreview {
  position: fixed; top: 1rem; right: 1rem; z-index: 100; display: none;
  pointer-events: none; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
#cardpreview img { width: 320px; max-height: 88vh; object-fit: contain; border-radius: 8px; }
/* Artless cards preview as a big readable text card. */
.preview-text-card {
  width: 320px; aspect-ratio: 2 / 3; background: #f2ecd9; color: #2a2419;
  border: 3px solid #8a6b3f; border-radius: 12px; padding: 1.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .8rem;
}
.preview-text-card .ptc-name { font-size: 1.5rem; font-weight: bold; }
.preview-text-card .ptc-stats { font-size: 1.05rem; line-height: 1.5; }

/* Event previews stack two half-images into one solid card — halve the height cap so the
   pair still fits the viewport together. */
#cardpreview img + img { margin-top: -2px; }
#cardpreview img:not(:only-child) { max-height: 44vh; }
@media (max-width: 900px) { #cardpreview { display: none !important; } }
.row-label { font-size: .75rem; color: var(--muted); align-self: center; text-align: right; padding-right: .3rem; }

.player-row { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.player-row:last-child { border-bottom: none; }
.player-row.turn { background: color-mix(in srgb, #2bef1b 35%, transparent); }
.player-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.badge { font-size: .72rem; padding: .1rem .4rem; border-radius: 3px; background: var(--line); margin-left: .3rem; }

/* Worker counts live on the board image itself now (.slot-badge) — these are controls only. */
.slotline { padding: .2rem 0; font-size: .85rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.slotline select { font-size: .8rem; }
.slotline button { font-size: .72rem; padding: .15rem .4rem; }
.playerpick { font: inherit; font-size: 1.3rem; font-variant: small-caps; background: none; border: none; color: inherit; padding: 0; }

.log { max-height: 220px; overflow-y: auto; font-size: .82rem; color: var(--muted); }
.log div { padding: .1rem 0; border-bottom: 1px dotted var(--line); }

.actionbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.error { color: var(--bad); font-weight: bold; }

.turnline { font-size: 1.2rem; font-weight: bold; margin: .2rem 0 .4rem; }
.turnline.over { color: var(--bad); }
/* What the current player is waiting on, inline next to their ▶ in the row list. */
.waiting { font-size: .85rem; font-weight: normal; color: var(--muted); }
.hint { color: var(--muted); font-size: .85rem; }

.linklist li { margin-bottom: .3rem; }
.playerform { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: .4rem; margin-bottom: .4rem; align-items: center; }

/* Nation picker: show the actual board so people choose on what it gives them. */
.playerrow { border: 1px solid var(--line); border-radius: 6px; padding: .5rem; margin-bottom: .6rem; }
.boardpick img { width: 100%; border-radius: 4px; display: block; }
.boardpick .power { font-size: .82rem; margin-top: .3rem; color: var(--muted); }

/* Whichever player's board is on screen — yours by default, or anyone clicked in the row list
   below — shown full width above the interactive slots. */
.playerboard-wrap { position: relative; margin: .5rem 0; }
/* Viewing someone ELSE's board: unmistakable orange frame + tag so nobody acts on the wrong mat */
.playerboard-wrap.other-board { outline: 4px solid #e65100; outline-offset: -2px; border-radius: 6px; }
.playerboard-wrap.other-board::after {
  content: "viewing another player's board"; position: absolute; top: 0; right: 0;
  background: #e65100; color: #fff; font-size: .72rem; font-weight: bold;
  padding: .15rem .5rem; border-radius: 0 6px 0 6px;
}
.playerboard { width: 100%; border-radius: 6px; display: block; }
/* Big board on the left, every other player's mat as a live thumbnail strip on the right.
   Click a thumbnail to swap it into the big view. Overlays are all %-positioned so they scale. */
.board-stage.with-thumbs { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: .8rem; align-items: start; }
.board-main { min-width: 0; }
.board-thumbs { display: flex; flex-direction: column; gap: .5rem; }
.board-thumb { cursor: pointer; border: 2px solid var(--line); border-radius: 6px; padding: .3rem .4rem; background: var(--bg); }
.board-thumb:hover { border-color: var(--accent); }
.board-thumb.turn { border-color: #2f7a3d; box-shadow: 0 0 0 2px #2f7a3d55; }
.thumb-name { font-size: .78rem; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-res { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playerboard-wrap.thumb { margin: .2rem 0; pointer-events: none; }
.playerboard-wrap.thumb .slot-badge { font-size: .5rem; padding: 0 .25rem; border-width: 1px; }
.playerboard-wrap.thumb .slot-card-text { font-size: .4rem; }
button.small { padding: .15rem .5rem; font-size: .8rem; vertical-align: middle; }
@media (max-width: 1000px) {
  .board-stage.with-thumbs { grid-template-columns: 1fr; }
  .board-thumbs { flex-direction: row; flex-wrap: wrap; }
  .board-thumb { flex: 1 1 200px; }
}
/* Total workers on the population track, as a chit sitting on the board — the printed board
   has a real population track but we don't have its per-nation pixel coordinates, so this is a
   single summary chit rather than a token per worker. */
.worker-chit {
  /* Sits on the population track (bottom-left), where the eye already goes for workers. */
  position: absolute; top: 91%; left: 23.5%; transform: translate(-50%, -50%);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem;
  font-weight: bold; box-shadow: 0 1px 4px rgba(0,0,0,.35); z-index: 3;
}
/* Per-slot and "available" worker chits, positioned directly on the board image (see
   SLOT_BADGE_X/Y in app.js for calibration notes). */
.slot-badge {
  position: absolute; transform: translate(-50%, -50%); background: #222; color: #fff;
  border: 2px solid #fff; border-radius: 999px; padding: .1rem .45rem; font-size: .8rem;
  font-weight: bold; box-shadow: 0 1px 4px rgba(0,0,0,.5); white-space: nowrap;
}
.slot-badge.available { background: var(--accent); }
/* Resource/VP totals sit right under the board image, not scattered further down the panel. */
.boardres { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .2rem .6rem; margin-bottom: .3rem; }
.boardres-group { display: flex; gap: 0 .3rem; flex-wrap: wrap; align-items: start; }
.boardres-group.mid { justify-content: center; }
.boardres-group.right { justify-content: flex-end; }

/* Main Board — the shared physical board (war/stability/MS tracks), tabbed against the
   Progress Board since both occupy the same "board" panel slot in the real game. */
/* Growth phase: worker options stacked left, the three (more common) bonus picks bigger on
   the right. */
.growth-layout { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.growth-workers { display: flex; flex-direction: column; gap: .5rem; }
.growth-bonuses { display: flex; gap: .8rem; align-items: center; }
.growth-bonuses button { font-size: 1.2rem; padding: .8rem 1.4rem; }

/* Full-width board, standings underneath (was a small 380px image with a side column). */
/* Board layout toggle: stacked (default) vs side by side. Side mode widens the page so both
   boards get real room; below ~1000px it falls back to stacked regardless. */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.2rem; }
.layout-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.layout-toggle button { padding: .25rem .6rem; font-size: .85rem; }
.aid .toolbar { margin-bottom: .5rem; }
body.layout-side #app { max-width: 1900px; }
.boards.side { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
.boards.side > .boards-col { min-width: 0; display: flex; flex-direction: column; }
/* End Turn bar sits at the very bottom of the right column, level with the Main Board's foot. */
.boards.side .pending-turn.in-column { margin-top: auto; }
.players-facts { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .boards.side { display: block; } }

.mainboard-wrap { display: block; }
.mainboard-imgwrap { position: relative; width: 100%; }
.mainboard { width: 100%; border-radius: 6px; display: block; }
.mainboard-status { margin-top: .8rem; }
.mainboard-status .player-row { max-width: 480px; }
.mainboard-status h3 { margin: 0 0 .4rem; font-size: 1rem; }
/* Player pins on the Stability and Military Strength tracks (see stabilityMarkerPos/
   msMarkerPos in app.js for how these coordinates were calibrated). */
.board-pin {
  position: absolute; width: 39px; height: 39px; border-radius: 50%;
  border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.6);
  transition: transform .15s ease; z-index: 1;
}
/* Tied players on the same Stability/MS cell: dots overlap tightly at rest (right on the true
   cell, not sliding onto a neighbor), fan out sideways on hover so each is readable. A native
   title on the cluster (every name, joined) covers touch/no-hover as a fallback. */
.pin-cluster { position: absolute; }
/* At rest each stacked pin peeks out 5px right/up of the one under it, with a deeper shadow,
   so a stack is visibly a stack (fans out fully on hover). */
.pin-cluster .board-pin {
  left: 0; top: 0;
  transform: translate(calc(-50% + var(--i) * 5px), calc(-50% - var(--i) * 5px));
  box-shadow: 0 2px 5px rgba(0,0,0,.75);
}
.pin-cluster:hover .board-pin { transform: translate(calc(-50% + var(--i) * 44px), -50%); z-index: 20; }
/* Current age/round marker — no player color of its own, so it reads distinctly from the
   per-player pins sharing the same track area. */
.board-pin.round-marker { background: var(--accent); width: 34px; height: 34px; border-color: #222; }
/* Active War token: rides the MS-track pin cluster at the war's strength cell so tied player
   pins fan out from under it on hover like any other tie. */
.board-pin.war-pin {
  background: #111; color: #fff; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  border-color: #c33;
}
/* Architect chits sitting on the board's actual Architects space. */
.architect-chit {
  position: absolute; transform: translate(-50%, -50%); font-size: .9rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
/* The face-up Event Card on its printed spot — halves stacked like the real card. */
.event-on-board { position: absolute; display: flex; flex-direction: column; }
.event-on-board .event-half { width: 100%; display: block; border-radius: 3px; }
.event-on-board .event-half-text { background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px; font-size: .6rem; padding: .2rem; text-align: center; }

/* The current Event Card sits LEFT of Architects in the header's top-right, so reading order
   matches cause and effect: the event is drawn first, then it feeds the architect count next
   to it (was the other way round and read backwards — Gabriel flagged it). Two half-scans
   stacked vertically reconstruct the full physical card (they're crops of one printed card). */
.header-panel { position: relative; padding-right: 320px; }
.event-card-corner {
  position: absolute; top: .8rem; right: calc(150px + 2rem); width: 150px;
  display: flex; flex-direction: column; border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
/* Active war strength — top-right of the header (event/architect tiles moved to the board) */
.war-corner {
  position: absolute; top: .8rem; right: .8rem;
  background: #b71c1c; color: #fff; border-radius: 6px; padding: .4rem .7rem;
  text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: help;
}
.war-corner .corner-title { font-variant: small-caps; font-size: .8rem; }
.war-corner .war-strength { font-size: 1.5rem; font-weight: bold; }
/* "Available Architects" — already includes the event's bonus by the time this renders (see
   finishMaintenance() in setup.ts: event is drawn, THEN architectsAvailable is computed from
   it), the corner-title clarifies that so nobody has to take it on faith. Background is the
   board's own Architects space (Socrates + chevron slots); the icons get a dark pill behind
   them so they stay readable over the light parchment art. */
.architects-corner {
  position: absolute; top: .8rem; right: .8rem; width: 150px;
  border-radius: 6px; padding: .4rem .5rem; text-align: center; overflow: hidden;
  background: url(images/board/architects-bg.jpg) center/cover; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.architects-corner .corner-title {
  font-variant: small-caps; font-size: .8rem; margin-bottom: .2rem;
  color: #fff; background: rgba(0,0,0,.55); border-radius: 3px; padding: 0 .3rem; display: inline-block;
}
.architects-corner .corner-icons {
  font-size: 1.3rem; letter-spacing: .05em; line-height: 1.2;
  background: rgba(0,0,0,.45); border-radius: 999px; display: inline-block; padding: 0 .5rem;
}
.architects-corner .corner-icons .hint { color: #eee; }
.event-card-corner .event-half { width: 100%; display: block; }
.event-card-corner .event-half-text { font-size: .75rem; border: 1px solid var(--line);
  padding: .3rem; text-align: center; background: var(--panel); }
@media (max-width: 700px) {
  .header-panel { padding-right: 0; }
  .event-card-corner { position: static; width: 150px; margin-top: .4rem; }
  .architects-corner { position: static; width: 150px; margin-top: .4rem; }
}

/* Wonder construction + discovery status — the "architect station" next to the mat. */
.wonder-station { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; margin: .4rem 0; font-size: .9rem; }
.wonder-station button { margin-left: .5rem; }
.slot-badge.construction { background: var(--accent); }
/* The wonder being built, laid onto the mat's "Wonder under construction" slot. */
.construction-art {
  position: absolute; left: 86.3%; top: 6.5%; width: 11%; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* The advisor you've hired, laid onto the mat's printed Advisor box — this was missing
   entirely before (buying an advisor updated the state but never showed up on the board). */
.advisor-art {
  position: absolute; left: 1.5%; top: 6%; width: 12.5%; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Active Dynasty card sits over the printed Special box (only boards that have one — Persia B
   and Japan B don't, their rule text lives in the panel below instead). */
.dynasty-art {
  position: absolute; left: 73.6%; top: 5%; width: 10.6%; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); z-index: 2;
}
.dynasty-art.slot-card-text { height: 28%; }
/* Dynasties panel on your board */
.turmoil-panel { margin: .6rem 0; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 6px; }
.turmoil-panel h3 { margin: 0 0 .4rem; font-size: 1rem; }
.dyn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }
.dyn-card { flex: 1 1 200px; max-width: 320px; border: 2px solid var(--line); border-radius: 6px; padding: .4rem .5rem; background: var(--bg); font-size: .85rem; }
.dyn-card.active { border-color: #2f7a3d; box-shadow: 0 0 0 2px #2f7a3d55; }
.dyn-card.played { opacity: .55; }
.dyn-card img { display: block; width: 90px; float: right; margin: 0 0 .3rem .5rem; border-radius: 3px; }
.dyn-name { font-weight: bold; margin-bottom: .2rem; }
.dyn-text { color: var(--muted); font-size: .8rem; }
.dyn-card button { margin-top: .4rem; font-size: .85rem; padding: .3rem .6rem; }
.turmoil-actions { margin-top: .5rem; font-size: .9rem; }
.dyn.active { font-weight: bold; color: var(--good); }
.dyn.played { text-decoration: line-through; }
/* Each slot's current card, laid onto its printed slot — identical to the print until a
   purchase covers the slot, at which point the mat shows the real occupant. */
.slot-card-art {
  position: absolute; top: 6%; width: 12.5%; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* "Action taken — End Turn / Take back", pinned top-right of your board panel */
.playerboard-panel { position: relative; }
.pending-turn.board-top { position: absolute; top: .7rem; right: .8rem; margin: 0; z-index: 5; }
@media (max-width: 900px) { .pending-turn.board-top { position: static; } }
.pending-turn.in-column { margin: 0 0 1rem; padding: .7rem 1rem; font-size: 1.05rem; text-align: center; }
.pending-turn.has-extra { background: #ffe58a; color: #3a2a00; border-color: #c99a00; }

/* "Action taken — End Turn or Undo" banner */
.pending-turn {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border: 1px solid var(--accent); border-radius: 6px;
  padding: .5rem .8rem; margin: .4rem 0; font-weight: bold;
}
/* Your-turn cue: whole page tints, so it's obvious even from across the room */
body.my-turn { background: #2bef1b; }

/* Big error toast — action errors must be unmissable */
#errtoast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%) translateY(-150%);
  background: #b71c1c; color: #fff; font-size: 1.05rem; font-weight: bold;
  padding: .7rem 1.2rem; border-radius: 8px; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); transition: transform .25s ease;
  max-width: 90vw;
}
#errtoast.show { transform: translateX(-50%) translateY(0); }

/* Invisible hover zone over each printed mat slot (hover-to-enlarge) */
.slot-hover-zone { position: absolute; top: 6%; width: 12.5%; height: 36%; }
.slot-hover-zone.row2-zone { top: 45%; width: 10.5%; height: 34%; }

/* Card names in the log — hover to preview */
.log-card { text-decoration: underline dotted; cursor: help; }

/* Mid-resolution event decision panel — the game is paused on this, make it pop */
.choices-panel { border: 2px solid var(--accent); }

/* Card ability buttons */
.abilities { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; margin: .4rem 0; }
.abilities h3 { margin: 0 0 .3rem; font-size: .95rem; }
.ability-row { margin: .25rem 0; }

/* Architects count in the Main Board status section */
.architects-total { margin: .3rem 0; }

/* Architect chits on the board's Architects space — brown squares with a chevron, matching
   the icon printed on the cards. */
.architect-square {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; background: #5d4a32; color: #cbb98f;
  border: 2px solid #3e3021; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: help;
}

/* Active war: banner + board marker */
.war-status { color: #b71c1c; margin: .3rem 0; }
.war-marker {
  /* Big black war token on the MS track — the physical game's black marker. */
  position: absolute; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #111; color: #fff;
  border: 3px solid #d4c398; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; z-index: 6; cursor: help; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
/* The bought War card on the board's printed War space. */
.war-on-board {
  position: absolute; left: 56.2%; top: 74.2%; width: 15.9%;
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 4;
}
/* Row-2 mat slots: 2 Colony + 5 Wonder boxes (calibrated on america-B.jpg, same layout on
   every board). Bought colonies / completed wonders land here. */
.row2-card-art {
  position: absolute; top: 45%; width: 10.5%; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Artless slot occupant: a card-shaped text tile covering the printed slot. */
.slot-card-text {
  aspect-ratio: 2 / 3; background: #f2ecd9; color: #2a2419; border: 1px solid #b3a67f;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .72rem; font-weight: bold; padding: .2rem;
}
.swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; }
.meeples { letter-spacing: -.1em; font-size: .95rem; }

/* Player-aid / turn reference. */
.aid h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.aid ol, .aid ul { margin: .2rem 0 .6rem; padding-left: 1.3rem; }
.aid li { margin-bottom: .25rem; font-size: .9rem; }
.aid p { margin: .5rem 0 .2rem; }
.aid .auto { font-size: .75rem; background: var(--line); padding: .05rem .4rem; border-radius: 3px; color: var(--muted); }
.aid .you { font-size: .75rem; background: var(--accent); color: var(--accent-ink); padding: .05rem .4rem; border-radius: 3px; }
/* Persia's third Colony box lives in the top row of the mat. */
.row2-card-art.top-colony { top: 6%; }

/* Optional house-rule variants on the create-game form */
.variants { margin-top: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 6px; }
.variants label { display: block; margin-top: .4rem; font-size: .88rem; line-height: 1.35; }
.variants input { margin-right: .3rem; }

/* Log lines carry their player's colour: full strength on the left border, mixed toward the
   normal ink colour for the text itself (raw player colours are unreadable on the dark theme). */
.logline.owned { border-left: 3px solid transparent; padding-left: .45rem; }

/* "Use Galileo — this purchase is free" toggle in the buy panel */
.freebuy { display: block; margin: .4rem 0; font-size: .88rem; }
.freebuy.on { color: var(--good); font-weight: bold; }

/* Card Abilities sit at the top of your own board panel now — they are an ACTION, easy to miss
   when buried under the board and the deploy controls. */
.abilities { border: 2px solid var(--accent); border-radius: 6px; padding: .5rem .7rem; margin: .5rem 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.abilities h3 { margin: 0 0 .4rem; }

/* End-of-game scoreboard */
.scorepanel { border: 2px solid var(--accent); }
.scoretable { border-collapse: collapse; width: 100%; margin: .5rem 0; font-size: .88rem; }
.scoretable th, .scoretable td { border-bottom: 1px solid var(--line); padding: .3rem .5rem; text-align: left; }
.scoretable th.num, .scoretable td.num { text-align: right; }
.scoretable td.total { font-weight: bold; }
.scoretable tr.winner { background: color-mix(in srgb, var(--good) 18%, transparent); font-weight: bold; }

/* Second copy of the End Turn bar at the foot of your board panel: the top-right one is off
   screen once you have scrolled down to the deploy controls and the Dynasties row. */
.pending-turn.board-bottom { position: static; margin: .8rem 0 0; text-align: center; font-size: 1.05rem; }