.loading_page-container {
    width: 100%;
    height: 100%;
    display: block;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0;
}

#game .loading_page-container {
    transition: opacity 2s, z-index 0s 2s;
}

#selection .loading_page-container {
    transition: opacity 0s, z-index 0s 0s;
}

main.instant.loading .loading_page-container {
    transition: opacity 0s, z-index 0s 0s;
}

main.loading .loading_page-container {
    opacity: 1;
    z-index: 2000;
}

.loading-container {
    width: min(20vw, 40vh);
    height: auto;
    aspect-ratio: 1;
    display: none;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 0;
    opacity: 1;
}

main.loading .loading-container {
    display: flex;
}

main.loading.shortloading {
    .loading_letter {
        display: none;
    }
    .loading_shape {
        display: grid;
    }
}

.loading_letter .loading_letter_block,
.loading_shape .loading_shape_block {
    opacity: 0;
    /* transition: opacity 0.1s, color 0.15s; */
}

.loading_letter[data-letter="t"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="5"],
    [data-nb="8"],
    [data-nb="13"],
    [data-nb="18"],
    [data-nb="23"] {
        opacity: 1;
    }
}

.loading_letter[data-letter="t"][data-color="3"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="5"],
    [data-nb="8"],
    [data-nb="13"],
    [data-nb="18"],
    [data-nb="23"] {
        animation: letteranim1 0.4s;
    }
}

.loading_letter[data-letter="e"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="5"],
    [data-nb="6"],
    [data-nb="11"],
    [data-nb="12"],
    [data-nb="13"],
    [data-nb="14"],
    [data-nb="16"],
    [data-nb="21"],
    [data-nb="22"],
    [data-nb="23"],
    [data-nb="24"],
    [data-nb="25"] {
        opacity: 1;
        animation: letteranim2 0.4s;
    }
}

.loading_letter[data-letter="t"][data-color="1"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="5"],
    [data-nb="8"],
    [data-nb="13"],
    [data-nb="18"],
    [data-nb="23"] {
        animation: letteranim3 0.4s;
    }
}

.loading_letter[data-letter="r"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="6"],
    [data-nb="10"],
    [data-nb="11"],
    [data-nb="12"],
    [data-nb="13"],
    [data-nb="14"],
    [data-nb="15"],
    [data-nb="16"],
    [data-nb="19"],
    [data-nb="21"],
    [data-nb="25"] {
        opacity: 1;
    }
}

.loading_letter[data-letter="r"][data-color="4"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="6"],
    [data-nb="10"],
    [data-nb="11"],
    [data-nb="12"],
    [data-nb="13"],
    [data-nb="14"],
    [data-nb="15"],
    [data-nb="16"],
    [data-nb="19"],
    [data-nb="21"],
    [data-nb="25"] {
        animation: letteranim4 0.4s;
    }
}

.loading_letter[data-letter="i"] {
    [data-nb="3"],
    [data-nb="8"],
    [data-nb="13"],
    [data-nb="18"],
    [data-nb="23"] {
        opacity: 1;
        animation: letteranim5 0.4s;
    }
}

.loading_letter[data-letter="s"] {
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="5"],
    [data-nb="6"],
    [data-nb="11"],
    [data-nb="12"],
    [data-nb="13"],
    [data-nb="14"],
    [data-nb="15"],
    [data-nb="20"],
    [data-nb="21"],
    [data-nb="22"],
    [data-nb="23"],
    [data-nb="24"] {
        opacity: 1;
        animation: letteranim6 0.4s;
    }
}

.loading_letter[data-letter="x"] {
    [data-nb="1"],
    [data-nb="5"],
    [data-nb="7"],
    [data-nb="9"],
    [data-nb="13"],
    [data-nb="17"],
    [data-nb="19"],
    [data-nb="21"],
    [data-nb="25"] {
        opacity: 1;
        animation: letteranim7 0.4s;
        transform-origin: 100% 50%;
    }
}

.loading_letter[data-letter="t"][data-color="5"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="5"],
    [data-nb="8"],
    [data-nb="13"],
    [data-nb="18"],
    [data-nb="23"] {
        animation: letteranim8 0.4s;
        transform-origin: 0% 50%;
    }
}

.loading_letter[data-letter="r"][data-color="9"] {
    [data-nb="1"],
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="6"],
    [data-nb="10"],
    [data-nb="11"],
    [data-nb="12"],
    [data-nb="13"],
    [data-nb="14"],
    [data-nb="15"],
    [data-nb="16"],
    [data-nb="19"],
    [data-nb="21"],
    [data-nb="25"] {
        animation: letteranim9 0.4s;
        transform-origin: 50% 0%;
    }
}

.loading_letter[data-letter="a"] {
    [data-nb="2"],
    [data-nb="3"],
    [data-nb="4"],
    [data-nb="6"],
    [data-nb="10"],
    [data-nb="11"],
    [data-nb="12"],
    [data-nb="13"],
    [data-nb="14"],
    [data-nb="15"],
    [data-nb="16"],
    [data-nb="20"],
    [data-nb="21"],
    [data-nb="25"] {
        opacity: 1;
        animation: letteranim10 0.4s;
        transform-origin: 50% 100%;
    }
}

@keyframes letteranim1 {
    0% { transform: translateX(-100%); opacity: 0 }
    100% { transform: translateX(0%); opacity: 1 }
}

@keyframes letteranim2 {
    0% { transform: translateY(-100%); opacity: 0 }
    100% { transform: translateY(0%); opacity: 1 }
}

@keyframes letteranim3 {
    0% { transform: translateX(100%); opacity: 0 }
    100% { transform: translateX(0%); opacity: 1 }
}

@keyframes letteranim4 {
    0% { transform: translateY(100%); opacity: 0 }
    100% { transform: translateY(0%); opacity: 1 }
}

@keyframes letteranim5 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

@keyframes letteranim6 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(-360deg); }
}

@keyframes letteranim7 {
    0% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes letteranim8 {
    0% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes letteranim9 {
    0% { transform: rotateY(-90deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes letteranim10 {
    0% { transform: rotateX(-90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes letteranim11 {
    0% { scale: 2 }
    100% { scale: 1 }
}

.loading_shape[data-shape="i"] {
    [data-nb="5"],
    [data-nb="6"],
    [data-nb="7"],
    [data-nb="8"] {
        opacity: 1;
    }
}

.loading_shape[data-shape="j"] {
    [data-nb="5"],
    [data-nb="9"],
    [data-nb="10"],
    [data-nb="11"] {
        opacity: 1;
    }
}

.loading_shape[data-shape="l"] {
    [data-nb="7"],
    [data-nb="9"],
    [data-nb="10"],
    [data-nb="11"] {
        opacity: 1;
    }
}

.loading_shape[data-shape="o"] {
    [data-nb="6"],
    [data-nb="7"],
    [data-nb="10"],
    [data-nb="11"] {
        opacity: 1;
    }
}

.loading_shape[data-shape="s"] {
    [data-nb="6"],
    [data-nb="7"],
    [data-nb="9"],
    [data-nb="10"] {
        opacity: 1;
    }
}

.loading_shape[data-shape="t"] {
    [data-nb="6"],
    [data-nb="9"],
    [data-nb="10"],
    [data-nb="11"] {
        opacity: 1;
    }
}

.loading_shape[data-shape="z"] {
    [data-nb="5"],
    [data-nb="6"],
    [data-nb="10"],
    [data-nb="11"] {
        opacity: 1;
    }
}