/* Sudoku */
.sudoku { --cell: 46px; }
body[data-game="sudoku"] .pm-card { border-radius: 10px; padding: 30px; }
.sudoku__grid {
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-auto-rows: var(--cell);
  background: #fff;
  border: 3px solid #000;
  border-radius: 10px;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.sudoku__cell {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .36);
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  cursor: pointer;
  touch-action: manipulation;
}
.sudoku__cell[data-col="8"] { border-right: 0; }
.sudoku__cell[data-row="8"] { border-bottom: 0; }
.sudoku__cell[data-col="2"], .sudoku__cell[data-col="5"] { border-right-width: 3px; }
.sudoku__cell[data-row="2"], .sudoku__cell[data-row="5"] { border-bottom-width: 3px; }
.sudoku__cell[data-lock="true"] { font-weight: 900; cursor: default; }
.sudoku__cell[data-backlight="true"] { background-color: var(--teal-soft); }
.sudoku__cell[data-same="true"] { background-color: rgba(78, 205, 196, .5); }
.sudoku__cell[data-focus="true"] { background-color: var(--teal); color: #f5f5f5; }
.sudoku__cell[data-wrong="true"] { color: red; }
.sudoku__cell[data-focus="true"][data-wrong="true"] { color: #ffd9d9; }

@media (max-width: 1024px) {
  body[data-game="sudoku"] .pm-card { padding: 0; background: transparent; }
}