/* Sudoku. Sits on top of arcade.css, which supplies the shell, the readout row
   and the dialogs. The board is 81 buttons rather than a canvas so every square
   is a real, focusable, readable target. */

.sudoku-page .sd-shell {
  --sd-line: #5a4a4a;
  --sd-thin: #c9c0c0;
  --sd-given: #1d1d1d;
  --sd-mine: #7B1828;
  --sd-select: #ffe9a8;
  --sd-same: #fbd9d9;
  --sd-peer: #f6f1f1;
  --sd-bad: #c4262e;
  padding-bottom: 20px;
}

.sd-play {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 12px 0;
}

/* The board is as big as the window allows, up to 600px, and always square. */
.sd-board {
  --cell: min(10.2vw, 64px, calc((100dvh - 250px) / 9));
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-template-rows: repeat(9, var(--cell));
  border: 3px solid var(--sd-line);
  background: #fff;
  user-select: none;
}

.sd-cell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sd-thin);
  border-radius: 0;
  background: #fff;
  color: var(--sd-mine);
  font: 600 calc(var(--cell) * 0.58) / 1 'Trebuchet MS', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The box lines: every third line is thick. */
.sd-cell:nth-child(9n+3), .sd-cell:nth-child(9n+6) { border-right: 3px solid var(--sd-line); }
.sd-cell:nth-child(n+19):nth-child(-n+27),
.sd-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 3px solid var(--sd-line); }

.sd-cell.is-given { color: var(--sd-given); font-weight: 800; cursor: default; }
.sd-cell.is-peer { background: var(--sd-peer); }
.sd-cell.is-same { background: var(--sd-same); }
.sd-cell.is-selected { background: var(--sd-select); outline: 3px solid #d89a00; outline-offset: -3px; z-index: 1; }
.sd-cell.is-clash { color: var(--sd-bad); background: #ffe3e3; }
.sd-cell.is-wrong { text-decoration: underline wavy var(--sd-bad); }

/* Pencil marks: a 3 by 3 of tiny digits in the same places as the big ones. */
.sd-notes {
  position: absolute;
  inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font: 600 calc(var(--cell) * 0.24) / 1 'Trebuchet MS', sans-serif;
  color: #555;
  pointer-events: none;
}
.sd-notes span { display: flex; align-items: center; justify-content: center; }

.sd-controls { display: flex; flex-direction: column; gap: 12px; width: min(100%, 360px); }

.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sd-pad button {
  position: relative;
  min-height: 56px;
  font: 700 26px 'Trebuchet MS', sans-serif;
  border: 2px solid var(--sd-line);
  border-radius: 8px;
  background: #fff;
  color: var(--sd-mine);
  cursor: pointer;
}
.sd-pad button:hover { background: var(--sd-select); }
.sd-pad button.is-done { opacity: 0.3; }
.sd-pad button small {
  position: absolute; right: 5px; bottom: 2px; font: 600 11px sans-serif; color: #666;
}

.sd-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sd-tools button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; min-height: 52px;
  font: 600 13px 'Trebuchet MS', sans-serif;
  border: 2px solid var(--sd-line); border-radius: 8px; background: #fff; color: #222; cursor: pointer;
}
.sd-tools button:hover { background: var(--sd-select); }
.sd-tools button[aria-pressed="true"] { background: var(--sd-mine); color: #fff; border-color: var(--sd-mine); }

.sd-status { min-height: 1.4em; margin: 0; font-weight: 600; text-align: center; color: var(--sd-mine); }

.sd-levels { display: flex; flex-wrap: wrap; gap: 6px; }
#sd-levels button { padding: 8px 14px; border: 2px solid var(--sd-line, #5a4a4a); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 600; }
#sd-levels button[aria-pressed="true"] { background: #7B1828; color: #fff; border-color: #7B1828; }

.sd-help-link { text-align: center; margin: 10px 0 0; }
.sd-linkbtn { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

.sd-cell:focus-visible, .sd-pad button:focus-visible, .sd-tools button:focus-visible {
  outline: 3px solid #1a5fb4; outline-offset: -3px;
}

@media (max-width: 720px) {
  .sd-play { gap: 12px; padding-inline: 6px; }
  .sd-board { --cell: min(10.4vw, calc((100dvh - 330px) / 9)); }
  .sd-pad button { min-height: 50px; }
}

@media (prefers-reduced-motion: no-preference) {
  .sd-cell { transition: background 0.08s; }
}