/*
 * The Sudoku board.
 *
 * These are the demo's board rules - public/demo/game.html, the .grid, .cell,
 * .pad and .pad-row blocks - under the class names the module actually emits.
 * The declarations are copied; only the selectors are translated:
 *
 *   .grid           -> .sudoku-grid         .pad          -> .sudoku-pad
 *   .cell           -> .sudoku-cell         .key          -> .sudoku-key
 *   [data-given]    -> [data-given="1"]     .pad-row      -> .sudoku-tools
 *   [data-peer]     -> [data-match="1"]     .pad-row .btn -> .sudoku-key--wide
 *   [data-selected] -> [data-selected="1"]
 *   [data-wrong]    -> [data-conflict="1"]
 *   .cell small     -> .sudoku-notes
 *
 * Keep it that way: when the board changes, change the demo and translate it
 * back, rather than editing one and remembering to tell the other.
 */

.sudoku-grid {
  width: min(100%, var(--size));
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background: var(--line);
  gap: 1px;
  padding: 2px;
  border-radius: 12px;
  overflow: hidden;
  margin-inline: auto;
}

.sudoku-cell {
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: clamp(.95rem, calc(var(--size) / 16), 1.85rem);
  /*
   * Without this the digit's line box, not the aspect ratio, decides how
   * tall a row is: at 2rem the nine rows came to 448px however narrow the
   * grid was told to be, and no width cap could pull the card back inside
   * the fold.
   */
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  cursor: pointer;
  border: 0;
  padding: 0;
  font-family: inherit;
  min-width: 0;
  transition: background var(--motion-fast) var(--ease);
}

.sudoku-cell[data-given="1"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--bg-tint);
  cursor: default;
}

/* The three-by-three boxes, drawn with a heavier line rather than a border on
   every cell: nine thin lines and four thick ones, which is how the grid
   reads on paper. */
.sudoku-cell:nth-child(9n + 4),
.sudoku-cell:nth-child(9n + 7) { box-shadow: inset 2px 0 0 var(--ink-mute); }

.sudoku-cell:nth-child(n + 28):nth-child(-n + 36),
.sudoku-cell:nth-child(n + 55):nth-child(-n + 63) { box-shadow: inset 0 2px 0 var(--ink-mute); }

.sudoku-cell:nth-child(28), .sudoku-cell:nth-child(31), .sudoku-cell:nth-child(34),
.sudoku-cell:nth-child(55), .sudoku-cell:nth-child(58), .sudoku-cell:nth-child(61) {
  box-shadow: inset 2px 0 0 var(--ink-mute), inset 0 2px 0 var(--ink-mute);
}

/* The row, the column and the box of the selected cell. */
.sudoku-cell[data-match="1"] { background: var(--accent-soft); }
.sudoku-cell[data-given="1"][data-match="1"] {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg-tint));
}
.sudoku-cell[data-selected="1"] { background: var(--accent); color: var(--accent-ink); }
.sudoku-cell[data-conflict="1"] { background: var(--bad-soft); color: var(--bad); }

/* Pencil marks: a three by three grid inside the cell. */
.sudoku-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: .42em;
  font-weight: 600;
  color: var(--ink-mute);
}

/* ---------- The keypad ---------- */

.sudoku-pad {
  width: min(100%, 23rem);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  margin: 0 auto;
}

.sudoku-key {
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}

.sudoku-key:hover { border-color: var(--accent); color: var(--accent); }

/* The count under the digit: how many of it are still to place. */
.sudoku-key u {
  display: block;
  text-decoration: none;
  font-size: .5625rem;
  font-weight: 700;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* Nothing left to place, so the key stops asking to be pressed. */
.sudoku-key[data-done="1"] { opacity: .4; }

.sudoku-tools {
  width: min(100%, 23rem);
  display: flex;
  gap: 8px;
  margin: 0 auto;
}

.sudoku-tools .sudoku-key--wide {
  flex: 1;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: var(--text-md);
  font-weight: 600;
}

.sudoku-key[data-on="1"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.sudoku-status {
  margin: 0;
  font-size: .8125rem;
  color: var(--ink-mute);
  text-align: center;
}

.sudoku-status--warn { color: var(--warning); font-weight: 650; }
.sudoku-status--lost { color: var(--bad); font-weight: 700; }

/* On a narrow phone, nine keys in a row get tight. Two rows read better. */
@media (max-width: 380px) {
  .sudoku-pad { grid-template-columns: repeat(5, 1fr); }
}

/* A phone has height to spare once the grid is width-bound, so the keypad
   takes some of it: a bigger target and a bigger number. */
@media (max-width: 559px) {
  .sudoku-pad { gap: 5px; }
  .sudoku-key { min-height: 54px; font-size: 1.3125rem; }
  .sudoku-key u { font-size: .625rem; }
  .sudoku-tools .sudoku-key--wide { min-height: 48px; }
}