/* ==========================================================================
   MindCrack — Responsive & Accessibility
   ========================================================================== */

@media (max-width: 380px) {
  .main { padding: 18px 14px 14px; }
  .config-panel { padding: 12px 14px; }
  .btn-primary { max-width: 96px; font-size: 8px; }
  #micBtn { width: 48px; height: 48px; }
  .mood-btn { width: 50px; height: 50px; }
}

@media (max-height: 660px) {
  .candle-scene { margin-bottom: 12px; }
  .header-band { padding: 12px 24px 10px; }
  .main { padding: 14px 20px 12px; }
  .timer-block { margin-bottom: 12px; }
  .config-panel { margin-bottom: 12px; gap: 10px; }
  .controls-row { margin-bottom: 10px; }
}

@media (min-width: 640px) {
  .overlay-inner { padding-top: 40px; }
}

/* ── Respect the OS-level reduced motion preference automatically ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Manual "Calmer motion" toggle in Settings — independent of the OS
   setting, since not everyone knows that setting exists ── */
body.reduced-motion .flame,
body.reduced-motion .flame-wrap,
body.reduced-motion .halo,
body.reduced-motion .flame-glow,
body.reduced-motion .app-title,
body.reduced-motion #timer,
body.reduced-motion #micBtn,
body.reduced-motion #micBtn.active,
body.reduced-motion #micBtn::before,
body.reduced-motion .wave-bar,
body.reduced-motion .vol-mic-status.active {
  animation: none !important;
}
body.reduced-motion #timer { text-shadow: 0 0 8px rgba(255,220,180,0.5); }