/* Sudoku-specific styles */
.game--sudoku { max-width: 620px; }

.sudoku__bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 12px;
}

/* the board */
.board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 6px;
  gap: 1px;
  background: var(--border);
  user-select: none;
  touch-action: manipulation;
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--surface);
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s ease;
}
.cell--given { color: var(--text); font-weight: 700; cursor: default; }
.cell--user { color: var(--accent); }
.cell--error { color: var(--danger) !important; }

.cell[data-col="2"], .cell[data-col="5"] { box-shadow: inset -2px 0 0 var(--text-soft); }
.cell[data-row="2"], .cell[data-row="5"] { box-shadow: inset 0 -2px 0 var(--text-soft); }
.cell[data-col="2"][data-row="2"],
.cell[data-col="2"][data-row="5"],
.cell[data-col="5"][data-row="2"],
.cell[data-col="5"][data-row="5"] { box-shadow: inset -2px 0 0 var(--text-soft), inset 0 -2px 0 var(--text-soft); }

.cell--highlight { background: var(--accent-soft); }
.cell--same { background: #e7ebfb; }
.cell--selected { background: #d6defb; box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }

.cell__notes {
  position: absolute;
  inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: 0.6rem;
  color: var(--text-faint);
  font-weight: 600;
  pointer-events: none;
}
.cell__notes span { display: grid; place-items: center; }

/* numpad */
.numpad {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  max-width: 540px;
  margin: 16px auto 0;
}
.numpad__btn {
  position: relative;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 650;
  color: var(--text);
  padding: 14px 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.04s ease, background 0.12s ease;
}
.numpad__btn:hover { background: var(--accent-soft); }
.numpad__btn:active { transform: translateY(1px); }
.numpad__btn--erase { color: var(--text-soft); }
.numpad__count {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-faint);
}
.numpad__btn[data-done="true"] { opacity: 0.4; }

.sudoku__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px auto 0;
  max-width: 540px;
}

.keyhelp {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.78rem;
  margin-top: 12px;
}

/* ---- Compact mobile layout: fit in the viewport ---- */
@media (max-width: 640px) {
  .game--sudoku {
    min-height: calc(100dvh - 56px);
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .sudoku__bar { margin: 8px 0 8px; }
  .hud { gap: 6px; }
  .hud .stat { padding: 6px 10px; }

  /* board flexes to fill remaining height, capped so numpad always fits */
  .stage-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
  .board {
    width: min(94vw, 56vh, 460px);
    max-width: none;
    margin: 0 auto;
  }

  .numpad {
    grid-template-columns: repeat(5, 1fr);
    margin: 10px auto 0;
    gap: 5px;
  }
  .numpad__btn { padding: 11px 0; font-size: 1.05rem; }

  .sudoku__tools { margin: 8px auto 0; }
  .sudoku__tools .btn { padding: 7px 11px; font-size: 0.82rem; }

  .keyhelp { display: none; }
}

@media (max-width: 640px) and (min-height: 760px) {
  .board { width: min(94vw, 62vh, 500px); }
}