.game_special_gauges-container {
    width: auto;
    height: min(25vw, 50vh);
    aspect-ratio: 1.1;
    display: none;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 2%;
    position: absolute;
    top: 50%;
    right: 3%;
    translate: 0 -50%;
    opacity: 0;
    transition: opacity 0.5s;
}

.player_2_game_special_gauges-container {
    display: none;
}

.game-container[data-gamemode="arcade"] .player_1_game_special_gauges-container {    
    display: grid;
}

.game-container[data-playermode="online"][data-gamemode="arcade"],   
.game-container[data-playermode="versus"][data-gamemode="arcade"] {
    .game_special_gauges-container {
        height: min(17.5vw, 35vh);
    }
    .player_1_game_special_gauges-container {
        left: 1%;
    }
    .player_2_game_special_gauges-container {
        display: grid;
        right: 1%;
        left: unset;
    }
}

.game_special_gauge-container {
    --outline_color: #8055b9;
    --outline_width: 0.25;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 90%;
    height: auto;
    aspect-ratio: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    border: min(0.275vw, 0.55vh) solid white;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.2vw, 0.4vh) #8055b9,
            min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) 0 #443858c2;
    transform: skewX(-3deg);
}

.game_special_gauge-container::before {
    content: attr(data-display);
    width: fit-content;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    font-family: "Mikado";
    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);
    position: absolute;
    top: -65%;
    right: 6%;
}

.game_special_gauge-container[data-state="xtra"]::after {
    width: auto;
    height: min(1vw, 2vh);
    aspect-ratio: 1;
    display: inline-block;
    font-size: min(1vw, 2vh);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f005";
    /* font-size: min(0.45vw, 0.9vh); */
    color: gold;
    text-shadow: min(0.0625vw, 0.125vh) min(0.0625vw, 0.125vh) min(0.125vw, 0.25vh) gold;
    position: absolute;
    top: -47%;
    right: -6%;
}

.game_special_gauge {
    --ratio: 0;
    width: 88%;
    height: 50%;
    background: linear-gradient(0deg, #3d3c3c, #020202);
    border: min(0.15vw, 0.3vh) solid #5a5a5a94;
    position: relative;
    transform: skewX(3deg);
}

.game_special_gauge_1 {
    --ct: 55%;
    --cb: 48%;
    --h: 60;
    --s: 100%;
}

.game_special_gauge_2 {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 100%;
}

.game_special_gauge_3 {
    --ct: 68%;
    --cb: 67%;
    --h: 240;
    --s: 100%;
}

.game_special_gauge_4 {
    --ct: 46%;
    --cb: 44%;
    --h: 120;
    --s: 75%;
}

.game_special_gauge_5 {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 0%;
}

.game_special_gauge_6 {
    --ct: 86%;
    --cb: 84%;
    --h: 0;
    --s: 100%;
}

.game_special_gauge_7 {
    --ct: 55%;
    --cb: 48%;
    --h: 300;
    --s: 76%;
}

.game_special_gauge_8 {
    --ct: 60%;
    --cb: 58%;
    --h: 39;
    --s: 100%;
}

.game_special_gauge_9 {
    --ct: 55%;
    --cb: 48%;
    --h: 174;
    --s: 77%;
}

.game_special_gauge_10 {
    --ct: 55%;
    --cb: 48%;
    --h: 320;
    --s: 100%;
}

.game_special_gauge::after {
    content: "";
    width: calc(var(--ratio) * 100%);
    height: 100%;
    background: linear-gradient(90deg, hsl(var(--h), var(--s), var(--cb)), hsl(var(--h), var(--s), var(--ct)));
    box-shadow: inset 0 min(-0.05vw, -0.1vh) min(0.05vw, 0.1vh) min(0.1vw, 0.2vh) #5b5a5a5e;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.25s;
}

.game_special_gauge.countdown::after {
    animation: effectcountdown 0.75s linear alternate infinite forwards;
}

@keyframes effectcountdown {
    100% {
        opacity: 0;
    }
}