/* ─────────────────────────────────────────────────────────────────────────
 * Arcade mobile baseline — shared touch-hardening for every game.
 * Loaded via:  <link rel="stylesheet" href="/shared/arcade-mobile.css">
 *
 * Goal: a game should FEEL like an app on a phone, not a web page. This kills
 * the browser behaviours that ruin touch games (text selection on a tap,
 * long-press menus, double-tap / pinch zoom, pull-to-refresh, the grey tap
 * flash). Opt specific elements back in with the `.selectable` class or by
 * using real <input>/<textarea> fields.
 * ──────────────────────────────────────────────────────────────────────── */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                          /* no page scroll — the game owns the screen */
  overscroll-behavior: none;                 /* no pull-to-refresh / scroll chaining */
  background: #0f1020;
  -webkit-user-select: none;                 /* no text selection anywhere by default */
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;               /* iOS: no long-press "copy / save image" menu */
  -webkit-tap-highlight-color: transparent;  /* no grey flash when you tap */
  touch-action: manipulation;                /* no double-tap-to-zoom; snappier taps */
  -webkit-text-size-adjust: 100%;            /* iOS: don't resize text on rotate */
  text-size-adjust: 100%;
}

/* Don't let images be dragged out / long-pressed into a save dialog. */
img, a, .tap, button {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* Buttons & tappable things: never selectable, always snappy. */
button, .btn, .tap {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}

/* Opt BACK IN to selection where it's genuinely wanted:
 * real text inputs, editable areas, or anything you tag `.selectable`.
 * font-size:16px is the magic number — iOS Safari auto-zooms when you focus
 * an input smaller than 16px, so keep inputs at >=16px to stop that zoom. */
input, textarea, [contenteditable="true"], .selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  font-size: 16px;
}