:root{--wood:#deb280;--wood-dark:#a6723a;--wood-mid:#926a42;--panel:#f7f0e2;--panel-2:#faf6ec;--btn:#e0d0b0;--btn-active:#ffd682;--btn-hover:#eee2c0;--text:#281c10;--muted:#967f64;--danger:#dc3c3c}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:var(--text);background:linear-gradient(#f3e9d5 0%,#e9dcc2 100%);min-height:100vh;font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,Hiragino Sans GB,sans-serif}.topbar{text-align:center;padding:12px 16px 2px}.topbar h1{letter-spacing:1px;margin:0;font-size:22px}.topbar h1 span{color:var(--wood-dark);font-weight:400}.topbar-hint{color:var(--muted);margin-top:4px;font-size:12px}#app{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px;padding:10px 16px 30px;display:flex}.board-area{flex-direction:column;gap:10px;display:flex}.board-shell{position:relative}canvas#board{touch-action:none;cursor:pointer;border-radius:10px;display:block;box-shadow:0 8px 26px #5a3c1447}.result-overlay{color:#ffebaa;opacity:0;pointer-events:none;background:#00000073;border-radius:10px;justify-content:center;align-items:center;font-size:clamp(28px,6vw,54px);font-weight:700;transition:opacity .8s;display:flex;position:absolute;inset:0}.result-overlay.show{opacity:1}.hidden{display:none!important}.bottom{flex-direction:column;gap:8px;display:flex}.toolbar{flex-wrap:wrap;gap:6px;display:flex}button{color:var(--text);background:var(--btn);border:2px solid var(--wood-dark);cursor:pointer;border-radius:8px;padding:6px 10px;font-family:inherit;font-size:13px;transition:background .15s}button:hover{background:var(--btn-hover)}button.active{background:var(--btn-active)}.review-bar{flex-direction:column;gap:6px;display:flex}.review-buttons{flex-wrap:wrap;gap:6px;display:flex}.timeline-wrap{width:100%}#timeline{cursor:pointer;touch-action:none;width:100%;display:block}.review-pos,.shortcuts{color:var(--muted);font-size:12px}.panel{flex-direction:column;gap:10px;width:330px;display:flex}.clock-card{border:2px solid var(--wood-mid);color:#f0d6b2;background:#58402c;border-radius:10px;padding:8px 12px 10px}.clock-title{color:#f0d6b2;align-items:center;gap:6px;font-size:12px;display:flex}.indicator{background:#6e5c44;border-radius:50%;width:8px;height:8px;display:inline-block}.indicator.thinking{background:#ff7850}#ai-state{color:#78644c}.indicator.thinking+#ai-state{color:#ffbe78}.indicator.paused{background:#ffbe78}.indicator.paused+#ai-state{color:#ffbe78}#ai-pause{border:1px solid var(--wood-mid);color:#f0d6b2;cursor:pointer;background:#6b4f34;border-radius:6px;margin-left:auto;padding:2px 8px;font-size:11px;line-height:1.5}#ai-pause:not([hidden]){align-items:center;display:inline-flex}#ai-pause[hidden]{display:none}#ai-pause:hover{background:#7d5c3c}#ai-pause.paused{color:#3b2412;background:#ffbe78;border-color:#d99a4e}.clock-row{justify-content:space-between;align-items:baseline;margin-top:2px;display:flex}.clock{font-variant-numeric:tabular-nums;color:#ebcda0;font-size:30px}.clock.warn{color:var(--danger)}.compute{color:#ffd696;font-size:12px}.info-card{background:var(--panel-2);border:2px solid var(--wood-dark);border-radius:10px;padding:8px 10px 10px}.info-engine{margin-bottom:6px;font-size:15px}.info-grid{grid-template-columns:auto 1fr auto 1fr;align-items:baseline;gap:4px 8px;font-size:12px;display:grid}.info-grid .k{color:#967850}.info-grid .v{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-strip{color:#5a4224;background:#fff3d5;border-radius:5px;margin-top:8px;padding:3px 8px;font-size:12px}.status-strip[data-kind=pending],.status-strip[data-kind=divergence]{color:#b07628;background:#ffecbe}.status-strip[data-kind=result]{color:#b43c28;background:#fce2d8}.notify{background:var(--panel-2);color:#b07628;border:1px solid #d2ba98;border-radius:6px;min-height:22px;padding:4px 8px;font-size:12px}.buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.buttons button{border-radius:10px;padding:10px 8px;font-size:15px}.buttons button.confirm{color:#fff8f0;background:#dc3c3c;border-color:#9c2a1e}.rules{color:#967f64;font-size:12px;line-height:1.7}.rules p{margin:2px 0}.credit{color:#b6a184;text-align:right;font-size:11px}.modal{z-index:50;background:#00000073;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card{background:var(--panel);border-radius:14px;width:min(430px,94vw);max-height:calc(100vh - 32px);padding:18px 22px 20px;overflow-y:auto;box-shadow:0 14px 44px #00000052}.modal-card h2{margin:0 0 12px;font-size:18px}.field{margin-bottom:14px}.field>label{color:#78644c;margin-bottom:6px;font-size:13px;display:block}.radios,.checks{flex-wrap:wrap;gap:10px 16px;font-size:14px;display:flex}.radios label{cursor:pointer;align-items:center;gap:5px;display:flex}.radios label.disabled{opacity:.45;cursor:default}.seconds{color:#78644c;align-items:center;gap:8px;margin-top:8px;font-size:13px;display:flex}.seconds input{border:2px solid var(--wood-dark);border-radius:6px;width:80px;padding:5px 8px;font-family:inherit;font-size:14px}.variety-params{background:#fdf8f0;border:2px dashed #d9c3a1;border-radius:8px;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:8px;padding:10px 12px;display:grid}.variety-params .seconds{margin-top:0}.variety-params .seconds input{width:68px}.variety-params .variety-hint{color:#8b7a62;grid-column:1/-1;font-size:12px;line-height:1.5}.modal-actions{justify-content:flex-end;gap:10px;margin-top:6px;display:flex}.modal-actions .primary{background:var(--btn-active)}.intro-card{width:min(520px,94vw);max-height:86vh;overflow-y:auto}.intro-sub{color:#78644c;font-size:13px}.intro-section{margin-bottom:12px}.intro-section h3{color:#78644c;margin:0 0 6px;font-size:14px}.intro-section p{margin:3px 0;font-size:13px;line-height:1.55}.intro-section a{color:var(--wood-dark)}.intro-skip{color:#78644c;cursor:pointer;align-items:center;gap:6px;margin:2px 0 10px;font-size:13px;display:flex}.loading{z-index:100;text-align:center;background:#efe4cf;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:flex;position:fixed;inset:0}.spinner{border:4px solid #d8c5a5;border-top-color:var(--wood-dark);border-radius:50%;width:44px;height:44px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{font-size:16px}.loading-detail{color:var(--danger);word-break:break-all;max-width:520px;font-size:12px}.loading-tip{color:var(--muted);font-size:12px}#loading-retry{margin-top:4px}@media (max-width:920px){#app{flex-direction:column;align-items:center;padding:8px 10px 24px}.panel,.board-area{width:min(94vw,480px)}}