.actor_is_moving {
  animation: actor_move_animation 0.25s infinite ease-in-out;
}

.actor_is_idle {
  animation: actor_move_animation 1s infinite ease-in-out;
}

.actor_avatar.actor_is_casting {
  animation: actor_cast_attack_animation 0.28s cubic-bezier(0.17, 0.84, 0.28, 1.18) both;
  transform-origin: 50% 82%;
  will-change: transform, filter;
}

.actor_body_container:has(.actor_is_casting)::before {
  animation: actor-cast-flash 0.3s ease-out both;
}

.actor_body_container .actor_is_dead {
  animation: none;
}

.actor_avatar .bb-img img {
  border-radius: 50%;
}
/*animate*/
.floating-div {
  position: absolute;
  bottom: 0; /* 你可以根据需要调整初始位置 */
  /*left: 50%;*/ /* 你可以根据需要调整初始位置 */
  transform: translateX(-50%);
  /*width: 100px;*/ /* 你可以根据需要调整大小 */
  /*height: 100px;*/ /* 你可以根据需要调整大小 */
  animation: float-up 1s forwards;
}


/*.actor_body_container {
  position: relative;
  width: 220px;
  height: 140px;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 36%) 0 18%, transparent 42%), linear-gradient(180deg, transparent 0 55%, var(--ground) 56% 100%);
}*/

  .actor_body_container::before,
  .actor_body_container::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 70%;
    width: 10px;
    height: 10px;
    translate: -50% -50%;
    opacity: 0;
    pointer-events: none;
  }

  .actor_body_container::before {
    border: 2px solid #f9d27d;
    box-shadow: inset 0 0 0 1px rgb(247 169 67 / 38%);
    filter: drop-shadow(0 0 8px #f28b2a);
  }

  .actor_body_container::after {
    background: radial-gradient(circle, var(--spark) 0 32%, transparent 34%), radial-gradient(circle, #8f8a80 0 38%, transparent 40%);
  }

  .actor_body_container .actor_is_dead {
    background-image: url(/_content/DQQ.Web.Component/images/mobs/dead.png);
    opacity: 0.7;
  }

/*.actor_body_container .actor_is_dead {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  opacity: 0;
  image-rendering: pixelated;
  background: url("./dead.png") center / 48px 48px no-repeat;
  transform: translateY(10px) scale(0.7);
  transform-origin: 50% 86%;
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / 32%));
}*/

.actor_is_dead.is-playing {
  animation: remains-fall-impact 1s cubic-bezier(0.12, 0.78, 0.22, 1) both;
  transform-origin: 50% 88%;
}

.actor_body_container:has(.actor_is_dead.is-playing)::before {
  animation: shockwave 0.48s ease-out 0.38s both;
}

.actor_body_container:has(.actor_is_dead.is-playing)::after {
  animation: blast-dust 0.72s ease-out 0.42s both;
}

.replay {
  min-width: 96px;
  height: 38px;
  border: 1px solid #596173;
  border-radius: 6px;
  color: #f2f4f8;
  background: #252b38;
  font: 700 13px/1 inherit;
  letter-spacing: 0;
  cursor: pointer;
}

  .replay:hover {
    background: #303848;
  }

  .replay:active {
    transform: translateY(1px);
  }

@keyframes actor_cast_attack_animation {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }

  22% {
    transform: translateY(-4px) scale(1.08, 0.92) rotate(-4deg);
    filter: brightness(1.42) drop-shadow(0 0 8px rgb(255 211 122 / 70%));
  }

  48% {
    transform: translateY(5px) scale(0.92, 1.12) rotate(5deg);
    filter: brightness(1.72) drop-shadow(0 0 12px rgb(255 164 64 / 80%));
  }

  72% {
    transform: translateY(-2px) scale(1.04, 0.96) rotate(-2deg);
    filter: brightness(1.24) drop-shadow(0 0 6px rgb(255 211 122 / 55%));
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

@keyframes actor-cast-flash {
  0% {
    width: 10px;
    height: 6px;
    opacity: 0.85;
    scale: 0.25;
  }

  100% {
    width: 58px;
    height: 34px;
    opacity: 0;
    scale: 1;
  }
}

@keyframes remains-fall-impact {
  0% {
    opacity: 0.15;
    transform: translateY(-88px) scale(1) rotate(-10deg);
    filter: brightness(1.8) drop-shadow(0 24px 16px rgb(0 0 0 / 16%));
  }

  30% {
    opacity: 1;
    transform: translateY(4px) scale(1) rotate(-8deg);
    filter: brightness(1.76) drop-shadow(0 22px 14px rgb(0 0 0 / 18%));
  }

  82% {
    opacity: 1;
    transform: translateY(4px) scale(1) rotate(0deg);
    filter: brightness(1.05) drop-shadow(0 2px 2px rgb(0 0 0 / 34%));
  }

  100% {
    opacity: 0.88;
    transform: translateY(4px) scale(1) rotate(0deg);
    filter: brightness(0.56) grayscale(0.34) drop-shadow(0 2px 0 rgb(0 0 0 / 34%));
  }
}

@keyframes shockwave {
  0% {
    width: 8px;
    height: 3px;
    opacity: 0.95;
    scale: 0.25;
    border-radius: 50%;
    transform: translateY(10px);
  }

  100% {
    width: 116px;
    height: 18px;
    opacity: 0;
    scale: 1;
    border-radius: 50%;
    transform: translateY(10px);
  }
}

@keyframes blast-dust {
  0% {
    opacity: 0.9;
    box-shadow: 0 0 0 4px rgb(196 143 84 / 40%), -5px 2px 0 3px #a58c72, 6px 1px 0 3px #8e7b67, -9px 4px 0 4px #6f665d, 10px 5px 0 4px #777169, 1px 7px 0 3px #5f5a53;
    transform: translateY(10px) scale(0.38) rotate(0deg);
  }

  100% {
    opacity: 0;
    box-shadow: 0 0 0 28px transparent, -46px 8px 0 1px transparent, 44px 7px 0 1px transparent, -58px 13px 0 2px transparent, 56px 14px 0 2px transparent, 4px 20px 0 1px transparent;
    transform: translateY(10px) scale(1.15) rotate(10deg);
  }
}