.game-animation {
    background-image: url("../assets/field-texture.jpg");
    background-size: cover;
    background-position: 50% 50%;
    aspect-ratio: 2 / 1;
    width: calc(100% + 2rem);
    margin: 0 -1rem 2rem -1rem;
    position: relative;
}

.game-animation .player {
    position: absolute;
    color: white;
    font-size: 10px;
    letter-spacing: -0.5px;
    width: 50px;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    transition: top 0.5s ease-in-out, left 1s ease-in-out, right 1s ease-in-out;
    top: 50%;
    left: 25%;
    text-align: center;
}

.game-animation .play-button {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 5;
    border: solid 2px white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding-left: 3px;
}

.game-animation .play-button:hover {
    transform: scale(1.1);
    cursor: pointer;
}

@media screen and (max-width: 640px) {
    .game-animation .player {
        transform: scale(0.8);
    }
}

.game-animation .away {
    left: initial !important;
    right: 25%;
}

.game-animation .player .player-image {
    position: absolute;
    float: none;
    top: -52px;
    left: 50%;
    transform: translateX(-25px);
}

.game-animation .ball {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 50px;
    height: 20px;
    transition: left 0.5s ease-out, top 0.5s ease-out, right 0.5s ease-out;
    display: flex;
}

.game-animation .ball img {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
}

.game-animation .timer {
    position: absolute;
    z-index: 4;
    bottom: 2rem;
    left: 2rem;
    width: 34px;
    height: 20px;
    color: white;
    font-size: 20px;
}

.game-animation .message {
    position: absolute;
    top: 4rem;
    color: white;
    left: calc(50% - 175px);
    width: 350px;
    text-align: center;
    font-size: 40px;
}

/** PLAYER POSITIONS */

.game-animation .home.GK {
    top: 50%;
    left: 1%;
    transition: none;
}

.game-animation .home.LD {
    top: 15%;
    left: 11%;
}

.game-animation .home.CD {
    top: 50%;
    left: 11%;
}

.game-animation .home.RD {
    top: 89%;
    left: 11%;
}

.game-animation .home.CM {
    top: 50%;
    left: 27%;
}

.game-animation .home.LM {
    top: 15%;
    left: 27%;
}

.game-animation .home.RM {
    top: 89%;
    left: 27%;
}

.game-animation .home.DM {
    top: 50%;
    left: 21%;
}

.game-animation .home.OM {
    top: 50%;
    left: 30%;
}

.game-animation .home.CA {
    top: 50%;
    left: 40%;
}

.game-animation .home.RA {
    top: 84%;
    left: 40%;
}

.game-animation .home.LA {
    top: 20%;
    left: 40%;
}

.game-animation .away.GK {
    top: 50%;
    right: 1%;
    transition: none;
}

.game-animation .away.LD {
    top: 89%;
    right: 11%;
}

.game-animation .away.CD {
    top: 50%;
    right: 11%;
}

.game-animation .away.RD {
    top: 15%;
    right: 11%;
}

.game-animation .away.CM {
    top: 50%;
    right: 27%;
}

.game-animation .away.LM {
    top: 89%;
    right: 27%;
}

.game-animation .away.RM {
    top: 15%;
    right: 27%;
}

.game-animation .away.DM {
    top: 50%;
    right: 21%;
}

.game-animation .away.OM {
    top: 50%;
    right: 30%;
}

.game-animation .away.CA {
    top: 50%;
    right: 40%;
}

.game-animation .away.RA {
    top: 20%;
    right: 40%;
}

.game-animation .away.LA {
    top: 84%;
    right: 40%;
}

/** PLAYER POSITIONS WHEN PLAYING ANIMATION */

.game-animation.play .home.LD {
    left: 11%;
}

.game-animation.play .home.CD {
    left: 11%;
}

.game-animation.play .home.RD {
    left: 11%;
}

.game-animation.play .home.CM {
    left: 43%;
}

.game-animation.play .home.LM {
    left: 43%;
}

.game-animation.play .home.RM {
    left: 43%;
}

.game-animation.play .home.DM {
    left: 25%;
}

.game-animation.play .home.OM {
    left: 60%;
}

.game-animation.play .home.CA {
    left: 75%;
}

.game-animation.play .home.RA {
    left: 75%;
}

.game-animation.play .home.LA {
    left: 75%;
}


.game-animation.play .away.LD {
    right: 11%;
}

.game-animation.play .away.CD {
    right: 11%;
}

.game-animation.play .away.RD {
    right: 11%;
}

.game-animation.play .away.CM {
    right: 43%;
}

.game-animation.play .away.LM {
    right: 43%;
}

.game-animation.play .away.RM {
    right: 43%;
}

.game-animation.play .away.DM {
    right: 25%;
}

.game-animation.play .away.OM {
    right: 60%;
}

.game-animation.play .away.CA {
    right: 75%;
}

.game-animation.play .away.RA {
    right: 75%;
}

.game-animation.play .away.LA {
    right: 75%;
}