.mino {
    background: radial-gradient(
        ellipse 140% 66% at 122% 88%,
        var(--background-color) 100%,
        var(--frontier-color) 105%,
        var(--light-color) 130%
    );
    border: 4px solid;
    padding: 0;
    opacity: 100%;
    border-radius: 1px;
}

.I.mino {
    --background-color : #009FdA;
    --frontier-color   : #43e7fd;
    --light-color      : #afeff9;
    border-top-color   : #7cf2fd;
    border-left-color  : #2ed5e5;
    border-right-color : #00b8ca;
    border-bottom-color: #00a4b0;
}

.J.mino {
    --background-color : #2E00FB;
    --frontier-color   : #7054fb;
    --light-color      : #b8b4ff;
    border-top-color   : #4985fd;
    border-left-color  : #2f36ea;
    border-right-color : #0006ca;
    border-bottom-color: #00009d;
}

.L.mino {
    --background-color : #FF7900;
    --frontier-color   : #fe9551;
    --light-color      : #fdd0b7;
    border-top-color   : #fd9f6b;
    border-left-color  : #e76d28;
    border-right-color : #e74f00;
    border-bottom-color: #c54800;
}

.O.mino {
    --background-color : #FeCB00;
    --frontier-color   : #fce15c;
    --light-color      : #ffedac;;
    border-top-color   : #ffe364;
    border-left-color  : #e7ba23;
    border-right-color : #e3a707;
    border-bottom-color: #ca9501;
}

.S.mino {
    --background-color : #67EE12;
    --frontier-color   : #93f85a;
    --light-color      : #C8FBA8;
    border-top-color   : #a4fc6d;
    border-left-color  : #5ee82b;
    border-right-color : #35db00;
    border-bottom-color: #1cbc02;
}

.T.mino {
    --background-color : #B000FE;
    --frontier-color   : #c541fc;
    --light-color      : #edb2ff;
    border-top-color   : #d380ff;
    border-left-color  : #b42deb;
    border-right-color : #8000cd;
    border-bottom-color: #6e019a;
}

.Z.mino {
    --background-color : #ed2939;
    --frontier-color   : #fe6483;
    --light-color      : #ffb8c5;
    border-top-color   : #fd718d;
    border-left-color  : #e62250;
    border-right-color : #e20332;
    border-bottom-color: #ad1936;
}

.ghost.mino {
    background: rgba(0, 0, 0, 10%) !important;
    border: 2px solid rgba(150, 150, 150, 33%) !important;
    box-shadow:
        -2px -2px 6px rgba(128, 128, 128, 25%),
        -2px  2px 6px rgba(128, 128, 128, 25%),
         2px -2px 6px rgba(128, 128, 128, 25%),
         2px  2px 6px rgba(128, 128, 128, 25%);
}

.moving.mino {
    filter: saturate(80%) brightness(150%);
}

.locking.mino {
    filter: saturate(50%) brightness(200%);
    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%);
}

@keyframes locked-animation {
    from {
        filter: saturate(50%) brightness(400%);
        box-shadow:
            -1px -1px 4px rgba(255, 255, 255, 25%),
            -1px  1px 4px rgba(255, 255, 255, 25%),
             1px -1px 4px rgba(255, 255, 255, 25%),
             1px  1px 4px rgba(255, 255, 255, 25%);
    }
}

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