.empty-cell {
    background: transparent;
}

.invisible-grid > .empty-cell {
    border: 1px solid transparent;
}

.visible-grid > .empty-cell {
    border: 1px solid rgba(255, 255, 255, .4);
}

.mino {
    border: 1px solid;
    border-radius: 1px;
}

.I-mino {
    /* cyan */
    background: #99d9ea;
    border-color: #d1edf5;
}

.J-mino {
    /* blue */
    background: #7f92ff;
    border-color: #c2cbff;
}

.L-mino {
    /* orange */
    background: #ffb27f;
    border-color: #ffe1cd;
}

.O-mino {
    /* yellow */
    background: #ffe97f;
    border-color: #fff5ca;
}

.S-mino {
    /* green */
    background: #7fff8e;
    border-color: #ccffd2;
}

.T-mino {
    /* magenta */
    background: #d67fff;
    border-color: #edc9ff;
}

.Z-mino {
    /* red */
    background: #ff7f7f;
    border-color: #ffdada;
}

.locked-mino, .cleared-line {
    background: white;
    border: 1px solid white;
    border-radius: 1px;
}

.trail {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    border-radius: 1px;
}

.ghost {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1px;
}