* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #FFF8DC;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0,0,0,0.03) 49px, rgba(0,0,0,0.03) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0,0,0,0.03) 49px, rgba(0,0,0,0.03) 50px);
  min-height: 100vh;
  font-family: 'Nunito', sans-serif;
}

.font-bangers { font-family: 'Bangers', cursive; }
.font-bungee { font-family: 'Bungee', cursive; }
.font-archivo { font-family: 'Archivo Black', sans-serif; }

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(1.3) rotate(180deg); }
}

@keyframes bounce-btn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes conveyor {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

@keyframes unbox {
  0% { opacity: 0; transform: scale(0.8) rotateY(10deg); }
  60% { transform: scale(1.02) rotateY(-2deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 50px rgba(227, 25, 55, 0.3); }
}

@keyframes star-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-slide-in {
  animation: slide-in 0.5s ease-out forwards;
}

.animate-unbox {
  animation: unbox 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-bounce-btn {
  animation: bounce-btn 2s ease-in-out infinite;
}

.animate-sparkle {
  animation: sparkle 2s ease-in-out infinite;
}

.animate-conveyor {
  background: repeating-linear-gradient(90deg, #666 0px, #888 10px, #666 20px, #888 30px, #666 40px);
  animation: conveyor 0.5s linear infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.text-3d {
  text-shadow: 
    2px 2px 0 #B71C1C,
    4px 4px 0 rgba(0,0,0,0.2);
}

.text-3d-blue {
  text-shadow: 
    2px 2px 0 #0D47A1,
    3px 3px 0 rgba(0,0,0,0.15);
}

.cardboard-bg {
  background: #C4A265;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23C4A265'/%3E%3Crect x='0' y='0' width='1' height='40' fill='%23B89555' opacity='0.3'/%3E%3Crect x='10' y='0' width='1' height='40' fill='%23D4B275' opacity='0.2'/%3E%3Crect x='25' y='0' width='1' height='40' fill='%23B89555' opacity='0.15'/%3E%3C/svg%3E");
}

.starburst {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.drop-zone-active {
  border-color: #E31937 !important;
  background: rgba(227, 25, 55, 0.05) !important;
}

.blister-pack {
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.1) 100%);
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  backdrop-filter: blur(2px);
}

input[type="text"], select {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FFF8DC; }
::-webkit-scrollbar-thumb { background: #E31937; border-radius: 4px; }