/* ===========================================================
   Sudoku — game-specific styles only.
   Chrome, buttons, #status, .hint, .stat etc. come from shared.css.
   Everything responsive down to ~360px via clamp().
   =========================================================== */

body {
  gap: 16px;
  user-select: none;
  -webkit-user-select: none;
}

h1 { font-weight: 700; font-size: 2.4rem; }

/* ---------- top bar: difficulty + stat chips ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(460px, 94vw);
}

/* difficulty pill group */
.diff {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.diff-btn {
  padding: 7px 14px;
  font-size: 0.9rem;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
}
.diff-btn:hover { opacity: 1; background: var(--surface-3); }
.diff-btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
}
.diff-btn.is-active:hover { opacity: 1; background: var(--accent); }

.stats { display: flex; gap: 8px; }
.stats .stat { min-width: 64px; padding: 5px 12px; }
.stats .val { font-size: 1.1rem; }

/* ---------- the board ---------- */
/* --cell is the side of one square; the board is 9 of them.
   Clamp keeps it phone-friendly but generous on desktop. */
#board {
  --cell: clamp(32px, 10.4vw, 50px);
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-template-rows: repeat(9, var(--cell));
  /* outer frame doubles as the thick perimeter line */
  background: var(--text);
  border: 3px solid var(--text);
  border-radius: 6px;
  gap: 1px;
  box-shadow: 0 10px 40px var(--shadow);
  overflow: hidden;
}

/* a single cell */
.cell {
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.5);
  font-weight: 600;
  background: var(--surface);
  color: var(--accent);            /* user entries use the gold accent */
  cursor: pointer;
  transition: background 0.12s;
}
.cell.given {
  color: var(--text);              /* locked givens are plain text */
  cursor: default;
  font-weight: 700;
}

/* thick lines between the 3x3 boxes — drawn as extra borders.
   The 1px grid gap shows the --text board colour for thin lines. */
.cell.box-r { box-shadow: inset -2px 0 0 var(--text); }
.cell.box-b { box-shadow: inset 0 -2px 0 var(--text); }
.cell.box-r.box-b { box-shadow: inset -2px 0 0 var(--text), inset 0 -2px 0 var(--text); }

/* ---- highlighting states (added by JS) ---- */
.cell.peer    { background: var(--surface-2); }      /* same row/col/box */
.cell.same    { background: var(--surface-3); }      /* same digit       */
.cell.selected{ background: var(--accent); color: var(--accent-text); }
.cell.given.selected { color: var(--accent-text); }
.cell.conflict{ color: var(--red); }
.cell.selected.conflict { color: var(--accent-text); }

/* ---------- number pad ---------- */
#pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: min(460px, 94vw);
}
#pad button {
  padding: 0;
  height: clamp(46px, 13vw, 58px);
  font-size: 1.4rem;
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--shadow);
}
#pad button:hover { opacity: 1; background: var(--surface-3); }
#pad .erase {
  grid-column: span 5;
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- actions ---------- */
.actions { display: flex; gap: 12px; }

/* highlight cells that are wrong while celebrating the win, etc. */
#board.won .cell { background: var(--surface); }
#board.won .cell.given { color: var(--text); }