/* Enhanced pixel art styling and magical animations */
.pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Magical dish spawning animation */
@keyframes dishSpawn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
    filter: hue-rotate(360deg);
  }
  50% {
    transform: scale(1.3) rotate(90deg);
    filter: hue-rotate(180deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
}

.dish-spawn {
  animation: dishSpawn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Sparkle overlay for new dishes */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.sparkle-overlay::before {
  content: '✨';
  position: absolute;
  top: -5px;
  right: -5px;
  animation: sparkle 1s ease-in-out infinite;
  z-index: 10;
}

.sparkle-overlay::after {
  content: '⭐';
  position: absolute;
  bottom: -5px;
  left: -5px;
  animation: sparkle 1s ease-in-out infinite 0.5s;
  z-index: 10;
}

/* Enhanced cleaning animation with bubbles */
@keyframes bubbleClean {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    transform: scale(1.2) rotate(45deg);
    filter: brightness(1.5);
  }
  50% {
    transform: scale(1.4) rotate(90deg);
    opacity: 0.8;
    filter: blur(2px) brightness(2);
  }
  75% {
    transform: scale(0.8) rotate(135deg);
    opacity: 0.4;
    filter: blur(4px);
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
    filter: blur(6px);
  }
}

.cleaning {
  animation: bubbleClean 1s ease-out forwards;
}

/* Floating animation for hover effects */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

.dish-hover:hover {
  animation: float 2s ease-in-out infinite;
  filter: brightness(1.2) drop-shadow(0 0 20px rgba(156, 169, 134, 0.6));
}

/* Magical gradient backgrounds */
.magic-bg {
  background: linear-gradient(45deg, 
    rgba(156, 169, 134, 0.1) 0%, 
    rgba(244, 208, 63, 0.1) 25%, 
    rgba(142, 68, 173, 0.1) 50%, 
    rgba(204, 85, 0, 0.1) 75%, 
    rgba(156, 169, 134, 0.1) 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Rarity glow effects */
.rarity-common { border-color: #9ca986; box-shadow: 0 0 10px rgba(156, 169, 134, 0.3); }
.rarity-uncommon { border-color: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.4); }
.rarity-rare { border-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
.rarity-epic { border-color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
.rarity-legendary { border-color: #f59e0b; box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); }

/* Sink water animation */
@keyframes waterRipple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.sink-water::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgba(59, 130, 246, 0.6), transparent);
  border-radius: 0 0 12px 12px;
  animation: waterRipple 3s ease-in-out infinite;
}

/* Enhanced button hover effects */
.magic-button {
  position: relative;
  overflow: hidden;
}

.magic-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.magic-button:hover::before {
  left: 100%;
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(156, 169, 134, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 169, 134, 0.6);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 169, 134, 0.8);
}

/* Responsive font scaling */
@media (max-width: 640px) {
  .text-6xl { font-size: 2.5rem; }
  .text-4xl { font-size: 2rem; }
  .text-3xl { font-size: 1.5rem; }
}