/* Phone fit: same look, less empty space so logo, wheel, code box and spin button fit on one screen. */
@media only screen and (max-width: 480px) {
  html, body { min-height: 0; }
  #container { margin: 0 auto; padding: 16px 0 6px; gap: 0; min-height: 0; }
  .section-left, .section-right { width: 100%; max-width: none; min-width: 0; padding: 0; margin: 0; }
  .section-left { margin-bottom: 0; }
  #top-logo-container { top: 0; width: min(150px, 22dvh); margin: 0 auto 6px; }
  .wheelContainer { max-width: 100vw; padding-bottom: 0; margin-top: 0; }
  .wheelSVG { max-height: none; margin: 0 0 -6vw; }
  #code-section { margin: 0 auto 8px; padding: 8px 10px; width: 94%; }
  #code-message { margin: 0 0 4px; min-height: 1em; }
  button.spinBtn { margin: 0 auto 6px; padding: 10px; }
}