.player_effects-container {
    width: auto;
    height: min(17vw, 34vh);
    display: none;
    aspect-ratio: 0.9;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    z-index: 2;
    translate: 0 -50%;
    opacity: 0;
    transition: opacity 0.5s;
}

.player_1_effects-container {
    left: 3%;
}

.player_2_effects-container {
    right: 3%;
}

.game-container[data-gamemode="battle"] .player_effects-container,
.game-container[data-gamemode="rival"] .player_effects-container {
    display: flex;
}

.game-container[data-gamemode="boss"] .player_1_effects-container {
    display: flex;
}

.player_effect-container {
    --outline_color: #8055b9;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.125vw, -0.25vh));
    --duration: 20;
    --colorratio: 0;
    --mpratio: 0;
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Mikado";
    font-size: min(1.25vw, 2.5vh);
    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);
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    background: linear-gradient(180deg, #5a5aadd9, #8a8ae9);
    /* border: min(0.275vw, 0.55vh) solid white;
    border: min(0.25vw, 0.5vh) 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,
        0 0 min(0.125vw, 0.25vh) min(0.25vw, 0.5vh) white; */
    transform: skewX(-3deg);
    position: relative;
    transition: border 0.15s, box-shadow 0.2s;
}

.game-container[data-gamemode="rival"] {
    .player_effect_1-container:not([data-available="true"]),
    .player_effect_2-container:not([data-available="true"]) {
        filter: grayscale(0.9);
        filter: saturate(0.2);
    }
}

.game-container[data-gamemode="boss"] {
    .player_effect_1-container:not([data-available="true"]),
    .player_effect_2-container:not([data-available="true"]),
    .player_effect_3-container:not([data-available="true"]) {
        filter: grayscale(0.9);
        filter: saturate(0.2);
    }
}

.game-container[data-gamemode="battle"] {
    .player_effect-container[data-available="true"] .player_effect_color-background {
        /* box-shadow: 0 0 min(1vw, 2vh) min(0.625vw, 1.25vh) hsl(var(--h), var(--s), var(--cb)); */
        --halo_color: hsl(var(--h), var(--s), var(--cb));
        animation: haloanimation 0.75s linear alternate infinite;
    }
}

.game-container[data-gamemode="rival"] {
    .player_effect_1-container[data-available="true"],
    .player_effect_2-container[data-available="true"] {
        /* box-shadow: 0 0 min(1vw, 2vh) min(0.625vw, 1.25vh) #ffffffb3; */
        --halo_color: #ffffffb3;
        animation: haloanimation 0.75s linear alternate infinite;
    }
    .player_effect_3-container[data-available="true"] .player_effect_color-background {
        /* box-shadow: 0 0 min(1vw, 2vh) min(0.625vw, 1.25vh) hsl(var(--h), var(--s), var(--cb)); */
        --halo_color: hsl(var(--h), var(--s), var(--cb));
        animation: haloanimation 0.75s linear alternate infinite;
    }
}

.game-container[data-gamemode="boss"] {
    .player_effect_1-container[data-available="true"],
    .player_effect_2-container[data-available="true"],
    .player_effect_3-container[data-available="true"] {
        /* box-shadow: 0 0 min(1vw, 2vh) min(0.625vw, 1.25vh) #ffffffb3; */
        --halo_color: #ffffffb3;
        animation: haloanimation 0.75s linear alternate infinite;
    }
}

@keyframes haloanimation {
    from { box-shadow: 0 0 min(0.5vw, 1vh) min(0.25vw, 0.5vh) var(--halo_color); }
    to { box-shadow: 0 0 min(1vw, 2vh) min(0.625vw, 1.25vh) var(--halo_color); }
}

@media not all and (hover: none) {
    .player_effect-container:not([data-available="false"]):hover {
        cursor: pointer;
        /* border: min(0.25vw, 0.5vh) solid #f5a9f1; */
        filter: brightness(105%);
    }
}

.player_effect-container:not(.running, [data-available="true"]) {
    pointer-events: none;
}

/* .player_effect_1-container::after,
.player_effect_2-container::after,
.player_effect_3-container::after {
    content: "";
    width: calc(100% - (var(--mpratio) * 100%));
    height: 100%;
    display: block;
    background-color: #8a8a8a99;
    background-color: #36363699;
    filter: saturate(0.9);
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
    z-index: 1;
    transition: width 0.15s;
}

.player_effect_1-container.running::after,
.player_effect_2-container.running::after,
.player_effect_3-container.running::after {    
    visibility: visible;
    z-index: 1;
    animation-name: effectrunning;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
}

@keyframes effectrunning {
    0% { --mpratio: 0; }
    100% { --mpratio: 1; }
} */

/* .player_effect_1-container {
    background: linear-gradient(180deg, #9e92f5b7, #9d92f5);
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.2vw, 0.4vh) #9d92f5, min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) 0 #443858c2;
}

.player_effect_2-container {
    background: linear-gradient(180deg, #f17d39af, #f17d39);
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.2vw, 0.4vh) #f17d39, min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) 0 #443858c2;
}

.player_effect_3-container {
    background: linear-gradient(180deg, #fff94db0, #fffa4d);
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.2vw, 0.4vh) #fffa4d, min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) 0 #443858c2;
} */

.player_effect_key_level_mp-container {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.player_effect_mp-container {
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.player_effect_key-container,
.player_effect_level-container {
    width: fit-content;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.player_effect_key-container {
    padding-left: 6%;
    gap: 8%;
}

[data-available="false"] .player_effect_key-container {
    filter: brightness(0.8);
}

.player_effect_key,
.player_effect_mp,
.player_effect_level {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.player_effect_key,
.player_effect_mp {
    width: auto;
    aspect-ratio: 1;
    font-size: min(1.375vw, 2.75vh);
}

.player_effect_key {
    --outline_width: 0.2;
    --plus_ow: calc(var(--outline_width) * min(0.375vw, 0.75vh));
    --minus_ow: calc(var(--outline_width) * min(-0.375vw, -0.75vh));
    width: auto;
    height: 66%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 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);
}

.player_effect_key {
    font-size: min(1.25vw, 2.5vh);
    color: khaki;
    color: #c8b3e5;
}

.player_effect_mp {
    color: greenyellow;
    color: mintcream;
    padding-right: 13%;
    justify-content: end;
}

[data-available="true"] .player_effect_mp {
    color: gold;
    animation: effectready 0.75s linear infinite alternate;
}

@keyframes effectready {
    to {
        filter: brightness(120%);
        transform: scale(1.025)
    }
}

.player_effect_level {
    width: fit-content;
    height: 100%;
    /* color: aquamarine; */
}

.player_effect_name-container {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    position: relative;
}

/* .player_effect_1-container .player_effect_name {
    color: #9d92f5;
}

.player_effect_2-container .player_effect_name {
    color: #f17d39;
}

.player_effect_3-container .player_effect_name {
    color: #fffa4d;
} */

.player_effect_state i {
    color: gold;
}

.player_effect-container:not([data-state="xtra"]) .player_effect_state {
    display: none;
}

.player_effect_icon-container {
    width: auto;
    height: 50%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 4%;
    translate: 0 -50%;
}

.player_effect_icon {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.game-container[data-gamemode="battle"] {
    .player_effect-container .player_effect_color-background {
        z-index: -1;
        width: calc(var(--colorratio) * 100%);
        transition: width 0.15s;
    }
    .player_effect_icon-container {
        display: none;
    }
}

.game-container[data-gamemode="rival"] {
    .player_effect_3-container .player_effect_icon-container {
        display: none;
    }
    .player_effect_3-container .player_effect_color-background {
        z-index: -1;
        width: calc(var(--colorratio) * 100%);
        transition: width 0.15s;
    }
    .player_effect_3-container.running .player_effect_color-background {
        animation-name: effectrunninganim1, effectrunninganim2;
        animation-duration: calc(var(--duration) * 1s), calc(var(--duration) * 0.025s);
        animation-timing-function: linear, linear;
        animation-direction: normal, alternate;
        animation-iteration-count: 1, infinite;
        animation-play-state: running;
    }
}

/* .player_effect_3-container .player_effect_color-background {
    z-index: -1;
    width: calc(var(--colorratio) * 100%);
    transition: width 0.15s;
}

.player_effect_3-container.running .player_effect_color-background {
    animation-name: effectrunninganim1, effectrunninganim2;
    animation-duration: calc(var(--duration) * 1s), calc(var(--duration) * 0.025s);
    animation-timing-function: linear, linear;
    animation-direction: normal, alternate;
    animation-iteration-count: 1, infinite;
} */
    
@keyframes effectrunninganim1 {
    0% { width: 100%; }    
    100% { width: 0; }
}
    
@keyframes effectrunninganim2 {
    0% { filter: brightness(90%); }    
    100% { filter: brightness(110%); }
}