/* Drewsky's English — gentle, site-wide mobile safety net.
   Loaded early so each page's own <style> still wins any conflict.
   These rules only prevent the most common phone annoyances; they
   do not change intentional layouts. */

/* Stop iOS/desktop from auto-inflating text differently on phones
   (a frequent cause of "looks fine on computer, off on phone"). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Remove the grey flash when tapping buttons/links on touch screens. */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Media never forces the page wider than the screen. */
img, video { max-width: 100%; }

/* On phones, guard against accidental sideways scrolling. */
@media (max-width: 520px) {
  html, body { overflow-x: hidden; }
}

/* Comfortable minimum tap target for bare links/buttons on touch
   devices, without disturbing pages that already size their own. */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a.back, .lang-toggle, .drew-lang-toggle { min-height: 44px; }
}

/* Kill the 300ms double-tap delay so taps feel native (pages don't set this). */
button, a, [role="button"], label, .btn, .tile, .mchip, .choice, .opt { touch-action: manipulation; }

/* Inputs at <16px cause iOS to auto-zoom on focus. 16px floor; page rules with
   classes still win (mobile.css loads early), this only catches unstyled inputs. */
input, select, textarea { font-size: 16px; }

/* Numbers that tick (wallet / streak / timer / score) shouldn't reflow as digits change. */
.num, [data-count], .wallet, .coins, .runcoins, .streak, .timer, .score, .count { font-variant-numeric: tabular-nums; }

/* Safe-area: keep fixed bottom bars above the iPhone home indicator. Inert until the
   viewport meta carries viewport-fit=cover (env() returns 0 otherwise) — harmless before. */
.nav, .bottom-nav, .tabbar, .appbar-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Fallback visible focus ring for the pages that don't define their own
   (loads early, so pages with their own :focus-visible still win). */
:focus-visible { outline: 3px solid var(--green, #2F6F4E); outline-offset: 2px; }

/* OS dark mode shouldn't invert our light form controls. */
html { color-scheme: light; }