/* ==========================================================================
   The King's Dream -- this board's own look  (styles.css)
   ==========================================================================
   Shared chrome comes from theme.css, shell.css and board/board.css. This file
   holds ONLY what is particular to this board -- 01-Architecture.md §9: Go
   stones and Mancala seeds are not the same object, so a board's own colours
   and piece artwork are never shared.

   Every colour and measurement is a token in the block below, so changing the
   look is one place rather than a hunt.

   THE PAGE MUST NEVER SCROLL, and nothing may ever scroll sideways. .stage is
   the only element allowed to grow or shrink. The max-height: 299px exception
   in Standards.md §5 applies unchanged.
   ========================================================================== */

/*
   EVERY LINE BELOW IS A TOKEN, AND THAT IS THE WHOLE CUSTOMISATION SURFACE.

   board.css already wires these to the real class hooks -- `.board__piece` gets
   `.is-side-0`, `.is-side-1` and so on from sprites.js, and an alternating cell
   gets `.is-alt`. A game that writes its own `.board__piece--0` rule instead is
   writing a selector that matches nothing: the page renders, the pieces are the
   shared gold and blue, and no tool anywhere reports a thing. That was the
   first version of this scaffold, and it is why the token list is the only
   thing here.
*/
.app {
    /* ---- the board surface --------------------------------------------- */
    --board-bg:       #1a1440;
    --board-line:     #4b3f8f;
    --board-cell:     #221a52;
    --board-cell-alt: #1d1748;

    /*
       The two players' colours. NOT their shapes: those come from sprites.js
       and are the signal that survives a colour-blind eye, a photocopy and
       Windows High Contrast. Change a colour here and rename the side in
       rules.js to match, or the board will say "Gold to play" in blue.

       Each colour has an EDGE, and it is not decoration: a piece is drawn with
       `paint-order: stroke`, so the darker edge is what keeps a pale piece
       legible against a pale square.
    */
    --piece-0:        #ffd45c;
    --piece-0-edge:   #7a5313;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;
}

/*
 * THE BOARD'S SIZE IS NOT THIS FILE'S BUSINESS, AND THAT IS DELIBERATE.
 *
 * board.css already gives .board__frame `flex: 1 1 auto; min-height: 0` and the
 * SVG carries `preserveAspectRatio="xMidYMid meet"`, so the browser fits the
 * board into whatever space the column leaves -- at every viewport, for all
 * eight topologies, with no media query and no JavaScript.
 *
 * A per-game override here fights that. The first version of this scaffold
 * capped the frame at `calc(100vh - 16rem)`, which on a 360px-tall phone in
 * landscape is 104px: the board shrank into the top-left corner with two-thirds
 * of the screen empty. NOTHING FAILED. There was no overflow, no scrolling and
 * no console error -- every automated check passed and the game was unplayable.
 * Only the screenshot showed it (2026-09-03).
 *
 * If a board genuinely needs a different shape, change its viewBox in the
 * TOPOLOGY, which is the one place that knows the geometry.
 */

/*
 * THE SIX SIGNS OF THE DREAM — Daniel 2:32-35, in the chapter's own order.
 *
 * This board has something no other board has: SIX kinds that all belong to
 * ONE player. render.js colours a piece by its SIDE, which is right for the
 * thirty-four games where a king is a crowned man of the same gold — and here
 * it drew six identical gold discs, so the one thing the game is about was
 * invisible and the game could not be played. Found in a screenshot with every
 * automated check green, which is this board's second entry in that list.
 *
 * `is-kind-N` is render.js's answer to exactly this (the Knight's Tour needed
 * it first). The KIND is the sign; the SIDE is not used for colour here at all,
 * because only the child's pegs are ever drawn.
 *
 * N IS ZERO-BASED AND IS NOT THE CELL VALUE: kindOf(p) = (p - 1) % 16, so the
 * six cell values 1..6 are kinds 0..5. Numbering these from one silently
 * dropped `stone` and painted `gold` twice.
 *
 * COLOUR IS THE THIRD SIGNAL AND NEVER THE FIRST. Each sign also has its own
 * silhouette from sprites.js — disc, ring, square, diamond, triangle, star —
 * and its own WORD, spoken in every announcement and printed in the move list.
 * A child who cannot tell brass from clay can still play by shape or by name,
 * which for a deduction game is not a nicety: the whole content of the game is
 * telling one sign from another.
 *
 * Every edge is darker than its fill because pieces are drawn with
 * `paint-order: stroke`, and the edge is what keeps a pale sign legible.
 */
.board__piece.is-kind-0 { fill: #ffd45c; stroke: #7a5313; }   /* gold   — disc     */
.board__piece.is-kind-1 { fill: #dfe6ee; stroke: #5a6472; }   /* silver — ring     */
.board__piece.is-kind-2 { fill: #d98a3d; stroke: #6b3f12; }   /* brass  — square   */
.board__piece.is-kind-3 { fill: #8fa3b8; stroke: #2b3a4a; }   /* iron   — diamond  */
.board__piece.is-kind-4 { fill: #c2705a; stroke: #5e2c1f; }   /* clay   — triangle */
.board__piece.is-kind-5 { fill: #9be89b; stroke: #1d5220; }   /* stone  — star     */

/*
 * WINDOWS HIGH CONTRAST THROWS EVERY ONE OF THOSE AWAY.
 *
 * Forced-colours mode replaces all six fills with one system colour, which
 * would put this board straight back to the fault above — six identical signs.
 * The silhouettes survive it, so the edge is what has to carry: a stroke in
 * CanvasText keeps each shape's outline drawn and told apart.
 */
@media (forced-colors: active) {
    .board__piece[class*="is-kind-"] {
        fill: Canvas;
        stroke: CanvasText;
        stroke-width: 3;
    }
}