/* =====================================================
   JAPA MALA DIGITAL
   ===================================================== */

.japa-page{
  background:
	radial-gradient(700px 520px at 50% 18%, rgba(200,98,27,.16), transparent 70%),
	var(--night);
  color:#fff;
  padding:40px 0 88px;
}
.japa-wrap{ max-width:760px; }

.japa-head{ text-align:center; }
.japa-head .migas{ color:var(--muted-invert); margin-bottom:22px; }
.japa-head .kicker{ color:var(--gold); }
.japa-head h1{
  font-family:var(--display);
  font-size:clamp(34px, 6vw, 52px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.japa-lead{
  max-width:520px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  color:var(--muted-invert);
}

.japa-stage{ text-align:center; margin-top:28px; }

/* ---------- El mala ---------- */
.japa-mala{
  position:relative;
  display:block;
  width:min(420px, 100%);
  aspect-ratio:1;
  margin:0 auto;
  padding:0;
  border:none;
  border-radius:50%;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  transition:transform .12s ease;
}
.japa-mala:active{ transform:scale(.985); }
.japa-mala:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
.japa-mala svg{ width:100%; height:100%; overflow:visible; }

.bead{
  fill:rgba(255,255,255,.2);
  transition:fill .25s ease, r .25s ease;
}
.bead.is-done{ fill:var(--gold); }
.bead.is-current{
  fill:#fff;
  r:6.5px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.bead-head{ fill:var(--saffron); }

.japa-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.japa-count{
  font-family:var(--display);
  font-size:clamp(72px, 22vw, 116px);
  font-weight:500;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.japa-of{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-invert);
  margin-top:4px;
}
.japa-round{
  margin-top:14px;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:13px;
  font-weight:500;
}

/* Al cerrar una vuelta, el mala entero late una vez */
.japa-mala.is-round{ animation:japaRound .9s ease; }
@keyframes japaRound{
  0%{ transform:scale(1); filter:none; }
  40%{ transform:scale(1.05); filter:drop-shadow(0 0 28px rgba(201,163,93,.75)); }
  100%{ transform:scale(1); filter:none; }
}
.japa-mala.is-goal .bead-head{ fill:var(--gold); }

/* ---------- Mantra ---------- */
.japa-mantra{
  margin:26px 0 0;
  white-space:nowrap;
  font-family:var(--display);
  font-size:clamp(10px, 3.3vw, 22px);
  line-height:1.6;
  color:rgba(255,255,255,.85);
}
.japa-mantra.is-pulse span{ animation:japaWord .5s ease both; }
.japa-mantra span:nth-child(2n){ animation-delay:.03s; }
@keyframes japaWord{
  0%{ color:#fff; text-shadow:0 0 14px rgba(255,255,255,.7); }
  100%{ color:inherit; text-shadow:none; }
}

.japa-status{
  min-height:24px;
  margin:14px 0 0;
  font-size:15px;
  font-weight:500;
  color:var(--gold);
}

/* ---------- Vueltas del día ---------- */
.japa-progress{
  width:min(420px, 100%);
  height:6px;
  margin:10px auto 0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.japa-progress div{
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--gold);
  transition:width .5s ease;
}
.japa-rounds{
  margin:14px 0 0;
  font-size:15px;
  color:var(--muted-invert);
}
.japa-rounds strong{
  font-family:var(--display);
  font-size:22px;
  font-weight:500;
  color:#fff;
}
.japa-rounds select{
  font:inherit;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:5px 10px;
  cursor:pointer;
}
.japa-rounds option{ color:#111; }

.japa-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:24px;
}
.japa-actions button{
  font:inherit;
  font-size:13px;
  color:var(--muted-invert);
  background:none;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.japa-actions button:hover{ border-color:#fff; color:#fff; }

/* ---------- Notas ---------- */
.japa-notes{
  margin-top:64px;
  padding-top:40px;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.82);
}
.japa-notes h2{ color:#fff; margin-top:0; }
.japa-notes strong{ color:#fff; }
.japa-notes a{ color:var(--gold); }
.japa-notes .nota{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.82); }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width: 640px){
  .japa-page{ padding:20px 0 60px; }
  .japa-head .migas{ margin-bottom:12px; }
  .japa-head h1{ margin-bottom:8px; }
  .japa-lead{ font-size:15px; line-height:1.5; }
  .japa-stage{ margin-top:16px; }
  /* El mala nunca más alto que lo que queda de pantalla */
  .japa-mala{ width:min(100%, 420px, 52vh); }
  .japa-mantra{ margin-top:18px; }
  .japa-actions button{ flex:1 1 auto; }
  .japa-notes{ margin-top:44px; padding-top:28px; }
}

@media (prefers-reduced-motion: reduce){
  .japa-mala.is-round,
  .japa-mantra.is-pulse span{ animation:none; }
}