.player
{
    position: absolute;
    z-index: 100;
    transition: all linear var(--duration-step);
}

    .player .character
    {
        position: absolute;
    }

        .player .character *
        {
            width: 100%;
            height: 100%;
        }

    .player .name-wrapper
    {
        position: absolute;
        top: -32px;
        display: flex;
        justify-content: center;
    }

    .player .name-holder
    {
        color: white;
    }

    .player div.normal,
    .player div.hot,
    .player div.swim,
    .player div.happy,
    .player div.jump,
    .player div.idle,
    .player div.left,
    .player div.right,
    .player div.up,
    .player div.down,
    .player div.dying
    {
        display: none;
    }

    .player[data-state='dead'],
    .player[data-state='dead'] *
    {
        display: none !important;
    }

    .player[data-state='normal'] div.normal
    {
        display: block;
    }

    .player[data-state='hot'] div.hot
    {
        display: block;
    }

    .player[data-state='swim'] div.swim
    {
        display: block;
    }

    .player[data-state='happy'] div.happy
    {
        display: block;
    }

    .player[data-state='jump'] div.jump
    {
        display: block;
    }

    .player[data-state='dying'] div.dying
    {
        display: block;
    }

    .player[data-action='idle'] div.idle
    {
        display: block;
    }

    .player[data-action='left'] div.left
    {
        display: block;
    }

    .player[data-action='right'] div.right
    {
        display: block;
    }

    .player[data-action='up'] div.up
    {
        display: block;
    }

    .player[data-action='down'] div.down
    {
        display: block;
    }

    .player[data-action='dying'] div.dying
    {
        display: block;
        animation: goToHeaven var(--duration-dying) ease-in-out;
    }

@keyframes goToHeaven
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
        margin-top: -300px;
    }
}