a bit of 3D

css/heavy-metal.css

@@ -0,0 +1,65 @@
+#sceneDiv {
+  perspective: 500px;
+}
+#screenRow {
+  transform: rotateX(20deg);
+}
+
+#screenRow .card {
+  box-shadow:
+    0 10px 3px #25292d,
+    0 15px 0 var(--bs-card-border-color) !important;;
+}
+
+tr.matrix td:not(.mino) {
+  border-left: none;
+  border-bottom: none;
+}
+
+.mino {
+  background-color: hsl(var(--hue), 55%, 55%);
+  background-image: linear-gradient(30deg, #fff4, transparent);
+  border: 1px outset hsl(var(--hue), 55%, 45%);
+  border-radius: 2px;
+  box-shadow:
+    0 10px 3px hsl(var(--hue), 70%, 10%),
+    0 15px 0 hsla(var(--hue), 90%, 40%, 70%);
+  opacity: 80%;
+  backdrop-filter: blur(6px);
+}
+
+tr:last-of-type .mino {
+  boxd-shadow: none;
+}
+
+.I {
+  --hue: 197;
+}
+
+.J {
+  --hue: 217;
+}
+
+.L {
+  --hue: 36;
+}
+
+.O {
+  --hue: 60;
+}
+
+.S {
+  --hue: 113;
+}
+
+.T {
+  --hue: 268;
+}
+
+.Z {
+  --hue: 0;
+}
+
+.ghost {
+  opacity: 30%;
+}

css/neo-classic.css

@@ -10,10 +10,10 @@ tr.matrix td:not(.mino) {
 
 .mino {
   --color: hsl(var(--hue), var(--saturation), 60%);
-  --dark: hsl(var(--hue), var(--saturation), 25%);
-  --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 84%);
+  --dark: hsl(var(--hue), var(--saturation), 28%);
+  --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 90%);
   --border: hsl(var(--hue), var(--saturation), 40%);
-  --top: hsl(var(--hue), calc(0.6 * var(--saturation)), 68%);
+  --top: hsl(var(--hue), calc(0.6 * var(--saturation)), 75%);
   position: relative;
   background-color: var(--dark);
   background-image: radial-gradient(
@@ -43,7 +43,7 @@ tr.matrix td:not(.mino) {
   background: var(--color);
   left: 3px;
   top: 3px;
-  border: 3px solid var(--border);
+  border: 2px solid var(--border);
   border-top-color: white;
 }