/* v2.73 special battle event feedback, v2.74 motion tuning: compact readable text, continuous directional drift, no glow. */

.battle-damage-feedback-v271.battle-damage-feedback-v273 {
  top: 66px;
  min-width: 86px;
  opacity: 1;
  transform: none;
  animation: none;
  overflow: visible;
}

.battle-damage-feedback-v273.left { right: 2px; }
.battle-damage-feedback-v273.right { left: 2px; }

.battle-damage-feedback-v273 strong {
  opacity: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
  will-change: transform, opacity;
  animation:
    v274-damage-number-motion .54s 1.82s cubic-bezier(.22, .48, .32, 1) both,
    v274-damage-number-opacity .54s 1.82s linear both;
}

.battle-damage-feedback-v273 .battle-event-v273 {
  --event-drift-x: 46px;
  --event-scale: 1.42;
  display: inline-block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  white-space: nowrap;
  font-size: clamp(9px, 1.05vw, 12px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .92);
  -webkit-text-stroke: .3px rgba(0, 0, 0, .7);
  transform-origin: center center;
  will-change: transform, opacity;
  animation:
    v274-special-event-motion .72s var(--event-delay, 1.80s) cubic-bezier(.22, .48, .32, 1) both,
    v274-special-event-opacity .72s var(--event-delay, 1.80s) linear both;
}

.battle-damage-feedback-v273.left .battle-event-v273 {
  --event-drift-x: -46px;
}

.battle-damage-feedback-v273.right .battle-event-v273 {
  --event-drift-x: 46px;
}

.battle-damage-feedback-v273 .battle-event-v273.critical {
  --event-scale: 1.52;
  color: #ffd0ad;
  font-size: clamp(11px, 1.225vw, 14px);
}

.battle-damage-feedback-v273 .battle-event-v273.counter {
  --event-scale: 1.44;
  color: #f2dfb5;
}

.battle-damage-feedback-v273 .battle-event-v273.scheme {
  --event-scale: 1.42;
  color: #c8edf2;
}

.battle-damage-feedback-v273 .battle-event-v273.event-1 {
  margin-top: 2px;
}

.battle-damage-feedback-v273 .battle-event-v273.event-2 {
  margin-top: 1px;
  font-size: clamp(8px, .95vw, 11px);
}

/* Movement is deliberately a single 0 -> 100 trajectory. Opacity is animated separately
   so the text can appear and fade without introducing a stationary transform keyframe. */
@keyframes v274-special-event-motion {
  0% {
    transform: translate3d(0, 7px, 0) scale(.96);
  }
  100% {
    transform: translate3d(var(--event-drift-x), -44px, 0) scale(var(--event-scale));
  }
}

@keyframes v274-special-event-opacity {
  0% { opacity: 0; }
  10% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes v274-damage-number-motion {
  0% { transform: translateY(5px) scale(.96); }
  100% { transform: translateY(-11px) scale(.98); }
}

@keyframes v274-damage-number-opacity {
  0% { opacity: 0; }
  14% { opacity: 1; }
  66% { opacity: 1; }
  100% { opacity: 0; }
}

.battle-screen-v271.battle-speed-2 .battle-damage-feedback-v273 strong {
  animation-duration: .32s, .32s;
  animation-delay: .91s, .91s;
}

.battle-screen-v271.battle-speed-2 .battle-damage-feedback-v273 .battle-event-v273 {
  animation-duration: .48s, .48s;
  animation-delay: .90s, .90s;
}

.battle-screen-v271.battle-speed-2 .battle-damage-feedback-v273 .battle-event-v273.event-1 {
  animation-delay: .95s, .95s;
}

.battle-screen-v271.battle-speed-2 .battle-damage-feedback-v273 .battle-event-v273.event-2 {
  animation-delay: 1s, 1s;
}

@media (max-width: 760px) {
  .battle-damage-feedback-v271.battle-damage-feedback-v273 {
    top: 52px;
    min-width: 76px;
  }

  .battle-damage-feedback-v273 .battle-event-v273 {
    --event-drift-x: 34px;
    font-size: clamp(9px, 2.6vw, 11px);
  }

  .battle-damage-feedback-v273.left .battle-event-v273 {
    --event-drift-x: -34px;
  }

  .battle-damage-feedback-v273.right .battle-event-v273 {
    --event-drift-x: 34px;
  }

  .battle-damage-feedback-v273 .battle-event-v273.critical {
    font-size: clamp(10px, 2.9vw, 13px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-screen-v271 .battle-damage-feedback-v273 strong,
  .battle-screen-v271 .battle-damage-feedback-v273 .battle-event-v273 {
    opacity: 1;
    transform: none;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}
