diff --git a/css/common.css b/css/common.css
index e485950..2d4648c 100644
--- a/css/common.css
+++ b/css/common.css
@@ -1,290 +1,388 @@
 :root {
-    --cell-side: 25px;
-    --rX: -15;
-    --rY: 0;
-    --tZ: 25px;
+  --rbw: 4px;
+  --tl: calc(-1 * var(--rbw));
+  --cell-side-opposite: calc(-1 * var(--cell-side));
+  --t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite));
 }
 
 body {
-  background: linear-gradient(#212529, #14171a) fixed;
+  background-image: url(stereo/bg.jpg),
+    radial-gradient(circle at center,
+      #39444f 0%,
+      #2c323b 25%,
+      #293036 28%,
+      #252b32 34%,
+      #242930 38%,
+      #1a1d22 52%,
+      #191c22 53%,
+      #151519 63%,
+      #141418 65%,
+      #0f0f12 74%,
+      #0a0c0d 100%);
+  background-repeat: space;
+  background-position: center;
+  background-size: cover;
 }
 
-@supports (backdrop-filter: blur()) {
-    .modal::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        backdrop-filter: blur(2px);
-    }
+#sceneDiv {
+  perspective: 500px;
+  cursor: grab;
+}
 
-    .modal-content {
-        background-color: #212529b3;
-        backdrop-filter: blur(10px);
-    }
+#sceneDiv:active {
+  cursor: grabbing;
+}
+
+#screenRow {
+  --light-rX: calc(-1 * var(--rY) / 30);
+  --light-rY: calc(var(--rX) / 20);
+  display: block;
+  transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
+}
+
+#sceneDiv,
+#screenRow,
+#screenRow .col,
+#screenRow .card,
+#screenRow .card-body,
+.minoes-table,
+.minoes-table tbody,
+.minoes-table tr,
+.minoes-table td {
+  display: block;
+  transform-style: preserve-3d;
+}
+
+#screenRow .col {
+  display: inline-block !important;
+  width: max-content;
+  height: 100%;
+  vertical-align: top;
 }
 
 .card {
-    background-color: #25292d;
+  background: #36394180;
 }
 
 #matrixCard {
-    background-image: radial-gradient(#222, #25292d)
+  background-image: none;
 }
 
+#screenRow .card>* {
+  transform: translateZ(var(--cell-side));
+}
+
+#screenRow .card-header {
+  background-color: transparent;
+  border: none;
+}
+
+.card,
 .card-header {
-    text-shadow: 0 0 2px black;
+  text-shadow:
+    calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
 }
 
-.modal-title {
-    text-shadow: 0 0 8px var(--bs-light);
-    font-weight: 600;
+#holdTable .mino {
+  --row: 7;
+  --column: -5;
 }
 
-#statsTable td,
-#statsModal td {
-    text-align: right;
+#nextTable .mino {
+  --row: 15;
+  --column: 15;
 }
 
-td#timeCell {
-  min-width: 10ch;
+.minoes-table th,
+.minoes-table td {
+  display: inline-block !important;
+  width: max-content;
 }
 
-.minoes-table {
-    --piece-column: 0;
-    --piece-row   : 0;
-    table-layout: fixed;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: min-content;
+.minoes-table tr {
+  width: max-content;
+  height: var(--cell-side);
 }
 
-#matrixTable {
-    margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
+#statsTable tr {
+  display: table;
+  width: 100%;
 }
 
-@keyframes hard-dropped-table-animation {
-    25% {
-        transform: translateY(3px);
-    }
-}
-.hard-dropped-table-animation {
-    animation: hard-dropped-table-animation .2s;
-}
-
-tr.buffer-zone td:not(.mino) {
-    border-width: 0;
+#statsTable th,
+#statsTable td {
+  display: table-cell;
+  border: 0;
 }
 
 tr.matrix td:not(.mino) {
-    border-left  : 1px solid #333;
-    border-right : 1px solid #333;
-    border-top   : 1px solid #303030;
-    border-bottom: 1px solid #303030;
+  border: 0;
 }
 
-td {
-    overflow: hidden;
-    width: var(--cell-side);
-    height: var(--cell-side);
-    box-sizing: border-box;
+.minoes-table td {
+  width: var(--cell-side);
+  height: var(--cell-side);
+  overflow: visible;
+  position: relative;
+}
+
+.mino,
+.mino::before,
+.mino + :not(.mino)::before,
+.mino::after {
+  --light-pX: calc(0.5 - var(--column) / 10);
+  --light-pY: calc(3.5 - var(--row) / 6);
+  --light-x: calc(var(--light-rX) + var(--light-pX));
+  --light-y: calc(var(--light-rY) + var(--light-pY));
+  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
+  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
+  background: var(--center-color);
+  border-radius: 4px;
+  border: 2px outset var(--center-color);
+}
+
+.mino::before,
+.mino + :not(.mino)::before,
+.mino::after,
+td.trail-animation::before,
+td.trail-animation::after,
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: var(--cell-side);
+  height: var(--cell-side);
+}
+
+/* Front face */
+.mino,
+td.trail-animation {
+  --light: calc(
+    1
+    + (var(--light-y) * 0.3)
+    + (var(--light-x) * 0.2)
+  );
+  --center-x:  calc(35% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  background: radial-gradient(
+    circle at var(--center-x) var(--center-y),
+    var(--center-color) 15%,
+    var(--edge-color) 100%
+  );
+  box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
+  border-style: ridge;
+  border-width: var(--rbw);
+}
+
+/* Left face */
+.mino::before,
+td.trail-animation::before,
+tr.cleared-line-animation td::before,
+.mino + .mino::before {
+  --light: calc(
+    1.1
+    + (var(--light-x) * -0.2)
+    + (var(--light-y) * 0.15)
+  );
+  transform: var(--t3d) rotateY(-90deg);
+  transform-origin: left;
+}
+
+/* Right face */
+.mino + :not(.mino)::before,
+.right .mino + .mino::before,
+.right td.trail-animation::before,
+.right tr.cleared-line-animation td::before {
+  --light: calc(
+    0.85
+    + (var(--light-x) * -0.2)
+    + (var(--light-y) * -0.15)
+  );
+  --center-x:  calc(65% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  filter: saturate(0.95);
+  transform: translate3d(0, 0, var(--cell-side-opposite)) rotateY(-90deg);
+  transform-origin: left;
+}
+
+.right .mino:last-child::before {
+  transform: var(--t3d) rotateY(90deg) !important;
+  transform-origin: right !important;
+}
+
+/* Top face */
+.mino::after,
+td.trail-animation::after,
+tr.cleared-line-animation td::after {
+  --light: calc(
+    1.5
+    + (var(--light-y) * 0.2)
+  );
+  transform: var(--t3d) rotateX(90deg);
+  transform-origin: top;
+}
+
+/* Bottom face */
+.bottom .mino::after,
+.bottom td.trail-animation::after,
+.bottom tr.cleared-line-animation td::after {
+  --light: calc(
+    1.1
+    + (var(--light-y) * -0.3)
+  );
+  --center-x:  calc(65% + var(--light-x) * 10%);
+  --center-y:  calc(65% + var(--light-y) * 10%);
+  filter: saturate(0.95);
+  transform: var(--t3d) rotateX(-90deg);
+  transform-origin: bottom;
+}
+
+.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
+.L, .L + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.75; }
+.O, .O + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.75; }
+.I, .I + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
+.S, .S + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
+.T, .T + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
+.Z, .Z + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
+
+.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
+.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
+.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
+
+#holdTable .J + :not(.mino),
+#holdTable .L + :not(.mino),
+#holdTable .S + :not(.mino),
+#holdTable .T + :not(.mino),
+#holdTable .Z + :not(.mino),
+#nextTable .J + :not(.mino),
+#nextTable .L + :not(.mino),
+#nextTable .S + :not(.mino),
+#nextTable .T + :not(.mino),
+#nextTable .Z + :not(.mino) {
+  transform: translateX(50%);
 }
 
 @keyframes trail-animation {
     from {
-        background-color: #ceffff40;
+        background-color: hsla(180, 100%, 100%, 0.1);
+        border-color:  hsla(180, 100%, 100%, 0.1);
     }
     to {
         background-color: transparent;
+        border-color: transparent;
     }
 }
 
+td.trail-animation::before,
+td.trail-animation::after {
+    animation: trail-animation ease-out .3s;
+}
+
 @keyframes locked-animation {
     from {
-        filter: saturate(50%) brightness(400%);
+        --h: 0deg; --s: 0%; --l: 100%; --a: 1;
+        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
     }
 }
 
-.locked.mino {
+.locked.mino::before,
+.locked.mino::after {
     animation: locked-animation;
-    animation-duration: 0.2s;
-}
-
-td.trail-animation {
-    animation: trail-animation ease-out .3s;
+    animation-duration: .2s;
 }
 
 @keyframes cleared-line-animation {
-    from {
-        background-color: white;
-        filter: saturate(50%) brightness(300%);
-        box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd;
-    }
-    60% {
-        box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
-    }
-    to {
-        background-color: transparent;
-        box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
-    }
+  from {
+    background-color: white !important;
+    box-shadow: 0 0 0 white;
+  }
+  to {
+    background-color: #fff0;
+    box-shadow: 0 0 100px transparent;
+  }
 }
 
-tr.cleared-line-animation {
-    animation: cleared-line-animation ease-out .3s;
-}
-
-#holdTable .J,
-#holdTable .L,
-#holdTable .S,
-#holdTable .T,
-#holdTable .Z, 
-#nextTable .J,
-#nextTable .L,
-#nextTable .S,
-#nextTable .T,
-#nextTable .Z {
-    transform: translateX(50%);
-}
-
-#messagesSpan {
-    position: absolute;
-    top: 5%;
-    left: 50%;
-    transform: translate(-50%, 0);
-    color: #fffc;
-    text-shadow: 1px 1px #000c;
-    font-size: 3vmin;
-    text-align: center;
-}
-
-#messagesSpan div {
-    opacity: 0;
-    overflow: hidden;
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+  animation: cleared-line-animation ease-out .3s;
 }
 
 @keyframes show-level-animation {
-    from {
-        opacity: 0;
-        transform: translateY(200%);
-    }
-    50% {
-        opacity: 100%;
-        transform: translateY(0) scaleY(1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 0;
-        transform: translateY(-100%) scaleY(0);
-        line-height: 0;
-    }
-}
+  from {
+    opacity: 1;
+    transform: translateY(200%);
+  }
 
-#messagesSpan div.show-level-animation {
-    animation: show-level-animation;
-    animation-timing-function: (0.4, 0, 0.6, 1);
-    animation-duration: 2s;
+  50% {
+    transform: translateY(0) scaleY(1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-100%) scaleY(0);
+    line-height: 0;
+  }
 }
 
 @keyframes zoom-in-animation {
-    from {
-        opacity: 0;
-        transform: scale3d(0.3, 0.3, 0.3);
-        line-height: var(--bs-body-line-height);
+  from {
+    opacity: 1;
+    transform: scale3d(0.3, 0.3, 0.3);
+    line-height: var(--bs-body-line-height);
+  }
 
-    }
-    30% {
-        opacity: 1;
-        transform: scale3d(1, 1, 1);
-    }
-    80% {
-        opacity: 1;
-        transform: scale3d(1, 1, 1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 0;
-        transform: scale3d(1.5, 0, 1);
-        line-height: 0;
-    }
+  30% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  80% {
+    transform: scale3d(1, 1, 1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1.5, 0, 1);
+    line-height: 0;
+  }
 }
 
 @keyframes rotate-in-animation {
-    0% {
-        opacity:0;
-        transform:rotate(200deg);
-        line-height: var(--bs-body-line-height);
-    }
-    30% {
-        opacity:1;
-        transform:translateZ(0);
-        transform: scale3d(1, 1, 1);
-    }
-    80% {
-        opacity: 1;
-        transform: scale3d(1, 1, 1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 0;
-        transform: scale3d(1.5, 0, 1);
-        line-height: 0;
-    }
-}
+  0% {
+    opacity: 1;
+    transform: rotate(200deg);
+    line-height: var(--bs-body-line-height);
+  }
 
-#messagesSpan div.rotate-in-animation {
-    animation-name:  rotate-in-animation;
-    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
-    animation-duration: 1s;
-}
+  30% {
+    transform: translateZ(0) scale3d(1, 1, 1);
+  }
 
-#messagesSpan div.zoom-in-animation {
-    animation-name: zoom-in-animation;
-    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
-    transform-origin:center;
-    animation-duration: 1s;
+  80% {
+    transform: scale3d(1, 1, 1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1.5, 0, 1);
+    line-height: 0;
+  }
 }
 
 @keyframes game-over-animation {
-    from {
-        opacity: 0;
-        transform: translateY(200%);
-    }
-    to {
-        opacity: 100%;
-        transform: translateY(0) scaleY(1);
-        line-height: var(--bs-body-line-height);
-    }
-}
+  from {
+    opacity: 1;
+    transform: translateY(200%);
+  }
 
-#messagesSpan div.game-over-animation {
-    animation: game-over-animation;
-    animation-timing-function: (0.4, 0, 0.6, 1);
-    animation-duration: 2s;
-}
-
-#statsModal table {
-    border-collapse: collapse;
-}
-
-#statsModal th {
-    padding-left: 0;
-    padding-right: 0.5rem;
-    padding-bottom: 0.2rem;
-    border-left: 0.5rem solid transparent;
-    border-right: 0;
-}
-
-#statsModal td {
-    padding-left: 0.5rem;
-    padding-right: 0;
-    padding-bottom: 0.2rem;
-    border-left: 0;
-    border-right: 0.5rem solid transparent;
-}
-
-#statsModal tr:last-child th,
-#statsModal tr:last-child td {
-    border-bottom: none;
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    line-height: var(--bs-body-line-height);
+  }
 }
diff --git a/css/neo-classic.css b/css/neo-classic.css
index 2af7b51..984b867 100644
--- a/css/neo-classic.css
+++ b/css/neo-classic.css
@@ -85,4 +85,5 @@ tr.matrix td:not(.mino) {
 .ghost {
   --hue: 0;
   --saturation: 0%;
+  opacity: 30%;
 }
\ No newline at end of file
diff --git a/css/stereo.css b/css/stereo.css
index f1d7496..8e06708 100644
--- a/css/stereo.css
+++ b/css/stereo.css
@@ -1,6 +1,8 @@
 :root {
-  --bw: 4px;
-  --tl: calc(-1 * var(--bw) + 0.5px);
+  --rbw: 4px;
+  --tl: calc(-1 * var(--rbw));
+  --cell-side-opposite: calc(-1 * var(--cell-side));
+  --t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite));
 }
 
 body {
@@ -31,17 +33,24 @@ body {
   cursor: grabbing;
 }
 
-#sceneDiv * {
-  transform-style: preserve-3d;
-}
-
 #screenRow {
+  --light-rX: calc(-1 * var(--rY) / 30);
+  --light-rY: calc(var(--rX) / 20);
   display: block;
   transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
 }
 
-#screenRow * {
+#sceneDiv,
+#screenRow,
+#screenRow .col,
+#screenRow .card,
+#screenRow .card-body,
+.minoes-table,
+.minoes-table tbody,
+.minoes-table tr,
+.minoes-table td {
   display: block;
+  transform-style: preserve-3d;
 }
 
 #screenRow .col {
@@ -111,17 +120,20 @@ tr.matrix td:not(.mino) {
 }
 
 .minoes-table td {
-  width: var(--cell-side) !important;
-  height: var(--cell-side) !important;
+  width: var(--cell-side);
+  height: var(--cell-side);
   overflow: visible;
+  position: relative;
 }
 
-.minoes-table .mino,
-.minoes-table .mino::before,
-.minoes-table .mino + :not(.mino)::before,
-.minoes-table .mino::after {
-  --light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1);
-  --light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4);
+.mino,
+.mino::before,
+.mino + :not(.mino)::before,
+.mino::after {
+  --light-pX: calc(0.5 - var(--column) / 10);
+  --light-pY: calc(3.5 - var(--row) / 6);
+  --light-x: calc(var(--light-rX) + var(--light-pX));
+  --light-y: calc(var(--light-rY) + var(--light-pY));
   --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
   --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
   background: var(--center-color);
@@ -129,9 +141,9 @@ tr.matrix td:not(.mino) {
   border: 2px outset var(--center-color);
 }
 
-.minoes-table .mino::before,
-.minoes-table .mino + :not(.mino)::before,
-.minoes-table .mino::after,
+.mino::before,
+.mino + :not(.mino)::before,
+.mino::after,
 td.trail-animation::before,
 td.trail-animation::after,
 tr.cleared-line-animation td::before,
@@ -146,7 +158,7 @@ tr.cleared-line-animation td::after {
 }
 
 /* Front face */
-.minoes-table .mino,
+.mino,
 td.trail-animation {
   --light: calc(
     1
@@ -160,28 +172,28 @@ td.trail-animation {
     var(--center-color) 15%,
     var(--edge-color) 100%
   );
-  box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
+  box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
   border-style: ridge;
-  border-width: var(--bw);
+  border-width: var(--rbw);
 }
 
 /* Left face */
-.minoes-table .mino::before,
+.mino::before,
 td.trail-animation::before,
 tr.cleared-line-animation td::before,
-.left .minoes-table .mino + .mino::before {
+.mino + .mino::before {
   --light: calc(
     1.1
     + (var(--light-x) * -0.2)
     + (var(--light-y) * 0.15)
   );
-  transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform: var(--t3d) rotateY(-90deg);
   transform-origin: left;
 }
 
 /* Right face */
-.right .minoes-table .mino + .mino::before,
-.minoes-table .mino + :not(.mino)::before,
+.mino + :not(.mino)::before,
+.right .mino + .mino::before,
 .right td.trail-animation::before,
 .right tr.cleared-line-animation td::before {
   --light: calc(
@@ -192,29 +204,29 @@ tr.cleared-line-animation td::before,
   --center-x:  calc(65% + var(--light-x) * 10%);
   --center-y:  calc(35% + var(--light-y) * 10%);
   filter: saturate(0.95);
-  transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform: translate3d(0, 0, var(--cell-side-opposite)) rotateY(-90deg);
   transform-origin: left;
 }
 
-.right .minoes-table .mino:last-child::before {
-  transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(90deg) !important;
+.right .mino:last-child::before {
+  transform: var(--t3d) rotateY(90deg) !important;
   transform-origin: right !important;
 }
 
 /* Top face */
-.minoes-table .mino::after,
+.mino::after,
 td.trail-animation::after,
 tr.cleared-line-animation td::after {
   --light: calc(
     1.5
     + (var(--light-y) * 0.2)
   );
-  transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(90deg);
+  transform: var(--t3d) rotateX(90deg);
   transform-origin: top;
 }
 
 /* Bottom face */
-.bottom .minoes-table .mino::after,
+.bottom .mino::after,
 .bottom td.trail-animation::after,
 .bottom tr.cleared-line-animation td::after {
   --light: calc(
@@ -224,17 +236,17 @@ tr.cleared-line-animation td::after {
   --center-x:  calc(65% + var(--light-x) * 10%);
   --center-y:  calc(65% + var(--light-y) * 10%);
   filter: saturate(0.95);
-  transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(-90deg);
+  transform: var(--t3d) rotateX(-90deg);
   transform-origin: bottom;
 }
 
-.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
-.L.mino, .L.mino + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.75; }
-.O.mino, .O.mino + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.75; }
-.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
-.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
-.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
-.Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
+.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
+.L, .L + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.75; }
+.O, .O + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.75; }
+.I, .I + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
+.S, .S + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
+.T, .T + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
+.Z, .Z + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
 
 .ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
 .locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
@@ -347,8 +359,7 @@ tr.cleared-line-animation td::after {
   }
 
   30% {
-    transform: translateZ(0);
-    transform: scale3d(1, 1, 1);
+    transform: translateZ(0) scale3d(1, 1, 1);
   }
 
   80% {
diff --git a/index.html b/index.html
index b146459..ae9c456 100644
--- a/index.html
+++ b/index.html
@@ -193,7 +193,7 @@
 
     </div>
 
-    <div class="modal fade" id="statsModal" data-bs-backdrop="static" tabindex="-1">
+    <div class="modal fade" id="statsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-dialog">
           <div class="modal-content">