/* ==========================================================================
   The Chain of Faith -- 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.
*/
.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.
    */
    --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 (2026-09-03: a capped frame, a board in the top-left
 * corner, every check green). If a board genuinely needs a different shape,
 * change its viewBox in the TOPOLOGY, which is the one place that knows.
 */

/* --------------------------------------------------------------------------
   THE BOARD IS A TABLE, A HAND, BLUE'S STACK AND THE STORE -- decision PPPP.
   Rows 0-3 are the table the chain lies on: felt, with no lines, because the
   chain's positions are half-cells and a grid drawn under them would be a
   grid of the wrong size. Row 4 and the end of row 5 are the twelve hand
   slots; the start of row 5 is Blue's face-down stack and the store.

   A bone is polygons in the renderer's overlay layer (SSS): an ivory face a
   half, a small dark octagon a pip, a bar between the halves. Face-down bones
   -- Blue's, and the store -- are dark backs. Colour is never the only
   signal: the pips are shapes, the two counts are numerals, every cell has
   its spoken word.
   -------------------------------------------------------------------------- */
.app {
    --felt:           #24405a;
    --felt-edge:      #1a2e42;
    --slot-cell:      #2e2566;
    --slot-rim:       #5a4ba8;
    --side-cell:      #17123a;
    --bone-face:      #f4efe2;
    --bone-edge:      #8a7f6a;
    --bone-pip:       #1c1a2e;
    --bone-bar:       #a89c86;
    --bone-back:      #2d5f9a;
    --bone-back-edge: #cfe2f7;
    --frontier:       #ffd45c;
}

/* The table: felt, edge to edge, no lines between its cells. */
.board__cell.is-table {
    fill: var(--felt);
    stroke: var(--felt);
    stroke-width: 1;
}

/* The hand: a slot is where a bone lies until it is laid. A `fill: none`
   would make a slot unclickable, so every slot is filled. */
.board__cell.is-slot {
    fill: var(--slot-cell);
    stroke: var(--slot-rim);
    stroke-width: 3;
    rx: 12;
}

/* Blue's stack and the store: the same dark ground, so they read as
   "not the table and not your hand". The store is a tap target when a draw
   is on, and the renderer's dot says so. */
.board__cell.is-rival,
.board__cell.is-store {
    fill: var(--side-cell);
    stroke: var(--slot-rim);
    stroke-width: 3;
    stroke-dasharray: 8 6;
    rx: 12;
}

/* A cell that can be tapped is RINGED, in the cell's own stroke so it is
   under nothing -- the Kingdom's finding: the renderer's dot lands under the
   bone drawn there. On the table the ring is round the frontier's cell. */
.board__cell.is-slot.is-playable,
.board__cell.is-store.is-playable,
.board__cell.is-table.is-playable {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 6;
}

/* A bone's face, its pips and the bar between its halves. */
.board__shape.is-face {
    fill: var(--bone-face);
    stroke: var(--bone-edge);
    stroke-width: 1.5;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-pip {
    fill: var(--bone-pip);
    stroke: none;
}
.board__shape.is-bar {
    fill: var(--bone-bar);
    stroke: none;
}

/* The lead stands out a little: it is the one bone nobody chose. */
.board__shape.is-face.is-lead {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 2.5;
}

/* A face-down bone: Blue's, or the store's. */
.board__shape.is-back {
    fill: var(--bone-back);
    stroke: var(--bone-back-edge);
    stroke-width: 1.5;
    paint-order: stroke;
}

/* Where the next bone goes on each open arm: a faint dashed slot. */
.board__shape.is-frontier {
    fill: none;
    stroke: var(--frontier);
    stroke-width: 2;
    stroke-dasharray: 6 5;
    opacity: 0.7;
}

/* The two counts sit on Blue's stack and the store, below the icons. */
.board__ink {
    font-size: 30px;
    fill: var(--text, #fff7dc);
}

@media (forced-colors: active) {
    .board__cell.is-table { fill: Canvas; stroke: CanvasText; }
    .board__cell.is-slot, .board__cell.is-rival, .board__cell.is-store { stroke: CanvasText; }
    .board__cell.is-playable { stroke: Highlight; }
    .board__shape.is-face { fill: Canvas; stroke: CanvasText; }
    .board__shape.is-pip { fill: CanvasText; }
    .board__shape.is-bar { fill: CanvasText; }
    .board__shape.is-back { fill: CanvasText; stroke: Canvas; }
    .board__shape.is-frontier { stroke: Highlight; }
}

/*
   LANDSCAPE: THE SCORE CHIPS DROP OUT, as on the Quilt and the Kingdom
   (measured 2026-09-12: a two-line turn, the chips, an action row and the
   control pad are five pixels more than a 360px window). The turn line on
   this page says both counts in words, 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;
    }
    .boardactions {
        gap: 6px;
    }
    .board__action {
        padding: 0 10px;
        font-size: 0.85rem;
    }
}