.chess-board{display:inline-block;border:4px solid var(--board-border);border-radius:var(--border-radius);box-shadow:var(--box-shadow-lg);background-color:var(--board-border);overflow:hidden;transition:box-shadow var(--transition-speed)}.chess-board:hover{box-shadow:0 12px 32px #00000026}.board-row{display:flex}.chess-square{width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:40px;-webkit-user-select:none;user-select:none;position:relative;transition:background-color var(--transition-speed),transform var(--transition-speed)}.chess-square:hover{transform:scale(1.05);z-index:1}.chess-square.light{background-color:var(--board-light)}.chess-square.dark{background-color:var(--board-dark)}.chess-square.selected{background-color:var(--board-selected)!important;box-shadow:inset 0 0 0 3px #ffffff80}.chess-square.legal-move:after{content:"";position:absolute;width:20px;height:20px;background-color:var(--board-legal-move);border-radius:50%;pointer-events:none;animation:pulse 1.5s ease-in-out infinite}.chess-square.legal-move.has-piece:after{width:100%;height:100%;border-radius:0;border:3px solid var(--board-legal-move);background-color:transparent}.chess-piece{filter:drop-shadow(1px 1px 2px rgba(0,0,0,.3));transition:filter var(--transition-speed)}.chess-square:hover .chess-piece{filter:drop-shadow(2px 2px 4px rgba(0,0,0,.4))}@media(max-width:768px){.chess-square{width:56px;height:56px;font-size:36px}}@media(max-width:480px){.chess-square{width:48px;height:48px;font-size:32px}.chess-board{border-width:2px}}.chess-board.tiny .chess-square{width:80px;height:80px;font-size:48px}@media(max-width:768px){.chess-board.tiny .chess-square{width:70px;height:70px;font-size:42px}}@media(max-width:480px){.chess-board.tiny .chess-square{width:60px;height:60px;font-size:36px}}.game-info{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md);transition:box-shadow var(--transition-speed)}.game-info:hover{box-shadow:var(--box-shadow-hover)}.game-info h3{margin:0 0 var(--spacing-md) 0;font-size:1.1rem;color:var(--text-primary)}.game-info-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.info-card{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--border-radius);transition:transform var(--transition-speed)}.info-card:hover{transform:translate(4px)}.info-card.status{border-left:4px solid var(--color-primary)}.info-card.status.checkmate{border-left-color:var(--color-success)}.info-card.status.check{border-left-color:var(--color-danger)}.info-card.status.draw,.info-card.status.stalemate{border-left-color:var(--color-warning)}.info-label{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.info-value{font-size:1rem;font-weight:600;color:var(--text-primary)}.info-row{display:flex;gap:var(--spacing-sm)}.info-row .info-card{flex:1}.info-card.turn.white{border-left:4px solid #333}.info-card.turn.black{border-left:4px solid #666}[data-theme=dark] .info-card.turn.white{border-left-color:#f0f0f0}[data-theme=dark] .info-card.turn.black{border-left-color:#aaa}.game-over-banner{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-success);color:#fff;border-radius:var(--border-radius);font-weight:700;text-align:center;box-shadow:var(--box-shadow);animation:fadeIn var(--transition-speed-slow)}.game-over-banner.checkmate{background-color:var(--color-success)}.game-over-banner.draw,.game-over-banner.stalemate{background-color:var(--color-warning);color:#333}.game-over-subtitle{font-size:.9rem;font-weight:400;margin-top:var(--spacing-xs)}.game-controls{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md)}.game-controls h3{margin:0 0 var(--spacing-md) 0;font-size:1.1rem;color:var(--text-primary)}.controls-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.game-controls button{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:.95rem}.btn-new-game{background-color:var(--color-success);color:#fff}.btn-new-game:hover:not(:disabled){background-color:var(--color-success-hover)}.btn-undo{background-color:var(--color-warning);color:#333}.btn-undo:hover:not(:disabled){background-color:#e6ac00}.btn-redo{background-color:var(--color-info);color:#fff}.btn-redo:hover:not(:disabled){background-color:#0bb5d6}.variant-selector{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-lg)}.variant-selector h3{margin:0 0 var(--spacing-sm) 0;font-size:1.1rem;color:var(--text-primary)}.variant-selector select{width:100%;padding:var(--spacing-sm);font-size:1rem;border:2px solid var(--bg-tertiary);border-radius:var(--border-radius);background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color var(--transition-speed)}.variant-selector select:hover{border-color:var(--color-primary)}.variant-selector select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0d6efd1a}.variant-description{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--bg-secondary);border-radius:var(--border-radius);font-size:.9rem;color:var(--text-secondary);line-height:1.5}.variant-board-size{font-weight:600;color:var(--color-primary)}.instructions{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md)}.instructions h3{margin:0 0 var(--spacing-sm) 0;font-size:1.1rem;color:var(--text-primary)}.instructions ul{margin:0;padding-left:var(--spacing-lg)}.instructions li{margin-bottom:var(--spacing-sm);font-size:.9rem;color:var(--text-secondary);line-height:1.6}.instructions li:last-child{margin-bottom:0}.captured-pieces{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md)}.captured-pieces h3{margin:0 0 var(--spacing-md) 0;font-size:1.1rem;color:var(--text-primary)}.captured-section{margin-bottom:var(--spacing-sm)}.captured-section:last-child{margin-bottom:0}.captured-label{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-weight:600}.captured-pieces-list{font-size:1.5rem;line-height:1.4;color:var(--text-primary);min-height:32px;display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.material-advantage{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--bg-secondary);border-radius:var(--border-radius);font-size:.9rem;font-weight:600;color:var(--text-primary);text-align:center}.move-history{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md)}.move-history h3{margin:0 0 var(--spacing-sm) 0;font-size:1.1rem;color:var(--text-primary)}.move-history-scroll{max-height:300px;overflow-y:auto;border:1px solid var(--bg-tertiary);border-radius:var(--border-radius)}.move-history-scroll::-webkit-scrollbar{width:8px}.move-history-scroll::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--border-radius)}.move-history-scroll::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--border-radius)}.move-history-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.move-history table{width:100%;border-collapse:collapse;font-size:.9rem}.move-history th,.move-history td{padding:var(--spacing-sm);text-align:left;border-bottom:1px solid var(--bg-tertiary)}.move-history th{background-color:var(--bg-secondary);color:var(--text-secondary);font-weight:600;position:sticky;top:0;z-index:1}.move-history td{color:var(--text-primary)}.move-history tr:last-child td{border-bottom:none}.move-history tr:hover td{background-color:var(--bg-secondary)}.move-history-empty{padding:var(--spacing-md);text-align:center;color:var(--text-muted);font-style:italic}.move-count{margin-top:var(--spacing-sm);font-size:.85rem;color:var(--text-secondary);text-align:center}.ai-controls{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md)}.ai-controls h3{margin:0 0 var(--spacing-md) 0;font-size:1.1rem;color:var(--text-primary)}.ai-toggle-section{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-sm);background-color:var(--bg-secondary);border-radius:var(--border-radius)}.ai-toggle-section input[type=checkbox]{width:20px;height:20px;cursor:pointer}.ai-toggle-section label{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-primary);font-weight:500}.ai-difficulty-section{margin-top:var(--spacing-sm)}.ai-difficulty-section label{display:block;font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-weight:600}.ai-difficulty-section select{width:100%;padding:var(--spacing-sm);font-size:.95rem;border:2px solid var(--bg-tertiary);border-radius:var(--border-radius);background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color var(--transition-speed)}.ai-difficulty-section select:hover:not(:disabled){border-color:var(--color-primary)}.ai-difficulty-section select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0d6efd1a}.ai-info{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--color-info);color:#fff;border-radius:var(--border-radius);font-size:.85rem;text-align:center;font-weight:500}.multiplayer-controls{padding:var(--spacing-md);border-radius:var(--border-radius-lg);background-color:var(--bg-primary);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md);transition:box-shadow var(--transition-speed)}.multiplayer-controls:hover{box-shadow:var(--box-shadow-hover)}.multiplayer-controls h3{margin:0 0 var(--spacing-md) 0;font-size:1.1rem;color:var(--text-primary)}.multiplayer-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.multiplayer-status{font-size:.95rem;color:var(--text-secondary);margin:0}.multiplayer-actions{display:flex;flex-direction:column;gap:var(--spacing-sm)}.multiplayer-join{display:flex;gap:var(--spacing-sm)}.multiplayer-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--bg-secondary);color:var(--text-primary);font-size:.95rem;font-family:Courier New,monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;transition:all var(--transition-speed)}.multiplayer-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0d6efd1a}.multiplayer-input::placeholder{text-transform:none;letter-spacing:normal;font-family:inherit;font-weight:400}.multiplayer-room-info{padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--border-radius);border-left:4px solid var(--color-primary)}.multiplayer-room-info .multiplayer-status{margin-bottom:var(--spacing-sm)}.multiplayer-room-info .multiplayer-status:last-child{margin-bottom:0}.room-code{font-family:Courier New,monospace;font-weight:700;font-size:1.2rem;color:var(--color-primary);letter-spacing:2px;background-color:var(--bg-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius)}.multiplayer-info{padding:var(--spacing-sm);background-color:var(--color-info);color:#fff;border-radius:var(--border-radius);font-size:.85rem;text-align:center;margin:0}.multiplayer-error{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-danger);color:#fff;border-radius:var(--border-radius);font-size:.9rem;margin-bottom:var(--spacing-sm)}.app-container{padding:var(--spacing-lg);max-width:1400px;margin:0 auto;min-height:100vh;animation:fadeIn .5s ease-out}.app-header{margin-bottom:var(--spacing-lg);border-bottom:3px solid var(--color-primary);padding-bottom:var(--spacing-md);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.app-title{color:var(--text-primary);display:flex;align-items:center;gap:var(--spacing-sm);margin:0}.theme-toggle{background-color:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--color-primary);padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm);font-size:.9rem}.theme-toggle:hover{background-color:var(--color-primary);color:#fff}.main-content{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.board-section{flex:0 0 auto;animation:slideIn .5s ease-out}.sidebar{flex:1;min-width:280px;display:flex;flex-direction:column;gap:var(--spacing-md);animation:slideIn .5s ease-out .1s backwards}.ai-thinking-indicator{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-warning-bg);border:2px solid var(--color-warning);border-radius:var(--border-radius);font-size:.9rem;color:#856404;text-align:center;font-weight:700;animation:pulse 1.5s ease-in-out infinite;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}[data-theme=dark] .ai-thinking-indicator{background-color:var(--color-warning-bg);color:var(--color-warning)}.footer-info{margin-top:var(--spacing-xl);padding:var(--spacing-md);font-size:.85rem;color:var(--text-secondary);background-color:var(--bg-primary);border-radius:var(--border-radius);border-left:4px solid var(--color-primary);box-shadow:var(--box-shadow)}.footer-info p{margin-bottom:var(--spacing-sm)}.footer-info p:last-child{margin-bottom:0}.footer-info strong{color:var(--text-primary)}@media(max-width:1024px){.main-content{flex-direction:column}.sidebar{max-width:100%}}@media(max-width:768px){.app-container{padding:var(--spacing-md)}.app-header{flex-direction:column;align-items:flex-start}.app-title{font-size:1.5rem}}@media(max-width:480px){.app-container{padding:var(--spacing-sm)}.main-content{gap:var(--spacing-md)}.sidebar{min-width:auto}}@media print{.theme-toggle,.footer-info{display:none}.app-container{max-width:100%}}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--text-muted: #adb5bd;--color-primary: #0d6efd;--color-primary-hover: #0b5ed7;--color-success: #198754;--color-success-hover: #157347;--color-warning: #ffc107;--color-warning-bg: #fff3cd;--color-danger: #dc3545;--color-info: #0dcaf0;--board-light: #f0d9b5;--board-dark: #b58863;--board-selected: #7cb342;--board-legal-move: rgba(124, 179, 66, .4);--board-border: #8b4513;--border-radius: 8px;--border-radius-lg: 12px;--box-shadow: 0 2px 8px rgba(0, 0, 0, .1);--box-shadow-hover: 0 4px 12px rgba(0, 0, 0, .15);--box-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition-speed: .2s;--transition-speed-slow: .3s;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3a3a3a;--text-primary: #f8f9fa;--text-secondary: #adb5bd;--text-muted: #6c757d;--color-primary: #4895ef;--color-primary-hover: #3b7dd6;--color-success: #51cf66;--color-success-hover: #40c057;--color-warning: #ffd43b;--color-warning-bg: #5c4a1f;--color-danger: #ff6b6b;--color-info: #22d3ee;--board-light: #4a5568;--board-dark: #2d3748;--board-selected: #68d391;--board-legal-move: rgba(104, 211, 145, .4);--board-border: #1a202c;--box-shadow: 0 2px 8px rgba(0, 0, 0, .3);--box-shadow-hover: 0 4px 12px rgba(0, 0, 0, .4);--box-shadow-lg: 0 8px 24px rgba(0, 0, 0, .35)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;transition:background-color var(--transition-speed-slow),color var(--transition-speed-slow)}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,h6{margin-bottom:var(--spacing-md);font-weight:600;line-height:1.2}h1{font-size:2rem;color:var(--text-primary)}h2{font-size:1.5rem}h3{font-size:1.25rem}p{margin-bottom:var(--spacing-sm)}button{font-family:inherit;font-size:.95rem;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-speed);font-weight:500;box-shadow:var(--box-shadow)}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--box-shadow-hover)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}input:focus-visible,select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.card{background-color:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--spacing-md);box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md);transition:box-shadow var(--transition-speed)}.card:hover{box-shadow:var(--box-shadow-hover)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-in{animation:fadeIn var(--transition-speed-slow) ease-out}.slide-in{animation:slideIn var(--transition-speed-slow) ease-out}@media(max-width:768px){:root{--spacing-md: 12px;--spacing-lg: 20px;--spacing-xl: 28px}h1{font-size:1.75rem}h2{font-size:1.35rem}button{font-size:.9rem;padding:var(--spacing-sm) var(--spacing-sm)}}@media(max-width:480px){:root{--spacing-md: 10px;--spacing-lg: 16px;--spacing-xl: 24px}h1{font-size:1.5rem}button{font-size:.85rem}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--bg-tertiary);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mt-md{margin-top:var(--spacing-md)}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-wrap{flex-wrap:wrap}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}