/* ============================================================
   Responsive — phones & small screens
   ============================================================ */
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .logo { font-size: 24px; }
  .logo-icon svg { width: 24px; height: 24px; }
  .topbar-spacer { width: 48px; }
  .back-btn { font-size: 14px; padding: 6px; }

  .wrap { padding: 24px 18px; }

  h1 { font-size: 27px; margin: 0 0 18px; }
  .hint { font-size: 15px; margin: 0 0 26px; }

  .choice { font-size: 17px; padding: 16px 18px; }

  .btn { font-size: 17px; padding: 17px; }

  .footer {
    padding: 16px 18px calc(22px + env(safe-area-inset-bottom));
    gap: 14px;
  }

  .map { height: 320px; }

  /* Searching overlay on phones */
  .searching {
    padding: 16px max(16px, env(safe-area-inset-left))
             calc(16px + env(safe-area-inset-bottom));
  }
  .scan-map { height: 30vh; min-height: 190px; max-height: 260px; }
  .scan-foot h1 { font-size: 22px; }
  .scan-card { width: 96px; height: 120px; }

  /* Pricing */
  .plan { padding: 18px; }
  .pp-big { font-size: 34px; }
  .ph-title { font-size: 25px; }
  .pricing #restartBtn { margin-bottom: calc(28px + env(safe-area-inset-bottom)); }

  /* Overlay respects the notch */
  .report {
    padding: 24px max(24px, env(safe-area-inset-left));
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .logo { font-size: 21px; }
  .topbar-spacer { width: 40px; }
  h1 { font-size: 24px; }
  .field, .choice { font-size: 16px; }
}