/* ===================================================================== PersianToxic — Mobile foundation (mobile-first pass · Phase 1) Shared by every player-facing page. Loaded AFTER each page's main CSS so it layers on top. Desktop is intentionally untouched: every layout change lives inside a mobile media query; the handful of always-on rules below are pure hygiene and are no-ops on desktop. ===================================================================== */ /* ---------- 1. Global hygiene (safe on every viewport) ---------- */ /* Stop iOS from re-scaling text on orientation change. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Kill the grey tap-flash; we provide our own :active feedback below. */ a, button, [role="button"], input, select, textarea, label, summary, .btn, .nav__link, .mobile__link, .kitCell, .rdKit__cell { -webkit-tap-highlight-color: transparent; } /* Nothing should ever cause sideways scrolling on a phone. */ html, body { max-width: 100%; } body { overflow-x: hidden; } /* Media can never overflow its container. */ img, svg, video, canvas { max-width: 100%; } /* Touch flag (is-touch / no-touch) is added to by mobile.js. */ /* ---------- 2. Phone primitives (≤768px) ---------- */ @media (max-width: 768px) { /* iOS zooms the whole page when a focused input has font-size < 16px. Force a 16px floor on every text entry to kill that zoom jump. */ input, select, textarea { font-size: 16px !important; } /* Comfortable minimum tap area (~44px, Apple/Google guideline) for the interactive controls shared across the site. Applied to controls only, never to layout wrappers, so it can't distort grids. */ .btn, .mobile__link, .langtoggle, .accountmenu__item, .userBtn, .bottomnav__item, .rankModal__tab, .rdModal__tab { min-height: 44px; } /* Icon-only square controls need width too. */ .hamb, .mobile__close, .topbar__hamb, .rankModal__close, .rdModal__x { min-width: 44px; min-height: 44px; } } /* ---------- 3. Tap feedback (touch can't trigger :hover) ---------- */ html.is-touch .btn:active { transform: scale(.97); filter: brightness(.94); } html.is-touch .mobile__link:active, html.is-touch .accountmenu__item:active { background: rgba(255, 255, 255, .06); } /* ---------- 4. Tooltip-on-tap for kit cells ---------- The kit item-name tooltips are :hover-only, which never fires on touch. mobile.js toggles .is-tapped on the tapped cell; the matching .is-tapped selectors live next to the original :hover rules (style.css for the main site, the dashboard store page's inline