/* ==========================================================================
   Roll 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:   #7a5313;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;

    /* The great stone, and the nine that are in its way. */
    --great-stone:      #ffe9a8;
    --great-stone-edge: #b07a10;
    --lesser-stone:     #e0a83c;
    --lesser-stone-edge:#6b4610;

    /* The doorway in the bottom rail. */
    --doorway:        #2d2470;
}

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

/*
/*
   WHAT THE HINT FOUND, IN WORDS.
   ---------------------------------------------------------------------------
   No other game on the site has a Hint button, so board.css has nothing to say
   about the line underneath one, and this is the only rule in this file that is
   not a token.

   IT RESERVES ITS HEIGHT WHETHER OR NOT THERE IS ANYTHING TO SAY.

   .stage is the only element allowed to grow or shrink, so a line that appears
   from nowhere takes its space out of the BOARD -- the pieces shrink the
   instant a child presses Hint, which is the one moment they are looking
   hardest at them. Reserving it costs the same pixels once, at load, when
   nothing is moving.

   AND WITHOUT A HEIGHT AT ALL IT IS A HARD-CONSTRAINT BUG. An unstyled
   paragraph takes whatever height its text needs, and a game page must never
   scroll. Nothing would have caught it: BoardPlay measures scroll at the start
   and after the game ends, and the line is cleared on every move -- so the one
   moment the text is on screen was the one moment nothing was looking.
*/
.hintsaid {
    margin: 0.25rem auto 0;
    padding: 0 0.75rem;
    max-width: 46ch;
    min-height: 2.6em;
    max-height: 2.6em;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: center;
    color: var(--gold-1, #ffd45c);
}

/*
   A SHORT SCREEN IS USUALLY A WIDE ONE, SO SPEND THE WIDTH.

   On a phone in landscape -- 740 by 360 -- every pixel of height belongs to the
   board. Squeezing this to one line and letting `overflow: hidden` deal with
   the rest is a fault that PHOTOGRAPHS PERFECTLY: the box shows a tidy first
   line and silently throws away the other two. Measured with scrollHeight
   against clientHeight, which is now what the fit probe does at every viewport.

   Uncapping the measure is the real answer: 46ch is right for reading a
   paragraph on a phone held upright, and in landscape it throws away four
   hundred pixels of empty row to save thirty of height.
*/
@media (max-height: 420px) {
    .hintsaid {
        max-width: none;
        min-height: 1.3em;
        max-height: 1.3em;
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/*
 * 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 FOUR KINDS OF STONE

   Every stone is the same object -- a stone -- so they are all one family of
   colour and the SHAPE is what tells them apart: two squares by two, one by
   two, two by one, one by one. That is a difference a photocopy and a
   colour-blind eye both keep, which is what Standards.md §2 asks for.

   THE GREAT STONE IS THE EXCEPTION, and it is a deliberate one. It is not
   another stone: it is the one the whole puzzle is about, and a child has to be
   able to find it in the first second without reading anything. So it is paler
   and it carries a rim, and its spoken label says "the great stone" -- three
   signals, none of which is only a colour.
   -------------------------------------------------------------------------- */

.board__piece.is-kind-0 {
    fill: var(--great-stone);
    stroke: var(--great-stone-edge);
    stroke-width: 5;
}

.board__piece.is-kind-1,
.board__piece.is-kind-2,
.board__piece.is-kind-3 {
    fill: var(--lesser-stone);
    stroke: var(--lesser-stone-edge);
}

/* High contrast throws every fill away and leaves the shapes. The great stone
   keeps its heavier rim, which is the one distinction that survives. */
@media (forced-colors: active) {
    .board__piece.is-kind-0 {
        stroke: Highlight;
        stroke-width: 5;
    }
}

/* --------------------------------------------------------------------------
   THE DOOR

   The two squares in the bottom rail the great stone has to reach. Without it
   the goal is written in the rules sheet and nowhere on the board, and a child
   who has closed the panel is looking at twenty identical squares.

   Drawn as a paler cell with a gold rail under it -- a place rather than a
   piece, so it never reads as something that can be picked up.
   -------------------------------------------------------------------------- */

.board__cell[data-cell="13"],
.board__cell[data-cell="14"],
.board__cell[data-cell="17"],
.board__cell[data-cell="18"] {
    fill: var(--doorway);
}