.title_letter_block {
    --border_width: min(0.3vw, 0.6vh);
    height: auto;
    aspect-ratio: 1;
    background: linear-gradient(var(--deg), hsl(var(--h), var(--s), var(--cb)), hsl(var(--h), var(--s), var(--ct)));
    border-top-width: var(--border_width);
    border-top-style: solid;
    border-top-color: var(--bt);
    border-left-width: var(--border_width);
    border-left-style: solid;
    border-left-color: var(--bs);
    border-right-width: var(--border_width);
    border-right-style: solid;
    border-right-color: var(--bs);
    border-bottom-width: var(--border_width);
    border-bottom-style: solid;
    border-bottom-color: var(--bb);
    position: absolute;
    /* box-shadow: inset -1px 1px 2px #ffffff94; */
}

/* YELLOW */
.title_letter[data-color="1"] .title_letter_block,
.loading_letter[data-color="1"] .loading_letter_block,
.loading_shape[data-shape="o"] .loading_shape_block,
.brick[data-color="1"] {
    --ct: 55%;
    --cb: 48%;
    --h: 60;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* RED */
.title_letter[data-color="2"] .title_letter_block,
.loading_letter[data-color="2"] .loading_letter_block,
.loading_shape[data-shape="z"] .loading_shape_block,
.brick[data-color="2"] {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* BLUE */
.title_letter[data-color="3"] .title_letter_block,
.loading_letter[data-color="3"] .loading_letter_block,
.loading_shape[data-shape="j"] .loading_shape_block,
.brick[data-color="3"] {
    --ct: 68%;
    --cb: 67%;
    --h: 240;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 60%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* GREEN */
.title_letter[data-color="4"] .title_letter_block,
.loading_letter[data-color="4"] .loading_letter_block,
.loading_shape[data-shape="s"] .loading_shape_block,
.brick[data-color="4"] {
    --ct: 46%;
    --cb: 44%;
    --h: 120;
    --s: 75%;
    --bt: hsl(var(--h), var(--s), 60%);
    --bs: hsl(var(--h), var(--s), 40%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* STEEL */
.title_letter[data-color="5"] .title_letter_block,
.loading_letter[data-color="5"] .loading_letter_block,
.brick[data-color="5"] {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 0%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* CORNFLOWER LILAC */
.title_letter[data-color="6"] .title_letter_block,
.loading_letter[data-color="6"] .loading_letter_block,
.brick[data-color="6"] {
    --ct: 86%;
    --cb: 84%;
    --h: 0;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 90%);
    --bs: hsl(var(--h), var(--s), 80%);
    --bb: hsl(var(--h), var(--s), 50%);
}

/* PURPLE */
.title_letter[data-color="7"] .title_letter_block,
.loading_letter[data-color="7"] .loading_letter_block,
.loading_shape[data-shape="t"] .loading_shape_block,
.brick[data-color="7"] {
    --ct: 55%;
    --cb: 48%;
    --h: 300;
    --s: 76%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* ORANGE */
.title_letter[data-color="8"] .title_letter_block,
.loading_letter[data-color="8"] .loading_letter_block,
.loading_shape[data-shape="l"] .loading_shape_block,
.brick[data-color="8"] {
    --ct: 60%;
    --cb: 58%;
    --h: 39;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 45%);
    --bb: hsl(var(--h), var(--s), 35%);
}

/* TURQUOISE */
.title_letter[data-color="9"] .title_letter_block,
.loading_letter[data-color="9"] .loading_letter_block,
.loading_shape[data-shape="i"] .loading_shape_block,
.brick[data-color="9"] {
    --ct: 59%;
    --cb: 49%;
    --h: 174;
    --s: 72%;
    --bt: hsl(var(--h), var(--s), 65%);
    --bs: hsl(var(--h), var(--s), 45%);
    --bb: hsl(var(--h), var(--s), 34%);
    /* --ct: 55%;
    --cb: 48%;
    --h: 174;
    --s: 77%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%); */
}

/* FUCHSIA */
.title_letter[data-color="10"] .title_letter_block,
.loading_letter[data-color="10"] .loading_letter_block,
.brick[data-color="10"] {
    --ct: 55%;
    --cb: 48%;
    --h: 320;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* WHITE */
.title_letter[data-color="11"] .title_letter_block,
.loading_letter[data-color="11"] .loading_letter_block,
.brick[data-color="11"] {
    --ct: 97%;
    --cb: 95%;
    --h: 0;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 100%);
    --bs: hsl(var(--h), var(--s), 90%);
    --bb: hsl(var(--h), var(--s), 80%);
}

/* BLACK */
.title_letter[data-color="12"] .title_letter_block,
.loading_letter[data-color="12"] .loading_letter_block,
.brick[data-color="12"] {
    --ct: 27%;
    --cb: 25%;
    --h: 180;
    --s: 25%;
    --bt: hsl(var(--h), var(--s), 30%);
    --bs: hsl(var(--h), var(--s), 20%);
    --bb: hsl(var(--h), var(--s), 15%);
}

.title_letter {
    --blocksize: min(2.5vw, 5vh);
    width: calc(var(--blocksize) * 5);
    height: auto;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(5, var(--blocksize));
    justify-items: center;
    align-items: center;
    position: relative;
    animation-name: bright;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

.title_letter:nth-of-type(1) {
    animation-delay: 3.5s;
}

.title_letter:nth-of-type(2) {
    animation-delay: 3.55s;
}

.title_letter:nth-of-type(3) {
    animation-delay: 3.6s;
}

.title_letter:nth-of-type(4) {
    animation-delay: 3.65s;
}

.title_letter:nth-of-type(5) {
    animation-delay: 3.7s;
}

.title_letter:nth-of-type(6) {
    animation-delay: 3.75s;
}

@keyframes bright {
    50% {
        filter: brightness(200%);
    }
}

.title_letter_line {
    width: 100%;
    height: calc(var(--blocksize) * 1);
    display: grid;
    grid-template-columns: repeat(1, 100%);
    justify-items: center;
    align-items: center;
}

.title_letter_block,
.brick {
    --deg: 0deg;
    width: var(--blocksize);
    position: unset;
}

.brick {
    --border_width: min(0.25vw, 0.5vh);
    width: min(2vw, 4vh);
}

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

.loading_letter_block,
.loading_shape_block {
    --border_width: min(0.375vw, 0.75vh);
    height: auto;
    aspect-ratio: 1;
    background: linear-gradient(var(--deg), hsl(var(--h), var(--s), var(--cb)), hsl(var(--h), var(--s), var(--ct)));
    border-top-width: var(--border_width);
    border-top-style: solid;
    border-top-color: var(--bt);
    border-left-width: var(--border_width);
    border-left-style: solid;
    border-left-color: var(--bs);
    border-right-width: var(--border_width);
    border-right-style: solid;
    border-right-color: var(--bs);
    border-bottom-width: var(--border_width);
    border-bottom-style: solid;
    border-bottom-color: var(--bb);
    position: absolute;
}

.loading_letter_block,
.loading_shape_block {
    --deg: 0deg;
    width: var(--blocksize);
    position: unset;
}

.loading_letter,
.loading_shape {
    width: 100%;
    height: 100%;
    display: grid;
}

.loading_letter {
    --blocksize: min(4vw, 8vh);
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.loading_shape {
    --blocksize: min(5vw, 10vh);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.loading_shape {
    display: none;
}

.loading_letter_block,
.loading_shape_block,
.brick {
    --deg: 0deg;
    width: var(--blocksize);
    position: unset;
}

.brick {
    --border_width: min(0.25vw, 0.5vh);
    width: min(2vw, 4vh);
}

.brick,
.player_effect_color-background,
.option_brick_surface_visual,
.mission_description_value_visual[data-type="color"],
.game_mission_description_value_visual[data-type="color"] {
    --border_width: min(0.25vw, 0.5vh);
    --bottom: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    background: linear-gradient(180deg, hsl(var(--h), var(--s), var(--cb)), hsl(var(--h), var(--s), var(--ct)));
    border-top-width: var(--border_width);
    border-top-style: solid;
    border-top-color: var(--bt);
    border-left-width: var(--border_width);
    border-left-style: solid;
    border-left-color: var(--bs);
    border-right-width: var(--border_width);
    border-right-style: solid;
    border-right-color: var(--bs);
    border-bottom-width: var(--border_width);
    border-bottom-style: solid;
    border-bottom-color: var(--bb);
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s, filter 0.5s, box-shadow 0.5s;
}

.game_mission_description_value_visual[data-type="color"] {
    width: auto;
}

.character_effect-value .brick {
    --border_width: min(0.3vw, 0.6vh);
    width: min(2vw, 4vh);
    height: auto;
    aspect-ratio: 1;
    background: linear-gradient(var(--deg), hsl(var(--h), var(--s), var(--cb)), hsl(var(--h), var(--s), var(--ct)));
    border-top-width: var(--border_width);
    border-top-style: solid;
    border-top-color: var(--bt);
    border-left-width: var(--border_width);
    border-left-style: solid;
    border-left-color: var(--bs);
    border-right-width: var(--border_width);
    border-right-style: solid;
    border-right-color: var(--bs);
    border-bottom-width: var(--border_width);
    border-bottom-style: solid;
    border-bottom-color: var(--bb);
    position: unset;
}

.brick.lego {
    border-radius: min(0.15vw, 0.3vh);
    box-shadow: inset min(0.375vw, 0.75vh) min(0.375vw, 0.75vh) 0 min(0.1vw, 0.2vh) #000000;
    box-shadow: inset 0 min(0.075vw, 0.15vh) min(0.25vw, 0.5vh) min(0.0375vw, 0.075vh) #272727d1;
    box-shadow: inset 0 min(0.075vw, 0.15vh) min(0.25vw, 0.5vh) min(0.0375vw, 0.075vh) #262626fa;
}

.brick:not(.preview)[data-color="0"] {
    --ct: 84%;
    --cb: 81%;
    --h: 69;
    --s: 54%;
    --bt: hsl(var(--h), var(--s), 90%);
    --bs: hsl(var(--h), var(--s), 65%);
    --bb: hsl(var(--h), var(--s), 45%);
    /* --ct: 97%;
    --cb: 95%;
    --h: 0;
    --s: 0%;
    --bt: hsl(0deg 0% 94%);
    --bs: hsl(0deg 0% 83%);
    --bb: hsl(0deg 0% 69%); */
}

/* YELLOW */
.brick:not(.preview)[data-color="1"],
.option_brick_surface_visual[data-color="1"],
.mission_description_value_visual[data-type="color"][data-color="1"],
.game_mission_description_value_visual[data-type="color"][data-color="1"],
.player_effect-container[data-color="1"] .player_effect_color-background {
    --ct: 55%;
    --cb: 48%;
    --h: 60;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* RED */
.brick:not(.preview)[data-color="2"],
.option_brick_surface_visual[data-color="2"],
.mission_description_value_visual[data-type="color"][data-color="2"],
.game_mission_description_value_visual[data-type="color"][data-color="2"],
.player_effect-container[data-color="2"] .player_effect_color-background {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* BLUE */
.brick:not(.preview)[data-color="3"],
.option_brick_surface_visual[data-color="3"],
.mission_description_value_visual[data-type="color"][data-color="3"],
.game_mission_description_value_visual[data-type="color"][data-color="3"],
.player_effect-container[data-color="3"] .player_effect_color-background {
    --ct: 68%;
    --cb: 67%;
    --h: 240;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 60%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* GREEN */
.brick:not(.preview)[data-color="4"],
.option_brick_surface_visual[data-color="4"],
.mission_description_value_visual[data-type="color"][data-color="4"],
.game_mission_description_value_visual[data-type="color"][data-color="4"],
.player_effect-container[data-color="4"] .player_effect_color-background {
    --ct: 46%;
    --cb: 44%;
    --h: 120;
    --s: 75%;
    --bt: hsl(var(--h), var(--s), 60%);
    --bs: hsl(var(--h), var(--s), 40%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* STEEL */
.brick:not(.preview)[data-color="5"],
.option_brick_surface_visual[data-color="5"],
.mission_description_value_visual[data-type="color"][data-color="5"],
.game_mission_description_value_visual[data-type="color"][data-color="5"],
.player_effect-container[data-color="5"] .player_effect_color-background {
    --ct: 55%;
    --cb: 48%;
    --h: 0;
    --s: 0%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* CORNFLOWER LILAC */
.brick:not(.preview)[data-color="6"],
.option_brick_surface_visual[data-color="6"],
.mission_description_value_visual[data-type="color"][data-color="6"],
.game_mission_description_value_visual[data-type="color"][data-color="6"],
.player_effect-container[data-color="6"] .player_effect_color-background {
    --ct: 86%;
    --cb: 84%;
    --h: 0;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 90%);
    --bs: hsl(var(--h), var(--s), 80%);
    --bb: hsl(var(--h), var(--s), 50%);
}

/* PURPLE */
.brick:not(.preview)[data-color="7"],
.option_brick_surface_visual[data-color="7"],
.mission_description_value_visual[data-type="color"][data-color="7"],
.game_mission_description_value_visual[data-type="color"][data-color="7"],
.player_effect-container[data-color="7"] .player_effect_color-background {
    --ct: 55%;
    --cb: 48%;
    --h: 300;
    --s: 76%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* ORANGE */
.brick:not(.preview)[data-color="8"],
.option_brick_surface_visual[data-color="8"],
.mission_description_value_visual[data-type="color"][data-color="8"],
.game_mission_description_value_visual[data-type="color"][data-color="8"],
.player_effect-container[data-color="8"] .player_effect_color-background {
    --ct: 60%;
    --cb: 58%;
    --h: 39;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 45%);
    --bb: hsl(var(--h), var(--s), 35%);
}

/* TURQUOISE */
.brick:not(.preview)[data-color="9"],
.option_brick_surface_visual[data-color="9"],
.mission_description_value_visual[data-type="color"][data-color="9"],
.game_mission_description_value_visual[data-type="color"][data-color="9"],
.player_effect-container[data-color="9"] .player_effect_color-background {
    --ct: 59%;
    --cb: 49%;
    --h: 174;
    --s: 72%;
    --bt: hsl(var(--h), var(--s), 65%);
    --bs: hsl(var(--h), var(--s), 45%);
    --bb: hsl(var(--h), var(--s), 34%);
    /* --ct: 55%;
    --cb: 48%;
    --h: 174;
    --s: 77%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%); */
}

/* FUCHSIA */
.brick:not(.preview)[data-color="10"],
.option_brick_surface_visual[data-color="10"],
.mission_description_value_visual[data-type="color"][data-color="10"],
.game_mission_description_value_visual[data-type="color"][data-color="10"],
.player_effect-container[data-color="10"] .player_effect_color-background {
    --ct: 55%;
    --cb: 48%;
    --h: 320;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 75%);
    --bs: hsl(var(--h), var(--s), 42%);
    --bb: hsl(var(--h), var(--s), 30%);
}

/* WHITE */
.brick:not(.preview)[data-color="11"] {
    --ct: 97%;
    --cb: 95%;
    --h: 0;
    --s: 100%;
    --bt: hsl(var(--h), var(--s), 100%);
    --bs: hsl(var(--h), var(--s), 90%);
    --bb: hsl(var(--h), var(--s), 80%);
}

/* BLACK */
.brick:not(.preview)[data-color="12"] {
    --ct: 27%;
    --cb: 25%;
    --h: 180;
    --s: 25%;
    --bt: hsl(var(--h), var(--s), 30%);
    --bs: hsl(var(--h), var(--s), 20%);
    --bb: hsl(var(--h), var(--s), 15%);
}

/* SURFACES */

/* Custom */
[data-bricks="custom"], [data-surface="custom"]  {
    .brick:not(.preview)[data-color="1"] {
        --ct: 55%;
        --cb: 38%;
    }

    .brick:not(.preview)[data-color="2"] {
        --ct: 50%;
        --cb: 37%;
    }

    .brick:not(.preview)[data-color="3"] {
        --ct: 68%;
        --cb: 58%;
    }

    .brick:not(.preview)[data-color="4"] {
        --ct: 46%;
        --cb: 34%;
    }

    .brick:not(.preview)[data-color="5"] {
        --ct: 55%;
        --cb: 48%;
    }

    .brick:not(.preview)[data-color="6"] {
        --ct: 86%;
        --cb: 74%;
    }

    .brick:not(.preview)[data-color="7"] {
        --ct: 55%;
        --cb: 37%;
    }

    .brick:not(.preview)[data-color="8"] {
        --ct: 60%;
        --cb: 40%;
    }

    .brick:not(.preview)[data-color="9"] {
        --ct: 59%;
        --cb: 39%;
    }

    .brick:not(.preview)[data-color="10"] {
        --ct: 55%;
        --cb: 38%;
    }

    .brick:not(.preview)[data-color="11"] {
        --ct: 97%;
        --cb: 95%;
    }

    .brick:not(.preview)[data-color="12"] {
        --ct: 27%;
        --cb: 25%;
    }
}

/* Curvy */

[data-bricks="curvy"], [data-surface="curvy"]  {
    .brick:not(.preview) {
        border-radius: min(0.3vw, 0.6vh);
    }
}

/* Mozaïc */

[data-bricks="mozaic"], [data-surface="mozaic"]  {
    .brick:not(.preview) {
        --border_width: min(1vw, 2vh);
    }
}

/* Block */

[data-bricks="block"], [data-surface="block"]  {
    .brick:not(.preview) {
        --border_width: min(0.5vw, 1.5vh);
    }
}

/* Patch */

[data-bricks="patch"], [data-surface="patch"]  {
    .brick:not(.preview) {
        border-top-style: dotted;
        border-right-style: dotted;
        border-bottom-style: dotted;
        border-left-style: dotted;
    }
}

/* Puzzle */

[data-bricks="puzzle"], [data-surface="puzzle"]  {
    .brick:not(.preview) {
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
    }
}

/* Glass */

[data-bricks="glass"], [data-surface="glass"]  {
    .brick:not(.preview) {
        border-top-style: groove;
        border-right-style: groove;
        border-bottom-style: groove;
        border-left-style: groove;
    }
}

/* Tile */

[data-bricks="tile"], [data-surface="tile"]  {
    .brick:not(.preview) {
        border-top-style: double;
        border-right-style: double;
        border-bottom-style: double;
        border-left-style: double;
    }
}

/* Inset */

[data-bricks="inset"], [data-surface="inset"]  {
    .brick:not(.preview) {
        border-top-style: inset;
        border-right-style: inset;
        border-bottom-style: inset;
        border-left-style: inset;
    }
}

/* Outset */

[data-bricks="outset"], [data-surface="outset"]  {
    .brick:not(.preview) {
        border-top-style: outset;
        border-right-style: outset;
        border-bottom-style: outset;
        border-left-style: outset;
    }
}

.brick.preview {
    background: #ffffff14;
    border: none;
}

.tetris_grid_square.drawn:not(.hide) .brick.preview {
    background: #ffffffbe;
    z-index: 1;
}

.brick.perfectspot {
    filter: brightness(110%);
    filter: brightness(100%);
}

.brick.correctspot {
    filter: brightness(100%);
}

.brick.badspot {
    /* filter: brightness(50%); */
    filter: contrast(50%);
    /* opacity: 0.5; */
}

.brick.set.remove {
    /* animation: removebrick 0.5s linear forwards; */
}

.tetris_grid.reveal {
    .brick.set:not(.drawn) {
        opacity: 0.2;
    }
}

.tetris_grid.remaining {
    .brick.set.drawn {
        filter: brightness(150%);
    }
}

@keyframes removebrick {
    25% {
        filter: brightness(100%);
        scale: 1
    }

    75% {
        filter: brightness(200%);
        scale: 1.1;
        opacity: 1;
    }

    100% {
        opacity: 0
    }
}