/* ==========================================================================
   I Only Am Left -- 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 ---------------------------------------------

       A WOODEN BOARD, because that is what this puzzle is.

       Every other board on this site is a field, a hillside or a night sky.
       Peg solitaire is a thing that sits on a table: a piece of turned wood
       with thirty-three holes drilled in it. The surface is warm and dark and
       the holes are darker, so an EMPTY HOLE reads as a hole and not as a
       square nobody has played on yet -- which matters more here than
       anywhere, because on this game the empty holes ARE the position.
    */
    --board-bg:       #2b1d12;
    --board-line:     rgba(226, 190, 142, 0.20);
    --board-cell:     #1c120a;
    --board-cell-alt: #1c120a;

    /*
       THE LIFT RIM. A peg that can jump gets a warm ring at rest.

       It has to sit clearly against a BOARD that is already warm, which is the
       fault The Pool of Bethesda found in a picture and The Wolf and the Flock
       repeated: a rim one shade off the surface is the same mark to the eye.
       So this is pushed pale and bright rather than merely warmer, and decision
       9's three marks still differ in shape, position AND colour.
    */
    --board-hint:     rgba(255, 244, 214, 0.78);

    /*
       ONE SIDE, AND ONLY ONE COLOUR IS EVER USED.

       There is nobody to play against, so `--piece-1` and its edge are never
       drawn by this game. They are left defined rather than deleted because
       board.css names them, and a token board.css asks for and this file does
       not answer falls back to the shared gold -- which would be the same
       colour as the pegs, silently, if this game ever grew a second side.

       The pegs are pale ivory against dark wood: the highest contrast the
       board allows, because a child has to count them.
    */
    --piece-0:        #f6e7c8;
    --piece-0-edge:   #6b4a24;
    --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
 * 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.
   ---------------------------------------------------------------------------
   The only rule in this file that is not a token, and it earns its place: no
   other game on the site has a Hint button, so board.css has nothing to say
   about the line underneath one.

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

   `:empty { display: none }` was the first version and it was wrong. .stage is
   the only element allowed to grow or shrink, so a line that appears from
   nowhere takes its two lines out of the BOARD -- the pegs shrink the instant a
   child presses Hint, which is the one moment they are looking hardest at them.
   Reserving the space costs the same pixels once, at load, when nothing is
   moving.

   TWO LINES, AND FITTING THE SENTENCE INTO THEM WAS THE WHOLE ARGUMENT.

   The hint has to name all three holes -- the peg to lift, the peg to jump, and
   the hole to land in. The first sentence named only two, which is invisible if
   you can see the arrow and useless if you cannot; a child on a screen reader
   has the words and nothing else. So the words had to grow.

   Three lines of them cost the board six per cent of its side on a phone,
   MEASURED: 284px down to 267px, which takes a cell from 40px to 38px on a
   board already recorded at 42 against a 44px floor. That is the wrong trade --
   the board is the game, and this line is the third copy of a hint that is also
   an arrow and also spoken.

   So the SENTENCE was shortened instead of the box being grown: "Take the peg
   on X, over Y, onto Z" says all three holes in two lines at this size. It is
   checked rather than eyeballed -- the probe reads scrollHeight against
   clientHeight at 360px, because text that overflows a clipped box looks
   perfectly fine in every screenshot where it happens not to.
*/
.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.

   Standards.md §5 lets a page scroll below 300px of viewport height and nothing
   else, so on a phone in landscape -- 740 by 360 -- every pixel of height is
   the board's. The first version simply squeezed this line to one line and let
   `overflow: hidden` deal with the rest.

   THAT IS THE FAULT THIS RULE EXISTS TO FIX, and it is one that photographs
   perfectly. The box showed a tidy first line and silently threw away the other
   two, so the hint read "Take the peg on column D, row 6, over column D," and
   stopped. Nothing overflowed, nothing scrolled, no assertion had anything to
   say, and the screenshot looked entirely correct. It was caught by measuring
   scrollHeight against clientHeight, which is now what the fit probe does at
   every viewport.

   The real answer is that a short window is a WIDE window: 46ch is the right
   measure for reading a paragraph on a phone held upright, and here it was
   throwing away four hundred pixels of empty row in order to save
   thirty of height. Uncapped, the whole sentence is one line.
*/
@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;
    }
}