@charset "UTF-8";
/* ==========================================================================
   Ladders and Serpents -- 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.

   THE PAGE MUST NEVER SCROLL, and nothing may ever scroll sideways. .stage is
   the only element allowed to grow or shrink, and board.css already sizes a
   ten-by-ten board into whatever it is given.
   ========================================================================== */

/*
   Everything below is a TOKEN, and that is the whole customisation surface.
   board.css wires them to the real class hooks; a game that invents its own
   selectors writes rules that match nothing and no tool reports it.
*/
.app {
    /* The board, and its hundred squares. The alternating shade is what a
       serpentine board needs more than any other: without it, a child has no
       way to see where a row turns except by reading the numbers. */
    --board-bg:       #16123a;
    --board-line:     rgba(255, 224, 160, 0.30);
    --board-cell:     #211750;
    --board-cell-alt: #322585;

    --piece-0:        #ffd45c;
    --piece-0-edge:   #6b4610;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #10334d;

    /*
       THE LADDERS AND THE SNAKES.

       These are the third signal and not the first. render.js draws a ladder as
       a straight double rail with rungs and a snake as a wavy line with a head,
       so the two are told apart in greyscale, in a photocopy and under Windows
       High Contrast — and topo-track's spoken label says "square 16, down to
       square 6" for a child who can see neither. Standards.md §2 exists for
       exactly this board: the traditional drawing tells a ladder from a snake
       with green against red, which is the commonest confusion there is.
    */
    --board-ladder:   #9be89b;
    --board-snake:    #ff9c6e;
    --board-snake-eye: #4a1c0a;

    /*
       The square a pawn is about to land on. There is only ever ONE, and the
       whole turn is "press Throw, then tap the square that lit up" — so this is
       the single most important mark on the board and it is drawn to be seen.
    */
    --board-hint:     rgba(255, 246, 190, 0.92);
}

/* The number painted on each square. board.css puts it in the CORNER on a
   track board -- where a real board prints it, and where the ladders, the
   snakes and the counters are not. Bright enough to read at a glance on a
   phone, and quiet enough that the pawns and the jumps stay the picture. */
.board__ink {
    fill: rgba(255, 240, 205, 0.86);
    font-weight: 700;
}

/*
   THE DIE.

   It sits between the turn indicator and the tray, and it is empty until there
   is something to show — nothing is revealed before the Throw button is
   pressed. `visibility` rather than `display` so the row does not jump by forty
   pixels the first time a number appears in it.

   aria-hidden in the markup: the throw has already been announced in words
   through the board's live region, and a second element saying "5" would read
   the same throw out twice.
*/
.die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0 6px;
    border: 2px solid #b98b1e;
    border-radius: 10px;
    background: linear-gradient(160deg, #fffbe8, #ffe09a);
    color: #2a1c02;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.die:empty {
    visibility: hidden;
}

/* In phone landscape the chrome moves into a column beside the board
   (board.css), and the turn indicator and the die share the top of it. */
@media (max-height: 520px) {
    .die {
        min-width: 34px;
        min-height: 34px;
        font-size: 1.25rem;
    }
}

@media (forced-colors: active) {
    /* The gradient goes; the number must not. */
    .die {
        forced-color-adjust: none;
        background: Canvas;
        color: CanvasText;
        border-color: CanvasText;
    }

    .board__ink {
        forced-color-adjust: none;
        fill: CanvasText;
    }
}