Update styles.css

alaughingpillow · Dec 14, 2024 · ccc66d2 · ccc66d2
1 parent ac49cae
commit ccc66d2
Showing 1 changed file with 63 additions and 38 deletions.
diff --git a/styles.css b/styles.css
@@ -3,38 +3,36 @@
     margin: 0;
     padding: 0;
     touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    touch-action: none;
 }
 
 body {
     font-family: 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(135deg, #000000 0%, #1a237e 100%);
+    color: #ffffff;
 }
 
 #game-container {
     position: relative;
-    width: 100%;
-    max-width: 800px;
+    width: 100vw;
     height: 100vh;
+    max-width: 800px;
     max-height: 600px;
     background: linear-gradient(to bottom, #000000, #0d47a1);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-    margin: 0 auto;
-}
-
-@media (max-width: 800px) {
-    #game-container {
-        max-height: none;
-        height: 100vh;
-        border-radius: 0;
-    }
 }
 
 #main-menu, #game-area {
@@ -81,6 +79,7 @@ button {
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin: 10px;
+    -webkit-tap-highlight-color: transparent;
 }
 
 button:hover {
@@ -101,7 +100,6 @@ button:active {
     bottom: 20px;
     transform: translateX(-50%);
     box-shadow: 0 0 20px #4fc3f7;
-    transition: all 0.3s ease;
 }
 
 #player1 {
@@ -128,7 +126,6 @@ button:active {
     background: radial-gradient(circle at 30% 30%, #ff5252, #ff1744);
     border-radius: 50%;
     box-shadow: 0 0 10px #ff5252;
-    transition: all 0.3s ease;
 }
 
 #score, #coins {
@@ -140,6 +137,7 @@ button:active {
     background-color: rgba(0, 0, 0, 0.5);
     padding: 5px 10px;
     border-radius: 15px;
+    z-index: 5;
 }
 
 #score {
@@ -209,15 +207,46 @@ button:active {
     right: 10px;
 }
 
-@media (max-width: 768px) {
+.projectile {
+    position: absolute;
+    width: 5px;
+    height: 15px;
+    background-color: #ffeb3b;
+    border-radius: 50%;
+}
+
+@media (max-width: 800px), (max-height: 600px) {
     #game-container {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
         border-radius: 0;
-        max-height: none;
-        height: 100vh;
+        aspect-ratio: 4/3;
+        margin: auto;
     }
 
-    h1 {
-        font-size: 28px;
+    body {
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        padding: 0;
+    }
+
+    .player {
+        width: 40px;
+        height: 40px;
+        bottom: 40px;
+    }
+
+    .enemy {
+        width: 25px;
+        height: 25px;
+    }
+
+    .powerup {
+        width: 20px;
+        height: 20px;
     }
 
     button {
@@ -228,16 +257,11 @@ button:active {
     #gamble-button {
         font-size: 14px;
         padding: 6px 12px;
+        top: 60px;
     }
 
-    .player {
-        width: 40px;
-        height: 40px;
-    }
-
-    .enemy {
-        width: 25px;
-        height: 25px;
+    h1 {
+        font-size: 28px;
     }
 
     #score, #coins {
@@ -250,17 +274,18 @@ button:active {
 
     .menu {
         width: 90%;
-        max-width: none;
     }
-}
 
-.projectile {
-    position: absolute;
-    width: 5px;
-    height: 15px;
-    background-color: #ffeb3b;
-    border-radius: 50%;
+    #restart-button, #pause-button, #main-menu-button {
+        bottom: 10px;
+    }
 }
 
-
+@media (orientation: portrait) {
+    #game-container {
+        width: 100vw;
+        height: 100vh;
+        transform: none; /* Remove scaling */
+    }
+}