/* v2.38: card-local hit feedback and fixed 600-troop battle bars. */

.battle-screen.battle-visual-upgraded .fighter .hpbar {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) calc(16.666% - 1px),
      rgba(255,255,255,.12) calc(16.666% - 1px),
      rgba(255,255,255,.12) 16.666%
    ),
    rgba(0,0,0,.52);
}

.battle-screen.battle-visual-upgraded .troop-number {
  color: rgba(255,255,255,.78);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual {
  isolation: isolate;
}

.battle-screen.battle-visual-upgraded .v238-card-impact {
  position: absolute;
  z-index: 24;
  inset: 7px;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 4px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: scale(.76);
  animation: v238-card-impact-in 1.18s 1.55s cubic-bezier(.16,.84,.2,1) both;
}

.battle-screen.battle-visual-upgraded .v238-card-impact::before,
.battle-screen.battle-visual-upgraded .v238-card-impact::after {
  content: '';
  position: absolute;
  inset: -35%;
  pointer-events: none;
}

.battle-screen.battle-visual-upgraded .v238-card-impact::before {
  background:
    linear-gradient(115deg, transparent 37%, rgba(255,255,255,.72) 49%, transparent 58%),
    linear-gradient(25deg, transparent 42%, rgba(255,225,151,.38) 50%, transparent 56%);
  transform: translateX(-70%) rotate(-8deg);
  animation: v238-card-slash .72s 1.62s ease-out both;
}

.battle-screen.battle-visual-upgraded .v238-card-impact::after {
  background: radial-gradient(circle, rgba(255,255,255,.4), transparent 54%);
  mix-blend-mode: screen;
  animation: v238-card-flash .72s 1.58s ease-out both;
}

.battle-screen.battle-visual-upgraded .v238-card-impact strong,
.battle-screen.battle-visual-upgraded .v238-card-impact span {
  position: relative;
  z-index: 3;
}

.battle-screen.battle-visual-upgraded .v238-card-impact strong {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 1000;
  line-height: .95;
  letter-spacing: -.05em;
  text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 16px currentColor;
}

.battle-screen.battle-visual-upgraded .v238-card-impact span {
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.34);
  font-size: 9px;
  font-weight: 900;
}

.battle-screen.battle-visual-upgraded .v238-card-impact-ring {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 4px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: v238-card-ring .62s 1.6s ease-out both;
}

.battle-screen.battle-visual-upgraded .v238-card-impact.critical {
  color: #ffe070;
  border-color: rgba(255,210,86,.92);
  background:
    radial-gradient(circle at 50% 46%, rgba(255,196,45,.42), transparent 32%),
    linear-gradient(150deg, rgba(156,23,14,.94), rgba(43,8,8,.96));
  box-shadow: inset 0 0 30px rgba(255,84,38,.45), 0 0 26px rgba(255,53,32,.76);
}

.battle-screen.battle-visual-upgraded .v238-card-impact.scheme {
  color: #d4e2ff;
  border-color: rgba(139,175,255,.9);
  background:
    radial-gradient(circle at 50% 44%, rgba(107,143,255,.35), transparent 34%),
    linear-gradient(150deg, rgba(35,56,135,.94), rgba(13,19,54,.97));
  box-shadow: inset 0 0 30px rgba(99,132,255,.4), 0 0 25px rgba(89,128,255,.66);
}

.battle-screen.battle-visual-upgraded .v238-card-impact.fire {
  color: #ffe19a;
  border-color: rgba(255,157,67,.94);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,206,78,.6), transparent 38%),
    linear-gradient(150deg, rgba(171,55,12,.96), rgba(52,13,8,.98));
  box-shadow: inset 0 -24px 36px rgba(255,87,20,.42), 0 0 28px rgba(255,90,22,.7);
}

.battle-screen.battle-visual-upgraded .fighter.v238-feedback-critical .fighter-card-visual {
  animation: visual-card-swap .3s cubic-bezier(.2,.8,.2,1) both, v238-card-critical-pulse .46s 1.53s ease-out both;
}

.battle-screen.battle-visual-upgraded .fighter.v238-feedback-scheme .fighter-card-visual,
.battle-screen.battle-visual-upgraded .fighter.v238-feedback-fire .fighter-card-visual {
  animation: visual-card-swap .3s cubic-bezier(.2,.8,.2,1) both, v238-card-scheme-pulse .5s 1.53s ease-out both;
}

.battle-screen.battle-visual-upgraded.visual-speed-2 .v238-card-impact {
  animation-delay: .78s;
  animation-duration: .64s;
}

.battle-screen.battle-visual-upgraded.visual-speed-2 .v238-card-impact::before {
  animation-delay: .82s;
  animation-duration: .38s;
}

.battle-screen.battle-visual-upgraded.visual-speed-2 .v238-card-impact::after,
.battle-screen.battle-visual-upgraded.visual-speed-2 .v238-card-impact-ring {
  animation-delay: .8s;
  animation-duration: .34s;
}

.battle-screen.battle-visual-upgraded.visual-speed-2 .fighter.v238-feedback-critical .fighter-card-visual,
.battle-screen.battle-visual-upgraded.visual-speed-2 .fighter.v238-feedback-scheme .fighter-card-visual,
.battle-screen.battle-visual-upgraded.visual-speed-2 .fighter.v238-feedback-fire .fighter-card-visual {
  animation-delay: 0s, .77s;
}

@keyframes v238-card-impact-in {
  0% { opacity: 0; transform: scale(.7); }
  12% { opacity: 1; transform: scale(1.07); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}

@keyframes v238-card-slash {
  0% { opacity: 0; transform: translateX(-70%) rotate(-8deg); }
  22% { opacity: .9; }
  100% { opacity: 0; transform: translateX(72%) rotate(-8deg); }
}

@keyframes v238-card-flash {
  0%, 100% { opacity: 0; transform: scale(.4); }
  18% { opacity: .9; transform: scale(1.05); }
}

@keyframes v238-card-ring {
  0% { opacity: 1; transform: scale(.2); }
  100% { opacity: 0; transform: scale(4.4); }
}

@keyframes v238-card-critical-pulse {
  0%, 100% { transform: translate(0) scale(1); }
  22% { transform: translate(-5px, 1px) scale(1.025); }
  42% { transform: translate(5px, -2px) scale(1.035); }
  64% { transform: translate(-2px, 1px) scale(1.02); }
}

@keyframes v238-card-scheme-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  35% { transform: scale(1.035); filter: brightness(1.25) saturate(1.3); }
}

@media (max-width: 760px) {
  .battle-screen.battle-visual-upgraded .v238-card-impact {
    inset: 5px;
  }

  .battle-screen.battle-visual-upgraded .v238-card-impact strong {
    font-size: clamp(21px, 7vw, 30px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-screen.battle-visual-upgraded .v238-card-impact,
  .battle-screen.battle-visual-upgraded .v238-card-impact::before,
  .battle-screen.battle-visual-upgraded .v238-card-impact::after,
  .battle-screen.battle-visual-upgraded .v238-card-impact-ring,
  .battle-screen.battle-visual-upgraded .fighter.v238-feedback-critical .fighter-card-visual,
  .battle-screen.battle-visual-upgraded .fighter.v238-feedback-scheme .fighter-card-visual,
  .battle-screen.battle-visual-upgraded .fighter.v238-feedback-fire .fighter-card-visual {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}