@keyframes sparkle {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 0.9; }
  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(168, 85, 247, 0.9); }
  30% { box-shadow: 0 0 40px 20px rgba(168, 85, 247, 0.5); }
  60% { 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); }
}

@keyframes enchantShimmer {
  0% { 
    background-position: 0% 0%;
    opacity: 0.4;
  }
  50% { 
    background-position: 100% 100%;
    opacity: 0.8;
  }
  100% { 
    background-position: 200% 200%;
    opacity: 0.4;
  }
}

@keyframes bannerSlideIn {
  0% { transform: translate(-50%, -100%); opacity: 0; }
  15% { transform: translate(-50%, 0%); opacity: 1; }
  85% { transform: translate(-50%, 0%); opacity: 1; }
  100% { transform: translate(-50%, -100%); opacity: 0; }
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.3), 0 2px 4px rgba(0,0,0,0.5); }
  50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.3), 0 2px 4px rgba(0,0,0,0.5); }
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes aiItemGlow {
  0%, 100% { box-shadow: inset 0 0 4px rgba(168, 85, 247, 0.0); }
  50% { box-shadow: inset 0 0 4px rgba(168, 85, 247, 0.3); }
}

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

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

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

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

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

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

.title-glow {
  animation: titleGlow 3s ease-in-out infinite;
}

.craft-arrow {
  animation: arrowPulse 2s ease-in-out infinite;
}

.ai-item-slot {
  animation: aiItemGlow 3s ease-in-out infinite;
}

.enchant-shimmer {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.0) 0%,
    rgba(168, 85, 247, 0.4) 25%,
    rgba(139, 92, 246, 0.6) 50%,
    rgba(168, 85, 247, 0.4) 75%,
    rgba(168, 85, 247, 0.0) 100%
  );
  background-size: 200% 200%;
  animation: enchantShimmer 1s ease-in-out infinite;
  border-radius: 4px;
}

.discovery-banner {
  animation: bannerSlideIn 3.5s ease-in-out forwards;
}

.discovery-banner-inner {
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 60px rgba(255, 215, 0, 0.3);
}

.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;
}

.result-slot {
  background-color: #7B6BAB;
  border-color: #4A3470 #C4B0E8 #C4B0E8 #4A3470;
}

.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:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mc-button:disabled:hover {
  background-color: #8B8B8B;
  border-color: #DBDBDB #585858 #585858 #DBDBDB;
  color: #3B2713;
}

.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.06) 48px,
      rgba(0,0,0,0.06) 50px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 48px,
      rgba(0,0,0,0.06) 48px,
      rgba(0,0,0,0.06) 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;
}