/* Board and piece themes.
 *
 * Every rule in this file is opt-in. The default look is the ABSENCE of the two
 * attributes this file keys on, so with no theme chosen not one selector here
 * matches and the board stays byte-identical to what it was. `node tools/board.js`
 * proves that against a stored baseline; `node tools/check-board-themes.js`
 * proves that no rule in this file can ever escape its prefix.
 *
 * The specificity story matters, because this codebase has been bitten by it
 * repeatedly. Two rules:
 *
 *   1. Token blocks are MUTUALLY EXCLUSIVE, never overlapping:
 *        :root:not([data-board-theme])   vs   [data-board-theme="kaya"]
 *      The default and a theme can never both apply to the same element, so
 *      there is no cascade to resolve and no file order to respect.
 *
 *   2. Consumption rules are all prefixed `html[data-board-theme] body` (0,2,2),
 *      which outranks every existing `body.dark-mode .play-*` rule (0,2,1)
 *      without editing or deleting a single one of them.
 *
 * A theme ignores light/dark on purpose: a kaya board is not "kaya but dark",
 * the surface IS the identity. Only the default follows the page theme.
 */

/* ---- default: only the second ink, which nothing reads unless a piece ----
   colour set is active. No surface, no lines - the board keeps its own look. */
:root:not([data-board-theme]) {
    --board-ink-alt: #4a4a4a;
    --board-ink-alt-promoted: #8f1d16;
}
html.dark-mode:not([data-board-theme]) {
    --board-ink-alt: #b9b9b9;
    --board-ink-alt-promoted: #ff9a9a;
}

/* ---- theme palettes -----------------------------------------------------
   No `html` prefix here on purpose: the preview swatch in preferences carries
   the same attribute on a plain span and reads the same tokens. */
[data-board-theme="kaya"] {
    --board-surface: #e8c88f;
    --board-line: #7a5c2e;
    --board-frame: #5c4520;
    --board-ink: #1a1208;
    --board-ink-promoted: #9c1b13;
    --board-ink-alt: #3a2a12;
    --board-ink-alt-promoted: #7a1410;
    --board-selected: rgba(0, 0, 0, 0.13);
    --board-legal: rgba(60, 40, 10, 0.45);
    --board-check: rgba(170, 26, 26, 0.30);
    /* The default's rgba(255,196,0,0.18) is invisible on a yellow surface, so
       every theme carries its own highlight alphas rather than inheriting. */
    --board-last-from: rgba(206, 142, 20, 0.45);
    --board-last-to: rgba(190, 106, 12, 0.55);
    --board-castle: rgba(30, 120, 70, 0.30);
    --board-castle-last: rgba(30, 120, 70, 0.50);
    --board-hand-bg: #f3e2c2;
    --board-hand-border: #7a5c2e;
}
[data-board-theme="katsura"] {
    --board-surface: #b98b5e;
    --board-line: #5a3d20;
    --board-frame: #3f2a15;
    --board-ink: #14100a;
    --board-ink-promoted: #8f1d16;
    --board-ink-alt: #2e2318;
    --board-ink-alt-promoted: #6d1712;
    --board-selected: rgba(0, 0, 0, 0.16);
    --board-legal: rgba(35, 22, 8, 0.48);
    --board-check: rgba(150, 20, 20, 0.34);
    --board-last-from: rgba(232, 178, 60, 0.40);
    --board-last-to: rgba(226, 140, 30, 0.52);
    --board-castle: rgba(30, 130, 80, 0.32);
    --board-castle-last: rgba(30, 130, 80, 0.52);
    --board-hand-bg: #e4c9a6;
    --board-hand-border: #5a3d20;
}
[data-board-theme="washi"] {
    --board-surface: #f7f3e8;
    --board-line: #8a8272;
    --board-frame: #55503f;
    --board-ink: #1b1b18;
    --board-ink-promoted: #b91c1c;
    --board-ink-alt: #40473f;
    --board-ink-alt-promoted: #8f1d16;
    --board-selected: rgba(0, 0, 0, 0.10);
    --board-legal: rgba(70, 66, 55, 0.42);
    --board-check: rgba(178, 34, 34, 0.20);
    --board-last-from: rgba(214, 168, 40, 0.34);
    --board-last-to: rgba(214, 138, 30, 0.44);
    --board-castle: rgba(46, 160, 100, 0.26);
    --board-castle-last: rgba(46, 160, 100, 0.46);
    --board-hand-bg: #fffdf7;
    --board-hand-border: #8a8272;
}
[data-board-theme="ishi"] {
    --board-surface: #2f3336;
    --board-line: #798188;
    --board-frame: #99a2a8;
    --board-ink: #eef1f2;
    --board-ink-promoted: #ff8f8f;
    --board-ink-alt: #a9b5bc;
    --board-ink-alt-promoted: #ffb3b3;
    --board-selected: rgba(255, 255, 255, 0.14);
    --board-legal: rgba(255, 255, 255, 0.42);
    --board-check: rgba(255, 80, 80, 0.28);
    --board-last-from: rgba(255, 200, 80, 0.22);
    --board-last-to: rgba(255, 170, 40, 0.34);
    --board-castle: rgba(70, 210, 140, 0.24);
    --board-castle-last: rgba(70, 210, 140, 0.44);
    --board-hand-bg: #3a4045;
    --board-hand-border: #99a2a8;
}
[data-board-theme="hinoki"] {
    /* Cypress: paler and pinker than kaya, the wood of a new board. */
    --board-surface: #f3e2c6;
    --board-line: #a3835a;
    --board-frame: #7d5f38;
    --board-ink: #1c1408;
    --board-ink-promoted: #a3201a;
    --board-ink-alt: #4a3a22;
    --board-ink-alt-promoted: #7d1912;
    --board-selected: rgba(0, 0, 0, 0.11);
    --board-legal: rgba(70, 50, 20, 0.42);
    --board-check: rgba(178, 34, 34, 0.26);
    --board-last-from: rgba(214, 150, 40, 0.40);
    --board-last-to: rgba(206, 116, 20, 0.50);
    --board-castle: rgba(30, 130, 80, 0.28);
    --board-castle-last: rgba(30, 130, 80, 0.48);
    --board-hand-bg: #faefdc;
    --board-hand-border: #a3835a;
}
[data-board-theme="urushi"] {
    /* Black lacquer with gold lines; the pieces write in cream. */
    --board-surface: #1c1917;
    --board-line: #c9a24a;
    --board-frame: #a8842f;
    --board-ink: #f4ecd8;
    --board-ink-promoted: #ff9a8c;
    --board-ink-alt: #cdbf99;
    --board-ink-alt-promoted: #ffbdb2;
    --board-selected: rgba(255, 220, 130, 0.16);
    --board-legal: rgba(255, 225, 150, 0.45);
    --board-check: rgba(255, 80, 80, 0.30);
    --board-last-from: rgba(255, 200, 80, 0.20);
    --board-last-to: rgba(255, 170, 40, 0.34);
    --board-castle: rgba(80, 210, 140, 0.24);
    --board-castle-last: rgba(80, 210, 140, 0.44);
    --board-hand-bg: #2a2623;
    --board-hand-border: #a8842f;
}
[data-board-theme="midori"] {
    /* Green cloth, the tournament-hall board. Castle highlights go blue so
       they still read on a green ground. */
    --board-surface: #7ea36f;
    --board-line: #2f4a2a;
    --board-frame: #223a20;
    --board-ink: #0f160e;
    --board-ink-promoted: #b3261e;
    --board-ink-alt: #22381f;
    --board-ink-alt-promoted: #8a1a14;
    --board-selected: rgba(0, 0, 0, 0.14);
    --board-legal: rgba(20, 40, 15, 0.46);
    --board-check: rgba(200, 30, 30, 0.34);
    --board-last-from: rgba(255, 230, 90, 0.42);
    --board-last-to: rgba(255, 200, 40, 0.55);
    --board-castle: rgba(20, 90, 160, 0.30);
    --board-castle-last: rgba(20, 90, 160, 0.50);
    --board-hand-bg: #e3ecdc;
    --board-hand-border: #2f4a2a;
}
[data-board-theme="ao"] {
    /* Blue: a cool board for people who play chess sites. */
    --board-surface: #9db9d8;
    --board-line: #2f4c6e;
    --board-frame: #203851;
    --board-ink: #0f1a27;
    --board-ink-promoted: #b3261e;
    --board-ink-alt: #24384f;
    --board-ink-alt-promoted: #8a1a14;
    --board-selected: rgba(0, 0, 0, 0.13);
    --board-legal: rgba(20, 35, 60, 0.45);
    --board-check: rgba(200, 30, 30, 0.32);
    --board-last-from: rgba(255, 220, 90, 0.42);
    --board-last-to: rgba(255, 190, 40, 0.55);
    --board-castle: rgba(30, 150, 90, 0.30);
    --board-castle-last: rgba(30, 150, 90, 0.50);
    --board-hand-bg: #e5edf6;
    --board-hand-border: #2f4c6e;
}

/* ---- the board itself ---------------------------------------------------
   Fallbacks are the washi values rather than transparent: if an unknown theme
   id ever reaches the attribute, the board degrades to a plain readable board
   instead of an invisible one. */
html[data-board-theme] body .play-board {
    background: var(--board-surface, #f7f3e8);
    border-color: var(--board-frame, #55503f);
}
html[data-board-theme] body .play-cell {
    border-color: var(--board-line, #8a8272);
}
html[data-board-theme] body .play-cell-selected {
    background: var(--board-selected, rgba(0, 0, 0, 0.10));
}
html[data-board-theme] body .play-cell-legal::after {
    background: var(--board-legal, rgba(70, 66, 55, 0.42));
}
html[data-board-theme] body .play-cell-check {
    background: var(--board-check, rgba(178, 34, 34, 0.20));
}
html[data-board-theme] body .play-cell-last-from {
    background: var(--board-last-from, rgba(214, 168, 40, 0.34));
}
html[data-board-theme] body .play-cell-last-to {
    background: var(--board-last-to, rgba(214, 138, 30, 0.44));
}
html[data-board-theme] body .play-cell-castle {
    background: var(--board-castle, rgba(46, 160, 100, 0.26));
}
html[data-board-theme] body .play-cell-castle.play-cell-last-to {
    background: var(--board-castle-last, rgba(46, 160, 100, 0.46));
}
html[data-board-theme] body .play-piece {
    color: var(--board-ink, #1b1b18);
}
html[data-board-theme] body .play-piece-promoted {
    color: var(--board-ink-promoted, #b91c1c);
}

/* Pieces in hand sit outside .play-board but are part of the same object, and
   their colours are hardcoded #fff/#000 - on a wooden surface they would look
   like they belong to a different site. */
html[data-board-theme] body .play-hand-piece {
    background: var(--board-hand-bg, #fffdf7);
    color: var(--board-ink, #1b1b18);
    border-color: var(--board-hand-border, #8a8272);
}
html[data-board-theme] body .play-hand-piece.play-hand-selected {
    background: var(--board-ink, #1b1b18);
    color: var(--board-hand-bg, #fffdf7);
}
/* The badge is the piece inverted: ink on the disc, the disc's colour on the
   badge, and a ring in the disc's colour so it stands off the piece's edge.
   Setting only the text colour here left the theme's dark ink on the
   default's black badge - a number nobody could read. */
html[data-board-theme] body .play-hand-count {
    background: var(--board-ink, #1b1b18);
    color: var(--board-hand-bg, #fffdf7);
    box-shadow: 0 0 0 2px var(--board-hand-bg, #fffdf7);
}
html[data-board-theme] body .play-hand-piece.play-hand-selected .play-hand-count {
    background: var(--board-hand-bg, #fffdf7);
    color: var(--board-ink, #1b1b18);
    box-shadow: 0 0 0 2px var(--board-ink, #1b1b18);
}

/* The castle editor draws a second board with its own palette; leaving it out
   would put two visibly different boards on the same page. */
html[data-board-theme] body .wiki-castle-editor-board {
    background: var(--board-surface, #f7f3e8);
    border-color: var(--board-frame, #55503f);
}
html[data-board-theme] body .wiki-castle-editor-cell {
    border-color: var(--board-line, #8a8272);
}
html[data-board-theme] body .wiki-castle-editor-piece {
    color: var(--board-ink, #1b1b18);
}

/* ---- piece colours ------------------------------------------------------
   Two independent axes: these read --board-ink-alt, which every theme declares
   and the default declares too, so one rule works on every board.

   Each side rule comes WITH its promoted pair. Without that, a promoted gote
   piece would lose its red - and in the western glyph style the colour is the
   only thing marking a piece as promoted. */
html[data-piece-colors="duo"] body .play-piece-gote {
    color: var(--board-ink-alt, #4a4a4a);
}
html[data-piece-colors="duo"] body .play-piece-gote.play-piece-promoted {
    color: var(--board-ink-alt-promoted, #8f1d16);
}
/* The koma style paints its own inks (black and red on boxwood, whatever the
   board), so "two inks" becomes two woods: gote's tiles are a darker wood. */
html[data-piece-colors="duo"] body .play-piece-gote.play-piece-tile {
    --koma-wood: #d9b46e;
    --koma-edge: #5e4118;
}
html[data-piece-colors="duo"] body .play-piece-gote.play-piece-tile.play-piece-promoted {
    --koma-ink-promoted: #a01d17;
}

/* Outline: gote's pieces are drawn hollow. The drawn styles (koma, western,
   moves, dobutsu) are pictures painted with currentColor or with their own
   fills, so a transparent colour would erase them - those keep a solid second
   ink instead. */
html[data-piece-colors="outline"] body .play-piece-gote:not(.play-piece-drawn) {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--board-ink-alt, #4a4a4a);
    text-stroke: 1.5px var(--board-ink-alt, #4a4a4a);
}
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-promoted:not(.play-piece-drawn) {
    -webkit-text-stroke: 1.5px var(--board-ink-alt-promoted, #8f1d16);
    text-stroke: 1.5px var(--board-ink-alt-promoted, #8f1d16);
}
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-drawn {
    color: var(--board-ink-alt, #4a4a4a);
}
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-drawn.play-piece-promoted {
    color: var(--board-ink-alt-promoted, #8f1d16);
}
/* And a koma tile goes hollow the way a kanji does: no wood, the edge and the
   characters in the second ink, which every board declares readable. */
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-tile {
    --koma-wood: transparent;
    --koma-edge: var(--board-ink-alt, #4a4a4a);
    --koma-ink: var(--board-ink-alt, #4a4a4a);
}
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-tile.play-piece-promoted {
    --koma-ink-promoted: var(--board-ink-alt-promoted, #8f1d16);
}
/* The discs likewise: two inks turns gote's discs over (cream on black), and
   outline hollows them in the second ink. */
html[data-piece-colors="duo"] body .play-piece-gote.play-piece-disc {
    --disc-face: #2e2a27;
    --disc-edge: #d9ccb0;
    --disc-ink: #f3ead6;
}
html[data-piece-colors="duo"] body .play-piece-gote.play-piece-disc.play-piece-promoted {
    --disc-ink-promoted: #ff9a8c;
}
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-disc {
    --disc-face: transparent;
    --disc-edge: var(--board-ink-alt, #4a4a4a);
    --disc-ink: var(--board-ink-alt, #4a4a4a);
}
html[data-piece-colors="outline"] body .play-piece-gote.play-piece-disc.play-piece-promoted {
    --disc-ink-promoted: var(--board-ink-alt-promoted, #8f1d16);
}

/* ---- preview swatch in preferences --------------------------------------
   A 3x3 of its own rather than real .play-cell elements: reusing the board's
   classes would need a second scoped prefix that ties on specificity with
   `body.dark-mode .play-cell` and puts us back to depending on file order. */
.board-swatch {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1.5px solid var(--board-frame, var(--c-font-strong, #333));
    background: var(--board-surface, var(--c-page, #fff));
    overflow: hidden;
}
.board-swatch span {
    box-sizing: border-box;
    border: 0.5px solid var(--board-line, var(--c-font-strong, #333));
    display: block;
}
/* Three of the nine cells carry ink so the swatch shows the piece colours too:
   sente, gote and a promoted piece. */
.board-swatch span:nth-child(2)::before,
.board-swatch span:nth-child(4)::before,
.board-swatch span:nth-child(9)::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0.62);
}
.board-swatch span:nth-child(2)::before { background: var(--board-ink, var(--c-font-strong, #333)); }
.board-swatch span:nth-child(4)::before { background: var(--board-ink-alt, var(--c-font-dim, #777)); }
.board-swatch span:nth-child(9)::before { background: var(--board-ink-promoted, var(--c-bad, #b91c1c)); }

/* ---- Colour-blind mode ---------------------------------------------------
 *
 * Every highlight the board draws with colour alone gets a second signal:
 * a ring for the last move, hatching for check, a hollow ring instead of a
 * dot for a legal square. The colours themselves are Okabe-Ito - blue,
 * orange, green, purple - which stay apart under deuteranopia, protanopia
 * and tritanopia alike. Keyed on <html data-colorblind>, which the head
 * script stamps before paint and preferences toggle. */
html[data-colorblind] body .play-cell-last-from {
    background: rgba(0, 114, 178, 0.22);
    box-shadow: inset 0 0 0 2px rgba(0, 114, 178, 0.85);
}
html[data-colorblind] body .play-cell-last-to {
    background: rgba(0, 114, 178, 0.36);
    box-shadow: inset 0 0 0 3px rgba(0, 114, 178, 1);
}
html[data-colorblind] body .play-cell-check {
    background: repeating-linear-gradient(45deg, rgba(230, 159, 0, 0.55) 0 4px, transparent 4px 9px);
    box-shadow: inset 0 0 0 3px #e69f00;
}
html[data-colorblind] body .play-cell-legal::after {
    width: 40%; height: 40%;
    background: transparent;
    border: 3px solid rgba(0, 158, 115, 0.95);
    box-sizing: border-box;
}
html[data-colorblind] body .play-cell-selected {
    box-shadow: inset 0 0 0 3px #009e73;
}
html[data-colorblind] body .play-cell-castle {
    background: rgba(204, 121, 167, 0.3);
}