:root{--ink:#17211d;--muted:#79807a;--paper:#f5f1e8;--card:#fffdf8;--red:#a83b2d;--green:#244e3c;--line:#ddd7ca}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Noto Serif SC","Songti SC",serif}button,textarea{font:inherit}button{cursor:pointer}main{min-height:100vh;background:radial-gradient(circle at 50% 20%,#fff 0,transparent 34%)}header{height:74px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ded8cc;background:rgba(250,248,242,.9)}.brand{display:flex;align-items:center;gap:12px}.seal{width:39px;height:39px;display:grid;place-items:center;color:#fff;background:var(--red);border-radius:4px;box-shadow:inset 0 0 0 2px #f0b9ad;font-size:22px}.brand div{display:flex;flex-direction:column}.brand strong{font-size:19px;letter-spacing:.2em}.brand small,.panel-title small{font:10px Arial;letter-spacing:.16em;color:#999}.status{font-size:13px;color:#58635c}.status i{display:inline-block;width:7px;height:7px;background:#5fa872;border-radius:50%;margin-right:7px}.ghost,.tools button{border:0;background:transparent;color:#737b76}.intro{max-width:1540px;margin:auto;padding:32px 4vw 24px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font:10px Arial;letter-spacing:.22em;color:#a68067}.intro h1{font-size:34px;margin:9px 0 4px;font-weight:500}.intro h1 em{font-style:normal;color:var(--red)}.intro p{margin:0;color:#787b77}.score{display:grid;grid-template-columns:auto auto;gap:1px 20px;text-align:right}.score small{grid-column:1/-1;color:#999}.score strong{font:35px Georgia;color:var(--green)}.score span{font-size:12px;color:#8d948f;align-self:center}.workspace{max-width:1540px;margin:auto;padding:0 4vw;display:grid;grid-template-columns:minmax(250px,300px) minmax(460px,650px) minmax(290px,350px);gap:28px;align-items:start}.panel{background:rgba(255,253,248,.88);border:1px solid var(--line);border-radius:3px;box-shadow:0 8px 30px rgba(56,44,25,.04);padding:22px}.panel-title{display:flex;gap:12px;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:20px}.panel-title>span{font:27px Georgia;color:#bcae97}.panel-title div{display:flex;flex-direction:column;gap:3px}.panel-title strong{font-size:16px}.panel label,.right-panel>label{display:block;margin:18px 0 8px;font-size:12px;color:#777}textarea{width:100%;height:96px;resize:none;border:1px solid var(--line);background:#faf8f2;padding:12px;outline:none;color:var(--ink);line-height:1.6}textarea:focus{border-color:#9f7c5f}.question{border-left:3px solid var(--red);padding:7px 12px;margin:16px 0;background:#f8eee9}.question span{font-size:11px;color:var(--red)}.question p{font-size:13px;line-height:1.6;margin:5px 0}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips button{border:1px solid #d7cbbd;background:#fff;padding:7px 10px;font-size:12px;color:#444}.toggle-row{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.toggle-row div{display:flex;flex-direction:column}.toggle-row strong{font-size:13px}.toggle-row small{font-size:11px;color:#999;margin-top:3px}.toggle{width:42px;height:23px;border:0;border-radius:20px;background:#bbb;padding:3px}.toggle i{display:block;width:17px;height:17px;background:white;border-radius:50%;transition:.2s}.toggle.on{background:var(--green)}.toggle.on i{transform:translateX(19px)}.board-wrap{min-width:0}.board-top{height:48px;display:flex;align-items:center;justify-content:space-between}.board-top>div:first-child{display:flex;gap:10px;align-items:center}.board-top b{font-size:15px}.board-top b.active:before{content:"";display:inline-block;width:8px;height:8px;background:var(--red);border-radius:50%;margin-right:7px}.board-top span{font-size:11px;color:#999}.tools{display:flex;gap:10px}.tools button{font-size:12px}.tools button:disabled{opacity:.35}.board{position:relative;width:100%;aspect-ratio:8/9;background:#d9b071;background-image:linear-gradient(#58452e 1px,transparent 1px),linear-gradient(90deg,#58452e 1px,transparent 1px);background-size:12.5% 11.111%;background-position:0 0;border:20px solid #d9b071;box-shadow:0 12px 28px rgba(64,48,23,.18)}.board:after{content:"";position:absolute;left:0;right:0;top:44.444%;height:11.111%;background:#d9b071;border-top:1px solid #58452e;border-bottom:1px solid #58452e;z-index:0}.river{position:absolute;top:45.5%;height:9%;left:8%;right:8%;z-index:1;display:flex;justify-content:space-around;align-items:center;color:rgba(83,63,35,.65);font-size:clamp(18px,2vw,29px);letter-spacing:.45em}.palace{position:absolute;width:25%;height:22.222%;left:37.5%;z-index:1;background:linear-gradient(45deg,transparent 49.5%,#58452e 50%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,#58452e 50%,transparent 50.5%)}.p1{top:0}.p2{bottom:0}.point{position:absolute;width:10%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:transparent;border-radius:50%;z-index:2}.point.legal:after{content:"";position:absolute;width:10px;height:10px;background:rgba(35,101,71,.62);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.piece{position:absolute;width:9.3%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3;background:#f3ddb0;border:2px solid currentColor;box-shadow:0 2px 5px rgba(0,0,0,.2),inset 0 0 0 3px #ecd3a3;color:#252b28;font-size:clamp(15px,2.2vw,28px);padding:0;transition:transform .15s}.piece.red{color:#b8372b}.piece.selected{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 0 5px rgba(37,92,66,.3)}.board-hint{text-align:center;padding:14px;color:#777;font-size:12px}.board-hint span{color:var(--green);margin-right:8px}.locked{text-align:center;padding:42px 10px}.locked div{margin:auto;width:58px;height:58px;border:1px solid #b8a58c;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#99866c}.locked strong{display:block;margin-top:17px;font-size:15px}.locked p{font-size:12px;color:#999;line-height:1.8}.coach-card{display:flex;align-items:center;gap:10px;background:#edf3ed;border-left:3px solid #3d7758;padding:12px}.coach-card .stamp{font-size:10px;color:#fff;background:#527c62;padding:4px}.coach-card div{display:flex;flex:1;flex-direction:column}.coach-card strong{font-size:14px}.coach-card small{font-size:10px;color:#8a948d;margin-top:3px}.coach-card b{font:20px Georgia;color:#36654c}.coach-copy{font-size:12px;line-height:1.8;color:#6f756f}.candidate-list{display:flex;flex-direction:column;gap:7px}.candidate{display:grid;grid-template-columns:22px 1fr auto auto;gap:7px;align-items:center;border:1px solid #dfdbd2;padding:10px 8px;font-size:12px}.candidate i{font-style:normal;color:#aaa}.candidate span{font-size:9px;color:#999;background:#f1eee7;padding:3px 5px}.candidate b{font:13px Georgia;color:#53635a}.candidate.chosen,.candidate.best{border-color:#7a9c88;background:#f0f6f1}.principle{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}.principle span{font-size:10px;color:var(--red)}.principle strong{display:block;margin-top:5px;font-size:13px}.principle p{font-size:11px;color:#999;margin-bottom:0}footer{max-width:1540px;margin:28px auto;padding:20px 4vw 30px;border-top:1px solid var(--line);display:flex;gap:35px;align-items:center}footer>div:not(.moves){display:flex;flex-direction:column}footer b{font:22px Georgia;color:var(--green)}footer span,footer em{font-size:10px;color:#999;font-style:normal}.moves{flex:1;display:flex;align-items:center;gap:10px}.moves>span{margin-right:10px}.moves button{font-size:11px;padding:6px 9px;border:1px solid var(--line);background:#fff}.moves em{margin-left:auto}@media(max-width:1100px){.workspace{grid-template-columns:250px 1fr}.right-panel{grid-column:1/-1}.workspace{padding-bottom:30px}}@media(max-width:760px){header{padding:0 18px}.status{display:none}.intro{padding:24px 18px 12px}.intro h1{font-size:27px}.score{display:none}.workspace{display:flex;flex-direction:column;padding:0 14px;gap:16px}.board-wrap{order:-1;width:100%}.panel{width:100%}.board{border-width:13px}.left-panel{order:2}.right-panel{order:3}footer{margin-top:10px;flex-wrap:wrap;padding:18px}.moves{flex-basis:100%;overflow:auto}.moves em{white-space:nowrap}}
.result-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.48)}.result-modal{width:min(420px,100%);padding:26px;border-radius:16px;text-align:center;background:var(--card);box-shadow:0 22px 80px rgba(0,0,0,.36)}.result-modal h2{margin:10px 0 6px}.result-modal p{margin:0 0 20px;color:var(--muted);line-height:1.7}.result-modal>div:last-child{display:flex;justify-content:center;gap:10px}.result-modal button{padding:9px 14px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#fff;font-weight:700}.result-modal button.primary{color:#fff;background:var(--green)}.result-mark{display:grid;place-items:center;width:50px;height:50px;margin:auto;border-radius:50%;color:#fff;background:var(--red);font-size:20px;font-weight:900}
/* Pikafish engine state */
.board{box-shadow:inset 0 -1px #58452e,inset -1px 0 #58452e,0 12px 28px rgba(64,48,23,.18)}
.point.good-point:after,.point.best-point:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:2}.point.good-point:after{width:13px;height:13px;background:#477bd7}.point.best-point:after{width:16px;height:16px;background:#3aa56d;box-shadow:0 0 0 5px rgba(58,165,109,.18)}
.piece.best-target{box-shadow:0 0 0 5px #3aa56d,0 0 0 10px rgba(58,165,109,.2),0 2px 5px rgba(0,0,0,.2);z-index:4}.piece.best-target:after{content:"最佳";position:absolute;right:-16px;top:-13px;padding:2px 5px;border-radius:10px;background:#2f8f5a;color:#fff;font:9px/1.2 Arial,sans-serif;white-space:nowrap}.piece.good-target{box-shadow:0 0 0 4px #477bd7,0 0 0 8px rgba(71,123,215,.16),0 2px 5px rgba(0,0,0,.2);z-index:4}
.global-advice{margin:14px 0;padding:12px;border:1px solid #d8ae62;background:#fff8e7;color:#7c5420}.global-advice>span{font-size:10px;color:#b56325}.global-advice>strong{display:block;margin:4px 0;font-size:13px}.global-advice p{margin:5px 0 8px;font-size:11px;color:#8f7653}.global-advice div{display:flex;flex-wrap:wrap;gap:6px}.global-advice em{padding:4px 7px;background:#fff;border:1px solid #ead5ad;font-size:11px;font-style:normal;color:#754718}
.board-coordinates{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:30px;font:600 16px/1 Georgia,"Songti SC",serif;letter-spacing:0;color:#76654a}.top-coordinates{margin-bottom:10px}.bottom-coordinates{margin-top:10px}.red-coordinates{color:#a83b2d}
.tools .undo-button{border:1px solid #c9bba7;background:#fffdf8;padding:5px 9px;border-radius:2px;color:#5f5445}.tools .undo-button:not(:disabled):hover{border-color:#8b7255;background:#f8f2e7}.candidate{cursor:pointer}.candidate:hover{border-color:#a99478;background:#faf7ef}
.engine-warning{margin:14px 0;padding:12px;border-left:3px solid #b33b2f;background:#faefec}.engine-warning strong{font-size:13px;color:#9d3429}.engine-warning p{margin:5px 0 0;font-size:11px;color:#8a625d}
@media(max-width:760px){.board-coordinates{padding:0 13px;height:26px;font-size:14px}.top-coordinates{margin-bottom:8px}.bottom-coordinates{margin-top:8px}}
.status.engine-loading i,.status.engine-thinking i{background:#c79245;animation:pulse 1s infinite}.status.engine-error i{background:#b33b2f}.candidate-list.analyzing{opacity:.58}.engine-credit{font:10px Arial;color:#8b857b;text-decoration:none;white-space:nowrap}.engine-credit:hover{text-decoration:underline}@keyframes pulse{50%{opacity:.3}}

/* Shared HTML / iOS / Android feature set */
.intro,.depth-card,.workspace,.situation-panel,footer{max-width:1200px}
.depth-card{margin:0 auto 22px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.depth-card>div:first-child{display:flex;flex-direction:column;gap:3px}.depth-card strong{font-size:14px}.depth-card small{font-size:11px;color:#969087}
.depth-options{display:flex;border:1px solid #d5ccbd;border-radius:999px;overflow:hidden;background:#faf7ef}.depth-options button{min-width:45px;padding:7px 11px;border:0;border-right:1px solid #ddd4c6;background:transparent;color:#71695f;font:13px Georgia,serif}.depth-options button:last-child{border-right:0}.depth-options button.active{background:var(--green);color:#fff}.depth-options button:hover:not(.active){background:#eee7db}
.workspace{grid-template-columns:minmax(460px,720px) minmax(320px,420px);justify-content:center;gap:30px;padding:0 24px}.right-panel{grid-column:auto}
.board{background:#d9b071;background-image:none}
.board:after{display:none}
.board-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.board-lines path{fill:none;stroke:#58452e;stroke-width:1.15px;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.river{top:44.444%;height:11.111%}
.coach-sidebar{min-width:0;display:flex;flex-direction:column;gap:12px}.coach-sidebar>.collapsible-module{width:100%;margin:0}.coach-sidebar .right-panel,.coach-sidebar .situation-panel,.coach-sidebar .depth-card,.coach-sidebar .record-toolbar{width:100%;margin:0}
.board-top{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center}.history-tools,.tools{display:flex;gap:6px;align-items:center}.turn-label{display:flex;align-items:center;justify-content:center;gap:8px}.black-turn:before{background:#292d2b!important}.tools{justify-content:flex-end}.board-top .history-tools button,.board-top .tools button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.72);color:var(--green);font-size:20px}.board-top .history-tools button:disabled,.board-top .tools button:disabled{opacity:.35}.perspective-button{border:0;background:transparent;color:#737b76;font-size:12px;padding:5px 8px}
.best-toggle{width:38px;height:38px;border-radius:50%;border:1px solid #a99a85;background:#fffdf8;color:#66716b;font-size:17px;font-weight:700;box-shadow:0 2px 9px rgba(55,42,25,.08)}.best-toggle.active{background:#2f7f58;color:white;border-color:#2f7f58;box-shadow:0 0 0 5px rgba(47,127,88,.12)}.best-toggle:disabled{cursor:default;opacity:.35}
.candidate-arrows{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.candidate-arrows line{stroke-linecap:round;filter:drop-shadow(0 .025px .04px rgba(0,0,0,.25))}.candidate-arrows polygon{filter:drop-shadow(0 .025px .04px rgba(0,0,0,.25))}.candidate-arrows .primary-arrow{filter:saturate(1.1)}
.point{z-index:4}.piece{z-index:5}.piece.best-target,.piece.good-target{z-index:6}
.global-best-summary{margin:14px 0;padding:12px 13px;background:#f1f6f1;border-left:3px solid #3d7758}.global-best-summary>span{display:block;margin-bottom:8px;font-size:10px;color:#53735f}.global-best-summary>div{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;cursor:pointer}.global-best-summary strong{font-size:15px}.global-best-summary em{font-size:10px;color:#7a827d;font-style:normal}.global-best-summary b{font:15px Georgia;color:#2f704d}.global-best-summary p{margin:0;color:#8a918c;font-size:11px}
.candidate-progress{margin-top:8px;padding:14px;text-align:center;border:1px dashed #d8cebd;background:#faf8f2;color:#8a8176;font-size:11px}.candidate-list.analyzing{opacity:1}
.situation-panel{margin:24px auto;padding:20px 24px}.situation-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.situation-heading .panel-title{padding:0;border:0;margin:0}.situation-heading>em{font-size:11px;font-style:normal;color:#9b948a}.situation-panel>p{margin:10px 0 4px;color:#797d78;font-size:11px}.situation-chart{display:block;width:100%;height:auto;min-height:230px}.situation-chart text{font:11px Arial,sans-serif;fill:#999}.situation-chart .grid-line{stroke:#e2ddd2;stroke-width:1}.situation-chart .zero-line{stroke:#888c87;stroke-width:1.4}.situation-chart .trend-line{stroke-width:3;stroke-linecap:round}.situation-chart .red-advantage{fill:#a83b2d;font-weight:700}.situation-chart .black-advantage{fill:#262d29;font-weight:700}.situation-chart .active-ply-line{stroke:#45a36d;stroke-width:1.5;stroke-dasharray:5 5;opacity:.55}.situation-chart .trend-point{cursor:pointer;outline:none}.situation-chart .trend-hit-area{fill:transparent;pointer-events:all}.situation-chart .trend-point:hover circle:not(.current-halo),.situation-chart .trend-point:focus circle:not(.current-halo){stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 4px rgba(28,91,60,.7))}.situation-chart .missing-point{fill:#fffdf8;stroke:#9f998f;stroke-width:2}.situation-chart .current-halo{fill:none;stroke:#58b87d;stroke-width:4;opacity:.45;pointer-events:none}.situation-chart .empty-chart{fill:#999;font-size:13px;pointer-events:none}
.round-rule{white-space:nowrap;margin-left:auto}.moves{min-width:0}.moves button{white-space:nowrap}.moves button.current{border-color:#337b56;background:#eaf4ed;color:#24573e;font-weight:700}.moves button.future{opacity:.48;border-style:dashed}.moves button.past:hover,.moves button.future:hover{opacity:1;border-color:#9c876e}
@media(max-width:980px){.workspace{grid-template-columns:1fr;max-width:760px}.right-panel{grid-column:auto}.situation-panel{max-width:760px}}
@media(max-width:760px){.intro{padding-bottom:18px}.depth-card{width:auto;margin:0 14px 16px;flex-direction:column;align-items:stretch}.depth-options{width:100%}.depth-options button{flex:1;min-width:0}.workspace{padding:0 14px}.right-panel{order:3}.situation-panel{width:auto;margin:16px 14px;padding:16px 12px}.situation-heading{align-items:flex-start}.situation-heading>em{margin-top:4px}.situation-chart{min-height:180px}.global-best-summary>div{grid-template-columns:1fr auto}.global-best-summary em{grid-column:1/-1;grid-row:2}.board-top{grid-template-columns:auto auto 1fr auto;gap:4px}.tools,.history-tools{gap:3px}.board-top .history-tools button,.board-top .tools button{width:34px;height:34px}.best-toggle{width:35px;height:35px}.round-rule{margin-left:0}.moves{flex-wrap:wrap}}

.game-mode-card{margin-top:6px;padding:12px;display:grid;grid-template-columns:minmax(250px,1fr) auto;align-items:center;gap:10px;border-radius:12px;box-shadow:0 8px 22px rgba(55,42,25,.06)}
.mode-card-heading{min-width:180px;display:flex;align-items:center;gap:10px}.mode-card-heading>span{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#eee7da;color:#8b6e4d;font-weight:800}.mode-card-heading>div{display:flex;flex-direction:column;gap:2px}.mode-card-heading strong{font-size:12px}.mode-card-heading small{font-size:9px;color:#918a80;white-space:nowrap}
.game-mode-bar{display:flex;align-items:center;justify-content:center;flex:1;gap:3px;margin:0;padding:3px;border:1px solid #d9d1c4;border-radius:999px;background:#f1ece3}
.game-mode-bar button{flex:1;border:0;border-radius:999px;background:transparent;color:#746d62;padding:7px 10px;font-size:11px;white-space:nowrap;cursor:pointer;transition:.18s ease}
.game-mode-bar button.active{background:#244f3e;color:#fff;box-shadow:0 2px 7px rgba(36,79,62,.22)}
.computer-options{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.side-choice{flex:0 0 auto;border:1px solid #d8b6ad;border-radius:999px;background:#fff7f3;color:#9e342d;padding:8px 11px;font-size:11px;font-weight:700}.level-choice{display:flex;align-items:center;gap:5px;min-width:0;font-size:10px;color:#746d62}.level-choice span{white-space:nowrap}.level-choice select{min-width:150px;max-width:180px;border:1px solid #d9d1c4;border-radius:8px;background:#fffdf8;color:#244f3e;padding:8px 9px;font-size:11px;font-weight:700}
.setup-panel{margin:12px 0 6px;padding:12px;border:1px solid #d9d1c4;background:#fbf8f1;display:grid;gap:9px}
.setup-actions,.setup-pieces{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.setup-pieces>span{width:34px;font-size:11px;color:#8c8478}
.setup-panel button{min-width:34px;height:32px;border:1px solid #d9d1c4;background:#fff;color:#403b34;cursor:pointer}.setup-panel button.active{border-color:#244f3e;background:#e7f0eb;color:#244f3e;font-weight:700}.setup-panel .finish{background:#244f3e;color:#fff;border-color:#244f3e}.setup-pieces.red button{color:#b9322b}.setup-panel>p{text-align:center;color:#b9322b;font-size:12px;margin:0}
.depth-card{margin-top:18px;margin-bottom:22px}
@media(max-width:760px){.game-mode-card{grid-template-columns:1fr;align-items:stretch}.mode-card-heading{width:100%;min-width:0}.mode-card-heading small{white-space:normal}.game-mode-bar{width:100%;box-sizing:border-box}.game-mode-bar button{flex:1;padding:7px 5px}.computer-options{justify-content:space-between}.level-choice{flex:1;justify-content:flex-end}.level-choice select{width:min(180px,100%)}.setup-panel{margin-left:-2px;margin-right:-2px}.setup-pieces>span{width:100%;text-align:center}.depth-card{margin-top:16px}}

/* Candidate variation playback and timeline scrubbing */
.piece{transition:left .42s ease,top .42s ease,transform .15s ease}
.variation-target{position:absolute;width:8.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:7}
.variation-target{border:3px solid rgba(44,151,91,.72);box-shadow:0 0 0 6px rgba(44,151,91,.14);animation:target-pulse .72s ease-in-out infinite alternate}
@keyframes target-pulse{to{transform:translate(-50%,-50%) scale(1.12)}}
.variation-trail{position:absolute;inset:0;width:100%;height:100%;z-index:6;overflow:visible;pointer-events:none}.variation-trail line{fill:none;stroke:rgba(35,126,75,.34);stroke-width:.045;stroke-linecap:round;stroke-dasharray:.08 .055;animation:variation-trail-draw .62s cubic-bezier(.2,.78,.24,1) both}@keyframes variation-trail-draw{from{opacity:0;stroke-dashoffset:.7}to{opacity:1;stroke-dashoffset:0}}
.variation-moving-piece,.variation-captured-piece{display:grid;place-items:center;line-height:1;text-align:center}
.variation-moving-piece{z-index:9;pointer-events:none;left:var(--from-left);top:var(--from-top);transition:none;animation:variation-piece-travel .62s cubic-bezier(.2,.78,.24,1) forwards;will-change:left,top,transform,filter}
@keyframes variation-piece-travel{0%{left:var(--from-left);top:var(--from-top);transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 2px 2px rgba(0,0,0,.10))}52%{transform:translate(-50%,-56%) scale(1.075);filter:drop-shadow(0 10px 7px rgba(0,0,0,.28))}100%{left:var(--to-left);top:var(--to-top);transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 2px 2px rgba(0,0,0,.10))}}
.variation-captured-piece{z-index:8;pointer-events:none;transition:none;animation:variation-piece-captured .19s ease-in .43s forwards}@keyframes variation-piece-captured{to{opacity:0;transform:translate(-50%,-50%) scale(.72)}}
.variation-playback{position:absolute;left:50%;top:13px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:10px;min-width:min(88%,360px);padding:8px 10px;border:1px solid rgba(43,92,66,.28);border-radius:999px;background:rgba(250,248,241,.95);box-shadow:0 5px 20px rgba(47,37,22,.18);font-size:11px;color:#607068;backdrop-filter:blur(8px)}
.variation-playback strong{flex:1;color:#1f5f40;text-align:center;font-size:13px}.variation-playback button{border:0;background:transparent;color:#8a8176;padding:3px 5px}.variation-playback.timeline{min-width:auto}.variation-playback.timeline strong{white-space:nowrap}
.situation-chart-wrap{position:relative;overflow:visible}.situation-chart{touch-action:none;user-select:none;cursor:crosshair}.situation-chart.scrubbing{cursor:ew-resize}
.timeline-preview{position:absolute;right:14px;top:8px;z-index:5;width:132px;padding:9px;border:1px solid #cfc3b1;border-radius:8px;background:rgba(255,253,248,.96);box-shadow:0 8px 24px rgba(57,42,23,.2);pointer-events:none;display:grid;gap:4px}
.timeline-preview strong{font-size:11px;color:#315b45}.timeline-preview>span{font-size:9px;color:#8d857a}
.mini-board{position:relative;width:112px;aspect-ratio:8/9;margin:auto;background:#dfb778;background-image:linear-gradient(rgba(83,65,43,.62) 1px,transparent 1px),linear-gradient(90deg,rgba(83,65,43,.62) 1px,transparent 1px);background-size:12.5% 11.111%;border:6px solid #dfb778;box-shadow:inset 0 0 0 1px rgba(83,65,43,.65)}
.mini-river{position:absolute;left:0;right:0;top:44.444%;height:11.111%;background:#dfb778;border-top:1px solid rgba(83,65,43,.62);border-bottom:1px solid rgba(83,65,43,.62);z-index:1}
.mini-piece{position:absolute;width:9.5%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;z-index:2;background:#f2d9a6;border:1px solid currentColor;color:#252b28;font:7px/1 "Songti SC",serif;box-shadow:0 1px 2px rgba(0,0,0,.18)}.mini-piece.red{color:#b8372b}
@media(max-width:760px){.variation-playback{top:7px;gap:6px;padding:6px 8px}.variation-playback span{display:none}.timeline-preview{right:5px;top:5px;width:104px;padding:6px}.mini-board{width:90px}.timeline-preview>span{display:none}}

.board-wrap{scroll-margin-top:12px}
.duel-clock-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.duel-clock-pair>div{flex-wrap:wrap}.duel-clock-pair>div>span{font-size:11px}
.step-seconds{font:700 30px system-ui;color:#176b45}.step-urgent{color:#d52c24;animation:step-warning .8s ease-in-out infinite}@keyframes step-warning{50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.step-urgent{animation:none}}
.board-top button:disabled{opacity:.3!important;color:#919991!important;cursor:not-allowed;box-shadow:none!important}
.piece.peer-selected{outline:4px solid #1688ff;outline-offset:3px;box-shadow:0 0 0 7px rgba(255,255,255,.9),0 0 15px rgba(22,136,255,.65),0 2px 5px rgba(0,0,0,.2)!important;z-index:8}
.duel-operations{margin-top:8px;color:var(--green)}
.duel-operations summary{cursor:pointer;min-height:40px;padding:9px 14px;border:1px solid #c9d4c9;border-radius:10px;background:#edf3ed;font-weight:700}
.duel-operations button{min-height:40px;padding:8px 12px;margin:6px 6px 0 0;border:1px solid #c9d4c9;border-radius:8px;background:#edf3ed;color:#245f43;font:inherit}
.duel-operations button:disabled{opacity:.35;cursor:not-allowed}
.duel-request{margin-top:10px;padding:14px;border:2px solid #c69530;border-radius:12px;background:#fff8df;scroll-margin-block:24px}
.duel-request>div{display:flex;gap:10px}
.duel-request button{flex:1;font-weight:700;background:#176b45;color:white;min-height:44px}
.duel-request button+button{background:#fff0ed;color:#a32d23;border-color:#a32d23}
.duel-request button:focus-visible{outline:3px solid #c69530;outline-offset:3px}
/* Keep all functional modules aligned with the board at every viewport size. */
.workspace{display:grid!important;grid-template-columns:minmax(0,1fr)!important;max-width:768px;width:100%;gap:18px;align-items:stretch}
.workspace>.board-wrap,.workspace>.coach-sidebar{width:100%;min-width:0}
.coach-sidebar>.collapsible-module{width:100%;max-width:none;margin:12px 0}
.network-panel [aria-label="邀请对战设置"] label{grid-template-rows:auto 40px;align-content:start}
.network-panel [aria-label="邀请对战设置"] select{box-sizing:border-box;height:40px;min-height:40px;padding:8px;font:inherit}
.coach-sidebar .collapsible-content>.panel,.coach-sidebar .situation-panel{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
.candidate.previewing{border-color:#4f8768;background:#e8f4eb;box-shadow:inset 3px 0 0 #2b6d4c}
.move-red,.move-red>strong{color:#b52f26!important}.move-black,.move-black>strong{color:#171b18!important}
.record-toolbar{max-width:1200px;margin:16px auto;display:flex;align-items:center;gap:12px;padding:12px 16px}.record-toolbar>small{color:#999}.record-toolbar>.record-stepper{display:flex;gap:4px;margin:auto}.record-toolbar button,.record-loader button{border:1px solid #cfc4b4;background:#fffdf8;padding:7px 10px;color:#51493f}.record-toolbar>div:last-child{display:flex;gap:6px}.record-loader{max-width:1200px;margin:-8px auto 16px;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center}.record-loader textarea{height:55px}.record-message{position:fixed;left:50%;top:82px;transform:translateX(-50%);z-index:30;background:#244f3e;color:#fff;padding:10px 14px;border-radius:6px}.record-message button{border:0;background:transparent;color:#fff;margin-left:12px}@media(max-width:760px){.record-toolbar{margin:10px 14px;flex-wrap:wrap}.record-stepper{order:3;width:100%}.record-stepper button{flex:1;padding:6px 3px}.record-loader{margin:0 14px 12px;grid-template-columns:1fr}.board-top{grid-template-columns:1fr auto auto 1fr;gap:4px}.perspective-button{font-size:0}.perspective-button:first-letter{font-size:15px}}
.variation-playback>i{display:grid;place-items:center;min-width:29px;height:24px;padding:0 6px;border-radius:999px;background:#245f43;color:#fff;font:700 11px Arial;font-style:normal}
/* Refined game-record command bar */
.record-toolbar{position:relative;min-height:76px;padding:12px 14px 12px 12px!important;display:grid!important;grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important;gap:24px!important;border:1px solid rgba(132,112,83,.2)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(255,254,250,.98),rgba(249,245,237,.95))!important;box-shadow:0 10px 30px rgba(71,54,31,.07),inset 0 1px rgba(255,255,255,.9)!important}.record-summary{display:flex;align-items:center;gap:11px;min-width:0}.record-summary>span{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#315d49,#1f4636);color:#fff;font-size:16px;font-weight:800;box-shadow:0 5px 12px rgba(36,79,62,.18)}.record-summary>div{display:flex;flex-direction:column-reverse;gap:1px;min-width:0}.record-summary strong{font-size:14px;color:#252c28;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-summary small{font-size:9px;letter-spacing:.13em;color:#999187}.record-summary>em{margin-left:auto;padding:5px 9px;border-radius:999px;background:#eee9df;color:#71695e;font:10px/1.1 Arial,sans-serif;font-style:normal;white-space:nowrap}.record-stepper{height:42px;display:flex!important;align-items:stretch;border:1px solid rgba(113,97,74,.2)!important;border-radius:10px!important;overflow:hidden;background:rgba(255,255,255,.68);box-shadow:0 2px 7px rgba(50,39,23,.04)}.record-stepper button{min-width:74px;display:flex;align-items:center;justify-content:center;gap:5px;border:0!important;border-right:1px solid rgba(113,97,74,.14)!important;border-radius:0!important;background:transparent!important;color:#5a554d!important;padding:0 10px!important;font-size:11px!important;transition:background .16s,color .16s,transform .16s}.record-stepper button:last-child{border-right:0!important}.record-stepper button i{font:normal 17px/1 Georgia,serif;color:#786b59}.record-stepper button:hover:not(:disabled){background:#f0ece3!important;color:#244f3e!important}.record-stepper button:active:not(:disabled){transform:translateY(1px)}.record-stepper button:disabled{opacity:.27;cursor:default}.record-actions{display:flex!important;justify-content:flex-end;align-items:center;gap:8px}.record-actions button{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:9px!important;padding:0 14px!important;font-size:11px!important;font-weight:700;letter-spacing:.02em;transition:transform .16s,box-shadow .16s,background .16s}.record-actions button i{font-style:normal;font-size:15px}.record-actions .load-record{border:1px solid rgba(93,79,60,.22)!important;background:rgba(255,255,255,.72)!important;color:#554d43!important}.record-actions .save-record{border:1px solid #244f3e!important;background:linear-gradient(145deg,#315f4b,#214838)!important;color:#fff!important;box-shadow:0 5px 12px rgba(36,79,62,.16)}.record-actions button:hover{transform:translateY(-1px)}.record-actions .save-record:hover{box-shadow:0 7px 16px rgba(36,79,62,.23)}@media(max-width:900px){.record-toolbar{grid-template-columns:1fr auto!important;gap:10px!important}.record-stepper{grid-column:1/-1;grid-row:2}.record-stepper button{flex:1}.record-actions{grid-column:2;grid-row:1}}@media(max-width:560px){.record-toolbar{margin-left:14px!important;margin-right:14px!important;padding:10px!important}.record-summary>span{width:37px;height:37px}.record-summary>em{display:none}.record-actions button{width:39px;padding:0!important;font-size:0!important}.record-actions button i{font-size:16px}.record-stepper button{min-width:0;padding:0 4px!important}.record-stepper button span{font-size:10px}}

/* Refined record loader */
.record-loader{max-width:1200px!important;margin:-7px auto 18px!important;padding:18px!important;display:block!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(255,254,250,.98),rgba(248,244,235,.96))!important;box-shadow:0 12px 34px rgba(68,51,28,.08)!important}.record-loader-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:0 2px 14px;border-bottom:1px solid rgba(113,97,74,.13)}.record-loader-heading>div{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.record-loader-heading span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eee7da;color:#876d4e;font-size:11px;font-weight:800}.record-loader-heading strong{font-size:14px;color:#2b312e}.record-loader-heading small{font-size:9px;color:#979087;letter-spacing:.04em}.record-loader-close{width:30px;height:30px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#91887d!important;font-size:21px!important}.record-loader-close:hover{background:#eee9df!important;color:#3f4843!important}.record-loader-grid{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(360px,1.45fr) minmax(210px,.75fr);gap:12px;padding-top:14px}.record-file-card,.record-local-card{min-height:92px;display:grid!important;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;text-align:left;border:1px solid rgba(119,99,71,.18)!important;border-radius:11px!important;background:rgba(255,255,255,.68)!important;padding:13px!important;color:#393e3a!important;transition:transform .16s,border-color .16s,box-shadow .16s}.record-file-card>i,.record-local-card>i{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#e9f0eb;color:#28543f;font:normal 20px/1 Georgia}.record-file-card>span,.record-local-card>span{display:flex;flex-direction:column;gap:4px}.record-file-card strong,.record-local-card strong{font-size:12px}.record-file-card small,.record-local-card small{font-size:9px;color:#969087}.record-file-card>b,.record-local-card>b{padding:5px 8px;border-radius:999px;background:#f0ece4;color:#756a5d;font-size:9px}.record-file-card:hover,.record-local-card:hover{transform:translateY(-2px);border-color:rgba(36,79,62,.34)!important;box-shadow:0 8px 18px rgba(50,39,23,.07)}.record-fen-card{min-width:0;padding:11px 12px;border:1px solid rgba(119,99,71,.18);border-radius:11px;background:rgba(255,255,255,.48)}.record-fen-card>label{display:flex;align-items:center;gap:8px;margin-bottom:8px}.record-fen-card label>i{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#eee7da;color:#846b4e;font-size:10px;font-style:normal;font-weight:800}.record-fen-card label>span{display:flex;flex-direction:column}.record-fen-card label strong{font-size:11px}.record-fen-card label small{font-size:8px;color:#9b948a}.record-fen-card>div{display:grid;grid-template-columns:1fr auto;gap:7px}.record-fen-card textarea{height:37px!important;min-width:0;resize:none;border:1px solid rgba(115,98,75,.2)!important;border-radius:7px;background:#fbfaf6!important;padding:9px 10px!important;font:10px/1.5 ui-monospace,monospace!important;white-space:nowrap;overflow:hidden}.record-fen-card textarea:focus{border-color:#668575!important;box-shadow:0 0 0 3px rgba(36,79,62,.08)}.record-fen-card button{height:37px;border:0!important;border-radius:7px!important;background:#315946!important;color:#fff!important;padding:0 12px!important;font-size:10px!important;font-weight:700}.record-fen-card button:disabled{opacity:.35;cursor:default}@media(max-width:900px){.record-loader{margin-left:14px!important;margin-right:14px!important}.record-loader-grid{grid-template-columns:1fr 1fr}.record-fen-card{grid-column:1/-1;grid-row:1}.record-file-card,.record-local-card{min-height:76px}}@media(max-width:560px){.record-loader-grid{grid-template-columns:1fr}.record-fen-card{grid-column:auto}.record-loader-heading small{display:none}.record-file-card,.record-local-card{min-height:68px}.record-fen-card>div{grid-template-columns:1fr}.record-fen-card textarea{height:52px!important}.record-fen-card button{width:100%}}
.collapsible-module{max-width:1540px;margin:12px auto;border:0}.collapsible-module>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,253,248,.92);color:var(--green);font-weight:700}.collapsible-module>summary::-webkit-details-marker{display:none}.collapsible-module>summary:after{content:"⌄";font-size:18px}.collapsible-module[open]>summary:after{content:"⌃"}.collapsible-module[open]>.collapsible-content{margin-top:10px}.workspace>.collapsible-module{margin:0;min-width:0}.workspace>.collapsible-module .right-panel,.workspace>.board-wrap .collapsible-module .game-mode-card{width:100%}.collapsible-content>.record-toolbar,.collapsible-content>.situation-panel,.collapsible-content>.depth-card{margin-top:0}