/* Player blob styles */

#map_place .player_blob {
    width: 8vw;
    height: 8vw;
    border-radius: 0 0 50% 50%;
    z-index: 2;
    position: relative;
    opacity: 0.7;
    transition-duration: 0.2s;
    animation: drop 4s ease-in-out forwards;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.player_blob::after {
    border-radius: 0 0 50% 50%;
}


@keyframes drop {
    0% {
        transform: translateY(-150%) scaleY(1);
    }
    70% {
        transform: translateY(-150%) scaleY(1);
    }
    90% {
        transform: translateY(4%) scaleY(1.1);
    }
    100% {
        transform: translateY(0) scaleY(1);
    }
}

#map_place .player_blob:hover {
    opacity: 0.9;
    height: 8.9vw;
}

#map_place #player1 {
    background-color: rgba(0, 162, 207, 0.7);
}


#map_place #player2 {
    background-color: rgba(215, 84, 84, 0.7);
}


.player_blob img {
    width: 100%;
    /* height: 100%; */
    border-radius: 50%;
    overflow: hidden;
    object-fit: contain;
}

.player_blob .player_name {
    position: absolute;
    top: 102%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.2em;
    color: rgba(84, 247, 247, 0.5);
    /* text-shadow: 0 0 5px rgba(84, 247, 247, 0.5); */
}

#player1 .player_name {
    color: rgba(2, 176, 224, 0.9);
}

#player2 .player_name {
    color: rgba(235, 92, 92, 0.9);
}