@keyframes glitch {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-2px, -1px); }
  20% { transform: translate(2px, 1px); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(1px, -1px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -2px); }
  70% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 2px); }
  90% { transform: translate(-2px, -1px); }
}

@keyframes matrixRain {
  0% { transform: translateY(-100vh); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

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

.glitch {
  animation: glitch 2s infinite;
}

.matrix-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 0, 0.03) 2px,
    rgba(0, 255, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.boss-sprite {
  animation: bossPulse 2s infinite ease-in-out;
  filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.3));
}

.pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Combat log scrollbar */
.overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #1e293b;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #22d3ee;
  border-radius: 4px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #06b6d4;
}

/* Screen shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

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

/* Health bar animations */
.transition-all {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Neon glow effects for buttons */
.bg-red-600:hover {
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
}

.bg-green-600:hover {
  box-shadow: 0 0 20px rgba(22, 163, 74, 0.5);
}

.bg-purple-600:hover {
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}

.bg-blue-600:hover {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

/* Layer card hover effects */
.hover\:bg-slate-700:hover {
  background-color: rgb(51 65 85);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .boss-sprite {
    width: 128px !important;
    height: 128px !important;
  }
  
  .w-80 {
    width: 90vw !important;
    max-width: 320px;
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}