/* ==========================================================================
   Set in Order -- 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 ---------------------------------------------

       A TRAY WITH FIFTEEN TILES IN IT.

       The empty square is the only thing on this board that is not a tile, and
       it is the thing every move is about -- so the tray beneath is darker
       than anything else here, and the gap reads as a hole rather than as a
       square nobody has played on yet.
    */
    --board-bg:       #171b28;
    --board-line:     rgba(180, 196, 226, 0.16);
    --board-cell:     #0f1320;
    --board-cell-alt: #0f1320;

    /* The lift rim on a tile that can slide. Pale and warm against a cool
       tray, so the two or three movable tiles are findable at a glance --
       which on this puzzle is most of what a child needs to see. */
    --board-hint:     rgba(255, 236, 180, 0.85);

    /*
       ONE SIDE, AND FIFTEEN KINDS OF IT.

       Every tile is the same colour because every tile IS the same thing; what
       tells them apart is the number printed on it, which is why the ink rule
       below is the one real rule in this file. `--piece-1` is never drawn --
       there is no second player -- and is left defined because board.css names
       it.

       Pale bone tiles on a dark tray: the highest contrast the board allows,
       because the number has to be read and not merely seen.
    */
    --piece-0:        #e8ecf5;
    --piece-0-edge:   #4a5468;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;
}

/*
 * THE NUMBER ON THE TILE, AND IT IS THE ONLY REAL RULE IN THIS FILE.
 * ---------------------------------------------------------------------------
 * board.css draws ink as `--text-dim`, which is right everywhere it is used
 * today: a track square's number sits on the BOARD, in the corner, and a dim
 * grey is exactly what a printed board does with it.
 *
 * Here the number sits ON THE TILE. The tile is near-white, and `--text-dim` on
 * near-white is the fault that Standards.md §2 exists to prevent -- and it is a
 * particularly bad one on this game, because the number is not a label for the
 * piece, IT IS THE PIECE. Fifteen identical bone-coloured circles with faint
 * grey markings is not a puzzle a child can solve; it is fifteen blanks.
 *
 * So the ink is the tray's own dark, which is the same relationship a real tile
 * has to its own printing, and it is bold and large enough to read at the size
 * a 4x4 board reaches on a phone.
 */
.board__ink {
    fill: #0f1320;
    font-size: 40px;
    font-weight: 800;
    /*
       A NUMBER IS NOT A LETTER, and the tabular figures matter: `11` and `15`
       drawn with proportional digits are noticeably different widths, so a
       column of tiles reads as though it is not lined up when it is.
    */
    font-variant-numeric: tabular-nums;
}

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