/* ===========================================
   32-BIT PIXEL CHARACTER SYSTEM
   Complete character sprites and animations
   =========================================== */

/* Base Character Container */
.pixel-character {
  position: relative;
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  transform-origin: center bottom;
}

.pixel-character-sprite {
  width: 4px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ===========================================
   CHARACTER DESIGNS (32-bit quality)
   =========================================== */

/* HERO CHARACTER - Classic adventurer */
.pixel-character-hero .pixel-character-sprite {
  box-shadow:
    /* Head - skin tone */
    12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
    12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
    /* Hair */
    8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
    8px -28px 0 0 #4a3000, 28px -28px 0 0 #4a3000,
    /* Eyes */
    16px -24px 0 0 #000, 24px -24px 0 0 #000,
    /* Nose/Mouth */
    20px -20px 0 0 #ffb380,
    /* Body - tunic */
    8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
    12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
    /* Arms */
    8px -12px 0 0 #ffdbac, 32px -12px 0 0 #ffdbac,
    8px -8px 0 0 #ffdbac, 32px -8px 0 0 #ffdbac,
    /* Belt */
    12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
    /* Legs */
    12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
    12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
    12px 4px 0 0 #654321, 16px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
    /* Boots */
    12px 8px 0 0 #2c1810, 16px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
}

/* NINJA CHARACTER - Stealthy warrior */
.pixel-character-ninja .pixel-character-sprite {
  box-shadow:
    /* Head/mask */
    12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
    /* Mask cloth */
    8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
    8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
    8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
    /* Eyes (slanted) */
    16px -24px 0 0 #000, 24px -24px 0 0 #000,
    /* Body - tight outfit */
    8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
    8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
    12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
    /* Arms */
    8px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
    8px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
    /* Legs */
    12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor,
    12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
    12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
    12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
}

/* MAGE CHARACTER - Magic user */
.pixel-character-mage .pixel-character-sprite {
  box-shadow:
    /* Wizard hat - tall and pointy */
    20px -44px 0 0 currentColor,
    16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
    12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
    /* Hat brim */
    8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
    /* Head */
    12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
    /* Beard */
    12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
    12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
    /* Eyes */
    16px -28px 0 0 #000, 24px -28px 0 0 #000,
    /* Robe */
    8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
    4px -12px 0 0 currentColor, 8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor, 36px -12px 0 0 currentColor,
    4px -8px 0 0 currentColor, 8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor, 36px -8px 0 0 currentColor,
    /* Staff hand */
    32px -20px 0 0 #ffdbac, 36px -24px 0 0 #8b4513, 36px -28px 0 0 #8b4513, 36px -32px 0 0 #8b4513,
    /* Staff orb */
    36px -36px 0 0 #ffd700, 40px -36px 0 0 #ffd700, 36px -40px 0 0 #ffd700, 40px -40px 0 0 #ffd700,
    /* Robe bottom */
    4px -4px 0 0 currentColor, 8px -4px 0 0 currentColor, 12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 20px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor, 32px -4px 0 0 currentColor, 36px -4px 0 0 currentColor,
    8px 0px 0 0 currentColor, 12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 20px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor, 32px 0px 0 0 currentColor;
}

/* ROBOT CHARACTER - Mechanical friend */
.pixel-character-robot .pixel-character-sprite {
  box-shadow:
    /* Antenna */
    20px -36px 0 0 #ff0000, 20px -40px 0 0 #666,
    /* Head */
    12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
    12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
    12px -24px 0 0 currentColor, 16px -24px 0 0 #00ff00, 20px -24px 0 0 currentColor, 24px -24px 0 0 #00ff00, 28px -24px 0 0 currentColor,
    12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
    /* Body - boxy */
    8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
    8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #ff0000, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
    8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
    /* Arms - mechanical */
    4px -16px 0 0 #666, 4px -12px 0 0 #666, 4px -8px 0 0 #666, 4px -4px 0 0 #666,
    36px -16px 0 0 #666, 36px -12px 0 0 #666, 36px -8px 0 0 #666, 36px -4px 0 0 #666,
    /* Claws */
    0px 0px 0 0 #444, 4px 0px 0 0 #444,
    36px 0px 0 0 #444, 40px 0px 0 0 #444,
    /* Legs - treads */
    12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
    12px 0px 0 0 #333, 16px 0px 0 0 #333, 20px 0px 0 0 #333, 24px 0px 0 0 #333, 28px 0px 0 0 #333,
    12px 4px 0 0 #333, 16px 4px 0 0 #333, 20px 4px 0 0 #333, 24px 4px 0 0 #333, 28px 4px 0 0 #333;
}

/* KNIGHT CHARACTER - Armored warrior */
.pixel-character-knight .pixel-character-sprite {
  box-shadow:
    /* Helmet plume */
    16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
    /* Helmet */
    12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
    12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
    /* Visor slit */
    12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
    /* Armor body */
    8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
    8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
    8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
    /* Shield (left arm) */
    4px -16px 0 0 #4169e1, 4px -12px 0 0 #4169e1, 4px -8px 0 0 #4169e1, 4px -4px 0 0 #4169e1,
    0px -12px 0 0 #ffd700, 0px -8px 0 0 #ffd700,
    /* Sword (right arm) */
    36px -20px 0 0 #808080, 36px -24px 0 0 #808080, 36px -28px 0 0 #808080,
    36px -32px 0 0 #ffd700,
    /* Legs */
    12px -8px 0 0 #c0c0c0, 16px -8px 0 0 #c0c0c0, 24px -8px 0 0 #c0c0c0, 28px -8px 0 0 #c0c0c0,
    12px -4px 0 0 #c0c0c0, 16px -4px 0 0 #c0c0c0, 24px -4px 0 0 #c0c0c0, 28px -4px 0 0 #c0c0c0,
    12px 0px 0 0 #c0c0c0, 16px 0px 0 0 #c0c0c0, 24px 0px 0 0 #c0c0c0, 28px 0px 0 0 #c0c0c0,
    12px 4px 0 0 #808080, 16px 4px 0 0 #808080, 24px 4px 0 0 #808080, 28px 4px 0 0 #808080;
}

/* ARCHER CHARACTER - Ranged attacker */
.pixel-character-archer .pixel-character-sprite {
  box-shadow:
    /* Hood */
    8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
    /* Head */
    12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
    8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
    /* Eyes */
    16px -24px 0 0 #000, 24px -24px 0 0 #000,
    12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
    /* Body - leather armor */
    8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
    12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
    12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
    /* Bow (left hand) */
    4px -20px 0 0 #654321, 4px -16px 0 0 #654321, 4px -12px 0 0 #654321, 4px -8px 0 0 #654321, 4px -4px 0 0 #654321,
    0px -16px 0 0 #654321, 0px -12px 0 0 #654321, 0px -8px 0 0 #654321,
    /* Arrow (right hand) */
    36px -16px 0 0 #654321, 40px -16px 0 0 #654321, 44px -16px 0 0 #654321,
    48px -16px 0 0 #c0c0c0, 48px -20px 0 0 #ff0000, 48px -12px 0 0 #ff0000,
    /* Quiver on back */
    28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
    32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
    /* Legs */
    12px -8px 0 0 #654321, 16px -8px 0 0 #654321, 24px -8px 0 0 #654321, 28px -8px 0 0 #654321,
    12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
    12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
    12px 4px 0 0 #2c1810, 16px 4px 0 0 #2c1810, 24px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
}

/* ===========================================
   COLOR THEMES
   =========================================== */

.pixel-character-red { color: #ff4444; }
.pixel-character-blue { color: #4444ff; }
.pixel-character-yellow { color: #ffdd00; }
.pixel-character-green { color: #44ff44; }
.pixel-character-purple { color: #aa44ff; }
.pixel-character-orange { color: #ff8844; }
.pixel-character-cyan { color: #44ffff; }
.pixel-character-pink { color: #ff44aa; }

/* ===========================================
   ANIMATIONS
   =========================================== */

/* IDLE - Subtle breathing */
.pixel-character-idle {
  animation: char-idle 2s ease-in-out infinite;
}

@keyframes char-idle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* WALK - Alternating leg sprites with movement */
.pixel-character-walk {
  animation: char-walk-movement 0.6s linear infinite;
}

.pixel-character-hero.pixel-character-walk .pixel-character-sprite {
  animation: char-walk-hero-sprites 0.6s steps(2) infinite;
}

@keyframes char-walk-movement {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-2px);
  }
}

/* Hero walk cycle - alternating leg positions */
@keyframes char-walk-hero-sprites {
  0% {
    box-shadow:
      /* Head & Hair */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      /* Body */
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      /* Arms - left forward */
      6px -12px 0 0 #ffdbac, 4px -8px 0 0 #ffdbac, 2px -4px 0 0 #ffdbac,
      32px -16px 0 0 #ffdbac, 34px -12px 0 0 #ffdbac,
      /* Belt */
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      /* Legs - LEFT LEG FORWARD */
      10px -4px 0 0 #654321, 12px -4px 0 0 #654321,
      10px 0px 0 0 #654321, 12px 0px 0 0 #654321,
      10px 4px 0 0 #654321, 12px 4px 0 0 #654321,
      10px 8px 0 0 #2c1810, 12px 8px 0 0 #2c1810,
      /* Right leg back */
      28px -4px 0 0 #654321, 28px 0px 0 0 #654321;
  }
  50% {
    box-shadow:
      /* Head & Hair */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      /* Body */
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      /* Arms - right forward */
      32px -12px 0 0 #ffdbac, 34px -8px 0 0 #ffdbac, 36px -4px 0 0 #ffdbac,
      6px -16px 0 0 #ffdbac, 4px -12px 0 0 #ffdbac,
      /* Belt */
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      /* Legs - RIGHT LEG FORWARD */
      26px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      26px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      26px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      26px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810,
      /* Left leg back */
      12px -4px 0 0 #654321, 12px 0px 0 0 #654321;
  }
}

/* JUMP - Bouncy jump */
.pixel-character-jump {
  animation: char-jump 0.8s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

@keyframes char-jump {
  0% {
    transform: translateY(0) scaleY(1);
  }
  15% {
    transform: translateY(0) scaleY(0.85) scaleX(1.1);
  }
  40% {
    transform: translateY(-30px) scaleY(1.1) scaleX(0.95);
  }
  70% {
    transform: translateY(-35px) scaleY(1) scaleX(1);
  }
  85% {
    transform: translateY(0) scaleY(0.9) scaleX(1.05);
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
}

/* ATTACK - Quick strike with sword */
.pixel-character-attack {
  animation: char-attack-movement 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.pixel-character-hero.pixel-character-attack .pixel-character-sprite {
  animation: char-attack-hero-sprites 0.4s steps(2) forwards;
}

@keyframes char-attack-movement {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-5px);
  }
  70% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Hero attack - windup then strike with sword extended */
@keyframes char-attack-hero-sprites {
  0% {
    box-shadow:
      /* Idle pose - arms at sides */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      8px -12px 0 0 #ffdbac, 8px -8px 0 0 #ffdbac,
      32px -12px 0 0 #ffdbac, 32px -8px 0 0 #ffdbac,
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #654321, 16px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      12px 8px 0 0 #2c1810, 16px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
  }
  50%, 100% {
    box-shadow:
      /* Attack pose - SWORD EXTENDED */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      /* Left arm down */
      8px -12px 0 0 #ffdbac, 8px -8px 0 0 #ffdbac,
      /* Right arm extended holding sword */
      32px -16px 0 0 #ffdbac, 36px -16px 0 0 #ffdbac, 40px -16px 0 0 #ffdbac,
      /* SWORD BLADE */
      44px -16px 0 0 #c0c0c0, 48px -16px 0 0 #c0c0c0, 52px -16px 0 0 #c0c0c0, 56px -16px 0 0 #c0c0c0,
      60px -16px 0 0 #fff, /* sword tip */
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #654321, 16px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      12px 8px 0 0 #2c1810, 16px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
  }
}

/* CELEBRATE - Victory dance with arms up */
.pixel-character-celebrate {
  animation: char-celebrate-movement 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.pixel-character-hero.pixel-character-celebrate .pixel-character-sprite {
  animation: char-celebrate-hero-sprites 0.8s steps(2) infinite;
}

@keyframes char-celebrate-movement {
  0%, 100% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-10px);
  }
  30% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-5px);
  }
}

/* Hero celebrate - alternating arms up pose */
@keyframes char-celebrate-hero-sprites {
  0%, 100% {
    box-shadow:
      /* Head with happy eyes */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      /* Happy eyes (wide) */
      14px -24px 0 0 #000, 18px -24px 0 0 #000, 22px -24px 0 0 #000, 26px -24px 0 0 #000,
      /* Smile */
      16px -20px 0 0 #000, 20px -20px 0 0 #000, 24px -20px 0 0 #000,
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      /* Both arms DOWN */
      8px -12px 0 0 #ffdbac, 8px -8px 0 0 #ffdbac,
      32px -12px 0 0 #ffdbac, 32px -8px 0 0 #ffdbac,
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #654321, 16px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      12px 8px 0 0 #2c1810, 16px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
  }
  50% {
    box-shadow:
      /* Head with happy eyes */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      14px -24px 0 0 #000, 18px -24px 0 0 #000, 22px -24px 0 0 #000, 26px -24px 0 0 #000,
      16px -20px 0 0 #000, 20px -20px 0 0 #000, 24px -20px 0 0 #000,
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      /* Both arms UP in V shape! */
      4px -20px 0 0 #ffdbac, 0px -24px 0 0 #ffdbac, -4px -28px 0 0 #ffdbac,
      36px -20px 0 0 #ffdbac, 40px -24px 0 0 #ffdbac, 44px -28px 0 0 #ffdbac,
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #654321, 16px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      12px 8px 0 0 #2c1810, 16px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
  }
}

/* DEFEATED - Knocked out */
.pixel-character-defeated {
  animation: char-defeated-movement 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes char-defeated-movement {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  30% {
    transform: translateY(-8px) scaleY(0.95);
    opacity: 1;
  }
  60% {
    transform: translateY(10px) scaleY(0.7);
    opacity: 0.9;
  }
  100% {
    transform: translateY(12px) scaleY(0.5);
    opacity: 0.7;
  }
}

/* Hero defeated sprite animation */
.pixel-character-hero.pixel-character-defeated .pixel-character-sprite {
  animation: char-defeated-hero-sprites 0.8s steps(4) forwards;
}

@keyframes char-defeated-hero-sprites {
  0% {
    /* Standing - normal pose */
    box-shadow:
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 #4a3000, 12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 20px -32px 0 0 #4a3000, 24px -32px 0 0 #4a3000, 28px -32px 0 0 #4a3000,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      8px -12px 0 0 #ffdbac, 32px -12px 0 0 #ffdbac,
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #654321, 16px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      12px 8px 0 0 #2c1810, 16px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
  }
  25% {
    /* Stumbling - arms flailing, legs buckling */
    box-shadow:
      12px -24px 0 0 #ffdbac, 16px -24px 0 0 #ffdbac, 20px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac,
      8px -28px 0 0 #4a3000, 12px -28px 0 0 #4a3000, 16px -28px 0 0 #4a3000, 20px -28px 0 0 #4a3000, 24px -28px 0 0 #4a3000, 28px -28px 0 0 #4a3000,
      14px -20px 0 0 #000, 22px -20px 0 0 #000,
      12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor,
      4px -16px 0 0 #ffdbac, 6px -12px 0 0 #ffdbac, 34px -16px 0 0 #ffdbac, 36px -12px 0 0 #ffdbac,
      12px -8px 0 0 #8b4513, 16px -8px 0 0 #8b4513, 20px -8px 0 0 #8b4513, 24px -8px 0 0 #8b4513, 28px -8px 0 0 #8b4513,
      10px -4px 0 0 #654321, 14px -4px 0 0 #654321, 26px -4px 0 0 #654321, 30px -4px 0 0 #654321,
      10px 0px 0 0 #654321, 14px 0px 0 0 #654321, 26px 0px 0 0 #654321, 30px 0px 0 0 #654321,
      12px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
  }
  60% {
    /* Falling - body tilting horizontal, arms/legs splayed */
    box-shadow:
      4px -16px 0 0 #4a3000, 8px -16px 0 0 #4a3000, 12px -16px 0 0 #4a3000, 16px -16px 0 0 #4a3000,
      8px -12px 0 0 #ffdbac, 12px -12px 0 0 #ffdbac, 16px -12px 0 0 #ffdbac, 20px -12px 0 0 #ffdbac,
      10px -8px 0 0 #000, 14px -8px 0 0 #000,
      4px -8px 0 0 currentColor, 8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor,
      2px -4px 0 0 #ffdbac, 26px -4px 0 0 #ffdbac,
      4px -4px 0 0 #8b4513, 8px -4px 0 0 #8b4513, 12px -4px 0 0 #8b4513, 16px -4px 0 0 #8b4513, 20px -4px 0 0 #8b4513, 24px -4px 0 0 #8b4513,
      0px 0px 0 0 #654321, 4px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      0px 4px 0 0 #2c1810, 4px 4px 0 0 #2c1810, 24px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
  }
  100% {
    /* Lying on ground - fully horizontal, defeated */
    box-shadow:
      2px -12px 0 0 #4a3000, 6px -12px 0 0 #4a3000, 10px -12px 0 0 #4a3000, 14px -12px 0 0 #4a3000,
      6px -8px 0 0 #ffdbac, 10px -8px 0 0 #ffdbac, 14px -8px 0 0 #ffdbac, 18px -8px 0 0 #ffdbac,
      8px -4px 0 0 #000, 12px -4px 0 0 #000,
      2px -4px 0 0 currentColor, 6px -4px 0 0 currentColor, 10px -4px 0 0 currentColor, 14px -4px 0 0 currentColor, 18px -4px 0 0 currentColor, 22px -4px 0 0 currentColor, 26px -4px 0 0 currentColor,
      0px 0px 0 0 #ffdbac, 28px 0px 0 0 #ffdbac,
      2px 0px 0 0 #8b4513, 6px 0px 0 0 #8b4513, 10px 0px 0 0 #8b4513, 14px 0px 0 0 #8b4513, 18px 0px 0 0 #8b4513, 22px 0px 0 0 #8b4513, 26px 0px 0 0 #8b4513,
      0px 4px 0 0 #654321, 4px 4px 0 0 #654321, 24px 4px 0 0 #654321, 28px 4px 0 0 #654321,
      0px 8px 0 0 #2c1810, 4px 8px 0 0 #2c1810, 24px 8px 0 0 #2c1810, 28px 8px 0 0 #2c1810;
  }
}

/* DANCE - Funky moves */
.pixel-character-dance {
  animation: char-dance 1.2s steps(8) infinite;
}

@keyframes char-dance {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  12.5% {
    transform: translateX(-5px) translateY(-5px) rotate(-10deg);
  }
  25% {
    transform: translateX(5px) translateY(0) rotate(10deg);
  }
  37.5% {
    transform: translateX(-5px) translateY(-8px) rotate(-15deg);
  }
  50% {
    transform: translateX(0) translateY(-3px) rotate(0deg);
  }
  62.5% {
    transform: translateX(5px) translateY(-5px) rotate(15deg);
  }
  75% {
    transform: translateX(-5px) translateY(0) rotate(-10deg);
  }
  87.5% {
    transform: translateX(5px) translateY(-8px) rotate(10deg);
  }
}

/* RUN - Fast running */
.pixel-character-run {
  animation: char-run 0.4s steps(3) infinite;
}

@keyframes char-run {
  0%, 100% {
    transform: translateX(0) translateY(0) skewX(0deg);
  }
  33% {
    transform: translateX(10px) translateY(-6px) skewX(5deg);
  }
  66% {
    transform: translateX(20px) translateY(0) skewX(-5deg);
  }
}

/* SPIN - Spinning attack */
.pixel-character-spin {
  animation: char-spin 1s linear infinite;
}

@keyframes char-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* FLOAT - Hovering */
.pixel-character-float {
  animation: char-float 2.5s ease-in-out infinite;
}

@keyframes char-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* POWER UP - Charging energy */
.pixel-character-powerup {
  animation: char-powerup 1s ease-in-out infinite;
}

@keyframes char-powerup {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.5);
  }
}

/* ===========================================
   NINJA CHARACTER ANIMATIONS
   =========================================== */

/* Ninja walk cycle - alternating leg positions */
.pixel-character-ninja.pixel-character-walk .pixel-character-sprite {
  animation: char-walk-ninja-sprites 0.6s steps(2) infinite;
}

@keyframes char-walk-ninja-sprites {
  0% {
    box-shadow:
      /* Head/mask */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      /* Mask cloth */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      /* Body */
      8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
      /* Arms - left forward */
      4px -12px 0 0 currentColor, 2px -8px 0 0 currentColor,
      32px -12px 0 0 currentColor, 34px -8px 0 0 currentColor,
      /* Legs - LEFT LEG FORWARD */
      10px -8px 0 0 currentColor, 12px -8px 0 0 currentColor,
      10px -4px 0 0 currentColor, 12px -4px 0 0 currentColor,
      10px 0px 0 0 currentColor, 12px 0px 0 0 currentColor,
      10px 4px 0 0 currentColor, 12px 4px 0 0 currentColor,
      /* Right leg back */
      28px -8px 0 0 currentColor, 28px -4px 0 0 currentColor;
  }
  50% {
    box-shadow:
      /* Head/mask */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      /* Body */
      8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
      /* Arms - right forward */
      32px -12px 0 0 currentColor, 34px -8px 0 0 currentColor, 36px -4px 0 0 currentColor,
      4px -12px 0 0 currentColor, 2px -8px 0 0 currentColor,
      /* Legs - RIGHT LEG FORWARD */
      26px -8px 0 0 currentColor, 28px -8px 0 0 currentColor,
      26px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      26px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      26px 4px 0 0 currentColor, 28px 4px 0 0 currentColor,
      /* Left leg back */
      12px -8px 0 0 currentColor, 12px -4px 0 0 currentColor;
  }
}

/* Ninja attack - shuriken throw */
.pixel-character-ninja.pixel-character-attack .pixel-character-sprite {
  animation: char-attack-ninja-sprites 0.4s steps(2) forwards;
}

@keyframes char-attack-ninja-sprites {
  0% {
    box-shadow:
      /* Idle pose */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
      8px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
  50%, 100% {
    box-shadow:
      /* Throwing pose */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
      /* Arm extended throwing */
      32px -16px 0 0 currentColor, 36px -16px 0 0 currentColor, 40px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 8px -8px 0 0 currentColor,
      /* SHURIKEN */
      44px -16px 0 0 #c0c0c0, 48px -16px 0 0 #c0c0c0, 52px -16px 0 0 #c0c0c0,
      46px -18px 0 0 #c0c0c0, 46px -14px 0 0 #c0c0c0,
      12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
}

/* Ninja celebrate - victory pose */
.pixel-character-ninja.pixel-character-celebrate .pixel-character-sprite {
  animation: char-celebrate-ninja-sprites 0.8s steps(2) infinite;
}

@keyframes char-celebrate-ninja-sprites {
  0%, 100% {
    box-shadow:
      /* Normal head */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
      /* Arms down */
      8px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
  50% {
    box-shadow:
      /* Head */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      8px -24px 0 0 currentColor, 12px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      8px -20px 0 0 currentColor, 12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor, 32px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor,
      /* Arms UP in V */
      2px -20px 0 0 currentColor, -2px -24px 0 0 currentColor, -6px -28px 0 0 currentColor,
      38px -20px 0 0 currentColor, 42px -24px 0 0 currentColor, 46px -28px 0 0 currentColor,
      12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
}

/* ===========================================
   MAGE CHARACTER ANIMATIONS
   =========================================== */

/* Mage walk cycle */
.pixel-character-mage.pixel-character-walk .pixel-character-sprite {
  animation: char-walk-mage-sprites 0.6s steps(2) infinite;
}

@keyframes char-walk-mage-sprites {
  0% {
    box-shadow:
      /* Wizard hat */
      20px -44px 0 0 currentColor,
      16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
      12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      /* Head & Beard */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
      16px -28px 0 0 #000, 24px -28px 0 0 #000,
      12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
      12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
      /* Robe */
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      /* Arms - left holding staff */
      4px -16px 0 0 #ffdbac, 2px -12px 0 0 #ffdbac, 0px -8px 0 0 #ffdbac,
      36px -12px 0 0 #ffdbac,
      /* Staff */
      0px -32px 0 0 #8b4513, 0px -28px 0 0 #8b4513, 0px -24px 0 0 #8b4513, 0px -20px 0 0 #8b4513, 0px -16px 0 0 #8b4513, 0px -12px 0 0 #8b4513,
      -4px -36px 0 0 #ffd700, 0px -36px 0 0 #ffd700, 4px -36px 0 0 #ffd700,
      /* Bottom of robe - left leg forward */
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      10px -4px 0 0 currentColor, 14px -4px 0 0 currentColor, 26px -4px 0 0 currentColor, 30px -4px 0 0 currentColor,
      10px 0px 0 0 currentColor, 14px 0px 0 0 currentColor, 26px 0px 0 0 currentColor,
      10px 4px 0 0 currentColor, 14px 4px 0 0 currentColor;
  }
  50% {
    box-shadow:
      /* Wizard hat */
      20px -44px 0 0 currentColor,
      16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
      12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
      16px -28px 0 0 #000, 24px -28px 0 0 #000,
      12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
      12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      /* Arms */
      4px -16px 0 0 #ffdbac, 2px -12px 0 0 #ffdbac, 0px -8px 0 0 #ffdbac,
      36px -12px 0 0 #ffdbac,
      /* Staff */
      0px -32px 0 0 #8b4513, 0px -28px 0 0 #8b4513, 0px -24px 0 0 #8b4513, 0px -20px 0 0 #8b4513, 0px -16px 0 0 #8b4513, 0px -12px 0 0 #8b4513,
      -4px -36px 0 0 #ffd700, 0px -36px 0 0 #ffd700, 4px -36px 0 0 #ffd700,
      /* Bottom - right leg forward */
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      10px -4px 0 0 currentColor, 14px -4px 0 0 currentColor, 26px -4px 0 0 currentColor, 30px -4px 0 0 currentColor,
      26px 0px 0 0 currentColor, 30px 0px 0 0 currentColor,
      26px 4px 0 0 currentColor, 30px 4px 0 0 currentColor;
  }
}

/* Mage attack - spell cast */
.pixel-character-mage.pixel-character-attack .pixel-character-sprite {
  animation: char-attack-mage-sprites 0.4s steps(2) forwards;
}

@keyframes char-attack-mage-sprites {
  0% {
    box-shadow:
      /* Normal idle */
      20px -44px 0 0 currentColor,
      16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
      12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
      16px -28px 0 0 #000, 24px -28px 0 0 #000,
      12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
      12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      4px -16px 0 0 #ffdbac, 36px -12px 0 0 #ffdbac,
      0px -32px 0 0 #8b4513, 0px -28px 0 0 #8b4513, 0px -24px 0 0 #8b4513, 0px -20px 0 0 #8b4513, 0px -16px 0 0 #8b4513,
      -4px -36px 0 0 #ffd700, 0px -36px 0 0 #ffd700, 4px -36px 0 0 #ffd700,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
  50%, 100% {
    box-shadow:
      /* Casting spell */
      20px -44px 0 0 currentColor,
      16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
      12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
      16px -28px 0 0 #000, 24px -28px 0 0 #000,
      12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
      12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      /* Left arm with staff */
      4px -16px 0 0 #ffdbac, 2px -12px 0 0 #ffdbac, 0px -8px 0 0 #ffdbac,
      0px -32px 0 0 #8b4513, 0px -28px 0 0 #8b4513, 0px -24px 0 0 #8b4513, 0px -20px 0 0 #8b4513, 0px -16px 0 0 #8b4513, 0px -12px 0 0 #8b4513,
      /* Staff orb glowing */
      -4px -36px 0 0 #ffd700, 0px -36px 0 0 #ffd700, 4px -36px 0 0 #ffd700,
      -8px -36px 0 0 #ff0, 8px -36px 0 0 #ff0, 0px -40px 0 0 #ff0,
      /* Right arm extended casting */
      36px -16px 0 0 #ffdbac, 40px -16px 0 0 #ffdbac, 44px -16px 0 0 #ffdbac,
      /* MAGIC SPELL */
      48px -16px 0 0 #9370db, 52px -16px 0 0 #9370db, 56px -16px 0 0 #ff0,
      50px -20px 0 0 #9370db, 50px -12px 0 0 #9370db,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
}

/* Mage celebrate */
.pixel-character-mage.pixel-character-celebrate .pixel-character-sprite {
  animation: char-celebrate-mage-sprites 0.8s steps(2) infinite;
}

@keyframes char-celebrate-mage-sprites {
  0%, 100% {
    box-shadow:
      /* Hat */
      20px -44px 0 0 currentColor,
      16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
      12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
      16px -28px 0 0 #000, 24px -28px 0 0 #000,
      12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
      12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      /* Arms down */
      4px -16px 0 0 #ffdbac, 36px -12px 0 0 #ffdbac,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
  50% {
    box-shadow:
      /* Hat */
      20px -44px 0 0 currentColor,
      16px -40px 0 0 currentColor, 20px -40px 0 0 currentColor, 24px -40px 0 0 currentColor,
      12px -36px 0 0 currentColor, 16px -36px 0 0 currentColor, 20px -36px 0 0 currentColor, 24px -36px 0 0 currentColor, 28px -36px 0 0 currentColor,
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac, 28px -28px 0 0 #ffdbac,
      16px -28px 0 0 #000, 24px -28px 0 0 #000,
      12px -24px 0 0 #d0d0d0, 16px -24px 0 0 #ffdbac, 24px -24px 0 0 #ffdbac, 28px -24px 0 0 #d0d0d0,
      12px -20px 0 0 #d0d0d0, 16px -20px 0 0 #d0d0d0, 20px -20px 0 0 #ffdbac, 24px -20px 0 0 #d0d0d0, 28px -20px 0 0 #d0d0d0,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 currentColor,
      /* Both arms UP in celebration */
      -2px -24px 0 0 #ffdbac, -6px -28px 0 0 #ffdbac, -10px -32px 0 0 #ffdbac,
      42px -20px 0 0 #ffdbac, 46px -24px 0 0 #ffdbac, 50px -28px 0 0 #ffdbac,
      /* Sparkles */
      -8px -36px 0 0 #ffd700, 52px -32px 0 0 #ffd700,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 currentColor, 16px 0px 0 0 currentColor, 24px 0px 0 0 currentColor, 28px 0px 0 0 currentColor,
      12px 4px 0 0 currentColor, 16px 4px 0 0 currentColor, 24px 4px 0 0 currentColor, 28px 4px 0 0 currentColor;
  }
}

/* ===========================================
   ROBOT CHARACTER ANIMATIONS
   =========================================== */

/* Robot walk cycle */
.pixel-character-robot.pixel-character-walk .pixel-character-sprite {
  animation: char-walk-robot-sprites 0.6s steps(2) infinite;
}

@keyframes char-walk-robot-sprites {
  0% {
    box-shadow:
      /* Antenna */
      20px -36px 0 0 #ff0000, 20px -40px 0 0 #666,
      /* Head */
      12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
      12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      12px -24px 0 0 currentColor, 16px -24px 0 0 #00ff00, 20px -24px 0 0 currentColor, 24px -24px 0 0 #00ff00, 28px -24px 0 0 currentColor,
      12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
      /* Body */
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #ff0000, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      /* Arms - left extended */
      4px -16px 0 0 #666, 2px -12px 0 0 #666, 0px -8px 0 0 #666, -2px -4px 0 0 #666,
      36px -16px 0 0 #666, 38px -12px 0 0 #666,
      /* Claws */
      -4px 0px 0 0 #444, 0px 0px 0 0 #444,
      38px 0px 0 0 #444, 42px 0px 0 0 #444,
      /* Legs - LEFT FORWARD */
      10px -4px 0 0 currentColor, 14px -4px 0 0 currentColor,
      10px 0px 0 0 #333, 14px 0px 0 0 #333, 20px 0px 0 0 #333,
      10px 4px 0 0 #333, 14px 4px 0 0 #333, 20px 4px 0 0 #333,
      /* Right leg back */
      26px -4px 0 0 currentColor, 26px 0px 0 0 #333;
  }
  50% {
    box-shadow:
      /* Antenna */
      20px -36px 0 0 #ff0000, 20px -40px 0 0 #666,
      /* Head */
      12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
      12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      12px -24px 0 0 currentColor, 16px -24px 0 0 #00ff00, 20px -24px 0 0 currentColor, 24px -24px 0 0 #00ff00, 28px -24px 0 0 currentColor,
      12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
      /* Body */
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #ff0000, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      /* Arms - right extended */
      4px -16px 0 0 #666, 2px -12px 0 0 #666,
      36px -16px 0 0 #666, 38px -12px 0 0 #666, 40px -8px 0 0 #666, 42px -4px 0 0 #666,
      /* Claws */
      -2px 0px 0 0 #444, 2px 0px 0 0 #444,
      42px 0px 0 0 #444, 46px 0px 0 0 #444,
      /* Legs - RIGHT FORWARD */
      26px -4px 0 0 currentColor, 30px -4px 0 0 currentColor,
      20px 0px 0 0 #333, 26px 0px 0 0 #333, 30px 0px 0 0 #333,
      20px 4px 0 0 #333, 26px 4px 0 0 #333, 30px 4px 0 0 #333,
      /* Left leg back */
      14px -4px 0 0 currentColor, 14px 0px 0 0 #333;
  }
}

/* Robot attack - laser blast */
.pixel-character-robot.pixel-character-attack .pixel-character-sprite {
  animation: char-attack-robot-sprites 0.4s steps(2) forwards;
}

@keyframes char-attack-robot-sprites {
  0% {
    box-shadow:
      /* Idle */
      20px -36px 0 0 #ff0000, 20px -40px 0 0 #666,
      12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
      12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      12px -24px 0 0 currentColor, 16px -24px 0 0 #00ff00, 20px -24px 0 0 currentColor, 24px -24px 0 0 #00ff00, 28px -24px 0 0 currentColor,
      12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #ff0000, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      4px -16px 0 0 #666, 4px -12px 0 0 #666, 4px -8px 0 0 #666, 4px -4px 0 0 #666,
      36px -16px 0 0 #666, 36px -12px 0 0 #666, 36px -8px 0 0 #666, 36px -4px 0 0 #666,
      0px 0px 0 0 #444, 4px 0px 0 0 #444, 36px 0px 0 0 #444, 40px 0px 0 0 #444,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 #333, 16px 0px 0 0 #333, 20px 0px 0 0 #333, 24px 0px 0 0 #333, 28px 0px 0 0 #333,
      12px 4px 0 0 #333, 16px 4px 0 0 #333, 20px 4px 0 0 #333, 24px 4px 0 0 #333, 28px 4px 0 0 #333;
  }
  50%, 100% {
    box-shadow:
      /* Antenna flashing */
      20px -36px 0 0 #ff0, 20px -40px 0 0 #666,
      /* Head - eyes glowing red */
      12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
      12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      12px -24px 0 0 currentColor, 16px -24px 0 0 #ff0000, 20px -24px 0 0 currentColor, 24px -24px 0 0 #ff0000, 28px -24px 0 0 currentColor,
      12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #ff0000, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      /* Left arm */
      4px -16px 0 0 #666, 4px -12px 0 0 #666, 4px -8px 0 0 #666, 4px -4px 0 0 #666,
      0px 0px 0 0 #444, 4px 0px 0 0 #444,
      /* Right arm EXTENDED with laser */
      36px -12px 0 0 #666, 40px -12px 0 0 #666, 44px -12px 0 0 #666,
      40px 0px 0 0 #444, 44px 0px 0 0 #444,
      /* LASER BEAM */
      48px -12px 0 0 #ff0, 52px -12px 0 0 #ff0, 56px -12px 0 0 #ff0, 60px -12px 0 0 #ff0,
      50px -14px 0 0 #ff0, 50px -10px 0 0 #ff0,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 #333, 16px 0px 0 0 #333, 20px 0px 0 0 #333, 24px 0px 0 0 #333, 28px 0px 0 0 #333,
      12px 4px 0 0 #333, 16px 4px 0 0 #333, 20px 4px 0 0 #333, 24px 4px 0 0 #333, 28px 4px 0 0 #333;
  }
}

/* Robot celebrate */
.pixel-character-robot.pixel-character-celebrate .pixel-character-sprite {
  animation: char-celebrate-robot-sprites 0.8s steps(2) infinite;
}

@keyframes char-celebrate-robot-sprites {
  0%, 100% {
    box-shadow:
      /* Antenna */
      20px -36px 0 0 #ff0000, 20px -40px 0 0 #666,
      12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
      12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      12px -24px 0 0 currentColor, 16px -24px 0 0 #00ff00, 20px -24px 0 0 currentColor, 24px -24px 0 0 #00ff00, 28px -24px 0 0 currentColor,
      12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #ff0000, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      /* Arms down */
      4px -16px 0 0 #666, 4px -12px 0 0 #666, 4px -8px 0 0 #666, 4px -4px 0 0 #666,
      36px -16px 0 0 #666, 36px -12px 0 0 #666, 36px -8px 0 0 #666, 36px -4px 0 0 #666,
      0px 0px 0 0 #444, 4px 0px 0 0 #444, 36px 0px 0 0 #444, 40px 0px 0 0 #444,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 #333, 16px 0px 0 0 #333, 20px 0px 0 0 #333, 24px 0px 0 0 #333, 28px 0px 0 0 #333,
      12px 4px 0 0 #333, 16px 4px 0 0 #333, 20px 4px 0 0 #333, 24px 4px 0 0 #333, 28px 4px 0 0 #333;
  }
  50% {
    box-shadow:
      /* Antenna blinking */
      20px -36px 0 0 #00ff00, 20px -40px 0 0 #666,
      12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor,
      12px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      /* Happy eyes */
      12px -24px 0 0 currentColor, 14px -24px 0 0 #00ff00, 18px -24px 0 0 #00ff00, 20px -24px 0 0 currentColor, 22px -24px 0 0 #00ff00, 26px -24px 0 0 #00ff00, 28px -24px 0 0 currentColor,
      12px -20px 0 0 currentColor, 16px -20px 0 0 currentColor, 20px -20px 0 0 currentColor, 24px -20px 0 0 currentColor, 28px -20px 0 0 currentColor,
      8px -16px 0 0 currentColor, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 currentColor,
      8px -12px 0 0 currentColor, 12px -12px 0 0 #444, 16px -12px 0 0 #444, 20px -12px 0 0 #00ff00, 24px -12px 0 0 #444, 28px -12px 0 0 #444, 32px -12px 0 0 currentColor,
      8px -8px 0 0 currentColor, 12px -8px 0 0 currentColor, 16px -8px 0 0 currentColor, 20px -8px 0 0 currentColor, 24px -8px 0 0 currentColor, 28px -8px 0 0 currentColor, 32px -8px 0 0 currentColor,
      /* Arms UP */
      0px -24px 0 0 #666, -4px -28px 0 0 #666, -8px -32px 0 0 #666,
      40px -24px 0 0 #666, 44px -28px 0 0 #666, 48px -32px 0 0 #666,
      -8px -36px 0 0 #444, -4px -36px 0 0 #444, 48px -36px 0 0 #444, 52px -36px 0 0 #444,
      12px -4px 0 0 currentColor, 16px -4px 0 0 currentColor, 24px -4px 0 0 currentColor, 28px -4px 0 0 currentColor,
      12px 0px 0 0 #333, 16px 0px 0 0 #333, 20px 0px 0 0 #333, 24px 0px 0 0 #333, 28px 0px 0 0 #333,
      12px 4px 0 0 #333, 16px 4px 0 0 #333, 20px 4px 0 0 #333, 24px 4px 0 0 #333, 28px 4px 0 0 #333;
  }
}

/* ===========================================
   KNIGHT CHARACTER ANIMATIONS
   =========================================== */

/* Knight walk cycle */
.pixel-character-knight.pixel-character-walk .pixel-character-sprite {
  animation: char-walk-knight-sprites 0.6s steps(2) infinite;
}

@keyframes char-walk-knight-sprites {
  0% {
    box-shadow:
      /* Helmet plume */
      16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
      /* Helmet */
      12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
      12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
      12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
      /* Body */
      8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
      8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
      8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
      /* Shield (left arm forward) */
      2px -16px 0 0 #4169e1, 2px -12px 0 0 #4169e1, 2px -8px 0 0 #4169e1, 2px -4px 0 0 #4169e1,
      -2px -12px 0 0 #ffd700, -2px -8px 0 0 #ffd700,
      /* Sword (right arm) */
      36px -20px 0 0 #808080, 36px -24px 0 0 #808080, 36px -28px 0 0 #808080, 36px -32px 0 0 #ffd700,
      /* Legs - LEFT FORWARD */
      10px -8px 0 0 #c0c0c0, 14px -8px 0 0 #c0c0c0,
      10px -4px 0 0 #c0c0c0, 14px -4px 0 0 #c0c0c0,
      10px 0px 0 0 #c0c0c0, 14px 0px 0 0 #c0c0c0,
      10px 4px 0 0 #808080, 14px 4px 0 0 #808080,
      /* Right leg back */
      26px -8px 0 0 #c0c0c0, 26px -4px 0 0 #c0c0c0;
  }
  50% {
    box-shadow:
      /* Helmet plume */
      16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
      /* Helmet */
      12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
      12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
      12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
      8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
      8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
      8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
      /* Shield (left arm) */
      4px -16px 0 0 #4169e1, 4px -12px 0 0 #4169e1, 4px -8px 0 0 #4169e1, 4px -4px 0 0 #4169e1,
      0px -12px 0 0 #ffd700, 0px -8px 0 0 #ffd700,
      /* Sword */
      36px -20px 0 0 #808080, 36px -24px 0 0 #808080, 36px -28px 0 0 #808080, 36px -32px 0 0 #ffd700,
      /* Legs - RIGHT FORWARD */
      26px -8px 0 0 #c0c0c0, 30px -8px 0 0 #c0c0c0,
      26px -4px 0 0 #c0c0c0, 30px -4px 0 0 #c0c0c0,
      26px 0px 0 0 #c0c0c0, 30px 0px 0 0 #c0c0c0,
      26px 4px 0 0 #808080, 30px 4px 0 0 #808080,
      /* Left leg back */
      14px -8px 0 0 #c0c0c0, 14px -4px 0 0 #c0c0c0;
  }
}

/* Knight attack - shield bash */
.pixel-character-knight.pixel-character-attack .pixel-character-sprite {
  animation: char-attack-knight-sprites 0.4s steps(2) forwards;
}

@keyframes char-attack-knight-sprites {
  0% {
    box-shadow:
      /* Idle */
      16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
      12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
      12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
      12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
      8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
      8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
      8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
      4px -16px 0 0 #4169e1, 4px -12px 0 0 #4169e1, 4px -8px 0 0 #4169e1, 4px -4px 0 0 #4169e1,
      0px -12px 0 0 #ffd700, 0px -8px 0 0 #ffd700,
      36px -20px 0 0 #808080, 36px -24px 0 0 #808080, 36px -28px 0 0 #808080, 36px -32px 0 0 #ffd700,
      12px -8px 0 0 #c0c0c0, 16px -8px 0 0 #c0c0c0, 24px -8px 0 0 #c0c0c0, 28px -8px 0 0 #c0c0c0,
      12px -4px 0 0 #c0c0c0, 16px -4px 0 0 #c0c0c0, 24px -4px 0 0 #c0c0c0, 28px -4px 0 0 #c0c0c0,
      12px 0px 0 0 #c0c0c0, 16px 0px 0 0 #c0c0c0, 24px 0px 0 0 #c0c0c0, 28px 0px 0 0 #c0c0c0,
      12px 4px 0 0 #808080, 16px 4px 0 0 #808080, 24px 4px 0 0 #808080, 28px 4px 0 0 #808080;
  }
  50%, 100% {
    box-shadow:
      /* Shield bash - shield pushed forward */
      16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
      12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
      12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
      12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
      8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
      8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
      8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
      /* SHIELD EXTENDED FORWARD */
      -8px -16px 0 0 #4169e1, -8px -12px 0 0 #4169e1, -8px -8px 0 0 #4169e1, -8px -4px 0 0 #4169e1,
      -4px -16px 0 0 #4169e1, -4px -12px 0 0 #4169e1, -4px -8px 0 0 #4169e1, -4px -4px 0 0 #4169e1,
      0px -16px 0 0 #4169e1, 0px -12px 0 0 #ffd700, 0px -8px 0 0 #ffd700, 0px -4px 0 0 #4169e1,
      4px -16px 0 0 #4169e1, 4px -12px 0 0 #4169e1, 4px -8px 0 0 #4169e1, 4px -4px 0 0 #4169e1,
      /* Sword raised */
      34px -28px 0 0 #808080, 34px -32px 0 0 #808080, 34px -36px 0 0 #808080, 34px -40px 0 0 #ffd700,
      12px -8px 0 0 #c0c0c0, 16px -8px 0 0 #c0c0c0, 24px -8px 0 0 #c0c0c0, 28px -8px 0 0 #c0c0c0,
      12px -4px 0 0 #c0c0c0, 16px -4px 0 0 #c0c0c0, 24px -4px 0 0 #c0c0c0, 28px -4px 0 0 #c0c0c0,
      12px 0px 0 0 #c0c0c0, 16px 0px 0 0 #c0c0c0, 24px 0px 0 0 #c0c0c0, 28px 0px 0 0 #c0c0c0,
      12px 4px 0 0 #808080, 16px 4px 0 0 #808080, 24px 4px 0 0 #808080, 28px 4px 0 0 #808080;
  }
}

/* Knight celebrate */
.pixel-character-knight.pixel-character-celebrate .pixel-character-sprite {
  animation: char-celebrate-knight-sprites 0.8s steps(2) infinite;
}

@keyframes char-celebrate-knight-sprites {
  0%, 100% {
    box-shadow:
      /* Plume */
      16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
      12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
      12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
      12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
      8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
      8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
      8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
      /* Arms down */
      4px -16px 0 0 #4169e1, 4px -12px 0 0 #4169e1, 4px -8px 0 0 #4169e1, 4px -4px 0 0 #4169e1,
      0px -12px 0 0 #ffd700, 0px -8px 0 0 #ffd700,
      36px -20px 0 0 #808080, 36px -24px 0 0 #808080, 36px -28px 0 0 #808080, 36px -32px 0 0 #ffd700,
      12px -8px 0 0 #c0c0c0, 16px -8px 0 0 #c0c0c0, 24px -8px 0 0 #c0c0c0, 28px -8px 0 0 #c0c0c0,
      12px -4px 0 0 #c0c0c0, 16px -4px 0 0 #c0c0c0, 24px -4px 0 0 #c0c0c0, 28px -4px 0 0 #c0c0c0,
      12px 0px 0 0 #c0c0c0, 16px 0px 0 0 #c0c0c0, 24px 0px 0 0 #c0c0c0, 28px 0px 0 0 #c0c0c0,
      12px 4px 0 0 #808080, 16px 4px 0 0 #808080, 24px 4px 0 0 #808080, 28px 4px 0 0 #808080;
  }
  50% {
    box-shadow:
      /* Plume */
      16px -36px 0 0 #ff0000, 20px -36px 0 0 #ff0000, 24px -36px 0 0 #ff0000,
      12px -32px 0 0 #c0c0c0, 16px -32px 0 0 #c0c0c0, 20px -32px 0 0 #c0c0c0, 24px -32px 0 0 #c0c0c0, 28px -32px 0 0 #c0c0c0,
      12px -28px 0 0 #c0c0c0, 16px -28px 0 0 #c0c0c0, 24px -28px 0 0 #c0c0c0, 28px -28px 0 0 #c0c0c0,
      12px -24px 0 0 #c0c0c0, 16px -24px 0 0 #000, 20px -24px 0 0 #000, 24px -24px 0 0 #000, 28px -24px 0 0 #c0c0c0,
      8px -20px 0 0 #c0c0c0, 12px -20px 0 0 #c0c0c0, 16px -20px 0 0 #c0c0c0, 20px -20px 0 0 #c0c0c0, 24px -20px 0 0 #c0c0c0, 28px -20px 0 0 #c0c0c0, 32px -20px 0 0 #c0c0c0,
      8px -16px 0 0 #c0c0c0, 12px -16px 0 0 currentColor, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 currentColor, 32px -16px 0 0 #c0c0c0,
      8px -12px 0 0 #c0c0c0, 12px -12px 0 0 currentColor, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 currentColor, 32px -12px 0 0 #c0c0c0,
      /* BOTH ARMS UP - sword raised high */
      -4px -24px 0 0 #4169e1, -8px -28px 0 0 #4169e1, -12px -32px 0 0 #4169e1,
      -8px -24px 0 0 #ffd700,
      40px -28px 0 0 #808080, 44px -32px 0 0 #808080, 48px -36px 0 0 #808080, 52px -40px 0 0 #ffd700,
      42px -24px 0 0 #c0c0c0,
      12px -8px 0 0 #c0c0c0, 16px -8px 0 0 #c0c0c0, 24px -8px 0 0 #c0c0c0, 28px -8px 0 0 #c0c0c0,
      12px -4px 0 0 #c0c0c0, 16px -4px 0 0 #c0c0c0, 24px -4px 0 0 #c0c0c0, 28px -4px 0 0 #c0c0c0,
      12px 0px 0 0 #c0c0c0, 16px 0px 0 0 #c0c0c0, 24px 0px 0 0 #c0c0c0, 28px 0px 0 0 #c0c0c0,
      12px 4px 0 0 #808080, 16px 4px 0 0 #808080, 24px 4px 0 0 #808080, 28px 4px 0 0 #808080;
  }
}

/* ===========================================
   ARCHER CHARACTER ANIMATIONS
   =========================================== */

/* Archer walk cycle */
.pixel-character-archer.pixel-character-walk .pixel-character-sprite {
  animation: char-walk-archer-sprites 0.6s steps(2) infinite;
}

@keyframes char-walk-archer-sprites {
  0% {
    box-shadow:
      /* Hood */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      /* Head */
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
      /* Body */
      8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
      12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
      12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
      /* Bow (left hand) */
      4px -20px 0 0 #654321, 4px -16px 0 0 #654321, 4px -12px 0 0 #654321, 4px -8px 0 0 #654321, 4px -4px 0 0 #654321,
      0px -16px 0 0 #654321, 0px -12px 0 0 #654321, 0px -8px 0 0 #654321,
      /* Quiver */
      28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
      32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
      /* Legs - LEFT FORWARD */
      10px -8px 0 0 #654321, 14px -8px 0 0 #654321,
      10px -4px 0 0 #654321, 14px -4px 0 0 #654321,
      10px 0px 0 0 #654321, 14px 0px 0 0 #654321,
      10px 4px 0 0 #2c1810, 14px 4px 0 0 #2c1810,
      /* Right leg back */
      26px -8px 0 0 #654321, 26px -4px 0 0 #654321;
  }
  50% {
    box-shadow:
      /* Hood */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
      8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
      12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
      12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
      /* Bow */
      4px -20px 0 0 #654321, 4px -16px 0 0 #654321, 4px -12px 0 0 #654321, 4px -8px 0 0 #654321, 4px -4px 0 0 #654321,
      0px -16px 0 0 #654321, 0px -12px 0 0 #654321, 0px -8px 0 0 #654321,
      /* Quiver */
      28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
      32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
      /* Legs - RIGHT FORWARD */
      26px -8px 0 0 #654321, 30px -8px 0 0 #654321,
      26px -4px 0 0 #654321, 30px -4px 0 0 #654321,
      26px 0px 0 0 #654321, 30px 0px 0 0 #654321,
      26px 4px 0 0 #2c1810, 30px 4px 0 0 #2c1810,
      /* Left leg back */
      14px -8px 0 0 #654321, 14px -4px 0 0 #654321;
  }
}

/* Archer attack - bow shot */
.pixel-character-archer.pixel-character-attack .pixel-character-sprite {
  animation: char-attack-archer-sprites 0.4s steps(2) forwards;
}

@keyframes char-attack-archer-sprites {
  0% {
    box-shadow:
      /* Idle - arrow nocked */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
      8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
      12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
      12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
      /* Bow held */
      4px -20px 0 0 #654321, 4px -16px 0 0 #654321, 4px -12px 0 0 #654321, 4px -8px 0 0 #654321, 4px -4px 0 0 #654321,
      0px -16px 0 0 #654321, 0px -12px 0 0 #654321, 0px -8px 0 0 #654321,
      /* Arrow ready */
      8px -16px 0 0 #654321, 12px -16px 0 0 #654321, 16px -16px 0 0 #654321,
      20px -16px 0 0 #c0c0c0, 20px -20px 0 0 #ff0000, 20px -12px 0 0 #ff0000,
      28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
      32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
      12px -8px 0 0 #654321, 16px -8px 0 0 #654321, 24px -8px 0 0 #654321, 28px -8px 0 0 #654321,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #2c1810, 16px 4px 0 0 #2c1810, 24px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
  }
  50%, 100% {
    box-shadow:
      /* ARROW RELEASED */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
      8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
      12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
      12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
      /* Bow extended */
      -4px -20px 0 0 #654321, -4px -16px 0 0 #654321, -4px -12px 0 0 #654321, -4px -8px 0 0 #654321, -4px -4px 0 0 #654321,
      -8px -16px 0 0 #654321, -8px -12px 0 0 #654321, -8px -8px 0 0 #654321,
      /* ARROW IN FLIGHT */
      36px -16px 0 0 #654321, 40px -16px 0 0 #654321, 44px -16px 0 0 #654321, 48px -16px 0 0 #654321, 52px -16px 0 0 #654321,
      56px -16px 0 0 #c0c0c0, 56px -20px 0 0 #ff0000, 56px -12px 0 0 #ff0000,
      28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
      32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
      12px -8px 0 0 #654321, 16px -8px 0 0 #654321, 24px -8px 0 0 #654321, 28px -8px 0 0 #654321,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #2c1810, 16px 4px 0 0 #2c1810, 24px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
  }
}

/* Archer celebrate */
.pixel-character-archer.pixel-character-celebrate .pixel-character-sprite {
  animation: char-celebrate-archer-sprites 0.8s steps(2) infinite;
}

@keyframes char-celebrate-archer-sprites {
  0%, 100% {
    box-shadow:
      /* Hood */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
      8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
      12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
      12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
      /* Arms down */
      4px -20px 0 0 #654321, 4px -16px 0 0 #654321, 4px -12px 0 0 #654321, 4px -8px 0 0 #654321, 4px -4px 0 0 #654321,
      0px -16px 0 0 #654321, 0px -12px 0 0 #654321, 0px -8px 0 0 #654321,
      28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
      32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
      12px -8px 0 0 #654321, 16px -8px 0 0 #654321, 24px -8px 0 0 #654321, 28px -8px 0 0 #654321,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #2c1810, 16px 4px 0 0 #2c1810, 24px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
  }
  50% {
    box-shadow:
      /* Hood */
      8px -32px 0 0 currentColor, 12px -32px 0 0 currentColor, 16px -32px 0 0 currentColor, 20px -32px 0 0 currentColor, 24px -32px 0 0 currentColor, 28px -32px 0 0 currentColor, 32px -32px 0 0 currentColor,
      12px -28px 0 0 #ffdbac, 16px -28px 0 0 #ffdbac, 20px -28px 0 0 #ffdbac, 24px -28px 0 0 #ffdbac,
      8px -28px 0 0 currentColor, 28px -28px 0 0 currentColor,
      16px -24px 0 0 #000, 24px -24px 0 0 #000,
      12px -24px 0 0 #ffdbac, 28px -24px 0 0 #ffdbac,
      8px -20px 0 0 #8b4513, 12px -20px 0 0 #8b4513, 16px -20px 0 0 #8b4513, 20px -20px 0 0 #8b4513, 24px -20px 0 0 #8b4513, 28px -20px 0 0 #8b4513, 32px -20px 0 0 #8b4513,
      12px -16px 0 0 #8b4513, 16px -16px 0 0 currentColor, 20px -16px 0 0 currentColor, 24px -16px 0 0 currentColor, 28px -16px 0 0 #8b4513,
      12px -12px 0 0 #8b4513, 16px -12px 0 0 currentColor, 20px -12px 0 0 currentColor, 24px -12px 0 0 currentColor, 28px -12px 0 0 #8b4513,
      /* BOTH ARMS UP with bow raised */
      -2px -28px 0 0 #654321, -6px -32px 0 0 #654321, -10px -36px 0 0 #654321,
      -14px -32px 0 0 #654321, -14px -28px 0 0 #654321, -14px -24px 0 0 #654321,
      42px -24px 0 0 #ffdbac, 46px -28px 0 0 #ffdbac, 50px -32px 0 0 #ffdbac,
      28px -24px 0 0 #654321, 28px -20px 0 0 #654321,
      32px -28px 0 0 #8b4513, 32px -24px 0 0 #654321,
      12px -8px 0 0 #654321, 16px -8px 0 0 #654321, 24px -8px 0 0 #654321, 28px -8px 0 0 #654321,
      12px -4px 0 0 #654321, 16px -4px 0 0 #654321, 24px -4px 0 0 #654321, 28px -4px 0 0 #654321,
      12px 0px 0 0 #654321, 16px 0px 0 0 #654321, 24px 0px 0 0 #654321, 28px 0px 0 0 #654321,
      12px 4px 0 0 #2c1810, 16px 4px 0 0 #2c1810, 24px 4px 0 0 #2c1810, 28px 4px 0 0 #2c1810;
  }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Make character clickable */
.pixel-character.clickable {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pixel-character.clickable:hover {
  transform: scale(1.1) translateY(-2px);
}

.pixel-character.clickable:active {
  transform: scale(0.95);
}

/* Shadow effect */
/* Shadow and glow effects removed per user request */