/* ==========================================================================
   Dorcas' Coats and Garments -- 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.
 */

/* --------------------------------------------------------------------------
   THE BOARD IS A QUILT AND A SHELF. Forty-nine squares of backing cloth with
   a stitched seam between them; a one-column shelf down the right with three
   slots the market's patches sit on (tap one to pick it up) and a spacer
   between each that carries the price. The quilt drawn is the quilt of the
   side to move (decision WWW), and its border says whose: gold for the child,
   blue for Blue -- colour paired with the word in the turn line.

   A patch is a polygon in the renderer's overlay layer (SSS): eight cloths,
   eight colours, and every patch is also its own SHAPE with its own spoken
   word, because colour is never the only signal.
   -------------------------------------------------------------------------- */
.app {
    --quilt-cell:     #2a2158;
    --quilt-seam:     #4b3f8f;
    --shelf-cell:     #17123a;
    --shelf-slot:     #2e2566;
    --shelf-rim:      #5a4ba8;
    --patch-edge:     #14102e;
    --price-ink:      #d9d2ff;
    /* The cloths: white, blue, green, purple, scarlet, gold, silk, sackcloth
       (Esther 1:6; Exodus 26). Eight lightnesses as well as eight hues. */
    --cloth-0: #f4efe6;
    --cloth-1: #7fc8ff;
    --cloth-2: #8fe0a0;
    --cloth-3: #c9a3ff;
    --cloth-4: #ff6b6b;
    --cloth-5: #ffd45c;
    --cloth-6: #ffb3c6;
    --cloth-7: #b98b5a;
}

/* The quilt's squares. */
.board__cell {
    fill: var(--quilt-cell);
    stroke: var(--quilt-seam);
    stroke-width: 2;
}

/* The shelf: spacers are the shelf's wood; slots are where a patch sits. A
   `fill: none` would make a slot unclickable, so every shelf cell is filled. */
.board__cell.is-shelf {
    fill: var(--shelf-cell);
    stroke: var(--shelf-cell);
}
.board__cell.is-slot {
    fill: var(--shelf-slot);
    stroke: var(--shelf-rim);
    stroke-width: 3;
    rx: 12;
}

/* A slot that can be tapped is RINGED. The renderer's legal-move dot lands in
   the middle of the slot, under the patch drawn there, and a pale dot on a
   pale cloth is invisible -- Mansion's fault (a dot under the letters), on a
   patch. The ring is the cell's own stroke, so it is under nothing. */
.board__cell.is-slot.is-playable {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 6;
}

/* The price under a slot, in the spacer's ink. */
.board__ink {
    fill: var(--price-ink);
    font-size: 32px;
    font-weight: 700;
}

/* The patches: on the quilt, and on the shelf. */
.board__shape.is-patch {
    stroke: var(--patch-edge);
    stroke-width: 4;
    stroke-linejoin: round;
    paint-order: stroke;
}
.board__shape.is-cloth-0 { fill: var(--cloth-0); }
.board__shape.is-cloth-1 { fill: var(--cloth-1); }
.board__shape.is-cloth-2 { fill: var(--cloth-2); }
.board__shape.is-cloth-3 { fill: var(--cloth-3); }
.board__shape.is-cloth-4 { fill: var(--cloth-4); }
.board__shape.is-cloth-5 { fill: var(--cloth-5); }
.board__shape.is-cloth-6 { fill: var(--cloth-6); }
.board__shape.is-cloth-7 { fill: var(--cloth-7); }

/* A sewn patch shows its stitching: a lighter inner seam. */
.board__shape.is-patch.is-down {
    stroke-width: 5;
}

/* The shelf's icons: the one in hand is drawn larger by rules.js and ringed
   here; one the sewer cannot pay for, or cannot fit anywhere, is dimmed and
   dashed -- and the offer refuses it, so a tap there does nothing. */
.board__shape.is-icon {
    stroke-width: 2.5;
}
.board__shape.is-icon.is-held {
    stroke: var(--gold-1, #ffd45c);
    stroke-width: 5;
}
.board__shape.is-icon.is-dear,
.board__shape.is-icon.is-nofit {
    fill-opacity: 0.28;
    stroke-dasharray: 5 4;
}

/* Whose quilt: a frame round the forty-nine squares in the side's colour,
   drawn by rules.js as the first item of the overlay, and the turn line says
   it in words. It is in the overlay and not an outline on the board element,
   because the SVG is letterboxed in a portrait frame and an outline round the
   box framed the empty letterbox, not the quilt (looked at, 2026-09-12). */
.board__shape.is-quilt-frame {
    fill: none;
    stroke-width: 8;
    stroke-linejoin: round;
}
.board__shape.is-quilt-frame.is-side-0 { stroke: var(--piece-0); }
.board__shape.is-quilt-frame.is-side-1 { stroke: var(--piece-1); }

@media (forced-colors: active) {
    .board__shape.is-patch { stroke: CanvasText; }
    .board__shape.is-icon.is-held { stroke: Highlight; }
    .board__cell.is-slot { stroke: CanvasText; }
    .board__cell.is-slot.is-playable { stroke: Highlight; }
    .board__shape.is-quilt-frame { stroke: CanvasText; }
    .board__ink { fill: CanvasText; }
}

/*
   LANDSCAPE: THE SCORE CHIPS DROP OUT, BECAUSE THE COLUMN IS FIVE PIXELS SHORT.

   Measured 2026-09-12 on a 740x360 phone with a patch in hand: the turn line
   is two lines here (whose quilt, and both sewers' buttons and days -- 47px),
   the tray's chips 18px, the three action buttons 44px, the control pad 184px,
   and with the top bar and the gaps that is 365px in a 360px window. The grid
   squeezed the turn's track to 42px and Turn and Flip were drawn ON the turn
   line. Found in a picture; every layout check passed. The chips say the
   buttons, which the turn line on this page already says in words, so they
   are the thing to give up -- the narrow-width rule in board.css already
   drops them for the same reason.
*/
@media (min-height: 300px) and (max-height: 520px) and (min-width: 520px) {
    .tray {
        display: none;
    }
    .boardbar {
        min-height: 52px;
    }
    /* Turn, Flip and Go ahead on ONE row of the 15rem column: wrapped, they
       are 96px and the level buttons fall off the bottom of the window. */
    .boardactions {
        gap: 6px;
    }
    .board__action {
        padding: 0 10px;
        font-size: 0.85rem;
    }
}