@charset "UTF-8";
/* ==========================================================================
   Through the Roof -- 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, from board.css.

   THE BOARD'S SIZE IS NOT THIS FILE'S BUSINESS, AND THAT IS DELIBERATE.

   board.css gives .board__frame `flex: 1 1 auto; min-height: 0` and the SVG
   carries preserveAspectRatio="xMidYMid meet", so the browser fits a 7x6 board
   into whatever space the column leaves -- at every viewport, with no media
   query and no JavaScript. A per-game override fights that: the first version
   of this scaffold capped the frame at calc(100vh - 16rem), which on a 360px
   phone in landscape is 104px. Nothing failed. No overflow, no scrolling, no
   console error -- and the game was unplayable. Only the screenshot showed it.
   ========================================================================== */

/*
   Everything below is a TOKEN, and that is the whole customisation surface.

   board.css already wires these to the real class hooks: `.board__piece` takes
   `.is-side-0` and `.is-side-1` from sprites.js. 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.
*/
.app {
    /* The plastic frame, and the holes cut through it. A hole is DARKER than
       the frame rather than lighter, because an empty hole on a real board is
       a way through to the shadow behind it. */
    --board-bg:       #2a2170;
    --board-line:     #2a2170;
    --board-cell:     #120d33;

    /* Not a checker -- this board has none. It is the colour a hole takes
       under the pointer, so a child can see which column they are about to
       drop into before they commit to it. */
    --board-cell-alt: #2c2273;

    /* The two players' colours. NOT their shapes: side 0 is a disc and side 1
       is a ring, from sprites.js, and those are the signal that survives a
       colour-blind eye, a photocopy and Windows High Contrast. Rename a colour
       here and rename the side in rules.js to match, or the board will say
       "Gold to play" in blue. */
    --piece-0:        #ffd45c;
    --piece-0-edge:   #6b4610;
    --piece-1:        #7fc8ff;
    --piece-1-edge:   #10334d;

    /* The dot marking where a disc would land. Brighter than the shared
       default, because it sits on a near-black hole rather than on the ordinary
       translucent cell, and at the shared opacity it was a smudge. */
    --board-hint:     rgba(255, 243, 176, 0.78);
}

/*
   THE HOLES ARE ROUND, AND THEY ARE ROUND WITHOUT A SECOND RENDERER.

   render.js draws a square-grid cell as a <rect>, because that is what a square
   grid is and thirty-four games want exactly that. A Connect Four board is the
   same grid with round holes cut in it, which is a matter of appearance and not
   of geometry -- so it is done here, in the one place a board's appearance
   belongs, rather than by teaching the shared renderer about this game.

   `rx`/`ry` as CSS properties are SVG 2 geometry properties. Where a browser
   does not support them the holes stay square: the board still draws, the
   discs still fall, and every hit target is exactly where it was. That is the
   right way round for a decoration.

   The stroke is the FRAME COLOUR and it is thick. Drawn centred on the circle,
   it eats six units inward and lays six outward, so neighbouring holes are
   separated by a continuous band of frame -- which is what a real board looks
   like, and it costs one line instead of a second set of shapes.
*/
.board__cell {
    rx: 50px;
    ry: 50px;
    stroke: var(--board-bg);
    stroke-width: 13;
}

/* The disc that just landed. board.css draws a dashed gold ring round the
   cell; on a round hole it wants to be round too. */
.board__last {
    rx: 50px;
    ry: 50px;
}

/*
   Forced colours discard every fill above. The holes must not vanish into the
   frame, so they are drawn as outlines instead -- and the pieces keep their
   shapes, which is what was carrying the signal all along.
*/
@media (forced-colors: active) {
    .board__cell {
        stroke: CanvasText;
        stroke-width: 2;
    }
}