Create static/css/style.css

static/css/style.css

@@ -0,0 +1,1805 @@
+/* ========================================
+   CSS Variables & Theme Definitions
+======================================== */
+:root {
+    /* Default Dark Theme */
+    --bg-primary: #1a1a2e;
+    --bg-secondary: #16213e;
+    --bg-tertiary: #0f3460;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0a0;
+    --accent-primary: #e94560;
+    --accent-secondary: #0f3460;
+    --board-light: #eeeed2;
+    --board-dark: #769656;
+    --highlight-move: rgba(255, 255, 0, 0.4);
+    --highlight-selected: rgba(20, 85, 30, 0.5);
+    --highlight-legal: rgba(0, 0, 0, 0.1);
+    --highlight-capture: rgba(255, 0, 0, 0.4);
+    --check-color: #ff0000;
+    --border-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --modal-bg: rgba(0, 0, 0, 0.8);
+}
+
+/* Light Theme */
+.theme-light {
+    --bg-primary: #f5f5f5;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #e0e0e0;
+    --text-primary: #1a1a1a;
+    --text-secondary: #666666;
+    --accent-primary: #2196f3;
+    --accent-secondary: #1976d2;
+    --border-color: #ddd;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Forest Theme */
+.theme-forest {
+    --bg-primary: #1b2d1b;
+    --bg-secondary: #2d4a2d;
+    --bg-tertiary: #3d6b3d;
+    --text-primary: #e8f5e9;
+    --text-secondary: #a5d6a7;
+    --accent-primary: #4caf50;
+    --accent-secondary: #2e7d32;
+    --board-light: #c8e6c9;
+    --board-dark: #388e3c;
+    --border-color: #2e7d32;
+}
+
+/* Ocean Theme */
+.theme-ocean {
+    --bg-primary: #0d1b2a;
+    --bg-secondary: #1b263b;
+    --bg-tertiary: #415a77;
+    --text-primary: #e0e1dd;
+    --text-secondary: #778da9;
+    --accent-primary: #00b4d8;
+    --accent-secondary: #0077b6;
+    --board-light: #caf0f8;
+    --board-dark: #0077b6;
+    --border-color: #0077b6;
+}
+
+/* Sunset Theme */
+.theme-sunset {
+    --bg-primary: #2d132c;
+    --bg-secondary: #801336;
+    --bg-tertiary: #c72c41;
+    --text-primary: #fff5e4;
+    --text-secondary: #ee6f57;
+    --accent-primary: #ee6f57;
+    --accent-secondary: #c72c41;
+    --board-light: #ffeaa7;
+    --board-dark: #d63031;
+    --border-color: #c72c41;
+}
+
+/* Midnight Theme */
+.theme-midnight {
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #1a1a1a;
+    --bg-tertiary: #2a2a2a;
+    --text-primary: #ffffff;
+    --text-secondary: #888888;
+    --accent-primary: #6c5ce7;
+    --accent-secondary: #5541d7;
+    --board-light: #b8b8b8;
+    --board-dark: #4a4a4a;
+    --border-color: #333;
+}
+
+/* Cream Theme */
+.theme-cream {
+    --bg-primary: #f5f0e1;
+    --bg-secondary: #fffef9;
+    --bg-tertiary: #e8e0cc;
+    --text-primary: #2c2c2c;
+    --text-secondary: #666666;
+    --accent-primary: #c9a959;
+    --accent-secondary: #8b7355;
+    --board-light: #f0d9b5;
+    --board-dark: #b58863;
+    --border-color: #c9a959;
+}
+
+/* Lavender Theme */
+.theme-lavender {
+    --bg-primary: #2d2540;
+    --bg-secondary: #3d3356;
+    --bg-tertiary: #5a4f7a;
+    --text-primary: #e8e0f0;
+    --text-secondary: #b8a8d0;
+    --accent-primary: #9b59b6;
+    --accent-secondary: #8e44ad;
+    --board-light: #e8d5f0;
+    --board-dark: #9b59b6;
+    --border-color: #8e44ad;
+}
+
+/* Mint Theme */
+.theme-mint {
+    --bg-primary: #1a332e;
+    --bg-secondary: #2a4a44;
+    --bg-tertiary: #3a6a60;
+    --text-primary: #e0f2ef;
+    --text-secondary: #98d4c8;
+    --accent-primary: #1abc9c;
+    --accent-secondary: #16a085;
+    --board-light: #a8e6cf;
+    --board-dark: #20b2aa;
+    --border-color: #16a085;
+}
+
+/* Slate Theme */
+.theme-slate {
+    --bg-primary: #2c3e50;
+    --bg-secondary: #34495e;
+    --bg-tertiary: #4a6278;
+    --text-primary: #ecf0f1;
+    --text-secondary: #95a5a6;
+    --accent-primary: #3498db;
+    --accent-secondary: #2980b9;
+    --board-light: #bdc3c7;
+    --board-dark: #7f8c8d;
+    --border-color: #2980b9;
+}
+
+/* ========================================
+   Rainbow Theme (Special) - Only Board Animates
+======================================== */
+.theme-rainbow {
+    /* Same as Dark Theme */
+    --bg-primary: #1a1a2e;
+    --bg-secondary: #16213e;
+    --bg-tertiary: #0f3460;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0a0;
+    --accent-primary: #e94560;
+    --accent-secondary: #0f3460;
+    --border-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --modal-bg: rgba(0, 0, 0, 0.8);
+    --highlight-move: rgba(255, 255, 0, 0.4);
+    --highlight-selected: rgba(20, 85, 30, 0.5);
+    --highlight-legal: rgba(0, 0, 0, 0.1);
+    --highlight-capture: rgba(255, 0, 0, 0.4);
+    --check-color: #ff0000;
+}
+
+/* Rainbow animated board glow */
+.theme-rainbow .chessboard {
+    animation: rainbow-glow 8s ease infinite;
+}
+
+@keyframes rainbow-glow {
+    0%, 100% { 
+        box-shadow: 0 0 30px #ff6b6b, 0 0 60px #ff6b6b, inset 0 0 20px rgba(255, 107, 107, 0.1);
+        border-color: #ff6b6b;
+    }
+    14% { 
+        box-shadow: 0 0 30px #feca57, 0 0 60px #feca57, inset 0 0 20px rgba(254, 202, 87, 0.1);
+        border-color: #feca57;
+    }
+    28% { 
+        box-shadow: 0 0 30px #48dbfb, 0 0 60px #48dbfb, inset 0 0 20px rgba(72, 219, 251, 0.1);
+        border-color: #48dbfb;
+    }
+    42% { 
+        box-shadow: 0 0 30px #1dd1a1, 0 0 60px #1dd1a1, inset 0 0 20px rgba(29, 209, 161, 0.1);
+        border-color: #1dd1a1;
+    }
+    56% { 
+        box-shadow: 0 0 30px #5f27cd, 0 0 60px #5f27cd, inset 0 0 20px rgba(95, 39, 205, 0.1);
+        border-color: #5f27cd;
+    }
+    70% { 
+        box-shadow: 0 0 30px #ff9ff3, 0 0 60px #ff9ff3, inset 0 0 20px rgba(255, 159, 243, 0.1);
+        border-color: #ff9ff3;
+    }
+    84% { 
+        box-shadow: 0 0 30px #00d2d3, 0 0 60px #00d2d3, inset 0 0 20px rgba(0, 210, 211, 0.1);
+        border-color: #00d2d3;
+    }
+}
+
+/* Rainbow light squares */
+.theme-rainbow .board-square.light {
+    animation: rainbow-light-square 6s ease infinite;
+}
+
+@keyframes rainbow-light-square {
+    0%, 100% { background-color: #ffe6e6; }
+    14% { background-color: #fff8e6; }
+    28% { background-color: #e6f9ff; }
+    42% { background-color: #e6fff5; }
+    56% { background-color: #f3e6ff; }
+    70% { background-color: #ffe6fb; }
+    84% { background-color: #e6ffff; }
+}
+
+/* Rainbow dark squares */
+.theme-rainbow .board-square.dark {
+    animation: rainbow-dark-square 6s ease infinite;
+}
+
+@keyframes rainbow-dark-square {
+    0%, 100% { background-color: #ff6b6b; }
+    14% { background-color: #feca57; }
+    28% { background-color: #48dbfb; }
+    42% { background-color: #1dd1a1; }
+    56% { background-color: #5f27cd; }
+    70% { background-color: #ff9ff3; }
+    84% { background-color: #00d2d3; }
+}
+
+/* Coordinate labels for rainbow theme */
+.theme-rainbow .board-square.light .coord-file,
+.theme-rainbow .board-square.light .coord-rank {
+    animation: rainbow-coord-dark 6s ease infinite;
+}
+
+@keyframes rainbow-coord-dark {
+    0%, 100% { color: #cc5555; }
+    14% { color: #cca044; }
+    28% { color: #3ab0c9; }
+    42% { color: #17a880; }
+    56% { color: #4c1fa3; }
+    70% { color: #cc7fc2; }
+    84% { color: #00a8a9; }
+}
+
+.theme-rainbow .board-square.dark .coord-file,
+.theme-rainbow .board-square.dark .coord-rank {
+    color: #fff;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Rainbow check ring */
+.theme-rainbow .check-ring {
+    animation: rainbow-check-ring 6s ease infinite, check-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes rainbow-check-ring {
+    0%, 100% { 
+        border-color: #ff0000;
+        box-shadow: 0 0 20px #ff0000;
+    }
+    14% { 
+        border-color: #ff6600;
+        box-shadow: 0 0 20px #ff6600;
+    }
+    28% { 
+        border-color: #ff00ff;
+        box-shadow: 0 0 20px #ff00ff;
+    }
+    42% { 
+        border-color: #ff0066;
+        box-shadow: 0 0 20px #ff0066;
+    }
+    56% { 
+        border-color: #ff3300;
+        box-shadow: 0 0 20px #ff3300;
+    }
+    70% { 
+        border-color: #ff0099;
+        box-shadow: 0 0 20px #ff0099;
+    }
+    84% { 
+        border-color: #ff3366;
+        box-shadow: 0 0 20px #ff3366;
+    }
+}
+
+/* Rainbow last move highlight */
+.theme-rainbow .board-square.last-move {
+    animation: rainbow-last-move 6s ease infinite !important;
+}
+
+@keyframes rainbow-last-move {
+    0%, 100% { background-color: rgba(255, 107, 107, 0.5) !important; }
+    14% { background-color: rgba(254, 202, 87, 0.5) !important; }
+    28% { background-color: rgba(72, 219, 251, 0.5) !important; }
+    42% { background-color: rgba(29, 209, 161, 0.5) !important; }
+    56% { background-color: rgba(95, 39, 205, 0.5) !important; }
+    70% { background-color: rgba(255, 159, 243, 0.5) !important; }
+    84% { background-color: rgba(0, 210, 211, 0.5) !important; }
+}
+
+/* Rainbow selected square */
+.theme-rainbow .board-square.selected {
+    animation: rainbow-selected 6s ease infinite !important;
+}
+
+@keyframes rainbow-selected {
+    0%, 100% { background-color: rgba(255, 107, 107, 0.6) !important; }
+    14% { background-color: rgba(254, 202, 87, 0.6) !important; }
+    28% { background-color: rgba(72, 219, 251, 0.6) !important; }
+    42% { background-color: rgba(29, 209, 161, 0.6) !important; }
+    56% { background-color: rgba(95, 39, 205, 0.6) !important; }
+    70% { background-color: rgba(255, 159, 243, 0.6) !important; }
+    84% { background-color: rgba(0, 210, 211, 0.6) !important; }
+}
+
+/* Rainbow legal move dots */
+.theme-rainbow .board-square.legal-move::after {
+    animation: rainbow-legal-dot 6s ease infinite;
+}
+
+@keyframes rainbow-legal-dot {
+    0%, 100% { background: rgba(255, 107, 107, 0.5); }
+    14% { background: rgba(254, 202, 87, 0.5); }
+    28% { background: rgba(72, 219, 251, 0.5); }
+    42% { background: rgba(29, 209, 161, 0.5); }
+    56% { background: rgba(95, 39, 205, 0.5); }
+    70% { background: rgba(255, 159, 243, 0.5); }
+    84% { background: rgba(0, 210, 211, 0.5); }
+}
+
+/* Rainbow legal capture rings */
+.theme-rainbow .board-square.legal-capture::after {
+    animation: rainbow-capture-ring 6s ease infinite;
+}
+
+@keyframes rainbow-capture-ring {
+    0%, 100% { border-color: rgba(255, 107, 107, 0.8); }
+    14% { border-color: rgba(254, 202, 87, 0.8); }
+    28% { border-color: rgba(72, 219, 251, 0.8); }
+    42% { border-color: rgba(29, 209, 161, 0.8); }
+    56% { border-color: rgba(95, 39, 205, 0.8); }
+    70% { border-color: rgba(255, 159, 243, 0.8); }
+    84% { border-color: rgba(0, 210, 211, 0.8); }
+}
+
+/* Rainbow theme preview in dropdown */
+.rainbow-preview { 
+    background: linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #48dbfb, #5f27cd, #ff9ff3);
+    animation: rainbow-spin 2s linear infinite;
+}
+
+@keyframes rainbow-spin {
+    0% { filter: hue-rotate(0deg); }
+    100% { filter: hue-rotate(360deg); }
+}
+
+/* ========================================
+   Reset & Base Styles
+======================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Roboto', sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    overflow-x: hidden;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* ========================================
+   Loading Screen
+======================================== */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loader {
+    text-align: center;
+}
+
+.chess-piece-loader {
+    font-size: 80px;
+    animation: bounce 1s ease infinite;
+    color: var(--accent-primary);
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+}
+
+.loader p {
+    margin-top: 20px;
+    font-size: 18px;
+    color: var(--text-secondary);
+}
+
+/* ========================================
+   App Container
+======================================== */
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ========================================
+   Header
+======================================== */
+.header {
+    background: var(--bg-secondary);
+    padding: 15px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0 2px 10px var(--shadow-color);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logo-icon {
+    font-size: 36px;
+    color: var(--accent-primary);
+}
+
+.logo-text {
+    font-family: 'Playfair Display', serif;
+    font-size: 28px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--accent-primary), var(--text-primary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.theme-selector {
+    position: relative;
+}
+
+.theme-btn, .sound-btn {
+    background: var(--bg-tertiary);
+    border: none;
+    color: var(--text-primary);
+    padding: 10px 15px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.3s ease;
+}
+
+.theme-btn:hover, .sound-btn:hover {
+    background: var(--accent-primary);
+    transform: translateY(-2px);
+}
+
+.theme-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 10px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 10px;
+    min-width: 180px;
+    box-shadow: 0 10px 30px var(--shadow-color);
+    z-index: 1000;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.theme-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.theme-option:hover {
+    background: var(--bg-tertiary);
+}
+
+.theme-option.special {
+    border: 1px solid var(--accent-primary);
+    background: linear-gradient(90deg, rgba(255,107,107,0.1), rgba(78,205,196,0.1));
+}
+
+.theme-preview {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid var(--border-color);
+}
+
+.dark-preview { background: linear-gradient(135deg, #1a1a2e, #e94560); }
+.light-preview { background: linear-gradient(135deg, #f5f5f5, #2196f3); }
+.forest-preview { background: linear-gradient(135deg, #1b2d1b, #4caf50); }
+.ocean-preview { background: linear-gradient(135deg, #0d1b2a, #00b4d8); }
+.sunset-preview { background: linear-gradient(135deg, #2d132c, #ee6f57); }
+.midnight-preview { background: linear-gradient(135deg, #0a0a0a, #6c5ce7); }
+.cream-preview { background: linear-gradient(135deg, #f5f0e1, #c9a959); }
+.lavender-preview { background: linear-gradient(135deg, #2d2540, #9b59b6); }
+.mint-preview { background: linear-gradient(135deg, #1a332e, #1abc9c); }
+.slate-preview { background: linear-gradient(135deg, #2c3e50, #3498db); }
+
+/* ========================================
+   Screens
+======================================== */
+.screen {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* ========================================
+   Lobby Screen
+======================================== */
+.lobby-container {
+    max-width: 900px;
+    width: 100%;
+    text-align: center;
+}
+
+.lobby-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 48px;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, var(--accent-primary), var(--text-primary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.lobby-subtitle {
+    color: var(--text-secondary);
+    font-size: 18px;
+    margin-bottom: 40px;
+}
+
+.username-section {
+    margin-bottom: 40px;
+}
+
+.username-section label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.username-section input {
+    width: 100%;
+    max-width: 400px;
+    padding: 15px 20px;
+    font-size: 18px;
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.username-section input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 20px rgba(233, 69, 96, 0.2);
+}
+
+.lobby-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-bottom: 40px;
+}
+
+.option-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    padding: 30px;
+    transition: all 0.3s ease;
+}
+
+.option-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px var(--shadow-color);
+    border-color: var(--accent-primary);
+}
+
+.option-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto 20px;
+    font-size: 36px;
+    color: white;
+}
+
+.option-card h3 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.option-card p {
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+.time-control-section {
+    margin-bottom: 20px;
+}
+
+.time-control-section label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.time-options {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.time-btn {
+    padding: 10px 20px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.time-btn:hover, .time-btn.active {
+    border-color: var(--accent-primary);
+    background: var(--accent-primary);
+    color: white;
+}
+
+.room-code-section input {
+    width: 100%;
+    padding: 15px;
+    font-size: 24px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    margin-bottom: 20px;
+}
+
+.room-code-section input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+}
+
+/* ========================================
+   Buttons
+======================================== */
+.btn {
+    padding: 15px 30px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.4);
+}
+
+.btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: 2px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+    border-color: var(--accent-primary);
+    background: var(--accent-primary);
+    color: white;
+}
+
+.btn-text {
+    background: transparent;
+    color: var(--accent-primary);
+    padding: 10px;
+}
+
+.btn-text:hover {
+    color: var(--text-primary);
+}
+
+.btn-danger {
+    background: #e74c3c;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #c0392b;
+}
+
+/* ========================================
+   Available Rooms
+======================================== */
+.available-rooms {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    padding: 30px;
+}
+
+.available-rooms h3 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.rooms-list {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: 15px;
+}
+
+.room-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background: var(--bg-tertiary);
+    border-radius: 10px;
+    margin-bottom: 10px;
+    transition: all 0.3s ease;
+}
+
+.room-item:hover {
+    transform: translateX(5px);
+    border-left: 3px solid var(--accent-primary);
+}
+
+.room-info {
+    text-align: left;
+}
+
+.room-host {
+    font-weight: 600;
+}
+
+.room-time {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.no-rooms {
+    color: var(--text-secondary);
+    font-style: italic;
+}
+
+/* ========================================
+   Waiting Screen
+======================================== */
+.waiting-container {
+    text-align: center;
+    max-width: 500px;
+}
+
+.waiting-animation {
+    margin-bottom: 30px;
+}
+
+.chess-pieces-animation {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    font-size: 48px;
+}
+
+.chess-pieces-animation span {
+    animation: float 2s ease-in-out infinite;
+    color: var(--accent-primary);
+}
+
+.chess-pieces-animation span:nth-child(1) { animation-delay: 0s; }
+.chess-pieces-animation span:nth-child(2) { animation-delay: 0.2s; }
+.chess-pieces-animation span:nth-child(3) { animation-delay: 0.4s; }
+.chess-pieces-animation span:nth-child(4) { animation-delay: 0.6s; }
+.chess-pieces-animation span:nth-child(5) { animation-delay: 0.8s; }
+.chess-pieces-animation span:nth-child(6) { animation-delay: 1s; }
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-15px); }
+}
+
+.waiting-container h2 {
+    font-size: 32px;
+    margin-bottom: 15px;
+}
+
+.waiting-container p {
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+.room-code-display {
+    display: inline-flex;
+    align-items: center;
+    gap: 15px;
+    background: var(--bg-secondary);
+    padding: 20px 30px;
+    border-radius: 15px;
+    border: 2px dashed var(--accent-primary);
+    margin-bottom: 20px;
+}
+
+.room-code-display span {
+    font-size: 36px;
+    font-weight: 700;
+    letter-spacing: 5px;
+    color: var(--accent-primary);
+}
+
+.copy-btn {
+    background: var(--accent-primary);
+    border: none;
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    transition: all 0.3s ease;
+}
+
+.copy-btn:hover {
+    transform: scale(1.1);
+}
+
+.waiting-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    color: var(--text-secondary);
+    margin-bottom: 30px;
+}
+
+/* ========================================
+   Game Screen
+======================================== */
+.game-screen {
+    display: flex;
+    gap: 30px;
+    padding: 20px;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.game-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+/* ========================================
+   Player Info
+======================================== */
+.player-info {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    background: var(--bg-secondary);
+    padding: 15px 25px;
+    border-radius: 15px;
+    min-width: 350px;
+    border: 1px solid var(--border-color);
+}
+
+.player-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: var(--bg-tertiary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+}
+
+.opponent-avatar {
+    background: linear-gradient(135deg, #333, #555);
+    color: white;
+}
+
+.self-avatar {
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    color: white;
+}
+
+.player-details {
+    flex: 1;
+}
+
+.player-name {
+    display: block;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.player-color {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.player-timer {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--bg-tertiary);
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-size: 24px;
+    font-weight: 700;
+    font-family: 'Roboto Mono', monospace;
+}
+
+.player-timer.low-time {
+    background: #e74c3c;
+    color: white;
+    animation: pulse-warning 1s ease infinite;
+}
+
+@keyframes pulse-warning {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+/* ========================================
+   Board Wrapper
+======================================== */
+.board-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.captured-pieces {
+    width: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 24px;
+}
+
+.board-container {
+    position: relative;
+}
+
+/* ========================================
+   Chess Board
+======================================== */
+.chessboard {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    width: 560px;
+    height: 560px;
+    border: 4px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px var(--shadow-color);
+}
+
+.board-square {
+    width: 70px;
+    height: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 56px;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.2s ease;
+    user-select: none;
+}
+
+.board-square.light {
+    background-color: var(--board-light);
+}
+
+.board-square.dark {
+    background-color: var(--board-dark);
+}
+
+.board-square .piece {
+    cursor: grab;
+    transition: transform 0.1s ease;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.board-square .piece:active {
+    cursor: grabbing;
+}
+
+.board-square.selected {
+    background-color: var(--highlight-selected) !important;
+}
+
+.board-square.last-move {
+    background-color: var(--highlight-move) !important;
+}
+
+.board-square.legal-move::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background: var(--highlight-legal);
+    border-radius: 50%;
+}
+
+.board-square.legal-capture::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 5px solid var(--highlight-capture);
+    border-radius: 50%;
+    box-sizing: border-box;
+}
+
+.board-square.can-move {
+    cursor: pointer;
+}
+
+/* ========================================
+   Coordinate Labels
+======================================== */
+.board-square .coord-file {
+    position: absolute;
+    bottom: 2px;
+    right: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0.7;
+}
+
+.board-square .coord-rank {
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0.7;
+}
+
+.board-square.light .coord-file,
+.board-square.light .coord-rank {
+    color: var(--board-dark);
+}
+
+.board-square.dark .coord-file,
+.board-square.dark .coord-rank {
+    color: var(--board-light);
+}
+
+/* ========================================
+   Check Indicator Ring
+======================================== */
+.check-ring {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60px;
+    height: 60px;
+    border: 4px solid var(--check-color);
+    border-radius: 50%;
+    animation: check-pulse 1.5s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes check-pulse {
+    0%, 100% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+        box-shadow: 0 0 20px var(--check-color);
+    }
+    50% {
+        opacity: 0.5;
+        transform: translate(-50%, -50%) scale(1.15);
+        box-shadow: 0 0 40px var(--check-color);
+    }
+}
+
+/* ========================================
+   Game Controls
+======================================== */
+.game-controls {
+    display: flex;
+    gap: 15px;
+}
+
+.control-btn {
+    width: 50px;
+    height: 50px;
+    border-radius: 12px;
+    border: 2px solid var(--border-color);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.control-btn:hover {
+    background: var(--accent-primary);
+    border-color: var(--accent-primary);
+    color: white;
+    transform: translateY(-3px);
+}
+
+.chat-badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background: #e74c3c;
+    color: white;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* ========================================
+   Side Panel
+======================================== */
+.side-panel {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.move-history-panel,
+.chat-panel {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 15px;
+    padding: 20px;
+}
+
+.move-history-panel h3,
+.chat-panel h3 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.move-history {
+    max-height: 200px;
+    overflow-y: auto;
+    font-family: 'Roboto Mono', monospace;
+}
+
+.move-row {
+    display: flex;
+    gap: 10px;
+    padding: 8px;
+    border-radius: 5px;
+}
+
+.move-row:nth-child(odd) {
+    background: var(--bg-tertiary);
+}
+
+.move-number {
+    width: 30px;
+    color: var(--text-secondary);
+}
+
+.move-white,
+.move-black {
+    flex: 1;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: 3px;
+    transition: background 0.2s ease;
+}
+
+.move-white:hover,
+.move-black:hover {
+    background: var(--accent-primary);
+    color: white;
+}
+
+/* ========================================
+   Chat
+======================================== */
+.chat-messages {
+    height: 200px;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    padding: 10px;
+    background: var(--bg-tertiary);
+    border-radius: 10px;
+}
+
+.chat-message {
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+}
+
+.chat-message .sender {
+    font-weight: 600;
+    color: var(--accent-primary);
+    font-size: 14px;
+}
+
+.chat-message .text {
+    margin-top: 4px;
+    word-wrap: break-word;
+}
+
+.chat-message .time {
+    font-size: 11px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+}
+
+.chat-input-container {
+    display: flex;
+    gap: 10px;
+}
+
+.chat-input-container input {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.chat-input-container input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+}
+
+.send-btn {
+    width: 45px;
+    height: 45px;
+    border-radius: 10px;
+    border: none;
+    background: var(--accent-primary);
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.send-btn:hover {
+    background: var(--accent-secondary);
+    transform: scale(1.05);
+}
+
+/* ========================================
+   Modals
+======================================== */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--modal-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.modal-content {
+    background: var(--bg-secondary);
+    padding: 40px;
+    border-radius: 20px;
+    text-align: center;
+    max-width: 450px;
+    width: 90%;
+    animation: slideUp 0.3s ease;
+    border: 1px solid var(--border-color);
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-content h2 {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.modal-content p {
+    color: var(--text-secondary);
+    margin-bottom: 25px;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+}
+
+/* ========================================
+   Game Over Modal
+======================================== */
+.game-over-content .game-over-icon {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #ffd700, #ffb347);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto 25px;
+    font-size: 50px;
+    color: white;
+    animation: trophy-bounce 0.5s ease;
+}
+
+@keyframes trophy-bounce {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+}
+
+.game-over-icon.loss {
+    background: linear-gradient(135deg, #666, #333);
+}
+
+.game-over-icon.draw {
+    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+}
+
+.game-over-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* ========================================
+   Promotion Modal
+======================================== */
+.promotion-content {
+    padding: 30px;
+}
+
+.promotion-pieces {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+
+.promotion-piece {
+    width: 70px;
+    height: 70px;
+    font-size: 50px;
+    border: 2px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--bg-tertiary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.promotion-piece:hover {
+    border-color: var(--accent-primary);
+    transform: scale(1.1);
+    background: var(--accent-primary);
+}
+
+/* ========================================
+   Disconnect Modal
+======================================== */
+.disconnect-timer {
+    font-size: 48px;
+    font-weight: 700;
+    color: var(--accent-primary);
+    margin: 20px 0;
+    font-family: 'Roboto Mono', monospace;
+}
+
+.disconnect-info {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+/* ========================================
+   Toast Notifications
+======================================== */
+.toast-container {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 3000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toast {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    padding: 15px 25px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 10px 30px var(--shadow-color);
+    animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
+    max-width: 350px;
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(100px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.toast.success {
+    border-left: 4px solid #27ae60;
+}
+
+.toast.success i {
+    color: #27ae60;
+}
+
+.toast.error {
+    border-left: 4px solid #e74c3c;
+}
+
+.toast.error i {
+    color: #e74c3c;
+}
+
+.toast.info {
+    border-left: 4px solid #3498db;
+}
+
+.toast.info i {
+    color: #3498db;
+}
+
+.toast.warning {
+    border-left: 4px solid #f39c12;
+}
+
+.toast.warning i {
+    color: #f39c12;
+}
+
+/* ========================================
+   Scrollbar Styling
+======================================== */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent-primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-secondary);
+}
+
+/* ========================================
+   Piece Colors
+======================================== */
+.piece-white {
+    color: #ffffff;
+    text-shadow: 
+        1px 1px 0 #000,
+        -1px -1px 0 #000,
+        1px -1px 0 #000,
+        -1px 1px 0 #000;
+}
+
+.piece-black {
+    color: #1a1a1a;
+    text-shadow: 
+        1px 1px 0 #666,
+        -1px -1px 0 #666,
+        1px -1px 0 #666,
+        -1px 1px 0 #666;
+}
+
+/* ========================================
+   Turn Indicator
+======================================== */
+.player-info.active-turn {
+    border: 2px solid var(--accent-primary);
+    box-shadow: 0 0 20px rgba(233, 69, 96, 0.3);
+}
+
+/* ========================================
+   Responsive Design
+======================================== */
+@media (max-width: 1200px) {
+    .game-screen {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .side-panel {
+        width: 100%;
+        max-width: 560px;
+        flex-direction: row;
+    }
+    
+    .move-history-panel,
+    .chat-panel {
+        flex: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .header {
+        padding: 10px 15px;
+    }
+    
+    .logo-text {
+        font-size: 20px;
+    }
+    
+    .lobby-title {
+        font-size: 32px;
+    }
+    
+    .lobby-options {
+        grid-template-columns: 1fr;
+    }
+    
+    .chessboard {
+        width: 320px;
+        height: 320px;
+    }
+    
+    .board-square {
+        width: 40px;
+        height: 40px;
+        font-size: 32px;
+    }
+    
+    .board-square .coord-file,
+    .board-square .coord-rank {
+        font-size: 8px;
+    }
+    
+    .check-ring {
+        width: 35px;
+        height: 35px;
+        border-width: 3px;
+    }
+    
+    .player-info {
+        min-width: 280px;
+        padding: 10px 15px;
+    }
+    
+    .player-timer {
+        font-size: 18px;
+        padding: 8px 12px;
+    }
+    
+    .side-panel {
+        flex-direction: column;
+    }
+    
+    .game-controls {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .control-btn {
+        width: 45px;
+        height: 45px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chessboard {
+        width: 280px;
+        height: 280px;
+    }
+    
+    .board-square {
+        width: 35px;
+        height: 35px;
+        font-size: 28px;
+    }
+    
+    .room-code-display span {
+        font-size: 24px;
+        letter-spacing: 3px;
+    }
+    
+    .modal-content {
+        padding: 25px;
+    }
+    
+    .promotion-piece {
+        width: 55px;
+        height: 55px;
+        font-size: 40px;
+    }
+}
+
+/* ========================================
+   Animation Utilities
+======================================== */
+.animate-fade-in {
+    animation: fadeIn 0.5s ease;
+}
+
+.animate-slide-up {
+    animation: slideUp 0.5s ease;
+}
+
+.animate-pulse {
+    animation: pulse 2s ease infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.animate-shake {
+    animation: shake 0.5s ease;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-10px); }
+    75% { transform: translateX(10px); }
+}
+
+/* Move animation */
+.piece-moving {
+    transition: transform 0.2s ease;
+    z-index: 100;
+}
+
+/* Highlight animation for last move */
+.last-move-highlight {
+    animation: highlight-flash 0.5s ease;
+}
+
+@keyframes highlight-flash {
+    0% { background-color: var(--highlight-move); }
+    50% { background-color: rgba(255, 255, 0, 0.7); }
+    100% { background-color: var(--highlight-move); }
+}
+
+/* Premove styling */
+.board-square.premove {
+    background-color: rgba(0, 150, 255, 0.4) !important;
+}
+
+/* Board flipped state */
+.chessboard.flipped {
+    transform: rotate(180deg);
+}
+
+.chessboard.flipped .board-square {
+    transform: rotate(180deg);
+}
+
+/* Game status indicator */
+.game-status {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 20px 40px;
+    border-radius: 15px;
+    font-size: 24px;
+    font-weight: 700;
+    z-index: 100;
+    animation: fadeIn 0.3s ease;
+}
+
+/* Piece shadows for 3D effect */
+.board-square .piece {
+    filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.4));
+}