:root {
  /* Page colours as light-dark(light, dark), in the same warm "pastel stone" family as the
     terrain (colours.js), never cool greys. The theme follows the system unless the
     Theme picker sets data-theme="light" or "dark" on <html>. */
  color-scheme: light dark;
  --bg: light-dark(#f6f3ec, #171513);
  --card: light-dark(#ffffff, #211f1c);
  --ink: light-dark(#26231f, #ebe5da);
  --muted: light-dark(#776f63, #a39b8e);
  --line: light-dark(#e5e1d8, #38342f);
  --edge: light-dark(#cfc9bb, #4d4840);         /* buttons, inputs, menus */
  --raised: light-dark(#ffffff, #2a2723);       /* button face */
  --hover: light-dark(#f3f0e8, #35312c);
  --soft: light-dark(#f1efe9, #302c28);         /* small tags, code */
  --field: light-dark(#faf8f3, #14120f);        /* read-only text fields */
  --picked: light-dark(#fffbea, #3a3418);
  --pill: light-dark(#dcfce7, #163a24);
  --pill-ink: light-dark(#14532d, #a7f3c0);
  --capt-bg: light-dark(#fae8ff, #4a1650);
  --skill-bg: light-dark(#ede9fe, #2e2550);
  --skill-ink: light-dark(#4c1d95, #c4b5fd);
  --skill-accent: light-dark(#6d28d9, #a78bfa);
  --shadow: light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .5));
  /* The board keeps the same colours in both themes: its art sits on its own dark table. */
  --hit: #b91c1c;
  --danger: #c026d3;   /* capturable / attack that would capture */
  --table: #262320;    /* board background, also the gap between tiles: warm charcoal, dark enough that minefields stand out */
  --good: #15803d;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Text colours off the board get lighter in the dark theme so they stay readable. */
.panel, .hover-info, .menu, .dock, .topbar {
  --hit: light-dark(#b91c1c, #f87171);
  --danger: light-dark(#c026d3, #e879f9);
  --good: light-dark(#15803d, #4ade80);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }

/* ---- full-screen game: board, with whose turn and the menu button over its top corners,
        and the dock (what you can do now) beside or under it. Nothing on the page scrolls.
        The board's size comes from the window alone, never from what the dock holds: the dock
        has a fixed size and scrolls inside, so the board doesn't jump when the cards change. ---- */
html, body { height: 100%; }
body { overflow: hidden; }
.game {
  --board-ratio: 500 / 490;   /* the board's viewBox (ui.js mount): height / width */
  --dock-min: 180px;          /* narrow screens: the least height left for the dock */
  --side: clamp(300px, 30vw, 400px); /* wide screens: the dock's width */
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-areas: "board" "dock";
  /* Narrow screens: the board gets the height its width needs (or all but --dock-min), the dock the rest. */
  grid-template-rows: min(calc(100vw * var(--board-ratio)), calc(100dvh - var(--dock-min))) minmax(0, 1fr);
  background: var(--table);
}
#board {
  grid-area: board; width: 100%; height: 100%; min-height: 0; display: block;
  /* Touch: dragging a unit must not scroll or zoom the page, select the tile, flash the tap
     highlight or open the long-press menu. The page never scrolls anyway. */
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  pointer-events: none; /* the board underneath stays clickable between the two */
}
.topbar > * { pointer-events: auto; }
.status-pill {
  background: var(--card); color: var(--ink);
  border-left: 5px solid; border-radius: 8px;
  padding: 5px 11px; font-size: 14px;
  box-shadow: 0 2px 8px var(--shadow);
}
/* The phase on a second line, so the pill stays narrow enough to sit beside the board's top row. */
.status-phase { display: block; font-size: 11.5px; }
.menu-btn { font-weight: 600; box-shadow: 0 2px 8px var(--shadow); white-space: nowrap; }
.pop-out { margin-left: auto; } /* beside the Menu button */
.pop-out[hidden] { display: none; }

.dock {
  grid-area: dock;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 8px 12px;
}
.dock-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: flex-start; }
.dock-cards:empty { display: none; }
.dock .card { flex: 1 1 320px; max-width: 560px; padding: 8px 12px; }
.dock .card h2 { margin-bottom: 6px; }
.dock .hint { margin: 6px 0; }
.hover-info {
  max-width: 1128px; margin: 6px auto 0;
  padding: 2px 4px;
  font-size: 12.5px; color: var(--ink);
}
@media (hover: none) { .hover-info { display: none; } } /* nothing to hover on a touch screen */

/* Wide screens: the dock is a column down the right, the board fills the rest at full height. */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .game {
    grid-template-areas: "board dock";
    grid-template-columns: minmax(0, 1fr) var(--side);
    grid-template-rows: minmax(0, 1fr);
  }
  .topbar { right: var(--side); } /* over the board only */
  .dock { display: flex; flex-direction: column; border-top: 0; border-left: 1px solid var(--line); }
  .dock-cards { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .dock .card { flex: none; max-width: none; }
  .hover-info { margin: auto 0 0; padding-top: 8px; } /* at the foot of the column */
}

/* Small squarish windows (an X post's player card, a small browser window): the board takes all
   but a short strip, the dock's cards shrink to their buttons (the strip scrolls for the rest),
   and the status and menu shrink into the empty corners beside the hexagonal board. */
@media (aspect-ratio >= 3/4) and (width < 760px) and (height < 800px),
       (3/4 <= aspect-ratio < 1) and (height < 800px) {
  .game { --dock-min: 104px; }
  .topbar { padding: 6px; }
  .status-pill { font-size: 12.5px; padding: 4px 9px; border-left-width: 4px; }
  .status-phase { font-size: 11px; }
  .status-verb { display: none; } /* "Blue (you)" */
  .menu-btn { padding: 5px 10px; }
  .menu-label { display: none; }
  .hover-info { display: none; }
  .dock { padding: 6px 8px; }
  .dock-cards { gap: 6px; }
  .dock .card { padding: 6px 8px; font-size: 12.5px; min-width: 0; } /* the picks scroll inside it */
  .dock button { padding: 4px 9px; font-size: 12.5px; }
  .dock .build > h2, .dock .actions > h2, .dock .hint.how { display: none; }
  .dock .picks { display: flex; overflow-x: auto; gap: 5px; }
  .dock .pick { flex: none; padding: 3px 8px; }
  .dock .build > .row { margin-top: 6px; }
  /* This turn: the move pill and the buttons on one line. */
  .dock .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .dock .actions > * { margin: 0; }
  /* The selected unit: its name and stats on one line, then what it can do here, then the rest. */
  .dock .unit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .dock .unit > * { flex: 1 1 100%; margin: 0; }
  .dock .unit > h2 { flex: none; order: -2; }
  .dock .unit > .now { flex: none; order: -2; }
  .dock .unit > .parts-box, .dock .unit > .targets:not(.threat) { order: -1; }
}

.credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* Watching a recorded game (index.html?replay=…): the controls at the top of the dock. */
.dock .replay { max-width: 560px; margin: 0 auto 8px; }
.replay-about { font-weight: 400; font-size: 12.5px; margin-left: auto; }
.replay-buttons { align-items: center; }
.replay-play { min-width: 86px; }
.replay-slider { display: block; width: 100%; margin: 10px 0 0; accent-color: var(--ink); }

/* ---- the menu: a full-screen sheet that scrolls ---- */
.sheet { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--bg); }
.sheet[hidden] { display: none; }
.sheet-inner { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; }
.sheet-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); padding: 12px 0;
}
.sheet-head .menu-btn { margin-left: auto; }
.statline.now { display: flex; margin: 6px 0; font-size: 14px; }

/* ---- board svg ---- */
.tile { stroke: var(--table); stroke-width: 4; }
.hit { fill: transparent; cursor: pointer; }
.hit.grab { cursor: grab; } /* a unit you can drag */
.aim-casing { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 7; stroke-linecap: round; }
.aim-line { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.aim-line.miss { stroke-dasharray: 6 5; }
.aim-dot { stroke: #fff; stroke-width: 1.5; }
.coord { font-size: 9px; text-anchor: middle; fill: #000; opacity: .45; }
.ulabel { font-size: 15px; font-weight: 800; text-anchor: middle; fill: #fff; }
.ustats {
  font-size: 10.5px; font-weight: 700; text-anchor: middle; fill: #222;
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.ustats.small { font-size: 9.5px; }
.ustats.buff { fill: var(--good); }
.ustats.debuff { fill: var(--hit); }
.sel-ring-outer { fill: none; stroke: #111; stroke-width: 6; }
.sel-ring { fill: none; stroke: #fff; stroke-width: 2.5; }
.capt-ring {
  fill: none; stroke: var(--danger); stroke-width: 3.5; stroke-dasharray: 5 3;
  animation: march 0.8s linear infinite;
}
.mv-badge { fill: var(--good); stroke: #fff; stroke-width: 1.5; }
.mv-badge-text { font-size: 9px; font-weight: 800; fill: #fff; text-anchor: middle; }

.reach { fill: #fff; fill-opacity: .35; stroke-width: 2.5; }
.reach.preview { fill: none; stroke-width: 2; stroke-dasharray: 5 4; stroke-opacity: .85; }
.step { fill: none; stroke: var(--good); stroke-width: 3.5; stroke-dasharray: 7 4; }
.range { fill: none; stroke: #1f2328; stroke-opacity: .55; stroke-width: 1.6; stroke-dasharray: 2 3; }
.range.preview { stroke-opacity: .25; }
.place-target { fill: none; stroke-width: 3.5; stroke-dasharray: 8 5; animation: march 1s linear infinite; }
.hover-ring { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: 2.5; }
.move-path { fill: none; stroke: var(--good); stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }

.atk-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.atk-line.hit { stroke: var(--danger); }
.atk-line.miss { stroke: #6b7280; stroke-dasharray: 5 4; stroke-width: 2; }
.atk-tag { stroke-width: 1; }
.atk-tag.hit { fill: #fae8ff; stroke: var(--danger); }
.atk-tag.miss { fill: #f3f4f6; stroke: #9ca3af; }
.atk-tag-text { font-size: 10px; font-weight: 700; text-anchor: middle; fill: #111; }
.atk-bubble { stroke: #fff; stroke-width: 1.5; }
.atk-bubble-text { font-size: 9.5px; font-weight: 800; text-anchor: middle; fill: #fff; }

@keyframes march { to { stroke-dashoffset: -16; } }

/* ---- panel ---- */
.panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.title { display: flex; align-items: baseline; gap: 10px; }
.title h1 { margin: 0; font-size: 22px; letter-spacing: .02em; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
}
.card h2 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.card h3 { margin: 8px 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.phase { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.turn { font-size: 16px; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.win { border: 2px solid; }
.win-title { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.win button { margin-top: 8px; }

.chip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; vertical-align: -1px; margin-right: 4px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12.5px; margin: 8px 0; }
.row { display: flex; flex-wrap: wrap; gap: 6px; }
.buff { color: var(--good); font-weight: 700; }
.debuff { color: var(--hit); font-weight: 700; }
.capt-text { color: var(--danger); }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.tag.capt { background: var(--capt-bg); color: var(--danger); }

button, .button {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled), .button:hover { background: var(--hover); }
.button { display: inline-block; text-decoration: none; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--ink); color: var(--card); border-color: var(--ink); }
button.primary:hover:not(:disabled) { background: light-dark(#3a3530, #fff); }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.pick { display: flex; flex-direction: column; align-items: flex-start; border-width: 2px; }
.pick.on { background: var(--picked); }
.pick-name { font-weight: 700; }
.pick-desc { font-size: 11.5px; color: var(--muted); }

.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pill { padding: 3px 9px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-weight: 600; font-size: 12.5px; }
.pill.done { background: var(--soft); color: var(--muted); text-decoration: line-through; }

table.stats, table.ref { border-collapse: collapse; margin-top: 6px; width: 100%; }
.stats th, .stats td, .ref th, .ref td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.stats th, .ref th { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.targets .target { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 0; }
.targets button { padding: 3px 8px; }

.toggles { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.toggle { display: flex; gap: 6px; align-items: center; font-size: 12.5px; cursor: pointer; }

.mini { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; flex: none; }

.log { max-height: 220px; overflow-y: auto; font-size: 12.5px; }
.log-row { padding: 2px 0; border-bottom: 1px dashed var(--line); display: flex; align-items: baseline; gap: 2px; }

details summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: 8px; }
.rules p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; }

.menu {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 4px;
}
.menu[hidden], .toast[hidden] { display: none; }
.menu button { border: 0; text-align: left; border-radius: 5px; background: transparent; }
/* A choice: an icon column, then a word or two with unit badges (see ICON in ui.js). */
.menu .mi { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.mi-icon { width: 16px; flex: none; display: grid; place-items: center; font-size: 17px; font-weight: 800; line-height: 1; }
.mi-body { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; white-space: pre; }
.mi.capture .mi-icon { color: var(--danger); }
.mi.merge .mi-icon { color: var(--merge-ink); }
.mi.select { color: var(--muted); }
.mi-token { flex: none; overflow: visible; }
.mi-split { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; padding-right: 6px; border-right: 1px solid var(--line); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--card);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  z-index: 20;
}

/* ---- icons ---- */
.icon { flex: none; vertical-align: -3px; }
.with-icon { display: inline-flex; align-items: center; gap: 5px; }
.pick-name { display: inline-flex; align-items: center; gap: 5px; }
.hover-unit .icon { margin-right: 3px; }

.statline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.stat { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.pick-desc .statline { gap: 3px; flex-wrap: nowrap; }
.pick-desc .stat { gap: 1px; }

/* ---- skills ---- */
.skill-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--skill-bg); color: var(--skill-ink); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.skills { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.pick-skill { display: inline-flex; margin-left: auto; color: var(--skill-accent); }
.pick-name { width: 100%; }

.settings { display: flex; gap: 0 18px; flex-wrap: wrap; }
.setting { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.setting select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--edge); background: var(--raised); color: var(--ink); }

/* ---- online ---- */
.link-row { margin: 8px 0; flex-wrap: nowrap; }
.link { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--edge); border-radius: 7px; background: var(--field); color: var(--ink); }
.hint.bad { color: var(--hit); }
.people { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--soft); padding: 1px 8px; border-radius: 999px; }
.peer-hover { fill-opacity: .12; stroke-width: 3.5; stroke-dasharray: 8 5; stroke-linejoin: round; }


/* ---- merging and splitting ---- */
:root {
  --merge-bg: light-dark(#fef3c7, #45300c);
  --merge-ink: light-dark(#92400e, #fcd34d);
}
.merge-target { fill: #d97706; fill-opacity: .12; stroke: #d97706; stroke-width: 3; stroke-dasharray: 3 4; }
.merge-target.preview { fill: none; stroke-width: 2; stroke-opacity: .8; }
.menu button.merge, button.merge { color: var(--merge-ink); }
.targets button.merge { background: var(--merge-bg); border-color: #d97706; }
.mini.merged { width: auto; min-width: 17px; padding: 0 4px; border-radius: 9px; font-size: 9px; letter-spacing: .02em; }
.parts-box { margin-top: 6px; }
.parts { display: flex; flex-wrap: wrap; gap: 4px; }
.part { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--edge); background: var(--soft); color: var(--muted); text-decoration: line-through; }
.part.on { background: var(--merge-bg); color: var(--merge-ink); border-color: #d97706; text-decoration: none; }
span.part { text-decoration: none; color: var(--ink); background: var(--soft); border-color: var(--line); }
.parts-box .hint { margin: 5px 0 0; }

/* rules: each skill's description sits on its own row under it */
.skills-ref .skill-effect td { padding-top: 0; font-size: 12px; }
.skills-ref tr:has(+ .skill-effect) td { border-bottom: 0; }