ghost glint on electro style

app.js

@@ -123,6 +123,12 @@ class Scheduler {
 class MinoesTable {
     constructor(id) {
         this.table = document.getElementById(id)
+        Array.from(this.table.getElementsByTagName("tr")).forEach((tr, row) => {
+            Array.from(tr.getElementsByTagName("td")).forEach((td, column) => {
+                td.style.setProperty('--row', row)
+                td.style.setProperty('--column', column)
+            })
+        })
         this.rows = this.table.rows.length
         this.columns = this.table.rows[0].childElementCount
     }
@@ -145,7 +151,9 @@ class MinoesTable {
         this.table.rows[position.y].cells[position.x].className = className
     }
 
-    drawPiece(piece=this.piece, className=piece.className + (piece.locked? " locked" : "")) {
+    drawPiece(piece=this.piece, className=piece.className) {
+        if (piece.locked) className += " locked"
+        if (piece==this.piece && actionsQueue.length) className += " moving"
         piece.minoesPosition[piece.facing]
             .translate(piece.center)
             .forEach(minoPosition => {
@@ -228,6 +236,8 @@ class Matrix extends MinoesTable {
         this.ghost = piece.ghost
         super.drawPiece(this.ghost)
         super.drawPiece(piece, className)
+        matrix.table.style.setProperty('--ghost-column', this.ghost.center.x)
+        matrix.table.style.setProperty('--ghost-row',    this.ghost.center.y)
     }
 
     redraw() {
@@ -890,6 +900,7 @@ function onkeydown(event) {
                 if (action == playerActions.softDrop) scheduler.setInterval(autorepeat, settings.fallPeriod/20)
                 else scheduler.setTimeout(repeat, settings.das)
             }
+            matrix.drawPiece()
         }
     }
 }
@@ -919,6 +930,7 @@ function onkeyup(event) {
             if (!actionsQueue.length) {
                 scheduler.clearTimeout(repeat)
                 scheduler.clearInterval(autorepeat)
+                matrix.drawPiece()
             }
         }
     }

css/common.css

@@ -18,6 +18,8 @@ body {
 }
 
 .minoes-table {
+    --ghost-row   : 0;
+    --ghost-column: 0;
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;

css/electro.css

@@ -4,38 +4,52 @@ body {
 }
 
 .card {
-    background-color: rgba(37, 41, 45, 50%);
+    background-color: rgba(37, 41, 45, 30%);
 }
 
-@supports (backdrop-filter: blur()) {
+.mino:not(.ghost):not(.locked) {
-    .card {
+    padding: 0;
-        background-color: rgba(33, 37, 41, 20%);
+    position: relative;
-        backdrop-filter: blur(3px);
+    z-index: 0;
-    }
+    box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
+        -1px 1px 4px rgba(128, 128, 128, 25%),
+        1px -1px 4px rgba(128, 128, 128, 25%),
+        1px 1px 4px rgba(128, 128, 128, 25%);
 }
 
-.mino {
+.mino:not(.ghost):not(.locked):before {
-    background-image: radial-gradient(
+    content: "";
-        farthest-corner at 4px 6px,
+    position: absolute;
-        hsla(196, 100%, 72%, 0.1)   0%,
+    z-index: -1;
-        hsla(196, 100%, 43%, 0.1) 150%
+    inset: 0;
-    );
+    padding: 1px;
-    border: 1px solid rgba(127, 229, 255, 0.7);
     border-radius: 0.3vmin;
-}
+    --glint-x: calc(50% + 50% * (var(--ghost-column) - var(--column))/10);
+    --glint-y: calc(50% + 50% * (var(--ghost-row) - var(--row))/25);
+    background: radial-gradient(
+        at var(--glint-x) var(--glint-y),
+        rgba(204, 238, 247, 0.9)   0%,
+        rgba(0, 159, 218, 0.9) 150%);
+    mask: 
+       linear-gradient(#666 0 0) content-box, 
+       linear-gradient(#fff 0 0);
+    mask-mode: luminance;
+    mask-composite: intersect;
+  }
 
 .ghost.mino {
     background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.4);
+    border: 2px solid rgba(255, 255, 255, 0.4);
     border-radius: 3px;
-    box-shadow:
+    box-shadow: -1px -1px 4px rgba(242, 255, 255, 16%),
-        -1px -1px 4px rgba(242, 255, 255, 16%),
         -1px 1px 4px rgba(242, 255, 255, 16%),
         1px -1px 4px rgba(242, 255, 255, 16%),
         1px 1px 4px rgba(242, 255, 255, 16%);
 }
 
-.locked.mino {
+.locked.mino,
+.moving.mino {
+    border-width: 1px;
     background: rgba(186, 211, 255, 70%);
     border-color: rgba(242, 255, 255, 0.7);
     box-shadow: -1px -1px 4px rgba(186, 211, 255, 27%),