* {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
}

.minion-text {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  letter-spacing: 0.5px;
}

.goggle-shadow {
  text-shadow: 
    4px 4px 0px rgba(59, 130, 246, 0.5),
    -2px -2px 0px rgba(59, 130, 246, 0.3);
}

.banana-card {
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.95), rgba(253, 224, 71, 0.95));
  backdrop-filter: blur(10px);
  border: 6px solid #fbbf24;
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 2px 10px rgba(255, 255, 255, 0.3);
}

.challenge-card-minion {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.9));
  border: 4px solid;
  transition: all 0.3s ease;
  animation: slideInBounce 0.6s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.challenge-card-minion.difficulty-1 {
  border-color: #4ade80;
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
}

.challenge-card-minion.difficulty-2 {
  border-color: #fbbf24;
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

.challenge-card-minion.difficulty-3 {
  border-color: #f87171;
  box-shadow: 0 0 30px rgba(248, 113, 113, 0.4);
  animation: shake 0.5s ease;
}

.challenge-card-minion.difficulty-4 {
  border-color: #f97316;
  box-shadow: 0 0 50px rgba(249, 115, 22, 0.6);
  animation: shake 0.3s ease infinite, screenShake 0.5s ease;
}

.banana-button {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 4px solid #fcd34d;
  border-radius: 50px;
  color: white;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.banana-button:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6);
}

.banana-button:active {
  transform: scale(0.98);
}

.speech-bubble {
  background: white;
  padding: 12px 20px;
  border-radius: 20px;
  border: 3px solid #fbbf24;
  position: relative;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fbbf24;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 33px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
}

/* Minion Laugh Animation System - Video Accurate */
.minion-container {
  transition: all 0.15s ease;
  position: relative;
}

.minion-container.idle {
  animation: idleSway 3s ease-in-out infinite;
}

.minion-container.pre-laugh {
  animation: preLaugh 0.1s ease;
}

.minion-container.start {
  animation: laughStart 0.2s ease;
}

.minion-container.peak {
  animation: peakLaugh 0.4s ease-in-out infinite;
  transform: rotate(var(--lean-angle, 0deg));
}

.minion-container.sustain {
  animation: sustainLaugh 0.5s ease-in-out infinite;
}

.minion-container.wind-down {
  animation: windDownLaugh 0.3s ease;
}

.minion-avatar {
  transition: all 0.15s ease;
}

.minion-avatar.peak {
  transform: scaleY(1.2);
}

.minion-mouth-peak {
  animation: mouthPeak 0.4s ease-in-out infinite;
}

@keyframes idleSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-2px); }
}

@keyframes preLaugh {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

@keyframes laughStart {
  0% { transform: scale(1.02) rotate(0deg); }
  100% { transform: scale(1.05) rotate(-2deg); }
}

@keyframes peakLaugh {
  0% { 
    transform: rotate(var(--lean-angle, 0deg)) translateY(0px) scale(1.05); 
  }
  10% { 
    transform: rotate(calc(var(--lean-angle, 0deg) - 2deg)) translateY(-8px) scale(1.08); 
  }
  20% { 
    transform: rotate(calc(var(--lean-angle, 0deg) + 2deg)) translateY(-6px) scale(1.07); 
  }
  30% { 
    transform: rotate(calc(var(--lean-angle, 0deg) - 1deg)) translateY(-8px) scale(1.08); 
  }
  40% { 
    transform: rotate(calc(var(--lean-angle, 0deg) + 1deg)) translateY(-7px) scale(1.07); 
  }
  50% { 
    transform: rotate(var(--lean-angle, 0deg)) translateY(-8px) scale(1.08); 
  }
  100% { 
    transform: rotate(var(--lean-angle, 0deg)) translateY(0px) scale(1.05); 
  }
}

@keyframes sustainLaugh {
  0%, 100% { 
    transform: scale(1.03) rotate(-1deg); 
  }
  50% { 
    transform: scale(1.04) rotate(1deg); 
  }
}

@keyframes windDownLaugh {
  0% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes mouthPeak {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.2) translateY(2px); }
}

@keyframes slideInBounce {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px) rotate(-2deg); }
  75% { transform: translateX(10px) rotate(2deg); }
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1.5);
  }
}

@keyframes bounce-celebration {
  0%, 100% { 
    transform: translateY(0) scale(1) rotate(0deg); 
  }
  25% { 
    transform: translateY(-40px) scale(1.2) rotate(10deg); 
  }
  50% { 
    transform: translateY(-60px) scale(1.3) rotate(-10deg); 
  }
  75% { 
    transform: translateY(-40px) scale(1.2) rotate(5deg); 
  }
}

@keyframes spin-celebration {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.5); }
}

@keyframes sad-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

.animate-float-up {
  animation: float-up 3s ease-out forwards;
}

.animate-bounce-celebration {
  animation: bounce-celebration 1s ease-in-out infinite;
}

.animate-spin-celebration {
  animation: spin-celebration 2s linear infinite;
}

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

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-pulse-fast {
  animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.minion-wiggle {
  animation: wiggle 2s ease-in-out infinite;
}

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

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

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

@keyframes banana-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
  }
}

button {
  transition: all 0.2s ease;
}

button:active {
  transform: scale(0.95);
}

/* Banana pattern background */
body {
  background-image: 
    url('/api/retrodiffusion/image/64/64/simple?prompt=small+yellow+banana+icon&remove_bg=true&seed=999');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.05;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.3), rgba(147, 197, 253, 0.3));
  pointer-events: none;
  z-index: 0;
}

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