:root {
  --cell-size: 30px;
  --sprite-size: calc(100% / 11);
  --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
  --bg-url: url();
}

body {
  background-image: var(--bg-url) fixed;
  background-size: cover;
  background-position: center;
}

#matrixTable tr:last-child td {
    position: relative;
    overflow: visible;
}

#matrixTable tr:last-child td:after {
    position: absolute;
    content: "";
    width: inherit;
    height: inherit;
    top: var(--cell-size);
    left: 0;
    background-image: var(--skin-url);
    background-size: repeat;
    background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
    --sprite-pos: 10;
}

.mino {
  width: var(--cell-size);
  height: var(--cell-size);
  background-image: var(--skin-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
}

.I {
    --sprite-pos: 4;
}

.J {
    --sprite-pos: 5;
}

.L {
    --sprite-pos: 1;
}

.O {
    --sprite-pos: 2;
}

.S {
    --sprite-pos: 3;
}

.T {
    --sprite-pos: 6;
}

.Z {
    --sprite-pos: 0;
}

.ghost {
  --sprite-pos: 7;
  opacity: 50%;
}

.disabled {
  --sprite-pos: 8;
}

.locking.mino {
    filter: saturate(60%) brightness(180%);
}