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

@keyframes newBadge {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes discoveryBurst {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8); }
  50% { box-shadow: 0 0 30px 15px rgba(255, 215, 0, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

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

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes slideIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

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

.sparkle-particle {
  animation: sparkle 0.8s ease-out forwards;
  position: absolute;
  pointer-events: none;
  font-size: 20px;
}

.new-badge {
  animation: newBadge 0.4s ease-out forwards;
}

.discovery-glow {
  animation: discoveryBurst 1s ease-out;
}

.float-text {
  animation: floatUp 1.5s ease-out forwards;
  position: absolute;
  pointer-events: none;
}

.shimmer-text {
  background: linear-gradient(90deg, #FFD700, #FFF, #FFD700, #FFF, #FFD700);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.mc-panel {
  background-color: #C6C6C6;
  border: 4px solid;
  border-color: #FFFFFF #555555 #555555 #FFFFFF;
  box-shadow: inset 0 0 0 2px #C6C6C6;
}

.mc-slot {
  background-color: #8B8B8B;
  border: 2px solid;
  border-color: #373737 #FFFFFF #FFFFFF #373737;
  image-rendering: pixelated;
}

.mc-slot-hover:hover {
  background-color: #A0A0A0;
  border-color: #FFD700 #B8860B #B8860B #FFD700;
}

.mc-button {
  background-color: #8B8B8B;
  border: 3px solid;
  border-color: #DBDBDB #585858 #585858 #DBDBDB;
  color: #3B2713;
  cursor: pointer;
  transition: none;
}

.mc-button:hover {
  background-color: #9E9E9E;
  border-color: #FFD700 #B8860B #B8860B #FFD700;
  color: #FFD700;
}

.mc-button:active {
  background-color: #6B6B6B;
  border-color: #585858 #DBDBDB #DBDBDB #585858;
}

.mc-button-green {
  background-color: #5D8C2E;
  border-color: #8BC34A #3B5E1A #3B5E1A #8BC34A;
  color: #FFF;
}

.mc-button-green:hover {
  background-color: #6DA03A;
  border-color: #FFD700 #B8860B #B8860B #FFD700;
}

body {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 48px,
      rgba(0,0,0,0.05) 48px,
      rgba(0,0,0,0.05) 50px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 48px,
      rgba(0,0,0,0.05) 48px,
      rgba(0,0,0,0.05) 50px
    );
  background-color: #2A1A08;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #3B2713;
}
::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border: 2px solid #3B2713;
}

.drag-over {
  background-color: #A0C060 !important;
  border-color: #FFD700 #B8860B #B8860B #FFD700 !important;
}

.item-dragging {
  opacity: 0.5;
}

.recipe-book-enter {
  animation: slideIn 0.2s ease-out;
}