/* ==========================================================================
   The Sower Went Forth -- 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 earth showing through an empty store. Its RIM is not a token: a
       store is rimmed in its OWNER's colour, which is --piece-0 or --piece-1
       above and must stay the same value in both places or the board would say
       one thing and the turn indicator another. */
    --store-cell:     #2e2466;
}

/*
 * ==========================================================================
 * A PIT IS A BOWL WITH A NUMBER IN IT, AND THE NUMBER IS THE POSITION
 * ==========================================================================
 *
 * Nothing is ever placed on this board. A pit holds a COUNT of seeds, kept in
 * `state.vars.seeds`, and the piece drawn in it says only "this pit has seeds
 * in it, and it is on this side of the board" -- the number on top says how
 * many, and that number IS the game.
 *
 * So the ink has to be read against a seed heap rather than against the board,
 * which is the one real rule in this file. `board.css` draws ink as
 * `--text-dim`, which is right where ink sits on the BOARD -- a track square's
 * number, printed in the corner -- and quite wrong on top of a gold disc.
 *
 * The same reasoning, and the same repair, as `set-in-order`: the ink is the
 * board's own dark, which is the relationship a real counter has to its own
 * printing. Measured against both pieces rather than assumed:
 *   #14102e on --piece-0 #ffd45c   14.1:1
 *   #14102e on --piece-1 #7fc8ff   10.5:1
 * -- and against the board itself, for the store count when a store is empty,
 * which never happens for long but must not be invisible when it does.
 */
.board__ink {
    fill: #14102e;
    font-size: 34px;
    font-weight: 800;
    /*
       A NUMBER IS NOT A LETTER. Tabular figures keep `11` and `12` the same
       width, so a pit's count does not jiggle as the seeds go round -- and a
       child comparing two pits at a glance is comparing two widths.
    */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/*
 * THE STORE IS NOT A PIT, AND AN EMPTY STORE MUST NOT LOOK LIKE ONE.
 *
 * It is the place every seed is trying to reach, the one place seeds never
 * leave, and the one your opponent's sowing steps clean over. The class comes
 * from the TOPOLOGY -- a node may declare a `kind`, exactly as a track square
 * declares a rosette -- so the drawing and the spoken label cannot disagree:
 * `topo.label()` says "the gold store" whatever this rule does.
 *
 * It is never the only signal. The word is in the label, the position is at
 * the end of the ring, and the rim is a SHAPE rather than a colour.
 */
.board__cell.is-store {
    fill: var(--store-cell);
    stroke-width: 3;
}

/*
 * AND EACH STORE IS RIMMED IN ITS OWNER'S COLOUR.
 *
 * Both were gold to begin with, so BLUE'S STORE WAS MARKED IN GOLD -- on the
 * one cell of this board that says who is winning. Found in a screenshot
 * (2026-09-10); every check was green, because no check anywhere knows that
 * these two circles belong to different people.
 *
 * The classes come from the node's `kind` in boards.json, which is a LIST like
 * any other class attribute: `is-store` says what it is and `is-store-0` says
 * whose. The spoken label says it too -- "the gold store" -- so the colour is
 * not carrying this alone.
 */
.board__cell.is-store-0 { stroke: var(--piece-0); }
.board__cell.is-store-1 { stroke: var(--piece-1); }

/*
 * WHAT IS DELIBERATELY NOT HERE: A BIGGER NUMBER IN THE STORE.
 *
 * The stores are where a child looks to see who is winning, so a larger count
 * in them would be worth having. It cannot be written: render.js draws all the
 * ink into ONE SVG layer above the pieces, so a store's number is not a sibling
 * of the store's cell and no selector in this file can reach it. `.board__cell
 * .is-store + .board__ink` was written first, matches nothing, and would have
 * rendered perfectly while doing nothing at all -- which is the exact fault the
 * note at the top of this file describes. Deleted rather than shipped.
 */

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