less drop-shadows

css/classic.css

@@ -1,3 +1,9 @@
+.minoes-table {
+  filter:
+    drop-shadow(-1px -1px 0 white)
+    drop-shadow( 1px  1px 0 white);
+}
+
 .minoes-table tr {
   z-index: calc(100 - var(--row));
   position: sticky;
@@ -6,13 +12,14 @@
 tr.matrix td:not(.mino) {
   border-left: none;
   border-bottom: none;
+  border-right: 1px solid #30303003;
+  border-top: 1px solid #30303003;
 }
 
 .mino {
   --color: hsl(var(--hue), var(--saturation), 40%);
   --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 84%);
   --top: hsl(var(--hue), calc(0.6 * var(--saturation)), 68%);
-  --right: hsl(var(--hue), calc(0.4 * var(--saturation)), 20%);
   background-color: var(--color);
   background-image:
     radial-gradient(
@@ -39,9 +46,7 @@ tr.matrix td:not(.mino) {
   box-shadow:
     inset 2px 0 4px rgba(0,0,0,.06),
     inset -2px 0 4px rgba(0,0,0,.12),
-    0 -4px 0 var(--top),
+    0 -4px 0 var(--top);
-    2px -3px 0 var(--right),
-    3px 2px 6px #0004;
   filter: saturate(1.1) contrast(1.05);
 }
 
@@ -81,10 +86,34 @@ tr.matrix td:not(.mino) {
 }
 
 .ghost {
-  border: 3px solid #fff2;
+  border: 3px solid #fff1;
   padding: 2px;
-  background-color: #fff2;
+  background-color: #fff1;
   background-clip: content-box;
   background-image: none;
   box-shadow: none;
+}
+
+@keyframes trail-animation {
+    from {
+        background-color: #ceffff10;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: #fff6;
+        filter: saturate(50%) brightness(300%);
+        box-shadow: 0 0 0 #adb5bd66, 0 0 0 #adb5bd66;
+    }
+    60% {
+        box-shadow: -60px 0 2px #adb5bd33, 60px 0 2px #adb5bd33;
+    }
+    to {
+        background-color: transparent;
+        box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
+    }
 }