/* ==========================================================================
   Seven Pieces, One Story -- 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 --------------------------------------------- */
    --board-bg:       #1a1440;
    --board-line:     #4b3f8f;
    --board-cell:     #221a52;
    --board-cell-alt: #1d1748;

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

/*
 * Nothing else belongs here yet, and that is the point: board.css draws the
 * surface, the cells, the pieces, the three markers and the panels from the
 * tokens above. Add a rule here only for something this board has that no
 * other board does.
 */

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

/* --------------------------------------------------------------------------
   THE BOARD IS A WORKSHEET: a faint lattice of points and lines the tans are
   laid on, a tray of seven slots down the right, and the figure in grey. The
   points are the TAP TARGETS -- a circle of radius half a unit on every
   lattice point, so the circles touch and a tap anywhere lands on the
   nearest point -- and they are drawn almost invisibly, because the child
   is looking at the figure, not at the grid. A `fill: none` would make them
   unclickable (HANDOFF's hard constraint), so the fill is a colour with a
   very low opacity instead.
   -------------------------------------------------------------------------- */
.app {
    --point-fill:     #6d5fc4;
    --tray-cell:      #2b2264;
    --tray-rim:       #5a4ba8;
    --figure-fill:    #3b3372;
    --figure-seam:    #9b8fe0;
    --tan-edge:       #14102e;
    /* Seven tans, seven colours -- never the only signal: each is also its own
       SHAPE, and the tray's spoken labels name every one. Measured for a
       colour-blind eye by being seven distinct lightnesses as well. */
    --tan-0: #ffd45c;
    --tan-1: #f5a142;
    --tan-2: #7fc8ff;
    --tan-3: #8fe0a0;
    --tan-4: #4fb07a;
    --tan-5: #ff8fa3;
    --tan-6: #c9a3ff;
}

.board__cell.is-point {
    fill: var(--point-fill);
    fill-opacity: 0.06;
    stroke: none;
}

.board__cell.is-tray {
    fill: var(--tray-cell);
    stroke: var(--tray-rim);
    stroke-width: 3;
}

/* The lattice lines are the worksheet; the links to the tray are for the
   arrow keys alone and are not drawn (decision JJJ: a line may carry a kind,
   and the game's own CSS decides what a kind looks like). */
.board__link.is-kind-line {
    stroke: var(--board-line);
    stroke-width: 2;
    stroke-opacity: 0.55;
}
.board__link.is-kind-tray {
    display: none;
}

/* The figure to make: the authored tans in one grey. A hairline of the same
   grey hides the anti-aliased seam between two of them; on Gentle the seams
   are drawn on top, dashed, so the puzzle is a jigsaw. */
.board__shape.is-figure {
    fill: var(--figure-fill);
    stroke: var(--figure-fill);
    stroke-width: 2;
    stroke-linejoin: round;
}
.board__shape.is-figure.is-seam {
    stroke: var(--figure-seam);
    stroke-width: 3;
    stroke-dasharray: 10 8;
}

/* The tans themselves, on the board and in the tray. */
.board__shape.is-tan {
    stroke: var(--tan-edge);
    stroke-width: 3;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-tan-0 { fill: var(--tan-0); }
.board__shape.is-tan-1 { fill: var(--tan-1); }
.board__shape.is-tan-2 { fill: var(--tan-2); }
.board__shape.is-tan-3 { fill: var(--tan-3); }
.board__shape.is-tan-4 { fill: var(--tan-4); }
.board__shape.is-tan-5 { fill: var(--tan-5); }
.board__shape.is-tan-6 { fill: var(--tan-6); }

/* The tray icon of the piece in hand is drawn larger by rules.js and ringed
   here; the icon of a piece already on the board is a faint outline, so the
   slot still says which piece it is and that a tap there lifts it. */
.board__shape.is-icon.is-held {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 6;
}
.board__shape.is-icon.is-away {
    fill-opacity: 0.18;
    stroke-dasharray: 6 5;
    stroke-width: 2;
}

@media (forced-colors: active) {
    .board__shape.is-tan { stroke: CanvasText; }
    .board__shape.is-figure { fill: GrayText; stroke: GrayText; }
    .board__shape.is-figure.is-seam { stroke: CanvasText; }
    .board__shape.is-icon.is-held { stroke: Highlight; }
    .board__link.is-kind-line { stroke: CanvasText; }
}