:root{--sq: min( calc((100vw - 16px) / 9), calc((100vh - 80px) / 9.2) )}.board-wrap{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.board{display:flex;flex-direction:column;border:2px solid var(--border);box-shadow:0 4px 20px var(--shadow)}.board-row{display:flex;flex-direction:row;align-items:center}.coord{display:flex;align-items:center;justify-content:center;font-size:calc(var(--sq) * .28);font-weight:600;color:var(--text-4);flex-shrink:0}.coord.rank{width:calc(var(--sq) * .38);height:var(--sq)}.coord.file{width:var(--sq);height:calc(var(--sq) * .38)}.file-row .coord.rank{height:calc(var(--sq) * .38)}.square{width:var(--sq);height:var(--sq);display:flex;align-items:center;justify-content:center;position:relative;cursor:default}.sq-light{background:#f0d9b5}.sq-dark{background:#b58863}.sq-sel{background:#f6f669}.sq-last{background:#cdd16a}.sq-check{background:#e05050}.square.clickable{cursor:pointer}.square.legal-capture:after{content:"";position:absolute;inset:3px;border:4px solid rgba(0,0,0,.35);border-radius:4px;pointer-events:none}.sq-dark.legal-capture:after{border-color:#00000080}.piece{font-family:Segoe UI Symbol,Symbola,sans-serif;font-size:calc(var(--sq) * .66);line-height:1;display:flex;align-items:center;justify-content:center;width:calc(var(--sq) * .78);height:calc(var(--sq) * .78);border-radius:50%;pointer-events:none;flex-shrink:0}.piece.white{background:#f5ede0;color:#1a1714;border:1.5px solid rgba(0,0,0,.3)}.piece.black{background:#2a2420;color:#e8e0d7;border:1.5px solid rgba(255,255,255,.12)}.legal-dot{width:34%;height:34%;border-radius:50%;background:#00000040;pointer-events:none}.sq-dark .legal-dot{background:#00000059}.promo-overlay{position:absolute;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:20}.promo-dialog{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:20px 24px;text-align:center;box-shadow:0 8px 32px var(--shadow)}.promo-dialog p{margin-bottom:14px;font-size:.78rem;color:var(--text-4);font-weight:600;text-transform:uppercase;letter-spacing:.08em}.promo-choices{display:flex;gap:8px}.promo-btn{width:var(--sq);height:var(--sq);border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s}.promo-btn:hover{background:var(--bg);border-color:var(--accent)}.promo-btn .piece.black{border-color:#ffffff40}:root{--bg: #ffffff;--bg-subtle: #fafafa;--text: #1a1a1a;--text-2: #333333;--text-3: #555555;--text-4: #888888;--border: #e0e0e0;--accent: #1a73e8;--shadow: rgba(0,0,0,.18);--overlay: rgba(0,0,0,.45);--error: #cc0000;--error-bg: #fff3f3;--error-border:#f5c6c6}[data-theme=dark]{--bg: #000000;--bg-subtle: #252636;--text: #e8e9f0;--text-2: #b8bac8;--text-3: #8e8fa0;--text-4: #686878;--border: #3a3b4e;--accent: #5b9bff;--shadow: rgba(0,0,0,.55);--overlay: rgba(0,0,0,.65);--error: #ff7070;--error-bg: #2a1818;--error-border:#5a2828}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:12px 8px;gap:10px}.lobby{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:60px;padding:36px 44px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:12px;min-width:300px;box-shadow:0 4px 16px var(--shadow)}.lobby-top-row{width:100%;display:flex;justify-content:flex-end;margin-bottom:-4px}.lobby h1{font-size:1.8rem;font-weight:700;color:var(--text);margin-bottom:4px}.lobby-btn{width:100%;padding:8px 18px;font-size:.9rem;font-weight:500;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text-2);cursor:pointer;transition:background .12s,border-color .12s}.lobby-btn:hover:not(:disabled){background:var(--bg-subtle);border-color:var(--text-4)}.lobby-btn:disabled{opacity:.4;cursor:default}.lobby-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.lobby-btn.primary:hover:not(:disabled){opacity:.88}.divider{font-size:.78rem;color:var(--text-4);text-transform:uppercase;letter-spacing:.08em}.join-row{display:flex;gap:8px;width:100%}.join-input{flex:1;padding:7px 10px;font-size:.9rem;font-family:monospace;letter-spacing:.12em;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);text-transform:uppercase}.join-input:focus{outline:none;border-color:var(--accent)}.join-row .lobby-btn{width:auto;flex-shrink:0}.game-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:2px 0}.game-id-badge{font-family:monospace;font-size:.85rem;font-weight:600;background:var(--bg-subtle);border:1px solid var(--border);padding:3px 9px;border-radius:6px;color:var(--text-4);letter-spacing:.1em}.status-text{font-size:.9rem;color:var(--text-3)}.status-text.game-over{font-weight:600;color:var(--text)}.color-badge{font-size:.82rem;font-weight:500;padding:3px 10px;border-radius:20px;border:1px solid var(--border);color:var(--text-3);text-transform:capitalize}.theme-btn{padding:4px 10px;border:1px solid var(--border);background:var(--bg);color:var(--text-3);border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500;transition:background .12s}.theme-btn:hover{background:var(--bg-subtle)}.resign-btn{padding:4px 12px;border:1px solid var(--border);background:transparent;color:var(--error);border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500;transition:background .12s,border-color .12s}.resign-btn:hover{background:var(--error-bg);border-color:var(--error)}.new-game-btn{padding:4px 14px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500}.new-game-btn:hover{opacity:.88}.err{font-size:.85rem;color:var(--error);background:var(--error-bg);border:1px solid var(--error-border);border-radius:6px;padding:6px 12px;text-align:center}.in-game-err{margin:0}.mode-btn-group{display:flex;flex-direction:column;gap:10px;width:100%}.mode-option{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}.toggle-row{display:flex;gap:4px}.toggle-btn{flex:1;padding:5px 0;font-size:.8rem;background:var(--bg-subtle);color:var(--text-2);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.toggle-btn:hover{background:var(--bg);color:var(--text)}.toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.time-control-row{display:flex;align-items:center;gap:8px}.tc-label{font-size:.8rem;color:var(--text-4);white-space:nowrap}.time-control-select{flex:1;padding:5px 8px;font-size:.85rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-subtle);color:var(--text);cursor:pointer}.time-control-select:focus{outline:none;border-color:var(--accent)}.clock-wrap{display:flex;align-items:center;gap:8px}.clock-label{font-size:.75rem;color:var(--text-4);text-transform:capitalize;min-width:36px}.clock-display{font-family:monospace;font-size:1.2rem;font-weight:600;padding:4px 14px;border-radius:6px;border:1px solid var(--border);background:var(--bg-subtle);color:var(--text-2);min-width:70px;text-align:center;transition:background .15s,color .15s}.clock-display.clock-active{border-color:var(--accent);color:var(--text)}.clock-display.clock-low{background:#fff3cd;border-color:#e6a817;color:#7a4500}[data-theme=dark] .clock-display.clock-low{background:#3a2a00;border-color:#c88000;color:#ffd060}.clock-display.clock-flagged{background:var(--error-bg);border-color:var(--error);color:var(--error)}.back-btn{padding:4px 10px;border:1px solid var(--border);background:var(--bg);color:var(--text-3);border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500;transition:background .12s;white-space:nowrap}.back-btn:hover{background:var(--bg-subtle)}.challenge-view{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px 8px;width:100%;max-width:480px;margin:0 auto}.challenge-header{display:flex;align-items:center;gap:12px;width:100%}.challenge-header h2{font-size:1.2rem;font-weight:700;color:var(--text)}.puzzle-list{display:flex;flex-direction:column;gap:10px;width:100%}.puzzle-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px}.puzzle-card-info{flex:1;display:flex;flex-direction:column;gap:2px}.puzzle-title{font-size:.9rem;font-weight:600;color:var(--text)}.puzzle-desc{font-size:.78rem;color:var(--text-3)}.puzzle-difficulty{font-size:.8rem;color:#e6a817;letter-spacing:.05em}.puzzle-card .lobby-btn{width:auto;white-space:nowrap}.puzzle-result-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--overlay);border-radius:8px;z-index:10;font-size:1.4rem;font-weight:700;color:#fff;gap:4px}.puzzle-result-overlay.success{background:#16783cd1}.puzzle-result-overlay.failure{background:#a01e1ed1}.online-lobby{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:60px;padding:36px 44px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:12px;min-width:300px;box-shadow:0 4px 16px var(--shadow)}.searching-row{display:flex;flex-direction:column;align-items:center;gap:12px}.searching-text{font-size:.9rem;color:var(--text-2);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.clocks-row{display:flex;gap:12px;justify-content:center;padding:4px 0}.local-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:2px 0}.move-counter{font-size:.82rem;color:var(--text-4)}.undo-btn{padding:4px 12px;border:1px solid var(--border);background:var(--bg);color:var(--text-3);border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500;transition:background .12s}.undo-btn:hover{background:var(--bg-subtle)}