/* v6 games: sudoku, tic-tac-toe, nani-word, fennec maze, checkers.
   Each board is a small canvas scaled up in whole pixels (see pixelCanvas
   in apps/cards-ui.js); the box around it uses .cards-box for centring. */

.sudoku, .ttt, .nword, .fmaze, .checkers { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sudoku .cards-canvas, .ttt .cards-canvas, .nword .cards-canvas, .fmaze .cards-canvas, .checkers .cards-canvas { image-rendering: pixelated; }

/* sudoku */
.sudoku .sudoku-box { background: #2b1f4a; }
.sudoku .sudoku-lcds { display: inline-flex; gap: 6px; margin-left: auto; }
.sudoku .lcd { min-width: 46px; font-size: 22px; }
.sudoku .sudoku-miss { color: #ffd166; background: #1a1408; }

/* tic-tac-toe */
.ttt .ttt-box { background: #20183a; }

/* nani-word */
.nword .nword-box { background: #20183a; }

/* fennec maze */
.fmaze .fmaze-box { background: #120d1e; }
.fmaze .dpad { background: #120d1e; }
.fmaze .dpad .btn { min-width: 48px; min-height: 40px; touch-action: none; }

/* checkers */
.checkers .checkers-box { background: #20183a; }
.checkers .cards-canvas { cursor: pointer; }