white border

css/classic.css

@@ -1,9 +1,27 @@
+.minoes-table {
+  filter:
+    drop-shadow(-.5px -.5px 0 white)
+    drop-shadow( .5px -.5px 0 white)
+    drop-shadow(-.5px  .5px 0 white)
+    drop-shadow( .5px  .5px 0 white);
+}
+
 .minoes-table tr {
   z-index: calc(100 - var(--row));
   position: sticky;
 }
 
+tr:not(.matrix) + tr.matrix td:not(.mino) {
+  border-top: none;
+}
+
+tr.matrix td:not(.mino):last-of-type {
+  border-right: none;
+}
+
 tr.matrix td:not(.mino) {
+  border-top: 1px solid #30303003;
+  border-right: 1px solid #30303003;
   border-left: none;
   border-bottom: none;
 }
@@ -40,9 +58,9 @@ tr.matrix td:not(.mino) {
     inset 2px 0 4px rgba(0,0,0,.06),
     inset -2px 0 4px rgba(0,0,0,.12),
     0 -4px 0 var(--top),
-    2px -3px 0 var(--right),
-    3px 2px 6px #0004;
+    2px -3px 0 var(--right);
   filter: saturate(1.1) contrast(1.05);
+  z-index: 10;
 }
 
 .I {
@@ -81,10 +99,35 @@ tr.matrix td:not(.mino) {
 }
 
 .ghost {
-  border: 3px solid #fff2;
+  border: 3px solid #ffffff05;
   padding: 2px;
-  background-color: #fff2;
+  background-color: #ffffff05;
   background-clip: content-box;
   background-image: none;
   box-shadow: none;
 }
+
+
+@keyframes trail-animation {
+    from {
+        background-color: #ceffff05;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: #fff3;
+        filter: saturate(50%) brightness(300%);
+        box-shadow: 0 0 0 #adb5bd33, 0 0 0 #adb5bd33;
+    }
+    60% {
+        box-shadow: -60px 0 2px #adb5bd17, 60px 0 2px #adb5bd17;
+    }
+    to {
+        background-color: transparent;
+        box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
+    }
+}