/* ==========================================================================
   Let There Be Light -- 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 ---------------------------------------------

       DARKNESS, AND THE LAMPS ARE THE ONLY LIGHT ON IT.

       This is the one board on the site where the SURFACE is the thing being
       beaten. Every other game's background is scenery; here an unlit square
       is the puzzle, so the cells are very nearly black and the difference
       between a cell and the tray around it is deliberately faint. What should
       catch the eye is a lamp, and nothing else.
    */
    --board-bg:       #05070e;
    --board-line:     rgba(150, 170, 210, 0.16);
    --board-cell:     #0a0d16;
    --board-cell-alt: #0a0d16;

    /*
       The lift rim on a lamp that can be tapped -- which here is EVERY lamp,
       always. render.js drops a mark that covers nearly the whole board ("a
       mark that is everywhere marks nothing"), so on this game the rim is
       almost never drawn and this token barely shows. It is kept truthful
       rather than removed: the rule that suppresses it is the renderer's, and
       a game should not encode an assumption about when another file decides
       to draw.
    */
    --board-hint:     rgba(255, 236, 180, 0.7);

    /*
       ONE SIDE, ONE KIND, AND THE PRESENCE OF THE PIECE IS THE WHOLE STATE.

       A lamp that is lit has a piece on it and a lamp that is out has nothing,
       so the signal is a SHAPE against an empty square rather than one colour
       against another. That satisfies Standards.md §2 by itself and survives a
       colour-blind eye, a photocopy and Windows High Contrast.

       Warm and bright, because it is a flame and not a counter.
    */
    --piece-0:        #ffd88a;
    --piece-0-edge:   #7a4a10;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;
}

/*
 * A LAMP GLOWS, AND THE GLOW IS NOT DECORATION.
 * ---------------------------------------------------------------------------
 * On a 5x5 board at phone size a lamp is about fifty pixels across, and the
 * thing a child has to do is take in the WHOLE PATTERN at a glance -- which
 * lamps are lit, in rows and columns -- rather than examine one square. A flat
 * disc reads as a counter sitting on a square; a disc with a soft halo reads as
 * a light, and the halo is what makes a row of them scan as a row.
 *
 * It is a drop-shadow rather than a second element, so it costs no markup, no
 * layer and nothing for the renderer to know about. Where filters are
 * unsupported or switched off the disc is still a disc and the game is
 * unchanged: the glow is the third signal, after the shape and the colour, and
 * never the only one.
 */
.board__piece.is-side-0 {
    filter: drop-shadow(0 0 6px rgba(255, 200, 110, 0.65));
}

/*
 * AND IT IS TURNED OFF WHERE A GLOW 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. Reduced-motion
 * is not about motion here, but a viewer who has asked for a calmer page should
 * not be given a screen full of haloes either.
 */
@media (forced-colors: active), (prefers-reduced-motion: reduce) {
    .board__piece.is-side-0 {
        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;
    }
}