/* ==========================================================================
   Saul Hunts David -- 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: the wilderness, at dusk ------------------------ */
    --board-bg:       #1b1a3f;
    --board-line:     #a88a5a;   /* a road: sand on the dark */
    --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. David is gold and Saul's men are blue; the rules
       sheet names them by their shapes as well.

       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 place. THE EDGES ARE MID-TONES, Mansion's
       finding: a place carries its NAME over whoever stands on it, and
       Contrast samples everything under a word, including the edge.
    */
    --piece-0:        #ffd45c;
    --piece-0-edge:   #b07a14;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #3a86b8;

    /* ---- this board's own places ------------------------------------------- */
    --place-cell:     #e2d4b0;   /* a place: sun on limestone */
    --place-rim:      #a88a5a;
    --hill-line:      #d9c39a;   /* a hill path: paler, and dashed */
    --ink:            #14102e;   /* one dark ink for every pale place */
}

/*
 * EVERY PLACE IS PALE, AND THAT IS THE ONE REAL RULE IN THIS FILE. The name
 * is inked on every place, on top of whoever stands there -- David, a
 * seeker, the ring at Keilah -- 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. #14102e on --piece-0
 * #ffd45c is 14.1:1 and on --piece-1 #7fc8ff 10.5:1; on the limestone it is
 * over 12:1 -- measured on Mansion's identical tokens, and re-measured here.
 */
.board__cell.is-place {
    fill: var(--place-cell);
    stroke: var(--place-rim);
    stroke-width: 2;
}

/*
 * A LINE MAY CARRY A KIND -- decision JJJ. A road is a solid line and a hill
 * path is a dashed one: a SHAPE, so the two are told apart in greyscale and
 * under forced colours. Never the only signal: the move list SAYS "by the
 * road" or "over the hill path", the boardbar repeats it, and the rules
 * sheet names both. The class comes from the table through the topology,
 * so the drawing and the clue Saul is given cannot disagree.
 */
.board__link {
    stroke: var(--board-line);
    stroke-width: 6;
    stroke-linecap: round;
}

.board__link.is-kind-hill {
    stroke: var(--hill-line);
    stroke-width: 5;
    stroke-dasharray: 14 12;
}

/*
 * A PLACE YOU MAY WALK TO 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 the middle of every place here is its NAME, so the dot
 * would sit under the letters (Mansion's first screenshot). Nothing is ever
 * lifted on this board, so the ring the renderer already draws round an
 * occupied target is the one signal, "you may walk here".
 */
.board__cell.is-playable {
    stroke: var(--board-take);
    stroke-width: 5;
}

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

    .board__link.is-kind-hill {
        stroke: CanvasText;
    }
}

/*
 * THE INK IS THE MAP: every place carries its name, and "Hachilah" has to
 * fit inside a circle of radius 45 on a 100-unit pitch. 18px rather than the
 * shared 26px is the difference between a name that fits and one that
 * touches the rim; Mansion's six-letter names took 22px.
 */
.board__ink {
    fill: var(--ink);
    font-size: 18px;
    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 map that is
 * taller than it is wide TURNS on a landscape frame (decision II); nothing
 * here needs to know.
 */