From 1f01b0f086567ff421fc7b61ac2b2efb73b55379 Mon Sep 17 00:00:00 2001
From: Sami <i.l.y.e.s@live.fr>
Date: Thu, 31 Jul 2025 22:53:09 -0400
Subject: [PATCH] this is a mistake

---
 CSS/styles.css     | 578 ++++++++++++++++++++++++++-------------------
 CSS/styles.css.bak | 315 ++++++++++++++++++++++++
 2 files changed, 647 insertions(+), 246 deletions(-)
 create mode 100644 CSS/styles.css.bak

diff --git a/CSS/styles.css b/CSS/styles.css
index 37b5a4e..3630329 100644
--- a/CSS/styles.css
+++ b/CSS/styles.css
@@ -1,29 +1,136 @@
-
-*, *::after, *::before{
+*, *::after, *::before {
     box-sizing: border-box;
-
 }
 
-body{
-    background-color: hsl(0, 67%, 96%);
+body {
+    background-color: #fafafa;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     display: flex;
-    text-align: center;
     flex-direction: column;
     min-height: 100vh;
     margin: 0;
-    padding: 1em;
-    font-size: clamp(.5rem, 2.5vmin, 1.5rem);
+    padding: 16px;
+    text-align: center;
+    font-size: 16px;
 }
 
+/* Header Section */
+.darkmode {
+    margin-bottom: 16px;
+}
+
+.icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.icons__container {
+    display: flex;
+    align-items: center;
+}
+
+.theme-change,
+.share-stats,
+.setting-page {
+    display: flex;
+    color: #666;
+    font-size: 20px;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.theme-change:hover,
+.share-stats:hover,
+.setting-page:hover {
+    color: #333;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.img-banner {
+    width: auto;
+    max-width: 300px;
+    height: auto;
+}
+
+/* Game Grid - Simplified */
+.guess-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 60px);
+    grid-template-rows: repeat(6, 60px);
+    gap: 5px;
+    justify-content: center;
+    margin: 32px auto;
+    flex: 1;
+    align-content: start;
+}
+
+.tile {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #d3d6da;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #333;
+    user-select: none;
+    transition: all 0.2s ease;
+}
+
+.tile[data-state="active"] {
+    border-color: #878a8c;
+}
+
+.tile[data-state="wrong"] {
+    background-color: #787c7e;
+    border-color: #787c7e;
+    color: white;
+}
+
+.tile[data-state="wrong-position"] {
+    background-color: #c9b458;
+    border-color: #c9b458;
+    color: white;
+}
+
+.tile[data-state="correct"] {
+    background-color: #6aaa64;
+    border-color: #6aaa64;
+    color: white;
+}
+
+.tile.shake {
+    animation: shake 0.6s ease-in-out;
+}
+
+.tile.dance {
+    animation: dance 1s ease-in-out;
+}
+
+.tile.flip {
+    transform: rotateX(90deg);
+}
+
+/* Keyboard - NY Times Style */
 .keyboard {
     display: grid;
     grid-template-columns: repeat(20, minmax(auto, 1.25em));
     grid-auto-rows: 3em;
-    gap: .25em;
+    gap: 0.25em;
     justify-content: center;
+    margin-top: auto;
+    padding: 0 0.5em;
+    margin-bottom: 1em;
 }
 
-.key{
+.key {
     font-size: inherit;
     grid-column: span 2;
     border: none;
@@ -31,285 +138,264 @@ body{
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: hsl(
-    var(--hue, 200),
-    var(--saturation, 1%),
-    calc(var(--lightness-offset, 0%) + var(--lightness, 51%))
-  );
-    color: rgb(255, 255, 255);
-    fill: white;
+    background-color: #d3d6da;
+    color: #333;
+    fill: currentColor;
     text-transform: uppercase;
-    border-radius: .25em;
+    border-radius: 0.25em;
     cursor: pointer;
     user-select: none;
+    transition: background-color 0.1s ease;
+    touch-action: manipulation;
+    font-weight: bold;
 }
-.key.large{
+
+.key.large {
     grid-column: span 3;
 }
-.key > svg {
-    width: 1.70em;
-    height: 1.70em;
-}
-.key:hover, .key:focus{
-    --lightness-offset: 10%;
+
+.key:hover,
+.key:focus {
+    background-color: #c0c4c7;
 }
 
 .key.wrong {
-    --lightness: 23%;
-}
-.key.wrong-position{
-    --hue: 49;
-    --saturation: 51%;
-    --lightness: 47%;
+    background-color: #787c7e;
+    color: white;
 }
 
-.key.correct{
-    --hue: 115;
-    --saturation: 29%;
-    --lightness: 43%;
+.key.wrong-position {
+    background-color: #c9b458;
+    color: white;
 }
 
-.guess-grid{
-    display: grid;
-    justify-content: center;
-    align-content: center;
-    flex: 1;
-    grid-template-columns: repeat(5, 4em);
-    grid-template-rows: repeat(6, 4em);
-    gap: .25em;
-    margin-bottom: 1em;
+.key.correct {
+    background-color: #6aaa64;
+    color: white;
 }
 
-.tile{
-    font-size: 2em;
-    color: rgb(158, 155, 155);
-    border: .05em solid hsl(240, 3%, 14%);
-    text-transform: uppercase;
-    font-weight: bold;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-    transition: transform 250ms linear;
-    transition: transform 250ms linear;
-}
-
-.tile[data-state="active"] {
-  border-color: hsl(240, 1%, 18%);
-
-}
-
-.tile[data-state="wrong"] {
-  border: none;
-  background-color: hsl(240, 12%, 24%);
-  color: white;
-}
-
-.tile[data-state="wrong-position"] {
-  border: none;
-  background-color: hsl(49, 51%, 47%);
-  color: white;
-}
-
-.tile[data-state="correct"] {
-  border: none;
-  background-color: hsl(115, 31%, 48%);
-  color: white;
-}
-.tile.shake{
-    animation:shake 250ms ease-in-out;
-}
-
-.tile.dance {
-  animation: dance 500ms ease-in-out;
-}
-
-.tile.flip {
-    transform: rotateX(90deg);
+.key > svg {
+    width: 1.5em;
+    height: 1.5em;
+    fill: currentColor;
 }
 
+/* Animations */
 @keyframes shake {
-    10% {
-        transform: translateX(-5%);
-    }
-    30% {
-        transform: translateX(5%);
-    }
-    50% {
-        transform: translateX(-7.5%);
-    }
-    70% {
-        transform: translateX(7.5%);
-    }
-    90% {
-        transform: translateX(-5%);
-    }
-    100% {
-        transform: translateX(0);
-    }
-}
-@keyframes dance {
-  20% {
-    transform: translateY(-50%);
-  }
-  40% {
-    transform: translateY(5%);
-  }
-  60% {
-    transform: translateY(-25%);
-  }
-  80% {
-    transform: translateY(2.5%);
-  }
-  90% {
-    transform: translateY(-5%);
-  }
-  100% {
-    transform: translateY(0);
-  }
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+    20%, 40%, 60%, 80% { transform: translateX(10px); }
 }
 
-.alert-container{
+@keyframes dance {
+    0%, 100% { transform: translateY(0); }
+    20% { transform: translateY(-30px); }
+    40% { transform: translateY(5px); }
+    60% { transform: translateY(-15px); }
+    80% { transform: translateY(2px); }
+}
+
+/* Alerts */
+.alert-container {
     position: fixed;
-    top: 17vh;
-    left: 50vw;
+    top: 20%;
+    left: 50%;
     transform: translateX(-50%);
-    z-index: 1;
+    z-index: 1000;
     display: flex;
     flex-direction: column;
     align-items: center;
-}
-.alert{
-    pointer-events: none;
-    background-color: hsl(204, 7%, 85%);
-    padding: .55em;
-    border-radius: .25em;
-    opacity: 1;
-    transition: opacity 500ms ease-in-out;
-    margin-bottom: .5em;
+    width: 90%;
+    max-width: 500px;
 }
 
-.alert:last-child{
-    margin-bottom: 0;
+.alert {
+    background-color: #333;
+    color: white;
+    padding: 16px 24px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    opacity: 1;
+    transition: opacity 0.5s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    width: 100%;
+    text-align: center;
 }
-.alert.hide{
+
+.alert.hide {
     opacity: 0;
 }
 
-.img-banner{
-  width: auto ;
-  max-width: 50% ;
-  height: auto ;
-}
-
-
-.theme-change{
-  position: absolute;
-  top: 2.5rem;
-  display: flex;
-  color: rgb(202, 181, 181);
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-
-.theme-change:hover{
-  color: rgb(150, 141, 141)
-}
-
-body.dark-theme{
-  background-color: hsl(0, 0%, 8%);
-  font:white;
-  display: flex;
-  text-align: center;
-  flex-direction: column;
-  min-height: 100vh;
-  margin: 0;
-  padding: 1em;
-  font-size: clamp(.5rem, 2.5vmin, 1.5rem);
-}
-
-.share-stats{
-  position: absolute;
-  top: 4.5rem;
-  display: flex;
-  color: rgb(202, 181, 181);
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-.share-stats:hover{
-  color: rgb(150, 141, 141)
-}
-.setting-page{
-  position: absolute;
-  top: 6.5rem;
-  display: flex;
-  color: rgb(202, 181, 181);
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-
-.setting-page:hover{
-  color: rgb(150, 141, 141)
-}
-* Definition Alert Styles */
 .definition-alert {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 20px;
-  border-radius: 12px;
-  max-width: 400px;
-  margin: 0 auto 10px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: left;
-  line-height: 1.6;
-  font-size: 14px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 12px;
+    cursor: pointer;
+    text-align: left;
+    line-height: 1.6;
+    position: relative;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease;
 }
 
 .definition-alert:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
-}
-
-.win-definition {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  border-color: rgba(79, 172, 254, 0.5);
-}
-
-.lose-definition {
-  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  border-color: rgba(250, 112, 154, 0.5);
+    transform: translateY(-2px);
 }
 
 .definition-alert strong {
-  font-weight: 700;
-  font-size: 16px;
-  display: block;
-  margin-bottom: 8px;
+    display: block;
+    font-size: 18px;
+    margin-bottom: 8px;
 }
 
 .definition-alert::before {
-  content: "💡 Click to dismiss";
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  font-size: 10px;
-  opacity: 0.7;
+    content: "💡 Tap to dismiss";
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    font-size: 12px;
+    opacity: 0.7;
 }
 
-/* Dark theme adjustments */
-.dark-theme .definition-alert {
-  border-color: rgba(255, 255, 255, 0.1);
+.win-definition {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 }
 
-/* Mobile responsiveness */
-@media (max-width: 480px) {
-  .definition-alert {
-    max-width: 90%;
-    font-size: 13px;
-    padding: 15px;
-  }
+.lose-definition {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+}
+
+/* Dark Theme */
+body.dark-theme {
+    background-color: #121213;
+    color: white;
+}
+
+.dark-theme .tile {
+    border-color: #3a3a3c;
+    color: white;
+}
+
+.dark-theme .tile[data-state="active"] {
+    border-color: #565758;
+}
+
+.dark-theme .key {
+    background-color: #818384;
+    color: white;
+}
+
+.dark-theme .key:hover,
+.dark-theme .key:focus {
+    background-color: #6a6b6c;
+}
+
+.dark-theme .theme-change,
+.dark-theme .share-stats,
+.dark-theme .setting-page {
+    color: #ccc;
+}
+
+.dark-theme .theme-change:hover,
+.dark-theme .share-stats:hover,
+.dark-theme .setting-page:hover {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Mobile Responsive - Single Breakpoint Approach */
+@media (max-width: 600px) {
+    body {
+        padding: 12px;
+        font-size: 14px;
+    }
+    
+    .img-banner {
+        max-width: 250px;
+    }
+    
+    .icons {
+        gap: 12px;
+        margin-bottom: 16px;
+    }
+    
+    .theme-change,
+    .share-stats,
+    .setting-page {
+        font-size: 18px;
+        padding: 6px;
+    }
+    
+    .guess-grid {
+        grid-template-columns: repeat(5, 50px);
+        grid-template-rows: repeat(6, 50px);
+        gap: 4px;
+        margin: 24px auto;
+    }
+    
+    .tile {
+        width: 50px;
+        height: 50px;
+        font-size: 26px;
+    }
+    
+    .keyboard {
+        grid-template-columns: repeat(20, minmax(auto, 1em));
+        grid-auto-rows: 2.5em;
+        gap: 0.2em;
+        padding: 0 0.25em;
+        margin-bottom: 0.5em;
+    }
+    
+    .key {
+        font-size: 0.7em;
+    }
+    
+    .key > svg {
+        width: 1.2em;
+        height: 1.2em;
+    }
+    
+    .alert {
+        padding: 12px 16px;
+    }
+    
+    .definition-alert {
+        padding: 16px;
+        font-size: 14px;
+    }
+    
+    .definition-alert strong {
+        font-size: 16px;
+    }
+}
+
+/* Very small screens */
+@media (max-width: 400px) {
+    .guess-grid {
+        grid-template-columns: repeat(5, 45px);
+        grid-template-rows: repeat(6, 45px);
+    }
+    
+    .tile {
+        width: 45px;
+        height: 45px;
+        font-size: 22px;
+    }
+    
+    .keyboard {
+        grid-template-columns: repeat(20, minmax(auto, 0.8em));
+        grid-auto-rows: 2.2em;
+        gap: 0.15em;
+    }
+    
+    .key {
+        font-size: 0.6em;
+    }
+    
+    .key > svg {
+        width: 1em;
+        height: 1em;
+    }
 }
\ No newline at end of file
diff --git a/CSS/styles.css.bak b/CSS/styles.css.bak
new file mode 100644
index 0000000..a399b31
--- /dev/null
+++ b/CSS/styles.css.bak
@@ -0,0 +1,315 @@
+
+*, *::after, *::before{
+    box-sizing: border-box;
+
+}
+
+body{
+    background-color: hsl(0, 67%, 96%);
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+    padding: 1em;
+    font-size: clamp(.5rem, 2.5vmin, 1.5rem);
+}
+
+.keyboard {
+    display: grid;
+    grid-template-columns: repeat(20, minmax(auto, 1.50em));
+    grid-auto-rows: 4em;
+    gap: .25em;
+    justify-content: center;
+}
+
+.key{
+    font-size: inherit;
+    grid-column: span 2;
+    border: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsl(
+    var(--hue, 200),
+    var(--saturation, 1%),
+    calc(var(--lightness-offset, 0%) + var(--lightness, 51%))
+  );
+    color: rgb(255, 255, 255);
+    fill: white;
+    text-transform: uppercase;
+    border-radius: .25em;
+    cursor: pointer;
+    user-select: none;
+}
+.key.large{
+    grid-column: span 3;
+}
+.key > svg {
+    width: 1.70em;
+    height: 1.70em;
+}
+.key:hover, .key:focus{
+    --lightness-offset: 10%;
+}
+
+.key.wrong {
+    --lightness: 23%;
+}
+.key.wrong-position{
+    --hue: 49;
+    --saturation: 51%;
+    --lightness: 47%;
+}
+
+.key.correct{
+    --hue: 115;
+    --saturation: 29%;
+    --lightness: 43%;
+}
+
+.guess-grid{
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    flex: 1;
+    grid-template-columns: repeat(5, 4em);
+    grid-template-rows: repeat(6, 4em);
+    gap: .25em;
+    margin-bottom: 1em;
+}
+
+.tile{
+    font-size: 2em;
+    color: rgb(158, 155, 155);
+    border: .05em solid hsl(240, 3%, 14%);
+    text-transform: uppercase;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    transition: transform 250ms linear;
+    transition: transform 250ms linear;
+}
+
+.tile[data-state="active"] {
+  border-color: hsl(240, 1%, 18%);
+
+}
+
+.tile[data-state="wrong"] {
+  border: none;
+  background-color: hsl(240, 12%, 24%);
+  color: white;
+}
+
+.tile[data-state="wrong-position"] {
+  border: none;
+  background-color: hsl(49, 51%, 47%);
+  color: white;
+}
+
+.tile[data-state="correct"] {
+  border: none;
+  background-color: hsl(115, 31%, 48%);
+  color: white;
+}
+.tile.shake{
+    animation:shake 250ms ease-in-out;
+}
+
+.tile.dance {
+  animation: dance 500ms ease-in-out;
+}
+
+.tile.flip {
+    transform: rotateX(90deg);
+}
+
+@keyframes shake {
+    10% {
+        transform: translateX(-5%);
+    }
+    30% {
+        transform: translateX(5%);
+    }
+    50% {
+        transform: translateX(-7.5%);
+    }
+    70% {
+        transform: translateX(7.5%);
+    }
+    90% {
+        transform: translateX(-5%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+@keyframes dance {
+  20% {
+    transform: translateY(-50%);
+  }
+  40% {
+    transform: translateY(5%);
+  }
+  60% {
+    transform: translateY(-25%);
+  }
+  80% {
+    transform: translateY(2.5%);
+  }
+  90% {
+    transform: translateY(-5%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.alert-container{
+    position: fixed;
+    top: 17vh;
+    left: 50vw;
+    transform: translateX(-50%);
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.alert{
+    pointer-events: none;
+    background-color: hsl(204, 7%, 85%);
+    padding: .55em;
+    border-radius: .25em;
+    opacity: 1;
+    transition: opacity 500ms ease-in-out;
+    margin-bottom: .5em;
+}
+
+.alert:last-child{
+    margin-bottom: 0;
+}
+.alert.hide{
+    opacity: 0;
+}
+
+.img-banner{
+  width: auto ;
+  max-width: 50% ;
+  height: auto ;
+}
+
+
+.theme-change{
+  position: absolute;
+  top: 2.5rem;
+  display: flex;
+  color: rgb(202, 181, 181);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.theme-change:hover{
+  color: rgb(150, 141, 141)
+}
+
+body.dark-theme{
+  background-color: hsl(0, 0%, 8%);
+  font:white;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
+  padding: 1em;
+  font-size: clamp(.5rem, 2.5vmin, 1.5rem);
+}
+
+.share-stats{
+  position: absolute;
+  top: 4.5rem;
+  display: flex;
+  color: rgb(202, 181, 181);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.share-stats:hover{
+  color: rgb(150, 141, 141)
+}
+.setting-page{
+  position: absolute;
+  top: 6.5rem;
+  display: flex;
+  color: rgb(202, 181, 181);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.setting-page:hover{
+  color: rgb(150, 141, 141)
+}
+* Definition Alert Styles */
+.definition-alert {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 12px;
+  max-width: 400px;
+  margin: 0 auto 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.definition-alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.win-definition {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  border-color: rgba(79, 172, 254, 0.5);
+}
+
+.lose-definition {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  border-color: rgba(250, 112, 154, 0.5);
+}
+
+.definition-alert strong {
+  font-weight: 700;
+  font-size: 16px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.definition-alert::before {
+  content: "💡 Click to dismiss";
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* Dark theme adjustments */
+.dark-theme .definition-alert {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .definition-alert {
+    max-width: 90%;
+    font-size: 13px;
+    padding: 15px;
+  }
+}
\ No newline at end of file