/* ==========================================================================
   RadhaNaam.in - Jap (chanting) screen components
   ========================================================================== */

.jap-screen {
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.jap-deva {
  font-family: var(--font-devanagari-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.jap-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface-rose);
  border: 1px solid var(--color-rose-300);
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--color-heading);
}
.jap-streak-badge i { color: var(--color-warning); }
.jap-streak-badge.is-at-risk {
  border-color: var(--color-warning);
  animation: jap-streak-pulse 1.6s ease-in-out infinite;
}
@keyframes jap-streak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 118, 58, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 118, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .jap-streak-badge.is-at-risk { animation: none; }
}

.jap-ring-wrap {
  position: relative;
  width: min(78vw, 300px);
  height: min(78vw, 300px);
  margin: 0 auto var(--space-3);
}

.jap-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jap-ring-track { fill: none; stroke: var(--color-rose-100); stroke-width: 10; }
.jap-ring-progress {
  fill: none;
  stroke: url(#jap-ring-gradient);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-base);
}

.jap-tap-btn {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.jap-tap-btn:hover { box-shadow: var(--shadow-lg); }
.jap-tap-btn:active { transform: scale(0.96); }
.jap-tap-btn.is-tapped { animation: jap-pulse 220ms ease; }

@keyframes jap-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jap-tap-btn.is-tapped { animation: none; }
}

.jap-radhe {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-heading);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}
.jap-count {
  font-weight: 800;
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.jap-count-of {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.jap-tap-hint {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Floating "Radha" fade-up particle on tap */
.jap-float {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1rem;
  pointer-events: none;
  animation: jap-float-up 700ms ease-out forwards;
}
@keyframes jap-float-up {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -40px); }
}
@media (prefers-reduced-motion: reduce) {
  .jap-float { animation: none; opacity: 0; }
}

.jap-stats-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.jap-stats-row strong { color: var(--color-heading); font-variant-numeric: tabular-nums; }

/* ---- Completion celebration ---- */
.jap-celebrate {
  display: none;
}
.jap-celebrate.is-visible {
  display: block;
  animation: jap-fade-in var(--transition-base);
}
@keyframes jap-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== Joyful completion card - shared by Naam Jap, and Kids' Flowers
   (inline) and Bubbles (in-modal). Confetti, a bouncing trophy and an
   encouraging line are meant to make finishing a mala feel like a small
   party, so people want to start another one. Was previously duplicated
   as kids-only (`.kids-celebrate-*`); Jap's own completion screen used to
   be a plain heading + paragraph, so unifying this also brings Jap's
   celebration up to the same joyful bar. ===== */
.celebrate-card {
  position: relative;
  overflow: hidden;
  max-width: 26rem;
  width: 100%;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 0%, var(--color-rose-100) 0%, var(--color-surface) 60%);
  border: 2px solid var(--color-gold-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
  animation: celebrate-card-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.celebrate-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.celebrate-confetti span {
  position: absolute;
  top: -10%;
  left: var(--x, 50%);
  font-size: 1.4rem;
  animation: celebrate-confetti-fall 2.6s ease-in var(--delay, 0s) infinite;
}
@keyframes celebrate-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(340px) rotate(220deg); opacity: 0; }
}

.celebrate-trophy {
  font-size: 2.75rem;
  color: var(--color-gold-500);
  filter: drop-shadow(0 4px 8px rgba(212, 144, 13, 0.35));
  animation: celebrate-trophy-bounce 1.4s ease-in-out 550ms infinite;
}
@keyframes celebrate-trophy-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-4deg); }
}

@keyframes celebrate-card-in {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.celebrate-eyebrow {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}
.celebrate-heading {
  margin: 0.25rem 0 var(--space-2);
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 800;
  color: var(--color-heading);
}
.celebrate-stats {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  margin-bottom: 0.4rem;
}
.celebrate-stats strong { color: var(--color-heading); font-variant-numeric: tabular-nums; }
.celebrate-encourage {
  color: var(--color-blue-700);
  font-weight: 700;
  margin-bottom: 0;
}
.celebrate-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin: var(--space-3) 0; }

@media (prefers-reduced-motion: reduce) {
  .celebrate-card { animation: none; }
  .celebrate-trophy { animation: none; }
  .celebrate-confetti { display: none; }
}

/* ---- Share sheet ---- */
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: var(--fs-small);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}
.share-btn:hover { background: var(--color-rose-100); color: var(--color-heading); }
.share-btn--whatsapp i { color: #25D366; }
.share-btn--facebook i { color: #1877F2; }