Update styles.css

styles.css

@@ -1,7 +1,7 @@
 /* General styles */
 body {
-  font-family: 'Arial', sans-serif;
-  background: #121212;
+  font-family: Arial, sans-serif;
+  background: #1a1a1a;
   color: #ffffff;
   margin: 0;
   padding: 0;
@@ -14,20 +14,23 @@ body {
 
 /* Container styling */
 .container {
-  width: 100%;
-  height: 100%;
+  width: 95%;
+  max-width: 600px;
   display: flex;
   flex-direction: column;
-  background: #1f1f1f;
-  overflow: hidden;
-  position: relative;
+  align-items: center;
+  background: #2c2c2c;
+  border: 2px solid #444;
+  border-radius: 15px;
+  padding: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
   animation: fadeIn 0.6s ease-in-out;
 }
 
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
@@ -41,32 +44,34 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
-  background: #1a1a1a;
-  position: fixed;
-  top: 0;
-  z-index: 10;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.7);
+  margin-bottom: 15px;
 }
 
 header h1 {
-  font-size: 20px;
+  font-size: 24px;
   color: #e63946;
-  margin: 0;
+  text-align: center;
+  animation: bounce 1.5s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 header .balance-display {
-  background: rgba(255, 255, 255, 0.1);
-  padding: 5px 12px;
-  border-radius: 8px;
   font-size: 14px;
 }
 
-/* Back button */
+/* Button styling */
 #back-btn {
   background: #e63946;
   color: #ffffff;
-  padding: 8px 12px;
+  padding: 8px 15px;
   border: none;
   border-radius: 5px;
   font-size: 14px;
@@ -81,19 +86,20 @@ header .balance-display {
 
 /* Game screen styling */
 .game-screen {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: relative;
-  background: linear-gradient(180deg, #202124, #1f1f1f);
+  width: 100%;
+  aspect-ratio: 16 / 9;
   border: 2px solid #e63946;
-  margin: 70px 20px 0; /* Leave space for header and margins */
-  border-radius: 12px;
+  border-radius: 10px;
   overflow: hidden;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  background: #3a3a3a;
 }
 
-/* Sky image */
+/* Sky image styling */
 .sky-image {
   position: absolute;
   top: 0;
@@ -102,18 +108,16 @@ header .balance-display {
   height: 100%;
   object-fit: cover;
   z-index: 0;
-  filter: brightness(0.8);
 }
 
-/* Plane styling */
+/* Adjusted plane position */
 .plane {
   position: absolute;
-  bottom: 15%;
-  left: 10%;
-  width: 70px;
+  bottom: 20px;
+  left: 10px;
+  width: 50px;
   height: auto;
-  transition: transform 0.3s ease, left 0.4s ease;
-  z-index: 2;
+  transition: transform 0.2s ease-in-out, left 0.4s ease-in-out;
 }
 
 .plane:hover {
@@ -123,15 +127,14 @@ header .balance-display {
 /* Multiplier styling */
 .multiplier {
   position: absolute;
-  top: 10%;
-  left: 5%;
+  top: 5px;
+  left: 5px;
   background: rgba(0, 0, 0, 0.7);
   color: #ffffff;
-  padding: 10px 20px;
-  border-radius: 10px;
-  font-size: 18px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
   animation: pulse 1.5s infinite;
-  z-index: 2;
 }
 
 @keyframes pulse {
@@ -143,26 +146,20 @@ header .balance-display {
   }
 }
 
-/* Controls */
+/* Controls styling */
 .controls {
   width: 100%;
-  padding: 15px 20px;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  background: #1a1a1a;
-  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.7);
-  position: fixed;
-  bottom: 0;
-  z-index: 10;
+  gap: 12px;
 }
 
 .controls input {
-  flex: 2;
-  margin: 0 10px;
+  width: 90%;
   padding: 10px;
   border: 2px solid #e63946;
-  border-radius: 5px;
+  border-radius: 8px;
   background: #202124;
   color: #ffffff;
   font-size: 14px;
@@ -174,22 +171,29 @@ header .balance-display {
   box-shadow: 0 0 8px #e63946;
 }
 
+.buttons-group {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  justify-content: center;
+}
+
 .controls button {
   flex: 1;
-  padding: 10px;
+  padding: 8px;
   border: none;
-  border-radius: 5px;
+  border-radius: 8px;
   font-size: 14px;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.2s ease;
 }
 
-#stake-btn {
+.controls #stake-btn {
   background: #e63946;
   color: #ffffff;
 }
 
-#cashout-btn {
+.controls #cashout-btn {
   background: #444;
   color: #ffffff;
 }
@@ -204,25 +208,15 @@ header .balance-display {
   transform: scale(1.05);
 }
 
-/* Footer info */
-footer {
-  position: absolute;
-  bottom: 10px;
-  width: 100%;
-  text-align: center;
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 12px;
-}
-
 /* Responsive design */
-@media (max-width: 768px) {
+@media (max-width: 480px) {
   header h1 {
-    font-size: 16px;
+    font-size: 20px;
   }
 
-  .multiplier {
-    font-size: 14px;
-    padding: 8px 10px;
+  .container {
+    padding: 12px;
+    border-radius: 10px;
   }
 
   .controls input {
@@ -232,6 +226,11 @@ footer {
 
   .controls button {
     font-size: 12px;
-    padding: 8px;
+    padding: 6px;
+  }
+
+  .multiplier {
+    font-size: 12px;
+    padding: 6px 10px;
   }
 }