/* Sudoku Board Grid */
#sudoku-board {
  background-color: var(--color-surface);
  border: 2px solid var(--color-text-primary);
}

.sudoku-cell {
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-family: var(--font-family-serif);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.1s ease;
  color: var(--color-text-primary);
  /* Thin borders for every cell */
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .sudoku-cell { font-size: 1.5rem; }
}

/* Thicker borders for 3x3 blocks */
.sudoku-cell:nth-child(3n) { border-right: 2px solid var(--color-text-primary); }
.sudoku-cell:nth-child(9n) { border-right: none; } /* Reset end of row */
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--color-text-primary); }
.sudoku-cell:nth-child(n+73):nth-child(-n+81) { border-bottom: none; } /* Reset end of board */

/* Cell States */
.sudoku-cell.fixed { font-weight: 700; }
.sudoku-cell.user-input { font-weight: 400; color: #3b82f6; }
.sudoku-cell.error { color: var(--color-danger); background-color: #fee2e2 !important; }

/* Highlight States */
.sudoku-cell.selected { background-color: #e5e0d3; }
.sudoku-cell.related { background-color: #f0ebe1; }
.sudoku-cell.identical { background-color: #d1cbbd; }

/* Notes Mode */
.sudoku-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sudoku-note {
  font-size: 0.6rem;
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Controls */
.numpad-btn.completed { opacity: 0.5; pointer-events: none; }
.action-btn.active { background-color: #e5e0d3; border-color: var(--color-text-primary); }