.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1625,#0f0a1a,#1a1625);position:relative;overflow:hidden;padding:2rem}.auth-page:before,.auth-page:after{content:"♔♕♖♗♘♙";position:absolute;font-size:8rem;opacity:.03;pointer-events:none;color:#9333ea;letter-spacing:2rem}.auth-page:before{top:10%;left:-5%;transform:rotate(-15deg)}.auth-page:after{bottom:10%;right:-5%;transform:rotate(15deg);content:"♚♛♜♝♞♟"}.auth-bg-glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.15;pointer-events:none}.auth-bg-glow.glow-1{width:400px;height:400px;background:#9333ea;top:-100px;right:-100px}.auth-bg-glow.glow-2{width:300px;height:300px;background:#7c3aed;bottom:-50px;left:-50px}.auth-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;z-index:1}.auth-logo-icon{font-size:3rem;color:#9333ea;filter:drop-shadow(0 0 20px rgba(147,51,234,.5));animation:crownFloat 3s ease-in-out infinite}@keyframes crownFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.auth-logo-text{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#fff,#9333ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-card-container{position:relative;z-index:1;width:100%;max-width:440px}.auth-card-container .cl-card{background:#2d2438b3!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(147,51,234,.2)!important;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #9333ea1a,inset 0 1px #ffffff0d!important;border-radius:20px!important}.auth-card-container .cl-headerTitle{color:#fff!important}.auth-card-container .cl-headerSubtitle{color:#a0a0a0!important}.auth-card-container .cl-socialButtonsBlockButton{background:#2d243899!important;border:1px solid rgba(147,51,234,.3)!important;transition:all .3s ease!important}.auth-card-container .cl-socialButtonsBlockButton:hover{background:#9333ea33!important;border-color:#9333ea80!important;transform:translateY(-2px)}.auth-card-container .cl-formFieldInput{background:#1a1625cc!important;border:1px solid rgba(147,51,234,.3)!important;color:#fff!important;transition:all .3s ease!important}.auth-card-container .cl-formFieldInput:focus{border-color:#9333ea!important;box-shadow:0 0 0 3px #9333ea33!important}.auth-card-container .cl-formButtonPrimary{background:linear-gradient(135deg,#9333ea,#7c3aed)!important;border:none!important;transition:all .3s ease!important}.auth-card-container .cl-formButtonPrimary:hover{background:linear-gradient(135deg,#a855f7,#8b5cf6)!important;transform:translateY(-2px);box-shadow:0 10px 30px -10px #9333ea80!important}.auth-card-container .cl-footerActionLink{color:#9333ea!important}.auth-card-container .cl-footerActionLink:hover{color:#a855f7!important}.auth-footer{margin-top:2rem;text-align:center;color:#666;font-size:.875rem;z-index:1}.auth-footer a{color:#9333ea;text-decoration:none;transition:color .2s ease}.auth-footer a:hover{color:#a855f7}.auth-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1625,#0f0a1a)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.loading-spinner{width:48px;height:48px;border:3px solid rgba(147,51,234,.2);border-top-color:#9333ea;border-radius:50%;animation:spin .8s linear infinite}.loading-text{color:#a0a0a0;font-size:.875rem}@media(max-width:480px){.auth-page{padding:1rem}.auth-logo-icon{font-size:2.5rem}.auth-logo-text{font-size:1.5rem}.auth-page:before,.auth-page:after{font-size:4rem;letter-spacing:1rem}}.matchmaking-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000}.matchmaking-modal{padding:var(--spacing-2xl);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);min-width:320px;text-align:center}.matchmaking-spinner{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center}.spinner-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid transparent;border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.spinner-ring:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:3px solid transparent;border-top-color:var(--color-accent-secondary);border-radius:50%;animation:spin 2s linear infinite reverse}.spinner-icon{font-size:2.5rem;animation:pulse 2s ease-in-out infinite}.matchmaking-title{font-size:1.5rem;font-weight:700;color:var(--color-text-primary)}.matchmaking-subtitle{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-secondary);font-size:.875rem}.online-dot{width:8px;height:8px;background:var(--color-success);border-radius:50%;animation:pulse 2s ease-in-out infinite}.matchmaking-cancel-btn{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-xl);background:transparent;border:2px solid var(--color-border-light);color:var(--color-text-secondary);font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast)}.matchmaking-cancel-btn:hover{border-color:var(--color-error);color:var(--color-error)}.lobby{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.lobby-content{max-width:600px;width:100%;display:flex;flex-direction:column;gap:var(--spacing-xl)}.lobby-hero{text-align:center}.lobby-title{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.title-icon{font-size:3rem;color:var(--color-accent);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.title-text{font-size:3rem;font-weight:800}.lobby-subtitle{color:var(--color-text-secondary);font-size:1.125rem}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.status-indicator{display:flex;align-items:center;gap:var(--spacing-sm)}.status-dot{width:10px;height:10px;border-radius:50%;transition:background var(--transition-fast)}.status-indicator.connected .status-dot{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.status-indicator.disconnected .status-dot{background:var(--color-warning);animation:pulse 1.5s ease-in-out infinite}.status-text{font-size:.875rem;color:var(--color-text-secondary)}.online-count{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-secondary);font-size:.875rem}.online-icon{font-size:1rem}.game-modes{display:flex;flex-direction:column;gap:var(--spacing-md)}.game-mode-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);text-align:left;transition:all var(--transition-fast);position:relative;overflow:hidden}.game-mode-card:hover:not(:disabled){transform:translate(8px);border-color:var(--color-border-light)}.game-mode-card:disabled{opacity:.6;cursor:not-allowed}.game-mode-card.primary{background:linear-gradient(135deg,#e945601a,#0f34601a);border-color:var(--color-accent)}.game-mode-card.primary:hover:not(:disabled){box-shadow:var(--shadow-glow)}.mode-icon{font-size:2rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-md)}.mode-info{flex:1}.mode-title{font-size:1.125rem;font-weight:600;color:var(--color-text-primary);margin-bottom:4px}.mode-desc{font-size:.875rem;color:var(--color-text-tertiary)}.mode-arrow{font-size:1.5rem;color:var(--color-text-tertiary);transition:transform var(--transition-fast)}.game-mode-card:hover:not(:disabled) .mode-arrow{transform:translate(4px);color:var(--color-accent)}.mode-badge{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);padding:4px 8px;background:var(--color-surface);border-radius:var(--radius-full);font-size:.75rem;color:var(--color-text-tertiary)}@media(max-width:640px){.lobby{padding:var(--spacing-md)}.title-text,.title-icon{font-size:2rem}.game-mode-card{padding:var(--spacing-md)}.mode-icon{width:48px;height:48px;font-size:1.5rem}}.piece{position:absolute;display:flex;align-items:center;justify-content:center;transition:transform .1s ease;pointer-events:auto}.piece.dragging{transition:none;z-index:9999;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}.piece-image{width:85%;height:85%;object-fit:contain;pointer-events:none}.piece:not(.dragging){transition:transform .15s ease-out}.promotion-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000}.promotion-modal{padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);min-width:280px}.promotion-title{font-size:1.25rem;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.promotion-pieces{display:flex;gap:var(--spacing-sm)}.promotion-piece-btn{width:64px;height:64px;background:var(--color-surface);border:2px solid transparent;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.promotion-piece-btn:hover{background:var(--color-surface-hover);border-color:var(--color-accent);transform:scale(1.1)}.promotion-piece-btn:active{transform:scale(.95)}.promotion-piece-img{width:48px;height:48px;object-fit:contain}.chessboard{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-board);-webkit-user-select:none;user-select:none}.chessboard:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(135deg,#fff3,#ffffff0d);border-radius:calc(var(--radius-lg) + 2px);z-index:-1}.piece-wrapper{position:absolute;top:0;left:0;will-change:transform;transition:transform .12s ease-out}.square.selected-light{background-color:var(--bg-selected-light)}.square.selected-dark{background-color:var(--bg-selected-dark)}.square.last-move-light{background-color:var(--bg-last-move-light)}.square.last-move-dark{background-color:var(--bg-last-move-dark)}.square.premove-light{background-color:var(--bg-premove-light)}.square.premove-dark{background-color:var(--bg-premove-dark)}.square.premove2-light{background-color:#b42814a6}.square.premove2-dark{background-color:#a01e0abf}.gameover-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:none}.gameover-modal{padding:var(--spacing-xl);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);min-width:280px;max-width:400px;text-align:center;position:relative;pointer-events:all;background:var(--color-bg-secondary);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)}.gameover-modal.winner{border-color:var(--color-success);box-shadow:0 0 40px #4ade8033}.gameover-modal.loser{border-color:var(--color-error)}.gameover-modal.draw{border-color:var(--color-warning)}.gameover-icon{font-size:3rem;line-height:1;margin-bottom:var(--spacing-xs)}.winner .gameover-icon{color:var(--color-success);text-shadow:0 0 20px var(--color-success)}.loser .gameover-icon{color:var(--color-text-tertiary)}.draw .gameover-icon{color:var(--color-warning)}.gameover-title{font-size:1.5rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.gameover-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:32px;height:32px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.gameover-close:hover{background:#ef44441a;border-color:var(--color-error);color:var(--color-error)}.gameover-info{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.gameover-winner{font-size:1rem;font-weight:600;color:var(--color-text-primary)}.gameover-reason{color:var(--color-text-secondary);font-size:.875rem}.gameover-moves{color:var(--color-text-tertiary);font-size:.875rem}.gameover-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);width:100%}.gameover-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);font-weight:600;font-size:.875rem;border-radius:var(--radius-md);transition:all var(--transition-fast)}.gameover-btn.primary{background:var(--gradient-primary);color:#fff}.gameover-btn.primary:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.gameover-btn.secondary{background:transparent;border:2px solid var(--color-border-light);color:var(--color-text-secondary)}.gameover-btn.secondary:hover{border-color:var(--color-text-primary);color:var(--color-text-primary)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.theme-toggle:hover{background:var(--color-surface-hover);border-color:var(--color-border-light);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-primary);transition:all var(--transition-normal);animation:iconFadeIn var(--transition-normal) var(--ease-out)}.theme-toggle-icon.sun{animation:sunRotate .5s var(--ease-out)}.theme-toggle-icon.moon{animation:moonSlide .5s var(--ease-out)}@keyframes iconFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sunRotate{0%{opacity:0;transform:rotate(-90deg) scale(.8)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes moonSlide{0%{opacity:0;transform:translateY(-10px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.theme-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--color-bg-secondary);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border);transition:background var(--transition-normal),border-color var(--transition-normal)}.navbar-container{max-width:95%;margin:0 auto;padding:0 2rem;height:64px;display:flex;align-items:center;justify-content:space-between}.navbar-logo{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:opacity .2s ease}.navbar-logo:hover{opacity:.8}.logo-image{width:34px;height:34px;object-fit:contain;border-radius:8px;position:relative;left:7px;bottom:3px;filter:drop-shadow(0 0 1px rgba(255,255,255,.21))}[data-theme=light] .logo-image{filter:none}.navbar-logo .logo-text{font-size:1.3rem;font-weight:800;background-image:linear-gradient(135deg,#fff 20%,#8a94a5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;display:inline-block;letter-spacing:-.5px}[data-theme=light] .navbar-logo .logo-text{background-image:linear-gradient(135deg,#000 20%,#434343)}.logo-beta{font-size:.65rem;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.3);background:#e0dbdb1a;border-radius:6px;padding:2px 6px;margin-left:8px;letter-spacing:1px;transform:translateY(-2px)}[data-theme=light] .logo-beta{color:#000;border-color:#0000004d;background:#0000000d}.navbar-links{display:flex;align-items:center;gap:.5rem}.nav-link{background:transparent;border:none;color:var(--color-text-secondary);font-size:.8rem;font-weight:600;padding:.25rem 1rem;cursor:pointer;transition:all .2s ease;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:80px}.nav-link:hover{color:var(--color-text-primary);background:#ffffff0d}.nav-link.active{color:#e74c3c}.nav-icon{font-size:1.5rem;color:var(--color-text-secondary);transition:color .2s ease}.nav-link.active .nav-icon{color:#e74c3c}.nav-link:hover .nav-icon{color:var(--color-text-primary)}.nav-link.active:hover .nav-icon{color:#ff6b6b}.nav-link.locked{opacity:.5;cursor:not-allowed}.nav-link.locked:hover{background:transparent;color:var(--color-text-secondary)}.nav-link.locked:hover .nav-icon{color:var(--color-text-secondary)}.nav-text-with-lock{display:flex;align-items:center;gap:.25rem}.lock-icon{font-size:.8rem;color:var(--color-text-secondary)}.navbar-auth{display:flex;align-items:center;gap:.75rem}.auth-btn{border:none;font-size:.9rem;font-weight:600;padding:.6rem 1.5rem;border-radius:8px;cursor:pointer;transition:all .2s ease}.login-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.login-btn:hover{background:linear-gradient(135deg,#ff6b6b,#e74c3c);transform:translateY(-1px);box-shadow:0 4px 12px #e74c3c4d}.profile-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.1)}.profile-btn:hover{background:#ffffff26;border-color:#fff3}@media(max-width:768px){.navbar-container{padding:0 1rem}.navbar-links{display:none}.navbar-logo .logo-text{font-size:1.1rem}}.user-section{display:flex;align-items:center}.user-info{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.4rem .75rem;border-radius:8px;transition:background .2s ease}.user-info:hover{background:#ffffff0d}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(231,76,60,.5)}.user-avatar-placeholder{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e74c3c,#c0392b);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;color:#fff}.user-name{font-size:.9rem;font-weight:500;color:var(--color-text-primary)}.guest-section{display:flex;align-items:center;gap:.75rem}.guest-badge{font-size:.8rem;color:var(--color-text-secondary);padding:.35rem .75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px}.chess-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem 1rem;background:var(--color-bg-secondary);color:var(--color-text-primary);border-radius:8px;border:2px solid var(--color-border);transition:all .3s ease;position:relative;margin-left:auto}.chess-clock.user,.chess-clock.opponent{background:var(--color-bg-secondary);border-color:var(--color-border)}.chess-clock.active{border-color:var(--primary-color, #8b5cf6);box-shadow:0 0 20px #8b5cf666;animation:pulse 2s ease-in-out infinite}.chess-clock.low-time{background:#f4433633;border-color:#ef4444;animation:pulse-fast 1s ease-in-out infinite}.clock-player-name{display:none}.clock-time{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);font-family:Courier New,monospace;letter-spacing:.05em;min-width:70px;text-align:center}[data-theme=light] .clock-time{color:#1a1a2e;font-weight:800}[data-theme=light] .chess-clock{background:#e8ecf1;border-color:#0000001a}.clock-indicator{position:absolute;top:.5rem;right:.5rem;color:var(--primary-color, #8b5cf6);font-size:.75rem;animation:blink 1s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 20px #8b5cf666}50%{box-shadow:0 0 30px #8b5cf699}}@keyframes pulse-fast{0%,to{box-shadow:0 0 20px #ef444499;border-color:#ef4444}50%{box-shadow:0 0 35px #ef4444e6;border-color:#f87171}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@media(max-width:768px){.chess-clock{padding:.75rem 1rem}.clock-time{font-size:1.5rem;min-width:80px}.clock-player-name{font-size:.75rem}}.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter var(--transition-fast);-webkit-user-select:none;user-select:none}.square:hover{filter:brightness(1.05)}.valid-move-dot{width:30%;height:30%;background:var(--board-valid-move);border-radius:50%;pointer-events:none}.capture-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:5px solid var(--board-valid-move);border-radius:50%;pointer-events:none}.label{position:absolute;font-size:11px;font-weight:600;pointer-events:none;opacity:.9}.rank-label{top:2px;left:3px}.file-label{bottom:1px;right:3px}.move-list{width:280px;max-height:400px;display:flex;flex-direction:column;overflow:hidden}.move-list-header{padding:var(--spacing-md);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.move-list-title{font-size:1rem;font-weight:600;color:var(--color-text-primary)}.move-count{font-size:.75rem;color:var(--color-text-tertiary);background:var(--color-surface);padding:4px 8px;border-radius:var(--radius-full)}.move-list-content{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.move-list-empty{padding:var(--spacing-xl);text-align:center;color:var(--color-text-tertiary)}.move-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.move-row:hover{background:var(--color-surface)}.move-row.latest{background:var(--color-surface-hover)}.move-number{color:var(--color-text-tertiary);font-size:.875rem;font-weight:500}.move{font-family:Fira Code,Consolas,monospace;font-size:.875rem;color:var(--color-text-primary);padding:2px 6px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.move:hover{background:var(--color-surface-active)}.white-move,.black-move{text-align:left}.move.active{background:var(--color-accent);color:#fff}.online-game{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0;padding-bottom:env(safe-area-inset-bottom);background:var(--color-bg-primary);transition:background var(--transition-normal)}.online-game .game-layout{flex:1;display:flex;align-items:flex-start;justify-content:center;gap:var(--spacing-xl);padding:var(--spacing-xl)}.game-main-area{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-top:50px}.player-card-top,.player-card-bottom{width:100%;max-width:560px;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md)}.player-card-top{margin-bottom:var(--spacing-sm)}.player-card-bottom{margin-top:var(--spacing-sm)}.game-sidebar{width:280px;display:flex;flex-direction:column;gap:var(--spacing-md);align-items:stretch;margin-top:250px}.player-card,.player-card-top,.player-card-bottom{width:100%;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md)}.player-avatar.highlight{background:var(--gradient-primary)}.avatar-text{font-size:.7rem;font-weight:600;color:var(--color-text-primary)}.player-avatar.highlight .avatar-text{color:#fff}.player-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px}.player-details{display:flex;flex-direction:column}.name-container{display:flex;align-items:center;gap:var(--spacing-sm)}.status-dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-text-tertiary)}.status-dot.online{background-color:var(--color-success);box-shadow:0 0 4px var(--color-success)}.status-dot.offline{background-color:var(--color-error)}.player-name-white,.player-name-black{color:var(--color-text-primary);font-weight:600}.player-status{font-size:.75rem}.player-status .connected{color:var(--color-success)}.player-status .disconnected{color:var(--color-error)}.player-color{font-size:.75rem;color:var(--color-text-tertiary)}.status-advantage-row{display:flex;align-items:center;gap:var(--spacing-sm);min-height:20px}.advantage-container{display:flex;align-items:center;gap:2px;background:#ffffff0d;padding:2px 6px;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.advantage-score{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);margin-right:4px}.advantage-piece{width:14px;height:14px;object-fit:contain}.board-section{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);width:100%;max-width:100%}.turn-banner{padding:var(--spacing-sm) var(--spacing-lg);text-align:center}.your-turn{color:var(--color-success);font-weight:600}.opponent-turn{color:var(--color-text-secondary)}.sidebar-action-buttons{display:flex;flex-direction:row;gap:var(--spacing-sm);width:100%;align-items:flex-end}.action-slot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;position:relative;height:40px}.resign-btn,.draw-offer-btn{flex:1;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer}.resign-btn{color:var(--color-text-tertiary)}.draw-offer-btn{color:var(--color-text-secondary);font-size:1.25rem;font-weight:600}.resign-btn:hover{border-color:var(--color-error);color:var(--color-error);background:#ef44441a}.draw-offer-btn:hover:not(.disabled){border-color:var(--color-primary);color:var(--color-primary);background:#8b5cf61a}.draw-offer-btn.disabled{opacity:.5;cursor:not-allowed}.draw-offer-btn.pending{opacity:.8!important;color:var(--color-primary)!important;border-color:var(--color-primary)!important}.waiting-icon{animation:rotate-clock 2s linear infinite}@keyframes rotate-clock{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.draw-offer-container{padding-bottom:0;width:100%;display:flex;flex-direction:column;gap:var(--spacing-xs);position:absolute;bottom:0;left:0;z-index:10}.draw-request-indicator{font-size:.75rem;font-weight:600;color:var(--color-success);text-align:center;background:#22c55e1a;padding:2px 0;border-radius:var(--radius-sm);animation:fadeIn .3s ease}.draw-response-split{flex:1;display:flex;gap:2px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.draw-reject-btn,.draw-accept-btn{flex:1;height:100%;border:none;background:var(--color-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.draw-reject-btn{color:var(--color-error)}.draw-reject-btn:hover{background:var(--color-error);color:#fff}.draw-accept-btn{color:var(--color-success)}.draw-accept-btn:hover{background:var(--color-success);color:#fff}.resign-response-split{flex:1;display:flex;gap:2px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.resign-cancel-btn,.resign-confirm-btn{flex:1;height:100%;border:none;background:var(--color-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.resign-cancel-btn{color:var(--color-text-secondary)}.resign-cancel-btn:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.resign-confirm-btn{color:var(--color-error)}.resign-confirm-btn:hover{background:var(--color-error);color:#fff}.resign-confirm-btn.confirm:hover{background:var(--color-success);color:#fff}.review-controls{display:flex;gap:var(--spacing-sm);width:100%}.review-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.875rem;border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.review-btn:hover:not(.disabled){border-color:var(--color-primary);color:var(--color-primary);background:#8b5cf61a}.review-btn.disabled{opacity:.4;cursor:not-allowed;border-color:var(--color-border);color:var(--color-text-tertiary)}@media(max-width:1200px){.online-game .game-layout{flex-direction:column;align-items:center}.game-sidebar{width:100%;max-width:560px;order:1;margin-top:-20px}.game-main-area{order:0}.player-card-top,.player-card-bottom{max-width:100%}}.first-move-timer{background:#ef444433;color:var(--color-error);padding:6px 12px;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;border:1px solid var(--color-error);animation:pulse 2s infinite;white-space:nowrap;display:flex;align-items:center;gap:6px;box-shadow:0 0 10px #ef44441a}@keyframes pulse{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 6px #ef444400}to{box-shadow:0 0 #ef444400}}.online-game .game-sidebar{width:calc(280px * var(--online-scale, 1))}.online-game .player-card-top,.online-game .player-card-bottom{padding:calc(var(--spacing-md) * var(--online-scale, 1));gap:calc(var(--spacing-md) * var(--online-scale, 1))}.online-game .player-avatar{width:calc(48px * var(--online-scale, 1));height:calc(48px * var(--online-scale, 1));font-size:calc(1.5rem * var(--online-scale, 1))}.online-game .player-name{font-size:calc(1rem * var(--online-scale, 1))}.online-game .player-status,.online-game .player-color{font-size:calc(.75rem * var(--online-scale, 1))}.online-game .status-dot{width:calc(10px * var(--online-scale, 1));height:calc(10px * var(--online-scale, 1))}.online-game .chess-clock{padding:calc(.5rem * var(--online-scale, 1)) calc(1rem * var(--online-scale, 1));border-radius:calc(8px * var(--online-scale, 1))}.online-game .clock-time{font-size:calc(1.25rem * var(--online-scale, 1));min-width:calc(70px * var(--online-scale, 1))}.online-game .first-move-timer{font-size:calc(.9rem * var(--online-scale, 1));padding:calc(6px * var(--online-scale, 1)) calc(12px * var(--online-scale, 1));gap:calc(6px * var(--online-scale, 1))}.online-game .resign-btn,.online-game .draw-offer-btn{height:calc(40px * var(--online-scale, 1))}.online-game .resign-confirm-btn{padding:calc(var(--spacing-sm) * var(--online-scale, 1));font-size:calc(1.2rem * var(--online-scale, 1))}.online-game .review-controls{gap:calc(var(--spacing-sm) * var(--online-scale, 1))}.online-game .review-btn{font-size:calc(.875rem * var(--online-scale, 1));padding:calc(var(--spacing-sm) * var(--online-scale, 1)) calc(var(--spacing-md) * var(--online-scale, 1));gap:calc(var(--spacing-xs) * var(--online-scale, 1))}.online-game .move-list{width:calc(280px * var(--online-scale, 1))}.online-game .move-list-title{font-size:calc(1rem * var(--online-scale, 1))}.online-game .move-count{font-size:calc(.75rem * var(--online-scale, 1));padding:calc(4px * var(--online-scale, 1)) calc(8px * var(--online-scale, 1))}.online-game .move-row{grid-template-columns:calc(32px * var(--online-scale, 1)) 1fr 1fr;gap:calc(var(--spacing-xs) * var(--online-scale, 1));padding:calc(var(--spacing-xs) * var(--online-scale, 1)) calc(var(--spacing-sm) * var(--online-scale, 1))}.online-game .move-number{font-size:calc(.875rem * var(--online-scale, 1))}.online-game .move{font-size:calc(.875rem * var(--online-scale, 1));padding:calc(2px * var(--online-scale, 1)) calc(6px * var(--online-scale, 1))}@media(max-width:768px){.online-game .chess-clock{padding:calc(.5rem * var(--online-scale, 1)) calc(1rem * var(--online-scale, 1))}.online-game .clock-time{font-size:calc(1.25rem * var(--online-scale, 1));min-width:calc(70px * var(--online-scale, 1))}}.tempo-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer;display:flex;flex-direction:column;min-height:180px;position:relative;overflow:hidden;--theme-color-rgb: 231, 76, 60;--theme-color-hex: #e74c3c}.tempo-type-bullet{--theme-color-rgb: 255, 71, 87;--theme-color-hex: #ff4757}.tempo-type-blitz{--theme-color-rgb: 255, 165, 2;--theme-color-hex: #ffa502}.tempo-type-rapid{--theme-color-rgb: 46, 134, 222;--theme-color-hex: #2e86de}.tempo-card:hover:not(.disabled):not(.searching):not(.match-found){background:var(--color-surface-hover);border-color:var(--color-border-light);transform:translateY(-2px)}.tempo-card.selected{background:rgba(var(--theme-color-rgb),.1);border-color:rgba(var(--theme-color-rgb),.5);box-shadow:0 0 20px rgba(var(--theme-color-rgb),.15)}.tempo-card.searching{transform:scale(.96);background:var(--color-surface-active);border-color:var(--color-accent);box-shadow:var(--shadow-glow)}.tempo-card.match-found{transform:scale(1.02);background:#4ade801a;border-color:var(--color-success);box-shadow:0 0 30px #4ade804d}.tempo-card.disabled{opacity:.4;pointer-events:none;filter:grayscale(.5)}.tempo-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;transition:opacity .3s ease}.tempo-state-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;animation:fadeIn .3s ease-out;padding:1rem 0}.searching-container,.match-success-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.spinner-container{position:relative;width:40px;height:40px}.spinner-ring{width:100%;height:100%;border:3px solid rgba(255,255,255,.1);border-top:3px solid var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.state-text{font-size:1.1rem;font-weight:600;color:var(--color-text-primary)}.state-subtext{font-size:.85rem;color:var(--color-text-secondary)}.success-checkmark{width:60px;height:60px}.checkmark{width:60px;height:60px;border-radius:50%;display:block;stroke-width:2;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 var(--color-success);animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--color-success);fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px var(--color-success)}}.tempo-card-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(var(--theme-color-rgb),.3),rgba(var(--theme-color-rgb),.15));border-radius:12px;color:var(--theme-color-hex);flex-shrink:0;filter:drop-shadow(0 0 4px rgba(var(--theme-color-rgb),.3));transition:all .3s ease}.tempo-card-icon svg{width:24px;height:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.tempo-title{font-size:1.1rem;font-weight:600;color:var(--color-text-primary);margin:0;letter-spacing:-.3px}.tempo-controls{display:flex;gap:.5rem;margin-bottom:1rem;transition:opacity .3s ease}.tempo-btn{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.85rem;font-weight:500;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease}.tempo-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary);border-color:var(--color-border-light)}.tempo-btn.active{background:rgba(var(--theme-color-rgb),.2);border-color:rgba(var(--theme-color-rgb),.5);color:var(--theme-color-hex)}.tempo-btn:disabled{cursor:not-allowed;opacity:.5}.tempo-description{color:var(--color-text-tertiary);font-size:.8rem;margin:auto 0 0;line-height:1.5;transition:opacity .3s ease}@media(max-width:768px){.tempo-card{padding:1.25rem;min-height:auto}.tempo-title{font-size:1rem}.tempo-btn{padding:.4rem .75rem;font-size:.8rem}.tempo-card-icon{width:36px;height:36px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease}.modal-content.custom-tempo-modal{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:20px;width:90%;max-width:400px;animation:slideUp .3s ease;box-shadow:var(--shadow-xl)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border)}.modal-header h2{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text-primary)}.modal-close{background:transparent;border:none;color:var(--color-text-secondary);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;transition:color .2s ease}.modal-body{padding:1.5rem}.tempo-setting{margin-bottom:1.5rem}.tempo-setting label{display:block;font-size:.9rem;color:var(--color-text-secondary);margin-bottom:.75rem}.setting-control{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:.75rem}.setting-control .control-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-primary);font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.setting-control .control-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-light)}.setting-value{font-size:2rem;font-weight:700;color:var(--color-text-primary);min-width:60px;text-align:center}.tempo-slider{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;outline:none}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--gradient-primary);border-radius:50%;cursor:pointer;transition:transform .2s ease}.tempo-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.tempo-preview{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:var(--color-surface);border-radius:12px;border:1px solid var(--color-border)}.preview-label{color:var(--color-text-secondary);font-size:.9rem}.preview-value{color:var(--color-accent);font-size:1.25rem;font-weight:700}.modal-footer{display:flex;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid var(--color-border)}.btn-cancel,.btn-start{flex:1;padding:.75rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-cancel{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary)}.btn-cancel:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.btn-start{background:var(--gradient-primary);border:none;color:#fff}.btn-start:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}.modal-overlay{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--color-bg-secondary);border:1px solid var(--color-border);box-shadow:var(--shadow-xl)}.modal-header h2{color:var(--color-text-primary)}.modal-header{border-bottom:1px solid var(--color-border)}.modal-footer{border-top:1px solid var(--color-border)}.modal-close{color:var(--color-text-tertiary)}.modal-close:hover{color:var(--color-text-primary)}.friend-invite-modal .modal-body{text-align:center}.tempo-selection{padding:1rem 0}.selection-hint{color:var(--color-text-tertiary);font-size:.95rem;margin:0 0 1.5rem}.tempo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.tempo-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem .75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;cursor:pointer;transition:all .2s ease;--theme-color-rgb: 231, 76, 60;--theme-color-hex: #e74c3c}.tempo-type-bullet{--theme-color-rgb: 231, 76, 60;--theme-color-hex: #e74c3c}.tempo-type-blitz{--theme-color-rgb: 241, 196, 15;--theme-color-hex: #f1c40f}.tempo-type-rapid{--theme-color-rgb: 52, 152, 219;--theme-color-hex: #3498db}.tempo-option:hover{background:rgba(var(--theme-color-rgb),.08);border-color:rgba(var(--theme-color-rgb),.3);transform:translateY(-2px)}.tempo-option.selected{background:rgba(var(--theme-color-rgb),.15);border-color:var(--theme-color-hex);box-shadow:0 0 15px rgba(var(--theme-color-rgb),.1)}.invite-tempo-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(var(--theme-color-rgb),.1);border-radius:8px;color:var(--theme-color-hex);flex-shrink:0}.invite-tempo-icon svg{width:20px;height:20px}.tempo-label{color:var(--color-text-primary);font-size:1.1rem;font-weight:600}.tempo-name{color:var(--color-text-tertiary);font-size:.75rem;font-weight:500}.error-message{background:#e74c3c1a;border:1px solid rgba(231,76,60,.3);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;color:#e74c3c;font-size:.9rem}.waiting-state{padding:2rem 0}.waiting-spinner{width:48px;height:48px;border:3px solid var(--color-border);border-top-color:#e74c3c;border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite}.waiting-text{color:var(--color-text-primary);font-size:1.1rem;font-weight:500;margin:0 0 .5rem}.waiting-hint{color:var(--color-text-secondary);font-size:.85rem;margin:0 0 1.5rem}.link-section{margin-top:1rem}.link-box{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:10px;padding:.75rem 1rem;margin-bottom:.75rem;overflow:hidden}.link-text{color:var(--color-text-secondary);font-size:.85rem;font-family:monospace;word-break:break-all}.copy-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:10px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.copy-btn:hover{background:linear-gradient(135deg,#ff6b6b,#e74c3c);transform:translateY(-1px)}[data-theme=light] .modal-content{background:#f8f9fa}[data-theme=light] .modal-overlay{background:#0000004d}[data-theme=light] .btn-cancel{background:#e9ecef;border-color:#dee2e6;color:#495057}.friend-invite-modal .modal-footer{justify-content:center}.friend-invite-modal .btn-cancel{max-width:200px}[data-theme=light] .tempo-option{background:#fff;box-shadow:0 2px 4px #0000000d}[data-theme=light] .tempo-option:hover{background:rgba(var(--theme-color-rgb),.04);box-shadow:0 4px 8px #00000014}[data-theme=light] .tempo-option.selected{background:rgba(var(--theme-color-rgb),.08);border-color:var(--theme-color-hex)}[data-theme=light] .link-box{background:#f1f3f5}[data-theme=light] .waiting-spinner{border-color:#0000000d;border-top-color:#e74c3c}.home-page{min-height:100vh;background:var(--color-bg-primary);transition:background var(--transition-normal)}.home-content{max-width:1400px;margin:0 auto;padding:100px 2rem 3rem}.hero-section{text-align:center;margin-bottom:3rem}.hero-title{font-size:3rem;font-weight:700;color:var(--color-text-primary);margin:0 0 1rem;letter-spacing:-1px}.hero-subtitle{font-size:1.1rem;color:var(--color-text-secondary);max-width:500px;margin:0 auto}.main-grid{max-width:900px;margin:0 auto}.tempo-section{display:flex;flex-direction:column;gap:1.5rem}.section-header{margin-bottom:.5rem}.section-title{font-size:1.25rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .25rem}.section-subtitle{font-size:.9rem;color:var(--color-text-tertiary);margin:0}.tempo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.custom-options{margin-top:1rem}.custom-title{font-size:1rem;font-weight:600;color:var(--color-text-primary);margin:0 0 1rem}.custom-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.custom-btn{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left}.custom-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-light);transform:translateY(-2px)}.custom-btn-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:10px;color:var(--color-text-secondary);flex-shrink:0;transition:all .2s ease}.custom-btn:hover .custom-btn-icon{background:linear-gradient(135deg,#e74c3c33,#e74c3c1a);color:#ff6b6b}.custom-btn-icon svg{width:20px;height:20px}.custom-btn-content{display:flex;flex-direction:column;gap:.25rem}.custom-btn-title{font-size:.95rem;font-weight:500;color:var(--color-text-primary)}.custom-btn-desc{font-size:.8rem;color:var(--color-text-tertiary)}.history-section{position:sticky;top:80px}@media(max-width:1024px){.main-grid{grid-template-columns:1fr}.history-section{position:static}}@media(max-width:768px){.home-content{padding:80px 1rem 2rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.tempo-cards,.custom-buttons{grid-template-columns:1fr}}.search-status-bar{display:flex;justify-content:center;margin-top:1.5rem;min-height:40px}.cancel-search-btn{color:var(--color-text-secondary);font-size:.9rem;padding:.5rem 1rem;border-radius:8px;transition:all .2s ease;background:transparent;border:1px solid transparent}.cancel-search-btn:hover{color:var(--color-text-primary);background:var(--color-surface);border-color:var(--color-border)}.custom-options.disabled{opacity:.5;pointer-events:none;filter:grayscale(.5);transition:opacity .3s ease}.custom-btn.locked{opacity:.6;cursor:not-allowed;background:var(--color-bg-secondary);border-color:var(--color-border)}.custom-btn.locked:hover{transform:none;background:var(--color-bg-secondary);border-color:var(--color-border)}.custom-btn.locked .custom-btn-icon,.custom-btn.locked:hover .custom-btn-icon{color:var(--color-text-tertiary);background:#ffffff0d}.ai-game-page{min-height:100vh;background:linear-gradient(180deg,#0f0f1a,#0a0a12)}.game-content{max-width:1400px;margin:0 auto;padding:80px 2rem 2rem}.game-container{display:flex;justify-content:center;align-items:flex-start;gap:2rem;margin-top:1rem}.side-panel{width:200px;display:flex;flex-direction:column;gap:1rem}.player-card{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#1e1e3099;border:1px solid rgba(255,255,255,.05);border-radius:12px;position:relative}.player-avatar{width:40px;height:40px;background:#0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.player-card.you .player-avatar{background:linear-gradient(135deg,#e74c3c33,#c0392b33);border:1px solid rgba(231,76,60,.3)}.avatar-icon{font-size:1.25rem}.player-info{display:flex;flex-direction:column}.player-name{font-size:.95rem;font-weight:600;color:#fff}.player-color{font-size:.8rem;color:#6b6b7b}.turn-indicator{position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#ffffff1a;transition:all .3s ease}.turn-indicator.active{background:#2ecc71;box-shadow:0 0 10px #2ecc7180}.clock-display{padding:1rem;background:#1e1e3099;border:1px solid rgba(255,255,255,.05);border-radius:12px;text-align:center;transition:all .3s ease}.clock-display.active{background:#e74c3c1a;border-color:#e74c3c4d}.clock-time{font-size:2rem;font-weight:700;font-family:Courier New,monospace;color:#fff}.clock-display.active .clock-time{color:#ff6b6b}.board-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.tempo-badge{padding:.5rem 1rem;background:#e74c3c1a;border:1px solid rgba(231,76,60,.3);border-radius:20px;font-size:.85rem;font-weight:500;color:#ff6b6b}.board-wrapper{border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #0006;max-width:100%}.board-controls{display:flex;gap:.5rem}.control-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#1e1e3099;border:1px solid rgba(255,255,255,.05);border-radius:10px;color:#a0a0b0;font-size:1.25rem;cursor:pointer;transition:all .2s ease}.control-btn:hover:not(:disabled){background:#1e1e30cc;color:#fff;border-color:#ffffff1a}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.resign:hover:not(:disabled){background:#e74c3c33;border-color:#e74c3c4d;color:#ff6b6b}@media(max-width:1024px){.game-container{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:520px;flex-direction:row;flex-wrap:wrap}.player-card{flex:1}.clock-display{width:auto}}@media(max-width:600px){.game-content{padding:70px 1rem 1rem}.board-wrapper{width:100%}}.profile-page{min-height:100vh;background:var(--gradient-dark);color:var(--color-text-primary);font-family:inherit;transition:background var(--transition-normal)}.profile-content{max-width:1040px;margin:0 auto;padding:100px var(--spacing-md) var(--spacing-xl)}h1,h2,h3,p{margin:0}.section-title{font-weight:700;color:var(--color-text-primary);letter-spacing:.5px;margin-bottom:var(--spacing-md);text-transform:uppercase;font-size:.85rem;opacity:.7}.section-title.main-title{font-size:2.2rem;opacity:1;margin-bottom:var(--spacing-lg);letter-spacing:-1px}.profile-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:var(--spacing-md);color:var(--color-text-secondary)}.games-loader-container{padding:4rem 0;text-align:center;color:var(--color-text-secondary)}.loading-spinner{width:40px;height:40px;border:2px solid var(--color-border);border-top-color:var(--color-premium);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto 1rem}.profile-card{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xl);background:var(--color-surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-border);border-radius:var(--radius-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-xl)}.profile-card-left{display:flex;align-items:center;gap:var(--spacing-md)}.avatar-wrapper{position:relative;width:80px;height:80px}.avatar-img,.avatar-placeholder{width:100%;height:100%;border-radius:var(--radius-full);border:2px solid var(--color-premium);box-shadow:0 0 20px var(--color-premium-bg);object-fit:cover}.avatar-placeholder{background:var(--gradient-dark);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:var(--color-premium)}.online-dot{position:absolute;bottom:2px;right:2px;width:16px;height:16px;background:var(--color-success);border:3px solid var(--color-bg-secondary);border-radius:var(--radius-full)}.profile-details{display:flex;flex-direction:column;gap:var(--spacing-xs)}.profile-name{font-size:1.75rem;font-weight:800;color:var(--color-text-primary);letter-spacing:-.5px}.profile-email{font-size:.95rem;color:var(--color-text-secondary)}.profile-tags{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm);flex-wrap:wrap}.tag{padding:.35rem .85rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.tag-gold{background:var(--color-premium-bg);color:var(--color-premium);border:1px solid var(--color-premium-border)}.tag-success{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success)}.tag-error{background:var(--color-danger-bg);color:var(--color-danger);border:1px solid var(--color-danger)}.profile-card-right{display:flex;align-items:center;gap:var(--spacing-md)}.btn-primary,.btn-ghost{display:flex;align-items:center;gap:var(--spacing-sm);padding:.75rem 1.5rem;border-radius:var(--radius-full);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);border:none;line-height:1}.btn-primary{background:var(--color-premium);color:var(--color-bg-primary)}.btn-primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 20px var(--color-premium-bg)}.btn-primary.loading svg{animation:spin 1s linear infinite}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-ghost:hover{color:var(--color-text-primary);border-color:var(--color-border-light);background:var(--color-surface)}.stats-section{margin-bottom:var(--spacing-xl)}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-md)}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.5rem;display:flex;align-items:center;gap:var(--spacing-md);transition:all var(--transition-normal);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--gradient-surface);opacity:0;transition:opacity var(--transition-normal)}.stat-card:hover{transform:translateY(-4px);border-color:var(--color-border-light);box-shadow:var(--shadow-lg)}.stat-card:hover:before{opacity:1}.stat-card.primary{background:var(--color-premium-bg);border-color:var(--color-premium-border)}.stat-card.primary:hover{border-color:var(--color-premium);box-shadow:0 10px 30px var(--color-premium-bg)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;background:var(--color-surface-hover);color:var(--color-text-secondary);flex-shrink:0}.stat-card.primary .stat-icon{background:var(--color-premium-bg);color:var(--color-premium)}.stat-icon.games{color:var(--color-text-secondary)}.stat-icon.wins{color:var(--color-success);background:var(--color-success-bg)}.stat-icon.losses{color:var(--color-danger);background:var(--color-danger-bg)}.stat-icon.winrate{color:var(--color-accent);background:var(--color-surface-active)}.stat-content{display:flex;flex-direction:column;z-index:1}.stat-value{font-size:1.6rem;font-weight:800;color:var(--color-text-primary);line-height:1;margin-bottom:var(--spacing-xs);letter-spacing:-.5px}.stat-card.primary .stat-value{color:var(--color-premium)}.stat-label{font-size:.8rem;font-weight:500;color:var(--color-text-secondary)}.themes-section{margin-bottom:var(--spacing-xl)}.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.theme-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);cursor:pointer;transition:all var(--transition-normal)}.theme-card:hover{border-color:var(--color-border-light);transform:translateY(-4px)}.theme-card.selected{border-color:var(--color-premium);background:var(--color-premium-bg);box-shadow:0 10px 30px var(--color-premium-bg)}.theme-preview{width:100px;height:100px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);pointer-events:none}.mini-board{width:100%;height:100%;display:flex;flex-direction:column}.mini-row{display:flex;flex:1}.mini-square{flex:1}.theme-name{font-size:.95rem;font-weight:600;color:var(--color-text-primary)}.theme-card.selected .theme-name{color:var(--color-premium)}.theme-check{position:absolute;top:-10px;right:-10px;width:28px;height:28px;background:var(--color-premium);color:var(--color-bg-primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.theme-card.selected .theme-check{opacity:1;transform:scale(1)}.save-theme-btn{width:100%;max-width:400px;margin:0 auto;display:block;padding:1rem;background:var(--color-premium);color:var(--color-bg-primary);border:none;border-radius:var(--radius-full);font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition-normal)}.save-theme-btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 25px var(--color-premium-bg)}.recent-games-section{background:transparent;margin-bottom:5rem}.games-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:2rem;flex-wrap:wrap}.filter-chips{display:flex;gap:.75rem}.chip{padding:.6rem 1.25rem;background:#ffffff0d;border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.chip:hover{background:#ffffff1a;color:var(--color-text-primary)}.chip.active{background:var(--color-premium);color:var(--color-bg-primary);border-color:var(--color-premium)}.search-filter-group{display:flex;gap:1rem;flex:1;max-width:500px;justify-content:flex-end;align-items:center}.revalidate-spinner{display:flex;align-items:center;justify-content:center;color:var(--color-premium)}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-box{position:relative;flex:1;display:flex;align-items:center;background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0 1rem;color:var(--color-text-secondary);transition:all var(--transition-normal)}.search-box:focus-within{border-color:var(--color-premium-border);background:#ffffff0f}.search-box input{background:transparent;border:none;padding:.75rem;color:var(--color-text-primary);width:100%;outline:none;font-family:inherit;font-size:.9rem}.btn-filter-settings{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;background:#ffffff0d;border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.btn-filter-settings:hover{background:#ffffff1a;color:var(--color-text-primary)}.games-table{display:flex;flex-direction:column}.games-list{display:flex;flex-direction:column;gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}.game-row{display:grid;grid-template-columns:140px 1fr 140px 80px 140px;align-items:center;padding:1.25rem 1.5rem;background:var(--color-bg-primary);transition:all var(--transition-normal);gap:1rem}.game-row:hover{background:#ffffff08}.game-col{display:flex;flex-direction:column}.col-label{font-size:.65rem;font-weight:800;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.25rem}.col-value-primary{font-size:.85rem;font-weight:500;color:var(--color-text-secondary)}.opponent-col{flex-direction:row;align-items:center;gap:1rem}.opponent-avatar-box{width:48px;height:48px;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);flex-shrink:0}.opponent-avatar-box img{width:100%;height:100%;object-fit:cover}.avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--color-premium)}.opponent-info-box{display:flex;flex-direction:column}.opponent-name{font-size:1.05rem;font-weight:700;color:var(--color-text-primary)}.opponent-meta{font-size:.75rem;font-weight:600;color:var(--color-premium)}.result-col{align-items:center}.result-text{font-weight:900;font-size:.9rem;letter-spacing:1px}.result-text.win{color:var(--color-success)}.result-text.loss{color:var(--color-danger)}.result-text.draw{color:var(--color-neutral)}.tempo-icon-col{align-items:center}.profile-tempo-icon{color:var(--color-text-tertiary);opacity:.6}.action-col{align-items:flex-end}.btn-analyze{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.75rem;font-weight:800;cursor:pointer;transition:all var(--transition-normal)}.btn-analyze:hover:not(.locked){background:var(--color-surface);border-color:var(--color-text-secondary)}.btn-analyze.locked{opacity:.4;cursor:not-allowed;background:var(--color-surface-hover);border-color:var(--color-border)}.btn-analyze .lock-icon{font-size:14px}.pagination-footer{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2rem}.btn-page-arrow{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);transition:all var(--transition-normal)}.btn-page-arrow:hover:not(:disabled){background:var(--color-surface);color:var(--color-text-primary)}.btn-page-arrow:disabled{opacity:.2;cursor:not-allowed}.page-numbers{display:flex;align-items:center;gap:.5rem}.btn-page{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-lg);color:var(--color-text-secondary);font-weight:700;font-size:.9rem;transition:all var(--transition-normal)}.btn-page:hover:not(.active){background:#ffffff0d;color:var(--color-text-primary)}.btn-page.active{background:var(--color-premium);color:var(--color-bg-primary)}.page-dots{color:var(--color-text-tertiary);padding:0 .5rem}@media(max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr)}.stat-card.primary{grid-column:1 / -1;justify-content:center;text-align:center}.game-row{grid-template-columns:120px 1fr 100px 50px 110px;padding:1rem}}@media(max-width:768px){.games-controls{flex-direction:column;align-items:flex-start;gap:1rem}.search-filter-group{max-width:100%;width:100%}.game-row{grid-template-columns:1fr 1fr;grid-template-areas:"opponent opponent" "date action" "result tempo";gap:1.5rem;padding:1.5rem}.game-col.date-col{grid-area:date}.game-col.opponent-col{grid-area:opponent}.game-col.result-col{grid-area:result;align-items:flex-start}.game-col.tempo-icon-col{grid-area:tempo;align-items:flex-end}.game-col.action-col{grid-area:action}.opponent-col{border-bottom:1px solid var(--color-border);padding-bottom:1rem;margin-bottom:.5rem}}@media(max-width:600px){.profile-card{flex-direction:column;gap:var(--spacing-xl);text-align:center;padding:1.5rem}.profile-card-left{flex-direction:column}.profile-tags{justify-content:center}.profile-card-right>button{width:100%;justify-content:center}.stats-grid,.themes-grid{grid-template-columns:repeat(2,1fr)}}.skeleton-box{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a,#ffffff0d 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.puzzle-page-wrapper{flex:1;display:flex;overflow:hidden;width:100%;padding-top:65px}.puzzle-sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);transition:width .26s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;padding:0;position:relative;z-index:20;flex-shrink:0}.sidebar-content{overflow-x:hidden;overflow-y:auto;flex:1;display:flex;flex-direction:column}.puzzle-sidebar.open{width:250px}.puzzle-sidebar.closed{width:72px}.sidebar-toggle-floating{position:absolute;right:-14px;top:1.5rem;z-index:50;width:28px;height:28px;background-color:#111;border:1px solid rgba(255,255,255,.1);color:#f3f4f6;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 8px #00000080;transition:background-color .2s ease,transform .2s ease,right .3s ease;padding:0;margin-top:-1rem}.sidebar-toggle-floating:hover{background-color:#000;transform:scale(1.05)}.sidebar-nav{display:flex;flex-direction:column;gap:.5rem}.sidebar-item{display:flex;align-items:center;gap:1rem;padding:.8rem 1.25rem;background:transparent;border:none;color:var(--color-text-secondary);font-weight:500;font-size:.95rem;cursor:pointer;transition:background .18s ease,color .18s ease;white-space:nowrap;text-align:left;outline:none;overflow:hidden}.sidebar-icon{display:inline-flex;justify-content:center;align-items:center;min-width:24px;width:24px;flex-shrink:0}.sidebar-text{opacity:1;transition:opacity .2s ease,width .26s cubic-bezier(.22,1,.36,1),margin .26s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1);display:inline-block;overflow:hidden;transform:translate(0);transform-origin:left center}.sidebar-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.sidebar-item.active{color:var(--color-accent);background:#3b82f61a}.puzzle-sidebar.closed .sidebar-item{border-right:none}.puzzle-sidebar.closed .sidebar-text{opacity:0;width:0;margin:0;pointer-events:none;transform:translate(-8px)}.puzzle-sidebar.closed .sidebar-item.active{border-right:none}@media(prefers-reduced-motion:reduce){.puzzle-sidebar,.sidebar-item,.sidebar-text,.sidebar-toggle-floating{transition:none!important}}.puzzle-page-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;color:var(--color-text-primary);font-family:Inter,sans-serif;width:100%;max-width:1000px;margin:0 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.puzzle-page-container::-webkit-scrollbar{display:none}.puzzle-btn{padding:10px 24px;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:1rem;transition:all .2s ease;box-shadow:0 4px 6px #3b82f640;display:inline-flex;align-items:center;justify-content:center}.puzzle-btn:hover:not(:disabled){background-color:#2563eb;transform:translateY(-1px);box-shadow:0 6px 8px #3b82f64d}.puzzle-btn:disabled{background-color:#4b5563;color:#9ca3af;cursor:not-allowed;box-shadow:none;transform:none}.puzzle-content{display:grid;grid-template-columns:1fr auto 1fr;align-items:flex-start;gap:2rem;width:100%}.puzzle-status-card{grid-column:3;justify-self:start;background:var(--color-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem;width:240px;display:flex;flex-direction:column;gap:1.2rem;box-shadow:var(--shadow-board)}.puzzle-info-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:.8rem;border-bottom:1px solid var(--color-border)}.puzzle-info-label{color:var(--color-text-secondary);font-size:.9rem;font-weight:500}.puzzle-info-value{color:var(--color-accent);font-weight:600;font-size:1.1rem}.puzzle-themes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.theme-tag{background:var(--color-surface-active);color:var(--color-text-primary);padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:500;border:1px solid var(--color-border);text-transform:capitalize}.puzzle-status-message-container{margin-top:.5rem;display:flex;flex-direction:column;gap:.8rem}.status-badge{display:inline-flex;padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:600;align-items:center;justify-content:center;text-align:center}.status-badge.loading{background:var(--color-surface-active);color:var(--color-warning);border:1px solid var(--color-border)}.status-badge.your-turn{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-border)}.status-badge.opponent-turn{background:var(--color-surface-active);color:var(--color-accent);border:1px solid var(--color-border)}.status-badge.wrong-move{display:none}.status-badge.complete{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-border)}.status-text{display:none}.puzzle-board-container{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-board);border:2px solid var(--color-border);background-color:var(--color-surface);padding:4px;transition:opacity .3s ease,background-color .3s ease,border-color .3s ease}.puzzle-board--fading{opacity:.25;pointer-events:none}@keyframes correctGlow{0%{box-shadow:0 0 #34d39900;opacity:0}20%{opacity:1;box-shadow:0 0 14px 6px #21c71bb3}80%{opacity:1;box-shadow:0 0 12px 5px #14ba258c}to{box-shadow:0 0 #34d39900;opacity:0}}@keyframes wrongFlash{0%{background-color:#ef444400}20%{background-color:#c917178c}50%{background-color:#c10a0a33}70%{background-color:#ef44448c}to{background-color:#ef444400}}.puzzle-square-highlight{position:absolute;z-index:10;border-radius:2px;pointer-events:none}.puzzle-square-highlight--correct{animation:correctGlow 1s ease forwards}.puzzle-square-highlight--wrong{animation:wrongFlash .9s ease forwards}@keyframes hintPulse{0%{box-shadow:0 0 #8b5cf600;opacity:.5}40%{box-shadow:0 0 12px 5px #8b5cf6b3;opacity:1}70%{box-shadow:0 0 10px 4px #8b5cf68c;opacity:1}to{box-shadow:0 0 12px 5px #8b5cf6b3;opacity:1}}.puzzle-square-highlight--hint{animation:hintPulse .6s ease forwards;box-shadow:0 0 12px 5px #8b5cf6a6}.puzzle-square-highlight--solution{background-color:#10b98159;box-shadow:inset 0 0 0 3px #10b981e6}.puzzle-board-column{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;position:relative}.puzzle-control-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;background:var(--color-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--color-border);border-radius:12px;padding:8px 12px;width:100%;box-sizing:border-box;justify-content:center}.ctrl-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:9px;border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-size:.92rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;white-space:nowrap}.ctrl-btn--nav{padding:8px 10px}.ctrl-btn--hint{color:#c4b5fd;border-color:#8b5cf659;background:#8b5cf61a}.ctrl-btn--hint:hover{background:#8b5cf638;border-color:#8b5cf699;box-shadow:0 0 8px #8b5cf64d}.ctrl-btn--solution{color:#6ee7b7;border-color:#10b98159;background:#10b9811a}.ctrl-btn--solution:hover{background:#10b98138;border-color:#10b98199;box-shadow:0 0 8px #10b9814d}.ctrl-btn--solution.ctrl-btn--active{background:#10b98140;color:#34d399;border-color:#10b98199}.ctrl-btn--skip{color:#fdba74;border-color:#f9731659;background:#f973161a}.ctrl-btn--skip:hover{background:#f9731638;border-color:#f9731699;box-shadow:0 0 8px #f973164d}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media(max-width:900px){.puzzle-content{display:grid;grid-template-columns:1fr;justify-items:center;gap:1.5rem}.puzzle-page-container{padding:1.5rem .5rem 1rem}.puzzle-header{margin-bottom:1.5rem}.puzzle-header h2{font-size:1.5rem}.puzzle-board-column{grid-column:1;width:100%;max-width:500px}.puzzle-status-card{grid-column:1;justify-self:center;width:100%;max-width:500px;padding:1.25rem;box-sizing:border-box}.puzzle-control-bar{width:100%;gap:.5rem;padding:8px}.ctrl-btn{padding:6px 14px;font-size:.85rem;gap:6px}.ctrl-btn--nav{padding:6px 8px}}.join-room-page{min-height:100vh;background:var(--color-background)}.join-room-content{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 80px);padding:2rem}.join-room-card{background:var(--color-surface);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:3rem 4rem;text-align:center;max-width:400px;width:100%}.join-spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-accent);border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.join-room-card h2{color:var(--color-text-primary);font-size:1.5rem;margin:0 0 .5rem}.join-hint{color:var(--color-text-secondary);margin:0}.error-icon{font-size:3rem;margin-bottom:1rem}.error-text{color:var(--color-text-secondary);margin-bottom:1.5rem}.error-actions{display:flex;gap:1rem;justify-content:center}.retry-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,var(--color-accent),#c0392b);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;transition:all .2s ease}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c4d}.home-btn{padding:.75rem 1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--color-text-primary);font-weight:600;cursor:pointer;transition:all .2s ease}.home-btn:hover{background:#ffffff1a}.app{min-height:100vh;display:flex;flex-direction:column}.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl);margin:var(--spacing-md);margin-bottom:0}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-icon{font-size:2rem;color:var(--color-accent)}.logo-text{font-size:1.5rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav{display:flex;gap:var(--spacing-sm)}.nav-btn{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:500;color:var(--color-text-secondary);transition:all var(--transition-fast)}.nav-btn:hover{background:var(--color-surface);color:var(--color-text-primary)}.back-btn{padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-weight:500;transition:all var(--transition-fast)}.back-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.game-container{display:flex;align-items:flex-start;gap:var(--spacing-xl)}.side-panel{display:flex;flex-direction:column;gap:var(--spacing-md);width:280px}.left-panel{align-items:flex-end}.right-panel{align-items:flex-start}.player-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);width:100%}.player-avatar{width:48px;height:48px;background:var(--color-surface);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.player-avatar.you{background:var(--gradient-primary)}.player-info{flex:1;display:flex;flex-direction:column}.player-name{font-weight:600;color:var(--color-text-primary)}.player-rating{font-size:.875rem;color:var(--color-text-tertiary)}.turn-indicator{width:12px;height:12px;background:var(--color-surface);border-radius:50%;transition:all var(--transition-fast)}.turn-indicator.active{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.board-section{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.game-status-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl);text-align:center}.status-icon{font-size:3rem;color:var(--color-accent)}.status-text{font-size:1.5rem;font-weight:700;color:var(--color-text-primary)}.new-game-btn{margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--gradient-primary);color:#fff;font-weight:600;border-radius:var(--radius-md);transition:all var(--transition-fast)}.new-game-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.board-controls{display:flex;gap:var(--spacing-sm)}.control-btn{width:44px;height:44px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:all var(--transition-fast)}.control-btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary);border-color:var(--color-border-light)}.control-btn:active{transform:scale(.95)}.footer{padding:var(--spacing-md);text-align:center}.footer-text{font-size:.875rem;color:var(--color-text-tertiary)}@media(max-width:1200px){.game-container{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:560px;flex-direction:row;justify-content:space-between}.left-panel{order:-1}.right-panel{order:1}.player-card{width:auto}.move-list{flex:1;max-height:200px}}@media(max-width:640px){.header{flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md)}.main{padding:var(--spacing-md)}.side-panel{flex-direction:column}}[data-theme=dark]{--color-bg-primary: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-tertiary: #0f3460;--color-surface: rgba(255, 255, 255, .05);--color-surface-hover: rgba(255, 255, 255, .1);--color-surface-active: rgba(255, 255, 255, .15);--color-border: rgba(255, 255, 255, .1);--color-border-light: rgba(255, 255, 255, .2);--color-text-primary: #ffffff;--color-text-secondary: rgba(255, 255, 255, .7);--color-text-tertiary: rgba(255, 255, 255, .5);--color-accent: #e94560;--color-accent-hover: #ff6b8a;--color-accent-secondary: #0f3460;--color-success: #4ade80;--color-success-bg: rgba(74, 222, 128, .15);--color-danger: #ef4444;--color-danger-bg: rgba(239, 68, 68, .15);--color-error: #ef4444;--color-warning: #fbbf24;--color-neutral: #9ca3af;--color-neutral-bg: rgba(156, 163, 175, .15);--color-premium: #d4af37;--color-premium-bg: rgba(212, 175, 55, .15);--color-premium-border: rgba(212, 175, 55, .3);--board-light: #E8D5B7;--board-dark: #B58863;--board-light-highlight: #F7EC9F;--board-dark-highlight: #DAC54B;--board-last-move-light: #CDD26A;--board-last-move-dark: #AAA23A;--board-valid-move: rgba(0, 0, 0, .15);--board-check: rgba(255, 0, 0, .5);--board-selected: rgba(255, 255, 0, .4);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-glow: 0 0 20px rgba(233, 69, 96, .3);--shadow-board: 0 8px 32px rgba(0, 0, 0, .4);--gradient-primary: linear-gradient(135deg, #e94560 0%, #0f3460 100%);--gradient-surface: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%);--gradient-dark: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)}[data-theme=light]{--color-bg-primary: #f5f7fa;--color-bg-secondary: #e8ecf1;--color-bg-tertiary: #d1d9e3;--color-surface: #ffffff;--color-surface-hover: #f8f9fa;--color-surface-active: #f0f1f3;--color-border: rgba(0, 0, 0, .15);--color-border-light: rgba(0, 0, 0, .25);--color-text-primary: #1a1a2e;--color-text-secondary: rgba(26, 26, 46, .7);--color-text-tertiary: rgba(26, 26, 46, .5);--color-accent: #e94560;--color-accent-hover: #d63850;--color-accent-secondary: #5c8fd8;--color-success: #22c55e;--color-success-bg: rgba(34, 197, 94, .15);--color-danger: #dc2626;--color-danger-bg: rgba(220, 38, 38, .15);--color-error: #dc2626;--color-warning: #f59e0b;--color-neutral: #64748b;--color-neutral-bg: rgba(100, 116, 139, .15);--color-premium: #b8860b;--color-premium-bg: rgba(184, 134, 11, .15);--color-premium-border: rgba(184, 134, 11, .3);--board-light: #E8D5B7;--board-dark: #B58863;--board-light-highlight: #F7EC9F;--board-dark-highlight: #DAC54B;--board-last-move-light: #CDD26A;--board-last-move-dark: #AAA23A;--board-valid-move: rgba(0, 0, 0, .15);--board-check: rgba(255, 0, 0, .5);--board-selected: rgba(255, 255, 0, .4);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .03);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .03);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 10px 10px -5px rgba(0, 0, 0, .02);--shadow-glow: 0 0 20px rgba(233, 69, 96, .15);--shadow-board: 0 8px 32px rgba(0, 0, 0, .15);--gradient-primary: linear-gradient(135deg, #e94560 0%, #5c8fd8 100%);--gradient-surface: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .85) 100%);--gradient-dark: linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)}:root{--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--gradient-dark);color:var(--color-text-primary);min-height:100vh;line-height:1.5;transition:background var(--transition-normal),color var(--transition-normal)}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--color-surface-active);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-border-light)}::selection{background:var(--color-accent);color:#fff}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.glass{background:var(--gradient-surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.glow{box-shadow:var(--shadow-glow)}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fadeIn{animation:fadeIn var(--transition-normal) var(--ease-out)}.animate-slideUp{animation:slideUp var(--transition-slow) var(--ease-out)}.animate-scaleIn{animation:scaleIn var(--transition-normal) var(--spring)}