:root{--page-bg:#f5f0e6;--surface:#fcf8ef;--board-bg:#e2c596;--board-line:#8b6845;--piece-bg:#e7d6b8;--piece-border:#85694c;--red-piece:#96382f;--black-piece:#352d28;--text-primary:#302b26;--text-secondary:#776c60;--interaction:#b6742d;--danger:#b23e35;--success:#39775d;--focus:#176f91;--border:#41362b26;--border-strong:#41362b47;--text:var(--text-primary);--muted:var(--text-secondary);--accent:var(--red-piece);--red:var(--red-piece);--black:var(--black-piece);--serif:"Noto Serif SC", "Noto Serif TC", "Source Han Serif SC", "Source Han Serif TC", "Songti SC", "Songti TC", "STSong", "PMingLiU", "SimSun", serif;color:var(--text-primary);background:var(--page-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--page-bg);min-width:0}body{min-width:0;min-height:100vh;margin:0;overflow-x:hidden}button,select{font:inherit}.entry-shell{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:min(100% - 2rem,42rem);min-height:100svh;margin:0 auto;padding:3rem 0;display:flex}.eyebrow{color:var(--red-piece);letter-spacing:.15em;margin:0 0 .35rem;font-size:.72rem;font-weight:750}.home-eyebrow{color:#766b5f;letter-spacing:.3em;margin:0 0 .8rem;font-size:.72rem;font-weight:650}h1{color:var(--text-primary);font-family:var(--serif);letter-spacing:.09em;margin:0;font-size:clamp(2.8rem,11vw,5.2rem);font-weight:600;line-height:1}.entry-intro{color:var(--text-secondary);margin:1.8rem 0 0;font-size:clamp(.72rem,2.7vw,1rem);line-height:1.95}.entry-intro span{white-space:nowrap;display:block}.entry-actions{gap:.85rem;width:min(100%,20rem);margin-top:2.5rem;display:grid}.online-create-controls{gap:.55rem;display:grid}.clock-choice{color:var(--text-secondary);justify-content:center;align-items:center;gap:.65rem;font-size:.78rem;display:flex}.clock-choice label{font-weight:650}.clock-choice select{border:0;border-bottom:1px solid var(--border-strong);min-height:2rem;color:var(--text-primary);background:0 0;border-radius:0;padding:.25rem 1.8rem .25rem .55rem}.clock-choice select:focus-visible{outline:.15rem solid var(--focus);outline-offset:.12rem}.entry-card{border-top:1px solid var(--border);border-bottom:1px solid var(--border);width:min(100%,29rem);margin:1rem 0;padding:clamp(1.1rem,4vw,1.65rem)}.entry-card h2{color:var(--text-primary);font-family:var(--serif);margin:.5rem 0;font-size:1.5rem;font-weight:650}.entry-card p{color:var(--text-secondary);line-height:1.65}.entry-card>.primary-button,.entry-card>.secondary-button{width:100%;margin-top:.65rem}.primary-button,.secondary-button{cursor:pointer;border-radius:.3rem;min-height:2.8rem;padding:.66rem 1rem;font-weight:680;line-height:1.25;transition:border-color .14s,background .14s,box-shadow .14s}.primary-button{color:#fffaf4;background:var(--red-piece);border:1px solid #83332c;box-shadow:0 .08rem .16rem #492a221c}.secondary-button{border:1px solid var(--border-strong);color:var(--text-primary);background:#ffffff1f}.primary-button:hover:not(:disabled){background:#863129;box-shadow:0 .11rem .22rem #492a2226}.secondary-button:hover:not(:disabled){background:#ffffff47;border-color:#817364}.primary-button:disabled,.secondary-button:disabled{cursor:wait;opacity:.58}.primary-button:focus-visible,.secondary-button:focus-visible,.text-link:focus-visible,.gate-brand:focus-visible{outline:.18rem solid var(--focus);outline-offset:.14rem}.button-link{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.text-link{color:#6f3c35;text-underline-offset:.2rem}.error-text{color:var(--danger)}.room-gate{justify-content:center;width:min(100% - 2rem,48rem)}.room-gate .entry-card{width:min(100%,40rem)}.gate-brand{color:var(--text-primary);font-family:var(--serif);font-size:1.55rem;font-weight:700;text-decoration:none}.room-code{color:var(--text-primary);letter-spacing:.14em;margin:.45rem 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(1.7rem,8vw,2.5rem);font-weight:750}.gate-status{margin:.5rem 0}.share-link{justify-items:center;gap:.75rem;display:grid}.share-link code{overflow-wrap:anywhere;color:#5b534a;background:#4d40320d;max-width:100%;padding:.5rem .65rem;font-size:.78rem}.share-link--compact{display:block}.clock-format{font-weight:700;color:var(--text-primary)!important;margin:.35rem 0 .8rem!important}.ready-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .85rem;display:flex}.seat-statuses{grid-template-columns:auto auto;gap:.45rem;display:grid}.seat-status{border:1px solid var(--border);color:var(--text-secondary);border-radius:.3rem;justify-content:center;align-items:baseline;gap:.45rem;padding:.5rem .55rem;font-size:.78rem;display:flex}.seat-label{color:var(--text-primary);font-weight:680}.seat-state--empty{opacity:.62}.seat-state--ready{color:#2e7d4f;font-weight:700}.ready-waiting-label{color:var(--text-secondary);font-size:.8rem}.waiting-label{color:var(--text-secondary)}.lobby-shell{justify-content:flex-start;gap:.4rem;width:min(100% - 2rem,44rem);padding-top:2rem}.lobby-title{letter-spacing:.06em;font-size:clamp(1.9rem,7vw,2.7rem)}.lobby-create{justify-items:center;gap:.85rem;width:min(100%,32rem);display:grid}.lobby-list{width:min(100%,32rem);margin-top:.6rem}.lobby-section-title{color:var(--text-secondary);letter-spacing:.08em;margin:0 0 .55rem;font-size:.82rem;font-weight:700}.lobby-rooms{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.lobby-room{border:1px solid var(--border);text-align:left;background:#ffffff1a;border-radius:.35rem;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.55rem .7rem;display:grid}.lobby-room-id{color:var(--text-primary);letter-spacing:.08em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.02rem;font-weight:750}.lobby-room-seats{color:var(--text-secondary);font-size:.74rem}.lobby-room-full{color:var(--text-secondary);white-space:nowrap;font-size:.72rem}.lobby-join-choices{gap:.4rem;display:flex}.lobby-room .compact-button{min-height:1.9rem;padding:.3rem .6rem}.join-choices{gap:.55rem;margin-top:.35rem;display:grid}.lobby-empty{color:var(--text-secondary);margin:.6rem 0 0;font-size:.82rem}.lobby-back{margin-top:1.2rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=360px){.entry-shell{width:min(100% - 1.1rem,42rem);padding-block:2rem}.entry-intro{font-size:.65rem}.entry-card{padding-inline:.7rem}}.game-board{--piece-size:8.8%;aspect-ratio:96/106;-webkit-user-select:none;user-select:none;touch-action:manipulation;width:min(100vw - .9rem,90svh - 11.5rem,48rem);position:relative}.board-grid{filter:drop-shadow(0 -.06rem .05rem #fff1d366)drop-shadow(0 .28rem .36rem #452d1829);width:100%;height:100%;display:block}.board-surface{fill:url(#board-surface-gradient);stroke:#795734;stroke-width:4.5px}.board-light{fill:url(#board-light-gradient);pointer-events:none}.board-depth{fill:url(#board-edge-gradient);pointer-events:none}.board-grain{fill:url(#board-grain-pattern);pointer-events:none}.board-grain-line{fill:none;stroke:#704e2b0b;stroke-linecap:round;stroke-width:2px}.board-inset{fill:none;stroke:#5e412547;stroke-width:1.4px}.grid-lines{fill:none;stroke:var(--board-line);stroke-linecap:round;stroke-linejoin:round;stroke-width:2.25px}.palace-lines{opacity:.58;stroke-width:1.9px}.position-markers{fill:none;stroke:#734f2b66;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.25px}.river-label{fill:#694c2fa8;letter-spacing:12px;text-anchor:middle;dominant-baseline:middle;font-family:Noto Serif TC,Source Han Serif TC,Songti TC,PMingLiU,serif;font-size:38px;font-weight:540}.last-move-layer{pointer-events:none;position:absolute;inset:0}.last-move-square{aspect-ratio:1;background:#b1702a21;border-radius:20%;width:9.6%;position:absolute;transform:translate(-50%,-50%)}.last-move-square--from:after{content:"";background:#97581d94;border-radius:50%;position:absolute;inset:44%}.last-move-square--to{background:#be7a3033;box-shadow:inset 0 0 0 1px #8f531f66}.legal-destination-layer{pointer-events:none;position:absolute;inset:0}.legal-destination{aspect-ratio:1;pointer-events:auto;cursor:pointer;background:0 0;border:0;border-radius:50%;width:10.5%;padding:0;position:absolute;transform:translate(-50%,-50%)}.legal-destination:after{content:"";background:#9a6028;border-radius:50%;position:absolute;inset:38%;box-shadow:0 0 0 .1rem #ffefc7b8,0 .06rem .1rem #5330122e}.legal-destination:focus-visible{outline:.18rem solid var(--focus);outline-offset:.1rem}.piece-layer{pointer-events:none;position:absolute;inset:0}.piece{--glyph-cut-shadow:#40261857;width:var(--piece-size);aspect-ratio:1;border:.105rem solid var(--piece-border);background:radial-gradient(circle at 31% 19%, #fbf0d9d1 0, #f7e9cf5c 19%, transparent 39%), radial-gradient(circle at 50% 43%, #eee0c6 0, var(--piece-bg) 64%, #cfb993 100%);font-synthesis:weight;cursor:pointer;pointer-events:auto;border-radius:50%;place-items:center;padding:0;font-family:STKaiti,Kaiti SC,KaiTi,DFKai-SB,FZKai-Z03,Noto Serif SC,Source Han Serif SC,STSong,SimSun,serif;font-size:clamp(1.08rem,4.95vw,2.24rem);font-weight:700;line-height:.88;transition:left .16s,top .16s,transform .14s,box-shadow .14s,opacity .14s;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:inset .025rem .055rem .07rem #fff8e594,inset 0 -.14rem .18rem #593e242e,0 .1rem .17rem #442d1840}.piece:after{opacity:.42;content:"";pointer-events:none;border:1px solid;border-radius:50%;position:absolute;inset:10%;box-shadow:0 0 0 1px #60432724,inset 0 .055rem .09rem #fff8e547}.piece-glyph{z-index:1;color:inherit;-webkit-text-stroke:.008em var(--glyph-cut-shadow);paint-order:stroke fill;text-shadow:-.008em -.008em .008em #fff8e266, .012em .014em .01em var(--glyph-cut-shadow);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateY(.012em)scaleX(.99)}.piece:not(:disabled):hover{transform:translate(-50%,-50%)scale(1.025)}.piece:focus-visible{outline:.18rem solid var(--focus);outline-offset:.12rem}.piece:disabled{cursor:default;opacity:1}.piece--red{--glyph-cut-shadow:#5b1d1975;color:var(--red-piece);border-color:#88694b}.piece--black{--glyph-cut-shadow:#1f19157a;color:var(--black-piece);border-color:#88694b}.piece--hidden{color:#80684f;background:radial-gradient(circle at 31% 19%,#f9edd7c2 0,#f5e5c952 19%,#0000 39%),radial-gradient(circle at 50% 43%,#ebdcc1 0,#dfceb0 64%,#c9b18b 100%);border-color:#886f54;box-shadow:inset .025rem .055rem .07rem #fff7e285,inset 0 -.14rem .18rem #593e242e,0 .1rem .17rem #442d1840}.piece--hidden:after{opacity:.35;border-color:#70563d9e;inset:10%;box-shadow:0 0 0 1px #fff5dc29}.piece-back{aspect-ratio:1;border:1px solid #6f543a6b;border-radius:22%;width:22%;position:relative;transform:rotate(45deg);box-shadow:inset .045rem .045rem .06rem #583e252e,.035rem .035rem .05rem #fff4da6b}.piece-back:before{content:"";background:#72573c80;border-radius:50%;position:absolute;inset:33%;box-shadow:inset .025rem .025rem .03rem #4b341f2e}.piece-back:after,.piece-back span{display:none}.piece--selected{z-index:3;transform:translate(-50%,-50%)scale(1.055);box-shadow:inset 0 0 0 .055rem #fff3,inset 0 -.12rem .17rem #190f0929,0 0 0 .16rem #e1a343,0 .16rem .27rem #37221257}.piece--legal-target{z-index:2;box-shadow:inset 0 0 0 .055rem #ffffff2e,inset 0 -.12rem .17rem #190f0929,0 0 0 .13rem #e6b159,0 0 0 .25rem #fff1cfc7}.piece--in-check{z-index:2;box-shadow:inset 0 0 0 .055rem #ffffff2e,0 0 0 .18rem #d74b3f,0 0 .5rem #a12d2557}.piece--just-revealed{animation:.18s ease-out reveal-piece}@keyframes reveal-piece{0%{opacity:.35;transform:translate(-50%,-50%)scale(.86)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@media (width<=420px){.game-board{--piece-size:9%}.piece{border-width:.1rem}.river-label{letter-spacing:9px;font-size:34px}}@media (prefers-reduced-motion:reduce){.piece{transition:none}.piece--just-revealed{animation:none}}.game-shell{width:min(100%,76rem);min-height:100svh;margin:0 auto;padding:.4rem clamp(.4rem,1.5vw,1.25rem) .8rem}.game-topbar{justify-content:space-between;align-items:center;min-height:2.4rem;padding-inline:.25rem;display:flex}.brand-link{color:var(--text-primary);font-family:var(--serif);letter-spacing:.04em;font-size:1.3rem;font-weight:650;text-decoration:none}.topbar-actions{align-items:center;gap:.35rem;display:flex}.topbar-home,.sound-toggle{color:#817a71;cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:1.85rem;height:1.85rem;padding:0;line-height:1;text-decoration:none;display:grid}.topbar-home:hover,.sound-toggle:hover{color:var(--text-primary);background:#4c3e2e0e}.ui-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.55px;width:1rem;height:1rem}.brand-link:focus-visible,.topbar-home:focus-visible,.inline-button:focus-visible,.sound-toggle:focus-visible{outline:.16rem solid var(--focus);outline-offset:.12rem}.game-layout{justify-items:stretch;gap:.24rem;width:min(100%,46rem);margin:.2rem auto 0;display:grid}.player-panel{min-height:2.35rem;color:var(--text-primary);grid-template-columns:1fr auto;align-items:center;gap:.75rem;padding:.1rem .35rem;display:grid}.player-main{flex-wrap:wrap;align-items:center;gap:.3rem .55rem;min-width:0;display:flex}.player-identity{align-items:baseline;gap:.42rem;min-width:0;display:flex}.player-identity strong{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;font-weight:680;overflow:hidden}.turn-dot{color:var(--text-secondary);opacity:.22;font-size:.52rem}.player-panel--red .turn-dot{color:var(--red-piece)}.player-panel--black .turn-dot{color:var(--black-piece)}.player-panel--active .turn-dot{opacity:1}.player-state{color:var(--text-secondary);font-size:.68rem;font-weight:650}.player-panel--active .player-state{color:var(--interaction)}.player-clock-group{text-align:right;min-width:3.5rem}.player-clock{color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:.025em;font-size:.98rem;font-weight:720}.player-clock--running{color:var(--interaction)}.player-clock--warning{color:var(--danger)}.player-clock--running:before{content:"●";vertical-align:.14rem;margin-right:.3rem;font-size:.5rem}.captured-tray{align-items:center;gap:.38rem;min-width:0;display:flex}.captured-list{flex-wrap:wrap;align-items:center;gap:.16rem;min-width:0;display:flex}.captured-piece{--glyph-cut-shadow:#1f191542;aspect-ratio:1;width:1.42rem;color:var(--black-piece);font-synthesis:weight;background:radial-gradient(circle at 32% 20%,#f6ead2 0,#e8d8bb 63%,#cdb58f 100%);border:1px solid #9a8061;border-radius:50%;place-items:center;font-family:STKaiti,Kaiti SC,KaiTi,DFKai-SB,FZKai-Z03,Noto Serif SC,Source Han Serif SC,serif;font-size:.88rem;font-weight:700;line-height:1;animation:.16s ease-out captured-piece-enter;display:grid;position:relative;box-shadow:inset 0 -.06rem .08rem #593e2421,0 .045rem .07rem #442d182e}.captured-piece--red{--glyph-cut-shadow:#5b1d1940;color:var(--red-piece)}.captured-piece .piece-glyph{-webkit-text-stroke-width:.008em;text-shadow:-.012em -.012em .01em #fff8e273, .018em .022em .015em var(--glyph-cut-shadow);position:static;transform:translateY(.015em)scaleX(.97)}@keyframes captured-piece-enter{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.board-card{justify-items:center;min-width:0;display:grid;position:relative}.online-notice{color:var(--text-secondary);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem .7rem;font-size:.73rem;display:flex}.online-notice:empty{display:none}.transient-notice{color:var(--text-primary)}.connection-badge,.presence-label{align-items:center;gap:.35rem;display:inline-flex}.connection-badge:before,.presence-label:before{content:"";background:#91877d;border-radius:50%;flex:none;width:.42rem;height:.42rem}.connection-badge--connecting:before,.connection-badge--reconnecting:before{background:#a8782d}.inline-button{color:#6f3c35;font:inherit;text-underline-offset:.16rem;cursor:pointer;background:0 0;border:0;padding:.12rem .25rem;font-weight:700;text-decoration:underline}.session-controls{min-height:2.15rem;color:var(--text-secondary);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .85rem;font-size:.75rem;display:flex}.session-controls p{margin:0}.session-controls>div{gap:.45rem;display:flex}.session-controls--offer,.session-controls--danger{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.4rem .65rem}.session-controls--rematch{flex-direction:column;padding-top:.35rem}.compact-button{border-radius:.3rem;min-height:2rem;padding:.32rem .68rem;font-size:.75rem}.danger-button{border:1px solid var(--danger);color:#fff;background:var(--danger);min-height:2rem;font:inherit;cursor:pointer;border-radius:.3rem;padding:.32rem .68rem;font-size:.75rem;font-weight:700}.text-danger-button{color:var(--danger);font:inherit;cursor:pointer;background:0 0;border:0;padding:.28rem .4rem;font-weight:650;text-decoration:none}.session-controls>.secondary-button{min-height:auto;color:var(--text-secondary);background:0 0;border:0;padding:.28rem .4rem}.danger-button:disabled,.text-danger-button:disabled{cursor:not-allowed;opacity:.5}.danger-button:focus-visible,.text-danger-button:focus-visible{outline:.16rem solid var(--focus);outline-offset:.1rem}.game-result{border-top:1px solid var(--border);text-align:center;padding:.8rem .25rem .2rem}.game-result h2{color:var(--red-piece);font-family:var(--serif);margin:0;font-size:1.55rem}.game-result p:last-child{color:var(--text-secondary);margin:.3rem 0 0;font-size:.82rem}.game-actions{flex-wrap:wrap;justify-content:center;gap:.55rem;padding-top:.2rem;display:flex}@media (width<=430px){.game-shell{padding:.25rem .3rem .8rem}.game-topbar{min-height:2.2rem;padding-inline:.35rem}.brand-link{font-size:1.18rem}.game-layout{gap:.22rem;margin-top:.2rem}.player-panel{min-height:2.15rem;padding-inline:.45rem}.player-identity strong{font-size:.8rem}.player-clock{font-size:.88rem}.session-controls{min-height:2rem}.game-actions .primary-button,.game-actions .secondary-button{min-height:2.25rem;padding:.45rem .65rem;font-size:.76rem}}@media (width>=900px) and (height>=850px){.game-layout{gap:.45rem;margin-top:.8rem}}@media (prefers-reduced-motion:reduce){.piece,.player-panel{transition:none}.captured-piece{animation:none}}