:root{--board-surface: linear-gradient(135deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)), #e8dcc3;--board-border: 1px solid #c3b292;--board-radius: clamp(18px, 3vw, 30px);--board-shadow: 0 18px 50px rgba(70, 57, 35, .12);--board-line-color: rgba(75, 65, 49, .45);--board-line-width: .7;--board-piece-color: #24231f;--board-piece-font: "STSong", "SimSun", serif;--board-piece-background: #f8edcf;--board-piece-border: 3px solid #5f574b;--board-piece-radius: 50%;--board-piece-shadow: 0 5px 11px rgba(60, 48, 30, .22);--board-covered-color: #6a604f;--board-covered-background: repeating-linear-gradient(45deg, #ded0af 0, #ded0af 6px, #d3c29c 6px, #d3c29c 12px);--board-red-color: #a93631;--board-red-border: #d94a43;--board-blue-color: #255cb8;--board-blue-border: #3978e8;--board-black-color: #24231f;--board-black-border: #5f574b;--board-selected-outline: 5px solid rgba(79, 125, 74, .36);--board-selected-outline-offset: 3px;--board-selected-lift: -2px;--board-selected-scale: 1.035;--board-empty-background: rgba(255, 253, 247, .46);--board-empty-border: 1px dashed rgba(75, 65, 49, .38);--board-empty-hover-background: rgba(255, 253, 247, .78)}:root{color-scheme:light;font-family:Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;color:#24231f;background:#f4efe2;font-synthesis:none;--paper: #fffdf7;--paper-strong: #f8f3e7;--ink: #24231f;--muted: #746e61;--line: #d2c8b5;--line-strong: #aaa08f;--red: #d94a43;--red-dark: #a93631;--blue: #3978e8;--blue-dark: #255cb8;--shadow: 0 18px 50px rgba(70, 57, 35, .12)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:280px;background:radial-gradient(circle at 10% 0%,rgba(217,74,67,.08),transparent 32rem),radial-gradient(circle at 100% 15%,rgba(57,120,232,.08),transparent 34rem),#f4efe2}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.52}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}a{color:inherit;text-decoration:none}.tabletop-shell{width:min(100% - 48px,1040px);margin:auto}.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-weight:750;font-size:18px}.brand-mark{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font-family:STSong,SimSun,serif;font-size:22px;font-weight:700}.brand-name{display:block;letter-spacing:.12em}.brand small{display:block;margin-top:2px;font-size:11px;line-height:1.3;letter-spacing:.08em;font-weight:500;color:var(--muted)}html[lang=en]{font-family:system-ui,Segoe UI,sans-serif}html[lang=en] .brand-name{letter-spacing:0}html[lang=en] h1,html[lang=en] h2{font-family:Georgia,Times New Roman,serif}nav{display:flex;gap:2px}.quiet{background:transparent;padding:11px 13px;border-radius:9px;font-size:13px;font-weight:550}.quiet:hover{background:#eae3d5}main{min-height:calc(100svh - 170px)}h1,h2,p{margin:0}h1{font-family:STSong,SimSun,serif;font-weight:700;letter-spacing:-.6px}.eyebrow{color:var(--blue-dark);font-size:11px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}.home-screen{position:relative;padding:62px 0 50px;max-width:780px;margin:auto}.home-screen h1{margin:17px 0 14px;max-width:calc(100% - 115px);font-size:clamp(40px,7vw,66px)}.tagline{color:var(--muted);line-height:1.8;max-width:70%;font-size:16px}.hero-symbol{position:absolute;top:91px;right:8px;color:var(--ink);font-family:STSong,SimSun,Georgia,serif;font-size:54px;letter-spacing:-7px;transform:rotate(-9deg);opacity:.82}.hero-xiangqi{color:var(--red-dark);font-size:46px;letter-spacing:0}.hero-xiangqi .xiangqi-symbol{width:50px;height:50px}.hero-daoshaji{color:var(--blue-dark);letter-spacing:0}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}.mode-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:26px;background:#fffdf7e0;border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 24px #4639230d}.mode-card:hover{border-color:var(--line-strong);background:var(--paper)}.mode-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#f0eadd;font-family:Georgia,serif;font-size:32px;line-height:1;margin-bottom:24px;color:var(--ink)}.mode-card strong{font-size:21px;font-weight:650;margin-bottom:10px}.mode-card>span:last-of-type{font-size:13px;line-height:1.6;color:var(--muted)}.mode-card i{position:absolute;right:22px;top:22px;font-size:24px;font-style:normal;font-weight:300}.mode-card.online{border-color:#3978e86b}.mode-card.online .mode-icon{color:var(--blue-dark);background:#e8eef8}.fine-print{font-size:12px;color:var(--muted);line-height:1.6;margin-top:18px}.home-screen>.fine-print{text-align:center}.primary,.secondary{min-height:44px;padding:11px 17px;border-radius:12px;font-weight:650;font-size:14px;line-height:1.45}.primary{color:#fff;background:var(--ink);box-shadow:0 3px 7px #24231f1f}.primary:hover:not(:disabled){background:#454037}.secondary{background:var(--paper);border:1px solid var(--line)}.secondary:hover:not(:disabled){background:var(--paper-strong);border-color:var(--line-strong)}.full{width:100%}.lobby-screen{max-width:430px;margin:auto;padding:25px 0 55px}.lobby-screen>.quiet{margin:0 0 26px -13px}.lobby-screen h1{font-size:37px;margin:12px 0}.muted{color:var(--muted);font-size:14px;line-height:1.8}.lobby-screen>.primary{margin-top:30px}.divider{text-align:center;color:var(--muted);font-size:12px;margin:24px 0 20px}.join-row{display:flex;gap:9px;margin-top:7px}.join-row .primary{flex-shrink:0}label{font-size:12px}input{min-width:0;width:100%;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px;color:var(--ink);font-size:17px;letter-spacing:1px}#resumeRoomButton{margin-top:26px}.game-screen{max-width:660px;margin:auto;padding:25px 0 35px}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.game-heading h1{font-size:29px;margin-top:5px}.room-chip{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:7px 9px;font-size:12px;white-space:nowrap}.players{display:flex;gap:9px}.player-chip{flex:1;min-width:0;padding:10px 11px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:12px;background:var(--paper)}.player-chip.is-current{color:var(--ink);border-color:var(--blue);background:#eaf0fb;box-shadow:inset 3px 0 var(--blue);font-weight:650}.turn-status{display:flex;flex-direction:column;gap:5px;padding:15px 1px 13px;min-height:70px}.turn-status strong{font-size:17px;font-weight:650}.turn-status span{color:var(--muted);font-size:12px;line-height:1.5;min-height:36px}.waiting-panel{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--paper);margin-bottom:14px}.waiting-panel>strong{font-size:13px}.invite-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.invite-actions button{font-size:12px;min-height:38px;padding:8px 13px}.board-viewport{max-width:100%;padding:0;overflow:auto;border:var(--board-border);border-radius:var(--board-radius);background:var(--board-surface);box-shadow:var(--board-shadow);overscroll-behavior:contain}.board-viewport[data-game=gomoku],.board-viewport[data-game=xiangqi]{padding:8px}.board{--point-scale: min(1, calc(4 / var(--columns, 4)));--piece-size: min(76%, clamp(42px, 10.5vw, 72px));position:relative;width:100%;isolation:isolate}.board-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--board-line-color)}.board-lines line{stroke:var(--board-line-color);stroke-width:calc(var(--board-line-width) * var(--point-scale))}.board-lines text{text-anchor:middle;font-size:4.6px;font-family:var(--board-piece-font);letter-spacing:.5px;fill:var(--board-line-color)}.board-point{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;background:none;transform:translate(-50%,-50%);border-radius:50%}.board-point:disabled{opacity:1}.board-point:focus-visible{outline-offset:-2px;z-index:3}.piece{display:flex;align-items:center;justify-content:center;width:var(--piece-size);height:auto;aspect-ratio:1;flex-shrink:0;color:var(--board-piece-color);background:var(--board-piece-background);border:var(--board-piece-border);border-width:clamp(1px,calc(3px * var(--point-scale)),3px);border-radius:var(--board-piece-radius);box-shadow:var(--board-piece-shadow);font-family:var(--board-piece-font);font-size:clamp(17px,4vw,28px);line-height:1;font-weight:700;pointer-events:none}.piece[data-side="1"]{color:var(--board-red-color);border-color:var(--board-red-border)}.piece[data-side="2"]{color:var(--board-black-color);border-color:var(--board-black-border)}.board[data-game=daoshaji] .board-point:not(.occupied):not(.preview):not(.motion-ghost):before{content:"";width:var(--piece-size);aspect-ratio:1;border-radius:var(--board-piece-radius);background:var(--board-empty-background);border:var(--board-empty-border);pointer-events:none}.board[data-game=daoshaji] .board-point:not(.occupied):not(.preview):not(:disabled):hover:before{background:var(--board-empty-hover-background)}.piece.covered{color:var(--board-covered-color);background:var(--board-covered-background)}.board-point.selected{z-index:4}.selected .piece{outline:var(--board-selected-outline);outline-offset:var(--board-selected-outline-offset);transform:translateY(var(--board-selected-lift)) scale(var(--board-selected-scale))}.target-dot{position:absolute;z-index:2;width:16%;height:auto;aspect-ratio:1;max-width:12px;background:#4f7d4a;border:2px solid #fffdf7;border-radius:50%;pointer-events:none}.occupied .target-dot{width:var(--piece-size);max-width:none;height:auto;border:2px dashed #4f7d4a;outline:2px solid rgba(79,125,74,.16);outline-offset:4px;background:transparent;transform:scale(1.16)}.last-move:after{content:"";position:absolute;z-index:2;width:11%;height:11%;background:#ac722a;border:1px solid var(--paper);border-radius:50%;bottom:10%;box-shadow:0 0 0 2px #ac722a40;pointer-events:none}.board-point[data-motion-host]{z-index:6}.piece[data-motion]{will-change:transform,opacity}.motion-ghost{position:absolute;z-index:3;pointer-events:none;user-select:none}.motion-ghost .piece{pointer-events:none}.motion-ring{position:absolute;z-index:2;border:3px solid rgba(172,114,42,.55);border-radius:50%;box-shadow:0 0 0 4px #fffdf76b,inset 0 0 0 3px #fffdf752;transform:translate(-50%,-50%);pointer-events:none;user-select:none}.motion-ring--capture{border-color:#d94a43a6;box-shadow:0 0 0 4px #d94a431f,inset 0 0 0 3px #fffdf766}.motion-ring--flip{border-color:#3978e885}.board[data-game=gomoku] .piece[data-side="1"]{background:var(--board-black-color);border-color:var(--board-black-border)}.board[data-game=gomoku] .piece[data-side="2"]{background:var(--board-piece-background);border-color:var(--board-black-border)}.board[data-game=gomoku] .ghost-piece{opacity:.66;outline:var(--board-selected-outline);outline-offset:var(--board-selected-outline-offset)}.board[data-game=gomoku] .last-move:after{width:23%;height:23%;left:38.5%;bottom:38.5%;background:var(--red);border:1px solid var(--paper);box-shadow:none}.board[data-game=daoshaji] .piece[data-side="2"]{color:var(--board-blue-color);border-color:var(--board-blue-border)}.board[data-game=daoshaji] .last-move:after{z-index:2;width:6%;height:6%;bottom:13%}html[lang=en] .board[data-game=daoshaji] .piece{font:700 clamp(10px,1.3vw,12px)/1.1 system-ui,sans-serif;text-align:center;padding:2px}html[lang=en] .board[data-game=daoshaji] .covered{font-size:clamp(18px,4vw,26px)}.piece .xiangqi-symbol{display:block;width:90%;height:90%;pointer-events:none}.board-viewport.is-zoomed .board{min-width:600px}.move-controls{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}.move-controls .primary{flex:1}.move-controls .secondary{font-size:12px}.interaction-hint{color:var(--muted);font-size:12px;line-height:1.7;margin-top:10px}.chess-legend{color:var(--muted);font-size:11px;line-height:1.9;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.chess-piece-info{display:grid;gap:3px;font-size:12px;line-height:1.6}.chess-piece-info strong{color:var(--ink)}.chess-legend summary{padding:10px 0 4px;color:var(--ink);font-size:12px;font-weight:650;cursor:pointer}.chess-guide-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px 0 4px}.chess-guide-item{display:flex;gap:7px;align-items:flex-start;line-height:1.5}.chess-guide-item strong,.chess-guide-item span>span{display:block}.chess-guide-item strong{color:var(--ink);font-size:12px}.chess-guide-symbol{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;color:var(--board-piece-color);background:var(--board-piece-background);border:1px solid var(--board-black-border);border-radius:50%}.chess-guide-symbol .xiangqi-symbol{width:23px;height:23px}.game-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px;padding:10px;margin-top:13px;border:1px solid var(--line);border-radius:16px;background:#fffdf7e6}.game-actions .quiet{padding-left:7px;padding-right:7px}.game-actions .primary{font-size:13px}.danger{color:var(--red-dark)}.connection-state{font-size:11px;color:var(--muted);margin-top:14px}.connection-state:before{content:"●";font-size:7px;margin-right:6px;color:#4f7d4a}.connection-state[data-state=offline]:before,.connection-state[data-state=expired]:before{color:var(--red)}footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px 20px;padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.6}footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}dialog{width:min(620px,calc(100% - 30px));max-height:min(80svh,760px);border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:#1f1c179e}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.dialog-heading h2{font-size:20px}dialog ol{padding-left:23px;font-size:14px;line-height:1.9}dialog li{padding-left:4px;margin-bottom:13px}#onlineRules{font-size:12px;line-height:1.9;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}.toast{position:fixed;z-index:20;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%);width:max-content;max-width:calc(100% - 32px);padding:13px 20px;border-radius:12px;background:#24231ff0;color:#fff;box-shadow:var(--shadow);font-size:13px;line-height:1.6;text-align:center;pointer-events:none}@media(max-width:520px){.tabletop-shell{width:calc(100% - 24px)}.site-header{padding:16px 0}.brand{font-size:17px;gap:8px}.brand-mark{flex-basis:34px;width:34px;height:34px;border-radius:10px;font-size:21px}.brand small{display:none}nav .quiet{padding:9px;font-size:12px}.home-screen{padding-top:43px}.home-screen h1{margin-top:17px;max-width:calc(100% - 88px)}.hero-symbol{top:98px;right:0;font-size:37px}.hero-xiangqi{font-size:30px}.hero-xiangqi .xiangqi-symbol{width:32px;height:32px}.tagline{font-size:13px;max-width:76%}.mode-grid{grid-template-columns:1fr;margin-top:32px;gap:12px}.mode-card{padding:20px 19px 20px 74px;min-height:111px;justify-content:center}.mode-icon{position:absolute;left:19px;top:35px;width:38px;height:38px;border-radius:12px;margin:0;font-size:27px}.mode-card strong{font-size:19px;margin-bottom:6px}.mode-card>span:last-of-type{font-size:12px;max-width:92%}.mode-card i{right:13px;top:13px;font-size:17px}.game-screen{padding-top:19px}.game-heading{margin-bottom:15px}.game-heading h1{font-size:25px}.room-chip{font-size:11px;padding:7px}.player-chip{font-size:11px;padding:10px 8px}.turn-status{padding:12px 1px 9px;min-height:63px}.turn-status strong{font-size:16px}.move-controls button{padding-left:10px;padding-right:10px;font-size:12px}.game-actions{gap:4px}.game-actions .primary{padding-left:12px;padding-right:12px}.game-actions .quiet{font-size:12px}dialog{padding:19px}}@media(max-width:580px){.board{--piece-size: min(76%, 48px)}}@media(prefers-reduced-motion:no-preference){.mode-card{transition:background-color .14s ease,border-color .14s ease}}@media(prefers-reduced-motion:reduce){.selected .piece{transform:none!important}.piece[data-motion]{will-change:auto}}