/* Today's phone screens. Desktop layout and full-resolution art are unchanged.
   The glass bridge shell lays itself out in glass-shell.css; these rules cover
   room content, overlays and the sign-in and home pages. */
@media (max-width: 760px), (max-width: 1279px) and (max-height: 500px) and (pointer: coarse) {
  :root { --bridge-art: url('../assets/bridge/phone/merchant-bridge.webp'); --phone-bar: 64px; }
  /* The home and sign-in pages' scroll padding; the glass bridge sets its own
     in glass-shell.css. */
  html { scroll-padding-top: 145px; scroll-padding-bottom: calc(var(--phone-nav-height, var(--phone-bar)) + 24px); }
  body { min-height: 100dvh; font-size: 14px; }
  button, a, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgba(215, 172, 103, .18); }
  button, input, select, textarea { min-height: 44px; }
  button { min-width: 44px; }
  input, select, textarea, .auth-form input,
  .merchant-bridge input, .merchant-bridge select, .merchant-bridge .field select {
    font-size: 16px;
  }
  .market-scroll { overscroll-behavior-inline: contain; }
  /* Legacy dialogs only: a glass sheet (.gl-modal) is a flush bottom sheet
     at 640 px and below (glass.css) and keeps its own insets. */
  .merchant-bridge .modal-scrim:not(.gl-modal-scrim) { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .merchant-bridge .modal:not(.gl-modal) { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
  .merchant-bridge .modal:not(.gl-modal) label { font-size: 11px; }
  .tour-bubble { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
  .tour-foot { flex-wrap: wrap; }

  .auth-wrap { min-height: 100dvh; padding: max(28px, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(6vw, env(safe-area-inset-left)); background-image: linear-gradient(90deg, #101911b8, #111811a6 45%, #101710dd), linear-gradient(0deg, #10150ff5, transparent 55%, #10140f44), url('../assets/bridge/phone/merchant-bridge.webp'); }
  .auth-kicker, .auth-foot a, .auth-tab, .preview-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .auth-form label, .auth-kicker, .auth-logo .sub, .auth-foot, .preview-link small { font-size: 11px; }
  .auth-foot a { padding: 6px; }
  .auth-wrap .preview-link { display: block; }
  .site-header { padding-top: env(safe-area-inset-top); }
  .wrap { max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 36px); }
  .site-nav a, .text-link, .footer a, .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .brand small, .hero-copy>.eyebrow, .hero-status, .hero-caption, .section-label,
  .worlds-note, .footer nav, .image-tag, .world-kind, .world-caption { font-size: 11px; }
  .manifest p { font-size: 12px; }
  .footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-width: 1279px) and (max-height: 500px) and (pointer: coarse) {
  :root { --phone-bar: 48px; }
}