add binaural (3D) style

css/binaural.css

@@ -0,0 +1,132 @@
+body * {
+    perspective: 1000px;
+}
+
+#screenRow {
+    transform: rotate3d(-1, 0, 0, 15deg);
+    transform-style: preserve-3d;
+}
+
+.card {
+    background-color: #363941;
+}
+
+.minoes-table {
+    display: block;
+    flex-direction: column;
+    transform-style: preserve-3d;
+    transform: translateZ(var(--cell-side));
+    transform: translateZ(0);
+    will-change: transform;
+}
+
+.minoes-table tr {
+    display: block;
+    width: max-content;
+    height: var(--cell-side);
+    transform-style: preserve-3d;
+}
+
+tr.matrix td:not(.mino) {
+    border: 0;
+}
+
+.minoes-table td {
+    display: inline-block;
+    width: var(--cell-side);
+    height: var(--cell-side);
+    padding: 0 !important;
+    will-change: transform;
+}
+
+.mino {
+    background: var(--background-color);
+    transform-style: preserve-3d;
+    overflow: visible;
+}
+
+.mino::before,
+.mino::after {
+    content: "";
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: inherit;
+    height: inherit;
+    background: var(--light-color);
+    z-index: -1;
+}
+
+.mino::before {
+    transform: rotateY(-90deg);
+    transform-origin: left;
+}
+
+.mino::after {
+    transform: rotateX(90deg);
+    transform-origin: top;
+}
+
+.I.mino {
+    --background-color: #42AFE180;
+    --light-color: #6CEAFF80;
+}
+
+.J.mino {
+    --background-color: #1165B5B0;
+    --light-color: #339BFF80;
+}
+
+.L.mino {
+    --background-color: #F38927B0;
+    --light-color: #FFBA5980;
+}
+
+.O.mino {
+    --background-color: #F6D03CB0;
+    --light-color: #FFFF7F80;
+}
+
+.S.mino {
+    --background-color: #51B84DB0;
+    --light-color: #84F88080;
+}
+
+.T.mino {
+    --background-color: #9739A2B0;
+    --light-color: #D958E980;
+}
+
+.Z.mino {
+    --background-color: #EB4F65B0;
+    --light-color: #FF7F7980;
+}
+
+.ghost.mino {
+    --background-color: #8888;
+    --light-color: #CCC8;
+}
+
+.locking.mino {
+    --background-color: #EEE8;
+    --light-color: #FFF8;
+}
+
+.disabled.mino {
+    --background-color: #EEE8;
+    --light-color: #FFF8;
+}
+
+.hard-dropped-table-animation {
+    animation: none;
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: #eeeeee;
+    }
+    to {
+        background-color: transparent;
+    }
+}

index.html

@@ -16,6 +16,7 @@
     <link rel="alternate stylesheet" href="css/pop.css"     title="Pop">
     <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">
     <link rel="apple-touch-icon"      sizes="180x180" href="favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32"   href="favicons/T-2.png">
     <link rel="icon" type="image/png" sizes="16x16"   href="favicons/favicon-16x16.png">
@@ -65,6 +66,7 @@
                   <option value="css/electro.css">Électro</option>
                   <option value="css/retro.css">Rétro</option>
                   <option value="css/opera.css">Opéra</option>
+                  <option value="css/binaural.css">Binaural</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>