:root{font-family:PingFang SC,Microsoft YaHei,sans-serif;color:#263c36;background:#f5f3eb;font-synthesis:none;--green: #254c40;--line: #e2e3d8;--red: #a04736;--muted: #6d7c73;--serif: "Songti SC", SimSun, serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit;transition:background .15s}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #7d9e83;outline-offset:3px}a{color:inherit;text-decoration:none}.app-shell{max-width:1080px;margin:auto;padding:0 24px 16px}.header{height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:22px;font-weight:600}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;padding:4px}.text-button:hover{color:#568b68}main{padding-top:16px}.site-footer{padding-top:16px;text-align:center;font-size:12px;color:var(--muted)}.site-footer a:hover{text-decoration:underline}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:stretch;height:max(650px,calc(100dvh - 96px))}.play-area{border:1px solid #dedfd3;border-radius:10px;background:#fbfaf4;padding:14px 18px 10px}.board-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;min-height:24px}.small-title{font-size:12px;color:#6f7d6e}.board-tools{display:flex;gap:6px;align-items:center}.tool{font-size:11px;padding:5px 7px;border-radius:4px;color:#76856f}.tool:hover,.tool.active{background:#eaf0e3;color:#4b6d4f}.tool.icon{display:flex;padding:5px}.player-bar{display:flex;align-items:center;gap:8px;min-height:38px;margin:0 0 10px}.board-frame+.player-bar{margin:10px 0 0}.avatar{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#eed;border:1px solid #dedfce;font:19px var(--serif);color:#4a5546}.avatar.red{color:var(--red);background:#f6eadf;border-color:#ead8c6}.player-info strong{display:flex;align-items:center;font-size:12px;gap:7px;font-weight:500}.player-info small{background:#e9eddf;font-size:9px;padding:2px 4px;border-radius:3px;color:#6c8062}.player-info>span{display:block;font-size:10px;color:#99a08f;margin-top:4px}.playing-badge{margin-left:auto;font-size:10px;display:flex;gap:6px;align-items:center;white-space:nowrap;color:#63825d;background:#edf1e5;padding:4px 7px;border-radius:4px}.playing-badge>span{width:4px;height:4px;background:#769164;border-radius:50%}.board-frame{padding:11px 12px 2px;border-radius:8px;border:1px solid #d8cbae;background:#e9ddc2;box-shadow:inset 0 0 0 4px #e6d8bb}.board{aspect-ratio:9/10;position:relative;background:radial-gradient(ellipse at 45% 20%,#f3e9cf,#eee0bd 80%);border:1px solid #cfbf9e;border-radius:3px}.grid-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.grid-wrap.flipped{transform:rotate(180deg)}.grid{display:block;width:100%;height:100%;stroke:#ab946c;stroke-width:1.35;fill:none}.grid .river{stroke:none;fill:#aa946f;font:30px var(--serif);text-anchor:middle;letter-spacing:14px}.cell{position:absolute;width:10.6%;height:9.5%;transform:translate(-50%,-50%)!important;padding:0;display:grid;place-items:center;opacity:1!important;border-radius:50%;z-index:1}.cell.occupied{z-index:2}.cell:focus-visible{outline-offset:0}.piece{position:relative;display:grid;place-items:center;width:89%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 24%,#fcf0cf,#efdeaf 70%,#dec38e);border:1px solid #c3a572;box-shadow:0 2px 1px #a5885c,0 4px 5px #64593230,inset 0 0 0 2px #f8e6bb,inset 0 0 0 3px #c4ad79;transition:box-shadow .15s,transform .15s;color:#465246}.piece.red{color:#a04634}.piece-ring{position:absolute;top:12%;right:12%;bottom:12%;left:12%;border:1.2px solid currentColor;border-radius:50%;opacity:.65}.piece-text{font:600 clamp(18px,2.5vw,30px)/1 var(--serif);padding-bottom:2px;z-index:1}.piece.hidden{background:#496659;border:1px solid #365142;box-shadow:0 2px 2px #31493635}.selected .piece{box-shadow:0 0 0 3px #fbf5dc,0 0 0 5px #527b56,0 4px 6px #0003;transform:translateY(-2px)}.legal.capture-target,.legal .capture-target{box-shadow:0 0 0 3px #9f543b80}.move-dot{width:20%;aspect-ratio:1;border-radius:50%;background:#52785380;box-shadow:0 0 0 5px #52785315}.last-dot{width:10%;aspect-ratio:1;background:#aa765080;border-radius:2px}.recent .piece:not(.capture-target){outline:2px solid #b18c5780;outline-offset:2px}.file-labels{display:flex;justify-content:space-around;font-size:9px;color:#a49373;padding:5px 0 2px}.piece.hidden:after{content:"";position:absolute;top:16%;right:16%;bottom:16%;left:16%;border-radius:50%;border:1px solid #2c4b3b;box-shadow:0 1px #adc1a147,inset 0 1px 1px #203d2c66;pointer-events:none}.board-frame{width:min(100%,calc((100dvh - 320px)*.9 + 28px));margin:0 auto}.board-caption{font-size:11px;color:#7b8970;text-align:center;margin-top:9px;min-height:16px}.sidebar{display:flex;flex-direction:column;gap:16px;min-height:0}.panel{background:#fcfbf6;border:1px solid #e1e2d6;border-radius:10px;padding:18px}h2{font-size:14px;font-weight:600;margin:0 0 15px}.mode-options{display:flex;gap:5px;margin-bottom:15px}.mode-card{flex:1;padding:10px 3px;border:1px solid #e0e4d6;border-radius:5px;font-size:12px;white-space:nowrap}.mode-card:hover{background:#f0f2e9}.mode-card.chosen{background:#e7eddf;color:#34583c;border-color:#9baa8c}.field-label{display:block;font-size:11px;color:#75806e;margin-bottom:8px}input,select{width:100%;height:37px;border:1px solid #e2e3d6;border-radius:5px;background:#f7f7ef;color:#314d3e;padding:0 10px;font-size:12px}input::placeholder{color:#a4ab97}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.setting-row select{width:168px}.rule-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;margin:12px 0 0;padding:0;min-width:0}.rule-settings legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.rule-settings .setting-row{flex-direction:column;align-items:stretch;gap:6px}.rule-settings .setting-row label{font-size:11px;color:#586c60}.rule-settings select{width:100%;min-width:0;padding-left:8px;padding-right:3px}.rule-note,.current-rules{color:#586c60;line-height:1.6}.side-picker{display:flex;margin-top:10px;border:1px solid #dfe3d4;border-radius:5px;overflow:hidden}.side-picker button{flex:1;padding:8px;font-size:11px;color:#8a957f}.side-picker .picked{background:#e7eddd;color:#4b6e49}.setup-note{margin:8px 0 0;font-size:10px;color:#859277}.primary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#f6f4e7;min-height:39px;border-radius:5px;font-size:12px;margin-top:13px}.primary:hover:not(:disabled){background:#36644e}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #dadfce;border-radius:5px;font-size:11px;min-height:34px;padding:7px 12px;background:#f4f6ec;white-space:nowrap}.secondary:hover{background:#e9efdf}.full{width:100%;margin-top:13px}.join-row{display:flex;gap:8px;margin-top:10px}.join-row input{min-width:0;letter-spacing:1px}.resume{display:flex;margin:12px auto 0;color:#7f9073;font-size:11px}.current-game{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.status-row{display:flex;align-items:center;justify-content:space-between;gap:7px}.game-status{display:flex;gap:7px;align-items:center;font-size:13px;margin:0;font-weight:500}.turn-stone{height:11px;width:11px;border-radius:50%;background:#536556;border:2px solid #d2ddc6;box-shadow:0 0 0 1px #98ab89}.turn-stone.red{background:#ad5f46;border-color:#f0dcc0;box-shadow:0 0 0 1px #bf9476}.connection{display:flex;align-items:center;gap:4px;font-size:10px;color:#a98b6b;white-space:nowrap}.connection.ok{color:#71896b}.game-sub{font-size:11px;color:#849477;line-height:1.6;margin:9px 0 0}.room-invite{display:flex;justify-content:space-between;align-items:center;background:#f2f3e8;border-radius:5px;padding:8px 10px;margin-top:10px}.room-invite>span{font-size:10px;color:#839174}.room-invite strong{font-family:monospace;font-size:14px;letter-spacing:1px;color:#5d7451}.room-invite .secondary{background:#fffefa;font-size:10px;padding:6px 8px}.resign{margin-top:12px;color:#947865;font-size:11px}.history-panel{display:flex;flex-direction:column;flex:1;min-height:130px}.panel-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-row h2{margin:0}.panel-row>span{font-size:11px;color:#94a083}.history{flex:1;min-height:0;height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#ced7bd transparent}.history-entry{display:flex;align-items:flex-start;gap:9px;font-size:11px;padding:10px 0;border-bottom:1px solid #efefe5}.move-number{font-size:10px;font-family:monospace;color:#a3ad97;margin-top:2px}.history-side{font-size:9px;background:#e9eee2;color:#687760;white-space:nowrap;padding:3px 4px;border-radius:3px}.history-side.red{color:#a87b60;background:#f5ebe0}.history-entry strong{font-size:11px;font-weight:400;color:#69775c}.history-entry strong>span{color:#a2aa96;margin:0 3px}.history-entry small{display:block;font-size:10px;color:#89977e;margin-top:5px}.empty-history{display:flex;align-items:center;justify-content:center;height:100%;font-size:12px;color:#a6af99}.export{color:#87997a;font-size:11px;border-top:1px solid #e9ebdf;width:100%;padding-top:12px;margin-top:8px}.error{display:flex;align-items:flex-start;gap:8px;padding:10px;margin-top:12px;border:1px solid #e9cfc0;border-radius:5px;background:#fff3e9;color:#a16952;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.error button{padding:2px;display:flex;margin-left:auto;flex-shrink:0}.spin{animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:13px 20px;background:#284b3f;color:#f7f4e6;border-radius:7px;font-size:12px;z-index:20}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#293c345c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:30}.modal{position:relative;background:#fbfaf2;max-width:540px;width:100%;max-height:90vh;overflow:auto;border-radius:10px;padding:28px}.modal-close{position:absolute;right:12px;top:12px;display:flex;padding:5px;color:#89977b}.modal h2{font-size:20px;margin-bottom:20px}.modal>p{font-size:13px;line-height:1.8;color:#8c977e}.rules-list{padding-left:20px;display:flex;flex-direction:column;gap:16px}.rules-list li{padding-left:5px;color:#6c7f5d}.rules-list strong{font-size:13px;font-weight:500}.rules-list p{font-size:11px;line-height:1.9;margin:6px 0 0;color:#89977e}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-actions .primary{width:auto;margin:0;padding:0 20px}.captured-panel{flex-shrink:0;padding-top:14px;padding-bottom:14px}.capture-tray{display:grid;grid-template-columns:60px minmax(0,1fr) 30px;gap:8px;align-items:start;padding-top:9px}.capture-tray+.capture-tray{border-top:1px solid #eeeee3;margin-top:9px}.capture-tray h3{font-size:11px;font-weight:500;color:#78846c;margin:6px 0 0}.capture-list{display:flex;gap:6px;flex-wrap:wrap}.capture-list.expanded{max-height:160px;overflow:auto;scrollbar-width:thin;padding-right:3px}.capture-more{display:grid;place-items:center;width:30px;height:34px;border:1px solid #dce2d2;border-radius:5px;background:#f3f5eb;color:#677c5c;font-size:21px;line-height:1}.capture-more:hover:not(:disabled),.capture-more[aria-expanded=true]{background:#e6eddc;border-color:#abbc9b}.captured-token{display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:5px;background:#f2f0e6;border:1px solid transparent}.captured-token.latest{border-color:#b6c4a6;background:#edf1e4}.captured-stone{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid #cbb68e;background:#f3e5c2;color:#445144;font:600 19px var(--serif);box-shadow:inset 0 0 0 2px #f9edcf}.captured-stone.red{color:var(--red)}.captured-stone.hidden{position:relative;background:#496659;border-color:#365142;box-shadow:none}.captured-stone.hidden:after{content:"";position:absolute;top:16%;right:16%;bottom:16%;left:16%;border-radius:50%;border:1px solid #2c4b3b;box-shadow:0 1px #adc1a147}.capture-identity{font-size:10px;white-space:nowrap}.capture-identity small{display:block;color:#9b7252;font-size:9px;margin-top:1px}.capture-empty{font-size:11px;color:#a1aa94;padding:6px 0}.result-backdrop{background:#152b2696;z-index:40}.result-card{position:relative;width:min(100%,510px);padding:52px 25px 34px;text-align:center;background:radial-gradient(ellipse at center,#fff8e6,#f1e8d5);border:1px solid #d4bc8b;border-radius:8px;box-shadow:0 18px 80px #14282266,inset 0 0 0 7px #f8f0df;animation:result-in .35s ease-out}.result-card.mate-result{padding:68px 28px 58px}.mate-title,.victory-title{margin:0}.mate-title img,.victory-title img{display:block;width:min(100%,420px);height:auto;margin:0 auto}.result-card>p{font-size:12px;color:#847858;margin:12px 0 25px}.result-review{min-width:140px;background:#fbf6e9}@keyframes result-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:1000px){.app-shell{padding:0 18px 16px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:16px}.play-area{padding:12px}}@media(max-width:700px){.app-shell{padding:0 12px 12px}.header{height:52px}.brand{font-size:20px}main{padding-top:12px}.workspace{display:flex;flex-direction:column;gap:12px;height:auto}.play-area{padding:12px}.board-frame{width:100%}.piece-text{font-size:clamp(19px,5.5vw,34px)}.sidebar{gap:12px}.panel{padding:16px}.history{flex:auto;height:200px}.history-panel{min-height:270px}.modal{padding:25px 22px}.toast{max-width:90vw;font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}.online-setup details{margin-top:12px;color:var(--muted);font-size:12px}.online-setup summary{cursor:pointer;padding:4px 0}.online-setup details input,.invite-url,.recovery-box input{width:100%;min-width:0;box-sizing:border-box}.online-setup details .field-label{margin-top:12px}.online-setup details .full,.recovery-box .full{margin-top:8px}.invite-url{margin-top:10px;font-size:12px}.share-address{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:12px}.share-address select{width:100%;min-width:0}.recovery-box{margin-top:8px}.recovery-box small{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:6px}@media(min-width:701px){.sidebar{gap:12px}.mode-panel,.history-panel{padding:14px}.history-panel{padding-top:12px;padding-bottom:12px}.history-panel .panel-row{margin-bottom:6px}.history-panel .history-entry{padding-top:8px;padding-bottom:8px}.history-panel .export{padding-top:8px;margin-top:4px}.mode-panel h2,.mode-panel .mode-options{margin-bottom:12px}.mode-panel .mode-card{padding-top:8px;padding-bottom:8px}.mode-panel .primary{margin-top:10px}.mode-panel .current-game{margin-top:12px;padding-top:12px}.mode-panel .game-sub{margin-top:6px}.captured-panel{padding:12px 14px}.captured-panel .panel-row{margin-bottom:6px}.capture-more{height:28px}.capture-tray h3{margin-top:4px}}