@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,500;6..12,600;6..12,700;6..12,800&display=swap";:root,[data-theme=dark]{--bg:#262421;--bg-2:#312e2b;--panel:#1f1e1c;--panel-2:#2a2825;--text:#fff;--text-dim:#c3c0bb;--text-mute:#8a8580;--green:#81b64c;--green-dark:#5d9948;--green-btn:#86c232;--board-light:#ebecd0;--board-dark:#739552;--last:#f5f682;--selected:#f6f669;--check:#e64848;--border:#3d3a37;--shadow:0 10px 28px #00000073;--nav-bg:#211f1c;--nav-brand:linear-gradient(180deg, #3d3a36, #2a2825);--tabs-bg:#171614;--clock-bg:#171614;--clock-face:#2f2c28;--modal-bg:#2c2a27;--modal-border:#524e48;--overlay:#0000008c;--hover:#ffffff0f;--hover-strong:#35322e;--hover-border:#5a564f;--btn-shadow:#3f6b2e;--eval-track:#403d39;--eval-edge:#1a1a1a;--comment-base:#2a2825f2;--scrollbar:#555;--dot:#00000038;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Nunito Sans,system-ui,sans-serif;line-height:1.4}[data-theme=light]{--bg:#e8e6e1;--bg-2:#f4f2ed;--panel:#fff;--panel-2:#f3f1ec;--text:#1c1a17;--text-dim:#4a4641;--text-mute:#7a756e;--green:#5a9e3a;--green-dark:#4a8530;--green-btn:#6bb33f;--board-light:#f0d9b5;--board-dark:#b58863;--last:#f6f669;--selected:#f6f669;--check:#d63535;--border:#d4cfc6;--shadow:0 10px 28px #281e141f;--nav-bg:#f7f5f0;--nav-brand:linear-gradient(180deg, #fff, #ebe7df);--tabs-bg:#ebe7df;--clock-bg:#ebe7df;--clock-face:#fff;--modal-bg:#fff;--modal-border:#d4cfc6;--overlay:#281e1459;--hover:#0000000d;--hover-strong:#ebe7df;--hover-border:#c4beb4;--btn-shadow:#3f6b2e;--eval-track:#cfc8bd;--eval-edge:#9a948a;--comment-base:#f3f1ecfa;--scrollbar:#b0aaa0;--dot:#00000047;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);min-height:100vh;color:var(--text)}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}.app{background:var(--bg);grid-template-columns:72px 1fr;min-height:100vh;display:grid}.nav{background:var(--nav-bg);border-right:1px solid var(--border);flex-direction:column;align-items:center;gap:.35rem;padding:.85rem .4rem;display:flex}.nav-brand{background:var(--nav-brand);width:44px;height:44px;color:var(--green);border-radius:10px;place-items:center;margin-bottom:.75rem;font-size:1.6rem;display:grid;box-shadow:inset 0 1px #ffffff14}.nav-item{width:100%;color:var(--text-dim);letter-spacing:.02em;border-radius:8px;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .25rem;font-size:.68rem;font-weight:700;transition:background .15s,color .15s;display:flex}.nav-item svg{display:block}.nav-item:hover{background:var(--hover);color:var(--text)}.nav-item.active{color:var(--green);background:#81b64c2e}.nav-theme{margin-top:auto}.nav-brand svg{display:block}.main{grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:start;gap:1rem;max-width:1280px;padding:1rem 1.1rem 1.25rem;display:grid}.game-column{flex-direction:column;justify-self:center;gap:.55rem;width:min(100%,680px);display:flex}.board-row{align-items:stretch;gap:.45rem;width:100%;display:flex}.eval-bar{background:var(--eval-edge);border-radius:4px;flex-direction:column-reverse;flex-shrink:0;width:18px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}.eval-white{z-index:1;background:#f0efe9;width:100%;transition:height .35s}.eval-black{background:var(--eval-track);position:absolute;inset:0}.eval-label{color:#111;mix-blend-mode:difference;pointer-events:none;z-index:2;white-space:nowrap;font-size:.62rem;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.board-row .board-area{flex:1;min-width:0}.player-bar{background:var(--panel-2);border:1px solid #0000;border-radius:8px;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;min-height:56px;padding:.55rem .7rem;display:grid}.player-bar.active{border-color:var(--green);background:linear-gradient(90deg, #81b64c29, var(--panel-2))}.player-bar.thinking{border-color:#f0c14b}.player-bar.low-time{border-color:#e64848}.clock{background:var(--clock-bg);border:1px solid var(--border);font-variant-numeric:tabular-nums;text-align:center;min-width:4.8rem;color:var(--text-dim);border-radius:8px;padding:.45rem .65rem;font-size:1.15rem;font-weight:800}.clock.running{background:var(--clock-face);color:var(--text);border-color:var(--green);box-shadow:0 0 0 1px #81b64c40}.clock.low{color:#ff8f8f;border-color:#e648488c}.clock.running.low{background:#e648482e;animation:1s infinite blink}.time-badge{color:var(--green);background:#81b64c29;border:1px solid #81b64c59;border-radius:999px;margin-left:auto;padding:.2rem .5rem;font-size:.72rem;font-weight:800}.time-grid{grid-template-columns:1fr 1fr 1fr;gap:.4rem;display:grid}.time-chip{background:var(--panel-2);border:2px solid var(--border);color:var(--text-dim);border-radius:8px;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .35rem;display:flex}.time-chip strong{color:var(--text);font-size:.9rem}.time-chip span{color:var(--text-mute);font-size:.65rem;font-weight:600}.time-chip:hover{border-color:var(--hover-border)}.time-chip.on{border-color:var(--green);background:#81b64c29}.avatar{border-radius:6px;place-items:center;width:40px;height:40px;font-size:1.4rem;font-weight:800;display:grid}.avatar.white{color:#222;background:#f0efe9}.avatar.black{color:#f0efe9;background:#111;box-shadow:inset 0 0 0 1px #555}.player-name{color:var(--text);font-size:1rem;font-weight:800}.captures{letter-spacing:.04em;color:var(--text-dim);min-height:1.2em;margin-top:.15rem;font-size:1.05rem}.turn-tag{color:var(--green);text-transform:uppercase;letter-spacing:.04em;text-align:right;justify-content:flex-end;align-items:center;gap:.3rem;min-width:5.5rem;font-size:.78rem;font-weight:800;display:inline-flex}.player-bar.thinking .turn-tag{color:#f0c14b}.board-area{aspect-ratio:1;width:100%;box-shadow:var(--shadow);border-radius:4px;position:relative;overflow:hidden}.board{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;height:100%;display:grid;position:relative}.board.is-thinking{filter:saturate(.95)}.square{-webkit-user-select:none;user-select:none;border:none;place-items:center;padding:0;display:grid;position:relative}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square.last-move{box-shadow:inset 0 0 0 999px #f5f6828c}.square.selected{box-shadow:inset 0 0 0 999px #f6f669d9}.square.hint{box-shadow:inset 0 0 0 999px #38bdf873}.square.premove{box-shadow:inset 0 0 0 999px #a855f76b}.move-arrow{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.square.legal.capture:after{content:"";pointer-events:none;border:4px solid #0000002e;border-radius:50%;position:absolute;inset:6%}.square.in-check{background:radial-gradient(circle,#e64848 0% 38%,#0000 70%)!important}.square:focus-visible{outline-offset:-3px;z-index:2;outline:3px solid #fff}.coord{pointer-events:none;z-index:1;font-size:.7rem;font-weight:800;line-height:1;position:absolute}.coord.rank{top:3px;left:4px}.coord.file{bottom:3px;right:4px}.square.light .coord{color:var(--board-dark)}.square.dark .coord{color:var(--board-light)}.dot{background:var(--dot);pointer-events:none;border-radius:50%;width:28%;height:28%}.piece-wrap{z-index:1;filter:drop-shadow(0 1px 1px #00000059);pointer-events:none;place-items:center;width:92%;height:92%;transition:transform .12s;display:grid}.piece-wrap img,.fly-piece img,.promote-piece img{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.square:hover .piece-wrap{transform:scale(1.05)}.square.selected .piece-wrap{transform:translateY(-4px)scale(1.06)}.fly-piece{z-index:8;pointer-events:none;filter:drop-shadow(0 6px 8px #00000059);will-change:left, top;place-items:center;width:12.5%;height:12.5%;padding:4%;display:grid;position:absolute}.promote-piece{width:2.4rem;height:2.4rem;display:block}.panel-label.row{justify-content:space-between;align-items:center;display:flex}.panel-label-left{align-items:center;gap:.4rem;display:inline-flex}.link-btn{color:var(--green);background:#81b64c1f;border:1px solid #81b64c4d;border-radius:6px;align-items:center;gap:.25rem;padding:.25rem .45rem;font-size:.72rem;font-weight:800;display:inline-flex}.link-btn:disabled{opacity:.4;cursor:not-allowed}.link-btn:not(:disabled):hover{filter:brightness(1.1)}.icon-row.two{grid-template-columns:1fr 1fr}.btn:disabled,.icon-btn:disabled{opacity:.45;cursor:not-allowed}.modal-actions{flex-direction:column;gap:.5rem;display:flex}.check-badge{width:1.15rem;height:1.15rem;color:var(--check);z-index:2;background:#fff;border-radius:50%;place-items:center;font-size:.75rem;font-weight:900;display:grid;position:absolute;top:4px;right:5px;box-shadow:0 2px 6px #00000059}.side{background:var(--panel);border:1px solid var(--border);height:min(720px,100vh - 2rem);max-height:calc(100vh - 2rem);box-shadow:var(--shadow);border-radius:10px;flex-direction:column;display:flex;overflow:hidden}.side-tabs{background:var(--tabs-bg);border-bottom:1px solid var(--border);grid-template-columns:1fr 1fr;display:grid}.side-tabs.three-tabs{grid-template-columns:1fr 1fr 1fr}.tab{color:var(--text-mute);border-bottom:3px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.95rem .5rem;font-size:.92rem;font-weight:800;display:inline-flex}.tab:hover{color:var(--text);background:var(--hover)}.tab.active{color:var(--text);border-bottom-color:var(--green);background:#81b64c14}.status-line{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;gap:.5rem;margin:.85rem .9rem .35rem;padding:.7rem .85rem;font-size:.98rem;font-weight:800;display:flex}.status-left{align-items:center;gap:.5rem;min-width:0;display:inline-flex}.status-line[data-status=check],.status-line[data-status=checkmate],.status-line[data-status=timeout]{color:#ff8f8f;background:#e648481f;border-color:#e6484873}.status-line[data-status=thinking]{color:#f0c14b}.resume-banner{color:var(--text);text-align:center;background:#81b64c2e;border:1px solid #81b64c73;border-radius:8px;margin:.45rem .9rem 0;padding:.55rem .75rem;font-size:.82rem;font-weight:700;animation:.3s commentIn}.pulse{background:#f0c14b;border-radius:50%;width:8px;height:8px;animation:1s infinite blink}.moves-panel{flex-direction:column;flex:1;min-height:120px;margin:.25rem .5rem;display:flex;overflow:hidden}.panel-label{letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);align-items:center;gap:.4rem;padding:.35rem .45rem .2rem;font-size:.72rem;font-weight:800;display:inline-flex}.live-comment{background:linear-gradient(135deg, #81b64c2e, var(--comment-base));border:1px solid #81b64c59;border-radius:10px;margin:.55rem .9rem .25rem;padding:.75rem .85rem;animation:.28s commentIn}.live-comment.tone-capture{background:linear-gradient(135deg, #f0a03c33, var(--comment-base));border-color:#f0a03c73}.live-comment.tone-check,.live-comment.tone-mate{background:linear-gradient(135deg, #e6484838, var(--comment-base));border-color:#e6484880}.live-comment.tone-special{background:linear-gradient(135deg, #78aaff2e, var(--comment-base));border-color:#78aaff66}.live-hi{color:var(--text);font-size:1.05rem;font-weight:800;line-height:1.35}.live-en{color:var(--text-dim);margin-top:.25rem;font-size:.8rem;font-weight:600}.comment-panel{flex-direction:column;min-height:0;margin:.15rem .5rem .35rem;display:flex}.comment-list{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex-direction:column;gap:.4rem;max-height:150px;padding:.2rem .35rem .45rem;display:flex;overflow-y:auto}.comment-item{background:var(--panel-2);border-left:3px solid var(--green);border-radius:8px;padding:.55rem .65rem}.comment-item.tone-capture{border-left-color:#f0a03c}.comment-item.tone-check,.comment-item.tone-mate{border-left-color:#e64848}.comment-item.tone-special{border-left-color:#78aaff}.comment-item .c-hi{color:var(--text);margin:0;font-size:.9rem;font-weight:700;line-height:1.35}.comment-item .c-en{color:var(--text-mute);margin:.2rem 0 0;font-size:.75rem;font-weight:600}@keyframes commentIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.moves{font-variant-numeric:tabular-nums;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;height:100%;max-height:200px;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.moves li{color:var(--text);border-radius:6px;grid-template-columns:2.2rem 1fr 1fr;gap:.35rem;padding:.45rem .5rem;font-size:.95rem;font-weight:700;display:grid}.moves li:hover{background:#ffffff0a}.moves li.latest{background:#81b64c2e}.moves .n{color:var(--text-mute)}.moves .empty{color:var(--text-mute);text-align:center;opacity:.85;flex-direction:column;justify-content:center;align-items:center;gap:.55rem;padding:2rem .5rem;font-weight:600;display:flex}.side-actions{border-top:1px solid var(--border);flex-direction:column;gap:.55rem;margin-top:auto;padding:.75rem .9rem 1rem;display:flex}.btn{border-radius:8px;justify-content:center;align-items:center;gap:.45rem;padding:.8rem 1rem;font-size:.95rem;font-weight:800;transition:filter .15s,transform .1s;display:inline-flex}.btn.wide{width:100%}.btn.primary{background:linear-gradient(180deg, #95d03a, var(--green-dark));color:#1a1a1a;box-shadow:0 4px #3f6b2e,0 8px 18px #0000004d}.btn.primary:hover{filter:brightness(1.08)}.btn.primary:active{transform:translateY(2px);box-shadow:0 2px #3f6b2e,0 4px 10px #00000040}.icon-row{grid-template-columns:1fr 1fr;gap:.45rem;display:grid}.icon-row.three{grid-template-columns:1fr 1fr 1fr}.icon-row.four{grid-template-columns:1fr 1fr 1fr 1fr}.icon-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;padding:.7rem .35rem;font-size:.78rem;font-weight:700;display:inline-flex}.icon-btn:hover{background:var(--hover-strong);border-color:var(--hover-border);color:var(--green)}.icon-btn.on{border-color:var(--green);color:var(--green);background:#81b64c29}.icon-btn.danger:hover:not(:disabled){color:#f87171;background:#f871711f;border-color:#f8717180}.puzzle-card,.draw-banner{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:.2rem;margin:0 0 .55rem;padding:.7rem .85rem;display:flex}.puzzle-card strong{font-size:.95rem}.puzzle-card span{color:var(--text-dim);font-size:.85rem}.draw-banner{flex-flow:wrap;align-items:center;gap:.45rem}.draw-banner.muted{color:var(--text-mute);justify-content:center}.premove-hint{color:var(--text-mute);text-align:center;margin:.35rem 0 0;font-size:.78rem}.voice-unlock{border:1px solid var(--green);width:100%;color:var(--text);background:#81b64c40;border-radius:8px;margin-top:.65rem;padding:.55rem .7rem;font-size:.85rem;font-weight:800}.voice-unlock:hover{filter:brightness(1.1)}.settings{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex-direction:column;flex:1;gap:.65rem;min-height:0;padding:.75rem .9rem 1rem;display:flex;overflow-y:auto}.setup-hint{color:var(--text-dim);background:#81b64c1f;border:1px solid #81b64c4d;border-radius:8px;margin:0;padding:.55rem .7rem;font-size:.82rem;font-weight:700}.help-panel{flex-direction:column;flex:1;gap:.75rem;min-height:0;padding:.75rem .9rem 1rem;display:flex;overflow:hidden}.help-scroll{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex-direction:column;flex:1;gap:.85rem;min-height:0;margin-right:-.15rem;padding-right:.25rem;display:flex;overflow-y:auto}.help-scroll::-webkit-scrollbar{width:8px}.help-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px}.help-hero{color:var(--green);background:#81b64c24;border:1px solid #81b64c59;border-radius:10px;flex-shrink:0;align-items:center;gap:.7rem;padding:.75rem .85rem;display:flex}.help-hero strong{color:var(--text);font-size:1rem;display:block}.help-hero span{color:var(--text-mute);margin-top:.15rem;font-size:.78rem;font-weight:600;display:block}.help-panel .btn.wide{flex-shrink:0}.help-section h3{text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin:0 0 .45rem;font-size:.78rem;font-weight:800}.help-section ul{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.help-section li{background:var(--panel-2);border-left:3px solid var(--green);color:var(--text);border-radius:8px;padding:.55rem .7rem;font-size:.88rem;font-weight:600;line-height:1.4}.settings h3{text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);margin:.55rem 0 .15rem;font-size:.78rem;font-weight:800}.chip-row{grid-template-columns:1fr 1fr;gap:.45rem;display:grid}.chip-row.three{grid-template-columns:1fr 1fr 1fr}.chip{background:var(--panel-2);border:2px solid var(--border);color:var(--text-dim);border-radius:8px;justify-content:center;align-items:center;gap:.45rem;padding:.75rem .5rem;font-weight:800;display:inline-flex}.chip:hover{border-color:var(--hover-border);color:var(--text)}.chip.on{border-color:var(--green);color:var(--text);background:#81b64c2e}.color-swatch{border:1px solid #ffffff40;border-radius:50%;width:14px;height:14px}.color-swatch.white{background:#f2f0e8}.color-swatch.black{background:#111}.level-list{flex-direction:column;gap:.4rem;display:flex}.level{text-align:left;background:var(--panel-2);border:2px solid var(--border);border-radius:8px;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem .75rem;display:grid}.level-ico{width:36px;height:36px;color:var(--green);background:#81b64c1f;border-radius:8px;place-items:center;display:grid}.level.on .level-ico{background:#81b64c47}.level-text{flex-direction:column;gap:.12rem;min-width:0;display:flex}.level strong{color:var(--text);font-size:.98rem}.level-text span,.level span{color:var(--text-mute);font-size:.78rem;font-weight:600}.level:hover{border-color:var(--hover-border)}.level.on{border-color:var(--green);color:var(--green);background:#81b64c29}.modal-overlay{background:var(--overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;place-items:center;display:grid;position:absolute;inset:0}.modal{background:var(--modal-bg);border:1px solid var(--modal-border);text-align:center;box-shadow:var(--shadow);border-radius:12px;min-width:min(280px,80%);padding:1.25rem 1.4rem}.modal p,.modal h2{margin:0 0 1rem;font-size:1.25rem;font-weight:800}.promote-row{justify-content:center;gap:.45rem;display:flex}.promote-btn{background:var(--board-light);color:#111;border:2px solid #555;border-radius:8px;width:3.6rem;height:3.6rem;font-size:2.1rem}.promote-btn:hover{border-color:var(--green);transform:translateY(-2px)}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}@media (width<=980px){.app{grid-template-columns:1fr}.nav{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;justify-content:center;gap:.25rem;padding:.45rem}.nav-theme{margin-top:0;margin-left:auto}.nav-brand{width:38px;height:38px;margin:0 .35rem 0 0;font-size:1.3rem}.nav-item{flex-direction:row;gap:.35rem;width:auto;padding:.5rem .7rem;font-size:.8rem}.main{grid-template-columns:1fr;padding:.75rem}.side{height:auto;max-height:none;min-height:unset}.help-panel{max-height:min(60vh,520px)}.moves{max-height:220px}}#root{min-height:100vh}