/* ==========================================================================
   Stones of Remembrance -- 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;

    /*
       TWELVE MARKS, TWELVE COLOURS, AND THE COLOUR IS NEVER THE ONLY SIGNAL.

       Standards.md §2, and twelve is exactly where a palette runs out for a
       colour-blind eye -- so every stone also carries its NUMBER, which reads
       the same in greyscale, on a photocopy and in Windows High Contrast, and
       which is what a child is actually matching.

       Chosen for contrast against the ink rather than for prettiness: the
       number is dark and must be legible on all twelve.
    */
    --mark-1:  #ffd45c;
    --mark-2:  #7fc8ff;
    --mark-3:  #8ce0a0;
    --mark-4:  #ff9d7a;
    --mark-5:  #c9a6ff;
    --mark-6:  #7fe0d8;
    --mark-7:  #ffb3d1;
    --mark-8:  #d4d98a;
    --mark-9:  #9fb4ff;
    --mark-10: #ffc9a0;
    --mark-11: #a8e2ff;
    --mark-12: #e6b0e6;

    --stone-edge:     #241a40;
    --stone-ink:      #1a1330;
}

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

/* --------------------------------------------------------------------------
   A PILE, NOT A GRID

   The slots ARE the pile on a free topology, so a slot with no stone left on
   it must stop being drawn -- otherwise clearing the cairn leaves a perfect
   picture of the cairn behind, in seventy-two empty rectangles. The stones are
   PIECES; nothing else is drawn at all.
   -------------------------------------------------------------------------- */

.board__cell {
    fill: none;
    stroke: none;

    /*
       `fill: none` MAKES AN SVG SHAPE UNCLICKABLE, and that is not a styling
       detail -- it is the difference between a board and a picture of one.
       A shape with no fill has nothing to hit-test against, so every tap fell
       straight through the stones to `.board__surface` behind them and NOT ONE
       STONE COULD BE PLAYED.

       Nothing looked wrong. The pile drew perfectly, the keyboard worked, the
       page did not scroll, the contrast was clean and every layout check
       passed. BibleGames_BoardPlay.py found it in one line -- "board__surface
       intercepts pointer events" -- which is exactly the fault that tool exists
       for.
    */
    pointer-events: all;
}

/*
   AND A SLOT WHOSE STONE HAS GONE MUST BE INVISIBLE TO A TAP.

   The slots overlap on a pile, and an emptied one on an upper layer is still a
   full-size rectangle drawn ABOVE the layers below it -- so it swallowed every
   tap meant for the stones underneath. A half-cleared cairn became a cairn
   whose middle could not be played, and the picture of it was perfect.

   render.js publishes `is-empty` for exactly this. It is the only board of the
   seventy-five where a slot can be BOTH empty and on top of something.
*/
.board__cell.is-empty {
    pointer-events: none;
}

/* The focus ring and the pick-up rim still have to be visible: a keyboard
   player has nothing else to go on. They are drawn on the cell, so the cell
   gets its stroke back exactly when it is carrying one of them. */
.board__cell:focus-visible,
.board__cell.is-origin,
.board__cell.is-playable {
    stroke-width: 4;
}

/* --------------------------------------------------------------------------
   THE STONES
   -------------------------------------------------------------------------- */

.board__piece {
    stroke: var(--stone-edge);
    stroke-width: 3;
}

.board__piece.is-kind-0  { fill: var(--mark-1); }
.board__piece.is-kind-1  { fill: var(--mark-2); }
.board__piece.is-kind-2  { fill: var(--mark-3); }
.board__piece.is-kind-3  { fill: var(--mark-4); }
.board__piece.is-kind-4  { fill: var(--mark-5); }
.board__piece.is-kind-5  { fill: var(--mark-6); }
.board__piece.is-kind-6  { fill: var(--mark-7); }
.board__piece.is-kind-7  { fill: var(--mark-8); }
.board__piece.is-kind-8  { fill: var(--mark-9); }
.board__piece.is-kind-9  { fill: var(--mark-10); }
.board__piece.is-kind-10 { fill: var(--mark-11); }
.board__piece.is-kind-11 { fill: var(--mark-12); }

/* The number, and it is DARK on every one of the twelve. The stones are pale
   so that this can be true of all of them at once rather than of most. */
.board__ink {
    fill: var(--stone-ink);
    font-weight: 800;
}

/* High contrast throws all twelve fills away and leaves twelve identical
   stones -- which is exactly when the number is the whole of the game. */
@media (forced-colors: active) {
    .board__ink {
        fill: CanvasText;
    }
}