/* ==========================================================================
   The Nine Fruits of the Spirit -- 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;

    /* The lines INSIDE a small game are quiet: they are squared paper. The
       lines BETWEEN the small games are the board, and they are below. */
    --board-line:     #453a85;
    --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.
 */

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

/*
 * THE THICK LINES ARE THE BOARD, AND WITHOUT THEM THIS GAME CANNOT BE PLAYED.
 *
 * Nine by nine drawn as eighty-one equal squares is a chessboard. Every rule
 * here is about the three-by-three BLOCKS -- which small game you are in,
 * which small game you are sent to, which small games you have won -- and a
 * child who cannot see them is looking at the wrong board entirely.
 *
 * topo-square's `bands` option hands the eight dividing lines to render.js as
 * `links`, which is the same hook a graph board's edges come through, drawn
 * UNDER the cells. This is what makes them read as divisions rather than as
 * four more grid lines.
 *
 * Found by looking at a screenshot on 2026-09-04: the bands were drawn at the
 * shared default and were indistinguishable from the cell strokes. Nothing
 * failed. The board rendered perfectly and was a nine-by-nine grid.
 */
.board__link {
    stroke: #b9a6ff;
    stroke-width: 7;
    stroke-linecap: square;
    opacity: 0.9;
}

/*
 * AND THE CELLS HAVE TO BE SEE-THROUGH, OR THE THICK LINES ARE UNDER THEM.
 *
 * render.js draws `links` BENEATH the cells, which is right and is not
 * negotiable: on a graph board a node circle sits ON a drawn line, and a line
 * over the top of it would cross the piece. So the game gets out of the way
 * instead -- the cells keep their thin stroke, which is the squared paper,
 * and give up their fill, which was the thing hiding the board.
 *
 * The first attempt raised the band weight alone and the bands stayed
 * invisible: eight thick lines drawn perfectly, underneath eighty-one opaque
 * rectangles. Only the screenshot showed it.
 *
 * `transparent` and NOT `none`: a shape with no fill is not hit-testable, and
 * every one of these cells is a tap target.
 */
.board__cell {
    fill: transparent;
}

/* And the frame around the whole thing, so the outer blocks are closed the
   same way the inner ones are divided. */
.board__surface {
    stroke: #b9a6ff;
    stroke-width: 5;
    opacity: 0.95;
}