/* ============================================================
   MOBILE STYLES  (phone-only: max-width 640px)
   Kept in its own file so the main stylesheet doesn't balloon.

   Follows established mobile UI guidelines:
   • Touch targets ≥ 44×44px          (Apple HIG · WCAG 2.1 SC 2.5.5)
   • Bottom nav 56px, 3–5 destinations (Material Design 3)
   • Safe-area insets for notch/home    (env(safe-area-inset-*), needs
     viewport-fit=cover — set in index.html)
   • Full height via dvh/svh, not vh    (avoids mobile browser-chrome jump)
   • ≥16px font on inputs               (stops iOS focus auto-zoom)
   • overscroll containment + momentum  (no page rubber-banding)
   ============================================================ */

/* --- Global mobile hardening (all viewports, but cheap) --- */
:root {
  --mobile-nav-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html, body {
  /* Never allow a stray element to create a sideways scroll on a phone. */
  overflow-x: hidden;
}

@media (max-width: 640px) {
  body {
    /* Stop pull-to-refresh / overscroll chaining while playing. */
    overscroll-behavior-y: contain;
  }

  /* iOS zooms the page when focusing an input whose font is <16px. Force the
     minimum on real text inputs so tapping a field never jolts the layout. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: max(16px, 1em);
  }

  /* Give every genuinely interactive control a comfortable hit area. Scoped to
     avoid inflating decorative role="button" spans used as chips. */
  button,
  [role="button"],
  a[href] {
    /* Not a hard min-height on all (would break tiny icon pills in dense rows),
       but ensure the tap target isn't microscopic. */
    touch-action: manipulation; /* kill the 300ms tap delay */
  }
}

/* --- Fixed bottom navigation (Material: 56dp; +safe area) --- */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  padding-bottom: var(--safe-b);
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.92), rgba(8, 7, 6, 0.98));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(120, 113, 108, 0.28);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
}
.mobile-bottom-nav > div {
  min-height: var(--mobile-nav-h);
  max-width: 720px;
  margin: 0 auto;
}
/* Each tab already flexes; guarantee the ≥44px touch target height. */
.mobile-bottom-nav button {
  min-height: 52px;
}

/* Content that sits above a bottom nav needs breathing room so the last row
   isn't hidden behind it. Callers add `.has-mobile-nav` to the scroll region. */
@media (max-width: 640px) {
  .has-mobile-nav {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-b) + 12px);
  }
}

/* --- Compact phone header --- */
.mobile-top-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + var(--safe-t)) 12px 8px;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.96), rgba(10, 9, 8, 0.72) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- Bottom-sheet modal (Material bottom sheet) --- */
.mobile-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sheet-scrim-in 0.2s ease-out;
}
.mobile-sheet {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  background: #0c0a09;
  border: 1px solid rgba(120, 113, 108, 0.32);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding-top: 8px;
  padding-bottom: calc(12px + var(--safe-b));
  box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.7);
  animation: sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-sheet-grabber {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(168, 162, 158, 0.5);
  margin: 4px auto 10px;
  cursor: pointer;
  flex-shrink: 0;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes sheet-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reduced-motion .mobile-sheet { animation: none; }
.reduced-motion .mobile-sheet-scrim { animation: none; }