/* ==========================================================================
   The Six Wedges of Scripture -- 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.

   Every colour and measurement is a token in the block below, so changing the
   look is one place rather than a hunt.

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

/*
   EVERY LINE BELOW IS A TOKEN, AND THAT IS THE WHOLE CUSTOMISATION SURFACE.

   board.css already wires these to the real class hooks -- `.board__piece` gets
   `.is-side-0`, `.is-side-1` and so on from sprites.js, and an alternating cell
   gets `.is-alt`. A game that writes its own `.board__piece--0` rule instead is
   writing a selector that matches nothing: the page renders, the pieces are the
   shared gold and blue, and no tool anywhere reports a thing. That was the
   first version of this scaffold, and it is why the token list is the only
   thing here.
*/
.app {
    /* ---- the board surface ---------------------------------------------
       Dark and neutral on purpose: the six coloured arcs ARE the board here,
       so the ground under them has to be the quietest thing on the page. */
    --board-bg:       #16161f;
    --board-line:     #4a4a63;
    --board-cell:     #23232f;
    --board-cell-alt: #1e1e29;

    /*
       The two players' colours. NOT their shapes: those come from sprites.js
       and are the signal that survives a colour-blind eye, a photocopy and
       Windows High Contrast. Change a colour here and rename the side in
       rules.js to match, or the board will say "Gold to play" in blue.

       Each colour has an EDGE, and it is not decoration: a piece is drawn with
       `paint-order: stroke`, so the darker edge is what keeps a pale piece
       legible against a pale square.
    */
    --piece-0:        #ffd45c;
    --piece-0-edge:   #7a5313;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #143d5c;
}

/*
 * THE BOARD'S SIZE IS NOT THIS FILE'S BUSINESS, AND THAT IS DELIBERATE.
 *
 * board.css already gives .board__frame `flex: 1 1 auto; min-height: 0` and the
 * SVG carries `preserveAspectRatio="xMidYMid meet"`, so the browser fits the
 * board into whatever space the column leaves -- at every viewport, for all
 * eight topologies, with no media query and no JavaScript.
 *
 * A per-game override here fights that. The first version of this scaffold
 * capped the frame at `calc(100vh - 16rem)`, which on a 360px-tall phone in
 * landscape is 104px: the board shrank into the top-left corner with two-thirds
 * of the screen empty. NOTHING FAILED. There was no overflow, no scrolling and
 * no console error -- every automated check passed and the game was unplayable.
 * Only the screenshot showed it (2026-09-03).
 *
 * If a board genuinely needs a different shape, change its viewBox in the
 * TOPOLOGY, which is the one place that knows the geometry.
 */

/* ==========================================================================
   THE SIX ARCS, WHICH ON THIS BOARD ARE THE GAME
   ==========================================================================
   Four squares each, one arc per part of the Bible. A child aiming for a wedge
   is aiming at a colour, so Standards.md §2 costs the same three things it
   costs on the Road to the Manger:

     1. `topo-track` TAGS every square, so label() says "square 9, a psalms
        square" out loud. That is the half a screen reader gets.
     2. The six differ in LIGHTNESS as well as in hue, so they stay six
        different arcs in greyscale and to the one boy in twelve.
     3. Each carries its own BORDER PATTERN, and a dashed edge is a shape.

   And a fourth, which is this game's own: the wedges each player has won are
   printed in WORDS above the board, and the question panel names the part of
   the Bible it is asking about.
   ========================================================================== */

.board__cell {
    stroke-width: 3;
}

/* Lightest of the six. Solid edge. */
.board__cell.is-law      { fill: #d8cfa8; stroke: #6d6440; stroke-dasharray: none; }
/* Then gold. A long dash. */
.board__cell.is-history  { fill: #c79a2e; stroke: #5a4210; stroke-dasharray: 16 6; }
/* Then rose. A short dash. */
.board__cell.is-psalms   { fill: #c76b83; stroke: #4d1f2c; stroke-dasharray: 9 6; }
/* Then violet. Dash and dot. */
.board__cell.is-prophets { fill: #8d6ec4; stroke: #33215a; stroke-dasharray: 12 4 3 4; }
/* Then blue. Fine dots. */
.board__cell.is-gospels  { fill: #4e8fc4; stroke: #123a5c; stroke-dasharray: 3 5; }
/* Darkest of the six. A very long dash. */
.board__cell.is-letters  { fill: #2f7a55; stroke: #0c3323; stroke-dasharray: 22 6; }

/*
   THE MIDDLE, which opens only to a player carrying all six. It is the one
   square that is not like the others, so it is drawn unlike all of them.
*/
.board__cell.is-hub {
    fill: #fff6d8;
    stroke: #d8a534;
    stroke-width: 6;
    stroke-dasharray: none;
}

/*
   THE SQUARE NUMBERS SIT ON A DARK CHIP, NOT ON THE SQUARE.

   board.css draws `.board__ink-chip` under every number precisely so the ink
   stays legible whatever colour the square is. The Road to the Manger paid for
   that lesson once already: overriding the ink to dark for pale squares made
   it dark on dark, and BibleGames_Contrast.py measured 1.92:1.
*/
.board__ink {
    fill: #fff6e0;
    font-weight: 700;
}

/* The two roads. Both players walk the same wheel from opposite sides, so the
   two lines lie on top of each other and interleave by their dashes. */
.board__road { stroke-width: 6; opacity: 0.65; }
.board__road.is-side-0 { stroke: #ffd45c; stroke-dasharray: 16 14; }
.board__road.is-side-1 { stroke: #7fc8ff; stroke-dasharray: 10 20; stroke-dashoffset: -18; }

/* ==========================================================================
   THE WEDGES EACH PLAYER HAS WON
   ==========================================================================
   In words, above the board, for both players. It is the text half of "colour
   is never the only signal" and it is also simply the scoreboard.
   ========================================================================== */

.wedges {
    margin: 0;
    padding: 0 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--ink-2, #cfc9ee);
}

/* ==========================================================================
   THE QUESTION
   ==========================================================================
   The four ANSWERS are the renderer's own action buttons in the row below --
   an answer is a move, which is what makes it undo, redo and replay. This
   panel is the words around them.

   It never advances on a timer and it always shows the explanation and the
   verse, right or wrong: `quiz.js`'s header says both, and they are the two
   things the games it replaced got wrong.
   ========================================================================== */

.ask {
    flex: 0 0 auto;
    margin: 0 auto;
    padding: 0.4rem 0.75rem 0.2rem;
    max-width: 46rem;
    text-align: center;
}

.ask__wedge {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-1, #ffd45c);
}

.ask__q {
    margin: 0.15rem 0 0;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ink-1, #f4f1ff);
}

.ask__said {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    line-height: 1.35;
}

/* RIGHT AND WRONG ARE A WORD FIRST. The sentence begins "Right." or "Not this
   time.", so the colour below is a second signal and never the only one. */
.ask__said.is-right { color: #8fe0ae; }
.ask__said.is-wrong { color: #ffb493; }

.ask__scripture {
    margin: 0.25rem 0 0;
    padding: 0;
}

.ask__verse {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    font-style: italic;
    color: var(--ink-2, #cfc9ee);
}

.ask__ref {
    display: block;
    font-size: 0.78rem;
    font-style: normal;
    color: var(--gold-1, #ffd45c);
}

/*
   THE ANSWER BUTTONS.

   Wider and taller than a Throw button, because they carry a whole answer
   rather than a word, and they wrap two by two on a phone rather than being
   squeezed four across -- which is why the bank's answers are allowed
   thirty-four characters where the quiz layer allows thirty.
*/
.boardactions .ask__btn {
    /*
       TWO BY TWO, NEVER THREE AND ONE.

       At `1 1 12rem` a tablet fitted three across and dropped the fourth onto
       its own line, which reads as though the last answer is a different kind
       of thing from the other three. A basis of 40% forces the row to break
       after two at every width above a phone, and below that they stack.
    */
    flex: 1 1 40%;
    max-width: 22rem;
    min-height: 44px;
    white-space: normal;
    line-height: 1.25;
}

@media (max-height: 560px) {
    .ask { padding-top: 0.15rem; }
    .ask__q { font-size: 0.92rem; }
    .ask__verse, .ask__said { font-size: 0.8rem; }
}

/* ==========================================================================
   THE DIE
   ========================================================================== */

.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; }

@media (max-height: 520px) {
    .die { min-width: 34px; min-height: 34px; font-size: 1.25rem; }
}

@media (forced-colors: active) {
    .die {
        forced-color-adjust: none;
        background: Canvas;
        color: CanvasText;
        border-color: CanvasText;
    }
}