/* Ask Ram Ji — production styles. Mobile-first. */
:root{
  --ivory:#fdf6ea; --ivory-deep:#f6ead6;
  --ink:#2b1a12; --ink-soft:#5c4636;
  --maroon:#6b1f1f; --maroon-deep:#3d1215; --night:#200e10;
  --saffron:#e07b2a; --gold:#c9a24b; --gold-bright:#f0d089;
  --serif:'Noto Serif Devanagari',Georgia,serif;
  --sans:'Noto Sans Devanagari',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:var(--maroon-deep);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* ---------- deck: discrete swipe screens ---------- */
.deck{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.screen{min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;position:relative;overflow:hidden}

/* ---------- language toggle ---------- */
.lang-toggle{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:50;
  display:flex;background:rgba(0,0,0,.28);border:1px solid rgba(201,162,75,.45);
  border-radius:999px;padding:3px;backdrop-filter:blur(8px)}
.lang-toggle button{border:0;background:transparent;color:#e9dcc4;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:999px;transition:all .25s var(--ease)}
.lang-toggle button.active{background:var(--gold);color:#3d1215}

/* ---------- SCREEN 1 · hero ---------- */
.screen-hero{background:
  radial-gradient(120% 90% at 50% 0%,#fffdf7 0%,var(--ivory) 55%,var(--ivory-deep) 100%);
  align-items:center;justify-content:center;text-align:center;padding:24px}
.screen-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 40% at 50% 108%,rgba(224,123,42,.18),transparent 70%)}
.hero-inner{max-width:560px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-mark{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--gold);color:var(--maroon);
  font-family:var(--serif);font-size:34px;font-weight:700;line-height:1;
  background:radial-gradient(circle at 35% 30%,#fffdf7,#f3e3c2);
  box-shadow:0 6px 24px rgba(107,31,31,.14),inset 0 0 0 5px rgba(201,162,75,.18)}
/* Optical centering for the श्री medallion.
   Measured at 390px CSS / 3x with the real Noto Serif Devanagari webfont, comparing the
   glyph's ink box against the ring:
     translateX(0)     -> ink centre +2.00 CSS px right of centre (gap L 83 / R 71 px)
     translateX(-.05em)-> ink centre +0.33 CSS px  (gap L 78 / R 76 px)  <- near perfect
     translateY(-1px)  -> ink top gap 47px vs bottom gap 113px           <- 22 CSS px high
     translateY(10px)  -> ink top gap 80px vs bottom gap 80px            <- balanced
   The glyph's ascenders sit high in its em box, so centering the LAYOUT BOX leaves the
   INK visually high. The horizontal nudge alone cannot fix that: it only corrects the
   ~2px side-bearing offset. Both axes are needed for the glyph to read as centered. */
.hero-mark span{transform:translateX(-0.05em) translateY(10px)}
.hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(30px,7vw,44px);
  color:var(--maroon-deep);letter-spacing:.01em}
.hero-sub{font-family:var(--serif);font-size:clamp(17px,4.4vw,21px);color:var(--saffron);font-weight:600}
.hero-promise{font-size:clamp(14px,3.9vw,17px);line-height:1.75;color:var(--ink-soft);max-width:44ch}
.hero-foot{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px}
.cta-float{border:0;border-radius:999px;padding:16px 44px;font-size:17px;font-weight:700;
  color:#fff8ea;background:linear-gradient(135deg,var(--maroon),#8f2b2b);
  display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 30px rgba(107,31,31,.35),0 0 0 0 rgba(224,123,42,.5);
  animation:floaty 3.2s ease-in-out infinite,breathe 3.2s ease-in-out infinite}
.cta-float .cta-arrow{font-size:15px;animation:nudge 1.6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes breathe{0%,100%{box-shadow:0 10px 30px rgba(107,31,31,.35),0 0 0 0 rgba(224,123,42,.45)}
  50%{box-shadow:0 14px 34px rgba(107,31,31,.4),0 0 0 14px rgba(224,123,42,0)}}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.cta-float:active{transform:scale(.97)}
.quiet-link{background:none;border:0;color:var(--ink-soft);font-size:14px;
  text-decoration:underline;text-underline-offset:4px;opacity:.85}

/* ---------- SCREEN 2 · ritual (night) ---------- */
.screen-ritual{background:
  radial-gradient(130% 100% at 50% -10%,#54201f 0%,var(--maroon-deep) 45%,var(--night) 100%);
  color:#f4e8d2;align-items:center;justify-content:center;padding:24px 18px}
.screen-ritual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 34% at 50% 50%,rgba(224,123,42,.10),transparent 70%)}
.phase{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;
  gap:22px;animation:phaseIn .8s var(--ease)}
@keyframes phaseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.meditate-line{font-family:var(--serif);font-size:clamp(21px,5.6vw,28px);line-height:1.9;
  text-align:center;font-weight:500}
.timer-wrap{position:relative;width:min(58vw,210px);aspect-ratio:1}
.timer-ring{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:rgba(201,162,75,.18)}
.ring-fg{stroke:var(--gold-bright);stroke-dasharray:326.7;stroke-dashoffset:0;
  filter:drop-shadow(0 0 8px rgba(240,208,137,.7))}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.timer-num{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--gold-bright)}
.timer-sub{font-size:14px;letter-spacing:.14em;color:#d9c49a}
.meditate-hint{font-size:14px;color:#cbb27f;letter-spacing:.06em}

/* grid */
.grid-prompt{font-family:var(--serif);font-size:clamp(16px,4.4vw,20px);text-align:center;color:#f0dfb8}
.grid{width:100%;max-width:430px;display:grid;grid-template-columns:repeat(15,1fr);gap:3px;
  padding:12px;border-radius:16px;background:rgba(0,0,0,.28);
  border:1px solid rgba(201,162,75,.3);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cell{aspect-ratio:1;border:0;border-radius:6px;background:rgba(201,162,75,.10);
  color:#e8d5a8;font-family:var(--serif);font-size:clamp(11px,3.4vw,16px);line-height:1;
  display:grid;place-items:center;transition:transform .3s var(--ease),background .3s,box-shadow .3s;
  padding:0}
.cell:active{transform:scale(1.25)}
.cell.lit{background:radial-gradient(circle at 50% 40%,#ffe9b0,var(--saffron));
  color:#3d1215;font-weight:700;transform:scale(1.22);
  box-shadow:0 0 14px rgba(240,208,137,.9);z-index:2}
.cell.start{outline:2px solid var(--gold-bright);outline-offset:1px}
.grid-note{font-size:12.5px;color:#a98f63;letter-spacing:.04em;text-align:center}

/* reveal */
.verdict-badge{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.1em;
  color:#3d1215;background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  padding:9px 26px;border-radius:999px;box-shadow:0 6px 20px rgba(201,162,75,.4)}
.chaupai-card{width:100%;background:linear-gradient(180deg,#fffdf7,#f8ecd4);
  color:var(--ink);border-radius:20px;padding:28px 24px;text-align:center;
  border:1px solid rgba(201,162,75,.55);box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:riseIn 1s var(--ease)}
@keyframes riseIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
.chaupai-dev{font-family:var(--serif);font-size:clamp(19px,5.2vw,25px);line-height:2;
  font-weight:600;color:var(--maroon-deep);margin-bottom:12px}
.chaupai-translit{font-size:13.5px;font-style:italic;color:var(--ink-soft);line-height:1.7;margin-bottom:10px}
.chaupai-meaning{font-size:15px;line-height:1.8;color:var(--ink)}
.result-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.btn{border-radius:999px;padding:14px 22px;font-size:15px;font-weight:700;text-align:center;
  text-decoration:none;display:block;transition:transform .2s var(--ease);border:0;width:100%}
.btn:active{transform:scale(.97)}
.btn-wa{background:#1faa55;color:#fff;box-shadow:0 8px 22px rgba(31,170,85,.35)}
.btn-ghost{background:transparent;color:var(--gold-bright);border:1.5px solid rgba(201,162,75,.6)}
.btn-quiet{background:none;border:0;color:#a98f63;font-size:14px;font-weight:500;
  text-decoration:underline;text-underline-offset:4px}
.bridge{font-size:13.5px;color:#cbb27f;text-align:center;max-width:320px;line-height:1.7}
.bridge a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid rgba(240,208,137,.5)}

/* ---------- SCREEN 3 · info ---------- */
.screen-info{background:var(--ivory);padding:56px 22px 40px;align-items:center;justify-content:flex-start}
.info-inner{max-width:600px;width:100%;display:flex;flex-direction:column;gap:18px}
.screen-info h2{font-family:var(--serif);color:var(--maroon-deep);font-size:24px;margin-top:8px}
.info-cards{display:flex;flex-direction:column;gap:12px}
.info-card{background:#fffdf7;border:1px solid rgba(201,162,75,.4);border-radius:16px;
  padding:18px 20px;box-shadow:0 6px 18px rgba(107,31,31,.07)}
.info-card h3{font-family:var(--serif);color:var(--saffron);font-size:16px;margin-bottom:6px;letter-spacing:.08em}
.info-card p{font-size:14.5px;line-height:1.8;color:var(--ink-soft)}
.vidhi{list-style:none;display:flex;flex-direction:column;gap:10px}
.vidhi li{display:flex;gap:14px;align-items:flex-start;
  background:#fffdf7;border:1px solid rgba(201,162,75,.35);border-radius:14px;padding:14px 16px;
  font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.vidhi-num{flex:0 0 30px;height:30px;border-radius:50%;
  background:var(--maroon);color:#f6ead6;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:15px}
.site-foot{margin-top:14px;padding-top:18px;border-top:1px solid rgba(107,31,31,.15);
  font-size:13px;color:var(--ink-soft);text-align:center;line-height:2}
.site-foot a{color:var(--maroon);text-decoration:none;font-weight:600}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .result-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:560px}
  .result-actions .btn{width:auto;flex:1 1 200px}
  .info-cards{flex-direction:row}
  .info-card{flex:1}
  .hero-title{font-size:52px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .deck{scroll-behavior:auto}
}