.map_center_messages {
    --outline_color: #8055b9;
    --outline_width: 0.5;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    font-family: "Mikado";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
}

.map_center_messages.anim_ready,
.map_center_messages.anim_start,
.map_center_messages.anim_gameover,
.map_center_messages.anim_loser,
.map_center_messages.anim_winner,
.map_center_messages.anim_clear,
.map_center_messages.anim_pause,
.map_center_messages.anim_3,
.map_center_messages.anim_2,
.map_center_messages.anim_1,
.map_center_messages.anim_allclear,
.map_center_messages.anim_levelup,
.map_center_messages.anim_combo,
.map_center_messages.anim_backtoback,
.map_center_messages.anim_tetris {
    visibility: visible;
}

.map_center_messages.anim_gameover .mcm_gameover,
.map_center_messages.anim_loser .mcm_loser,
.map_center_messages.anim_winner .mcm_winner,
.map_center_messages.anim_clear .mcm_clear,
.map_center_messages.anim_ready .mcm_ready,
.map_center_messages.anim_start .mcm_start,
.map_center_messages.anim_pause .mcm_pause,
.map_center_messages.anim_3 .mcm_3,
.map_center_messages.anim_2 .mcm_2,
.map_center_messages.anim_1 .mcm_1,
.map_center_messages.anim_levelup .mcm_levelup,
.map_center_messages.anim_tetris .mcm_tetris {
    top: 40%;
}

.map_center_messages.anim_gameover .mcm_gameover,
.map_center_messages.anim_loser .mcm_loser,
.map_center_messages.anim_winner .mcm_winner,
.map_center_messages.anim_clear .mcm_clear,
.map_center_messages.anim_allclear .mcm_allclear {
    top: 18%;
}

.map_center_messages.anim_allclear .mcm_allclear {
    top: 75%;
}

.map_center_messages.anim_backtoback .mcm_backtoback {
    top: 25%;
}

.map_center_messages.anim_combo .mcm_combo {
    top: 60%;
}

.mcm_characters-container {
    width: fit-content;
    height: fit-content;
    display: flex;
    display: none;
    position: absolute;
}

.map_center_messages.anim_ready .mcm_ready,
.map_center_messages.anim_start .mcm_start,
.map_center_messages.anim_gameover .mcm_gameover,
.map_center_messages.anim_loser .mcm_loser,
.map_center_messages.anim_winner .mcm_winner,
.map_center_messages.anim_clear .mcm_clear,
.map_center_messages.anim_pause .mcm_pause,
.map_center_messages.anim_3 .mcm_3,
.map_center_messages.anim_2 .mcm_2,
.map_center_messages.anim_1 .mcm_1,
.map_center_messages.anim_allclear .mcm_allclear,
.map_center_messages.anim_levelup .mcm_levelup,
.map_center_messages.anim_combo .mcm_combo,
.map_center_messages.anim_backtoback .mcm_backtoback,
.map_center_messages.anim_tetris .mcm_tetris {
    display: flex;
    translate: 0 -50%;
}

.map_center_messages.anim_gameover .mcm_gameover,
.map_center_messages.anim_levelup .mcm_levelup,
.map_center_messages.anim_allclear .mcm_allclear {
    white-space: pre;
}

.map_center_messages span {
    display: inline-block;
    font-size: min(5vw, 10vh);
    font-size: min(6vw, 12vh);
    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);
}

.map_center_messages.anim_ready .mcm_ready {
    --duration: 0.25;
    animation-name: containerreadyanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containerreadyanim {
    from {
        translate: 0 -100%
    }

    to {
        translate: 0 -50%;
    }
}

.map_center_messages.anim_ready .mcm_ready span {
    font-size: min(4.75vw, 9.5vh);
    font-size: min(6vw, 12vh);
    animation-name: readyanim;
    animation-duration: 0.2s;
    animation-delay: calc((var(--delay) + var(--duration)) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.map_center_messages.anim_ready .mcm_ready span:nth-of-type(1) {
    --delay: 0;
}

.map_center_messages.anim_ready .mcm_ready span:nth-of-type(2) {
    --delay: 0.075;
}

.map_center_messages.anim_ready .mcm_ready span:nth-of-type(3) {
    --delay: 0.15;
}

.map_center_messages.anim_ready .mcm_ready span:nth-of-type(4) {
    --delay: 0.225;
}

.map_center_messages.anim_ready .mcm_ready span:nth-of-type(5) {
    --delay: 0.3;
}

.map_center_messages.anim_ready .mcm_ready span:nth-of-type(6) {
    --delay: 0.375;
}

@keyframes readyanim {
    0% {
        translate: 0 -50%;
    }

    15%,
    85% {
        color: white;
    }

    50% {
        color: #f35e5e;
    }

    66% {
        translate: 0 25%;
    }

    100% {
        translate: 0 0;
    }
}

.map_center_messages.anim_start .mcm_start {
    --duration: 0.8;
    opacity: 0;
    animation-name: containerstartanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containerstartanim {

    0%,
    95% {
        opacity: 1;
    }

    15% {
        scale: 1.15;
    }

    30% {
        scale: 1;
    }

    100% {
        opacity: 0;
    }
}

.map_center_messages.anim_start .mcm_start span {
    --duration: 0.8;
    animation-name: startanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes startanim {

    0%,
    100% {
        color: white;
    }

    15% {
        color: #fff3af;
    }

    30% {
        color: white;
    }
}

.map_center_messages.anim_gameover .mcm_gameover,
.map_center_messages.anim_loser .mcm_loser {
    animation-name: containergameoveranim;
    animation-delay: 3.5s;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@keyframes containergameoveranim {
    100% {
        scale: 1.025;
    }
}

.map_center_messages.anim_gameover .mcm_gameover,
.map_center_messages.anim_loser .mcm_loser {
    /* line-height: min(2.15vw, 4.3vh); */
    text-align: center;
    /* display: flex; */
}

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

.map_center_messages.anim_gameover .mcm_gameover span,
.map_center_messages.anim_loser .mcm_loser span {
    --ct: 100%;
    --h: 0;
    --s: 0;
    color: hsl(var(--h), var(--s), var(--ct));
    color: white;
    animation-name: gameoveranim;
    animation-duration: 0.5s;
    animation-delay: calc(var(--delay) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(1),
.map_center_messages.anim_loser .mcm_loser span:nth-of-type(1) {
    --ct: 55%;
    --h: 60;
    --s: 100%;
    --delay: 0;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(2),
.map_center_messages.anim_loser .mcm_loser span:nth-of-type(2) {
    --ct: 55%;
    --h: 0;
    --s: 100%;
    --delay: 0.025;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(3),
.map_center_messages.anim_loser .mcm_loser span:nth-of-type(3) {
    --ct: 68%;
    --h: 240;
    --s: 100%;
    --delay: 0.05;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(4),
.map_center_messages.anim_loser .mcm_loser span:nth-of-type(4) {
    --ct: 46%;
    --h: 120;
    --s: 75%;
    --delay: 0.075;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(5),
.map_center_messages.anim_loser .mcm_loser span:nth-of-type(5) {
    --ct: 55%;
    --h: 0;
    --s: 0%;
    --delay: 0.1;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(6) {
    --ct: 86%;
    --h: 0;
    --s: 100%;
    --delay: 0.125;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(7) {
    --ct: 55%;
    --h: 300;
    --s: 76%;
    --delay: 0.15;
}

.map_center_messages.anim_gameover .mcm_gameover span:nth-of-type(8) {
    --ct: 60%;
    --h: 39;
    --s: 100%;
    --delay: 0.175;
}

@keyframes gameoveranim {
    50% {
        scale: 1.2;
        color: hsl(var(--h), var(--s), var(--ct));
    }
}

.map_center_messages.anim_winner .mcm_winner span {
    --ct: 100%;
    --h: 0;
    --s: 0;
    color: hsl(var(--h), var(--s), var(--ct));
    color: white;
    font-size: min(6vw, 12vh);
    animation-name: winneranim;
    animation-duration: 1.5s;
    animation-delay: calc(var(--delay) * 1s);
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(1) {
    --ct: 55%;
    --h: 60;
    --s: 100%;
    --delay: 0;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(2) {
    --ct: 55%;
    --h: 0;
    --s: 100%;
    --delay: 0.025;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(3) {
    --ct: 68%;
    --h: 240;
    --s: 100%;
    --delay: 0.05;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(4) {
    --ct: 46%;
    --h: 120;
    --s: 75%;
    --delay: 0.075;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(5) {
    --ct: 55%;
    --h: 0;
    --s: 0%;
    --delay: 0.1;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(6) {
    --ct: 86%;
    --h: 0;
    --s: 100%;
    --delay: 0.125;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(7) {
    --ct: 55%;
    --h: 300;
    --s: 76%;
    --delay: 0.15;
}

.map_center_messages.anim_winner .mcm_winner span:nth-of-type(8) {
    --ct: 60%;
    --h: 39;
    --s: 100%;
    --delay: 0.175;
}

@keyframes winneranim {
    50% {
        scale: 1.4;
        color: hsl(var(--h), var(--s), var(--ct));
        filter: blur(min(0.05vw, 0.1vh)) brightness(120%);
    }
    0%, 27.5%, 72.5%, 100% {
        scale: 1;
        color: white;
        filter: blur(0) brightness(100%);
    }
}

.map_center_messages.anim_clear .mcm_clear span {
    --ct: 100%;
    --h: 0;
    --s: 0;
    color: hsl(var(--h), var(--s), var(--ct));
    color: white;
    font-size: min(6vw, 12vh);
    font-size: min(7vw, 14vh);
    animation-name: clearanim;
    animation-duration: 1.5s;
    animation-delay: calc(var(--delay) * 1s);
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(1) {
    --ct: 55%;
    --h: 60;
    --s: 100%;
    --delay: 0;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(2) {
    --ct: 55%;
    --h: 0;
    --s: 100%;
    --delay: 0.025;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(3) {
    --ct: 68%;
    --h: 240;
    --s: 100%;
    --delay: 0.05;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(4) {
    --ct: 46%;
    --h: 120;
    --s: 75%;
    --delay: 0.075;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(5) {
    --ct: 55%;
    --h: 0;
    --s: 0%;
    --delay: 0.1;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(6) {
    --ct: 86%;
    --h: 0;
    --s: 100%;
    --delay: 0.125;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(7) {
    --ct: 55%;
    --h: 300;
    --s: 76%;
    --delay: 0.15;
}

.map_center_messages.anim_clear .mcm_clear span:nth-of-type(8) {
    --ct: 60%;
    --h: 39;
    --s: 100%;
    --delay: 0.175;
}

@keyframes clearanim {
    50% {
        scale: 1.4;
        color: hsl(var(--h), var(--s), var(--ct));
        filter: blur(min(0.05vw, 0.1vh)) brightness(120%);
    }

    0%,
    27.5%,
    72.5%,
    100% {
        scale: 1;
        color: white;
        filter: blur(0) brightness(100%);
    }
}

.map_center_messages.anim_1 .mcm_1 span,
.map_center_messages.anim_2 .mcm_2 span,
.map_center_messages.anim_3 .mcm_3 span {
    font-size: min(10vw, 20vh);
    animation-name: countdownanim;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    /* animation: countdownanim 0.3s linear; */
}

@keyframes countdownanim {

    0%,
    100% {
        scale: 1;
    }

    50% {
        scale: 1.4;
        filter: brightness(120%);
    }
}

.map_center_messages.anim_allclear .mcm_allclear {
    --outline_width: 0.2;
}

.map_center_messages.anim_allclear .mcm_allclear {
    --duration: 0.7;
    animation-name: containerallclearanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containerallclearanim {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.map_center_messages.anim_allclear .mcm_allclear span {
    --duration: 0.5;
    --ct: 100%;
    --h: 0;
    --s: 0;
    color: hsl(var(--h), var(--s), var(--ct));
    color: white;
    font-size: min(4vw, 8vh);
    animation-name: allclearanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-delay: calc(var(--delay) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(1) {
    --ct: 55%;
    --h: 60;
    --s: 100%;
    --delay: 0;
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(2) {
    --ct: 55%;
    --h: 0;
    --s: 100%;
    --delay: 0.025;
    --delay: 0;
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(3) {
    --ct: 68%;
    --h: 240;
    --s: 100%;
    --delay: 0.05;
    /* --delay: 0; */
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(5) {
    --ct: 46%;
    --h: 120;
    --s: 75%;
    --delay: 0.075;
    /* --delay: 0; */
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(6) {
    --ct: 55%;
    --h: 0;
    --s: 0%;
    --delay: 0.1;
    /* --delay: 0; */
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(7) {
    --ct: 86%;
    --h: 0;
    --s: 100%;
    --delay: 0.125;
    /* --delay: 0; */
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(8) {
    --ct: 55%;
    --h: 300;
    --s: 76%;
    --delay: 0.15;
    /* --delay: 0; */
}

.map_center_messages.anim_allclear .mcm_allclear span:nth-of-type(9) {
    --ct: 60%;
    --h: 39;
    --s: 100%;
    --delay: 0.175;
    /* --delay: 0; */
}

@keyframes allclearanim {
    50% { color: hsl(var(--h), var(--s), var(--ct)); }
    0%, 10%, 90%, 100% { color: white; }
}

@keyframes allclearanim {
    50% { color: hsl(var(--h), var(--s), var(--ct)); }
    100% { color: hsl(var(--h), var(--s), var(--ct)); }
}

.map_center_messages.anim_levelup .mcm_levelup {
    --outline_width: 0.2;
}

.map_center_messages.anim_levelup .mcm_levelup {
    --duration: 0.7;
    animation-name: containerlevelupanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containerlevelupanim {
    5% {
        opacity: 1;
    }

    25% {
        opacity: 1;
        translate: 0 -50%;
    }

    100% {
        translate: 0 -100%;
        opacity: 0;
    }
}

@keyframes containerlevelupanim {
    5% {
        transform: rotate(360deg);
        scale: 125%;
        opacity: 1;
    }
    37.5% {
        transform: rotate(0deg);
        scale: 100%;
    }
    50% {
        filter: brightness(100%);
    }
    62.5% {
        filter: brightness(150%);
    }
    75% {
        filter: brightness(100%);
        translate: 0 -50%;
    }
    90% {
        opacity: 1;
    }
    100% {
        translate: 0 -100%;
        opacity: 0;
    }
}

.map_center_messages.anim_levelup .mcm_levelup span {
    font-size: min(3.5vw, 7vh);
    /* filter: brightness(120%);
    text-shadow: 0 0 min(0.25vw, 0.5vh) white; */
    transition: filter 0.25s, text-shadow 0.15s;
}

.map_center_messages.anim_backtoback .mcm_backtoback {
    --outline_width: 0.2;
}

.map_center_messages.anim_backtoback .mcm_backtoback {
    --duration: 0.5;
    --duration: 0.7;
    animation-name: containerbacktobackanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containerbacktobackanim {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        filter: brightness(125%);
    }
    75% {
        translate: 0 -50%;
        opacity: 1;
    }

    100% {
        translate: 0 -150%;
        opacity: 0;
    }
}

@keyframes containerbacktobackanim {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    37.5% {
        transform: rotateX(360deg);
    }
    50% {
        filter: brightness(100%);
        scale: 100%;
    }
    62.5% {
        filter: brightness(150%);
        scale: 125%;
    }
    75% {
        translate: 0 -50%;
        filter: brightness(100%);
        scale: 100%;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: rotateX(360deg);
        translate: 0 -150%;
        opacity: 0;
    }
}

.map_center_messages.anim_backtoback .mcm_backtoback span {
    font-size: min(2.5vw, 5vh);
    color: white;
    transition: filter 0.25s, text-shadow 0.15s;
}

.map_center_messages.anim_combo .mcm_combo {
    --outline_width: 0.2;
}

.map_center_messages.anim_combo .mcm_combo {
    --duration: 0.5;
    --duration: 0.7;
    animation-name: containercomboanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containercomboanim {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }
    50% {
        filter: brightness(125%);
    }
    75% {
        translate: 0 -50%;
        opacity: 1;
    }

    100% {
        translate: 0 50%;
        opacity: 0;
    }
}

@keyframes containercomboanim {
    0% {
        translate: -5% -50%;
        opacity: 1;
    }
    5% {
        translate: 5% -50%;
    }
    10% {
        translate: -5% -50%;
    }
    15% {
        translate: 5% -50%;
    }
    20% {
        translate: -5% -50%;
    }
    25% {
        translate: 5% -50%;
    }
    30% {
        translate: -5% -50%;
    }
    35% {
        translate: 5% -50%;
    }
    40% {
        translate: -5% -50%;
    }
    45% {
        translate: 5% -50%;
    }
    50% {
        translate: 0 -50%;
        filter: brightness(100%);
    }
    62.5% {
        filter: brightness(150%);
    }
    75% {
        translate: 0 -50%;
        filter: brightness(100%);
    }
    90% {
        opacity: 1;
    }
    100% {
        translate: 0 50%;
        opacity: 0;
    }
}

.map_center_messages.anim_combo .mcm_combo span {
    font-size: min(3vw, 6vh);
    color: violet;
    transition: filter 0.25s, text-shadow 0.15s;
}

.map_center_messages.anim_tetris .mcm_tetris {
    --outline_width: 0.2;
}

.map_center_messages.anim_tetris .mcm_tetris {
    --duration: 0.5;
    --duration: 0.7;
    /* --duration: 2000; */
    animation-name: containertetrisanim;
    animation-duration: calc(var(--duration) * 1s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes containertetrisanim {
    0% {
        opacity: 0;
        scale: 1;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
        scale: 1.25;
    }
    60% {
        opacity: 1;
    }
    /* 30% {
        scale: 1.25;
    } */

    100% {
        opacity: 0;
        scale: 1;
    }
}

@keyframes containertetrisanim {
    0% {
        scale: 125% 0%;
    }

    25% {
        scale: 0% 125%;
    }

    50% {
        scale: 100% 100%;
        filter: brightness(100%);
    }
    75% {
        opacity: 1;
        filter: brightness(150%);
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.map_center_messages.anim_tetris .mcm_tetris span {
    font-size: min(2vw, 4vh);
    font-size: min(4.5vw, 9vh);
    color: #ffe556;
    color: gold;
    /* filter: brightness(120%);
    text-shadow: 0 0 min(0.25vw, 0.5vh) gold; */
    transition: filter 0.25s, text-shadow 0.15s;
}