/* ==========================================================================
   Gideon's Three Hundred -- 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;

    /*
       "These men would go home if you tapped here."

       A wash and a dashed edge, and the edge is the part that carries it: the
       wash alone is a colour-only signal, which Standards.md §2 forbids, and a
       dash is a shape a photocopy and a colour-blind eye both keep.
    */
    --going-fill:     #3a2f7a;
    --going-edge:     #ffd45c;
}

/*
 * 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 ONE THING THIS BOARD HAS THAT NO OTHER BOARD DOES

   A tap on a man sends HIM AND EVERY MAN TO HIS RIGHT in that company home.
   That is how Nim has been played with matchsticks for ever and it is not
   something a child can guess from looking at a board, so the board shows it
   before the tap: the men who would go are outlined, and the line under the
   board says how many and from which company.

   TWO SIGNALS, NEVER ONE. Standards.md §2 -- the outline is the SHAPE, the
   sentence under the board is the WORD, and neither is a colour. A keyboard
   player gets the sentence read out as the focus passes each man, which is the
   half a hover effect could never give them.
   -------------------------------------------------------------------------- */

.board__cell[data-going] {
    fill: var(--going-fill);
    stroke: var(--going-edge);
    stroke-width: 3;
    stroke-dasharray: 7 5;
}

/*
   High contrast throws the palette away, and a mark drawn only as a fill
   becomes a rectangle exactly like the ones beside it. The DASH survives.
*/
@media (forced-colors: active) {
    .board__cell[data-going] {
        stroke: Highlight;
        stroke-width: 3;
    }
}

/*
   The sentence. It is reserved height whether or not there is anything in it:
   a line that appears and disappears would push the board up and down under a
   child's finger as they moved along a row, which is the one thing a board must
   never do.
*/
.nim-preview {
    flex: 0 0 auto;
    min-height: 1.4em;
    margin: 2px 0 0;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold-2);
}

/* In a 360px-tall window the line still has to be there -- it is the only
   explanation of what a tap does -- but it can give up its leading. */
@media (max-height: 520px) {
    .nim-preview {
        font-size: 0.82rem;
        min-height: 1.2em;
    }
}