/* ═══════════════════════════════════════════════════════════════
   responsive.css — Responsive breakpoints & scrollbar
   - Mobile layout adjustments (max-width: 640px)
   - Custom scrollbar styling
   ═══════════════════════════════════════════════════════════════ */

  /* ─── Responsive ─── */
  @media (max-width: 640px) {
    .app { padding: 12px 10px 60px; }
    .logo { font-size: 22px; }
    .room-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .achievements-grid { grid-template-columns: 1fr; }
    .stat-pill { font-size: 12px; padding: 6px 12px; }
    .spinner-overlay { padding-top: 46px; padding-bottom: 30px; }
    .spinner-overlay .sp-title { font-size: 18px; margin-bottom: 10px; }
    #spinnerCanvas { width: 220px; height: 220px; }
    .spin-btn { padding: 10px 30px; font-size: 15px; margin-bottom: 10px; }
    .spin-reveal-emoji { font-size: 36px; }
    .spin-result .sr-task { font-size: 15px; }
    .spin-result .sr-go { padding: 10px 24px; font-size: 13px; }
  }

  /* ─── Short viewport (mobile with browser chrome) ─── */
  @media (max-height: 640px) and (max-width: 640px) {
    .spinner-overlay { padding-top: 36px; }
    .spinner-overlay .sp-title { font-size: 16px; margin-bottom: 6px; }
    #spinnerCanvas { width: 180px; height: 180px; }
    .wheel-container { margin-bottom: 12px; }
    .wheel-pointer { font-size: 24px; top: -10px; }
    .spin-btn { padding: 8px 24px; font-size: 14px; margin-bottom: 8px; }
    .spin-reveal-emoji { font-size: 28px; margin-bottom: 4px; }
    .spin-reveal-msg { font-size: 12px; }
    .spin-result .sr-task { font-size: 14px; }
    .spin-result .sr-go { padding: 8px 20px; font-size: 12px; margin-top: 8px; }
  }

  /* ─── Scrollbar ─── */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }