@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
:root{--paper:#f3efe6;--ink:#373b32;--muted:#929184;--red:#9d4939;--line:#ddd7cb;--green:#59664e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Microsoft YaHei',sans-serif;font-size:14px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23847659' opacity='.045' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:4px}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 5%;gap:60px}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);font-family:'Noto Serif SC',serif;font-size:28px;font-weight:600;letter-spacing:6px}.seal{background:#9b4839;border:3px double #f3dcc4;color:#fae9d5;font-size:18px;line-height:21px;letter-spacing:0;padding:4px 6px;transform:rotate(-3deg)}.brand-sub{display:block;font:9px Arial;letter-spacing:3px;margin-top:6px;color:#89877b}nav{display:flex;height:100%;align-items:center;gap:37px}nav button{height:100%;position:relative;color:#8b897c;font-size:14px}nav button.active{color:var(--red)}nav button.active:after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:3px;background:var(--red)}.header-right{margin-left:auto;display:flex;gap:15px;align-items:center;color:#858779;font-size:12px}.header-right button{border:1px solid var(--line);border-radius:50%;width:30px;height:30px}.live-dot{display:inline-block;width:6px;height:6px;background:#788769;border-radius:50%;margin-right:5px}main{max-width:1440px;margin:auto;padding:0 5%}.intro{display:flex;justify-content:space-between;align-items:center;padding:36px 0 30px}.eyebrow{font-size:10px;letter-spacing:4px;color:#9b8f79;margin-bottom:12px}h1{font:500 33px 'Noto Serif SC',serif;letter-spacing:3px;margin:0}h1 em{font-style:normal;color:#8d6149}.intro p{color:#989284;font-size:12px;margin:13px 0 0;letter-spacing:1px}.intro-mark{font:50px 'Noto Serif SC',serif;color:#b9ae94;display:flex;align-items:center;gap:18px}.intro-mark span{font-size:11px;line-height:2;letter-spacing:4px;writing-mode:vertical-rl}.workspace{display:grid;grid-template-columns:220px minmax(340px,1fr) 275px;gap:28px;align-items:start}.left{padding-top:8px}.label{font-size:12px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}.label span{font-size:8px;letter-spacing:1px;color:#a4a092}.mode-card{width:100%;display:flex;text-align:left;gap:12px;align-items:center;padding:17px 12px;margin:0 0 10px;border:1px solid transparent;border-radius:5px;background:#eae6db88}.mode-card.selected{border-color:#a7ae97;background:#e6e8dd}.mode-icon{font-size:24px;color:#6d775d}.mode-card strong{display:block;font-weight:500;font-size:14px;margin-bottom:7px}.mode-card small{font-size:10px;color:#969486;white-space:nowrap}.mode-card i{font-style:normal;margin-left:auto;color:#6d775d;font-size:12px}.divider{height:1px;background:var(--line);margin:27px 0}.setting{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#797b6e;margin:20px 0}.setting input{appearance:none;width:29px;height:16px;background:#c7c6bb;border-radius:15px;cursor:pointer;position:relative}.setting input:checked{background:#778365}.setting input:after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#fffdf6;top:3px;left:3px;transition:.2s}.setting input:checked:after{left:16px}blockquote{border-top:1px solid var(--line);margin:28px 0 0;padding-top:28px;font:16px/2 'Noto Serif SC',serif;color:#93927f}blockquote small{display:block;font:10px Arial;margin:15px 0 0 22px;color:#aaa491}.mountains{height:120px;position:relative;overflow:hidden;opacity:.55;display:flex;align-items:end;justify-content:center;padding-bottom:8px}.mountains:before,.mountains:after{content:'';position:absolute;width:180px;height:80px;background:#b2b6a5;clip-path:polygon(0 90%,25% 38%,38% 60%,56% 8%,69% 36%,80% 28%,100% 100%);bottom:25px;left:0;opacity:.4}.mountains:after{left:70px;bottom:20px;background:#9ea88e;transform:scale(.8)}.mountains span{font:10px serif;letter-spacing:5px;color:#90977d}.game{min-width:0}.player{display:flex;align-items:center;gap:11px;padding:0 10px 15px}.avatar{height:38px;width:38px;border-radius:50%;display:grid;place-items:center;font:22px 'Noto Serif SC',serif;border:1px solid #b7b6a6;background:#e4e2d7}.avatar.red{background:#e9d8ca;color:var(--red);border-color:#ceab91}.player strong{font-size:12px;font-weight:500}.player small{display:block;font-size:9px;color:#929480;margin-top:6px}.tag{font-size:9px;padding:5px 8px;background:#e6e6dc;color:#919280;border-radius:3px;margin-left:auto}.red-tag{color:#a46755;background:#eee1d5}.clock{font:19px Georgia,serif;font-variant-numeric:tabular-nums;margin-left:3px;color:#656a59}.board-stage{position:relative;padding-bottom:23px}.board-frame{padding:26px 27px 30px;border:1px solid #b49467;border-radius:5px;background:linear-gradient(120deg,#d6b784,#e3c89c 50%,#ceb185);box-shadow:0 8px 0 #a78b60,0 11px 3px #78604435,14px 24px 35px #69533727,inset 0 0 0 5px #ead0a540,inset 0 0 30px #b3915e55}.board{position:relative;aspect-ratio:8/9;background:linear-gradient(110deg,#dfc494,#e9d3ac 45%,#e1c397);border:2px solid #8c754f;box-shadow:0 0 0 4px #d9bc8d,0 0 0 5px #9e8257,inset 0 0 30px #ab875b20}.board svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.board svg line{stroke:#94774f;stroke-width:1.6}.river{position:absolute;left:0;right:0;top:44.44%;height:11.11%;display:flex;align-items:center;justify-content:space-around;font:25px 'Noto Serif SC',serif;color:#95794f;pointer-events:none;letter-spacing:10px}#pieces{position:absolute;inset:0}.piece{position:absolute;z-index:2;width:10.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;font:600 clamp(17px,2vw,30px) 'Noto Serif SC',serif;padding:0;color:#444638;background:radial-gradient(circle at 34% 25%,#f8e8c4,#e5c790 75%,#c19b64);border:1px solid #a78352;box-shadow:0 4px 0 #ae8958,2px 7px 6px #60401c55,inset 0 0 0 3px #e6c795,inset 0 0 0 4px #b99a68;text-shadow:0 1px #fff3d6;transition:top .2s,left .2s,filter .2s}.piece.red{color:#a34531}.piece:hover{filter:brightness(1.08);z-index:4}.piece.chosen{outline:2px solid #8f4836;outline-offset:3px;transform:translate(-50%,-58%);z-index:5}.piece.last:after{content:'';width:5px;height:5px;background:#9e4b38;border-radius:50%;position:absolute;bottom:4px}.flat .piece{box-shadow:none;background:#eddbb8}.point{position:absolute;width:10%;height:9%;transform:translate(-50%,-50%);z-index:1}.point:after{content:'';display:block;margin:auto;background:#63734e8a;width:10px;height:10px;border-radius:50%}.point.capture{z-index:3;pointer-events:none;border:2px solid #a84a37;border-radius:50%;aspect-ratio:1;height:auto}.point.capture:after{display:none}.board-caption{display:block;text-align:center;font:9px serif;color:#9a967f;letter-spacing:5px;margin-top:19px}.red-player{padding-top:0;padding-bottom:17px}.board-actions{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:16px 0;color:#757b68;font-size:17px}.board-actions span{font-size:11px;margin-left:4px}.right{border:1px solid var(--line);border-radius:6px;background:#faf7ef77;overflow:hidden}.status-heading{padding:19px 17px;border-bottom:1px solid var(--line);font-size:11px}.status-heading strong{font-weight:500}.status-heading>span:last-child{float:right;font-size:10px;color:#939384}.turn-card{display:flex;gap:14px;padding:25px 18px 24px;background:linear-gradient(100deg,#eae6d9aa,transparent)}.turn-piece{width:48px;height:48px;border:1px solid #c4a17b;background:#ecdbc0;border-radius:50%;display:grid;place-items:center;font:29px 'Noto Serif SC',serif;color:var(--red);box-shadow:0 3px 0 #c9ab7d}.turn-card small{font-size:9px;color:#95917e}.turn-card h2{font:18px 'Noto Serif SC',serif;margin:5px 0 8px}.turn-card p{font-size:9px;color:#969281;margin:0}.record-head{padding:16px 17px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.record-head strong{font-weight:500;font-size:12px}.record-head span{font-size:9px;color:#a09d90}.record-cols,.record-row{display:grid;grid-template-columns:45px 1fr 1fr;text-align:center;padding:10px 12px;font-size:10px}.record-cols{background:#eae7dc88;color:#9b998b}.record-row{border-bottom:1px solid #e6e0d4;color:#686d59}.record-row button{font:inherit;padding:0}#records{height:210px;overflow:auto}.empty{text-align:center;padding:36px 0;color:#a6a28f}.empty>span{font:40px 'Noto Serif SC',serif;color:#c1b79f}.empty p{font-size:11px;letter-spacing:1px}.empty small{font-size:9px;color:#b2ad9d}.replay{display:flex;align-items:center;justify-content:space-around;border-top:1px solid var(--line);padding:8px;color:#90917e}.replay span{font-size:10px}.replay button{font-size:20px}.tip-box{margin:18px 15px;padding:17px 14px;background:#eaeadd;border-radius:4px}.tip-box>span{font-size:9px;letter-spacing:2px;color:#8c947a}.tip-box h3{font:14px 'Noto Serif SC',serif;margin:12px 0}.tip-box p{font-size:10px;color:#959783;line-height:1.9}.tip-box button{font-size:9px;color:#6c795d;padding:5px 0}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding:20px 0 25px;font-size:9px;color:#a7a18f;letter-spacing:1px}#toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);background:#424a3e;color:#f6edda;padding:13px 25px;border-radius:5px;z-index:20;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1}dialog{border:1px solid #bbab8d;border-radius:8px;background:var(--paper);color:var(--ink);max-width:480px;padding:30px;line-height:1.8}dialog::backdrop{background:#33372d77;backdrop-filter:blur(4px)}dialog h2{font:25px 'Noto Serif SC',serif}dialog p,dd{font-size:12px;color:#7e816f}dt{font-weight:600;font-size:13px;margin-top:15px}dd{margin:4px 0}#close-modal{float:right;font-size:25px}.small{font-size:10px;line-height:1.8;color:#8c907d}.wide,select{width:100%;padding:8px;border:1px solid var(--line);background:#f8f3e9;margin:4px 0;border-radius:4px;font-size:11px;color:#70755e}@media(min-width:1450px){main{max-width:1500px}.workspace{grid-template-columns:235px minmax(340px,1fr) 290px;gap:40px}.board-frame{padding:29px 32px 33px}}@media(max-width:1100px){header{gap:25px;padding:0 3%}.workspace{grid-template-columns:175px minmax(300px,1fr) 230px;gap:18px}main{padding:0 3%}.mode-card{padding:13px 8px;gap:8px}.mode-card small{font-size:8px}.mode-icon{font-size:19px}.tag{display:none}.board-frame{padding:23px}.turn-card{padding:20px 12px}h1{font-size:28px}}@media(max-width:850px){header{height:78px}.brand{font-size:23px}nav{gap:15px}.header-right{display:none}.workspace{grid-template-columns:minmax(300px,1fr) 240px}.left{display:none}.intro{padding:27px 0}.intro-mark{display:none}.piece{font-size:clamp(18px,3vw,29px)}.board-actions span{font-size:10px}}@media(max-width:600px){header{justify-content:space-between;gap:10px}.brand{font-size:21px;letter-spacing:3px}.brand-sub{font-size:7px;letter-spacing:1px}nav{gap:13px}nav button{font-size:11px}nav button:last-child{display:none}main{padding:0 5%}.intro{padding:25px 0}.eyebrow{font-size:8px}h1{font-size:25px;letter-spacing:1px}.intro p{font-size:10px;line-height:1.8}.workspace{display:flex;flex-direction:column;gap:22px}.game,.right{width:100%}.board-frame{padding:23px 22px 26px}.piece{font-size:clamp(20px,5.5vw,30px)}.river{font-size:22px;letter-spacing:6px}.player{padding-left:2px;padding-right:2px}.tag{display:block}.right{display:grid;grid-template-columns:1fr 1fr}.status-heading,.record-head,.record-cols,#records,.replay{grid-column:1/-1}.turn-card{grid-column:1/-1}.tip-box{grid-column:1/-1;margin-top:10px}#records{height:150px}.empty{padding:15px}.empty>span{font-size:25px}footer{font-size:8px;gap:18px;line-height:1.8}.left.study-visible{display:block;width:100%}.left.study-visible .label,.left.study-visible .mode-card,.left.study-visible .divider,.left.study-visible .setting,.left.study-visible blockquote,.left.study-visible .mountains{display:none}}

[hidden]{display:none!important}#computer-tools{padding:12px;background:#eae8dc;border:1px solid var(--line);border-radius:5px;margin-top:15px}#computer-tools label{display:block;margin-top:5px}#computer-tools select{padding:10px 6px}#computer-tools p{margin-bottom:0}@media(max-width:600px){nav{gap:9px}.brand-sub{display:none}.left.computer-visible{display:block;width:100%;padding:0}.left.computer-visible>*:not(#computer-tools){display:none}.left.computer-visible #computer-tools{display:grid;grid-template-columns:70px 1fr;gap:5px 8px;margin:0;padding:12px}.left.computer-visible #computer-tools label{align-self:center}.left.computer-visible #computer-tools p{grid-column:1/-1}.workspace{gap:18px}}

header{gap:35px}nav{gap:25px}.puzzle-item{width:100%;display:flex;justify-content:space-between;padding:12px 10px;border:1px solid var(--line);margin:6px 0;border-radius:4px;font-size:12px;text-align:left}.puzzle-item.selected{background:#e4e6d9;border-color:#a4ae92}.puzzle-item>span:last-child{color:#7b886b}#puzzle-tools{margin-top:20px}#puzzle-tools .label{margin-bottom:10px}#puzzle-challenge{padding:20px 17px;border-top:1px solid var(--line)}#puzzle-challenge h3{font:22px 'Noto Serif SC',serif;margin:10px 0 15px}#puzzle-goal{font-size:13px;line-height:1.8}#puzzle-feedback{font-size:12px;line-height:1.9;color:#92734e;background:#eee5d5;border-radius:4px;padding:12px}#puzzle-feedback.solved{color:#60744a;background:#e1e7d6}.puzzle-actions{display:flex;flex-wrap:wrap;gap:8px}.puzzle-actions button{font-size:11px;padding:8px 6px;border:1px solid #d4c9b6;border-radius:4px}.puzzle-mode .record-head,.puzzle-mode .record-cols,.puzzle-mode #records,.puzzle-mode .replay,.puzzle-mode .tip-box{display:none}#puzzle-help{font-size:12px;line-height:1.9}.puzzle-mode .turn-card{padding-bottom:18px}@media(max-width:1100px){header{gap:20px}nav{gap:15px}.header-right{gap:7px;font-size:10px}}@media(max-width:850px){header{gap:12px}nav{gap:12px}.left.puzzle-visible{display:block;grid-column:1/-1}.left.puzzle-visible>*:not(#puzzle-tools){display:none}#puzzle-tools{margin-top:0}#puzzle-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.puzzle-item{font-size:11px}.puzzle-mode #puzzle-challenge{grid-column:1/-1}}@media(max-width:600px){header{flex-wrap:wrap;height:auto;padding:14px 5% 0}.brand{font-size:21px}.seal{font-size:15px;line-height:17px}.brand-sub{display:none}nav{height:42px;width:100%;justify-content:space-between;gap:8px}nav button{font-size:11px}nav button:last-child{display:none}.left.puzzle-visible{width:100%;padding:0}#puzzle-list{grid-template-columns:repeat(2,1fr);gap:5px}.puzzle-item{margin:0}.left.puzzle-visible .label{display:flex}.puzzle-mode #puzzle-challenge{grid-column:1/-1}}
button:disabled{opacity:.45;cursor:default}@media(min-width:601px) and (max-width:850px){.left.computer-visible{display:block;grid-column:1/-1}.left.computer-visible>*:not(#computer-tools){display:none}.left.computer-visible #computer-tools{display:grid;grid-template-columns:70px 1fr 70px 1fr;gap:6px;margin:0;align-items:center}.left.computer-visible #computer-tools p{grid-column:1/-1}}