/* Desktop viewport-fit layer.
   Keeps the complete game visible without requiring vertical scrolling. */

@media (min-width: 761px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.5vw, 22px);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }

  .topbar {
    min-height: 42px;
  }

  .game-card {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: clamp(8px, 1.25vh, 14px);
    gap: 8px;
  }

  .game-toolbar {
    min-height: 0;
  }

  .stat {
    min-height: 44px;
  }

  .game-layout {
    min-height: 0;
    height: 100%;
    align-items: center;
  }

  .board-panel {
    min-height: 0;
    height: 100%;
    align-content: center;
  }

  /* Height is the final authority on desktop, so the 10th row never drops below the fold. */
  .word-grid {
    width: min(35vw, calc(100dvh - 210px), 500px);
    max-width: 100%;
    max-height: calc(100dvh - 210px);
  }

  .hint-text {
    margin-top: 0;
  }
}

/* On especially short desktop browser windows, reclaim a little more vertical room. */
@media (min-width: 761px) and (max-height: 760px) {
  .app-shell {
    padding-block: 8px;
    gap: 6px;
  }

  .topbar {
    min-height: 36px;
  }

  .game-card {
    padding-block: 8px;
    gap: 6px;
  }

  .stat {
    min-height: 40px;
  }

  .hint-text {
    display: none;
  }

  .word-grid {
    width: min(35vw, calc(100dvh - 170px), 500px);
    max-height: calc(100dvh - 170px);
  }
}