/* Keep the original classic games within a narrow phone viewport. */
@media (max-width: 420px) {
  body.classic-game {
    width: 100%;
    padding-inline: 8px;
    overflow-x: hidden;
  }
  .classic-game #info {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 12px;
    text-align: center;
  }
  .game-2048 #gridWrap,
  .game-minesweeper #boardWrap,
  .game-breakout #canvasWrap,
  .game-fruit-catch #canvasWrap,
  .game-snake #boardWrap,
  .game-sliding-puzzle #puzzleWrap,
  .game-tetris #boardWrap {
    width: 100%;
    max-width: 100%;
  }
  .game-2048 #grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .game-2048 .tile {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    font-size: clamp(1.1em, 6vw, 1.8em);
  }
  .game-memory-match #board {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px;
  }
  .game-memory-match #board:has(.card:nth-child(36)) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px;
  }
  .game-memory-match .card {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .game-memory-match .card-front,
  .game-memory-match .card-back { font-size: clamp(1.1em, 6vw, 2em); }
  .game-minesweeper #board {
    width: 100%;
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .game-minesweeper #boardWrap {
    min-width: 0;
    overflow: hidden;
  }
  .game-minesweeper .cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    font-size: .75em;
  }
  .game-whac-a-mole #board {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .game-whac-a-mole .hole {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    font-size: 2.5em;
  }
  .game-tic-tac-toe #goban {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .game-tic-tac-toe .cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .game-breakout #game,
  .game-fruit-catch #game,
  .game-snake #game,
  .game-sliding-puzzle #canvas,
  .game-tetris #board {
    display: block;
    width: 100%;
    height: auto;
  }
  .game-tetris #gameArea {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .game-tetris #side {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .game-tetris #controls { margin-top: 0; }
  .game-tetris .key-hint { width: 100%; }
}