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

---
 CSS/styles.css     | 568 +++++++++++++++++++--------------------------
 CSS/styles.css.bak | 315 -------------------------
 2 files changed, 241 insertions(+), 642 deletions(-)
 delete mode 100644 CSS/styles.css.bak

diff --git a/CSS/styles.css b/CSS/styles.css
index 3630329..a399b31 100644
--- a/CSS/styles.css
+++ b/CSS/styles.css
@@ -1,136 +1,29 @@
-*, *::after, *::before {
+
+*, *::after, *::before{
     box-sizing: border-box;
+
 }
 
-body {
-    background-color: #fafafa;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+body{
+    background-color: hsl(0, 67%, 96%);
     display: flex;
+    text-align: center;
     flex-direction: column;
     min-height: 100vh;
     margin: 0;
-    padding: 16px;
-    text-align: center;
-    font-size: 16px;
+    padding: 1em;
+    font-size: clamp(.5rem, 2.5vmin, 1.5rem);
 }
 
-/* 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: 0.25em;
+    grid-template-columns: repeat(20, minmax(auto, 1.50em));
+    grid-auto-rows: 4em;
+    gap: .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;
@@ -138,264 +31,285 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #d3d6da;
-    color: #333;
-    fill: currentColor;
+    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: 0.25em;
+    border-radius: .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:hover,
-.key:focus {
-    background-color: #c0c4c7;
+.key > svg {
+    width: 1.70em;
+    height: 1.70em;
+}
+.key:hover, .key:focus{
+    --lightness-offset: 10%;
 }
 
 .key.wrong {
-    background-color: #787c7e;
-    color: white;
+    --lightness: 23%;
+}
+.key.wrong-position{
+    --hue: 49;
+    --saturation: 51%;
+    --lightness: 47%;
 }
 
-.key.wrong-position {
-    background-color: #c9b458;
-    color: white;
+.key.correct{
+    --hue: 115;
+    --saturation: 29%;
+    --lightness: 43%;
 }
 
-.key.correct {
-    background-color: #6aaa64;
-    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 > svg {
-    width: 1.5em;
-    height: 1.5em;
-    fill: currentColor;
+.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);
 }
 
-/* Animations */
 @keyframes shake {
-    0%, 100% { transform: translateX(0); }
-    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
-    20%, 40%, 60%, 80% { transform: translateX(10px); }
+    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 {
-    0%, 100% { transform: translateY(0); }
-    20% { transform: translateY(-30px); }
-    40% { transform: translateY(5px); }
-    60% { transform: translateY(-15px); }
-    80% { transform: translateY(2px); }
+  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);
+  }
 }
 
-/* Alerts */
-.alert-container {
+.alert-container{
     position: fixed;
-    top: 20%;
-    left: 50%;
+    top: 17vh;
+    left: 50vw;
     transform: translateX(-50%);
-    z-index: 1000;
+    z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 90%;
-    max-width: 500px;
 }
-
-.alert {
-    background-color: #333;
-    color: white;
-    padding: 16px 24px;
-    border-radius: 8px;
-    margin-bottom: 8px;
+.alert{
+    pointer-events: none;
+    background-color: hsl(204, 7%, 85%);
+    padding: .55em;
+    border-radius: .25em;
     opacity: 1;
-    transition: opacity 0.5s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    width: 100%;
-    text-align: center;
+    transition: opacity 500ms ease-in-out;
+    margin-bottom: .5em;
 }
 
-.alert.hide {
+.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;
-    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;
+  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);
-}
-
-.definition-alert strong {
-    display: block;
-    font-size: 18px;
-    margin-bottom: 8px;
-}
-
-.definition-alert::before {
-    content: "💡 Tap to dismiss";
-    position: absolute;
-    top: 8px;
-    right: 12px;
-    font-size: 12px;
-    opacity: 0.7;
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
 }
 
 .win-definition {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  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%);
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  border-color: rgba(250, 112, 154, 0.5);
 }
 
-/* Dark Theme */
-body.dark-theme {
-    background-color: #121213;
-    color: white;
+.definition-alert strong {
+  font-weight: 700;
+  font-size: 16px;
+  display: block;
+  margin-bottom: 8px;
 }
 
-.dark-theme .tile {
-    border-color: #3a3a3c;
-    color: white;
+.definition-alert::before {
+  content: "💡 Click to dismiss";
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  font-size: 10px;
+  opacity: 0.7;
 }
 
-.dark-theme .tile[data-state="active"] {
-    border-color: #565758;
+/* Dark theme adjustments */
+.dark-theme .definition-alert {
+  border-color: rgba(255, 255, 255, 0.1);
 }
 
-.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;
-    }
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .definition-alert {
+    max-width: 90%;
+    font-size: 13px;
+    padding: 15px;
+  }
 }
\ No newline at end of file
diff --git a/CSS/styles.css.bak b/CSS/styles.css.bak
deleted file mode 100644
index a399b31..0000000
--- a/CSS/styles.css.bak
+++ /dev/null
@@ -1,315 +0,0 @@
-
-*, *::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