/* ==========================================================================
   Out of Egypt -- 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 ---------------------------------------------
       Ebony and sand rather than the lapis next door, so a child arriving
       from Abram's Journey knows at once they are somewhere else. Both are
       dice games on a track; the colour is what says which. */
    --board-bg:       #241a10;
    --board-line:     #8f6f3c;
    --board-cell:     #3b2a17;
    --board-cell-alt: #33240f;

    /*
       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 SIX NAMED HOUSES AT THE END OF THE ROAD
   ==========================================================================
   Twenty-four squares of this board are plain and six are not, and the six are
   the whole of the endgame: the House of Rebirth you are swept back to, the
   House of Happiness nobody can move you off, the House of Water that does the
   sweeping, and the last three that each need their own exact throw.

   Standards.md §2 -- colour is never the only signal -- costs three things
   here, exactly as it does on the Road to the Manger:

     1. `topo-track` TAGS each one, so label() says "square 27, a water square"
        out loud. That is the half a screen reader gets, and it is why the
        names live in the board data rather than in this file.
     2. The six differ in LIGHTNESS as well as in hue, so they are still six
        different squares in greyscale and to the boy in twelve who cannot
        rely on red against green.
     3. Each carries its own BORDER PATTERN. A dashed edge is a shape, and
        shape is the signal that survives everything.

   The square number is drawn in the corner of every square regardless
   (topo-track's inkAt), so there is a fourth way to tell one from another.
   ========================================================================== */

.board__cell {
    /* The pattern is the point, so the edge has to be thick enough to read. */
    stroke-width: 3;
}

/* The one that sweeps you back. Darkest, and the only cool colour on the
   board -- water among sandstone. Fine dots. */
.board__cell.is-water {
    fill: #16456b;
    stroke: #7fc8ff;
    stroke-dasharray: 3 5;
}

/* Where the water puts you down again. A long dash, and a green nobody could
   mistake for the blue above it. */
.board__cell.is-rebirth {
    fill: #1f5b3a;
    stroke: #7fe0a8;
    stroke-dasharray: 20 6;
}

/* Safe, and the brightest square on the board, because it is the one a child
   is aiming for. Solid edge. */
.board__cell.is-happiness {
    fill: #a8791b;
    stroke: #ffe9a8;
    stroke-width: 5;
    stroke-dasharray: none;
}

/* The last three, each needing its own exact throw. They rise in lightness
   towards the end of the road, and each has its own dash. */
.board__cell.is-truths { fill: #4a3468; stroke: #cbb0ff; stroke-dasharray: 10 6; }
.board__cell.is-atoum  { fill: #5e3a2a; stroke: #ffb493; stroke-dasharray: 12 4 3 4; }
.board__cell.is-horus  { fill: #7d5a12; stroke: #ffd45c; stroke-dasharray: 26 5; }

/*
   THE ROAD, UNDER THE SQUARES.

   Both players walk one road here, so there is exactly one line and it is
   drawn once -- `geometry().route()`, not `roads()`, because on this board
   cell order and walking order are the same thing (topo-track.js).
*/
.board__route {
    stroke: #8f6f3c;
    stroke-width: 10;
    opacity: 0.7;
}

/*
   THE ONE JUMP ON THE BOARD GOES BACKWARDS.

   The engine calls a backward jump a "snake" because it serves eleven track
   games and knows nothing about Egypt. Drawn here as a wave rather than a
   serpent, with its head at the House of Rebirth: it is water, and it is the
   thing that carries a counter back.
*/
.board__snake {
    stroke: #7fc8ff;
    stroke-width: 6;
    opacity: 0.9;
}

/* ==========================================================================
   THE STICKS
   ==========================================================================
   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;
    }
}