:root {
  --fun-primary: #ff4b72;
  --fun-secondary: #ff8c42;
  --fun-dark: #2d3748;
  --fun-bg-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #fbc2eb 100%);
  --fun-card-bg: #ffffff;
}

body.bg-playful-canvas {
  background: var(--fun-bg-gradient);
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.invite-wrapper {
  max-width: 480px;
}

.playful-card {
  background-color: var(--fun-card-bg);
  border-radius: 28px;
}

h1, #celebrantName {
  font-family: 'Fredoka', cursive;
  letter-spacing: 0.5px;
}

.text-fun-primary {
  color: var(--fun-primary) !important;
}

.text-fun-dark {
  color: var(--fun-dark) !important;
}

.badge-fun {
  background-color: #ffd166;
  color: #5c3d00;
  font-weight: 700;
  letter-spacing: 1px;
}

.countdown-container {
  background-color: #fff9f0;
  border: 1px dashed #ffd166;
}

.timer-box {
  background-color: #ffffff;
  border: 1px solid #ffe3b3;
}

.detail-card {
  background-color: #fafbfc;
  border-color: #edf2f7 !important;
}

.btn-fun-outline {
  border: 2px solid var(--fun-primary);
  color: var(--fun-primary);
}

.btn-fun-outline:hover {
  background-color: var(--fun-primary);
  color: #ffffff;
}

.btn-fun-whatsapp {
  background-color: #25d366;
  color: #ffffff;
  border: none;
  font-size: 1.05rem;
}

.btn-fun-whatsapp:hover {
  background-color: #1ebc59;
  color: #ffffff;
}

.x-small {
  font-size: 0.72rem;
}

/* Subtle Floating Balloon Animations */
.floating-balloon {
  position: fixed;
  font-size: 2rem;
  z-index: 1;
  opacity: 0.7;
  pointer-events: none;
  animation: floatUp 8s ease-in-out infinite alternate;
}

.b-1 { top: 15%; left: 5%; animation-duration: 6s; }
.b-2 { top: 60%; right: 6%; animation-duration: 9s; }
.b-3 { top: 85%; left: 8%; animation-duration: 7s; }

@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-25px) rotate(10deg); }
}