.gmBattleGrid {
    grid-template-columns: 8px calc(var(--gmBattleGridAvAreaH) / 2) calc(var(--gmBattleGridAvAreaH) / 2) 1fr 1fr calc(var(--gmBattleGridAvAreaH) / 2) calc(var(--gmBattleGridAvAreaH) / 2) 8px;
    grid-template-rows: auto auto calc(var(--gmBattleGridQueueSize) + var(--gmBattleGridQueuePad)) var(--gmBattleGridQueueMar) 1fr 1fr auto auto auto auto;
    --gmBattleGridQueueSize: 64px;
    --gmBattleGridQueuePad:   8px;
    --gmBattleGridQueueGap:   8px;
    --gmBattleGridQueueMar:  56px;
    --gmBattleGridPadH:       8px;
    --gmBattleGridAvAreaH:    25%;
    --gmBattleGridAvWidth:    120;
    --gmBattleGridAvHeight:   120;
    --bgBattleGridClipPercent: 25;

    --gmBattleGridEffectPartRotate: 0;
    --gmBattleGridEffectPartScaleX: 1;
    --gmBattleGridEffectPartScaleY: 1;
}

.gmBattleGridDarkT { grid-row: 1 /  5; }
.gmBattleGridDarkB { grid-row: 8 / 11; }

.gmBattleGridBG            { grid-row:  1 / -1; }
.gmBattleGridEnemyName     { grid-row:  1 /  2; }
.gmBattleGridEnemyHealth   { grid-row:  2 /  3; }
.gmBattleGridQueue         { grid-row:  3 /  7; }
.gmBattleGridHitBar        { grid-row:  7 /  8; }
.gmBattleGridProfile       { grid-row:  8 / 10; }
.gmBattleGridProfileHealth { grid-row: 10 / 11; }
.gmBattleGridSideCreatureL,
.gmBattleGridSideCreatureR { grid-row:  5 /  7; }

.gmBattleGridSideCreatureL { grid-column: 2 / 4; }
.gmBattleGridSideCreatureR { grid-column: 6 / 8; }

:is(.gmBattleGridHitFromT, .gmBattleGridHitFromB) .gmBattleGridEffectWrap { grid-area: 6 / 1 / 9 / -1; }
:is(.gmBattleGridHitFromL, .gmBattleGridHitFromR) .gmBattleGridEffectWrap { grid-area: 5 / 3 / 7 / 7 ; }

.gmBattleGridAvatar,
.gmBattleGridAvatarL,
.gmBattleGridAvatarR { width: calc(var(--gmBattleGridAvWidth) * 1px); }

.gmBattleQueueWrap {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) calc(50% - (var(--gmBattleGridQueueSize) / 2)), rgba(0, 0, 0, 1) calc(50% + (var(--gmBattleGridQueueSize) / 2)), rgba(0, 0, 0, 0) 100%);
    mask-image:         linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) calc(50% - (var(--gmBattleGridQueueSize) / 2)), rgba(0, 0, 0, 1) calc(50% + (var(--gmBattleGridQueueSize) / 2)), rgba(0, 0, 0, 0) 100%);
}

.gmBattleQueue {
    padding-left:  50%;
    padding-right: 50%;
}

.gmBattleQueueItemShadowIn { box-shadow: inset 0 0 5px 3px rgba(0, 0, 0, 1); }

.gmBattleQueueItem,
.gmBattleQueueSep { height: var(--gmBattleGridQueueSize); }
.gmBattleQueueItemTarget { margin-bottom: var(--gmBattleGridQueuePad); }





/* BG */

.gmBattleGridPicBlur {
    transform: scale(1.03);
    filter: blur(5px);
}

.gmBattleGridBGWrap,
.gmBattleGridVsMove,
.gmBattleGridBGPresent {
    animation-fill-mode: forwards;
    animation-duration: calc(var(--gmBattleGridBGMoveDuration) * 1ms);
}

.gmBattleGridBGMoveR .gmBattleGridBGWrap { animation-name: gmPicShowLeft; }
.gmBattleGridBGMoveL .gmBattleGridBGWrap { animation-name: gmPicShowRight; }
.gmBattleGridBGMoveT .gmBattleGridBGWrap { animation-name: gmPicShowTop; }
.gmBattleGridBGMoveB .gmBattleGridBGWrap { animation-name: gmPicShowBottom; }

/*.gmBattleGrid:not(.gmBattleGridBGMoveR, .gmBattleGridBGMoveL, .gmBattleGridBGMoveT, .gmBattleGridBGMoveB, .gmBattleGridBGMoveVS) .gmBattleGridBGPast { display: none; }*/

.gmBattleGridBGMoveR .gmBattleGridBGPast { transform: translateX(100%); }
.gmBattleGridBGMoveL .gmBattleGridBGPast { transform: translateX(-100%); }
.gmBattleGridBGMoveT .gmBattleGridBGPast { transform: translateY(-100%); }
.gmBattleGridBGMoveB .gmBattleGridBGPast { transform: translateY(100%); }

.gmBattleGridBGMoveCoverR .gmBattleGridBGPresent { animation-name: gmPicShowZoomRight; }
.gmBattleGridBGMoveCoverL .gmBattleGridBGPresent { animation-name: gmPicShowZoomLeft; }
.gmBattleGridBGMoveCoverT .gmBattleGridBGPresent { animation-name: gmPicShowZoomTop; }
.gmBattleGridBGMoveCoverB .gmBattleGridBGPresent { animation-name: gmPicShowZooomBottom; }

/* VS */

@media (orientation: landscape) {
    .gmBattleGridVsMove { width: calc(50% + max(calc(50 - var(--bgBattleGridClipPercent)), calc(var(--bgBattleGridClipPercent) - 50)) * 1%); }

    .gmBattleGridVsTop    { clip-path: polygon(0 0, calc(100% - (var(--bgBattleGridClipPercent)) * 1%) 0, calc(var(--bgBattleGridClipPercent) * 1%) 100%, 0 100%); }
    .gmBattleGridVsBottom { clip-path: polygon(calc(100% - (var(--bgBattleGridClipPercent)) * 1%) 0, 100% 0, 100% 100%, calc(var(--bgBattleGridClipPercent) * 1%) 100%); }

    .gmBattleGridVsTop    .gmBattleGridVsPosition { transform: translateX(calc((50 - max(calc(50 - var(--bgBattleGridClipPercent)), calc(var(--bgBattleGridClipPercent) - 50))) * -1%)); }
    .gmBattleGridVsBottom .gmBattleGridVsPosition { transform: translateX(calc((50 - max(calc(50 - var(--bgBattleGridClipPercent)), calc(var(--bgBattleGridClipPercent) - 50))) * 1%)); }

    .gmBattleGridVsTop    .gmBattleGridVsMove { left:  auto; }
    .gmBattleGridVsBottom .gmBattleGridVsMove { right: auto; }

    .gmBattleGridVsTop    .gmBattleGridVsMove.animit { animation-name: gmBattleGridMoveLandscapeTop; }
    .gmBattleGridVsBottom .gmBattleGridVsMove.animit { animation-name: gmBattleGridMoveLandscapeBottom; }
}

@media (orientation: portrait) {
    .gmBattleGridVsMove { height: calc(50% + max(calc(50 - var(--bgBattleGridClipPercent)), calc(var(--bgBattleGridClipPercent) - 50)) * 1%); }

    .gmBattleGridVsTop    { clip-path: polygon(0 0, 100% 0, 100% calc(var(--bgBattleGridClipPercent) * 1%), 0 calc(100% - (var(--bgBattleGridClipPercent)) * 1%)); }
    .gmBattleGridVsBottom { clip-path: polygon(0 calc(100% - (var(--bgBattleGridClipPercent)) * 1%), 100% calc(var(--bgBattleGridClipPercent) * 1%), 100% 100%, 0 100%); }

    .gmBattleGridVsTop    .gmBattleGridVsPosition { transform: translateY(calc((50 - max(calc(50 - var(--bgBattleGridClipPercent)), calc(var(--bgBattleGridClipPercent) - 50))) * -1%)); }
    .gmBattleGridVsBottom .gmBattleGridVsPosition { transform: translateY(calc((50 - max(calc(50 - var(--bgBattleGridClipPercent)), calc(var(--bgBattleGridClipPercent) - 50))) * 1%)); }

    .gmBattleGridVsTop    .gmBattleGridVsMove { top:    auto; }
    .gmBattleGridVsBottom .gmBattleGridVsMove { bottom: auto; }

    .gmBattleGridVsTop    .gmBattleGridVsMove.animit { animation-name: gmBattleGridMovePortraitTop; }
    .gmBattleGridVsBottom .gmBattleGridVsMove.animit { animation-name: gmBattleGridMovePortraitBottom; }
}







/* Battle hit bar */

.gmBattleGridHitItem:nth-child(3):nth-last-child(1),
.gmBattleGridHitItem:nth-child(1):nth-last-child(3),
.gmBattleGridHitItem:nth-child(4):nth-last-child(2),
.gmBattleGridHitItem:nth-child(2):nth-last-child(4),
.gmBattleGridHitItem:nth-child(1):nth-last-child(4),
.gmBattleGridHitItem:nth-child(4):nth-last-child(1) { top: 24px; }

.gmBattleGridHitItem:nth-child(5):nth-last-child(1),
.gmBattleGridHitItem:nth-child(1):nth-last-child(5) { top: 56px; }

.gmBattleGridHideActionBar .gmBattleGridActionBar { display: none; }







/* Battle health bars */

.gmBattleHealthBar {
    display: grid;
    padding: var(--gmBattleHealthBorderSize);
    gap: var(--gmBattleHealthBorderSize);
    grid-template: 1fr 1fr / 1fr 1fr;
    border-radius: calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize));
    transition: 0.2s clip-path;
    --gmBattleHealthBorderSize: 2px;
    --gmBattleHealthBorderRadius: 2px;
}

.gmBattleHealthBarItem:nth-child(1) { border-radius: var(--gmBattleHealthBorderRadius); }

.gmBattleHealthBarItem:nth-child(1),
.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem { background-color: currentColor; }

.gmBattleHealthBarItem:nth-child(n+2):nth-child(-n+5) { border-color: currentColor; }

.gmBattleHealthStats,
.gmBattleHealthBarItem:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }

.gmBattleHealthBar.singleBar,
.gmBattleHealthBar:not(.singleBar) .gmBattleHealthStats,
.gmBattleHealthBar:not(.singleBar) .gmBattleHealthBarItem:nth-child(1) { margin: calc(var(--gmBattleHealthBorderSize) * 2); }

.gmBattleHealthBarItem:nth-child(2)                   { grid-area: 1 / 1 / 2 / 2; border-width: var(--gmBattleHealthBorderSize) 0 0 var(--gmBattleHealthBorderSize); border-radius: calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)) 0 0 0; }
.gmBattleHealthBarItem:nth-child(2):last-child        { grid-area: 1 / 1 / 3 / 3; border-width: var(--gmBattleHealthBorderSize); border-radius: calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)); }
.gmBattleHealthBarItem:nth-child(2):nth-last-child(2) { grid-area: 1 / 1 / 3 / 2; border-width: var(--gmBattleHealthBorderSize) 0 var(--gmBattleHealthBorderSize) var(--gmBattleHealthBorderSize); border-radius: calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)) 0 0 calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)); }

.gmBattleHealthBarItem:nth-child(3)                   { grid-area: 1 / 2 / 2 / 3; border-width: var(--gmBattleHealthBorderSize) var(--gmBattleHealthBorderSize) 0 0; border-radius: 0 calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)) 0 0; }
.gmBattleHealthBarItem:nth-child(3):last-child,
.gmBattleHealthBarItem:nth-child(3):nth-last-child(2) { grid-area: 1 / 2 / 3 / 3; border-width: var(--gmBattleHealthBorderSize) var(--gmBattleHealthBorderSize) var(--gmBattleHealthBorderSize) 0; border-radius: 0 calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)) calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)) 0; }

.gmBattleHealthBarItem:nth-child(4)                   { grid-area: 2 / 1 / 3 / 2; border-width: 0 0 var(--gmBattleHealthBorderSize) var(--gmBattleHealthBorderSize); border-radius: 0 0 0 calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)); }
.gmBattleHealthBarItem:nth-child(5)                   { grid-area: 2 / 2 / 3 / 3; border-width: 0 var(--gmBattleHealthBorderSize) var(--gmBattleHealthBorderSize) 0; border-radius: 0 0 calc(var(--gmBattleHealthBorderRadius) + var(--gmBattleHealthBorderSize)) 0; }

.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem { height: var(--gmBattleHealthBorderSize); }

.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem:nth-child(odd)             { border-radius: 0 calc(var(--gmBattleHealthBorderSize) / 2) calc(var(--gmBattleHealthBorderSize) / 2) 0; }
.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem:nth-child(even)            { border-radius: calc(var(--gmBattleHealthBorderSize) / 2) 0 0 calc(var(--gmBattleHealthBorderSize) / 2); }
.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem:nth-child(even):last-child { grid-column: 1 / -1; border-radius: calc(var(--gmBattleHealthBorderSize) / 2);  }

.gmBattleHealthBar.bottom,
.gmBattleHealthBar.bottom .gmBattleHealthStats { transform: scaleY(-1); }

.gmBattleHealthStats { padding: 4px 8px; }

/* Убывает в центр */
.gmBattleHealthBarItem:nth-child(1),
.gmBattleHealthBarItem:nth-child(2):last-child,
.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem:nth-child(even):last-child { clip-path: polygon(
        calc((100% - var(--gmBattleHealthBarValue)) / 2) 0,
        calc(100% - ((100% - var(--gmBattleHealthBarValue)) / 2)) 0,
        calc(100% - ((100% - var(--gmBattleHealthBarValue)) / 2)) 100%,
        calc((100% - var(--gmBattleHealthBarValue)) / 2) 100%
    );
}

/* Убывает справа */
.gmBattleHealthBarItem:nth-child(3),
.gmBattleHealthBarItem:nth-child(5),
.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem:nth-child(odd) { clip-path: polygon(
        0 0,
        calc(100% - (100% - var(--gmBattleHealthBarValue))) 0,
        calc(100% - (100% - var(--gmBattleHealthBarValue))) 100%,
        0 100%
    );
}

/* Убывает слева */
.gmBattleHealthBarItem:nth-child(2),
.gmBattleHealthBarItem:nth-child(4),
.gmBattleHealthBarItem:nth-child(5) ~ .gmBattleHealthBarItem:nth-child(even) {
    clip-path: polygon(
            calc(100% - var(--gmBattleHealthBarValue)) 0,
            100% 0,
            100% 100%,
            calc(100% - var(--gmBattleHealthBarValue)) 100%
    );
}





/* Minibars */

.gmBattleQueueHealthBarItem { flex-basis: 24px; }

.gmBattleQueueHealthBarItem:first-child { flex-basis: 100%; }

.gmBattleQueueHealthBarItem:nth-child(odd)  { justify-content: flex-start; }
.gmBattleQueueHealthBarItem:nth-child(even) { justify-content: flex-end; }
.gmBattleQueueHealthBarItem:first-child,
.gmBattleQueueHealthBarItem:nth-child(even):last-child { justify-content: center; }





/* Hit value */

.gmBattleGridHitValueWrap { grid-template: repeat(3, auto) / repeat(3, auto); }

.gmBattleGridHitValue {
    opacity: 0;
    visibility: hidden;
    filter:
            drop-shadow(0 0 2px rgba(0, 0, 0, 0.75))
            drop-shadow(0 0 4px rgba(0, 0, 0, 0.75))
            drop-shadow(0 0 6px rgba(0, 0, 0, 0.75));
}

.gmBattleGridHitValue:nth-child(5n+1) { grid-area: 2 / 2 / 3 / 3; }
.gmBattleGridHitValue:nth-child(5n+2) { grid-area: 1 / 1 / 2 / 2; }
.gmBattleGridHitValue:nth-child(5n+3) { grid-area: 1 / 3 / 2 / 4; }
.gmBattleGridHitValue:nth-child(5n+4) { grid-area: 3 / 1 / 4 / 2; }
.gmBattleGridHitValue:nth-child(5n+5) { grid-area: 3 / 3 / 4 / 4; }

.gmBattleGridHitValue:nth-child(1):nth-last-child(2) { grid-area: 2 / 1 / 3 / 2; }
.gmBattleGridHitValue:nth-child(2):nth-last-child(1) { grid-area: 2 / 3 / 3 / 4; }

.gmBattleGridHitValue:nth-child(1):nth-last-child(4) { grid-area: 1 / 1 / 2 / 2; }
.gmBattleGridHitValue:nth-child(2):nth-last-child(3) { grid-area: 1 / 3 / 2 / 4; }
.gmBattleGridHitValue:nth-child(3):nth-last-child(2) { grid-area: 3 / 1 / 4 / 2; }
.gmBattleGridHitValue:nth-child(4):nth-last-child(1) { grid-area: 3 / 3 / 4 / 4; }





/* Effect settings */

:is(.gmBattleGridHitFromL, .gmBattleGridHitFromR) .gmBattleGridEffectObject { width:  100%; }
:is(.gmBattleGridHitFromT, .gmBattleGridHitFromB) .gmBattleGridEffectObject { height: 100%; }

.gmBattleGridEffectFramer:not(.mainWidth)  { width:  calc(var(--gmBattleGridEffectFrameWidth) * 1px); }
.gmBattleGridEffectFramer:not(.mainHeight) { height: calc(var(--gmBattleGridEffectFrameHeight) * 1px); }

.gmBattleGridEffectFrameItem {
    height: 100%;
    width: calc(100% * var(--gmBattleGridFrameCount));
}

.gmBattleGridEffectFramer.frameAspectRatio { aspect-ratio: var(--gmBattleGridEffectFrameWidth) / var(--gmBattleGridEffectFrameHeight); }

.gmBattleGridEffectPart.posStart,
.gmBattleGridEffectPart.posStart :is(.gmBattleGridEffectPartPosition, .gmBattleGridEffectShow, .gmBattleGridEffectHide) { align-self: flex-start; }
.gmBattleGridEffectPart.posEnd,
.gmBattleGridEffectPart.posEnd :is(.gmBattleGridEffectPartPosition, .gmBattleGridEffectShow, .gmBattleGridEffectHide) { align-self: flex-end; }
.gmBattleGridEffectPart.posStretch,
.gmBattleGridEffectPart.posStretch :is(.gmBattleGridEffectPartPosition, .gmBattleGridEffectShow, .gmBattleGridEffectHide) { align-self: stretch; }

.gmBattleGridHitFromT .gmBattleGridEffectObject { transform: rotate(0deg)  scaleY(-1); }
.gmBattleGridHitFromL .gmBattleGridEffectObject { transform: rotate(90deg) scaleY(1);  }
.gmBattleGridHitFromR .gmBattleGridEffectObject { transform: rotate(90deg) scaleY(-1); }

.gmBattleGridHitFromT .directionRev { transform: scaleY(-1) rotate(0deg);  }
.gmBattleGridHitFromL .directionRev { transform: scaleY(1)  rotate(-90deg); }
.gmBattleGridHitFromR .directionRev { transform: scaleY(-1) rotate(-90deg); }

.gmBattleGridEffectShow, .gmBattleGrid:not(.gmBattleGridIgnoreCreatureShow) :is(.gmBattleGridAvatarShowL, .gmBattleGridAvatarShowR) { opacity: 0; animation-fill-mode: forwards; }
.gmBattleGridEffectHide, .gmBattleGrid:not(.gmBattleGridIgnoreCreatureHide) :is(.gmBattleGridAvatarHideL, .gmBattleGridAvatarHideR) { opacity: 1; animation-fill-mode: forwards; }

.gmBattleGrid:not(.gmBattleGridHitFromR, .gmBattleGridHitFromL) :is(.gmBattleGridSideCreatureL, .gmBattleGridSideCreatureR) { display: none; }




/* Position matrix */

/* Object */
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(5n+2) > .gmBattleGridEffectObjectPosition  { margin-top: calc((var(--gmBattleGridAvWidth) /  4) * 1px); margin-bottom: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-left: calc((var(--gmBattleGridAvWidth) / -2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(5n+3) > .gmBattleGridEffectObjectPosition  { margin-top: calc((var(--gmBattleGridAvWidth) /  4) * 1px); margin-bottom: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-left: calc((var(--gmBattleGridAvWidth) /  2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(5n+4) > .gmBattleGridEffectObjectPosition  { margin-top: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-bottom: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-left: calc((var(--gmBattleGridAvWidth) / -2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(5n+5) > .gmBattleGridEffectObjectPosition  { margin-top: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-bottom: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-left: calc((var(--gmBattleGridAvWidth) /  2) * 1px); }

.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(1):nth-last-child(2) > .gmBattleGridEffectObjectPosition { margin-top: 0; margin-bottom: 0; margin-left: calc((var(--gmBattleGridAvWidth) / -2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(2):nth-last-child(1) > .gmBattleGridEffectObjectPosition { margin-top: 0; margin-bottom: 0; margin-left: calc((var(--gmBattleGridAvWidth) /  2) * 1px); }

.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(1):nth-last-child(4) > .gmBattleGridEffectObjectPosition { margin-top: calc((var(--gmBattleGridAvWidth) /  4) * 1px); margin-bottom: 0; margin-left: calc((var(--gmBattleGridAvWidth) / -2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(2):nth-last-child(3) > .gmBattleGridEffectObjectPosition { margin-top: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-bottom: 0; margin-left: calc((var(--gmBattleGridAvWidth) /  2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(3):nth-last-child(2) > .gmBattleGridEffectObjectPosition { margin-top: calc((var(--gmBattleGridAvWidth) / -4) * 1px); margin-bottom: 0; margin-left: calc((var(--gmBattleGridAvWidth) / -2) * 1px); }
.gmBattleGridEffectWrap.positionMatrix > .gmBattleGridEffectObject:nth-child(4):nth-last-child(1) > .gmBattleGridEffectObjectPosition { margin-top: calc((var(--gmBattleGridAvWidth) /  4) * 1px); margin-bottom: 0; margin-left: calc((var(--gmBattleGridAvWidth) /  2) * 1px); }

/* Part */
.gmBattleGridEffectItem > .gmBattleGridEffectPart > .gmBattleGridEffectPartPosition { transform: translate(0, 0) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }

.gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(5n+2) > .gmBattleGridEffectPartPosition, .gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(1):nth-last-child(4) > .gmBattleGridEffectPartPosition { transform: translate(calc((var(--gmBattleGridAvWidth) / -4) * 1px), calc((var(--gmBattleGridAvWidth) /  4) * 1px)) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }
.gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(5n+3) > .gmBattleGridEffectPartPosition, .gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(2):nth-last-child(3) > .gmBattleGridEffectPartPosition { transform: translate(calc((var(--gmBattleGridAvWidth) /  4) * 1px), calc((var(--gmBattleGridAvWidth) /  4) * 1px)) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }
.gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(5n+4) > .gmBattleGridEffectPartPosition, .gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(3):nth-last-child(2) > .gmBattleGridEffectPartPosition { transform: translate(calc((var(--gmBattleGridAvWidth) / -4) * 1px), calc((var(--gmBattleGridAvWidth) / -4) * 1px)) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }
.gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(5n+5) > .gmBattleGridEffectPartPosition, .gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(4):nth-last-child(1) > .gmBattleGridEffectPartPosition { transform: translate(calc((var(--gmBattleGridAvWidth) /  4) * 1px), calc((var(--gmBattleGridAvWidth) / -4) * 1px)) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }

.gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(1):nth-last-child(2) > .gmBattleGridEffectPartPosition { transform: translate(calc((var(--gmBattleGridAvWidth) / -4) * 1px), 0) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }
.gmBattleGridEffectItem.positionMatrix > .gmBattleGridEffectPart:nth-child(2):nth-last-child(1) > .gmBattleGridEffectPartPosition { transform: translate(calc((var(--gmBattleGridAvWidth) /  4) * 1px), 0) rotate(calc(var(--gmBattleGridEffectPartRotate, 0) * 1deg)) scale(var(--gmBattleGridEffectPartScaleX, 1), var(--gmBattleGridEffectPartScaleY, 1)); }


/*
width: min(25vw, 120px);
height: min(25vw, 120px);
*/





/* Animation settings */

.gmBattleGridInitAnim .gmBattleGridEffectItem {
    animation-name: var(--gmBattleGridEffectMoveName);
    animation-delay: calc(
            (var(--gmBattleGridCreatureShowDuration, 0) + var(--gmBattleGridCreatureShowDelay, 0) +
            (var(--gmBattleGridEffectDelayBetween, 0) * var(--effectID, 0)) +
            var(--gmBattleGridEffectMoveDelay, 0)) * 1ms
    );
    animation-duration: calc(var(--gmBattleGridEffectMoveDuration, 0) * 1ms);
    animation-timing-function: var(--gmBattleGridEffectMoveTiming);
}

.gmBattleGridInitAnim .gmBattleGridEffectShow {
    animation-name: var(--gmBattleGridEffectShowName);
    animation-delay: calc(
            (var(--gmBattleGridCreatureShowDuration, 0) + var(--gmBattleGridCreatureShowDelay, 0) +
            (var(--gmBattleGridEffectDelayBetween, 0) * var(--effectID, 0)) +
            (var(--gmBattleGridEffectPartDelayBetween, 0) * var(--effectPartID, 0)) +
            var(--gmBattleGridEffectShowDelay, 0)) * 1ms
    );
    animation-duration: calc(var(--gmBattleGridEffectShowDuration, 0) * 1ms);
}

.gmBattleGridInitAnim .gmBattleGridEffectHide {
    animation-name: var(--gmBattleGridEffectHideName);
    animation-delay: calc(
            (var(--gmBattleGridCreatureShowDuration, 0) + var(--gmBattleGridCreatureShowDelay, 0) +
            (var(--gmBattleGridEffectDelayBetween, 0) * var(--effectID, 0)) +
            (var(--gmBattleGridEffectPartDelayBetween, 0) * var(--effectPartID, 0)) +
            var(--gmBattleGridEffectHideDelay, 0)) * 1ms
    );
    animation-duration: calc(var(--gmBattleGridEffectHideDuration, 0) * 1ms);
}

.gmBattleGridInitAnim .gmBattleGridEffectFrameItem {
    animation-name: var(--gmBattleGridEffectName);
    animation-iteration-count: calc(var(--gmBattleGridEffectRemaining, 0) / var(--gmBattleGridEffectDuration, 0));
    animation-delay: calc(
            (var(--gmBattleGridCreatureShowDuration, 0) + var(--gmBattleGridCreatureShowDelay, 0) +
            (var(--gmBattleGridEffectDelayBetween, 0) * var(--effectID, 0)) +
            (var(--gmBattleGridEffectPartDelayBetween, 0) * var(--effectPartID, 0)) +
            var(--gmBattleGridEffectDelay, 0)) * 1ms
    );
    animation-duration: calc(var(--gmBattleGridEffectDuration, 0) * 1ms);
    animation-timing-function: steps(var(--gmBattleGridFrameCount));
}

.gmBattleGridInitAnim .gmBattleGridHitValue {
    animation-name: gmHitValueTop;
    animation-duration: calc(var(--gmBattleGridHitValueDuration, 0) * 1ms);
    animation-timing-function: linear;
    animation-delay: calc(
            (var(--gmBattleGridCreatureShowDuration, 0) + var(--gmBattleGridCreatureShowDelay, 0) +
            (var(--gmBattleGridEffectDelayBetween, 0) * var(--effectID, 0)) +
            (var(--gmBattleGridEffectPartDelayBetween, 0) * var(--effectPartID, 0)) +
            (var(--effectValueID, 0) * var(--gmBattleGridHitValueDelayBetween, 0)) +
            var(--gmBattleGridHitValueDelay, 0)) * 1ms
    );
}

/* Avatar animation */

.gmBattleGridInitAnim.gmBattleGridHitFromT:not(.gmBattleGridIgnorePunch) .gmBattleGridBGItem:not(.gmBattleGridBGPast) .gmBattleGridPic { animation-name: gmHitPunchBottom; }
.gmBattleGridInitAnim.gmBattleGridHitFromB:not(.gmBattleGridIgnorePunch) .gmBattleGridAvatar  { animation-name:    gmHitPunchTop; }
.gmBattleGridInitAnim.gmBattleGridHitFromL:not(.gmBattleGridIgnorePunch) .gmBattleGridAvatarL { animation-name:  gmHitPunchRight; }
.gmBattleGridInitAnim.gmBattleGridHitFromR:not(.gmBattleGridIgnorePunch) .gmBattleGridAvatarR { animation-name:   gmHitPunchLeft; }

.gmBattleGridInitAnim.gmBattleGridHitFromT:not(.gmBattleGridIgnoreShake) .gmBattleGridAvatar,
.gmBattleGridInitAnim.gmBattleGridHitFromB:not(.gmBattleGridIgnoreShake) .gmBattleGridBGItem:not(.gmBattleGridBGPast) .gmBattleGridPic,
.gmBattleGridInitAnim.gmBattleGridHitFromL:not(.gmBattleGridIgnoreShake) .gmBattleGridAvatarR,
.gmBattleGridInitAnim.gmBattleGridHitFromR:not(.gmBattleGridIgnoreShake) .gmBattleGridAvatarL { animation-name: gmHitShake; }

.gmBattleGridHitFromT .gmBattleGridPic,
.gmBattleGridHitFromB .gmBattleGridAvatar,
.gmBattleGridHitFromL .gmBattleGridAvatarL,
.gmBattleGridHitFromR .gmBattleGridAvatarR {
    animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
    animation-duration: calc(var(--gmBattleGridHitPunchDuration, 0) * 1ms);
    /*animation-delay: calc((var(--gmBattleGridCreatureShowDurationValue) + var(--gmBattleGridCreatureShowDelayValue) + var(--gmBattleGridHitPunchDelay)) * 1ms);*/
    animation-delay: calc((var(--gmBattleGridHitPunchDelay, 0)) * 1ms);
    animation-iteration-count: 1;
}

.gmBattleGridHitFromT .gmBattleGridAvatar,
.gmBattleGridHitFromB .gmBattleGridPic,
.gmBattleGridHitFromL .gmBattleGridAvatarR,
.gmBattleGridHitFromR .gmBattleGridAvatarL {
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1.5);
    animation-duration: calc(var(--gmBattleGridHitShakeDuration, 0) * 1ms);
    /*animation-delay: calc((var(--gmBattleGridCreatureShowDurationValue) + var(--gmBattleGridCreatureShowDelayValue) + var(--gmBattleGridHitShakeDelay)) * 1ms);*/
    animation-delay: calc((var(--gmBattleGridHitShakeDelay, 0)) * 1ms);
    animation-iteration-count: calc(var(--gmBattleGridHitShakeRemain, 0) / var(--gmBattleGridHitShakeDuration, 0));
}

.gmBattleGridInitAnim .gmBattleGridAvatarShowL,
.gmBattleGridInitAnim .gmBattleGridAvatarShowR {
    animation-duration: calc(var(--gmBattleGridCreatureShowDuration, 0) * 1ms);
    animation-timing-function: ease;
    animation-delay: calc(var(--gmBattleGridCreatureShowDelay, 0) * 1ms);
}

.gmBattleGridInitAnim .gmBattleGridAvatarHideL,
.gmBattleGridInitAnim .gmBattleGridAvatarHideR {
    animation-duration: calc(var(--gmBattleGridCreatureHideDuration, 0) * 1ms);
    animation-timing-function: ease;
    animation-delay: calc(var(--gmBattleGridCreatureHideDelay, 0) * 1ms);
}

.gmBattleGridInitAnim:is(.gmBattleGridHitFromR, .gmBattleGridHitFromL):not(.gmBattleGridIgnoreCreatureShow) .gmBattleGridAvatarShowL { animation-name: gmAvatarShowFromLeft; }
.gmBattleGridInitAnim:is(.gmBattleGridHitFromR, .gmBattleGridHitFromL):not(.gmBattleGridIgnoreCreatureShow) .gmBattleGridAvatarShowR { animation-name: gmAvatarShowFromRight; }

.gmBattleGridInitAnim:is(.gmBattleGridHitFromR, .gmBattleGridHitFromL):not(.gmBattleGridIgnoreCreatureHide) .gmBattleGridAvatarHideL { animation-name: gmAvatarHideToLeft; }
.gmBattleGridInitAnim:is(.gmBattleGridHitFromR, .gmBattleGridHitFromL):not(.gmBattleGridIgnoreCreatureHide) .gmBattleGridAvatarHideR { animation-name: gmAvatarHideToRight; }

/* Sight */

.gmBattleGridYourTurnCircle,
.gmBattleGridYourTurnTitle {
    animation-fill-mode: forwards;
    animation-duration: 1000ms;
}

.gmBattleGridYourTurnCircle { animation-name: gmBattleGridAvatarSight; }
.gmBattleGridYourTurnTitle  { animation-name: gmBattleGridAvatarSightTitle; }
























/* Animation keyframes */

/* Value */

@keyframes gmHitValueTop {
    0%  { transform: scale(0.5) translateY(0); visibility: unset; opacity: 1; }
    25% { transform: scale(1.5) translateY(-1em); opacity: 1; }
    50% { transform: scale(1.1) translateY(-2.5em); opacity: 1; }
    100% { transform: scale(0.5) translateY(-5em); visibility: unset; opacity: 0; }
}

@keyframes gmHitValueBottom {
    0%  { transform: scale(0.5) translateY(0); visibility: unset; opacity: 1; }
    25% { transform: scale(1.5) translateY(1em); opacity: 1; }
    50% { transform: scale(1.1) translateY(2.5em); opacity: 1; }
    100% { transform: scale(0.5) translateY(5em); visibility: unset; opacity: 0; }
}

/* Hit */

@keyframes gmHitShake {
    0%   { transform: scale(1.03) translate(0px, 0px) rotate(0deg); filter: brightness(1); }
    10%  { transform: scale(1.02) translate(-8px, -6px) rotate(-1deg); }
    20%  { transform: scale(1.03) translate(8px, 6px) rotate(1deg); }
    30%  { transform: scale(1.02) translate(-6px, 4px) rotate(0deg); }
    40%  { transform: scale(1.03) translate(6px, -4px) rotate(1deg); filter: brightness(1.15); }
    50%  { transform: scale(1.02) translate(-4px, 2px) rotate(-1deg); }
    60%  { transform: scale(1.03) translate(4px, -2px) rotate(1deg); filter: brightness(0.9); }
    70%  { transform: scale(1.02) translate(-3px, 1px) rotate(0deg); }
    80%  { transform: scale(1.03) translate(3px, -1px) rotate(1deg); }
    90%  { transform: scale(1.02) translate(-2px, 1px) rotate(0deg); }
    100% { transform: scale(1.03) translate(0px, 0px) rotate(0deg); filter: brightness(1); }
}

@keyframes gmHitPunchTop {
    0%   { transform: scale(1); filter: brightness(1); }
    10%  { transform: scale(1.05) translateY(-2%); }
    25%  { transform: scale(1.2) translateY(-4%); filter: brightness(1.15); }
    40%  { transform: scale(1); filter: brightness(0.9); }
    60%  { transform: scale(1.05); }
    80%  { transform: scale(1); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes gmHitPunchBottom {
    0%   { transform: scale(1); filter: brightness(1); }
    10%  { transform: scale(1.05) translateY(2%); }
    25%  { transform: scale(1.2) translateY(4%); filter: brightness(1.15); }
    40%  { transform: scale(1); filter: brightness(0.9); }
    60%  { transform: scale(1.05); }
    80%  { transform: scale(1); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes gmHitPunchLeft {
    0%   { transform: scale(1); filter: brightness(1); }
    10%  { transform: scale(1.05) translateX(-2%); }
    25%  { transform: scale(1.2) translateX(-4%); filter: brightness(1.15); }
    40%  { transform: scale(1); filter: brightness(0.9); }
    60%  { transform: scale(1.05); }
    80%  { transform: scale(1); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes gmHitPunchRight {
    0%   { transform: scale(1); filter: brightness(1); }
    10%  { transform: scale(1.05) translateX(2%); }
    25%  { transform: scale(1.2) translateX(4%); filter: brightness(1.15); }
    40%  { transform: scale(1); filter: brightness(0.9); }
    60%  { transform: scale(1.05); }
    80%  { transform: scale(1); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Effects animation */

@keyframes gmEffectMoveTop {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

@keyframes gmEffectMoveBottom {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

@keyframes gmEffectMoveLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@keyframes gmEffectMoveRight {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@keyframes gmEffectFramePerTime {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@keyframes gmEffectOpShow {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gmEffectOpHide {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes gmAvatarShowFromLeft {
    from { transform: translateX(-50%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes gmAvatarShowFromRight {
    from { transform: translateX(50%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes gmAvatarHideToLeft {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-50%); opacity: 0; }
}

@keyframes gmAvatarHideToRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(50%); opacity: 0; }
}

@keyframes gmPicShowRight {
    from { transform: translateX(100%) }
    to   { transform: translateX(0); }
}

@keyframes gmPicShowLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes gmPicShowTop {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes gmPicShowBottom {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes gmPicShowZoomRight {
    from { opacity: 0; transform: translateX(-100%) scale(0.5); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes gmPicShowZoomLeft {
    from { opacity: 0;  transform: translateX(100%) scale(0.5); }
    to   { opacity: 1;  transform: translateX(0) scale(1); }
}

@keyframes gmPicShowZoomTop {
    from { opacity: 0;  transform: translateY(-100%) scale(0.5); }
    to   { opacity: 1;  transform: translateY(0) scale(1); }
}

@keyframes gmPicShowZoomBottom {
    from { opacity: 0;  transform: translateY(100%) scale(0.5); }
    to   { opacity: 1;  transform: translateY(0) scale(1); }
}

@keyframes gmBattleGridMoveLandscapeTop {
    from { opacity: 0; transform: translate(calc((50 - var(--bgBattleGridClipPercent)) * -1%), 50%); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes gmBattleGridMoveLandscapeBottom {
    from { opacity: 0; transform: translate(calc((50 - var(--bgBattleGridClipPercent)) * 1%), -50%); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes gmBattleGridMovePortraitTop {
    from { opacity: 0; transform: translate(50%, calc((50 - var(--bgBattleGridClipPercent)) * -1%)); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes gmBattleGridMovePortraitBottom {
    from { opacity: 0; transform: translate(-50%, calc((50 - var(--bgBattleGridClipPercent)) * 1%)); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes gmBattleGridAvatarSight {
    0%   { opacity: 0; transform: scale(0.5) rotate(-180deg); }
    50%  { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.25) rotate(0deg); }
}

@keyframes gmBattleGridAvatarSightTitle {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}