/* ============================================
   TOUR RESPONSIVE — Media queries for tour
   ============================================ */

@media (max-width: 768px) {
  :root {
    --toolbar-h: 50px;
    --thumb-h: 76px;
    --header-h: 50px;
  }

  .tour-header { padding: 0 1rem; }
  .tour-scene-name { font-size: 1rem; }
  .tour-back { font-size: 0; gap: 0; }
  .tour-back svg { width: 20px; height: 20px; }

  .tour-compass { width: 40px; height: 40px; right: 1rem; }

  .tour-info-panel {
    width: 100%;
    max-height: 50vh;
    top: auto;
    bottom: calc(var(--toolbar-h) + var(--thumb-h));
    border-left: none;
    border-top: 1px solid var(--c-line);
  }

  .tour-thumbnails {
    justify-content: flex-start;
    padding: 0.4rem 0.75rem;
    gap: 0.35rem;
  }
  .thumb-image { width: 56px; height: 34px; }
  .thumb-label { font-size: 0.5rem; }

  .toolbar-btn { width: 36px; height: 36px; }
  .toolbar-btn svg { width: 16px; height: 16px; }
  .toolbar-separator { margin: 0 0.25rem; height: 20px; }

  .tour-hint {
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    bottom: calc(var(--toolbar-h) + var(--thumb-h) + 1rem);
  }
  .hint-item { font-size: 0.55rem; }
  .hotspot-card { width: 300px; }
}

@media (max-width: 480px) {
  .toolbar-group { gap: 0; }
  .toolbar-separator { margin: 0 0.15rem; }
  .toolbar-btn { width: 32px; height: 32px; }
  .tour-hint { flex-direction: column; gap: 0.4rem; border-radius: 12px; }
}