bootstrap checkbox

This reverts commit 994a7a7f04.

css/binaural.css

@@ -1,276 +0,0 @@
-body {
-    background-image: url(binaural/bg.jpg),
-        radial-gradient(
-            circle at center,
-            #39444f 0%,
-            #2c323b 25%,
-            #293036 28%,
-            #252b32 34%,
-            #242930 38%,
-            #1a1d22 52%,
-            #191c22 53%,
-            #151519 63%,
-            #141418 65%,
-            #0f0f12 74%,
-            #0a0c0d 100%
-        );
-    background-repeat: round;
-}
-
-#sceneDiv {
-    perspective: 500px;
-}
-
-#sceneDiv * {
-    transform-style: preserve-3d;
-}
-
-#screenRow {
-    display: block;
-    transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
-    cursor: grab;
-}
-
-#screenRow:active {
-    cursor: grabbing;
-}
-
-#screenRow * {
-    display: block;
-}
-
-#screenRow .col {
-    display: inline-block !important;
-    width: max-content;
-    height: 100%;
-    vertical-align: top;
-}
-
-.card {
-    background: #36394180;
-}
-
-#matrixCard {
-    background-image: none;
-}
-
-#screenRow .card > * {
-    transform: translateZ(var(--cell-side));
-}
-
-#screenRow .card-header {
-    background-color: transparent;
-    border: none;
-}
-
-.minoes-table th,
-.minoes-table td {
-    display: inline-block !important;
-    width: max-content;
-}
-
-.minoes-table tr {
-    width: max-content;
-    height: var(--cell-side);
-}
-
-#statsTable tr {
-    display: table;
-    width: 100%;
-}
-
-#statsTable th,
-#statsTable td {
-    display: table-cell;
-    border: 0;
-}
-
-tr.matrix td:not(.mino) {
-    border: 0;
-    will-change: transform;
-    transform: translateZ(0);
-}
-
-.minoes-table td {
-    width: var(--cell-side) !important;
-    height: var(--cell-side);
-}
-
-.minoes-table .mino {
-    background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
-    overflow: visible;
-}
-
-.mino::before,
-.mino::after {
-    content: '';
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    width: inherit;
-    height: inherit;
-}
-
-.mino::before {
-    background: var(--light-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
-    transform-origin: left;
-}
-
-.right .mino::before {
-    background: var(--dark-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg);
-    transform-origin: right;
-}
-
-.mino::after {
-    background: var(--light-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
-    transform-origin: top;
-}
-
-.bottom .mino::after {
-    background: var(--dark-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
-    transform-origin: bottom;
-}
-
-.I.mino {
-    --background-color: #42afe1b0;
-    --light-color: #6ceaff80;
-    --dark-color: #00a4b0b0;
-}
-
-.J.mino {
-    --background-color: #1165b5b0;
-    --light-color: #339bff80;
-    --dark-color: #00009db0;
-}
-
-.L.mino {
-    --background-color: #f38927b0;
-    --light-color: #ffba5980;
-    --dark-color: #c54800b0;
-}
-
-.O.mino {
-    --background-color: #f6d03cb0;
-    --light-color: #ffff7f80;
-    --dark-color: #ca9501b0;
-}
-
-.S.mino {
-    --background-color: #51b84db0;
-    --light-color: #84f88080;
-    --dark-color: #1cbc02b0;
-}
-
-.T.mino {
-    --background-color: #9739a2b0;
-    --light-color: #d958e980;
-    --dark-color: #6e019ab0;
-}
-
-.Z.mino {
-    --background-color: #eb4f65b0;
-    --light-color: #ff7f7980;
-    --dark-color: #ad1936b0;
-}
-
-.ghost.mino {
-    --background-color: #8886;
-    --light-color: #ccc6;
-    --dark-color: #3336;
-}
-
-.locking.mino {
-    --background-color: #eeeb;
-    --light-color: #fffb;
-    --dark-color: #dddb;
-}
-
-.disabled.mino {
-    --background-color: #888b;
-    --light-color: #cccb;
-    --dark-color: #333b;
-}
-
-@keyframes cleared-line-animation {
-    from {
-        background-color: #ceffff66;
-        box-shadow: -200px 0 5px white, 200px 0 5px white;
-    }
-    to {
-        background-color: transparent;
-    }
-}
-
-@keyframes show-level-animation {
-    from {
-        opacity: 1;
-        transform: translateY(200%);
-    }
-    50% {
-        transform: translateY(0) scaleY(1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(-100%) scaleY(0);
-        line-height: 0;
-    }
-}
-
-@keyframes zoom-in-animation {
-    from {
-        opacity: 1;
-        transform: scale3d(0.3, 0.3, 0.3);
-        line-height: var(--bs-body-line-height);
-    }
-    30% {
-        transform: scale3d(1, 1, 1);
-    }
-    80% {
-        transform: scale3d(1, 1, 1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 1;
-        transform: scale3d(1.5, 0, 1);
-        line-height: 0;
-    }
-}
-
-@keyframes rotate-in-animation {
-    0% {
-        opacity: 1;
-        transform: rotate(200deg);
-        line-height: var(--bs-body-line-height);
-    }
-    30% {
-        transform: translateZ(0);
-        transform: scale3d(1, 1, 1);
-    }
-    80% {
-        transform: scale3d(1, 1, 1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 1;
-        transform: scale3d(1.5, 0, 1);
-        line-height: 0;
-    }
-}
-
-@keyframes game-over-animation {
-    from {
-        opacity: 1;
-        transform: translateY(200%);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scaleY(1);
-        line-height: var(--bs-body-line-height);
-    }
-}

css/classic.css

@@ -84,8 +84,8 @@
 
 .ghost.mino {
     margin: 1px;
-    opacity: 20%;
-    filter: brightness(180%) saturate(60%) blur(1px);
+    opacity: 30%;
+    filter: brightness(300%) saturate(10%) blur(1px);
 }
 
 .moving.mino {
@@ -115,9 +115,18 @@
          1px -1px 4px #FFF2,
          1px  1px 4px #FFF2;
     }
-}
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
+    50% {
+        box-shadow:
+            -1px -1px 6px #FFF4,
+            -1px  1px 6px #FFF4,
+             1px -1px 6px #FFF4,
+             1px  1px 6px #FFF4;
+    }
+    to {
+        box-shadow:
+            -1px -1px 0 #FFF2,
+            -1px  1px 0 #FFF2,
+             1px -1px 0 #FFF2,
+             1px  1px 0 #FFF2;
+    }
 }

css/common.css

@@ -1,8 +1,8 @@
 :root {
     --cell-side: 24px;
-    --rX: -15deg;
+    --rX: -15;
     --rY: 0;
-    --tZ: 0;
+    --tZ: 25px;
 }
 
 body {
@@ -10,13 +10,19 @@ body {
 }
 
 @supports (backdrop-filter: blur()) {
-    .modal {
+    .modal::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         backdrop-filter: blur(2px);
     }
 
     .modal-content {
-        background-color: #2125294d;
-        backdrop-filter: blur(15px);
+        background-color: #212529b3;
+        backdrop-filter: blur(10px);
     }
 }
 
@@ -34,6 +40,7 @@ body {
 
 .modal-title {
     text-shadow: 0 0 8px var(--bs-light);
+    font-weight: 600;
 }
 
 #statsTable td,
@@ -41,7 +48,7 @@ body {
     text-align: right;
 }
 
-#timeCell {
+td#timeCell {
   min-width: 10ch;
 }
 
@@ -94,6 +101,17 @@ td {
     }
 }
 
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(400%);
+    }
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}
+
 td.trail-animation {
     animation: trail-animation ease-out .3s;
 }
@@ -241,3 +259,28 @@ tr.cleared-line-animation {
     animation-timing-function: (0.4, 0, 0.6, 1);
     animation-duration: 2s;
 }
+
+#statsModal table {
+    border-collapse: collapse;
+}
+
+#statsModal th {
+    padding-left: 0;
+    padding-right: 0.5rem;
+    padding-bottom: 0.2rem;
+    border-left: 0.5rem solid transparent;
+    border-right: 0;
+}
+
+#statsModal td {
+    padding-left: 0.5rem;
+    padding-right: 0;
+    padding-bottom: 0.2rem;
+    border-left: 0;
+    border-right: 0.5rem solid transparent;
+}
+
+#statsModal tr:last-child th,
+#statsModal tr:last-child td {
+    border-bottom: none;
+}

css/electro.css

@@ -92,8 +92,3 @@ tr.matrix td:not(.mino) {
         border-color: white;
     }
 }
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
-}

css/minimal.css

@@ -78,6 +78,7 @@ tr.matrix td:not(.mino) {
 .ghost.mino {
     opacity: 5%;
     box-shadow: none;
+    transform: translateY(-6px);
 }
 
 .moving.mino {

css/new-wave.css

@@ -1,70 +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);
-}
-
-.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/opera.css

@@ -75,6 +75,10 @@ body {
     color: white;
 }
 
+td#timeCell {
+  text-align: center;
+}
+
 #matrixCard {
     background: transparent;
     border-top: none;
@@ -142,14 +146,3 @@ body {
     filter: brightness(50%) contrast(80%);
     opacity: 70%;
 }
-
-@keyframes locked-animation {
-    from {
-        filter: saturate(50%) brightness(400%);
-    }
-}
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
-}

css/retro.css

@@ -7,9 +7,6 @@
     src: url("retro/Early GameBoy.ttf");
 }
 
-body {
-}
-
 #screenRow {
     background-image: url("retro/bg.png");
     background-size: 10px;
@@ -82,7 +79,7 @@ body {
     text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302;
 }
 
-td {
+.minoes-table td {
     border: 0 !important;
 }
 
@@ -121,7 +118,7 @@ td {
 
 @keyframes blinker {
     35% {
-        opacity: 0;
+        opacity: 50%;
     }
 }
 

css/stereo.css

@@ -0,0 +1,368 @@
+body {
+  background-image: url(stereo/bg.jpg),
+    radial-gradient(circle at center,
+      #39444f 0%,
+      #2c323b 25%,
+      #293036 28%,
+      #252b32 34%,
+      #242930 38%,
+      #1a1d22 52%,
+      #191c22 53%,
+      #151519 63%,
+      #141418 65%,
+      #0f0f12 74%,
+      #0a0c0d 100%);
+  background-repeat: round;
+}
+
+#sceneDiv {
+  perspective: 500px;
+  cursor: grab;
+}
+
+#sceneDiv:active {
+  cursor: grabbing;
+}
+
+#sceneDiv * {
+  transform-style: preserve-3d;
+}
+
+#screenRow {
+  display: block;
+  transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
+}
+
+#screenRow * {
+  display: block;
+}
+
+#screenRow .col {
+  display: inline-block !important;
+  width: max-content;
+  height: 100%;
+  vertical-align: top;
+}
+
+.card {
+  background: #36394180;
+}
+
+#matrixCard {
+  background-image: none;
+}
+
+#screenRow .card>* {
+  transform: translateZ(var(--cell-side));
+}
+
+#screenRow .card-header {
+  background-color: transparent;
+  border: none;
+}
+
+.card,
+.card-header {
+  text-shadow:
+    calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
+}
+
+#holdTable .mino {
+  --row: 7;
+  --column: -5;
+}
+
+#nextTable .mino {
+  --row: 15;
+  --column: 15;
+}
+
+.minoes-table th,
+.minoes-table td {
+  display: inline-block !important;
+  width: max-content;
+}
+
+.minoes-table tr {
+  width: max-content;
+  height: var(--cell-side);
+}
+
+#statsTable tr {
+  display: table;
+  width: 100%;
+}
+
+#statsTable th,
+#statsTable td {
+  display: table-cell;
+  border: 0;
+}
+
+tr.matrix td:not(.mino) {
+  border: 0;
+}
+
+.minoes-table td {
+  width: var(--cell-side) !important;
+  height: var(--cell-side) !important;
+  overflow: visible;
+}
+
+.minoes-table .mino,
+.minoes-table .mino::before,
+.minoes-table .mino + :not(.mino)::before,
+.minoes-table .mino::after {
+  --light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1);
+  --light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4);
+  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
+  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
+  background: var(--center-color);
+  border-radius: 2px;
+  border: 2px outset var(--center-color);
+}
+
+.minoes-table .mino::before,
+.minoes-table .mino + :not(.mino)::before,
+.minoes-table .mino::after,
+td.trail-animation::before,
+td.trail-animation::after,
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: var(--cell-side);
+  height: var(--cell-side);
+}
+
+/* Front face */
+.minoes-table .mino,
+td.trail-animation {
+  --light: calc(
+    1
+    + (var(--light-y) * 0.3)
+    + (var(--light-x) * 0.2)
+  );
+  --center-x:  calc(35% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  background: radial-gradient(
+    circle at var(--center-x) var(--center-y),
+    var(--center-color) 15%,
+    var(--edge-color) 100%
+  );
+  box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
+}
+
+/* Left face */
+.minoes-table .mino::before,
+td.trail-animation::before,
+tr.cleared-line-animation td::before,
+.left .minoes-table .mino + .mino::before {
+  --light: calc(
+    1.1
+    + (var(--light-x) * -0.2)
+    + (var(--light-y) * 0.15)
+  );
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform-origin: left;
+}
+
+/* Right face */
+.right .minoes-table .mino + .mino::before,
+.minoes-table .mino + :not(.mino)::before,
+.right td.trail-animation::before,
+.right tr.cleared-line-animation td::before {
+  --light: calc(
+    0.85
+    + (var(--light-x) * -0.2)
+    + (var(--light-y) * -0.15)
+  );
+  --center-x:  calc(65% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  filter: saturate(0.95);
+  transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform-origin: left;
+}
+
+.right .minoes-table .mino:last-child::before {
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
+  transform-origin: right !important;
+}
+
+/* Top face */
+.minoes-table .mino::after,
+td.trail-animation::after,
+tr.cleared-line-animation td::after {
+  --light: calc(
+    1.5
+    + (var(--light-y) * 0.2)
+  );
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg);
+  transform-origin: top;
+}
+
+/* Bottom face */
+.bottom .minoes-table .mino::after,
+.bottom td.trail-animation::after,
+.bottom tr.cleared-line-animation td::after {
+  --light: calc(
+    1.1
+    + (var(--light-y) * -0.3)
+  );
+  --center-x:  calc(65% + var(--light-x) * 10%);
+  --center-y:  calc(65% + var(--light-y) * 10%);
+  filter: saturate(0.95);
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(-90deg);
+  transform-origin: bottom;
+}
+
+.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
+.L.mino, .L.mino + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.75; }
+.O.mino, .O.mino + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.75; }
+.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
+.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
+.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
+.Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
+
+.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
+.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
+.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
+
+#holdTable .J + :not(.mino),
+#holdTable .L + :not(.mino),
+#holdTable .S + :not(.mino),
+#holdTable .T + :not(.mino),
+#holdTable .Z + :not(.mino),
+#nextTable .J + :not(.mino),
+#nextTable .L + :not(.mino),
+#nextTable .S + :not(.mino),
+#nextTable .T + :not(.mino),
+#nextTable .Z + :not(.mino) {
+  transform: translateX(50%);
+}
+
+@keyframes trail-animation {
+    from {
+        background-color: hsla(180, 100%, 100%, 0.1);
+        border-color:  hsla(180, 100%, 100%, 0.1);
+    }
+    to {
+        background-color: transparent;
+        border-color: transparent;
+    }
+}
+
+td.trail-animation::before,
+td.trail-animation::after {
+    animation: trail-animation ease-out .3s;
+}
+
+@keyframes locked-animation {
+    from {
+        --h: 0deg; --s: 0%; --l: 100%; --a: 1;
+        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
+    }
+}
+
+.locked.mino::before,
+.locked.mino::after {
+    animation: locked-animation;
+    animation-duration: .2s;
+}
+
+@keyframes cleared-line-animation {
+  from {
+    background-color: white !important;
+    box-shadow: 0 0 0 white;
+  }
+  to {
+    background-color: #fff0;
+    box-shadow: 0 0 100px transparent;
+  }
+}
+
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+  animation: cleared-line-animation ease-out .3s;
+}
+
+@keyframes show-level-animation {
+  from {
+    opacity: 1;
+    transform: translateY(200%);
+  }
+
+  50% {
+    transform: translateY(0) scaleY(1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-100%) scaleY(0);
+    line-height: 0;
+  }
+}
+
+@keyframes zoom-in-animation {
+  from {
+    opacity: 1;
+    transform: scale3d(0.3, 0.3, 0.3);
+    line-height: var(--bs-body-line-height);
+  }
+
+  30% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  80% {
+    transform: scale3d(1, 1, 1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1.5, 0, 1);
+    line-height: 0;
+  }
+}
+
+@keyframes rotate-in-animation {
+  0% {
+    opacity: 1;
+    transform: rotate(200deg);
+    line-height: var(--bs-body-line-height);
+  }
+
+  30% {
+    transform: translateZ(0);
+    transform: scale3d(1, 1, 1);
+  }
+
+  80% {
+    transform: scale3d(1, 1, 1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1.5, 0, 1);
+    line-height: 0;
+  }
+}
+
+@keyframes game-over-animation {
+  from {
+    opacity: 1;
+    transform: translateY(200%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    line-height: var(--bs-body-line-height);
+  }
+}

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 {
-    background-color: rgba(37, 41, 45, 50%);
-}
-
-#matrixTable {
-    border-spacing: 1px;
-}
-
-tr.matrix td:not(.mino) {
-    border: 1px solid #111;
+.minoes-table {
+  background: transparent;
 }
 
 .mino {
-    background: radial-gradient(#fff3 0%, var(--color) 170%);
-    border: 2px solid var(--color);
-    border-radius: 0;
-    outline: 1px solid #0006;
-    opacity: 100%;
-    box-shadow: 0 0 12px var(--color);
+  background: var(--color);
+  border: 3px solid var(--border);
+  box-shadow: 0 0 8px var(--border);
 }
 
-.I.mino {
-    --color: #00eaf5;
+.I {
+  --color: #00eaf866;
+  --border: #00eaf5;
 }
 
-.J.mino {
-    --color: #00a9f7;
+.J {
+  --color: #00a9f766;
+  --border: #00a9f7;
 }
 
-.L.mino {
-    --color: #f9b600;
+.L {
+  --color: #f9b60066;
+  --border: #f9b600;
 }
 
-.O.mino {
-    --color: #f7f200;;
+.O {
+  --color: #e3e04966;
+  --border: #e3e049;
 }
 
-.T.mino {
-    --color: #d136e2;;
+.S {
+  --color: #7bd59e66;
+  --border: #7bd59e;
 }
 
-.S.mino {
-    --color: #35da3f;
+.T {
+  --color: #d136e266;
+  --border: #d136e2;
 }
 
-.Z.mino {
-    --color: #ee3b3a;
+.Z {
+  --color: #E67D8666;
+  --border: #E67D86;
 }
 
-.ghost.mino {
-    background: transparent;
-    opacity: 50%;
-}
-
-.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%;
-    }
+.ghost {
+  --color: #fff4;
+  --border: #fff5;
 }

index.html

@@ -13,11 +13,10 @@
     <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">
-    <link rel="alternate stylesheet" href="css/binaural.css"   title="Binaural">
+    <link rel="alternate stylesheet" href="css/stereo.css"    title="Stéréo">
     <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">
@@ -72,15 +71,19 @@
                 <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>
                   <option value="css/opera.css">Opéra</option>
-                  <option value="css/binaural.css">Binaural</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>
               </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>
@@ -119,7 +122,7 @@
               <tr><th>Meilleur<br/>score</th><td id="highScoreCell"><script>document.write(Number(localStorage["highScore"]) || 0)</script></td></tr>
               <tr><th>Niveau</th>                           <td id="levelCell">0</td>                                                                          </tr>
               <tr><th>But</th>                              <td id="goalCell">0</td>                                                                           </tr>
-              <tr><th>Temps</th>                            <td id="timeCell">00:00</td>                                                                       </tr>
+              <tr><th>Temps</th>                            <td id="timeCell">00:00:00</td>                                                                       </tr>
             </table>
           </div>
         </div>
@@ -188,21 +191,21 @@
 
     </div>
 
-    <div class="modal fade" id="statsModal" tabindex="-1">
+    <div class="modal fade" id="statsModal" data-bs-backdrop="static" tabindex="-1">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <h2 class="modal-title w-100 text-center">Fin</h2>
-              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+              <!-- <button type="button" class="btn-close" data-bs-dismiss="modal"></button> -->
             </div>
             <div class="modal-body p-0">
               <table class="table mb-0">
-                <tr><th>Score</th>         <td id="statsModalScoreCell"></td>        <th>Niveau</th>                <td id="statsModalLevelCell"></td>          </tr>
-                <tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td>    <th>Temps</th>                 <td id="statsModalTimeCell"></td>           </tr>
+                <tr><th>Score</th>         <td id="statsModalScoreCell"></td>        <th>Quatuors</th>             <td id="statsModalNbQuatuors"></td>         </tr>
+                <tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td>    <th>Pirouettes</th>           <td id="statsModalNbTSpin"></td></td>       </tr>
+                <tr><th>Temps</th>         <td id="statsModalTimeCell"></td>         <th>Plus long combo</th>      <td id="statsModalMaxCombo"></td>           </tr>
+                <tr><th>Niveau</th>        <td id="statsModalLevelCell"></td>        <th>Plus long bout à bout</th><td id="statsModalMaxB2B"></td>             </tr>
                 <tr><th>Lignes</th>        <td id="statsModaltotalClearedLines"></td><th>Lignes par minute</th>    <td id="statsModaltotalClearedLinesPM"></td></tr>
-                <tr><th>Quatuors</th>      <td id="statsModalNbQuatuors"></td>       <th>Plus long combo</th>       <td id="statsModalMaxCombo"></td>           </tr>
-                <tr><th>Pirouettes</th>    <td id="statsModalNbTSpin"></td>          <th>Plus long bout en bout</th><td id="statsModalMaxB2B"></td>             </tr>
               </table>
             </div>
             <div class="modal-footer">

js/app.js

@@ -13,9 +13,28 @@ window.onload = function(event) {
     selectedStyleSheet.href = stylesheetSelect.value
     favicon = document.querySelector("link[rel~='icon']")
 
+    fullscreenCheckbox.onchange = function() {
+        if (this.checked) {
+            document.documentElement.requestFullscreen()
+        } else {
+            document.exitFullscreen()
+        }
+    }
+
     restart()
 }
 
+document.onfullscreenchange = function() {
+    if (document.fullscreenElement) {
+        fullscreenCheckbox.checked = true
+    } else {
+        fullscreenCheckbox.checked = false
+    }
+}
+document.onfullscreenerror = function() {
+    fullscreenCheckbox.checked = false
+}
+
 function restart() {
     stats.modal.hide()
     holdQueue.init()
@@ -123,7 +142,9 @@ let playerActions = {
         scheduler.clearTimeout(lockDown)
         playSound(hardDropSound)
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2
-        matrixCard.classList.add("hard-dropped-table-animation")
+        matrixCard.classList.remove("hard-dropped-table-animation")
+        matrixCard.offsetHeight;
+        matrixCard.classList.add("hard-dropped-table-animation") // restart animation
         lockDown()
         return true
     },
@@ -263,7 +284,7 @@ window.onbeforeunload = function(event) {
 
 // Play with 3D
 let mousedown = false
-let rX0 = 0
+let rX0 = -15
 let rY0 = 0
 let clientX0 = 0
 let clientY0 = 0
@@ -280,18 +301,18 @@ sceneDiv.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
         event.stopPropagation()
-        rX = (rX0 - event.clientY + clientY0 + 360) % 360
-        screenRow.style.setProperty("--rX", rX + "deg")
-        if (rX <= 180) {
+        rX = (rX0 - 0.5 * (event.clientY - clientY0)) % 360
+        screenRow.style.setProperty("--rX", rX)
+        if (rX >= 0) {
             screenRow.classList.remove("top")
             screenRow.classList.add("bottom")
         } else {
             screenRow.classList.add("top")
             screenRow.classList.remove("bottom")
         }
-        rY = (rY0 + event.clientX - clientX0 + 360) % 360
-        screenRow.style.setProperty("--rY", rY + "deg")
-        if (rY >= 180) {
+        rY = (rY0 + 0.5 * (event.clientX - clientX0)) % 360
+        screenRow.style.setProperty("--rY", rY)
+        if (rY <= 0) {
             screenRow.classList.remove("left")
             screenRow.classList.add("right")
         } else {
@@ -309,6 +330,6 @@ sceneDiv.onwheel = function(event) {
     event.preventDefault()
     event.stopPropagation()
     let tZ = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))
-    tZ += event.deltaY
+    tZ -= event.deltaY
     screenRow.style.setProperty("--tZ", tZ + "px")
 }

js/game_logic.js

@@ -255,6 +255,10 @@ class Matrix extends MinoesTable {
         matrix.table.style.setProperty('--piece-row',    this.piece.center.y)
     }
 
+    clearPiece(piece=this.piece, className="") {
+        super.drawPiece(piece, className)
+    }
+
     redraw() {
         for (let y=0; y<this.rows; y++) {
             for (let x=0; x<this.columns; x++) {
@@ -328,7 +332,7 @@ class Tetromino {
         let success = this.canMove(translation, rotation)
         if (success) {
             scheduler.clearTimeout(lockDown)
-            matrix.drawPiece(this, hardDropped? "trail-animation" : "")
+            matrix.clearPiece(this, hardDropped? "trail-animation" : "")
             this.center = success.center
             if (rotation) this.facing = success.facing
             this.lastRotation = rotation

js/interface.js

@@ -21,6 +21,7 @@ const KEY_NAMES = new Proxy({
     }
 })
 
+
 class Settings {
     constructor() {
         this.form = settingsForm
@@ -268,13 +269,13 @@ class Stats {
                     messagesSpan.addNewChild("div", {
                         className: "zoom-in-animation",
                         style: "animation-delay: .4s",
-                        innerHTML: `BOUT EN BOUT<br/>${b2bScore}`
+                        innerHTML: `BOUT À BOUT<br/>${b2bScore}`
                     })
                 } else {
                     messagesSpan.addNewChild("div", {
                         className: "zoom-in-animation",
                         style: "animation-delay: .4s",
-                        innerHTML: `BOUT EN BOUT x${this.b2b}<br/>${b2bScore}`
+                        innerHTML: `BOUT À BOUT x${this.b2b}<br/>${b2bScore}`
                     })
                 }
                 this.score += b2bScore
@@ -284,7 +285,7 @@ class Stats {
                 messagesSpan.addNewChild("div", {
                     className: "zoom-in-animation",
                     style: "animation-delay: .4s",
-                    innerHTML: `FIN DU BOUT EN BOUT`
+                    innerHTML: `FIN DU BOUT À BOUT`
                 })
             }
             this.b2b = -1