/* ==========================================================================
   Dividing the Inheritance -- 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.
 */

/*
 * Nothing else belongs here yet, and that is the point: board.css draws the
 * surface, the cells, the pieces, the three markers and the panels from the
 * tokens above. Add a rule here only for something this board has that no
 * other board does.
 */

/* --------------------------------------------------------------------------
   THE BOARD IS A PORTION AND A SHELF. Twenty-four squares of ground round a
   tent; a one-column shelf down the right with four slots the line's tiles
   sit on (tap one to claim it) and a fifth, the hand, where the tile being
   laid is shown. The portion drawn is the portion of the side to move
   (decision HHHH), and its border says whose: gold for the child, blue for
   Blue -- colour paired with the word in the turn line.

   A laid half is three polygons in the renderer's overlay layer (SSS): a
   square of its land, its land's GLYPH, and a small square for each village.
   Six lands, six colours, six glyphs, and every half's spoken word names its
   land and its villages, because colour is never the only signal.
   -------------------------------------------------------------------------- */
.app {
    --ground-cell:    #2a2158;
    --ground-line:    #4b3f8f;
    --shelf-cell:     #17123a;
    --shelf-slot:     #2e2566;
    --shelf-rim:      #5a4ba8;
    --hand-slot:      #241c55;
    --half-edge:      #14102e;
    --glyph-ink:      #14102e;
    --village-ink:    #fff7dc;
    --village-edge:   #14102e;
    --tent-fill:      #f4efe6;
    --tent-edge:      #7a5313;
    /* The six lands: wheat, olives, brooks, pasture, vines, hills. Six hues
       and six lightnesses, so a photocopy still tells them apart. */
    --land-0: #f2c94c;
    --land-1: #7fb069;
    --land-2: #6fc3ff;
    --land-3: #b7e3a8;
    --land-4: #c9a3ff;
    --land-5: #b98b5a;
}

/* The ground. */
.board__cell {
    fill: var(--ground-cell);
    stroke: var(--ground-line);
    stroke-width: 2;
}

/* The shelf: a slot is where a tile sits; the hand is where the tile being
   laid is shown. A `fill: none` would make a slot unclickable, so every shelf
   cell is filled. */
.board__cell.is-slot {
    fill: var(--shelf-slot);
    stroke: var(--shelf-rim);
    stroke-width: 3;
    rx: 12;
}
.board__cell.is-hand {
    fill: var(--hand-slot);
    stroke: var(--shelf-rim);
    stroke-width: 3;
    stroke-dasharray: 8 6;
    rx: 12;
}

/* A slot that can be tapped is RINGED. The renderer's legal-move dot lands in
   the middle of the slot, under the tile drawn there, and a pale dot on a
   pale land is invisible -- the Quilt's finding, on a tile. The ring is the
   cell's own stroke, so it is under nothing. */
.board__cell.is-slot.is-playable {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 6;
}

/* The halves: on the portion, on the shelf, in the hand. */
.board__shape.is-half {
    stroke: var(--half-edge);
    stroke-width: 3;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-half.is-land-0 { fill: var(--land-0); }
.board__shape.is-half.is-land-1 { fill: var(--land-1); }
.board__shape.is-half.is-land-2 { fill: var(--land-2); }
.board__shape.is-half.is-land-3 { fill: var(--land-3); }
.board__shape.is-half.is-land-4 { fill: var(--land-4); }
.board__shape.is-half.is-land-5 { fill: var(--land-5); }

/* The glyph is the land's ink on the land's colour: the shape survives where
   the colour does not. */
.board__shape.is-glyph {
    fill: var(--glyph-ink);
    fill-opacity: 0.55;
    stroke: none;
}

/* A village: a small pale square with a dark edge, counted along the top of
   its half. */
.board__shape.is-village {
    fill: var(--village-ink);
    stroke: var(--village-edge);
    stroke-width: 1.5;
    paint-order: stroke;
}

/* The tent in the middle: a triangle, drawn once, never covered. */
.board__shape.is-tent {
    fill: var(--tent-fill);
    stroke: var(--tent-edge);
    stroke-width: 3;
    stroke-linejoin: round;
}

/* The shelf's icons: a tile already claimed is dimmed a little, and its
   claimer's colour is a frame behind it. Only a little: gold wheat at half
   opacity on this ground is the brown of hills (looked at, 2026-09-12). */
.board__shape.is-icon.is-taken {
    fill-opacity: 0.8;
}
.board__shape.is-glyph.is-icon.is-taken {
    fill-opacity: 0.3;
}
.board__shape.is-claim {
    fill: none;
    stroke-width: 5;
    stroke-linejoin: round;
}
.board__shape.is-claim.is-side-0 { stroke: var(--piece-0); }
.board__shape.is-claim.is-side-1 { stroke: var(--piece-1); }

/* The tile in hand is ringed in gold, like a held patch on the Quilt. */
.board__shape.is-half.is-held {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 4;
}

/* Whose portion: a frame round the twenty-five squares in the side's colour,
   drawn by rules.js as the first item of the overlay, and the turn line says
   it in words. In the overlay and not an outline on the board element, for
   the Quilt's reason: the SVG is letterboxed in a portrait frame. */
.board__shape.is-portion-frame {
    fill: none;
    stroke-width: 8;
    stroke-linejoin: round;
}
.board__shape.is-portion-frame.is-side-0 { stroke: var(--piece-0); }
.board__shape.is-portion-frame.is-side-1 { stroke: var(--piece-1); }

@media (forced-colors: active) {
    .board__shape.is-half { stroke: CanvasText; }
    .board__shape.is-glyph { fill: CanvasText; fill-opacity: 1; }
    .board__shape.is-village { fill: Canvas; stroke: CanvasText; }
    .board__shape.is-tent { fill: Canvas; stroke: CanvasText; }
    .board__shape.is-half.is-held { stroke: Highlight; }
    .board__shape.is-claim { stroke: CanvasText; }
    .board__cell.is-slot, .board__cell.is-hand { stroke: CanvasText; }
    .board__cell.is-slot.is-playable { stroke: Highlight; }
    .board__shape.is-portion-frame { stroke: CanvasText; }
}

/*
   LANDSCAPE: THE SCORE CHIPS DROP OUT, as on the Quilt (measured there
   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;
    }
}