body{background:#0f0f1a;margin:0;padding:0}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0f0f1a;--bg-secondary:#1a1a2e;--bg-card:#16213e;--bg-hover:#1f3460;--text-primary:#e8e8f0;--text-secondary:#a0a0b8;--text-muted:#6c6c88;--accent:#4a90d9;--accent-hover:#5ba0e9;--danger:#e74c3c;--success:#2ecc71;--warning:#f39c12;--border:#2a2a44;--radius:8px}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Noto Sans SC,sans-serif;overflow-x:hidden}#root{min-height:100vh}.btn{cursor:pointer;border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-hover);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:#2a4080}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#c0392b}.btn-outline{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.btn-outline:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.btn-sm{padding:4px 12px;font-size:13px}.btn-lg{border-radius:8px;padding:12px 32px;font-size:16px}.input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;width:100%;padding:8px 12px;font-size:13px}.input:focus{border-color:var(--accent);outline:none}.ai-status{border-radius:12px;padding:4px 12px;font-size:13px;font-weight:500}.ai-status-idle{background:var(--bg-card);color:var(--text-muted)}.ai-status-loading{color:var(--warning);background:#f39c1226}.ai-status-ready{color:var(--success);background:#2ecc7126}.ai-status-thinking{color:var(--accent);background:#4a90d926}.ai-status-error{color:var(--danger);background:#e74c3c26}.info-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);padding:16px}.info-card h4{color:var(--text-secondary);margin-bottom:8px;font-size:14px}.info-row{justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;display:flex}.info-row:not(:last-child){border-bottom:1px solid var(--border)}.info-row span:first-child{color:var(--text-secondary)}.info-row span:last-child{font-weight:600}.action-buttons{flex-wrap:wrap;gap:8px;display:flex}.page-loading{min-height:60vh;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.page-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:12px 20px;display:flex}.page-title{flex:1;font-size:15px;font-weight:600}.home-page{flex-direction:column;gap:32px;max-width:480px;min-height:100vh;margin:0 auto;padding:40px 20px;display:flex}.home-hero{text-align:center}.home-hero h1{margin-bottom:8px;font-size:36px}.home-subtitle{color:var(--text-muted);font-size:14px}.home-actions{flex-direction:column;gap:12px;display:flex}.home-btn{border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:16px;padding:20px;transition:all .2s;display:flex}.home-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.home-btn-icon{font-size:28px}.home-btn-title{margin-bottom:4px;font-size:16px;font-weight:600}.home-btn-desc{color:var(--text-muted);font-size:13px}.home-btn-primary{border-color:var(--accent);background:#4a90d91a}.home-btn-link{color:inherit;cursor:pointer;border-color:var(--border);text-decoration:none}.home-btn-link:hover{background:var(--bg-hover);border-color:var(--accent);color:inherit}.settings-toggle-btn{border:1px solid var(--border);background:var(--bg-card);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;z-index:1001;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;top:20px;right:20px;box-shadow:0 2px 8px #0000004d}.settings-toggle-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent);transform:scale(1.05)}.settings-toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(90deg)}.settings-icon{width:22px;height:22px}.settings-toggle-btn.active .settings-icon{animation:.3s gearSpin}@keyframes gearSpin{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.settings-overlay{backdrop-filter:blur(4px);opacity:0;visibility:hidden;z-index:999;background:#00000080;transition:all .3s;position:fixed;inset:0}.settings-overlay.visible{opacity:1;visibility:visible}.settings-panel{border-left:1px solid var(--border);z-index:1000;backdrop-filter:blur(20px);background:linear-gradient(135deg,#1a1a2efa 0%,#0f0f1afa 100%);flex-direction:column;width:360px;max-width:90vw;height:100vh;transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-4px 0 24px #00000080}.settings-panel.open{transform:translate(0)}.settings-panel-header{border-bottom:1px solid var(--border);background:#0003;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.settings-panel-header h3{color:var(--text-primary);margin:0;font-size:18px;font-weight:600}.settings-close-btn{border:1px solid var(--border);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.settings-close-btn:hover{background:var(--bg-hover);color:var(--danger);border-color:var(--danger)}.settings-close-btn svg{width:18px;height:18px}.settings-panel-content{flex:1;padding:24px;overflow-y:auto}.settings-panel-content::-webkit-scrollbar{width:6px}.settings-panel-content::-webkit-scrollbar-track{background:0 0}.settings-panel-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.settings-panel-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.settings-panel .setting-group{margin-bottom:24px}.settings-panel .setting-group:last-child{margin-bottom:0}.settings-panel .setting-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:13px;font-weight:500;display:block}.model-selector{flex-direction:column;gap:8px;display:flex}.model-btn{border:1px solid var(--border);background:var(--bg-primary);width:100%;color:var(--text-secondary);cursor:pointer;text-align:left;border-radius:10px;padding:14px 16px;transition:all .2s}.model-btn:hover{border-color:var(--accent);background:#4a90d90d}.model-btn.active{border-color:var(--accent);color:var(--accent);background:#4a90d926}.model-btn-value{margin-bottom:4px;font-size:14px;font-weight:600;display:block}.model-btn-desc{color:var(--text-muted);font-size:12px}.model-btn.active .model-btn-desc{color:#4a90d9cc}.settings-panel .size-selector{gap:8px;display:flex}.settings-panel .size-btn{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;text-align:center;border-radius:10px;flex:1;padding:14px 10px;transition:all .2s}.settings-panel .size-btn:hover{border-color:var(--accent);background:#4a90d90d}.settings-panel .size-btn.active{border-color:var(--accent);color:var(--accent);background:#4a90d926}.settings-panel .size-btn-value{margin-bottom:4px;font-size:16px;font-weight:600;display:block}.settings-panel .size-btn-desc{color:var(--text-muted);font-size:11px}.settings-panel .size-btn.active .size-btn-desc{color:#4a90d9cc}.settings-panel .ai-status{border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;display:inline-flex}.size-selector{gap:8px;display:flex}.size-btn{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;text-align:center;border-radius:8px;flex:1;padding:12px 8px;transition:all .2s}.size-btn:hover{border-color:var(--accent)}.size-btn.active{border-color:var(--accent);color:var(--accent);background:#4a90d926}.size-btn-value{margin-bottom:2px;font-size:16px;font-weight:600;display:block}.size-btn-desc{color:var(--text-muted);font-size:11px}.game-page,.analysis-page{flex-direction:column;min-height:100vh;display:flex}.game-content,.analysis-content{flex:1;gap:16px;width:100%;max-width:1100px;margin:0 auto;padding:16px;display:flex}.board-section{flex:1;min-width:0;position:relative}.game-sidebar,.analysis-sidebar{flex-direction:column;flex-shrink:0;gap:12px;width:280px;display:flex}.game-over-overlay{border-radius:var(--radius);z-index:10;background:#000000bf;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.game-over-content{background:var(--bg-card);text-align:center;border:1px solid var(--border);border-radius:12px;min-width:260px;padding:32px}.game-over-content h2{margin-bottom:16px}.winner-text{margin-bottom:20px;font-size:18px;font-weight:600}@media (width<=768px){.game-content,.analysis-content{flex-direction:column;padding:8px}.game-sidebar,.analysis-sidebar,.board-section{width:100%}.home-page{padding:24px 16px}.home-hero h1{font-size:28px}.settings-toggle-btn{width:40px;height:40px;top:12px;right:12px}.settings-icon{width:20px;height:20px}.settings-panel{width:100%;max-width:100%}.settings-panel-header{padding:16px 20px}.settings-panel-content{padding:20px}.settings-panel .setting-group{margin-bottom:20px}}.game-end-overlay{z-index:100;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.end-announcement{color:gold;text-shadow:0 0 30px #ffd700e6,0 0 60px #ffd70080;backdrop-filter:blur(8px);background:#0000004d;border:2px solid #ffd70080;border-radius:20px;padding:20px 60px;font-size:80px;font-weight:700;animation:1.5s ease-out forwards endGamePulse}@keyframes endGamePulse{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.2)}50%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(1)}}.counting-panel{text-align:center;backdrop-filter:blur(10px);background:#00000080;border:2px solid #ffd70099;border-radius:20px;min-width:280px;padding:30px 50px;box-shadow:0 0 30px #ffd70066}.counting-title{color:gold;margin-bottom:15px;font-size:20px}.counting-scores{justify-content:center;gap:40px;display:flex}.counting-score{text-align:center}.counting-score .score-label{color:#888;margin-bottom:5px;font-size:14px}.counting-score .score-value{color:#fff;font-size:36px;font-weight:700}.victory-announcement{text-align:center;backdrop-filter:blur(10px);background:#0006;border-radius:20px;min-width:180px;padding:25px 60px;animation:.8s ease-out victoryBounce}.victory-announcement.black-win{border:2px solid #4169e180;box-shadow:0 0 40px #4169e166}.victory-announcement.white-win{border:2px solid #dc143c80;box-shadow:0 0 40px #dc143c66}.victory-title{white-space:nowrap;margin-bottom:10px;font-size:72px;font-weight:700}.victory-announcement.black-win .victory-title{color:#4169e1;text-shadow:0 0 20px #4169e1cc}.victory-announcement.white-win .victory-title{color:#dc143c;text-shadow:0 0 20px #dc143ccc}.victory-margin{color:gold;text-shadow:0 0 10px #ffd700cc;font-size:28px}@keyframes victoryBounce{0%{opacity:0;transform:scale(.3)rotate(-10deg)}50%{transform:scale(1.1)rotate(5deg)}70%{transform:scale(.95)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}.fireworks-container{pointer-events:none;z-index:98;position:fixed;inset:0}.firework-particle{border-radius:50%;width:6px;height:6px;animation:1s ease-out forwards fireworkExplode;position:absolute}@keyframes fireworkExplode{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(calc(cos(var(--angle)) * var(--distance)), calc(sin(var(--angle)) * var(--distance))) scale(0);opacity:0}}.final-scoreboard{text-align:center;backdrop-filter:blur(15px);pointer-events:auto;background:linear-gradient(135deg,#0009 0%,#14142899 100%);border:2px solid #ffd70080;border-radius:20px;min-width:350px;padding:30px 50px;box-shadow:0 0 30px #ffd7004d}.scoreboard-title{color:gold;text-shadow:0 0 10px #ffd70080;margin-bottom:25px;font-size:32px}.scoreboard-scores{justify-content:center;align-items:center;gap:40px;margin-bottom:30px;display:flex}.scoreboard-score{text-align:center}.scoreboard-score .score-label{margin-bottom:5px;font-size:20px}.scoreboard-score .score-label:first-child{color:#4169e1}.scoreboard-score .score-label:last-child{color:#dc143c}.scoreboard-score .score-value{color:#fff;font-size:48px;font-weight:700}.score-vs{color:#666;font-size:24px}.scoreboard-winner{margin-bottom:5px;font-size:28px;font-weight:700}.scoreboard-winner.black-win{color:#4169e1;text-shadow:0 0 10px #4169e180}.scoreboard-winner.white-win{color:#dc143c;text-shadow:0 0 10px #dc143c80}.scoreboard-margin{color:gold;font-size:18px}.scoreboard-details{color:#888;margin-top:20px;font-size:14px}.detail-item{margin:5px 0}.scoreboard-actions{justify-content:center;gap:20px;margin-top:30px;display:flex}.btn-success{color:#000;background:linear-gradient(135deg,gold 0%,#ffed4e 100%);font-weight:700}.btn-success:hover:not(:disabled){transform:scale(1.05);box-shadow:0 0 20px #ffd70080}@media (width<=768px){.end-announcement{padding:15px 40px;font-size:48px}.counting-panel{min-width:200px;padding:20px 30px}.counting-title{font-size:16px}.counting-scores{gap:20px}.counting-score .score-value{font-size:28px}.victory-title{font-size:48px}.victory-margin{font-size:22px}.final-scoreboard{min-width:280px;padding:20px 25px}.scoreboard-title{font-size:24px}.scoreboard-scores{gap:20px}.scoreboard-score .score-label{font-size:14px}.scoreboard-score .score-value{font-size:32px}.scoreboard-winner{font-size:22px}.scoreboard-actions{flex-direction:column}}