From c01c6dcf5887e86e6b8ae01b59d411c96365cbd8 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Sun, 1 Feb 2026 16:30:01 +0100
Subject: [PATCH] new theme

---
 css/common.css |  1 +
 css/pop.css    | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |  2 ++
 3 files changed, 67 insertions(+)
 create mode 100644 css/pop.css

diff --git a/css/common.css b/css/common.css
index d43286d..4caa8b7 100644
--- a/css/common.css
+++ b/css/common.css
@@ -89,6 +89,7 @@ td {
     overflow: hidden;
     width: var(--cell-side);
     height: var(--cell-side);
+    box-sizing: border-box;
 }
 
 @keyframes trail-animation {
diff --git a/css/pop.css b/css/pop.css
new file mode 100644
index 0000000..570c124
--- /dev/null
+++ b/css/pop.css
@@ -0,0 +1,64 @@
+.mino {
+  background-color: var(--color);
+  background-image: radial-gradient(
+    ellipse 140% 150% at 50% 140%,
+    var(--light),
+    var(--color) 70%,
+    var(--light) 250%
+  );
+  border: 3px outset var(--color);
+  border-top-color: var(--light);
+  border-radius: 3px;
+}
+.mino {
+  background-color: var(--color);
+  background-image: radial-gradient(
+    ellipse 130% 150% at 50% 150%,
+    var(--light),
+    var(--color) 75%,
+    var(--light) 250%
+  );
+  border: 3px outset var(--color);
+  border-top-color: var(--light);
+  border-radius: 3px;
+}
+
+.I {
+  --color: #009fcf;
+  --light: #cfeaf1;
+}
+
+.J {
+  --color: #0048a8;
+  --light: #cfdcf0;
+}
+
+.L {
+  --color: #f96700;
+  --light: #f8d3b8;
+}
+
+.O {
+  --color: #fdba00;
+  --light: #f6e0b8;
+}
+
+.S {
+  --color: #59b616;
+  --light: #dceecf;
+}
+
+.T {
+  --color: #852687;
+  --light: #e3c7e3;
+}
+
+.Z {
+  --color: #a90f16;
+  --light: #ebc6c8;
+}
+
+.ghost {
+  opacity: 35%;
+  filter: saturate(30%) brightness(150%);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 2cd9dbd..320ffc4 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
     <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/pop.css"   title="Pop">
     <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/synthwave.css" title="Synthwave">
@@ -70,6 +71,7 @@
                 <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
                 <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/pop.css">Pop</option>
                   <option value="css/minimal.css">Minimal</option>
                   <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>