html,
body {
  margin: 0;
  padding: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: transparent;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #fff4d6;
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.arena {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage {
  position: absolute;
  inset: 24px;
  border-radius: 34px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px) scale(0.982);
  transition: opacity 260ms ease, transform 260ms ease;
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 190, 80, 0.28), transparent 42%),
    radial-gradient(circle at 16% 36%, rgba(36, 160, 255, 0.20), transparent 30%),
    radial-gradient(circle at 84% 36%, rgba(255, 85, 24, 0.20), transparent 30%),
    linear-gradient(135deg, rgba(6, 11, 18, 0.88), rgba(34, 19, 8, 0.92));
  border: 2px solid rgba(255, 202, 102, 0.46);
  box-shadow:
    0 0 38px rgba(255, 180, 66, 0.22),
    inset 0 0 42px rgba(255, 217, 134, 0.08);
}

.arena.show .stage {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bg-embers,
.bg-runes,
.screen-flash,
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-embers {
  background-image:
    radial-gradient(circle, rgba(255, 205, 89, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(95, 201, 255, 0.65) 0 1px, transparent 3px),
    radial-gradient(circle, rgba(255, 88, 32, 0.68) 0 1px, transparent 3px);
  background-size: 190px 170px, 260px 240px, 230px 210px;
  background-position: 10px 20px, 80px 60px, -20px 40px;
  opacity: 0.42;
  animation: emberDrift 8s linear infinite;
}

.bg-runes {
  left: 260px;
  right: 260px;
  top: 102px;
  height: 360px;
  opacity: 0.24;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 207, 104, 0.22) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 86px, #000 88px 95px, transparent 98px);
          mask: radial-gradient(circle, transparent 0 86px, #000 88px 95px, transparent 98px);
  animation: runeSpin 16s linear infinite;
}

@keyframes emberDrift {
  from { background-position: 10px 20px, 80px 60px, -20px 40px; }
  to { background-position: 210px -150px, 0 -180px, 140px -210px; }
}

@keyframes runeSpin {
  to { transform: rotate(360deg); }
}

.topbar {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 24px;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 20;
}

.top-kicker {
  justify-self: start;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 5px;
  color: rgba(255, 226, 164, 0.78);
}

.top-title {
  font-size: 52px;
  font-weight: 1000;
  letter-spacing: 3px;
  color: #ffe49d;
  text-shadow:
    0 0 18px rgba(255, 211, 105, 0.75),
    0 4px 0 rgba(60, 28, 8, 0.8);
}

.round-pill {
  justify-self: end;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 950;
  color: #fff7dc;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 220, 144, 0.35);
  box-shadow: inset 0 0 22px rgba(255, 216, 126, 0.08);
}

.fighter-panel {
  position: absolute;
  top: 112px;
  width: 438px;
  height: 238px;
  z-index: 15;
  border-radius: 28px;
  padding: 18px 22px;
  background:
    linear-gradient(130deg, rgba(4, 14, 27, 0.80), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 223, 151, 0.24);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.04);
}

.fighter-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(79, 202, 255, 0.64), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  opacity: 0.8;
}

.fighter-panel-b::before {
  background:
    linear-gradient(270deg, rgba(255, 97, 45, 0.72), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
}

.fighter-panel-a {
  left: 44px;
}

.fighter-panel-b {
  right: 44px;
  background:
    linear-gradient(230deg, rgba(44, 13, 4, 0.80), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.24);
}

.portrait-ring {
  position: absolute;
  top: 18px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 240, 184, 0.36);
  box-shadow:
    0 0 22px rgba(255, 203, 92, 0.18),
    inset 0 0 26px rgba(255, 255, 255, 0.07);
}

.portrait-blue {
  left: 18px;
  background: radial-gradient(circle, rgba(73, 198, 255, 0.20), rgba(0, 0, 0, 0.42));
}

.portrait-red {
  right: 18px;
  background: radial-gradient(circle, rgba(255, 96, 44, 0.20), rgba(0, 0, 0, 0.42));
}

.portrait {
  font-size: 54px;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}

.level {
  position: absolute;
  bottom: -12px;
  min-width: 44px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 1000;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 226, 154, 0.48);
  color: #ffe49d;
}

.fighter-text {
  position: absolute;
  top: 26px;
  left: 148px;
  right: 22px;
}

.fighter-panel-b .fighter-text {
  left: 22px;
  right: 148px;
  text-align: right;
}

.name {
  font-size: 31px;
  line-height: 1.05;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.68);
}

.subtitle {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 2px;
  color: #63d7ff;
}

.fighter-panel-b .subtitle {
  color: #ff9a4b;
}

.bars {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 42px;
}

.bar-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  color: rgba(255, 241, 207, 0.78);
}

.bar-line strong {
  font-size: 18px;
  color: #fff8e6;
}

.energy-line {
  margin-top: 12px;
}

.hp-wrap,
.energy-wrap {
  width: 100%;
  height: 19px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.energy-wrap {
  height: 13px;
}

.hp-bar,
.energy-bar {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transition: width 560ms cubic-bezier(0.2, 1, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.hp-bar::after,
.energy-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: barShine 1.8s linear infinite;
}

.hp-a {
  background: linear-gradient(90deg, #34e884, #bfff42, #ffce45);
  box-shadow: 0 0 18px rgba(51, 232, 132, 0.42);
}

.hp-b {
  background: linear-gradient(90deg, #ff3434, #ff8b2f, #ffe15a);
  box-shadow: 0 0 18px rgba(255, 91, 45, 0.42);
}

.energy-a {
  background: linear-gradient(90deg, #2acaff, #7df4ff);
}

.energy-b {
  background: linear-gradient(90deg, #ff8c2a, #ffd85a);
}

@keyframes barShine {
  to { transform: translateX(100%); }
}

.badges {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 13px;
  display: flex;
  gap: 7px;
  flex-wrap: nowrap;
}

.badges-right {
  justify-content: flex-end;
}

.badge,
.badges span {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  background: rgba(255, 255, 255, 0.08);
  color: #ffe9a9;
  border: 1px solid rgba(255, 230, 160, 0.20);
}

.badge.block { color: #8de6ff; }
.badge.dodge { color: #8affc8; }
.badge.danger { color: #ff9784; }

.battlefield {
  position: absolute;
  left: 245px;
  right: 245px;
  top: 250px;
  height: 220px;
  z-index: 10;
}

.arena-floor {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 620px;
  height: 130px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255, 196, 90, 0.20), rgba(72, 42, 14, 0.25) 55%, transparent 72%);
  filter: blur(1px);
  animation: floorPulse 3.2s ease-in-out infinite;
}

@keyframes floorPulse {
  50% { transform: translateX(-50%) scale(1.05); opacity: 0.8; }
}

.fighter-model {
  position: absolute;
  bottom: 18px;
  width: 150px;
  height: 154px;
  z-index: 18;
  transform-origin: 50% 100%;
}

.model-a {
  left: 70px;
}

.model-b {
  right: 70px;
}

.shadow {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 25px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  filter: blur(3px);
}

.body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 42% 42% 36% 36%;
  border: 2px solid rgba(255, 235, 170, 0.36);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.20));
  box-shadow:
    0 0 24px rgba(255, 219, 128, 0.18),
    inset 0 0 22px rgba(255, 255, 255, 0.06);
  animation: idleBreath 1.65s ease-in-out infinite;
}

.body-a {
  background-color: rgba(24, 149, 255, 0.20);
}

.body-b {
  background-color: rgba(255, 74, 28, 0.22);
}

.head {
  font-size: 58px;
}

.weapon {
  position: absolute;
  top: 18px;
  font-size: 38px;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.22));
}

.body-a .weapon {
  right: -28px;
  transform: rotate(35deg);
}

.body-b .weapon {
  left: -28px;
  transform: rotate(-35deg) scaleX(-1);
}

@keyframes idleBreath {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-4px) scaleY(1.025); }
}

.vs-core {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 154px;
  height: 154px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  z-index: 21;
}

.vs-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 209, 101, 0.16), rgba(0, 0, 0, 0.42)),
    conic-gradient(from 0deg, rgba(68, 198, 255, 0.9), rgba(255, 218, 108, 0.85), rgba(255, 78, 24, 0.9), rgba(68, 198, 255, 0.9));
  border: 3px solid rgba(255, 226, 154, 0.62);
  box-shadow:
    0 0 36px rgba(255, 194, 83, 0.34),
    inset 0 0 28px rgba(0, 0, 0, 0.38);
  animation: vsRotate 5.5s linear infinite;
}

.vs-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 240, 194, 0.22);
}

.vs-text {
  position: relative;
  z-index: 2;
  font-size: 55px;
  line-height: 1;
  font-weight: 1000;
  font-family: Georgia, serif;
  color: #ffe5a5;
  text-shadow:
    0 0 18px rgba(255, 197, 88, 0.85),
    0 4px 0 rgba(58, 25, 4, 0.95);
}

@keyframes vsRotate {
  to { transform: rotate(360deg); }
}

.vs-core.pulse {
  animation: vsPulse 750ms ease-out;
}

.vs-core.finish .vs-text {
  color: #caff9c;
}

.vs-core.challenge .vs-text {
  color: #fff0a5;
}

@keyframes vsPulse {
  0% { transform: translateX(-50%) scale(0.8); filter: brightness(1); }
  40% { transform: translateX(-50%) scale(1.22); filter: brightness(1.6); }
  100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
}

.center-info {
  position: absolute;
  left: 200px;
  right: 200px;
  bottom: 108px;
  z-index: 22;
  padding: 18px 22px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.44);
  border: 1px solid rgba(255, 226, 154, 0.30);
  box-shadow:
    0 0 26px rgba(0, 0, 0, 0.32),
    inset 0 0 18px rgba(255, 255, 255, 0.04);
}

.action-text {
  min-height: 38px;
  font-size: 27px;
  line-height: 1.16;
  font-weight: 1000;
  color: #ffe3a0;
  text-align: center;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.82);
}

.meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 950;
}

.meta span {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.combat-log {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 24px;
  height: 72px;
  z-index: 30;
  border-radius: 22px;
  border: 1px solid rgba(255, 210, 115, 0.40);
  background: rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 20px rgba(255, 222, 142, 0.05);
  overflow: hidden;
}

.log-title {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  padding: 2px 18px 5px;
  border-radius: 0 0 14px 14px;
  background: rgba(255, 203, 93, 0.18);
  border: 1px solid rgba(255, 224, 155, 0.24);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: 2px;
  color: #ffe3a0;
}

.log-items {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 23px;
  bottom: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow: hidden;
}

.log-item {
  min-width: 215px;
  max-width: 245px;
  height: 39px;
  display: grid;
  grid-template-columns: 34px 58px 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  animation: logIn 280ms ease-out;
}

.log-item.crit {
  border-color: rgba(255, 211, 91, 0.42);
  background: rgba(255, 166, 39, 0.10);
}

.log-item.finish {
  border-color: rgba(138, 255, 170, 0.42);
  background: rgba(70, 255, 135, 0.10);
}

.log-item.muted {
  display: block;
  padding-top: 10px;
  color: rgba(255, 240, 206, 0.58);
}

.log-icon {
  font-size: 22px;
  text-align: center;
}

.log-time {
  font-size: 12px;
  font-weight: 850;
  opacity: 0.68;
}

.log-text {
  font-size: 13px;
  line-height: 1.05;
  font-weight: 900;
  color: #fff2cf;
  overflow: hidden;
}

@keyframes logIn {
  from { transform: translateX(-18px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fx-layer {
  z-index: 50;
  overflow: hidden;
}

.screen-flash {
  z-index: 48;
  opacity: 0;
}

.screen-flash.run {
  animation: flashRun 640ms ease-out forwards;
}

.flash-red {
  background: radial-gradient(circle at 50% 48%, rgba(255, 64, 28, 0.32), rgba(255, 64, 28, 0.08), transparent 66%);
}

.flash-gold {
  background: radial-gradient(circle at 50% 48%, rgba(255, 225, 115, 0.38), rgba(255, 163, 47, 0.10), transparent 66%);
}

.flash-blue {
  background: radial-gradient(circle at 50% 48%, rgba(98, 216, 255, 0.30), rgba(67, 139, 255, 0.08), transparent 66%);
}

@keyframes flashRun {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

.stage.shake-light {
  animation: shakeLight 360ms ease;
}

.stage.shake-heavy {
  animation: shakeHeavy 520ms ease;
}

@keyframes shakeLight {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 2px); }
  50% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, 1px); }
}

@keyframes shakeHeavy {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-12px, 5px); }
  32% { transform: translate(14px, -5px); }
  48% { transform: translate(-10px, 4px); }
  66% { transform: translate(8px, -3px); }
  82% { transform: translate(-4px, 2px); }
}

.model-a.attack-ltr {
  animation: attackLtr 700ms cubic-bezier(0.2, 1.05, 0.35, 1);
}

.model-b.attack-rtl {
  animation: attackRtl 700ms cubic-bezier(0.2, 1.05, 0.35, 1);
}

@keyframes attackLtr {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(255px, -12px) scale(1.08) rotate(4deg); }
  50% { transform: translate(310px, -8px) scale(1.1) rotate(-5deg); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes attackRtl {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-255px, -12px) scale(1.08) rotate(-4deg); }
  50% { transform: translate(-310px, -8px) scale(1.1) rotate(5deg); }
  100% { transform: translate(0, 0) scale(1); }
}

.fighter-model.hit {
  animation: hitRecoil 620ms ease-out;
  filter: brightness(1.55) saturate(1.35);
}

@keyframes hitRecoil {
  0% { transform: translateX(0); }
  16% { transform: translateX(24px) rotate(4deg); }
  32% { transform: translateX(-16px) rotate(-3deg); }
  55% { transform: translateX(8px) rotate(1deg); }
  100% { transform: translateX(0); }
}

.fighter-model.guard {
  animation: guardBrace 760ms ease-out;
}

@keyframes guardBrace {
  0% { transform: scale(1); filter: brightness(1); }
  24% { transform: scale(1.08); filter: brightness(1.45); }
  100% { transform: scale(1); filter: brightness(1); }
}

.fighter-model.dodge-left {
  animation: dodgeLeft 720ms ease-out;
}

.fighter-model.dodge-right {
  animation: dodgeRight 720ms ease-out;
}

@keyframes dodgeLeft {
  0% { transform: translateX(0); opacity: 1; }
  32% { transform: translateX(-95px) translateY(-8px); opacity: 0.55; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes dodgeRight {
  0% { transform: translateX(0); opacity: 1; }
  32% { transform: translateX(95px) translateY(-8px); opacity: 0.55; }
  100% { transform: translateX(0); opacity: 1; }
}

.fighter-model.ready-bounce {
  animation: readyBounce 900ms ease-out;
}

@keyframes readyBounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-28px) scale(1.08); }
  65% { transform: translateY(0) scale(0.96); }
}

.fighter-model.victory {
  animation: victory 1.5s ease-in-out infinite;
  filter: brightness(1.4);
}

.fighter-model.defeated {
  animation: defeated 900ms ease-out forwards;
  filter: grayscale(0.7) brightness(0.72);
}

@keyframes victory {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.08); }
}

@keyframes defeated {
  to { transform: rotate(14deg) translateY(34px); opacity: 0.55; }
}

.slash {
  position: absolute;
  z-index: 70;
  width: 410px;
  height: 24px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.98), rgba(255, 116, 57, 0.9), transparent);
  box-shadow: 0 0 32px rgba(255, 127, 58, 0.65);
  transform-origin: center;
  animation: slashRun 620ms ease-out forwards;
}

.slash.crit {
  height: 34px;
  background:
    linear-gradient(90deg, transparent, #fffbd2, #ffe04c, #ff862e, transparent);
  box-shadow:
    0 0 36px rgba(255, 220, 75, 0.85),
    0 0 80px rgba(255, 120, 42, 0.40);
}

.slash-ltr {
  transform: rotate(var(--rot));
}

.slash-rtl {
  transform: rotate(var(--rot));
}

@keyframes slashRun {
  0% { opacity: 0; transform: scaleX(0.28) rotate(var(--rot)); filter: blur(2px); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.32) rotate(var(--rot)); filter: blur(0); }
}

.float-text {
  position: absolute;
  z-index: 90;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font-weight: 1000;
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.86),
    0 4px 0 rgba(0, 0, 0, 0.55);
  animation: floatText 1450ms cubic-bezier(0.15, 1, 0.28, 1) forwards;
}

.float-text.red { color: #ff7666; }
.float-text.gold { color: #ffe873; }
.float-text.blue { color: #8ee5ff; }
.float-text.green { color: #8cffbf; }
.float-text.xl { font-size: 42px; }
.float-text.xxl { font-size: 58px; }

@keyframes floatText {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(0.72); }
  16% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -95px) scale(1.08); }
}

.particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  margin-top: -3px;
  z-index: 62;
  border-radius: 50%;
  opacity: 0;
  animation: particleFly 1100ms ease-out forwards;
}

.particle.gold {
  background: #ffe676;
  box-shadow: 0 0 10px rgba(255, 223, 93, 0.9);
}

.particle.red {
  background: #ff6038;
  box-shadow: 0 0 10px rgba(255, 96, 56, 0.9);
}

.particle.blue {
  background: #77dbff;
  box-shadow: 0 0 10px rgba(119, 219, 255, 0.9);
}

@keyframes particleFly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.1); }
}

.streak {
  position: absolute;
  z-index: 64;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  opacity: 0;
  animation: streakFly 820ms ease-out forwards;
}

.streak.gold {
  background: linear-gradient(90deg, transparent, #ffe980, transparent);
  box-shadow: 0 0 14px rgba(255, 232, 128, 0.8);
}

.streak.red {
  background: linear-gradient(90deg, transparent, #ff724d, transparent);
  box-shadow: 0 0 14px rgba(255, 114, 77, 0.8);
}

.streak.blue {
  background: linear-gradient(90deg, transparent, #90e7ff, transparent);
  box-shadow: 0 0 14px rgba(144, 231, 255, 0.8);
}

@keyframes streakFly {
  0% { opacity: 0; transform: translate(0, 0) rotate(-10deg) scaleX(0.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-10deg) scaleX(1.2); }
}

.shield-fx {
  position: absolute;
  z-index: 88;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
  font-size: 72px;
  border-radius: 50%;
  color: #8ee5ff;
  border: 6px solid rgba(139, 227, 255, 0.88);
  box-shadow:
    0 0 30px rgba(121, 221, 255, 0.58),
    inset 0 0 28px rgba(121, 221, 255, 0.22);
  opacity: 0;
  animation: shieldPop 900ms ease-out forwards;
}

@keyframes shieldPop {
  0% { opacity: 0; transform: scale(0.35); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}

.shockwave {
  position: absolute;
  z-index: 58;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 5px solid rgba(255, 224, 111, 0.74);
  opacity: 0;
  animation: shockwave 850ms ease-out forwards;
}

.shockwave.red {
  border-color: rgba(255, 90, 50, 0.76);
}

.shockwave.blue {
  border-color: rgba(120, 221, 255, 0.76);
}

@keyframes shockwave {
  0% { opacity: 0; transform: scale(0.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}

.smoke-fx {
  position: absolute;
  z-index: 60;
  width: 70px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 220, 220, 0.42), rgba(120, 120, 120, 0.13), transparent 70%);
  filter: blur(3px);
  opacity: 0;
  animation: smokeFly 1250ms ease-out forwards;
}

@keyframes smokeFly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  20% { opacity: 0.86; }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(2.2); }
}

.sand-dot {
  position: absolute;
  z-index: 63;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 214, 116, 0.88);
  box-shadow: 0 0 10px rgba(255, 205, 90, 0.72);
  opacity: 0;
  animation: sandFly 1400ms ease-out forwards;
}

@keyframes sandFly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.1); }
}

.state-crit .center-info {
  box-shadow:
    0 0 38px rgba(255, 224, 91, 0.24),
    inset 0 0 24px rgba(255, 224, 91, 0.07);
}

.state-finish .stage {
  border-color: rgba(145, 255, 173, 0.55);
}

.state-cancel .stage {
  border-color: rgba(255, 90, 90, 0.55);
}

.debug {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 999;
  max-width: 760px;
  max-height: 240px;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: Consolas, monospace;
  font-size: 15px;
  line-height: 1.25;
  color: #eaffff;
  background: rgba(0, 0, 0, 0.74);
  border: 1px solid rgba(108, 255, 255, 0.55);
  border-radius: 12px;
  padding: 12px;
  pointer-events: none;
}


.avatar-portrait {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.28));
  box-shadow: inset 0 0 16px rgba(255,255,255,0.08);
}

.avatar-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%, rgba(0,0,0,0.14));
  pointer-events: none;
}

.avatar-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 120px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 235, 170, 0.36);
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.18), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20));
  box-shadow: 0 0 24px rgba(255, 219, 128, 0.18), inset 0 0 22px rgba(255,255,255,0.06);
  animation: idleBreath 1.65s ease-in-out infinite;
  overflow: visible;
}

.body-a {
  background-color: rgba(24, 149, 255, 0.20);
}

.body-b {
  background-color: rgba(255, 74, 28, 0.22);
}

.avatar-shell {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid rgba(255,255,255,0.78);
  box-shadow: 0 0 26px rgba(255, 218, 110, 0.28), 0 0 0 5px rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.35);
}

.avatar-shell-a {
  box-shadow: 0 0 28px rgba(106, 214, 255, 0.42), 0 0 0 5px rgba(255,255,255,0.06);
}

.avatar-shell-b {
  box-shadow: 0 0 28px rgba(255, 126, 84, 0.42), 0 0 0 5px rgba(255,255,255,0.06);
}

.avatar-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.0), rgba(255,224,124,0.75), rgba(255,255,255,0.0));
  animation: avatarSpin 2.8s linear infinite;
  opacity: 0.9;
}

.avatar-shell::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 50%, rgba(0,0,0,0.14));
  pointer-events: none;
}

@keyframes avatarSpin {
  to { transform: rotate(360deg); }
}

.battle-avatar {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  z-index: 2;
}

.battle-tag {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,225,147,0.30);
  font-size: 14px;
  font-weight: 950;
  color: #fff1c5;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.body .head, .body .weapon {
  display: none !important;
}

/* === Cinematic sprite overlay extension === */
.stage{background:radial-gradient(circle at 50% 108%,rgba(255,203,95,.28),transparent 44%),radial-gradient(circle at 23% 48%,rgba(56,174,255,.22),transparent 34%),radial-gradient(circle at 77% 48%,rgba(255,53,44,.18),transparent 34%),linear-gradient(135deg,rgba(5,8,13,.90),rgba(25,17,17,.94));}.battlefield{left:92px!important;right:92px!important;top:228px!important;height:322px!important;z-index:10}.arena-floor{width:880px!important;height:160px!important;bottom:-4px!important;background:radial-gradient(ellipse at center,rgba(255,203,95,.21),rgba(72,42,14,.24) 46%,transparent 74%),linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}.stage-glow{position:absolute;bottom:24px;width:340px;height:120px;border-radius:50%;filter:blur(18px);opacity:.62;pointer-events:none}.stage-glow-blue{left:52px;background:rgba(55,178,255,.28)}.stage-glow-red{right:52px;background:rgba(255,55,47,.24)}.champion-model{width:336px!important;height:336px!important;bottom:-8px!important;transform-origin:50% 84%}.model-a{left:44px!important}.model-b{right:44px!important}.champion-sprite{position:absolute;left:0;bottom:0;width:336px;height:336px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,220,150,.17)) drop-shadow(0 24px 22px rgba(0,0,0,.55))}.model-a .champion-sprite{filter:drop-shadow(0 0 24px rgba(83,201,255,.26)) drop-shadow(0 24px 22px rgba(0,0,0,.58))}.model-b .champion-sprite{transform:scaleX(-1);filter:drop-shadow(0 0 24px rgba(255,63,58,.28)) drop-shadow(0 24px 22px rgba(0,0,0,.58))}.champion-model .shadow{left:48px!important;right:48px!important;bottom:18px!important;height:34px!important;background:rgba(0,0,0,.56)!important;filter:blur(8px)!important}.champion-model .battle-tag{position:absolute;left:32px;right:32px;bottom:10px;text-align:center;padding:5px 12px;border-radius:999px;color:#fff5d0;background:rgba(0,0,0,.50);border:1px solid rgba(255,230,160,.22);font-size:17px;font-weight:1000;text-shadow:0 2px 8px #000;z-index:4}.avatar-portrait img{width:96px;height:96px;object-fit:cover;border-radius:50%;display:block}.center-info{bottom:98px!important;left:228px!important;right:228px!important}.combat-log{bottom:18px!important}.model-a.attack-ltr{animation:attackLtrSprite 760ms cubic-bezier(.18,1,.35,1)}.model-b.attack-rtl{animation:attackRtlSprite 760ms cubic-bezier(.18,1,.35,1)}@keyframes attackLtrSprite{0%{transform:translate(0,0) scale(1)}36%{transform:translate(245px,-10px) scale(1.055) rotate(2deg)}54%{transform:translate(308px,-4px) scale(1.07) rotate(-3deg)}100%{transform:translate(0,0) scale(1)}}@keyframes attackRtlSprite{0%{transform:translate(0,0) scale(1)}36%{transform:translate(-245px,-10px) scale(1.055) rotate(-2deg)}54%{transform:translate(-308px,-4px) scale(1.07) rotate(3deg)}100%{transform:translate(0,0) scale(1)}}.fighter-model.hit{animation:hitRecoilSprite 620ms ease-out}@keyframes hitRecoilSprite{0%{transform:translateX(0) scale(1)}18%{transform:translateX(34px) rotate(3deg) scale(1.03);filter:brightness(1.55) saturate(1.3)}40%{transform:translateX(-18px) rotate(-2deg)}100%{transform:translateX(0) scale(1)}}.fighter-model.guard{animation:guardBraceSprite 760ms ease-out}@keyframes guardBraceSprite{0%{transform:scale(1)}24%{transform:scale(1.07);filter:brightness(1.55)}100%{transform:scale(1)}}.fighter-model.victory{animation:victorySprite 1.75s ease-in-out infinite}@keyframes victorySprite{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.04)}}.fighter-model.defeated{animation:defeatedSprite 900ms ease-out forwards;filter:grayscale(.45) brightness(.78)}@keyframes defeatedSprite{to{transform:rotate(9deg) translateY(24px);opacity:.72}}.slash{height:18px!important}.slash.crit{height:30px!important}.debug{position:absolute;left:12px;top:12px;z-index:9999;max-width:760px;white-space:pre-wrap;background:rgba(0,0,0,.72);color:#dff;padding:10px 12px;border-radius:12px;font:13px Consolas,monospace}


/* === WebP-only sprite mode === */
.champion-sprite {
  pointer-events: none;
  user-select: none;
}
.champion-sprite.sprite-restart {
  animation: webpSpritePop 180ms ease-out;
}
@keyframes webpSpritePop {
  0% { filter: brightness(1.24) saturate(1.15); }
  100% { filter: inherit; }
}

/* === FIX V2: Bars no longer cover characters ===
   Compact top panels + lower battlefield + characters above center overlays.
*/
.fighter-panel {
  top: 70px !important;
  width: 390px !important;
  height: 160px !important;
  padding: 12px 16px !important;
  z-index: 26 !important;
  border-radius: 22px !important;
}

.fighter-panel-a {
  left: 36px !important;
}

.fighter-panel-b {
  right: 36px !important;
}

.portrait-ring {
  top: 12px !important;
  width: 78px !important;
  height: 78px !important;
  border-width: 2px !important;
}

.portrait-blue {
  left: 14px !important;
}

.portrait-red {
  right: 14px !important;
}

.avatar-portrait {
  width: 64px !important;
  height: 64px !important;
}

.avatar-portrait img {
  width: 64px !important;
  height: 64px !important;
}

.level {
  bottom: -10px !important;
  min-width: 34px !important;
  height: 26px !important;
  font-size: 15px !important;
  border-radius: 9px !important;
}

.fighter-text {
  top: 15px !important;
  left: 108px !important;
  right: 16px !important;
}

.fighter-panel-b .fighter-text {
  left: 16px !important;
  right: 108px !important;
}

.name {
  font-size: 23px !important;
  line-height: 1.02 !important;
}

.subtitle {
  margin-top: 3px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
}

.bars {
  left: 16px !important;
  right: 16px !important;
  bottom: 14px !important;
}

.bar-line {
  font-size: 11px !important;
}

.bar-line strong {
  font-size: 13px !important;
}

.energy-line {
  margin-top: 6px !important;
}

.hp-wrap {
  height: 12px !important;
  margin-top: 3px !important;
}

.energy-wrap {
  height: 8px !important;
  margin-top: 3px !important;
}

.badges {
  display: none !important;
}

/* Characters sit below the compact bars and render above middle UI while attacking. */
.battlefield {
  top: 258px !important;
  height: 320px !important;
  z-index: 31 !important;
}

.champion-model {
  width: 318px !important;
  height: 318px !important;
  bottom: -8px !important;
}

.champion-video,
.champion-sprite {
  width: 318px !important;
  height: 318px !important;
}

.model-a {
  left: 44px !important;
}

.model-b {
  right: 44px !important;
}

.champion-model .shadow {
  left: 48px !important;
  right: 48px !important;
  bottom: 16px !important;
  height: 32px !important;
}

.champion-model .battle-tag {
  bottom: 8px !important;
  font-size: 15px !important;
}

/* Middle text no longer blocks the fighters. */
.center-info {
  left: 405px !important;
  right: 405px !important;
  bottom: 92px !important;
  z-index: 18 !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
}

.action-text {
  min-height: 28px !important;
  font-size: 21px !important;
}

.meta {
  margin-top: 6px !important;
  font-size: 14px !important;
  gap: 8px !important;
}

.meta span {
  padding: 4px 9px !important;
}

.combat-log {
  z-index: 28 !important;
}

/* Keep the lunge distance matching the smaller character size. */
@keyframes attackLtrSprite {
  0% { transform: translate(0,0) scale(1); }
  36% { transform: translate(235px,-9px) scale(1.05) rotate(2deg); }
  54% { transform: translate(290px,-4px) scale(1.065) rotate(-3deg); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes attackRtlSprite {
  0% { transform: translate(0,0) scale(1); }
  36% { transform: translate(-235px,-9px) scale(1.05) rotate(-2deg); }
  54% { transform: translate(-290px,-4px) scale(1.065) rotate(3deg); }
  100% { transform: translate(0,0) scale(1); }
}


/* WebP debug fallback: zeigt nur mit ?debug=1, wenn eine Sprite-Datei nicht gefunden wird */
.sprite-missing {
  outline: 3px dashed rgba(255, 70, 70, 0.95);
  outline-offset: -8px;
}