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

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

#screenRow {
    background-image: url("retro/bg.png");
    background-size: 10px;
    padding: 40px 20px;
    border: 3px inset black;
    border-radius: 10px;
}

.col {
    gap: 8px;
}

.card {
    background: #8D8E04;
    border-radius: 0;
    border-image-source: url("retro/border-sm.png");
    border-image-slice: 25;
    border-image-width: 13px;
    border-image-repeat: repeat;
    border-image-outset: 12px;
    box-shadow: unset;
    width: 100%;
}

.card-header {
    background: #8D8E04;
}

#matrixCard {
    background: #808302;
    border-image-source: url("retro/border-lg.png");
    border-image-slice: 30;
    border-image-width: 15px;
    border-image-outset: 15px;
}

#statsTable,
.card,
#messagesSpan {
    font-family: "Early GameBoy", monospace;
    color: #254806;
    text-shadow: -1px -1px 3px rgba(0, 0, 0, 40%), 1px 1px 1px rgba(0, 0, 0, 40%);
}

#statsTable {
    font-size: .7em;
    letter-spacing: -.1em;
}

#statsTable tr {
    display: flex;
    flex-flow: column;
}

#statsTable th,
#statsTable td {
    border: 0;
    padding: 0 .2rem;
}

#statsTable td {
    width: auto;
    text-align: end;
}

#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%);
    background-size: 100%;
}

.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")
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.locking.mino {
    animation: blinker 0.04s step-start infinite;
}

.ghost.mino {
    opacity: 50%;
}

.locked.mino {
    animation: none;
}

@keyframes cleared-line-animation {
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
        opacity: 0;
    }
    10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
        opacity: 100%;
    }
}

tr.cleared-line-animation {
    animation: cleared-line-animation ease-out .4s;
}