/* Mobile host adaptation of the selected Memphis/Cruip cards, not new card faces.
   Native scrolling follows https://webkit.org/demos/scroll-snap/ . */
html { -webkit-text-size-adjust:100%; }
@media (max-width:900px) {
  .app { width:100%; overflow:visible; padding:24px max(20px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); min-height:100svh; }
  .account-heading { flex-wrap:wrap; gap:24px; margin-bottom:28px; }
  .account-heading .big { font-size:40px; }
  .account-actions { margin:0; flex-wrap:wrap; gap:12px; }
  #signOut,.account-actions .pill { min-height:44px; padding:10px 18px; font-size:14px; }
  .vessel { min-height:0; height:clamp(240px,68vw,400px); border-radius:24px; }
  /* In the compact layout the pool is a balance illustration; page scrolling
     owns this area even when a mouse is temporarily attached to a phone. */
  .vessel .source,.vessel .source iframe { pointer-events:none; }
  .vessel .top { top:24px; left:24px; right:24px; }
  .vessel .credits { font-size:clamp(44px,10vw,64px); }
  .kicker { margin-bottom:20px; }
  .offer-catalog.fm-shell { margin:36px 0 24px; }
  .offer-catalog .fm-heading { flex-wrap:wrap; gap:8px 16px; margin-bottom:16px; }
  .offer-catalog .fm-quotas,.offer-catalog .fm-plans {
    display:flex; width:100%; overflow-x:auto; gap:20px;
    padding:8px 14px 22px 2px; scroll-padding-inline:2px 14px;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:thin; scrollbar-color:#64748b transparent;
  }
  .offer-catalog .fm-quotas>.fm-card { flex:0 0 180px; }
  .offer-catalog .fm-plans>.fm-card { flex:0 0 min(300px,calc(100% - 24px)); }
  .offer-catalog .fm-card { scroll-snap-align:start; }
  #accountDialog { width:calc(100% - 32px); max-width:none; max-height:calc(100dvh - 32px); padding:22px; }
  #accountDialog input { font-size:16px; }
  #accountDialog .pill { min-height:44px; }
}
@media (hover:none), (pointer:coarse) {
  button,a,[role=button] { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  /* The decorative iframe must not capture page scrolling on a phone. */
  .vessel .source { pointer-events:none; }
  .offer-catalog .ticket:hover { transform:none; }
  .offer-catalog [data-physical]:hover { translate:0 0; box-shadow:8px 8px 0 #000; }
  .offer-catalog [data-physical]:active { translate:8px 8px; box-shadow:0 0 0 #000; }
  .account-actions .saved-action:hover { translate:0 0; box-shadow:4px 4px 0 #000; }
  .account-actions .saved-action:active { translate:4px 4px; box-shadow:0 0 0 #000; }
}