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

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

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

.mino:not(.ghost):not(.locking):before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 1px;
    border-radius: 0.3vmin;
    --glint-x: calc(50% + 50% * (var(--ghost-column) - var(--column))/10);
    --glint-y: calc(50% + 50% * (var(--ghost-row) - var(--row))/25);
    background: radial-gradient(
        at var(--glint-x) var(--glint-y),
        rgba(204, 238, 247, 0.9)   0%,
        rgba(0, 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: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    box-shadow: -1px -1px 4px rgba(242, 255, 255, 16%),
        -1px 1px 4px rgba(242, 255, 255, 16%),
        1px -1px 4px rgba(242, 255, 255, 16%),
        1px 1px 4px rgba(242, 255, 255, 16%);
}

.locking.mino,
.moving.mino {
    border-width: 1px;
    background: rgba(186, 211, 255, 70%);
    border-color: rgba(242, 255, 255, 0.7);
    box-shadow: -1px -1px 4px rgba(186, 211, 255, 27%),
        -1px 1px 4px rgba(186, 211, 255, 27%),
        1px -1px 4px rgba(186, 211, 255, 27%),
        1px 1px 4px rgba(186, 211, 255, 27%);
}

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

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