@charset "UTF-8";
/* ==========================================================================
   Eight Souls -- 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, and board.css already sizes the
   board into whatever it is given.
   ========================================================================== */

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

   board.css 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 is writing a selector that matches nothing — the page
   renders, the pieces are the shared gold and blue, and no tool reports a
   thing.
*/
.app {
    /* A dark night sky for the star to sit in. The eight points are the eight
       souls in the ark, and the middle is the one place left to move to. */
    --board-bg:       #150f38;

    /*
       THE LINES ARE THE RULES ON THIS BOARD, SO THEY ARE DRAWN BRIGHT.

       A graph board is its edges. On a star with a hub, a move looks legal only
       because a line is drawn there — a child looking at eight points with no
       lines between them has no way at all to know that the top point touches
       the top-right one and not the bottom one. This is the strongest argument
       there is for not letting a board's lines fade into decoration.
    */
    --board-line:     rgba(255, 224, 160, 0.62);
    --board-line-width: 4;

    /* A point of the star: a dark disc that a piece sits on. */
    --board-cell:     #241a5c;
    --board-cell-alt: #33267e;

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

    /* The dot marking a point a piece can move to. There is usually only ONE
       empty point on the whole board, so this is the single most important
       mark on it and it is drawn to be seen. */
    --board-hint:     rgba(255, 243, 176, 0.85);
}

/*
   An empty point is drawn, not merely absent.

   render.js draws a graph cell as a circle at the node's own radius, so the
   nine points are already round. Giving them a visible rim is what makes the
   star read as a board with places on it rather than as a diagram of lines.
*/
.board__cell {
    stroke-width: 2.5;
}

/*
   Forced colours discard every fill. The lines must survive, because on this
   board they ARE the rules -- board.css already sets them to CanvasText, and
   this only stops them thinning to nothing.
*/
@media (forced-colors: active) {
    .board__link {
        stroke-width: 3;
    }
}