/* ══════════════════════════════════════════
   MUTATIONS — Visual modifications from random events.
   Applied as .mut-* classes on .pet element
   and DOM elements inside .mutations-container.
   ══════════════════════════════════════════ */

/* ── Mutations container (inside each stage) ── */
.mutations-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

/* ══════════════════════════════════════════
   COLOR SHIFTS
   Applied via filter on the active stage div
   ══════════════════════════════════════════ */
.pet.mut-blue-tint .active-stage {
  filter: hue-rotate(160deg) saturate(1.1);
}
.pet.mut-green-tint .active-stage {
  filter: hue-rotate(110deg) saturate(1.05);
}
.pet.mut-purple-tint .active-stage {
  filter: hue-rotate(220deg) saturate(1.1);
}
.pet.mut-pink-tint .active-stage {
  filter: hue-rotate(280deg) saturate(1.15);
}
.pet.mut-yellow-tint .active-stage {
  filter: hue-rotate(45deg) saturate(1.2);
}

/* Golden glow — warm aura instead of hue shift */
.pet.mut-golden-glow .pet-body {
  filter: drop-shadow(0 0 8px hsla(45, 100%, 60%, 0.7))
          drop-shadow(0 0 16px hsla(40, 90%, 50%, 0.4));
}

/* Red eyes — overlay on eyes via body filter */
.pet.mut-red-eyes .pet-body::before {
  filter: hue-rotate(-120deg) saturate(2) brightness(1.2) !important;
}

/* ══════════════════════════════════════════
   BODY SHAPE MODIFIERS
   ══════════════════════════════════════════ */

/* Bigger rounder body */
.pet.mut-big-body .pet-body {
  transform: scale(1.12);
}

/* Spotted body — dots overlay */
.pet.mut-spotted-body .pet-body::after {
  background-image:
    radial-gradient(circle 4px, hsla(350, 70%, 65%, 0.5) 40%, transparent 41%),
    radial-gradient(circle 3px, hsla(45, 80%, 65%, 0.5) 40%, transparent 41%),
    radial-gradient(circle 3.5px, hsla(175, 70%, 65%, 0.5) 40%, transparent 41%) !important;
  background-size: 18px 18px, 14px 14px, 16px 16px !important;
  background-position: 0 0, 7px 9px, 3px 4px !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  border-radius: inherit !important;
}

/* Bark skin — woody brown */
.pet.mut-bark-skin .active-stage {
  filter: hue-rotate(-140deg) saturate(0.6) brightness(0.85);
}

/* Scales — shimmery pattern */
.pet.mut-scales .active-stage {
  background-image: repeating-linear-gradient(
    120deg,
    transparent 0px,
    transparent 6px,
    hsla(180, 60%, 70%, 0.15) 6px,
    hsla(180, 60%, 70%, 0.15) 7px
  ), repeating-linear-gradient(
    60deg,
    transparent 0px,
    transparent 6px,
    hsla(180, 60%, 70%, 0.15) 6px,
    hsla(180, 60%, 70%, 0.15) 7px
  );
}

/* Stitches — dashed border */
.pet.mut-stitches .active-stage {
  border: 2px dashed hsla(0, 0%, 20%, 0.5) !important;
}

/* Crystal body — faceted shimmer overlay */
.pet.mut-crystal-body .pet-body {
  filter: drop-shadow(0 0 5px hsla(200, 80%, 75%, 0.45));
}
.pet.mut-crystal-body .mutations-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    hsla(200, 80%, 90%, 0.45) 0%,
    hsla(280, 70%, 85%, 0.25) 25%,
    hsla(200, 90%, 95%, 0.4) 50%,
    hsla(320, 70%, 85%, 0.25) 75%,
    hsla(200, 80%, 90%, 0.45) 100%
  );
  border-radius: 45% 45% 40% 40% / 50% 50% 35% 35%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Metal body — chrome */
.pet.mut-metal-body .active-stage {
  background: linear-gradient(
    150deg,
    hsl(0, 0%, 85%) 0%,
    hsl(0, 0%, 60%) 30%,
    hsl(0, 0%, 90%) 50%,
    hsl(0, 0%, 55%) 70%,
    hsl(0, 0%, 80%) 100%
  ) !important;
  box-shadow:
    inset -4px -4px 12px hsla(0, 0%, 30%, 0.4),
    inset 4px 4px 12px hsla(0, 0%, 100%, 0.5),
    0 4px 15px hsla(0, 0%, 20%, 0.3) !important;
}

/* Magma body — lava cracks */
.pet.mut-magma-body .active-stage {
  background: linear-gradient(
    160deg,
    hsl(0, 70%, 20%) 0%,
    hsl(15, 90%, 35%) 30%,
    hsl(0, 60%, 15%) 50%,
    hsl(30, 100%, 50%) 70%,
    hsl(0, 70%, 20%) 100%
  ) !important;
  box-shadow:
    inset 0 0 12px hsla(30, 100%, 50%, 0.5),
    0 0 20px hsla(15, 100%, 50%, 0.4) !important;
}

/* Cosmic marks — galaxy swirl */
.pet.mut-cosmic-marks .pet-body {
  filter: drop-shadow(0 0 6px hsla(270, 80%, 60%, 0.5))
          drop-shadow(0 0 12px hsla(200, 80%, 60%, 0.3));
}
.pet.mut-cosmic-marks .active-stage {
  background-image: radial-gradient(
    ellipse at 30% 40%,
    hsla(270, 80%, 70%, 0.3) 0%,
    transparent 50%
  ), radial-gradient(
    ellipse at 70% 60%,
    hsla(200, 80%, 70%, 0.3) 0%,
    transparent 50%
  );
}

/* Rainbow body — animated gradient */
.pet.mut-rainbow-body .active-stage {
  background: linear-gradient(
    90deg,
    hsl(0, 80%, 65%),
    hsl(60, 80%, 65%),
    hsl(120, 80%, 65%),
    hsl(180, 80%, 65%),
    hsl(240, 80%, 65%),
    hsl(300, 80%, 65%),
    hsl(360, 80%, 65%)
  ) !important;
  background-size: 300% 100% !important;
  animation: mut-rainbow-shift 4s linear infinite !important;
}

@keyframes mut-rainbow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Sparkle body — persistent sparkle effect */
.pet.mut-sparkle-body .pet-body::before {
  filter: drop-shadow(0 0 3px hsla(50, 100%, 70%, 0.8))
          drop-shadow(4px -4px 2px hsla(50, 100%, 80%, 0.6)) !important;
}

/* Rune marks — glowing lines */
.pet.mut-rune-marks .mutations-container::before {
  content: '᚛᚜';
  position: absolute;
  font-size: 18px;
  color: hsla(180, 100%, 70%, 0.7);
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  text-shadow: 0 0 6px hsla(180, 100%, 60%, 0.8);
  animation: mut-rune-pulse 2s ease-in-out infinite;
}

@keyframes mut-rune-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Big nose */
.pet.mut-big-nose .mutations-container::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 12px;
  background: hsl(350, 50%, 60%);
  border-radius: 50%;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset -2px -2px 4px hsla(350, 40%, 40%, 0.3);
}

/* Long arms — stretch existing arms */
.pet.mut-long-arms .arm-left,
.pet.mut-long-arms .arm-right {
  transform: scaleY(1.5) !important;
}

/* Feathered ears — extra fluff */
.pet.mut-feathered-ears .ear-left::before,
.pet.mut-feathered-ears .ear-right::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 14px;
  background: hsla(30, 50%, 70%, 0.8);
  border-radius: 50% 50% 0 0;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

/* Star eyes */
.pet.mut-star-eyes .pet-body::before {
  filter: drop-shadow(0 0 4px hsla(50, 100%, 70%, 0.9)) !important;
}

/* Flame cheeks — red glow on cheeks area */
.pet.mut-flame-cheeks .pet-body::after {
  box-shadow:
    -20px -4px 0 4px hsla(10, 90%, 55%, 0.5),
    20px -4px 0 4px hsla(10, 90%, 55%, 0.5) !important;
}

/* Cloud feet */
.pet.mut-cloud-feet .foot-left,
.pet.mut-cloud-feet .foot-right {
  background: hsl(210, 30%, 90%) !important;
  border-radius: 50% !important;
  transform: scale(1.3);
  box-shadow: 0 2px 6px hsla(210, 40%, 70%, 0.4);
}

/* ══════════════════════════════════════════
   AURA EFFECTS
   ══════════════════════════════════════════ */

/* Wisp aura — floating lights */
.pet.mut-wisp-aura .pet-body {
  filter: drop-shadow(0 0 10px hsla(180, 70%, 60%, 0.5))
          drop-shadow(5px -8px 6px hsla(120, 70%, 60%, 0.3))
          drop-shadow(-5px -5px 6px hsla(60, 70%, 60%, 0.3));
}

/* Shadow aura — dark glow */
.pet.mut-shadow-aura .pet-body {
  filter: drop-shadow(0 0 12px hsla(260, 50%, 15%, 0.7))
          drop-shadow(0 4px 8px hsla(260, 40%, 10%, 0.5));
}

/* Bioluminescent — pulsing neon */
.pet.mut-bioluminescent .pet-body {
  animation: mut-biolum-pulse 2s ease-in-out infinite;
}

@keyframes mut-biolum-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px hsla(180, 100%, 60%, 0.4))
            drop-shadow(0 0 12px hsla(160, 100%, 50%, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 12px hsla(180, 100%, 60%, 0.8))
            drop-shadow(0 0 24px hsla(160, 100%, 50%, 0.5));
  }
}

/* Aurora aura — shifting colors */
.pet.mut-aurora-aura .pet-body {
  animation: mut-aurora-glow 3s ease-in-out infinite;
}

@keyframes mut-aurora-glow {
  0% { filter: drop-shadow(0 0 10px hsla(120, 80%, 50%, 0.5)); }
  33% { filter: drop-shadow(0 0 10px hsla(200, 80%, 50%, 0.5)); }
  66% { filter: drop-shadow(0 0 10px hsla(280, 80%, 50%, 0.5)); }
  100% { filter: drop-shadow(0 0 10px hsla(120, 80%, 50%, 0.5)); }
}

/* Electric aura — sparks */
.pet.mut-electric-aura .pet-body {
  animation: mut-electric-flash 0.3s ease-in-out infinite;
}

@keyframes mut-electric-flash {
  0%, 90%, 100% {
    filter: drop-shadow(0 0 4px hsla(60, 100%, 60%, 0.3));
  }
  95% {
    filter: drop-shadow(0 0 15px hsla(60, 100%, 70%, 0.9))
            drop-shadow(3px -3px 3px hsla(60, 100%, 80%, 0.7));
  }
}

/* Frost aura — icy blue glow */
.pet.mut-frost-aura .pet-body {
  filter: drop-shadow(0 0 8px hsla(200, 90%, 80%, 0.6))
          drop-shadow(0 0 16px hsla(200, 80%, 70%, 0.3));
}

/* ══════════════════════════════════════════
   DOM-BASED MUTATIONS
   Elements added dynamically to .mutations-container
   ══════════════════════════════════════════ */

/* ── Wings ── */
.mut-el-butterfly-wings {
  position: absolute;
  top: 15%;
  width: 100%;
  height: 60%;
}
.mut-el-butterfly-wings::before,
.mut-el-butterfly-wings::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 30px;
  border-radius: 50% 50% 20% 50%;
  top: 0;
  background: linear-gradient(
    135deg,
    hsla(280, 70%, 70%, 0.6),
    hsla(200, 80%, 70%, 0.6),
    hsla(320, 70%, 70%, 0.6)
  );
  box-shadow: inset 0 0 6px hsla(280, 60%, 80%, 0.5);
  animation: mut-wing-flutter 0.8s ease-in-out infinite;
}
.mut-el-butterfly-wings::before {
  left: -18px;
  transform: rotate(-20deg);
}
.mut-el-butterfly-wings::after {
  right: -18px;
  transform: rotate(20deg) scaleX(-1);
}

@keyframes mut-wing-flutter {
  0%, 100% { transform: rotate(-20deg) scaleX(1); }
  50% { transform: rotate(-15deg) scaleX(0.7); }
}

/* Dragon wings — bigger, pointed */
.mut-el-dragon-wings {
  position: absolute;
  top: 10%;
  width: 100%;
  height: 60%;
}
.mut-el-dragon-wings::before,
.mut-el-dragon-wings::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 35px;
  top: 0;
  background: linear-gradient(
    to bottom,
    hsl(0, 60%, 45%),
    hsl(15, 70%, 35%)
  );
  clip-path: polygon(0% 100%, 50% 0%, 100% 30%, 80% 100%);
  animation: mut-wing-flutter 1.2s ease-in-out infinite;
}
.mut-el-dragon-wings::before { left: -22px; }
.mut-el-dragon-wings::after { right: -22px; transform: scaleX(-1); }

/* ── Horns ── */
.mut-el-bone-horns {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 20px;
}
.mut-el-bone-horns::before,
.mut-el-bone-horns::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 18px;
  background: linear-gradient(to top, hsl(40, 20%, 80%), hsl(40, 10%, 95%));
  border-radius: 3px 3px 0 0;
  top: 0;
}
.mut-el-bone-horns::before {
  left: 6px;
  transform: rotate(-15deg);
}
.mut-el-bone-horns::after {
  right: 6px;
  transform: rotate(15deg);
}

/* Unicorn horn */
.mut-el-unicorn-horn {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 24px solid hsl(300, 60%, 75%);
  filter: drop-shadow(0 -2px 4px hsla(300, 60%, 70%, 0.5));
}
.mut-el-unicorn-horn::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 24px;
  top: 0;
  left: -6px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 3px,
    hsla(280, 50%, 65%, 0.4) 3px,
    hsla(280, 50%, 65%, 0.4) 5px
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Swirl horn (ice cream) — offset left to avoid antennae overlap */
.mut-el-swirl-horn {
  position: absolute;
  top: -18px;
  left: 40%;
  transform: translateX(-50%);
  width: 14px;
  height: 22px;
  background: linear-gradient(
    180deg,
    hsl(340, 60%, 80%) 0%,
    hsl(30, 70%, 85%) 50%,
    hsl(340, 60%, 80%) 100%
  );
  border-radius: 50% 50% 30% 30%;
  clip-path: polygon(20% 100%, 50% 0%, 80% 100%);
}

/* Fire crest — flames on top, offset right to avoid horn overlap */
.mut-el-fire-crest {
  position: absolute;
  top: -14px;
  left: 60%;
  transform: translateX(-50%);
  width: 26px;
  height: 18px;
}
.mut-el-fire-crest::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to top, hsl(30, 100%, 50%), hsl(0, 100%, 50%), transparent);
  border-radius: 50% 50% 20% 20%;
  animation: mut-flame-flicker 0.4s ease-in-out infinite alternate;
}
.mut-el-fire-crest::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 14px;
  left: 30%;
  top: 3px;
  background: linear-gradient(to top, hsl(50, 100%, 60%), hsl(30, 100%, 50%), transparent);
  border-radius: 50% 50% 20% 20%;
  animation: mut-flame-flicker 0.3s ease-in-out infinite alternate-reverse;
}

@keyframes mut-flame-flicker {
  0% { transform: translateX(-50%) scaleY(1) scaleX(1); }
  100% { transform: translateX(-50%) scaleY(1.15) scaleX(0.9); }
}

/* ── Antennae — wider spread to clear other horns ── */
.mut-el-antennae {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 20px;
}
.mut-el-antennae::before,
.mut-el-antennae::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 18px;
  background: hsl(120, 50%, 50%);
  border-radius: 2px;
  top: 0;
}
.mut-el-antennae::before {
  left: 8px;
  transform: rotate(-15deg);
  box-shadow: 0 -4px 0 3px hsl(120, 60%, 55%);
}
.mut-el-antennae::after {
  right: 8px;
  transform: rotate(15deg);
  box-shadow: 0 -4px 0 3px hsl(120, 60%, 55%);
}

/* ── Trunk ── */
.mut-el-trunk {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 18px;
  background: hsl(175, 45%, 50%);
  border-radius: 0 0 50% 50%;
  z-index: 2;
}
.mut-el-trunk::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 6px;
  background: hsl(175, 40%, 45%);
  border-radius: 0 0 50% 50%;
  bottom: -2px;
  left: -1px;
}

/* ── Fin ── */
.mut-el-fin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid hsl(200, 60%, 50%);
}

/* ── Fluffy tail ── */
.mut-el-fluffy-tail {
  position: absolute;
  right: -20px;
  top: 45%;
  width: 25px;
  height: 30px;
  background: radial-gradient(
    ellipse at center,
    hsl(25, 80%, 60%) 0%,
    hsl(25, 70%, 50%) 60%,
    hsl(25, 60%, 40%) 100%
  );
  border-radius: 50% 60% 40% 50%;
  z-index: -1;
  animation: mut-tail-sway 2s ease-in-out infinite;
}

@keyframes mut-tail-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(10deg); }
}

/* Flame tail — positioned below fluffy-tail so both are visible */
.mut-el-flame-tail {
  position: absolute;
  right: -18px;
  top: 58%;
  width: 22px;
  height: 20px;
  background: linear-gradient(90deg, hsl(30, 100%, 50%), hsl(0, 100%, 50%), transparent);
  border-radius: 0 50% 50% 0;
  z-index: -1;
  animation: mut-flame-tail-flicker 0.5s ease-in-out infinite alternate;
}

@keyframes mut-flame-tail-flicker {
  0% { transform: scaleX(1) scaleY(1); opacity: 0.9; }
  100% { transform: scaleX(1.2) scaleY(0.8); opacity: 1; }
}

/* ── Extra arms ── */
.mut-el-extra-arms {
  position: absolute;
  top: 55%;
  width: 100%;
  height: 30px;
}
.mut-el-extra-arms::before,
.mut-el-extra-arms::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 18px;
  background: hsl(175, 50%, 48%);
  border-radius: 50%;
  top: 0;
}
.mut-el-extra-arms::before {
  left: -6px;
  transform: rotate(20deg);
  animation: wave-left 2.5s ease-in-out infinite;
}
.mut-el-extra-arms::after {
  right: -6px;
  transform: rotate(-20deg);
  animation: wave-right 2.5s ease-in-out infinite;
}

/* ── Spiral shell ── */
.mut-el-spiral-shell {
  position: absolute;
  top: 20%;
  right: -14px;
  width: 18px;
  height: 18px;
  background: conic-gradient(
    from 0deg,
    hsl(30, 60%, 80%),
    hsl(20, 50%, 65%),
    hsl(30, 60%, 80%),
    hsl(20, 50%, 65%),
    hsl(30, 60%, 80%)
  );
  border-radius: 50%;
  border: 2px solid hsl(20, 40%, 55%);
  z-index: -1;
}

/* ── Accessories: Hats & Headwear ── */

/* Flower crown */
.mut-el-flower-crown {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 12px;
  background: hsl(120, 40%, 45%);
  border-radius: 50%;
}
.mut-el-flower-crown::before {
  content: '🌸🌼🌺';
  position: absolute;
  font-size: 8px;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Coral crown */
.mut-el-coral-crown {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 16px;
}
.mut-el-coral-crown::before,
.mut-el-coral-crown::after {
  content: '';
  position: absolute;
  background: hsl(350, 60%, 55%);
  border-radius: 40% 40% 0 0;
}
.mut-el-coral-crown::before {
  width: 10px;
  height: 14px;
  left: 5px;
  bottom: 0;
}
.mut-el-coral-crown::after {
  width: 8px;
  height: 10px;
  right: 5px;
  bottom: 0;
  background: hsl(10, 50%, 60%);
}

/* Pirate hat */
.mut-el-pirate-hat {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 14px;
  background: hsl(0, 0%, 15%);
  border-radius: 50% 50% 0 0;
  border-bottom: 3px solid hsl(45, 60%, 50%);
}
.mut-el-pirate-hat::after {
  content: '☠';
  position: absolute;
  font-size: 8px;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

/* Knight helmet */
.mut-el-helmet {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 18px;
  background: linear-gradient(to bottom, hsl(0, 0%, 70%), hsl(0, 0%, 55%));
  border-radius: 50% 50% 10% 10%;
  border: 1px solid hsl(0, 0%, 45%);
}
.mut-el-helmet::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 3px;
  background: hsl(0, 0%, 30%);
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Ninja headband — z-index 5 so it layers above masks/patches */
.mut-el-headband {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 6px;
  background: hsl(0, 70%, 45%);
  z-index: 5;
}
.mut-el-headband::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -2px;
  width: 12px;
  height: 10px;
  background: hsl(0, 70%, 45%);
  clip-path: polygon(0% 20%, 100% 0%, 80% 50%, 100% 100%, 0% 80%);
}

/* Cape */
.mut-el-cape {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 75%;
  background: linear-gradient(
    180deg,
    hsl(0, 60%, 25%) 0%,
    hsl(340, 70%, 20%) 100%
  );
  border-radius: 0 0 40% 40%;
  z-index: -1;
  animation: mut-cape-sway 3s ease-in-out infinite;
}

@keyframes mut-cape-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}

/* Half mask */
.mut-el-half-mask {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 35%;
  height: 25%;
  background: hsl(0, 0%, 95%);
  border-radius: 50% 10% 50% 50%;
  z-index: 4;
  box-shadow: inset -2px -2px 4px hsla(0, 0%, 70%, 0.5);
}

/* Eyepatch */
.mut-el-eyepatch {
  position: absolute;
  top: 22%;
  right: 20%;
  width: 16px;
  height: 14px;
  background: hsl(0, 0%, 10%);
  border-radius: 50%;
  z-index: 4;
}
.mut-el-eyepatch::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 2px;
  background: hsl(0, 0%, 15%);
  top: 50%;
  left: -12px;
  transform: rotate(-5deg);
}

/* ── Crescent mark — offset left so it doesn't overlap third-eye ── */
.mut-el-crescent-mark {
  position: absolute;
  top: 6%;
  left: 35%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 3px 0 0 2px hsl(45, 80%, 70%);
  z-index: 4;
}

/* Third eye */
.mut-el-third-eye {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 12px;
  background: radial-gradient(
    circle at 45% 40%,
    hsl(275, 80%, 60%) 25%,
    hsl(0, 0%, 10%) 50%,
    hsl(0, 0%, 100%) 55%
  );
  border-radius: 50%;
  z-index: 4;
  box-shadow: 0 0 4px hsla(275, 80%, 60%, 0.6);
}

/* ══════════════════════════════════════════
   EVENT BANNER
   ══════════════════════════════════════════ */
.event-banner {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: linear-gradient(135deg, hsl(250, 30%, 18%), hsl(200, 30%, 12%));
  border: 2px solid hsla(180, 60%, 50%, 0.4);
  border-radius: 16px;
  padding: 14px 18px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(var(--scene-width) - 16px);
  width: calc(var(--scene-width) - 16px);
  text-align: center;
  box-shadow:
    0 8px 32px hsla(0, 0%, 0%, 0.5),
    0 0 20px hsla(180, 60%, 50%, 0.15);
}

.event-banner.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  cursor: pointer;
}

.event-banner__chapter {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.8;
}

.event-banner__chapter:empty {
  display: none;
}

.event-banner__icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.event-banner.visible .event-banner__icon {
  animation: event-icon-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes event-icon-entrance {
  0% { transform: scale(0) rotate(-45deg); }
  50% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.event-banner__title {
  font-size: 16px;
  font-weight: 700;
  color: hsl(45, 80%, 70%);
  margin-bottom: 6px;
}

.event-banner__desc {
  font-size: 12px;
  color: hsl(0, 0%, 75%);
  line-height: 1.4;
  margin-bottom: 12px;
}

.event-banner__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsla(180, 40%, 30%, 0.4);
  border: 1px solid hsla(180, 50%, 50%, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: hsl(180, 60%, 70%);
}

.event-banner__item-icon {
  font-size: 18px;
}

.event-banner__item-name {
  font-weight: 600;
}

.event-banner__item-desc {
  font-size: 10px;
  color: hsl(0, 0%, 60%);
  margin-top: 2px;
}

/* Pending items indicator */
.pending-mutations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  min-height: 0;
}

.pending-mutations:empty {
  display: none;
}

.pending-label {
  font-size: 9px;
  font-weight: 700;
  color: hsla(180, 50%, 65%, 0.8);
  align-self: center;
}

.pending-mutation-icon {
  font-size: 14px;
  background: hsla(180, 40%, 30%, 0.5);
  border-radius: 4px;
  padding: 2px 4px;
  border: 1px solid hsla(180, 50%, 50%, 0.2);
  animation: mut-pending-bob 2s ease-in-out infinite;
}

@keyframes mut-pending-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ══════════════════════════════════════════
   CATEGORY-THEMED BANNER ENTRANCES
   ══════════════════════════════════════════ */

/* Forest: gentle slide-up with leaf sway */
.event-banner.visible[data-category="forest"] {
  animation: banner-forest 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes banner-forest {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10%) scale(0.9) rotate(-2deg); }
  60%  { transform: translateX(-50%) translateY(-2%) scale(1.02) rotate(1deg); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); }
}

/* Spooky: flickering ghostly fade-in */
.event-banner.visible[data-category="spooky"] {
  animation: banner-spooky 0.6s ease-out forwards;
}
@keyframes banner-spooky {
  0%   { opacity: 0; transform: translateX(-50%) scale(1.1); }
  20%  { opacity: 0.7; transform: translateX(-50%) scale(0.98); }
  35%  { opacity: 0.3; transform: translateX(-50%) scale(1.02); }
  55%  { opacity: 0.8; transform: translateX(-50%) scale(0.99); }
  75%  { opacity: 0.5; }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Ocean: ripple wave from side */
.event-banner.visible[data-category="ocean"] {
  animation: banner-ocean 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes banner-ocean {
  0%   { opacity: 0; transform: translate(-30%, 0) scale(0.8) skewY(3deg); }
  50%  { transform: translate(-52%, 0) scale(1.03) skewY(-1deg); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) skewY(0deg); }
}

/* Sky: drop from top */
.event-banner.visible[data-category="sky"] {
  animation: banner-sky 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes banner-sky {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30%) scale(0.7); }
  60%  { transform: translateX(-50%) translateY(2%) scale(1.05); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Food: bouncy pop */
.event-banner.visible[data-category="food"] {
  animation: banner-food 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes banner-food {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  50%  { transform: translateX(-50%) scale(1.15); }
  70%  { transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Adventure: dramatic slide-in from left */
.event-banner.visible[data-category="adventure"] {
  animation: banner-adventure 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes banner-adventure {
  0%   { opacity: 0; transform: translate(-120%, 0) scale(0.8); }
  60%  { transform: translate(-48%, 0) scale(1.05); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Rare: golden glow burst */
.event-banner.visible[data-category="rare"] {
  animation: banner-rare 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes banner-rare {
  0%   { opacity: 0; transform: translateX(-50%) scale(0); }
  30%  { opacity: 1; transform: translateX(-50%) scale(1.2);
         box-shadow: 0 0 60px hsla(45, 100%, 60%, 0.8), 0 0 120px hsla(45, 100%, 50%, 0.4); }
  60%  { transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1);
         box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.5), 0 0 20px hsla(180, 60%, 50%, 0.15); }
}

/* ══════════════════════════════════════════
   ECHO TIER BANNER STYLING
   ══════════════════════════════════════════ */
.event-banner.echo-mastered {
  border-color: hsl(200, 70%, 55%) !important;
  box-shadow:
    0 8px 32px hsla(0, 0%, 0%, 0.5),
    0 0 25px hsla(200, 70%, 55%, 0.3);
}

.event-banner.echo-mastered .event-banner__title {
  color: hsl(200, 80%, 70%);
}

.event-banner.echo-legendary {
  border-color: hsl(45, 100%, 60%) !important;
  box-shadow:
    0 8px 32px hsla(0, 0%, 0%, 0.5),
    0 0 30px hsla(45, 100%, 60%, 0.4),
    0 0 60px hsla(45, 100%, 50%, 0.2);
  animation: echo-legendary-glow 1.5s ease-in-out infinite !important;
}

.event-banner.echo-legendary .event-banner__title {
  color: hsl(45, 100%, 70%);
  text-shadow: 0 0 12px hsla(45, 100%, 60%, 0.6);
}

@keyframes echo-legendary-glow {
  0%, 100% { box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.5), 0 0 30px hsla(45, 100%, 60%, 0.4); }
  50% { box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.5), 0 0 50px hsla(45, 100%, 60%, 0.6), 0 0 80px hsla(45, 100%, 50%, 0.3); }
}

/* ══════════════════════════════════════════
   CHAPTER COMPLETION CELEBRATION
   ══════════════════════════════════════════ */
.chapter-complete-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.chapter-complete-overlay.active {
  opacity: 1;
}

.chapter-complete__flash {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  animation: chapter-flash 3.5s ease-out forwards;
}

@keyframes chapter-flash {
  0%   { opacity: 0; }
  8%   { opacity: 0.35; }
  25%  { opacity: 0.25; }
  100% { opacity: 0; }
}

.chapter-complete__content {
  position: relative;
  text-align: center;
  animation: chapter-content-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes chapter-content-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.chapter-complete__label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-shadow: 0 0 20px currentColor;
}

.chapter-complete__title {
  font-size: 28px;
  font-weight: 900;
  color: white;
  text-shadow:
    0 0 20px hsla(0, 0%, 100%, 0.5),
    0 2px 8px hsla(0, 0%, 0%, 0.6);
  margin-bottom: 16px;
}

.chapter-complete__items {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.chapter-complete__item {
  font-size: 28px;
  animation: chapter-item-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.4));
}

.chapter-complete__item:nth-child(1)  { animation-delay: 0.1s; }
.chapter-complete__item:nth-child(2)  { animation-delay: 0.15s; }
.chapter-complete__item:nth-child(3)  { animation-delay: 0.2s; }
.chapter-complete__item:nth-child(4)  { animation-delay: 0.25s; }
.chapter-complete__item:nth-child(5)  { animation-delay: 0.3s; }
.chapter-complete__item:nth-child(6)  { animation-delay: 0.35s; }
.chapter-complete__item:nth-child(7)  { animation-delay: 0.4s; }
.chapter-complete__item:nth-child(8)  { animation-delay: 0.45s; }
.chapter-complete__item:nth-child(9)  { animation-delay: 0.5s; }
.chapter-complete__item:nth-child(10) { animation-delay: 0.55s; }

@keyframes chapter-item-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}