/* =============================================================================
   Gamers Escape — universal mobile layer.
   Loaded LAST on every page so it wins the cascade.
   -----------------------------------------------------------------------------
   ONLY put rules here that are correct on ALL pages — generic element selectors
   and brand.css classes. Anything targeting the marketing site's own classes
   belongs in site-mobile.css, and the TV board's in board-mobile.css. This file
   used to hold all three, and since ten pages load it, /imposter,
   /admin/insights and /admin/stock were silently inheriting rules written for
   the homepage (their card padding was set by a homepage pricing-card rule).

   DO NOT put `overflow-x` on html/body here. Both values cause real bugs:
     overflow-x:hidden  makes html/body a scroll container, which kills every
                        position:sticky descendant (the menu's sticky headings).
     overflow-x:clip    breaks programmatic scrolling via window.scrollTo(),
                        breaking the category jump buttons.
   The horizontal overflow that guard used to paper over is fixed at source
   (see the grid `min-width:0` rules in site-mobile.css and the menu-board
   columns), and every page is verified overflow-free at 360 / 390 / 414px.
   ============================================================================= */
html, body { max-width: 100%; }
img, video, iframe, canvas { max-width: 100%; }
* { -webkit-tap-highlight-color: rgba(255,45,155,.18); }

/* iOS notch / home-indicator safe areas.
   Requires viewport-fit=cover in the page's <meta name="viewport">, or
   env(safe-area-inset-*) resolves to 0 and this silently does nothing. */
@supports (padding: max(0px)) {
  footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   PHONES  (<= 640px)
   ========================================================= */
@media (max-width: 640px) {
  section, .sec { padding-top: 52px; padding-bottom: 52px; }

  /* --- Type scale --- */
  h1, .display { line-height: 1.05; }
  h2 { font-size: clamp(24px, 7vw, 32px); line-height: 1.1; }
  h3 { font-size: 18px; }
  p, li { font-size: 15px; line-height: 1.55; }

  /* 16px stops iOS from auto-zooming when a field is focused */
  input, select, textarea { font-size: 16px !important; }

  /* --- Footer ---
     Keep the iOS home-indicator inset: a bare `padding` shorthand here would
     reset the padding-bottom set in the @supports block above (same
     specificity, later source order wins) on exactly the phones it was written
     for. */
  footer { padding: 32px 0 calc(28px + env(safe-area-inset-bottom)); text-align: center; }
  footer a { display: inline-block; padding: 8px 4px; }

  /* --- brand.css components (bingo / imposter / predictions / request / board) --- */
  .ge-chip { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .orb { display: none; }
}

/* ---------- Landscape phones: trim vertical padding ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  section, .sec { padding-top: 40px; padding-bottom: 40px; }
}