/* ===== PIXEL ART SPRITE SYSTEM ===== */
/* All sprites are pure CSS pixel art using box-shadow grids */

:root {
  --pixel: 4px;
}

/* ===== SPRITE BASE ===== */
.sprite {
  display: inline-block;
  position: relative;
  image-rendering: pixelated;
}

/* ===== ANIMATIONS ===== */
@keyframes sprite-idle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}
@keyframes sprite-walk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-2deg); }
  75% { transform: translateY(-2px) rotate(2deg); }
}
@keyframes sprite-attack {
  0% { transform: translateX(0) rotate(0deg); }
  30% { transform: translateX(6px) rotate(15deg); }
  60% { transform: translateX(3px) rotate(8deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes sprite-hurt {
  0%, 100% { filter: none; transform: translateX(0); }
  25% { filter: brightness(3) saturate(0); transform: translateX(-4px); }
  75% { filter: brightness(3) saturate(0); transform: translateX(4px); }
}
@keyframes sprite-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
}
@keyframes sprite-pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50% { filter: drop-shadow(0 0 12px currentColor); }
}
@keyframes weapon-shine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4) saturate(1.5); }
}

/* ===== SPRITE STATES ===== */
.sprite.idle { animation: sprite-idle 1.8s ease-in-out infinite; }
.sprite.walking { animation: sprite-walk 0.5s steps(1) infinite; }
.sprite.attacking { animation: sprite-attack 0.4s ease-out; }
.sprite.hurt { animation: sprite-hurt 0.4s ease-out; }
.sprite.floating { animation: sprite-float 2s ease-in-out infinite; }

/* ===== WARRIOR BOY ===== */
.sprite-warrior-boy {
  width: 48px;
  height: 56px;
  position: relative;
}
.sprite-warrior-boy::before {
  content: '';
  position: absolute;
  /* Pixel art via SVG embedded as background */
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' width='48' height='56' shape-rendering='crispEdges'%3E%3C!-- Hair --%3E%3Crect x='3' y='0' width='6' height='1' fill='%23c0392b'/%3E%3Crect x='2' y='1' width='8' height='1' fill='%23c0392b'/%3E%3C!-- Face --%3E%3Crect x='3' y='2' width='6' height='4' fill='%23fdbcb4'/%3E%3Crect x='2' y='3' width='1' height='2' fill='%23fdbcb4'/%3E%3Crect x='9' y='3' width='1' height='2' fill='%23fdbcb4'/%3E%3C!-- Eyes --%3E%3Crect x='4' y='3' width='1' height='1' fill='%23333'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23333'/%3E%3C!-- Mouth --%3E%3Crect x='5' y='5' width='2' height='1' fill='%23c0392b'/%3E%3C!-- Armor body --%3E%3Crect x='2' y='6' width='8' height='4' fill='%234a5568'/%3E%3Crect x='3' y='7' width='6' height='2' fill='%236b7280'/%3E%3Crect x='5' y='6' width='2' height='4' fill='%23718096'/%3E%3C!-- Shoulder pads --%3E%3Crect x='1' y='6' width='2' height='2' fill='%23c0392b'/%3E%3Crect x='9' y='6' width='2' height='2' fill='%23c0392b'/%3E%3C!-- Arms --%3E%3Crect x='1' y='8' width='2' height='3' fill='%234a5568'/%3E%3Crect x='9' y='8' width='2' height='3' fill='%234a5568'/%3E%3C!-- Hands --%3E%3Crect x='1' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3C!-- Legs --%3E%3Crect x='3' y='10' width='3' height='4' fill='%232d3748'/%3E%3Crect x='6' y='10' width='3' height='4' fill='%232d3748'/%3E%3C!-- Boots --%3E%3Crect x='2' y='13' width='4' height='1' fill='%231a202c'/%3E%3Crect x='6' y='13' width='4' height='1' fill='%231a202c'/%3E%3C!-- Belt --%3E%3Crect x='2' y='10' width='8' height='1' fill='%23c0392b'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ===== WARRIOR GIRL ===== */
.sprite-warrior-girl {
  width: 48px;
  height: 56px;
  position: relative;
}
.sprite-warrior-girl::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' width='48' height='56' shape-rendering='crispEdges'%3E%3C!-- Hair long --%3E%3Crect x='2' y='0' width='8' height='1' fill='%23f39c12'/%3E%3Crect x='1' y='1' width='10' height='3' fill='%23f39c12'/%3E%3Crect x='1' y='4' width='1' height='4' fill='%23f39c12'/%3E%3Crect x='10' y='4' width='1' height='4' fill='%23f39c12'/%3E%3C!-- Face --%3E%3Crect x='3' y='2' width='6' height='4' fill='%23fdbcb4'/%3E%3Crect x='2' y='3' width='1' height='2' fill='%23fdbcb4'/%3E%3Crect x='9' y='3' width='1' height='2' fill='%23fdbcb4'/%3E%3C!-- Eyes --%3E%3Crect x='4' y='3' width='1' height='1' fill='%232ecc71'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%232ecc71'/%3E%3C!-- Lashes --%3E%3Crect x='4' y='2' width='2' height='1' fill='%23333'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%23333'/%3E%3C!-- Mouth --%3E%3Crect x='5' y='5' width='2' height='1' fill='%23e74c3c'/%3E%3C!-- Pink armor --%3E%3Crect x='2' y='6' width='8' height='4' fill='%23c0392b'/%3E%3Crect x='3' y='7' width='6' height='2' fill='%23e74c3c'/%3E%3Crect x='5' y='6' width='2' height='4' fill='%23f39c12'/%3E%3C!-- Shoulder pads --%3E%3Crect x='1' y='6' width='2' height='2' fill='%23f39c12'/%3E%3Crect x='9' y='6' width='2' height='2' fill='%23f39c12'/%3E%3C!-- Arms --%3E%3Crect x='1' y='8' width='2' height='3' fill='%23c0392b'/%3E%3Crect x='9' y='8' width='2' height='3' fill='%23c0392b'/%3E%3C!-- Hands --%3E%3Crect x='1' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3C!-- Skirt/Legs --%3E%3Crect x='2' y='10' width='8' height='2' fill='%23c0392b'/%3E%3Crect x='3' y='12' width='3' height='2' fill='%232d3748'/%3E%3Crect x='6' y='12' width='3' height='2' fill='%232d3748'/%3E%3C!-- Boots --%3E%3Crect x='2' y='13' width='4' height='1' fill='%231a202c'/%3E%3Crect x='6' y='13' width='4' height='1' fill='%231a202c'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ===== MAGE BOY ===== */
.sprite-mage-boy {
  width: 48px;
  height: 56px;
  position: relative;
}
.sprite-mage-boy::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' width='48' height='56' shape-rendering='crispEdges'%3E%3C!-- Wizard hat --%3E%3Crect x='5' y='0' width='2' height='1' fill='%237c3aed'/%3E%3Crect x='4' y='1' width='4' height='1' fill='%237c3aed'/%3E%3Crect x='3' y='2' width='6' height='1' fill='%237c3aed'/%3E%3Crect x='2' y='3' width='8' height='1' fill='%239333ea'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23f59e0b'/%3E%3C!-- Face --%3E%3Crect x='3' y='4' width='6' height='4' fill='%23fdbcb4'/%3E%3Crect x='2' y='5' width='1' height='2' fill='%23fdbcb4'/%3E%3Crect x='9' y='5' width='1' height='2' fill='%23fdbcb4'/%3E%3C!-- Eyes glowing --%3E%3Crect x='4' y='5' width='1' height='1' fill='%2306b6d4'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%2306b6d4'/%3E%3C!-- Mouth --%3E%3Crect x='5' y='7' width='2' height='1' fill='%23666'/%3E%3C!-- Robe --%3E%3Crect x='2' y='8' width='8' height='4' fill='%237c3aed'/%3E%3Crect x='3' y='9' width='6' height='2' fill='%236d28d9'/%3E%3Crect x='5' y='8' width='2' height='4' fill='%23f59e0b'/%3E%3C!-- Arms/Sleeves --%3E%3Crect x='1' y='8' width='2' height='3' fill='%237c3aed'/%3E%3Crect x='9' y='8' width='2' height='3' fill='%237c3aed'/%3E%3C!-- Hands --%3E%3Crect x='0' y='10' width='2' height='2' fill='%23fdbcb4'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%23fdbcb4'/%3E%3C!-- Robe bottom --%3E%3Crect x='2' y='12' width='8' height='2' fill='%236d28d9'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%237c3aed'/%3E%3Crect x='9' y='13' width='2' height='1' fill='%237c3aed'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ===== MAGE GIRL ===== */
.sprite-mage-girl {
  width: 48px;
  height: 56px;
  position: relative;
}
.sprite-mage-girl::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' width='48' height='56' shape-rendering='crispEdges'%3E%3C!-- Pointy hat with bow --%3E%3Crect x='5' y='0' width='2' height='1' fill='%23ec4899'/%3E%3Crect x='4' y='1' width='4' height='1' fill='%23ec4899'/%3E%3Crect x='3' y='2' width='6' height='1' fill='%23ec4899'/%3E%3Crect x='2' y='3' width='8' height='1' fill='%23db2777'/%3E%3Crect x='8' y='2' width='2' height='2' fill='%23f59e0b'/%3E%3C!-- Long hair --%3E%3Crect x='1' y='4' width='1' height='5' fill='%23a855f7'/%3E%3Crect x='10' y='4' width='1' height='5' fill='%23a855f7'/%3E%3C!-- Face --%3E%3Crect x='3' y='4' width='6' height='4' fill='%23fdbcb4'/%3E%3Crect x='2' y='5' width='1' height='2' fill='%23fdbcb4'/%3E%3Crect x='9' y='5' width='1' height='2' fill='%23fdbcb4'/%3E%3C!-- Eyes --%3E%3Crect x='4' y='5' width='2' height='1' fill='%23a855f7'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23a855f7'/%3E%3C!-- Mouth --%3E%3Crect x='5' y='7' width='2' height='1' fill='%23ec4899'/%3E%3C!-- Robe pink --%3E%3Crect x='2' y='8' width='8' height='4' fill='%23ec4899'/%3E%3Crect x='3' y='9' width='6' height='2' fill='%23db2777'/%3E%3Crect x='5' y='8' width='2' height='4' fill='%23a855f7'/%3E%3C!-- Sleeves --%3E%3Crect x='1' y='8' width='2' height='3' fill='%23ec4899'/%3E%3Crect x='9' y='8' width='2' height='3' fill='%23ec4899'/%3E%3C!-- Hands --%3E%3Crect x='0' y='10' width='2' height='2' fill='%23fdbcb4'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%23fdbcb4'/%3E%3C!-- Robe bottom --%3E%3Crect x='2' y='12' width='8' height='2' fill='%23db2777'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%23ec4899'/%3E%3Crect x='9' y='13' width='2' height='1' fill='%23ec4899'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ===== RANGER BOY ===== */
.sprite-ranger-boy {
  width: 48px;
  height: 56px;
  position: relative;
}
.sprite-ranger-boy::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' width='48' height='56' shape-rendering='crispEdges'%3E%3C!-- Hood --%3E%3Crect x='2' y='0' width='8' height='1' fill='%23166534'/%3E%3Crect x='1' y='1' width='10' height='2' fill='%23166534'/%3E%3Crect x='1' y='3' width='1' height='3' fill='%23166534'/%3E%3Crect x='10' y='3' width='1' height='3' fill='%23166534'/%3E%3C!-- Face --%3E%3Crect x='3' y='2' width='6' height='4' fill='%23fdbcb4'/%3E%3Crect x='2' y='3' width='1' height='2' fill='%23fdbcb4'/%3E%3Crect x='9' y='3' width='1' height='2' fill='%23fdbcb4'/%3E%3C!-- Eyes --%3E%3Crect x='4' y='3' width='1' height='1' fill='%23854d0e'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23854d0e'/%3E%3C!-- Smirk --%3E%3Crect x='5' y='5' width='3' height='1' fill='%23c0392b'/%3E%3C!-- Leather armor --%3E%3Crect x='2' y='6' width='8' height='4' fill='%23713f12'/%3E%3Crect x='3' y='7' width='6' height='2' fill='%23854d0e'/%3E%3Crect x='5' y='6' width='2' height='4' fill='%23a16207'/%3E%3C!-- Quiver --%3E%3Crect x='9' y='5' width='2' height='5' fill='%23713f12'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%23a16207'/%3E%3Crect x='10' y='6' width='1' height='4' fill='%23c0392b'/%3E%3C!-- Arms --%3E%3Crect x='1' y='8' width='2' height='3' fill='%23713f12'/%3E%3Crect x='9' y='8' width='2' height='3' fill='%23713f12'/%3E%3C!-- Hands --%3E%3Crect x='1' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3C!-- Legs --%3E%3Crect x='3' y='10' width='3' height='4' fill='%23166534'/%3E%3Crect x='6' y='10' width='3' height='4' fill='%23166534'/%3E%3C!-- Boots --%3E%3Crect x='2' y='13' width='4' height='1' fill='%23713f12'/%3E%3Crect x='6' y='13' width='4' height='1' fill='%23713f12'/%3E%3C!-- Belt --%3E%3Crect x='2' y='10' width='8' height='1' fill='%23a16207'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ===== RANGER GIRL ===== */
.sprite-ranger-girl {
  width: 48px;
  height: 56px;
  position: relative;
}
.sprite-ranger-girl::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' width='48' height='56' shape-rendering='crispEdges'%3E%3C!-- Ranger hat with feather --%3E%3Crect x='2' y='1' width='8' height='1' fill='%2315803d'/%3E%3Crect x='1' y='2' width='10' height='2' fill='%2316a34a'/%3E%3Crect x='9' y='0' width='2' height='2' fill='%23ef4444'/%3E%3C!-- Ponytail --%3E%3Crect x='9' y='3' width='1' height='5' fill='%23d97706'/%3E%3Crect x='10' y='4' width='1' height='4' fill='%23d97706'/%3E%3C!-- Face --%3E%3Crect x='3' y='3' width='6' height='4' fill='%23fdbcb4'/%3E%3Crect x='2' y='4' width='1' height='2' fill='%23fdbcb4'/%3E%3Crect x='9' y='4' width='1' height='2' fill='%23fdbcb4'/%3E%3C!-- Eyes --%3E%3Crect x='4' y='4' width='2' height='1' fill='%2322c55e'/%3E%3Crect x='7' y='4' width='2' height='1' fill='%2322c55e'/%3E%3C!-- Mouth --%3E%3Crect x='5' y='6' width='2' height='1' fill='%23c0392b'/%3E%3C!-- Leather vest --%3E%3Crect x='2' y='7' width='8' height='3' fill='%23713f12'/%3E%3Crect x='3' y='8' width='6' height='2' fill='%23854d0e'/%3E%3Crect x='5' y='7' width='2' height='3' fill='%23a16207'/%3E%3C!-- Cape --%3E%3Crect x='1' y='7' width='2' height='5' fill='%2316a34a'/%3E%3Crect x='9' y='7' width='2' height='5' fill='%2316a34a'/%3E%3C!-- Arms --%3E%3Crect x='1' y='9' width='2' height='2' fill='%23713f12'/%3E%3Crect x='9' y='9' width='2' height='2' fill='%23713f12'/%3E%3C!-- Hands --%3E%3Crect x='1' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23fdbcb4'/%3E%3C!-- Skirt --%3E%3Crect x='2' y='10' width='8' height='2' fill='%2316a34a'/%3E%3Crect x='3' y='12' width='3' height='2' fill='%23166534'/%3E%3Crect x='6' y='12' width='3' height='2' fill='%23166534'/%3E%3C!-- Boots --%3E%3Crect x='2' y='13' width='4' height='1' fill='%23713f12'/%3E%3Crect x='6' y='13' width='4' height='1' fill='%23713f12'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ===== WEAPON SPRITES ===== */

/* Wooden Sword */
.sprite-wpn-1 {
  width: 32px; height: 48px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' width='32' height='48' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%23a0a0a0'/%3E%3Crect x='3' y='2' width='2' height='6' fill='%238b7355'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%23c0c0c0'/%3E%3Crect x='3' y='7' width='2' height='4' fill='%236b5a3e'/%3E%3Crect x='2' y='10' width='4' height='1' fill='%23c0a050'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: weapon-shine 2s ease-in-out infinite;
}

/* Iron Sword */
.sprite-wpn-2 {
  width: 32px; height: 48px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' width='32' height='48' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='2' fill='%23e0e0e0'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%23d0d0d0'/%3E%3Crect x='3' y='2' width='2' height='6' fill='%23b0b0b0'/%3E%3Crect x='4' y='2' width='1' height='6' fill='%23c8c8c8'/%3E%3Crect x='0' y='6' width='8' height='1' fill='%23a0a0a0'/%3E%3Crect x='3' y='7' width='2' height='4' fill='%23666'/%3E%3Crect x='2' y='10' width='4' height='1' fill='%23888'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: weapon-shine 2s ease-in-out infinite;
}

/* Plasma Blade */
.sprite-wpn-3 {
  width: 32px; height: 48px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' width='32' height='48' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%2300ffff'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%2300e5e5'/%3E%3Crect x='3' y='2' width='2' height='6' fill='%2300bcd4'/%3E%3Crect x='4' y='2' width='1' height='6' fill='%2300ffff'/%3E%3Crect x='3' y='2' width='1' height='6' fill='%230097a7'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%237c3aed'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%236d28d9'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%236d28d9'/%3E%3Crect x='3' y='7' width='2' height='4' fill='%234c1d95'/%3E%3Crect x='2' y='10' width='4' height='1' fill='%237c3aed'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: sprite-pulse-glow 1.5s ease-in-out infinite;
  color: #00bcd4;
}

/* Dragon Fang */
.sprite-wpn-4 {
  width: 32px; height: 48px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' width='32' height='48' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%23ff6b00'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%23ff8c00'/%3E%3Crect x='3' y='2' width='2' height='5' fill='%23ff6b00'/%3E%3Crect x='4' y='2' width='1' height='5' fill='%23ffd700'/%3E%3Crect x='3' y='2' width='1' height='5' fill='%23e65c00'/%3E%3Crect x='2' y='4' width='1' height='2' fill='%23ff8c00'/%3E%3Crect x='5' y='4' width='1' height='2' fill='%23ff8c00'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%23cc0000'/%3E%3Crect x='3' y='7' width='2' height='5' fill='%23800000'/%3E%3Crect x='2' y='11' width='4' height='1' fill='%23cc0000'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: sprite-pulse-glow 1s ease-in-out infinite;
  color: #ff6b00;
}

/* Void Reaper */
.sprite-wpn-5 {
  width: 32px; height: 56px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' width='32' height='56' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%23c084fc'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23a855f7'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%238b5cf6'/%3E%3Crect x='0' y='2' width='3' height='2' fill='%23c084fc'/%3E%3Crect x='5' y='2' width='3' height='2' fill='%23c084fc'/%3E%3Crect x='3' y='3' width='2' height='7' fill='%236d28d9'/%3E%3Crect x='4' y='3' width='1' height='7' fill='%238b5cf6'/%3E%3Crect x='1' y='8' width='6' height='1' fill='%237c3aed'/%3E%3Crect x='3' y='10' width='2' height='4' fill='%234c1d95'/%3E%3Crect x='2' y='13' width='4' height='1' fill='%237c3aed'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: sprite-pulse-glow 0.8s ease-in-out infinite;
  color: #c084fc;
}

/* ===== ARMOUR SPRITES ===== */

/* Leather Vest */
.sprite-arm-1 {
  width: 40px; height: 40px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='6' height='1' fill='%23854d0e'/%3E%3Crect x='1' y='1' width='8' height='1' fill='%23713f12'/%3E%3Crect x='0' y='2' width='10' height='5' fill='%23713f12'/%3E%3Crect x='1' y='2' width='8' height='5' fill='%23854d0e'/%3E%3Crect x='4' y='2' width='2' height='5' fill='%23a16207'/%3E%3Crect x='1' y='4' width='2' height='2' fill='%23a16207'/%3E%3Crect x='7' y='4' width='2' height='2' fill='%23a16207'/%3E%3Crect x='0' y='7' width='10' height='1' fill='%23713f12'/%3E%3Crect x='2' y='8' width='2' height='2' fill='%23713f12'/%3E%3Crect x='6' y='8' width='2' height='2' fill='%23713f12'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: weapon-shine 3s ease-in-out infinite;
}

/* Chain Mail */
.sprite-arm-2 {
  width: 40px; height: 40px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='6' height='1' fill='%23c0c0c0'/%3E%3Crect x='1' y='1' width='8' height='1' fill='%23a0a0a0'/%3E%3Crect x='0' y='2' width='10' height='6' fill='%23888'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23a0a0a0'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='7' y='3' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='1' y='4' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23c0c0c0'/%3E%3Crect x='0' y='8' width='10' height='1' fill='%23888'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23a0a0a0'/%3E%3Crect x='6' y='9' width='2' height='1' fill='%23a0a0a0'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: weapon-shine 2.5s ease-in-out infinite;
}

/* Force Shield */
.sprite-arm-3 {
  width: 40px; height: 40px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='8' height='1' fill='%2306b6d4'/%3E%3Crect x='0' y='1' width='10' height='7' fill='%230891b2'/%3E%3Crect x='1' y='1' width='8' height='7' fill='%2306b6d4'/%3E%3Crect x='2' y='2' width='6' height='5' fill='%2322d3ee'/%3E%3Crect x='4' y='2' width='2' height='5' fill='%2367e8f9'/%3E%3Crect x='2' y='4' width='6' height='1' fill='%2367e8f9'/%3E%3Crect x='1' y='8' width='8' height='1' fill='%2306b6d4'/%3E%3Crect x='3' y='9' width='4' height='1' fill='%230891b2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: sprite-pulse-glow 2s ease-in-out infinite;
  color: #06b6d4;
}

/* Dragon Scale */
.sprite-arm-4 {
  width: 40px; height: 40px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='6' height='1' fill='%23ff6b00'/%3E%3Crect x='1' y='1' width='8' height='1' fill='%23e65c00'/%3E%3Crect x='0' y='2' width='10' height='6' fill='%23cc3300'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23e65c00'/%3E%3Crect x='1' y='2' width='3' height='2' fill='%23ff6b00'/%3E%3Crect x='4' y='3' width='3' height='2' fill='%23ff6b00'/%3E%3Crect x='7' y='2' width='2' height='2' fill='%23ff6b00'/%3E%3Crect x='1' y='5' width='3' height='2' fill='%23ff8c00'/%3E%3Crect x='4' y='6' width='3' height='2' fill='%23ff8c00'/%3E%3Crect x='7' y='5' width='2' height='2' fill='%23ff8c00'/%3E%3Crect x='0' y='8' width='10' height='1' fill='%23cc3300'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23e65c00'/%3E%3Crect x='6' y='9' width='2' height='1' fill='%23e65c00'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: sprite-pulse-glow 1.5s ease-in-out infinite;
  color: #ff6b00;
}

/* Void Plate */
.sprite-arm-5 {
  width: 40px; height: 40px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='6' height='1' fill='%23c084fc'/%3E%3Crect x='1' y='1' width='8' height='1' fill='%23a855f7'/%3E%3Crect x='0' y='2' width='10' height='6' fill='%234c1d95'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%236d28d9'/%3E%3Crect x='2' y='2' width='6' height='1' fill='%23c084fc'/%3E%3Crect x='4' y='2' width='2' height='6' fill='%238b5cf6'/%3E%3Crect x='2' y='5' width='6' height='1' fill='%238b5cf6'/%3E%3Crect x='0' y='8' width='10' height='1' fill='%234c1d95'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%236d28d9'/%3E%3Crect x='6' y='9' width='2' height='1' fill='%236d28d9'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: sprite-pulse-glow 1s ease-in-out infinite;
  color: #c084fc;
}

/* ===== HELPER: get sprite class from class+gender ===== */
/* Used in JS: getSpriteClass('Warrior', 'boy') → 'sprite-warrior-boy' */