body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden;overflow-y:auto;-webkit-user-select:none;user-select:none}.app,body{min-height:100vh}.app{align-items:center;background:inherit;display:flex;justify-content:center;padding:20px 0;width:100vw}.loading{color:#bdc3c7;font-size:24px}.settings-menu{align-items:center;background:linear-gradient(135deg,#2c3e50,#34495e);display:flex;height:100%;justify-content:center;width:100%}.settings-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#34495ee6;border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 20px 40px #0000004d;max-width:600px;padding:40px;width:90%}.settings-title{color:#ecf0f1;font-size:2.5em;text-align:center;text-shadow:0 2px 4px #0000004d}.settings-section,.settings-title{margin-bottom:30px}.settings-section h2{border-bottom:2px solid #3498db;color:#bdc3c7;font-size:1.4em;margin-bottom:15px;padding-bottom:5px}.timer-options{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.timer-option{background:#3498db33;border:2px solid #3498db;border-radius:10px;color:#ecf0f1;cursor:pointer;font-size:14px;font-weight:500;padding:12px 16px;transition:all .3s ease}.timer-option:hover{background:#3498db4d;box-shadow:0 4px 8px #3498db4d;transform:translateY(-2px)}.timer-option.selected{background:#3498db;box-shadow:0 4px 12px #3498db66;color:#fff}.player-color-options{display:flex;gap:15px;justify-content:center}.color-option{background:#95a5a633;border:2px solid #95a5a6;border-radius:10px;color:#ecf0f1;cursor:pointer;font-size:16px;font-weight:500;min-width:100px;padding:15px 25px;transition:all .3s ease}.color-option:hover{background:#95a5a64d;transform:translateY(-2px)}.color-option.selected{background:#27ae60;border-color:#27ae60;box-shadow:0 4px 12px #27ae6066;color:#fff}.board-options{display:flex;flex-direction:column;gap:15px}.checkbox-option{align-items:center;color:#ecf0f1;cursor:pointer;display:flex;font-size:16px}.checkbox-option input[type=checkbox]{accent-color:#3498db;height:20px;margin-right:12px;width:20px}.settings-actions{display:flex;gap:20px;justify-content:center;margin-top:40px}.start-button{background:linear-gradient(135deg,#27ae60,#2ecc71);border:none;border-radius:10px;box-shadow:0 4px 12px #27ae604d;color:#fff;cursor:pointer;font-size:18px;font-weight:700;padding:15px 40px;transition:all .3s ease}.start-button:hover{box-shadow:0 6px 16px #27ae6066;transform:translateY(-2px)}.exit-button{background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:10px;box-shadow:0 4px 12px #e74c3c4d;color:#fff;cursor:pointer;font-size:18px;font-weight:700;padding:15px 40px;transition:all .3s ease}.exit-button:hover{box-shadow:0 6px 16px #e74c3c66;transform:translateY(-2px)}.settings-help{border-top:1px solid #ffffff1a;margin-top:30px;padding-top:20px}.settings-help h3{color:#bdc3c7;font-size:1.1em;margin-bottom:10px}.settings-help ul{display:flex;flex-wrap:wrap;gap:15px;list-style:none}.settings-help li{color:#95a5a6;font-size:14px}.settings-help kbd{background:#ffffff1a;border-radius:4px;font-family:monospace;margin-right:5px;padding:4px 8px}.game-container{grid-gap:20px;box-sizing:border-box;display:grid;gap:20px;grid-template-areas:"opponent-timer opponent-timer" "board controls" "player-timer player-timer";grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;height:100%;max-width:1200px;padding:10px;width:100%}.timer-container.opponent{grid-area:opponent-timer}.board-container{gap:10px;grid-area:board}.board-container,.controls-container{align-items:center;display:flex;flex-direction:column;justify-content:center}.controls-container{grid-area:controls;min-width:200px}.move-navigator-container{display:flex;justify-content:center;margin:15px 0;width:100%}.timer-container.player{grid-area:player-timer}.chess-board-container{align-items:center;display:flex;flex-direction:column;gap:15px}.chess-board{aspect-ratio:1;border:3px solid #34495e;border-radius:8px;box-shadow:0 8px 24px #0000004d;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);height:min(90vw,90vh);overflow:hidden;width:min(90vw,90vh)}.chess-square{align-items:center;cursor:pointer;display:flex;height:100%;justify-content:center;position:relative;transition:all .2s ease;width:100%}.chess-square.light{background-color:#f0d9b5}.chess-square.dark{background-color:#b58863}.chess-square:hover{filter:brightness(1.1)}.chess-square.highlight-selected{background-color:#ff6b6b!important;box-shadow:inset 0 0 0 3px #f44}.chess-square.highlight-valid{background-color:#90ee90!important;box-shadow:inset 0 0 0 2px #27ae60}.chess-square.highlight-valid:after{background:#27ae60;border-radius:50%;content:"";height:30%;opacity:.7;position:absolute;width:30%}.chess-square.has-piece.highlight-valid:after{background:#27ae604d;border:3px solid #27ae60;border-radius:0;height:100%;width:100%}.chess-square.highlight-lastMove{animation:lastMovePulse 2s ease-in-out;background-color:#f39c12!important;box-shadow:inset 0 0 0 3px #e67e22}@keyframes lastMovePulse{0%{box-shadow:inset 0 0 0 3px #e67e22;opacity:1}50%{box-shadow:inset 0 0 0 5px #f39c12;opacity:.8}to{box-shadow:inset 0 0 0 3px #e67e22;opacity:1}}.chess-square.in-check{animation:checkPulse 1s infinite;background-color:#f44!important}@keyframes checkPulse{0%,to{opacity:1}50%{opacity:.7}}.chess-piece{cursor:pointer;font-size:min(12vw,12vh,100px);text-shadow:1px 1px 2px #00000080;transition:all .2s ease;-webkit-user-select:none;user-select:none}.chess-piece:hover{transform:scale(1.1)}.chess-piece.white{color:#fff;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.8))}.chess-piece.black{color:#2c3e50;filter:drop-shadow(1px 1px 2px rgba(255,255,255,.3))}.file-label,.rank-label{color:#0009;font-size:12px;font-weight:700;pointer-events:none;position:absolute}.rank-label{left:2px;top:2px}.file-label{bottom:2px;right:2px}.chess-square.light .file-label,.chess-square.light .rank-label{color:#8b4513}.chess-square.dark .file-label,.chess-square.dark .rank-label{color:#f0d9b5}.board-info{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#34495ecc;border-radius:10px;display:flex;gap:20px;padding:10px 20px}.current-player{color:#ecf0f1;font-weight:700}.current-player .white{color:#fff}.current-player .black{background:#fff;border-radius:4px;color:#2c3e50;padding:2px 6px}.check-indicator{animation:checkBlink 1s infinite;color:#e74c3c;font-weight:700}@keyframes checkBlink{0%,to{opacity:1}50%{opacity:.5}}.last-move{color:#95a5a6;font-size:14px}.game-timer{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#34495ee6;border:2px solid #34495e;border-radius:15px;min-width:200px;padding:20px;text-align:center;transition:all .3s ease}.game-timer.active{background:#e74c3c1a;border-color:#e74c3c;box-shadow:0 0 20px #e74c3c4d}.game-timer.low-time{background:#e74c3c4d;border-color:#e74c3c}.timer-label{color:#bdc3c7;font-size:14px;font-weight:500;margin-bottom:8px}.player-info{align-items:center;display:flex;flex-direction:column;gap:4px}.player-name{color:#ecf0f1;font-size:18px;font-weight:700;text-shadow:0 1px 2px #0000004d}.player-rating{font-size:14px;text-shadow:0 1px 2px #0000004d}.player-rating,.user-rating{color:#f39c12;font-weight:600}.user-rating{margin-left:8px}.timer-display{color:#ecf0f1;font-family:Courier New,monospace;font-size:2.5em;font-weight:700;text-shadow:0 2px 4px #0000004d}.game-timer.unlimited .timer-display{color:#3498db;font-size:3em}.timer-indicator{background:#e74c3c4d;border-radius:2px;height:4px;margin-top:10px;overflow:hidden}.pulse{background:#e74c3c;height:100%;width:100%}.game-controls{align-items:center;gap:20px}.control-group,.game-controls{display:flex;flex-direction:column}.control-group{gap:10px;width:100%}.control-button{align-items:center;background:#3498db33;border:2px solid #3498db;border-radius:10px;color:#ecf0f1;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:12px 16px;transition:all .3s ease;width:100%}.control-button:hover:not(:disabled){background:#3498db4d;box-shadow:0 4px 8px #3498db4d;transform:translateY(-2px)}.control-button:disabled{cursor:not-allowed;opacity:.5}.control-button.restart{background:#27ae6033;border-color:#27ae60}.control-button.restart:hover:not(:disabled){background:#27ae604d;box-shadow:0 4px 8px #27ae604d}.control-button.settings{background:#f39c1233;border-color:#f39c12}.control-button.settings:hover:not(:disabled){background:#f39c124d;box-shadow:0 4px 8px #f39c124d}.button-icon{font-size:16px}.button-text{font-weight:500}.control-help{background:#34495e80;border:1px solid #ffffff1a;border-radius:8px;margin-top:20px;padding:15px}.help-item{align-items:center;color:#95a5a6;display:flex;font-size:12px;gap:8px;margin-bottom:5px}.help-item:last-child{margin-bottom:0}.help-item kbd{background:#ffffff1a;border-radius:3px;font-family:monospace;font-size:11px;min-width:20px;padding:2px 6px;text-align:center}.game-result-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.game-result-modal{animation:modalSlideIn .3s ease-out;background:linear-gradient(135deg,#2c3e50,#34495e);border:2px solid #ffffff1a;border-radius:20px;box-shadow:0 20px 40px #00000080;max-width:500px;padding:40px;text-align:center;width:90%}.result-header{margin-bottom:30px}.result-emoji{font-size:4em;margin-bottom:15px}.result-title{color:#ecf0f1;font-size:2.5em;margin-bottom:10px;text-shadow:0 2px 4px #0000004d}.result-content{margin-bottom:30px}.result-message{color:#bdc3c7;font-size:1.2em;margin-bottom:20px}.result-details{background:#34495e80;border:1px solid #ffffff1a;border-radius:10px;display:flex;flex-direction:column;gap:10px;padding:20px}.detail-item{align-items:center;display:flex;justify-content:space-between}.detail-label{color:#95a5a6;font-weight:500}.detail-value{color:#ecf0f1;font-weight:700}.detail-value.white{color:#fff}.detail-value.black{background:#fff;border-radius:4px;color:#2c3e50;padding:2px 8px}.result-actions{display:flex;gap:20px;justify-content:center;margin-bottom:20px}.result-button{align-items:center;border:none;border-radius:10px;cursor:pointer;display:flex;font-size:16px;font-weight:700;gap:8px;padding:15px 25px;transition:all .3s ease}.result-button.primary{background:linear-gradient(135deg,#27ae60,#2ecc71);box-shadow:0 4px 12px #27ae604d;color:#fff}.result-button.primary:hover{box-shadow:0 6px 16px #27ae6066;transform:translateY(-2px)}.result-button.secondary{background:linear-gradient(135deg,#3498db,#2980b9);box-shadow:0 4px 12px #3498db4d;color:#fff}.result-button.secondary:hover{box-shadow:0 6px 16px #3498db66;transform:translateY(-2px)}.result-help{border-top:1px solid #ffffff1a;padding-top:15px}.help-text{color:#95a5a6;font-size:14px}.help-text kbd{background:#ffffff1a;border-radius:3px;font-family:monospace;margin:0 2px;padding:3px 6px}.game-mode-options{display:flex;flex-direction:column;gap:20px;margin-top:20px}.mode-option{align-items:center;background:#3498db1a;border:2px solid #3498db;border-radius:15px;color:#ecf0f1;cursor:pointer;display:flex;gap:20px;padding:25px;text-align:left;transition:all .3s ease;width:100%}.mode-option:hover{background:#3498db33;box-shadow:0 8px 20px #3498db4d;transform:translateY(-3px)}.mode-option.local{background:#27ae601a;border-color:#27ae60}.mode-option.local:hover{background:#27ae6033;box-shadow:0 8px 20px #27ae604d}.mode-option.multiplayer{background:#e74c3c1a;border-color:#e74c3c}.mode-option.multiplayer:hover{background:#e74c3c33;box-shadow:0 8px 20px #e74c3c4d}.mode-icon{font-size:3em;min-width:80px;text-align:center}.mode-content h3{color:#ecf0f1;font-size:1.5em;margin-bottom:8px}.mode-content p{color:#bdc3c7;font-size:1em;line-height:1.4}.toast-container{display:flex;flex-direction:column;gap:10px;position:fixed;right:20px;top:20px;z-index:2000}.toast{animation:toastSlideIn .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#34495ef2;border-left:4px solid #3498db;border-radius:10px;box-shadow:0 8px 24px #0000004d;color:#ecf0f1;max-width:400px;min-width:300px;padding:15px 20px}.toast.success{border-left-color:#27ae60}.toast.error{border-left-color:#e74c3c}.toast.warning{border-left-color:#f39c12}.toast.info{border-left-color:#3498db}@keyframes toastSlideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.toast-header{align-items:center;display:flex;gap:10px;margin-bottom:5px}.toast-icon{font-size:1.2em}.toast-title{font-size:1em;font-weight:700}.toast-message{color:#bdc3c7;font-size:.9em;line-height:1.4}.toast-close{align-items:center;background:none;border:none;color:#95a5a6;cursor:pointer;display:flex;font-size:1.2em;height:20px;justify-content:center;padding:0;position:absolute;right:15px;top:10px;width:20px}.toast-close:hover{color:#ecf0f1}.auth-form{width:100%}.input-group{margin-bottom:20px}.username-input-container{align-items:center;background:#34495e4d;border:2px solid #34495e;border-radius:10px;display:flex;position:relative;transition:all .3s ease}.username-input-container.success{background:#27ae601a;border-color:#27ae60}.username-input-container.error{background:#e74c3c1a;border-color:#e74c3c}.username-input-container.checking{background:#f39c121a;border-color:#f39c12}.username-input{background:#0000;border:none;border-radius:8px;color:#ecf0f1;flex:1 1;font-size:16px;outline:none;padding:15px 20px}.username-input::placeholder{color:#95a5a6}.username-input:disabled{cursor:not-allowed;opacity:.7}.input-status{align-items:center;display:flex;padding:0 15px}.status-icon{font-size:1.2em}.status-icon.checking{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-message{border-radius:6px;font-size:14px;font-weight:500;margin-top:8px;padding:8px 12px}.status-message.success{background:#27ae6033;border:1px solid #27ae604d;color:#27ae60}.status-message.error{background:#e74c3c33;border:1px solid #e74c3c4d;color:#e74c3c}.status-message.checking{background:#f39c1233;border:1px solid #f39c124d;color:#f39c12}.error-message{align-items:center;background:#e74c3c33;border:1px solid #e74c3c4d;border-radius:10px;color:#e74c3c;display:flex;font-weight:500;gap:10px;margin-top:20px;padding:15px}.error-icon{font-size:1.2em}.lobby-header{justify-content:space-between;margin-bottom:30px}.lobby-header,.user-info{align-items:center;display:flex}.user-info{gap:15px}.username{color:#ecf0f1;font-size:1.1em;font-weight:500}.sign-out-button{background:#e74c3c33;border:2px solid #e74c3c;border-radius:8px;color:#e74c3c;cursor:pointer;font-size:1.2em;padding:8px 12px;transition:all .3s ease}.sign-out-button:hover{background:#e74c3c4d;transform:translateY(-2px)}.lobby-tabs{background:#34495e4d;border-radius:10px;display:flex;gap:5px;margin-bottom:30px;padding:5px}.tab-button{background:#0000;border:none;border-radius:8px;color:#bdc3c7;cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:12px 20px;transition:all .3s ease}.tab-button:hover{background:#3498db33;color:#ecf0f1}.tab-button.active{background:#3498db;box-shadow:0 2px 8px #3498db4d;color:#fff}.tab-content{min-height:400px}.lobby-actions{margin-top:30px;text-align:center}.game-settings{gap:25px;margin-bottom:30px}.game-settings,.setting-group{display:flex;flex-direction:column}.setting-group{gap:10px}.setting-group label{color:#bdc3c7;font-size:1.1em;font-weight:500}.visibility-options{display:flex;gap:10px}.visibility-option{background:#34495e4d;border:2px solid #34495e;border-radius:10px;color:#ecf0f1;cursor:pointer;flex:1 1;font-size:16px;font-weight:500;padding:15px 20px;transition:all .3s ease}.visibility-option:hover{background:#34495e80;transform:translateY(-2px)}.visibility-option.selected{background:#3498db;border-color:#3498db;box-shadow:0 4px 12px #3498db66;color:#fff}.join-form{display:flex;flex-direction:column;gap:20px}.game-code-input{background:#34495e4d;border:2px solid #34495e;border-radius:10px;color:#ecf0f1;font-size:18px;font-weight:700;letter-spacing:2px;outline:none;padding:15px 20px;text-align:center;transition:all .3s ease}.game-code-input:focus{background:#3498db1a;border-color:#3498db}.game-code-input::placeholder{color:#95a5a6;font-weight:400;letter-spacing:normal}.public-games-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.refresh-button{background:#3498db33;border:2px solid #3498db;border-radius:8px;color:#3498db;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .3s ease}.refresh-button:hover:not(:disabled){background:#3498db4d;transform:translateY(-2px)}.refresh-button:disabled{cursor:not-allowed;opacity:.5}.loading-games{color:#bdc3c7;font-size:1.1em}.loading-games,.no-games{padding:40px;text-align:center}.no-games{color:#95a5a6}.no-games p{margin-bottom:10px}.games-list{display:flex;flex-direction:column;gap:15px}.game-item{align-items:center;background:#34495e4d;border:2px solid #34495e;border-radius:10px;display:flex;justify-content:space-between;padding:20px;transition:all .3s ease}.game-item:hover{background:#34495e80;border-color:#3498db;transform:translateY(-2px)}.game-info{display:flex;flex-direction:column;gap:8px}.game-code{color:#ecf0f1;font-size:1.2em;font-weight:700;letter-spacing:1px}.game-details{color:#bdc3c7;display:flex;font-size:14px;gap:20px}.player-name,.time-control{align-items:center;display:flex;gap:5px}.join-button{background:linear-gradient(135deg,#27ae60,#2ecc71);border:none;border-radius:8px;box-shadow:0 4px 12px #27ae604d;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:12px 24px;transition:all .3s ease}.join-button:hover{box-shadow:0 6px 16px #27ae6066;transform:translateY(-2px)}.watch-button{background:linear-gradient(135deg,#3498db,#2980b9);border:none;border-radius:8px;box-shadow:0 4px 12px #3498db4d;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:12px 24px;transition:all .3s ease}.watch-button:hover{box-shadow:0 6px 16px #3498db66;transform:translateY(-2px)}.spectating-banner{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#8e44ad,#9b59b6);border-bottom:2px solid #ffffff1a;box-shadow:0 4px 12px #8e44ad4d;color:#fff;display:flex;justify-content:space-between;left:0;padding:15px 20px;position:fixed;right:0;top:0;z-index:100}.spectating-info{align-items:center;display:flex;flex:1 1;gap:15px}.spectating-icon{animation:spectatorPulse 2s ease-in-out infinite;font-size:1.5em}@keyframes spectatorPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.spectating-text{font-size:1.2em;font-weight:700;text-shadow:0 2px 4px #0000004d}.game-players{background:#ffffff1a;border:1px solid #fff3;border-radius:20px;color:#ecf0f1;font-size:1em;font-weight:600;padding:5px 12px}.current-turn{color:#f1c40f;font-size:.9em;font-weight:600;text-shadow:0 1px 2px #0000004d}.spectator-controls{align-items:center;display:flex;gap:8px}.spectator-view-btn{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:2px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:8px 12px;transition:all .3s ease}.spectator-view-btn:hover{background:#fff3;border-color:#ffffff80;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.spectator-view-btn.active{background:#fff;border-color:#fff;box-shadow:0 4px 12px #ffffff4d;color:#8e44ad}.spectator-view-btn.active:hover{background:#f8f9fa;box-shadow:0 6px 16px #fff6;transform:translateY(-2px)}.recent-games{display:flex;flex-direction:column;gap:10px;margin-top:15px}.recent-game{align-items:center;background:#34495e4d;border:1px solid #ffffff1a;border-radius:8px;display:flex;justify-content:space-between;padding:12px 15px}.recent-game .game-code{color:#3498db;font-size:1em;font-weight:700}.recent-game .game-status{color:#95a5a6;font-size:.9em;text-transform:capitalize}.recent-game .game-time{color:#7f8c8d;font-size:.8em}@media (max-width:1024px){.game-container{gap:15px;grid-template-areas:"opponent-timer" "board" "controls" "player-timer";grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;padding:5px}.chess-board{height:min(95vw,85vh);width:min(95vw,85vh)}.chess-piece{font-size:min(8vw,8vh,60px)}.controls-container{min-width:auto;width:100%}.move-navigator-container{margin:10px 0}}@media (max-width:768px){.app{padding:10px 0}.game-container{gap:10px;padding:80px 5px 5px}.spectating-banner{align-items:stretch;flex-direction:column;gap:10px;padding:10px 15px}.spectating-info{flex-wrap:wrap;gap:8px;justify-content:center}.spectating-text{font-size:1em}.game-players{font-size:.9em;padding:4px 8px}.current-turn{font-size:.8em}.spectator-controls{gap:6px;justify-content:center}.spectator-view-btn{font-size:12px;padding:6px 10px}.chess-board{border-width:2px;height:min(98vw,80vh);width:min(98vw,80vh)}.chess-piece{font-size:min(10vw,10vh,50px)}.settings-container{padding:20px}.settings-title{font-size:2em}.timer-options{grid-template-columns:repeat(2,1fr)}.player-color-options{flex-direction:column}.game-timer{min-width:auto;padding:15px}.timer-display{font-size:2em}.control-button{font-size:13px;padding:10px 12px}}@media (max-width:480px){.app{padding:5px 0}.game-container{gap:8px;padding:3px}.chess-board{border-width:1px;height:min(100vw - 10px,75vh);width:min(100vw - 10px,75vh)}.chess-piece{font-size:min(12vw,12vh,40px)}.game-result-modal{padding:20px}.result-title{font-size:2em}.result-actions{flex-direction:column}.game-timer{padding:10px}.timer-display{font-size:1.8em}.player-name{font-size:16px}.control-button{font-size:12px;padding:8px 10px}.move-navigator-container{margin:5px 0}.chess-square{min-height:0;min-width:0}.file-label,.rank-label{font-size:10px}}@media (max-width:360px){.chess-board{height:min(100vw - 6px,70vh);width:min(100vw - 6px,70vh)}.chess-piece{font-size:min(14vw,14vh,35px)}.file-label,.rank-label{font-size:8px}}.captured-pieces{align-items:center;background:#34495e4d;border:1px solid #ffffff1a;border-radius:8px;display:flex;margin-top:8px;min-height:40px;padding:8px 12px}.captured-pieces.empty{opacity:.5}.captured-pieces-container{align-items:center;display:flex;gap:8px;width:100%}.captured-pieces-list{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;gap:4px}.captured-piece{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;display:flex;height:28px;justify-content:center;transition:all .2s ease;width:28px}.captured-piece:hover{background:#fff3;transform:scale(1.1)}.captured-piece-image{height:20px;object-fit:contain;pointer-events:none;width:20px}.material-advantage{background:#27ae6033;border:1px solid #27ae604d;border-radius:4px;color:#27ae60;font-size:14px;font-weight:700;min-width:32px;padding:4px 8px;text-align:center}.captured-pieces.white .captured-piece{background:#ffffff26;border-color:#ffffff4d}.captured-pieces.black .captured-piece{background:#2c3e504d;border-color:#2c3e5080}.captured-piece{animation:captureAppear .3s ease-out}@keyframes captureAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.captured-pieces{min-height:32px;padding:6px 8px}.captured-piece{height:24px;width:24px}.captured-piece-image{height:16px;width:16px}.material-advantage{font-size:12px;min-width:28px;padding:2px 6px}}@media (max-width:480px){.captured-pieces{min-height:28px;padding:4px 6px}.captured-piece{gap:2px;height:20px;width:20px}.captured-piece-image{height:14px;width:14px}.material-advantage{font-size:11px;min-width:24px;padding:2px 4px}}.captured-piece.queen{background:#f39c1233;border-color:#f39c12}.captured-piece.rook{background:#e74c3c33;border-color:#e74c3c}.captured-piece:after{background:#000c;border-radius:4px;bottom:100%;color:#fff;content:attr(data-piece-type);font-size:12px;left:50%;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s ease;white-space:nowrap;z-index:1000}.captured-piece:hover:after{opacity:1}.pawn-promotion-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.pawn-promotion-modal{animation:slideIn .3s ease-out;background:linear-gradient(135deg,#2c3e50,#34495e);border:2px solid #ffffff1a;border-radius:16px;box-shadow:0 20px 40px #0000004d;max-height:90vh;max-width:500px;outline:none;overflow-y:auto;padding:24px;width:90%}.pawn-promotion-header{margin-bottom:24px;text-align:center}.pawn-promotion-header h3{color:#ecf0f1;font-size:24px;font-weight:600;margin:0 0 8px;text-shadow:0 2px 4px #0000004d}.pawn-promotion-header p{color:#bdc3c7;font-size:16px;margin:0;opacity:.9}.pawn-promotion-pieces{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-bottom:24px}.promotion-piece-button{align-items:center;background:linear-gradient(135deg,#3498db,#2980b9);border:2px solid #fff3;border-radius:12px;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;gap:8px;min-height:120px;overflow:hidden;padding:20px 16px;position:relative;transition:all .2s ease}.promotion-piece-button:hover{background:linear-gradient(135deg,#3cb371,#2e8b57);border-color:#fff6;box-shadow:0 8px 16px #0003;transform:translateY(-2px)}.promotion-piece-button:active{box-shadow:0 4px 8px #0003;transform:translateY(0)}.promotion-piece-button:focus{border-color:#f39c12;box-shadow:0 0 0 3px #f39c124d;outline:none}.piece-image-container{align-items:center;background:#ffffff1a;border-radius:8px;display:flex;height:48px;justify-content:center;margin-bottom:4px;width:48px}.promotion-piece-image{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));height:40px;object-fit:contain;width:40px}.piece-image-container.text-fallback{color:#ecf0f1;font-size:24px;font-weight:700;text-shadow:0 2px 4px #00000080}.piece-name{color:#ecf0f1;font-size:16px;font-weight:600;text-shadow:0 1px 2px #0000004d}.piece-shortcut{color:#bdc3c7;font-size:12px;font-weight:500;opacity:.8}.pawn-promotion-footer{border-top:1px solid #ffffff1a;padding-top:16px;text-align:center}.keyboard-hint{color:#95a5a6;font-size:14px;line-height:1.4;margin:0 0 16px}.cancel-button{background:#0000;border:2px solid #e74c3c;border-radius:6px;color:#e74c3c;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease}.cancel-button:hover{background:#e74c3c;color:#fff}.cancel-button:focus{box-shadow:0 0 0 3px #e74c3c4d;outline:none}.promotion-piece-button.queen{background:linear-gradient(135deg,#9b59b6,#8e44ad)}.promotion-piece-button.queen:hover{background:linear-gradient(135deg,#af7ac5,#9b59b6)}.promotion-piece-button.rook{background:linear-gradient(135deg,#e67e22,#d35400)}.promotion-piece-button.rook:hover{background:linear-gradient(135deg,#f39c12,#e67e22)}.promotion-piece-button.bishop{background:linear-gradient(135deg,#27ae60,#229954)}.promotion-piece-button.bishop:hover{background:linear-gradient(135deg,#2ecc71,#27ae60)}.promotion-piece-button.knight{background:linear-gradient(135deg,#e74c3c,#c0392b)}.promotion-piece-button.knight:hover{background:linear-gradient(135deg,#ec7063,#e74c3c)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:768px){.pawn-promotion-modal{margin:16px;max-width:none;padding:20px;width:calc(100% - 32px)}.pawn-promotion-pieces{gap:12px;grid-template-columns:repeat(2,1fr)}.promotion-piece-button{min-height:100px;padding:16px 12px}.piece-image-container{height:40px;width:40px}.promotion-piece-image{height:32px;width:32px}.piece-name{font-size:14px}.piece-shortcut{font-size:11px}}@media (max-width:480px){.pawn-promotion-modal{padding:16px}.pawn-promotion-header h3{font-size:20px}.pawn-promotion-header p{font-size:14px}.promotion-piece-button{min-height:80px;padding:12px 8px}.piece-image-container{height:32px;width:32px}.promotion-piece-image{height:24px;width:24px}.piece-name{font-size:12px}.piece-shortcut{font-size:10px}.keyboard-hint{font-size:12px}}@media (prefers-contrast:high){.pawn-promotion-modal{background:#000;border-color:#fff}.promotion-piece-button{background:#333;border-color:#fff;color:#fff}.promotion-piece-button:hover{background:#555}}@media (prefers-reduced-motion:reduce){.pawn-promotion-modal,.pawn-promotion-overlay,.promotion-piece-button{animation:none;transition:none}.promotion-piece-button:hover{transform:none}}.draw-request-confirm-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.draw-request-confirm-modal{animation:modalSlideIn .3s ease-out;background:linear-gradient(135deg,#2c3e50,#34495e);border:2px solid #3498db;border-radius:16px;box-shadow:0 20px 40px #0000004d;max-width:400px;padding:32px;text-align:center;width:90%}.draw-request-confirm-icon{display:block;font-size:48px;margin-bottom:16px}.draw-request-confirm-title{color:#ecf0f1;font-size:24px;font-weight:600;margin-bottom:12px;text-shadow:0 2px 4px #0000004d}.draw-request-confirm-message{color:#bdc3c7;font-size:16px;line-height:1.5;margin-bottom:24px}.draw-request-confirm-buttons{display:flex;gap:12px;justify-content:center}.draw-request-confirm-button{border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;min-width:100px;padding:12px 24px;text-transform:uppercase;transition:all .2s ease}.draw-request-confirm-button.confirm{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 4px 12px #e74c3c4d;color:#fff}.draw-request-confirm-button.confirm:hover{background:linear-gradient(135deg,#c0392b,#a93226);box-shadow:0 6px 16px #e74c3c66;transform:translateY(-2px)}.draw-request-confirm-button.cancel{background:linear-gradient(135deg,#95a5a6,#7f8c8d);box-shadow:0 4px 12px #95a5a64d;color:#fff}.draw-request-confirm-button.cancel:hover{background:linear-gradient(135deg,#7f8c8d,#6c7b7d);box-shadow:0 6px 16px #95a5a666;transform:translateY(-2px)}.draw-request-confirm-button:active{transform:translateY(0)}@media (max-width:480px){.draw-request-confirm-modal{margin:16px;padding:24px}.draw-request-confirm-title{font-size:20px}.draw-request-confirm-message{font-size:14px}.draw-request-confirm-buttons{flex-direction:column}.draw-request-confirm-button{width:100%}}.confirm-modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.confirm-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;bottom:0;left:0;position:absolute;right:0;top:0}.confirm-modal-content{animation:modalSlideIn .3s ease-out;background:linear-gradient(135deg,#2c3e50,#34495e);border:2px solid #3498db;border-radius:16px;box-shadow:0 20px 40px #0000004d;max-width:400px;padding:32px;position:relative;text-align:center;width:90%}.confirm-modal-title{color:#ecf0f1;font-size:24px;font-weight:600;margin:0 0 16px;text-shadow:0 2px 4px #0000004d}.confirm-modal-message{color:#bdc3c7;font-size:16px;line-height:1.5;margin-bottom:24px}.confirm-modal-actions{display:flex;gap:12px;justify-content:center}.confirm-button{border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;min-width:100px;padding:12px 24px;text-transform:uppercase;transition:all .2s ease}.confirm-button.confirm{background:linear-gradient(135deg,#27ae60,#229954);box-shadow:0 4px 12px #27ae604d;color:#fff}.confirm-button.confirm:hover{background:linear-gradient(135deg,#229954,#1e8449);box-shadow:0 6px 16px #27ae6066;transform:translateY(-2px)}.confirm-button.cancel{background:linear-gradient(135deg,#95a5a6,#7f8c8d);box-shadow:0 4px 12px #95a5a64d;color:#fff}.confirm-button.cancel:hover{background:linear-gradient(135deg,#7f8c8d,#6c7b7d);box-shadow:0 6px 16px #95a5a666;transform:translateY(-2px)}.confirm-button:active{transform:translateY(0)}.confirm-modal.draw-request .confirm-modal-content{border-color:#e74c3c}.confirm-modal.draw-request .confirm-button.confirm{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 4px 12px #e74c3c4d}.confirm-modal.draw-request .confirm-button.confirm:hover{background:linear-gradient(135deg,#c0392b,#a93226);box-shadow:0 6px 16px #e74c3c66}.confirm-modal.draw-offer .confirm-modal-content{border-color:#f39c12}.confirm-modal.draw-offer .confirm-modal-content:before{animation:pulse 2s infinite;content:"🤝";display:block;font-size:48px;margin-bottom:16px}@media (max-width:480px){.confirm-modal-content{margin:16px;padding:24px}.confirm-modal-title{font-size:20px}.confirm-modal-message{font-size:14px}.confirm-modal-actions{flex-direction:column}.confirm-button{width:100%}}.draw-offer-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.draw-offer-modal{animation:modalSlideIn .3s ease-out;background:linear-gradient(135deg,#2c3e50,#34495e);border:2px solid #f39c12;border-radius:16px;box-shadow:0 20px 40px #0000004d;max-width:400px;padding:32px;text-align:center;width:90%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.draw-offer-icon{animation:pulse 2s infinite;display:block;font-size:48px;margin-bottom:16px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.draw-offer-title{color:#ecf0f1;font-size:24px;font-weight:600;margin-bottom:12px;text-shadow:0 2px 4px #0000004d}.draw-offer-message{color:#bdc3c7;font-size:16px;line-height:1.5;margin-bottom:8px}.draw-offer-from{color:#f39c12;font-size:18px;font-weight:600;margin-bottom:24px;text-shadow:0 2px 4px #0000004d}.draw-offer-buttons{display:flex;gap:12px;justify-content:center}.draw-offer-button{border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;min-width:100px;padding:12px 24px;text-transform:uppercase;transition:all .2s ease}.draw-offer-button.accept{background:linear-gradient(135deg,#27ae60,#229954);box-shadow:0 4px 12px #27ae604d;color:#fff}.draw-offer-button.accept:hover{background:linear-gradient(135deg,#229954,#1e8449);box-shadow:0 6px 16px #27ae6066;transform:translateY(-2px)}.draw-offer-button.decline{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 4px 12px #e74c3c4d;color:#fff}.draw-offer-button.decline:hover{background:linear-gradient(135deg,#c0392b,#a93226);box-shadow:0 6px 16px #e74c3c66;transform:translateY(-2px)}.draw-offer-button:active{transform:translateY(0)}@media (max-width:480px){.draw-offer-modal{margin:16px;padding:24px}.draw-offer-title{font-size:20px}.draw-offer-message{font-size:14px}.draw-offer-from{font-size:16px}.draw-offer-buttons{flex-direction:column}.draw-offer-button{width:100%}}.move-navigator{align-items:center;display:flex;justify-content:center;margin:8px 0;padding:0}.move-navigator-controls{align-items:center;display:flex;gap:8px}.nav-button{align-items:center;background:#3498db33;border:2px solid #3498db;border-radius:6px;color:#3498db;cursor:pointer;display:flex;font-size:14px;font-weight:500;height:32px;justify-content:center;min-width:32px;padding:6px 10px;transition:all .3s ease}.nav-button:hover:not(:disabled){background:#3498db4d;box-shadow:0 2px 6px #3498db4d;transform:translateY(-1px)}.nav-button:disabled{background:#95a5a61a;border-color:#95a5a6;color:#95a5a6;cursor:not-allowed;opacity:.4}@media (max-width:768px){.nav-button{font-size:12px;height:28px;min-width:28px;padding:4px 8px}}@media (max-width:480px){.nav-button{font-size:11px;height:24px;min-width:24px;padding:3px 6px}}@media (prefers-color-scheme:dark){.nav-button{background:#3498db33;border-color:#3498db;color:#3498db}.nav-button:hover:not(:disabled){background:#3498db4d}.nav-button:disabled{background:#95a5a61a;border-color:#95a5a6;color:#95a5a6}}.nav-button:focus{outline:2px solid #4caf50;outline-offset:2px}.nav-button,.spectator-indicator{transition:all .2s ease}.spectator-indicator{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;border:1px solid #ffffff1a;border-radius:12px;cursor:pointer;display:inline-flex;flex-direction:column;margin:4px;min-width:60px;padding:6px 8px;position:relative}.spectator-indicator:hover{background:#000c;box-shadow:0 4px 12px #0000004d;transform:translateY(-1px)}.spectator-icon-container{align-items:center;display:flex;gap:4px}.spectator-icon{filter:grayscale(.2);font-size:14px}.spectator-count{color:#fff;font-size:12px;font-weight:600;min-width:16px;text-align:center}.spectator-usernames{align-items:center;display:flex;flex-direction:column;gap:2px;margin-top:4px;max-width:100%}.spectator-username{background:#ffffff1a;border-radius:3px;color:#ccc;font-size:10px;line-height:1.2;max-width:80px;overflow:hidden;padding:1px 4px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.spectator-tooltip{animation:fadeInUp .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000e6;border:1px solid #fff3;border-radius:8px;bottom:100%;margin-bottom:8px;max-width:200px;min-width:120px;padding:8px;z-index:1000}.spectator-tooltip,.spectator-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.spectator-tooltip:after{border:6px solid #0000;border-top-color:#000000e6;content:"";top:100%}.spectator-tooltip-header{border-bottom:1px solid #ffffff1a;color:#fff;font-size:12px;font-weight:600;margin-bottom:4px;padding-bottom:4px;text-align:center}.spectator-list{display:flex;flex-direction:column;gap:2px}.spectator-item{background:#ffffff0d;border-radius:4px;color:#ccc;font-size:11px;padding:2px 4px;text-align:center}@keyframes fadeInUp{0%{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.spectator-indicator{padding:3px 6px}.spectator-icon{font-size:12px}.spectator-count{font-size:11px}.spectator-tooltip{font-size:10px;min-width:100px}}.spectator-indicator.top-right{position:absolute;right:8px;top:8px;z-index:10}.spectator-indicator.top-left{left:8px;position:absolute;top:8px;z-index:10}.spectator-indicator.floating{position:fixed;right:20px;top:20px;z-index:1000}.spectator-indicator.light{background:#ffffffe6;border:1px solid #0000001a}.spectator-indicator.light .spectator-count{color:#333}.spectator-indicator.light:hover{background:#fffffff2}.spectator-indicator.light .spectator-tooltip{background:#fffffff2;border:1px solid #0000001a}.spectator-indicator.light .spectator-tooltip-header{border-bottom:1px solid #0000001a;color:#333}.spectator-indicator.light .spectator-item{background:#0000000d;color:#666}.spectator-indicator.light .spectator-tooltip:after{border-top-color:#fffffff2}
/*# sourceMappingURL=main.6108a5ff.css.map*/