/* ---------- Phone ---------- */
@media (max-width: 680px) {
  .logo { padding: 8px 12px 9px; }
  .logo-name { font-size: 16px; }
  .logo-sub { font-size: 9px; letter-spacing: .1em; }
  .qbtn .t { display: none; }
  .qbtn { padding: 0; width: 36px; height: 36px; justify-content: center; }
  .quick, .topleft { gap: 4px; }
  .ach-btn { width: auto; padding: 0 8px; gap: 5px; }
  .ach-btn b { font-size: 10px; }
  .ach-panel { top: calc(64px + var(--safe-t)); }
  .mini-ring { width: 112px; height: 112px; padding: 4px; }
  .mini-label { padding: 6px 8px; gap: 6px; font-size: 9.5px; }
  .bottombar { grid-template-columns: auto 1fr; }
  .tutorial { display: none; }
  .prompts { justify-items: end; align-self: end; }
  .prompt-list { display: none; }
  .coords { display: none; }
  .zone-title { font-size: 72px; }
  #inspect { top: auto; width: 100%; height: 76%; border-left: 0; border-top: 1px solid var(--hud-line); border-radius: 20px 20px 0 0;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(16px + var(--safe-b)) max(16px, env(safe-area-inset-left, 0px)); transform: translateY(104%); }
  .ins-hero { height: 170px; }
  .ins-title { font-size: 28px; }
  .param { grid-template-columns: 92px 1fr 40px; }
  .toasts { top: calc(66px + var(--safe-t)); width: calc(100vw - 32px); }
  .toast.achievement { grid-template-columns: 46px 1fr; gap: 12px; }
  .t-ico { width: 46px; height: 46px; }
  .toast.achievement strong { font-size: 18px; }
  /* info cards are read in the bottom sheet: say so on the map */
  .card-info::after {
    content: "Tocca per leggere"; position: absolute; right: 14px; bottom: 14px; padding: 9px 14px; border-radius: 10px;
    background: var(--accent); color: var(--accent-ink); font: 700 20px/1 var(--f-mono); letter-spacing: .04em; pointer-events: none;
  }
  #world.far .card-info::after { opacity: 1; }
  #inspect { overscroll-behavior: contain; }
  .toast:not(:last-child) { display: none; } /* one notification at a time on a small screen */
  .ins-foot { grid-template-columns: 1fr auto 1fr; }
  .ins-step { padding: 9px 10px; font-size: 12px; }
  .ins-step span { white-space: nowrap; text-overflow: ellipsis; }
  .lightbox { padding: 16px 8px 70px; }
  .lb-nav { width: 44px; height: 44px; margin-top: -22px; }
  .legend-card { padding: 40px 18px 18px; }
  .legend-card h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (max-width: 480px) {
  .topbar { gap: 8px; }
  .logo { padding: 8px 10px; }
  .logo-name { font-size: 14px; }
  .logo-sub { display: none; }
  .qbtn, .ach-btn { width: 34px; height: 34px; padding: 0; }
  .ach-btn b { display: none; }
}