/* ===== CSS Pixel Art Sprites ===== */
/* Characters are rendered via box-shadow pixel art technique */
/* Colors are controlled by CSS custom properties for easy customization */

.pixel-character {
  --hat: #7B2D8E;
  --robe: #4A148C;
  --skin: #FFDBB4;
  --belt: #5D4037;
  --shoe: #3E2723;
  --staff: #8D6E63;
  --highlight: #CE93D8;

  width: 1px;
  height: 1px;
  transform: scale(4);
  transform-origin: top left;
}

/* Witch sprite - pointed hat, robe, broom */
.pixel-witch {
  box-shadow:
    /* Hat tip */
    5px 0px var(--hat),
    4px 1px var(--hat), 5px 1px var(--hat), 6px 1px var(--hat),
    /* Hat brim */
    3px 2px var(--hat), 4px 2px var(--hat), 5px 2px var(--hat), 6px 2px var(--hat), 7px 2px var(--hat),
    2px 3px var(--hat), 3px 3px var(--hat), 4px 3px var(--hat), 5px 3px var(--hat), 6px 3px var(--hat), 7px 3px var(--hat), 8px 3px var(--hat),
    /* Face */
    4px 4px var(--skin), 5px 4px var(--skin), 6px 4px var(--skin),
    4px 5px var(--skin), 5px 5px #333, 6px 5px #333,
    4px 6px var(--skin), 5px 6px var(--skin), 6px 6px var(--skin),
    /* Neck */
    5px 7px var(--skin),
    /* Robe top */
    3px 8px var(--robe), 4px 8px var(--robe), 5px 8px var(--robe), 6px 8px var(--robe), 7px 8px var(--robe),
    3px 9px var(--robe), 4px 9px var(--robe), 5px 9px var(--highlight), 6px 9px var(--robe), 7px 9px var(--robe),
    /* Belt */
    3px 10px var(--belt), 4px 10px var(--belt), 5px 10px var(--belt), 6px 10px var(--belt), 7px 10px var(--belt),
    /* Robe bottom */
    3px 11px var(--robe), 4px 11px var(--robe), 5px 11px var(--robe), 6px 11px var(--robe), 7px 11px var(--robe),
    2px 12px var(--robe), 3px 12px var(--robe), 4px 12px var(--robe), 5px 12px var(--robe), 6px 12px var(--robe), 7px 12px var(--robe), 8px 12px var(--robe),
    /* Shoes */
    3px 13px var(--shoe), 4px 13px var(--shoe), 6px 13px var(--shoe), 7px 13px var(--shoe);
}

/* Wizard sprite - tall hat, robe, staff */
.pixel-wizard {
  box-shadow:
    /* Hat top */
    4px 0px var(--hat), 5px 0px var(--hat), 6px 0px var(--hat),
    4px 1px var(--hat), 5px 1px var(--highlight), 6px 1px var(--hat),
    4px 2px var(--hat), 5px 2px var(--hat), 6px 2px var(--hat),
    /* Hat brim */
    2px 3px var(--hat), 3px 3px var(--hat), 4px 3px var(--hat), 5px 3px var(--hat), 6px 3px var(--hat), 7px 3px var(--hat), 8px 3px var(--hat),
    /* Face */
    4px 4px var(--skin), 5px 4px var(--skin), 6px 4px var(--skin),
    4px 5px var(--skin), 5px 5px #333, 6px 5px #333,
    4px 6px var(--skin), 5px 6px var(--skin), 6px 6px var(--skin),
    /* Beard */
    4px 7px #ccc, 5px 7px var(--skin), 6px 7px #ccc,
    /* Robe top */
    3px 8px var(--robe), 4px 8px var(--robe), 5px 8px var(--robe), 6px 8px var(--robe), 7px 8px var(--robe),
    /* Staff in hand */
    2px 7px var(--staff), 2px 8px var(--staff), 2px 9px var(--staff), 2px 10px var(--staff), 2px 11px var(--staff), 2px 12px var(--staff),
    3px 9px var(--robe), 4px 9px var(--robe), 5px 9px var(--highlight), 6px 9px var(--robe), 7px 9px var(--robe),
    /* Belt */
    3px 10px var(--belt), 4px 10px var(--belt), 5px 10px var(--belt), 6px 10px var(--belt), 7px 10px var(--belt),
    /* Robe bottom */
    3px 11px var(--robe), 4px 11px var(--robe), 5px 11px var(--robe), 6px 11px var(--robe), 7px 11px var(--robe),
    2px 12px var(--robe), 3px 12px var(--robe), 4px 12px var(--robe), 5px 12px var(--robe), 6px 12px var(--robe), 7px 12px var(--robe), 8px 12px var(--robe),
    /* Shoes */
    3px 13px var(--shoe), 4px 13px var(--shoe), 6px 13px var(--shoe), 7px 13px var(--shoe);
}

/* ===== Enemy Sprites ===== */

/* Generic small enemy */
.sprite-enemy-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Canvas-drawn sprites are handled in MapRenderer */

/* ===== Shop NPC indicators ===== */
.npc-indicator {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--coin-color);
  font-size: 10px;
  animation: bob 1.5s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}