/* ==========================================================================
   Trials and Mercies -- 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 ---------------------------------------------
       A deep green cloth, so this board is not mistaken at a glance for the
       lapis of Abram's Journey or the ebony of Out of Egypt. Four dice games
       on a track is four games a child has to be able to tell apart. */
    --board-bg:       #10281c;
    --board-line:     #3f7a58;
    --board-cell:     #17381f;
    --board-cell-alt: #143119;

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

/* ==========================================================================
   THE FIVE KINDS OF SQUARE
   ==========================================================================
   Two starting squares, two stars, one middle, and two home rows of three.
   Every one of them changes what may happen to a counter standing on it, so
   every one of them has to be tellable apart WITHOUT COLOUR (Standards.md §2):

     1. `topo-track` TAGS them, so label() says "square 13, a star square, a
        safe square" out loud. That is the half a screen reader gets.
     2. They differ in LIGHTNESS as well as in hue, so they stay different
        squares in greyscale and to the one boy in twelve.
     3. Each carries its own BORDER PATTERN, and a dashed edge is a shape.

   The square number is drawn in the corner of every square regardless, so
   there is a fourth way to tell one from another.
   ========================================================================== */

.board__cell {
    stroke-width: 3;
}

/* Where you come out of the yard. One per side, in that side's own colour,
   solid-edged because it is a place rather than an event. */
.board__cell.is-start-gold {
    fill: #6b5410;
    stroke: #ffd45c;
    stroke-width: 5;
    stroke-dasharray: none;
}

.board__cell.is-start-blue {
    fill: #123c58;
    stroke: #7fc8ff;
    stroke-width: 5;
    stroke-dasharray: none;
}

/* THE MOUTH OF THE SHORT CUT. The brightest square on the ring, because it is
   the one a child is trying to land on, and dashed long so it reads as a gate
   rather than as a wall.

   DELIBERATELY NEITHER GOLD NOR BLUE. The first version was a warm gold and,
   in the picture, read as a square belonging to Gold -- which is exactly wrong
   for the one square on this board that belongs to BOTH players. Silver is not
   either side's colour and cannot be mistaken for one. */
.board__cell.is-star {
    fill: #4c5a63;
    stroke: #eef4f8;
    stroke-width: 5;
    stroke-dasharray: 22 6;
}

/* THE MIDDLE. Round-ish by its dashes, and the one square that is neither on
   the ring nor in anybody's home. */
.board__cell.is-centre {
    fill: #4a2f68;
    stroke: #d9b8ff;
    stroke-width: 5;
    stroke-dasharray: 4 6;
}

/* The two home rows. Their side's colour, and finely dotted, so they read as
   the end of a road rather than as part of the ring. */
.board__cell.is-home-gold { fill: #4a3a0c; stroke: #ffd45c; stroke-dasharray: 3 5; }
.board__cell.is-home-blue { fill: #0d2b3f; stroke: #7fc8ff; stroke-dasharray: 3 5; }

/* ==========================================================================
   THE TWO ROADS, AND THE FOUR LINES THAT DRAW THEM
   ==========================================================================
   Each side owns two complete roads -- the long way round and the short cut
   through the middle -- and `geometry().roads()` hands the renderer all four
   in walking order, each labelled with whose it is and which one it is.

   THE FORK IS DRAWN AS TWO ROADS ON PURPOSE. A fork a child is told about in
   words is a rule; a fork they can SEE leaving the star is a choice.
   ========================================================================== */

.board__road {
    stroke-width: 6;
    opacity: 0.75;
}

.board__road.is-side-0 { stroke: #ffd45c; stroke-dasharray: 16 14; }
.board__road.is-side-1 { stroke: #7fc8ff; stroke-dasharray: 10 20; stroke-dashoffset: -18; }

/*
   The short cut is drawn WIDER and brighter, because it is the road that is
   worth taking and the board should say so.

   IT KEEPS ITS SIDE'S DASH PATTERN, and that is not a detail. Both short cuts
   run through the same three squares -- star, middle, star -- in opposite
   directions, so they are drawn one on top of the other. Made solid, the
   second one painted over the first and Gold's short cut simply was not there
   (seen in the picture, 2026-09-05). Keeping the dashes lets the two
   interleave exactly as they do round the ring, so both are visible and each
   is still its owner's.
*/
.board__road.is-road-1 {
    stroke-width: 9;
    opacity: 0.95;
}

/* ==========================================================================
   THE DIE
   ==========================================================================
   A number, on screen, that stays there while the child works out which
   counter to move. render.js has already said it aloud.
   ========================================================================== */

.die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0 6px;
    border: 2px solid #b98b1e;
    border-radius: 10px;
    background: linear-gradient(160deg, #fffbe8, #ffe09a);
    color: #2a1c02;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.die:empty { visibility: hidden; }

@media (max-height: 520px) {
    .die { min-width: 34px; min-height: 34px; font-size: 1.25rem; }
}

@media (forced-colors: active) {
    .die {
        forced-color-adjust: none;
        background: Canvas;
        color: CanvasText;
        border-color: CanvasText;
    }
}