Update style.css

assets/games/casino/style.css

@@ -1,126 +1,185 @@
+/* General Styling */
 body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f9;
+  color: #333;
   margin: 0;
   padding: 0;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(to right, #141e30, #243b55);
-  color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 
-.screen {
-  display: none;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 30px;
-  border-radius: 15px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-  width: 300px;
+h1, h2, h3 {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #444;
 }
 
-.screen.active {
+#app {
+  width: 80%;
+  max-width: 800px;
+  margin: auto;
+}
+
+/* Screen Handling */
+.screen {
+  display: none;
+}
+
+.active {
   display: block;
 }
 
-input[type="text"],
-input[type="number"] {
-  padding: 8px;
-  width: 80%;
-  margin-bottom: 10px;
-  border: none;
-  border-radius: 5px;
-  outline: none;
-}
-
 button {
-  padding: 10px 20px;
-  margin: 5px;
-  border: none;
-  border-radius: 5px;
-  background-color: #4CAF50;
+  background-color: #007BFF;
   color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  font-size: 16px;
+  margin: 5px;
 }
 
 button:hover {
-  background-color: #45a049;
+  background-color: #0056b3;
+}
+
+input[type="number"],
+input[type="text"],
+select {
+  padding: 8px;
+  font-size: 16px;
+  margin: 5px 0;
+  width: 100%;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+input[type="number"]:focus,
+input[type="text"]:focus,
+select:focus {
+  outline: none;
+  border-color: #007BFF;
+}
+
+h1, h2, h3 {
+  text-align: center;
+}
+
+/* Game Screens */
+#username-setup, #main-menu, #blackjack, #slots, #roulette, #crash, #stats {
+  padding: 20px;
+  text-align: center;
 }
 
 #xp-bar {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 5px;
-  overflow: hidden;
-  height: 20px;
-  margin-bottom: 15px;
+  height: 25px;
+  background-color: #f3f3f3;
+  width: 100%;
+  border-radius: 12px;
+  margin-bottom: 10px;
 }
 
 #xp-progress {
-  background: #4CAF50;
   height: 100%;
-  width: 0%;
-  transition: width 0.3s ease;
+  background-color: #4CAF50;
+  border-radius: 12px;
+}
+
+/* Slots Game */
+#slots-reels {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.reel {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background-color: #ddd;
+  text-align: center;
+  font-size: 24px;
+  line-height: 50px;
+  border-radius: 5px;
+}
+
+#slots-message {
+  font-size: 18px;
+  margin-top: 20px;
+  color: #333;
+}
+
+/* Roulette Game */
+#roulette-animation {
+  width: 100%;
+  height: 200px;
+  background: #ccc;
+  margin-bottom: 20px;
+}
+
+#roulette-result {
+  font-size: 18px;
+  color: #333;
+  margin-top: 20px;
+}
+
+/* Crash Game */
+#crash-animation {
+  width: 100%;
+  height: 30px;
+  background-color: #ccc;
+  margin-bottom: 20px;
+  transition: transform 1s ease-out;
+}
+
+/* Stats Screen */
+#stats p {
+  font-size: 16px;
+  margin: 5px 0;
+}
+
+/* Import/Export Progress Buttons */
+#import-file,
+#export-progress {
+  margin-top: 10px;
+  padding: 8px;
+  font-size: 16px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+#import-file:focus,
+#export-progress:focus {
+  outline: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .screen {
+    padding: 15px;
+  }
+
+  button {
+    width: 100%;
+    font-size: 14px;
+  }
+
+  #xp-bar {
+    height: 15px;
+  }
+
+  #xp-progress {
+    height: 100%;
+  }
 }
 
 .hidden {
   display: none;
 }
-
-/* Slots Animation */
-@keyframes spinReel {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-100%);
-  }
-}
-
-.reel {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  margin: 0 5px;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-}
-
-.reel span {
-  display: block;
-  animation: spinReel 0.5s ease-out;
-  font-size: 24px;
-}
-
-/* Roulette Animation */
-@keyframes spinRoulette {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(720deg);
-  }
-}
-
-#roulette-animation {
-  width: 80px;
-  height: 80px;
-  margin: 10px auto;
-  border: 5px solid #fff;
-  border-top: 5px solid red;
-  border-radius: 50%;
-  animation: none;
-}
-
-/* Crash Animation */
-#crash-animation {
-  width: 100%;
-  height: 10px;
-  background: linear-gradient(to right, #4CAF50, #f44336);
-  transform-origin: left;
-  transform: scaleX(0);
-  transition: transform 1s ease-out;
-  margin-bottom: 10px;
-}