body {
    background-image: url('electro/bg.jpg');
    background-size: cover;
}

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

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

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

tr.matrix td:not(.mino) {
    border-left: none;
    border-bottom: none;
}

.mino:not(.ghost):not(.locking):not(.disabled) {
    padding: 1px;
    position: relative;
    z-index: 0;
    border-radius: 4px;
    background-color: rgba(128, 128, 128, 25%);
    box-shadow: 0px 0px 8px rgba(128, 128, 128, 75%);
}

.mino:not(.ghost):not(.locking):before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: 1px 1px 0px 0px;
    padding: 2px;
    border-radius: 4px;
  --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column)) / 10);
  --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row)) / 25);
    background: radial-gradient(
        at var(--glint-x) var(--glint-y),
        rgba(204, 238, 247, 0.9) 0%,
        rgba(10, 159, 218, 0.9) 150%
    );
    mask:
        linear-gradient(#666 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-mode: luminance;
    mask-composite: intersect;
}

.ghost.mino {
    background: rgba(242, 255, 255, 10%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
}

.moving.mino {
    box-shadow: 0px 0px 5px rgba(128, 128, 128, 75%);
}

.moving.mino:not(.locking) {
    padding: 2px;
    background: rgba(186, 211, 255, 30%);
    border: none;
    border-radius: 4px;
}

.locking.mino {
    border-width: 3px;
    background: rgba(186, 211, 255, 70%);
    border-color: rgba(242, 255, 255, 0.7);
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(242, 255, 255, 100%);
}

.disabled.mino {
    opacity: 60%;
    position: relative;
}

.disabled.mino:before {
    opacity: 50%;
    box-shadow: none;
}

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