/* Sudoku v1.3 — board integrity and compact play-area fixes */

/* Keep the Sudoku grid a true square. Never allow viewport-fit rules to squash it. */
.board-wrap {
  aspect-ratio: 1 / 1;
  height: auto !important;
  flex: 0 0 auto;
}

.sudoku-board {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.board-panel {
  overflow: visible;
}

/* The app has one permanent dark presentation, so no theme control is needed. */
.theme-toggle {
  display: none !important;
}

/* Give the progress bar and status line their own space under the square board. */
.progress-track {
  position: relative;
  clear: both;
}

/* Short desktop/laptop screens: leave enough room below the board for progress/status. */
@media (min-width: 821px) and (max-height: 820px) {
  .board-wrap {
    width: min(100%, calc(100dvh - 205px));
  }

  .keyboard-card {
    display: none;
  }

  .control-panel {
    padding-bottom: 10px;
  }
}

/* Very short desktop browser areas need a slightly smaller board. */
@media (min-width: 821px) and (max-height: 700px) {
  .board-wrap {
    width: min(100%, calc(100dvh - 185px));
  }

  .board-message {
    display: none;
  }
}

/* Phones: preserve the full square and keep controls immediately below it. */
@media (max-width: 600px) {
  .board-wrap {
    width: min(calc(100vw - 16px), calc(100dvh - 285px));
    min-width: 0;
  }

  .board-message {
    min-height: 12px;
  }
}

/* Short portrait phones: remove nonessential board text before shrinking the grid too far. */
@media (max-width: 600px) and (max-height: 760px) and (orientation: portrait) {
  .board-message {
    display: none;
  }

  .board-wrap {
    width: min(calc(100vw - 16px), calc(100dvh - 225px));
  }
}

/* Landscape phones: ensure the square never exceeds the available vertical space. */
@media (max-height: 600px) and (min-width: 601px),
       (max-height: 520px) and (orientation: landscape) {
  .board-wrap {
    width: min(50vw, calc(100dvh - 92px));
  }
}

footer {
  justify-content: center;
}