@font-face{font-family:LXGW WenKai TC;src:url("fonts/lxgw-wenkai-tc.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}
:root{color-scheme:dark;--night:#141310;--night-2:#1b1915;--panel:#211f1a;--panel-light:#28251e;--line:#363128;--line-soft:#2e2b24;--paper:#e8ddc5;--paper-dim:#a99e87;--muted:#807969;--gold:#cdb47c;--gold-light:#e4d3a5;--red:#ab4235;--red-light:#d06a59;--green:#a5aa79;--serif:'LXGW WenKai TC','Kaiti TC','標楷體','DFKai-SB',serif;--sans:Manrope,'Noto Sans TC',system-ui,sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}html{min-height:100%;background:var(--night)}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 48% -20%,#342d20 0,transparent 52rem),var(--night);color:var(--paper);font:14px/1.6 var(--sans);letter-spacing:.005em}button{font:inherit;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}.site-shell{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:0 0 max(28px,env(safe-area-inset-bottom))}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper)}.brand-seal{height:36px;width:36px;border:1px solid #bda86c;border-radius:50%;display:grid;place-items:center;color:var(--gold-light);font:700 20px var(--serif);box-shadow:inset 0 0 0 3px #cdb47c16}.brand b{display:block;font-size:17px;line-height:1.15;letter-spacing:.055em}.brand small{display:block;color:#827a68;font:8px/1.5 var(--mono);letter-spacing:.14em}.top-actions{display:flex;gap:9px;align-items:center}.local-badge{font:9px var(--mono);color:#9e977f;letter-spacing:.09em;padding:8px 10px;border:1px solid #373329;border-radius:3px;margin-right:4px}.local-badge span,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #afb87b7a;margin-right:7px}.icon-button,.help-button{height:34px;min-width:36px;border:1px solid var(--line);background:#1e1c17;border-radius:4px;color:#bdb39e;cursor:pointer;transition:.2s}.icon-button:hover,.help-button:hover{border-color:#867751;color:var(--gold-light)}.help-button{display:flex;align-items:center;gap:8px;padding:0 11px;font-size:11px}.help-button>span:first-child{display:grid;place-items:center;width:15px;height:15px;border:1px solid #8a7950;border-radius:50%;font:10px var(--mono);color:var(--gold-light)}.intro-row{display:flex;justify-content:space-between;align-items:end;padding:35px 0 24px}.eyebrow{font:9px var(--mono);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}.eyebrow-line{display:inline-block;width:19px;height:1px;background:#9d8956;vertical-align:middle;margin:0 8px 3px 0}.intro-row h1{font:700 clamp(25px,4vw,38px)/1.3 var(--serif);letter-spacing:.035em;margin:8px 0 3px;color:#f0e7d1}.intro-row h1 em{font-style:normal;color:var(--gold-light)}.intro-copy{margin:0;color:#948b78;font-size:12px}.new-game{border:1px solid #675a3d;background:linear-gradient(130deg,#3a3020,#282319);border-radius:4px;padding:10px 15px;color:#ead8ab;font-size:11px;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 18px #0004;transition:.2s}.new-game:hover{background:#51432b;border-color:#b49b63;transform:translateY(-1px)}.refresh-icon{font-size:18px;vertical-align:-2px;margin-right:5px}.play-layout{display:grid;grid-template-columns:minmax(360px,1.18fr) minmax(290px,.82fr);gap:26px;align-items:start}.board-column{min-width:0}.board-meta{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 3px;color:#a49b86;font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.board-meta>span:first-child{display:flex;align-items:center}.board-meta .live-dot{width:5px;height:5px}.board-frame{position:relative;padding:13px;background:linear-gradient(145deg,#614a2c,#35291a 45%,#725738);border:1px solid #8b7044;border-radius:5px;box-shadow:0 18px 46px #0008,inset 0 1px 0 #ddc08a4f,inset 0 0 0 3px #1a140d;overflow:hidden}.board-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:5px;padding:9px;background:linear-gradient(140deg,#8d6c3f,#745632 38%,#65492c);border:1px solid #b4945e70;border-radius:2px;aspect-ratio:4/6.8;box-shadow:inset 0 0 25px #2c1b0b7a}.tile{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border:0;padding:0;background:transparent;cursor:pointer;perspective:650px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tile:disabled{cursor:default}.tile::after{content:"";position:absolute;inset:-2px;border:1px solid transparent;border-radius:50%;pointer-events:none;transition:.2s}.tile.valid::after{border-color:#d3c083a8;box-shadow:0 0 0 3px #dfcc8a20,0 0 18px #f3dc9c56}.tile.capture-target::after{border-color:#df7869;box-shadow:0 0 0 3px #c34b3b2b,0 0 18px #e26d5d75}.tile.selected::after{inset:-4px;border-color:#f3dfa5;box-shadow:0 0 0 4px #dec57a36,0 0 22px #f1d589a1}.tile.last-move::after{border-color:#b4bf83;box-shadow:0 0 12px #d8df91a1}.tile:focus-visible{outline:0}.tile:focus-visible::after{border-color:#fff1c8;box-shadow:0 0 0 3px #fff0c733}.tile-inner{position:relative;width:88%;height:86%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.22,.75,.24,1);filter:none}.tile.is-open .tile-inner{transform:rotateY(180deg)}.tile.is-flipping .tile-inner{transition-duration:.78s;transition-timing-function:cubic-bezier(.15,.78,.18,1)}.tile-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.tile-back{overflow:hidden;border:2px solid #ddc18a;background:radial-gradient(circle at 33% 27%,#573c25,#34251a 68%,#241a12);box-shadow:inset 0 0 0 2px #352417,inset 0 0 0 4px #b89b655e,inset 0 5px 8px #ffdfa311,0 3px 0 #382719}.tile-back::before,.tile-back::after{content:"";position:absolute;inset:10%;border:1px solid #d2b57752;border-radius:50%}.tile-back::after{inset:20%;border-color:#d2b57734}.back-glyph{font:600 clamp(18px,3.1vw,26px) var(--serif);color:#d5bc84;text-shadow:0 2px 4px #1a100a;opacity:.88}.back-dot{position:absolute;top:16%;left:50%;width:4px;height:4px;border-radius:50%;background:#e1c98f;box-shadow:0 0 9px #e1c98f7a}.tile-front{transform:rotateY(180deg);border:2px solid #eadbb8;background:radial-gradient(circle at 36% 24%,#fff6df,#e9dcc0 68%,#d0bd98);box-shadow:inset 0 0 0 2px #c5ad7e,inset 0 0 0 4px #fff8e6,0 3px 0 #5c4325}.piece-rim{position:absolute;inset:7%;border:1px solid #b39b6b;border-radius:50%;opacity:.75}.piece-glyph{font:700 clamp(24px,5.2vw,40px)/1 var(--serif);color:#242019;text-shadow:0 1px #fff9e8;transform:translateY(-2px)}.tile.red-piece .piece-glyph{color:#a2372d}.piece-name{font:8px/1 var(--mono);letter-spacing:.06em;color:#74684f;margin-top:4px}.tile.red-piece .piece-name{color:#a35c4b}.tile.black-piece .piece-name{color:#484437}.tile.piece-arrive{animation:arrive .36s cubic-bezier(.18,.78,.3,1)}.tile.capture-pop{animation:capture .4s ease-out}.tile.hint-flip .tile-inner{animation:hintflip .78s ease}.board-corner{position:absolute;width:13px;height:13px;z-index:2;pointer-events:none;border-color:#d5ba7e;border-style:solid;opacity:.7}.corner-tl{top:6px;left:6px;border-width:1px 0 0 1px}.corner-tr{top:6px;right:6px;border-width:1px 1px 0 0}.corner-bl{bottom:6px;left:6px;border-width:0 0 1px 1px}.corner-br{bottom:6px;right:6px;border-width:0 1px 1px 0}.board-legend{height:38px;display:flex;align-items:center;gap:15px;color:#817964;font-size:9px}.board-legend>span{display:flex;align-items:center;gap:5px}.legend-mark{width:8px;height:8px;border-radius:50%;display:inline-block}.covered-mark{background:#896638;border:1px solid #d3b77c}.red-mark{background:#ac4436}.black-mark{background:#34332d;border:1px solid #79725e}.tap-hint{margin-left:auto!important;color:#a3977d;font:9px var(--mono)}.game-panel{display:grid;gap:12px}.turn-card,.score-card,.move-card,.quick-rules{border:1px solid var(--line);border-radius:5px;background:linear-gradient(145deg,#24221c,#1d1b17);box-shadow:0 7px 24px #0002}.turn-card{padding:17px 18px 15px;border-top:2px solid #b69a5d;transition:border-color .3s}.turn-card[data-player="two"]{border-top-color:#74816b}.turn-card-top,.card-heading{display:flex;align-items:center;justify-content:space-between}.turn-number{font:10px var(--mono);color:#77715f}.player-name-row{display:flex;align-items:center;gap:11px;margin:10px 0 11px}.player-avatar{height:38px;width:38px;display:grid;place-items:center;border:1px solid #81724c;background:linear-gradient(145deg,#413624,#282218);border-radius:50%;color:#ddc58e;font:700 18px var(--serif)}.turn-card[data-player="two"] .player-avatar{border-color:#6e795f;color:#c0c99d;background:linear-gradient(145deg,#30372b,#24271f)}.player-name-row strong{display:block;font:600 16px var(--serif);color:#eee4d0}.player-name-row small{display:block;color:#9c937e;font-size:10px;margin-top:2px}.turn-arrow{margin-left:auto;color:#a48b57;font-size:20px}.turn-status{border-top:1px solid #ffffff10;padding-top:10px;color:#b6ad9a;font-size:11px}.score-card,.move-card{padding:14px 17px}.card-heading{font:11px var(--serif);color:#e4dac4;margin-bottom:10px}.card-heading .eyebrow{font:8px var(--mono);color:#7d7768}.card-heading button{border:0;background:transparent;color:#817965;font:9px var(--mono);cursor:pointer}.card-heading button:hover{color:#d5c18e}.score-line{height:36px;display:grid;grid-template-columns:1fr 46px 95px;align-items:center;border-top:1px solid #ffffff0a}.score-side{display:flex;align-items:center;gap:8px;color:#c7beaa;font-size:11px}.side-dot{height:9px;width:9px;border-radius:50%;display:inline-block}.red-dot{background:#b34236;box-shadow:0 0 8px #ba4b3d66}.black-dot{background:#777360;box-shadow:0 0 8px #9d967a3d}.score-line strong{font:15px var(--mono);text-align:right;color:#e4d7b9}.score-caption{font:8px var(--mono);text-align:right;color:#7e7766}.move-card{min-height:131px}.move-card ol{display:grid;gap:4px;max-height:175px;overflow:auto;list-style:none;margin:0;padding:0;scrollbar-color:#60533b transparent}.move-card li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:6px 7px;border-top:1px solid #ffffff0a;color:#bdb39c;font-size:10px;animation:log-in .3s ease-out}.move-card li .log-num{font:9px var(--mono);color:#7c735e}.move-card li .log-piece{color:#d9c99e}.move-card li .log-empty{display:block;border:0;color:#817965;padding:8px 0;animation:none}.log-side{font:8px var(--mono);color:#827d68}.quick-rules{position:relative;display:grid;grid-template-columns:23px 1fr 20px;gap:8px;align-items:start;padding:13px 14px;background:linear-gradient(120deg,#2d291f,#222019);border-color:#423a28}.quick-icon{color:#cbb579;font-size:13px}.quick-rules p{margin:0;color:#a79c84;font-size:10px}.quick-rules p b{color:#e0d3b6;font:11px var(--serif)}.quick-rules button{border:0;background:transparent;color:#c4ae73;font-size:16px;cursor:pointer}.footer{display:flex;justify-content:space-between;padding:16px 2px 0;border-top:1px solid #ffffff10;color:#706b5d;font:8px var(--mono);letter-spacing:.08em}.rules-dialog,.result-dialog{width:min(520px,calc(100% - 28px));max-height:min(82vh,760px);padding:0;border:1px solid #706143;border-radius:7px;background:#211f1a;color:var(--paper);box-shadow:0 28px 90px #000b}.rules-dialog::backdrop,.result-dialog::backdrop{background:#090806c9;backdrop-filter:blur(5px)}.rules-dialog[open],.result-dialog[open]{animation:dialog-in .22s ease-out}.dialog-top{display:flex;align-items:start;justify-content:space-between;padding:20px 21px 14px;border-bottom:1px solid #ffffff12}.dialog-top h2{margin:4px 0 0;font:700 23px var(--serif)}.dialog-close{height:30px;width:30px;border:1px solid #494333;border-radius:50%;background:transparent;color:#c2b899;font-size:20px;cursor:pointer}.rules-body{padding:15px 21px 18px;overflow:auto}.rules-lead{font:500 13px/1.8 var(--serif);color:#d6c9ae;margin:0 0 12px}.rule-item{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-top:1px solid #ffffff0c}.rule-item>span{font:9px var(--mono);color:#ba9e61;padding-top:3px}.rule-item p{margin:0;color:#aaa18d;font-size:11px;line-height:1.7}.rule-item b{display:block;color:#e4d9c3;font:600 12px var(--serif);margin-bottom:2px}.rank-strip{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:13px 8px;margin:8px 0;background:#171611;border:1px solid #373227;border-radius:4px;color:#d2c39d;font:10px var(--serif)}.rank-strip i{font-style:normal;color:#83744f}.rules-note{color:#797260;font-size:9px;line-height:1.7;margin:12px 0 0}.dialog-bottom{display:flex;justify-content:space-between;align-items:center;padding:13px 21px;border-top:1px solid #ffffff12;color:#827a67;font:8px var(--mono);letter-spacing:.1em}.primary-button{border:1px solid #b39a60;border-radius:4px;padding:8px 18px;background:linear-gradient(140deg,#c9af73,#a3884f);color:#1c1912;font-size:11px;font-weight:700;cursor:pointer}.primary-button:hover{filter:brightness(1.1)}.result-dialog{width:min(390px,calc(100% - 28px));text-align:center;padding:30px 28px}.result-mark{width:55px;height:55px;display:grid;place-items:center;border:1px solid #b2975a;border-radius:50%;margin:0 auto 13px;color:#d6bd7d;font:700 27px var(--serif);box-shadow:inset 0 0 0 4px #aa8f5433}.result-dialog h2{font:700 26px var(--serif);margin:7px 0}.result-dialog p{color:#a79d89;font-size:12px;margin:0 0 21px}.toast{position:fixed;z-index:9;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,18px);opacity:0;pointer-events:none;white-space:nowrap;padding:9px 15px;background:#28251e;border:1px solid #665837;border-radius:4px;color:#e4d6b7;font-size:11px;box-shadow:0 12px 30px #0008;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes arrive{0%{transform:scale(.72);filter:brightness(1.5)}65%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes capture{0%{transform:scale(1)}45%{transform:scale(1.18);filter:brightness(1.55)}100%{transform:scale(1)}}@keyframes hintflip{0%,100%{transform:rotateY(0)}42%,72%{transform:rotateY(180deg)}}@keyframes log-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:780px){.site-shell{width:min(680px,calc(100% - 28px))}.play-layout{grid-template-columns:minmax(0,1fr);gap:13px}.board-column{width:min(100%,480px);margin:0 auto}.game-panel{grid-template-columns:1fr 1fr;gap:8px}.turn-card{grid-column:1/-1}.move-card{grid-column:1/-1;min-height:90px}.move-card ol{max-height:112px}.quick-rules{grid-column:1/-1}.intro-row{padding-top:27px}.board-grid{aspect-ratio:4/6.8}}
@media(max-width:460px){.topbar{height:62px}.site-shell{width:calc(100% - 20px)}.brand-seal{width:31px;height:31px;font-size:17px}.brand b{font-size:15px}.brand small{font-size:7px}.top-actions{gap:5px}.local-badge{font-size:7px;padding:7px 6px;letter-spacing:.04em;margin-right:0}.icon-button{min-width:31px;height:31px}.help-button{height:31px;padding:0 8px}.help-label{display:none}.intro-row{align-items:center;padding:22px 1px 16px}.intro-row h1{font-size:24px}.intro-copy{font-size:10px}.new-game{padding:8px 10px;font-size:10px;white-space:nowrap}.board-meta{height:27px}.board-frame{padding:9px;border-radius:4px}.board-grid{padding:6px;gap:3px;aspect-ratio:4/6.8}.tile-inner{width:89%;height:87%}.piece-glyph{font-size:clamp(23px,8vw,33px)}.piece-name{font-size:6px;margin-top:3px}.back-glyph{font-size:22px}.board-legend{height:30px;gap:9px;font-size:8px}.tap-hint{font-size:7px}.game-panel{gap:7px}.turn-card{padding:12px 13px}.turn-card-top{font-size:8px}.player-name-row{margin:7px 0 8px}.player-avatar{height:33px;width:33px;font-size:16px}.player-name-row strong{font-size:14px}.turn-status{font-size:10px;padding-top:7px}.score-card,.move-card{padding:11px 12px}.card-heading{font-size:10px;margin-bottom:6px}.score-line{height:30px;grid-template-columns:1fr 30px 78px}.score-side{font-size:9px}.score-line strong{font-size:12px}.score-caption{font-size:7px}.move-card{min-height:84px}.quick-rules{padding:10px 12px}.quick-rules p{font-size:9px}.footer{font-size:7px}.rules-body{padding:12px 15px}.dialog-top{padding:16px 15px 11px}.dialog-bottom{padding:11px 15px}.rank-strip{gap:5px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.play-layout{grid-template-columns:minmax(0,520px) minmax(280px,330px);justify-content:center;gap:24px}
@media(max-width:960px){.play-layout{grid-template-columns:minmax(0,1fr)}.board-column{width:min(100%,480px);margin:0 auto}}

.tile-inner{width:auto;aspect-ratio:1;height:86%;max-width:88%}

/* Keep the tile faces in a 3D context on iOS Safari and older WebKit. */
.tile{ -webkit-perspective:650px; perspective:650px }
.tile-inner{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:-webkit-transform .62s cubic-bezier(.22,.75,.24,1); transition:transform .62s cubic-bezier(.22,.75,.24,1); filter:none; -webkit-filter:none }
.tile.is-open .tile-inner{ -webkit-transform:rotateY(180deg); transform:rotateY(180deg) }
.tile-front{ -webkit-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-backface-visibility:hidden; backface-visibility:hidden }
.tile-back{ -webkit-backface-visibility:hidden; backface-visibility:hidden }