.combat-area{
  position: relative;
  margin-bottom: 15px;
}

.damage-layer{
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
}

.damage-number{
  position: absolute;
  font-weight: bold;
  font-size: 28px;
  pointer-events: none;
  animation: floatUp 1s ease-out forwards;
  opacity: 1;
}

.damage-player{
  color: #e74c3c;
}

.damage-crit{
  color: gold;
  font-size: 38px;
  text-shadow: 0 0 6px #f1c40f;
}

@keyframes floatUp{
  0%{ transform: translate(-50%, 0); opacity: 1; }
  100%{ transform: translate(-50%, -40px); opacity: 0; }
}

.hit{
  animation: hitFlash .3s;
}

@keyframes hitFlash{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(2); }
  100%{ filter: brightness(1); }
}

.avatar{
  width: 256px;
  height: 256px;
  margin: 0 auto 10px;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.monster-combat,
.player-combat{
  text-align: center;
}

.avatar.hit img{
  animation: avatarHit .3s;
}

@keyframes avatarHit{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

.avatar.dodge img{
  animation: avatarDodge .4s;
}

@keyframes avatarDodge{
  0%{ transform: translateX(0); opacity: 1; }
  50%{ transform: translateX(20px); opacity: .5; }
  100%{ transform: translateX(0); opacity: 1; }
}

.monster-dead{
  animation: monsterDeath .8s ease forwards;
}

@keyframes monsterDeath{
  0%{ opacity: 1; transform: translateY(0) scale(1); }
  100%{ opacity: 0; transform: translateY(20px) scale(.9); }
}

.monster-dead .avatar{
  animation: avatarDeath .8s forwards;
}

@keyframes avatarDeath{
  to{ opacity: 0; transform: translateY(20px) scale(.9); }
}

.battle-layout{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin: 20px 0;
}

.battle-layout .side{
  width: 50%;
}

.battle-layout .left{
  text-align: left;
}

.battle-layout .right{
  text-align: right;
}

.battle-layout .combat-area{
  text-align: center;
}

.left .avatar{
  margin-left: auto;
}

.right .avatar{
  margin-right: auto;
}

.monster-avatar.boss{
  width: 256px;
  height: 256px;
}

.monster-avatar.boss img{
  transform: scale(1.1);
}

.monster-avatar.elite{
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.8);
  border-radius: 50%;
}

.monster-avatar.elite img{
  transform: scale(1.1);
}

#game-ui.death-mode h3,
#game-ui.death-mode .battle-layout{
  display: none !important;
}