/* =============================================================================
   SHEAR MADNESS - CSS Sprite System (No External Images)
   Professional-quality sprites using pure CSS gradients, shapes, and animations

   NOTE: When using the actual backyard image as background, trees are hidden
   since they're already in the image. Only roses, characters, and enemies show.
   ============================================================================= */

/* =============================================================================
   BACKGROUND IMAGE MODE - Painterly style matching backyard image
   ============================================================================= */

/* Hide tree sprites - they're already in the background image */
.entity.tree {
  display: none !important;
}

/* Rose bushes - painterly style matching the backyard art */
.entity.rose {
  /* Override default styles for painterly look */
}

/* Painterly rose bush - looks like the trees in the image */
.entity.rose .entity-sprite {
  position: relative;
  width: 100%;
  height: 100%;
}

.entity.rose .entity-sprite::before,
.entity.rose .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Green foliage base - soft, rounded like the trees in the backyard image */
.entity.rose .entity-sprite::after {
  width: 90%;
  height: 85%;
  top: 8%;
  left: 5%;
  background:
    /* Soft highlight spots for painterly look */
    radial-gradient(ellipse 45% 40% at 28% 32%, rgba(85, 110, 55, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 40% 35% at 68% 38%, rgba(75, 100, 48, 0.5) 0%, transparent 100%),
    radial-gradient(ellipse 35% 32% at 48% 62%, rgba(65, 92, 42, 0.5) 0%, transparent 100%),
    /* Main foliage mass - muted olive-green matching trees in image */
    radial-gradient(ellipse 95% 90% at 50% 48%, #556b45 0%, #4a5d3a 45%, #3d5030 75%, #324528 100%);
  border-radius: 48% 52% 45% 55% / 52% 48% 52% 48%;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* Soften edges to match painterly style */
  filter: blur(0.3px);
}

/* Rose flowers on top - small accent dots */
.entity.rose .entity-sprite::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* Red roses - default */
.entity.rose .entity-sprite::before,
.entity.rose-red .entity-sprite::before {
  background:
    /* Small flower dots scattered on foliage */
    radial-gradient(circle at 35% 30%, #a83232 0%, #a83232 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #c24040 0%, #c24040 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #b83838 0%, #b83838 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #a83030 0%, #a83030 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #c24545 0%, #c24545 3px, transparent 4px);
}

.entity.rose-pink .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #d87088 0%, #d87088 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #e88098 0%, #e88098 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #d87090 0%, #d87090 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #c86080 0%, #c86080 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #e89098 0%, #e89098 3px, transparent 4px);
}

.entity.rose-yellow .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #d4a020 0%, #d4a020 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #e4b030 0%, #e4b030 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #d4a828 0%, #d4a828 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #c49818 0%, #c49818 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #e4b838 0%, #e4b838 3px, transparent 4px);
}

.entity.rose-white .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #f0e8e0 0%, #f0e8e0 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #fff8f0 0%, #fff8f0 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #f0e8e8 0%, #f0e8e8 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #e8e0d8 0%, #e8e0d8 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #f8f0e8 0%, #f8f0e8 3px, transparent 4px);
}

.entity.rose-orange .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #d86830 0%, #d86830 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #e87840 0%, #e87840 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #d87038 0%, #d87038 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #c86028 0%, #c86028 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #e88048 0%, #e88048 3px, transparent 4px);
}

.entity.rose-coral .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #e07060 0%, #e07060 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #f08070 0%, #f08070 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #e07868 0%, #e07868 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #d06858 0%, #d06858 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #f08878 0%, #f08878 3px, transparent 4px);
}

.entity.rose-crimson .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #8b1a1a 0%, #8b1a1a 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #9b2a2a 0%, #9b2a2a 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #8b2222 0%, #8b2222 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #7b1212 0%, #7b1212 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #9b3030 0%, #9b3030 3px, transparent 4px);
}

.entity.rose-salmon .entity-sprite::before {
  background:
    radial-gradient(circle at 35% 30%, #e89080 0%, #e89080 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, #f8a090 0%, #f8a090 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, #e89888 0%, #e89888 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #d88878 0%, #d88878 3px, transparent 4px),
    radial-gradient(circle at 30% 52%, #f8a898 0%, #f8a898 3px, transparent 4px);
}

/* =============================================================================
   SPRITE BASE SYSTEM
   ============================================================================= */

.sprite {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide emoji sprites when CSS sprites are enabled */
.entity-sprite {
  font-size: 0 !important;
  position: relative;
  width: 100%;
  height: 100%;
}

/* =============================================================================
   TREE SPRITES - Realistic trees with trunks and foliage
   ============================================================================= */

.entity.tree .entity-sprite::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Tree trunk base (shared) */
.entity.tree .entity-sprite::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 40%;
  background: linear-gradient(90deg, #6b4423 0%, #8b5a3c 50%, #6b4423 100%);
  border-radius: 2px;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  z-index: 1;
}

/* AVOCADO TREE - Dark green pear-shaped canopy */
.entity.tree[data-variant="avocado"] .entity-sprite::before {
  width: 70%;
  height: 70%;
  top: 5%;
  left: 15%;
  background:
    radial-gradient(ellipse at 30% 30%, #4a5d3c 0%, transparent 20%),
    radial-gradient(ellipse at 60% 25%, #5a6d4c 0%, transparent 18%),
    radial-gradient(ellipse at 50% 50%, #3a4d2c 0%, transparent 25%),
    radial-gradient(ellipse at 20% 60%, #4a5d3c 0%, transparent 22%),
    radial-gradient(ellipse at 70% 65%, #5a6d4c 0%, transparent 20%),
    radial-gradient(ellipse 70% 80% at 50% 40%, #3d5930 0%, #2d4920 100%);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* LIME TREE - Bright green round canopy */
.entity.tree[data-variant="lime"] .entity-sprite::before {
  width: 65%;
  height: 65%;
  top: 8%;
  left: 17.5%;
  background:
    radial-gradient(circle at 25% 25%, #90cc5a 0%, transparent 15%),
    radial-gradient(circle at 65% 30%, #a0dc6a 0%, transparent 18%),
    radial-gradient(circle at 45% 55%, #80bc4a 0%, transparent 20%),
    radial-gradient(circle at 20% 65%, #90cc5a 0%, transparent 16%),
    radial-gradient(circle at 70% 70%, #a0dc6a 0%, transparent 17%),
    radial-gradient(ellipse at 50% 45%, #7ab83f 0%, #5a9820 100%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* GRAPEFRUIT TREE - Large yellow-green canopy */
.entity.tree[data-variant="grapefruit"] .entity-sprite::before {
  width: 75%;
  height: 75%;
  top: 3%;
  left: 12.5%;
  background:
    radial-gradient(circle at 30% 20%, #c4d96f 0%, transparent 12%),
    radial-gradient(circle at 60% 25%, #d4e97f 0%, transparent 14%),
    radial-gradient(circle at 45% 45%, #b4c95f 0%, transparent 18%),
    radial-gradient(circle at 25% 60%, #c4d96f 0%, transparent 15%),
    radial-gradient(circle at 70% 65%, #d4e97f 0%, transparent 16%),
    radial-gradient(ellipse at 50% 40%, #a8c440 0%, #88a420 100%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* PEACH TREE - Pink-tinged green canopy */
.entity.tree[data-variant="peach"] .entity-sprite::before {
  width: 68%;
  height: 68%;
  top: 7%;
  left: 16%;
  background:
    radial-gradient(circle at 28% 22%, #a8d475 0%, transparent 14%),
    radial-gradient(circle at 62% 28%, #b8e485 0%, transparent 16%),
    radial-gradient(circle at 42% 52%, #98c465 0%, transparent 19%),
    radial-gradient(circle at 22% 62%, #e8a8a8 0%, transparent 12%),
    radial-gradient(circle at 68% 68%, #f8b8b8 0%, transparent 13%),
    radial-gradient(ellipse at 50% 42%, #88b445 0%, #689425 100%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* ORANGE TREE - Deep green with orange hints */
.entity.tree[data-variant="orange"] .entity-sprite::before {
  width: 70%;
  height: 70%;
  top: 6%;
  left: 15%;
  background:
    radial-gradient(circle at 25% 28%, #508d30 0%, transparent 15%),
    radial-gradient(circle at 65% 25%, #609d40 0%, transparent 17%),
    radial-gradient(circle at 50% 50%, #ff8800 0%, transparent 8%),
    radial-gradient(circle at 30% 65%, #ff9922 0%, transparent 9%),
    radial-gradient(circle at 70% 70%, #ff7700 0%, transparent 8%),
    radial-gradient(ellipse at 50% 45%, #407d20 0%, #306d10 100%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* LEMON TREE - Bright yellow-green canopy */
.entity.tree[data-variant="lemon"] .entity-sprite::before {
  width: 66%;
  height: 66%;
  top: 8%;
  left: 17%;
  background:
    radial-gradient(circle at 27% 24%, #c4dd6f 0%, transparent 13%),
    radial-gradient(circle at 63% 27%, #d4ed7f 0%, transparent 15%),
    radial-gradient(circle at 48% 48%, #fff44f 0%, transparent 10%),
    radial-gradient(circle at 25% 63%, #ffe43f 0%, transparent 11%),
    radial-gradient(circle at 72% 67%, #ffd42f 0%, transparent 10%),
    radial-gradient(ellipse at 50% 43%, #a4bd3f 0%, #849d1f 100%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* Tree sway animation */
@keyframes tree-sway {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-1px); }
}

.entity.tree .entity-sprite::before {
  animation: tree-sway 4s ease-in-out infinite;
}

/* Old rose sprites removed - using painterly style at top of file */

/* =============================================================================
   JAX - Black woman with dreadlocks (gardening outfit)
   ============================================================================= */

.entity.jax .entity-sprite::before,
.entity.jax .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body/outfit - gardening apron */
.entity.jax .entity-sprite::after {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 50%;
  background: linear-gradient(180deg, #4a7c59 0%, #3a6c49 100%);
  border-radius: 8px 8px 0 0;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Head with dreadlocks */
.entity.jax .entity-sprite::before {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  height: 45%;
  z-index: 2;
  background:
    /* Dreadlocks */
    linear-gradient(160deg, #2a1810 0%, #2a1810 3%, transparent 3%, transparent 100%),
    linear-gradient(170deg, #2a1810 0%, #2a1810 3%, transparent 3%, transparent 100%),
    linear-gradient(180deg, #2a1810 0%, #2a1810 3%, transparent 3%, transparent 100%),
    linear-gradient(190deg, #2a1810 0%, #2a1810 3%, transparent 3%, transparent 100%),
    linear-gradient(200deg, #2a1810 0%, #2a1810 3%, transparent 3%, transparent 100%),
    /* Face */
    radial-gradient(circle at 50% 50%, #5d3a1a 0%, #4d2a0a 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Tool in hand - sheers */
.entity.jax .entity-sprite {
  position: relative;
}

.entity.jax .entity-sprite::after {
  /* Add a small shear icon */
  background:
    linear-gradient(180deg, #4a7c59 0%, #3a6c49 50%, #2a5c39 100%);
}

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

.entity.jax {
  animation: jax-idle 2s ease-in-out infinite;
}

/* =============================================================================
   QUINLAN - Pitbull (brown/white)
   ============================================================================= */

.entity.quinlan .entity-sprite::before,
.entity.quinlan .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body */
.entity.quinlan .entity-sprite::after {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 45%;
  background: linear-gradient(135deg, #8b6f47 0%, #6b5f37 100%);
  border-radius: 40% 40% 20% 20%;
  z-index: 1;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

/* Head */
.entity.quinlan .entity-sprite::before {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 40%;
  z-index: 2;
  background:
    /* Ears */
    radial-gradient(ellipse at 20% 15%, #8b6f47 0%, #8b6f47 50%, transparent 50%),
    radial-gradient(ellipse at 80% 15%, #8b6f47 0%, #8b6f47 50%, transparent 50%),
    /* White face markings */
    radial-gradient(ellipse at 50% 60%, #ffffff 0%, #ffffff 30%, transparent 30%),
    /* Head base */
    radial-gradient(ellipse at 50% 50%, #8b6f47 0%, #6b5f37 100%);
  border-radius: 45% 45% 50% 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Tail wag when agitated */
@keyframes quinlan-agitated {
  0%, 100% { transform: rotate(-3deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.entity.quinlan.agitated {
  animation: quinlan-agitated 0.3s ease-in-out infinite;
}

/* =============================================================================
   SEAMUS - Mastiff (large, gentle giant)
   ============================================================================= */

.entity.seamus .entity-sprite::before,
.entity.seamus .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body - larger than Quinlan */
.entity.seamus .entity-sprite::after {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 50%;
  background: linear-gradient(135deg, #a08060 0%, #807050 100%);
  border-radius: 45% 45% 25% 25%;
  z-index: 1;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}

/* Head - droopy jowls */
.entity.seamus .entity-sprite::before {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 45%;
  z-index: 2;
  background:
    /* Ears - floppy */
    radial-gradient(ellipse 30% 40% at 15% 30%, #a08060 0%, transparent 100%),
    radial-gradient(ellipse 30% 40% at 85% 30%, #a08060 0%, transparent 100%),
    /* Jowls */
    radial-gradient(ellipse at 50% 70%, #c0a080 0%, transparent 60%),
    /* Head base */
    radial-gradient(ellipse at 50% 45%, #a08060 0%, #807050 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* =============================================================================
   SHANNON - Husband (well-meaning chaos)
   ============================================================================= */

.entity.shannon .entity-sprite::before,
.entity.shannon .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body - casual clothes */
.entity.shannon .entity-sprite::after {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 55%;
  background: linear-gradient(180deg, #4a6fa5 0%, #3a5f95 100%);
  border-radius: 10px 10px 0 0;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Head */
.entity.shannon .entity-sprite::before {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 40%;
  z-index: 2;
  background:
    /* Hair */
    radial-gradient(ellipse at 50% 20%, #4a3020 0%, transparent 50%),
    /* Face */
    radial-gradient(circle at 50% 50%, #f0c090 0%, #e0b080 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Shannon wanders - random wobble */
@keyframes shannon-chaos {
  0%, 100% { transform: translateX(0) rotate(-2deg); }
  25% { transform: translateX(-1px) rotate(2deg); }
  50% { transform: translateX(1px) rotate(-2deg); }
  75% { transform: translateX(-1px) rotate(2deg); }
}

.entity.shannon {
  animation: shannon-chaos 1.5s ease-in-out infinite;
}

/* =============================================================================
   GRASSHOPPER - Main pest enemy
   ============================================================================= */

.entity.grasshopper .entity-sprite::before,
.entity.grasshopper .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body */
.entity.grasshopper .entity-sprite::after {
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 50%;
  background: linear-gradient(180deg, #7cb342 0%, #689f38 50%, #558b2f 100%);
  border-radius: 40% 40% 20% 20%;
  z-index: 2;
}

/* Legs and antennae */
.entity.grasshopper .entity-sprite::before {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 70%;
  z-index: 1;
  background:
    /* Back legs */
    linear-gradient(135deg, transparent 40%, #558b2f 40%, #558b2f 45%, transparent 45%),
    linear-gradient(45deg, transparent 40%, #558b2f 40%, #558b2f 45%, transparent 45%),
    /* Antennae */
    linear-gradient(120deg, transparent 48%, #558b2f 48%, #558b2f 50%, transparent 50%),
    linear-gradient(60deg, transparent 48%, #558b2f 48%, #558b2f 50%, transparent 50%);
}

@keyframes grasshopper-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-5px) scaleY(0.9); }
}

.entity.grasshopper {
  animation: grasshopper-hop 0.6s ease-in-out infinite;
}

/* =============================================================================
   SNAIL - Slow pest
   ============================================================================= */

.entity.snail .entity-sprite::before,
.entity.snail .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Shell */
.entity.snail .entity-sprite::before {
  top: 10%;
  right: 15%;
  width: 50%;
  height: 50%;
  background:
    radial-gradient(ellipse at 40% 40%, #d4a574 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, #c4956a 0%, transparent 45%),
    conic-gradient(from 45deg at 50% 50%, #a47554 0deg, #947050 90deg, #846545 180deg, #947050 270deg, #a47554 360deg);
  border-radius: 50%;
  z-index: 2;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Body/foot */
.entity.snail .entity-sprite::after {
  bottom: 10%;
  left: 10%;
  width: 70%;
  height: 30%;
  background: linear-gradient(90deg, #d4c4a4 0%, #c4b494 50%, #b4a484 100%);
  border-radius: 50% 20% 20% 50%;
  z-index: 1;
}

@keyframes snail-crawl {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}

.entity.snail {
  animation: snail-crawl 2s ease-in-out infinite;
}

/* =============================================================================
   RAVEN - Flying pest
   ============================================================================= */

.entity.raven .entity-sprite::before,
.entity.raven .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body */
.entity.raven .entity-sprite::before {
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 50%;
  background:
    /* Beak */
    linear-gradient(135deg, transparent 60%, #ffa500 60%, #ffa500 70%, transparent 70%),
    /* Head and body */
    radial-gradient(ellipse at 50% 30%, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 50% 50% 40% 40%;
  z-index: 2;
}

/* Wings */
.entity.raven .entity-sprite::after {
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 40%;
  background:
    /* Left wing */
    linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 40%, transparent 40%),
    /* Right wing */
    linear-gradient(45deg, #1a1a1a 0%, #1a1a1a 40%, transparent 40%);
  z-index: 1;
}

@keyframes raven-flap {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50% { transform: translateX(-50%) scaleX(0.8); }
}

.entity.raven .entity-sprite::after {
  animation: raven-flap 0.4s ease-in-out infinite;
}

/* =============================================================================
   LIZARD - Quick ground pest
   ============================================================================= */

.entity.lizard .entity-sprite::before,
.entity.lizard .entity-sprite::after {
  content: '';
  position: absolute;
}

/* Body */
.entity.lizard .entity-sprite::before {
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 30%;
  background: linear-gradient(90deg,
    #4a7c4a 0%,
    #5a8c5a 20%,
    #6a9c6a 40%,
    #5a8c5a 60%,
    #4a7c4a 80%,
    transparent 100%
  );
  border-radius: 50% 20% 20% 50%;
  z-index: 2;
}

/* Tail */
.entity.lizard .entity-sprite::after {
  bottom: 20%;
  right: 5%;
  width: 40%;
  height: 15%;
  background: linear-gradient(90deg, #4a7c4a 0%, transparent 100%);
  border-radius: 0 50% 50% 0;
  z-index: 1;
  transform-origin: left center;
}

@keyframes lizard-tail-wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.entity.lizard .entity-sprite::after {
  animation: lizard-tail-wiggle 0.5s ease-in-out infinite;
}

/* =============================================================================
   DAMAGE/HURT STATES
   ============================================================================= */

.entity.damaged {
  animation: hurt-flash 0.3s ease-out;
}

@keyframes hurt-flash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) hue-rotate(20deg); }
}

/* Low health pulse */
.entity[data-health-low="true"] {
  animation: low-health-pulse 1s ease-in-out infinite;
}

@keyframes low-health-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.7) saturate(0.5); }
}

/* =============================================================================
   TILE TYPE IMPROVEMENTS (Enhanced)
   ============================================================================= */

/* Enhanced grass texture with individual blades */
.tile.grass::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Grass blade highlights */
    repeating-linear-gradient(
      92deg,
      transparent 0px,
      rgba(160, 220, 130, 0.3) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      rgba(120, 180, 90, 0.3) 1px,
      transparent 2px,
      transparent 5px
    );
  pointer-events: none;
  z-index: 1;
}

/* Pool with animated ripples */
.tile.pool::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3) 0%, transparent 10%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.2) 0%, transparent 15%);
  animation: pool-ripple 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes pool-ripple {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Fence wood grain detail */
.tile.fence::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0,0,0,0.1) 1px,
      transparent 2px,
      transparent 8px
    );
  pointer-events: none;
}

/* =============================================================================
   SCALABILITY SYSTEM
   ============================================================================= */

/* Automatically scale all sprites based on tile size */
@media (max-width: 380px) {
  .entity .entity-sprite::before,
  .entity .entity-sprite::after {
    /* Sprites auto-scale with percentage-based sizing */
  }
}

/* =============================================================================
   ACCESSIBILITY & PERFORMANCE
   ============================================================================= */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .entity,
  .entity .entity-sprite::before,
  .entity .entity-sprite::after,
  .tile.pool::before,
  .tile.pool::after {
    animation: none !important;
  }
}

/* GPU acceleration for smooth animations */
.entity,
.entity .entity-sprite::before,
.entity .entity-sprite::after {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* =============================================================================
   UTILITY CLASSES FOR DYNAMIC SPRITE CONTROL
   ============================================================================= */

/* Add these data attributes to entities for dynamic control */
[data-variant] .entity-sprite::before {
  /* Variant-specific styling handled above */
}

.entity[data-health-percent] .entity-hp-fill {
  /* HP bar updates are handled by JS */
}

/* Idle state animations */
.entity.idle {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Attack state */
.entity.attacking {
  animation: attack-lunge 0.3s ease-out;
}

@keyframes attack-lunge {
  0% { transform: scale(1); }
  50% { transform: scale(1.2) translateY(-3px); }
  100% { transform: scale(1); }
}

/* Moving state */
.entity.moving {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   INTEGRATION NOTES
   ============================================================================= */

/*
  To enable CSS sprites in the existing system:

  1. Add this file to index.html:
     <link rel="stylesheet" href="css/sprites.css">

  2. Update ui.js to add data attributes for variants:
     el.setAttribute('data-variant', entity.variant);

  3. Remove emoji text content from entity-sprite elements

  4. Optionally add health data attributes:
     el.setAttribute('data-health-low', entity.health < 30);

  5. Add state classes dynamically:
     el.classList.add('attacking', 'idle', 'moving', etc.)
*/