*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:0;margin:0;overflow:hidden}#app{width:100%;height:100vh}.container{background:#fff;border-radius:0;box-shadow:none;padding:0;width:100vw;height:100vh;margin:0;display:flex;flex-direction:row;justify-content:center;align-items:stretch}.side-panel{width:280px;padding:20px;background:#f8f9fa;display:flex;flex-direction:column;gap:16px;border-right:1px solid #dee2e6;overflow-y:auto}.board-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px;background:#fff}h1{text-align:left;color:#667eea;margin-bottom:8px;font-size:1.75em;font-weight:700}.subtitle{text-align:left;color:#666;margin-bottom:12px;font-size:.85rem;font-weight:400;line-height:1.4}.settings{margin-bottom:0;padding:12px;background:#fff;border-radius:8px;text-align:left;border:1px solid #dee2e6}.settings label{font-weight:500;font-size:.85rem;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:8px}.settings input[type=checkbox]{width:16px;height:16px;cursor:pointer}.game-info{display:flex;flex-direction:column;align-items:stretch;margin-bottom:0;padding:12px;background:#fff;border-radius:8px;gap:12px;border:1px solid #dee2e6}.player-info{font-size:.9rem;font-weight:600;white-space:nowrap}.player-x{color:#e74c3c}.player-o{color:#3498db}.current-player{color:#667eea;padding:4px 12px;background:#fff;border-radius:6px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85}}.board-container{display:flex;justify-content:center;align-items:center;background:transparent;padding:0;border-radius:0;margin:0 auto;flex:1;width:100%;height:100%}.board{display:grid;gap:0;background:#dee2e6;padding:0;border-radius:0;border:1px solid #dee2e6}.cell{aspect-ratio:1;width:auto;height:auto;background:#fff;border:.5px solid #dee2e6;cursor:pointer;font-size:20px;font-weight:700;line-height:1;transition:background .1s ease;display:flex;align-items:center;justify-content:center;position:relative;border-radius:0;box-sizing:border-box;padding:0;vertical-align:middle}.cell:hover:not(.occupied){background:#f0f4ff;box-shadow:0 0 4px #667eea26;z-index:1}.cell.occupied{cursor:default;background:#f8f9fa}.cell.threat{background:#fff3cd!important;animation:threatPulse 2s ease-in-out infinite}@keyframes threatPulse{0%,to{background:#fff3cd;box-shadow:0 0 8px #ffc1074d}50%{background:#ffe69c;box-shadow:0 0 12px #ffc10780}}.cell.winning{background:#1a305a!important}@keyframes winningPulse{0%,to{background:#d4edda;box-shadow:0 0 10px #28a74580}50%{background:#a3d9a5;box-shadow:0 0 20px #28a745cc}}.cell.x{color:#e74c3c}.cell.o{color:#3498db}.cell.last-move{box-shadow:0 0 10px #667eea73 inset;background:linear-gradient(180deg,#667eea0f,#667eea05);outline:2px solid rgba(102,126,234,.18);z-index:2}@keyframes lastMovePulse{0%{transform:scale(1);box-shadow:0 0 8px #667eea40 inset}50%{transform:scale(1.02);box-shadow:0 0 14px #667eea59 inset}to{transform:scale(1);box-shadow:0 0 8px #667eea40 inset}}.cell.last-move{animation:lastMovePulse 1.2s ease-in-out infinite}.controls{margin-top:0;display:flex;flex-direction:column;gap:10px;justify-content:stretch}button{padding:10px 16px;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s ease;font-family:inherit;width:100%}.reset-btn{background:#667eea;color:#fff;box-shadow:0 2px 8px #667eea40}.reset-btn:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px #667eea59}.reset-btn:active{transform:translateY(0);box-shadow:0 2px 4px #667eea40}.message{text-align:center;margin-top:0;padding:12px;border-radius:8px;font-size:.9rem;font-weight:600;display:none;animation:slideIn .4s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.message.show{display:block}.message.win{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.draw{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.stats{margin-top:0;text-align:left;color:#6c757d;font-size:.85rem;font-weight:500;padding:12px;background:#fff;border-radius:8px;border:1px solid #dee2e6}@media (max-width: 768px){.container{flex-direction:column}.side-panel{width:100%;height:auto;border-right:none;border-bottom:1px solid #dee2e6;padding:12px}.board-area{flex:1}h1{font-size:1.25rem;text-align:center}.subtitle{font-size:.75rem;text-align:center}.cell{font-size:10px}.game-info{flex-direction:row;justify-content:space-between}.controls{flex-direction:row}button{width:auto;flex:1}}@media (max-width: 480px){.side-panel{padding:10px}.cell{font-size:9px}h1{font-size:1rem}.subtitle{font-size:.7rem}.game-info{flex-direction:column;gap:6px;font-size:.8rem}button{padding:8px 12px;font-size:.8rem}}.multiplayer-container{display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;height:100vh;background:#1a1a2e;color:#eee;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.left-panel{background:#16213e;padding:20px;overflow-y:auto;border-right:2px solid #0f3460}.game-title h1{margin:0 0 5px;font-size:28px;color:#00d9ff}.game-title .subtitle{margin:0;color:#aaa;font-size:14px}.auth-section{margin-top:30px}.auth-tabs{display:flex;gap:10px;margin-bottom:20px}.auth-tab{flex:1;padding:10px;background:#0f3460;border:none;color:#eee;cursor:pointer;border-radius:5px;transition:all .3s}.auth-tab.active{background:#00d9ff;color:#000}.auth-form{display:none}.auth-form.active{display:flex;flex-direction:column;gap:12px}.auth-form input{padding:12px;background:#0f3460;border:1px solid #00d9ff;border-radius:5px;color:#eee;font-size:14px}.auth-form input::placeholder{color:#888}.info-text{margin-top:10px;color:#73ff00;text-align:center;line-height:1.4}.primary-btn{padding:12px;background:#00d9ff;border:none;border-radius:5px;color:#000;font-weight:700;cursor:pointer;transition:all .3s}.primary-btn:hover{background:#00b8d4;transform:translateY(-2px)}.secondary-btn{padding:10px;background:#0f3460;border:1px solid #00d9ff;border-radius:5px;color:#00d9ff;cursor:pointer;transition:all .3s;font-size:14px}.secondary-btn:hover{background:#1a4d7a}.error-message{color:#ff6b6b;font-size:13px;margin-top:10px;min-height:20px}.player-section{margin-top:30px;display:flex;flex-direction:column;flex:1;min-height:0}.player-card{background:#0f3460;padding:20px;border-radius:10px;margin-bottom:20px}.player-info h3{margin:0 0 15px;color:#00d9ff;font-size:20px}.player-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}.stat{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-label{font-size:11px;color:#aaa;text-transform:uppercase}.stat-value{font-size:20px;font-weight:700;color:#00d9ff}.game-actions{margin-top:20px;margin-bottom:20px}.logout-btn-bottom{width:100%;margin-top:auto;margin-bottom:0;padding-top:20px}.create-game-form h4{margin:0 0 15px;color:#eee;font-size:16px}.online-players{margin-top:10px;display:flex;flex-direction:column;gap:8px}.online-player{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#0f2748;border-radius:6px}.online-player .player-name{font-weight:600;color:#e6f7ff}.online-player .player-action{display:flex;align-items:center;gap:8px}.online-player .you-label{color:#aaa;font-size:13px}.online-player .challenge-btn{padding:6px 10px;border-radius:6px;background:#00d9ff;color:#000;border:none;cursor:pointer}.online-player .challenge-btn[disabled]{opacity:.5;cursor:not-allowed}.create-game-form input{width:100%;padding:10px;background:#0f3460;border:1px solid #00d9ff;border-radius:5px;color:#eee;margin-bottom:10px;box-sizing:border-box}.create-game-form.hidden,.resign-section.hidden,.rematch-section.hidden,.welcome-screen.hidden,.chess-clock.hidden,.right-panel.hidden,.left-panel.hidden,#logout-btn.hidden,#resign-btn-gameplay.hidden,#rematch-btn-gameplay.hidden{display:none}.resign-section{margin-top:15px}.danger-btn{width:100%;padding:12px;background:#f44;border:none;border-radius:5px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s;font-size:14px}.danger-btn:hover{background:#c00;transform:translateY(-2px)}.danger-btn:active{transform:translateY(0)}.leaderboard-section{margin-top:30px}.leaderboard-section h3{color:#00d9ff;font-size:18px;margin-bottom:15px}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.leaderboard-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;background:#0f3460;padding:10px;border-radius:5px;font-size:14px}.leaderboard-item .rank{font-weight:700;color:#00d9ff}.leaderboard-item .player-name{color:#eee}.leaderboard-item .player-elo{color:gold;font-weight:700}.no-data{text-align:center;color:#888;padding:20px;font-size:14px}.middle-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:#1a1a2e}.game-board-container{max-width:100%;max-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center}.welcome-screen,.waiting-screen{text-align:center;padding:40px}.welcome-screen h2,.waiting-screen h2{color:#00d9ff;margin-bottom:15px}.welcome-screen p,.waiting-screen p{color:#aaa;font-size:16px}.game-rules{margin-top:30px;text-align:left;background:#16213e;padding:20px;border-radius:10px;max-width:400px}.game-rules h4{color:#00d9ff;margin-top:0}.game-rules ul{color:#ccc;line-height:1.8}.waiting-screen code{background:#0f3460;padding:5px 10px;border-radius:5px;color:#00d9ff}.loading-spinner{width:40px;height:40px;border:4px solid #0f3460;border-top:4px solid #00d9ff;border-radius:50%;animation:spin 1s linear infinite;margin:30px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.board{display:grid;gap:0;background:#0f3460;padding:5px;border-radius:5px}.cell{width:22px;height:22px;background:#16213e;border:.5px solid #0f3460;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1;transition:background-color .2s;-webkit-user-select:none;user-select:none;color:#00d9ff;font-weight:700}.cell:hover:not(.occupied){background:#1a4d7a}.cell.occupied{cursor:default;background:#0d1b2a;font-weight:700;color:#00d9ff}.game-status{margin-top:20px;padding:15px 30px;border-radius:10px;font-size:18px;font-weight:700;text-align:center}.game-status.your-turn{background:#0f03;color:#0f0}.game-status.opponent-turn{background:#fa03;color:#fa0}.game-status.message{background:#00d9ff33;color:#00d9ff}.turn-timer{margin-top:10px;padding:10px 20px;border-radius:8px;font-size:16px;font-weight:700;text-align:center;background:#0f3460;color:#e0e0e0}.turn-timer.urgent{background:#f33;color:#fff;animation:pulse .5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.chess-clock{display:flex;align-items:center;justify-content:center;gap:30px;margin-bottom:15px;padding:15px 30px;background:#0f3460;border-radius:10px}.player-clock{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:150px;padding:10px;border-radius:8px;transition:background-color .3s ease}.player-clock.active{background:#2ecc7133;border:2px solid #2ecc71}.player-name{font-size:15px;color:#e0e0e0;font-weight:600;text-align:center}#player-name{font-size:30px;color:#fff;border-bottom:1px solid gray;margin-bottom:10px;padding-bottom:5px;text-align:center}.time-display{font-size:28px;font-weight:700;color:#00d9ff;font-family:Courier New,monospace}.player-clock.active .time-display{color:#2ecc71}.time-display.urgent{color:#f33;animation:pulse .5s infinite}.clock-divider{font-size:32px;color:#555;font-weight:700;align-self:center}.lobby-middle{display:flex;flex-direction:column;padding:20px;height:100%;width:100%;gap:20px}.welcome-header{text-align:center;padding:20px;background:#16213e;border-radius:10px}.welcome-header h2{color:#00d9ff;margin-bottom:10px;font-size:28px}.welcome-header p{color:#aaa;font-size:16px}.lobby-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0}.game-rules-section{background:#16213e;padding:25px;border-radius:10px;overflow-y:auto}.game-rules-section h3{color:#00d9ff;margin-bottom:15px;font-size:20px}.rules-list li{color:#e0e0e0;padding:12px 0 12px 25px;position:relative;font-size:15px;line-height:1.5}.rules-list li:before{content:"✓";color:#2ecc71;position:absolute;left:0;font-weight:700;font-size:18px}.leaderboard-section-middle{background:#16213e;padding:25px;border-radius:10px;overflow-y:auto}.leaderboard-section-middle h3{color:#00d9ff;margin-bottom:15px;font-size:20px}.gameplay-middle{display:flex;flex-direction:column;align-items:center;padding:20px;height:100%;gap:15px}.game-controls{display:flex;flex-direction:column;gap:15px;margin-top:15px;align-items:center}.rematch-status{color:#00d9ff;font-size:14px;text-align:center;padding:5px 0}#rematch-status-gameplay{min-height:20px}.right-panel{background:#16213e;padding:20px;overflow-y:auto;border-left:2px solid #0f3460}.right-panel h3{color:#00d9ff;font-size:18px;margin-bottom:15px}.right-panel .secondary-btn{width:100%;margin-bottom:20px}.game-sessions{display:flex;flex-direction:column;gap:12px}.game-card{background:#0f3460;padding:10px 12px;border-radius:8px;border:1px solid #1a4d7a;transition:all .3s}.game-card:hover{border-color:#00d9ff;transform:translateY(-2px)}.game-info h4{margin:0 0 6px;color:#00d9ff;font-size:15px}.game-info p{margin:3px 0;color:#ccc;font-size:12px}.game-details{color:#888!important;font-size:12px!important}.join-btn{width:100%;margin-top:10px;padding:10px;background:#00d9ff;border:none;border-radius:5px;color:#000;font-weight:700;cursor:pointer;transition:all .3s}.join-btn:hover{background:#00b8d4;transform:translateY(-2px)}.no-games{text-align:center;color:#888;padding:40px 20px;font-size:14px}.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:8px}.left-panel::-webkit-scrollbar-track,.right-panel::-webkit-scrollbar-track{background:#0f3460}.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:#00d9ff;border-radius:4px}.left-panel::-webkit-scrollbar-thumb:hover,.right-panel::-webkit-scrollbar-thumb:hover{background:#00b8d4}.rematch-section{margin-top:15px;padding:15px;background:#16213e;border-radius:8px;text-align:center}.rematch-status{margin-top:10px;color:#e0e0e0;font-size:14px}.rematch-status button{margin:10px 5px 0;padding:8px 16px;font-size:14px}.no-players{color:#fff}@media (max-width: 1200px){.multiplayer-container{grid-template-columns:300px 1fr 300px}}@media (max-width: 900px){.multiplayer-container{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.left-panel,.right-panel{max-height:400px}}.lobby-container{display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;height:100vh;padding:12px;box-sizing:border-box}.hidden{display:none!important}.player-section.hidden,.auth-section.hidden{display:none}.lobby-left-panel,.lobby-right-panel{background:#16213e;border-radius:12px;padding:20px;overflow-y:auto;display:flex;flex-direction:column}.lobby-middle-panel{background:#16213e;border-radius:12px;padding:28px;overflow-y:auto;display:flex;flex-direction:column}.lobby-left-panel .game-title{text-align:center;margin-bottom:30px}.lobby-left-panel .game-title h1{margin:0;font-size:28px;color:#00d9ff}.lobby-left-panel .game-title .subtitle{margin:5px 0 0;color:#aaa;font-size:14px}.lobby-left-panel .player-section{display:flex;flex-direction:column;flex:1;min-height:0}.lobby-left-panel .game-actions{margin-top:20px;margin-bottom:20px}.lobby-left-panel .logout-btn-bottom{width:100%;margin-top:auto;padding-top:20px}.welcome-header{text-align:center;margin-bottom:30px}.welcome-header h2{color:#00d9ff;margin:0 0 10px;font-size:32px}.welcome-header p{color:#aaa;margin:0}.lobby-content{display:grid;grid-template-columns:1fr;gap:20px;flex:1}.game-rules-section,.leaderboard-section-middle{background:#0f3460;padding:25px;border-radius:10px}.game-rules-section h3,.leaderboard-section-middle h3{color:#00d9ff;margin:0 0 20px;font-size:20px}.rules-list{list-style:none;padding:0;margin:0}.rules-list li{padding:10px 0 10px 30px;color:#eee;border-bottom:1px solid rgba(255,255,255,.1);position:relative}.rules-list li:before{content:"✓";position:absolute;left:5px;color:#00d9ff;font-weight:700}.rules-list li:last-child{border-bottom:none}.lobby-right-panel h3{margin:0 0 20px;color:#00d9ff;font-size:20px}.lobby-right-panel #refresh-games-btn{width:100%;margin-bottom:20px}.gameplay-container{display:flex;flex-direction:row;min-height:100vh;width:100vw;padding:20px;gap:20px;box-sizing:border-box;background:#0f3460;overflow-y:auto}.gameplay-left-panel{width:250px;background:#16213e;border-radius:15px;padding:25px;display:flex;flex-direction:column;flex-shrink:0}.gameplay-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:20px}.chess-clock{display:flex;align-items:center;gap:15px;margin-bottom:15px;padding:12px 30px;background:#16213e;border-radius:15px}.player-symbol{font-size:20px;color:#00d9ff}.player-name{font-size:16px;font-weight:700;color:#00d9ff}.time-display{font-size:22px;font-weight:700;color:#eee;font-family:Courier New,monospace;padding:4px 8px;border-radius:5px;background:#0f3460;transition:all .3s ease}.time-display.active{background:#25c92566;color:#fff;box-shadow:0 0 10px #228b2280}.time-display.urgent{color:#ff4757;animation:pulse 1s infinite}.time-display.urgent.active{color:#ff4757;background:#ff475733}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.clock-divider{font-size:24px;color:#666;font-weight:700;margin:0 5px}.game-board-container{margin-bottom:20px;display:flex;justify-content:center;align-items:center}.board{display:grid;gap:0;background:#555;border:2px solid #00d9ff;padding:1px}.cell{width:28px;height:28px;background:#1a1a2e;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:background .2s;color:#00d9ff;font-weight:700}.cell:hover:not(.occupied){background:#2a2a3e}.cell.occupied{color:#00d9ff}.cell.mark-o{color:#35ff2e}.cell.mark-x{color:#eaeff7}.game-controls{display:flex;flex-direction:column;gap:15px;align-items:stretch}.game-controls button{width:100%;padding:12px;font-size:14px}.rematch-status{margin-top:10px;padding:15px;background:#0f3460;border-radius:8px;text-align:center}.rematch-status p{margin:0 0 10px;color:#eee}.rematch-status button{margin:5px}.local-match-history{margin-top:2rem;color:#fff}