/* ==========================================================================
   The Road to the Manger -- 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.
    */
    /*
       THE COUNTERS HAVE TO BE VISIBLE ON ALL SIX COLOURS, and on this board
       that is not free: the path has a GOLD square and a BLUE square, and the
       shared piece colours are gold and blue. A gold counter standing on a
       gold square is a counter a child cannot see, and it was one -- square 7
       in the first screenshot.

       So the counters here are DARK with a bright rim, which reads against
       every one of the six pale path colours and against the dark board
       surround as well. The side names in rules.js stay Gold and Blue, which
       is what the rim says and what the turn indicator shows.
    */
    --piece-0:        #7a4f00;
    --piece-0-edge:   #ffe9a8;
    --piece-1:        #123a63;
    --piece-1-edge:   #bfe3ff;
}

/*
 * 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 COLOURS, WHICH ON THIS BOARD ARE THE RULES
   ==========================================================================
   Every other board on this site could be drawn in one colour and still be
   played. This one could not: the whole game is "move to the next square of
   the colour on your card", so the colours ARE the rules and a child who
   cannot tell them apart cannot play at all.

   Standards.md §2 says colour is never the only signal, and here that costs
   three things rather than one:

     1. `topo-track` TAGS each square, so `label()` says "square 4, a green
        square" out loud. That is the half a screen reader gets, and it is the
        reason the colours live in the board data rather than in this file.
     2. The six are chosen to differ in LIGHTNESS as well as in hue, so they
        stay six different squares in greyscale, in a photocopy, and to the one
        boy in twelve who cannot rely on red against green.
     3. Each one carries its own BORDER PATTERN as well. 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;
}

/* Lightest of the six. Solid edge. */
.board__cell.is-white  { fill: #efeeff; stroke: #b9b6e8; stroke-dasharray: none; }
/* Then gold. A long dash. */
.board__cell.is-gold   { fill: #ffd45c; stroke: #a97f18; stroke-dasharray: 16 6; }
/* Then rose. A short dash. */
.board__cell.is-rose   { fill: #ff9bad; stroke: #a53a52; stroke-dasharray: 9 6; }
/* Then violet. Dash and dot. */
.board__cell.is-violet { fill: #b98cf5; stroke: #5a2f96; stroke-dasharray: 12 4 3 4; }
/* Then blue. Fine dots. */
.board__cell.is-blue   { fill: #5aa9f0; stroke: #14476f; stroke-dasharray: 3 5; }
/* Darkest of the six. A very long dash. */
.board__cell.is-green  { fill: #3fae6d; stroke: #12482a; stroke-dasharray: 22 6; }

/*
   THE MANGER. The last square, and the only one with no colour at all -- so
   nothing can send you to it by matching, and a child looking for it is
   looking for the one square that is not like the others.
*/
.board__cell.is-manger {
    fill: #fff6d8;
    stroke: #d8a534;
    stroke-width: 5;
    stroke-dasharray: none;
}

/*
   THE SQUARE NUMBERS SIT ON A DARK CHIP, NOT ON THE SQUARE.
   
   board.css draws `.board__ink-chip` -- a translucent dark corner -- under
   every number, precisely so the ink stays legible whatever colour the square
   is. Overriding the ink to DARK for these pale squares therefore made it dark
   on dark: BibleGames_Contrast.py measured the numbers on the green, blue,
   rose and violet squares at 1.92:1 to 2.40:1, against AA_s 3.0.

   So the number is CREAM, as the shared default already had it, and the chip
   underneath is what makes that work on a board of pale colours. The lesson is
   the one Standards.md §6 keeps making: contrast is MEASURED, never judged --
   the whole override was written for a background the ink never sits on.
*/
.board__ink {
    fill: #fff6e0;
    font-weight: 700;
}

/*
   THE STAR TRAIL.

   The engine calls a forward jump a "ladder", because it serves eleven track
   games and knows nothing about Bethlehem (topo-track's jumps(): `kind` is
   derived from whether the jump goes forward or back, so the renderer can
   never call a snake a ladder). It draws two rails with rungs between them.

   THERE ARE NO SNAKES ON THIS BOARD -- every jump goes forward -- so there is
   nothing for the rung shape to distinguish it FROM, and a ladder lying across
   the road is the wrong picture. The rungs are dropped and the rails become a
   pale double trail: the star going on before them.

   `names.jumps` in rules.js is the WORDS half of the same thing: "follows the
   star on to square 19".
*/
.board__ladder {
    stroke: #fff6d8;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0.95;
}

.board__ladder--rungs {
    /* Nothing to tell apart, so nothing to draw. */
    display: none;
}

/*
   The road itself, under the squares. Warm, and wide enough to read as a road
   rather than as a join between squares.
*/
.board__route {
    stroke: #3a2f7a;
    stroke-width: 10;
    opacity: 0.85;
}

/* ==========================================================================
   THE CARD THAT HAS BEEN TURNED OVER
   ==========================================================================
   It carries the colour AND the word, because a card that was only a coloured
   rectangle would be the one thing on this board a colour-blind child could
   not read -- and this is the board where the colour IS the rule.
   ========================================================================== */

.card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 2px solid #6a5cc0;
    border-radius: 10px;
    background: #241d55;
    color: #efeeff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.card:empty {
    visibility: hidden;
}

/* The drawn colour, with dark ink on every one of the six, because five of
   them are pale. Contrast is measured, never judged -- Standards.md §6. */
.card.is-drawn  { color: #17123a; border-color: rgba(0, 0, 0, 0.45); }
.card.is-gold   { background: #ffd45c; }
.card.is-rose   { background: #ff9bad; }
.card.is-green  { background: #3fae6d; }
.card.is-blue   { background: #5aa9f0; }
.card.is-violet { background: #b98cf5; }
.card.is-white  { background: #efeeff; }

/* In phone landscape the chrome moves into a column beside the board
   (board.css), and the turn indicator and the card share the top of it. */
@media (max-height: 520px) {
    .card {
        min-width: 70px;
        min-height: 34px;
        font-size: 0.95rem;
    }
}

@media (forced-colors: active) {
    /* Windows High Contrast throws the palette away. The WORD must survive,
       and on this board the word is the whole of the information. */
    .card {
        forced-color-adjust: none;
        background: Canvas;
        color: CanvasText;
        border-color: CanvasText;
    }
}