/* ==========================================================================
   The Snare of the Fowler -- 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.

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

.app {
    /* ---- the board surface ---------------------------------------------

       AN UNCOVERED SQUARE IS THE BOARD ITSELF.

       This board has no pieces on its finished squares: an uncovered square is
       drawn as nothing at all, and the NUMBER on it is the whole content. So
       the surface has to be a good page to print numbers on rather than a
       field to stand pieces on -- dark, even, and quiet enough that a one and a
       two are the loudest things anywhere near them.
    */
    --board-bg:       #131a2c;
    --board-line:     rgba(150, 172, 214, 0.18);
    --board-cell:     #1b2338;
    --board-cell-alt: #1b2338;

    /*
       THE LIFT RIM IS ALMOST NOTHING HERE, AND THAT IS DELIBERATE.

       Everywhere else it marks the few pieces a child may pick up. On this
       board EVERY covered square is playable, so the rim lands on forty or
       fifty of them at once -- and render.js's rule about marks ("a mark that
       is everywhere marks nothing") governs the legal-move DOTS and not this.
       Left at the usual strength it ringed the whole board in gold and buried
       the numbers, which are the only thing worth looking at.
    */
    --board-hint:     rgba(190, 205, 240, 0.22);

    /* One side, three kinds, and the kinds are coloured below rather than
       here -- see the block after this one. `--piece-1` is never drawn. */
    --piece-0:        #8fa3c8;
    --piece-0-edge:   #2a3450;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;
}

/*
 * THREE KINDS ON ONE SIDE, AND THEY MEAN COMPLETELY DIFFERENT THINGS.
 * ---------------------------------------------------------------------------
 *   kind 0   a covered square    "not looked at yet" -- the commonest thing
 *                                on the board, and it must recede
 *   kind 1   a flag              "I think there is a snare here" -- the
 *                                child's own claim
 *   kind 2   a snare, sprung     the end of the game, and shown only then
 *
 * `is-kind-N` was added to render.js in Wave 5 for the Knight's Tour and this
 * is the game that needs it most: three objects, one side, and colour alone
 * doing none of the work -- the SHAPES already differ (a lid, a flag, a mine),
 * spec.names.kinds tells a screen reader which is which, and every move's
 * sentence says what was found. This is the third signal.
 */
.board__piece.is-side-0.is-kind-0 {
    fill: #55648c;
    stroke: #2a3450;
}

.board__piece.is-side-0.is-kind-1 {
    fill: #ffb45c;
    stroke: #6b3a08;
}

.board__piece.is-side-0.is-kind-2 {
    fill: #ff6b6b;
    stroke: #6b1414;
}

/*
 * THE NUMBER IS THE GAME.
 * ---------------------------------------------------------------------------
 * board.css draws ink as `--text-dim` in a normal weight, which is right where
 * it is used today: a track square's number is a label on scenery a child
 * glances at once. Here the numbers ARE the position. Everything a child
 * reasons with -- every deduction, both rules in the sheet, the whole
 * difference between this game and a lottery -- is read off them.
 *
 * At a dim grey on a dark board, at eight squares across on a phone, they were
 * the faintest thing on screen. Found in a screenshot; nothing failed, and the
 * game was unplayable in the only way that matters.
 *
 * Bright, heavy and large, with tabular figures so a column of them lines up.
 */
.board__ink {
    fill: #eaf1ff;
    font-size: 46px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/*
 * A SPRUNG SNARE IS THE ONE MOMENT THIS BOARD SHOUTS.
 *
 * It is also the moment a child most needs to be told it is recoverable, which
 * the win card says in words. The glow is the third signal after the shape and
 * the colour, and it goes where a glow would hurt.
 */
.board__piece.is-side-0.is-kind-2 {
    filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.8));
}

@media (forced-colors: active), (prefers-reduced-motion: reduce) {
    .board__piece.is-side-0.is-kind-2 {
        filter: none;
    }
}

/*
   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;
    }
}