/* The Connection Quest board (play/board.js). Colours are classes because
   SVG attributes can't use CSS variables; each falls back to Puzzle
   Arsenal's own colour so the board looks right on any page. */
.board svg { display: block; width: 100%; height: auto; }
.board .thin { stroke: #BFC6D0; stroke-width: 1; }
.board .frame { fill: none; stroke: var(--ink, #0E1218); stroke-width: 2.5; }
.board .num { fill: var(--ink, #0E1218); font: 600 22px Poppins, sans-serif; transition: fill .2s; }
.board .wire { fill: none; stroke: var(--ink, #0E1218); stroke-width: 4; stroke-linecap: round; }
.board .part { fill: var(--white, #FFFFFF); stroke: var(--ink, #0E1218); stroke-width: 1.6; }
.board .dot { fill: var(--ink, #0E1218); }
.board .rail { fill: none; stroke: var(--ink, #0E1218); stroke-linecap: butt; }
.board .sleeper { fill: var(--white, #FFFFFF); stroke: var(--ink, #0E1218); }
.board .sym { fill: var(--ink, #0E1218); font: 600 11px Inter, sans-serif; }
.board .ico { color: var(--ink, #0E1218); }
.board .ord { fill: var(--ink, #0E1218); }
.board .ordt { fill: #fff; font: 700 11px Inter, sans-serif; }
.board .laid { fill: var(--platinum-lt, #DDE3EA); }
.board .pipe-wall { fill: none; stroke: var(--ink, #0E1218); stroke-linecap: butt; }
.board .pipe-in { fill: none; stroke: var(--white, #FFFFFF); stroke-linecap: butt; }
.board .pipe-flange { fill: var(--white, #FFFFFF); stroke: var(--ink, #0E1218); }
.board .pipe-cap { stroke: var(--ink, #0E1218); }
/* playing: the player's own pieces, where they can go next, and the counts */
.board .mine .wire { stroke: var(--pa-play-path, #1D5FD6); }
.board .mine .rail { stroke: var(--pa-play-path, #1D5FD6); }
.board .mine .sleeper { stroke: var(--pa-play-path, #1D5FD6); }
.board .mine .pipe-wall, .board .mine .pipe-flange, .board .mine .pipe-cap { stroke: var(--pa-play-path, #1D5FD6); }
.board .lit { fill: rgba(72, 217, 237, 0.26); }
.board .head { fill: none; stroke: var(--pa-play-path, #1D5FD6); stroke-width: 3; stroke-dasharray: 6 4; }
.board .xmark { fill: none; stroke: #9AA3AF; stroke-width: 3; stroke-linecap: round; }
/* Check and Hint: a red ✗ right through a wrong square (the piece keeps its colour) */
.board .wrongx { fill: none; stroke: var(--pa-play-wrong, #D42A2A); stroke-width: 4; stroke-linecap: round; }
.board .wrongx-halo { fill: none; stroke: var(--white, #FFFFFF); stroke-width: 8; stroke-linecap: round; opacity: .85; }
.board .num.ok { fill: var(--ok, #22684A); }
.board .num.over { fill: var(--danger, #9B1C1C); }