.controls-container {
    width: 13%;
    height: auto;
    aspect-ratio: 3/2;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    position: absolute;
    bottom: 1.5%;
    right: 20%;
    opacity: 0;
    transition: opacity 0.5s;
}

.player_2_controls {
    display: none;
    bottom: 1%;
    right: 2%;
}

.game-container[data-controls="p1"] {
    .player_1_controls {
        display: grid;
    }
    .player_2_controls {
        display: none;
    }
}

.game-container[data-controls="p2"] {
    .player_1_controls {
        display: none;
    }
    .player_2_controls {
        display: grid;
    }
}

.game-container[data-controls="none"] {
    .player_1_controls {
        display: none;
    }
    .player_2_controls {
        display: none;
    }
}

.control-container {
    --outline_color: #766299f5;
    --outline_width: 0.35;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, min(0.5vw, 1vh)));
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: min(3.5vw, 7vh);
    height: auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    /* border: min(0.275vw, 0.55vh) solid white; */
    border: min(0.225vw, 0.45vh) solid white;
    border-radius: 50%;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
    /* box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9,
        min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.3vw, 0.6vh) 0 #443858c2,
        0 0 min(0.125vw, 0.25vh) min(0.25vw, 0.5vh) white; */
    /* transform: skewX(-3deg); */
    cursor: pointer;
    transition: filter 0.2s, translate 0.1s, box-shadow 0.2s;
}

@media (any-hover: hover) {
    .control-container:hover {
        filter: brightness(110%);
        & .control {
            color: gold;
        }
    }
}

.control-container:active {
    translate: 5% 5%;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, 0 0 0 0 #443858c2;
}

.control {
    font-size: min(1.8vw, 3.6vh);
    /* font-size: min(1vw, 2vh); */
    color: white;
    text-shadow: var(--plus_ow) var(--plus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--plus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--plus_ow) 0 var(--outline_color);
    transition: color 0.2s;
}

@media screen and (orientation:landscape) and (max-width: 1024px) {
    /* .player_1_controls {
        width: 15%;
        bottom: 1%;
        right: 20%;
    } */

    /* .control-container {
        width: min(4.25vw, 8.5vh);
    } */
}