.game_missions-container {
    width: auto;
    height: min(5vw, 10vh);
    aspect-ratio: 6.25;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    position: absolute;
    top: 50%;
    top: 30%;
    right: 3%;
    opacity: 0;
    translate: 0 -50%;
    transform: skewX(-3deg);
    transition: opacity 0.5s;
}

.game_mission-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --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: 95%;
    height: auto;
    aspect-ratio: 7;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 2%;
    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.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;
    position: relative;
}

.game-container:not([data-mission=""]) {
    .game_mission-container {
        display: flex;
    }
}

.game_mission-container::before {
    content: "mission";
    width: 100%;
    height: auto;
    aspect-ratio: 7;
    padding-left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Mikado";
    font-size: min(1.75vw, 3.5vh);
    text-transform: uppercase;
    color: yellow;
    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: 0;
    right: 0;
    translate: 0 -60%;
    z-index: 1;
}

.game-container[data-gamemode="tour"] .game_mission-container::before {
    content: "target";
}

.game_mission-container::after {
    content: attr(data-description);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Mikado";
    font-size: min(1.375vw, 2.75vh);
    text-transform: uppercase;
    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;
    bottom: 0;
    left: 50%;
    translate: -50% 68%;
    z-index: 1;
}

/* .game_mission-container::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f091";
    font-size: min(1.375vw, 3.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);
    position: absolute;
    bottom: 0;
    left: 50%;
    right: unset;
    translate: -50% 73%;
    z-index: 1;
}

.game_mission-container[data-missionrank="bronze"]::after {
    color: #CD7F32;
}

.game_mission-container[data-missionrank="silver"]::after {
    color: #d3d3d3;
}

.game_mission-container[data-missionrank="gold"]::after {
    color: gold;
} */

.game-container:has([data-mission="line"])  {
    .game_info_lines-container {
        display: none;
    }
}

.game_mission_description,
.game_mission_description_value {
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "Mikado";
    font-size: min(2vw, 4vh);
    color: white;
    text-transform: uppercase;
    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);
}

.game_mission_description_1 {
    justify-content: end;
}

.game_mission_description_value {
    justify-content: end;
    color: #ffe556;
}

.game_mission-container:is([data-description="colors"], [data-description="lines clears"])
{
    .game_mission_description,
    .game_mission_description_value {
        width: 100%;
        gap: 5%;
        justify-content: center;
        align-items: center;
        .game_mission_description_value_quantity_visual {
            width: fit-content;
            height: 66%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5ch;
            .game_mission_description_value_visual[data-type="color"] {
                position: unset;
            }
        }
    }
}

.game_mission_description_value_visual[data-type="color"] {
    --border_width: min(0.3vw, 0.6vh);
    width: auto;
    height: min(2.25vw, 4.5vh);
    aspect-ratio: 1;
    position: unset;
}

.game_mission_description_value_visual[data-type="lineclear"] {
    width: auto;
    height: min(2.5vw, 5vh);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: min(0.325vw, 0.65vh) solid white;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.2vw, 0.4vh) #8055b9,
        min(0.125vw, 0.25vh) min(0.125vw, 0.25vh) min(0.3vw, 0.6vh) 0 #443858c2;
    border-radius: 50%;
    color: white;
    position: relative;
}

.game_mission_description_value_visual[data-type="lineclear"]::after {
    content: attr(data-lineclear);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(1.75vw, 3.5vh);
    position: absolute;
    top: 0;
    left: 0;
}

.game-container:has(
[data-mission="allclear"],
[data-mission="backtoback"],
[data-mission="clearless"],
[data-mission="combo"],
[data-mission="lineclear"],
[data-mission="maxclears"],
[data-mission="maxmoves"]) {
    .game_mission_description_1 {
        display: none;
    }
    .game_mission_description_2 {
        display: flex;
    }
}

.game-container:has([data-mission="color"], [data-mission="lineclear"], [data-mission="time"]) {
    .game_mission_description_1 {
        display: flex;
    }
    .game_mission_description_2 {
        display: none;
    }
}

.game-container:has([data-mission="time"]) {
    .game_mission_description_value {
        --brightness: 100%;
        --scale: 1;
        --duration: 0.25;
        width: 100%;
        justify-content: start;
        padding-left: 38.5%;
        animation-name: missionalert;
        animation-duration: calc(var(--duration) * 1s);
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-play-state: paused;
    }
}

.game-container:not([data-playstatus="gameover"]) {
    .game_mission_description_value.alert {
        --brightness: 105%;
        --scale: 1.025;
        color: #cbaf15;
        animation-play-state: running;
    }
    .game_mission_description_value.urgent {
        --brightness: 110%;
        --scale: 1.05;
        color: #998306;
        animation-play-state: running;
    }
}

@keyframes missionalert {
    100% { filter: brightness(var(--brightness)); scale: var(--scale) }
}

.game-container:has([data-mission="line"][data-playstatus="gameover"]) .game_mission_description_value {
    color: #ff5702;
    transition: color 0.2s;
}

.game-container:has([data-mission="time"][data-playstatus="gameover"]) .game_mission_description_value {
    color: #ff7900;
    transition: color 0.2s;
}

[data-gamemode="arcade"] {
    .game_missions-container {
        top: 20%;
    }
}