replace synthwave by new wave style

css/new-wave.css

@@ -1,76 +0,0 @@
-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);
-}
-
-.card,
-#matrixCard {
-    background: repeating-linear-gradient(transparent, #111 1px);
-    backdrop-filter: blur(3px);
-}
-
-.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/synthwave.css

@@ -1,5 +1,5 @@
 body {
-    background-image: url("new-wave/bg.png");
+    background-image: url(synthwave/bg.png);
     background-size: cover;
 }
 
@@ -11,113 +11,66 @@ body[data-bs-theme="dark"] {
     --bs-btn-bg: #2125296b;
 }
 
+.card {
+  background: #25292d66;
+}
+
+#matrixCard {
+  background-image: radial-gradient(#2226, #25292d66);
+}
+
 .card,
 #matrixCard {
     background: repeating-linear-gradient(transparent, #111 1px);
     backdrop-filter: blur(3px);
 }
 
-.card-header {
+.minoes-table {
-    background-color: rgba(37, 41, 45, 50%);
+  background: transparent;
-}
-
-#matrixTable {
-    border-spacing: 1px;
-}
-
-tr.matrix td:not(.mino) {
-    border: 1px solid #111;
 }
 
 .mino {
-    background: radial-gradient(#fff3 0%, var(--color) 170%);
+  background: var(--color);
-    border: 2px solid var(--color);
+  border: 3px solid var(--border);
-    border-radius: 0;
+  box-shadow: 0 0 8px var(--border);
-    outline: 1px solid #0006;
-    opacity: 100%;
-    box-shadow: 0 0 12px var(--color);
 }
 
-.I.mino {
+.I {
-    --color: #00eaf5;
+  --color: #00eaf888;
+  --border: #00eaf5;
 }
 
-.J.mino {
+.J {
-    --color: #00a9f7;
+  --color: #00a9f788;
+  --border: #00a9f7;
 }
 
-.L.mino {
+.L {
-    --color: #f9b600;
+  --color: #f9b60088;
+  --border: #f9b600;
 }
 
-.O.mino {
+.O {
-    --color: #f7f200;;
+  --color: #e3e04988;
+  --border: #e3e049;
 }
 
-.T.mino {
+.S {
-    --color: #d136e2;;
+  --color: #7bd59e88;
+  --border: #7bd59e;
 }
 
-.S.mino {
+.T {
-    --color: #35da3f;
+  --color: #d136e288;
+  --border: #d136e2;
 }
 
-.Z.mino {
+.Z {
-    --color: #ee3b3a;
+  --color: #E67D8688;
+  --border: #E67D86;
 }
 
-.ghost.mino {
+.ghost {
-    background: transparent;
+  --color: #fff4;
-    opacity: 50%;
+  --border: #fff5;
-}
-
-.moving.mino {
-    filter: brightness(120%);
-}
-
-.locking.mino {
-    --color: white;
-    box-shadow: 0 0 10px var(--color);
-}
-
-@keyframes locked-animation {
-    from {
-        background: white;
-        --color: white;
-    }
-}
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
-}
-
-.disabled.mino {
-    outline: 0px;
-    box-shadow: none;
-    filter: contrast(40%) brightness(50%);
-}
-
-tr.cleared-line-animation {
-    animation: none;
-}
-
-tr.cleared-line-animation::after {
-    content: "";
-    width: 100%;
-    height: var(--cell-side);
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    display: block;
-    background: repeating-linear-gradient(transparent, #fffb 1px);
-    opacity: 0;
-    animation: cleared-line-animation ease-out .3s;
-}
-
-@keyframes cleared-line-animation {
-    25% {
-        width: 200%;
-        opacity: 100%;
-    }
 }

index.html

@@ -13,7 +13,6 @@
     <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/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">
@@ -72,7 +71,6 @@
                 <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/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>