@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,100);
@import url(https://fonts.googleapis.com/css?family=VT323);

/* Global font styles */
body {
  font-family: "Roboto", sans-serif;
}

h1 { 
  font-family: "Shadows Into Light", sans-serif;
  color: white;
  font-size: 2em;
  text-rendering: optimizeLegibility;
}

/* Battle-specific styles only - no global styles */

/* Base missile styles - scoped to battle arena only */
#battleArena .missile {
  position: absolute;
  width: 20px;
  height: 10px;
  background-color: #ff6b6b;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

/* Type-specific missile styles - scoped to battle arena only */
#battleArena .missile-fire {
  background: linear-gradient(45deg, #ff4444, #ff8800);
  box-shadow: 0 0 10px #ff4444;
  animation: flame-flicker 0.1s infinite alternate;
}

#battleArena .missile-water {
  background: linear-gradient(45deg, #4488ff, #00aaff);
  border-radius: 50%;
  box-shadow: 0 0 8px #4488ff;
  animation: water-ripple 0.3s infinite;
}

#battleArena .missile-electric {
  background: linear-gradient(45deg, #ffff00, #ffaa00);
  border-radius: 0;
  width: 15px;
  height: 15px;
  box-shadow: 0 0 15px #ffff00;
  animation: electric-zap 0.1s infinite;
}

#battleArena .missile-grass {
  background: linear-gradient(45deg, #44ff44, #88ff88);
  border-radius: 50%;
  box-shadow: 0 0 8px #44ff44;
  animation: leaf-float 0.4s infinite ease-in-out;
}

#battleArena .missile-ground {
  background: linear-gradient(45deg, #8b4513, #cd853f);
  border-radius: 3px;
  box-shadow: 0 0 5px #8b4513;
}

#battleArena .missile-rock {
  background: linear-gradient(45deg, #696969, #a9a9a9);
  border-radius: 2px;
  box-shadow: 0 0 6px #696969;
}

#battleArena .missile-psychic {
  background: linear-gradient(45deg, #ff69b4, #ff1493);
  border-radius: 50%;
  box-shadow: 0 0 12px #ff69b4;
  animation: psychic-pulse 0.2s infinite;
}

#battleArena .missile-ice {
  background: linear-gradient(45deg, #b0e0e6, #87ceeb);
  border-radius: 50%;
  box-shadow: 0 0 10px #b0e0e6;
  animation: ice-crystal 0.3s infinite;
}

#battleArena .missile-dragon {
  background: linear-gradient(45deg, #4169e1, #8a2be2);
  border-radius: 50%;
  box-shadow: 0 0 15px #4169e1;
  animation: dragon-energy 0.15s infinite;
}

#battleArena .missile-dark {
  background: linear-gradient(45deg, #2f2f2f, #696969);
  border-radius: 50%;
  box-shadow: 0 0 8px #2f2f2f;
}

#battleArena .missile-steel {
  background: linear-gradient(45deg, #c0c0c0, #e6e6e6);
  border-radius: 2px;
  box-shadow: 0 0 6px #c0c0c0;
}

#battleArena .missile-fairy {
  background: linear-gradient(45deg, #ffb6c1, #ffc0cb);
  border-radius: 50%;
  box-shadow: 0 0 10px #ffb6c1;
  animation: fairy-sparkle 0.2s infinite;
}

#battleArena .missile-flying {
  background: linear-gradient(45deg, #87ceeb, #b0e0e6);
  border-radius: 50%;
  box-shadow: 0 0 8px #87ceeb;
  animation: wind-gust 0.2s infinite;
}

#battleArena .missile-poison {
  background: linear-gradient(45deg, #9370db, #8b008b);
  border-radius: 50%;
  box-shadow: 0 0 10px #9370db;
  animation: poison-bubble 0.3s infinite;
}

#battleArena .missile-bug {
  background: linear-gradient(45deg, #9acd32, #adff2f);
  border-radius: 50%;
  box-shadow: 0 0 8px #9acd32;
  animation: bug-buzz 0.1s infinite;
}

#battleArena .missile-fighting {
  background: linear-gradient(45deg, #cd5c5c, #ff6347);
  border-radius: 2px;
  box-shadow: 0 0 8px #cd5c5c;
  animation: fighting-punch 0.1s infinite;
}

#battleArena .missile-ghost {
  background: linear-gradient(45deg, #9370db, #4b0082);
  border-radius: 50%;
  box-shadow: 0 0 12px #9370db;
  animation: ghost-wisp 0.3s infinite;
}

#battleArena .missile-normal {
  background: linear-gradient(45deg, #a9a9a9, #d3d3d3);
  border-radius: 50%;
  box-shadow: 0 0 6px #a9a9a9;
}

/* Additional type variations that might exist in database - scoped to battle arena only */
#battleArena .missile-electricity {
  background: linear-gradient(45deg, #ffff00, #ffaa00);
  border-radius: 0;
  width: 15px;
  height: 15px;
  box-shadow: 0 0 15px #ffff00;
  animation: electric-zap 0.1s infinite;
}

/* Animations for missile types */
@keyframes flame-flicker {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.1) rotate(2deg); }
}

@keyframes water-ripple {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes electric-zap {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(90deg); }
  50% { transform: scale(0.8) rotate(180deg); }
  75% { transform: scale(1.1) rotate(270deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes leaf-float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes psychic-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ice-crystal {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes dragon-energy {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes fairy-sparkle {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.7; }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

@keyframes wind-gust {
  0% { transform: translateX(0px) scale(1); }
  50% { transform: translateX(3px) scale(1.1); }
  100% { transform: translateX(0px) scale(1); }
}

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

@keyframes bug-buzz {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes fighting-punch {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes ghost-wisp {
  0% { transform: scale(1) opacity: 1; }
  50% { transform: scale(1.1) opacity: 0.6; }
  100% { transform: scale(1) opacity: 1; }
}