:root {
  --garden-green: #7ecb6b;
  --garden-pink: #ff8fb8;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: #1f3d1f;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,143,184,0.35), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(126,235,109,0.35), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255,230,93,0.30), transparent 50%),
    linear-gradient(160deg, #eafbe4 0%, #fdeef4 55%, #eef6ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* floating decorative petals */
body::before {
  content: "🌸 🌼 🌻 🌷 🌺 🍃";
  position: fixed;
  inset: 0;
  font-size: 3rem;
  opacity: 0.06;
  letter-spacing: 6rem;
  line-height: 8rem;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-8deg);
}

#root { position: relative; z-index: 1; }

.hq-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  background: linear-gradient(90deg, #ff5c9c, #b04fe0, #4caf50);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
}

.petal-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 1.5rem;
  box-shadow: 0 8px 24px rgba(120,180,120,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.petal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255,143,184,0.22);
}

.tab-active { animation: tabBounce 0.4s ease; }
@keyframes tabBounce {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.ring-float { animation: ringFloat 3s ease-in-out infinite; }
@keyframes ringFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.bar-grow { animation: barGrow 0.6s cubic-bezier(.22,1,.36,1); transition: width 0.4s ease; }
@keyframes barGrow { from { width: 0 !important; } }

.tree-pop { animation: treePop 0.4s cubic-bezier(.22,1.4,.36,1) backwards; }
@keyframes treePop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.log-in { animation: logIn 0.3s ease; }
@keyframes logIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.poof-anim { animation: poofPop 0.4s ease; }
@keyframes poofPop {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  50% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.poof-shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,143,184,0.5); border-radius: 8px; }