/* ==========================================================================
   Feed Thine Enemy -- 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 Oware 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.

   THE TWO SOWING GAMES ARE DELIBERATELY NOT THE SAME COLOUR. They share a
   board shape, a generator and a renderer, so a child arriving at the second
   one after the first should be able to see instantly that it is a different
   game -- this one is carved wood where the sister game is night sky. The
   PIECE colours are the same in both, and that is deliberate too: gold and
   blue are what the sides are CALLED, in both games, and a child who has
   learnt that Gold is them should not have to learn it twice.
*/
.app {
    /* ---- the board surface --------------------------------------------- */
    --board-bg:       #2b1c10;
    --board-line:     #7a5a34;
    --board-cell:     #3a2716;
    --board-cell-alt: #34220f;

    /*
       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 wood 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:     #4a3119;
}

/*
 * ==========================================================================
 * 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.
 *
 * Measured against both pieces rather than assumed, because this is the exact
 * relationship `BibleGames_Contrast.py` DOES NOT CHECK -- it reads ink against
 * the page and against the cell, and nothing on this site asks what a numeral
 * is sitting on. The sister game's ring-shaped pieces made that count nearly
 * invisible while the contrast report said ALL CLEAR:
 *   #1b1108 on --piece-0 #ffd45c   13.1:1
 *   #1b1108 on --piece-1 #7fc8ff   10.3:1
 */
.board__ink {
    fill: #1b1108;
    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. It matters
       more in this game than in the sister one: a pit here regularly holds
       twelve or more, because nothing drains into a store as the sowing passes.
    */
    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 where captured seeds are kept, and in THIS game it is not on the
 * sowing circuit at all -- a sowing passes neither store, and a seed reaches
 * one only by being captured or by the count at the end. So it is even less a
 * pit here than in Kalah, where at least your own store takes a seed in
 * passing.
 *
 * 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 row, 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.
 *
 * On the sister game both were gold to begin with, so BLUE'S STORE WAS MARKED
 * IN GOLD -- on the one cell of the 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.
 */
.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 for the sister game, matches
 * nothing, and would have rendered perfectly while doing nothing at all.
 */

/*
 * 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. An early 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, 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.
 */