main {
    width: 100%;
    height: 100%;
    .loading-container {
        width: min(25vw, 50vh);
        width: min(30vw, 60vh);
    }
    .loading_letter {
        --blocksize: min(5vw, 10vh);
        --blocksize: min(6vw, 12vh);
    }
}

.player_1_gui {
    width: 100%;
    height: min(125vw, 250vh);
    justify-content: center;
    gap: min(3vw, 6vh);
    bottom: 16%;
    left: 50%;
    translate: -50% 0;
    .player_hp-title,
    .player_hp_value,
    .player_mp-title,
    .player_mp_value {
        font-size: min(2.75vw, 5.5vh);
    }
}

.map-container {
    width: 55%;
    height: 100%;
    border: min(0.75vw, 1.5vh) solid white;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.5vw, 1vh) #8055b9,
        min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.5vw, 1vh) 0 #443858c2
}

.map_complete_set[data-effect="perspective"][data-state="normal"] {
    & .map-container {
        rotate: x 7deg;
        translate: 0 -24%;
        transform-origin: 50% 70%;
    }
}

.map_complete_set[data-effect="perspective"][data-state="xtra"] {
    & .map-container {
        rotate: x 18deg;
        translate: 0% -35%;
        transform-origin: 50% 88%;
    }
}

.map_complete_set[data-effect="inception"][data-state="normal"] {
    & .map-container {
        transform-origin: 50% 70%;
    }
}

.map_complete_set[data-effect="inception"][data-state="xtra"] {
    & .map-container {
        transform-origin: 50% 88%;
    }
}

.map_center_play {
    height: min(100vw, 200vh);
}

.map_center_messages {
    --outline_width: 0.75;
    --plus_ow: calc(var(--outline_width) * min(1vw, 2vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
}

.map_center_messages.anim_gameover .mcm_gameover {
    line-height: min(6vw, 12vh);
}

.map_center_messages span {
    font-size: min(15vw, 30vh);
}

.map_center_messages.anim_ready .mcm_ready span {
    font-size: min(12.5vw, 25vh);
}

.map_center_messages.anim_levelup .mcm_levelup span {
    font-size: min(8vw, 16vh);
}

.map_center_messages.anim_tetris .mcm_tetris span {
    font-size: min(12.5vw, 25vh);
}

.map_center_messages.anim_backtoback .mcm_backtoback span {
    font-size: min(6vw, 12vh);
}

.map_center_messages.anim_combo .mcm_combo span {
    font-size: min(8vw, 16vh);
}

.map_center_messages.anim_allclear .mcm_allclear span {
    font-size: min(10vw, 20vh);
}

.map_center_messages.anim_1 .mcm_1 span,
.map_center_messages.anim_2 .mcm_2 span,
.map_center_messages.anim_3 .mcm_3 span {
    font-size: min(17.5vw, 35vh);
}

.map_tetromino_hold-container {
    width: 22.5%;
    aspect-ratio: 1;
    /* height: 25%; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.game-container:is([data-gamemode="picture"], [data-gamemode="break"], [data-gamemode="puzzle"]) {
    .map_tetromino_hold-container {
        height: 59.75%;
        aspect-ratio: unset;
        gap: 2%;
        .map_tetromino_picture {
            width: 80%;
            border: min(0.625vw, 1.25vh) solid white;
        }
    }
}

.map_tetromino_hold,
.map_tetromino_next.next_1 {
    width: 80%;
    height: auto;
    padding-top: 25%;
    aspect-ratio: 1;
    border: min(0.625vw, 1.25vh) solid white;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.5vw, 1vh) #8055b9,
            min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.5vw, 1vh) 0 #443858c2;
}

.map_tetromino_hold::before,
.map_tetromino_next.next_1::before {
    font-size: min(3.5vw, 7vh);
}

.map_tetromino_next.next_1::after {
    width: min(2.75vw, 5.5vh);
    height: min(2.75vw, 5.5vh);
    font-size: min(1.625vw, 3.25vh);
}

.map_tetromino_next-container {
    width: 22.5%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1%;
    align-items: center;
}

.map_tetromino_next.next_2,
.map_tetromino_next.next_3 {
    width: 70%;
    height: auto;
    aspect-ratio: 1;
    border: min(0.625vw, 1.25vh) solid white;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.5vw, 1vh) #8055b9,
            min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.5vw, 1vh) 0 #443858c2;
}

.shape-container {
    grid-template-columns: repeat(var(--columns), min(2.5vw, 5vh));
    grid-template-rows: repeat(var(--rows), min(2.5vw, 5vh));
}

.map_tetromino_case .brick {
    --border_width: min(0.375vw, 0.75vh);
}

.tetris_grid_square,
.nongrid_square {
    box-shadow: 0 0 0 min(0.375vw, 0.75vh) #403f3f2b;
}

.map_complete_set::before,
.map_complete_set::after {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(2vw, 4vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    height: 5%;
    font-size: min(8vw, 16vh);
}

.player_event_display_icon-container {
    width: min(5vw, 10vh);
}

.player_infos {
    width: 62%;
    height: 8%;
}

.player_avatar-container {
    border: min(0.15vw, 0.3vh) solid #6b6bdb;
}

.player_1_gui .player_name-container {
    padding-bottom: min(0.2vw, 0.4vh);
    font-size: min(3vw, 6vh);
    border-top: min(0.55vw, 1.1vh) solid var(--bdcolor);
    border-right: min(0.55vw, 1.1vh) solid var(--bdcolor);
    border-bottom: min(0.55vw, 1.1vh) solid var(--bdcolor);
    border-radius: 0 min(1vw, 2vh) min(1vw, 2vh) 0;
    box-shadow: inset min(-0.2vw, -0.4vh) 0 0 min(0.2vw, 0.4vh) #ffff;
    box-shadow: 0 0 0 min(0.125vw, 0.25vh) #5a4a727a, min(0.05vw, 0.1vh) min(0.1vw, 0.2vh) 0 min(0.125vw, 0.25vh) #4438588c;
}

.game-container[data-gamemode="arcade"] {
    .game_special_gauges-container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }

    .player_1_game_special_gauges-container {
        height: min(40vw, 80vh);
        aspect-ratio: 0.5;
        row-gap: 5%;
        top: 50%;
        left: 1.25%;
        translate: 0 -50%;

        .game_special_gauge-container {
            --outline_width: 0.2;
            --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
            --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
        }
    }
}

.game-container[data-playermode="online"][data-gamemode="arcade"],
.game-container[data-playermode="versus"][data-gamemode="arcade"] {
    .game_special_gauges-container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }
    .player_1_game_special_gauges-container {
        height: min(40vw, 80vh);
    }
    .player_2_game_special_gauges-container {
        height: min(22vw, 44vh);
        aspect-ratio: 0.5;
        row-gap: 5%;
        top: 13%;
        right: 23%;
        .game_special_gauge-container {
            --outline_width: 0.2;
            --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
            --minus_ow: calc(var(--outline_width) * min(-0.125vw, -0.25vh));
        }
        .game_special_gauge-container::before {
            font-size: min(1.1vw, 2.2vh);
            top: -70%;
        }
        .game_special_gauge-container[data-state="xtra"]::after {
            font-size: min(1.1vw, 2.2vh);
            top: -70%;
            right: -10%;
        }
    }
}

.game_special_gauge-container {
    border: min(0.5vw, 1vh) solid white;
}

.game_special_gauge-container::before {
    font-size: min(1.625vw, 3.25vh);
}

.game_special_gauge-container[data-state="xtra"]::after {
    font-size: min(1.625vw, 3.25vh);
    top: -47%;
    right: -7%;
}

.controls-container {
    width: 30%;
    bottom: 3%;
    left: 50%;
    translate: -50% 0;
}

.control-container {
    --outline_width: 0.4;
    --plus_ow: calc(var(--outline_width) * min(0.75vw, 1.5vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
    width: min(9vw, 18vh);
    border: min(0.275vw, 0.55vh) solid white;
}

.control {
    font-size: min(4.5vw, 9vh);
}

.special_options-container {
    width: 25%;
    top: 2%;
    left: 5%;
}

.leave_game-container {
    width: 25%;
    top: 2%;
    right: 5%;
}

.webview .leave_game-container {
    width: 25%;
}

.sound_on_off-container,
.fullscreen_switch-container,
.pause-container,
.screen-container,
.reload-container,
.go_to_menu-container {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
    width: min(7.5vw, 15vh);
}

.sound_on_off,
.screen,
.reload,
.fullscreen_switch,
.pause,
.go_to_menu {
    font-size: min(3.7vw, 7.4vh);
}

.game_infos-container {
    width: 95%;
    height: auto;
    aspect-ratio: 25;
    flex-direction: row;
    gap: 1.25%;
    justify-content: space-evenly;
    top: 10%;
    left: 50%;
    translate: -50% 0;
}

.game-container[data-gamemode="picture"] .game_infos-container {
    height: auto;
    aspect-ratio: 25;
}

.game_info-container {
    --outline_width: 0.25;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
    height: 100%;
    width: auto;
    aspect-ratio: 6.25;
    .game_info_rewards-container {
        gap: 5%;
        font-size: min(1.25vw, 2.5vh);
        top: 0;
        right: 0;
        translate: 50% -80%;
    }
}

.game_info_moves-container,
.game_info_clears-container,
.game_info_nexts-container,
.game_info_falseclears-container,
.game_info_lines-container {
    aspect-ratio: 4.2;
}

.game-container[data-gamemode="picture"] .game_info_time-container {
    aspect-ratio: 5;
    .game_info_time-value {
        width: 45%;
    }
}

.game-container[data-gamemode="timeattack"] .game_info_mode-container {
    aspect-ratio: 7;
    .game_info_mode-value {
        width: 70%;
    }
}

.game-container:is([data-gamemode="break"], [data-gamemode="picture"], [data-gamemode="puzzle"]) .game_info_mode-container::before {
    font-size: min(1.25vw, 2.5vh);
    translate: -50% -60%;
}

.game_info_mode-container:is([data-reward="bronze"], [data-reward="silver"], [data-reward="gold"])::after {
    font-size: min(1.1vw, 2.2vh);
}

.game_info-title,
.game_info-value {
    font-size: min(2.1vw, 4.2vh);
    padding-top: 1%;
}

.game_info_best-container {
    --outline_width: 0.25;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
}

.game_info_best-title,
.game_info_best-value {
    font-size: min(1.35vw, 2.7vh);
}

.game_info_best-title {
    width: 62.5%;
    padding-left: 6%;
}

.game_info_best-value {
    width: 37.5%;
    padding-right: 5%;
}

.game_info_time-value {
    width: 37.5%;
}

.game_missions-container {
    height: min(5vw, 10vh);
    aspect-ratio: 6.25;
    justify-content: start;
    position: absolute;
    top: 17%;
    left: 50%;
    translate: -50% 0;
    .game_mission-container {
        --outline_color: #766299f5;
        --outline_width: 0.2;
        --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.25vw, -0.5vh));
        aspect-ratio: 6.25;
        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;
        .game_mission-value::before {
            aspect-ratio: 7;
            font-size: min(1.45vw, 2.9vh);
            translate: 0 -59%;
        }
    }
}

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

.game-container:not([data-mission=""]) {
    .game_infos-container {
        top: 8%;
    }
    .game_missions-container {
        top: 13%;
    }
    .player_1_gui {
        bottom: 14%;
    }
    .controls-container {
        bottom: 2%;
    }
}

.game-container:is([data-playermode="versus"], [data-playermode="online"], [data-gamemode="boss"]) {
    .game_infos-container {
        display: none;
    }
    .player_1_gui {
        bottom: 15%;
        left: 50%;
        translate: -50% 0;
        .map_garbage_gauge-container {
            right: 15%;
        }
    }
    .player_2_gui {
        width: 100%;
        height: min(125vw, 250vh);
        justify-content: center;
        flex-direction: column-reverse;
        gap: min(2vw, 4vh);
        top: -17%;
        bottom: unset;
        left: 50%;
        translate: -50% 0;
        scale: 0.32;
        .player_2_gui .map_garbage_gauge-container {
            left: 15%;
        }
        .player_name-container {
            font-size: min(3vw, 6vh);
            border-radius: min(1.25vw, 2.5vh) 0 0 min(1.25vw, 2.5vh);
        }
        .player_hp-container,
        .player_mp-container {
            top: 0;
            translate: 0 -55%;
            .player_hp-title,
            .player_hp_value,
            .player_mp-title,
            .player_mp_value {
                font-size: min(3vw, 6vh);
            }
        }
    }
    .map_garbage_gauge-container {
        width: 3.5%;
        height: 45%;
    }
    .match_points-container {
        width: 17.5%;
        aspect-ratio: 5.5;
        top: 22%;
        left: unset;
        right: 4%;
        bottom: unset;
        translate: 0 0;
        .player_match_points-container {
            padding-top: 1.125%;
        }
    }
    .game_lines_to_clear-container, .game_timer-container, .game_hp_over-container {
        top: 22%;
        left: 4%;
        right: unset;
        bottom: unset;
        translate: 0 0;
    }
    .player_1_effects-container {
        height: min(22vw, 44vh);
        left: 1.75%;
    }
    .player_2_effects-container {
        top: 15.5%;
        right: 21%;
    }
    .player_1_controls {
        bottom: 3%;
        left: 50%;
        translate: -50% 0;
    }
    .player_2_controls {
        display: none;
    }
    .boss-container {
        flex-direction: column-reverse;
        top: 3%;
        left: 50%;
        z-index: 1;
        translate: -50% 0;
    }
    .boss_dialog-container {
        width: min(55vw, 110vh);
        translate: 52% 74%;
        transform: rotateX(180deg) rotateY(0deg);
        opacity: 0.9;
    }    
    .boss_dialog_text {
        font-size: min(2.25vw, 5.5vh);
        transform: rotateX(-180deg);
    }
}

.map_center_messages.anim_clear .mcm_clear span,
.map_center_messages.anim_winner .mcm_winner span,
.map_center_messages.anim_gameover .mcm_gameover span {
    font-size: min(15vw, 30vh);
}

.map_center_messages.anim_tetris .mcm_tetris span {
    font-size: min(10vw, 20vh);
}

.boss-container[data-character="tikitaka"] .boss_character {
    height: 75%;
}

.boss-container[data-character="cleopatra"],
.boss-container[data-character="edwardmarshall"],
.boss-container[data-character="lancelot"],
.boss-container[data-character="evilpresence"],
.boss-container[data-character="tikitaka"],
.boss-container[data-character="willanno"],
.boss-container[data-character="carbuncle"],
.boss-container[data-character="popoi"] {
    .boss_dialog-wrapper {
        scale: 1;
        top: 0;
        left: unset;
        right: 0;
        rotate: unset;
        .boss_dialog_text {
            rotate: unset;
        }
    }
}

.boss-container[data-character="cleopatra"] .boss_dialog-wrapper {
    top: 0;
    right: 0;
}

.boss-container[data-character="edwardmarshall"] .boss_dialog-wrapper {
    top: 6%;
    right: 8%;
}

.boss-container[data-character="lancelot"] .boss_dialog-wrapper {
    top: 5%;
    right: 5%;
}

.boss-container[data-character="evilpresence"] .boss_dialog-wrapper {
    top: 32%;
    right: 46%;
}

.boss-container[data-character="tikitaka"] .boss_dialog-wrapper {
    top: 45%;
}

.boss-container[data-character="willanno"] .boss_dialog-wrapper {
    top: 90%;
    right: 0;
    rotate: x 180deg;
    .boss_dialog_text {
        rotate: x 180deg;
    }
}

.boss-container[data-character="popoi"] .boss_dialog-wrapper {
    top: 32%;
    right: 23%;
}

.boss-container[data-character="carbuncle"] .boss_dialog-wrapper {
    top: 43%;
    right: 5%;
}

.cut_scenes_character-container {
    height: 32%;
    translate: 0 -20%;
}

.cut_scenes_character-container:not(
[data-charactername="cleopatra"],
[data-charactername="rogergold"],
[data-charactername="edwardmarshall"],
[data-charactername="lancelot"],
[data-charactername="kingrobert"],
[data-charactername="tikitaka"],
[data-charactername="willanno"],
[data-charactername="carbuncle"],
[data-charactername="popoi"]
) .cut_scenes_character {
    height: 90%;
    object-fit: contain;
}

.cut_scenes_character_dialog-container {
    width: min(82.5vw, 165vh);
    translate: 60% -70%;
}

.cut_scenes_character_dialog_text {
    font-size: min(3.25vw, 6.5vh);
}

.cut_scenes_dialog_actions-container {
    width: 30%;
    translate: 0 -100%;
}

.cut_scenes_dialog_action-button {
    height: 100%;
    font-size: min(2vw, 4vh);
}

.cut_scenes_dialog_action-title {
    font-size: min(3vw, 6vh);
}

.cut_scenes_title-container {
    --outline_color: white;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
    .cut_scenes_title {
        span {
            font-size: min(14vw, 18vh);
            line-height: min(14vw, 18vh);
        }
    }
}

.messages-container .message {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.375vw, 0.75vh));
    --minus_ow: calc(var(--outline_width) * min(-0.375vw, -0.75vh));
    flex-direction: column;
    .mission_description_value {
        gap: 0.5ch;
        .mission_description_value_visual[data-type="color"] {
            --border_width: min(0.6vw, 1.2vh);
        }
        .mission_description_value_visual[data-type="lineclear"] {
            height: 66%;
            border: min(0.6vw, 1.2vh) solid white;
            font-size: min(5.5vw, 11vh);
        }
    }
}

.cup_reward-container {
    flex-direction: column;
    .cup_reward {
        font-size: min(35vw, 70vh);
    }
    .cup_reward::after {
        font-size: min(4vw, 8vh);
        translate: 0 150%;
    }
}

.game_options_retry_difficulty_next_change-container {
    height: auto;
    width: 100%;
    margin-left: 20%;
    display: flex;
    padding-left: 0;
    align-items: start;
}

.game_option_back_to_menu-container,
.game_option_difficulty-container,
.game_option_retry-container,
.game_option_next-container,
.game_option_change-container {
    /* width: min(60vw, 120vh); */
    width: 100%;
    aspect-ratio: 5;
    /* aspect-ratio: 6.5; */
}

.game_option-button {
    height: 67%;
    /* font-size: min(5vw, 10vh); */
    /* font-size: min(4.5vw, 9vh); */
    font-size: min(5.625vw, 11.25vh);
}

.game_option-title {
    font-size: min(6vw, 12vh);
    /* font-size: min(5vw, 10vh); */
}

.game_option_change-title {
    justify-content: start;
    gap: 4%;
}

.mission_description_value {
    .mission_description_value_visual[data-type="lineclear"] {
        --outline_width: 0.2;
        --plus_ow: calc(var(--outline_width) * min(0.25vw, 0.5vh));
        --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
        height: min(5.5vw, 11vh);
        border: min(0.75vw, 1.5vh) solid white;
        font-size: min(4vw, 8vh);
    }

    .mission_description_value_visual[data-type="color"] {
        --border_width: min(0.6vw, 1.2vh);
        height: min(4vw, 8vh);
    }
}

.game_mode_items_selection-container {
    grid-template-columns: 1fr 6fr 1fr;
}

.game_mode_items_selection_list {
    height: 85%;
    padding: 8% 4%;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 1%;
}


.game_mode_items_selection_list:is([data-gamemode="break"], [data-gamemode="picture"], [data-gamemode="puzzle"]) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.game_mode_items_selection_list[data-gamemode="mission"] {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9, 1fr);
    column-gap: 1%;
}

.game_mode_items_selection_list[data-gamemode="tour"],
.game_mode_items_selection_list[data-gamemode="adventure"] {
    padding: 6%;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
    row-gap: 1.5%;
    .game_mode_item_tour_display,
    .game_mode_item_level_display {
        --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: 100%;
        .game_mode_item_tour_display_text {
            font-size: min(5vw, 10vh);
        }
        .game_mode_item_level_display_text {
            font-size: min(3.5vw, 7vh);
        }
    }
}

.game_mode_items_selection_list[data-gamemode="boss"] {
    padding: 6%;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 1%;
    .game_mode_item_tour_display {
        --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: 100%;
        .game_mode_item_tour_display_text {
            font-size: min(5vw, 10vh);
        }
    }
}

.game_mode_items_selection_list.random::after {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    font-size: min(25vw, 50vh);
}

.game_mode_items_selection_nav-container {
    width: 100%;
}

.game_mode_items_selection_actions {
    height: 15%;
    gap: 4%;
}

.game_mode_items_selection_action-container {
    gap: 0.65ch;
}

.game_mode_items_selection-button {
    width: auto;
    height: min(7.5vw, 15vh);
    border: min(0.275vw, 0.55vh) solid white;
    font-size: min(3.7vw, 7.4vh);
    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;
}

.game_mode_items_selection-title {
    font-size: min(4vw, 8vh);
}

.game_mode_items_selection_action_difficulty-title {
    font-size: min(2.5vw, 5vh);
}

/* PICTURES */

.game_mode_item_picture {
    height: 90%;
}

.game_mode_item_picture_achievements {
    height: 10%;
    gap: 10%;
    left: 50%;
    translate: -50% -75%;

    i {
        --outline_width: 0.3;
        --plus_ow: calc(var(--outline_width) * min(0.25vw, 0.5vh));
        --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
        font-size: min(1.5vw, 3vh);
    }
}

/* MISSIONS */

.game_mode_item_mission-case {
    --outline_width: 0.25;
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
    .game_mode_item_mission_display {
        width: 75%;
        aspect-ratio: 5;
        font-size: min(3vw, 6vh);
        border: min(0.625vw, 1.25vh) 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, */
            min(0.3vw, 0.6vh) min(0.375vw, 0.75vh) min(0.5vw, 1vh) min(0.25vw, 0.5vh) #dddddd4f;
        .game_mode_item_mission_display_text {
            gap: 0.5ch;

            .mission_description_value {
                gap: 0.25ch;

                .mission_description_value_visual[data-type="color"] {
                    --border_width: min(0.35vw, 0.7vh);
                    height: min(2vw, 4vh);
                }

                .mission_description_value_visual[data-type="lineclear"] {
                    height: min(2vw, 4vh);
                    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.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.3vw, 0.6vh) 0 #443858c2;
                    font-size: min(1.5vw, 3vh);
                }
            }
        }

        .game_mode_item_mission_display_cup,
        .game_mode_item_mission_display_form {
            --padding: min(1.25vw, 2.5vh);
            width: 50%;
            height: min(2.5vw, 5vh);
            font-size: min(2vw, 4vh);
            translate: 0 80%;
        }

        .game_mode_item_mission_display_form {
            justify-content: end;
            padding-right: var(--padding);
            color: red;
            color: #9de4ff;
            right: 0%;
        }

        .game_mode_item_mission_display_cup_display {
            font-size: min(1.5vw, 3vh);
            top: 0;
            left: 50%;
            translate: -50% -74%;
        }
    }

    .game_mode_item_mission_display:hover {
        border: min(0.625vw, 1.25vh) solid #ff0000bd;
    }

    .game_mode_item_mission_display.selected {
        border: min(0.625vw, 1.25vh) solid gold;
        box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9,
            0 0 0 0 #dddddd4f;
        box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9,
                0 0 min(1vw, 2vh) min(0.75vw, 1.5vh) #f9f3d1,
                0 0 0 0 #dddddd4f;
        /* scale: 0.9875;
        translate: min(0.125vw, 0.25vh) min(0.125vw, 0.25vh); */
    }

    .game_mode_item_mission_display::before,
    .game_mode_item_mission_display::after {
        --padding: min(1.25vw, 2.5vh);
        width: 50%;
        height: min(2.5vw, 5vh);
        font-size: min(2vw, 4vh);
        translate: 0 -63%;
    }
}

@media not all and (hover: none) {
    .game_mode_item_mission_display {
        border: min(0.625vw, 1.25vh) solid white;
    }
}

.player_1_gui:has(.map_center_messages[data-content="loser"]),
.player_1_gui:has(.map_center_messages[data-content="gameover"]),
.player_2_gui:has(.map_center_messages[data-content="loser"]),
.player_2_gui:has(.map_center_messages[data-content="gameover"]) {
    animation: fallanimation 1.5s forwards;
    .character_win_lose_pose-container {
        animation: loseanimation 1.25s 2s forwards, winloseanimation 1.375s 4s linear infinite;
    }
}

.player_2_gui:has(.map_center_messages[data-content="loser"]),
.player_2_gui:has(.map_center_messages[data-content="gameover"]) {
    --fall1: 180%;
    --fall2: 200%;
    --rise1: -620%;
    --rise2: -610%;
    --comeback: -612%;
}

.player_1_gui:has(.map_center_messages[data-content="loser"]),
.player_1_gui:has(.map_center_messages[data-content="gameover"]) {
    --fall1: 110%;
    --fall2: 130%;
    --rise1: -130%;
    --rise2: -120%;
    --comeback: -122%;
}

@keyframes fallanimation {
    0% {
        translate: -50% 0%;
        opacity: 1;
    }

    60% {
        translate: -50% var(--fall1);
        rotate: z 0deg;
        opacity: 1;
    }

    99.9% {
        translate: -50% var(--fall2);
        rotate: z 25deg;
        opacity: 0;
    }

    100% {
        translate: -50% var(--fall2);
        rotate: z 0deg;
        opacity: 1;
    }
}

@keyframes loseanimation {
    90% {
        translate: 0 var(--rise1);
    }

    100% {
        translate: 0 var(--rise2);
    }
}

.map_center_messages[data-content="loser"],
.map_center_messages[data-content="gameover"],
.map_center_messages[data-content="loser"],
.map_center_messages[data-content="gameover"] {
    animation: comebackanimation 0s 3.5s forwards;
}

@keyframes comebackanimation {
    100% {
        translate: 0 var(--comeback);
    }
}