/* Color schemes to try: the same boards in other materials, by overriding
   theme.css's tokens. data-scheme on <html> picks one (main.js: ?scheme=…,
   kept in localStorage; ?scheme=tavern goes back to the default). */

/* Stone: a dungeon's slate, iron-grey trim lit by brass. */
:root[data-scheme="stone"] {
  --wood: #16181d; --wood-2: #1d2027; --wood-line: #0c0d10; --wood-hi: #3a3f4a;
  --board: #343a45; --board-d: #1c2027; --board-deep: #0f1115; --board-lip: #4f5766; --rim: #0b0c0f;
  --gold: #f0c060; --gold-d: #a27a2c; --gold-hover: #b98a30; --gold-ink: #fff6e0;
  --board-hover: #262b33; --tab: #2a2f38; --tab-hover: #333944;
  --ink: #e8e4da; --muted: #a9a59b;
}

/* Night: deep blue boards under gold, like the sky the hero camps under. */
:root[data-scheme="night"] {
  --wood: #0c1020; --wood-2: #131a30; --wood-line: #070a14; --wood-hi: #2c3a62;
  --board: #1c2748; --board-d: #10172e; --board-deep: #080c19; --board-lip: #33446f; --rim: #060811;
  --board-hover: #18213d; --tab: #172040; --tab-hover: #1f2a4f;
  --ink: #ebe6f6; --muted: #a8b0d0;
}

/* Forest: green-stained wood with brass, an elven hall. */
:root[data-scheme="forest"] {
  --wood: #121a14; --wood-2: #19241c; --wood-line: #090e0a; --wood-hi: #33503b;
  --board: #23402b; --board-d: #132219; --board-deep: #09130c; --board-lip: #3b6145; --rim: #08100a;
  --gold: #ecc94b; --gold-d: #a8862a; --gold-hover: #bf9a31;
  --board-hover: #1a3021; --tab: #1d3424; --tab-hover: #24402d;
  --ink: #eef0d8; --muted: #b3be9a;
  --accent: #8a5a2b; --accent-hi: #a8703a;
}

/* Ember: the volcano's soot-black with red trim and hot gold. */
:root[data-scheme="ember"] {
  --wood: #140d0c; --wood-2: #1d1211; --wood-line: #0a0606; --wood-hi: #4a2420;
  --board: #3a1a17; --board-d: #1f0d0c; --board-deep: #100605; --board-lip: #5c2b25; --rim: #0b0505;
  --gold: #ffb83d; --gold-d: #b33a24; --gold-hover: #cc4a2e; --gold-ink: #fff1e6;
  --board-hover: #2b1210; --tab: #2e1513; --tab-hover: #3a1c19;
  --ink: #f6e3d0; --muted: #c9a090;
}

/* Settings' Colors: a button per scheme, each with a swatch of its board in its trim. */
.scheme-list { display: flex; flex-wrap: wrap; gap: 8px; }
.scheme-list .scheme { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--muted); background: transparent; border-color: var(--board-d); box-shadow: none; }
.scheme-list .scheme[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-d); }
.swatch { width: 16px; height: 16px; flex: none; border: 2px solid; box-shadow: 0 0 0 1px #000; }
.swatch[data-s="tavern"] { background: #482612; border-color: #b8860b; }
.swatch[data-s="stone"] { background: #343a45; border-color: #a27a2c; }
.swatch[data-s="night"] { background: #1c2748; border-color: #b8860b; }
.swatch[data-s="forest"] { background: #23402b; border-color: #a8862a; }
.swatch[data-s="ember"] { background: #3a1a17; border-color: #b33a24; }

/* the theme editor: a name, then five colors with their labels */
.theme-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--board-d); }
.theme-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.theme-field { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--fs-s); color: var(--muted); }
.theme-field input[type="color"] { width: 44px; height: 32px; padding: 0; border: 2px solid var(--rim); background: var(--board-d); cursor: pointer; }
.scheme-list + .kit-label { margin-top: 12px; }

/* The table's pattern, a theme's choice (scheme.js sets data-pattern on
   <html>; none is planks, theme.css's). Drawn in shades of black and white
   over the table's color, so they suit any theme. */
:root[data-pattern="bricks"] body { background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 0h48v2H0zM0 24h48v2H0zM0 0h2v24H0zM24 24h2v24h-2z' fill-opacity='.22'/%3E%3C/svg%3E"),
  linear-gradient(180deg, var(--wood-2), var(--wood)); }
:root[data-pattern="tiles"] body { background-image:
  repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 2px, transparent 2px 32px),
  repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 2px, transparent 2px 32px),
  linear-gradient(180deg, var(--wood-2), var(--wood)); }
:root[data-pattern="checker"] body { background-image:
  conic-gradient(rgba(0,0,0,.16) 25%, transparent 0 50%, rgba(0,0,0,.16) 0 75%, transparent 0),
  linear-gradient(180deg, var(--wood-2), var(--wood));
  background-size: 48px 48px, auto; }
:root[data-pattern="dots"] body { background-image:
  radial-gradient(rgba(255,255,255,.07) 2px, transparent 2.5px),
  linear-gradient(180deg, var(--wood-2), var(--wood));
  background-size: 24px 24px, auto; }
:root[data-pattern="diagonal"] body { background-image:
  repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 6px, transparent 6px 18px),
  linear-gradient(180deg, var(--wood-2), var(--wood)); }
:root[data-pattern="plain"] body { background-image: linear-gradient(180deg, var(--wood-2), var(--wood)); }
.theme-field select { font: var(--fs-s) var(--pixel); color: var(--ink); background: var(--board-d); border: 2px solid var(--rim); padding: 4px 6px; height: 32px; }

/* A picture of the player's for the table (a made theme's; scheme.js sets
   --bg-image and data-bgfit), over any pattern: repeated, or covering it whole. */
:root[data-bgfit="tile"] body { background-image: var(--bg-image), linear-gradient(180deg, var(--wood-2), var(--wood)); background-size: auto, auto; background-repeat: repeat, no-repeat; }
:root[data-bgfit="cover"] body { background: var(--bg-image) center / cover no-repeat fixed, var(--wood); }
:root[data-bgfit] body::before { content: none; }
.theme-pic { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-s); }
.theme-pic img { width: 48px; height: 32px; object-fit: cover; border: 2px solid var(--rim); image-rendering: pixelated; }