.board-host{width:100%}.board{--board-face: var(--color-board, #232e3c);--board-socket: var(--color-board-socket, #17212b);--board-grid: var(--color-board-grid, #17212b);--board-hint: var(--color-board-hint, var(--color-hint, #8b98a5));--disc-p1: var(--color-p1, #0b0e13);--disc-p2: var(--color-p2, #f0f3f7);--board-rim: 10px;--board-radius: var(--radius-lg, 16px);border:var(--board-rim) solid var(--board-face);border-radius:var(--board-radius);background:var(--board-face);position:relative}.board-confetti{position:absolute;inset:0;pointer-events:none;z-index:6}.confetti-bit{position:absolute;will-change:transform,opacity}.board-playfield{position:relative;overflow:hidden;width:100%;aspect-ratio:var(--cols) / var(--rows);background:var(--board-face)}.board-surface{position:absolute;left:0;top:0;display:block;pointer-events:none}.board-discs,.board-hints{position:absolute;inset:0;pointer-events:none}.hint-dot{position:absolute;border-radius:9999px;background:var(--board-hint);opacity:.5}.board-fx{position:absolute;inset:0;pointer-events:none}.last-move-ring{position:absolute;border-radius:9999px;pointer-events:none;box-shadow:0 0 0 2px var(--color-accent, #5288c1)}.board-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr)}.board-cell{cursor:pointer;background:transparent;border:0}.board-cell:focus-visible{outline:2px solid var(--color-accent-text, #fff);outline-offset:-4px;border-radius:9999px}.disc{position:absolute;border-radius:9999px;transform-origin:center;box-shadow:inset 0 0 0 1px var(--disc-rim),0 1px 3px #00000080}.disc-flipping{will-change:transform}.disc-p1{background:var(--disc-p1);--disc-rim: var(--color-p1-rim, rgba(255, 255, 255, .32))}.disc-p2{background:var(--disc-p2);--disc-rim: var(--color-p2-rim, rgba(0, 0, 0, .18))}