/* Sudoku — 9x9 board grid + number pad only.
   The page shell, buttons, difficulty screen, overlay and switcher come from
   css/game.css, which is linked first. Shared by all 8 languages. */

.container {
  max-width: 520px;
}

/* Game screen */
.status-bar {
  font-weight: bold;
  color: var(--text-mid);
}

.difficulty-label {
  color: var(--accent);
}

.board-wrap {
  max-width: 450px;
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 3px solid #34414d;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe1e7;
  font-size: clamp(1rem, 6vw, 1.5rem);
  cursor: pointer;
  user-select: none;
  /* Height comes from the board's equal 1fr rows; an explicit aspect-ratio
     here rounds each cell's width up independently and overflows the board
     at some narrow widths (e.g. 360px), clipping the last row/column. */
  transition: background 0.1s ease;
}

.cell.br {
  border-right: 2px solid #8a97a3;
}

.cell.bb {
  border-bottom: 2px solid #8a97a3;
}

.cell.given {
  font-weight: 700;
  color: #1c2530;
}

.cell.user {
  color: #2f6fe0;
}

.cell.peer {
  background: #eef3fb;
}

.cell.same {
  background: #d7e6ff;
}

.cell.selected {
  background: #b7d3ff;
}

.cell.error {
  color: #e02424;
  background: #ffe0e0;
}

.cell.error.selected {
  background: #ffc2c2;
}

.status-text {
  min-height: 1.4em;
  margin: 12px 0 4px;
  font-weight: bold;
  color: var(--text-body);
}

/* Number pad */
.num-pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 450px;
  margin: 8px auto 0;
}

.num-btn {
  padding: 14px 0;
  font-size: 1.3rem;
  font-weight: 700;
  border: 2px solid var(--line);
  border-radius: var(--radius-btn-sm);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.num-btn:hover {
  border-color: var(--accent-border);
  background: var(--accent-tint);
}

.num-btn.done {
  opacity: 0.32;
  pointer-events: none;
}

.num-btn.erase {
  color: var(--accent);
}

#win-text {
  font-size: 1.6rem;
}

/* Phone portrait: keep the board + number pad + controls on one screen by
   capping the board to the height left over after the surrounding chrome,
   and tightening vertical spacing. */
@media (max-width: 560px) {
  body { padding: 12px; }
  .container { padding: 18px 14px; }
  h1 { font-size: 1.5rem; margin: 0 0 12px; }
  .status-bar { margin-bottom: 10px; }
  .board-wrap { max-width: min(450px, calc(100dvh - 344px)); }
  .status-text { margin: 8px 0 2px; }
  .num-pad { gap: 6px; margin-top: 6px; }
  .num-btn { padding: 11px 0; font-size: 1.2rem; }
  .game-actions { margin-top: 10px; gap: 6px; }
  .btn-secondary { padding: 9px 14px; min-height: 40px; }
}