.player {
    width: 24px;
    height: 24px;
    position: absolute;
    overflow: hidden;
    image-rendering: pixelated;
    transition: transform 400ms;
    will-change: transform;
}

.player.state-idle.dir-down > img {
    transform: translate3d(0px, 0px, 0px);
}
.player.state-idle.dir-right > img {
    transform: translate3d(0px, -24px, 0px);
}
.player.state-idle.dir-left > img {
    transform: translate3d(0px, -48px, 0px);
}
.player.state-idle.dir-up > img {
    transform: translate3d(0px, -72px, 0px);
}

/* Animations */

.player.state-walk.dir-down > img {
    animation: 1s infinite steps(4) state-walk-dir-down;
}
@keyframes state-walk-dir-down {
    from {
        transform: translate3d(0px, 0px, 0px);
    }
    to {
        transform: translate3d(-96px, 0px, 0px);
    }
}

.player.state-walk.dir-right > img {
    animation: 1s infinite steps(4) state-walk-dir-right;
}
@keyframes state-walk-dir-right {
    from {
        transform: translate3d(0px, -24px, 0px);
    }
    to {
        transform: translate3d(-96px, -24px, 0px);
    }
}

.player.state-walk.dir-left > img {
    animation: 1s infinite steps(4) state-walk-dir-left;
}
@keyframes state-walk-dir-left {
    from {
        transform: translate3d(0px, -48px, 0px);
    }
    to {
        transform: translate3d(-96px, -48px, 0px);
    }
}

.player.state-walk.dir-up > img {
    animation: 1s infinite steps(4) state-walk-dir-up;
}
@keyframes state-walk-dir-up {
    from {
        transform: translate3d(0px, -72px, 0px);
    }
    to {
        transform: translate3d(-96px, -72px, 0px);
    }
}

.player.state-attack.dir-up > img {
    animation: 300ms steps(4) state-attack-dir-up;
}
@keyframes state-attack-dir-up {
    from {
        transform: translate3d(0px, calc(-24px * 7), 0px);
    }
    to {
        transform: translate3d(-96px, calc(-24px * 7), 0px);
    }
}

.player.state-attack.dir-down > img {
    animation: 300ms steps(4) state-attack-dir-down;
}
@keyframes state-attack-dir-down {
    from {
        transform: translate3d(0px, calc(-24px * 4), 0px);
    }
    to {
        transform: translate3d(-96px, calc(-24px * 4), 0px);
    }
}

.player.state-attack.dir-right > img {
    animation: 300ms steps(4) state-attack-dir-right;
}
@keyframes state-attack-dir-right {
    from {
        transform: translate3d(0px, calc(-24px * 5), 0px);
    }
    to {
        transform: translate3d(-96px, calc(-24px * 5), 0px);
    }
}

.player.state-attack.dir-left > img {
    animation: 300ms steps(4) state-attack-dir-left;
}
@keyframes state-attack-dir-left {
    from {
        transform: translate3d(0px, calc(-24px * 6), 0px);
    }
    to {
        transform: translate3d(-96px, calc(-24px * 6), 0px);
    }
}

.player.state-spawn {
    animation: 500ms steps(5) player-spawn;
}
@keyframes state-spawn {
    0% {
        opacity: 0;
        background: linear-gradient(
            0.25turn,
            rgba(255, 100, 180, 0) 30%,
            rgb(255, 100, 180) 30% 40%,
            rgb(255, 255, 255) 40% 60%,
            rgb(255, 100, 180) 60% 70%,
            rgba(255, 100, 180, 0) 70%
        );
    }

    50% {
        opacity: 0.5;
        background: linear-gradient(
            0.25turn,
            rgba(255, 100, 180, 0) 20%,
            rgb(255, 100, 180) 20% 35%,
            rgb(255, 255, 255) 35% 65%,
            rgb(255, 100, 180) 65% 80%,
            rgba(255, 100, 180, 0) 80%
        );
    }

    90% {
        opacity: 0.9;
        background: linear-gradient(
            0.25turn,
            rgba(255, 100, 180, 0) 40%,
            rgb(255, 100, 180) 40% 45%,
            rgb(255, 255, 255) 45% 50%,
            rgb(255, 100, 180) 50% 65%,
            rgba(255, 100, 180, 0) 65%
        );
    }

    100% {
        opacity: 1;
    }
}

.map {
    width: 504px;
    height: 504px;
    margin-left: 24px;
    position: absolute;
    background-color: rgba(0, 0, 255, 0.3);
    background-image: url("/img/bg-tile.png");
    background-repeat: repeat;
    image-rendering: pixelated;
    scale: 1.5;
    transition: transform 500ms ease-out;
    will-change: transform;
}

.players {
    width: 504px;
    height: 504px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
}