less drop-shadows

css/classic.css

@@ -1,18 +1,25 @@
+.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;
 }
 
 tr.matrix td:not(.mino) {
-  border-left: 1px solid #333;
-  border-right: 1px solid #333;
-  border-top: 2px solid #303030;
+  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%);
   background-color: var(--color);
   background-image:
     radial-gradient(
@@ -39,7 +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 -2px 0 var(--light);
+    0 -4px 0 var(--top);
   filter: saturate(1.1) contrast(1.05);
 }
 
@@ -79,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;
+    }
 }

css/common.css

@@ -67,7 +67,7 @@ td#timeCell {
 
 @keyframes hard-dropped-table-animation {
     25% {
-        transform: translateY(2px);
+        transform: translateY(3px);
     }
 }
 .hard-dropped-table-animation {

index.html

@@ -60,7 +60,7 @@
                 <div class="col-4"><input name="pause" id="pauseInput" type="text" class="form-control text-center" value="Échap." onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
                 <label for="pauseInput" title="Pause" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-pause"></i></label>
               </fieldset>
-              <fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Répétition automatique</legend>
+              <fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center"><!--<legend class="text-start">Répétition automatique</legend>-->
                 <label for="arrInput" class="col-2 col-form-label"><abbr title="Automatic Repeat Rate : période de répétition de l'action">ARR</abbr></label>
                 <div class="col-4"><div class="input-group"><input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1"><div class="input-group-text">ms</div></div></div>
                 <div class="col-4"><div class="input-group"><input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"><div class="input-group-text">ms</div></div></div>
@@ -77,13 +77,15 @@
                   <option value="css/opera.css">Opéra</option>
                   <option value="css/stereo.css">Stéréo</option>
                 </select></div>
-                <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
-                <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
-                <div class="col-2"></div>
-                <div class="col-4 form-check form-switch text-start">
-                  <input id="fullscreenCheckbox" type="checkbox" role="switch" class="form-check-input" tabindex="0">
-                  <label for="fullscreenCheckbox" class="form-check-label">Plein écran</label>
+                <div class="col-4">
+                  <div class="form-check form-switch text-start">
+                    <input id="fullscreenCheckbox" type="checkbox" role="switch" class="form-check-input" tabindex="0">
+                    <label for="fullscreenCheckbox" class="form-check-label">Plein écran</label>
+                  </div>
                 </div>
+                <div class="col-2"></div>
+                <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
+                <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
               </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Partie</legend>
                 <label for="levelInput" class="col-2 col-form-label text-center">Niveau</label>