:root{--paper:#f7f8f4;--ink:#293b33;--muted:#899088;--green:#24483e;--green-light:#edf2ec;--line:#e5e8df;--red:#aa443b;--gold:#af8b50;--serif:"STKaiti","KaiTi","Noto Serif SC","Songti SC",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible{outline:3px solid #b09562;outline-offset:4px}input:focus,select:focus{outline:2px solid #a3b9a7;outline-offset:1px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}svg{display:block}button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;max-width:1440px;margin:auto;padding:0 56px;gap:64px}.brand{display:flex;align-items:center;gap:12px}.brand-name{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:4px}.brand-caption{display:block;margin-top:3px;font-family:var(--sans);font-size:8px;font-weight:400;letter-spacing:2px;color:#92988e}.site-header nav{height:100%;display:flex;align-items:center;gap:35px;font-size:13px}.nav-current{height:100%;display:flex;align-items:center;border-bottom:2px solid var(--green);font-weight:600}.nav-link{padding:8px 0;background:none;border:0;color:#858d83}.nav-link span{margin-left:8px}.header-tag{margin-left:auto;font-size:11px;letter-spacing:1px;color:#7e877b;display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:#75947b;flex-shrink:0}main{max-width:1440px;margin:0 auto;padding:0 56px}.intro{display:flex;align-items:center;justify-content:space-between;padding:42px 0 34px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#82907d;margin:0 0 14px;display:flex;align-items:center;gap:8px}.eyebrow>span{width:20px;height:1px;background:#8f9d82}h1{font-family:var(--serif);font-size:35px;font-weight:500;letter-spacing:3px;line-height:1.4;margin:0}h1 span{color:#6b7b67}.intro-description{font-size:12px;color:#899185;margin:13px 0 0;letter-spacing:.8px}.intro-seal{border:1.5px solid #aa6b5a;border-radius:3px;padding:6px 8px;color:#aa6b5a;transform:rotate(-7deg);font-family:var(--serif);font-size:20px;line-height:1.2;letter-spacing:4px;margin-right:16px;opacity:.75}.intro-seal span{display:block}
.game-layout{display:grid;grid-template-columns:252px minmax(350px,540px) minmax(215px,1fr);gap:30px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px 20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:21px}.panel h2{font-size:14px;margin:0;font-weight:600;letter-spacing:1px}.small-label{font-size:8px;letter-spacing:1.3px;color:#9da495}.mode-tabs{display:flex;background:#f1f3ed;border-radius:7px;padding:4px;gap:3px;margin-bottom:24px}.mode-tab{display:flex;gap:5px;align-items:center;justify-content:center;padding:10px 5px;font-size:12px;width:50%;border:0;background:none;color:#81897d;border-radius:5px;white-space:nowrap}.mode-tab.active{background:#fff;color:var(--green);font-weight:600;box-shadow:0 1px 5px #223b3110}.mode-tab svg{width:16px;height:16px}.field-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;margin:20px 0 12px}.field-hint{font-size:9px;font-weight:400;color:#929a8d}.difficulty-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.difficulty{display:grid;grid-template-columns:21px 1fr;grid-template-rows:23px 19px;padding:12px 11px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:7px;transition:background .2s,border-color .2s}.difficulty:hover{border-color:#adbdad}.difficulty.selected{border-color:#72917b;background:#f0f4ee}.difficulty-icon{font-family:Georgia,serif;font-size:16px;color:#a3ad9d;grid-row:1/3;align-self:center}.difficulty.selected .difficulty-icon{color:var(--green)}.difficulty strong{font-size:12px;font-weight:500;align-self:center}.difficulty small{font-size:9px;color:#97a08e;align-self:center}.select-wrap{position:relative}.select-wrap span{position:absolute;right:13px;top:9px;color:#8e9788;pointer-events:none}select,input{width:100%;border:1px solid var(--line);border-radius:6px;background:#fafbf8;padding:11px 12px;color:#4c5c48;font-size:12px}select{appearance:none;padding-right:28px}input::placeholder{color:#a3a99d}.button{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:6px;padding:10px 15px;border:1px solid transparent;font-size:12px;transition:background .15s,transform .15s}.button:not(:disabled):active{transform:translateY(1px)}.primary{background:var(--green);border-color:var(--green);color:#fff}.primary:hover:not(:disabled){background:#365e4e}.secondary{background:#fff;border-color:#dfe5d9;color:#6b7965}.secondary:hover:not(:disabled){background:#eef2ea}.full{width:100%}#new-game,#create-room{margin-top:23px}#join-room{margin-top:10px}#new-game>span{font-size:17px}.settings-note{text-align:center;color:#a0a695;font-size:9px;margin:12px 0 0}.tip-card{display:flex;gap:12px;margin-top:17px;padding:20px 17px;background:#eef1e8;border:1px solid #e6ebde;border-radius:10px}.tip-icon{flex-shrink:0;font-family:var(--serif);font-size:18px;width:31px;height:33px;display:grid;place-items:center;background:#e4eadb;border-radius:7px;color:#81906b}.tip-card h3{margin:1px 0 7px;font-size:11px;font-weight:500;color:#69775d}.tip-card p{font-size:10px;line-height:1.9;margin:0;color:#929a86}.local-note{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:19px;color:#a0a795;font-size:10px}.local-note svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5}.divider-label{position:relative;text-align:center;margin:24px 0 18px;font-size:10px;color:#9aa38f}.divider-label::before{position:absolute;content:"";left:0;right:0;top:50%;height:1px;background:var(--line)}.divider-label span{position:relative;background:white;padding:0 9px}.code-input{text-transform:uppercase;letter-spacing:2px}.room-info{border-top:1px solid var(--line);margin-top:19px}.room-code-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}.room-code-row strong{font-family:monospace;font-size:22px;letter-spacing:2px;color:var(--green)}.text-button{background:none;border:0;padding:8px 0;color:#6f8166;font-size:11px}.text-button:hover{text-decoration:underline}.room-info p{color:var(--muted);font-size:10px;line-height:1.7}.leave-room{display:block;margin:8px auto 0}#connection-status{font-weight:400;color:#81977b;font-size:10px}
.board-column{min-width:0}.player-bar{display:flex;align-items:center;gap:11px;padding:1px 4px}.opponent-bar{margin-bottom:16px}.self-bar{margin-top:17px}.player-avatar{width:39px;height:39px;display:grid;place-items:center;flex-shrink:0;border-radius:9px;font-family:var(--serif);font-size:22px;border:1px solid #dce3d6}.black-avatar{background:#e7ece3;color:#466047}.red-avatar{background:#f3e6df;color:#b76754;border-color:#eadad1}.player-identity strong{display:block;font-size:12px;font-weight:500;max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player-identity>span{display:block;font-size:9px;color:#9a9f92;margin-top:5px;letter-spacing:.5px}.player-indicator{margin-left:auto;font-size:10px;color:#a1a698;background:#edf0e9;padding:5px 9px;border-radius:4px;white-space:nowrap}.player-indicator.is-turn{background:#e8efe1;color:#648150}.player-indicator.thinking{animation:thinking 1.2s ease-in-out infinite}.you-label{font-size:8px;background:#edf0e7;color:#8d9980;border-radius:3px;margin-left:5px;padding:1px 4px}.board-frame{position:relative;overflow:hidden;border-radius:9px;padding:9px;background:linear-gradient(135deg,#d7b685,#e3c79b 45%,#d0b180);box-shadow:0 10px 26px #5d492714,0 2px 5px #78614418;border:1px solid #caae80}.board{position:relative;aspect-ratio:9/10;border:1px solid #b99c6a;background:repeating-linear-gradient(3deg,transparent 0,transparent 7px,#a4752b05 8px,transparent 9px),linear-gradient(110deg,#eed8ae,#f2dfb9 48%,#e9d1a3);border-radius:3px;user-select:none}.board-lines{position:absolute;width:100%;height:100%;inset:0}.board-lines .grid-line{fill:none;stroke:#927746;stroke-width:1.1}.board-lines .outer-line{fill:none;stroke:#8a7145;stroke-width:2.2}.board-lines .river-label{font-family:var(--serif);font-size:27px;letter-spacing:10px;fill:#967b4a}.board-lines .coordinate{font-size:12px;fill:#b19664;font-family:var(--serif)}.pieces{position:absolute;inset:0}.square{position:absolute;width:9.25%;height:8.33%;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;background:none;border-radius:50%;touch-action:manipulation}.square:not(.has-piece){border-radius:6px}.square.has-piece .chess-piece{display:grid;place-items:center;width:92%;height:92%;border-radius:50%;font-family:var(--serif);font-size:clamp(19px,2.25vw,33px);font-weight:600;line-height:1;border:1.5px solid #d2b883;background:radial-gradient(circle at 35% 28%,#fff2d2 5%,#f3dfb2 68%,#d8b780 100%);box-shadow:0 3px 1px #a8864c,0 4px 5px #7152234d,inset 0 0 0 3px #f8e6c1,inset 0 0 0 4px #d0ae7270;position:relative;z-index:2;text-shadow:0 1px 0 #fff9e5}.square.red .chess-piece{color:#a74535}.square.black .chess-piece{color:#37483c}.square.has-piece:hover .chess-piece{filter:brightness(1.05)}.square.selected .chess-piece{outline:3px solid #567958;outline-offset:3px;transform:translateY(-2px);box-shadow:0 5px 1px #a8864c,0 7px 10px #71522350,inset 0 0 0 3px #f8e6c1,inset 0 0 0 4px #d0ae7270}.square.last-move::before{content:"";position:absolute;inset:-5%;border:1px solid #536d4370;background:#6c805b20;border-radius:5px}.square.legal:not(.has-piece)::after{content:"";width:23%;height:23%;border-radius:50%;background:#4f755c99;box-shadow:0 0 0 5px #4f755c12}.square.legal.has-piece::after{content:"";position:absolute;inset:-7%;border:2px dashed #ac6d45;border-radius:50%;z-index:3}.square.checked .chess-piece{outline:3px solid #bb5747;outline-offset:2px}.square:focus-visible{outline:2px solid #3f614b;outline-offset:3px;z-index:5}.board-message{position:absolute;z-index:6;left:30px;right:30px;top:47%;padding:15px 17px;text-align:center;background:#fbf7e9ed;border:1px solid #cdb58a;color:var(--green);font-family:var(--serif);font-size:21px;box-shadow:0 5px 25px #49341522;border-radius:5px;pointer-events:none}.board-toolbar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:14px 2px;margin-top:17px}.turn-status{display:flex;align-items:center;gap:7px;font-size:11px;color:#808e76}.turn-status.check{color:var(--red)}.turn-status.check .status-dot{background:var(--red)}.board-options{display:flex;gap:6px}.icon-button{background:none;border:0;min-width:28px;min-height:28px;display:grid;place-items:center;color:#929d88;border-radius:5px}.icon-button:hover{background:#e8ede1}.icon-button[aria-pressed=true]{color:var(--green);background:#e9eee4}.icon-button svg{width:16px;height:16px}
.badge{font-size:9px;font-weight:400;color:#7d9071;background:#edf2e8;padding:5px 7px;border-radius:4px;white-space:nowrap}.match-stats{display:grid;grid-template-columns:1fr 1fr;margin:0 0 19px}.match-stats>div{display:flex;align-items:center;flex-direction:column;gap:7px}.match-stats>div+div{border-left:1px solid var(--line)}.match-stats span{font-family:Georgia,serif;font-size:31px;color:#4b6248;line-height:1}.match-stats small{font-size:9px;color:#a0a794}.captured-section{border-top:1px solid var(--line);padding-top:16px}.captured-heading{display:flex;justify-content:space-between;font-size:10px;color:#8b957f}.captured-heading small{font-size:9px;color:#a1a994}.captured-pieces{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:28px;margin-top:6px;margin-bottom:13px}.captured-pieces:last-child{margin-bottom:0}.empty-captures{color:#bcc3b4;font-size:12px}.captured-piece{width:22px;height:22px;font-family:var(--serif);display:grid;place-items:center;border:1px solid #ddd4ba;border-radius:50%;font-size:14px;background:#f5efdf;color:#5c6950}.captured-piece.red{color:#aa6251}.history-panel{margin-top:17px;padding-bottom:0;overflow:hidden}.history-panel .panel-heading{margin-bottom:15px}.history-head{display:grid;grid-template-columns:33px 1fr 1fr;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:9px;color:#9ba38f}.history-head>span:not(:first-child){display:flex;align-items:center;gap:5px;padding-left:8px}.side-dot{width:5px;height:5px;display:inline-block;border-radius:50%}.red-dot{background:#b47963}.black-dot{background:#738467}.history-scroll{height:211px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d7decb transparent}.history-empty{text-align:center;padding:38px 0}.history-empty>div{font-family:var(--serif);font-size:30px;color:#c5cdb9}.history-empty p{font-size:11px;color:#9da88f;margin:12px 0 7px}.history-empty>span{font-size:9px;color:#b1b9a5}.move-history{list-style:none;margin:0;padding:4px 0}.move-history li{display:grid;grid-template-columns:33px 1fr 1fr;align-items:center;min-height:31px;font-size:11px;border-radius:3px}.move-history li:nth-child(even){background:#f7f9f2}.move-history li>span:first-child{color:#a7b098;font-family:Georgia,serif;padding-left:3px;font-size:10px}.move-history li>span:nth-child(2){color:#a06754;padding-left:8px}.move-history li>span:nth-child(3){color:#627456;padding-left:8px}.move-history li:last-child{background:#edf2e5}.action-row{display:flex;gap:11px;margin-top:17px}.action-row .button{flex:1}.action-row svg{width:13px;height:13px}.match-footnote{text-align:center;font-size:10px;color:#a9b09d;letter-spacing:1px;margin-top:18px}#rematch{margin-top:12px}.draw-prompt{margin-top:14px;border:1px solid #d7dfc9;border-radius:8px;padding:12px;background:#edf2e6}.draw-prompt p{font-size:11px;line-height:1.6;margin:0 0 10px}.draw-prompt>div{display:flex;gap:8px}.draw-prompt button{font-size:10px;padding:8px;flex:1}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding:23px 0 26px;color:#aab09f;font-size:9px;letter-spacing:1px}footer>span:last-child{font-size:8px;letter-spacing:1.4px}.footer-separator{padding:0 10px;color:#c2c8b8}.dialog{color:var(--ink);border:1px solid #e0e5d5;border-radius:16px;padding:30px;background:#fafbf6;box-shadow:0 20px 100px #15291e30;width:min(620px,calc(100% - 32px));max-height:85vh}.dialog::backdrop{background:#1c302954;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:22px}.dialog-heading h2,.confirm-dialog h2{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:1px;margin:0}.dialog-heading .eyebrow{font-size:9px;margin-bottom:9px}.dialog-heading .icon-button{font-size:25px}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 25px}.rules-grid strong{font-family:var(--serif);font-size:18px;color:#55704c;font-weight:500}.rules-grid p,.rules-notice p{font-size:11px;line-height:1.9;color:#8b9680;margin:7px 0 0}.rules-notice{border-top:1px solid var(--line);margin-top:21px;padding-top:17px}.rules-notice strong{font-size:12px;font-weight:500}.confirm-dialog{max-width:400px}.confirm-dialog>p{line-height:1.9;font-size:12px;color:#8b957f;margin:18px 0 24px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.toast{position:fixed;z-index:50;bottom:32px;left:50%;transform:translateX(-50%);background:#29483df2;color:#f3f4eb;padding:13px 23px;max-width:calc(100% - 36px);border-radius:8px;font-size:12px;line-height:1.7;box-shadow:0 5px 25px #152d2830}.no-script{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);font-size:22px}.pending .square{cursor:wait}@keyframes thinking{50%{opacity:.45}}
@media(min-width:1450px){.square.has-piece .chess-piece{font-size:33px}}
@media(max-width:1200px){.site-header{padding:0 32px;gap:40px}main{padding:0 32px}.game-layout{grid-template-columns:221px minmax(320px,1fr) 208px;gap:20px}.panel{padding:19px 16px}.field-hint{font-size:8px}.difficulty{padding:10px 8px;grid-template-columns:20px 1fr}.history-panel{padding-bottom:0}.square.has-piece .chess-piece{font-size:clamp(19px,2.4vw,30px)}.small-label{font-size:7px;letter-spacing:1px}.history-head,.move-history li{grid-template-columns:26px 1fr 1fr}.move-history li{font-size:10px}.player-identity strong{max-width:160px}.intro{padding-top:34px}h1{font-size:31px}}
@media(max-width:1000px){.game-layout{grid-template-columns:220px minmax(300px,540px);justify-content:center;gap:22px}.details-column{grid-column:1/3;display:grid;grid-template-columns:220px 1fr;gap:17px 22px;align-items:start}.history-panel{margin:0}.history-scroll{height:165px}.match-panel{grid-row:1/4}.action-row{margin:0}.match-footnote{margin:0}#offer-draw,#rematch,.draw-prompt{grid-column:2;margin:0}.square.has-piece .chess-piece{font-size:clamp(22px,3.2vw,33px)}.header-tag{font-size:10px}.intro-seal{display:none}.intro{max-width:782px;margin:auto}.site-header{height:78px}.match-stats{margin-bottom:17px}.player-identity strong{max-width:250px}}
@media(max-width:650px){.site-header{height:70px;padding:0 20px;gap:0;justify-content:space-between}.brand img{width:35px;height:35px}.brand-name{font-size:23px}.brand-caption{font-size:7px;letter-spacing:1.5px}.site-header nav{gap:20px;font-size:11px}.header-tag{display:none}main{padding:0 16px}.intro{padding:26px 4px 24px}.eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:10px}h1{font-size:27px;letter-spacing:2px}.intro-description{font-size:10px;letter-spacing:.2px;line-height:1.8;margin-top:8px}.game-layout{display:flex;flex-direction:column;gap:22px}.settings-column,.board-column,.details-column{width:100%}.setup-panel{padding:16px;border-radius:10px}.panel-heading{margin-bottom:15px}.setup-panel .panel-heading{margin-bottom:12px}.mode-tabs{margin-bottom:12px}.difficulty-grid{grid-template-columns:repeat(4,1fr);gap:7px}.difficulty{padding:9px 5px;text-align:center;display:flex;flex-direction:column;gap:4px}.difficulty-icon{font-size:14px}.difficulty strong{font-size:11px}.difficulty small{font-size:8px}.field-heading{margin:12px 0 9px}.field-hint{font-size:9px}.difficulty+label{display:inline}.select-wrap{width:43%;display:inline-block;vertical-align:middle}#ai-settings>label{display:none}#new-game{display:inline-flex;width:calc(57% - 10px);margin-left:10px;margin-top:12px;vertical-align:middle}.settings-note{margin-top:9px;font-size:8px}.tip-card,.local-note{display:none}.opponent-bar{margin-bottom:12px}.self-bar{margin-top:13px}.board-frame{padding:7px;border-radius:8px}.square.has-piece .chess-piece{font-size:clamp(19px,6.2vw,34px)}.board-toolbar{margin-top:13px;padding-bottom:0}.details-column{display:grid;grid-template-columns:1fr 1.15fr;gap:14px}.panel{padding:17px 13px}.details-column .panel-heading{gap:5px}.details-column .panel h2{font-size:12px}.badge{font-size:8px;padding:4px 5px}.history-panel{padding-bottom:0;grid-row:1/3;grid-column:2}.match-panel{grid-row:1}.history-scroll{height:218px}.action-row{gap:7px;grid-column:1}.action-row .button{padding:9px 5px;font-size:10px}.match-stats span{font-size:26px}.match-stats small{font-size:8px}.captured-piece{width:18px;height:18px;font-size:12px}.captured-heading{font-size:9px}.captured-pieces{gap:3px}.match-footnote{grid-column:1/3}#offer-draw,#rematch,.draw-prompt{grid-column:1/3}footer{margin-top:23px;padding:20px 3px;line-height:1.9;gap:10px;font-size:8px}footer>span:last-child{font-size:6px;letter-spacing:.5px;max-width:104px;text-align:right}.history-head,.move-history li{grid-template-columns:22px 1fr 1fr}.move-history li{font-size:10px}.history-head>span:not(:first-child),.move-history li>span:nth-child(2),.move-history li>span:nth-child(3){padding-left:4px}.history-empty{padding:55px 0}.history-empty p{font-size:10px}.history-empty>span{font-size:8px}.rules-grid{gap:16px}.dialog{padding:24px}.dialog-heading h2{font-size:23px}.board-message{font-size:19px;left:20px;right:20px}.room-info{margin-top:14px}.room-code-row{justify-content:flex-start;gap:18px}#create-room{margin-top:14px}.divider-label{margin:18px 0 14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}