speed up css

css/stereo.css

@@ -64,10 +64,6 @@ body {
 .card,
 .card-header {
   text-shadow:
-    calc(-0.01px * var(--rY) - 1px) calc(0.02px * var(--rX) - 1px) #ccc,
-    calc(-0.02px * var(--rY) - 1px) calc(0.04px * var(--rX) - 1px) #ccc,
-    calc(-0.01px * var(--rY) + 1px) calc(0.02px * var(--rX) + 1px) #222,
-    calc(-0.02px * var(--rY) + 1px) calc(0.04px * var(--rX) + 1px) #222,
     calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
 }
 
@@ -105,8 +101,6 @@ body {
 
 tr.matrix td:not(.mino) {
   border: 0;
-  will-change: transform;
-  transform: translateZ(0);
 }
 
 .minoes-table td {
@@ -121,18 +115,11 @@ tr.matrix td:not(.mino) {
 .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);
-  --center-x:  calc(35% + var(--light-x) * 10%);
-  --center-y:  calc(35% + var(--light-y) * 10%);
   --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: radial-gradient(
-    circle at var(--center-x) var(--center-y),
-    var(--center-color) 10%,
-    var(--edge-color) 100%
-  );
+  background: var(--center-color);
   border-radius: 2px;
   border: 2px outset var(--center-color);
-  box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
 }
 
 .minoes-table .mino::before,
@@ -159,10 +146,18 @@ td.trail-animation {
     + (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) 10%,
+    var(--edge-color) 100%
+  );
 }
 
 /* Left face */
 .minoes-table .mino::before,
+td.trail-animation::before,
 tr.cleared-line-animation td::before,
 .left .minoes-table .mino + .mino::before {
   --light: calc(
@@ -170,13 +165,14 @@ tr.cleared-line-animation td::before,
     + (var(--light-x) * -0.2)
     + (var(--light-y) * 0.15)
   );
-  transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg);
   transform-origin: left;
 }
 
 /* Right face */
 .right .minoes-table .mino + .mino::before,
 .minoes-table .mino + :not(.mino)::before,
+.right td.trail-animation::before,
 .right tr.cleared-line-animation td::before {
   --light: calc(
     0.85
@@ -191,23 +187,25 @@ tr.cleared-line-animation td::before,
 }
 
 .right .minoes-table .mino:last-child::before {
-  transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
   transform-origin: right !important;
 }
 
 /* Top face */
 .minoes-table .mino::after,
+td.trail-animation::after,
 tr.cleared-line-animation td::after {
   --light: calc(
     1.5
     + (var(--light-y) * 0.2)
   );
-  transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(90deg);
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg);
   transform-origin: top;
 }
 
 /* Bottom face */
 .bottom .minoes-table .mino::after,
+.bottom td.trail-animation::after,
 .bottom tr.cleared-line-animation td::after {
   --light: calc(
     1.1
@@ -216,7 +214,7 @@ 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(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(-90deg);
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(-90deg);
   transform-origin: bottom;
 }
 
@@ -231,8 +229,6 @@ tr.cleared-line-animation td::after {
 .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; }
-td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
-
 
 #holdTable .J + :not(.mino),
 #holdTable .L + :not(.mino),
@@ -250,13 +246,19 @@ td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
 @keyframes trail-animation {
     from {
         background-color: hsla(180, 100%, 100%, 0.1);
-        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
+        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 {
         --h: 0deg; --s: 0%; --l: 100%; --a: 1;

js/interface.js

@@ -21,6 +21,7 @@ const KEY_NAMES = new Proxy({
     }
 })
 
+
 class Settings {
     constructor() {
         this.form = settingsForm