/* === CREATURES SYSTEM — Raizes de Marte ===
   Creatures walking around the world, appearing on top of the ground.
   All positioned absolutely inside #world so they scroll with the camera.
*/

.mars-creature {
  position: absolute;
  bottom: 22vh;
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: bottom center;
  will-change: transform, left;
  transition: filter 0.3s ease;
}

.mars-creature .creature-body {
  display: block;
  transform-origin: bottom center;
}

.mars-creature.walking .creature-body {
  animation: creatureBob 0.42s steps(2) infinite;
}

.mars-creature.facing-left .creature-body {
  transform: scaleX(-1);
}

@keyframes creatureBob {
  0%   { transform: translateY(0) scaleX(var(--flip, 1)); }
  50%  { transform: translateY(-2px) scaleX(var(--flip, 1)); }
  100% { transform: translateY(0) scaleX(var(--flip, 1)); }
}

.mars-creature.facing-left .creature-body {
  --flip: -1;
}

/* per-rarity filters */
.mars-creature.rarity-comum    { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.mars-creature.rarity-incomum  { filter: drop-shadow(0 0 3px rgba(106,170,74,0.5)); }
.mars-creature.rarity-raro     { filter: drop-shadow(0 0 5px rgba(100,180,255,0.7)); }
.mars-creature.rarity-epico    { filter: drop-shadow(0 0 6px rgba(180,100,255,0.7)); }
.mars-creature.rarity-lendario { filter: drop-shadow(0 0 8px rgba(255,200,80,0.8)); }
.mars-creature.rarity-mitico   { filter: drop-shadow(0 0 9px rgba(220,80,60,0.85)); }
.mars-creature.rarity-cosmico  { filter: drop-shadow(0 0 12px rgba(255,140,220,0.9)); }
.mars-creature.rarity-unknown  { filter: drop-shadow(0 0 10px rgba(255,240,210,0.9)) hue-rotate(0deg); }

/* per-rarity ambient pulse */
.mars-creature.rarity-raro .creature-body,
.mars-creature.rarity-epico .creature-body,
.mars-creature.rarity-lendario .creature-body,
.mars-creature.rarity-mitico .creature-body,
.mars-creature.rarity-cosmico .creature-body,
.mars-creature.rarity-unknown .creature-body {
  animation-duration: 0.5s;
}

.mars-creature.rarity-raro {
  animation: creatureFloatSoft 3.2s ease-in-out infinite;
}
.mars-creature.rarity-cosmico {
  animation: creatureFloatSoft 4s ease-in-out infinite;
}
.mars-creature.rarity-unknown {
  animation: creatureGlitch 1.8s steps(6) infinite;
}

@keyframes creatureFloatSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes creatureGlitch {
  0%, 100% { transform: translate(0, 0); opacity: 1; filter: drop-shadow(0 0 10px rgba(255,240,210,0.9)) hue-rotate(0deg); }
  20%      { transform: translate(-2px, 1px); opacity: 0.85; filter: drop-shadow(1px 0 0 rgba(255,0,80,0.7)) drop-shadow(-1px 0 0 rgba(0,200,255,0.7)); }
  40%      { transform: translate(2px, -1px); opacity: 1; }
  60%      { transform: translate(-1px, 0); opacity: 0.6; filter: drop-shadow(0 0 10px rgba(255,240,210,0.9)) hue-rotate(90deg); }
  80%      { transform: translate(1px, 1px); opacity: 1; filter: drop-shadow(0 0 10px rgba(255,240,210,0.9)) hue-rotate(180deg); }
}

/* particle trails */
.creature-particle {
  position: absolute;
  bottom: 22vh;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: creatureParticleFade 1.8s ease-out forwards;
}
.creature-particle.p-raro    { background: rgba(140,210,255,0.9); box-shadow: 0 0 6px rgba(140,210,255,0.8); }
.creature-particle.p-epico   { background: rgba(210,140,255,0.9); box-shadow: 0 0 6px rgba(210,140,255,0.8); }
.creature-particle.p-lendario{ background: rgba(255,220,120,0.95); box-shadow: 0 0 6px rgba(255,220,120,0.9); }
.creature-particle.p-mitico  { background: rgba(255,180,180,0.9); box-shadow: 0 0 8px rgba(255,120,120,0.9); }
.creature-particle.p-cosmico { background: rgba(255,200,240,0.95); box-shadow: 0 0 10px rgba(255,180,240,0.9); }

@keyframes creatureParticleFade {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -30px)) scale(0.2); }
}

/* creature tooltip (reuses inventory style vibe) */
.creature-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: rgba(12, 8, 6, 0.94);
  border: 1px solid var(--ct-color, #8a8a7a);
  padding: 10px 12px;
  min-width: 180px;
  max-width: 260px;
  font-family: 'Courier New', Consolas, monospace;
  color: #e8d8b8;
  font-size: 11px;
  line-height: 1.45;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 14px rgba(0, 0, 0, 0.7),
    0 0 18px var(--ct-color, #8a8a7a33);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.creature-tooltip.visible { opacity: 1; }
.creature-tooltip .ct-name {
  color: var(--ct-color, #fff);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  margin-bottom: 2px;
}
.creature-tooltip .ct-rarity {
  color: var(--ct-color, #aaa);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  opacity: 0.85;
}
.creature-tooltip .ct-ability {
  color: #b8d8f0;
  font-size: 10.5px;
  font-style: italic;
  border-top: 1px dashed rgba(255,255,255,0.15);
  padding-top: 5px;
  margin-top: 5px;
}

/* plant growth-boost glow flash */
.garden-plant.creature-boosted {
  animation: plantBoostGlow 1.2s ease-out;
}
@keyframes plantBoostGlow {
  0%   { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  40%  { filter: brightness(1.4) drop-shadow(0 0 10px rgba(180,255,220,0.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* teleport flash for ??? */
.creature-teleport-flash {
  position: absolute;
  bottom: 22vh;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(circle, rgba(255,240,210,0.8) 0%, rgba(255,240,210,0) 70%);
  animation: teleportFlash 0.6s ease-out forwards;
}
@keyframes teleportFlash {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.6); }
}