diff --git a/css/common.css b/css/common.css
index 2d4648c..e485950 100644
--- a/css/common.css
+++ b/css/common.css
@@ -1,388 +1,290 @@
 :root {
-  --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));
+    --cell-side: 25px;
+    --rX: -15;
+    --rY: 0;
+    --tZ: 25px;
 }
 
 body {
-  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;
+  background: linear-gradient(#212529, #14171a) fixed;
 }
 
-#sceneDiv {
-  perspective: 500px;
-  cursor: grab;
-}
+@supports (backdrop-filter: blur()) {
+    .modal::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        backdrop-filter: blur(2px);
+    }
 
-#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;
+    .modal-content {
+        background-color: #212529b3;
+        backdrop-filter: blur(10px);
+    }
 }
 
 .card {
-  background: #36394180;
+    background-color: #25292d;
 }
 
 #matrixCard {
-  background-image: none;
+    background-image: radial-gradient(#222, #25292d)
 }
 
-#screenRow .card>* {
-  transform: translateZ(var(--cell-side));
-}
-
-#screenRow .card-header {
-  background-color: transparent;
-  border: none;
-}
-
-.card,
 .card-header {
-  text-shadow:
-    calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
+    text-shadow: 0 0 2px black;
 }
 
-#holdTable .mino {
-  --row: 7;
-  --column: -5;
+.modal-title {
+    text-shadow: 0 0 8px var(--bs-light);
+    font-weight: 600;
 }
 
-#nextTable .mino {
-  --row: 15;
-  --column: 15;
+#statsTable td,
+#statsModal td {
+    text-align: right;
 }
 
-.minoes-table th,
-.minoes-table td {
-  display: inline-block !important;
-  width: max-content;
+td#timeCell {
+  min-width: 10ch;
 }
 
-.minoes-table tr {
-  width: max-content;
-  height: var(--cell-side);
+.minoes-table {
+    --piece-column: 0;
+    --piece-row   : 0;
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: min-content;
 }
 
-#statsTable tr {
-  display: table;
-  width: 100%;
+#matrixTable {
+    margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
 }
 
-#statsTable th,
-#statsTable td {
-  display: table-cell;
-  border: 0;
+@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;
 }
 
 tr.matrix td:not(.mino) {
-  border: 0;
+    border-left  : 1px solid #333;
+    border-right : 1px solid #333;
+    border-top   : 1px solid #303030;
+    border-bottom: 1px solid #303030;
 }
 
-.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%);
+td {
+    overflow: hidden;
+    width: var(--cell-side);
+    height: var(--cell-side);
+    box-sizing: border-box;
 }
 
 @keyframes trail-animation {
     from {
-        background-color: hsla(180, 100%, 100%, 0.1);
-        border-color:  hsla(180, 100%, 100%, 0.1);
+        background-color: #ceffff40;
     }
     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 {
-        --h: 0deg; --s: 0%; --l: 100%; --a: 1;
-        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
+        filter: saturate(50%) brightness(400%);
     }
 }
 
-.locked.mino::before,
-.locked.mino::after {
+.locked.mino {
     animation: locked-animation;
-    animation-duration: .2s;
+    animation-duration: 0.2s;
+}
+
+td.trail-animation {
+    animation: trail-animation ease-out .3s;
 }
 
 @keyframes cleared-line-animation {
-  from {
-    background-color: white !important;
-    box-shadow: 0 0 0 white;
-  }
-  to {
-    background-color: #fff0;
-    box-shadow: 0 0 100px transparent;
-  }
+    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;
+    }
 }
 
-tr.cleared-line-animation td::before,
-tr.cleared-line-animation td::after {
-  animation: cleared-line-animation ease-out .3s;
+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;
 }
 
 @keyframes show-level-animation {
-  from {
-    opacity: 1;
-    transform: translateY(200%);
-  }
+    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;
+    }
+}
 
-  50% {
-    transform: translateY(0) scaleY(1);
-    line-height: var(--bs-body-line-height);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(-100%) scaleY(0);
-    line-height: 0;
-  }
+#messagesSpan div.show-level-animation {
+    animation: show-level-animation;
+    animation-timing-function: (0.4, 0, 0.6, 1);
+    animation-duration: 2s;
 }
 
 @keyframes zoom-in-animation {
-  from {
-    opacity: 1;
-    transform: scale3d(0.3, 0.3, 0.3);
-    line-height: var(--bs-body-line-height);
-  }
+    from {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+        line-height: var(--bs-body-line-height);
 
-  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;
-  }
+    }
+    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;
+    }
 }
 
 @keyframes rotate-in-animation {
-  0% {
-    opacity: 1;
-    transform: rotate(200deg);
-    line-height: var(--bs-body-line-height);
-  }
+    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;
+    }
+}
 
-  30% {
-    transform: translateZ(0) scale3d(1, 1, 1);
-  }
+#messagesSpan div.rotate-in-animation {
+    animation-name:  rotate-in-animation;
+    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
+    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;
-  }
+#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;
 }
 
 @keyframes game-over-animation {
-  from {
-    opacity: 1;
-    transform: translateY(200%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-    line-height: var(--bs-body-line-height);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(200%);
+    }
+    to {
+        opacity: 100%;
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+}
+
+#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;
 }
diff --git a/css/stereo.css b/css/stereo.css
index 8e06708..2d4648c 100644
--- a/css/stereo.css
+++ b/css/stereo.css
@@ -172,7 +172,7 @@ 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), 40%);
+  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);
 }