/* Sudoku v1.4 — strict 9x9 grid integrity fix */

/*
  The board shell is square, but grid items can still overflow when rows are
  auto-sized from button content. Force the board to have exactly nine equal
  rows and nine equal columns so the final row can never be clipped.
*/
.board-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto !important;
  overflow: visible;
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sudoku-board .cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  overflow: hidden;
}

.sudoku-board .notes-grid {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Keep the status area entirely below the square board. */
.progress-track,
.board-message {
  flex: 0 0 auto;
}

/* Short laptop/desktop viewport: size the complete board conservatively. */
@media (min-width: 821px) and (max-height: 820px) {
  .board-wrap {
    width: min(100%, calc(100dvh - 220px));
  }
}

@media (min-width: 821px) and (max-height: 700px) {
  .board-wrap {
    width: min(100%, calc(100dvh - 195px));
  }
}

/* Phone portrait: retain the same strict square/grid rules. */
@media (max-width: 600px) {
  .board-wrap {
    width: min(calc(100vw - 16px), calc(100dvh - 290px));
  }
}

@media (max-width: 600px) and (max-height: 760px) and (orientation: portrait) {
  .board-wrap {
    width: min(calc(100vw - 16px), calc(100dvh - 230px));
  }
}

/* Landscape/short screens. */
@media (max-height: 600px) and (min-width: 601px),
       (max-height: 520px) and (orientation: landscape) {
  .board-wrap {
    width: min(50vw, calc(100dvh - 96px));
  }
}