/* ============================================================
   portrait.css — safe, non-destructive portrait tweaks for every
   Apogee game. Included AFTER each game's own stylesheet so these
   rules win, but we DELIBERATELY avoid touching per-game layout
   grids — every game (style.css for Skyward/Thermal, contrail.css,
   apogeehot5/safari/foxy/samba.css, hormuz, apex, fastkeno,
   junglerun) already ships its own @media (max-width: …) rules
   that correctly place stage / bet panels / side panels on mobile.

   Previously this file ran aggressive `.layout { display: flex
   !important; flex-direction: column !important }` rules to try
   to force a single-column stack. On Skyward and Thermal that
   destroyed the existing mobile grid (which puts stage on row 1
   spanning both cols, then bet1 | bet2 side-by-side on row 2)
   and flowed bet1 ABOVE the canvas because it appears earlier in
   DOM order. Reverted — now only generic cross-game tweaks live
   here: font smoothing, touch-action, 16px inputs, demo-badge
   sizing, image rendering. No layout overrides.

   Scope: (max-width: 820px) OR (orientation: portrait AND
   max-width: 900px). Desktop landscape is never touched.
   ============================================================ */

@media (max-width: 820px), (orientation: portrait) and (max-width: 900px) {

  /* ---------- Core page chrome — safe universals only ---------- */
  html, body {
    -webkit-text-size-adjust: 100%;
  }
  body {
    touch-action: manipulation;   /* disable double-tap zoom on controls */
  }

  /* iOS Safari zooms inputs with font-size < 16px. Bump only fields
     that we know are text/number inputs inside a stake row. Targeted —
     does not touch layout-critical inputs on any game. */
  input[type="number"].stake-input,
  input[type="text"].stake-input,
  .stake-row input[type="number"],
  .stake-row input[type="text"] {
    font-size: 16px;
  }

  /* Demo badge stays visible but compact on narrow screens */
  .demo-badge {
    padding: 2px 8px !important;
    font-size: 9px !important;
    line-height: 1.3;
  }

  /* Footer build chip — compact */
  .build-chip, .footer-chip {
    font-size: 9.5px;
    padding: 2px 6px;
  }

  /* Smooth SVG/image rendering on phones */
  img, svg {
    image-rendering: auto;
  }
}

/* Deep portrait (narrow phones ≤ 400px) — still no layout overrides,
   just conservative spacing tweaks on a couple of generic classes
   that all games share. */
@media (orientation: portrait) and (max-width: 400px) {
  /* Give action buttons a little more room on very narrow screens so
     the player's thumb doesn't accidentally hit neighbouring controls.
     Only targets explicit action-style buttons, not any layout div. */
  button.action-btn,
  button.spin-btn,
  button.bet-btn,
  button.cash-btn {
    min-height: 48px;
  }
}