/* ==========================================================================
   Living Stones of the Temple -- 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 BOARD IS A TEMPLE FLOOR AND A TRAY OF STONES. Fourteen by fourteen
   paving squares with a fine joint between them, two start squares marked in
   the builders' colours, and a three-column tray down the right with
   twenty-one slots -- each slot TWO cells tall (decision ZZZZ), the upper cell
   the tap target and the lower one the rest of its panel -- holding the
   stones of the builder to move.

   A stone is a polygon in the renderer's overlay layer (SSS): gold for the
   child, blue for Blue, and every stone is also its own SHAPE with its own
   spoken word, because colour is never the only signal.
   -------------------------------------------------------------------------- */
.app {
    --floor-cell:     #2a2158;
    --floor-joint:    #4b3f8f;
    --tray-cell:      #17123a;
    --tray-slot:      #241c55;
    --tray-rim:       #5a4ba8;
    --stone-edge:     #14102e;
}

/* The paving. */
.board__cell {
    fill: var(--floor-cell);
    stroke: var(--floor-joint);
    stroke-width: 2;
}

/* The start squares, in the builders' colours, until a stone covers them. */
.board__cell.is-start-0 {
    fill: #4a3a12;
    stroke: var(--piece-0);
    stroke-width: 4;
}
.board__cell.is-start-1 {
    fill: #163650;
    stroke: var(--piece-1);
    stroke-width: 4;
}

/* The tray floor, darker than the paving so the tray reads as a tray. The
   kit's slot is the UPPER cell of each panel and the lower cell is the rest
   of it; both are plain here, because the panel itself is drawn by rules.js
   in the overlay as ONE shape two cells tall (the first picture drew the
   slot's rim as a box round the top half of every icon). A `fill: none`
   would make a cell unclickable, so every tray cell is filled. */
.board__cell.is-tray,
.board__cell.is-slot {
    fill: var(--tray-cell);
    stroke: var(--tray-cell);
}

/* The panel under each stone; RINGED when its stone can be picked up. The
   renderer's legal-move dot lands in the middle of the slot cell, under the
   stone drawn there, and a dot under a stone is invisible -- Mansion's fault,
   on a stone -- so the ring says it instead. */
.board__shape.is-panel {
    fill: var(--tray-slot);
    stroke: var(--tray-rim);
    stroke-width: 2;
    stroke-linejoin: round;
}
.board__shape.is-panel.is-empty {
    fill: var(--tray-cell);
    stroke: var(--tray-slot);
}
.board__shape.is-panel.is-offered {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 4;
}
.board__shape.is-panel.is-holding {
    fill: #3a2f6e;
}

/* The stones: on the floor, and in the tray. */
.board__shape.is-stone {
    stroke: var(--stone-edge);
    stroke-width: 4;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-stone.is-side-0 { fill: var(--piece-0); }
.board__shape.is-stone.is-side-1 { fill: var(--piece-1); }

/* A laid stone shows its mortar: a darker, heavier edge. */
.board__shape.is-stone.is-down {
    stroke-width: 5;
}

/* The tray's icons: the one in hand is drawn larger by rules.js in the
   attitude it is held in, and ringed here; one that fits nowhere on the floor
   is dimmed and dashed -- and the offer refuses it, so a tap there does
   nothing. */
.board__shape.is-icon {
    stroke-width: 2;
}
.board__shape.is-icon.is-held {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 4;
}
.board__shape.is-icon.is-nofit {
    fill-opacity: 0.28;
    stroke-dasharray: 5 4;
}

@media (forced-colors: active) {
    .board__shape.is-stone { stroke: CanvasText; }
    .board__shape.is-icon.is-held { stroke: Highlight; }
    .board__shape.is-panel { stroke: CanvasText; }
    .board__shape.is-panel.is-offered { stroke: Highlight; }
    .board__cell.is-start-0,
    .board__cell.is-start-1 { stroke: CanvasText; }
}

/*
   LANDSCAPE: THE SCORE CHIPS DROP OUT. The Quilt measured this column five
   pixels short on a 740x360 phone with a piece in hand (its README §8): the
   turn line, the tray's chips, Turn and Flip, the control pad and the top bar
   add up to more than the window. The chips say what the turn line already
   says in words, so they 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;
    }
    .boardactions {
        gap: 6px;
    }
    .board__action {
        padding: 0 10px;
        font-size: 0.85rem;
    }
}