Update static/css/styles.css

static/css/styles.css

@@ -1,306 +1,155 @@
-/* Base styling and CSS variables for consistent theming */
-:root {
-    /* Color palette */
-    --bg-primary: #0a0a0a;
-    --bg-secondary: #1a1a1a;
-    --text-primary: #ffffff;
-    --text-secondary: #cccccc;
-    --accent-red: #ff0000;
-    --accent-green: #00ff00;
-    
-    /* Animation timings */
-    --transition-speed: 0.3s;
-    
-    /* Spacing units */
-    --spacing-sm: 0.5rem;
-    --spacing-md: 1rem;
-    --spacing-lg: 2rem;
-}
-
-/* Global reset and base styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Pixelify Sans', sans-serif;
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-    line-height: 1.6;
-    overflow-x: hidden;
-}
-
-/* WebGL background container */
-#webgl-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1;
-}
-
-/* Main game container */
-#game-container {
-    position: relative;
-    z-index: 2;
-    min-height: 100vh;
-    padding: var(--spacing-lg);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Game pages styling */
-.game-page {
-    display: none;
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: var(--spacing-lg);
-}
-
-.game-page.active {
-    display: block;
-    animation: fadeIn 0.5s ease-in-out;
-}
-
-/* Landing page specific styles */
-#landing-page {
-    text-align: center;
-}
-
-.game-title {
-    font-size: 4rem;
-    margin-bottom: var(--spacing-lg);
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-}
-
-.title-emphasis {
-    color: var(--accent-red);
-}
-
-/* Button styles */
-.button {
-    background: transparent;
-    border: 2px solid var(--text-primary);
-    color: var(--text-primary);
-    padding: var(--spacing-md) var(--spacing-lg);
-    font-family: 'Pixelify Sans', sans-serif;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: all var(--transition-speed) ease;
-}
-
-.button:hover {
-    background: var(--text-primary);
-    color: var(--bg-primary);
-}
-
-.button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-/* Player setup page styles */
-.player-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: var(--spacing-md);
-    margin-bottom: var(--spacing-lg);
-}
-
-.player-avatar {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 2px solid var(--text-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-    margin: 0 auto;
-}
-
-/* Recording phase styles */
-.question-display {
-    text-align: center;
-    font-size: 1.5rem;
-    margin-bottom: var(--spacing-lg);
-    padding: var(--spacing-md);
-    background: var(--bg-secondary);
-    border-radius: 8px;
-}
-
-.timer {
-    position: absolute;
-    top: var(--spacing-md);
-    left: var(--spacing-md);
-    font-size: 2rem;
-    color: var(--accent-red);
-}
-
-.recording-controls {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-md);
-}
-
-/* Listening phase styles */
-.audio-player {
-    width: 100%;
-    margin-bottom: var(--spacing-md);
-}
-
-.player-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-md);
-}
-
-/* Voting phase styles */
-.vote-options {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: var(--spacing-md);
-    margin-top: var(--spacing-lg);
-}
-
-.vote-button {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 2px solid var(--text-primary);
-    background: transparent;
-    color: var(--text-primary);
-    font-size: 1.5rem;
-    cursor: pointer;
-    transition: all var(--transition-speed) ease;
-}
-
-.vote-button:hover {
-    background: var(--text-primary);
-    color: var(--bg-primary);
-}
-
-/* Results page styles */
-.results-container {
-    text-align: center;
-}
-
-.result-message {
-    font-size: 2rem;
-    margin-bottom: var(--spacing-lg);
-}
-
-.impostor-reveal {
-    color: var(--accent-red);
-    font-size: 1.5rem;
-    margin-bottom: var(--spacing-lg);
-}
-
-/* Animation keyframes */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Settings icon */
-.settings-icon {
-    position: absolute;
-    top: var(--spacing-md);
-    right: var(--spacing-md);
-    font-size: 1.5rem;
-    cursor: pointer;
-    transition: transform var(--transition-speed) ease;
-}
-
-.settings-icon:hover {
-    transform: rotate(90deg);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .game-title {
-        font-size: 3rem;
-    }
-    
-    .player-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    
-    .player-avatar {
-        width: 80px;
-        height: 80px;
-        font-size: 1.5rem;
-    }
-    
-    .question-display {
-        font-size: 1.2rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .game-title {
-        font-size: 2rem;
-    }
-    
-    .player-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .button {
-        width: 100%;
-        margin-bottom: var(--spacing-sm);
-    }
-}
-
-/* Loading and transition states */
-.loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid var(--text-secondary);
-    border-top-color: var(--accent-red);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Error message styling */
-.error-message {
-    background: rgba(255, 0, 0, 0.2);
-    border: 1px solid var(--accent-red);
-    padding: var(--spacing-md);
-    margin: var(--spacing-md) 0;
-    border-radius: 4px;
-    text-align: center;
-}
+/* Base styling and CSS variables for consistent theming */
+:root {
+    /* Color palette */
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #1a1a1a;
+    --text-primary: #ffffff;
+    --text-secondary: #cccccc;
+    --accent-red: #ff0000;
+    --accent-green: #00ff00;
+    
+    /* Animation timings */
+    --transition-speed: 0.3s;
+    
+    /* Spacing units */
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 2rem;
+}
+
+/* Global reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden;  /* Prevent scrolling */
+}
+
+body {
+    font-family: 'Pixelify Sans', sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* WebGL background container */
+#webgl-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+/* Main game container */
+#game-container {
+    position: relative;
+    z-index: 2;
+    width: 854px;          /* YouTube standard width */
+    height: 480px;         /* YouTube standard height */
+    margin: auto;
+    padding: var(--spacing-lg);
+    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);
+}
+
+.game-page.active {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+/* Landing page specific styles */
+#landing-page {
+    text-align: center;
+}
+
+.game-title {
+    font-size: 4rem;
+    margin-bottom: var(--spacing-lg);
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    white-space: nowrap;
+}
+
+.title-emphasis {
+    color: var(--accent-red);
+}
+
+/* Button styles */
+.button {
+    background: transparent;
+    border: 2px solid var(--text-primary);
+    color: var(--text-primary);
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+}
+
+.button:hover {
+    background: var(--text-primary);
+    color: var(--bg-primary);
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Rest of the styles remain the same... */
+
+/* Responsive design - Modified for fixed container size */
+@media (max-width: 900px) {
+    #game-container {
+        width: 640px;  /* Smaller YouTube format */
+        height: 360px;
+    }
+    
+    .game-title {
+        font-size: 3rem;
+    }
+}
+
+@media (max-width: 680px) {
+    #game-container {
+        width: 426px;  /* Mobile-friendly size */
+        height: 240px;
+    }
+    
+    .game-title {
+        font-size: 2rem;
+    }
+    
+    .button {
+        padding: var(--spacing-sm) var(--spacing-md);
+        font-size: 1rem;
+    }
+}