/* All cast, flight, impact sprites and battle messages are rendered by PixiJS. */
.gmBattleGridPixiCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

/* Side avatars belong to the complete action sequence, including async gaps. */
.gmBattleGrid.gmBattleGridSideCombatantsVisible :is(.gmBattleGridSideCreatureL, .gmBattleGridSideCreatureR) {
    display: flex;
}

.gmBattleGrid.gmBattleGridSideCombatantsVisible :is(.gmBattleGridAvatarShowL, .gmBattleGridAvatarShowR, .gmBattleGridAvatarHideL, .gmBattleGridAvatarHideR) {
    animation: none;
    opacity: 1;
    transform: none;
}

.gmBattleGrid.gmBattleGridSideCombatantsEntering .gmBattleGridAvatarShowL {
    animation: gmAvatarShowFromLeft calc(var(--gmBattlePixiSideShowDuration) * 1ms)
        var(--gmBattlePixiSideShowTiming) calc(var(--gmBattlePixiSideShowDelay) * 1ms) both;
}

.gmBattleGrid.gmBattleGridSideCombatantsEntering .gmBattleGridAvatarShowR {
    animation: gmAvatarShowFromRight calc(var(--gmBattlePixiSideShowDuration) * 1ms)
        var(--gmBattlePixiSideShowTiming) calc(var(--gmBattlePixiSideShowDelay) * 1ms) both;
}

.gmBattleGrid.gmBattleGridSideCombatantsLeaving .gmBattleGridAvatarHideL {
    animation: gmAvatarHideToLeft calc(var(--gmBattlePixiSideHideDuration) * 1ms)
        var(--gmBattlePixiSideHideTiming) calc(var(--gmBattlePixiSideHideDelay) * 1ms) both;
}

.gmBattleGrid.gmBattleGridSideCombatantsLeaving .gmBattleGridAvatarHideR {
    animation: gmAvatarHideToRight calc(var(--gmBattlePixiSideHideDuration) * 1ms)
        var(--gmBattlePixiSideHideTiming) calc(var(--gmBattlePixiSideHideDelay) * 1ms) both;
}