/* Extend the compact phone controls through the small-tablet range. */
@media (min-width: 621px) and (max-width: 760px) {
  .game-controls-row {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 7px;
    padding: 8px;
    align-items: center;
  }
  #startGameBtn .desktop-label { display: none; }
  #startGameBtn .mobile-icon {
    display: inline;
    font-size: 19px;
    line-height: 1;
  }
  #startGameBtn,
  #resetGameBtn,
  #historyToggle {
    display: grid;
    place-items: center;
    grid-row: 1;
    justify-self: start;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }
  #startGameBtn { grid-column: 1; }
  #resetGameBtn { grid-column: 2; }
  #historyToggle { grid-column: 3; font-size: 24px; line-height: 1; }
  .top-time-control {
    grid-column: 4 / 7;
    grid-row: 1;
    justify-self: end;
    width: 132px;
    min-width: 0;
    grid-template-columns: 34px 64px 34px;
  }
  .top-time-control .icon-button { width: 34px; min-width: 34px; }
  .top-time-control .timer { min-width: 64px; padding: 0 4px; font-size: 16px; }
  #startTurnBtn,
  #stopTurnBtn {
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 12px;
  }
  #startTurnBtn { grid-column: 1 / 4; }
  #stopTurnBtn { grid-column: 4 / 7; }
}

/* Keep the start action labelled while two rows still leave enough room. */
@media (min-width: 600px) and (max-width: 760px) {
  .game-controls-row { grid-template-columns: minmax(132px,1fr) 42px 42px minmax(132px,1fr); }
  #startGameBtn { width: 100%; min-width: 0; padding-inline: 8px; }
  #startGameBtn .desktop-label { display: inline; }
  #startGameBtn .mobile-icon { display: none; }
  .top-time-control { grid-column: 4; }
  #startTurnBtn { grid-column: 1 / 3; }
  #stopTurnBtn { grid-column: 3 / 5; }
}