/* Fit the playing field to the game frame, above the website navigation. */
html, body { height: var(--game-viewport-height); overflow: hidden; }
.games { height: var(--game-viewport-height); display: flex; flex-direction: column; padding: 8px 12px; }
header { flex: none; margin-bottom: 6px; }
h1 { font-size: 22px; }
#sound { min-height: 40px; padding: 6px 10px; }
.game-picker { flex: none; margin-bottom: 6px; }
.game-picker button { min-height: 48px; }
.game-picker span { display: none; }
section { display: flex; flex: 1; flex-direction: column; min-height: 0; }
h2 { flex: none; font-size: 19px; margin-bottom: 2px; }
#instructions { flex: none; font-size: 13px; margin-bottom: 4px; }
.score { flex: none; margin: 3px 0; }
#arcade-stage { position: relative; flex: 1; min-height: 0; margin: 2px 0; display: flex; align-items: center; justify-content: center; }
.board { position: absolute; flex: none; margin: 0; max-width: none; }
#court { width: 100%; height: 100%; max-height: none; }
.overlay { padding: 8px 6px; }
.overlay strong { font-size: 17px; }
.overlay span { font-size: 12px; }
#arcade-controls { flex: none; }
.actions { margin: 6px auto 2px; }
.actions button { min-height: 44px; padding: 8px; font-size: 14px; }
.hint { display: none; }
html.short-arcade:not(.story-mode) #instructions { display: none; }
html.story-mode, .story-mode body { height: auto; min-height: 100%; overflow: auto; }
.story-mode body { overflow: visible; }
.story-mode .games { height: auto; min-height: 100%; }
.story-mode section { flex: none; }

/* Short, wide screens put the controls beside the board. */
@media (max-height: 480px) and (min-width: 480px) {
  html:not(.story-mode) .games { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px 12px; }
  html:not(.story-mode) header { grid-column: 1; grid-row: 1; margin: 0; gap: 4px; }
  html:not(.story-mode) h1 { font-size: 18px; }
  html:not(.story-mode) #sound { font-size: 12px; padding: 4px; }
  html:not(.story-mode) .game-picker { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; margin: 0; }
  html:not(.story-mode) .game-picker button { min-height: 44px; }
  html:not(.story-mode) .game-picker > * { flex-basis: auto; flex-shrink: 0; }
  html:not(.story-mode) section { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 125px; grid-template-rows: auto auto minmax(0, 1fr); gap: 0 8px; }
  html:not(.story-mode) h2, html:not(.story-mode) .score { grid-column: 1 / -1; text-align: center; }
  html:not(.story-mode) #instructions { display: none; }
  html:not(.story-mode) #arcade-stage { grid-column: 1; grid-row: 3; }
  html:not(.story-mode) #arcade-controls { grid-column: 2; grid-row: 3; }
  html:not(.story-mode) .actions { flex-direction: column; gap: 4px; margin-top: 0; }
  html:not(.story-mode) .steering span { display: none; }
}