/* Kaamko games: Sudoku (docs/49_GAMES.md). Linked from src/pages/games/sudoku.astro. */
.gsudoku {
  --su-cell: min(48px, calc((100vw - 3rem) / 9));
  --su-line: var(--ice-color-border);
  --su-box: var(--ice-color-on-surface);
  --su-given: var(--ice-color-on-surface);
  --su-entry: var(--ice-palette-navy-700);
  --su-peer: var(--ice-palette-warm-50);
  --su-focus: var(--ice-palette-navy-100);
  --su-same: var(--ice-palette-warm-100);
  --su-bad-bg: var(--ice-palette-crimson-200);
  --su-bad: var(--ice-palette-crimson-700);
  max-width: 480px;
  margin-inline: auto;
}
[data-theme='dark'] .gsudoku {
  --su-entry: var(--ice-palette-navy-100);
  --su-peer: var(--ice-palette-graphite-850);
  --su-focus: var(--ice-palette-graphite-700);
  --su-same: var(--ice-palette-graphite-750);
  --su-bad-bg: var(--ice-palette-crimson-700);
  --su-bad: var(--ice-palette-crimson-200);
}
.gsudoku__board {
  display: grid;
  grid-template-columns: repeat(9, var(--su-cell));
  width: max-content;
  margin-inline: auto;
  border: 2px solid var(--su-box);
  border-radius: 4px;
  background: var(--ice-color-surface);
  user-select: none;
  -webkit-user-select: none;
}
.gsudoku__cell {
  position: relative;
  width: var(--su-cell);
  height: var(--su-cell);
  padding: 0;
  border: 0;
  border-right: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
  background: var(--ice-color-surface);
  color: var(--su-entry);
  font: 500 calc(var(--su-cell) * .55)/1 var(--ice-font-primary, inherit);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}
.gsudoku__cell:nth-child(9n) { border-right: 0; }
.gsudoku__cell:nth-child(n + 73) { border-bottom: 0; }
.gsudoku__cell.is-boxr { border-right: 2px solid var(--su-box); }
.gsudoku__cell.is-boxb { border-bottom: 2px solid var(--su-box); }
.gsudoku__cell.is-given { color: var(--su-given); font-weight: 700; }
.gsudoku__cell.is-peer { background: var(--su-peer); }
.gsudoku__cell.is-same { background: var(--su-same); }
.gsudoku__cell.is-focus { background: var(--su-focus); }
.gsudoku__cell.is-bad { background: var(--su-bad-bg); color: var(--su-bad); }
.gsudoku__cell:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: -3px; z-index: 1; }
.gsudoku__notes {
  position: absolute;
  inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: calc(var(--su-cell) * .22);
  font-weight: 600;
  line-height: 1;
  color: var(--ice-color-text-muted, currentColor);
  place-items: center;
}
.gsudoku__pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem;
  max-width: 432px;
  margin: 1rem auto 0;
}
.gsudoku__pad .game-pad { min-height: 48px; font-size: 1.2rem; touch-action: manipulation; }
.gsudoku__pad .game-pad--erase { font-size: .95rem; }
html.kaamko-plain .gsudoku__cell.is-peer,
html.kaamko-plain .gsudoku__cell.is-same { background: var(--ice-color-surface); }