body.is-paused *, body.is-paused *::before, body.is-paused *::after {
    animation-play-state: paused !important;
}

.character.hurt > .person-icon {
    --bg-color: rgba(255, 0, 0, 0.587);
    animation-name: shrink !important;
}
.character.healed > .person-icon {
    --bg-color: rgba(0, 255, 0, 0.587);
    animation-name: shrink !important;
}

.character.defeated .person-icon {
    transition: rotate .5s;
    rotate: 180deg;
}

.character.sleeping .person-icon {
    rotate: 90deg;
    transition: rotate 0.5s;
}

@keyframes thrust {
    0% {
        rotate: 0;
        /* left: 0; */
    }
    20% {
        rotate: 90deg;
        margin-right: 0px;
    }
    50% {
        margin-right: calc(var(--multiplier)* -24px);
    }
    90% {
        margin-right: 0;
        rotate: 90deg;
    }
    100% {
        rotate: 0;
    }
}

@keyframes swing {
    0% {
        rotate: 0;
        /* left: 0; */
    }
    50% {
        rotate: 180deg;
        /* left: 50px; */
    }
}

@keyframes bonk {
    0% {
        rotate: 0;
        /* left: 0; */
    }
    20% {
        rotate: -30deg;
        /* left: -10px; */
    }
    60% {
        rotate: 90deg;
        /* left: 20px; */
    }
    85% {
        rotate: 0deg;
        /* left: 0; */
    }
}

@keyframes spin {
    0% {
        rotate: 0;
    }

    100% {
        rotate: 1turn;
    }
}

@keyframes spin-steps {
    0% {
        rotate: 0;
    }

    25% {
        rotate: 90deg;
    }

    50% {
        rotate: 180deg;
    }

    75% {
        rotate: 270deg;
    }

    100% {
        rotate: 1turn;
    }
}

@keyframes shake {
    0% {
        left: 0px;
        top: 0px;
    }
    10% {
        left: 5px;
        top: -5px;
    }
    50% {
        left: -10px;
        top: 0px;
    }
    70% {
        left: 0px;
        top: -5px;
    }
    100% {
        top: 0px;
    }
}

@keyframes jump {
    0% {
        top: 0px;
    }

    50% {
        top: -50px;
    }
    100% {
        top: 0px;
    }
}

@keyframes shrink {
    0% {
        background-color: transparent;
        scale: 1;
    }
    25% {
        background-color: var(--bg-color);
        scale: .8;
    }
    50% {
        background-color: transparent;
        scale: 1;
    }
    75% {
        background-color: var(--bg-color);
        scale: .8;
    }
    100% {
        background-color: transparent;
        scale: 1;
    }
}

@keyframes moving {
    0% {
        bottom: 0px;
    }
    25% {
        bottom: 5px;
    }
    50% {
        bottom: 0px;
    }
    75% {
        bottom: 5px;
    }
    100% {
        bottom: 0px;
    }
}

.character .person-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    /* height: 100%; */
    height: calc(var(--sprite-size) * 2.5);
    /* background: url("images/elements/fire.png"); */
    background-size: cover;
    top: -25%;
    z-index: -2;
}

.character[data-effect="burning"] .person-icon::before {
    background-image: url("images/status/burning.png");
    animation: burn 1s step-end infinite;
}

.character[data-effect="frozen"] .person-icon::before {
    background-image: url("images/status/frozen.png");
    z-index: 6;
}
.character[data-effect="poisoned"] .person-icon::before {
    background-image: url("images/status/poisoned.png");
    z-index: 6;
}
.character[data-effect="snared"] .person-icon::before {
    background-image: url("images/status/vines.png");
    z-index: 6;
}
.character[data-effect="darkened"] .person-icon::before {
    background-image: url("images/status/darkened.png");
    z-index: 6;
    animation: burn 1s step-end infinite;
}
.character[data-effect="electrified"] .person-icon::before {
    background-image: url("images/status/electrified.png");
    z-index: 6;
    animation: flip 1s step-end infinite;
}
.character[data-effect="glowing"] .person-icon::before {
    background-image: url("images/status/glowing.png");
    animation: spin-steps 4s step-end infinite;
}
.character[data-effect="sleep"] .person-icon {
    rotate: 90deg;
    transition: rotate 0.5s;
}

.character .element[data-element="fire"] {
    animation: burn 1s step-end infinite;
}

@keyframes burn {
    0% {
        opacity: 1;
        top: -25%;
    }
    25% {
        /* opacity: 0.5; */
        top: -30%;
    }
    50% {
        /* opacity: 0.5; */
        top: -30%;
        scale: -1 1;
    }
    75% {
        /* opacity: 0.5; */
        top: -25%;
    }
    100% {
        opacity: 1;
        top: -25%;
        scale: 1;
    }
}

@keyframes flip {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
        scale: 1 -1;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}