/* ==========================================================================
   Into All the World -- 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 CHESSBOARD, AND IT IS THE ONE BOARD HERE THAT MUST NOT ALTERNATE.

       Every real chessboard is light and dark in squares, and this one
       deliberately is not. The whole puzzle is reading which squares have been
       VISITED and which have not, at a glance, across sixty-four of them -- and
       a checker pattern underneath cuts that field in half before a child
       starts. The alternating colour is set equal to the plain one for exactly
       that reason: the pattern on this board has to belong to the game.
    */
    --board-bg:       #1a1738;
    --board-line:     rgba(170, 180, 230, 0.22);
    --board-cell:     #221e46;
    --board-cell-alt: #221e46;

    /*
       WHERE THE KNIGHT MAY JUMP, and on this board that mark is drawn as a
       GHOST OF THE KNIGHT ITSELF rather than as a dot.

       render.js does that for any game that supplies its own shapes, and here
       it is worth more than usual: a child sees the same silhouette in the two
       or three places it could land, which is the question the whole turn is
       about. It has to be clearly paler than the real knight and clearly
       stronger than a visited dot -- three marks, three weights.
    */
    --board-hint:     rgba(190, 205, 255, 0.55);

    /* One side. `--piece-1` is never drawn and is left defined because
       board.css names it. */
    --piece-0:        #ffd45c;
    --piece-0-edge:   #6b4a10;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;
}

/*
 * TWO KINDS ON ONE SIDE, AND THEY MUST NOT LOOK ALIKE.
 * ---------------------------------------------------------------------------
 * This is the first board on the site where one player owns two kinds of piece
 * that mean opposite things: the KNIGHT, which is where you are, and the
 * squares it has already stood on, which are where you can never go again.
 *
 * The renderer's default gives both a side's colour and tells them apart by
 * shape alone (decision 21) -- and at eight squares across on a phone, a
 * knight among forty same-coloured dots reads as the biggest dot rather than
 * as the thing to look at. Found in a screenshot; nothing failed, the board
 * played perfectly, and the one mark a child has to find was camouflaged.
 *
 * `is-kind-N` was added to render.js for this. The two rules below are the
 * point of the whole file:
 *
 *   kind 0, a visited square   cool, dim, and small. It is a record of the
 *                              past and should sink into the board.
 *   kind 1, the knight         warm, bright, and the only thing here that
 *                              glows. It is the present tense.
 *
 * Colour is not the only signal in either direction: the shapes already differ
 * (a dot and a horse), the screen reader is told "visited square" or "knight"
 * from spec.names.kinds, and the sentence under every move names both squares.
 * This is the third signal, and it is the one that works at a glance.
 */
.board__piece.is-side-0.is-kind-0 {
    fill: #7d86bd;
    stroke: #2b2f57;
    opacity: 0.85;
}

.board__piece.is-side-0.is-kind-1 {
    fill: var(--piece-0);
    stroke: var(--piece-0-edge);
    filter: drop-shadow(0 0 5px rgba(255, 212, 92, 0.75));
}

/*
 * AND THE GLOW GOES WHERE IT WOULD HURT.
 *
 * Windows High Contrast replaces every colour with a system one, and a shadow
 * under a system-coloured shape is a smear rather than a halo. The knight is
 * still a horse and the visited squares are still dots, so nothing is lost.
 */
@media (forced-colors: active), (prefers-reduced-motion: reduce) {
    .board__piece.is-side-0.is-kind-1 {
        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;
    }
}