/* ==========================================================================
   The Pool of Bethesda -- 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 --------------------------------------------- */
    /*
       WATER, AND THE REASON IS NOT DECORATION.

       This game is played on the SAME nine points as Eight Souls next door --
       byte for byte the same node and edge table in boards.json. Two boards a
       child cannot tell apart, played by two different sets of rules, is the
       one confusion this pair can cause, and colour is the cheapest place to
       fix it: the star is indigo and gold, and the pool is water.

       The lines are drawn bright because on a graph board THE LINES ARE THE
       RULES. A move is legal only along one of them, and a child who cannot see
       where they run cannot see which points are next to which -- on an
       eight-pointed star that is not guessable from the drawing.

       AND THE HINT IS WARM WHILE EVERYTHING ELSE IS COOL, WHICH IS A FAULT
       THIS BOARD ALREADY HAD ONCE.

       `--board-hint` draws the RIM round a piece you may pick up -- decision 9,
       one of the three marks the board makes at once, and the three are meant
       to differ in shape, position AND colour. The first version of this file
       made the hint a pale cyan, one shade off the cell outline, and the result
       was a board where the rim round Gold's three counters and the ring round
       all nine cells were the same mark to the eye: the signal that says "this
       one is yours to move" had been quietly turned into decoration on
       everything. Nothing failed. Every check was clean and the picture showed
       it -- which is the seventh time in four waves.
    */
    --board-bg:       #07242e;
    --board-line:     rgba(140, 220, 240, 0.58);
    --board-line-width: 4;
    --board-cell:     #10404f;
    --board-cell-alt: #0c3341;
    --board-hint:     rgba(255, 214, 120, 0.95);

    /*
       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.
 */

/*
 * Nothing else belongs here yet, and that is the point: board.css draws the
 * surface, the cells, the pieces, the three markers and the panels from the
 * tokens above. Add a rule here only for something this board has that no
 * other board does.
 */