.board-area,.board-host{--sq-light:#f0d9b5;--sq-dark:#b58863;--sq-light-sel:#e8d888;--sq-dark-sel:#c8a94e;--mark-last:#e9c85c;--mark-check:var(--warn,#e37400);--piece-white:#fff;--piece-white-edge:#000;--piece-black:#000;--piece-black-edge:#000;--board-accent:var(--ch-accent,var(--accent,#6750a4));place-items:center;min-height:0;display:grid;container-type:size}.board{border-radius:var(--radius,6px);width:min(100cqw,100cqh);height:min(100cqw,100cqh);box-shadow:var(--shadow,0 8px 24px -12px #0000004d);touch-action:none;-webkit-user-select:none;user-select:none;outline:none;position:relative}.board:focus-visible{box-shadow:var(--shadow,0 8px 24px -12px #0000004d), 0 0 0 3px var(--board-accent)}.board .grid{border-radius:inherit;grid-template:repeat(8,1fr)/repeat(8,1fr);width:100%;height:100%;display:grid;overflow:hidden}.cell{place-items:center;display:grid;position:relative}.cell.light{background:var(--sq-light)}.cell.dark{background:var(--sq-dark)}.cell .coord{color:#0000005c;pointer-events:none;font-size:clamp(8px,1.5cqw,12px);font-weight:600;line-height:1;position:absolute}.cell .coord.rank{inset:2px auto auto 3px}.cell .coord.file{inset:auto 3px 2px auto}.cell.dark .coord{color:#ffffff85}.cell.last:before{content:"";background:var(--mark-last);opacity:.42;position:absolute;inset:0}.cell.sel{background:var(--sq-light-sel)}.cell.sel.dark{background:var(--sq-dark-sel)}.cell .hint{pointer-events:none;position:absolute}.cell.target .hint{background:#1e181047;border-radius:50%;width:30%;height:30%}.cell.capture-target .hint{border:max(3px,1.2cqw) solid #1e181042;border-radius:50%;inset:6%}.check-flash{z-index:6;pointer-events:none;letter-spacing:.12em;color:var(--mark-check);text-shadow:0 2px 10px #00000073,0 0 2px #0009;place-items:center;padding-left:.12em;font-size:min(12cqw,12cqh);font-weight:900;animation:1s ease-out forwards check-flash;display:grid;position:absolute;inset:0}@keyframes check-flash{0%{opacity:0;scale:.7}18%{opacity:1;scale:1.04}62%{opacity:1;scale:1}to{opacity:0;scale:1.16}}.cell.cursor{outline:3px solid var(--board-accent);outline-offset:-3px;z-index:1}.board .pieces{pointer-events:none;position:absolute;inset:0}.piece{width:12.5%;height:12.5%;translate:calc(var(--x,0) * 100%) calc(var(--y,0) * 100%);will-change:translate;transition:translate .17s cubic-bezier(.2,.9,.25,1),opacity .14s linear;position:absolute}.piece.instant{transition:none}.piece.dragging{z-index:3;cursor:grabbing;filter:drop-shadow(0 6px 10px #00000059);transition:none;scale:1.08}.piece.captured{opacity:0;scale:.7}.piece .glyph{stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 1px #00000047);width:100%;height:100%;padding:9%;display:block}:is(.piece,.cap,.trophy).w .glyph{fill:var(--piece-white);stroke:var(--piece-white-edge);stroke-width:2.2px}:is(.piece,.cap,.trophy).b .glyph{fill:var(--piece-black);stroke:var(--piece-black-edge);stroke-width:1.8px}:is(.piece,.cap,.trophy).w .glyph .notch{fill:var(--piece-white-edge);stroke:none}:is(.piece,.cap,.trophy).b .glyph .notch{fill:var(--piece-white);stroke:none}.board.locked .pieces .piece{cursor:default}.board:not(.locked) .pieces .piece{cursor:grab}.piece.shake .glyph{animation:.46s ease-in-out king-shake}@keyframes king-shake{0%,to{translate:0;rotate:0deg}12%{translate:-8%;rotate:-6deg}28%{translate:7%;rotate:5deg}44%{translate:-6%;rotate:-4deg}60%{translate:4%;rotate:3deg}80%{translate:-2%;rotate:-1.5deg}}.promo-backdrop{z-index:4;background:#14101c73;position:absolute;inset:0}.promo{z-index:5;width:12.5%;left:calc(var(--x) * 12.5%);top:calc(var(--y) * 12.5%);border-radius:var(--radius,6px);background:var(--panel,#fff);box-shadow:var(--shadow,0 8px 24px -12px #0000004d);display:grid;position:absolute;overflow:hidden}.promo button{aspect-ratio:1;cursor:pointer;background:0 0;border:0;width:100%;height:auto;padding:0;transition:background .12s;position:static;translate:none}.promo button:hover,.promo button:focus-visible{background:var(--ch-accent-soft,var(--accent-soft,#efe9fe));outline:none}@media (prefers-reduced-motion:reduce){.piece{transition:none}.piece.captured{opacity:0}.piece.shake .glyph{animation:none}.check-flash{opacity:1;animation:none}}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--paper:#fff;--panel:#f8fafd;--line:#e3e3e3;--line-strong:#c4c7c5;--ink:#1f1f1f;--ink-soft:#3c4043;--muted:#5f6368;--ch-accent:#6750a4;--ch-accent-deep:#513f82;--ch-accent-soft:#efe9fe;--ch-on-accent:#fff;--good:#188038;--warn:#e37400;--bad:#d93025;--radius:8px;--shadow:0 1px 2px 0 #3c40434d, 0 2px 6px 2px #3c404326;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#202124;--panel:#292a2d;--line:#3c4043;--line-strong:#5f6368;--ink:#e8eaed;--ink-soft:#bdc1c6;--muted:#9aa0a6;--ch-accent:#d0bcff;--ch-accent-deep:#eaddff;--ch-accent-soft:#332b45;--ch-on-accent:#381e72;--good:#81c995;--warn:#fdd663;--bad:#f28b82;--shadow:0 1px 2px #0006, 0 10px 28px -12px #0009}}html,body{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-text-size-adjust:100%}.app{height:100dvh;padding-bottom:env(safe-area-inset-bottom);grid-template-rows:auto 1fr;display:grid}.topbar{padding:8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.topbar h1{letter-spacing:.01em;white-space:nowrap;margin:0;font-size:15px;font-weight:600}.topbar h1 .sub{color:var(--muted);font-weight:600}.topbar .spacer{flex:auto}.modes,.bar-actions{flex-wrap:wrap;align-items:center;gap:6px 10px;display:flex}.home{color:var(--muted);white-space:nowrap;font-size:13px;font-weight:600;text-decoration:none}.home:hover{color:var(--ch-accent)}.stage{grid-template-columns:minmax(0,1fr) minmax(300px,340px);min-height:0;display:grid}.board-area{padding:clamp(6px,1.6vmin,18px)}.board-area>*{grid-area:1/1}.panel{min-height:0;padding:12px max(12px, env(safe-area-inset-right)) 16px 12px;border-left:1px solid var(--line);background:var(--panel);flex-direction:column;gap:12px;display:flex;overflow-y:auto}@media (aspect-ratio<=1) and (width<=1100px),(width<=620px){.stage{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.panel{border-left:0;border-top:1px solid var(--line)}.board-area{height:min(100dvw,54dvh);padding:8px}}@media (aspect-ratio>=1) and (height<=560px){.stage{grid-template-columns:minmax(0,1fr) minmax(220px,30%)}.board-area{padding:6px}}@media (width<=720px){.topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions""modes modes";gap:8px 10px;display:grid}.topbar h1{grid-area:title;align-self:center}.topbar .modes{grid-area:modes}.topbar .bar-actions{grid-area:actions}.topbar .spacer{display:none}}@media (width<=440px){.topbar h1 .sub,#flip .long{display:none}}.result{z-index:7;border-radius:var(--radius);background:#14101c6b;place-items:center;width:min(100cqw,100cqh);height:min(100cqw,100cqh);animation:.2s ease-out result-in;display:grid}.result[hidden]{display:none}.result-card{border-radius:calc(var(--radius) * 2);background:var(--panel);text-align:center;justify-items:center;gap:6px;max-width:82%;padding:clamp(14px,3.2cqw,28px) clamp(18px,4.4cqw,40px);animation:.22s cubic-bezier(.2,.9,.25,1) result-pop;display:grid;box-shadow:0 8px 40px -8px #0000008c}.result .trophy{width:clamp(34px,9cqw,64px);height:clamp(34px,9cqw,64px);display:block}.result-title{letter-spacing:.02em;margin:0;font-size:clamp(19px,5.4cqw,34px);font-weight:900;line-height:1.15}.result[data-tone=win] .result-title{color:var(--good)}.result[data-tone=draw] .result-title{color:var(--ink)}.result[data-tone=loss] .result-title{color:var(--ink-soft)}.result-why{color:var(--muted);margin:0;font-size:clamp(12px,2.6cqw,15px);font-weight:600}.result-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}.toast{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:999px;margin:0;padding:7px 13px;font-size:13px;font-weight:700;animation:.16s ease-out toast-in;position:fixed;box-shadow:0 6px 20px -6px #0006}.toast[data-tone=good]{border-color:var(--good);color:var(--good)}.toast[data-tone=warn]{border-color:var(--warn);color:var(--warn)}@keyframes toast-in{0%{opacity:0;scale:.94}to{opacity:1;scale:1}}.confirm{max-width:min(92vw,27rem);color:var(--ink);background:0 0;border:0;margin:auto;padding:0}.confirm::backdrop{background:#14101c85}.confirm-card{border-radius:calc(var(--radius) * 2);background:var(--panel);gap:14px;padding:clamp(18px,5vw,24px);animation:.22s cubic-bezier(.2,.9,.25,1) result-pop;display:grid;box-shadow:0 8px 40px -8px #0000008c}.confirm-text{margin:0;font-size:15px;line-height:1.6}.confirm-text b{font-weight:700}.confirm-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}@keyframes result-in{0%{opacity:0}to{opacity:1}}@keyframes result-pop{0%{opacity:0;translate:0 8px;scale:.94}to{opacity:1;translate:0;scale:1}}.group{flex-direction:column;gap:7px;display:flex}.group>h2{letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0;font-size:11px;font-weight:600}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line-strong);color:var(--ink-soft);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:600;transition:background .12s,color .12s,border-color .12s}.chip:hover{border-color:var(--ch-accent);color:var(--ch-accent)}.chip[aria-pressed=true]{background:var(--ch-accent);border-color:var(--ch-accent);color:var(--ch-on-accent)}.levels{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.levels .chip{text-align:center;padding-inline:4px}select,input[type=text],textarea{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);width:100%;color:var(--ink);font:inherit;padding:7px 9px;font-size:13px}textarea{resize:vertical;min-height:62px;font-family:var(--mono);font-size:11.5px}select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ch-accent);outline-offset:1px;border-color:var(--ch-accent)}.btnrow{flex-wrap:wrap;gap:6px;display:flex}.btn{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;padding:7px 12px;font-size:13px;font-weight:600;transition:border-color .12s,background .12s,color .12s}.btn:hover:not(:disabled){border-color:var(--ch-accent);color:var(--ch-accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--ch-accent);border-color:var(--ch-accent);color:var(--ch-on-accent)}.btn.primary:hover:not(:disabled){background:var(--ch-accent-deep);border-color:var(--ch-accent-deep);color:var(--ch-on-accent)}.btn.danger:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}.btn.sm{padding:4px 9px;font-size:12px}.check-row{color:var(--ink-soft);white-space:nowrap;align-items:center;gap:7px;font-size:13px;display:flex}.check-row input{accent-color:var(--ch-accent)}.seats{gap:6px;display:grid}.seat{border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:auto 1fr auto;align-items:center;gap:5px 8px;padding:8px 10px;transition:border-color .14s,background .14s;display:grid}.seat[data-active=true]{border-color:var(--ch-accent);background:var(--ch-accent-soft)}.seat[data-check=true]{border-color:var(--mark-check)}.seat-extra{flex-wrap:wrap;grid-column:2/-1;align-items:center;gap:3px;min-height:14px;display:flex}.seat-extra .chk{background:var(--mark-check);color:#2b1a02;border-radius:999px;margin-right:3px;padding:0 5px;font-size:10.5px;font-weight:600;line-height:15px}.cap{width:15px;height:15px;display:block}:is(.cap,.trophy) .glyph{stroke-linejoin:round;stroke-linecap:round;width:100%;height:100%;display:block}@media (prefers-color-scheme:dark){:is(.cap,.trophy).b .glyph{stroke:var(--ink-soft);stroke-width:3.2px}}.material{font-variant-numeric:tabular-nums;color:var(--muted);margin:0;font-size:11.5px}.seat .dot{border:1px solid var(--line-strong);border-radius:50%;width:13px;height:13px}.seat[data-color=w] .dot{background:var(--piece-white)}.seat[data-color=b] .dot{background:var(--piece-black)}.seat .who{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.seat .who em{color:var(--muted);font-style:normal;font-weight:600}.seat .time{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:16px;font-weight:600}.seat .time[data-low=true]{color:var(--bad)}.seat .time[hidden]{display:none}.thinking{color:var(--muted);min-height:1.2em;font-size:12px}.moves{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);grid-template-columns:2.4em 1fr 1fr;align-content:start;gap:1px 4px;max-height:30dvh;padding:6px;font-size:13px;display:grid;overflow-y:auto}.moves:empty:after{content:"还没有走子";color:var(--muted);grid-column:1/-1;font-size:12px}.moves .no{color:var(--muted);font-variant-numeric:tabular-nums;padding-top:3px;font-size:12px}.moves .san{color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:2px 5px;font-weight:600}.moves .san:hover{background:var(--ch-accent-soft)}.moves .san[aria-current=true]{background:var(--ch-accent);color:var(--ch-on-accent)}.review-hint{color:var(--muted);margin:0;font-size:12px;line-height:1.55}.findings{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.findings:empty{display:none}.finding{border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);overflow:hidden}.finding[data-sev=blunder]{border-left-color:var(--bad)}.finding[data-sev=mistake]{border-left-color:var(--warn)}.fi-main{width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;gap:3px;padding:7px 9px;display:grid}.fi-main:hover,.fi-main:focus-visible{background:var(--ch-accent-soft);outline:none}.fi-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px;font-size:13px;display:flex}.fi-head b{font-weight:600}.fi-sev{color:var(--muted);font-size:11.5px;font-weight:600}.finding[data-sev=blunder] .fi-sev{color:var(--bad)}.finding[data-sev=mistake] .fi-sev{color:var(--warn)}.fi-why{color:var(--ink-soft);font-size:11.5px;line-height:1.5}.fi-why b{color:var(--ink);font-weight:600}.fi-lesson{border-top:1px dashed var(--line);color:var(--ch-accent);padding:5px 9px 6px;font-size:11.5px;font-weight:600;text-decoration:none;display:block}.fi-lesson:hover{text-decoration:underline}.banner{border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--paper);padding:8px 11px;font-size:13px;line-height:1.5}.banner b{font-weight:600}.banner[data-tone=good]{border-color:var(--good);background:color-mix(in srgb, var(--good) 12%, transparent)}.banner[data-tone=warn]{border-color:var(--warn);background:color-mix(in srgb, var(--warn) 12%, transparent)}.banner[data-tone=bad]{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, transparent)}.banner[hidden]{display:none}.banner .btnrow{margin-top:7px}.step{border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:6px;padding:9px 10px;display:flex}.step>h3{color:var(--ink);margin:0;font-size:12.5px;font-weight:600}.step>h3 .n{background:var(--ch-accent);width:17px;height:17px;color:var(--ch-on-accent);vertical-align:1px;border-radius:50%;place-items:center;margin-right:6px;font-size:11px;display:inline-grid}.step p{color:var(--muted);margin:0;font-size:11.5px;line-height:1.5}.step[hidden]{display:none}.conn{align-items:center;gap:6px;font-size:12.5px;font-weight:600;display:flex}.conn .led{background:var(--muted);border-radius:50%;width:8px;height:8px}.conn[data-state=connected] .led{background:var(--good)}.conn[data-state=connecting] .led,.conn[data-state=gathering] .led,.conn[data-state=waiting] .led{background:var(--warn)}.conn[data-state=failed] .led{background:var(--bad)}.conn[data-state=unstable] .led{background:var(--warn);animation:1.1s ease-in-out infinite conn-pulse}@keyframes conn-pulse{50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.conn[data-state=unstable] .led{animation:none}}details.help{color:var(--muted);font-size:12px}details.help summary{cursor:pointer;font-weight:600}details.help p{margin:6px 0 0;line-height:1.6}.fen{font-family:var(--mono);word-break:break-all;color:var(--muted);font-size:11px}@media (pointer:coarse){.btn,.chip,select{min-height:40px}.btn.sm,.chip{padding-inline:14px}.levels .chip{padding-inline:4px}.check-row{min-height:40px}.moves .san{padding:6px 5px}.topbar :is(.btn,.chip){min-height:36px}.topbar{padding-block:6px}}@media (aspect-ratio<=1) and (width<=1100px),(width<=620px){#panel-status{z-index:3;background:var(--panel);padding-block:12px;position:sticky;top:-12px}#panel-match{order:-2}#panel-status{order:-3}.banner{order:-4}}:root[data-immersive] .topbar{justify-content:flex-end;padding-block:4px}:root[data-immersive] .topbar>:is(h1,.modes,.spacer),:root[data-immersive] .bar-actions .home{display:none}@media (width<=760px),(height<=560px){:root[data-immersive] .panel>.group:not(#panel-status):not(#panel-match):not(#panel-moves){display:none}:root[data-immersive] .stage{grid-template-rows:minmax(0,1fr) auto}:root[data-immersive] .board-area{height:auto}:root[data-immersive] #panel-status{padding-block:0;position:static}:root[data-immersive] .seats{grid-template-columns:1fr 1fr}:root[data-immersive] #panel-match>h2,:root[data-immersive] .material{display:none}:root[data-immersive] .moves{height:15dvh;max-height:none}:root[data-immersive] #panel-moves>h2{display:none}}@media (height<=759px){:root[data-immersive] #panel-moves{display:none}}@media (prefers-reduced-motion:reduce){.piece{transition:none}.piece.captured{opacity:0}.piece.shake .glyph{animation:none}.check-flash{opacity:1;animation:none}.result,.result-card,.confirm-card,.toast{animation:none}*{scroll-behavior:auto}}