/* ==========================================================================
   RadhaNaam.in - Kids games (Flowers + Bubbles)
   Colorful and playful by design (the rest of the site stays restrained -
   this page is the deliberate exception). Emoji + CSS gradients only, no
   image assets, so it stays fast on low-end phones.
   ========================================================================== */

.kids-body {
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 60%);
  overflow-x: hidden; /* the Flowers field intentionally breaks out to full viewport width */
}

.kids-hero {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
}
.kids-hero h1 {
  font-weight: 800;
  color: var(--color-heading);
}

/* ---- Toolbar: mode switch + sound toggle ---- */
.kids-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  flex-wrap: wrap;
}

.kids-mode-toggle {
  display: inline-flex;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.kids-mode-btn {
  border: none;
  background: transparent;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.kids-mode-btn.active { background: var(--color-blue-900); color: var(--color-text-inverse); }

.kids-sound-btn {
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.kids-sound-btn:active { transform: scale(0.92); }

.kids-count-badge {
  display: inline-block;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 1.4rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

/* ---- Shared field shell - each mode below supplies its own layout ---- */
.kids-field {
  width: 100%;
  margin: var(--space-3) auto var(--space-4);
  border-radius: var(--radius-lg);
}

/* ===== Mode: Flowers - an open field spanning the full screen width,
   not a boxed-in card, so flowers can spread across the whole viewport ===== */
.kids-field--flowers {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: max(58vh, calc(100dvh - 260px));
  background: radial-gradient(ellipse at 50% 0%, var(--color-bg-alt) 0%, var(--color-surface-rose) 100%);
  overflow: hidden;
  box-shadow: none;
  border-radius: 0;
}

.kids-flower {
  position: absolute;
  background: none;
  border: none;
  font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(58,14,30,0.15));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0.4rem;
  transform: translate(-50%, -50%);
  animation: kids-sway var(--sway-dur, 3.2s) ease-in-out var(--sway-delay, 0s) infinite;
}

.kids-flower.is-spawning { animation: kids-flower-spawn 280ms ease-out; }
.kids-flower.is-popping { animation: kids-flower-pop 280ms ease forwards; pointer-events: none; }

@keyframes kids-sway {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(calc(var(--tilt, 0deg) * -0.4)); }
  50%      { transform: translate(-50%, -50%) translateY(-8px) rotate(calc(var(--tilt, 0deg) * 0.4)); }
}
@keyframes kids-flower-spawn {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-18deg); opacity: 0; }
  70%  { transform: translate(-50%, -50%) scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes kids-flower-pop {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  45%  { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.9) rotate(25deg); opacity: 0; }
}

/* ===== Bubbles - full-viewport modal (see .bubbles-modal below) =====
   The 108-bubble pool fills the modal edge-to-edge; popping one flattens
   it in place (like real bubble wrap) instead of removing it, so the
   grid never reflows and gradually shows the sheet "used up". ===== */
.bubbles-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 3px;
}

.kids-bubble {
  border: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, 0.10),
    inset 2px 2px 5px rgba(255, 255, 255, 0.75);
  animation: kids-bob 3.4s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  font-family: var(--font-latin);
  font-size: var(--bubble-font-size, 0.65rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(18, 42, 90, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.kids-bubble.is-spawning {
  animation: kids-bubble-spawn 240ms ease-out both;
  animation-delay: var(--spawn-delay, 0ms);
}
.kids-bubble.is-popping { animation: kids-bubble-pop 220ms ease-in forwards; }
.kids-bubble.is-popped {
  animation: none;
  transform: scale(0.8);
  opacity: 0.5;
  filter: saturate(0.5) brightness(0.92);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: default;
  pointer-events: none;
}

@keyframes kids-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes kids-bubble-spawn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes kids-bubble-pop {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

.kids-bubble-c1 { background: radial-gradient(circle at 30% 26%, #fff 0%, #ffd7e6 22%, #f699c1 60%, #e56b9d 100%); }
.kids-bubble-c2 { background: radial-gradient(circle at 30% 26%, #fff 0%, #d8f0ff 22%, #7ec8ec 60%, #4a9fd6 100%); }
.kids-bubble-c3 { background: radial-gradient(circle at 30% 26%, #fff 0%, #e3ffe0 22%, #8fdc8a 60%, #5cb85c 100%); }
.kids-bubble-c4 { background: radial-gradient(circle at 30% 26%, #fff 0%, #fff3d6 22%, #ffd166 60%, #f0a93c 100%); }
.kids-bubble-c5 { background: radial-gradient(circle at 30% 26%, #fff 0%, #ecdcff 22%, #b98af0 60%, #9455d3 100%); }
.kids-bubble-c6 { background: radial-gradient(circle at 30% 26%, #fff 0%, #ffe4d6 22%, #ff9d6c 60%, #f2703c 100%); }

@media (prefers-reduced-motion: reduce) {
  .kids-flower, .kids-bubble { animation: none !important; }
  .kids-flower.is-popping { opacity: 0; }
  .kids-bubble.is-popping { transform: scale(0.8); opacity: 0.5; }
}

/* ---- Completion (inline, Flowers) ---- */
.kids-celebrate { display: none; text-align: center; }
.kids-celebrate.is-visible { display: block; }
/* The completion card itself (.celebrate-card, confetti, trophy, etc.) is
   a shared component - see components.css, also used by Jap's completion
   screen. */

/* ===== Bubbles full-viewport modal chrome ===== */
.bubbles-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-bg);
}
.bubbles-modal[hidden] { display: none; }

.bubbles-floating-btn {
  position: fixed;
  z-index: 2010;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-heading);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bubbles-floating-btn:active { transform: scale(0.92); }
.bubbles-close { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.bubbles-sound { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }

.bubbles-progress-badge {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2010;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.bubbles-celebrate {
  position: fixed;
  inset: 0;
  z-index: 2020;
  background: rgba(15, 30, 58, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.bubbles-celebrate[hidden] { display: none; }