#battle-screen {
  position: fixed; inset: 0; z-index: 150; overflow: auto;
  background:
    radial-gradient(900px 400px at 50% 0%, #22304a 0%, transparent 65%),
    linear-gradient(180deg, #0c1017, #05070b);
  padding: 16px;
}
.bt-wrap { max-width: 900px; margin: 0 auto; }

.bt-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bt-round { font-weight: 800; }

.bt-arena {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; padding: 26px 10px 18px; min-height: 220px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, #131a26, #0b0f16);
  overflow: hidden;
}
.bt-arena::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, #35455c, transparent);
}

.fighter { position: relative; width: 46%; text-align: center; }
.fighter .sprite {
  font-size: 62px; line-height: 1; display: inline-block;
  transition: transform .16s ease-out, filter .12s;
  filter: drop-shadow(0 6px 10px #0008);
}
.fighter .sprite img { width: 1em; height: 1em; object-fit: contain; }
.fighter.right .sprite { transform: scaleX(-1); }

.fighter.lunge-r .sprite { transform: translateX(30px) }
.fighter.lunge-l .sprite { transform: scaleX(-1) translateX(30px); }
.fighter.hurt .sprite { filter: brightness(2.2) saturate(.3) drop-shadow(0 0 8px #f87171); animation: shake .22s; }
.fighter.dead .sprite { filter: grayscale(1) brightness(.5); transform: rotate(90deg) translateY(10px); opacity: .6; }
.fighter.right.dead .sprite { transform: scaleX(-1) rotate(90deg) translateY(10px); }

@keyframes shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -7px; }
  75% { margin-left: 7px; }
}

.f-name { font-weight: 800; font-size: 14px; margin-top: 8px; }
.f-lv { font-size: 11.5px; color: var(--txt2); }
.hpbar { height: 12px; background: #2a1015; border: 1px solid #3c1c22; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.hpfill { height: 100%; background: linear-gradient(90deg, #ef4444, #f97316, #4ade80); background-size: 300% 100%; background-position: right; transition: width .22s ease-out; }
.hp-num { font-size: 11.5px; color: var(--txt2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.atb { height: 4px; background: #16202e; border-radius: 99px; margin-top: 3px; overflow: hidden; }

.pop {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  font-weight: 900; font-size: 22px; pointer-events: none; white-space: nowrap;
  animation: floatup 1s ease-out forwards; text-shadow: 0 2px 6px #000;
}
.pop.crit { font-size: 30px; color: var(--crit); }
.pop.miss { color: #7dd3fc; font-size: 18px; }
.pop.block { color: #cbd5e1; font-size: 18px; }
.pop.heal { color: var(--good); font-size: 19px; }
.pop.dmg { color: #fca5a5; }
.pop.counter { color: #d8b4fe; }
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); }
  20% { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

.bt-log {
  margin-top: 12px; height: 190px; overflow-y: auto; padding: 10px 12px;
  background: #0b0f16; border: 1px solid var(--line); border-radius: 12px;
  font-size: 13px; font-family: ui-monospace, 'SF Mono', monospace;
}
.bt-log div { padding: 1px 0; border-bottom: 1px dashed #171f2b; }
.bt-log .t-a { color: #93c5fd; }
.bt-log .t-b { color: #fca5a5; }
.bt-log .t-crit { color: var(--crit); font-weight: 700; }
.bt-log .t-miss { color: #7dd3fc; }
.bt-log .t-heal { color: var(--good); }
.bt-log .t-end { color: var(--acc); font-weight: 800; }
.bt-log .t-sys { color: var(--txt2); }

.bt-ctrl { display: flex; gap: 8px; margin-top: 10px; align-items: center; }

/* Kết quả */
.res-title { font-size: 26px; font-weight: 900; text-align: center; }
.res-title.win { color: var(--good); }
.res-title.lose { color: var(--bad); }
.res-lines { margin: 12px 0; }
.res-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #222b39; font-size: 13.5px; }
.res-line .g { font-weight: 800; font-variant-numeric: tabular-nums; }
.res-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 900; padding-top: 8px; }
.levelup { text-align: center; background: #241d09; border: 1px solid var(--acc); border-radius: 10px; padding: 10px; margin-top: 10px; color: var(--acc); font-weight: 700; }