body {
    background-image: url("pop/bg.png");
    background-size: cover;
}

.card {
    background-color: rgba(37, 41, 45, 50%);
}

@supports (backdrop-filter: blur()) {
    .card {
        background-color: rgba(33, 37, 41, 20%);
        backdrop-filter: blur(3px);
    }
}

tr.matrix td:not(.mino) {
    border-left  : 1px solid #222;
    border-right : 1px solid #222;
    border-top   : 1px solid #111;
    border-bottom: 1px solid #111;
}

.mino {
    background: rgba(255, 255, 255, 33%);
    border: 6px solid var(--color);
    padding: 0;
    opacity: 100%;
    border-radius: 4px;
    filter: blur(1px);
    box-shadow: 0 0 10px var(--color);
}

.I.mino {
    --color: #9bf6ff;
}

.J.mino {
    --color: #a0c4ff;
}

.L.mino {
    --color: #ffd6a5;
}

.O.mino {
    --color: #fdffb6;
}

.T.mino {
    --color: #bdb2ff;
}

.S.mino {
    --color: #caffbf;
}

.Z.mino {
    --color: #ffadad;
}

.ghost.mino {
    filter: brightness(150%) blur(2px);
    opacity: 50%;
}

.moving.mino {
    filter: brightness(120%);
}

.locking.mino {
    --color: white;
    filter: blur(2px);
}

@keyframes locked-animation {
    from {
        background: white;
        --color: white;
    }
}

.locked.mino {
    animation: locked-animation;
    animation-duration: 0.2s;
}

@keyframes cleared-line-animation {
    from {
        background-color: rgb(206, 255, 255, 40%);
        filter: saturate(50%) brightness(300%);
        box-shadow: -200px 0 10px white, 200px 0 10px white;
    }
    to {
        box-shadow: -200px 0 50px transparent, 200px 0 50px transparent;
    }
}