/* Phone fit (branch mobile-fit, 2026-10-03). Linked in index.html after desktop.css. Selectors are prefixed #app where
   they must beat the lazily loaded module CSS (pixel.css, econ.css, shop.css ...). Nothing here applies to the desktop
   layout (desktop.css) except the input font size and the rotate prompt, which never matches there. */

/* ---------- touch targets: invisible hit slop on small controls (no visual change) ----------
   :where() keeps position: relative at zero specificity, so any element that is already positioned keeps its position. */
:where(.touch) :where(.mini, .title-lang button, .home-lang button, .ec-hchip, .ec-b-chip, .pause-btn, .round-btn) { position: relative; }
.touch #app :is(.mini, .ec-hchip, .ec-b-chip, .hs-tag, .round-btn)::before,
.touch #app :is(.title-lang button, .pause-btn)::before {
  content: ""; position: absolute; inset: -6px -4px; border-radius: inherit; background: none;
}
.touch #app .pause-btn::before { inset: -8px; }
.touch #app .title-lang button::before { inset: -8px -3px; }
/* the consent buttons get real size instead (slop between No / Allow would favour the later one) */
.touch #app .px-consent .px-btns .mini::before { content: none; }
/* EN / RU on the title: 23 px tall at 11 px text was the smallest control in the game */
#app .title-lang button { font-size: 13px; padding: 9px 11px; }

/* ---------- text: nothing a player has to read under 12 px on a phone ---------- */
#app #m-skills-sub, #app #m-loadout-sub, #app #m-camp-sub, #app #h-strip-risk, #app #h-league { font-size: 12px; }
#app .hs-tag-s { font-size: 11.5px; }
#app #h-vault-state { font-size: 11px; }
#app .shop-buy { white-space: nowrap; }

/* ---------- inputs: 16 px so iOS never zooms the page on focus (WKWebView / Capacitor ignores maximum-scale) ---------- */
#app input[type="text"], #app input[type="email"], #app input:not([type]), #app textarea { font-size: max(16px, 1em); }

/* ---------- ad measurement consent ---------- */
/* title (portrait phones): the bar sat on top of the PET HEIST logo. The bar gets a fixed height (two stacked 38 px
   buttons decide it, text up to 5 lines fits next to them) and the title column starts below it while it is open. */
#app .px-consent.px-title { min-height: 98px; }
#app .px-consent.px-title .px-q { font-size: 12.5px; line-height: 1.3; }
#app:has(.px-consent.px-title:not(.hidden)) .title-wrap { padding-top: calc(164px + env(safe-area-inset-top)); gap: 10px; }
#app .px-consent.px-title { top: calc(54px + env(safe-area-inset-top)); width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
#app .px-consent .px-btns .mini { min-height: 40px; }
#app .px-consent.px-title .px-btns .mini { min-height: 38px; }
#app .px-consent .px-q a { display: inline-block; padding: 4px 0; margin: -4px 0; }
@media (max-height: 700px) and (orientation: portrait) {
  #app:has(.px-consent.px-title:not(.hidden)) .logo-top { font-size: 48px; }
  #app:has(.px-consent.px-title:not(.hidden)) .logo-bot { font-size: 70px; }
  #app:has(.px-consent.px-title:not(.hidden)) .logo-sub { margin-top: 8px; font-size: 14px; }
  #app:has(.px-consent.px-title:not(.hidden)) .title-wrap { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-height: 600px) and (orientation: portrait) {
  #app:has(.px-consent.px-title:not(.hidden)) .logo-top { font-size: 40px; }
  #app:has(.px-consent.px-title:not(.hidden)) .logo-bot { font-size: 58px; }
  #app:has(.px-consent.px-title:not(.hidden)) .title-foot { display: none; }
  #app:has(.px-consent.px-title:not(.hidden)) .title-wrap { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
}
/* Home (phones): one compact row (text | buttons) instead of a tall card over the pet showcase */
@media (max-width: 767px), (max-height: 599px) {
  #app .px-consent:not(.px-title):not(.px-strip):not(.px-launch) { flex-direction: row; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
    width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  #app .px-consent:not(.px-title):not(.px-strip):not(.px-launch) .px-q { flex: 1; min-width: 0; font-size: 13px; }
  #app .px-consent:not(.px-title):not(.px-strip):not(.px-launch) .px-q b { font-size: 14px; }
  #app .px-consent:not(.px-title):not(.px-strip):not(.px-launch) .px-btns { flex-direction: column; gap: 8px; }
  #app .px-consent:not(.px-title):not(.px-strip):not(.px-launch) .px-btns .mini { min-width: 84px; font-size: 14px; padding: 8px 12px; }
}

/* ---------- home on short phones (320x568, 360x640): keep the showcase readable ---------- */
@media (max-height: 600px) and (orientation: portrait) {
  #app #home .big-btn.raid small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* ---------- campaign path: a vertical drag on a chapter row scrolls the sheet (pan-x alone blocked it) ---------- */
#app .meta-path, #app .pet-row, #app .t-pets, #app .pwa-shots { touch-action: pan-x pan-y; }

/* ---------- landscape phones ---------- */
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 3/2) {
  /* lock pick: the dial card was taller than the screen ("Back off" cut off) */
  #app #lockpick .lp-card { zoom: .72; }
  /* results: compact card, scrolls if it still does not fit */
  #app #results .res-card { zoom: .82; }
  #app #paused .res-card { zoom: .8; }
}
/* meta screens are built for portrait: on a landscape phone (outside a raid / replay / results) ask to turn the phone.
   The Android app is locked to portrait (twa-manifest), the browser and iOS cannot be locked. */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 3/2) and (pointer: coarse) {
  #app:not(:has(#hud:not(.hidden))):not(:has(#replay-ui:not(.hidden))):not(:has(#results:not(.hidden))) #rotate {
    display: flex; position: fixed; inset: 0; z-index: 9000; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 20px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    background: radial-gradient(ellipse at 50% 40%, #2f2460 0, #1b1430 70%); color: var(--cream); text-align: center;
  }
}
#rotate .rot-phone { width: 46px; height: 76px; border-radius: 10px; border: 4px solid var(--gold); position: relative;
  animation: rotHint 2.4s ease-in-out infinite; }
#rotate .rot-phone::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--gold); }
#rotate b { font-size: 22px; font-weight: 900; color: var(--gold); }
#rotate small { font-size: 15px; font-weight: 700; opacity: .85; max-width: 420px; }
#rotate [lang="ru"], #rotate [lang="de"], #rotate [lang="pl"], #rotate [lang="pt"], #rotate [lang="es"], #rotate [lang="id"], #rotate [lang="ja"], #rotate [lang="ko"], #rotate [lang="th"], #rotate [lang="vi"], #rotate [lang="ar"], #rotate [lang="tr"], .lang-ru #rotate [lang="en"], .lang-de #rotate [lang="en"], .lang-pl #rotate [lang="en"], .lang-pt #rotate [lang="en"], .lang-es #rotate [lang="en"], .lang-id #rotate [lang="en"], .lang-ja #rotate [lang="en"], .lang-ko #rotate [lang="en"], .lang-th #rotate [lang="en"], .lang-vi #rotate [lang="en"], .lang-ar #rotate [lang="en"], .lang-tr #rotate [lang="en"] { display: none; }
.lang-ru #rotate [lang="ru"], .lang-de #rotate [lang="de"], .lang-pl #rotate [lang="pl"], .lang-pt #rotate [lang="pt"], .lang-es #rotate [lang="es"], .lang-id #rotate [lang="id"], .lang-ja #rotate [lang="ja"], .lang-ko #rotate [lang="ko"], .lang-th #rotate [lang="th"], .lang-vi #rotate [lang="vi"], .lang-ar #rotate [lang="ar"], .lang-tr #rotate [lang="tr"] { display: inline; }
@keyframes rotHint { 0%, 15% { transform: rotate(-90deg); } 45%, 85% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate .rot-phone { animation: none; } }

/* iPad / tablet portrait (the iOS app is universal from 1.0, portrait only): keep the phone layout but scale the Home
   panels, the raid HUD and the result / lockpick cards up, so a 768-1024 px wide screen is not a small phone column.
   The 3D stage (.hs-stage, home-spacer) is never zoomed (src/home-showcase.js measures it). Landscape tablets use desktop.css. */
@media (orientation: portrait) and (min-width: 740px) and (min-height: 960px) {
  :root { --tb-z: 1.22; }
  #app #home > :not(.hs-stage):not(.home-spacer) { zoom: var(--tb-z); }
  #app #hud > :not(#head-eye):not(#controls):not(#stick) { zoom: var(--tb-z); } /* never the joystick: src/input.js maps touches to its rect */
  #app #results .res-card, #app #lockpick .lp-card, #app #paused .res-card { zoom: var(--tb-z); }
  /* the zoomed top bar needs a zoomed gap above the income strip (home-showcase.css reserves 60px) */
  #app #home.hs-on { padding-top: calc(60px * var(--tb-z) + env(safe-area-inset-top)); }
}
@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1300px) {
  :root { --tb-z: 1.4; }
}