.map_complete_set[data-effect="ghostnormal"] .tetris_grid .brick {
    opacity: 0.2;
}

.map_complete_set[data-effect="ghostxtra"] .tetris_grid .brick {
    opacity: 0.05;
}

.map_complete_set[data-effect="shadownormal"] .tetris_grid .brick {
    box-shadow: min(1vw, 2vh) min(1vw, 2vh) 0 min(0.25vw, 0.5vh) #000000bf;
}

.map_complete_set[data-effect="shadowxtra"] .tetris_grid .brick {
    box-shadow: min(1vw, 2vh) min(1vw, 2vh) 0 min(0.25vw, 0.5vh) #000000bf;
    box-shadow: min(1.5vw, 3vh) min(1.5vw, 3vh) 0 min(0.25vw, 0.5vh) #000000bf;
    box-shadow: min(3vw, 6vh) min(3vw, 6vh) 0 min(0.25vw, 0.5vh) #000000bf;
}

.map_complete_set[data-effect="flamenormal"] .tetris_grid .brick,
.map_complete_set[data-effect="flamextra"] .tetris_grid .brick { 
    box-shadow: min(1.5vw, 3vh) min(1.5vw, 3vh) 0 min(0.25vw, 0.5vh) #610101bf;
    animation-name: flame;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes flame {
    0%, 100% { box-shadow: min(1.5vw, 3vh) min(1.5vw, 3vh) 0 min(0.3vw, 0.6vh) #810101bf; }
    25% { box-shadow: min(-1.5vw, -3vh) min(1.5vw, 3vh) min(0.25vw, 0.5vh) min(0.125vw, 0.25vh) #636e2c; }
    50% { box-shadow: min(-1.5vw, -3vh) min(-1.5vw, -3vh) 0 min(0.3vw, 0.6vh) #ffb939; }
    75% { box-shadow: min(1.5vw, 3vh) min(-1.5vw, 3vh) min(0.25vw, 0.5vh) min(0.125vw, 0.25vh) #d19a34; }
}

.map_complete_set[data-effect="tiltnormal"], .map_complete_set[data-effect="tiltxtra"] {
    .brick:is(.set, .active) {
        animation-name: tilt;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
}

@keyframes tilt {
    100% {
        opacity: 0;
    }
}

.map_complete_set[data-effect="windmillnormal"], .map_complete_set[data-effect="windmillxtra"] {
    .brick.set {
        animation-name: windmill;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="windmillnormal"] {
    .brick.set {
        animation-duration: 10s;
    }
}

.map_complete_set[data-effect="windmillxtra"] {
    .brick.set {
        animation-duration: 5s;
    }
}

.map_complete_set[data-effect="windmillxtra"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

@keyframes windmill {
    100% {
        rotate: z 360deg;
    }
}

.map_complete_set[data-effect="factorynormal"], .map_complete_set[data-effect="factoryxtra"] {
    .brick.set {
        border-radius: 100%;
        animation-name: factory;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="factorynormal"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

.map_complete_set[data-effect="factoryxtra"] {
    .brick.set {
        animation-duration: 0.25s;
    }
}

@keyframes factory {
    100% {
        rotate: z 360deg;
    }
}

.map_complete_set[data-effect="reversinormal"], .map_complete_set[data-effect="reversixtra"] {
    .brick.set {
        animation-name: reversi;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="reversinormal"] {
    .brick.set {
        animation-duration: 1s;
    }
}

.map_complete_set[data-effect="reversixtra"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

@keyframes reversi {
    100% {
        border-radius: 100%;
    }
}

/* .map_complete_set[data-effect="curtainsnormal"], .map_complete_set[data-effect="curtainsxtra"] {
    .brick.set {
        animation-name: curtains;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="curtainsnormal"] {
    .brick.set {
        animation-duration: 1s;
    }
}

.map_complete_set[data-effect="curtainsxtra"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

@keyframes curtains {
    50% {
        scale: 0.25 1.25;
    }

    100% {
        scale: 1.25 0.25;
    }
} */

.map_complete_set[data-effect="modernartnormal"],
.map_complete_set[data-effect="modernartxtra"] {
    .brick.set {
        animation-name: modernart;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="modernartnormal"] {
    .brick.set {
        animation-duration: 1s;
    }
}

.map_complete_set[data-effect="modernartxtra"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

@keyframes modernart {
    50% {
        scale: 0 1.25;
    }

    100% {
        scale: 1.25 0;
    }
}

.map_complete_set[data-effect="skyscrapersnormal"],
.map_complete_set[data-effect="skyscrapersxtra"] {
    .brick.set {        
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transform-origin: 50% 100%;
    }
}

.map_complete_set[data-effect="skyscrapersnormal"] {
    .brick.set {
        animation-name: skyscrapersnormal;
    }
}

.map_complete_set[data-effect="skyscrapersxtra"] {
    .brick.set {
        animation-name: skyscrapersxtra;
    }
}

@keyframes skyscrapersnormal {
    0% {
        scale: 1 4;
        opacity: 0.8;
    }

    100% {
        scale: 1 4;
        opacity: 0.8;
    }
}

@keyframes skyscrapersxtra {
    0% {
        scale: 1 4;
        opacity: 0.95;
    }

    100% {
        scale: 1 4;
        opacity: 0.95;
    }
}

.map_complete_set[data-effect="modernartnormal"],
.map_complete_set[data-effect="modernartxtra"] {
    .brick.set {
        animation-name: modernart;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="modernartnormal"] {
    .brick.set {
        animation-duration: 1s;
    }
}

.map_complete_set[data-effect="modernartxtra"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

@keyframes modernart {
    50% {
        scale: 0 1.25;
    }

    100% {
        scale: 1.25 0;
    }
}

.map_complete_set[data-effect="pumpsnormal"],
.map_complete_set[data-effect="pumpsxtra"] {
    .brick.set {
        animation-name: pumps;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
}

.map_complete_set[data-effect="pumpsnormal"] {
    .brick.set {
        animation-duration: 1s;
    }
}

.map_complete_set[data-effect="pumpsxtra"] {
    .brick.set {
        animation-duration: 0.5s;
    }
}

@keyframes pumps {
    0% {
        scale: 0.5 0.2;
    }

    100% {
        scale: 0.5 4;
    }
}

/* .map_complete_set[data-effect="insetnormal"] .map_center_play,
.map_complete_set[data-effect="insetxtra"] .map_center_play {
    box-shadow: min(1vw, 2vh) min(1vw, 2vh) 0 min(0.25vw, 0.5vh) #000000bf;
    box-shadow: min(1.5vw, 3vh) min(1.5vw, 3vh) 0 min(0.25vw, 0.5vh) #000000bf;
    box-shadow: min(3vw, 6vh) min(3vw, 6vh) 0 min(0.25vw, 0.5vh) #0b40d1d5;
} */

.map_complete_set[data-effect="testnormal"],
.map_complete_set[data-effect="testxtra"] {
    perspective: min(10vw, 20vh);
}

/* .map_complete_set[data-effect="testnormal"] .map-container,
.map_complete_set[data-effect="testxtra"] .map-container {
    animation-name: test;
    animation-duration: 1s;
    animation-duration: 3600s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
} */

/* .map_complete_set[data-effect="testnormal"] .map_center_play,
.map_complete_set[data-effect="testxtra"] .map_center_play {
    animation-name: test;
    animation-duration: 20s;
    animation-duration: 3600s;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
} */

/* @keyframes test {
    0% {
        scale: 1 4; opacity: 0.8;
    }

    100% {
        scale: 1 4; opacity: 0.8;
    }
} */

/* .map_complete_set[data-effect="testnormal"] .tetris_grid,
.map_complete_set[data-effect="testxtra"] .tetris_grid {
    animation-name: test;
    animation-duration: 20s;
    animation-duration: 3600s;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: 2;
} */

/* .map_complete_set[data-effect="testnormal"] .map_center_play::before,
.map_complete_set[data-effect="testxtra"] .map_center_play::before {
    width: min(0.75vw, 1.5vh);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0 0 min(0.5vw, 1vh) min(0.5vw, 1vh) red;
    top: 50%;
    left: 50%;
    z-index: 1;
    visibility: visible;
    animation-name: test2;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: 2;
} */

.map_complete_set[data-effect="testnormal"] .map_center_play::before,
.map_complete_set[data-effect="testxtra"] .map_center_play::before {
    background-color: #000000;
    visibility: visible;
}

.map_complete_set[data-effect="testnormal"] .map_center_play::after,
.map_complete_set[data-effect="testxtra"] .map_center_play::after {
    background: linear-gradient(180deg, #00000080, #831a0a75);
    box-shadow: 0 0 1.2vh 1vh #df14145e;
    top: 0;
    left: 0;
    /* scale: 1.1 1; */
    visibility: visible;
    /* animation-name: test; */
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes test {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

/* .map_complete_set[data-effect="testnormal"] .tetris_grid .brick.set,
.map_complete_set[data-effect="testxtra"] .tetris_grid .brick.set {
    animation-name: test;
    animation-duration: 20s;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    border-radius: 100%;
} */


.map_complete_set:not([data-effect=""]):has(.map_center_play.paused) {
    & .tetris_grid {
        animation-play-state: paused;
    }
    & .brick {
        animation-play-state: paused;
    }
    & .map_center_play {
        animation-play-state: paused;
    }
    & .map_center_play::before {
        visibility: hidden;
        animation-play-state: paused;
    }
    & .map_center_play::after {
        visibility: hidden;
        animation-play-state: paused;
    }
}

/* .tetris_grid {
    animation-name: test;
    animation-duration: 10s;
    animation-delay: 8s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
} */

/* @keyframes test {
    0% { clip-path: polygon(0 0, 100% 0, 100% 0.5%, 0 0.5%, 0 4.5%, 100% 4.5%, 100% 100%, 0 100%, 0 0); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 95.5%, 0 95.5%, 0 99.5%, 100% 99.5%, 100% 100%, 0 100%, 0 0); }
} */