:root{--bg-primary: #FFF9F5;--bg-secondary: #FFFFFF;--bg-subtle-grid: #F3E6DD;--orange-primary: #F38020;--orange-bright: #FF4D00;--orange-soft: #FF8A4C;--orange-tint: #FFE1D2;--orange-faint: #FFF5F0;--purple-accent: #7C3AED;--blue-accent: #3B82F6;--text-primary: #3A1F14;--text-body: #6B4A3A;--text-meta: #9C7A68;--shadow-subtle: 0 4px 20px rgba(58, 31, 20, .05);--shadow-medium: 0 8px 32px rgba(58, 31, 20, .08);--border-light: #F3E6DD;--border-orange: #FF8A4C}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;background-image:radial-gradient(circle,var(--bg-subtle-grid) 1px,transparent 1px);background-size:20px 20px}#root{min-height:100vh;max-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}h1,h2,h3{color:var(--text-primary);font-weight:700}.home-page{text-align:center;max-width:500px;width:100%;background:var(--bg-secondary);padding:48px;border-radius:16px;box-shadow:var(--shadow-medium);border:1px solid var(--border-light)}.chess-icon{font-size:72px;margin-bottom:24px;filter:grayscale(.2)}.home-page h1{font-size:2.5em;margin-bottom:12px;color:var(--text-primary);letter-spacing:-.02em}.subtitle{color:var(--text-meta);margin-bottom:40px;font-size:1em;letter-spacing:.01em}.actions{display:flex;flex-direction:column;gap:16px}.btn{padding:14px 28px;font-size:15px;border:none;border-radius:12px;cursor:pointer;font-weight:600;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;font-size:13px}.btn-primary{background:var(--orange-primary);color:#fff;box-shadow:0 2px 8px #f380204d;border:2px solid var(--orange-primary)}.btn-primary:hover:not(:disabled){background:var(--orange-bright);border-color:var(--orange-bright);transform:translateY(-1px);box-shadow:0 4px 12px #f3802066}.btn-secondary{background:#fff;color:var(--orange-primary);border:2px solid var(--orange-soft)}.btn-secondary:hover:not(:disabled){background:var(--orange-faint);border-color:var(--orange-primary)}.btn:disabled{opacity:.4;cursor:not-allowed}.divider{display:flex;align-items:center;text-align:center;margin:24px 0;color:var(--text-meta);font-size:13px;text-transform:uppercase;letter-spacing:1px}.divider span{padding:0 16px}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px dashed var(--border-light)}.join-section{display:flex;flex-direction:column;gap:12px}.game-id-input{padding:14px;font-size:18px;border:2px solid var(--border-light);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);text-align:center;text-transform:uppercase;letter-spacing:4px;font-weight:700;font-family:Courier New,monospace}.game-id-input::placeholder{color:var(--text-meta);font-weight:500}.game-id-input:focus{outline:none;border-color:var(--orange-primary);background:#fff}.info{margin-top:40px;color:var(--text-meta);font-size:.85em;line-height:1.6}.info p{margin:8px 0}.waiting-room{text-align:center;max-width:600px;width:100%}.waiting-content{background:var(--bg-secondary);padding:48px;border-radius:16px;box-shadow:var(--shadow-medium);border:1px solid var(--border-light)}.chess-icon-large{font-size:96px;margin-bottom:24px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.waiting-subtitle{color:var(--text-body);margin:20px 0;font-size:1.1em}.game-link-section{margin:32px 0;padding:32px;background:var(--orange-faint);border-radius:12px;border:2px dashed var(--orange-soft)}.game-id-display{font-size:32px;font-weight:700;letter-spacing:6px;color:var(--orange-primary);padding:20px;background:#fff;border-radius:12px;margin:16px 0;font-family:Courier New,monospace;border:2px solid var(--orange-tint)}.or-text{color:var(--text-meta);margin:20px 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:1px}.link-box{display:flex;gap:12px;margin-top:12px}.link-box input{flex:1;padding:12px;border:2px solid var(--border-light);border-radius:8px;background:#fff;color:var(--text-primary);font-size:13px;font-family:Courier New,monospace}.link-box input:focus{outline:none;border-color:var(--orange-primary)}.btn-copy{padding:12px 24px;background:var(--orange-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.btn-copy:hover{background:var(--orange-bright);transform:translateY(-1px)}.waiting-spinner{margin:32px 0}.spinner{width:48px;height:48px;margin:20px auto;border:3px solid var(--orange-tint);border-top:3px solid var(--orange-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chess-game{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;max-height:95vh}.chessboard-wrapper{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;margin:0 auto;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.chessboard-wrapper [data-square]{transition:background-color .15s ease-in-out}.chessboard-wrapper [data-square]:hover{opacity:.95}.game-header{background:var(--bg-secondary);padding:24px;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;box-shadow:var(--shadow-subtle);border:1px solid var(--border-light);border-bottom:none}.game-info h2{margin:0;font-size:1.4em;color:var(--text-primary);font-family:Courier New,monospace;letter-spacing:1px}.connection-status{margin-top:6px;font-size:.85em;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.status-connected{color:var(--orange-primary)}.status-disconnected{color:#dc2626}.player-info{display:flex;align-items:center;gap:12px}.player-badge{padding:8px 16px;border-radius:8px;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.5px;border:2px solid}.player-badge.white{background:#fff;color:var(--text-primary);border-color:var(--border-light)}.player-badge.black{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}.player-badge.connecting{background:var(--orange-faint);color:var(--orange-primary);border-color:var(--orange-soft);animation:pulse 2s ease-in-out infinite}.turn-indicator{padding:8px 16px;background:var(--orange-primary);border-radius:8px;font-weight:600;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.5px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.game-container{display:flex;justify-content:center;align-items:flex-start;background:var(--bg-secondary);padding:24px;border-radius:0 0 16px 16px;flex:1;overflow-y:auto;box-shadow:var(--shadow-subtle);border:1px solid var(--border-light);border-top:none}.board-section{display:flex;flex-direction:column;gap:20px;align-items:center;width:100%;max-width:650px}.leave-game-btn{width:100%;max-width:300px}.game-controls{display:flex;gap:12px;flex-wrap:wrap}.draw-offer-box{flex:1;background:var(--orange-faint);border:2px dashed var(--orange-soft);border-radius:12px;padding:16px;text-align:center}.draw-offer-box p{color:var(--text-body);margin-bottom:12px;font-weight:600}.draw-buttons{display:flex;gap:8px;margin-top:12px}.btn-success{background:var(--orange-primary);color:#fff;flex:1;border:2px solid var(--orange-primary)}.btn-success:hover{background:var(--orange-bright);border-color:var(--orange-bright)}.btn-danger{background:#fff;color:#dc2626;flex:1;border:2px solid #DC2626}.btn-danger:hover{background:#fee2e2}.btn-offer-draw{background:#fff;color:var(--orange-primary);flex:1;border:2px solid var(--orange-soft)}.btn-offer-draw:hover{background:var(--orange-faint);border-color:var(--orange-primary)}.btn-resign{background:#fff;color:#dc2626;flex:1;border:2px solid #DC2626}.btn-resign:hover{background:#fee2e2}.move-history{background:var(--bg-primary);border-radius:12px;padding:20px;flex:1;overflow-y:auto;max-height:500px;min-height:200px;border:1px solid var(--border-light)}.move-history h3{margin:0 0 16px;font-size:1.1em;color:var(--text-primary);text-transform:uppercase;font-size:12px;letter-spacing:1px}.moves-list{display:flex;flex-direction:column;gap:4px}.no-moves{color:var(--text-meta);font-style:italic;font-size:.9em}.move-pair{display:grid;grid-template-columns:40px 1fr 1fr;gap:12px;padding:10px 12px;background:#fff;border-radius:8px;border:1px solid var(--border-light);transition:all .2s ease}.move-pair:hover{border-color:var(--orange-tint)}.move-number{color:var(--text-meta);font-weight:700;font-size:13px}.move-white,.move-black{font-family:Courier New,monospace;font-size:14px;font-weight:600;color:var(--text-body)}.modal-overlay{position:fixed;inset:0;background:#3a1f1480;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:#fff;padding:48px;border-radius:16px;box-shadow:0 20px 60px #3a1f1433;max-width:500px;width:100%;text-align:center;border:1px solid var(--border-light)}.modal h2{margin:0 0 16px;font-size:2.2em;color:var(--text-primary)}.result-subtitle{font-size:1.3em;margin-bottom:32px;color:var(--text-body)}.modal-actions{display:flex;gap:12px;justify-content:center}.promotion-modal{max-width:400px}.promotion-pieces{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.promotion-piece{background:var(--bg-primary);border:2px solid var(--border-light);border-radius:12px;padding:24px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:12px}.promotion-piece:hover{background:var(--orange-faint);border-color:var(--orange-primary);transform:translateY(-4px);box-shadow:0 8px 16px #f3802033}.piece-symbol{font-size:48px}.piece-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-body)}.loading-screen,.error-screen,.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;text-align:center;gap:12px}.loading-container .hint{color:var(--text-meta);font-size:.85em;margin-top:8px}.error-message{font-size:1.2em;color:#dc2626;background:#fee2e2;padding:20px 40px;border-radius:12px;border:2px solid #DC2626;font-weight:600}@media(max-width:1024px){.board-section{max-width:500px}}@media(max-width:768px){#root{padding:8px;align-items:flex-start}.home-page{padding:32px 24px}.home-page h1{font-size:2em}.chess-icon{font-size:56px}.chess-game{max-height:none}.game-container{flex-direction:column;padding:8px;overflow-y:visible;overflow-x:hidden}.board-section{width:100%;max-width:100%}.chessboard-wrapper{width:100%;max-width:100%;padding:0}.leave-game-btn{max-width:100%}.game-header{flex-direction:column;align-items:flex-start;padding:16px}.player-info{width:100%;justify-content:space-between}.link-box{flex-direction:column}.game-id-display{font-size:24px;letter-spacing:4px}.modal{padding:32px 24px}.modal h2{font-size:1.8em}.move-history{max-height:300px}.game-controls{justify-content:stretch}.game-controls .btn{flex:1;min-width:0}}