* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #fbf2e8;
    background: linear-gradient(12deg, #c0f0ff, #50d3ff);
    background: radial-gradient(#c0f0ff, #50d3ff);
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */

body {
    margin: 0 0;
    padding: 0 0;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    user-select: none;
}

main {
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 2.031746;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    display: none;
}

.d-none {
    display: none;
}

.intro_screen {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: url(../assets/img/bg/ballroom-interior-in-medieval-royal-castle.jpg); */
    background-color: black;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1000;
}

.intro_screen::before, .intro_screen::after {
    content: "";
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -2;
}

.intro_screen::before {
    opacity: 0;
}

main:is(.p2, .menu_screen) .intro_screen::before {
    background-image: url("../../assets/img/bg/bg57_1.jpg");
    z-index: -2;
    opacity: 1;
    filter: brightness(0);
    animation-name: brighter;
    animation-duration: 0s;
    animation-delay: 3.5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

main.superskip:is(.p2, .menu_screen) .intro_screen::before {
    animation-duration: 0s;
    animation-delay: 0s;
}

main.skip:is(.p2, .menu_screen) .intro_screen::before {
    animation-duration: 0s;
    animation-delay: 0s;
}

@keyframes brighter {
    100% {
        filter: brightness(100%);
    }
}

main:is(.p2, .menu_screen) .intro_screen::after {
    background-image: url("../../assets/img/bg/bg57_2.jpg");
    z-index: -1;
    opacity: 1;
    filter: brightness(0);
    animation-name: fadeinout;
    animation-duration: 5s;
    animation-delay: 3.625s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

main.skip:is(.p2, .menu_screen) .intro_screen::after {
    animation-duration: 3s;
    animation-delay: 0s;
}

main.superskip:is(.p2, .menu_screen) .intro_screen::after {
    animation-duration: 0.65s;
    animation-delay: 0s;
}

@keyframes fadeinout {
    0% {
        opacity: 1;
        filter: brightness(0);
    }
    25% {
        opacity: 1;
        filter: brightness(100%);
    }
    45% {
        opacity: 1;
        filter: brightness(100%);
    }
    100% {
        opacity: 0;
        filter: brightness(100%);
    }
}

/* main.superskip .intro_screen::after {
    animation: fadeinout2 0.65s linear forwards;
} */

@keyframes fadeinout2 {
    0% {
        opacity: 1;
        filter: brightness(0);
    }
    40% {
        opacity: 1;
        filter: brightness(100%);
    }
    100% {
        opacity: 0;
        filter: brightness(100%);
    }
}

main.intro.skip:is(.p2, .menu_screen) .menu-container {
    animation: showmenu 1s 3.25s linear forwards;
    /* animation: showmenu 0.75s 3.25s linear forwards; */
}

main.intro.superskip:is(.p2, .menu_screen) .menu-container {
    /* animation: showmenu 0.375s linear forwards; */
    animation: showmenu 1s linear forwards;
}

@keyframes showmenu {
    /* 0% { opacity: 0; filter: blur(min(1vw, 2vh)); } */
    0% { opacity: 0; filter: blur(min(0.5vw, 1vh)); }
    100% { opacity: 1; }
}

main:not(.p2) .title-container {
    display: none;
}

main.p2 .title-container {
    width: 100%;
    height: min(37.5vw, 75vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main.p2 .title_tetris-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2.5vw, 5vh);
    filter: brightness(0) drop-shadow(0 0 0 #131313);
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom;
    animation: stand 1s 1.5s linear forwards, shadow 2.5s 5s linear forwards;
}

@keyframes stand {
    100% {
        filter: brightness(100%) drop-shadow(0 0 0 #131313);
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes shadow {
    100% {
        filter: drop-shadow(min(0.2vw, 0.4vh) min(0.2vw, 0.4vh) 0.5vh #131313);
    }

    100% {
        filter: drop-shadow(min(0.2vw, 0.4vh) min(0.2vw, 0.4vh) 0.5vh #7b7b7b);
    }

    100% {
        filter: drop-shadow(min(0.2vw, 0.4vh) min(0.2vw, 0.4vh) 0.5vh #262626);
    }
}

.title_letter[data-letter="t"] {
    & .title_letter_line:nth-child(1) {
        grid-template-columns: repeat(5, 1fr);
    }

    & .title_letter_line:nth-child(2) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(3) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(4) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(5) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.title_letter[data-letter="e"] {
    & .title_letter_line {
        justify-items: start;
    }

    & .title_letter_line:nth-child(1) {
        grid-template-columns: repeat(5, 1fr);
    }

    & .title_letter_line:nth-child(2) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(3) {
        grid-template-columns: repeat(4, var(--blocksize));
    }

    & .title_letter_line:nth-child(4) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(5) {
        grid-template-columns: repeat(5, 1fr);
    }
}

.title_letter[data-letter="r"] {
    & .title_letter_line {
        justify-items: start;
    }

    & .title_letter_line:nth-child(1) {
        grid-template-columns: repeat(4, var(--blocksize));
    }

    & .title_letter_line:nth-child(2) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }

    & .title_letter_line:nth-child(3) {
        grid-template-columns: repeat(5, 1fr);
    }

    & .title_letter_line:nth-child(4) {
        grid-template-columns: repeat(2, calc(100% - (var(--blocksize)) * 2));
    }

    & .title_letter_line:nth-child(5) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }
}

.title_letter[data-letter="i"] {
    width: calc(var(--blocksize) * 1);
    height: calc(var(--blocksize) * 5);

    & .title_letter_line {
        justify-items: start;
        grid-template-columns: repeat(1, 1fr);
    }
}

.title_letter[data-letter="s"] {
    & .title_letter_line {
        justify-items: start;
    }

    & .title_letter_line:nth-child(1) {
        width: calc(var(--blocksize) * 4);
        justify-items: end;
        justify-self: end;
        grid-template-columns: repeat(4, 1fr);
    }

    & .title_letter_line:nth-child(2) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(3) {
        grid-template-columns: repeat(5, 1fr);
    }

    & .title_letter_line:nth-child(4) {
        justify-items: end;
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(5) {
        width: calc(var(--blocksize) * 4);
        justify-self: start;
        grid-template-columns: repeat(4, 1fr);
    }
}

main.p2 .title_letter[data-letter="x"] {
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 calc(-100% - var(--blocksize));
    opacity: 0;
    filter: brightness(0);
    animation: appear 2s 5.5s linear forwards;

    & .title_letter_line {
        justify-items: start;
    }

    & .title_letter_line:nth-child(1) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }

    & .title_letter_line:nth-child(2) {
        width: calc(var(--blocksize) * 3);
        justify-self: center;
        justify-items: start;
        gap: var(--blocksize);
        grid-template-columns: repeat(2, var(--blocksize));
    }

    & .title_letter_line:nth-child(3) {
        justify-items: center;
        grid-template-columns: repeat(1, 1fr);
    }

    & .title_letter_line:nth-child(4) {
        width: calc(var(--blocksize) * 3);
        justify-self: center;
        justify-items: start;
        gap: var(--blocksize);
        grid-template-columns: repeat(2, var(--blocksize));
    }

    & .title_letter_line:nth-child(5) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }
}

main.p2 .title_letter[data-letter="a"] {
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 calc(100% + var(--blocksize));
    rotate: x 180deg;
    opacity: 0;
    filter: brightness(0);
    animation: appear 2s 5.5s linear forwards;

    & .title_letter_line {
        justify-items: start;
    }

    & .title_letter_line:nth-child(1) {
        width: calc(var(--blocksize) * 3);
        justify-self: center;
        grid-template-columns: repeat(3, var(--blocksize));
    }

    & .title_letter_line:nth-child(2) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }

    & .title_letter_line:nth-child(3) {
        grid-template-columns: repeat(5, 1fr);
    }

    & .title_letter_line:nth-child(4) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }

    & .title_letter_line:nth-child(5) {
        grid-template-columns: repeat(2, calc(100% - var(--blocksize)));
    }
}

@keyframes appear {
    0% {
        height: 0;
        opacity: 0;
        filter: brightness(0);
    }

    100% {
        height: 100%;
        opacity: 1;
        filter: brightness(100%);
    }
}

/* ///////////////////////// */

.menu-container {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

.menu_screen.intro .main_menu-container {
    opacity: 0;
}

.menu_screen:not(.skip, .superskip).intro .main_menu-container {
    /* animation: showmenu 1.25s linear forwards; */
    animation: showmenu 1s linear forwards;
}

.menu_front_button-container {
    width: auto;
    height: min(30vw, 60vh);
    aspect-ratio: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.difficulty_menu-container {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .difficulty_selection-container {
        width: 100%;
        height: 80%;
        display: grid;
        grid-template-columns: 33% 34% 33%;

        .difficulty_selection_navigation-container {
            padding: 5%;
            display: flex;
            justify-content: center;
            align-items: center;

            .selection_navigation-button {
                z-index: 1;
            }
        }

        .difficulty_selection_display-container {
            --outline_color: #766299f5;
            --outline_width: 0.3;
            --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
            --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            &::before {
                width: 100%;
                height: 12%;
                content: "Choose a difficulty";
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: "Mikado";
                font-size: min(3vw, 6vh);
                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;
                left: 0;
                top: 0;
            }
            .difficulty_selection_display {
                width: auto;
                height: min(30vw, 60vh);
                aspect-ratio: 0.625;
                display: none;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;font-family: "Mikado";
                font-size: min(7.5vw, 15vh);
                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);
                background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
                border: min(0.4vw, 0.8vh) solid white;
                box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9,
                    min(0.75vw, 1.5vh) min(0.75vw, 1.5vh) min(1vw, 2vh) min(0.05vw, 0.1vh) #443858c2;
                transform: skewX(-3deg);
                transition: color 0.15s, border 0.15s, box-shadow 0.15s, translate 0.15s, filter 0.15s;
                
                &.show {
                    display: flex;
                    animation: showpop 0.5s linear infinite alternate;
                }

                i {
                    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);
                    transition: color 0.15s;
                }
                &[data-difficulty="1"] i {
                    font-size: min(5vw, 10vh);
                }
                &[data-difficulty="2"] i {
                    font-size: min(4.5vw, 9vh);
                }
                &[data-difficulty="3"] i {
                    font-size: min(4vw, 8vh);
                }
                &[data-difficulty="4"] i {
                    font-size: min(3.5vw, 7vh);
                }
                &[data-difficulty="5"] i {
                    font-size: min(3vw, 6vh);
                }
            }

            @media not all and (hover: none) {
                .difficulty_selection_display:hover {
                    cursor: pointer;
                    &.show {
                        border: min(0.3vw, 0.6vh) solid gold;
                        filter: brightness(110%);
                    }
                    animation-play-state: paused;
                    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9,
                    0 0 min(1vw, 2vh) min(0.25vw, 0.5vh) #fdf8da,
                    min(0.75vw, 1.5vh) min(0.75vw, 1.5vh) min(1vw, 2vh) min(0.05vw, 0.1vh) #443858c2;
                }
            }

            .difficulty_selection_display:active {
                box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9,
                    0 0 0 0 #443858c2;
                translate: min(0.25vw, 0.5vh) min(0.25vw, 0.5vh);
            }
        }
    }

    .difficulty_menu_back-container {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;

        .menu_front_button {
            width: 12%;
            height: min(3.5vw, 7vh);
            padding: 0;
        }
    }
}

[data-gamemode="timeattack"] .difficulty_selection_display:not([data-difficulty=""]) {
    text-align: center;
    font-size: min(5vw, 10vh) !important;
}

[data-gamemode="survival"] .difficulty_selection_display:not([data-difficulty=""]) {
    text-align: center;
    font-size: min(3.75vw, 7.5vh) !important;
}

.pictures_select_menu .menu_front_button-container {
    width: auto;
    height: min(30vw, 60vh);
    aspect-ratio: 2.75;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
}

.missions_select_menu .menu_front_button-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 100%;
    height: 80%;
    padding: min(2vw, 4vh) 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: min(3vw, 6vh);
    font-family: "Mikado";
    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);
    overflow: scroll;
    .menu_front_button_mission_select {
        width: 45%;
        height: min(5vw, 10vh);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        gap: 3%;
        padding: 0.15% 2%;
        font-size: min(2.5vw, 5vh);
        background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
        background-repeat: no-repeat;
        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;
        transform: skewX(-3deg);
        position: relative;
        transition: background 0.1s;
    }
    .menu_front_button_mission_select.locked {
        pointer-events: none;
    }
    .menu_front_button_mission_select:not(.locked):active {
        background: linear-gradient(180deg, #feefffab, #fffeff);
    }
    .menu_front_button_mission_select::before,
    .menu_front_button_mission_select::after {
        --padding: min(1.75vw, 3.5vh);
        width: 50%;
        height: min(2.5vw, 5vh);
        display: flex;
        align-items: center;
        font-size: min(1.75vw, 3.5vh);
        position: absolute;
        top: 0;
        translate: 0 -67%;
    }
    .menu_front_button_mission_select::before {
        content: attr(data-gamemode);
        justify-content: start;
        padding-left: var(--padding);
        color: #36dd36;
        color: white;
        left: 0%;
    }
    .menu_front_button_mission_select::after {
        content: attr(data-missiontype);
        justify-content: end;
        padding-right: var(--padding);
        color: gold;
        color: #36dd36;
        color: yellow;
        right: 0%;
    }
    .menu_front_button_mission_select_text {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5ch;

    }
    .menu_front_button_mission_select_cup,
    .menu_front_button_mission_select_form {
        --padding: min(1.75vw, 3.5vh);
        width: 50%;
        height: min(2.5vw, 5vh);
        display: flex;
        align-items: center;
        font-size: min(1.75vw, 3.5vh);
        position: absolute;
        bottom: 0;
        translate: 0 67%;
    }
    .menu_front_button_mission_select_cup {
        justify-content: start;
        padding-left: var(--padding);
        /* color: #36dd36; */
        left: 0%;
    }
    .menu_front_button_mission_select_form {
        justify-content: end;
        padding-right: var(--padding);
        color: red;
        color: #9de4ff;
        right: 0%;
    }
    .menu_front_button_mission_select_cup_display {
        display: inline-block;
        display: none;
        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.5vw, 3vh);
        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: 0;
        left: 50%;
        translate: -50% -74%;
        z-index: 1;
    }
    .menu_front_button_mission_select_cup_display[data-cup="bronze"]::after,
    .menu_front_button_mission_select_cup_bronze {
        color: #CD7F32;
    }
    .menu_front_button_mission_select_cup_display[data-cup="silver"]::after,
    .menu_front_button_mission_select_cup_silver {
        color: #d3d3d3;
    }
    .menu_front_button_mission_select_cup_display[data-cup="gold"]::after,
    .menu_front_button_mission_select_cup_gold {
        color: gold;
    }
    .mission_description_value {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 0.25ch;
        .mission_description_value_visual[data-type="color"] {
            --border_width: min(0.35vw, 0.7vh);
            width: auto;
            height: min(3vw, 6vh);
            aspect-ratio: 1;
            position: unset;
        }
        .mission_description_value_visual[data-type="lineclear"] {
            width: auto;
            height: min(3.5vw, 7vh);
            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.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.3vw, 0.6vh) 0 #443858c2;
            border-radius: 50%;
            position: relative;
        }
        .mission_description_value_visual[data-type="lineclear"]::after {
            content: attr(data-lineclear);
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

@media not all and (hover: none) {
    .menu_front_button_mission_select:hover {
        color: gold;
        box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.3vw, 0.6vh) #bd9fe5, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
        box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.3vw, 0.6vh) #bd9fe5, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.5vw, 1vh) min(0.5vw, 1vh) #dbdbdb;
        filter: brightness(110%);
        cursor: pointer;
    }
}

.main_menu-container .menu_front_button {
    aspect-ratio: 6;
    overflow: hidden;
    animation-play-state: unset;
}

main.main_menu .main_menu-container {
    display: flex;
}
main.sub_menu .sub_menu-container {
    display: flex;
}
main.profile_menu .profile_menu-container {
    display: flex;
}
main.options_menu .options_menu-container {
    display: grid;
}
main.difficulty_menu .difficulty_menu-container {
    display: flex;
}
main.bosses_select_menu .bosses_select_menu-container {
    display: flex;
}
main.locations_select_menu .locations_select_menu-container {
    display: flex;
}
main.levels_select_menu .levels_select_menu-container {
    display: flex;
}
main.pictures_select_menu .pictures_select_menu-container {
    display: flex;
}
main.missions_select_menu .missions_select_menu-container {
    display: flex;
}
main.tours_select_menu .tours_select_menu-container {
    display: flex;
}
main.characters_menu .characters_menu-container {
    display: flex;
}
main.prelobby_menu .prelobby_menu-container {
    display: flex;
}
main.room_menu .room_menu-container {
    display: flex;
    flex-direction: column;
}

.sub_menu-container {
    flex-direction: column;
}

.sub_menu_gamemode_selection-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 15% 70% 15%;
    .sub_menu_gamemode_selection_navigation-container {
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        .selection_navigation-button {
            z-index: 1;
        }
    }
    .sub_menu_gamemode_selection_display-container {
        --outline_color: #766299f5;
        --outline_width: 0.3;
        --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
        --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
        display: flex;
        justify-content: center;
        align-items: center;
        .sub_menu_gamemode_selection_display {
            width: auto;
            height: min(37.5vw, 75vh);
            aspect-ratio: 0.75;
            padding: min(0.3vw, 0.6vh);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
            border: min(0.3vw, 0.6vh) solid white;
            box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9,
                min(0.75vw, 1.5vh) min(0.75vw, 1.5vh) min(1vw, 2vh) min(0.05vw, 0.1vh) #443858c2;
            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);
            transform: skewX(-3deg);       
            overflow: hidden;
            transition: border 0.15s, box-shadow 0.15s, translate 0.15s, filter 0.15s;
            &.sub_menu_gamemode_selection_display:is(.previous, .current, .next) {
                display: flex;
                &.current {
                    animation-name: showpop;
                    animation-duration: 0.5s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-direction: alternate;
                    animation-play-state: running;
                    /* animation: showpop 0.5s linear infinite alternate; */
                    z-index: 1;
                }
                &.previous, &.next {
                    filter: brightness(75%);
                    scale: 0.75;
                    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9, min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) min(1vw, 2vh) min(0.025vw, 0.05vh) #443858c2;
                }
            }
            .sub_menu_gamemode_selection_display_background-container {
                width: 100%;
                height: 70%;
                display: flex;
                position: relative;
                overflow: hidden;
                .sub_menu_gamemode_selection_display-background {
                    height: 100%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    z-index: -1;
                    translate: -50% -50%;
                    transform: skewX(3deg);
                    transition: scale 0.3s, filter 0.3s;
                }
            }
            .sub_menu_gamemode_selection_display_title_description-container {
                width: 100%;
                height: 30%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: white;
                transform: skewX(3deg);
                .sub_menu_gamemode_selection_display-title {
                    height: 60%;
                    padding-top: 7%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    font-family: "Mikado";
                    text-transform: uppercase;
                    font-size: min(4vw, 8vh);
                }
                .sub_menu_gamemode_selection_display-description {
                    --outline_width: 0.3;
                    height: 40%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    font-size: min(1vw, 2vh);
                    text-shadow: none;
                }
            }
        }
        @media not all and (hover: none) {
            .sub_menu_gamemode_selection_display:hover {
                cursor: pointer;
                &.current {
                    border: min(0.3vw, 0.6vh) solid gold;
                    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9,
                            0 0 min(1vw, 2vh) min(0.25vw, 0.5vh) #fdf8da,
                            min(0.75vw, 1.5vh) min(0.75vw, 1.5vh) min(1vw, 2vh) min(0.05vw, 0.1vh) #443858c2;
                    filter: brightness(110%);
                    scale: 1.01 !important;
                    animation-play-state: paused !important;
                    .sub_menu_gamemode_selection_display-background {
                        animation: displayhover 5s ease-out infinite;
                    }
                }            
                &.previous,
                &.next {
                    border: min(0.3vw, 0.6vh) solid #82eaff;
                    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9, min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) min(1vw, 2vh) min(0.025vw, 0.05vh) #443858c2;
                    filter: brightness(85%) !important;
                }
            }
        }
        .sub_menu_gamemode_selection_display:active {
            box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.3vw, 0.6vh) #8055b9,
                0 0 0 0 #443858c2;
            &.current {
                translate: min(0.25vw, 0.5vh) min(0.25vw, 0.5vh);
            }
            &.previous,
            &.next {
                translate: min(0.125vw, 0.25vh) min(0.125vw, 0.25vh);
            }
        }
    }
}

@keyframes showpop {
    100% {
        scale: 1.005;
    }
}
@keyframes displayhover {
    100% {
        filter: brightness(105%);
        scale: 1.1;
    }
}

.sub_menu_gamemode_back-container {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    .menu_front_button {
        width: 12%;
        height: min(3.5vw, 7vh);
        padding: 0;
    }
}

.prelobby_menu-container {
    padding: 5%;
    flex-direction: column;
    gap: 25%;
}

.prelobby_menu-container .prelobby_public_private-container {
    width: 85%;
    height: min(15vw, 30vh);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.prelobby_menu-container .prelobby_lobby_type-container {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.prelobby_menu-container .menu_front_button_lobby_type {
    width: 70%;
    height: 35%;
}

.prelobby_menu-container .prelobby_lobby_type_create_join-container {
    width: 100%;
    height: 25%;
    /* aspect-ratio: 1; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.prelobby_menu-container .menu_front_button_lobby_type_item {
    width: 40%;
    height: 100%;
}

.prelobby_menu-container .menu_front_button_back_to_sub_menu {
    width: 18%;
    height: 10%;
}

.room_menu_players-container {
    width: 95%;
    height: min(40vw, 80vh);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.room_menu-container .menu_front_button-container:has(.menu_front_button_back_to_sub_menu) {
    justify-content: center;
    gap: 25%;
    aspect-ratio: 0.6;
}

.room_menu-container .room_key-container {
    width: min(25vw, 50vh);
    height: auto;
    aspect-ratio: 6;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: min(1.75vw, 3.5vh);
    font-weight: 600;
    color: white;
    top: 10%;
    left: 50%;
    translate: -50% 0;
}

.room_key-container::before {
    content: "Room id";
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(1.5vw, 3vh);
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 -100%;
}

.room_key-container::after {
    content: "room id copied!";
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(1.25vw, 2.5vh);
    color: gold;
    position: absolute;
    bottom: 0;
    left: 0;
    translate: 0 100%;
    opacity: 0;
}

.room_menu-container[data-type="private"] .room_key-container {
    display: flex;
}

.room_menu-container {
    .menu_front_button_player_name-title,
    .menu_front_button_player_name-input {
        display: none;
    }
    [data-display="title"] .menu_front_button_player_name-title {
        display: flex;
    }
    [data-display="input"] .menu_front_button_player_name-input {
        display: flex;
    }
}

[data-gamemode="adventure"] {
    .menu_front_button_player,
    .menu_front_button_player_name {
        display: none;
    }
    .menu_front_button_player_character-image {
        height: min(40vw, 80vh);
        pointer-events: none;
    }
}

.characters_menu-container {
    width: 95%;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.characters_menu-container[data-character=""] {
    & .character_infos-container, .character_image-container {
        display: none;
    }
    & .menu_front_button_character_select {
        filter: grayscale(1) brightness(0.8);
        pointer-events: none;
    }
}

.character_display-container {
    width: 80%;
    height: 40%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character_image-container,
.character_infos-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: min(0.5vw, 1vh) solid #766299f5; */
    /* background: #bf90eb70; */
    /* overflow: hidden; */
}

.character_image-container {
    width: 40%;
}

.character_image-container .character_image {
    width: 69%;
    height: 100%;
    object-position: top;
    object-fit: cover;
}

.character_infos-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 50%;
    flex-direction: column;
    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);
}

.character_infos-container .character_name {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(3.25vw, 6.5vh);
}

.character_infos-container .character_effect_event-container {
    width: 100%;
    height: 20%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

[data-gamemode="adventure"],
[data-gamemode="rival"],
[data-gamemode="boss"] {    
    .character_effect_3-container,
    .character_event_1-container,
    .character_event_2-container {
        display: flex;
    }
    .character_effect_1-container,
    .character_effect_2-container {
        display: none;
    }
}

[data-gamemode="battle"] { 
    .character_effect_1-container,
    .character_effect_2-container,
    .character_effect_3-container {
        display: flex;
    }
    .character_event_1-container,
    .character_event_2-container {
        display: none;
    }
}

.character_infos-container .character_effect_event-title,
.character_infos-container .character_effect_event-icon,
.character_infos-container .character_effect_event-value {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.character_infos-container .character_effect_event-title {
    width: 60%;
    color: azure;
}

.character_infos-container .character_effect-container .character_effect-title i.xtra {
    color: gold;
}

.character_infos-container .character_effect_event-value {
    width: 30%;
}

.character_infos-container .character_effect-value {
    margin-right: 10%;
}

.character_infos-container .character_effect_event-icon {
    width: 10%;
}

/* .character_infos-container .character_effect_1-container .character_effect-title {
    color: #9d92f5;
}

.character_infos-container .character_effect_2-container .character_effect-title {
    color: #f17d39;
}

.character_infos-container .character_effect_3-container .character_effect-title {
    color: #fffa4d;
} */

.character_infos-container .character_effect_event-icon .effect_event_icon-container {
    height: 75%;
    width: auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.character_infos-container .character_effect_event-icon .effect_event_icon {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.character_infos-container .character_effect_event-value {
    color: #d8cfff;
    justify-content: start;
    gap: 10%;
}

.character_infos-container .character_effect_event-value span {
    color: khaki;
}

.character_infos-container .character_effect_event_details {
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.125vw, 0.25vh));
    --minus_ow: calc(var(--outline_width) * min(-0.125vw, -0.25vh));
    width: 100%;
    height: 20%;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(1.25vw, 2.5vh);
    letter-spacing: min(0.15vw, 0.3vh);
    text-transform: none;
}

.characters_selection-container {
    width: 90%;
    height: 35%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 1fr);
    column-gap: 1%;
    row-gap: 1%;
}

.character_selection-container {
    width: auto;
    height: auto;
    aspect-ratio: 2.2;
    display: flex;
    justify-content: center;
    align-items: start;
    outline-width: min(0.2vw, 0.4vh);
    outline-style: solid;
    outline-color: #ec5a5a;
    background: #f5f5f5d9;
    overflow: hidden;
    transition: filter 0.15s, border-color 0.15s, border-width 0.15s;

}

.character_selection-container.selected {
    outline-width: min(0.35vw, 0.7vh);
    outline-color: #f9ea9b;
}

@media not all and (hover: none) {
    .character_selection-container:not(.selected):hover {
        cursor: pointer;
        outline-width: min(0.3vw, 0.6vh);
        outline-color: #9bebf9;
        filter: brightness(110%);
    }
}

.character_selection {
    height: 175%;
}

.characters_menu_select_back-container {
    height: fit-content;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.menu_front_button {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    --background_color_1: #8a8ae9ad;
    --background_color_2: #8a8ae9;
    width: 90%;
    height: auto;
    aspect-ratio: 7;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, var(--background_color_1), var(--background_color_2));
    background-repeat: no-repeat;
    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.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.15vw, 0.3vh) 0 #dbdbdb; */
    position: relative;
    transform: skewX(-3deg);
    transition: scale 0.15s, filter 0.2s, box-shadow 0.2s;
    transition: scale 0.1s, filter 0.2s, box-shadow 0.1s, background 0.1s;
    /* transition: filter 0.2s, box-shadow 0.2s; */
}

@media not all and (hover: none) {
    /* .menu_front_button {
        transition: scale 0s;
    } */
}

.menu_front_button_profile {
    /* pointer-events: none; */
}

.selection_navigation-button,
.quit_game-button {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: auto;
    height: min(4vw, 8vh);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    outline: none;
    border: min(0.275vw, 0.55vh) solid white;
    border-radius: 50%;
    font-family: "Mikado";
    font-size: min(1.8vw, 3.6vh);
    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);
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9,
        min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) min(0.75vw, 1.5vh) min(0.125vw, 0.25vh) #443858c2;
    cursor: pointer;
    transition: border 0.15s, filter 0.15s, box-shadow 0.15s, translate 0.15s;
}

.quit_game-button {
    height: min(3.75vw, 7.5vh);
    border: min(0.27vw, 0.54vh) solid white;
    font-size: min(1.75vw, 3.5vh);
    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.75vw, 1.5vh) min(0.125vw, 0.25vh) #443858c2;
}

@media not all and (hover: none) {
    .selection_navigation-button:hover {
        border: min(0.275vw, 0.55vh) solid gold;
    }
    .quit_game-button:hover {
        border: min(0.27vw, 0.54vh) solid gold;
    }
    .selection_navigation-button:active {
        box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9,
            0 0 0 0 #443858c2;
        translate: min(0.125vw, 0.25vh) min(0.125vw, 0.25vh);
    }
    .quit_game-button:active {
        box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.22vw, 0.44vh) #8055b9,
            0 0 0 0 #443858c2;
        translate: min(0.125vw, 0.25vh) min(0.125vw, 0.25vh);
    }
}

.selection_navigation-button.disabled {
    visibility: hidden;
}

.quit_game-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 2%;
    right: 1%;
}

/* main.main_menu .quit_game-container {
    display: flex;
} */

.pictures_select_menu .menu_front_button {
    width: 100%;
    aspect-ratio: 5;
}

.pictures_select_menu .menu_front_button-title {
    width: 100%;
}

.missions_select_menu .menu_front_button {
    width: 100%;
    aspect-ratio: 3.375;
}

.missions_select_menu .menu_front_button.completed {
    background: linear-gradient(180deg, #ffd700a3, #ffd700fc);
    background: linear-gradient(180deg, #ffffffa3, #f5f3ecfc);
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) gold, 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) #d9d9d9, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
}

.menu_front_button_back_to_previous_menu, .menu_front_button_character_select {
    width: 20%;
}

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

main[data-mode="versus"],
main[data-mode="online"] {
    .menu_front_button_adventure,
    .menu_front_button_boss {
        display: none;
    }
}

main[data-mode="solo"] {
    .menu_front_button_rival {
        display: none;
    }
}

.menu_front_button_player {
    position: relative;
}

.menu_front_button_player::after {
    content: attr(data-id);
    width: 100%;
    height: min(3vw, 6vh);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(2.5vw, 3vh);
    color: gold;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 -100%;
}

.menu_front_button_player[data-id=""]::after {
    visibility: hidden;
}

.menu_front_button:not(
.menu_front_button_player,
.room_key-container,
.room_difficulty_stars-container,
.room_wins_stars-container,
.options_menu-container .menu_front_button:not(.menu_front_button_back_to_menu)) {
    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.15vw, 0.3vh) 0 #dbdbdb;
}

.menu_front_button:not(
.menu_front_button_player,
.room_key-container,
.room_difficulty_stars-container,
.room_wins_stars-container,
.options_menu-container .menu_front_button:not(.menu_front_button_back_to_menu)):active {
    /* background: linear-gradient(180deg, #feefffab, #fffeff); */
    --background_color_1: #feefffab;
    --background_color_2: #fffeff;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, 0 0 0 0 #443858c2;
    scale: 0.99;
    translate: 1% 5%;
}

.menu_front_button-title,
.menu_front_button-input {
    /* width: 50%; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    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);
    transition: color 0.2s;
}

.menu_front_button_characters_menu-title {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 20%;
    height: 10%;
}

.menu_front_button-input {
    display: none;
}

#player1_name,
#player2_name {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: "Mikado";
    font-size: min(2vw, 4vh);
    text-align: center;
    color: white;
}

.menu_front_button-image {
    width: auto;
    height: min(25vw, 50vh);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: filter 0.15s;
}

.menu_front_button-image img {
    height: 100%;
}

.menu_front_button_difficulty {
    aspect-ratio: 5.75;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    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);
    transition: color 0.2s;
}

main[data-mode="online"] .room_menu-container:not([data-state="ready"]) .menu_front_button_start_game {
    filter: grayscale(1) brightness(0.8);
    pointer-events: none;
}

.menu_front_button_difficulty i {
    font-size: min(2vw, 4vh);
    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);
    transition: color 0.2s;
}

@media not all and (hover: none) {
    .menu_front_button-image:hover {
        filter: brightness(110%);
    }
    .menu_front_button:not(.menu_front_button_player, .menu_front_button_lobby_type, .room_difficulty_stars-container, .room_wins_stars-container):hover {
        box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.3vw, 0.6vh) #bd9fe5, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
        box-shadow: inset 0 0 min(0.1vw, 0.2vh) min(0.3vw, 0.6vh) #bd9fe5, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.35vw, 0.7vh) min(0.125vw, 0.25vh) #dbdbdb;
        filter: brightness(110%);
        cursor: pointer;

        & .menu_front_button-title,
        i {
            color: gold;
        }
    }
}

.menu_front_button_solo {
    background: linear-gradient(180deg, var(--background_color_1), var(--background_color_2));
    background-repeat: no-repeat;
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: url("../../assets/img/ui/menus/main/ai.png");
        background-repeat: no-repeat;
        background-position: 95% 6%;
        background-size: 40%;
        /* animation: animationonline 1s alternate infinite; */
    }
}

.menu_front_button_versus {
    background: linear-gradient(180deg, var(--background_color_1), var(--background_color_2));
    background-repeat: no-repeat;
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: url("../../assets/img/ui/menus/main/amitie.png"),
            url("../../assets/img/ui/menus/main/arle.png");
        background-repeat: no-repeat;
        background-position: -7% 11%, 120% 16%;
        background-size: 41.25%, 48%;
    }
}

.menu_front_button_online {
    background: linear-gradient(180deg, var(--background_color_1), var(--background_color_2));
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: url("../../assets/img/ui/menus/main/o.png");
        background-repeat: no-repeat;
        background-position: -4%;
        background-size: 42%;
        transform-origin: 50%;
        rotate: x 180deg;
    }
}

.menu_front_button_profile {
    background: linear-gradient(180deg, var(--background_color_1), var(--background_color_2));
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: url("../../assets/img/ui/menus/main/carbuncle.png");
        background-repeat: no-repeat;
        background-position: 100% 49%;
        background-size: 36%;
        transform-origin: 80%;
    }
}

.menu_front_button_options {
    background: linear-gradient(180deg, var(--background_color_1), var(--background_color_2));
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: url("../../assets/img/ui/menus/main/zed.png");
        background-repeat: no-repeat;
        background-position: -44% 13%;
        background-size: 54.5%;
    }
}

@keyframes animationsolo {
    0% { filter: brightness(100%); }
    100% { filter: brightness(120%); }
}

@keyframes animationversus {
    0% { transform: translateX(-0.3%); }
    100% { transform: translateX(0.3%); }
}

@keyframes animationonline {
    0% { opacity: 1; background-position: -4%; rotate: x 180deg; }
    30% { opacity: 1; background-position: -4%; rotate: x 180deg; filter: blur(0); }
    37.5% { opacity: 0; }
    50% { filter: blur(min(1vw, 2vh)); }
    62.5% { opacity: 0; }
    70% { opacity: 1; background-position: 108%; rotate: x 0deg; filter: blur(0); }
    100% { opacity: 1; background-position: 108%; rotate: x 0deg; }
}

@keyframes animationprofile {
    0% { background-size: 40%; }
    5% { background-size: 40%; }
    100% { background-size: 15%; }
}

@keyframes animationoptions {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(180deg); }
}

@media not all and (hover: none) {
    .main_menu-container .menu_front_button_solo:hover::after {
        animation: animationsolo 0.75s alternate infinite;
    }
    .main_menu-container .menu_front_button_versus:hover::after {
        animation: animationversus 0.5s alternate infinite;
    }
    .main_menu-container .menu_front_button_online:hover::after {
        animation: animationonline 1.5s ease-in-out alternate infinite;
    }
    .main_menu-container .menu_front_button_profile:hover::after {
        animation: animationprofile 0.75s alternate infinite;
    }
    .main_menu-container .menu_front_button_options:hover::after {
        animation: animationoptions 0.75s alternate infinite;
    }
}

[data-mode="solo"] .menu_front_button_start_game,
[data-mode="solo"] .room_difficulty_stars-container,
:not([data-gamemode="boss"]) .menu_front_button_back_to_sub_menu,
:not([data-gamemode="mission"]) .menu_front_button_back_to_difficulty_menu {
    width: 25%;
    height: min(4vw, 8vh);
    padding: 2% 2.5%;
    justify-content: center;
    gap: 2.5%;
    aspect-ratio: 2;
}

.bosses_select_menu-container,
.tours_select_menu-container,
.locations_select_menu-container,
.levels_select_menu-container {
    flex-direction: column;
    gap: 1%;
    .menu_front_button-title {
        height: 20%;
        white-space: pre;
    }
    .menu_front_button-container {
        aspect-ratio: 1.3;
        justify-content: start;
        gap: 2%;
        .menu_front_button {
            aspect-ratio: 8;
            .menu_front_button-title {
                width: 100%;
            }
        }
    }
    .menu_front_button_back_to_sub_menu,
    .menu_front_button_back_to_locations_select_menu {
        width: 12%;
        height: min(3.5vw, 7vh);
        padding: 0;
    }
}

.levels_select_menu-container .menu_front_button-container .menu_front_button {
    aspect-ratio: 12;
}
.bosses_select_menu-container .menu_front_button-container .menu_front_button {
    aspect-ratio: 8;
}

.levels_select_menu-container,
.tours_select_menu-container,
.bosses_select_menu-container {
    .menu_front_button-container {
        height: min(40vw, 80vh);
        aspect-ratio: 0.9;
        gap: 1%;
    }
    .menu_front_button-title {
        height: 10%;
    }
}

.locations_select_menu-container {
    .locations_select-container {
        height: min(40vw, 80vh);
        aspect-ratio: 1;
        justify-content: center;
        flex-direction: row;
        gap: 10%;
        .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(50vw, 100vh);
                height: min(25vw, 50vh);
            }
            .menu_front_button_location-image img {
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
            .menu_front_button_location_description {
                width: 77%;
                aspect-ratio: 10;
            }
        }
    }
    .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: 10%;
        .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: 20%;
                border: none;
                background: none;
                box-shadow: none;
            }
            .menu_front_button_level-image {
                width: min(50vw, 100vh);
                height: min(25vw, 50vh);
                overflow: hidden;
            }
            .menu_front_button_level-image img {
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
            .menu_front_button_level_description {
                width: 77%;
                aspect-ratio: 10;
                position: absolute;
                border: none;
                background: none;
                box-shadow: none;
                transform: none;
                .menu_front_button_level_description-title {
                    --outline_color: white;
                    --outline_width: 0.2;
                    --plus_ow: calc(var(--outline_width) * min(0.75vw, 1.5vh));
                    --minus_ow: calc(var(--outline_width) * min(-0.75vw, -1.5vh));
                    display: flex;
                    flex-direction: column;
                    font-size: min(6vw, 12vh);
                    color: #8055b9;
                    text-transform: none;
                }
            }
        }
    }

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

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

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

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

            .menu_front_button_tour-image {
                width: min(50vw, 100vh);
                height: min(25vw, 50vh);
                overflow: hidden;
            }

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

            .menu_front_button_tour_description {
                width: 77%;
                aspect-ratio: 10;
                position: absolute;
                border: none;
                background: none;
                box-shadow: none;
                transform: none;

                .menu_front_button_tour_description-title {
                    --outline_color: white;
                    --outline_width: 0.2;
                    --plus_ow: calc(var(--outline_width) * min(0.75vw, 1.5vh));
                    --minus_ow: calc(var(--outline_width) * min(-0.75vw, -1.5vh));
                    display: flex;
                    flex-direction: column;
                    font-size: min(6vw, 12vh);
                    color: #8055b9;
                    text-transform: none;
                }
            }
        }
    }

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

.bosses_select_menu-container {
    .menu_front_button-container {
        aspect-ratio: 1;
    }
    .bosses_select-container {
        justify-content: center;
        flex-direction: row;
        gap: 20%;
        .boss-container {
            justify-content: space-evenly;
            pointer-events: none;
            .menu_front_button_boss_description {
                width: 100%;
            }
        }
    }
    .menu_front_button_boss_select.locked {
        pointer-events: none;
    }
    .menu_front_button_boss-image {
        pointer-events: none;
    }
}

.pictures_select_menu-container {
    flex-direction: column;
    .menu_front_button-title {
        height: 22%;
    }
    .menu_front_button-container {
        justify-content: start;
        gap: 0.5%;
    }
    .menu_front_button_back_to_difficulty_menu {
        width: 12%;
    }
}

.missions_select_menu-container {
    flex-direction: column;
    .menu_front_button-title {
        width: 100%;
        height: 6%;
    }
}

.menu_front_button_picture_select {
    display: none;
}

.menu_front_button_picture_select[data-difficulty="12345"] {
    display: flex;
}

.pictures_select_menu-container[data-difficulty="1"] .menu_front_button_picture_select[data-difficulty="1"] {
    display: flex;
}

.pictures_select_menu-container[data-difficulty="2"] .menu_front_button_picture_select[data-difficulty="2"] {
    display: flex;
}

.pictures_select_menu-container[data-difficulty="3"] .menu_front_button_picture_select[data-difficulty="3"] {
    display: flex;
}

.pictures_select_menu-container[data-difficulty="4"] .menu_front_button_picture_select[data-difficulty="4"] {
    display: flex;
}

.pictures_select_menu-container[data-difficulty="5"] .menu_front_button_picture_select[data-difficulty="5"] {
    display: flex;
}

.pictures_infos_selection-container {
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 2.5fr 3.5fr 1.5fr;
    row-gap: 4%;
}

/* INFOS */

/* display */

.picture_infos-container {
    width: 40%;
    height: 100%;
    padding: 1% 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
}

.picture_info_display {
    display: flex;
    justify-content: center;
    align-items: center;
}

.picture_info_display_grid {
    width: auto;
    height: 90%;
    aspect-ratio: 1/2;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(20, 1fr);
    /* border: min(0.25vw, 0.5vh) solid #ffffffbf; */
    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.3vw, 0.6vh) min(0.5vw, 1vh) #443858c2;
    position: relative;
}

.picture_info_display_grid.unknown::after {
    content: "?";
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    --outline_color: #766299f5;
    --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-family: "Mikado";
    font-size: min(10vw, 20vh);
    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: 0;
    left: 0;
    z-index: 10;
}

.picture_info_display_grid_square {
    width: 100%;
    height: 100%;
    background-color: #535252;
}

/* chronos */

.picture_info_title_bests-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 3fr;
    font-family: "Mikado";
    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);
}

.picture_info_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(2.5vw, 5vh);
    text-transform: uppercase;

}

.picture_info_bests-container {
    display: grid;
    grid-template-rows: 1fr;
}

.picture_info_trophies-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

.picture_info_trophies_type-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.picture_info_trophies_type-container.selected {
    background: #f0f8ffc7;
    box-shadow: 0 0 min(0.5vw, 1vh) min(0.1vw, 0.2vh) #c3b7b7;
}

main[data-gamemode="break"] .picture_info_trophies_falseclears-container,
main[data-gamemode="puzzle"] .picture_info_trophies_falseclears-container {
    display: none;
}

main[data-gamemode="break"] .picture_info_trophies_maxnexts-container,
main[data-gamemode="picture"] .picture_info_trophies_maxnexts-container {
    display: none;
}

main[data-gamemode="puzzle"] .picture_info_trophies_maxclears-container {
    display: none;
}

.picture_info_trophies-title {
    padding-left: 8%;
    font-size: min(1.5vw, 3vh);
    text-transform: uppercase;
}

.picture_info_trophies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.picture_info_trophy-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    font-size: min(1.5vw, 3vh);
}

.picture_info_trophy {
    display: flex;
    justify-content: center;
    align-items: center;

    i {
        font-size: min(1.5vw, 3vh);
    }
}

.bronze_trophy {
    color: #CD7F32;
}

.silver_trophy {
    color: #d3d3d3;
}

.gold_trophy {
    color: gold;
}

.picture_info_best-value {
    display: flex;
    justify-content: center;
    align-items: center;
}

.picture_info_bests {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.picture_info_best {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    font-size: min(1.5vw, 3vh);
}

.picture_info_best-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.picture_info_best-value {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SELECTION */

.pictures_selection-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 15% 70% 15%;
}

/* navigation */

.pictures_selection_navigation-container,
.locations_selection_navigation-container,
.levels_selection_navigation-container,
.tours_selection_navigation-container,
.bosses_selection_navigation-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pictures_selection_navigation-wrapper,
.locations_selection_navigation-wrapper,
.levels_selection_navigation-wrapper,
.tours_selection_navigation-wrapper,
.bosses_selection_navigation-wrapper {
    width: min(4vw, 8vh);
    height: auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* filter: drop-shadow(min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) #443858c2); */
    filter: drop-shadow(min(0.6vw, 1.2vh) min(0.6vw, 1.2vh) min(0.3vw, 0.6vh) #443858c2);
    transition: translate 0.2s, filter 0.2s;
}

@media (hover: none) {
    .pictures_selection_navigation-wrapper,
    .locations_selection_navigation-wrapper,
    .levels_selection_navigation-wrapper,
    .tours_selection_navigation-wrapper,
    .bosses_selection_navigation-wrapper {
        transition: translate 0s, filter 0s;
    }
}

.pictures_selection_navigation_right-wrapper,
.locations_selection_navigation_right-wrapper,
.levels_selection_navigation_right-wrapper,
.tours_selection_navigation_right-wrapper,
.bosses_selection_navigation_right-wrapper {
    filter: drop-shadow(min(-0.3vw, -0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) #443858c2);
}

.pictures_selection_navigation-border,
.locations_selection_navigation-border,
.levels_selection_navigation-border,
.tours_selection_navigation-border,
.bosses_selection_navigation-border {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
    background: white;
    /* filter: drop-shadow(0 0 min(0.05vw, 0.1vh) #8055b9) drop-shadow(min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) #443858c2); */
}

.pictures_selection_navigation-inset,
.locations_selection_navigation-inset,
.levels_selection_navigation-inset,
.tours_selection_navigation-inset,
.bosses_selection_navigation-inset {
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8055b9;
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
    translate: 5%;
}

.pictures_selection_navigation,
.locations_selection_navigation,
.levels_selection_navigation,
.tours_selection_navigation,
.bosses_selection_navigation {
    width: 77%;
    height: 77%;
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
    translate: 5%;
}

.pictures_selection_navigation_right-wrapper,
.locations_selection_navigation_right-wrapper,
.levels_selection_navigation_right-wrapper,
.tours_selection_navigation_right-wrapper,
.bosses_selection_navigation_right-wrapper {
    rotate: y 180deg;
}

.pictures_selection_navigation-wrapper.disabled,
.locations_selection_navigation-wrapper.disabled,
.levels_selection_navigation-wrapper.disabled,
.tours_selection_navigation-wrapper.disabled,
.bosses_selection_navigation-wrapper.disabled {
    visibility: hidden;
}

.pictures_selection_navigation-wrapper:active,
.locations_selection_navigation-wrapper:active,
.levels_selection_navigation-wrapper:active,
.tours_selection_navigation-wrapper:active,
.bosses_selection_navigation-wrapper:active {
    translate: min(0.15vw, 0.3vh) min(0.15vw, 0.3vh);
    filter: drop-shadow(0 0 0 #443858c2);
}

.pictures_selection_navigation_right-wrapper:active,
.locations_selection_navigation_right-wrapper:active,
.levels_selection_navigation_right-wrapper:active,
.tours_selection_navigation_right-wrapper:active,
.bosses_selection_navigation_right-wrapper:active {
    translate: min(0.15vw, 0.3vh) min(0.15vw, 0.3vh);
    filter: drop-shadow(0 0 0 #443858c2);
}

.pictures_selection_navigation-border:hover,
.locations_selection_navigation-border:hover,
.levels_selection_navigation-border:hover,
.tours_selection_navigation-border:hover,
.bosses_selection_navigation-border:hover {
    background-color: #bdbcf5;
    background-color: #ff0000bd;
    background-color: gold;
    cursor: pointer;
    transition: background 0.25s;
}

/* list */

.pictures_selection_list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 4%;
}

.pictures_selection_picture_case {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pictures_selection_picture {
    height: 90%;
    display: flex;
    position: relative;
}

.pictures_selection_picture_achievements {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -128%;
    i {
        --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));
        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);
        font-size: min(0.75vw, 1.5vh);        
    }
    i:not(.bronze_trophy, .silver_trophy, .gold_trophy) {
        color: #ffffff;
        opacity: 0.5;
    }
}

.pictures_selection_picture_display {
    width: auto;
    height: 100%;
    aspect-ratio: 1/2;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 0 0 min(0.2vw, 0.4vh) #8055b9,
        0 0 0 min(0.4vw, 0.8vh) white,
        min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) #443858c2;
    transition: box-shadow 0.25s, scale 0.25s, translate 0.25s;
}

.pictures_selection_picture_display:not(.unknown):hover {
    box-shadow:
        0 0 0 min(0.2vw, 0.4vh) #8055b9,
        0 0 0 min(0.4vw, 0.8vh) #ff0000bd,
        min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
    cursor: pointer;
}

.pictures_selection_picture_display.selected {
    /* border: min(0.2vw, 0.4vh) solid gold; */
    box-shadow:
        0 0 0 min(0.2vw, 0.4vh) #8055b9,
        0 0 0 min(0.4vw, 0.8vh) gold,
        min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
    box-shadow: 0 0 0 min(0.2vw, 0.4vh) #8055b9, 0 0 0 min(0.4vw, 0.8vh) gold;
    scale: 0.9875;
    translate: min(0.125vw, 0.25vh) min(0.125vw, 0.25vh);
}

.pictures_selection_picture:has(.pictures_selection_picture_display.unset) {
    .pictures_selection_picture_case {
        display: none;
    }
}

.pictures_selection_picture_display.hide {
    visibility: hidden;
}

.pictures_selection_picture:has(.pictures_selection_picture_display.hide) {
    .pictures_selection_picture_achievements {
        visibility: hidden;
    }
}

.pictures_selection_picture_display.unknown::after {
    content: "?";
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    background-color: #535252;
    --outline_color: #766299f5;
        --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-family: "Mikado";
    font-size: min(4vw, 8vh);
    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: 0;
    left: 0;
    z-index: 10;
}

.pictures_selection_picture_display_grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(20, 1fr);
}

.pictures_selection_picture_display_grid_square {
    width: 100%;
    height: 100%;
    background-color: #535252;
}

/* SQUARES */

.drawn {
    background: linear-gradient(90deg, hsl(var(--h), var(--s), var(--cb)), hsl(var(--h), var(--s), var(--ct)));
    opacity: 0.8;
    opacity: 1;
    transition: background 1s;
}

.drawn[data-color="1"] {
    --ct: 55%;
    --cb: 48%;
    --h: 60;
    --s: 100%;
}

.drawn[data-color="2"] {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 100%;
}

.drawn[data-color="3"] {
    --ct: 68%;
    --cb: 67%;
    --h: 240;
    --s: 100%;
}

.drawn[data-color="4"] {
    --ct: 46%;
    --cb: 44%;
    --h: 120;
    --s: 75%;
}

.drawn[data-color="5"] {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 0%;
}

.drawn[data-color="6"] {
    --ct: 86%;
    --cb: 84%;
    --h: 0;
    --s: 100%;
}

.drawn[data-color="7"] {
    --ct: 55%;
    --cb: 48%;
    --h: 300;
    --s: 76%;
}

.drawn[data-color="8"] {
    --ct: 60%;
    --cb: 58%;
    --h: 39;
    --s: 100%;
}

.drawn[data-color="9"] {
    --ct: 55%;
    --cb: 48%;
    --h: 174;
    --s: 77%;
}

.drawn[data-color="10"] {
    --ct: 55%;
    --cb: 48%;
    --h: 320;
    --s: 100%;
}

.drawn[data-color="11"] {
    --ct: 97%;
    --cb: 95%;
    --h: 0;
    --s: 100%;
}

.drawn[data-color="12"] {
    --ct: 27%;
    --cb: 25%;
    --h: 180;
    --s: 25%;
}

.drawn[data-color="13"] {
    --ct: 97%;
    --cb: 95%;
    --h: 180;
    --s: 25%;
}

/*  ACTIONS BUTTONS */

.pictures_select_actions_buttons-container,
.locations_select_actions_buttons-container,
.levels_select_actions_buttons-container,
.tours_select_actions_buttons-container,
.bosses_select_actions_buttons-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    .menu_front_button {
        width: auto;
        height: auto;
        aspect-ratio: unset;
        padding: 0.25% 1%;
    }
}

/* */

.room_difficulty_stars-container,
.room_wins_stars-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    display: none;
    justify-content: space-evenly;
    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);
    position: relative;
}

main:is([data-mode="versus"], [data-mode="online"])  {
    .room_difficulty_stars-container, .room_wins_stars-container {
        display: flex;
    }
}

.room_difficulty_stars-container::before,
.room_wins_stars-container::before {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 -100%;
}

.room_difficulty_stars-container::before {
    content: "Difficulty";
}

.room_wins_stars-container::before {
    content: "Wins";
}

.room_difficulty_star,
.room_wins_star {
    /* width: 90%; */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.room_difficulty_star {
    aspect-ratio: 1.08;
}

.room_wins_star {
    aspect-ratio: 1.91;
}

.room_difficulty_star i,
.room_wins_star i {
    --outline_color: #766299f5;
    --outline_width: 0.15;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    /* width: 100%; */
    display: none;
    aspect-ratio: 1;
    font-size: min(1.5vw, 3vh);
    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);
    cursor: pointer;
    transition: color 0.2s, brightness 0.2s;
}

.room_difficulty_star.included,
.room_wins_star.included {
    & i.full {
        display: inline-block;
    }

    & i.empty {
        display: none;
    }
}

.room_difficulty_star,
.room_wins_star {
    & i.full {
        display: none;
    }

    & i.empty {
        display: inline-block;
    }
}

.room_difficulty_star:has(~ .room_difficulty_star:hover),
.room_wins_star:has(~ .room_wins_star:hover) {
    & i.empty {
        display: none;
    }

    & i.full {
        display: inline-block;
        color: white;
    }
}

@media not all and (hover: none) {
    .room_difficulty_star:hover i,
    .room_wins_star:hover i {
        filter: brightness(110%);
    }

    .room_difficulty_star:hover,
    .room_wins_star:hover {
        & i.empty {
            display: none;
        }

        & i.full {
            display: inline-block;
            color: gold;
        }
    }
    .room_difficulty_star:hover~.room_difficulty_star,
    .room_wins_star:hover~.room_wins_star {
        & i.empty {
            display: inline-block;
        }

        & i.full {
            display: none;
        }
    }
}

.missions_select_menu .menu_front_button_back_to_difficulty_menu {
    width: 12%;
    height: min(3.5vw, 7vh);
    margin-top: 0.75%;
    padding: 0;
}

[data-mode="versus"] .room_start_back-container {
    .menu_front_button {
        aspect-ratio: 5;
    }

    .menu_front_button_back_to_sub_menu {
        width: 50%;
    }
}

.options_menu-container {
    --outline_color: #766299f5;
    --outline_width: 0.3;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: 1.5fr 6fr 1fr;
    font-family: "Mikado";
    color: white;
    text-transform: uppercase;
    position: relative;    
    .options_menu_types_buttons-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5%;
        .menu_front_button_option_type_button {
            width: 25%;
        }
    }
    .options_menu_options-container {
        width: 100%;
        height: 100%;
        &[data-type="preferences"] {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1%;
    
            .options_menu_preference-container {
                width: 34%;
                aspect-ratio: 10;
                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,
                .menu_front_button-value {
                    display: flex;
                    justify-content: center;
                    font-size: min(1.625vw, 3.25vh);
                }
    
                .menu_front_button-title {
                    width: 60%;
                }
    
                @media not all and (hover: none) {
                    .menu_front_button-title:hover {
                        cursor: auto;
                    }
                }
    
                .menu_front_button-value {
                    width: 40%;
                }
    
                .option_brick_surface_visual {
                    width: auto;
                    height: min(1.75vw, 3.5vh);
                    aspect-ratio: 1;
                    position: unset;
                }
            }

            .options_menu_option-container {
                opacity: 0;
            }
        }
        &[data-type="controls"] {
            width: 100%;
            display: none;
            flex-direction: row;
            justify-content: space-around;
            align-items: start;
            .player_controls-container {
                width: 50%;
                height: 100%;
                aspect-ratio: unset;
                align-items: start;
                flex-direction: row;
                .menu_front_button_player_controls {
                    width: 40%;
                    margin-left: 2%;
                    .menu_front_button_player_controls-title {
                        width: 100%;
                    }
                }
                .options_menu_player_controls {
                    width: 58%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 0.5%;
                }
                .player_control {
                    width: 90%;
                    height: auto;
                    aspect-ratio: 9;
                    padding: 0;
                    border: none;
                    .player_control-title {
                        width: 50%;
                        text-align: center;
                        font-size: min(1.45vw, 2.9vh);
                        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);
                    }
                    @media not all and (hover: none) {
                        .player_control-title:hover {
                            cursor: auto;
                            filter: none;
                        }
                    }
                    .player_control-value {
                        width: 50%;
                        text-align: center;
                        font-size: min(1.45vw, 2.9vh);
                        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_back_button-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .menu_front_button_back_to_menu {
            width: 13%;
            aspect-ratio: 4;
        }
    }

    .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;
        }
    }

    @media not all and (hover: none) {
        .menu_front_button_option_type_button:hover .menu_front_button_option_type-title {
            color: gold;
        }
        .menu_front_button_player_controls:hover {
            filter: none;
            cursor: auto;
        }
        .menu_front_button:not(.menu_front_button_back_to_menu, .menu_front_button_option_type_button):hover {
            .menu_front_button-title {
                color: white;
            }
        }        
        .menu_front_button-value:hover {
            color: gold;
        }
        .options_menu_waiting_key-container:hover {
            filter: brightness(100%);
        }
    }

    &[data-view="preferences"] .options_menu_options-container[data-type="preferences"] {
        display: flex;
    }

    &[data-view="controls"] .options_menu_options-container[data-type="controls"] {
        display: flex;
    }
}

.options_menu-container::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000000bb;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
}

.options_menu-container[data-state="waitingkey"]::after {
    visibility: visible;
}

.options_menu-container[data-state="waitingkey"] .options_menu_waiting_key-container {
    visibility: visible;
}

.start_game {
    animation: start_game 2.5s linear forwards;
}
    
@keyframes start_game {
    15% {
        opacity: 1;
        filter: blur(0) brightness(150%);
        scale: 1.1;
    }

    100% {
        opacity: 0;
        filter: blur(min(2vw, 4vh)) brightness(100%);
        scale: 1;
    }
}

@media (pointer: coarse) {
    .menu_front_button {
        filter: brightness(100%);
    }
}

.webview {
    .options_menu_fullscreen_activation-container {
        display: none;
    }
}

@media all and (display-mode: fullscreen) {
    main {
        aspect-ratio: 16/9;
    }
}