:root{--ink:#14212b;--muted:#687580;--navy:#092c42;--navy2:#124d67;--paper:#fffdf8;--red:#b92f36;--gold:#d4a64b;--green:#1d7a55;--blue:#2c78a1;--wood:#e8c77e;--wood-dark:#6c4928;--shadow:0 18px 55px rgba(25,38,47,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 0,rgba(212,166,75,.14),transparent 24rem),linear-gradient(180deg,#f7f4ed,#f1eee7);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans SC","Microsoft YaHei",sans-serif;min-height:100vh}button{font:inherit}button:focus-visible{outline:3px solid rgba(44,120,161,.35);outline-offset:2px}
.topbar{background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}.topbar-inner{max-width:1180px;margin:auto;min-height:76px;padding:10px 20px;display:flex;align-items:center;gap:14px}.logo{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}.brand-copy{display:grid;gap:3px}.brand-copy strong{font-size:17px}.brand-copy span{font-size:12px;opacity:.72}.build-badge{margin-left:auto;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:7px;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.07)}.build-badge i{width:8px;height:8px;background:#4bd094;border-radius:50%;box-shadow:0 0 0 4px rgba(75,208,148,.13)}.build-badge span{font-size:11px;font-weight:800;letter-spacing:.08em}.build-badge b{grid-column:2;font-size:10px;opacity:.58;font-weight:600}
.nav{background:rgba(255,255,255,.94);border-bottom:1px solid #e4dfd5;position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}.nav-inner{max-width:1180px;margin:auto;display:flex;gap:8px;padding:8px 20px;overflow-x:auto}.nav-button{border:0;background:transparent;color:#5e6c76;padding:10px 15px;border-radius:9px;font-weight:800;cursor:pointer;white-space:nowrap}.nav-button.active{color:var(--navy);background:#eaf0f2}
main{max-width:1180px;margin:auto;padding:28px 20px 50px}.intro{color:#fff;background:linear-gradient(125deg,var(--navy),#0e455d 67%,#196178);padding:28px 30px;border-radius:22px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(350px,.8fr);align-items:center;gap:30px;box-shadow:var(--shadow);overflow:hidden;position:relative}.intro:after{content:"象棋";position:absolute;right:-18px;top:-52px;font:900 150px serif;opacity:.035;letter-spacing:-20px}.eyebrow,.section-label{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.15em}.intro h1{font-size:clamp(27px,4vw,43px);line-height:1.12;margin:7px 0 10px;letter-spacing:-.03em}.intro p{margin:0;max-width:670px;line-height:1.7;color:rgba(255,255,255,.73)}.intro-stats{display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:1}.intro-stats div{padding:9px 13px;border-left:1px solid rgba(255,255,255,.17)}.intro-stats strong{display:block;font-size:27px;color:#fff4cf}.intro-stats span{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:rgba(255,255,255,.65)}
.view{display:none;margin-top:22px}.view.active{display:block}.workspace{display:grid;grid-template-columns:minmax(440px,620px) minmax(320px,1fr);gap:20px;align-items:start}.board-card,.lesson-panel,.record-card,.rule-note{background:rgba(255,255,255,.92);border:1px solid #e4ded2;border-radius:19px;box-shadow:0 10px 32px rgba(29,43,50,.065)}.board-card{padding:18px}.card-head,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.card-head h2,.section-heading h2{margin:3px 0 0;color:var(--navy)}.board-tools{display:flex;align-items:center;gap:7px}.sound-toggle{border:1px solid #d9ddd9;background:#fff;color:var(--navy);padding:7px 9px;border-radius:999px;font-size:11px;font-weight:850;cursor:pointer}.turn-pill{padding:7px 11px;border-radius:999px;color:var(--red);background:#fff0ed;font-size:12px;font-weight:900}.board-shell{margin:10px auto 0;max-width:560px;aspect-ratio:9/10}#board,#board *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='9' fill='%23fff4cf' stroke='%23b92f36' stroke-width='3'/%3E%3Ccircle cx='13' cy='13' r='2.5' fill='%23092c42'/%3E%3C/svg%3E") 13 13,crosshair}#board{width:100%;height:100%;display:block;touch-action:manipulation}.board-bg{fill:var(--wood);stroke:#8c6031;stroke-width:2}.board-line{stroke:var(--wood-dark);stroke-width:1.8;fill:none}.board-line.thin{stroke-width:1.2}.river-text{font:800 26px "Noto Serif SC",SimSun,serif;fill:#76502e;letter-spacing:8px}.file-label{text-anchor:middle;font:900 14px "Noto Serif SC",SimSun,serif}.black-file{fill:#252a2c}.red-file{fill:var(--red)}.piece circle{fill:#fbefcf;stroke:#2d2a25;stroke-width:2.3;filter:drop-shadow(0 2px 2px rgba(64,43,22,.18))}.piece text{text-anchor:middle;dominant-baseline:central;font:900 28px "Noto Serif SC",SimSun,serif;fill:#252a2c;pointer-events:none}.piece.red circle{stroke:var(--red)}.piece.red text{fill:var(--red)}.piece.selected circle{stroke:var(--blue);stroke-width:5;filter:drop-shadow(0 0 5px rgba(44,120,161,.48))}.piece.in-check circle{stroke:#e03636;stroke-width:5;filter:drop-shadow(0 0 8px rgba(224,54,54,.65))}.move-dot{fill:var(--blue);opacity:.82}.capture-ring{fill:rgba(185,47,54,.1);stroke:var(--red);stroke-width:5}.legend{display:flex;flex-wrap:wrap;gap:15px;padding:9px 4px 0;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.legend-dot.legal{background:var(--blue)}.legend-dot.capture{border:2px solid var(--red)}.legend-dot.danger{background:#e03636;box-shadow:0 0 0 3px rgba(224,54,54,.13)}
.lesson-panel{padding:22px;position:sticky;top:68px}.lesson-meta{display:flex;align-items:center;justify-content:space-between;gap:9px}.lesson-meta span{color:var(--navy2);font:800 11px ui-monospace,monospace;background:#edf3f5;border-radius:7px;padding:6px 8px}.lesson-meta b{color:#8b6a2b;background:#fff7df;font-size:10px;padding:6px 8px;border-radius:7px;text-align:right}.lesson-panel h2{color:var(--navy);font-size:27px;margin:17px 0 7px}.lesson-panel>p{color:var(--muted);line-height:1.65;min-height:52px;margin:0}.objective{margin:17px 0;border-left:4px solid var(--gold);padding:10px 13px;background:#fbf6e9;border-radius:0 10px 10px 0;display:grid;gap:2px}.objective span{color:#8c7750;font-size:10px;font-weight:900;letter-spacing:.09em}.objective strong{color:#4e422c;font-size:14px}.lesson-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.lesson-tab{border:1px solid #dce2e3;border-radius:11px;background:#fff;color:#64727b;padding:10px 7px;cursor:pointer;display:grid;gap:3px;text-align:left}.lesson-tab strong{color:var(--navy);font-size:13px}.lesson-tab span{font-size:9px}.lesson-tab.active{border-color:var(--blue);background:#edf6fa;box-shadow:inset 0 0 0 1px var(--blue)}.lesson-tab.done:after{content:"✓ 已完成";color:var(--green);font-size:10px;font-weight:900}.feedback{margin:15px 0 0;border-radius:11px;padding:12px 13px;min-height:66px;line-height:1.5;font-size:13px}.feedback.neutral{background:#f1f4f5;color:#53636d}.feedback.info{background:#eaf4f9;color:#1b607e}.feedback.error{background:#fff0ee;color:#9c2930}.feedback.success{background:#e9f6ee;color:#17653f}.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.button{border:0;border-radius:10px;padding:10px 13px;font-weight:850;cursor:pointer}.button.primary{background:var(--navy);color:#fff}.button.secondary{background:#edf1f2;color:var(--navy)}.button.danger{background:#fff0ee;color:var(--red)}.button:disabled{opacity:.38;cursor:not-allowed}.progress-block{border-top:1px solid #ebe6dc;margin-top:18px;padding-top:16px}.progress-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.progress-row strong{color:var(--navy)}.progress-track{height:8px;margin-top:8px;background:#e8e9e7;border-radius:99px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--green));transition:width .35s ease}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.mini-stats div{padding:9px;background:#f5f6f4;border-radius:9px;text-align:center}.mini-stats strong{display:block;color:var(--navy);font-size:18px}.mini-stats span{color:var(--muted);font-size:10px}
.section-heading{margin-bottom:16px}.audit-summary{border-radius:12px;background:#e9f6ee;color:var(--green);padding:10px 13px;font-size:12px;font-weight:900}.diagnostic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.diagnostic-item{display:flex;align-items:center;gap:11px;padding:15px;background:#fff;border:1px solid #e5dfd4;border-radius:13px}.diagnostic-item i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:900}.diagnostic-item.pass i{color:#fff;background:var(--green)}.diagnostic-item.fail i{color:#fff;background:var(--red)}.diagnostic-item strong{color:var(--navy);font-size:13px}.diagnostic-item span{display:block;color:var(--muted);font-size:10px;margin-top:2px}.rule-note{display:flex;gap:14px;padding:18px;margin-top:14px}.rule-note-icon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:#fff2cf;color:#82631f;display:grid;place-items:center;font:900 20px serif}.rule-note h3{margin:0 0 5px;color:var(--navy)}.rule-note p{margin:0;color:var(--muted);line-height:1.6;font-size:13px}
.record-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:14px}.record-card{padding:18px}.record-card h3{color:var(--navy);margin:0 0 13px}.record-list,.attempt-log{display:grid;gap:8px}.record-row,.attempt-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px;background:#f6f7f5;border-radius:10px}.record-row strong,.attempt-row strong{color:var(--navy);font-size:13px}.record-row span,.attempt-row span{color:var(--muted);font-size:10px}.record-row b{color:var(--green);font-size:11px}.attempt-row b{font-size:11px}.attempt-row b.ok{color:var(--green)}.attempt-row b.bad{color:var(--red)}.empty-state{color:var(--muted);padding:20px 4px;font-size:13px}.backup-card{grid-column:1/-1}.backup-card ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.75;font-size:13px}.backup-card b{color:var(--navy)}
.modal{position:fixed;inset:0;display:none;align-items:end;justify-content:end;z-index:80;padding:20px;pointer-events:none}.modal.open{display:flex}.modal-card{width:min(330px,calc(100vw - 24px));background:rgba(255,253,248,.97);border:1px solid #d7dfd8;border-radius:15px;padding:15px 16px;text-align:left;box-shadow:0 14px 45px rgba(0,0,0,.2);pointer-events:auto}.success-mark{width:36px;height:36px;margin:0 0 8px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:21px;font-weight:900}.modal-card h2{color:var(--navy);font-size:17px;margin:5px 0}.modal-card p{color:var(--muted);font-size:12px;line-height:1.5;margin:6px 0}.modal-card .button{width:100%;margin-top:5px;padding:8px 11px}footer{text-align:center;padding:22px;color:#7b8589;font-size:11px}
.failure-modal .modal-card{border:2px solid #d45d63;background:#fff8f7}.failure-mark{width:36px;height:36px;margin:0 0 8px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900}.failure-modal .section-label,.failure-modal h2{color:var(--red)}
.marker-line{stroke:var(--wood-dark);stroke-width:1.7;fill:none}.sequence-card{margin-top:12px;border:1px solid #e3ddd2;border-radius:11px;padding:11px;background:#fffdf8}.sequence-head{display:flex;justify-content:space-between;color:#766f66;font-size:10px;font-weight:900;letter-spacing:.06em}.sequence-head b{color:var(--navy)}.move-history{display:grid;gap:6px;margin-top:8px;max-height:150px;overflow:auto}.move-row{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center;font-size:12px;color:#40505a}.move-row i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900}.move-row.red i{background:#fff0ed;color:var(--red)}.move-row.black i{background:#edf0f1;color:#1f2a30}.move-row b{color:var(--navy);font-size:11px}.empty-moves{color:var(--muted);font-size:11px;padding:4px 0}.turn-pill.black-turn{background:#edf0f1;color:#26343b}.turn-pill.thinking{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.5}}
.move-row span{display:block;color:var(--muted);font-size:9px;margin-top:2px}.lesson-target{fill:rgba(212,166,75,.2);stroke:#b37b12;stroke-width:4;stroke-dasharray:7 4;pointer-events:none;animation:targetPulse 1.2s infinite}@keyframes targetPulse{50%{stroke-width:7;opacity:.7}}
@media(max-width:880px){.intro{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.lesson-panel{position:static}.diagnostic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar-inner{padding:9px 13px;min-height:66px}.logo{width:47px;height:47px;border-radius:11px}.brand-copy strong{font-size:14px}.brand-copy span{font-size:10px}.build-badge span{font-size:9px}.build-badge b{display:none}main{padding:16px 11px 40px}.nav-inner{padding:7px 11px}.intro{padding:22px 18px;border-radius:17px;gap:19px}.intro-stats div{padding:6px 9px}.intro-stats strong{font-size:21px}.board-card{padding:9px;border-radius:15px}.card-head{padding:7px 7px 0}.card-head h2{font-size:18px}.board-shell{margin-top:3px}.lesson-panel{padding:17px}.lesson-panel h2{font-size:23px}.lesson-tabs{grid-template-columns:1fr}.lesson-tab{grid-template-columns:1fr auto;align-items:center}.lesson-tab span{grid-column:1}.lesson-tab.done:after{grid-column:2;grid-row:1/3}.diagnostic-grid,.record-layout{grid-template-columns:1fr}.backup-card{grid-column:auto}.section-heading{align-items:flex-start}.audit-summary{font-size:10px}}
@media(max-width:560px){.modal{padding:12px;justify-content:center}}
.lesson-tabs{max-height:255px;overflow-y:auto;padding-right:3px}
.piece-test-banner{margin-bottom:14px;padding:15px;border-radius:14px;background:linear-gradient(120deg,#fff1cf,#fffaf0);border:2px solid var(--gold)}.piece-test-banner>span{display:block;color:#8a671d;font-size:10px;font-weight:900;letter-spacing:.12em}.piece-test-banner>strong{display:block;color:var(--red);font:900 34px "Noto Serif SC",SimSun,serif;margin:2px 0}.piece-test-banner p{margin:0;color:#594a2e;font-size:12px;line-height:1.55}.piece-test-banner>b{display:inline-block;margin-top:8px;padding:5px 8px;border-radius:7px;background:var(--navy);color:#fff;font-size:10px}.notation-columns{display:grid;grid-template-columns:32px 1fr 1fr;gap:7px;margin-top:9px;padding:0 4px;color:var(--muted);font-size:9px;text-align:center}.notation-columns strong:first-of-type{color:var(--red)}.notation-columns strong:last-of-type{color:var(--navy)}.move-pair{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr);gap:7px;align-items:stretch}.move-pair>i{display:grid;place-items:center;font-style:normal;font-weight:900;color:var(--muted);font-size:11px}.notation-cell{min-width:0;padding:8px;border-radius:8px;border:1px solid #e3ded4;background:#fff}.notation-cell.red{border-left:3px solid var(--red)}.notation-cell.black{border-left:3px solid var(--navy)}.notation-cell>span{display:block;font-size:8px;font-weight:900;color:var(--muted)}.notation-cell>b{display:block;margin-top:2px;font:900 15px "Noto Serif SC",SimSun,serif;white-space:nowrap}.notation-cell.red>b{color:var(--red)}.notation-cell.black>b{color:var(--navy)}.notation-cell>small{display:block;margin-top:3px;color:var(--muted);font-size:8px;line-height:1.35}.notation-cell.empty{opacity:.45}.move-history{max-height:220px}
.assessment-card{background:linear-gradient(135deg,#fffdf8,#f4f8f7);border:1px solid #ddd7ca;border-radius:20px;padding:21px;box-shadow:var(--shadow);margin-bottom:16px}.student-fields{display:grid;grid-template-columns:1.2fr .8fr 1.3fr;gap:10px}.student-fields label{display:grid;gap:5px}.student-fields span{font-size:10px;font-weight:900;color:var(--muted);letter-spacing:.05em}.student-fields input{width:100%;border:1px solid #d8ddd9;border-radius:10px;background:#fff;padding:11px 12px;color:var(--ink);font:inherit}.score-hero{display:grid;grid-template-columns:128px 1fr;align-items:center;gap:20px;margin:20px 0;padding:18px;background:var(--navy);color:#fff;border-radius:16px}.score-ring{width:108px;height:108px;border-radius:50%;display:grid;place-content:center;text-align:center;border:8px solid rgba(212,166,75,.85);background:rgba(255,255,255,.07)}.score-ring strong{font-size:40px;line-height:.95}.score-ring span{font-size:12px;opacity:.7}.score-hero h3{margin:4px 0 6px;font-size:23px}.score-hero p{margin:0;color:rgba(255,255,255,.68);font-size:12px;line-height:1.55}.summary-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.summary-stats div,.section-summary div{padding:12px;background:#fff;border:1px solid #e5e2da;border-radius:11px;text-align:center}.summary-stats strong,.section-summary strong{display:block;color:var(--navy);font-size:20px}.summary-stats span,.section-summary span,.section-summary small{display:block;color:var(--muted);font-size:10px}.section-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.summary-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.email-note{color:var(--muted);font-size:11px;line-height:1.55;margin:10px 0 0}.assessment-details{margin-top:14px;border-top:1px solid #e2ded5;padding-top:12px}.assessment-details summary{cursor:pointer;color:var(--navy);font-weight:850;font-size:13px}.assessment-rows{display:grid;gap:7px;margin-top:10px;max-height:460px;overflow:auto}.assessment-row{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:9px;padding:9px;background:#fff;border-radius:9px}.assessment-row i{font-style:normal;color:var(--muted);font-size:10px}.assessment-row strong{font-size:12px;color:var(--navy)}.assessment-row span{display:block;color:var(--muted);font-size:9px}.assessment-row b{font-size:10px}.assessment-row.first b{color:var(--green)}.assessment-row.retry b{color:#9a6a18}.assessment-row.pending b{color:var(--muted)}
@media(max-width:700px){.student-fields{grid-template-columns:1fr}.score-hero{grid-template-columns:95px 1fr}.score-ring{width:82px;height:82px;border-width:6px}.score-ring strong{font-size:31px}.summary-stats{grid-template-columns:1fr 1fr}}
@media print{.topbar,.nav,.intro,#challenge,#rules,.section-heading .button,.record-layout,footer,.summary-actions,.email-note{display:none!important}body{background:#fff}.view{display:block!important;margin:0}main{padding:0}.assessment-card{box-shadow:none;border:0}.assessment-details{display:block}.assessment-rows{max-height:none}.student-fields input{border:0;padding:4px 0}}