Update static/css/styles.css

static/css/styles.css

@@ -75,30 +75,65 @@ body {
     animation: fadeIn 0.5s ease-in-out;
 }
 
-/* Page titles */
-.page-title {
-    font-size: 2.5rem;
+/* Landing page specific styles */
+#landing-page {
+    text-align: center;
+}
+
+/* Game title styling */
+.game-title {
+    font-size: 4rem;
     margin-bottom: var(--spacing-lg);
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-/* Player setup specific styles */
-#setup-page {
-    max-width: 800px;
-    margin: 0 auto;
+.title-not {
+    color: var(--text-primary);
+}
+
+.title-emphasis {
+    color: var(--accent-red) !important;
+    font-weight: bold;
+}
+
+/* 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;
+    min-width: 150px;
+    text-transform: uppercase;
+    margin: 0.5rem;
 }
 
-/* Player grid layout */
+.button:hover:not(:disabled) {
+    background: var(--text-primary);
+    color: var(--bg-primary);
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Player setup specific styles */
 .player-grid {
     display: flex;
     justify-content: center;
     gap: var(--spacing-lg);
-    margin-bottom: var(--spacing-lg);
-    flex-wrap: wrap;
+    margin: var(--spacing-lg) 0;
 }
 
-/* Player card styling */
 .player-card {
     display: flex;
     flex-direction: column;
@@ -106,7 +141,6 @@ body {
     gap: var(--spacing-sm);
 }
 
-/* Player circle styling */
 .player-circle {
     width: 60px;
     height: 60px;
@@ -116,66 +150,21 @@ body {
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
-    margin-bottom: var(--spacing-sm);
     background: transparent;
     transition: all var(--transition-speed) ease;
 }
 
-.player-circle:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-/* Player name styling */
 .player-name {
     font-size: 1rem;
     color: var(--text-secondary);
+    margin-top: 0.5rem;
 }
 
-/* Button container */
+/* Button container for setup page */
 .button-container {
     display: flex;
     gap: var(--spacing-md);
     margin-top: var(--spacing-lg);
-    justify-content: center;
-}
-
-/* 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;
-    min-width: 150px;
-    text-transform: uppercase;
-}
-
-.button:hover:not(:disabled) {
-    background: var(--text-primary);
-    color: var(--bg-primary);
-}
-
-.button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border-color: var(--text-secondary);
-}
-
-.button.start-button {
-    background-color: transparent;
-}
-
-.button.start-button:not(:disabled) {
-    border-color: var(--accent-green);
-    color: var(--accent-green);
-}
-
-.button.start-button:hover:not(:disabled) {
-    background-color: var(--accent-green);
-    color: var(--bg-primary);
 }
 
 /* Animation keyframes */
@@ -192,39 +181,20 @@ body {
 
 /* Responsive design */
 @media (max-width: 768px) {
-    .player-grid {
-        gap: var(--spacing-md);
+    .game-title {
+        font-size: 3rem;
     }
-
-    .player-circle {
-        width: 50px;
-        height: 50px;
-        font-size: 1.2rem;
-    }
-
-    .button {
-        padding: var(--spacing-sm) var(--spacing-md);
-        font-size: 1rem;
-        min-width: 120px;
+    
+    .player-grid {
+        flex-wrap: wrap;
     }
 }
 
 @media (max-width: 480px) {
-    .player-grid {
-        gap: var(--spacing-sm);
-    }
-
-    .player-circle {
-        width: 40px;
-        height: 40px;
-        font-size: 1rem;
-    }
-
-    .button-container {
-        flex-direction: column;
-        align-items: center;
+    .game-title {
+        font-size: 2rem;
     }
-
+    
     .button {
         width: 100%;
     }