/* ============================================================
   RAMA MALA — Sacred Digital Japa
   style.css  (fixed: panels, overlay, mobile-first)
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Theme: Ayodhya (default) ---- */
:root {
  --bg-1: #1a0a00;
  --bg-2: #2e1200;
  --accent: #e87c1e;
  --accent-glow: rgba(232,124,30,0.35);
  --gold: #f5c842;
  --gold-dim: rgba(245,200,66,0.18);
  --bead: #c0622a;
  --bead-done: #6b3010;
  --bead-active: #ffbe6a;
  --bead-glow: rgba(255,190,106,0.7);
  --text: #f5e8d0;
  --text-dim: rgba(245,232,208,0.55);
  --surface: rgba(255,140,60,0.08);
  --border: rgba(232,124,30,0.22);
  --ring-color: #e87c1e;
  --mantra-color: #ffd580;
  --particle-color: rgba(255,200,80,0.45);
  --panel-bg: #1e0d02;
}

body.theme-himalaya {
  --bg-1:#0d1b2a; --bg-2:#162d45; --accent:#7eb8e0;
  --accent-glow:rgba(126,184,224,0.3); --gold:#b8d9f0;
  --gold-dim:rgba(184,217,240,0.15); --bead:#4a86a8;
  --bead-done:#1e4d6b; --bead-active:#aedcf5;
  --bead-glow:rgba(174,220,245,0.7); --text:#e4f0fb;
  --text-dim:rgba(228,240,251,0.5); --surface:rgba(100,180,220,0.07);
  --border:rgba(126,184,224,0.2); --ring-color:#7eb8e0;
  --mantra-color:#cce9ff; --particle-color:rgba(180,220,255,0.35);
  --panel-bg:#0d1b2a;
}
body.theme-amoled {
  --bg-1:#000; --bg-2:#0a0a0a; --accent:#b388ff;
  --accent-glow:rgba(179,136,255,0.3); --gold:#e1d5ff;
  --gold-dim:rgba(225,213,255,0.12); --bead:#6a4fb3;
  --bead-done:#2e1f60; --bead-active:#d0b8ff;
  --bead-glow:rgba(208,184,255,0.7); --text:#f0ecff;
  --text-dim:rgba(240,236,255,0.5); --surface:rgba(130,80,255,0.07);
  --border:rgba(179,136,255,0.2); --ring-color:#b388ff;
  --mantra-color:#d8c8ff; --particle-color:rgba(200,170,255,0.3);
  --panel-bg:#060310;
}
body.theme-golden {
  --bg-1:#1c1400; --bg-2:#2e2000; --accent:#f5c842;
  --accent-glow:rgba(245,200,66,0.35); --gold:#fff0a0;
  --gold-dim:rgba(255,240,160,0.18); --bead:#c8a800;
  --bead-done:#6b5800; --bead-active:#ffe870;
  --bead-glow:rgba(255,232,112,0.8); --text:#fff8dc;
  --text-dim:rgba(255,248,220,0.55); --surface:rgba(245,200,66,0.08);
  --border:rgba(245,200,66,0.25); --ring-color:#f5c842;
  --mantra-color:#ffe870; --particle-color:rgba(255,220,50,0.4);
  --panel-bg:#1c1400;
}
body.theme-white {
  --bg-1:#f5f0ea; --bg-2:#ede4d8; --accent:#8b5e3c;
  --accent-glow:rgba(139,94,60,0.2); --gold:#6b3a1f;
  --gold-dim:rgba(107,58,31,0.12); --bead:#a0714a;
  --bead-done:#c8a882; --bead-active:#6b3a1f;
  --bead-glow:rgba(107,58,31,0.5); --text:#2c1a0e;
  --text-dim:rgba(44,26,14,0.55); --surface:rgba(139,94,60,0.08);
  --border:rgba(139,94,60,0.2); --ring-color:#8b5e3c;
  --mantra-color:#4a2c10; --particle-color:rgba(139,94,60,0.2);
  --panel-bg:#f0ebe4;
}
body.theme-ganga {
  --bg-1:#001a1a; --bg-2:#002828; --accent:#00c8c8;
  --accent-glow:rgba(0,200,200,0.3); --gold:#80ffee;
  --gold-dim:rgba(128,255,238,0.15); --bead:#008080;
  --bead-done:#003838; --bead-active:#60ffe8;
  --bead-glow:rgba(96,255,232,0.7); --text:#d0fffa;
  --text-dim:rgba(208,255,250,0.5); --surface:rgba(0,180,180,0.07);
  --border:rgba(0,200,200,0.2); --ring-color:#00c8c8;
  --mantra-color:#80ffee; --particle-color:rgba(0,220,200,0.35);
  --panel-bg:#001a1a;
}

/* ---- Base ---- */
html { height: 100%; }
body {
  min-height: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
  transition: background 0.6s, color 0.6s;
}

/* ---- Intro Screen ---- */
#intro-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg-1) 100%);
  animation: introFadeOut 3.2s ease forwards;
}
@keyframes introFadeOut {
  0%,65% { opacity:1; pointer-events:all; }
  100%   { opacity:0; pointer-events:none; }
}
.intro-aura {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
  animation: auraPulse 2s ease-in-out infinite;
}
.intro-content {
  position: relative; text-align: center;
  animation: introRise 0.9s ease forwards;
}
@keyframes introRise {
  from { transform:translateY(24px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.intro-om {
  font-size: clamp(5rem, 22vw, 9rem);
  color: var(--gold);
  text-shadow: 0 0 60px var(--accent-glow), 0 0 120px var(--accent-glow);
  line-height: 1;
  animation: omGlow 2s ease-in-out infinite alternate;
}
@keyframes omGlow {
  from { text-shadow: 0 0 40px var(--accent-glow); }
  to   { text-shadow: 0 0 80px var(--accent-glow), 0 0 140px var(--accent-glow); }
}
.intro-title    { font-size:clamp(1.5rem,6vw,2.2rem); letter-spacing:0.22em; color:var(--text); margin-top:0.5rem; font-weight:300; }
.intro-subtitle { font-size:clamp(0.7rem,3vw,0.95rem); letter-spacing:0.3em; color:var(--text-dim); margin-top:0.25rem; text-transform:uppercase; }

/* ---- Particle Canvas ---- */
#particle-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---- Light Rays ---- */
.light-rays { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ray { position:absolute; top:-20%; width:2px; height:140%; background:linear-gradient(to bottom,var(--accent-glow),transparent); opacity:0.3; transform-origin:top center; animation:raySwing 8s ease-in-out infinite; }
.ray-1 { left:30%; transform:rotate(-12deg); animation-delay:0s; }
.ray-2 { left:50%; transform:rotate(0deg);   animation-delay:2s; }
.ray-3 { left:70%; transform:rotate(12deg);  animation-delay:4s; }
@keyframes raySwing { 0%,100%{opacity:0.2} 50%{opacity:0.45} }

/* ---- App Shell ---- */
#app {
  position: relative; z-index: 10;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}
#app.hidden { display: none; }

/* ---- Header ---- */
#app-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 8px;
  flex-shrink: 0;
}
.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px; height: 44px;
  min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  transition: background 0.2s, transform 0.15s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:active { transform: scale(0.9); background: var(--accent-glow); }
.header-center { display:flex; align-items:center; gap:8px; font-size:1rem; letter-spacing:0.15em; color:var(--text-dim); }
.header-om    { color:var(--gold); font-size:1.25rem; }
.header-title { font-weight:300; letter-spacing:0.2em; }

/* ---- Streak Banner ---- */
#streak-banner {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 7px 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: clamp(0.72rem,3vw,0.85rem);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.streak-fire { font-size: 0.95rem; }
.streak-divider { opacity: 0.35; }

/* ---- Mantra Section ---- */
#mantra-section {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 0 6px;
  flex-shrink: 0;
}
#mantra-aura {
  position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  animation: auraPulse 4s ease-in-out infinite;
}
@keyframes auraPulse { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
#mantra-text {
  font-family: 'Noto Sans Devanagari','Cormorant Garamond',serif;
  font-size: clamp(2.2rem, 11vw, 4.5rem);
  font-weight: 400;
  color: var(--mantra-color);
  text-align: center;
  text-shadow: 0 0 30px var(--accent-glow), 0 2px 20px rgba(0,0,0,0.4);
  letter-spacing: 0.05em;
  line-height: 1.2;
  transition: opacity 0.35s, transform 0.35s;
  padding: 0 8px;
  word-break: break-word;
}
#mantra-text.mantra-breathe { animation: mantraBreathe 5s ease-in-out infinite; }
@keyframes mantraBreathe {
  0%,100% { transform:scale(1);    text-shadow:0 0 20px var(--accent-glow); }
  50%     { transform:scale(1.04); text-shadow:0 0 50px var(--accent-glow),0 0 80px var(--accent-glow); }
}
#mantra-text.mantra-flash { animation: mantraFlash 0.3s ease; }
@keyframes mantraFlash {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.7;transform:scale(1.07)}
}
#mantra-transliteration {
  font-size: clamp(0.7rem,3vw,0.9rem);
  letter-spacing: 0.28em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---- Mala Container ---- */
#mala-container {
  position: relative;
  width: min(300px, 82vw);
  height: min(300px, 82vw);
  margin: 4px auto;
  flex-shrink: 0;
}
#progress-ring-container {
  position: absolute; inset: -8px; pointer-events: none;
}
#progress-ring { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg  { fill:none; stroke:var(--border); stroke-width:3; }
.ring-fill {
  fill: none; stroke: var(--ring-color); stroke-width: 3;
  stroke-linecap: round; stroke-dasharray: 930; stroke-dashoffset: 930;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4,0,0.2,1);
  filter: drop-shadow(0 0 4px var(--accent));
}
#mala-canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; }

/* ---- Count Display ---- */
#count-display {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
#count-number {
  font-size: clamp(2.4rem,11vw,3.6rem);
  font-weight: 600; color: var(--gold); line-height: 1;
  text-shadow: 0 0 20px var(--accent-glow);
}
#count-number.pop { animation: countPop 0.25s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes countPop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }
#count-label { font-size:0.72rem; letter-spacing:0.18em; color:var(--text-dim); margin-top:4px; }

/* ---- Tap Zone ---- */
#tap-zone {
  position: relative;
  width: min(200px, 58vw);
  height: 56px;
  margin: 4px auto 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 40px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--text-dim);
  font-family: inherit;
  letter-spacing: 0.14em;
  font-size: 0.88rem;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.2s;
}
#tap-zone:active { transform:scale(0.95); box-shadow:0 0 20px var(--accent-glow); }
.tap-hint { pointer-events:none; position:relative; z-index:1; }
.tap-ripple {
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at center,var(--accent-glow) 0%,transparent 70%);
  opacity:0; transition:opacity 0.3s;
}
#tap-zone:active .tap-ripple { opacity:1; }

/* ---- Mala Info Row ---- */
#mala-info-row {
  width: 100%;
  display: flex; justify-content: space-around;
  padding: 6px 0 4px;
  flex-shrink: 0;
}
.info-cell { text-align: center; }
.info-value { font-size:clamp(1.2rem,6vw,1.6rem); font-weight:600; color:var(--gold); line-height:1; text-shadow:0 0 10px var(--accent-glow); }
.info-label { font-size:0.65rem; letter-spacing:0.18em; color:var(--text-dim); text-transform:uppercase; margin-top:3px; }
.info-cell-center .info-value { color:var(--text); }

/* ---- Action Bar ---- */
#action-bar {
  width: 100%;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-top: auto;
  flex-shrink: 0;
}
.action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
  font-family: inherit;
  font-size: clamp(0.6rem,2.5vw,0.7rem);
  letter-spacing: 0.06em;
  min-width: 56px;
}
.action-btn svg { width:20px; height:20px; flex-shrink:0; }
.action-btn:hover, .action-btn.active { color:var(--accent); background:var(--accent-glow); }
.action-btn:active { transform: scale(0.88); }

/* ---- Breathing Guide ---- */
#breathe-guide {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
}
#breathe-guide.hidden { display:none; }
#breathe-circle {
  width: clamp(140px,50vw,200px); height: clamp(140px,50vw,200px);
  border-radius: 50%;
  background: radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size:1rem; color:var(--text); letter-spacing:0.1em;
  animation: breatheIn 4s ease-in-out infinite;
}
@keyframes breatheIn { 0%,100%{transform:scale(0.8);opacity:0.7} 50%{transform:scale(1.2);opacity:1} }
#btn-breathe-close {
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); padding:12px 28px; border-radius:30px;
  cursor:pointer; font-family:inherit; letter-spacing:0.1em; font-size:0.9rem;
}

/* ---- Petals ---- */
#petals-container { position:fixed; inset:0; pointer-events:none; z-index:800; overflow:hidden; }
.petal { position:absolute; top:-40px; font-size:1.4rem; animation:petalFall linear forwards; pointer-events:none; }
@keyframes petalFall { 0%{transform:translateY(0) rotate(0);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:0} }

/* ---- Completion Popup ---- */
#completion-popup {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#completion-popup.hidden { display:none; }
.completion-inner {
  background: linear-gradient(145deg,var(--bg-2),var(--bg-1));
  border: 1px solid var(--accent);
  border-radius: 24px;
  padding: clamp(24px,6vw,40px) clamp(20px,5vw,32px);
  text-align: center;
  width: 100%; max-width: 340px;
  box-shadow: 0 0 60px var(--accent-glow), 0 20px 60px rgba(0,0,0,0.4);
  animation: popupRise 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popupRise { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.completion-om { font-size:3rem; color:var(--gold); text-shadow:0 0 30px var(--accent-glow); margin-bottom:10px; animation:omGlow 2s ease-in-out infinite alternate; }
.completion-inner h2 { font-size:clamp(1.4rem,5vw,1.8rem); font-weight:300; letter-spacing:0.1em; color:var(--text); margin-bottom:6px; }
.completion-inner p  { color:var(--text-dim); font-size:0.9rem; letter-spacing:0.04em; margin-bottom:12px; }
.completion-count { font-size:3.5rem; font-weight:600; color:var(--gold); text-shadow:0 0 20px var(--accent-glow); line-height:1; margin-bottom:20px; }
.completion-inner button {
  display:block; width:100%; padding:13px;
  border-radius:30px; border:none; cursor:pointer;
  font-family:inherit; font-size:0.95rem; letter-spacing:0.08em;
  margin-top:10px; transition:transform 0.15s;
}
.completion-inner button:active { transform:scale(0.96); }
#btn-completion-share  { background:var(--accent); color:#fff; box-shadow:0 4px 20px var(--accent-glow); }
#btn-completion-continue { background:var(--surface); border:1px solid var(--border); color:var(--text); }

/* ---- Share Popup ---- */
#share-popup {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#share-popup.hidden { display:none; }
.share-inner {
  background: linear-gradient(145deg,var(--bg-2),var(--bg-1));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  width: 100%; max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.share-inner h3 { font-size:1.2rem; font-weight:300; letter-spacing:0.1em; color:var(--text); margin-bottom:14px; }
#share-canvas { border-radius:12px; max-width:100%; display:block; margin:0 auto 14px; box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.share-inner button {
  display:block; width:100%; padding:12px;
  border-radius:30px; border:none; cursor:pointer;
  font-family:inherit; font-size:0.92rem; letter-spacing:0.07em;
  margin-top:10px; transition:transform 0.15s;
}
.share-inner button:active { transform:scale(0.96); }
#btn-download-share { background:var(--accent); color:#fff; box-shadow:0 4px 16px var(--accent-glow); }
#btn-share-close    { background:var(--surface); border:1px solid var(--border); color:var(--text); }

/* ============================================================
   PANELS — slide-up sheets, z-index above overlay (1000)
   ============================================================ */
/* Overlay: dark dim only, NO blur */
#overlay {
  position: fixed; inset: 0;
  z-index: 900;   /* below panels (1000) but above app (10) */
  background: rgba(0,0,0,0.55);
  /* NO backdrop-filter here — that's what was blurring panels */
}
#overlay.hidden { display: none; }

.panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 100vw);
  max-height: 88dvh;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  z-index: 1000;   /* above overlay */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(env(safe-area-inset-bottom,0px), 20px);
}
.panel.hidden { display: none; }

/* Drag handle hint */
.panel::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin: 10px auto 0;
}

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--panel-bg);
  z-index: 2;
}
.panel-header h2 { font-size:1.2rem; font-weight:300; letter-spacing:0.1em; color:var(--text); }
.panel-close {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50%; width: 34px; height: 34px; min-width: 34px;
  cursor: pointer; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}

/* ---- Stats Panel ---- */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 16px 0; }
.stat-card  { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 10px; text-align:center; }
.stat-icon  { font-size:1.7rem; margin-bottom:6px; }
.stat-value { font-size:1.9rem; font-weight:600; color:var(--gold); text-shadow:0 0 10px var(--accent-glow); }
.stat-label { font-size:0.68rem; letter-spacing:0.14em; color:var(--text-dim); text-transform:uppercase; margin-top:4px; }
.stat-last-session { padding:14px 16px; font-size:0.78rem; color:var(--text-dim); letter-spacing:0.04em; }

/* ---- Settings Panel ---- */
.settings-body { padding:14px 16px 16px; }
.setting-group { margin-bottom:22px; }
.setting-label { display:block; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; }
.theme-grid, .ambient-grid { display:flex; flex-wrap:wrap; gap:8px; }
.theme-chip, .ambient-chip {
  background:var(--surface); border:1px solid var(--border);
  border-radius:30px; padding:8px 14px;
  cursor:pointer; color:var(--text-dim);
  font-family:inherit; font-size:0.82rem;
  transition:background 0.2s,color 0.2s,border-color 0.2s;
  white-space: nowrap;
}
.theme-chip.active, .ambient-chip.active { background:var(--accent-glow); border-color:var(--accent); color:var(--text); }
.setting-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--border);
  font-size:0.88rem; color:var(--text);
}
.setting-range { width:110px; accent-color:var(--accent); cursor:pointer; }
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-knob { position:absolute; inset:0; background:var(--border); border-radius:24px; transition:background 0.3s; }
.toggle-knob::before { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform 0.3s; }
input:checked + .toggle-knob { background:var(--accent); }
input:checked + .toggle-knob::before { transform:translateX(20px); }
.setting-full-btn {
  width:100%; padding:13px;
  border:1px solid var(--border); border-radius:30px;
  background:var(--surface); color:var(--text);
  font-family:inherit; font-size:0.88rem;
  letter-spacing:0.08em; cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
}
.setting-full-btn:hover { background:var(--accent-glow); border-color:var(--accent); }
.setting-full-btn.danger { color:#ff6b6b; border-color:rgba(255,107,107,0.3); }
.setting-full-btn.danger:hover { background:rgba(255,107,107,0.1); }

/* ---- Mantra Panel ---- */
.mantra-list { padding:10px 14px 20px; }
.mantra-option {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:13px 14px;
  border:1px solid var(--border); border-radius:14px;
  background:var(--surface); cursor:pointer;
  margin-bottom:8px; color:var(--text); font-family:inherit;
  transition:background 0.2s,border-color 0.2s;
  text-align: left;
}
.mantra-option.active { border-color:var(--accent); background:var(--accent-glow); }
.mantra-deva  { font-size:1.4rem; font-family:'Noto Sans Devanagari',serif; }
.mantra-roman { font-size:0.8rem; letter-spacing:0.1em; color:var(--text-dim); }
.mantra-custom-row { display:flex; gap:8px; margin-top:10px; }
#custom-mantra-input {
  flex:1; padding:11px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; color:var(--text);
  font-family:inherit; font-size:0.95rem; outline:none;
}
#custom-mantra-input::placeholder { color:var(--text-dim); }
#custom-mantra-input:focus { border-color:var(--accent); }
#btn-set-custom {
  padding:11px 16px; background:var(--accent);
  border:none; border-radius:12px; color:#fff;
  cursor:pointer; font-family:inherit; font-size:0.88rem; white-space:nowrap;
}

/* ---- Voice Button ---- */
.floating-voice-btn {
  position:fixed; bottom:80px; right:16px;
  width:46px; height:46px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:50%; cursor:pointer; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  z-index: 800;
  transition:background 0.2s,color 0.2s,box-shadow 0.2s;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.floating-voice-btn svg { width:20px; height:20px; }
.floating-voice-btn.listening { color:var(--accent); border-color:var(--accent); box-shadow:0 0 20px var(--accent-glow); animation:voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 0%,100%{box-shadow:0 0 10px var(--accent-glow)} 50%{box-shadow:0 0 30px var(--accent-glow)} }
#voice-status {
  position:fixed; bottom:132px; right:10px;
  background:var(--panel-bg); border:1px solid var(--accent);
  border-radius:20px; padding:5px 12px;
  font-size:0.76rem; color:var(--accent); z-index:800; white-space:nowrap;
}
#voice-status.hidden { display:none; }

/* ---- Meditation Mode ---- */
body[data-meditation="true"] #app-header,
body[data-meditation="true"] #streak-banner,
body[data-meditation="true"] #action-bar,
body[data-meditation="true"] .floating-voice-btn,
body[data-meditation="true"] #mala-info-row { display:none !important; }
body[data-meditation="true"] #mantra-section { padding:24px 0 14px; }

/* ---- Utility ---- */
.hidden { display:none !important; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

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

/* ---- Desktop ---- */
@media (min-width:600px) {
  #mala-container { width:360px; height:360px; }
  #mantra-text { font-size:4.5rem; }
}

/* ---- Tall phones — give mala more room ---- */
@media (min-height:750px) {
  #mala-container { width:min(340px,85vw); height:min(340px,85vw); }
}

/* ---- Short phones — compress ---- */
@media (max-height:640px) {
  #mantra-section { padding:4px 0; }
  #mala-container { width:min(240px,75vw); height:min(240px,75vw); }
  #tap-zone { height:48px; }
  #mala-info-row { padding:2px 0; }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}