/* ==========================================================================
   Building the Kingdom -- 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;
}

/*
 * 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
 * seven 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 KINGDOM (decision OOOOO). A 7x8 grid: the upper seven by seven is the
   kingdom, bare ground where nothing is laid yet, and every laid tile is
   drawn by the overlay (rules.overlay) as a green field carrying its roads,
   its town walls or its chapel. The bottom row is the SHELF: the pile, the
   tile in hand, and the two yards where the labourers wait. The labourers
   on the board are the only pieces: Gold's disc and Blue's ring.
   -------------------------------------------------------------------------- */
.app {
    --ground:         #2a2418;
    --ground-line:    #3d3524;
    --shelf:          #14112a;
    --field:          #5f8a3c;
    --field-seed:     #6f9a48;
    --road:           #e6d3a3;
    --road-edge:      #6b5a34;
    --village:        #8a6a3a;
    --wall:           #8c8a9a;
    --wall-edge:      #3a384a;
    --keep:           #a7a5b8;
    --chapel:         #f4efe0;
    --chapel-edge:    #5a4a2a;
    --cross:          #5a4a2a;
    --last-frame:     #ffd45c;
    --hand-frame:     #e9dcb8;
    --pile-back:      #4a3f6b;
    --pile-edge:      #b6a8e0;
    --wait-0:         #ffd45c;
    --wait-0-edge:    #7a5313;
    --wait-1:         #7fc8ff;
    --wait-1-edge:    #143d5c;

    --board-bg:       var(--shelf);
    --board-cell:     var(--ground);
    --board-cell-alt: var(--ground);
    --board-line:     var(--ground-line);
}

/* The shelf row is not ground: the pile, the hand and the yards lie on it. */
.board__cell.is-shelf {
    fill: var(--shelf);
    stroke: var(--shelf);
    stroke-width: 1;
}

/* A laid tile's field, the seed's a little brighter. */
.board__shape.is-field {
    fill: var(--field);
    stroke: none;
}
.board__shape.is-field.is-on-seed {
    fill: var(--field-seed);
}

/* Roads: pale bars, one shape per bar (the hub joins them, the village marks three or four). */
.board__shape.is-road {
    fill: var(--road);
    stroke: none;
}
.board__shape.is-village {
    fill: var(--village);
    stroke: none;
}

/* Town walls: stone bands along the edge, the keep where two or more meet. */
.board__shape.is-wall {
    fill: var(--wall);
    stroke: var(--wall-edge);
    stroke-width: 1.5;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-wall.is-keep {
    fill: var(--keep);
}

/* A chapel: a small house and its cross. */
.board__shape.is-chapel {
    fill: var(--chapel);
    stroke: var(--chapel-edge);
    stroke-width: 1.5;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-cross {
    fill: var(--cross);
    stroke: none;
}

/* The tile just laid: a frame, where the second tap sets a labourer. */
.board__shape.is-last-frame {
    fill: none;
    stroke: var(--last-frame);
    stroke-width: 3;
    stroke-linejoin: round;
}

/* The tile in hand sits in a frame on the shelf; its picture is the same as a laid one's. */
.board__shape.is-hand-frame {
    fill: var(--ground);
    stroke: var(--hand-frame);
    stroke-width: 2;
}

/* The pile: a stack of tile backs. */
.board__shape.is-pile-back {
    fill: var(--pile-back);
    stroke: var(--pile-edge);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* The labourers waiting: Gold's octagons, Blue's diamonds. */
.board__shape.is-wait-0 {
    fill: var(--wait-0);
    stroke: var(--wait-0-edge);
    stroke-width: 1.5;
    paint-order: stroke;
}
.board__shape.is-wait-1 {
    fill: var(--wait-1);
    stroke: var(--wait-1-edge);
    stroke-width: 1.5;
    paint-order: stroke;
}

/* Where the tile may go is marked the renderer's own way -- the legal-move
   dot -- and on this board it is drawn at full strength: at 50 px on bare
   ground, and on the hand's frame, the shared half-opacity dot is faint. */
.board--square .board__hint {
    opacity: 1;
}

@media (forced-colors: active) {
    .board__cell { fill: Canvas; stroke: CanvasText; }
    .board__cell.is-shelf { fill: Canvas; stroke: Canvas; }
    .board__shape.is-field { fill: Canvas; stroke: CanvasText; stroke-width: 1; }
    .board__shape.is-road { fill: CanvasText; stroke: Canvas; }
    .board__shape.is-village { fill: Highlight; }
    .board__shape.is-wall { fill: GrayText; stroke: CanvasText; }
    .board__shape.is-chapel { fill: Canvas; stroke: CanvasText; }
    .board__shape.is-cross { fill: CanvasText; }
    .board__shape.is-last-frame { stroke: Highlight; }
    .board__shape.is-hand-frame { fill: Canvas; stroke: CanvasText; }
    .board__shape.is-pile-back { fill: Canvas; stroke: CanvasText; }
    .board__shape.is-wait-0, .board__shape.is-wait-1 { fill: Highlight; stroke: CanvasText; }
}

/*
   LANDSCAPE: the score chips drop out, as on the Wilderness and the Living
   Stones. The turn line says both scores and the pile, so the chips are the
   thing to give up.
*/
@media (min-height: 300px) and (max-height: 520px) and (min-width: 520px) {
    .tray {
        display: none;
    }
    .boardbar {
        min-height: 52px;
    }
}