@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0e0a08;
  --bg2:#19100c;
  --card:rgba(38,24,17,.72);
  --card2:rgba(25,16,12,.86);
  --gold:#d9ae64;
  --gold2:#f0d08a;
  --cream:#f8edda;
  --muted:#b9a895;
  --line:rgba(240,208,138,.16);
  --shadow:0 30px 90px rgba(0,0,0,.48);
  --accent:#c68b4b;
  --bead:#a87542;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--cream);
  background:
    radial-gradient(circle at 50% -10%, rgba(179,110,43,.20), transparent 34rem),
    radial-gradient(circle at 5% 60%, rgba(103,51,25,.13), transparent 30rem),
    linear-gradient(145deg,var(--bg),#1a100b 55%,#0b0807);
  font-family:Inter,system-ui,sans-serif;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}
button,select{font:inherit}
button{cursor:pointer}
.app-shell{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{
  height:88px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-family:"Cormorant Garamond",serif;font-size:29px;color:#1a100a;
  background:linear-gradient(145deg,#f1d18b,#a56d32);
  box-shadow:0 10px 30px rgba(206,150,76,.18)
}
.brand-title{font-weight:700;letter-spacing:.02em}
.brand-subtitle{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.icon-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  color:var(--cream);background:rgba(255,255,255,.04);font-size:18px
}
.hero{text-align:center;padding:64px 10px 36px}
.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.24em;font-weight:700}
h1{
  margin:12px 0 15px;font-family:"Cormorant Garamond",serif;font-size:clamp(48px,7vw,78px);
  line-height:.93;font-weight:600;letter-spacing:-.025em
}
h1 span{color:var(--gold2)}
.hero p{max-width:650px;margin:auto;color:var(--muted);line-height:1.7;font-size:15px}

.card{
  background:linear-gradient(145deg,rgba(44,28,20,.80),rgba(18,12,9,.90));
  border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);
  backdrop-filter:blur(18px)
}
.controls{padding:25px;display:grid;grid-template-columns:1.15fr 1.35fr .85fr;gap:22px;align-items:end}
.field-group label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#cbb9a3;margin:0 0 9px}
select{
  width:100%;height:50px;padding:0 15px;color:var(--cream);background:#21150f;
  border:1px solid var(--line);border-radius:13px;outline:none
}
select:focus{border-color:rgba(240,208,138,.55)}
.mantra-preview{font-family:"Cormorant Garamond",serif;color:var(--gold2);font-size:17px;margin-top:9px;min-height:22px}
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.style-btn,.count-btn{
  min-height:50px;border:1px solid var(--line);border-radius:13px;color:#d7c7b4;background:rgba(255,255,255,.025);
  transition:.2s ease;position:relative;overflow:hidden
}
.style-btn:hover,.count-btn:hover{transform:translateY(-1px);border-color:rgba(240,208,138,.4)}
.style-btn.active,.count-btn.active{
  border-color:rgba(240,208,138,.7);background:linear-gradient(145deg,rgba(213,165,87,.18),rgba(255,255,255,.03));
  color:#fff1cf;box-shadow:inset 0 0 0 1px rgba(240,208,138,.08)
}
.style-btn:before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;
  background:var(--btn-bead,#a87542);box-shadow:inset 1px 1px 2px rgba(255,255,255,.45)
}
.count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.action-row{grid-column:1/-1;display:flex;gap:10px;padding-top:2px}
.primary-btn,.secondary-btn{height:50px;border-radius:14px;padding:0 22px;border:0;font-weight:700}
.primary-btn{background:linear-gradient(135deg,#e4bf76,#a76f35);color:#1c110a;box-shadow:0 12px 28px rgba(185,124,53,.22)}
.secondary-btn{background:transparent;color:#d9c8b5;border:1px solid var(--line)}
.primary-btn:active,.secondary-btn:active{transform:scale(.98)}

.mala-stage{margin-top:24px;padding:25px 25px 28px;position:relative;overflow:hidden}
.stage-glow{position:absolute;width:500px;height:500px;left:50%;top:35%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(209,160,81,.12),transparent 65%);pointer-events:none}
.mantra-line{text-align:center;font-family:"Cormorant Garamond",serif;font-size:27px;color:#f1d28e;min-height:36px;position:relative;z-index:2}
.mala-wrap{height:600px;max-width:900px;margin:0 auto;position:relative}
#malaSvg{width:100%;height:100%;overflow:visible}
.bead{transition:filter .22s,transform .22s}
.bead.hit{filter:drop-shadow(0 0 12px rgba(248,203,107,.9));}
.guru-bead{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:112px;height:112px;border-radius:50%;z-index:5;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 25%,#ffe3a1 0 4%,#d69d4c 18%,#8a5528 62%,#482615 100%);
  box-shadow:inset -11px -13px 18px rgba(37,17,6,.65),inset 7px 7px 13px rgba(255,240,194,.32),0 18px 42px rgba(0,0,0,.55);
  border:3px solid rgba(250,220,150,.45);transition:.25s ease
}
.guru-bead:after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(232,190,105,.25)}
.guru-core{width:39px;height:39px;border-radius:50%;border:1px solid rgba(255,241,198,.42);display:grid;place-items:center}
.guru-core:after{content:"ॐ";font-family:"Cormorant Garamond",serif;font-size:27px;color:#ffe9ad}
.guru-bead.pulse{animation:guruPulse .38s ease}
@keyframes guruPulse{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
.chant-button{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  width:180px;height:180px;border:0;background:transparent;border-radius:50%;color:transparent;
  outline:none
}
.chant-button:focus-visible{box-shadow:0 0 0 4px rgba(240,208,138,.35)}
.chant-label{position:absolute;left:50%;top:108%;transform:translateX(-50%);width:160px;color:rgba(248,237,218,.55);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.stats{display:grid;grid-template-columns:90px 1fr 90px;gap:22px;align-items:center;max-width:700px;margin:0 auto}
.stat{text-align:center}.stat-label{display:block;color:#9f8e7c;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:3px}.stat strong{font-size:23px;color:#f4d38e}
.progress-track{height:7px;background:rgba(255,255,255,.07);border-radius:20px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#a36b31,#f0d18a);border-radius:20px;transition:width .25s ease}
.progress-caption{display:flex;justify-content:space-between;color:#907f6d;font-size:10px;margin-top:7px}
.complete-message{text-align:center;color:#f0d08a;font-family:"Cormorant Garamond",serif;font-size:22px;min-height:31px;margin-top:14px}

.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.info-card{padding:24px;border:1px solid rgba(240,208,138,.10);background:rgba(255,255,255,.025);border-radius:22px}
.info-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#f0d08a;border:1px solid var(--line);margin-bottom:15px;font-family:"Cormorant Garamond",serif}
.info-card h3{font-family:"Cormorant Garamond",serif;font-size:22px;margin:0 0 7px}
.info-card p{color:#9e8d7a;line-height:1.6;font-size:13px;margin:0}
footer{padding:28px 0 42px;text-align:center;color:#705f4e;font-size:11px;display:flex;justify-content:center;gap:10px}

@media(max-width:900px){
  .controls{grid-template-columns:1fr 1fr}.deity-field{grid-column:1/-1}
  .mala-wrap{height:520px}.info-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .app-shell{width:min(100% - 20px,1180px)}
  .topbar{height:72px}.hero{padding:48px 5px 28px}
  h1{font-size:48px}.controls{grid-template-columns:1fr;padding:18px;border-radius:22px}
  .deity-field{grid-column:auto}.style-grid{grid-template-columns:1fr 1fr 1fr}
  .mala-stage{padding:18px 8px 22px;border-radius:22px}.mala-wrap{height:410px}
  .guru-bead{width:82px;height:82px}.guru-core{width:30px;height:30px}.guru-core:after{font-size:21px}
  .chant-button{width:150px;height:150px}.chant-label{top:107%}
  .stats{grid-template-columns:65px 1fr 65px;gap:8px}
  .style-btn{font-size:11px}.count-btn{font-size:12px}
}

/* Tablet + phone refinements */
@media (max-width: 1024px) {
  .app-shell{width:min(960px,calc(100% - 28px))}
  .hero{padding-top:52px}
  .mala-wrap{height:560px}
}
@media (min-width:621px) and (max-width:820px) {
  .controls{grid-template-columns:1fr 1fr}
  .deity-field{grid-column:1/-1}
  .action-row{grid-column:1/-1}
  .mala-wrap{height:500px}
  .info-grid{grid-template-columns:1fr 1fr}
  .info-card:last-child{grid-column:1/-1}
}
@media (max-width:620px) {
  .hero p{font-size:14px;padding:0 8px}
  .mala-wrap{height:min(108vw,440px);min-height:330px}
  .mantra-line{font-size:23px}
  .chant-button{width:170px;height:170px}
  .chant-label{font-size:10px}
  .stats{margin-top:5px}
  .action-row{flex-direction:column}
  .primary-btn,.secondary-btn{width:100%}
  footer{padding-bottom:28px;flex-wrap:wrap}
}