/* Quiz Vanta — shared responsive hardening for every player-facing page.
   Loaded by /play index, host, player, dym and account. Covers phones (Android/iOS),
   tablets, Chromebooks, laptops and desktops with a fluid, touch-first baseline. */

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Comfortable tap targets on touch devices (WCAG 2.5.5 ~44px). */
button, .btn, .tile, a.btn, input[type="button"], input[type="submit"] { min-height: 44px; touch-action: manipulation; }

/* iOS Safari zooms the page when a focused input has font-size < 16px — force 16px on phones. */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Never let a wide table/grid/code block push the page sideways; scroll it in place. */
table { max-width: 100%; }
.scroll-x, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Honor the notch / rounded corners on modern phones (needs viewport-fit=cover). */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Large answer tiles: single column on narrow phones, two-up from small tablets. */
@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr !important; }
}