quatuor/css/pop.css

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

body[data-bs-theme="dark"] {
    --bs-body-bg: #2125296b;
}

.btn-dark {
    --bs-btn-bg: #2125296b;
}

.card,
#matrixCard {
    background: repeating-linear-gradient(transparent, #111 1px);
    backdrop-filter: blur(3px);
}

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

#matrixTable {
    border-spacing: 1px;
}

tr.matrix td:not(.mino) {
    border: 1px solid #111;
}

.mino {
    background: radial-gradient(#fff3 0%, var(--color) 170%);
    border: 2px solid var(--color);
    border-radius: 0;
    outline: 1px solid #0006;
    opacity: 100%;
    box-shadow: 0 0 4px var(--color);
}

.I.mino {
    --color: #00eaf5;
}

.J.mino {
    --color: #00a9f7;
}

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

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

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

.S.mino {
    --color: #35da3f;
}

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

.ghost.mino {
    background: transparent;
    opacity: 50%;
}

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

.locking.mino {
    --color: white;
    box-shadow: 0 0 10px var(--color);
}

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

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

tr.cleared-line-animation {
    animation: none;
}

tr.cleared-line-animation::after {
    content: "";
    width: 100%;
    height: var(--cell-side);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    background: repeating-linear-gradient(transparent, #fffb 1px);
    opacity: 0;
    animation: cleared-line-animation ease-out .3s;
}

@keyframes cleared-line-animation {
    25% {
        width: 200%;
        opacity: 100%;
    }
}