quatuor/css/old-school.css

:root {
  --cell-size: 20px;
  --sprite-size: 40px;
}

@font-face {
    font-family: 'Early GameBoy';
    src: url('old-school/Early GameBoy.ttf');
}

#screenRow {
    background-image: url('old-school/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('old-school/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('old-school/border-lg.png');
    border-image-slice: 30;
    border-image-width: 15px;
    border-image-outset: 15px;
}

#statsTable,
.card,
.card-header,
#messagesSpan div {
    font-family: 'Early GameBoy', monospace;
    font-smooth: never;
    -webkit-font-smoothing: none;
    color: #254806;
    text-shadow:
        -1px -1px 3px rgba(0, 0, 0, 40%),
        1px 1px 1px rgba(0, 0, 0, 40%);
}

#statsTable {
    font-size: 0.7em;
    letter-spacing: -0.1em;
}

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

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

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

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

.minoes-table 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: cover;
    background-image: url('old-school/sprites.png');
    background-position: calc(var(--sprite-pos) * var(--sprite-size)) 0px;
}

.I.mino {
  --sprite-pos: 0;
}

.J.mino {
  --sprite-pos: 1;
}

.L.mino {
  --sprite-pos: 2;
}

.O.mino {
  --sprite-pos: 3;
}

.S.mino {
  --sprite-pos: 4;
}

.T.mino {
  --sprite-pos: 5;
}

.Z.mino {
  --sprite-pos: 6;
}

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

.locking.mino {
    filter: brightness(135%) contrast(70%);
}

.ghost.mino,
.disabled.mino {
    opacity: 50%;
}

.locked.mino {
    animation: none;
}

.hard-dropped-table-animation {
    animation: hard-dropped-table-animation steps(1) 0.2s;
}

@keyframes cleared-line-animation {
    10%,
    30%,
    50%,
    70%,
    90% {
        opacity: 0;
    }
    20%,
    40%,
    60%,
    80% {
        opacity: 100%;
    }
}

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