/* Sudoku Responsive Sizing */
:root {
  /* Mobile default - 9 cells fit in ~315px */
  --sudoku-cell-size: 2.125rem;        /* 34px, 9 cells = 306px */
  --sudoku-font-size: 1rem;
  --sudoku-notes-font: 6px;
  --sudoku-border-thick: 2px;
  --sudoku-padding: 0.5rem;
}

@media (min-width: 400px) {
  :root {
    --sudoku-cell-size: 2.5rem;        /* 40px, 9 cells = 360px */
    --sudoku-font-size: 1.125rem;
    --sudoku-notes-font: 7px;
    --sudoku-border-thick: 2px;
    --sudoku-padding: 0.75rem;
  }
}

@media (min-width: 480px) {
  :root {
    --sudoku-cell-size: 2.75rem;       /* 44px, 9 cells = 396px */
    --sudoku-font-size: 1.25rem;
    --sudoku-notes-font: 8px;
    --sudoku-border-thick: 3px;
    --sudoku-padding: 1rem;
  }
}

@media (min-width: 640px) {
  :root {
    --sudoku-cell-size: 3rem;          /* 48px - original */
    --sudoku-font-size: 1.25rem;
    --sudoku-notes-font: 9px;
    --sudoku-border-thick: 3px;
    --sudoku-padding: 1rem;
  }
}

/* Board container */
.sudoku-board {
  padding: var(--sudoku-padding);
}

/* Grid layout */
.sudoku-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--sudoku-cell-size));
  width: fit-content;
}

/* Cell styling */
.sudoku-cell {
  width: var(--sudoku-cell-size);
  height: var(--sudoku-cell-size);
  font-size: var(--sudoku-font-size);
}

/* Notes grid */
.sudoku-notes {
  font-size: var(--sudoku-notes-font);
}

/* 3x3 box borders */
.sudoku-border-right {
  border-right-width: var(--sudoku-border-thick);
  border-right-color: #374151;
}

.sudoku-border-bottom {
  border-bottom-width: var(--sudoku-border-thick);
  border-bottom-color: #374151;
}

/* Controls panel */
.sudoku-controls {
  width: 100%;
}

@media (min-width: 640px) {
  .sudoku-controls {
    width: 200px;
  }
}

/* Stats panel */
.sudoku-stats {
  width: 100%;
}

@media (min-width: 640px) {
  .sudoku-stats {
    width: 200px;
  }
}