Update styles.css

styles.css

@@ -14,17 +14,17 @@ body {
 
 /* Container styling */
 .container {
-  width: 95%;
-  max-width: 600px;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
   background: #2c2c2c;
-  border: 2px solid #444;
-  border-radius: 15px;
-  padding: 15px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
+  border: none;
+  padding: 0;
   animation: fadeIn 0.6s ease-in-out;
+  position: relative;
 }
 
 @keyframes fadeIn {
@@ -44,23 +44,17 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
+  padding: 10px 20px;
+  background: #1a1a1a;
+  position: absolute;
+  top: 0;
+  z-index: 10;
 }
 
 header h1 {
-  font-size: 24px;
+  font-size: 18px;
   color: #e63946;
-  text-align: center;
-  animation: bounce 1.5s infinite;
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-5px);
-  }
+  margin: 0;
 }
 
 header .balance-display {
@@ -71,7 +65,7 @@ header .balance-display {
 #back-btn {
   background: #e63946;
   color: #ffffff;
-  padding: 8px 15px;
+  padding: 8px 12px;
   border: none;
   border-radius: 5px;
   font-size: 14px;
@@ -86,16 +80,14 @@ header .balance-display {
 
 /* Game screen styling */
 .game-screen {
-  position: relative;
   width: 100%;
-  aspect-ratio: 16 / 9;
-  border: 2px solid #e63946;
-  border-radius: 10px;
-  overflow: hidden;
-  margin-bottom: 15px;
+  height: 100%;
   display: flex;
   align-items: flex-end;
-  justify-content: flex-start;
+  justify-content: center;
+  position: relative;
+  border-radius: 0;
+  overflow: hidden;
   background: #3a3a3a;
 }
 
@@ -110,14 +102,15 @@ header .balance-display {
   z-index: 0;
 }
 
-/* Adjusted plane position */
+/* Plane styling */
 .plane {
   position: absolute;
-  bottom: 20px;
-  left: 10px;
-  width: 50px;
+  bottom: 15%;
+  left: 5%;
+  width: 60px;
   height: auto;
   transition: transform 0.2s ease-in-out, left 0.4s ease-in-out;
+  z-index: 1;
 }
 
 .plane:hover {
@@ -127,14 +120,15 @@ header .balance-display {
 /* Multiplier styling */
 .multiplier {
   position: absolute;
-  top: 5px;
-  left: 5px;
+  top: 10%;
+  left: 10%;
   background: rgba(0, 0, 0, 0.7);
   color: #ffffff;
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 10px 15px;
+  border-radius: 10px;
+  font-size: 16px;
   animation: pulse 1.5s infinite;
+  z-index: 1;
 }
 
 @keyframes pulse {
@@ -150,16 +144,20 @@ header .balance-display {
 .controls {
   width: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
+  justify-content: space-around;
+  padding: 10px 20px;
+  background: #1a1a1a;
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
 }
 
 .controls input {
-  width: 90%;
+  flex: 1;
+  margin: 0 10px;
   padding: 10px;
   border: 2px solid #e63946;
-  border-radius: 8px;
+  border-radius: 5px;
   background: #202124;
   color: #ffffff;
   font-size: 14px;
@@ -171,29 +169,22 @@ 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: 8px;
+  padding: 10px;
   border: none;
-  border-radius: 8px;
+  border-radius: 5px;
   font-size: 14px;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.2s ease;
 }
 
-.controls #stake-btn {
+#stake-btn {
   background: #e63946;
   color: #ffffff;
 }
 
-.controls #cashout-btn {
+#cashout-btn {
   background: #444;
   color: #ffffff;
 }
@@ -208,15 +199,32 @@ header .balance-display {
   transform: scale(1.05);
 }
 
+/* Corner Positions */
+.balance-display {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 14px;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+
+#back-btn {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
 /* Responsive design */
-@media (max-width: 480px) {
+@media (max-width: 768px) {
   header h1 {
-    font-size: 20px;
+    font-size: 16px;
   }
 
-  .container {
-    padding: 12px;
-    border-radius: 10px;
+  .multiplier {
+    font-size: 12px;
+    padding: 8px 10px;
   }
 
   .controls input {
@@ -226,11 +234,6 @@ header .balance-display {
 
   .controls button {
     font-size: 12px;
-    padding: 6px;
-  }
-
-  .multiplier {
-    font-size: 12px;
-    padding: 6px 10px;
+    padding: 8px;
   }
 }