.intro_screen-title {
    font-size: min(16vw, 32vh);
}

.title_tetris-container {
    gap: min(0.75vw, 1.5vh);
}

.brick,
.title_letter_block {
    --border_width: min(0.55vw, 1.1vh);
}

@keyframes shadow {
    100% { filter: drop-shadow(min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.2vw, 0.4vh) #131313); }
    100% { filter: drop-shadow(min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.2vw, 0.4vh) #7b7b7b); }
    100% { filter: drop-shadow(min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.2vw, 0.4vh) #262626); }
}

.menu_front_button-container {
    height: min(60vw, 120vh);
}

.difficulty_menu-container {
    .difficulty_selection-container {
        grid-template-columns: 15% 70% 15%;
        .difficulty_selection_display-container {
            &::before {
                font-size: min(6vw, 12vh);
                top: 15%;
            }
            .difficulty_selection_display {
                --outline_color: #766299f5;
                --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));
                height: min(55vw, 110vh);
                font-size: min(12vw, 24vh);
                border: min(0.75vw, 1.5vh) solid white;
                &[data-difficulty="1"] i {
                    font-size: min(7.5vw, 15vh);
                }
                &[data-difficulty="2"] i {
                    font-size: min(7vw, 14vh);
                }

                &[data-difficulty="3"] i {
                    font-size: min(6.5vw, 13vh);
                }

                &[data-difficulty="4"] i {
                    font-size: min(6vw, 12vh);
                }

                &[data-difficulty="5"] i {
                    font-size: min(5.5vw, 11vh);
                }
            }
        }
    }

    .difficulty_menu_back-container {
        .menu_front_button {
            width: 12%;
            height: min(5vw, 10vh);
        }
    }
}

[data-gamemode="timeattack"] .difficulty_selection_display:not([data-difficulty=""]) {
    font-size: min(6vw, 12vh) !important;
}

[data-gamemode="survival"] .difficulty_selection_display:not([data-difficulty=""]) {
    font-size: min(5.25vw, 10.5vh) !important;
}

.menu_front_button {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.75vw, 1.5vh));
    --minus_ow: calc(var(--outline_width) * min(-0.25vw, -0.5vh));
}

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

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

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

.menu_front_button_solo {
    background-size: 100%, 40%;
}

.menu_front_button_versus {
    background-size: 100%, 50%, 50%;
}

.menu_front_button_online {
    background-size: 100%, 40%;
}

.menu_front_button_profile {
    background-size: 100%, 36%;
}

.menu_front_button_options {
    background-size: 100%, 50%;
}

.selection_navigation-button {
    --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));
    height: min(7vw, 14vh);
    border: min(0.5vw, 1vh) solid white;
    font-size: min(3.75vw, 7.5vh);
    box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.5vw, 1vh) #8055b9,
        min(0.5vw, 1vh) min(0.5vw, 1vh) min(1.5vw, 3vh) min(0.25vw, 0.5vh) #443858c2;
}

@media not all and (hover: none) {
    .selection_navigation-button:hover {
        border: min(0.275vw, 0.55vh) solid gold;
    }
    .selection_navigation-button:active {
        box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.5vw, 1vh) #8055b9,
            0 0 0 0 #443858c2;
        translate: min(0.25vw, 0.5vh) min(0.25vw, 0.5vh);
    }
}

.prelobby_menu-container {
    gap: 21%;
    .prelobby_public_private-container {
        width: 85%;
        height: min(50vw, 100vh);
        .menu_front_button-title {
            height: 50%;
            width: 100%;
            font-size: min(3.25vw, 6.5vh);
        }
        .menu_front_button_lobby_type_item {
            width: 48%;
            height: 50%;
        }
    }
    .menu_front_button_back_to_sub_menu {
        width: 18%;
        height: 4%;
    }
}

.room_menu_players-container {
    width: 95%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2%;
    .menu_front_button-container {
        height: min(60vw, 120vh);
        aspect-ratio: 1.1;
    }
    .menu_front_button {
        aspect-ratio: 9;
        width: 66%;
    }
    .room_difficulty_stars-container,
    .room_wins_stars-container {
        aspect-ratio: 5;
        width: 80%;
    }
    .room_difficulty_stars-container::before,
    .room_wins_stars-container::before {
        font-size: min(3.25vw, 6.5vh);
    }
    .room_difficulty_star,
    .room_wins_star {
        aspect-ratio: 0.75;
    }
    .room_difficulty_star i,
    .room_wins_star i {
        font-size: min(2vw, 4vh);
    }
    .menu_front_button-image {
        height: min(40vw, 80vh);
    }
    .room_start_back-container {
        height: min(55vw, 110vh);
        gap: 20% !important;
    }
    .menu_front_button_start_game, .menu_front_button_back_to_sub_menu {
        width: 66%;
        aspect-ratio: 4;
    }
    .menu_front_button_back_to_sub_menu {
        height: unset;
        padding: unset;
    }
}

.sub_menu_gamemode_selection-container {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.3vw, 0.6vh));
    --minus_ow: calc(var(--outline_width) * min(-0.3vw, -0.6vh));
    grid-template-columns: 15% 70% 15%;
    overflow: hidden;
    .sub_menu_gamemode_selection_navigation-container {
        visibility: hidden;
    }
    .sub_menu_gamemode_selection_display-container {
        .sub_menu_gamemode_selection_display {
            height: min(75vw, 150vh);
            padding: min(0.6vw, 1.2vh);
            border: min(0.6vw, 1.2vh) solid white;
            box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.6vw, 1.2vh) #8055b9,
                min(1.5vw, 3vh) min(1.5vw, 3vh) min(2vw, 4vh) min(0.1vw, 0.2vh) #443858c2;
            .sub_menu_gamemode_selection_display_title_description-container {
                .sub_menu_gamemode_selection_display-title {
                    font-size: min(7.75vw, 15.5vh);
                    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);
                }
                .sub_menu_gamemode_selection_display-description {
                    font-size: min(2.25vw, 4.5vh);
                }
            }
        }
    }
}

@keyframes showpop {
    100% {
        scale: 1.0075;
    }
}

.sub_menu_gamemode_back-container {
    .menu_front_button {
        width: 12%;
        height: min(5vw, 10vh);
    }
}

.menu_front_button_characters_menu-title {
    width: 20%;
    height: 7%;
}

.character_display-container {
    width: 100%;
    height: 45%;
    flex-direction: column;
    gap: 5%;
}

.character_image-container {
    width: 60%;
}

.character_infos-container .character_name {
    width: 110%;
    font-size: min(5vw, 10vh);
}

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

.characters_selection-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.menu_front_button_back_to_previous_menu, .menu_front_button_character_select {
    aspect-ratio: 4;
}

main[data-mode="solo"] {
    .room_start_back-container {
        width: 50%;
        height: min(15vw, 30vh);
        aspect-ratio: 3;
        flex-direction: row-reverse;
        gap: 15%;
    }
}

.arcade_mode_star i,
.survival_mode_star i,
.timeattack_mode_star i,
.picture_mode_star i {
    font-size: min(2.5vw, 5vh);
}

.pictures_select_menu-container {
    .menu_front_button-title {
        height: 15%;
    }
    .menu_front_button-container {
        height: min(85vw, 170vh);
        aspect-ratio: 1;
        justify-content: start;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: unset;
        gap: 1%;
        column-gap: 2%;
        .menu_front_button {
            aspect-ratio: 6;
        }
    }
    .pictures_infos_selection-container {
        /* grid-template-rows: 1.25fr 5fr 1fr;
        row-gap: 3%; */
        grid-template-rows: 18% 70% 8%;
        row-gap: 2%;
        .pictures_selection-container {
            grid-template-columns: 25% 50% 25%;
        }
        .picture_infos-container {
            width: 60%;
            padding: 4% 0 0;
            .picture_info_display_grid {
                box-shadow: 0 0 0 min(0.225vw, 0.45vh) #8055b9,
                    0 0 0 min(0.5vw, 1vh) white,
                    min(0.35vw, 0.7vh) min(0.35vw, 0.7vh) min(0.75vw, 1.5vh) min(0.75vw, 1.5vh) #443858c2;
            }
            .picture_info_title_bests-container {
                --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));
            }
            .picture_info_title {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: min(4.5vw, 9vh);
                text-transform: uppercase;
            }
            .picture_info_trophies-title {
                font-size: min(2.5vw, 5vh);
            }
            .picture_info_trophy-container {
                font-size: min(2.5vw, 5vh);
                i {
                    font-size: min(2.5vw, 5vh);
                }
            }
            .picture_info_best {
                font-size: min(2.5vw, 5vh);
            }
        }
        .pictures_selection_navigation-wrapper {
            width: min(8vw, 16vh);
        }
        .pictures_selection_navigation_right-wrapper {
            filter: drop-shadow(min(-0.225vw, -0.45vh) min(0.225vw, 0.45vh) min(0.3vw, 0.6vh) #443858c2);
        }
        .pictures_selection_list {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(5, 1fr);
            row-gap: 2%;
        }
        .pictures_selection_picture_display {
            box-shadow: 0 0 0 min(0.2vw, 0.4vh) #8055b9, 0 0 0 min(0.4vw, 0.8vh) white, min(0.5vw, 1vh) min(0.5vw, 1vh) min(0.5vw, 1vh) min(0.5vw, 1vh) #443858c2;
        }
        .pictures_selection_picture_display.selected {
            box-shadow: 0 0 0 min(0.2vw, 0.4vh) #8055b9, 0 0 0 min(0.4vw, 0.8vh) gold;
            scale: 0.975;
            translate: min(0.25vw, 0.5vh) min(0.25vw, 0.5vh);
        }
        .pictures_selection_picture_display.unknown::after {
            font-size: min(8vw, 12vh);
        }
        .pictures_selection_picture_achievements {
            gap: 10%;
            translate: -50% -80%;
            i {
                --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));
                font-size: min(1.5vw, 3vh);
            }
        }
    }
}

.missions_select_menu {
    .menu_front_button-container {
        --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));
        height: min(100vw, 200vh);
        aspect-ratio: 0.8;
        gap: min(3.55vw, 7.1vh);
        .menu_front_button_mission_select {
            width: 50%;
            height: min(7.5vw, 15vh);
            font-size: min(3vw, 6vh);
        }
        .menu_front_button_mission_select::before,
        .menu_front_button_mission_select::after {
            font-size: min(2vw, 4vh);
        }
        .menu_front_button {
            aspect-ratio: 2;
        }
    }
    .menu_front_button_back_to_difficulty_menu {
        width: 15%;
        height: min(5vw, 10vh);
        margin-top: 10%;
    }
}

.bosses_select_menu-container {
    aspect-ratio: 1;
    .bosses_select-container {
        gap: 10%;
        .bosses_selection_navigation-wrapper {
            width: min(6vw, 12vh);
        }
        .bosses_selection_navigation_right-wrapper {
            filter: drop-shadow(min(-0.225vw, -0.45vh) min(0.225vw, 0.45vh) min(0.3vw, 0.6vh) #443858c2);
        }
        .menu_front_button-image {
            height: min(35vw, 70vh);
        }
    }
}

.levels_select_menu-container,
.tours_select_menu-container,
.bosses_select_menu-container {
    .menu_front_button-container {
        height: min(60vw, 120vh);
        aspect-ratio: 0.9;
    }
}

.locations_select_menu-container {
    gap: 6%;
    .locations_select-container {
        height: min(40vw, 80vh);
        aspect-ratio: 1;
        justify-content: center;
        flex-direction: row;
        gap: 0%;

        .location-container {
            justify-content: space-evenly;
            pointer-events: none;

            .menu_front_button_location_name {
                width: 50%;
                aspect-ratio: 7;
            }

            .menu_front_button_location-image {
                width: min(67vw, 134vh);
                height: min(32vw, 64vh);
            }

            .menu_front_button_location-image img {
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .menu_front_button_location_description {
                width: 77%;
                aspect-ratio: 10;
            }
        }
            
        .locations_selection_navigation-wrapper {
            width: min(6vw, 12vh);
        }
        
        .locations_selection_navigation_right-wrapper {
            filter: drop-shadow(min(-0.225vw, -0.45vh) min(0.225vw, 0.45vh) min(0.3vw, 0.6vh) #443858c2);
        }
    }

    .menu_front_button_location_select.locked {
        pointer-events: none;
    }
}

.levels_select_menu-container {
    .levels_select-container {
        height: min(40vw, 80vh);
        aspect-ratio: 1;
        justify-content: center;
        flex-direction: row;
        gap: 7%;
        .level-container {
            justify-content: space-evenly;
            pointer-events: none;
            position: relative;

            .menu_front_button_level_name {
                width: 15%;
                aspect-ratio: 2.5;
                position: absolute;
                top: 25.5%;
                border: none;
                background: none;
                box-shadow: none;
            }

            .menu_front_button_level-image {
                width: min(67vw, 134vh);
                height: min(32vw, 64vh);
                overflow: hidden;
            }

            .menu_front_button_level-image img {
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .menu_front_button_level_description {
                .menu_front_button_level_description-title {
                    --outline_color: white;
                    --outline_width: 0.15;
                    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
                    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
                    display: flex;
                    flex-direction: column;
                    font-size: min(7.875vw, 15.75vh);
                    color: #8055b9;
                    text-transform: none;
                    line-height: 1.5ch;
                }
            }
        }
            
        .levels_selection_navigation-wrapper {
            width: min(5vw, 10vh);
        }
        
        .levels_selection_navigation_right-wrapper {
            filter: drop-shadow(min(-0.225vw, -0.45vh) min(0.225vw, 0.45vh) min(0.3vw, 0.6vh) #443858c2);
        }
    }

    .menu_front_button_level_select.locked {
        pointer-events: none;
    }
}

.tours_select_menu-container {
    gap: 6%;

    .tours_select-container {
        height: min(40vw, 80vh);
        aspect-ratio: 1;
        justify-content: center;
        flex-direction: row;
        gap: 0%;

        .tour-container {
            justify-content: space-evenly;
            pointer-events: none;

            .menu_front_button_tour_name {
                width: 50%;
                aspect-ratio: 7;
            }

            .menu_front_button_tour-image {
                width: min(67vw, 134vh);
                height: min(32vw, 64vh);
            }

            .menu_front_button_tour-image img {
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .menu_front_button_tour_description {
                width: 77%;
                aspect-ratio: 10;
            }
        }

        .tours_selection_navigation-wrapper {
            width: min(6vw, 12vh);
        }

        .tours_selection_navigation_right-wrapper {
            filter: drop-shadow(min(-0.225vw, -0.45vh) min(0.225vw, 0.45vh) min(0.3vw, 0.6vh) #443858c2);
        }
    }

    .menu_front_button_tour_select.locked {
        pointer-events: none;
    }
}

.options_menu-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    flex-direction: column;
    gap: 0.75%;
    font-family: "Mikado";
    color: white;
    text-transform: uppercase;
    position: relative;
    & .options_menu_types_buttons-container {
        .menu_front_button_option_type_button {
            width: 34%;
        }
    }
    .menu_front_button_player_controls {
        width: 40%;

        .menu_front_button_player_controls-title {
            width: 100%;
        }
    }

    .menu_front_button_player_controls:hover {
        filter: none;
        cursor: auto;
    }

    .options_menu_players_controls-container {
        width: 95%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .player_controls-container {
            width: 78%;
            height: min(65vw, 130vh);
            align-items: center;
            flex-direction: column;
            gap: 2%;

            .options_menu_player_controls {
                width: 58%;
                height: 100%;
                display: flex;
                flex-direction: column;
                gap: 0.5%;
            }

            .player_control {
                width: 100%;
                height: auto;
                aspect-ratio: 8;
                padding: 0;
                border: none;

                .player_control-title {
                    width: 50%;
                    text-align: center;
                    font-size: min(2.5vw, 5vh);
                    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_control-title:hover {
                    cursor: auto;
                    filter: none;
                }

                .player_control-value {
                    width: 50%;
                    text-align: center;
                    font-size: min(2.5vw, 5vh);
                    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);
                }
            }
        }
    }
    
    .options_menu_options-container {
        width: 100%;
        gap: 3%;
        &[data-type="preferences"] {
            & .options_menu_preference-container {    
                width: 54%;
                aspect-ratio: 9;
                .menu_front_button-title,
                .menu_front_button-value {
                    font-size: min(2.5vw, 5vh);
                }
                .option_brick_surface_visual {
                    height: min(2.75vw, 5.5vh);
                }
            }
        }
        &[data-type="controls"] {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .player_controls-container {
                width: 90%;
                height: 50%;
                & .player_control {
                    .player_control-title,
                    .player_control-value {
                        font-size: min(2.5vw, 5vh);
                    }
                }
            }
        }
    }

    .options_menu_preference-container {
        width: 100%;
        aspect-ratio: 8.5;
        display: flex;
        flex-direction: row;
        border: none;
        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);

        .menu_front_button-title {
            width: 60%;
        }

        .menu_front_button-title:hover {
            cursor: auto;
        }

        .menu_front_button-value {
            width: 40%;
        }
        .option_brick_surface_visual {
            height: min(2.75vw, 5.5vh);
        }
    }

    .menu_front_button:not(.menu_front_button_back_to_menu):hover {
        .menu_front_button-title {
            color: white;
        }
    }

    .menu_front_button-value:hover {
        color: gold;
    }

    .menu_front_button_back_to_menu {
        width: 15%;
    }

    .options_menu_waiting_key-container {
        width: 33%;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        translate: -50% -50%;
        visibility: hidden;
        cursor: auto;

        .options_menu_waiting_key-title {
            min-width: 50%;
            width: fit-content;
            text-align: center;
        }

        .options_menu_waiting_key-value[data-key=""] {
            display: none;
        }
    }

    .options_menu_waiting_key-container:hover {
        filter: brightness(100%);
    }

    & .options_menu_back_button-container {
        .menu_front_button_back_to_menu {
            width: 20%;
        }
    }

}