@layer base {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-family: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overscroll-behavior-y: contain;
  }
}

/* Custom Soft Pastel Palette & Animations */
:root {
  --pastel-pink: #FEE7E8;
  --pastel-peach: #FFE4D6;
  --pastel-yellow: #FFF7D1;
  --pastel-mint: #D4F0DF;
  --pastel-sky: #E3F2FD;
  --pastel-lavender: #EAE6FF;
}

/* Floating cloud animation */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(12px) rotate(-1.5deg);
  }
}

@keyframes gentlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

@keyframes snapPop {
  0% { transform: scale(0.88); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-reverse {
  animation: floatReverse 7s ease-in-out infinite;
}

.animate-pulse-gentle {
  animation: gentlePulse 3.5s ease-in-out infinite;
}

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out infinite;
}

.animate-snap {
  animation: snapPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Soft cute shadows */
.shadow-soft {
  box-shadow: 0 10px 25px -5px rgba(100, 116, 139, 0.10), 0 8px 10px -6px rgba(100, 116, 139, 0.06);
}

.shadow-card {
  box-shadow: 0 14px 28px rgba(135, 150, 180, 0.14), 0 10px 10px rgba(135, 150, 180, 0.08);
}

.shadow-button {
  box-shadow: 0 5px 0px rgba(0, 0, 0, 0.08), 0 10px 18px rgba(0, 0, 0, 0.08);
}

.shadow-button:active {
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(3px);
}

/* Rounded elements */
.rounded-4xl {
  border-radius: 2rem;
}

.rounded-5xl {
  border-radius: 2.5rem;
}

@media (max-width: 640px) {
  .rounded-5xl {
    border-radius: 1.75rem;
  }
}

/* Hide scrollbar for neat presentation */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}