From aed06019331966b38a4657b6b96fa1c5e295b5f8 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Thu, 5 Mar 2026 21:14:34 +0100
Subject: [PATCH] a bit of 3D

---
 css/{common.css => _common.css} |  0
 css/heavy-metal.css             | 65 +++++++++++++++++++++++++++++++++
 css/neo-classic.css             |  8 ++--
 index.html                      | 16 ++++----
 4 files changed, 78 insertions(+), 11 deletions(-)
 rename css/{common.css => _common.css} (100%)
 create mode 100644 css/heavy-metal.css

diff --git a/css/common.css b/css/_common.css
similarity index 100%
rename from css/common.css
rename to css/_common.css
diff --git a/css/heavy-metal.css b/css/heavy-metal.css
new file mode 100644
index 0000000..74c8bca
--- /dev/null
+++ b/css/heavy-metal.css
@@ -0,0 +1,65 @@
+#sceneDiv {
+  perspective: 500px;
+}
+#screenRow {
+  transform: rotateX(20deg);
+}
+
+#screenRow .card {
+  box-shadow:
+    0 10px 3px #25292d,
+    0 15px 0 var(--bs-card-border-color) !important;;
+}
+
+tr.matrix td:not(.mino) {
+  border-left: none;
+  border-bottom: none;
+}
+
+.mino {
+  background-color: hsl(var(--hue), 55%, 55%);
+  background-image: linear-gradient(30deg, #fff4, transparent);
+  border: 1px outset hsl(var(--hue), 55%, 45%);
+  border-radius: 2px;
+  box-shadow:
+    0 10px 3px hsl(var(--hue), 70%, 10%),
+    0 15px 0 hsla(var(--hue), 90%, 40%, 70%);
+  opacity: 80%;
+  backdrop-filter: blur(6px);
+}
+
+tr:last-of-type .mino {
+  boxd-shadow: none;
+}
+
+.I {
+  --hue: 197;
+}
+
+.J {
+  --hue: 217;
+}
+
+.L {
+  --hue: 36;
+}
+
+.O {
+  --hue: 60;
+}
+
+.S {
+  --hue: 113;
+}
+
+.T {
+  --hue: 268;
+}
+
+.Z {
+  --hue: 0;
+}
+
+.ghost {
+  opacity: 30%;
+}
\ No newline at end of file
diff --git a/css/neo-classic.css b/css/neo-classic.css
index 984b867..81dba93 100644
--- a/css/neo-classic.css
+++ b/css/neo-classic.css
@@ -10,10 +10,10 @@ tr.matrix td:not(.mino) {
 
 .mino {
   --color: hsl(var(--hue), var(--saturation), 60%);
-  --dark: hsl(var(--hue), var(--saturation), 25%);
-  --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 84%);
+  --dark: hsl(var(--hue), var(--saturation), 28%);
+  --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 90%);
   --border: hsl(var(--hue), var(--saturation), 40%);
-  --top: hsl(var(--hue), calc(0.6 * var(--saturation)), 68%);
+  --top: hsl(var(--hue), calc(0.6 * var(--saturation)), 75%);
   position: relative;
   background-color: var(--dark);
   background-image: radial-gradient(
@@ -43,7 +43,7 @@ tr.matrix td:not(.mino) {
   background: var(--color);
   left: 3px;
   top: 3px;
-  border: 3px solid var(--border);
+  border: 2px solid var(--border);
   border-top-color: white;
 }
 
diff --git a/index.html b/index.html
index ae9c456..989d688 100644
--- a/index.html
+++ b/index.html
@@ -8,15 +8,16 @@
     <meta name="color-scheme" content="dark">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
-    <link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/_common.css">
     <link rel="stylesheet" href="css/classic.css" title="Thème sélectionné" id="selectedStyleSheet">
     <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/neo-classic.css" title="Néo-classique">
     <link rel="alternate stylesheet" href="css/electro.css"   title="Électro">
     <link rel="alternate stylesheet" href="css/synthwave.css" title="Synthwave">
-    <link rel="alternate stylesheet" href="css/old-school.css"     title="Rétro">
-    <link rel="alternate stylesheet" href="css/opera.css"     title="Opéra">
-    <link rel="alternate stylesheet" href="css/stereo.css"    title="Stéréo">
+    <link rel="alternate stylesheet" href="css/heavy-metal.css" title="Heavy metal">
+    <link rel="alternate stylesheet" href="css/jazz.css"     title="Jazz">
+    <link rel="alternate stylesheet" href="css/old-school.css"     title="Old School">
+    <link rel="alternate stylesheet" href="css/stereo.css"    title="Stéréo (3D)">
     <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">
@@ -27,7 +28,7 @@
     <meta property="og:image" content="https://adrien.malingrey.fr/jeux/quatuor/thumbnail.png"/>
     <meta property="og:image:width" content="288"/>
     <meta property="og:image:height" content="288"/>
-    <meta property="og:description" content="Un jeu avec un quatuor de blocs qui tombent."/>
+    <meta property="og:description" content="Un jeu de quatuors de blocs qui tombent."/>
     <meta property="og:locale" content="fr_FR"/>
     <meta property="og:site_name" content="adrien.malingrey.fr"/>
   </head>
@@ -73,9 +74,10 @@
                   <option value="css/neo-classic.css" selected>Néo-classique</option>
                   <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>
+                  <option value="css/heavy-metal.css">Heavy metal</option>
                   <option value="css/jazz.css">Jazz</option>
                   <option value="css/old-school.css">Old School</option>
-                  <option value="css/stereo.css">Stéréo 3D</option>
+                  <option value="css/stereo.css">Stéréo (3D)</option>
                 </select></div>
                 <div class="col-4">
                   <div class="form-check form-switch text-start">