/* v0.0.34: wspólna linia podłoża dla wszystkich grafik bitewnych. */
#battle-view .battle-stage {
  --contact-line: 62%;
  position: absolute;
  z-index: 3;
  bottom: clamp(105px, 12vh, 145px);
  width: min(36vw, 620px);
  height: min(61vh, 660px);
  pointer-events: none;
}

#battle-view .player-stage { left: 5%; }
#battle-view .enemy-stage { right: 5%; }

#battle-view .battle-utility .secondary {
  width: auto;
  min-width: 116px;
  font-size: .92rem;
}

#battle-view .battle-stage .combatant,
#battle-view .battle-stage .player-combatant,
#battle-view .battle-stage .enemy-combatant {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 7%;
  bottom: auto;
  left: 7%;
  width: auto;
  height: var(--contact-line);
}

#battle-view .battle-stage .monster-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}

#battle-view .battle-stage .monster-art .creature-sprite {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
}

#battle-view .battle-stump-platform {
  position: absolute;
  z-index: 2;
  top: var(--contact-line);
  left: 50%;
  display: block;
  width: 100%;
  height: auto;
  transform: translate(-50%, -24%);
  filter: drop-shadow(0 20px 17px #000b);
}

/* Platforma nie uczestniczy w animacji — rusza się wyłącznie combatant. */
#battle-view .battle-stage .combatant.attacking.player-combatant {
  transform: translateX(55px) scale(1.06);
}

#battle-view .battle-stage .combatant.attacking.enemy-combatant {
  transform: translateX(-55px) scale(1.06);
}

@media (max-width: 720px) {
  #battle-view .battle-utility .secondary {
    min-width: 96px;
    font-size: .75rem;
  }

  #battle-view .battle-stage {
    --contact-line: 64%;
    bottom: clamp(145px, 18vh, 190px);
    width: 49vw;
    height: 55vh;
  }

  #battle-view .player-stage { left: -1%; }
  #battle-view .enemy-stage { right: -1%; }

  #battle-view .battle-stage .combatant,
  #battle-view .battle-stage .player-combatant,
  #battle-view .battle-stage .enemy-combatant {
    right: 4%;
    left: 4%;
  }

  #battle-view .battle-stage .combatant.attacking.player-combatant {
    transform: translateX(24px) scale(1.04);
  }

  #battle-view .battle-stage .combatant.attacking.enemy-combatant {
    transform: translateX(-24px) scale(1.04);
  }
}

@media (max-height: 650px) and (min-width: 721px) {
  #battle-view .battle-stage {
    bottom: 78px;
    height: 64vh;
  }
}