Update style.css

style.css

@@ -88,45 +88,59 @@ body {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.7);
+    right: 0;
+    bottom: 0;
     display: none;
     justify-content: center;
     align-items: center;
-    color: white;
-    font-size: 2em;
-    text-align: center;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
 }
 
 .overlay-content {
-    background: rgba(0, 0, 0, 0.9);
+    text-align: center;
+    color: white;
     padding: 20px;
-    border-radius: 15px;
-    box-shadow: 0 0 20px #ff0066;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 10px;
+    width: 80%;
+    max-width: 400px;
 }
 
-.overlay h2 {
-    font-size: 2em;
+h2 {
+    font-size: 2rem;
 }
 
-.overlay p {
-    font-size: 1.5em;
-    margin: 20px 0;
+p {
+    font-size: 1.5rem;
 }
 
-.overlay button {
-    background: linear-gradient(90deg, #00ffcc, #0066ff);
+button {
+    padding: 10px 20px;
+    margin-top: 20px;
+    background-color: #ff6600;
     color: white;
     border: none;
-    border-radius: 10px;
-    padding: 10px 20px;
-    font-size: 1.5em;
+    border-radius: 5px;
     cursor: pointer;
-    outline: none;
-    box-shadow: 0 0 10px #00ffcc;
+    font-size: 1rem;
 }
 
-.overlay button:hover {
-    transform: scale(1.1);
-    box-shadow: 0
+button:hover {
+    background-color: #ff4400;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .score-board {
+        font-size: 1.2em;
+        padding: 8px 15px;
+    }
+
+    .controls button {
+        font-size: 1.2em;
+        padding: 8px 15px;
+    }
+
+    h2 {
+        font-size: 1