corrections

css/classic.css

@@ -84,15 +84,8 @@
 
 .ghost.mino {
     margin: 1px;
-    background: transparent !important;
+    opacity: 20%;
-    border: 2px solid var(--light-color) !important;
+    filter: brightness(180%) saturate(60%) blur(1px);
-    box-shadow:
-        -2px -2px 6px #FFF8,
-        -2px  2px 6px #FFF8,
-         2px -2px 6px #FFF8,
-         2px  2px 6px #FFF8;
-    opacity: 65%;
-    
 }
 
 .moving.mino {

css/common.css

@@ -41,6 +41,10 @@ body {
     text-align: right;
 }
 
+#timeCell {
+    min-width: 10ch;
+}
+
 .minoes-table {
     --piece-column: 0;
     --piece-row   : 0;

css/minimal.css

@@ -5,7 +5,12 @@
 .minoes-table {
     display: flex;
     flex-direction: column;
-    filter: drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
+    filter: 
+        drop-shadow(-2px 0 0 white)
+        drop-shadow(2px 0 0 white)
+        drop-shadow(0 -2px 0 white)
+        drop-shadow(0 2px 0 white)
+        drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
 }
 
 .minoes-table tr {
@@ -71,7 +76,7 @@ tr.matrix td:not(.mino) {
 }
 
 .ghost.mino {
-    opacity: 50%;
+    opacity: 5%;
     box-shadow: none;
 }
 
@@ -80,7 +85,8 @@ tr.matrix td:not(.mino) {
 }
 
 .locking.mino {
-    filter: saturate(50%) brightness(130%);
+    --background-color: white;
+    --box-shadow-color: #DDD;
 }
 
 .locked.mino {
@@ -105,4 +111,14 @@ tr.matrix td:not(.mino) {
     to {
         background-color: transparent;
     }
+}
+
+@keyframes trail-animation {
+    from {
+        background-color: #ceffff10;
+        filter: saturate(50%) brightness(110%);
+    }
+    to {
+        background-color: transparent;
+    }
 }

css/new-wave.css

@@ -0,0 +1,70 @@
+body {
+    background-image: url("new-wave/bg.png");
+    background-size: cover;
+}
+
+body[data-bs-theme="dark"] {
+    --bs-body-bg: #2125296b;
+}
+
+.btn-dark {
+    --bs-btn-bg: #2125296b;
+}
+
+.card {
+  background: #25292d66;
+}
+
+#matrixCard {
+  background-image: radial-gradient(#2226, #25292d66);
+}
+
+.minoes-table {
+  background: transparent;
+}
+
+.mino {
+  background: var(--color);
+  border: 3px solid var(--border);
+  box-shadow: 0 0 8px var(--border);
+}
+
+.I {
+  --color: #00eaf888;
+  --border: #00eaf5;
+}
+
+.J {
+  --color: #00a9f788;
+  --border: #00a9f7;
+}
+
+.L {
+  --color: #f9b60088;
+  --border: #f9b600;
+}
+
+.O {
+  --color: #e3e04988;
+  --border: #e3e049;
+}
+
+.S {
+  --color: #7bd59e88;
+  --border: #7bd59e;
+}
+
+.T {
+  --color: #d136e288;
+  --border: #d136e2;
+}
+
+.Z {
+  --color: #E67D8688;
+  --border: #E67D86;
+}
+
+.ghost {
+  --color: #fff4;
+  --border: #fff5;
+}

css/retro.css

@@ -120,7 +120,7 @@ td {
 }
 
 @keyframes blinker {
-    50% {
+    35% {
         opacity: 0;
     }
 }

css/synthwave.css

@@ -1,5 +1,5 @@
 body {
-    background-image: url("pop/bg.png");
+    background-image: url("new-wave/bg.png");
     background-size: cover;
 }
 

index.html

@@ -13,7 +13,8 @@
     <link rel="alternate stylesheet" href="css/classic.css" title="Classique">
     <link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
     <link rel="alternate stylesheet" href="css/electro.css" title="Électro">
-    <link rel="alternate stylesheet" href="css/pop.css"     title="Pop">
+    <link rel="alternate stylesheet" href="css/new-wave.css" title="New Wave">
+    <link rel="alternate stylesheet" href="css/synthwave.css"     title="Synthwave">
     <link rel="alternate stylesheet" href="css/retro.css"   title="Rétro">
     <link rel="alternate stylesheet" href="css/opera.css"   title="Opéra">
     <link rel="alternate stylesheet" href="css/binaural.css"   title="Binaural">
@@ -71,7 +72,8 @@
                 <div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="selectedStyleSheet.href = this.value">
                   <option value="css/classic.css" selected>Classique</option>
                   <option value="css/minimal.css">Minimal</option>
-                  <option value="css/pop.css">Pop</option>
+                  <option value="css/new-wave.css">New Wave</option>
+                  <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>
                   <option value="css/retro.css">Rétro</option>
                   <option value="css/opera.css">Opéra</option>