/* board-themes.css. The board colors each game can wear, chosen in the theme menu (SGTheme in the head of every page).
   <html> carries data-board-chess, data-board-checkers, data-board-connect4, data-board-backgammon, data-board-dominion
   and data-board-walls, each one of the names below. "classic" is always today's look of that game, the rules that
   recolor a board are written for every name except classic, so classic changes nothing.
   A swatch in the menu carries the same attribute, so it shows the colors of its option (--bt-a and --bt-b).
   Loaded after each page's older stylesheets. */

/* ── Chess ──────────────────────────────────────────────────────────────────── */
:root,
[data-board-chess="classic"] { --sq-light: #f0d9b5; --sq-dark: #8f6a4e; }
[data-board-chess="violet"]  { --sq-light: #cfd3f5; --sq-dark: #6c62c4; }
[data-board-chess="green"]   { --sq-light: #e6f0d8; --sq-dark: #5f8f56; }
[data-board-chess="slate"]   { --sq-light: #d7dde8; --sq-dark: #6f7f99; }
[data-board-chess="marble"]  { --sq-light: #efede8; --sq-dark: #9a9ca6; }
[data-board-chess="ocean"]   { --sq-light: #dbe9f4; --sq-dark: #4f7da6; }
[data-board-chess] { --bt-a: var(--sq-light); --bt-b: var(--sq-dark); }

/* The squares of every chess board on the site (the game, the puzzle, the tournament, the small boards of the
   puzzle list and the home page, the puzzle editor). Last-move, check and selected highlights keep their own colors. */
.square.light,
.mini-chess-cell.light,
.editor-square.light,
.home-daily-slot .mini-chess-cell.light { background-color: var(--sq-light); }
.square.dark,
.mini-chess-cell.dark,
.editor-square.dark,
.home-daily-slot .mini-chess-cell.dark { background-color: var(--sq-dark); }

/* ── Checkers ───────────────────────────────────────────────────────────────── */
[data-board-checkers="classic"] { --ck-light: #c9d4e6; --ck-dark: #1f2e46; }
[data-board-checkers="wood"]    { --ck-light: #f0d9b5; --ck-dark: #8f6a4e; }
[data-board-checkers="violet"]  { --ck-light: #cfd3f5; --ck-dark: #6c62c4; }
[data-board-checkers="green"]   { --ck-light: #e6f0d8; --ck-dark: #5f8f56; }
[data-board-checkers="slate"]   { --ck-light: #d7dde8; --ck-dark: #6f7f99; }
[data-board-checkers="ocean"]   { --ck-light: #dbe9f4; --ck-dark: #4f7da6; }
[data-board-checkers] { --bt-a: var(--ck-light); --bt-b: var(--ck-dark); }

html[data-board-checkers]:not([data-board-checkers="classic"]) .checkers-cell.light-square { background: var(--ck-light); }
html[data-board-checkers]:not([data-board-checkers="classic"]) .checkers-cell.dark-square { background: var(--ck-dark); }

/* ── Connect 4 ──────────────────────────────────────────────────────────────── */
[data-board-connect4="classic"] { --c4-top: #2167ff; --c4-bottom: #0e42b5; --c4-hole: #031139; }
[data-board-connect4="wood"]    { --c4-top: #b58863; --c4-bottom: #7a5236; --c4-hole: #2a1a0d; }
[data-board-connect4="violet"]  { --c4-top: #7c5cff; --c4-bottom: #4a32b8; --c4-hole: #170b45; }
[data-board-connect4="green"]   { --c4-top: #2e9f62; --c4-bottom: #18703f; --c4-hole: #04230f; }
[data-board-connect4="slate"]   { --c4-top: #6b7a93; --c4-bottom: #3d4a60; --c4-hole: #0f1620; }
[data-board-connect4="ember"]   { --c4-top: #e07a2f; --c4-bottom: #a24d12; --c4-hole: #2a1204; }
[data-board-connect4] { --bt-a: var(--c4-top); --bt-b: var(--c4-bottom); }

html[data-board-connect4]:not([data-board-connect4="classic"]) .connect4-board {
    background: linear-gradient(180deg, var(--c4-top) 0%, var(--c4-bottom) 100%);
}
html[data-board-connect4]:not([data-board-connect4="classic"]) .connect4-cell {
    background: radial-gradient(circle at center, var(--c4-hole) 0%, color-mix(in srgb, var(--c4-hole), black 40%) 65%, color-mix(in srgb, var(--c4-hole), black 70%) 100%);
}

/* ── Backgammon ─────────────────────────────────────────────────────────────── */
[data-board-backgammon="classic"] { --bg-light: #dfbd82; --bg-dark: #8a4f2a; --bg-wood: #5b3620; --bg-frame: #4f2e1c; }
[data-board-backgammon="green"]   { --bg-light: #cfe3c8; --bg-dark: #3f7a4f; --bg-wood: #1f4d33; --bg-frame: #153a26; }
[data-board-backgammon="slate"]   { --bg-light: #d7dde8; --bg-dark: #5d6d86; --bg-wood: #2b3546; --bg-frame: #1e2633; }
[data-board-backgammon="violet"]  { --bg-light: #d9d2f5; --bg-dark: #6c62c4; --bg-wood: #2e2561; --bg-frame: #211a47; }
[data-board-backgammon="ocean"]   { --bg-light: #d3e5f1; --bg-dark: #3f7aa6; --bg-wood: #173d5c; --bg-frame: #102c43; }
[data-board-backgammon="ember"]   { --bg-light: #f0c9a0; --bg-dark: #b4531f; --bg-wood: #4a1f0f; --bg-frame: #35160a; }
[data-board-backgammon] { --bt-a: var(--bg-light); --bt-b: var(--bg-dark); }

html[data-board-backgammon]:not([data-board-backgammon="classic"]) .backgammon-board {
    --point-light: var(--bg-light);
    --point-dark: var(--bg-dark);
    border-color: var(--bg-frame);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 12%, transparent 88%, rgba(0, 0, 0, .2)),
        var(--bg-wood);
}

/* ── Sartaba Dominion ───────────────────────────────────────────────────────── */
[data-board-dominion="classic"] { --dm-fill: #05080e; --dm-stroke: #90a9cc; --dm-edge: rgba(144, 169, 204, .24); }
[data-board-dominion="violet"]  { --dm-fill: #130f2b; --dm-stroke: #a99bff; --dm-edge: rgba(169, 155, 255, .38); }
[data-board-dominion="green"]   { --dm-fill: #07170f; --dm-stroke: #6fdca6; --dm-edge: rgba(111, 220, 166, .34); }
[data-board-dominion="slate"]   { --dm-fill: #0d1522; --dm-stroke: #8fbcff; --dm-edge: rgba(143, 188, 255, .34); }
[data-board-dominion="ocean"]   { --dm-fill: #061a26; --dm-stroke: #6fbee6; --dm-edge: rgba(111, 190, 230, .36); }
[data-board-dominion="ember"]   { --dm-fill: #1c0f07; --dm-stroke: #f0a867; --dm-edge: rgba(240, 168, 103, .36); }
[data-board-dominion] { --bt-a: var(--dm-fill); --bt-b: var(--dm-stroke); }

/* Only the plain empty tiles change. Tiles that are owned, selected, a legal move, a flag or contested keep their colors. */
html[data-board-dominion]:not([data-board-dominion="classic"]) .hex.neutral:not([class*="legal"]):not(.hidden):not(.disconnected):not([class*="objective"]):not(.flag):not(.nexus):not(.selected):not(.event-pulse):not(.last-from):not(.last-to) {
    fill: var(--dm-fill);
    stroke: var(--dm-edge);
}

/* ── Walls ──────────────────────────────────────────────────────────────────── */
[data-board-walls="classic"] { --wl-light: #d9c9a8; --wl-dark: #b09870; --wl-goal: #b08840; }
[data-board-walls="violet"]  { --wl-light: #cfd3f5; --wl-dark: #9b92e0; --wl-goal: #6c62c4; }
[data-board-walls="green"]   { --wl-light: #e6f0d8; --wl-dark: #a6c796; --wl-goal: #5f8f56; }
[data-board-walls="slate"]   { --wl-light: #d7dde8; --wl-dark: #a3aec2; --wl-goal: #6f7f99; }
[data-board-walls="ocean"]   { --wl-light: #dbe9f4; --wl-dark: #9dbcd8; --wl-goal: #4f7da6; }
[data-board-walls="ember"]   { --wl-light: #f3d2b0; --wl-dark: #d29a68; --wl-goal: #b4531f; }
[data-board-walls] { --bt-a: var(--wl-light); --bt-b: var(--wl-goal); }

html[data-board-walls]:not([data-board-walls="classic"]) .wsq:not(.sq-highlight):not(.sq-hover-move):not(.sq-selected):not(.sq-last-move) { fill: var(--wl-light); }
html[data-board-walls]:not([data-board-walls="classic"]) .wsq.sq-dark:not(.sq-highlight):not(.sq-hover-move):not(.sq-selected):not(.sq-last-move) { fill: var(--wl-dark); }
html[data-board-walls]:not([data-board-walls="classic"]) .wsq.sq-goal:not(.sq-highlight):not(.sq-hover-move):not(.sq-selected):not(.sq-last-move) { fill: var(--wl-goal); }