light!

css/common.css

@@ -21,8 +21,8 @@ body {
     }
 
     .modal-content {
-        background-color: #2125294d;
+        background-color: #212529b3;
-        backdrop-filter: blur(15px);
+        backdrop-filter: blur(10px);
     }
 }
 

css/stereo.css

@@ -29,9 +29,6 @@ body {
 }
 
 #screenRow {
-  --light-x: calc(0.5 - var(--rY) / 90);
-  --light-y: calc(0.5 - var(--rX) / 90);
-  --light-z: 1;
   display: block;
   transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
 }
@@ -64,6 +61,16 @@ body {
   border: none;
 }
 
+#holdTable .mino {
+  --row: 10;
+  --column: -5;
+}
+
+#nextTable .mino {
+  --row: 15;
+  --column: 20;
+}
+
 .minoes-table th,
 .minoes-table td {
   display: inline-block !important;
@@ -102,17 +109,15 @@ tr.matrix td:not(.mino) {
 .minoes-table .mino::before,
 .minoes-table .mino + :not(.mino)::before,
 .minoes-table .mino::after {
-  --light: calc(
-    1
-    + (var(--light-y) * 0.3)
-    + (var(--light-x) * 0.2)
-  );
-  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light)), var(--a));
-  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a));
   --highlight: hsla(60deg, 100%, 95%, 0.3);
   --shadow:    hsla(0deg, 0%, 0%, 0.15);
+  --light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1);
+  --light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4);
+  --light-z: 1;
   --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)), var(--a));
+  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a));
   background: radial-gradient(
     circle at var(--center-x) var(--center-y),
     var(--center-color) 0%,
@@ -133,24 +138,35 @@ tr.matrix td:not(.mino) {
   height: var(--cell-side);
 }
 
-.minoes-table :not(.mino) + .mino::before,
+/* Front face */
+.minoes-table .mino {
+  --light: calc(
+    1
+    + (var(--light-y) * 0.3)
+    + (var(--light-x) * 0.2)
+  );
+}
+
+/* Left face */
+.minoes-table .mino::before,
 .left .minoes-table .mino + .mino::before {
   --light: calc(
     1.1
-    + (var(--light-x) * 0.5)
+    + (var(--light-x) * -0.2)
-    + (var(--light-y) * 0.1)
+    + (var(--light-y) * 0.15)
   );
   transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
   transform-origin: left;
 }
 
-.right .minoes-table .mino + .mino::before,
+/* Right face */
+.right .minoes-table .mino::before,
 .minoes-table .mino + :not(.mino)::before,
 .right .minoes-table .mino:last-child::before {
   --light: calc(
     0.85
-    + (var(--light-x) * -0.5)
+    + (var(--light-x) * -0.2)
-    + (var(--light-y) * -0.1)
+    + (var(--light-y) * -0.15)
   );
   --center-x:  calc(65% + var(--light-x) * 10%);
   --center-y:  calc(35% + var(--light-y) * 10%);
@@ -164,19 +180,21 @@ tr.matrix td:not(.mino) {
   transform-origin: right !important;
 }
 
+/* Top face */
 .minoes-table .mino::after {
   --light: calc(
-    0.9
+    1.1
-    + (var(--light-y) * 0.6)
+    + (var(--light-y) * -0.3)
   );
   transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
   transform-origin: top;
 }
 
+/* Bottom face */
 .bottom .minoes-table .mino::after {
   --light: calc(
-    0.75
+    1.1
-    + (var(--light-y) * -0.6)
+    + (var(--light-y) * -0.3)
   );
   --center-x:  calc(65% + var(--light-x) * 10%);
   --center-y:  calc(65% + var(--light-y) * 10%);
@@ -185,10 +203,10 @@ tr.matrix td:not(.mino) {
   transform-origin: bottom;
 }
 
-.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.85; }
 .J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.85; }
 .L.mino, .L.mino + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.85; }
 .O.mino, .O.mino + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.85; }
+.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.85; }
 .S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.85; }
 .T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.85; }
 .Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.85; }