/* === Base Monster Sprite === */
.monster {
  position: relative;
  width: 60px;
  height: 60px;
}

.monster .body {
  position: absolute;
  bottom: 0;
}

.monster .eyes {
  position: absolute;
  display: flex;
  gap: 8px;
}

.monster .eye {
  background: white;
  border-radius: 50%;
  position: relative;
}

.monster .eye::after {
  content: '';
  position: absolute;
  background: #1a1a2e;
  border-radius: 50%;
}

.monster .mouth {
  position: absolute;
}

/* === Emberpup (Fire, Common) === */
.monster-emberpup .body {
  width: 50px;
  height: 45px;
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  border-radius: 25px 25px 20px 20px;
  left: 15px;
}

.monster-emberpup .eyes {
  top: 18px;
  left: 22px;
}

.monster-emberpup .eye {
  width: 12px;
  height: 12px;
}

.monster-emberpup .eye::after {
  width: 6px;
  height: 6px;
  top: 3px;
  left: 4px;
}

.monster-emberpup .mouth {
  width: 10px;
  height: 6px;
  background: #c44;
  border-radius: 0 0 5px 5px;
  top: 35px;
  left: 35px;
}

.monster-emberpup .tail {
  position: absolute;
  width: 8px;
  height: 20px;
  background: linear-gradient(to top, #ff6b35, #ffd60a);
  border-radius: 4px 4px 2px 2px;
  bottom: 15px;
  right: 8px;
  transform: rotate(-20deg);
}

/* Emberpup ears */
.monster-emberpup .body::before,
.monster-emberpup .body::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 16px;
  background: #ff6b35;
  border-radius: 6px 6px 0 0;
  top: -12px;
}

.monster-emberpup .body::before { left: 8px; transform: rotate(-10deg); }
.monster-emberpup .body::after { right: 8px; transform: rotate(10deg); }

/* === Pondling (Water, Common) === */
.monster-pondling .body {
  width: 55px;
  height: 50px;
  background: linear-gradient(135deg, #00b4d8, #48cae4);
  border-radius: 50%;
  left: 12px;
}

.monster-pondling .eyes {
  top: 20px;
  left: 20px;
}

.monster-pondling .eye {
  width: 14px;
  height: 14px;
}

.monster-pondling .eye::after {
  width: 7px;
  height: 7px;
  top: 3px;
  left: 5px;
}

.monster-pondling .mouth {
  width: 14px;
  height: 4px;
  border-bottom: 3px solid #0077b6;
  border-radius: 0 0 7px 7px;
  top: 42px;
  left: 33px;
}

/* Pondling bubbles */
.monster-pondling .tail {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  top: 5px;
  right: 5px;
}

.monster-pondling .tail::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  top: -10px;
  left: 5px;
}

/* === Pebblit (Earth, Common) === */
.monster-pebblit .body {
  width: 55px;
  height: 48px;
  background: linear-gradient(135deg, #8cb369, #6a994e);
  border-radius: 15px 15px 25px 25px;
  left: 12px;
}

.monster-pebblit .eyes {
  top: 22px;
  left: 22px;
}

.monster-pebblit .eye {
  width: 10px;
  height: 10px;
}

.monster-pebblit .eye::after {
  width: 5px;
  height: 5px;
  top: 3px;
  left: 3px;
}

.monster-pebblit .mouth {
  width: 12px;
  height: 3px;
  background: #386641;
  border-radius: 2px;
  top: 38px;
  left: 34px;
}

/* Pebblit rocky texture */
.monster-pebblit .body::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  top: 8px;
  left: 35px;
}

.monster-pebblit .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  bottom: 10px;
  left: 8px;
}

/* === Puffwisp (Cloud, Common) === */
.monster-puffwisp .body {
  width: 50px;
  height: 40px;
  background: linear-gradient(135deg, #b8c0ff, #d4d8ff);
  border-radius: 25px 25px 20px 20px;
  left: 15px;
  bottom: 5px;
}

.monster-puffwisp .eyes {
  top: 22px;
  left: 22px;
  gap: 8px;
}

.monster-puffwisp .eye {
  width: 10px;
  height: 10px;
}

.monster-puffwisp .eye::after {
  width: 5px;
  height: 5px;
  top: 2px;
  left: 3px;
}

.monster-puffwisp .mouth {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #7b80b8;
  border-radius: 0 0 4px 4px;
  top: 38px;
  left: 36px;
}

/* Puffwisp cloud puffs */
.monster-puffwisp .body::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 18px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  top: -10px;
  left: 5px;
}

.monster-puffwisp .body::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  top: -6px;
  right: 5px;
}

/* Puffwisp tiny wings */
.monster-puffwisp .tail {
  position: absolute;
  width: 16px;
  height: 20px;
  background: rgba(184, 192, 255, 0.4);
  border-radius: 50%;
  top: 15px;
  left: 2px;
}

.monster-puffwisp .tail::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 20px;
  background: rgba(184, 192, 255, 0.4);
  border-radius: 50%;
  left: 46px;
}

/* === Dustling (Sand, Common) === */
.monster-dustling .body {
  width: 48px;
  height: 45px;
  background: linear-gradient(135deg, #e0a458, #c8913c);
  border-radius: 20px 20px 24px 24px;
  left: 16px;
}

.monster-dustling .eyes {
  top: 20px;
  left: 24px;
  gap: 6px;
}

.monster-dustling .eye {
  width: 10px;
  height: 10px;
}

.monster-dustling .eye::after {
  width: 5px;
  height: 5px;
  top: 3px;
  left: 3px;
}

.monster-dustling .mouth {
  width: 8px;
  height: 3px;
  background: #8b6914;
  border-radius: 2px;
  top: 36px;
  left: 36px;
}

/* Dustling sand grains */
.monster-dustling .body::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  top: 8px;
  left: 10px;
}

.monster-dustling .body::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  top: 12px;
  right: 8px;
}

/* Dustling tail swirl */
.monster-dustling .tail {
  position: absolute;
  width: 12px;
  height: 18px;
  background: linear-gradient(to top, #e0a458, rgba(224, 164, 88, 0.3));
  border-radius: 6px 6px 3px 3px;
  bottom: 12px;
  right: 8px;
  transform: rotate(-15deg);
}

/* === Blazefang (Fire, Uncommon) === */
.monster-blazefang .body {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #ff4500, #ff6b35);
  border-radius: 15px 15px 25px 25px;
  left: 12px;
}

.monster-blazefang .eyes {
  top: 16px;
  left: 20px;
}

.monster-blazefang .eye {
  width: 14px;
  height: 10px;
  border-radius: 2px;
}

.monster-blazefang .eye::after {
  width: 8px;
  height: 6px;
  top: 2px;
  left: 4px;
  border-radius: 2px;
}

.monster-blazefang .mouth {
  width: 20px;
  height: 8px;
  top: 35px;
  left: 30px;
  border-bottom: 3px solid #8b0000;
  position: absolute;
}

/* Blazefang fangs */
.monster-blazefang .mouth::before,
.monster-blazefang .mouth::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 6px;
  background: white;
  top: 2px;
}

.monster-blazefang .mouth::before { left: 2px; border-radius: 0 0 2px 2px; }
.monster-blazefang .mouth::after { right: 2px; border-radius: 0 0 2px 2px; }

/* Blazefang flame crest */
.monster-blazefang .tail {
  position: absolute;
  width: 14px;
  height: 22px;
  background: linear-gradient(to top, #ff4500, #ffd60a);
  border-radius: 7px 7px 3px 3px;
  top: 0;
  left: 33px;
  transform: rotate(5deg);
}

/* === Tidecrawl (Water, Uncommon) === */
.monster-tidecrawl .body {
  width: 60px;
  height: 40px;
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  border-radius: 30px 30px 15px 15px;
  left: 10px;
}

.monster-tidecrawl .eyes {
  top: 24px;
  left: 18px;
  gap: 14px;
}

.monster-tidecrawl .eye {
  width: 10px;
  height: 12px;
}

.monster-tidecrawl .eye::after {
  width: 5px;
  height: 6px;
  top: 4px;
  left: 3px;
}

.monster-tidecrawl .mouth {
  width: 8px;
  height: 4px;
  background: #023e8a;
  border-radius: 0 0 4px 4px;
  top: 42px;
  left: 36px;
}

/* Tidecrawl shell */
.monster-tidecrawl .body::before {
  content: '';
  position: absolute;
  width: 45px;
  height: 30px;
  background: linear-gradient(135deg, #023e8a, #0077b6);
  border-radius: 25px 25px 0 0;
  top: -18px;
  left: 7px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Tidecrawl legs */
.monster-tidecrawl .tail {
  position: absolute;
  bottom: 0;
  left: 12px;
  width: 56px;
  height: 8px;
  display: flex;
}

.monster-tidecrawl .tail::before,
.monster-tidecrawl .tail::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 8px;
  background: #0077b6;
  border-radius: 0 0 5px 5px;
  bottom: -6px;
}

.monster-tidecrawl .tail::before { left: 5px; }
.monster-tidecrawl .tail::after { right: 5px; }

/* === Thornback (Earth, Rare) === */
.monster-thornback .body {
  width: 60px;
  height: 55px;
  background: linear-gradient(135deg, #386641, #6a994e);
  border-radius: 20px;
  left: 10px;
}

.monster-thornback .eyes {
  top: 22px;
  left: 18px;
  gap: 10px;
}

.monster-thornback .eye {
  width: 14px;
  height: 12px;
}

.monster-thornback .eye::after {
  width: 8px;
  height: 6px;
  top: 3px;
  left: 4px;
}

.monster-thornback .mouth {
  width: 16px;
  height: 5px;
  background: #2d4a22;
  border-radius: 3px;
  top: 42px;
  left: 32px;
}

/* Thornback spikes */
.monster-thornback .tail {
  position: absolute;
  top: 2px;
  left: 18px;
}

.monster-thornback .tail::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 14px solid #386641;
  left: 0;
}

.monster-thornback .tail::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 14px solid #386641;
  left: 20px;
}

.monster-thornback .body::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 14px solid #386641;
  top: -12px;
  left: 22px;
}

/* === Skywhale (Cloud, Rare) === */
.monster-skywhale .body {
  width: 65px;
  height: 42px;
  background: linear-gradient(135deg, #8890d8, #b8c0ff);
  border-radius: 35px 35px 25px 25px;
  left: 8px;
}

.monster-skywhale .eyes {
  top: 22px;
  left: 16px;
  gap: 18px;
}

.monster-skywhale .eye {
  width: 10px;
  height: 12px;
}

.monster-skywhale .eye::after {
  width: 5px;
  height: 6px;
  top: 4px;
  left: 3px;
}

.monster-skywhale .mouth {
  width: 12px;
  height: 3px;
  border-bottom: 2px solid #5a60a0;
  border-radius: 0 0 6px 6px;
  top: 42px;
  left: 35px;
}

/* Skywhale fins */
.monster-skywhale .body::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 24px;
  background: linear-gradient(135deg, #7880c8, #b8c0ff);
  border-radius: 50% 50% 0 50%;
  top: -14px;
  left: 22px;
  transform: rotate(10deg);
}

/* Skywhale tail */
.monster-skywhale .tail {
  position: absolute;
  bottom: 8px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #8890d8;
}

/* Skywhale cloud wisps */
.monster-skywhale .body::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  bottom: -8px;
  left: 15px;
}

/* === Sandstalker (Sand, Legendary) === */
.monster-sandstalker .body {
  width: 50px;
  height: 60px;
  background: linear-gradient(135deg, #c8913c, #e0a458);
  border-radius: 25px 25px 20px 20px;
  left: 15px;
}

.monster-sandstalker .eyes {
  top: 14px;
  left: 22px;
  gap: 6px;
}

.monster-sandstalker .eye {
  width: 14px;
  height: 10px;
  background: #ff4500;
  border-radius: 2px 2px 7px 7px;
}

.monster-sandstalker .eye::after {
  width: 6px;
  height: 8px;
  background: #1a1a2e;
  top: 1px;
  left: 4px;
  border-radius: 1px;
}

.monster-sandstalker .mouth {
  width: 18px;
  height: 4px;
  top: 36px;
  left: 31px;
  border-bottom: 3px solid #8b5e14;
}

/* Sandstalker fangs */
.monster-sandstalker .mouth::before,
.monster-sandstalker .mouth::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 5px;
  background: #f5f5dc;
  top: 2px;
}

.monster-sandstalker .mouth::before { left: 2px; border-radius: 0 0 2px 2px; }
.monster-sandstalker .mouth::after { right: 2px; border-radius: 0 0 2px 2px; }

/* Sandstalker sand aura */
.monster-sandstalker .tail {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 164, 88, 0.25) 0%, transparent 70%);
  top: 5px;
  left: 5px;
}

/* Sandstalker horns */
.monster-sandstalker .body::before,
.monster-sandstalker .body::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 18px;
  background: #a07030;
  border-radius: 3px 3px 0 0;
  top: -16px;
}

.monster-sandstalker .body::before { left: 10px; transform: rotate(-15deg); }
.monster-sandstalker .body::after { right: 10px; transform: rotate(15deg); }


/* === Celestrix (Cloud, Heroic) === */
.monster-celestrix .body {
  width: 55px;
  height: 58px;
  background: linear-gradient(135deg, #1a1a60, #4040b0, #7070e0);
  border-radius: 28px 28px 22px 22px;
  left: 12px;
  box-shadow: inset 0 0 15px rgba(200, 200, 255, 0.2);
}

.monster-celestrix .eyes {
  top: 18px;
  left: 18px;
  gap: 8px;
}

.monster-celestrix .eye {
  width: 16px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
}

.monster-celestrix .eye::after {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff3030, #cc0000);
  top: 3px;
  left: 4px;
  border-radius: 50%;
}

.monster-celestrix .mouth {
  width: 12px;
  height: 4px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 0 0 6px 6px;
  top: 40px;
  left: 34px;
}

/* Celestrix halo/crown of light */
.monster-celestrix .body::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 50, 0.6), rgba(255, 100, 100, 0.6), rgba(255, 200, 50, 0.6), transparent);
  border-radius: 50%;
  top: -10px;
  left: 6px;
  filter: blur(1px);
}

/* Celestrix star core */
.monster-celestrix .body::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #fff, #ff5050, transparent);
  border-radius: 50%;
  top: 10px;
  left: 20px;
  box-shadow: 0 0 10px #ff3030, 0 0 20px rgba(255, 50, 50, 0.4);
}

/* Celestrix wings of light */
.monster-celestrix .tail {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  left: 0;
}

.monster-celestrix .tail::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 36px;
  background: linear-gradient(135deg, rgba(255, 200, 100, 0.3), rgba(255, 100, 100, 0.15), transparent);
  border-radius: 50% 0 50% 50%;
  top: 8px;
  left: -8px;
  transform: rotate(-15deg);
}

.monster-celestrix .tail::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 36px;
  background: linear-gradient(225deg, rgba(255, 200, 100, 0.3), rgba(255, 100, 100, 0.15), transparent);
  border-radius: 0 50% 50% 50%;
  top: 8px;
  right: -8px;
  transform: rotate(15deg);
}


/* === Magmaw (Fire, Epic) === */
.monster-magmaw .body {
  width: 58px;
  height: 50px;
  background: linear-gradient(135deg, #cc3300, #ff6600);
  border-radius: 12px 12px 28px 28px;
  left: 11px;
  box-shadow: inset 0 -8px 15px rgba(255, 200, 0, 0.3);
}

.monster-magmaw .eyes {
  top: 16px;
  left: 18px;
  gap: 12px;
}

.monster-magmaw .eye {
  width: 14px;
  height: 10px;
  background: #ffd700;
  border-radius: 2px;
}

.monster-magmaw .eye::after {
  width: 7px;
  height: 6px;
  background: #1a1a2e;
  top: 2px;
  left: 4px;
  border-radius: 1px;
}

.monster-magmaw .mouth {
  width: 30px;
  height: 10px;
  background: #1a0000;
  border-radius: 0 0 12px 12px;
  top: 34px;
  left: 25px;
}

/* Magmaw jagged teeth */
.monster-magmaw .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3px;
  width: 24px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 2px, transparent 2px, transparent 5px);
  clip-path: polygon(0% 0%, 8% 100%, 16% 0%, 24% 100%, 33% 0%, 41% 100%, 50% 0%, 58% 100%, 66% 0%, 75% 100%, 83% 0%, 91% 100%, 100% 0%);
}

/* Magmaw lava cracks */
.monster-magmaw .body::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 3px;
  background: #ff9900;
  border-radius: 2px;
  top: 10px;
  left: 8px;
  box-shadow: 0 0 4px #ff6600;
}

.monster-magmaw .body::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 3px;
  background: #ff9900;
  border-radius: 2px;
  bottom: 14px;
  right: 6px;
  box-shadow: 0 0 4px #ff6600;
}

/* Magmaw dripping lava */
.monster-magmaw .tail {
  position: absolute;
  bottom: -4px;
  left: 20px;
  width: 10px;
  height: 14px;
  background: linear-gradient(to bottom, #ff6600, #ffd700);
  border-radius: 0 0 5px 5px;
  opacity: 0.8;
}

.monster-magmaw .tail::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 2px;
  width: 8px;
  height: 10px;
  background: linear-gradient(to bottom, #ff6600, #ffd700);
  border-radius: 0 0 4px 4px;
  opacity: 0.6;
}

/* === Pyrdrake (Fire, Legendary) === */
.monster-pyrdrake .body {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #8b0000, #cc2200, #ff4500);
  border-radius: 20px 20px 22px 22px;
  left: 12px;
}

.monster-pyrdrake .eyes {
  top: 18px;
  left: 20px;
  gap: 8px;
}

.monster-pyrdrake .eye {
  width: 14px;
  height: 10px;
  background: #ffd700;
  border-radius: 2px 2px 7px 7px;
}

.monster-pyrdrake .eye::after {
  width: 6px;
  height: 7px;
  background: #1a1a2e;
  top: 1px;
  left: 4px;
  border-radius: 1px;
}

.monster-pyrdrake .mouth {
  width: 16px;
  height: 5px;
  border-bottom: 3px solid #4a0000;
  top: 38px;
  left: 32px;
}

/* Pyrdrake horns */
.monster-pyrdrake .body::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 20px;
  background: linear-gradient(to top, #8b0000, #333);
  border-radius: 3px 3px 0 0;
  top: -18px;
  left: 10px;
  transform: rotate(-15deg);
}

.monster-pyrdrake .body::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 20px;
  background: linear-gradient(to top, #8b0000, #333);
  border-radius: 3px 3px 0 0;
  top: -18px;
  right: 10px;
  transform: rotate(15deg);
}

/* Pyrdrake wings */
.monster-pyrdrake .tail {
  position: absolute;
  top: 10px;
  left: 0;
  width: 80px;
  height: 40px;
}

.monster-pyrdrake .tail::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 32px;
  background: linear-gradient(135deg, rgba(204, 34, 0, 0.5), rgba(255, 69, 0, 0.2));
  border-radius: 50% 0 50% 50%;
  top: 0;
  left: -6px;
  transform: rotate(-10deg);
}

.monster-pyrdrake .tail::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 32px;
  background: linear-gradient(225deg, rgba(204, 34, 0, 0.5), rgba(255, 69, 0, 0.2));
  border-radius: 0 50% 50% 50%;
  top: 0;
  right: -6px;
  transform: rotate(10deg);
}

/* === Infernotitan (Fire, Heroic) === */
.monster-infernotitan .body {
  width: 60px;
  height: 62px;
  background: linear-gradient(135deg, #4a0000, #8b0000, #cc2200);
  border-radius: 18px 18px 24px 24px;
  left: 10px;
  box-shadow: inset 0 0 15px rgba(255, 100, 0, 0.3);
}

.monster-infernotitan .eyes {
  top: 20px;
  left: 16px;
  gap: 10px;
}

.monster-infernotitan .eye {
  width: 16px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

.monster-infernotitan .eye::after {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffd700, #ff4500);
  top: 2px;
  left: 4px;
  border-radius: 50%;
}

.monster-infernotitan .mouth {
  width: 24px;
  height: 8px;
  background: #0a0000;
  border-radius: 0 0 8px 8px;
  top: 42px;
  left: 28px;
}

.monster-infernotitan .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #ffd700 0px, #ffd700 2px, transparent 2px, transparent 5px);
  clip-path: polygon(0% 0%, 10% 100%, 20% 0%, 30% 100%, 40% 0%, 50% 100%, 60% 0%, 70% 100%, 80% 0%, 90% 100%, 100% 0%);
}

/* Infernotitan massive horns */
.monster-infernotitan .body::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 26px;
  background: linear-gradient(to top, #4a0000, #111);
  border-radius: 4px 4px 0 0;
  top: -22px;
  left: 8px;
  transform: rotate(-20deg);
}

.monster-infernotitan .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 26px;
  background: linear-gradient(to top, #4a0000, #111);
  border-radius: 4px 4px 0 0;
  top: -22px;
  right: 8px;
  transform: rotate(20deg);
}

/* Infernotitan flame aura */
.monster-infernotitan .tail {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.3) 0%, rgba(255, 200, 0, 0.1) 50%, transparent 70%);
  top: 0;
  left: 0;
  animation: inferno-pulse 1.5s ease-in-out infinite;
}

/* === Coralwyrm (Water, Epic) === */
.monster-coralwyrm .body {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #ff6b8a, #e05080, #c03060);
  border-radius: 28px 28px 22px 22px;
  left: 12px;
}

.monster-coralwyrm .eyes {
  top: 18px;
  left: 20px;
  gap: 10px;
}

.monster-coralwyrm .eye {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

.monster-coralwyrm .eye::after {
  width: 6px;
  height: 6px;
  background: #0077b6;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}

.monster-coralwyrm .mouth {
  width: 10px;
  height: 4px;
  border-bottom: 2px solid #801040;
  border-radius: 0 0 5px 5px;
  top: 38px;
  left: 35px;
}

/* Coralwyrm coral branches */
.monster-coralwyrm .body::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 20px;
  background: #ff8fa0;
  border-radius: 6px 6px 0 0;
  top: -16px;
  left: 10px;
  transform: rotate(-10deg);
}

.monster-coralwyrm .body::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 16px;
  background: #ff8fa0;
  border-radius: 5px 5px 0 0;
  top: -12px;
  right: 10px;
  transform: rotate(10deg);
}

/* Coralwyrm tail fin */
.monster-coralwyrm .tail {
  position: absolute;
  bottom: 8px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #e05080;
}

/* === Abyssmaw (Water, Legendary) === */
.monster-abyssmaw .body {
  width: 58px;
  height: 55px;
  background: linear-gradient(135deg, #001830, #003060, #004080);
  border-radius: 15px 15px 28px 28px;
  left: 11px;
}

.monster-abyssmaw .eyes {
  top: 14px;
  left: 22px;
  gap: 10px;
}

.monster-abyssmaw .eye {
  width: 10px;
  height: 10px;
  background: #00ffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #00ffff;
}

.monster-abyssmaw .eye::after {
  width: 5px;
  height: 5px;
  background: #001830;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}

.monster-abyssmaw .mouth {
  width: 32px;
  height: 12px;
  background: #000;
  border-radius: 0 0 10px 10px;
  top: 34px;
  left: 24px;
}

/* Abyssmaw angler teeth */
.monster-abyssmaw .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 28px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 2px, transparent 2px, transparent 6px);
  clip-path: polygon(0% 0%, 7% 100%, 14% 0%, 21% 100%, 28% 0%, 35% 100%, 42% 0%, 50% 100%, 57% 0%, 64% 100%, 71% 0%, 78% 100%, 85% 0%, 92% 100%, 100% 0%);
}

/* Abyssmaw angler lure */
.monster-abyssmaw .body::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 20px;
  background: #003060;
  top: -18px;
  left: 26px;
  border-radius: 2px;
}

.monster-abyssmaw .body::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #00ffff, #0088aa);
  border-radius: 50%;
  top: -26px;
  left: 22px;
  box-shadow: 0 0 8px #00ffff, 0 0 16px rgba(0, 255, 255, 0.3);
}

/* Abyssmaw dark aura */
.monster-abyssmaw .tail {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 30, 60, 0.3) 0%, transparent 70%);
  top: 0;
  left: 2px;
}

/* === Leviathan (Water, Heroic) === */
.monster-leviathan .body {
  width: 62px;
  height: 58px;
  background: linear-gradient(135deg, #003060, #0077b6, #00b4d8);
  border-radius: 30px 30px 24px 24px;
  left: 9px;
  box-shadow: inset 0 0 15px rgba(0, 180, 216, 0.2);
}

.monster-leviathan .eyes {
  top: 18px;
  left: 14px;
  gap: 16px;
}

.monster-leviathan .eye {
  width: 16px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
}

.monster-leviathan .eye::after {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #00ffff, #006090);
  top: 3px;
  left: 4px;
  border-radius: 50%;
}

.monster-leviathan .mouth {
  width: 18px;
  height: 5px;
  border-bottom: 3px solid #001830;
  border-radius: 0 0 8px 8px;
  top: 42px;
  left: 31px;
}

/* Leviathan crown crest */
.monster-leviathan .body::before {
  content: '';
  position: absolute;
  width: 48px;
  height: 18px;
  background: linear-gradient(to top, #0077b6, #00b4d8);
  clip-path: polygon(0% 100%, 15% 0%, 30% 70%, 50% 0%, 70% 70%, 85% 0%, 100% 100%);
  top: -16px;
  left: 6px;
}

/* Leviathan water rings */
.monster-leviathan .body::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 14px;
  background: rgba(0, 180, 216, 0.15);
  border-radius: 50%;
  bottom: -10px;
  left: -5px;
}

/* Leviathan tail */
.monster-leviathan .tail {
  position: absolute;
  bottom: 6px;
  right: -2px;
}

.monster-leviathan .tail::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #0077b6;
}

.monster-leviathan .tail::after {
  content: '';
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 216, 0.2) 0%, transparent 70%);
  top: -30px;
  left: -68px;
}

/* === Mosshorn (Earth, Rare) === */
.monster-mosshorn .body {
  width: 52px;
  height: 50px;
  background: linear-gradient(135deg, #5a8a3e, #7ab356);
  border-radius: 22px 22px 26px 26px;
  left: 14px;
}

.monster-mosshorn .eyes {
  top: 22px;
  left: 22px;
  gap: 8px;
}

.monster-mosshorn .eye {
  width: 12px;
  height: 12px;
}

.monster-mosshorn .eye::after {
  width: 6px;
  height: 6px;
  top: 3px;
  left: 4px;
}

.monster-mosshorn .mouth {
  width: 10px;
  height: 3px;
  border-bottom: 2px solid #3a6a20;
  border-radius: 0 0 5px 5px;
  top: 40px;
  left: 35px;
}

/* Mosshorn antlers */
.monster-mosshorn .body::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 22px;
  background: #6b4226;
  border-radius: 3px;
  top: -20px;
  left: 12px;
  transform: rotate(-15deg);
  box-shadow: 6px -4px 0 0 #6b4226;
}

.monster-mosshorn .body::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 22px;
  background: #6b4226;
  border-radius: 3px;
  top: -20px;
  right: 12px;
  transform: rotate(15deg);
  box-shadow: -6px -4px 0 0 #6b4226;
}

/* Mosshorn mossy spots */
.monster-mosshorn .tail {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 8px;
  height: 8px;
  background: #3a8a1e;
  border-radius: 50%;
  box-shadow: 24px 6px 0 5px #3a8a1e, 10px 18px 0 3px #3a8a1e;
}

/* === Quakebrute (Earth, Legendary) === */
.monster-quakebrute .body {
  width: 64px;
  height: 60px;
  background: linear-gradient(135deg, #3d2b1f, #6b4226, #8b5e3c);
  border-radius: 12px 12px 28px 28px;
  left: 8px;
  border: 2px solid #5a3a20;
}

.monster-quakebrute .eyes {
  top: 22px;
  left: 16px;
  gap: 12px;
}

.monster-quakebrute .eye {
  width: 16px;
  height: 10px;
  background: #7fff00;
  border-radius: 3px;
}

.monster-quakebrute .eye::after {
  width: 8px;
  height: 6px;
  background: #1a1a2e;
  top: 2px;
  left: 4px;
  border-radius: 2px;
}

.monster-quakebrute .mouth {
  width: 22px;
  height: 6px;
  background: #1a0e06;
  border-radius: 0 0 6px 6px;
  top: 42px;
  left: 29px;
}

/* Quakebrute rock armor plates */
.monster-quakebrute .body::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 16px;
  background: #4a3020;
  border-radius: 4px;
  top: 6px;
  left: 6px;
  border: 1px solid #5a4030;
}

.monster-quakebrute .body::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 14px;
  background: #4a3020;
  border-radius: 4px;
  top: 8px;
  right: 6px;
  border: 1px solid #5a4030;
}

/* Quakebrute ground cracks */
.monster-quakebrute .tail {
  position: absolute;
  bottom: -6px;
  left: 10px;
  width: 60px;
  height: 8px;
}

.monster-quakebrute .tail::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #7fff00, transparent);
  border-radius: 2px;
  bottom: 0;
  left: 10px;
  box-shadow: 0 0 6px rgba(127, 255, 0, 0.4);
}

/* === Terradon (Earth, Heroic) === */
.monster-terradon .body {
  width: 62px;
  height: 62px;
  background: linear-gradient(135deg, #2d1f0e, #5a3a20, #386641);
  border-radius: 16px;
  left: 9px;
  box-shadow: inset 0 0 12px rgba(100, 200, 50, 0.15);
}

.monster-terradon .eyes {
  top: 20px;
  left: 16px;
  gap: 12px;
}

.monster-terradon .eye {
  width: 16px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
}

.monster-terradon .eye::after {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #7fff00, #228b22);
  top: 3px;
  left: 4px;
  border-radius: 50%;
}

.monster-terradon .mouth {
  width: 16px;
  height: 5px;
  background: #0a0600;
  border-radius: 0 0 6px 6px;
  top: 44px;
  left: 32px;
}

/* Terradon crystal growths */
.monster-terradon .body::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 22px;
  background: linear-gradient(to top, #386641, #7fff00);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -18px;
  left: 14px;
  filter: drop-shadow(0 0 4px rgba(127, 255, 0, 0.5));
}

.monster-terradon .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 18px;
  background: linear-gradient(to top, #386641, #7fff00);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -14px;
  right: 12px;
  filter: drop-shadow(0 0 4px rgba(127, 255, 0, 0.5));
}

/* Terradon earth aura */
.monster-terradon .tail {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 102, 65, 0.25) 0%, rgba(127, 255, 0, 0.05) 50%, transparent 70%);
  top: 0;
  left: 0;
}

/* === Zephyrkit (Cloud, Rare) === */
.monster-zephyrkit .body {
  width: 44px;
  height: 40px;
  background: linear-gradient(135deg, #c8d0ff, #e0e4ff);
  border-radius: 22px 22px 18px 18px;
  left: 18px;
  bottom: 5px;
}

.monster-zephyrkit .eyes {
  top: 22px;
  left: 24px;
  gap: 6px;
}

.monster-zephyrkit .eye {
  width: 12px;
  height: 14px;
}

.monster-zephyrkit .eye::after {
  width: 6px;
  height: 7px;
  top: 4px;
  left: 3px;
}

.monster-zephyrkit .mouth {
  width: 6px;
  height: 6px;
  background: #8890c0;
  border-radius: 50%;
  top: 42px;
  left: 37px;
}

/* Zephyrkit pointy ears */
.monster-zephyrkit .body::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 14px;
  background: #c8d0ff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -12px;
  left: 4px;
}

.monster-zephyrkit .body::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 14px;
  background: #c8d0ff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -12px;
  right: 4px;
}

/* Zephyrkit wind swirls */
.monster-zephyrkit .tail {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(184, 192, 255, 0.4);
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.monster-zephyrkit .tail::after {
  content: '';
  position: absolute;
  left: 48px;
  top: 4px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(184, 192, 255, 0.4);
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
}

/* === Thundermane (Cloud, Legendary) === */
.monster-thundermane .body {
  width: 56px;
  height: 55px;
  background: linear-gradient(135deg, #2a2a6a, #4a4a9a, #6a6abc);
  border-radius: 20px 20px 26px 26px;
  left: 12px;
}

.monster-thundermane .eyes {
  top: 22px;
  left: 20px;
  gap: 10px;
}

.monster-thundermane .eye {
  width: 14px;
  height: 10px;
  background: #fff;
  border-radius: 3px;
}

.monster-thundermane .eye::after {
  width: 7px;
  height: 7px;
  background: #ffd700;
  top: 1px;
  left: 4px;
  border-radius: 2px;
}

.monster-thundermane .mouth {
  width: 14px;
  height: 4px;
  border-bottom: 2px solid #1a1a4e;
  border-radius: 0 0 6px 6px;
  top: 40px;
  left: 33px;
}

/* Thundermane electric mane */
.monster-thundermane .body::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 20px;
  background: linear-gradient(to top, #4a4a9a, #8888dd);
  clip-path: polygon(0% 100%, 8% 20%, 18% 100%, 28% 0%, 40% 100%, 52% 10%, 64% 100%, 76% 0%, 88% 100%, 96% 30%, 100% 100%);
  top: -16px;
  left: 2px;
}

/* Thundermane lightning spark */
.monster-thundermane .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 16px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 100% 35%, 60% 35%, 100% 100%, 0% 55%, 45% 55%, 0% 0%);
  bottom: -12px;
  left: 24px;
  filter: drop-shadow(0 0 4px #ffd700);
}

/* Thundermane storm aura */
.monster-thundermane .tail {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 100, 200, 0.2) 0%, transparent 70%);
  top: 0;
  left: 1px;
}

/* === Cactusbur (Sand, Rare) === */
.monster-cactusbur .body {
  width: 45px;
  height: 50px;
  background: linear-gradient(135deg, #5a8a3e, #7ab356);
  border-radius: 22px 22px 20px 20px;
  left: 18px;
}

.monster-cactusbur .eyes {
  top: 20px;
  left: 24px;
  gap: 6px;
}

.monster-cactusbur .eye {
  width: 10px;
  height: 10px;
}

.monster-cactusbur .eye::after {
  width: 5px;
  height: 5px;
  top: 3px;
  left: 3px;
}

.monster-cactusbur .mouth {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #3a6a20;
  border-radius: 0 0 4px 4px;
  top: 36px;
  left: 37px;
}

/* Cactusbur spines */
.monster-cactusbur .body::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 10px;
  background: #d4c090;
  border-radius: 2px;
  top: 4px;
  left: -4px;
  box-shadow:
    0px 12px 0 0 #d4c090,
    0px 24px 0 0 #d4c090;
}

.monster-cactusbur .body::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 10px;
  background: #d4c090;
  border-radius: 2px;
  top: 4px;
  right: -4px;
  box-shadow:
    0px 12px 0 0 #d4c090,
    0px 24px 0 0 #d4c090;
}

/* Cactusbur flower top */
.monster-cactusbur .tail {
  position: absolute;
  top: 2px;
  left: 30px;
  width: 12px;
  height: 12px;
  background: #ff6b8a;
  border-radius: 50%;
}

.monster-cactusbur .tail::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}

/* === Miragefox (Sand, Epic) === */
.monster-miragefox .body {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #d4a84b, #e8c46a);
  border-radius: 24px 24px 20px 20px;
  left: 16px;
}

.monster-miragefox .eyes {
  top: 18px;
  left: 22px;
  gap: 8px;
}

.monster-miragefox .eye {
  width: 14px;
  height: 10px;
  border-radius: 2px 2px 7px 7px;
}

.monster-miragefox .eye::after {
  width: 6px;
  height: 7px;
  top: 1px;
  left: 4px;
  border-radius: 1px;
}

.monster-miragefox .mouth {
  width: 6px;
  height: 4px;
  background: #8b6914;
  border-radius: 50%;
  top: 36px;
  left: 37px;
}

/* Miragefox large ears */
.monster-miragefox .body::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 20px;
  background: linear-gradient(135deg, #d4a84b, #e8c46a);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -18px;
  left: 4px;
}

.monster-miragefox .body::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 20px;
  background: linear-gradient(135deg, #d4a84b, #e8c46a);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -18px;
  right: 4px;
}

/* Miragefox bushy tail */
.monster-miragefox .tail {
  position: absolute;
  bottom: 6px;
  right: 4px;
  width: 20px;
  height: 28px;
  background: linear-gradient(to top, #d4a84b, rgba(232, 196, 106, 0.4));
  border-radius: 10px 10px 6px 6px;
  transform: rotate(-20deg);
}

.monster-miragefox .tail::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  bottom: 0;
  left: 3px;
}

/* === Sphinxara (Sand, Heroic) === */
.monster-sphinxara .body {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #8b6914, #d4a84b, #e8c46a);
  border-radius: 20px 20px 24px 24px;
  left: 11px;
  box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.2);
}

.monster-sphinxara .eyes {
  top: 18px;
  left: 18px;
  gap: 10px;
}

.monster-sphinxara .eye {
  width: 16px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
}

.monster-sphinxara .eye::after {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffd700, #8b6914);
  top: 3px;
  left: 4px;
  border-radius: 50%;
}

.monster-sphinxara .mouth {
  width: 12px;
  height: 3px;
  border-bottom: 2px solid #5c3d1a;
  border-radius: 0 0 6px 6px;
  top: 42px;
  left: 34px;
}

/* Sphinxara headdress */
.monster-sphinxara .body::before {
  content: '';
  position: absolute;
  width: 52px;
  height: 18px;
  background: linear-gradient(to top, #8b6914, #ffd700);
  clip-path: polygon(10% 100%, 0% 40%, 20% 0%, 35% 60%, 50% 0%, 65% 60%, 80% 0%, 100% 40%, 90% 100%);
  top: -16px;
  left: 2px;
}

/* Sphinxara jewel eye */
.monster-sphinxara .body::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff0050, #8b0030);
  border-radius: 50%;
  top: 4px;
  left: 24px;
  box-shadow: 0 0 8px #ff0050;
}

/* Sphinxara golden aura */
.monster-sphinxara .tail {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(212, 168, 75, 0.08) 50%, transparent 70%);
  top: 0;
  left: 0;
}


/* ============================================================
   BOSS SPRITES — Unique, larger, match their titles
   ============================================================ */

/* === Golem King (Earth Boss) — Massive stone body with crown === */
.monster-boss-golem .body {
  width: 65px;
  height: 62px;
  background: linear-gradient(135deg, #4a6741, #2d4a22);
  border-radius: 10px 10px 20px 20px;
  left: 8px;
  border: 2px solid #5a7a50;
}

.monster-boss-golem .eyes {
  top: 28px;
  left: 18px;
  gap: 14px;
}

.monster-boss-golem .eye {
  width: 14px;
  height: 10px;
  background: #7fff00;
  border-radius: 3px;
}

.monster-boss-golem .eye::after {
  width: 6px;
  height: 6px;
  background: #1a1a2e;
  top: 2px;
  left: 4px;
  border-radius: 2px;
}

.monster-boss-golem .mouth {
  width: 28px;
  height: 8px;
  background: #1a2e14;
  border-radius: 0 0 6px 6px;
  top: 46px;
  left: 27px;
}

/* Golem King jagged teeth */
.monster-boss-golem .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 24px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #8cb369 0px, #8cb369 3px, #1a2e14 3px, #1a2e14 6px);
}

/* Golem King crown */
.monster-boss-golem .tail {
  position: absolute;
  top: -2px;
  left: 12px;
  width: 56px;
  height: 20px;
  background: linear-gradient(to top, #c8a200, #ffd700);
  clip-path: polygon(0% 100%, 10% 30%, 20% 100%, 35% 0%, 50% 100%, 65% 0%, 80% 100%, 90% 30%, 100% 100%);
}

/* Golem body cracks */
.monster-boss-golem .body::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background: rgba(0, 0, 0, 0.3);
  top: 15px;
  left: 8px;
  transform: rotate(-10deg);
  border-radius: 2px;
}

.monster-boss-golem .body::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 3px;
  background: rgba(0, 0, 0, 0.25);
  bottom: 15px;
  right: 8px;
  transform: rotate(15deg);
  border-radius: 2px;
}

/* === Tidal Guardian (Water Boss) — Armored sea titan with shield === */
.monster-boss-tidal .body {
  width: 65px;
  height: 55px;
  background: linear-gradient(135deg, #003d6b, #0077b6);
  border-radius: 20px 20px 30px 30px;
  left: 8px;
  border: 2px solid #00b4d8;
}

.monster-boss-tidal .eyes {
  top: 18px;
  left: 16px;
  gap: 16px;
}

.monster-boss-tidal .eye {
  width: 14px;
  height: 14px;
  background: #00ffff;
  border-radius: 50%;
}

.monster-boss-tidal .eye::after {
  width: 7px;
  height: 7px;
  background: #003060;
  top: 4px;
  left: 4px;
  border-radius: 50%;
}

.monster-boss-tidal .mouth {
  width: 22px;
  height: 6px;
  background: #001830;
  border-radius: 0 0 8px 8px;
  top: 40px;
  left: 30px;
}

/* Tidal Guardian massive shell/helmet */
.monster-boss-tidal .body::before {
  content: '';
  position: absolute;
  width: 58px;
  height: 38px;
  background: linear-gradient(135deg, #004080, #006db3);
  border-radius: 30px 30px 0 0;
  top: -28px;
  left: 2px;
  border: 3px solid #00b4d8;
  border-bottom: none;
}

/* Tidal Guardian shield arm */
.monster-boss-tidal .tail {
  position: absolute;
  left: -8px;
  top: 20px;
  width: 18px;
  height: 30px;
  background: linear-gradient(135deg, #005a9e, #0088cc);
  border-radius: 10px 4px 4px 10px;
  border: 2px solid #00b4d8;
}

.monster-boss-tidal .tail::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #00ffff;
  border-radius: 50%;
  top: 9px;
  left: 3px;
}

/* Tidal Guardian water drops */
.monster-boss-tidal .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 12px;
  background: rgba(0, 180, 216, 0.4);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  top: -8px;
  right: -4px;
}

/* === Storm Lord (Cloud Boss) — Thundercloud giant with lightning === */
.monster-boss-storm .body {
  width: 68px;
  height: 50px;
  background: linear-gradient(135deg, #2a2a6a, #4a4a9a);
  border-radius: 35px 35px 25px 25px;
  left: 6px;
  box-shadow: inset 0 -10px 20px rgba(184, 192, 255, 0.15);
}

.monster-boss-storm .eyes {
  top: 16px;
  left: 14px;
  gap: 16px;
}

.monster-boss-storm .eye {
  width: 16px;
  height: 12px;
  background: #fff;
  border-radius: 3px 3px 8px 8px;
}

.monster-boss-storm .eye::after {
  width: 8px;
  height: 8px;
  background: #ffd700;
  top: 2px;
  left: 4px;
  border-radius: 2px;
}

.monster-boss-storm .mouth {
  width: 24px;
  height: 6px;
  background: #1a1a4e;
  border-radius: 0 0 10px 10px;
  top: 36px;
  left: 28px;
}

/* Storm Lord cloud puffs on top */
.monster-boss-storm .body::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 22px;
  background: linear-gradient(135deg, #3a3a8a, #5a5aaa);
  border-radius: 50%;
  top: -14px;
  left: 5px;
}

.monster-boss-storm .body::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 18px;
  background: linear-gradient(135deg, #4040a0, #6060bb);
  border-radius: 50%;
  top: -10px;
  right: 5px;
}

/* Storm Lord lightning bolts */
.monster-boss-storm .tail {
  position: absolute;
  bottom: -4px;
  left: 18px;
  width: 0;
  height: 0;
}

.monster-boss-storm .tail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 22px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 100% 35%, 60% 35%, 100% 100%, 0% 55%, 45% 55%, 0% 0%);
  filter: drop-shadow(0 0 4px #ffd700);
}

.monster-boss-storm .tail::after {
  content: '';
  position: absolute;
  left: 30px;
  top: 4px;
  width: 6px;
  height: 18px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 100% 35%, 60% 35%, 100% 100%, 0% 55%, 45% 55%, 0% 0%);
  filter: drop-shadow(0 0 4px #ffd700);
}

/* === Dune Emperor (Sand Boss) — Towering armored scorpion king === */
.monster-boss-dune .body {
  width: 62px;
  height: 58px;
  background: linear-gradient(135deg, #8b6914, #c8913c);
  border-radius: 15px 15px 25px 25px;
  left: 9px;
  border: 2px solid #d4a84b;
}

.monster-boss-dune .eyes {
  top: 16px;
  left: 16px;
  gap: 10px;
}

.monster-boss-dune .eye {
  width: 14px;
  height: 10px;
  background: #ff2200;
  border-radius: 2px 2px 7px 7px;
}

.monster-boss-dune .eye::after {
  width: 6px;
  height: 7px;
  background: #1a1a2e;
  top: 1px;
  left: 4px;
  border-radius: 1px;
}

.monster-boss-dune .mouth {
  width: 24px;
  height: 6px;
  background: #5c3d1a;
  border-radius: 0 0 6px 6px;
  top: 38px;
  left: 28px;
}

/* Dune Emperor crown/headdress */
.monster-boss-dune .body::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 20px;
  background: linear-gradient(to top, #c8913c, #ffd700);
  clip-path: polygon(10% 100%, 0% 40%, 20% 0%, 35% 60%, 50% 0%, 65% 60%, 80% 0%, 100% 40%, 90% 100%);
  top: -18px;
  left: 5px;
}

/* Dune Emperor jewel */
.monster-boss-dune .body::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff0000, #8b0000);
  border-radius: 50%;
  top: 4px;
  left: 25px;
  box-shadow: 0 0 6px #ff0000;
}

/* Dune Emperor scorpion tail */
.monster-boss-dune .tail {
  position: absolute;
  right: -6px;
  top: 4px;
  width: 14px;
  height: 40px;
}

.monster-boss-dune .tail::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 32px;
  background: linear-gradient(to top, #8b6914, #c8913c);
  border-radius: 5px;
  bottom: 0;
  left: 2px;
  transform: rotate(15deg);
}

.monster-boss-dune .tail::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #5c3d1a;
  top: -6px;
  left: 1px;
  transform: rotate(20deg);
}

/* === Inferno Beast (Fire Boss) — Massive horned demon wreathed in flame === */
.monster-boss-inferno .body {
  width: 65px;
  height: 60px;
  background: linear-gradient(135deg, #8b0000, #cc2200);
  border-radius: 15px 15px 25px 25px;
  left: 8px;
  box-shadow: inset 0 -10px 20px rgba(255, 100, 0, 0.3);
}

.monster-boss-inferno .eyes {
  top: 22px;
  left: 16px;
  gap: 12px;
}

.monster-boss-inferno .eye {
  width: 16px;
  height: 10px;
  background: #ff4400;
  border-radius: 2px;
}

.monster-boss-inferno .eye::after {
  width: 8px;
  height: 6px;
  background: #ffd700;
  top: 2px;
  left: 4px;
  border-radius: 1px;
}

.monster-boss-inferno .mouth {
  width: 30px;
  height: 10px;
  background: #1a0000;
  border-radius: 0 0 8px 8px;
  top: 42px;
  left: 26px;
}

/* Inferno Beast jagged teeth row */
.monster-boss-inferno .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 26px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 2px, transparent 2px, transparent 5px);
  clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
}

/* Inferno Beast massive horns */
.monster-boss-inferno .body::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 28px;
  background: linear-gradient(to top, #4a0000, #222);
  border-radius: 4px 4px 2px 2px;
  top: -24px;
  left: 6px;
  transform: rotate(-20deg);
}

.monster-boss-inferno .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 28px;
  background: linear-gradient(to top, #4a0000, #222);
  border-radius: 4px 4px 2px 2px;
  top: -24px;
  right: 6px;
  transform: rotate(20deg);
}

/* Inferno Beast flame aura */
.monster-boss-inferno .tail {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.25) 0%, rgba(255, 165, 0, 0.1) 50%, transparent 70%);
  top: 0;
  left: 1px;
  animation: inferno-pulse 1.5s ease-in-out infinite;
}

@keyframes inferno-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ============================================================
   DINOSAUR MONSTERS — Season 2: Time Warp
   ============================================================ */

/* === Hatchling (Dino, Common) — Tiny baby raptor === */
.monster-hatchling .body {
  width: 42px;
  height: 40px;
  background: linear-gradient(135deg, #6dbf47, #4a9e2e, #3d8a22);
  border-radius: 20px 20px 18px 18px;
  left: 18px;
  bottom: 2px;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: hatchling-bounce 1.2s ease-in-out infinite;
}

@keyframes hatchling-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.monster-hatchling .eyes {
  top: 16px;
  left: 22px;
  gap: 8px;
}

.monster-hatchling .eye {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.monster-hatchling .eye::after {
  width: 7px;
  height: 7px;
  top: 4px;
  left: 4px;
}

.monster-hatchling .mouth {
  width: 10px;
  height: 5px;
  background: #2d6b14;
  border-radius: 0 0 5px 5px;
  top: 33px;
  left: 35px;
}

/* Hatchling eggshell hat */
.monster-hatchling .body::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 14px;
  background: #f5f0e0;
  border-radius: 15px 15px 0 0;
  top: -10px;
  left: 6px;
  border-bottom: 2px solid #e0d8c0;
  clip-path: polygon(0% 0%, 0% 80%, 15% 100%, 30% 70%, 50% 100%, 70% 75%, 85% 100%, 100% 80%, 100% 0%);
}

/* Hatchling tiny arms */
.monster-hatchling .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 12px;
  background: #5aad36;
  border-radius: 4px 0 4px 4px;
  top: 18px;
  left: -6px;
  transform: rotate(15deg);
  box-shadow: 40px 0 0 0 #5aad36;
}

/* Hatchling tail */
.monster-hatchling .tail {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 16px;
  height: 10px;
  background: linear-gradient(90deg, #5aad36, #4a9e2e);
  border-radius: 0 10px 6px 0;
  transform: rotate(-10deg);
  animation: hatchling-wag 0.8s ease-in-out infinite alternate;
}

@keyframes hatchling-wag {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(5deg); }
}

/* === Stegowl (Dino, Rare) — Plated armored dino with wise eyes === */
.monster-stegowl .body {
  width: 56px;
  height: 48px;
  background: linear-gradient(135deg, #6a8a9a, #4a6a7a, #3d5a6a);
  border-radius: 28px 28px 24px 24px;
  left: 12px;
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.3);
}

.monster-stegowl .eyes {
  top: 18px;
  left: 18px;
  gap: 12px;
}

.monster-stegowl .eye {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 40% 40%, #ffe44d, #ffd700, #cc9900);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.monster-stegowl .eye::after {
  width: 7px;
  height: 7px;
  background: #1a1a2e;
  top: 5px;
  left: 5px;
  border-radius: 50%;
}

.monster-stegowl .mouth {
  width: 14px;
  height: 5px;
  background: #2a3a44;
  border-radius: 0 0 5px 5px;
  top: 40px;
  left: 33px;
}

/* Stegowl back plates — glowing with color shift */
.monster-stegowl .body::before {
  content: '';
  position: absolute;
  width: 48px;
  height: 18px;
  background: linear-gradient(to top, #3d5a6a, #8ab4cc, #a0d0e8);
  clip-path: polygon(0% 100%, 10% 0%, 20% 100%, 33% 0%, 46% 100%, 58% 0%, 70% 100%, 82% 0%, 92% 100%);
  top: -15px;
  left: 3px;
  filter: drop-shadow(0 -2px 3px rgba(120, 180, 220, 0.4));
  animation: stegowl-plates 2s ease-in-out infinite;
}

@keyframes stegowl-plates {
  0%, 100% { filter: drop-shadow(0 -2px 3px rgba(120, 180, 220, 0.3)); }
  50% { filter: drop-shadow(0 -3px 6px rgba(120, 180, 220, 0.6)); }
}

/* Stegowl tail with thagomizer spikes */
.monster-stegowl .tail {
  position: absolute;
  bottom: 6px;
  right: 0px;
  width: 20px;
  height: 22px;
  background: linear-gradient(135deg, #4a6a7a, #3d5a6a);
  border-radius: 0 12px 6px 0;
}

.monster-stegowl .tail::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 12px;
  background: linear-gradient(to top, #5a8a9a, #a0d0e8);
  border-radius: 3px 3px 0 0;
  top: -10px;
  left: 4px;
  transform: rotate(15deg);
  box-shadow: 8px 2px 0 0 #a0d0e8;
}

/* === Tricerash (Dino, Epic) — Three-horned charger === */
.monster-tricerash .body {
  width: 58px;
  height: 52px;
  background: linear-gradient(135deg, #c9960b, #daa520, #e8b830);
  border-radius: 15px 15px 26px 26px;
  left: 11px;
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.35);
  animation: tricerash-stomp 1.5s ease-in-out infinite;
}

@keyframes tricerash-stomp {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.monster-tricerash .eyes {
  top: 22px;
  left: 18px;
  gap: 12px;
}

.monster-tricerash .eye {
  width: 13px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

.monster-tricerash .eye::after {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #a0522d, #8b4513);
  top: 2px;
  left: 4px;
  border-radius: 50%;
}

.monster-tricerash .mouth {
  width: 20px;
  height: 6px;
  background: #8b6508;
  border-radius: 0 0 8px 8px;
  top: 40px;
  left: 30px;
}

/* Tricerash frill/shield — ornate with scalloped edge */
.monster-tricerash .body::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 24px;
  background: linear-gradient(135deg, #cd9b1d, #eec900, #f0d000);
  border-radius: 32px 32px 0 0;
  top: -20px;
  left: 0px;
  border: 2px solid #b8860b;
  border-bottom: none;
  box-shadow: 0 -3px 8px rgba(238, 201, 0, 0.25);
}

/* Tricerash center horn — taller, sharper */
.monster-tricerash .body::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 22px;
  background: linear-gradient(to top, #daa520, #f5f5dc, #fff);
  border-radius: 3px 3px 1px 1px;
  top: -18px;
  left: 25px;
  filter: drop-shadow(0 -2px 3px rgba(245, 245, 220, 0.4));
}

/* Tricerash side horns */
.monster-tricerash .tail {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 60px;
  height: 10px;
}

.monster-tricerash .tail::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 16px;
  background: linear-gradient(to top, #daa520, #f5f5dc, #fff);
  border-radius: 2px;
  top: -10px;
  left: 2px;
  transform: rotate(-22deg);
  filter: drop-shadow(0 0 2px rgba(245, 245, 220, 0.3));
}

.monster-tricerash .tail::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 16px;
  background: linear-gradient(to top, #daa520, #f5f5dc, #fff);
  border-radius: 2px;
  top: -10px;
  right: 2px;
  transform: rotate(22deg);
  filter: drop-shadow(0 0 2px rgba(245, 245, 220, 0.3));
}

/* === Raptorex (Dino, Legendary) — Fast predator with claws === */
.monster-raptorex .body {
  width: 50px;
  height: 55px;
  background: linear-gradient(135deg, #8b2500, #cd3700, #e04500);
  border-radius: 22px 22px 20px 20px;
  left: 15px;
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(205, 55, 0, 0.3);
  animation: raptorex-sway 0.6s ease-in-out infinite alternate;
}

@keyframes raptorex-sway {
  0% { transform: translateX(-1px) rotate(-1deg); }
  100% { transform: translateX(1px) rotate(1deg); }
}

.monster-raptorex .eyes {
  top: 12px;
  left: 22px;
  gap: 6px;
}

.monster-raptorex .eye {
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, #ffe44d, #ffd700);
  border-radius: 2px 2px 7px 7px;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.monster-raptorex .eye::after {
  width: 4px;
  height: 8px;
  background: #1a1a2e;
  top: 1px;
  left: 5px;
  border-radius: 1px;
}

.monster-raptorex .mouth {
  width: 18px;
  height: 6px;
  background: #3a0800;
  border-radius: 0 0 4px 4px;
  top: 32px;
  left: 31px;
}

/* Raptorex fangs — more visible teeth */
.monster-raptorex .mouth::before,
.monster-raptorex .mouth::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 6px;
  background: #fff;
  top: -1px;
}

.monster-raptorex .mouth::before { left: 3px; border-radius: 0 0 2px 2px; }
.monster-raptorex .mouth::after { right: 3px; border-radius: 0 0 2px 2px; }

/* Raptorex feathered crest — bigger, fiercer */
.monster-raptorex .body::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 18px;
  background: linear-gradient(to top, #cd3700, #ff4500, #ff6347);
  clip-path: polygon(0% 100%, 15% 0%, 30% 60%, 50% 0%, 70% 60%, 85% 0%, 100% 100%);
  top: -16px;
  left: 8px;
  filter: drop-shadow(0 -2px 4px rgba(255, 69, 0, 0.4));
}

/* Raptorex claws — sharper */
.monster-raptorex .body::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 10px;
  background: #fff;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  bottom: -8px;
  left: 10px;
  box-shadow: 12px 0 0 0 #fff, 24px 0 0 0 #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

/* Raptorex speed lines aura — animated */
.monster-raptorex .tail {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.25) 0%, rgba(205, 55, 0, 0.1) 40%, transparent 70%);
  top: 2px;
  left: 2px;
  animation: raptorex-aura 1.2s ease-in-out infinite;
}

@keyframes raptorex-aura {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* === Rexomega (Dino, Heroic) — The king of dinosaurs === */
.monster-rexomega .body {
  width: 62px;
  height: 62px;
  background: linear-gradient(135deg, #2e0854, #5b1a8a, #7b2fbe, #9b4ace);
  border-radius: 18px 18px 26px 26px;
  left: 9px;
  box-shadow:
    inset 0 0 15px rgba(180, 100, 255, 0.3),
    0 0 12px rgba(123, 47, 190, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.4);
  animation: rexomega-breathe 2s ease-in-out infinite;
}

@keyframes rexomega-breathe {
  0%, 100% { box-shadow: inset 0 0 15px rgba(180, 100, 255, 0.3), 0 0 12px rgba(123, 47, 190, 0.4), 0 4px 10px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: inset 0 0 20px rgba(180, 100, 255, 0.5), 0 0 20px rgba(123, 47, 190, 0.6), 0 4px 14px rgba(0, 0, 0, 0.5); }
}

.monster-rexomega .eyes {
  top: 18px;
  left: 14px;
  gap: 12px;
}

.monster-rexomega .eye {
  width: 16px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 48, 48, 0.5);
}

.monster-rexomega .eye::after {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff4444, #ff3030, #8b0000);
  top: 2px;
  left: 4px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ff3030;
  animation: rexomega-eyes 2.5s ease-in-out infinite;
}

@keyframes rexomega-eyes {
  0%, 100% { box-shadow: 0 0 4px #ff3030; }
  50% { box-shadow: 0 0 10px #ff3030, 0 0 16px rgba(255, 0, 0, 0.3); }
}

.monster-rexomega .mouth {
  width: 30px;
  height: 12px;
  background: #0a0014;
  border-radius: 0 0 10px 10px;
  top: 42px;
  left: 25px;
  box-shadow: inset 0 -3px 6px rgba(123, 47, 190, 0.3);
}

/* Rexomega jagged teeth — top and bottom */
.monster-rexomega .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 26px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 2px, transparent 2px, transparent 5px);
  clip-path: polygon(0% 0%, 8% 100%, 16% 0%, 24% 100%, 33% 0%, 41% 100%, 50% 0%, 58% 100%, 66% 0%, 75% 100%, 83% 0%, 91% 100%, 100% 0%);
}

/* Rexomega massive horns — glowing tips */
.monster-rexomega .body::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 28px;
  background: linear-gradient(to top, #5b1a8a, #333, #fff);
  border-radius: 4px 4px 1px 1px;
  top: -24px;
  left: 7px;
  transform: rotate(-18deg);
  filter: drop-shadow(0 -3px 4px rgba(180, 100, 255, 0.4));
}

.monster-rexomega .body::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 28px;
  background: linear-gradient(to top, #5b1a8a, #333, #fff);
  border-radius: 4px 4px 1px 1px;
  top: -24px;
  right: 7px;
  transform: rotate(18deg);
  filter: drop-shadow(0 -3px 4px rgba(180, 100, 255, 0.4));
}

/* Rexomega primeval aura — double layered */
.monster-rexomega .tail {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 74, 206, 0.35) 0%, rgba(180, 100, 255, 0.15) 40%, transparent 70%);
  top: -3px;
  left: -3px;
  animation: rexomega-aura 1.8s ease-in-out infinite;
}

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

@keyframes primeval-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* === Rex Primeval (Dino Boss) — Giant armored T-Rex with crown === */
.monster-boss-primeval .body {
  width: 68px;
  height: 62px;
  background: linear-gradient(135deg, #3a0066, #6b1a9e, #8b3abe, #9b4ace);
  border-radius: 14px 14px 28px 28px;
  left: 6px;
  box-shadow:
    inset 0 -10px 20px rgba(200, 120, 255, 0.2),
    0 0 16px rgba(155, 74, 206, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.5);
  border: 2px solid #b060e0;
  animation: boss-primeval-pulse 2s ease-in-out infinite;
}

@keyframes boss-primeval-pulse {
  0%, 100% { box-shadow: inset 0 -10px 20px rgba(200, 120, 255, 0.2), 0 0 16px rgba(155, 74, 206, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: inset 0 -10px 20px rgba(200, 120, 255, 0.4), 0 0 28px rgba(155, 74, 206, 0.7), 0 4px 16px rgba(0, 0, 0, 0.6); }
}

.monster-boss-primeval .eyes {
  top: 22px;
  left: 12px;
  gap: 16px;
}

.monster-boss-primeval .eye {
  width: 18px;
  height: 14px;
  background: #ff4400;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 68, 0, 0.7);
  animation: boss-eye-flicker 1.5s ease-in-out infinite alternate;
}

@keyframes boss-eye-flicker {
  0% { box-shadow: 0 0 8px rgba(255, 68, 0, 0.5); }
  100% { box-shadow: 0 0 14px rgba(255, 68, 0, 0.9), 0 0 20px rgba(255, 0, 0, 0.3); }
}

.monster-boss-primeval .eye::after {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #fff, #ffd700);
  top: 3px;
  left: 5px;
  border-radius: 2px;
}

.monster-boss-primeval .mouth {
  width: 32px;
  height: 12px;
  background: #0a0014;
  border-radius: 0 0 10px 10px;
  top: 44px;
  left: 24px;
  box-shadow: inset 0 -4px 8px rgba(155, 74, 206, 0.3);
}

/* Rex Primeval jagged teeth */
.monster-boss-primeval .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 28px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 2px, transparent 2px, transparent 5px);
  clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
}

/* Rex Primeval crown — grander with gems */
.monster-boss-primeval .body::before {
  content: '';
  position: absolute;
  width: 62px;
  height: 26px;
  background: linear-gradient(to top, #8b3abe, #daa520, #ffd700);
  clip-path: polygon(0% 100%, 8% 40%, 16% 100%, 30% 0%, 44% 100%, 50% 60%, 56% 100%, 70% 0%, 84% 100%, 92% 40%, 100% 100%);
  top: -24px;
  left: 1px;
  filter: drop-shadow(0 -3px 6px rgba(255, 215, 0, 0.4));
}

/* Rex Primeval jewel — pulsing */
.monster-boss-primeval .body::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #ff66ff, #ff00ff, #8b008b);
  border-radius: 50%;
  top: 5px;
  left: 25px;
  box-shadow: 0 0 10px #ff00ff, 0 0 24px rgba(255, 0, 255, 0.4);
  animation: boss-jewel 1.3s ease-in-out infinite;
}

@keyframes boss-jewel {
  0%, 100% { box-shadow: 0 0 10px #ff00ff, 0 0 24px rgba(255, 0, 255, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 16px #ff00ff, 0 0 36px rgba(255, 0, 255, 0.6); transform: scale(1.15); }
}

/* Rex Primeval primeval aura — massive */
.monster-boss-primeval .tail {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 74, 206, 0.35) 0%, rgba(255, 0, 255, 0.12) 40%, transparent 70%);
  top: -5px;
  left: -5px;
  animation: primeval-pulse 1.5s ease-in-out infinite;
}

/* ============================================================
   CODE-EXCLUSIVE MONSTERS
   ============================================================ */

/* === Custom lab-built monsters (color-swappable via CSS vars) === */
.monster-custom {
  --custom-body: #7a4dff;
  --custom-eye: #ffd84c;
}

.monster-custom .body {
  width: 54px;
  height: 50px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, var(--custom-body), color-mix(in srgb, var(--custom-body) 60%, #000));
  border-radius: 28px 28px 22px 22px;
  left: 13px;
  bottom: 2px;
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4);
  animation: custom-bob 1.6s ease-in-out infinite;
}

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

.monster-custom .body::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 16px;
  background: color-mix(in srgb, var(--custom-body) 70%, #000);
  border-radius: 50% 10% 50% 50%;
  top: 6px;
  left: -10px;
  transform: rotate(-20deg);
  box-shadow: 60px 0 0 0 color-mix(in srgb, var(--custom-body) 70%, #000);
  animation: custom-flap 1s ease-in-out infinite alternate;
}

@keyframes custom-flap {
  0% { transform: rotate(-22deg); }
  100% { transform: rotate(-6deg); }
}

.monster-custom .body::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 12px;
  background: color-mix(in srgb, var(--custom-body) 40%, #fff);
  border-radius: 3px 3px 1px 1px;
  top: -10px;
  left: 14px;
  transform: rotate(-12deg);
  box-shadow: 20px 2px 0 -1px color-mix(in srgb, var(--custom-body) 40%, #fff);
}

.monster-custom .eyes {
  top: 18px;
  left: 20px;
  gap: 10px;
}

.monster-custom .eye {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 40%, #fff, var(--custom-eye));
  box-shadow: 0 0 5px color-mix(in srgb, var(--custom-eye) 80%, transparent);
}

.monster-custom .eye::after {
  width: 6px;
  height: 6px;
  background: #1a1a2e;
  top: 4px;
  left: 4px;
}

.monster-custom .mouth {
  width: 12px;
  height: 5px;
  background: color-mix(in srgb, var(--custom-body) 30%, #000);
  border-radius: 0 0 6px 6px;
  top: 36px;
  left: 34px;
}

.monster-custom .tail {
  position: absolute;
  bottom: 2px;
  right: -2px;
  width: 22px;
  height: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--custom-body) 60%, #000), var(--custom-body));
  border-radius: 0 12px 8px 0;
  transform: rotate(-6deg);
}

.monster-custom .tail::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--custom-eye);
  border-radius: 50%;
  right: -3px;
  top: 1px;
  box-shadow: 0 0 5px color-mix(in srgb, var(--custom-eye) 70%, transparent);
}

/* === Skin Effects === */
.skin-silver .body {
  filter: saturate(0.1) brightness(1.6);
}
.skin-silver .eye {
  background: #e8e8e8;
}
.skin-silver .eye::after {
  background: #555;
}
.skin-silver .tail {
  filter: saturate(0.1) brightness(1.6);
}
.skin-silver .mouth {
  filter: saturate(0.1) brightness(1.6);
}

.skin-gold .body {
  filter: saturate(0.6) brightness(1.3) sepia(0.6) hue-rotate(-10deg);
}
.skin-gold .eye {
  background: #fff8dc;
}
.skin-gold .eye::after {
  background: #8b6914;
}
.skin-gold .tail {
  filter: saturate(0.6) brightness(1.3) sepia(0.6) hue-rotate(-10deg);
}
.skin-gold .mouth {
  filter: saturate(0.6) brightness(1.3) sepia(0.6) hue-rotate(-10deg);
}

/* ============================================================
   DRAGON MONSTERS — Season 3: Dragon's Peak
   ============================================================ */

/* === Drakelet (Dragon, Common) — Tiny baby dragon with stubby wings === */
.monster-drakelet .body {
  width: 44px;
  height: 42px;
  background: linear-gradient(135deg, #2fc085, #1fb874, #168a58);
  border-radius: 22px 22px 18px 18px;
  left: 17px;
  bottom: 2px;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.35);
  animation: drakelet-bob 1.4s ease-in-out infinite;
}

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

.monster-drakelet .body::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 9px;
  background: linear-gradient(to top, #e6c64f, #fff3b0);
  border-radius: 3px 3px 1px 1px;
  top: -7px;
  left: 11px;
  transform: rotate(-12deg);
  box-shadow: 22px 2px 0 -1px #e6c64f;
}

.monster-drakelet .body::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 14px;
  background: linear-gradient(135deg, #1fb874, #0e6a3f);
  border-radius: 50% 10% 50% 50%;
  top: 8px;
  left: -10px;
  transform: rotate(-20deg);
  box-shadow: 52px 0 0 0 #0e6a3f;
  animation: drakelet-flap 0.9s ease-in-out infinite alternate;
}

@keyframes drakelet-flap {
  0% { transform: rotate(-22deg) scaleY(1); }
  100% { transform: rotate(-6deg) scaleY(0.85); }
}

.monster-drakelet .eyes {
  top: 15px;
  left: 23px;
  gap: 7px;
}

.monster-drakelet .eye {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 40% 40%, #fff4a0, #ffd84c);
  box-shadow: 0 0 4px rgba(255, 215, 80, 0.4);
}

.monster-drakelet .eye::after {
  width: 6px;
  height: 6px;
  background: #1a1a2e;
  top: 3px;
  left: 4px;
}

.monster-drakelet .mouth {
  width: 10px;
  height: 4px;
  background: #084a30;
  border-radius: 0 0 5px 5px;
  top: 32px;
  left: 34px;
}

.monster-drakelet .tail {
  position: absolute;
  bottom: 4px;
  right: 2px;
  width: 18px;
  height: 10px;
  background: linear-gradient(90deg, #168a58, #1fb874);
  border-radius: 0 10px 6px 0;
  transform: rotate(-8deg);
  animation: drakelet-wag 0.7s ease-in-out infinite alternate;
}

.monster-drakelet .tail::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffd84c;
  border-radius: 50%;
  right: -2px;
  top: 1px;
  box-shadow: 0 0 4px rgba(255, 215, 80, 0.6);
}

@keyframes drakelet-wag {
  0% { transform: rotate(-14deg); }
  100% { transform: rotate(6deg); }
}

/* === Frostwyrm (Dragon, Rare) — Icy serpentine dragon === */
.monster-frostwyrm .body {
  width: 56px;
  height: 50px;
  background: linear-gradient(135deg, #d8f0ff, #8abfe2, #4a7aa0);
  border-radius: 28px 28px 22px 22px;
  left: 12px;
  bottom: 2px;
  box-shadow: inset 0 -8px 14px rgba(40, 90, 140, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 12px rgba(160, 220, 255, 0.3);
  animation: frostwyrm-sway 2.4s ease-in-out infinite;
}

@keyframes frostwyrm-sway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

.monster-frostwyrm .body::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 18px;
  background: linear-gradient(to top, #78b0d8, #e8f6ff);
  border-radius: 2px 2px 0 0;
  top: -16px;
  left: 10px;
  transform: rotate(-18deg);
  box-shadow: 30px 2px 0 0 #78b0d8, 34px 2px 0 0 #e8f6ff;
}

.monster-frostwyrm .body::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 30px;
  background: linear-gradient(135deg, rgba(200, 230, 255, 0.7), rgba(100, 160, 210, 0.4));
  border-radius: 50% 0 50% 50%;
  top: 2px;
  left: -18px;
  transform: rotate(-12deg);
  box-shadow: 72px -2px 0 0 rgba(100, 160, 210, 0.4);
  border: 1px solid rgba(220, 240, 255, 0.8);
  animation: frostwyrm-wing 2s ease-in-out infinite alternate;
}

@keyframes frostwyrm-wing {
  0% { transform: rotate(-16deg) scaleY(1); }
  100% { transform: rotate(-4deg) scaleY(0.9); }
}

.monster-frostwyrm .eyes {
  top: 17px;
  left: 18px;
  gap: 10px;
}

.monster-frostwyrm .eye {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle at 40% 40%, #e6fcff, #88d0ef, #2a6ea0);
  box-shadow: 0 0 6px rgba(136, 208, 239, 0.6);
}

.monster-frostwyrm .eye::after {
  width: 7px;
  height: 7px;
  background: #0a1a30;
  top: 3px;
  left: 4px;
}

.monster-frostwyrm .mouth {
  width: 14px;
  height: 5px;
  background: #2a5a82;
  border-radius: 0 0 7px 7px;
  top: 36px;
  left: 34px;
  box-shadow: 0 2px 4px rgba(200, 240, 255, 0.4);
}

.monster-frostwyrm .tail {
  position: absolute;
  bottom: 2px;
  right: -2px;
  width: 24px;
  height: 12px;
  background: linear-gradient(90deg, #4a7aa0, #8abfe2);
  border-radius: 0 12px 8px 0;
  transform: rotate(-8deg);
}

.monster-frostwyrm .tail::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #e8f6ff, #88d0ef);
  right: -4px;
  top: 1px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* === Venomscale (Dragon, Epic) — Jade wyvern with dripping fangs === */
.monster-venomscale .body {
  width: 58px;
  height: 52px;
  background: linear-gradient(135deg, #3ad090, #1a8c52, #0a5a32);
  border-radius: 28px 28px 24px 24px;
  left: 11px;
  bottom: 2px;
  box-shadow: inset 0 -8px 14px rgba(0, 60, 20, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
  animation: venomscale-breathe 2.2s ease-in-out infinite;
}

@keyframes venomscale-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.monster-venomscale .body::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 22px;
  background: linear-gradient(to top, #5a3218, #a86a30);
  border-radius: 4px 4px 0 0;
  top: -20px;
  left: 8px;
  transform: rotate(-22deg);
  box-shadow: 34px 6px 0 0 #5a3218, 38px 6px 0 -1px #a86a30;
}

.monster-venomscale .body::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 36px;
  background: linear-gradient(135deg, #1a8c52, #0a5a32);
  border-radius: 60% 0 50% 60%;
  top: 2px;
  left: -20px;
  transform: rotate(-14deg);
  box-shadow: 76px -2px 0 0 #0a5a32;
  border: 1px solid #062a18;
  animation: venomscale-wing 2s ease-in-out infinite alternate;
}

@keyframes venomscale-wing {
  0% { transform: rotate(-16deg); }
  100% { transform: rotate(-2deg); }
}

.monster-venomscale .eyes {
  top: 17px;
  left: 19px;
  gap: 10px;
}

.monster-venomscale .eye {
  width: 16px;
  height: 10px;
  background: radial-gradient(circle at 40% 40%, #fff4a0, #ffc72a, #8a5a00);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 200, 50, 0.55);
}

.monster-venomscale .eye::after {
  width: 4px;
  height: 8px;
  background: #0a1a10;
  border-radius: 40%;
  top: 1px;
  left: 6px;
}

.monster-venomscale .mouth {
  width: 18px;
  height: 8px;
  background: #06301a;
  border-radius: 0 0 10px 10px;
  top: 36px;
  left: 30px;
}

.monster-venomscale .mouth::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 6px;
  background: #fff;
  top: 0;
  left: 3px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: 9px 0 0 0 #fff;
}

.monster-venomscale .tail {
  position: absolute;
  bottom: 2px;
  right: -4px;
  width: 26px;
  height: 14px;
  background: linear-gradient(90deg, #0a5a32, #1a8c52);
  border-radius: 0 14px 8px 0;
  transform: rotate(-6deg);
}

.monster-venomscale .tail::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #3ad090;
  border-radius: 0 12px 0 12px;
  right: -4px;
  top: 1px;
  transform: rotate(25deg);
  box-shadow: 0 0 6px rgba(58, 208, 144, 0.6);
}

/* === Stormwing (Dragon, Legendary) — Storm dragon crackling with lightning === */
.monster-stormwing .body {
  width: 60px;
  height: 56px;
  background: linear-gradient(135deg, #4a3c78, #2a1e4e, #1a0e36);
  border-radius: 30px 30px 24px 24px;
  left: 10px;
  bottom: 2px;
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 14px rgba(180, 120, 255, 0.3);
  animation: stormwing-charge 1.8s ease-in-out infinite;
}

@keyframes stormwing-charge {
  0%, 100% { box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 10px rgba(180, 120, 255, 0.25); }
  50% { box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 20px rgba(200, 160, 255, 0.6); }
}

.monster-stormwing .body::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 26px;
  background: linear-gradient(to top, #1a0e36, #8a6ad4, #e8d8ff);
  top: -24px;
  left: 10px;
  transform: rotate(-10deg);
  clip-path: polygon(0 100%, 40% 100%, 100% 0, 60% 0);
  box-shadow: 38px 4px 0 0 #1a0e36;
}

.monster-stormwing .body::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 42px;
  background: linear-gradient(135deg, #6a4ea8, #2a1e4e);
  border-radius: 60% 0 50% 60%;
  top: 0;
  left: -24px;
  transform: rotate(-18deg);
  border: 1px solid #c8b0ff;
  box-shadow: 82px -4px 0 0 #2a1e4e, 0 0 8px rgba(200, 160, 255, 0.4);
  animation: stormwing-flap 1.5s ease-in-out infinite alternate;
}

@keyframes stormwing-flap {
  0% { transform: rotate(-22deg); }
  100% { transform: rotate(-4deg); }
}

.monster-stormwing .eyes {
  top: 19px;
  left: 18px;
  gap: 12px;
}

.monster-stormwing .eye {
  width: 16px;
  height: 14px;
  background: radial-gradient(circle at 40% 40%, #fff, #c8b0ff, #6a4ea8);
  box-shadow: 0 0 8px rgba(200, 160, 255, 0.7);
  animation: stormwing-eye-flash 2s ease-in-out infinite;
}

@keyframes stormwing-eye-flash {
  0%, 90%, 100% { box-shadow: 0 0 6px rgba(200, 160, 255, 0.5); }
  95% { box-shadow: 0 0 14px rgba(255, 255, 255, 0.9); }
}

.monster-stormwing .eye::after {
  width: 5px;
  height: 9px;
  background: #0a0018;
  border-radius: 40%;
  top: 2px;
  left: 5px;
}

.monster-stormwing .mouth {
  width: 20px;
  height: 8px;
  background: #0a0018;
  border-radius: 0 0 12px 12px;
  top: 40px;
  left: 30px;
  box-shadow: 0 0 4px rgba(200, 160, 255, 0.5);
}

.monster-stormwing .tail {
  position: absolute;
  bottom: 2px;
  right: -6px;
  width: 28px;
  height: 14px;
  background: linear-gradient(90deg, #1a0e36, #4a3c78);
  border-radius: 0 14px 8px 0;
  transform: rotate(-6deg);
}

.monster-stormwing .tail::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 18px;
  background: linear-gradient(135deg, #fff, #c8b0ff);
  right: -6px;
  top: -2px;
  clip-path: polygon(0 40%, 40% 40%, 20% 0, 100% 50%, 40% 60%, 60% 100%);
  filter: drop-shadow(0 0 4px rgba(200, 160, 255, 0.9));
  animation: stormwing-bolt 1.6s ease-in-out infinite;
}

@keyframes stormwing-bolt {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)); }
}

/* === Apexdracos (Dragon, Heroic) — Gold-plated ancient dragon king === */
.monster-apexdracos .body {
  width: 66px;
  height: 62px;
  background: linear-gradient(135deg, #ffe080, #e6a830, #8a5a12);
  border-radius: 32px 32px 26px 26px;
  left: 7px;
  bottom: 2px;
  box-shadow: inset 0 -10px 18px rgba(80, 40, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 210, 80, 0.5);
  animation: apex-pulse 2.4s ease-in-out infinite;
}

@keyframes apex-pulse {
  0%, 100% { box-shadow: inset 0 -10px 18px rgba(80, 40, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 210, 80, 0.4); }
  50% { box-shadow: inset 0 -10px 18px rgba(80, 40, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 230, 120, 0.8); }
}

.monster-apexdracos .body::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 28px;
  background: linear-gradient(to top, #6a3a0a, #ffe080);
  border-radius: 4px 4px 0 0;
  top: -26px;
  left: 6px;
  transform: rotate(-18deg);
  box-shadow:
    20px -4px 0 -1px #ffe080,
    24px -4px 0 -1px #6a3a0a,
    44px 4px 0 0 #6a3a0a,
    48px 4px 0 -1px #ffe080;
}

.monster-apexdracos .body::after {
  content: '';
  position: absolute;
  width: 36px;
  height: 52px;
  background: linear-gradient(135deg, #e6a830, #8a5a12, #4a2a08);
  border-radius: 70% 0 50% 60%;
  top: -4px;
  left: -30px;
  transform: rotate(-20deg);
  border: 2px solid #6a3a0a;
  box-shadow: 92px -6px 0 0 #8a5a12, 0 0 12px rgba(255, 210, 80, 0.5);
  animation: apex-wing 2.2s ease-in-out infinite alternate;
}

@keyframes apex-wing {
  0% { transform: rotate(-24deg) scaleY(1); }
  100% { transform: rotate(-6deg) scaleY(0.92); }
}

.monster-apexdracos .eyes {
  top: 20px;
  left: 22px;
  gap: 12px;
}

.monster-apexdracos .eye {
  width: 16px;
  height: 14px;
  background: radial-gradient(circle at 40% 40%, #fff0b0, #ff8c20, #cc3a00);
  box-shadow: 0 0 10px rgba(255, 140, 40, 0.7);
}

.monster-apexdracos .eye::after {
  width: 5px;
  height: 10px;
  background: #1a0000;
  border-radius: 40%;
  top: 2px;
  left: 5px;
}

.monster-apexdracos .mouth {
  width: 22px;
  height: 10px;
  background: #1a0a00;
  border-radius: 0 0 12px 12px;
  top: 44px;
  left: 32px;
  box-shadow: 0 2px 6px rgba(255, 140, 40, 0.5);
}

.monster-apexdracos .mouth::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 8px;
  background: #fff;
  top: 0;
  left: 2px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: 6px 0 0 0 #fff, 12px 0 0 0 #fff, 17px 0 0 0 #fff;
}

.monster-apexdracos .tail {
  position: absolute;
  bottom: 2px;
  right: -8px;
  width: 32px;
  height: 16px;
  background: linear-gradient(90deg, #6a3a0a, #e6a830);
  border-radius: 0 16px 10px 0;
  transform: rotate(-4deg);
}

.monster-apexdracos .tail::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 40% 40%, #ffe080, #e6a830);
  right: -6px;
  top: 0;
  clip-path: polygon(0 30%, 40% 30%, 40% 0, 100% 50%, 40% 100%, 40% 70%, 0 70%);
  filter: drop-shadow(0 0 6px rgba(255, 210, 80, 0.7));
}

/* === Voidwyrm (Dragon, Heroic — code-exclusive one-shot) === */
.monster-voidwyrm .body {
  width: 68px;
  height: 64px;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 120, 255, 0.35), transparent 60%),
    linear-gradient(135deg, #1a0030, #05000f);
  border-radius: 34px 34px 28px 28px;
  left: 6px;
  bottom: 2px;
  box-shadow:
    inset 0 -10px 20px rgba(100, 0, 160, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(180, 80, 255, 0.7);
  animation: voidwyrm-rift 2.6s ease-in-out infinite;
}

@keyframes voidwyrm-rift {
  0%, 100% { box-shadow: inset 0 -10px 20px rgba(100, 0, 160, 0.6), 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 18px rgba(180, 80, 255, 0.5); }
  50% { box-shadow: inset 0 -10px 20px rgba(140, 20, 200, 0.8), 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 38px rgba(220, 120, 255, 0.95); }
}

.monster-voidwyrm .body::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 32px;
  background: linear-gradient(to top, #05000f, #b050ff, #fff);
  border-radius: 4px 4px 0 0;
  top: -30px;
  left: 6px;
  transform: rotate(-18deg);
  box-shadow:
    22px -6px 0 -1px #b050ff,
    26px -6px 0 -2px #fff,
    44px 6px 0 0 #05000f,
    48px 6px 0 -1px #b050ff;
  filter: drop-shadow(0 0 8px rgba(200, 120, 255, 0.7));
}

.monster-voidwyrm .body::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 58px;
  background: linear-gradient(135deg, #2a0044, #05000f);
  border-radius: 70% 0 50% 60%;
  top: -6px;
  left: -32px;
  transform: rotate(-22deg);
  border: 2px solid #b050ff;
  box-shadow: 98px -6px 0 0 #05000f, 0 0 16px rgba(180, 80, 255, 0.7);
  animation: voidwyrm-wing 2.4s ease-in-out infinite alternate;
}

@keyframes voidwyrm-wing {
  0% { transform: rotate(-26deg) scaleY(1); }
  100% { transform: rotate(-6deg) scaleY(0.92); }
}

.monster-voidwyrm .eyes {
  top: 22px;
  left: 22px;
  gap: 14px;
  z-index: 2;
}

.monster-voidwyrm .eye {
  width: 18px;
  height: 16px;
  background: radial-gradient(circle at 40% 40%, #ffffff, #e0a0ff, #8020d0);
  box-shadow: 0 0 14px rgba(220, 120, 255, 1);
  animation: voidwyrm-eye 1.6s ease-in-out infinite;
}

@keyframes voidwyrm-eye {
  0%, 100% { box-shadow: 0 0 10px rgba(220, 120, 255, 0.7); }
  50% { box-shadow: 0 0 18px rgba(255, 200, 255, 1); }
}

.monster-voidwyrm .eye::after {
  width: 6px;
  height: 12px;
  background: #0a0018;
  border-radius: 40%;
  top: 2px;
  left: 6px;
}

.monster-voidwyrm .mouth {
  width: 26px;
  height: 12px;
  background: radial-gradient(ellipse at 50% 30%, #ff60ff, #400060 70%);
  border-radius: 0 0 14px 14px;
  top: 46px;
  left: 30px;
  box-shadow: 0 0 10px rgba(220, 120, 255, 0.8);
  z-index: 2;
}

.monster-voidwyrm .mouth::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 10px;
  background: #fff;
  top: 0;
  left: 3px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: 7px 0 0 0 #fff, 14px 0 0 0 #fff, 20px 0 0 0 #fff;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

.monster-voidwyrm .tail {
  position: absolute;
  bottom: 2px;
  right: -10px;
  width: 36px;
  height: 18px;
  background: linear-gradient(90deg, #05000f, #6020a0, #b050ff);
  border-radius: 0 18px 10px 0;
  transform: rotate(-4deg);
  box-shadow: 0 0 10px rgba(180, 80, 255, 0.6);
}

.monster-voidwyrm .tail::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 40% 40%, #fff, #e0a0ff, #8020d0);
  right: -8px;
  top: -2px;
  clip-path: polygon(0 30%, 40% 30%, 40% 0, 100% 50%, 40% 100%, 40% 70%, 0 70%);
  filter: drop-shadow(0 0 10px rgba(220, 120, 255, 1));
  animation: voidwyrm-pulse 1.8s ease-in-out infinite;
}

@keyframes voidwyrm-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ======================================================================= */
/*  Season 4: Crystal Mines monsters                                        */
/* ======================================================================= */

/* === Glintling (Crystal, Common) — tiny living shard === */
.monster-glintling .body {
  width: 38px;
  height: 40px;
  background: linear-gradient(135deg, #d6f6ff, #7fd8ee, #3a9fc4);
  clip-path: polygon(50% 0%, 80% 20%, 100% 60%, 70% 100%, 30% 100%, 0% 60%, 20% 20%);
  left: 20px;
  bottom: 2px;
  box-shadow: 0 0 10px rgba(120, 220, 255, 0.5), inset 0 -5px 8px rgba(30, 90, 130, 0.3);
  animation: glintling-bob 1.5s ease-in-out infinite;
}

@keyframes glintling-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}

.monster-glintling .body::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  top: 8px;
  left: 8px;
  opacity: 0.85;
  box-shadow: 16px 4px 0 -2px rgba(255, 255, 255, 0.7);
  animation: glintling-sparkle 1.8s ease-in-out infinite;
}

@keyframes glintling-sparkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

.monster-glintling .eyes {
  top: 16px;
  left: 22px;
  gap: 6px;
}

.monster-glintling .eye {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 40% 40%, #fff, #2a7d9e);
}

.monster-glintling .eye::after {
  width: 5px;
  height: 5px;
  background: #0a2e3e;
  top: 3px;
  left: 3px;
}

.monster-glintling .mouth {
  width: 8px;
  height: 3px;
  background: #0a2e3e;
  border-radius: 0 0 4px 4px;
  top: 30px;
  left: 35px;
}

.monster-glintling .tail {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 10px;
  height: 8px;
  background: linear-gradient(135deg, #7fd8ee, #3a9fc4);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: rotate(-6deg);
  animation: glintling-bob 1.5s ease-in-out infinite;
}

/* === Quartzback (Crystal, Rare) — armored quartz beast === */
.monster-quartzback .body {
  width: 56px;
  height: 46px;
  background: linear-gradient(135deg, #eafaff, #a9d8e8, #5a93ab);
  border-radius: 24px 24px 18px 18px;
  left: 12px;
  bottom: 2px;
  box-shadow: 0 0 12px rgba(150, 220, 245, 0.4), inset 0 -8px 12px rgba(40, 80, 110, 0.3);
  animation: quartzback-sway 2.4s ease-in-out infinite;
}

@keyframes quartzback-sway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

/* jagged quartz plates on the back */
.monster-quartzback .body::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 18px;
  background: linear-gradient(to top, #5a93ab, #d6f0fa);
  clip-path: polygon(0 100%, 12% 20%, 24% 100%, 40% 10%, 56% 100%, 72% 25%, 88% 100%, 100% 40%, 100% 100%);
  top: -14px;
  left: 4px;
  filter: drop-shadow(0 -2px 4px rgba(180, 230, 250, 0.5));
}

.monster-quartzback .eyes {
  top: 16px;
  left: 18px;
  gap: 12px;
}

.monster-quartzback .eye {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 40% 40%, #fff, #3a9fc4);
  box-shadow: 0 0 5px rgba(120, 210, 240, 0.5);
}

.monster-quartzback .eye::after {
  width: 6px;
  height: 6px;
  background: #0a2e3e;
  top: 3px;
  left: 4px;
}

.monster-quartzback .mouth {
  width: 14px;
  height: 5px;
  background: #0a2e3e;
  border-radius: 0 0 6px 6px;
  top: 32px;
  left: 33px;
}

.monster-quartzback .tail {
  position: absolute;
  bottom: 4px;
  right: 2px;
  width: 16px;
  height: 12px;
  background: linear-gradient(90deg, #5a93ab, #a9d8e8);
  clip-path: polygon(0 50%, 100% 0, 80% 50%, 100% 100%);
  transform: rotate(-8deg);
}

/* === Geodon (Crystal, Epic) — hollow guardian with amethyst geode core === */
.monster-geodon .body {
  width: 60px;
  height: 54px;
  background: linear-gradient(135deg, #b89adf, #8a5fc4, #5a3a8e);
  border-radius: 26px 26px 20px 20px;
  left: 10px;
  bottom: 2px;
  box-shadow: 0 0 14px rgba(160, 110, 220, 0.5), inset 0 -8px 14px rgba(50, 30, 90, 0.4);
  animation: geodon-breathe 2.2s ease-in-out infinite;
}

@keyframes geodon-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* glowing geode core in the chest */
.monster-geodon .body::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #ffffff, #e0a0ff, #9b4ace);
  clip-path: polygon(50% 0%, 90% 35%, 75% 100%, 25% 100%, 10% 35%);
  top: 20px;
  left: 19px;
  filter: drop-shadow(0 0 8px rgba(220, 150, 255, 0.9));
  animation: geodon-core 1.8s ease-in-out infinite;
}

@keyframes geodon-core {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 6px rgba(220, 150, 255, 0.7)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(240, 180, 255, 1)); }
}

/* crystal shards crowning the head */
.monster-geodon .body::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 16px;
  background: linear-gradient(to top, #8a5fc4, #e8d0ff);
  border-radius: 2px 2px 0 0;
  top: -14px;
  left: 14px;
  transform: rotate(-14deg);
  box-shadow: 24px 1px 0 0 #8a5fc4, 28px 1px 0 0 #e8d0ff;
}

.monster-geodon .eyes {
  top: 12px;
  left: 18px;
  gap: 14px;
}

.monster-geodon .eye {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 40% 40%, #fff, #b070e0);
  box-shadow: 0 0 6px rgba(200, 140, 255, 0.6);
}

.monster-geodon .eye::after {
  width: 6px;
  height: 6px;
  background: #2a0a4a;
  top: 3px;
  left: 4px;
}

.monster-geodon .mouth {
  width: 16px;
  height: 5px;
  background: #2a0a4a;
  border-radius: 0 0 7px 7px;
  top: 44px;
  left: 32px;
}

.monster-geodon .tail {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 12px;
  background: linear-gradient(135deg, #5a3a8e, #b89adf);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: rotate(-6deg);
}

/* === Prismaw (Crystal, Legendary) — predator of refracted light === */
.monster-prismaw .body {
  width: 60px;
  height: 50px;
  background: linear-gradient(135deg, #ffd6e8, #d0ffe0, #d0e8ff, #e8d0ff);
  border-radius: 28px 28px 20px 20px;
  left: 10px;
  bottom: 2px;
  box-shadow: 0 0 18px rgba(255, 220, 255, 0.6), inset 0 -8px 14px rgba(120, 140, 200, 0.3);
  animation: prismaw-shimmer 3s linear infinite;
}

@keyframes prismaw-shimmer {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* rainbow blade wings */
.monster-prismaw .body::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 32px;
  background: linear-gradient(135deg, rgba(255, 200, 230, 0.8), rgba(200, 230, 255, 0.5));
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  top: 4px;
  left: -20px;
  box-shadow: 76px 0 0 0 rgba(200, 230, 255, 0.5);
  transform: scaleX(1);
  animation: prismaw-wing 2s ease-in-out infinite alternate;
}

@keyframes prismaw-wing {
  0% { transform: scaleY(1) translateY(0); }
  100% { transform: scaleY(0.85) translateY(-2px); }
}

/* crown of light shards */
.monster-prismaw .body::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 18px;
  background: linear-gradient(to top, #c0a0ff, #ffffff);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  top: -16px;
  left: 16px;
  box-shadow: 22px 0 0 0 #c0a0ff, 11px 4px 0 -1px #ffffff;
}

.monster-prismaw .eyes {
  top: 16px;
  left: 19px;
  gap: 14px;
}

.monster-prismaw .eye {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 40%, #fff, #88c0ff);
  box-shadow: 0 0 8px rgba(180, 220, 255, 0.7);
}

.monster-prismaw .eye::after {
  width: 6px;
  height: 6px;
  background: #1a2a4a;
  top: 4px;
  left: 4px;
}

.monster-prismaw .mouth {
  width: 18px;
  height: 6px;
  background: #1a2a4a;
  border-radius: 0 0 8px 8px;
  top: 34px;
  left: 31px;
}

.monster-prismaw .tail {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 18px;
  height: 12px;
  background: linear-gradient(90deg, #d0e8ff, #ffd6e8);
  clip-path: polygon(0 50%, 100% 0, 75% 50%, 100% 100%);
  transform: rotate(-8deg);
}

/* === Diamondra (Crystal, Heroic) — diamond empress === */
.monster-diamondra .body {
  width: 66px;
  height: 58px;
  background: linear-gradient(135deg, #ffffff, #cdeffb, #9fd6ef, #6fb8d8);
  clip-path: polygon(50% 0%, 85% 18%, 100% 55%, 78% 100%, 22% 100%, 0% 55%, 15% 18%);
  left: 7px;
  bottom: 2px;
  box-shadow: 0 0 22px rgba(180, 235, 255, 0.7), inset 0 -10px 18px rgba(60, 120, 160, 0.3);
  animation: diamondra-glow 2.4s ease-in-out infinite;
}

@keyframes diamondra-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(180, 235, 255, 0.6), inset 0 -10px 18px rgba(60, 120, 160, 0.3); }
  50% { box-shadow: 0 0 32px rgba(220, 250, 255, 0.95), inset 0 -10px 18px rgba(60, 120, 160, 0.3); }
}

/* radiant diamond crown */
.monster-diamondra .body::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 22px;
  background: linear-gradient(to top, #6fb8d8, #ffffff);
  clip-path: polygon(0 100%, 14% 30%, 28% 100%, 42% 0, 50% 60%, 58% 0, 72% 100%, 86% 30%, 100% 100%);
  top: -18px;
  left: 5px;
  filter: drop-shadow(0 -3px 6px rgba(200, 245, 255, 0.7));
}

/* facet sparkle */
.monster-diamondra .body::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 14px;
  left: 14px;
  box-shadow: 30px 6px 0 -2px rgba(255, 255, 255, 0.8), 14px 22px 0 -3px rgba(255, 255, 255, 0.6);
  animation: diamondra-twinkle 1.6s ease-in-out infinite;
}

@keyframes diamondra-twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.monster-diamondra .eyes {
  top: 20px;
  left: 21px;
  gap: 14px;
}

.monster-diamondra .eye {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 40%, #fff, #5ad1e6);
  box-shadow: 0 0 8px rgba(140, 225, 245, 0.8);
}

.monster-diamondra .eye::after {
  width: 6px;
  height: 6px;
  background: #0a3a4a;
  top: 4px;
  left: 4px;
}

.monster-diamondra .mouth {
  width: 16px;
  height: 5px;
  background: #0a3a4a;
  border-radius: 0 0 7px 7px;
  top: 40px;
  left: 35px;
}

.monster-diamondra .tail {
  position: absolute;
  bottom: 6px;
  right: 2px;
  width: 16px;
  height: 14px;
  background: linear-gradient(135deg, #6fb8d8, #ffffff);
  clip-path: polygon(0 50%, 100% 0, 85% 50%, 100% 100%);
  transform: rotate(-6deg);
}

/* === Prismatron (Crystal, Code-exclusive) — colossal spectrum titan === */
.monster-prismatron .body {
  width: 70px;
  height: 62px;
  background: linear-gradient(135deg, #ff5e8a, #ffd24a, #4aff9e, #4ad2ff, #b04aff);
  background-size: 300% 300%;
  clip-path: polygon(50% 0%, 88% 16%, 100% 52%, 80% 100%, 20% 100%, 0% 52%, 12% 16%);
  left: 5px;
  bottom: 2px;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.7), inset 0 -10px 20px rgba(40, 40, 80, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: prismatron-flow 4s ease infinite;
}

@keyframes prismatron-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.monster-prismatron .body::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 26px;
  background: linear-gradient(to top, #b04aff, #ffffff, #4ad2ff);
  clip-path: polygon(0 100%, 12% 20%, 24% 100%, 38% 0, 50% 55%, 62% 0, 76% 100%, 88% 20%, 100% 100%);
  top: -22px;
  left: 5px;
  filter: drop-shadow(0 -3px 8px rgba(255, 255, 255, 0.8));
}

.monster-prismatron .body::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, #ffffff, #ffe0a0, #ff5e8a);
  border-radius: 50%;
  top: 22px;
  left: 22px;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1));
  animation: prismatron-core 1.6s ease-in-out infinite;
}

@keyframes prismatron-core {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
}

.monster-prismatron .eyes {
  top: 22px;
  left: 22px;
  gap: 16px;
  z-index: 2;
}

.monster-prismatron .eye {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle at 40% 40%, #fff, #fff);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

.monster-prismatron .eye::after {
  width: 6px;
  height: 6px;
  background: #1a1a3a;
  top: 4px;
  left: 5px;
}

.monster-prismatron .mouth {
  width: 20px;
  height: 6px;
  background: #1a1a3a;
  border-radius: 0 0 9px 9px;
  top: 44px;
  left: 35px;
  z-index: 2;
}

.monster-prismatron .tail {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 18px;
  height: 14px;
  background: linear-gradient(90deg, #b04aff, #4ad2ff);
  clip-path: polygon(0 50%, 100% 0, 80% 50%, 100% 100%);
  transform: rotate(-8deg);
}

/* === Boss: Diamondra (Crystal Heart) === */
.monster-boss-crystal .body {
  width: 74px;
  height: 66px;
  background: linear-gradient(135deg, #ffffff, #bfeaff, #7fc8e8, #4a9ec4);
  clip-path: polygon(50% 0%, 86% 16%, 100% 54%, 80% 100%, 20% 100%, 0% 54%, 14% 16%);
  left: 3px;
  box-shadow:
    inset 0 -12px 22px rgba(40, 110, 150, 0.3),
    0 0 26px rgba(150, 225, 255, 0.7),
    0 4px 14px rgba(0, 0, 0, 0.4);
  border: 2px solid #d8f4ff;
  animation: boss-crystal-pulse 2s ease-in-out infinite;
}

@keyframes boss-crystal-pulse {
  0%, 100% { box-shadow: inset 0 -12px 22px rgba(40, 110, 150, 0.3), 0 0 22px rgba(150, 225, 255, 0.6), 0 4px 14px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: inset 0 -12px 22px rgba(40, 110, 150, 0.3), 0 0 38px rgba(210, 250, 255, 0.95), 0 4px 18px rgba(0, 0, 0, 0.5); }
}

/* grand diamond crown with jewels */
.monster-boss-crystal .body::before {
  content: '';
  position: absolute;
  width: 66px;
  height: 28px;
  background: linear-gradient(to top, #4a9ec4, #e8f8ff, #ffffff);
  clip-path: polygon(0 100%, 10% 30%, 20% 100%, 34% 0, 44% 60%, 50% 10%, 56% 60%, 66% 0, 80% 100%, 90% 30%, 100% 100%);
  top: -24px;
  left: 4px;
  filter: drop-shadow(0 -3px 7px rgba(210, 245, 255, 0.8));
}

/* pulsing heart jewel */
.monster-boss-crystal .body::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #ffffff, #88e0ff, #2a9ec4);
  clip-path: polygon(50% 0%, 90% 35%, 75% 100%, 25% 100%, 10% 35%);
  top: 24px;
  left: 28px;
  filter: drop-shadow(0 0 10px rgba(140, 224, 255, 1));
  animation: boss-crystal-heart 1.5s ease-in-out infinite;
}

@keyframes boss-crystal-heart {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

.monster-boss-crystal .eyes {
  top: 24px;
  left: 18px;
  gap: 18px;
}

.monster-boss-crystal .eye {
  width: 18px;
  height: 14px;
  background: #5ad1e6;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(90, 209, 230, 0.8);
  animation: boss-eye-flicker 1.5s ease-in-out infinite alternate;
}

.monster-boss-crystal .eye::after {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #fff, #d8f4ff);
  top: 3px;
  left: 5px;
  border-radius: 2px;
}

.monster-boss-crystal .mouth {
  width: 30px;
  height: 11px;
  background: #06283a;
  border-radius: 0 0 10px 10px;
  top: 46px;
  left: 22px;
  box-shadow: inset 0 -4px 8px rgba(90, 209, 230, 0.3);
}

.monster-boss-crystal .tail {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 22px;
  height: 16px;
  background: linear-gradient(90deg, #4a9ec4, #ffffff);
  clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%);
  transform: rotate(-8deg);
}

/* ── Cosmic monsters (Season 4: Starfall) ── */

/* === Twinklet (Cosmic, Common) — a giggling fallen star === */
.monster-twinklet .body {
  width: 58px;
  height: 56px;
  background: radial-gradient(circle at 50% 55%, #fffbe0, #ffe66b 45%, #f5b82e);
  clip-path: polygon(50% 0%, 62% 34%, 98% 36%, 69% 58%, 80% 94%, 50% 73%, 20% 94%, 31% 58%, 2% 36%, 38% 34%);
  left: 11px;
  bottom: 2px;
  filter: drop-shadow(0 0 8px rgba(255, 220, 90, 0.8));
  animation: twinklet-bob 1.8s ease-in-out infinite;
}

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

/* rosy cheeks */
.monster-twinklet .body::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 4px;
  border-radius: 50%;
  background: #ff9eb5;
  top: 32px;
  left: 16px;
  box-shadow: 20px 0 0 #ff9eb5;
}

.monster-twinklet .eyes {
  top: 22px;
  left: 29px;
  gap: 8px;
}

.monster-twinklet .eye {
  width: 8px;
  height: 10px;
}

.monster-twinklet .eye::after {
  width: 5px;
  height: 6px;
  background: #3a2600;
  top: 2px;
  left: 1px;
}

.monster-twinklet .mouth {
  width: 8px;
  height: 4px;
  background: #3a2600;
  border-radius: 0 0 5px 5px;
  top: 36px;
  left: 36px;
}

/* sparkle trail */
.monster-twinklet .tail {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff6b0;
  bottom: 6px;
  left: 2px;
  box-shadow: -6px -10px 0 -1px #ffe66b, 4px -20px 0 -2px #fff;
  animation: twinklet-sparkle 1.2s ease-in-out infinite;
}

@keyframes twinklet-sparkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* === Cometpup (Cosmic, Rare) — a space pup with a comet tail === */
.monster-cometpup .body {
  width: 54px;
  height: 46px;
  background: linear-gradient(145deg, #9ad8ff, #4a8ff0 55%, #2a4fb8);
  border-radius: 26px 26px 20px 20px;
  left: 14px;
  bottom: 2px;
  box-shadow: inset 0 -8px 12px rgba(20, 30, 90, 0.35), 0 0 10px rgba(120, 190, 255, 0.5);
  animation: cometpup-bounce 1s ease-in-out infinite;
}

@keyframes cometpup-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* pointy ears */
.monster-cometpup .body::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 14px;
  background: #2a4fb8;
  clip-path: polygon(0 100%, 16% 0, 32% 100%, 68% 100%, 84% 0, 100% 100%);
  top: -10px;
  left: 5px;
}

/* star-shaped spot on the forehead */
.monster-cometpup .body::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff6b0;
  clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0% 38%, 38% 38%);
  top: 4px;
  left: 22px;
}

.monster-cometpup .eyes {
  top: 26px;
  left: 25px;
  gap: 10px;
}

.monster-cometpup .eye {
  width: 11px;
  height: 11px;
}

.monster-cometpup .eye::after {
  width: 6px;
  height: 6px;
  background: #0b1a4a;
  top: 3px;
  left: 3px;
}

.monster-cometpup .mouth {
  width: 10px;
  height: 6px;
  background: #0b1a4a;
  border-radius: 0 0 6px 6px;
  top: 44px;
  left: 36px;
}

/* blazing comet tail streaming behind */
.monster-cometpup .tail {
  position: absolute;
  width: 34px;
  height: 14px;
  background: linear-gradient(90deg, transparent, #ff9d4a 40%, #ffe66b 75%, #fff);
  border-radius: 50% 8px 8px 50%;
  bottom: 14px;
  left: -16px;
  transform: rotate(-14deg);
  filter: drop-shadow(0 0 6px rgba(255, 180, 80, 0.8));
  animation: cometpup-flare 0.6s ease-in-out infinite alternate;
}

@keyframes cometpup-flare {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

/* === Orbitoad (Cosmic, Rare) — a sleepy toad wearing a planet ring === */
.monster-orbitoad .body {
  width: 58px;
  height: 44px;
  background: radial-gradient(circle at 35% 30%, #b8f5d0, #3fbf8a 55%, #1e7a5a);
  border-radius: 50% 50% 42% 42%;
  left: 11px;
  bottom: 2px;
  box-shadow: inset 0 -8px 12px rgba(10, 50, 40, 0.35);
}

/* the planetary ring */
.monster-orbitoad .body::after {
  content: '';
  position: absolute;
  width: 78px;
  height: 18px;
  border: 3px solid #ffd98a;
  border-top-color: transparent;
  border-radius: 50%;
  top: 18px;
  left: -13px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.8));
}

/* little moon circling above */
.monster-orbitoad .body::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #c7c9d9);
  top: -12px;
  left: 24px;
  animation: orbitoad-moon 3.2s ease-in-out infinite;
}

@keyframes orbitoad-moon {
  0%, 100% { transform: translateX(-20px); }
  50% { transform: translateX(22px); }
}

/* big bulging toad eyes on top of the head */
.monster-orbitoad .eyes {
  top: 12px;
  left: 20px;
  gap: 16px;
}

.monster-orbitoad .eye {
  width: 14px;
  height: 12px;
  border: 2px solid #1e7a5a;
}

.monster-orbitoad .eye::after {
  width: 10px;
  height: 4px;
  background: #0d3a2c;
  border-radius: 0 0 5px 5px;
  top: 5px;
  left: 0;
}

.monster-orbitoad .mouth {
  width: 26px;
  height: 5px;
  background: #0d3a2c;
  border-radius: 0 0 14px 14px;
  top: 38px;
  left: 27px;
}

/* === Nebulynx (Cosmic, Epic) — a lynx swirling with nebula clouds === */
.monster-nebulynx .body {
  width: 58px;
  height: 50px;
  background:
    radial-gradient(circle at 25% 70%, rgba(255, 150, 220, 0.8), transparent 40%),
    radial-gradient(circle at 75% 35%, rgba(120, 200, 255, 0.6), transparent 38%),
    linear-gradient(135deg, #8a4fe0, #5a2ab0 60%, #2c1470);
  border-radius: 26px 26px 20px 20px;
  left: 11px;
  bottom: 2px;
  box-shadow: 0 0 16px rgba(190, 120, 255, 0.55);
  animation: nebulynx-glow 3s ease-in-out infinite;
}

@keyframes nebulynx-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(190, 120, 255, 0.45); }
  50% { box-shadow: 0 0 24px rgba(255, 150, 230, 0.75); }
}

/* tufted lynx ears */
.monster-nebulynx .body::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 20px;
  background: linear-gradient(to top, #5a2ab0, #ff9edc);
  clip-path: polygon(0 100%, 14% 0, 28% 100%, 72% 100%, 86% 0, 100% 100%);
  top: -16px;
  left: 4px;
}

/* tiny stars in the fur */
.monster-nebulynx .body::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  top: 34px;
  left: 10px;
  box-shadow: 30px 6px 0 #fff, 40px -18px 0 #ffe8ff, 14px 10px 0 #cfe8ff;
  animation: twinklet-sparkle 1.6s ease-in-out infinite;
}

.monster-nebulynx .eyes {
  top: 20px;
  left: 22px;
  gap: 12px;
}

.monster-nebulynx .eye {
  width: 13px;
  height: 11px;
  background: radial-gradient(circle, #fff, #ffe66b);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.monster-nebulynx .eye::after {
  width: 3px;
  height: 9px;
  background: #1a0a3a;
  top: 1px;
  left: 5px;
}

.monster-nebulynx .mouth {
  width: 8px;
  height: 6px;
  background: #ff9edc;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  top: 36px;
  left: 36px;
}

/* long curling tail */
.monster-nebulynx .tail {
  position: absolute;
  width: 18px;
  height: 26px;
  border: 5px solid #8a4fe0;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  bottom: 10px;
  right: -12px;
  transform: rotate(20deg);
}

/* === Solaroar (Cosmic, Legendary) — a lion with a mane of sunlight === */
.monster-solaroar .body {
  z-index: 1;
  width: 52px;
  height: 48px;
  background: radial-gradient(circle at 45% 40%, #ffe9a8, #ffc24a 55%, #e0861c);
  border-radius: 50% 50% 44% 44%;
  left: 14px;
  bottom: 4px;
  box-shadow: inset 0 -8px 12px rgba(120, 60, 0, 0.3);
}

.monster-solaroar .eyes,
.monster-solaroar .mouth { z-index: 2; }

/* the blazing sun mane behind the head */
.monster-solaroar .tail {
  position: absolute;
  z-index: 0;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ff8a1f 0 44%, transparent 46%),
    repeating-conic-gradient(from 0deg, #ffd23f 0deg 12deg, #ff6a1f 12deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 62%, transparent 70%);
  mask: radial-gradient(circle, #000 0 62%, transparent 70%);
  left: 1px;
  bottom: -9px;
  filter: drop-shadow(0 0 10px rgba(255, 170, 40, 0.8));
  animation: rw-spin 12s linear infinite;
}

.monster-solaroar .eyes {
  top: 24px;
  left: 24px;
  gap: 10px;
}

.monster-solaroar .eye {
  width: 12px;
  height: 10px;
  border-radius: 50% 50% 40% 40%;
}

.monster-solaroar .eye::after {
  width: 6px;
  height: 6px;
  background: #5a2600;
  top: 2px;
  left: 3px;
}

/* nose and grin */
.monster-solaroar .mouth {
  width: 16px;
  height: 7px;
  background: #5a2600;
  border-radius: 0 0 9px 9px;
  top: 44px;
  left: 32px;
}

.monster-solaroar .mouth::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 5px;
  background: #b85a10;
  border-radius: 50% 50% 60% 60%;
  top: -7px;
  left: 4px;
}

/* === Nebulord (Cosmic, Heroic) — the galaxy-sized Star Eater === */
.monster-nebulord .body {
  width: 68px;
  height: 60px;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.5), transparent 18%),
    repeating-conic-gradient(from 20deg at 50% 55%, #3b1780 0deg 30deg, #6a2fd0 30deg 60deg, #c04ad8 60deg 75deg, #3b1780 75deg 90deg),
    #2a0f60;
  border-radius: 30px 30px 24px 24px;
  left: 6px;
  bottom: 2px;
  box-shadow: 0 0 22px rgba(170, 90, 255, 0.7), inset 0 -10px 16px rgba(10, 0, 40, 0.55);
  animation: nebulord-swirl 3s ease-in-out infinite;
}

@keyframes nebulord-swirl {
  0%, 100% { box-shadow: 0 0 18px rgba(170, 90, 255, 0.6), inset 0 -10px 16px rgba(10, 0, 40, 0.55); }
  50% { box-shadow: 0 0 34px rgba(255, 120, 230, 0.9), inset 0 -10px 16px rgba(10, 0, 40, 0.55); }
}

/* crown of stolen stars */
.monster-nebulord .body::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff6b0;
  clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0% 38%, 38% 38%);
  top: -10px;
  left: 28px;
  filter: drop-shadow(0 0 5px #ffe66b);
  box-shadow: none;
}

.monster-nebulord .body::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  top: 8px;
  left: 8px;
  box-shadow: 48px 2px 0 #fff, 6px 38px 0 #ffe8ff, 52px 34px 0 #cfe8ff, 26px 48px 0 -1px #fff;
  animation: twinklet-sparkle 1.4s ease-in-out infinite;
}

.monster-nebulord .eyes {
  top: 16px;
  left: 18px;
  gap: 14px;
}

.monster-nebulord .eye {
  width: 15px;
  height: 11px;
  background: radial-gradient(circle, #ffffff, #7fe0ff 60%, #3a8cff);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 10px rgba(130, 220, 255, 0.9);
}

.monster-nebulord .eye::after {
  width: 5px;
  height: 7px;
  background: #0a0030;
  top: 2px;
  left: 5px;
}

/* a mouth like a black hole, ringed with little fangs */
.monster-nebulord .mouth {
  width: 28px;
  height: 14px;
  background: radial-gradient(circle at 50% 30%, #000, #1a0040);
  border-radius: 4px 4px 16px 16px;
  top: 40px;
  left: 26px;
  box-shadow: 0 0 8px rgba(200, 120, 255, 0.8);
}

.monster-nebulord .mouth::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  top: 0;
  left: 2px;
}

/* swirling galaxy arm */
.monster-nebulord .tail {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 4px solid #c04ad8;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  bottom: 4px;
  right: -24px;
  animation: rw-spin 4s linear infinite;
}

/* === Astralyx (Cosmic, Code-exclusive) — a star-whale carrying a constellation === */
.monster-astralyx .body {
  width: 74px;
  height: 46px;
  background:
    linear-gradient(to bottom, transparent 62%, #b9d8ff 62%),
    linear-gradient(160deg, #3a6cf0, #1c2f8e 60%, #0c1450);
  border-radius: 40px 30px 26px 34px;
  left: 2px;
  bottom: 4px;
  box-shadow: 0 0 20px rgba(110, 160, 255, 0.65), inset 0 -4px 10px rgba(0, 10, 50, 0.4);
  animation: astralyx-swim 3.2s ease-in-out infinite;
}

@keyframes astralyx-swim {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

/* the constellation on its back */
.monster-astralyx .body::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff6b0;
  top: 6px;
  left: 18px;
  box-shadow: 12px -2px 0 #fff, 24px 4px 0 #fff6b0, 36px 0 0 #fff, 46px 8px 0 #fff6b0;
  filter: drop-shadow(0 0 3px #fff);
}

.monster-astralyx .body::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 246, 176, 0.7), rgba(255, 255, 255, 0.4));
  top: 8px;
  left: 20px;
  transform: rotate(4deg);
}

.monster-astralyx .eyes {
  top: 24px;
  left: 14px;
  gap: 18px;
}

.monster-astralyx .eye {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #fff, #cfe8ff);
}

.monster-astralyx .eye::after {
  width: 6px;
  height: 6px;
  background: #06103a;
  top: 3px;
  left: 2px;
}

.monster-astralyx .mouth {
  width: 30px;
  height: 4px;
  background: #06103a;
  border-radius: 0 0 16px 16px;
  top: 42px;
  left: 10px;
}

/* sparkling tail fluke */
.monster-astralyx .tail {
  position: absolute;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #7fb0ff, #3a6cf0);
  clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%);
  bottom: 16px;
  right: -16px;
  filter: drop-shadow(0 0 5px rgba(160, 200, 255, 0.9));
  animation: astralyx-flick 1.6s ease-in-out infinite;
}

@keyframes astralyx-flick {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

/* === Boss: Nebulord, the Star Eater (Starfall) === */
.monster-boss-starfall .body {
  width: 76px;
  height: 68px;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.55), transparent 16%),
    repeating-conic-gradient(from 20deg at 50% 55%, #3b1780 0deg 30deg, #6a2fd0 30deg 60deg, #e05ad8 60deg 75deg, #3b1780 75deg 90deg),
    #2a0f60;
  border-radius: 34px 34px 26px 26px;
  left: 2px;
  border: 2px solid #d7a8ff;
  box-shadow: 0 0 28px rgba(190, 100, 255, 0.8), inset 0 -12px 18px rgba(10, 0, 40, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
  animation: nebulord-swirl 2s ease-in-out infinite;
}

/* grand crown of three stolen stars */
.monster-boss-starfall .body::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 22px;
  background: linear-gradient(to top, #ffb84a, #fff6b0);
  clip-path: polygon(0 100%, 8% 40%, 18% 100%, 30% 30%, 50% 0, 70% 30%, 82% 100%, 92% 40%, 100% 100%);
  top: -20px;
  left: 8px;
  filter: drop-shadow(0 -2px 8px rgba(255, 230, 120, 0.9));
}

.monster-boss-starfall .body::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  top: 10px;
  left: 8px;
  box-shadow: 54px 4px 0 #fff, 6px 44px 0 #ffe8ff, 58px 40px 0 #cfe8ff, 30px 54px 0 -1px #fff;
  animation: twinklet-sparkle 1.1s ease-in-out infinite;
}

.monster-boss-starfall .eyes {
  top: 20px;
  left: 16px;
  gap: 16px;
}

.monster-boss-starfall .eye {
  width: 17px;
  height: 12px;
  background: radial-gradient(circle, #ffffff, #ff9ef0 55%, #d02ab0);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 12px rgba(255, 130, 240, 1);
}

.monster-boss-starfall .eye::after {
  width: 5px;
  height: 8px;
  background: #0a0030;
  top: 2px;
  left: 6px;
}

.monster-boss-starfall .mouth {
  width: 34px;
  height: 16px;
  background: radial-gradient(circle at 50% 30%, #000, #1a0040);
  border-radius: 4px 4px 18px 18px;
  top: 44px;
  left: 23px;
  box-shadow: 0 0 12px rgba(220, 120, 255, 0.9);
}

.monster-boss-starfall .mouth::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #fff 0 5px, transparent 5px 10px);
  top: 0;
  left: 2px;
}

.monster-boss-starfall .tail {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 5px solid #e05ad8;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  bottom: 4px;
  right: -34px;
  animation: rw-spin 3s linear infinite;
}

/* Shared finishing details preserve each monster's silhouette and skin colors. */
.monster .body > .monster-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 28% 17%, #ffffff68 0%, #ffffff18 22%, transparent 46%), linear-gradient(135deg, transparent 48%, #08162730 100%);
  box-shadow: inset 1px 2px 1px #ffffff35, inset -3px -4px 3px #14233325;
}
.monster .eye::before {
  content: '';
  position: absolute;
  width: 24%;
  height: 24%;
  min-width: 2px;
  min-height: 2px;
  left: 36%;
  top: 22%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 1px 1px 2px #ffffff50;
  z-index: 2;
  pointer-events: none;
}
.monster .eye { box-shadow: inset 0 -1px 2px #35496a35, 0 1px 1px #11243a30; }
.monster .eyes { filter: drop-shadow(0 1px 1px #15263825); }
.monster .mouth { filter: drop-shadow(0 1px 0 #ffffff25); }
.monster.skin-gold .monster-sheen { background: radial-gradient(ellipse at 25% 15%, #fff9d6aa, transparent 44%), linear-gradient(120deg, transparent 30%, #fff8cb40 45%, transparent 62%); }
.monster.skin-silver .monster-sheen { background: radial-gradient(ellipse at 25% 15%, #f1fcffaa, transparent 44%), linear-gradient(120deg, transparent 30%, #e5f5ff40 45%, transparent 62%); }

/* Evolution grows the complete sprite, preserving its skin and animation. */
.monster.evolution-1 { scale: 1.15; }
.monster.evolution-2 { scale: 1.32; }
.monster.evolution-3 { scale: 1.5; }
.monster.evolution-4 { scale: 1.7; }
.monster.evolution-2 .monster-sheen { box-shadow: inset 1px 2px 1px #ffffff55, inset -3px -4px 3px #14233335; }
.monster.evolution-3 .body, .monster.evolution-4 .body { outline: 1px solid #fff5; outline-offset: 1px; }
.monster.evolution-4 .body > .monster-sheen { filter: drop-shadow(0 0 4px #deeeff88); }
.monster-card:has(.monster[class*="evolution-"]) { padding-top: 26px; }
.evolution-info { flex-basis: 100%; margin: 12px 0; font: .85rem/1.6 var(--font-body); color: #c6e9a8; }

/* Rexstorm: a crowned, armored dragon with luminous wing membranes. */
.monster-rexstorm { isolation: isolate; }
.monster-rexstorm .body { z-index: 2; left: 14px; bottom: 0; width: 40px; height: 52px; border-radius: 45% 45% 30% 30%; background: linear-gradient(110deg,#081221 12%,#344968 45%,#0d142c 70%); border: 2px solid #79e8ff; box-shadow: inset -6px -4px 0 #070b1e, 0 0 12px #2edfff88; }
.monster-rexstorm .body::before { content:''; position:absolute; left:11px; top:22px; width:16px; height:26px; background:repeating-linear-gradient(0deg,#f4bf56 0 3px,#6c492f 4px 6px); clip-path:polygon(50% 0,100% 20%,80% 90%,50% 100%,20% 90%,0 20%); }
.monster-rexstorm .body::after { content:''; position:absolute; top:-10px; left:0; width:36px; height:20px; background:linear-gradient(#ffed9e,#ab6827); clip-path:polygon(0 0,30% 80%,70% 80%,100% 0,95% 100%,5% 100%); }
.monster-rexstorm .eyes { z-index:4; top:14px; left:22px; gap:7px; }
.monster-rexstorm .eye { width:9px; height:7px; background:#a5ffff; border-radius:20% 70%; box-shadow:0 0 9px #27eeff; }
.monster-rexstorm .eye::after { width:2px; height:7px; top:0; left:4px; background:#071226; }
.monster-rexstorm .mouth { z-index:4; left:30px; top:29px; width:12px; height:5px; border-bottom:2px solid #f6d47a; border-radius:50%; }
.monster-rexstorm .tail { z-index:0; left:40px; bottom:-3px; width:29px; height:27px; border:7px solid #36c7e1; border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(-25deg); }
.rex-wing { position:absolute; z-index:1; top:5px; width:36px; height:48px; background:linear-gradient(135deg,#ad76ff,#087cbb 50%,#71faff); filter:drop-shadow(0 0 4px #27d9ff); clip-path:polygon(100% 100%,0 0,9% 57%,30% 48%,36% 79%,57% 67%,64% 95%); animation:rex-wingbeat 2.8s ease-in-out infinite alternate; }
.rex-wing-left { left:-14px; transform-origin:right bottom; }
.rex-wing-right { right:-22px; scale:-1 1; transform-origin:center bottom; }
.rex-crown { position:absolute; z-index:5; top:-13px; left:23px; width:26px; height:18px; background:linear-gradient(#fff0b0,#e1a32a); clip-path:polygon(0 0,27% 50%,50% 0,73% 50%,100% 0,87% 100%,13% 100%); filter:drop-shadow(0 0 5px gold); }
.rex-gem { position:absolute; z-index:5; top:34px; left:31px; width:9px; height:12px; background:#e1ffff; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:0 0 8px cyan; }
.rex-halo { position:absolute; z-index:-1; inset:-12px; border:1px solid #8d76ff66; border-radius:50%; background:radial-gradient(ellipse,#6651df44,transparent 70%); }
@keyframes rex-wingbeat { from { transform:rotate(-5deg); } to { transform:rotate(9deg); } }
.dragon-skills { padding:12px; border:1px solid #72dfff; border-radius:12px; background:#111d34; margin-bottom:14px; }
.dragon-skills p { margin:0 0 8px; }
.dragon-skills button { margin:4px; white-space:normal; }
.dragon-skills button[aria-pressed="true"] { outline:2px solid #72eaff; box-shadow:0 0 12px #50e6ff66; }
.dragon-power { position:absolute; inset:-35px; z-index:20; display:grid; place-items:center; border-radius:50%; color:white; font-weight:bold; text-align:center; text-shadow:0 2px 4px #000; background:radial-gradient(ellipse,#95ffffdd,#039acbbb,transparent 72%); animation:rex-power 1.2s ease-out both; pointer-events:none; }
.dragon-power-eclipse { background:radial-gradient(ellipse,#0d0328 20%,#b570ffcc 55%,transparent 72%); }
.dragon-power-thunder { background:repeating-conic-gradient(#ffe76bbb 0deg 12deg,transparent 12deg 35deg); }
@keyframes rex-power { from { opacity:0; transform:scale(.4) rotate(-10deg); } 30% { opacity:1; } to { opacity:0; transform:scale(1.6) rotate(8deg); } }
@media (prefers-reduced-motion:reduce) { .rex-wing,.dragon-power { animation:none; } }

/* BigOllie exclusive: volcanic armor, infernal horns and ember wings. */
.monster-demon-dragon { isolation: isolate; }
.monster-demon-dragon .body { z-index: 2; left: 14px; bottom: 0; width: 40px; height: 52px; border-radius: 45% 45% 30% 30%; background: linear-gradient(110deg,#081221 12%,#344968 45%,#0d142c 70%); border: 2px solid #ff784a; box-shadow: inset -6px -4px 0 #070b1e, 0 0 12px #ff3c1488; }
.monster-demon-dragon .body::before { content:''; position:absolute; left:11px; top:22px; width:16px; height:26px; background:repeating-linear-gradient(0deg,#e95632 0 3px,#542232 4px 6px); clip-path:polygon(50% 0,100% 20%,80% 90%,50% 100%,20% 90%,0 20%); }
.monster-demon-dragon .body::after { content:''; position:absolute; top:-10px; left:0; width:36px; height:20px; background:linear-gradient(#ffed9e,#ab6827); clip-path:polygon(0 0,30% 80%,70% 80%,100% 0,95% 100%,5% 100%); }
.monster-demon-dragon .eyes { z-index:4; top:14px; left:22px; gap:7px; }
.monster-demon-dragon .eye { width:9px; height:7px; background:#ffe4a5; border-radius:20% 70%; box-shadow:0 0 9px #ff3d00; }
.monster-demon-dragon .eye::after { width:2px; height:7px; top:0; left:4px; background:#071226; }
.monster-demon-dragon .mouth { z-index:4; left:30px; top:29px; width:12px; height:5px; border-bottom:2px solid #f6d47a; border-radius:50%; }
.monster-demon-dragon .tail { z-index:0; left:40px; bottom:-3px; width:29px; height:27px; border:7px solid #b82d31; border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(-25deg); }

.monster-demon-dragon .rex-wing { background:linear-gradient(135deg,#ffcd70,#b61932 50%,#ff5e1c); filter:drop-shadow(0 0 5px #ff4818); }
.monster-demon-dragon .rex-crown { top:-20px; left:17px; width:38px; height:27px; background:linear-gradient(#fff2b9,#e95225 55%,#4c1129); clip-path:polygon(0 0,20% 20%,24% 65%,42% 85%,50% 30%,58% 85%,76% 65%,80% 20%,100% 0,94% 78%,75% 100%,25% 100%,6% 78%); }
.monster-demon-dragon .rex-halo { border-color:#ff602d88; background:radial-gradient(ellipse,#c62f3344,transparent 70%); }
.monster-demon-dragon .rex-gem { background:#ffb049; }
.monster-demon-dragon .eye { border-radius:80% 10%; }
.dragon-power-hellfire { background:radial-gradient(ellipse,#ffeb91,#ff4118bb,transparent 72%); }
.dragon-power-abyss { background:radial-gradient(ellipse,#050008 25%,#d33165cc 55%,transparent 72%); }
.dragon-power-soul { background:repeating-conic-gradient(#ff7e36cc 0deg 14deg,transparent 14deg 30deg); }

/* Dilzilla exclusive: Viridrax, the Jade Tempest. Hovers inside a spinning emerald vortex while leaves swirl around it. */
.monster.monster-viridrax { isolation: isolate; animation: jade-hover 3.2s ease-in-out infinite; }
.monster-viridrax .body { z-index: 2; left: 14px; bottom: 0; width: 40px; height: 52px; border-radius: 45% 45% 30% 30%; background: linear-gradient(110deg,#06301f 12%,#1f9a5c 45%,#0a3d27 70%); border: 2px solid #7dffb0; box-shadow: inset -6px -4px 0 #04200f, 0 0 12px #2eff8a88; animation: jade-glow 2.4s ease-in-out infinite; }
.monster-viridrax .body::before { content:''; position:absolute; left:11px; top:22px; width:16px; height:26px; background:repeating-linear-gradient(0deg,#d8ff7a 0 3px,#2d6b33 4px 6px); clip-path:polygon(50% 0,100% 20%,80% 90%,50% 100%,20% 90%,0 20%); }
.monster-viridrax .body::after { content:''; position:absolute; top:-10px; left:0; width:36px; height:20px; background:linear-gradient(#eaffc2,#3fae55); clip-path:polygon(0 0,30% 80%,70% 80%,100% 0,95% 100%,5% 100%); }
.monster-viridrax .eyes { z-index:4; top:14px; left:22px; gap:7px; }
.monster-viridrax .eye { width:9px; height:7px; background:#eaff8f; border-radius:80% 10%; box-shadow:0 0 9px #b6ff3a; animation: jade-eyes 2.4s ease-in-out infinite; }
.monster-viridrax .eye::after { width:2px; height:7px; top:0; left:4px; background:#04200f; }
.monster-viridrax .mouth { z-index:4; left:30px; top:29px; width:12px; height:5px; border-bottom:2px solid #d8ff7a; border-radius:50%; }
.monster-viridrax .tail { z-index:0; left:40px; bottom:-3px; width:29px; height:27px; border:7px solid #20b86a; border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(-25deg); animation: jade-tail 1.8s ease-in-out infinite alternate; }

.monster-viridrax .rex-wing { background:linear-gradient(135deg,#e4ff8a,#0f8a4c 50%,#6dffc0); filter:drop-shadow(0 0 5px #35ff8f); animation-duration: 1.4s; }
.monster-viridrax .rex-crown { top:-20px; left:19px; width:34px; height:24px; background:linear-gradient(#f4ffd0,#5fdc6e 55%,#0b4a2a); clip-path:polygon(0 100%,8% 0,26% 70%,50% 10%,74% 70%,92% 0,100% 100%); filter:drop-shadow(0 0 5px #5dff8d); }
.monster-viridrax .rex-halo { border-color:#5dff9a88; background:radial-gradient(ellipse,#1fd97444,transparent 70%); }
.monster-viridrax .rex-gem { background:#b8ffcf; box-shadow:0 0 8px #2bff84; animation: jade-eyes 2.4s ease-in-out infinite; }

.jade-vortex { position:absolute; z-index:-2; inset:-20px; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 12%,#2eff8a55 18%,transparent 30% 45%,#b6ff3a44 52%,transparent 64% 78%,#2eff8a55 86%,transparent 95%); -webkit-mask:radial-gradient(circle,transparent 48%,#000 50%,#000 68%,transparent 70%); mask:radial-gradient(circle,transparent 48%,#000 50%,#000 68%,transparent 70%); animation: jade-spin 5s linear infinite; }
.jade-leaf { position:absolute; z-index:6; left:50%; top:50%; width:8px; height:5px; margin:-3px 0 0 -4px; border-radius:0 100%; background:linear-gradient(135deg,#d8ff7a,#1f9a5c); box-shadow:0 0 5px #5dff8d; opacity:0; animation: jade-orbit 3.6s linear infinite; }
.jade-leaf:nth-of-type(2) { animation-delay: -.9s; }
.jade-leaf:nth-of-type(3) { animation-delay: -1.8s; width:6px; height:4px; }
.jade-leaf:nth-of-type(4) { animation-delay: -2.7s; }

@keyframes jade-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes jade-glow { 0%, 100% { box-shadow: inset -6px -4px 0 #04200f, 0 0 10px #2eff8a66; } 50% { box-shadow: inset -6px -4px 0 #04200f, 0 0 22px #2eff8acc; } }
@keyframes jade-eyes { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
@keyframes jade-tail { from { transform: rotate(-32deg); } to { transform: rotate(-16deg); } }
@keyframes jade-spin { to { transform: rotate(360deg); } }
@keyframes jade-orbit {
  0% { opacity:0; transform: rotate(0deg) translateX(38px) rotate(0deg) scale(.6); }
  15% { opacity:1; }
  85% { opacity:1; }
  100% { opacity:0; transform: rotate(360deg) translateX(30px) translateY(-18px) rotate(540deg) scale(1); }
}
.dragon-power-cyclone { background:repeating-conic-gradient(#7dffb0cc 0deg 10deg,transparent 10deg 24deg); }
.dragon-power-venom { background:radial-gradient(ellipse,#e8ff4a 15%,#7a2bd6cc 50%,transparent 72%); }
.dragon-power-verdant { background:radial-gradient(ellipse,#f4ffd0,#1fd974bb,transparent 72%); }
@media (prefers-reduced-motion:reduce) { .monster-viridrax, .monster-viridrax *, .jade-vortex, .jade-leaf { animation:none; } }

/* ======================================================================
   Shared polish: every monster gets an outline, a ground shadow, a
   gentle idle bob and blinking eyes. Tails sit behind the body.
   ====================================================================== */
.monster {
  isolation: isolate;
  animation: monster-idle 3s ease-in-out var(--idle-delay, 0s) infinite;
}
/* Ground shadow: stays on the floor and shrinks as the monster bobs up */
.monster::after {
  content: '';
  position: absolute;
  z-index: -3;
  left: 15%;
  bottom: -6px;
  width: 70%;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(4, 8, 18, .45), transparent 70%);
  pointer-events: none;
  animation: monster-idle-shadow 3s ease-in-out var(--idle-delay, 0s) infinite;
}
/* Cartoon outline around the body shape */
.monster .body > .monster-sheen {
  box-shadow: inset 1px 2px 1px #ffffff35, inset -3px -4px 3px #14233325, 0 0 0 1.5px rgba(8, 14, 28, .5);
}
.monster.evolution-2 .monster-sheen { box-shadow: inset 1px 2px 1px #ffffff55, inset -3px -4px 3px #14233335, 0 0 0 1.5px rgba(8, 14, 28, .5); }
.monster .tail { z-index: -1; }
.monster .eye { animation: monster-blink 5s linear var(--blink-delay, 0s) infinite; }

@keyframes monster-idle { 50% { translate: 0 -3px; } }
@keyframes monster-idle-shadow { 50% { translate: 0 3px; scale: .82 1; opacity: .75; } }
@keyframes monster-blink { 0%, 95%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }

/* Dragons: a real mirrored right wing instead of a box-shadow copy */
.wing-mirror { position: absolute; scale: -1 1; pointer-events: none; }
.monster-frostwyrm .body::after { box-shadow: none; }
.monster-frostwyrm .wing-mirror {
  width: 22px; height: 30px; top: 2px; right: -18px;
  background: linear-gradient(135deg, rgba(200, 230, 255, 0.7), rgba(100, 160, 210, 0.4));
  border-radius: 50% 0 50% 50%;
  border: 1px solid rgba(220, 240, 255, 0.8);
  animation: frostwyrm-wing 2s ease-in-out infinite alternate;
}
.monster-venomscale .body::after { box-shadow: none; }
.monster-venomscale .wing-mirror {
  width: 24px; height: 36px; top: 2px; right: -20px;
  background: linear-gradient(135deg, #1a8c52, #0a5a32);
  border-radius: 60% 0 50% 60%;
  border: 1px solid #062a18;
  animation: venomscale-wing 2s ease-in-out infinite alternate;
}
.monster-stormwing .body::after { box-shadow: 0 0 8px rgba(200, 160, 255, 0.4); }
.monster-stormwing .wing-mirror {
  width: 28px; height: 42px; top: 0; right: -24px;
  background: linear-gradient(135deg, #6a4ea8, #2a1e4e);
  border-radius: 60% 0 50% 60%;
  border: 1px solid #c8b0ff;
  box-shadow: 0 0 8px rgba(200, 160, 255, 0.4);
  animation: stormwing-flap 1.5s ease-in-out infinite alternate;
}
.monster-apexdracos .body::after { box-shadow: 0 0 12px rgba(255, 210, 80, 0.5); }
.monster-apexdracos .wing-mirror {
  width: 36px; height: 52px; top: -4px; right: -30px;
  background: linear-gradient(135deg, #e6a830, #8a5a12, #4a2a08);
  border-radius: 70% 0 50% 60%;
  border: 2px solid #6a3a0a;
  box-shadow: 0 0 12px rgba(255, 210, 80, 0.5);
  animation: apex-wing 2.2s ease-in-out infinite alternate;
}
.monster-voidwyrm .body::after { box-shadow: 0 0 16px rgba(180, 80, 255, 0.7); }
.monster-voidwyrm .wing-mirror {
  width: 40px; height: 58px; top: -6px; right: -32px;
  background: linear-gradient(135deg, #2a0044, #05000f);
  border-radius: 70% 0 50% 60%;
  border: 2px solid #b050ff;
  box-shadow: 0 0 16px rgba(180, 80, 255, 0.7);
  animation: voidwyrm-wing 2.4s ease-in-out infinite alternate;
}
.monster-prismaw .body::after { box-shadow: none; }
.monster-prismaw .wing-mirror {
  width: 24px; height: 32px; top: 4px; right: -20px;
  background: linear-gradient(135deg, rgba(255, 200, 230, 0.8), rgba(200, 230, 255, 0.5));
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  animation: prismaw-wing 2s ease-in-out infinite alternate;
}

/* Tails now sit behind the body, so these poke out the back instead of crossing the face */
.monster-emberpup .tail { right: -3px; bottom: 7px; width: 10px; height: 26px; transform: none; rotate: 50deg; transform-origin: 50% 100%; border-radius: 50% 50% 3px 3px; animation: ember-flicker .5s ease-in-out infinite alternate; }
@keyframes ember-flicker { to { scale: .85 1.15; } }
.monster-dustling .tail { right: -3px; bottom: 5px; transform: none; rotate: 55deg; transform-origin: 50% 100%; }
.monster-skywhale .tail { right: -22px; }
.monster-coralwyrm .tail { right: -20px; }
.monster-stegowl .tail { right: -14px; }

/* Skywhale rides a fluffy cloud instead of a grey slab */
.monster-skywhale .body::after {
  width: 18px; height: 10px; bottom: -6px; left: 6px;
  border-radius: 50%;
  background: #eef1ff;
  box-shadow: 14px 2px 0 1px #e2e7ff, 30px -1px 0 0 #eef1ff, 44px 2px 0 1px #dfe4fb;
}

/* Bright, glowing wings instead of muddy see-through ones */
.monster-pyrdrake .tail::before,
.monster-pyrdrake .tail::after {
  background: linear-gradient(135deg, #ffb347, #ff5a1f 55%, #b3200a);
  border: 1px solid #ffcf8a;
  box-shadow: 0 0 8px rgba(255, 110, 40, .55);
}
.monster-pyrdrake .tail::after { background: linear-gradient(225deg, #ffb347, #ff5a1f 55%, #b3200a); }
.monster-celestrix .tail::before,
.monster-celestrix .tail::after {
  background: linear-gradient(135deg, rgba(255, 246, 210, .95), rgba(255, 190, 110, .75) 50%, rgba(255, 120, 170, .35));
  box-shadow: 0 0 12px rgba(255, 220, 150, .7);
}
.monster-celestrix .tail::after { background: linear-gradient(225deg, rgba(255, 246, 210, .95), rgba(255, 190, 110, .75) 50%, rgba(255, 120, 170, .35)); }

/* Cute monsters get rosy cheeks under their eyes */
:is(.monster-emberpup, .monster-pondling, .monster-pebblit, .monster-puffwisp, .monster-dustling,
    .monster-hatchling, .monster-drakelet, .monster-zephyrkit, .monster-coralwyrm, .monster-cometpup,
    .monster-glintling) .eyes::before,
:is(.monster-emberpup, .monster-pondling, .monster-pebblit, .monster-puffwisp, .monster-dustling,
    .monster-hatchling, .monster-drakelet, .monster-zephyrkit, .monster-coralwyrm, .monster-cometpup,
    .monster-glintling) .eyes::after {
  content: '';
  position: absolute;
  top: calc(100% + 1px);
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 110, 140, .7), transparent 70%);
  pointer-events: none;
}
.monster .eyes::before { left: -5px; }
.monster .eyes::after { right: -5px; }

/* Puffwisp's cloud puffs are fluffy white, not grey */
.monster-puffwisp .body::before { background: radial-gradient(circle at 40% 35%, #fff, #e4e6ff); }
.monster-puffwisp .body::after { background: radial-gradient(circle at 40% 35%, #fff, #dcdffb); }

/* Pebblit sprouts a little leaf */
.monster-pebblit .tail {
  position: absolute;
  left: 37px; top: 2px;
  width: 3px; height: 12px;
  border-radius: 2px;
  background: #4f8a34;
}
.monster-pebblit .tail::before,
.monster-pebblit .tail::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 10px; height: 6px;
  background: linear-gradient(135deg, #a4e07a, #5aa33c);
  border-radius: 0 100%;
}
.monster-pebblit .tail::before { left: 2px; rotate: -25deg; }
.monster-pebblit .tail::after { right: 2px; rotate: 25deg; scale: -1 1; }

/* Pondling has a water-drop curl on top of its head */
.monster-pondling .body::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  top: -7px; left: 24px;
  background: linear-gradient(135deg, #48cae4, #00b4d8);
  border-radius: 0 50% 50% 50%;
  rotate: 45deg;
}

@media (prefers-reduced-motion: reduce) {
  .monster, .monster::after, .monster .eye, .wing-mirror { animation: none; }
}

/* ============================================================
   Uncommon monsters (one per egg)
   ============================================================ */

/* === Flickit (Fire, Uncommon) — fox kit with a candle-flame tail === */
.monster-flickit .body {
  width: 46px; height: 40px; left: 12px;
  background: linear-gradient(135deg, #ff8a3d, #e8591a);
  border-radius: 22px 22px 18px 18px;
}
.monster-flickit .body::before,
.monster-flickit .body::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px; top: -5px;
  background: linear-gradient(135deg, #ff8a3d, #e8591a);
  border-radius: 3px 0 0 0;
  rotate: 45deg;
}
.monster-flickit .body::before { left: 5px; }
.monster-flickit .body::after { right: 5px; }
.monster-flickit .eyes { top: 28px; left: 20px; gap: 9px; }
.monster-flickit .eye { width: 10px; height: 10px; }
.monster-flickit .eye::after { width: 5px; height: 5px; top: 3px; left: 3px; }
.monster-flickit .mouth {
  width: 16px; height: 9px; top: 40px; left: 27px;
  background: #fff1dc;
  border-radius: 50%;
}
.monster-flickit .mouth::before {
  content: '';
  position: absolute;
  width: 5px; height: 4px; top: 0; left: 5.5px;
  background: #3a1a0a;
  border-radius: 50%;
}
.monster-flickit .tail {
  position: absolute;
  width: 16px; height: 16px; right: -9px; bottom: 18px;
  background: linear-gradient(225deg, #ffd60a, #ff6b35);
  border-radius: 50% 0 50% 50%;
  rotate: -45deg;
}
.monster-flickit .tail::after {
  content: '';
  position: absolute;
  width: 7px; height: 7px; top: 3px; right: 3px;
  background: #fff3b0;
  border-radius: 50% 0 50% 50%;
}

/* === Splashfin (Water, Uncommon) — a leaping little fish === */
.monster-splashfin .body {
  width: 50px; height: 36px; left: 10px; bottom: 4px;
  background: linear-gradient(135deg, #3ec1d3, #1a7fb5);
  border-radius: 50% / 55%;
}
.monster-splashfin .body::before {
  content: '';
  position: absolute;
  width: 16px; height: 12px; top: -8px; left: 18px;
  background: #5ad6e6;
  border-radius: 100% 0 0 0;
  z-index: -1;
}
.monster-splashfin .body::after {
  content: '';
  position: absolute;
  width: 30px; height: 10px; bottom: 4px; left: 12px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
.monster-splashfin .tail {
  position: absolute;
  width: 0; height: 0; left: 0; bottom: 12px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 16px solid #1a7fb5;
}
.monster-splashfin .eyes { top: 26px; left: 28px; gap: 6px; }
.monster-splashfin .eye { width: 9px; height: 9px; }
.monster-splashfin .eye::after { width: 5px; height: 5px; top: 2px; left: 2px; }
.monster-splashfin .mouth {
  width: 6px; height: 6px; top: 40px; left: 36px;
  border: 2px solid #0d4f73;
  border-radius: 50%;
}

/* === Mossbun (Earth, Uncommon) — mossy bunny with a flower === */
.monster-mossbun .body {
  width: 44px; height: 40px; left: 14px;
  background: linear-gradient(135deg, #8fcf5a, #4f8f3a);
  border-radius: 50% 50% 45% 45%;
}
.monster-mossbun .body::before,
.monster-mossbun .body::after {
  content: '';
  position: absolute;
  width: 10px; height: 22px; top: -18px;
  background: linear-gradient(to top, #4f8f3a, #8fcf5a);
  border-radius: 50% 50% 40% 40%;
}
.monster-mossbun .body::before { left: 8px; rotate: -8deg; }
.monster-mossbun .body::after { right: 8px; rotate: 8deg; }
.monster-mossbun .eyes { top: 32px; left: 23px; gap: 8px; }
.monster-mossbun .eyes::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px; top: -10px; left: 11px;
  background: #ffd60a;
  border-radius: 50%;
  box-shadow: 0 -4px 0 #ff8fc8, 4px 0 0 #ff8fc8, 0 4px 0 #ff8fc8, -4px 0 0 #ff8fc8;
}
.monster-mossbun .eye { width: 9px; height: 9px; }
.monster-mossbun .eye::after { width: 5px; height: 5px; top: 2px; left: 2px; }
.monster-mossbun .mouth {
  width: 8px; height: 4px; top: 45px; left: 32px;
  border-bottom: 2px solid #2f5a22;
  border-radius: 0 0 4px 4px;
}
.monster-mossbun .tail {
  position: absolute;
  width: 14px; height: 14px; right: -4px; bottom: 4px;
  background: #f4f9ec;
  border-radius: 50%;
}

/* === Drizzlet (Cloud, Uncommon) — a grumpy little rain cloud === */
.monster-drizzlet .body {
  width: 50px; height: 28px; left: 5px; bottom: 14px;
  background: linear-gradient(135deg, #c3cde0, #8190aa);
  border-radius: 14px;
}
.monster-drizzlet .body::before,
.monster-drizzlet .body::after {
  content: '';
  position: absolute;
  background: #b0bbd0;
  border-radius: 50%;
}
.monster-drizzlet .body::before { width: 24px; height: 24px; top: -12px; left: 5px; }
.monster-drizzlet .body::after { width: 30px; height: 30px; top: -17px; right: 5px; background: #a9b5cb; }
.monster-drizzlet .eyes { top: 26px; left: 18px; gap: 10px; }
.monster-drizzlet .eyes::before {
  content: '';
  position: absolute;
  width: 30px; height: 3px; top: -3px; left: -1px;
  background: #5b6680;
  border-radius: 2px;
  z-index: 3;
}
.monster-drizzlet .eye { width: 9px; height: 9px; }
.monster-drizzlet .eye::after { width: 5px; height: 5px; top: 3px; left: 2px; }
.monster-drizzlet .mouth {
  width: 10px; height: 5px; top: 39px; left: 25px;
  border-top: 2px solid #3d4760;
  border-radius: 5px 5px 0 0;
}
.monster-drizzlet .tail {
  position: absolute;
  width: 4px; height: 7px; left: 17px; bottom: 2px;
  background: #4cc9f0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 11px -4px 0 #4cc9f0, 22px 1px 0 #4cc9f0;
}

/* === Dunebug (Sand, Uncommon) — a shiny sand beetle === */
.monster-dunebug .body {
  width: 48px; height: 34px; left: 6px; bottom: 5px;
  background: linear-gradient(135deg, #e3b04b, #8a5a1c);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
}
.monster-dunebug .body::before {
  content: '';
  position: absolute;
  width: 2px; height: 60%; top: 0; left: calc(50% - 1px);
  background: rgba(60, 30, 0, 0.3);
}
.monster-dunebug .body::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px; top: 7px; left: 8px;
  background: rgba(60, 30, 0, 0.3);
  border-radius: 50%;
  box-shadow: 26px 1px 0 rgba(60, 30, 0, 0.3);
}
.monster-dunebug .eyes { top: 27px; left: 18px; gap: 8px; }
.monster-dunebug .eyes::before,
.monster-dunebug .eyes::after {
  content: '';
  position: absolute;
  width: 2px; height: 11px; top: -12px;
  background: #5a3a10;
  border-radius: 1px;
}
.monster-dunebug .eyes::before { left: 3px; rotate: -20deg; }
.monster-dunebug .eyes::after { right: 3px; rotate: 20deg; }
.monster-dunebug .eye { width: 10px; height: 10px; }
.monster-dunebug .eye::after { width: 5px; height: 5px; top: 3px; left: 3px; }
.monster-dunebug .mouth {
  width: 8px; height: 4px; top: 40px; left: 26px;
  border-bottom: 2px solid #5a3a10;
  border-radius: 0 0 4px 4px;
}
.monster-dunebug .tail {
  position: absolute;
  width: 40px; height: 7px; left: 10px; bottom: 0;
  background: repeating-linear-gradient(90deg, #5a3a10 0 3px, transparent 3px 11px);
}

/* === Stompling (Dino, Uncommon) — baby horned dino === */
.monster-stompling .body {
  width: 50px; height: 40px; left: 8px;
  background: linear-gradient(135deg, #b98ae0, #7b3fb0);
  border-radius: 24px 26px 18px 18px;
}
.monster-stompling .body::before {
  content: '';
  position: absolute;
  width: 32px; height: 18px; top: -10px; left: 9px;
  background: #e0b0ff;
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
  z-index: -1;
}
.monster-stompling .body::after {
  content: '';
  position: absolute;
  width: 5px; height: 12px; top: -7px; left: 15px;
  background: #fff3d6;
  border-radius: 50% 50% 0 0;
  box-shadow: 16px 0 0 #fff3d6;
}
.monster-stompling .eyes { top: 30px; left: 21px; gap: 8px; }
.monster-stompling .eye { width: 10px; height: 10px; }
.monster-stompling .eye::after { width: 5px; height: 5px; top: 3px; left: 3px; }
.monster-stompling .mouth {
  width: 10px; height: 4px; top: 45px; left: 29px;
  border-bottom: 2px solid #4a1f70;
  border-radius: 0 0 5px 5px;
}
.monster-stompling .tail {
  position: absolute;
  width: 18px; height: 10px; left: -4px; bottom: 6px;
  background: #7b3fb0;
  border-radius: 10px 4px 4px 10px;
  rotate: 20deg;
}

/* === Sproutdrake (Dragon, Uncommon) — leafy baby dragon === */
.monster-sproutdrake .body {
  width: 44px; height: 40px; left: 12px;
  background: linear-gradient(135deg, #6ee07a, #2f9e4f);
  border-radius: 22px 22px 18px 18px;
}
.monster-sproutdrake .body::before {
  content: '';
  position: absolute;
  width: 12px; height: 16px; top: -12px; left: 16px;
  background: linear-gradient(135deg, #c4f78e, #7ed957);
  border-radius: 0 100%;
  rotate: -20deg;
}
.monster-sproutdrake .body::after {
  content: '';
  position: absolute;
  width: 16px; height: 20px; top: 4px; left: -10px;
  background: linear-gradient(135deg, #7ed957, #3fbf5f);
  border-radius: 100% 0;
  rotate: -30deg;
  z-index: -1;
}
.monster-sproutdrake .eyes { top: 28px; left: 20px; gap: 8px; }
.monster-sproutdrake .eye { width: 10px; height: 10px; }
.monster-sproutdrake .eye::after { width: 5px; height: 5px; top: 3px; left: 3px; }
.monster-sproutdrake .mouth {
  width: 8px; height: 4px; top: 43px; left: 30px;
  border-bottom: 2px solid #1a5a2c;
  border-radius: 0 0 4px 4px;
}
.monster-sproutdrake .tail {
  position: absolute;
  width: 16px; height: 8px; right: -4px; bottom: 5px;
  background: #2f9e4f;
  border-radius: 0 8px 8px 0;
  rotate: -25deg;
}
.monster-sproutdrake .tail::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px; right: -6px; top: -4px;
  background: #9df06b;
  border-radius: 0 100%;
}

/* === Shardling (Crystal, Uncommon) — a walking gem === */
.monster-shardling .body {
  width: 40px; height: 42px; left: 10px;
  background: linear-gradient(135deg, #d4f8ff, #4fb5d6);
  border-radius: 8px 8px 14px 14px;
}
.monster-shardling .body::before,
.monster-shardling .body::after {
  content: '';
  position: absolute;
  background: linear-gradient(to top, #7fd4ee, #e8fcff);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.monster-shardling .body::before { width: 12px; height: 16px; top: -14px; left: 4px; }
.monster-shardling .body::after { width: 10px; height: 12px; top: -10px; right: 5px; }
.monster-shardling .tail {
  position: absolute;
  width: 12px; height: 22px; top: 0; left: 24px;
  background: linear-gradient(to top, #4fb5d6, #e8fcff);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.monster-shardling .eyes { top: 30px; left: 18px; gap: 8px; }
.monster-shardling .eye { width: 10px; height: 10px; }
.monster-shardling .eye::after { width: 5px; height: 5px; top: 3px; left: 3px; }
.monster-shardling .mouth {
  width: 6px; height: 3px; top: 45px; left: 27px;
  border-bottom: 2px solid #1f6f8c;
  border-radius: 0 0 3px 3px;
}

/* === Meteorb (Cosmic, Uncommon) — a tiny meteor with a fiery trail === */
.monster-meteorb .body {
  width: 42px; height: 42px; left: 14px; bottom: 2px;
  background: radial-gradient(circle at 35% 30%, #a898d0, #4b3a78);
  border-radius: 50%;
}
.monster-meteorb .body::before {
  content: '';
  position: absolute;
  width: 8px; height: 8px; top: 7px; right: 7px;
  background: rgba(20, 10, 40, 0.25);
  border-radius: 50%;
  box-shadow: -22px 20px 0 -1px rgba(20, 10, 40, 0.2);
}
.monster-meteorb .tail {
  position: absolute;
  width: 30px; height: 14px; left: -6px; top: 10px;
  background: linear-gradient(to right, transparent, #ffd166 45%, #ff6b35);
  border-radius: 50%;
  rotate: 35deg;
}
.monster-meteorb .eyes { top: 30px; left: 23px; gap: 7px; }
.monster-meteorb .eye { width: 10px; height: 10px; }
.monster-meteorb .eye::after { width: 5px; height: 5px; top: 3px; left: 3px; }
.monster-meteorb .mouth {
  width: 8px; height: 4px; top: 45px; left: 31px;
  border-bottom: 2px solid #2a1d4a;
  border-radius: 0 0 4px 4px;
}

/* ======================================================================
   Illustrated monsters (js/data/monster-art.js). The SVG stands on the
   sprite's floor and overflows the 60px box like the old horns and wings.
   ====================================================================== */
.monster.has-art .monster-art { position: absolute; left: 50%; bottom: -8px; width: 160%; height: 160%; translate: -50% 0; overflow: visible; pointer-events: none; }
.monster.has-art::after { bottom: -9px; left: 5%; width: 90%; }
.monster.has-art .blink { transform-box: fill-box; transform-origin: center; animation: monster-blink 5s linear var(--blink-delay, 0s) infinite; }
.monster.has-art .sway { transform-box: fill-box; transform-origin: 0% 100%; animation: art-sway 2.4s ease-in-out var(--idle-delay, 0s) infinite; }
.monster.has-art .flicker { transform-box: fill-box; transform-origin: 50% 100%; animation: art-flicker .9s ease-in-out infinite alternate; }
.monster.has-art .flap { transform-box: fill-box; transform-origin: 100% 100%; animation: art-flap 1.6s ease-in-out var(--idle-delay, 0s) infinite; }
.monster.has-art .flap-r { transform-box: fill-box; transform-origin: 0% 100%; animation: art-flap-r 1.6s ease-in-out var(--idle-delay, 0s) infinite; }
.monster.has-art .twinkle { transform-box: fill-box; transform-origin: center; animation: art-twinkle 1.8s ease-in-out infinite; }
@keyframes art-sway { 50% { rotate: 6deg; } }
@keyframes art-flicker { to { scale: .9 1.08; } }
@keyframes art-flap { 50% { rotate: -8deg; } }
@keyframes art-flap-r { 50% { rotate: 8deg; } }
@keyframes art-twinkle { 50% { opacity: .35; scale: .7; } }
@media (prefers-reduced-motion: reduce) { .monster.has-art * { animation: none !important; } }

/* Evolved forms (js/data/evolution-art.js): bolder colours, a power glow,
   and a pulsing aura, bobbing crown and spinning gems for the top stages. */
.monster.has-art.evolution-2 .monster-art-body { filter: saturate(1.12); }
.monster.has-art.evolution-3 .monster-art-body { filter: saturate(1.22) contrast(1.05); }
.monster.has-art.evolution-4 .monster-art-body { filter: saturate(1.35) contrast(1.1); }
.monster.has-art.evolution-3 .monster-art { filter: drop-shadow(0 0 5px #ffffff40); }
.monster.has-art.evolution-4 .monster-art { filter: drop-shadow(0 0 8px #fff6c060); }
.monster.has-art .evo-aura { transform-box: fill-box; transform-origin: center; animation: evo-aura 2.2s ease-in-out infinite; }
.monster.has-art .evo-rune { transform-box: fill-box; transform-origin: center; animation: evo-rune 3s ease-in-out infinite; }
.monster.has-art .evo-crest { transform-box: fill-box; transform-origin: 50% 100%; animation: evo-crest 2.6s ease-in-out var(--idle-delay, 0s) infinite; }
.monster.has-art .evo-crown { animation: evo-crown 2.4s ease-in-out var(--idle-delay, 0s) infinite; }
.monster.has-art .evo-orbit { transform-origin: 64px 66px; animation: evo-orbit 6s linear infinite; }
@keyframes evo-aura { 50% { opacity: .55; scale: 1.06; } }
@keyframes evo-rune { 50% { opacity: .6; } }
@keyframes evo-crest { 50% { scale: 1.04 1.07; } }
@keyframes evo-crown { 50% { translate: 0 -4px; } }
@keyframes evo-orbit { to { rotate: 360deg; } }
/* Titan forms' eyes glow with their element's power. */
.monster.has-art .evo-eyes { animation: evo-eyes 1.6s ease-in-out infinite; }
@keyframes evo-eyes { 50% { opacity: .35; } }

/* === Cosmetics (hats, face gear, neckwear, auras) === */
.monster .monster-gear { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; }
.monster .monster-gear-back { inset: auto; left: 50%; bottom: -8px; width: 160%; height: 160%; translate: -50% 0; z-index: -2; }
.monster.has-art .gear { pointer-events: none; }
/* A hat replaces the Titan crown instead of stacking on top of it. */
.monster.wears-hat .evo-crown { display: none; }
.monster .gear-spin > * { transform-box: fill-box; transform-origin: center; animation: gear-spin .7s linear infinite; }
.monster .gear-float { animation: gear-float 3.2s ease-in-out var(--idle-delay, 0s) infinite; }
.monster .gear-twinkle > * { transform-box: fill-box; transform-origin: center; animation: art-twinkle 1.8s ease-in-out infinite; }
.monster .gear-twinkle > :nth-child(2n) { animation-delay: -.9s; }
@keyframes gear-spin { from { transform: scaleX(1); } 50% { transform: scaleX(-1); } to { transform: scaleX(1); } }
@keyframes gear-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .monster .gear-spin > *, .monster .gear-float, .monster .gear-twinkle > * { animation: none; }
}