:root {
    --cell-side: 20px;
}

@font-face {
    font-family: "Early GameBoy";
    src: url("retro/Early GameBoy.ttf");
}

body {
    background-image: url("retro/dark-bg.png");
}

.card {
    background: #808302;
    border-radius: 0;
    border-image-source: url("retro/border.png");
    border-image-slice: 15;
    border-image-width: 15px;
    border-image-repeat: repeat;
    border-image-outset: 15px;
    margin: 15px !important;
    box-shadow: unset;
}

.card-header {
    background: #808302;
}

#statsTable,
.card,
#messagesSpan {
    font-family: "Early GameBoy", monospace;
    color: #254806;
}

#statsTable {
    letter-spacing: -.15em;
}

#messagesSpan {
    text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302;
}

td {
    border: 0 !important;
}

.mino {
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 40%), 1px 1px 2px rgba(0, 0, 0, 40%);
}

.I.mino {
    background-image: url("retro/I-mino.png")
}

.J.mino {
    background-image: url("retro/J-mino.png")
}

.L.mino {
    background-image: url("retro/L-mino.png")
}

.O.mino {
    background-image: url("retro/O-mino.png")
}

.S.mino {
    background-image: url("retro/S-mino.png")
}

.T.mino {
    background-image: url("retro/T-mino.png")
}

.Z.mino {
    background-image: url("retro/Z-mino.png")
}

.locked.mino {
    filter: saturate(60%) brightness(200%);
}

.ghost.mino {
    opacity: 50%;
}