/* The event journey is used in hand, on a phone. Keep actions and copy legible there. */
@media (max-width: 760px) {
  html { scroll-padding-top: 16px; }
  body { overflow-x: hidden; }
  main { padding: 24px 20px calc(112px + env(safe-area-inset-bottom)); min-height: 0; }
  .site-header { height: 68px; padding: 0 20px; }
  .site-header .brand img { width: 124px; }
  .intro { margin-bottom: 23px; }
  .intro h1 { font-size: clamp(30px, 8.8vw, 38px); line-height: 1.12; margin: 12px 0; }
  .intro p { font-size: 14px; line-height: 1.55; }
  .intro-aside { display: none; }

  .journey-grid { display: flex; flex-direction: column; gap: 14px; }
  .journey-grid .next-card { order: -1; min-height: 240px; padding: 22px; }
  .journey-grid .zone-emblem { margin: 16px 0 11px; width: 42px; height: 42px; }
  .journey-grid .next-card h2 { font-size: 24px; }
  .journey-grid .next-card p { max-width: none; font-size: 13px; line-height: 1.55; }
  .journey-grid .next-meta { margin: 11px 0 16px; }
  .journey-grid .primary-button { min-height: 52px; font-size: 14px; }
  .journey-grid .map-card { min-height: 255px; }
  .journey-grid .pavilion { height: 228px; margin-top: 11px; }

  .collection-section { margin-top: 29px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: 18px; }
  .progress-info { flex-direction: column; align-items: flex-end; gap: 6px; font-size: 11px; white-space: nowrap; }
  .progress-track { width: 74px; }
  .zone-cards { gap: 12px; }
  .zone-card { min-height: 168px; padding: 14px; }
  .zone-card h3 { font-size: 15px; }
  .zone-card .zone-tagline { font-size: 11px; line-height: 1.35; }
  .zone-card-status { font-size: 8px; }
  .zone-card-icon { width: 40px; height: 40px; margin: 15px 0 11px; }
  .reward-teaser { align-items: flex-start; padding: 17px; }
  .reward-teaser h3 { font-size: 13px; }
  .reward-teaser p { font-size: 12px; line-height: 1.45; }
  .reward-teaser .reward-end { align-self: center; min-width: 24px; }
  .audio-teaser { min-height: 84px; }

  .map-page-grid { display: flex; flex-direction: column; }
  .map-page-grid .map-guide { order: -1; }
  .map-page-grid .map-card { min-height: 315px; }
  .map-page-grid .pavilion { height: 280px; }
  .map-list-button { min-height: 68px; }
  .map-list-button strong { font-size: 14px; }
  .map-list-button small { font-size: 12px; }

  .passport-book { padding: 22px 20px; }
  .passport-book h2 { font-size: 23px; }
  .passport-stamps { gap: 10px; }
  .passport-slot { min-height: 136px; }
  .passport-slot button { min-height: 44px; padding: 8px; font-size: 11px; }
  .passport-slot .seal { width: min(102px, 77%); height: auto; aspect-ratio: 1; }
  .reward-box p, .feedback-card p { font-size: 13px; }

  .mobile-nav { padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); gap: 2px; }
  .mobile-nav button { flex: 1; min-width: 0; min-height: 55px; padding: 6px 1px; font-size: 10px; border-radius: 11px; }
  .mobile-nav button.active { background: #eef2ff; }
  .mobile-nav button .icon { width: 22px; height: 22px; }
  .site-footer { display: none; }

  .stamp-dialog, .info-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .stamp-dialog-inner { padding: 20px 22px 28px; }
  .stamp-dialog .dialog-close, .info-dialog .dialog-close { min-width: 44px; min-height: 44px; }
  .stamp-dialog h2 { font-size: 26px; }
  .scanner { height: min(34dvh, 260px); min-height: 210px; }
  .stamp-dialog .primary-button, .info-dialog .primary-button { min-height: 52px; font-size: 14px; }
  .info-dialog { padding: 28px 22px; overflow-y: auto; }

  .companion-intro { padding: 25px 22px; }
  .companion-intro h1 { font-size: 35px; }
  .companion-intro p { font-size: 14px; line-height: 1.55; }
  .companion-intro-actions .primary-button { min-height: 54px; font-size: 14px; }
  .companion-visual { height: 172px; margin-top: 16px; }
  .visual-screen { transform: rotate(-7deg) scale(.83); transform-origin: top left; }
  .visual-phone { transform: rotate(10deg) scale(.83); transform-origin: bottom right; }
  .companion-status { font-size: 12px; line-height: 1.45; }
  .program-row { gap: 12px; }
  .program-details p { font-size: 12px; line-height: 1.45; }
  .program-actions { gap: 8px; margin-top: 12px; }
  .program-actions button, .program-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid #dbe4ef; border-radius: 9px; font-size: 12px; text-decoration: none; }
  .camera-stage { aspect-ratio: 4/3; }
  .scan-panel-head .secondary-button { min-height: 44px; }
  .camera-controls input { width: min(42vw, 150px); }
  .audio-transcript p { font-size: 19px; }
  .player-actions .primary-button { min-height: 50px; }
  .player-actions .text-button { min-height: 44px; }
  .companion-dock { bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 9px; gap: 8px; }
  .companion-dock button { width: 44px; height: 44px; }
  .dock-copy strong { font-size: 13px; }
  .dock-copy small { font-size: 11px; }
}

@media (max-width: 360px) {
  main { padding-left: 16px; padding-right: 16px; }
  .site-header { padding: 0 16px; }
  .map-status { display: none; }
  .zone-card { padding: 12px; }
  .zone-card-top { align-items: flex-start; gap: 3px; }
  .zone-card-status { font-size: 7px; padding: 4px; }
  .passport-slot { min-height: 124px; }
  .companion-visual { height: 155px; }
}