.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: 3px solid rgba(128, 128, 128, 25%) !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;
}