/* Shimeji/Webmeji Styles */
.webmeji-container {
  position: fixed;
  width: 64px;
  height: 64px;
  overflow: visible;
  z-index: 9999;
  pointer-events: auto; /* allow dragging/clicking */
  touch-action: none;   /* smoother touch dragging */
  transition: transform 0.1s ease;
  will-change: transform, left, bottom;
  transform: translateZ(0);
  cursor: grab;
}

.webmeji-container img {
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none; /* clicks go to container */
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.webmeji-container.walking {
  animation: walkBounce 0.5s ease-in-out infinite;
}

.webmeji-container.climbing {
  animation: climbMotion 0.8s ease-in-out infinite;
}

/* .webmeji-container.falling {
  animation: fallMotion 2s ease-in forwards;
} */

.webmeji-container.jumping {
  animation: jumpMotion 1s ease-out;
}

/* Ceiling crawl state */
.webmeji-container.ceiling {
  animation: ceilingCrawl 1.2s ease-in-out infinite;
}

.webmeji-container.dragging {
  cursor: grabbing;
}

/* Enhanced animations for new features */
@keyframes walkBounce {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

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

@keyframes fallMotion {
  0% {
    transform: translateY(-100vh) rotate(0deg);
  }
  70% {
    transform: translateY(calc(100vh - 64px)) rotate(180deg);
  }
  85% {
    transform: translateY(calc(100vh - 74px)) rotate(180deg);
  }
  100% {
    transform: translateY(calc(100vh - 64px)) rotate(180deg);
  }
}

@keyframes jumpMotion {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}

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

/* Multiply effect */
.webmeji-container.multiplying {
  animation: multiplySpawn 0.5s ease-out;
}

@keyframes multiplySpawn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mouse interaction effects */
.webmeji-container.scared {
  animation: scaredMotion 0.3s ease-out;
}

.webmeji-container.happy {
  animation: happyBounce 0.6s ease-out;
}

@keyframes scaredMotion {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8) translateY(-5px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes happyBounce {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1) translateY(-5px);
  }
  50% {
    transform: scale(1.05) translateY(-3px);
  }
  75% {
    transform: scale(1.08) translateY(-4px);
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .webmeji-container {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .webmeji-container {
    width: 40px;
    height: 40px;
  }
}