:root{--bg: #0b1020;--bg-2: #121833;--panel: rgba(22, 28, 50, .66);--panel-solid: #161c32;--panel-brd: rgba(255, 255, 255, .09);--ink: #eef2ff;--ink-dim: #aab3d4;--ink-mute: #76809f;--accent: #f4b63a;--accent-2: #4fd1a6;--red: #ff5d5d;--red-deep: #e23b3b;--black-pc: #9aa6c8;--shadow: 0 18px 50px rgba(0, 0, 0, .45);--radius: 16px}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(1200px 700px at 12% -8%,rgba(244,182,58,.1),transparent 60%),radial-gradient(1000px 700px at 100% 0%,rgba(79,209,166,.1),transparent 55%),radial-gradient(900px 900px at 50% 120%,rgba(226,59,59,.08),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg-2));background-attachment:fixed;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1240px;margin:0 auto;padding:18px clamp(12px,3vw,28px) 60px}.top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:6px 2px 18px}.brand{display:flex;align-items:center;gap:14px;margin-right:auto}.logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-family:KaiTi,STKaiti,serif;font-size:30px;font-weight:700;color:#fff5e0;background:linear-gradient(145deg,var(--red-deep),#a01f1f);box-shadow:0 8px 24px #e23b3b66,inset 0 1px #ffffff4d}.brand-text h1{margin:0;font-size:clamp(18px,2.4vw,23px);letter-spacing:.5px}.brand-text p{margin:2px 0 0;font-size:12.5px;color:var(--ink-dim)}.nav{display:flex;gap:6px;background:#ffffff0d;padding:5px;border-radius:12px;border:1px solid var(--panel-brd)}.nav button{border:0;background:transparent;color:var(--ink-dim);padding:8px 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:.18s}.nav button:hover{color:var(--ink)}.nav button.active{background:linear-gradient(145deg,var(--accent),#e09b1f);color:#1a1205;box-shadow:0 6px 16px #f4b63a4d}.engine-status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-dim);padding:8px 14px;border-radius:11px;background:#ffffff0a;border:1px solid var(--panel-brd)}.engine-status .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-mute)}.engine-status.ready .dot{background:var(--accent-2);box-shadow:0 0 10px var(--accent-2)}.engine-status.loading .dot{background:var(--accent);animation:pulse 1s infinite}.engine-status.error .dot{background:var(--red)}@keyframes pulse{50%{opacity:.35}}.play{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}.board-col{display:flex;flex-direction:column;gap:14px}.side-col{display:flex;flex-direction:column;gap:16px}.turn-banner{display:flex;justify-content:center}.turn-pill{padding:7px 20px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.4px;border:1px solid var(--panel-brd)}.turn-pill.red{color:#ffd9d9;background:linear-gradient(145deg,#e23b3b66,#e23b3b26)}.turn-pill.black{color:#d6deff;background:linear-gradient(145deg,#46507880,#282e464d)}.board-wrap{display:flex;justify-content:center;padding:10px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-brd);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.board-canvas{display:block;cursor:pointer;border-radius:12px;touch-action:manipulation}.panel{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--radius);padding:16px 16px 18px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-head h2{margin:0;font-size:16px;font-weight:700}.en{color:var(--ink-mute);font-weight:500;font-size:12px;margin-left:4px}.muted{color:var(--ink-mute);font-size:12.5px}.live-dot{width:10px;height:10px;border-radius:50%;background:var(--ink-mute)}.live-dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1s infinite}.winbar{margin-bottom:14px}.winbar-track{position:relative;height:30px;border-radius:9px;overflow:hidden;background:linear-gradient(90deg,#2a3252,#20263f);border:1px solid var(--panel-brd)}.winbar-red{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ff6b6b,#e23b3b);transition:width .4s ease}.winbar-label-red,.winbar-label-black{position:absolute;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:700;z-index:2}.winbar-label-red{left:10px;color:#fff}.winbar-label-black{right:10px;color:#cdd6f5}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.stat{background:#ffffff0a;border:1px solid var(--panel-brd);border-radius:10px;padding:9px 6px;text-align:center}.stat.accent{background:#f4b63a1f;border-color:#f4b63a4d}.stat-value{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{font-size:10.5px;color:var(--ink-mute);margin-top:3px}.pv-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--ink-dim);margin-bottom:8px}.engine-tag{font-size:11px;color:var(--accent-2);background:#4fd1a61f;padding:3px 9px;border-radius:999px}.pv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.pv-row{display:grid;grid-template-columns:20px 54px 38px 1fr;align-items:center;gap:8px;padding:8px;border-radius:9px;cursor:default;transition:background .15s;border:1px solid transparent}.pv-row:hover{background:#ffffff0d}.pv-row.best{background:#f4b63a14;border-color:#f4b63a38}.pv-rank{text-align:center;color:var(--ink-mute);font-weight:700;font-size:12px}.pv-eval{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}.pv-eval.pos{color:var(--accent-2)}.pv-eval.neg{color:var(--red)}.pv-win{font-size:12px;color:var(--ink-dim);text-align:right}.pv-moves{display:flex;flex-wrap:wrap;gap:3px 6px;overflow:hidden;max-height:44px}.pv-move{font-family:KaiTi,STKaiti,serif;font-size:13px;color:var(--ink-dim);white-space:nowrap}.pv-row.best .pv-move{color:var(--ink)}.result-banner{margin-top:14px;text-align:center;font-weight:800;font-size:15px;padding:11px;border-radius:11px}.result-banner.red{color:#fff;background:linear-gradient(145deg,var(--red-deep),#a01f1f)}.result-banner.black{color:#e8edff;background:linear-gradient(145deg,#3a4368,#2a3150)}.controls{display:flex;flex-direction:column;gap:11px;position:relative}.ctl-row{display:flex;gap:8px}.ctl-row.primary .btn{flex:1;padding:9px 4px}.ctl-row.split .btn{flex:1}.btn{border:1px solid var(--panel-brd);background:#ffffff0f;color:var(--ink);font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:10px;cursor:pointer;transition:.16s;white-space:nowrap}.btn:hover:not(:disabled){background:#ffffff1f;transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.wide{width:100%}.btn.accent{background:linear-gradient(145deg,var(--accent),#e09b1f);color:#1a1205;border-color:transparent;box-shadow:0 8px 20px #f4b63a47}.btn.ghost{background:transparent}.btn.small{padding:7px 10px;font-size:13px;flex:1}.ctl-divider{height:1px;background:var(--panel-brd);margin:3px 0}.slider{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink-dim)}.slider b{color:var(--accent);float:right}.slider input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,rgba(255,255,255,.12) 0%);background:#ffffff1f;outline:none}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 8px #0006;border:2px solid #1a1205}.slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #1a1205}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggle{display:flex;align-items:center;gap:9px;background:#ffffff0a;border:1px solid var(--panel-brd);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--ink-dim);font-size:13px;font-weight:600;transition:.16s}.toggle:hover{background:#ffffff14}.toggle.on{color:var(--ink);border-color:#4fd1a666;background:#4fd1a61a}.toggle-knob{width:32px;height:18px;border-radius:999px;background:#ffffff26;position:relative;flex:none;transition:.16s}.toggle-knob:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.16s}.toggle.on .toggle-knob{background:var(--accent-2)}.toggle.on .toggle-knob:after{transform:translate(14px)}.preset-label{font-size:12.5px;color:var(--ink-dim);font-weight:600}.preset-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.chip{border:1px solid var(--panel-brd);background:#ffffff0d;color:var(--ink-dim);font-size:12.5px;padding:6px 11px;border-radius:999px;cursor:pointer;transition:.15s}.chip:hover{color:var(--ink);border-color:var(--accent);background:#f4b63a1f}.toast{position:absolute;bottom:-12px;left:50%;transform:translate(-50%,100%);background:#0c1124;border:1px solid var(--accent);color:var(--accent);font-size:12.5px;padding:7px 16px;border-radius:999px;box-shadow:var(--shadow);z-index:5;animation:fadein .2s}@keyframes fadein{0%{opacity:0}}.mv-scroll{max-height:260px;overflow-y:auto;margin:-4px -4px 8px;padding:4px}.mv-empty{color:var(--ink-mute);font-size:13px;padding:20px 6px;text-align:center}.mv-table{width:100%;border-collapse:collapse}.mv-table td{padding:1px 2px}.mv-num{color:var(--ink-mute);font-size:12px;width:28px;text-align:right;padding-right:8px!important;font-variant-numeric:tabular-nums}.mv{width:100%;text-align:left;border:0;background:transparent;color:var(--ink-dim);font-family:KaiTi,STKaiti,serif;font-size:14.5px;padding:5px 8px;border-radius:7px;cursor:pointer;transition:.12s}.mv:hover{background:#ffffff0f;color:var(--ink)}.mv.red{color:#ff9a9a}.mv.black{color:#b9c4ea}.mv.active{background:#f4b63a2e;color:#fff;font-weight:700}.mv-nav{display:flex;gap:6px}.evalgraph{padding-bottom:14px}.eval-svg{width:100%;height:70px;display:block;border-radius:10px;cursor:pointer}.learn{display:flex;flex-direction:column;gap:22px}.learn-hero h1{font-size:clamp(22px,3vw,30px);margin:0 0 8px}.learn-hero p{color:var(--ink-dim);max-width:760px;line-height:1.7;margin:0}.learn-block{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.learn-block h2{margin:0 0 16px;font-size:19px}.learn-block p{color:var(--ink-dim);line-height:1.75}.learn-block b{color:var(--ink)}.learn-block code{background:#ffffff14;padding:1px 6px;border-radius:5px;font-size:12.5px}.piece-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.piece-card{display:flex;gap:14px;align-items:center;background:#ffffff08;border:1px solid var(--panel-brd);border-radius:12px;padding:12px}.piece-info h3{margin:0 0 6px;font-size:15px}.piece-info p{margin:0;font-size:13px;line-height:1.6}.diagram{width:110px;height:110px;flex:none}.dg-bg{fill:#e8c187}.dg-line{stroke:#7a542c;stroke-width:1}.dg-ray{stroke:#2878ff;stroke-width:2;opacity:.65}.dg-dot{fill:#2878ff;opacity:.85}.dg-piece{fill:#fdf6e3;stroke:#b22222;stroke-width:2}.dg-glyph{fill:#b22222;font-family:KaiTi,STKaiti,serif;font-size:17px;font-weight:700;text-anchor:middle}.rule-list{margin:0;padding-left:20px;color:var(--ink-dim);line-height:1.9}.rule-list li{margin-bottom:4px}.timeline{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:16px}.timeline li{padding-left:6px}.timeline h3{margin:0 0 5px;font-size:15.5px;color:var(--accent)}.timeline p{margin:0}.loading-overlay{position:fixed;inset:0;background:#080b18d1;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50}.loading-card{width:min(420px,90vw);text-align:center;background:var(--panel-solid);border:1px solid var(--panel-brd);border-radius:20px;padding:34px 30px;box-shadow:var(--shadow)}.loading-card h3{margin:18px 0 14px;font-size:18px}.loading-card.error h3{color:var(--red)}.loading-spinner{width:46px;height:46px;margin:0 auto;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress{height:9px;border-radius:999px;background:#ffffff1a;overflow:hidden}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}.loading-sub{margin:14px 0 0;font-size:12.5px;color:var(--ink-dim);line-height:1.6}@media (max-width: 920px){.play{grid-template-columns:1fr}.side-col{order:2}}@media (max-width: 560px){.top{gap:12px}.brand-text p{display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}}