Update static/css/styles.css

static/css/styles.css

@@ -25,8 +25,9 @@
 }
 
 html, body {
+    width: 100%;
     height: 100%;
-    overflow: hidden;  /* Prevent scrolling */
+    overflow: hidden;  /* Prevent scrolling while keeping full-screen layout */
 }
 
 body {
@@ -34,9 +35,6 @@ body {
     background-color: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
 /* WebGL background container */
@@ -53,27 +51,18 @@ body {
 #game-container {
     position: relative;
     z-index: 2;
-    width: 854px;          /* YouTube standard width */
-    height: 480px;         /* YouTube standard height */
-    margin: auto;
-    padding: var(--spacing-lg);
+    width: 100%;
+    height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
-    border-radius: 8px;
-    overflow: hidden;      /* Contain child elements */
 }
 
 /* Game pages styling */
 .game-page {
     display: none;
     width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
     padding: var(--spacing-lg);
 }
 
@@ -95,7 +84,6 @@ body {
     margin-bottom: var(--spacing-lg);
     text-transform: uppercase;
     letter-spacing: 0.2em;
-    white-space: nowrap;
 }
 
 .title-emphasis {
@@ -124,26 +112,20 @@ body {
     cursor: not-allowed;
 }
 
-/* Rest of the styles remain the same... */
+/* Rest of the styles remain unchanged... */
 
-/* Responsive design - Modified for fixed container size */
-@media (max-width: 900px) {
-    #game-container {
-        width: 640px;  /* Smaller YouTube format */
-        height: 360px;
-    }
-    
+/* Modified responsive design for full-screen layout */
+@media (max-width: 768px) {
     .game-title {
         font-size: 3rem;
     }
+    
+    .player-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
-@media (max-width: 680px) {
-    #game-container {
-        width: 426px;  /* Mobile-friendly size */
-        height: 240px;
-    }
-    
+@media (max-width: 480px) {
     .game-title {
         font-size: 2rem;
     }