/* ==========================================================================
   The Pilgrim's Life -- 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 ---------------------------------------------
       An evening road: warm dark brown, so the two roads and the treasure on
       one of them are the only bright things on the board. */
    --board-bg:       #1d1710;
    --board-line:     #6d5a3c;
    --board-cell:     #2b2317;
    --board-cell-alt: #261f14;

    /*
       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 TWO ROADS, AND WHAT IS ON THEM
   ==========================================================================
   The whole game is one decision, so the board has to make the two roads look
   like two different propositions from across the room -- and it has to do it
   WITHOUT COLOUR ALONE (Standards.md §2):

     1. `topo-track` TAGS every square, so label() says "square 15, a hard
        square, miss 1 turn" out loud. That is the half a screen reader gets.
     2. The plain road is flat and pale; a hard square is dark with a heavy
        broken edge; a treasure is bright with a solid one. Three different
        LIGHTNESSES and three different border patterns.
     3. The rules sheet says which road is which, in words, before the first
        throw.
   ========================================================================== */

.board__cell {
    stroke-width: 3;
}

/* Where the road parts. The one square a child has to notice. */
.board__cell.is-fork {
    fill: #6b5410;
    stroke: #ffd45c;
    stroke-width: 5;
    stroke-dasharray: 20 6;
}

/* THE PLAIN ROAD: pale, flat, and nothing on it. */
.board__cell.is-plain {
    fill: #4a4336;
    stroke: #9b8c6e;
    stroke-dasharray: none;
}

/* A ROUGH SQUARE: darkest on the board, with a heavy broken edge. You rest
   here for a turn, and that is what the treasure beside it costs. */
.board__cell.is-hard {
    fill: #2a1a14;
    stroke: #a05a3c;
    stroke-width: 4;
    stroke-dasharray: 6 8;
}

/* A TREASURE: the brightest thing on the board, because it is the reason
   anybody takes the hard road at all. */
.board__cell.is-treasure {
    fill: #b98b1e;
    stroke: #fff2b0;
    stroke-width: 5;
    stroke-dasharray: none;
}

/* THE TREASURE HOUSE. The end of both roads. */
.board__cell.is-treasure-house {
    fill: #fff6d8;
    stroke: #d8a534;
    stroke-width: 6;
    stroke-dasharray: none;
}

/*
   THE TWO ROADS, DRAWN SEPARATELY.

   `geometry().roads()` hands the renderer one line per side per road, so the
   fork is DRAWN as two roads leaving one square rather than being a rule a
   child has to be told. Both pilgrims own both roads, so the four lines are
   two pairs lying on top of each other and they interleave by their dashes.
*/
.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; }
.board__road.is-road-1 { stroke-width: 8; opacity: 0.9; }

/* ==========================================================================
   THE DIE
   ========================================================================== */

.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;
    }
}