/* Keep the complete playing surface visible on desktop and tablet. */
@media (min-width: 700px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    width: 100%;
    /* 100svh is the reliably visible height when tablet browser chrome is open. */
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: clamp(10px, 2vh, 22px) clamp(14px, 2.2vw, 30px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .masthead {
    flex: 0 0 auto;
    padding-bottom: clamp(8px, 1.5vh, 16px);
    margin-bottom: clamp(8px, 1.5vh, 16px);
  }

  .game-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) clamp(270px, 34vw, 410px);
    gap: clamp(14px, 2vw, 28px);
  }

  .board-column {
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.7vw, 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .toolbar {
    flex: 0 0 auto;
    min-height: 34px;
  }

  .play-area {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "modes"
      "board"
      "letters";
  }

  .input-rail {
    display: contents;
  }

  .mode-switch {
    grid-area: modes;
    width: max-content;
    margin: 0 0 4px;
  }

  .board-wrap {
    grid-area: board;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .board {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .letter-pad {
    grid-area: letters;
    width: 100%;
    margin: 2px auto clamp(6px, 1vh, 12px);
  }

  .status {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 12px;
  }

  .actions {
    flex: 0 0 auto;
    margin-top: clamp(6px, 1vh, 11px);
  }

  .side-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1.3vh, 14px);
  }

  .side-panel > section {
    min-height: 0;
    padding: clamp(12px, 1.8vh, 19px) clamp(14px, 1.6vw, 21px);
  }

  .word-bank {
    grid-column: auto;
    overflow: hidden;
  }

  .side-panel h3 {
    margin: clamp(8px, 1.2vh, 16px) 0 6px;
  }

  .word-grid button {
    padding: clamp(4px, .7vh, 7px) 5px;
  }

  footer {
    display: none;
  }
}

@media (min-width: 900px) {
  .play-area {
    grid-template-columns: 102px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "modes board"
      "letters board";
    column-gap: clamp(8px, 1vw, 14px);
  }

  .mode-switch {
    width: 100%;
    margin: 0 0 6px;
  }

  .mode-switch button {
    flex: 1 1 50%;
    padding-left: 5px;
    padding-right: 5px;
  }

  .letter-pad {
    width: 100%;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(13, minmax(0, 1fr)) auto;
    grid-auto-flow: column;
    gap: 3px;
  }

  .letter-pad button {
    min-height: 0;
    padding: 1px;
    line-height: 1;
  }

  .letter-pad .erase {
    grid-column: 1 / 3;
    grid-row: 14;
    padding: 5px 2px;
  }
}

@media (min-width: 700px) and (max-width: 1050px) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr) clamp(270px, 36vw, 340px);
  }

  .word-grid,
  .word-grid.six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) and (max-height: 760px) {
  .eyebrow,
  .tagline {
    display: none;
  }

  .masthead h1 {
    font-size: 30px;
  }

  .puzzle-picker label {
    margin-bottom: 3px;
  }

  .puzzle-picker select {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .toolbar button,
  .actions button {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .how-to p {
    font-size: 12px;
    line-height: 1.35;
  }

  .legend {
    margin-top: 8px;
  }

  .side-panel h2 {
    font-size: 17px;
    margin-bottom: 5px;
  }

  .word-grid button {
    font-size: 11px;
  }
}