/* ==========================================================================
   Who Rolled Away the Stone? -- 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:   #b07a14;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #3a86b8;
    /*
       THE EDGES ARE MID-TONES HERE, NOT THE SHARED DARK ONES. A seeker stands
       under the NAME of the place it is in, and Contrast samples everything
       under a word: the dark ink over the shared dark edge read 2.81:1 on
       "Tomb" with both seekers in it. Over these edges it is 4.5:1 and over
       the pieces themselves 10:1 and more, and a gold piece on sandstone is
       still edged -- measured, then re-measured.
    */

    /* ---- this board's own places ----------------------------------------- */
    --place-cell:     #d9c9a4;   /* a place round the ring: sandstone */
    --tomb-cell:      #cfd3d8;   /* the Tomb: pale stone */
    --tomb-rim:       #ffd45c;   /* rimmed in gold, so it reads as the goal */
    --card-cell:      #f3ead2;   /* a card: parchment, the detective sheet */
    --card-rim:       #b9a77a;
    --ink:            #14102e;   /* one dark ink for every pale point */
}

/*
 * THREE KINDS OF POINT, AND THE CLASS COMES FROM THE TOPOLOGY -- a node may
 * declare a `kind`, exactly as a mancala store does -- so the drawing and the
 * spoken label cannot disagree: `topo.label()` says "the Tomb" whatever this
 * rule does. And it is never the only signal: a card carries its NAME as ink,
 * a place is on the ring of lines, and the Tomb is where the lines meet.
 *
 * EVERY POINT IS PALE, AND THAT IS THE ONE REAL RULE IN THIS FILE. The name
 * is inked on every point, on top of whatever piece stands there -- a gold
 * tile, a blue ring, a seeker -- and render.js draws all the ink in ONE
 * layer in ONE colour. Mancala's finding: the ink must be the board's own
 * dark, and then everything it sits on has to be light. Measured, not
 * assumed: #14102e on --piece-0 #ffd45c is 14.1:1 and on --piece-1 #7fc8ff
 * 10.5:1; on the sandstone and the parchment it is over 12:1.
 */
.board__cell.is-place {
    fill: var(--place-cell);
    stroke: var(--board-line);
    stroke-width: 2;
}

.board__cell.is-tomb {
    fill: var(--tomb-cell);
    stroke: var(--tomb-rim);
    stroke-width: 5;
}

.board__cell.is-card {
    fill: var(--card-cell);
    stroke: var(--card-rim);
    stroke-width: 2;
}

/*
 * A POINT YOU MAY TAP IS RINGED, WHETHER OR NOT SOMETHING STANDS ON IT.
 *
 * The shared vocabulary marks a legal move with a DOT in the middle of an
 * empty cell, and with a ring round the edge where a piece is standing. Here
 * the middle of every point is its NAME, so the dot sat under the letters of
 * "Spices" and could not be seen -- found in the first screenshot, with every
 * check green. Nothing is ever lifted on this board, so the rim that means
 * "you may pick this up" elsewhere is free, and the ring the renderer already
 * draws round an occupied target is the same ring in the same colour: one
 * signal, "you may tap this", the same on a bare card and on a card carrying
 * a tile.
 */
.board__cell.is-playable {
    stroke: var(--board-take);
    stroke-width: 5;
}

@media (forced-colors: active) {
    .board__cell.is-playable {
        stroke: Highlight;
    }
}

/*
 * THE INK IS THE BOARD: every point carries its name, and "Joanna" has to fit
 * inside a circle of radius 45 on a 100-unit pitch. 22px rather than the
 * shared 26px is the difference between a name that fits and one that
 * touches the rim.
 */
.board__ink {
    fill: var(--ink);
    font-size: 22px;
    font-weight: 700;
}

/*
 * 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.
 */