/* ฟาร์มหมู vs ฟาร์มแกะ — phone pass (mobile team, 2026-10-27): touch targets ≥ 44 px, no cut-off names, sharp / unsquashed
   pictures, iPhone landscape text. Loaded last (after menus.css + gfxfix.css); every rule is small and scoped so the look on the
   desktop does not change. Measured with the audit in docs/MOBILE-TH.md (812×375, 640×360, 375×812 turned). */

/* iPhone Safari enlarges text in landscape unless told not to — that pushed labels out of their buttons */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* no grey flash / long-press bubble on the game canvas and the buttons */
.game-canvas { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button, [role=button] { -webkit-tap-highlight-color: transparent; }

/* painted icons keep their shape inside fixed boxes (were squashed 96×96 → 40×36 in market / shop / arena rows) */
.overlay img.gi, .fm-drawer img.gi { object-fit: contain; }
/* HD animal portraits are smooth art (painted at 2× for sharp screens): scale them smoothly, not as pixel art */
body.hd-ui .fm-th { image-rendering: auto; }

@media (pointer: coarse) {
  /* title top bar: the pig / sheep switch and the 💎 top-up were 40 px tall on phones */
  .overlay.fm-title .ov-card .fm-sides button { min-height: 44px; }
  .overlay.fm-title .ov-card .fm-wallet button.fm-topup, .overlay.fm-title .ov-card .fm-wallet button { min-height: 44px; }
  .overlay.fm-title .ov-card button.fm-helpbtn { min-width: 44px; }
  html body .overlay.fm-title .ov-card button.tp-menubtn { height: 44px; }   /* (owner-only test panel button) */
  html body .tp-hud { min-width: 44px !important; min-height: 44px !important; }
}
/* small phones (≤ 700 px wide, or a turned portrait phone ≤ 700 px tall): the side switch shows its pig / sheep icons only, so
   the player's name in the profile card is not cut to one letter */
@media (pointer: coarse) and (max-width: 700px) {
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-sides button { font-size: 0; min-width: 48px; padding: 0 8px; }
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-sides button .gi { height: 28px; margin: 0; vertical-align: middle; }
  /* the menu tiles' names fit their tile instead of "ด่านแข่ง…" / "รางวัลรา…" */
  html:not(.fm-rot) .overlay.fm-title .ov-card button.fm-tile > b { font-size: 10.5px; letter-spacing: -0.5px; }
}
@media (pointer: coarse) and (max-height: 700px) {
  html.fm-rot .overlay.fm-title .ov-card .fm-sides button { font-size: 0; min-width: 48px; padding: 0 8px; }
  html.fm-rot .overlay.fm-title .ov-card .fm-sides button .gi { height: 28px; margin: 0; vertical-align: middle; }
  html.fm-rot .overlay.fm-title .ov-card button.fm-tile > b { font-size: 10.5px; letter-spacing: -0.5px; }
}
/* small phones, top bar (fix pass 2 — 640×360 showed "น้." and 667×375 "น้อ..."): the 💎 top-up button shows 💎+ only (its
   title keeps the words), tighter wallet chips + side switch, no edit pencil (the whole card is the edit button) → the whole name
   shows at 640×360 / 667×375 (≥ 4 letters + … with the 💗 shard chip too) */
@media (pointer: coarse) and (max-width: 700px) {
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-wallet button.fm-topup { font-size: 0 !important; min-width: 50px; padding: 0 9px 0 5px; }
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-wallet button.fm-topup .gi { height: 24px; margin: 0; }
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-wallet button.fm-topup::after { content: '+'; font: 800 20px/1 Kanit, Prompt, Tahoma, sans-serif; }
  html:not(.fm-rot) .overlay.fm-title .fm-wallet { gap: 4px; }
  html:not(.fm-rot) .overlay.fm-title .fm-wallet { font-size: 12.5px; }
  html:not(.fm-rot) .overlay.fm-title .fm-wallet span { padding: 0 7px 0 1px; }
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-sides button { min-width: 44px; padding: 0 6px; }
  html:not(.fm-rot) .overlay.fm-title .ov-card .fm-sides button .gi { height: 26px; }
  html:not(.fm-rot) .overlay.fm-title .fm-prof .fm-pedit { display: none; }
  html:not(.fm-rot) .overlay.fm-title .ov-card button.fm-prof { padding-right: 10px; overflow: hidden; }
  html:not(.fm-rot) .overlay.fm-title .fm-prof .fm-pn { min-width: 48px; max-width: 96px; }
  html:not(.fm-rot) .overlay.fm-title .ov-card button.fm-feat b { font-size: 12.5px; letter-spacing: -0.4px; }
  html:not(.fm-rot) .overlay.fm-title .ov-card button.fm-go small { font-size: 10.5px; letter-spacing: -0.4px; }
}
@media (pointer: coarse) and (max-height: 700px) {
  html.fm-rot .overlay.fm-title .ov-card .fm-wallet button.fm-topup { font-size: 0 !important; min-width: 50px; padding: 0 9px 0 5px; }
  html.fm-rot .overlay.fm-title .ov-card .fm-wallet button.fm-topup .gi { height: 24px; margin: 0; }
  html.fm-rot .overlay.fm-title .ov-card .fm-wallet button.fm-topup::after { content: '+'; font: 800 20px/1 Kanit, Prompt, Tahoma, sans-serif; }
  html.fm-rot .overlay.fm-title .fm-wallet { gap: 4px; }
  html.fm-rot .overlay.fm-title .fm-wallet { font-size: 12.5px; }
  html.fm-rot .overlay.fm-title .fm-wallet span { padding: 0 7px 0 1px; }
  html.fm-rot .overlay.fm-title .ov-card .fm-sides button { min-width: 44px; padding: 0 6px; }
  html.fm-rot .overlay.fm-title .ov-card .fm-sides button .gi { height: 26px; }
  html.fm-rot .overlay.fm-title .fm-prof .fm-pedit { display: none; }
  html.fm-rot .overlay.fm-title .ov-card button.fm-prof { padding-right: 10px; overflow: hidden; }
  html.fm-rot .overlay.fm-title .fm-prof .fm-pn { min-width: 48px; max-width: 96px; }
  html.fm-rot .overlay.fm-title .ov-card button.fm-feat b { font-size: 12.5px; letter-spacing: -0.4px; }
  html.fm-rot .overlay.fm-title .ov-card button.fm-go small { font-size: 10.5px; letter-spacing: -0.4px; }
}
/* the town HUD (room pill, round 🛒 / chat buttons) was 40 px on phones */
@media (pointer: coarse) {
  .tw-hud .tw-pill, .tw-hud .tw-r { min-height: 44px; }
  .tw-hud .tw-r { min-width: 44px; }
}
/* BUGHUNT: the welcome-back card and the stage-start card (ui.js .ov-diff.fm-stick): on phones their buttons sat below the
   card's fold with no cue. The action row now stays pinned at the card's bottom edge while the summary scrolls behind it */
@media (max-height: 460px) {
  .overlay.fm .ov-card .ov-diff.fm-stick { position: sticky; bottom: 0; z-index: 3; margin: 6px 0 0; padding: 8px 0 2px; background: linear-gradient(rgba(246, 231, 200, 0), var(--parch, #f6e7c8) 9px); }
}
html.fm-rot .overlay.fm .ov-card .ov-diff.fm-stick { position: sticky; bottom: 0; z-index: 3; margin: 6px 0 0; padding: 8px 0 2px; background: linear-gradient(rgba(246, 231, 200, 0), var(--parch, #f6e7c8) 9px); }