/* The live match shares the quiet material language of the independent studies. */
body[data-game-style] { --page:#eeeae1; --surface:#f8f5ed; --ink:#353a2e; --muted:#8a8b7b; --line:#d5d3c5; --scene-accent:#69724d; --scene-wash:#f8f4e9; background:radial-gradient(ellipse at 25% 20%,var(--scene-wash),transparent 70%),var(--page); color:var(--ink); }
body[data-game-style="xiangqi"] { --page:#eee6d8; --ink:#413529; --muted:#96816b; --line:#d8cbbb; --scene-accent:#965b43; --scene-wash:#fbf3e5; }
body[data-game-style="chess"] { --page:#e9e5dc; --ink:#39372f; --muted:#8e897c; --line:#d0cabc; --scene-accent:#766347; --scene-wash:#f7f3e9; }
body[data-game-style="rustic"] { --page:#eae2d3; --ink:#494331; --muted:#998b70; --line:#d6cbb6; --scene-accent:#7b7950; --scene-wash:#f7efdf; }
body[data-game-style="shogi"] { --page:#f0e9dd; --ink:#413a2e; --muted:#a08d70; --line:#d8cebc; --scene-accent:#8d734b; --scene-wash:#faf5e9; }
body[data-game-style="jungle"] { --page:#e6eadb; --ink:#354637; --muted:#88937a; --line:#cbd4bc; --scene-accent:#577152; --scene-wash:#f5f3e4; }
body[data-game-style="classic"] { --page:#eaf0e5; --scene-wash:#f6f8ef; --line:#ced8c5; --scene-accent:#627451; }
body[data-game-style="classic"][data-classic-theme="blue"] { --page:#e7eff0; --scene-wash:#f6faf9; --scene-accent:#587b8a; --line:#cad9db; }
body[data-game-style="classic"][data-classic-theme="paper"] { --page:#ede6d8; --scene-wash:#fcf7e9; --scene-accent:#8a724c; --line:#d7cdb9; }
body[data-game-style="classic"][data-classic-theme="night"] { --page:#e2e6dd; --scene-wash:#f4f1e4; --scene-accent:#536654; }
body[data-game-style] .game-header { width:min(1440px,calc(100% - 48px)); border-bottom:1px solid var(--line); }
body[data-game-style] .game-screen { background:transparent; }
body[data-game-style] .compact-logo strong { color:var(--ink); font-weight:500; }
body[data-game-style] .compact-logo span,body[data-game-style] .engine-state { color:var(--muted); }
body[data-game-style] .engine-state.is-online .engine-dot { background:var(--scene-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--scene-accent) 12%,transparent); }
body[data-game-style] .play-shell,body[data-game-style] .player-card,body[data-game-style] .game-stats strong { color:var(--ink); }
body[data-game-style] :is(.player-card span:not(.player-token),.turn-center span,.settings-label,.panel-heading span,.move-history .move-number,.move-history .move-side,.game-stats,.last-move-detail) { color:var(--muted); }
body[data-game-style] :is(.turn-center strong,.game-board-toolbar button,.record-tools button,.board-details summary) { color:var(--scene-accent); }
body[data-game-style] .game-header .round-button,body[data-game-style] .history-panel .round-button { color:var(--scene-accent); border-color:var(--line); background:transparent; }
body[data-game-style] .command-button.primary { background:var(--scene-accent); border-color:var(--scene-accent); }
body[data-game-style] .command-button.secondary { color:var(--scene-accent); background:#fff7; border-color:var(--line); }
body[data-game-style] .command-button.danger { color:#a16d5c; background:transparent; border-color:#b68b734d; }
body[data-game-style] .match-panel { background:transparent; color:var(--ink); border-color:var(--line); }
body[data-game-style] :is(.game-settings-panel,.panel-heading,.move-history li) { border-color:var(--line); }
body[data-game-style] .panel-heading strong { font-weight:400; color:var(--muted); font-size:11px; }
body[data-game-style] :is(.settings-options button,.classic-theme-options button) { color:var(--muted); background:#faf7ed66; border-color:var(--line); }
body[data-game-style] :is(.settings-options button,.classic-theme-options button).is-selected { color:var(--scene-accent); background:var(--scene-wash); border-color:var(--scene-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--scene-accent) 15%,transparent); }
body[data-game-style] .settings-options button:hover { background:var(--scene-wash); }
body[data-game-style] :is(.game-settings-panel select,.board-style-menu summary) { background:#faf8f080; border-color:var(--line); color:var(--scene-accent); }
body[data-game-style] .board-style-popup { background:#faf7ee; border-color:var(--line); box-shadow:0 18px 48px #43392924; }
body[data-game-style] .style-popup-heading { color:var(--ink); }
body[data-game-style] .style-popup-heading span { color:var(--muted); }
body[data-game-style] .game-stage.is-focused { background:radial-gradient(ellipse at 40% 30%,var(--scene-wash),var(--page)); }
body[data-game-style] .move-history { color:var(--ink); }
.scene-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:24px; }
.scene-heading > div > span { color:var(--muted); font:10px Georgia,serif; letter-spacing:.18em; }
.scene-heading h1 { margin:8px 0 0; font:400 30px/1.3 "SimSun","Songti SC",serif; letter-spacing:.12em; color:var(--ink); }
.scene-heading > p { margin:0 0 3px; color:var(--muted); font-size:11px; letter-spacing:.05em; }
.game-stage.is-focused .scene-heading { display:none; }
.classic-surface .piece { font-size:clamp(20px,7.2cqi,58px); font-weight:700; }
.classic-surface[data-placement="cells"] .board-cell { width:16%; }
.classic-surface[data-placement="cells"] .piece { font-size:clamp(20px,6.7cqi,55px); }
.classic-surface .piece { line-height:1; }
.style-mini { width:60px; height:60px; border:0; border-radius:0; background:none; }
.style-mini svg { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 2px 2px #56472720); }
.board-style-popup { width:342px; padding:18px; }
.board-style-popup button { min-height:106px; padding:10px 3px 8px; }
.board-style-popup button[data-game-value="jungle"] { grid-column:2; }
.board-details { margin-top:22px; padding-top:19px; }
.board-details summary { font-size:13px; font-weight:500; }
.board-details summary span { font-size:10px; }
.appearance-intro { margin:12px 0 0; font:12px/1.9 "KaiTi","STKaiti",serif; color:var(--muted); }
.appearance-section { padding:22px 0; border-bottom:1px solid var(--line); }
.appearance-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:15px; }
.appearance-section-heading h3 { margin:0; font-size:12px; font-weight:500; color:var(--ink); }
.appearance-section-heading > span { font-size:10px; color:var(--muted); text-align:right; }
.appearance-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.appearance-card { min-width:0; container-type:inline-size; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:12px 5px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:#faf7ed45; cursor:pointer; }
.appearance-card:hover { background:var(--scene-wash); border-color:color-mix(in srgb,var(--scene-accent) 65%,var(--line)); }
.appearance-card[aria-pressed="true"] { color:var(--scene-accent); border-color:var(--scene-accent); background:var(--scene-wash); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--scene-accent) 17%,transparent); }
.appearance-name { font-size:12px; font-weight:400; }
.appearance-card small { font-size:9px; line-height:1.6; color:var(--muted); }
.option-wood .appearance-options,.option-palette .appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.option-wood .appearance-card,.option-palette .appearance-card { padding:0 0 8px; border:0; background:transparent; box-shadow:none; gap:12px; }
.option-wood .appearance-name,.option-palette .appearance-name { font-size:11px; }
.appearance-swatch { display:block; width:100%; height:51px; border:1px solid #b1966f44; border-radius:3px; background:var(--sample-color); box-shadow:0 2px 0 #b5977330; }
.appearance-swatch.wood { background-image:url('./go-preview/assets/wood-grain-photo.webp'); background-size:cover; background-blend-mode:multiply; }
.appearance-card[aria-pressed="true"] .appearance-swatch { outline:1px solid var(--scene-accent); outline-offset:3px; }
.appearance-swatch.chess-walnut { background:conic-gradient(#745339 25%,#edd7b2 0 50%,#745339 0 75%,#edd7b2 0) 0 0/26px 26px; }
.appearance-swatch.chess-ebony { background:conic-gradient(#39362f 25%,#ece8d9 0 50%,#39362f 0 75%,#ece8d9 0) 0 0/26px 26px; }
.appearance-swatch.chess-green { background:conic-gradient(#4e6650 25%,#e9e4c7 0 50%,#4e6650 0 75%,#e9e4c7 0) 0 0/26px 26px; }
.appearance-swatch.ground-sand { background:url('./rustic-preview/assets/sand-color.webp') center/cover; }
.appearance-swatch.ground-earth { background:url('./rustic-preview/assets/earth-color.webp') center/cover; }
.appearance-swatch.ground-soil { background:url('./rustic-preview/assets/soil-color.webp') center/cover; }
.appearance-swatch.garden { background-image:radial-gradient(ellipse at 25% 70%,#56745744 0 13%,transparent 14%),radial-gradient(ellipse at 72% 25%,#faf3c233 0 20%,transparent 21%); }
.appearance-pair { display:flex; justify-content:center; align-items:center; height:49px; gap:10px; width:100%; }
.appearance-pair :is(.go-stone,.xq-piece) { position:relative; inset:auto; width:37px; height:37px; flex:none; }
.appearance-pair .xq-piece-label { font-size:23px; }
.appearance-pair .xq-piece::after { border-width:1.6px; }
.appearance-pair .go-stone { --stone-shadow:1px 2px 2px #32261340,2px 4px 5px #32261322; }
.appearance-glyphs { display:flex; justify-content:center; align-items:center; gap:10px; height:38px; }
.appearance-glyphs .xq-piece { position:relative; inset:auto; width:31px; height:34px; background:none; filter:none; }
.appearance-glyphs .xq-piece::before,.appearance-glyphs .xq-piece::after { display:none; }
.appearance-glyphs .xq-piece-label { font-size:31px; top:50%; }
.appearance-chess-piece { width:38px; height:52px; object-fit:contain; }
.appearance-pebble { width:36px; height:29px; border-radius:44% 55% 49% 50%; background:linear-gradient(145deg,#8a8c80,#343a32); box-shadow:1px 3px 4px #292a2340,inset -2px -2px 3px #2224,inset 1px 1px 2px #fff3; }
.appearance-pebble.sheep { background:linear-gradient(140deg,#f6f0d9,#acaa92); }
.appearance-pebble.material-grain { background-image:url('./rustic-preview/assets/pebble-color.webp'); background-size:100% 100%; background-blend-mode:soft-light; }
.appearance-pebble.material-granite { background-image:url('./rustic-preview/assets/granite-color.webp'); background-size:100% 100%; background-blend-mode:soft-light; }
.appearance-pebble.material-wet { box-shadow:1px 3px 4px #292a2360,inset -2px -2px 3px #2225,inset 3px 3px 2px #fff9; }
.appearance-pebble[data-distinction="size"] { background-color:#8f8875; background-image:linear-gradient(140deg,#c4bfa7,#777865); }
.appearance-pebble[data-distinction="size"].wolf { width:41px; height:34px; }
.appearance-pebble[data-distinction="size"].sheep { width:26px; height:22px; }
.appearance-shogi-piece { width:33px; height:44px; filter:drop-shadow(1px 2px 1px #5d3f2535); }
.appearance-shogi-piece.sheep { transform:rotate(180deg); width:31px; }
.appearance-ink { font:700 28px "KaiTi","STKaiti",serif; letter-spacing:.15em; color:var(--ink); }
.appearance-ink { font-family:"Wes Shogi Brush",serif; font-weight:400; }
.appearance-ink[data-writing="gyosho"] { font-family:"Wes Shogi Running",serif; }
.appearance-ink[data-writing="mincho"] { font-family:"Wes Shogi Mincho",serif; }
.appearance-lettering { color:var(--ink); font:18px "KaiTi","Yu Mincho",serif; padding-block:8px; }
.option-lettering [data-board-value="japanese"] { grid-column:1/-1; }
.appearance-ink-dot { display:block; width:28px; height:28px; border-radius:50%; background:var(--sample-color); margin:5px; box-shadow:inset 1px 1px 2px #fff3; }
.appearance-board-type { display:block; width:48px; height:48px; position:relative; transform:scaleY(.65); margin:0 0 4px; }
.appearance-board-type svg { display:block; width:100%; height:100%; }
.appearance-board-type.floor::after { content:''; position:absolute; left:8px; right:8px; top:100%; height:14px; border-inline:6px solid #9d7948; }
.appearance-placement { width:58px; height:58px; margin-bottom:3px; }
.appearance-classic-piece { display:grid; place-items:center; width:35px; height:35px; border:1px solid #bba273; border-radius:50%; color:#fff5dc; background:#304b3b; font:24px "KaiTi",serif; }
.appearance-classic-piece.sheep { background:#fffaf0; color:#3f533c; border-color:#8d9b7d; }
.appearance-animal { width:37px; height:37px; border-radius:50%; background:#f6e8c5 url('./assets/wolf-emblem.svg') center/100%; border:2px solid #aa5540; }
.appearance-animal.sheep { background-image:url('./assets/sheep-emblem.svg'); border-color:#5d7c94; }
.appearance-motion-path { display:block; width:min(100%,100px); height:32px; margin-bottom:1px; }
.appearance-demo { margin-top:14px; }
.appearance-demo-board { position:relative; isolation:isolate; container-type:inline-size; height:78px; border:1px solid #ab937444; border-radius:4px; background:url('./go-preview/assets/wood-grain-photo.webp') center/cover,#ead4ac; background-blend-mode:multiply; overflow:hidden; }
.appearance-demo-board[data-style="rustic"] { background-image:url('./rustic-preview/assets/sand-color.webp'); }
.appearance-demo-board[data-style="jungle"] { background:#d6dda9; }
.appearance-demo-board[data-style="classic"] { background:#dce5d5; }
.demo-track { position:absolute; left:22%; right:22%; top:50%; height:1px; background:#88745388; }
.demo-track::before,.demo-track::after { content:''; position:absolute; width:1px; height:9px; top:-4px; background:#887453; }
.demo-track::after { right:0; }
.demo-piece { position:absolute; left:calc(22% - 20px); top:calc(50% - 20px); width:40px; height:40px; display:grid; place-items:center; }
.demo-piece :is(.go-stone,.xq-piece) { inset:0; }
.demo-piece .xq-piece-label { font-size:24px; }
.demo-piece .xq-piece::after { border-width:1.6px; }
.demo-piece .appearance-chess-piece { height:55px; margin-top:-15px; }
.appearance-demo-play { display:block; margin:8px 0 0 auto; color:var(--scene-accent); background:transparent; border:0; font-size:11px; padding:5px 0 5px 8px; cursor:pointer; }
.board-check { position:relative; cursor:pointer; color:var(--muted); min-height:42px; }
.board-check input { position:absolute; opacity:0; right:0; width:34px; height:22px; margin:0; }
.appearance-toggle-track { display:block; width:31px; height:18px; border-radius:20px; background:#cecebd; flex:none; }
.appearance-toggle-track::before { content:''; display:block; width:14px; height:14px; margin:2px; border-radius:50%; background:#fffdf5; box-shadow:0 1px 2px #51472a22; transition:transform .15s; }
.board-check input:checked + .appearance-toggle-track { background:var(--scene-accent); }
.board-check input:checked + .appearance-toggle-track::before { transform:translateX(13px); }
.board-check input:focus-visible + .appearance-toggle-track { outline:2px solid var(--scene-accent); outline-offset:4px; }

/* Illustrated counters and a continuous field, using the live game's point IDs. */
.jg-board { --jungle-frame:#e4dfbb; --jungle-edge:#647e54; --jungle-tile-a:#c8d19a; --jungle-tile-b:#d7ddb0; --jungle-water:#a3c4b8; position:relative; width:100%; aspect-ratio:1; container-type:inline-size; border-radius:12px; box-shadow:0 7px 0 #baae8240,0 20px 38px #52663b23; isolation:isolate; user-select:none; }
.jg-board[data-palette="field"] { --jungle-frame:#e7d5ac; --jungle-edge:#a0874c; --jungle-tile-a:#e4ce91; --jungle-tile-b:#eddcae; --jungle-water:#aac5b6; }
.jg-board[data-palette="dusk"] { --jungle-frame:#c9cfba; --jungle-edge:#526e67; --jungle-tile-a:#96aea1; --jungle-tile-b:#b6c4ad; --jungle-water:#8daeb5; }
.jungle-artwork { position:absolute; inset:0; width:100%; height:100%; }
.jungle-grass { fill:none; stroke:var(--jungle-edge); stroke-width:2; opacity:.25; stroke-linecap:round; }
.jungle-ripple { fill:none; stroke:#ecf5d9; stroke-width:3; opacity:.55; stroke-linecap:round; }
.jungle-leaf { fill:var(--jungle-edge); opacity:.55; }
.jg-points { position:absolute; inset:0; }
.jg-point { position:absolute; width:16.2%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:none; transform:translate(-50%,-50%); }
.jg-point.is-selectable,.jg-point.is-target { cursor:pointer; }
.jg-point .piece { inset:8%; border:3px solid #ac5c42; background:#f8eccc url('./assets/wolf-emblem.svg') center/106% no-repeat; box-shadow:0 2px 0 #a9875c44,0 3px 5px #435b3a30; }
.jg-point .piece.sheep { border-color:#547b93; background-image:url('./assets/sheep-emblem.svg'); }
.jg-piece-label { position:absolute; bottom:-9%; left:27%; right:27%; text-align:center; border-radius:20px; background:#f8edd2; color:#8d4334; font:700 clamp(12px,3.5cqi,22px) "KaiTi",serif; box-shadow:0 1px 2px #4d593622; }
.sheep .jg-piece-label { color:#466b81; }
.jg-board:not(.show-labels) .jg-piece-label { display:none; }
.jg-point.is-selected .piece { outline:2px solid #a77d34; outline-offset:3px; }
.jg-point:is(.is-selected,.is-selectable:hover) .piece { transform:none; }
.jg-point.is-last::after { content:''; position:absolute; inset:2%; border:1px solid #aa843f; border-radius:50%; pointer-events:none; }
.jg-point .jg-hint { position:absolute; inset:36%; border-radius:50%; border:2px solid #f6f1d3; background:#6f8859; box-shadow:0 0 0 2px #647e5435; pointer-events:none; }
.jg-point.is-capture .jg-hint { inset:2%; background:none; border:2px dashed #ab5438; }
.jg-point.is-moving { z-index:5; }
.jg-last-marker { display:none; }
.jg-board .game-board-coordinates span { color:var(--jungle-edge); font-size:clamp(9px,1.8cqi,12px); text-shadow:none; }
.jg-board:not(.is-spatial) > .spatial-three-canvas { display:none !important; }
.jg-board.is-spatial { aspect-ratio:1.30; background:none; box-shadow:none; border-radius:0; }
.jg-board.is-spatial[data-view="top"] { aspect-ratio:1; }
.jg-board.is-spatial[data-view="low"] { aspect-ratio:1.32; }
.jg-board.is-spatial > .jungle-artwork { display:none; }
.jg-board.is-spatial .jg-points { z-index:2; pointer-events:none; overflow:hidden; }
.jg-board.is-spatial .jg-point { width:30px; height:30px; pointer-events:none; }
.jg-board.is-spatial .jg-point::after { display:none; }
.jg-board.is-spatial .jg-point:focus-visible { outline:2px solid #b88947; }
.jg-board .piece.is-in-motion { transition:none; }
.appearance-flock { color:var(--ink); font:19px "KaiTi",serif; padding:8px 0; }
.option-variation [data-board-value="mixed"] { grid-column:1/-1; }
@media(min-width:981px) { body[data-game-style] .play-shell { margin-top:25px; column-gap:46px; grid-template-columns:minmax(0,1fr) 310px; }.game-settings-panel { padding-top:5px; } }
@media(max-width:980px) { body[data-game-style] .game-header { width:calc(100% - 28px); }.scene-heading { margin-top:3px; margin-bottom:21px; }.match-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.65fr); gap:35px; }.game-settings-panel { border-bottom:0; }.history-panel { padding-top:18px; }.appearance-options { gap:10px; } }
@media(max-width:600px) { .match-panel { display:block; }.history-panel { margin-top:24px; border-top:1px solid var(--line); }.scene-heading { margin-bottom:19px; }.scene-heading h1 { font-size:27px; }.scene-heading > p { font-size:10px; max-width:45%; line-height:1.8; text-align:right; }.style-mini { width:55px; height:55px; } }
@media(prefers-reduced-motion:reduce) { .appearance-toggle-track::before { transition:none; } }

/* Allocate more of short windows to the board and keep its opening visible. */
.game-stage:not(.is-focused) .board { width:min(100%,920px,calc((100svh - 145px)*var(--game-board-ratio))); }
.game-stage:not(.is-focused) :is(.game-board-toolbar,.game-stats,.action-bar) { max-width:920px; }
@media(min-width:981px) {
 body[data-game-style] .game-header { min-height:54px; }
 body[data-game-style] .play-shell { grid-template-columns:minmax(0,1fr) 286px; column-gap:28px; margin-top:12px; }
 .scene-heading { margin-bottom:8px; align-items:center; }
 .scene-heading > div { display:flex; align-items:baseline; gap:14px; }
 .scene-heading h1 { margin:0; font-size:27px; }
 .versus-row { margin-bottom:8px; }
 .game-stage { position:relative; top:auto; }
}

/* Appearance lives beside the board; every match control lives below it. */
.match-below { width:100%; max-width:920px; margin:24px auto 40px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:28px; border-top:1px solid var(--line); padding-top:18px; text-align:left; }
.match-below .game-settings-panel { padding:0; border:0; }
.match-below .history-panel { margin:0; padding:0; border:0; min-width:0; }
.match-below .panel-heading { min-height:40px; padding:0 0 10px; }
.match-below .settings-group { margin-top:14px; }
.match-below .move-history { max-height:215px; min-height:54px; overflow-y:auto; padding-right:8px; }
.match-below .settings-difficulty-options { flex-wrap:wrap; }
.match-below .settings-options button { flex:1; min-width:44px; }
.game-stage.is-focused .match-below { display:none; }
body[data-game-style] .match-panel { display:block; align-self:start; }
@media(min-width:981px) {
 body[data-game-style] .match-panel { position:sticky; top:14px; max-height:calc(100svh - 28px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding-right:9px; }
}
@media(max-width:980px) { body[data-game-style] .match-panel { padding:18px 0 40px; }.match-panel > .game-settings-panel { max-width:650px; margin:auto; }.match-panel .appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); }.option-variation [data-board-value="mixed"] { grid-column:auto; } }
@media(max-width:600px) { .match-below { grid-template-columns:minmax(0,1fr); gap:24px; margin:20px 0 10px; }.match-below .history-panel { border-top:1px solid var(--line); padding-top:18px; }.match-panel .appearance-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.option-weather .appearance-options,.option-landscape .appearance-options,.option-palette .appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.appearance-swatch canvas { display:block; width:100%; height:100%; border-radius:inherit; }
.option-landscape .appearance-options,.option-weather .appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.option-landscape .appearance-card { padding:0 0 9px; gap:9px; }
.option-landscape small,.option-weather small,.option-palette small { font-size:9px; text-align:center; }
.appearance-weather { width:65px; height:40px; }
.appearance-card:has(.appearance-weather) { padding:6px 2px 9px; }
.board-environment { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
.jungle-natural { display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; }
.jg-board[data-landscape="garden"] .jungle-natural,.jg-board.is-spatial .jungle-natural { display:none; }
.jg-board:not([data-landscape="garden"]):not(.is-spatial) > .jungle-artwork { opacity:0; }
.jg-board:not([data-landscape="garden"]) .game-board-coordinates span { text-shadow:0 1px 2px #fff8; }
.animal-motion-demo { width:100%; height:100%; display:block; }
.appearance-demo-board:has(.animal-motion-demo) { height:110px; background:#d4dcb8; }
body[data-game-style] :is(.player-token,.turn-marker).themed-token { position:relative; width:38px; height:38px; flex-shrink:0; border:0; background:none; box-shadow:none; display:flex; align-items:center; justify-content:center; overflow:visible; font-size:0; }
.themed-token :is(.go-stone,.xq-piece) { position:relative; inset:auto; width:33px; height:33px; }
.themed-token .xq-piece-label { font-size:21px; }
.themed-token .xq-piece::after { border-width:1.5px; }
.themed-token .appearance-chess-piece { width:33px; height:43px; }
.themed-token .appearance-shogi-piece { width:28px; height:36px; }
.themed-token .appearance-animal { width:33px; height:33px; }
.themed-token .appearance-classic-piece { width:32px; height:32px; font-size:22px; }
.themed-token .appearance-classic-piece.wolf { background:var(--classic-wolf); border-color:var(--classic-wolf-line); }
.themed-token .appearance-classic-piece.sheep { background:var(--classic-sheep); border-color:var(--classic-sheep-line); color:var(--classic-ink); }
.jg-board:not(.is-spatial)[data-weather="rainy"] :is(.jungle-natural,.jungle-artwork) { filter:brightness(.85) saturate(.8); }
.themed-token .appearance-pebble { display:block; width:32px; height:26px; flex-shrink:0; }
.themed-token .appearance-pebble[data-distinction="size"].wolf { width:37px; height:31px; }
.themed-token .appearance-pebble[data-distinction="size"].sheep { width:23px; height:20px; }
.themed-token .player-animal { display:block; width:47px; height:47px; object-fit:contain; }
body[data-game-style] .turn-marker.themed-token { width:28px; height:28px; }
.turn-marker.themed-token > * { transform:scale(.72); }

/* Palette samples share a top edge and a caption baseline. */
.option-palette .appearance-card,.option-wood .appearance-card,.option-landscape .appearance-card { justify-content:flex-start; align-self:stretch; }
.option-palette .appearance-name,.option-wood .appearance-name { min-height:16px; }
body[data-game-style="classic"] { --page:#f1ece2; --surface:#faf7ef; --scene-wash:#fcf9f1; --ink:#343a32; --muted:#827f72; --line:#dad3c5; --scene-accent:#536752; }
body[data-game-style="classic"][data-classic-theme="blue"] { --page:#eef0ef; --scene-wash:#fafbf7; --scene-accent:#536c77; --line:#d4dbd9; }
body[data-game-style="classic"][data-classic-theme="paper"] { --page:#f0e9dd; --scene-wash:#fcf8ef; --scene-accent:#80694c; --line:#dacfbb; }
body[data-game-style="classic"][data-classic-theme="night"] { --page:#e7e5de; --scene-wash:#f6f4ec; --scene-accent:#495b50; --line:#cccfc5; }
body:is([data-game-style="rustic"],[data-game-style="jungle"])[data-board-weather="rainy"] { --page:#dee4e2; --scene-wash:#eef1ef; --ink:#394441; --muted:#7d8785; --scene-accent:#607769; --line:#c3cfca; }
.style-mini { width:90px; height:74px; display:block; }
.style-mini img { display:block; width:100%; height:100%; object-fit:contain; border-radius:3px; }
.board-style-popup { width:370px; }
.board-style-popup button { min-height:115px; }
@media(max-width:600px) { .board-style-popup { width:min(370px,calc(100vw - 24px)); }.style-mini { width:80px; height:67px; } }

/* Compact match controls, shared by every appearance. */
.match-below { margin-top:10px; padding-top:10px; gap:20px; }
.match-below .settings-group:first-child { margin-top:0; }
.match-below .settings-label { margin-bottom:5px; }
.match-below .panel-heading { min-height:25px; padding-bottom:5px; }
.match-below .record-tools { margin:4px 0 7px; }
.custom-difficulty-entry { display:flex; align-items:center; justify-content:space-between; width:100%; border:1px solid var(--line,#d1d6cd); background:transparent; color:var(--scene-accent,#526b56); border-radius:6px; padding:10px 14px; font:inherit; font-size:13px; cursor:pointer; margin-top:18px; }
#setup-custom-difficulty { margin-top:10px; }
.quiet-entry { cursor:pointer; }
.quiet-entry:focus-visible { outline:1px solid var(--scene-accent); outline-offset:5px; }
.move-history .opening-record { display:block; width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; background:var(--scene-wash); color:var(--scene-accent); text-align:center; opacity:1; font:inherit; }
.board-menu-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.modal-card.custom-difficulty-dialog { width:min(760px,calc(100vw - 28px)); max-height:calc(100svh - 40px); overflow:auto; }
.custom-tier-heading,.custom-tier-row { display:grid; grid-template-columns:50px minmax(0,1fr) minmax(0,1fr); align-items:center; gap:12px; padding:9px 0; }
.custom-tier-heading { font-size:12px; color:var(--muted,#727d70); }
.custom-tier-row strong { font-size:13px; font-weight:500; }
.custom-difficulty-dialog select { width:100%; min-width:0; padding:10px 6px; border:1px solid var(--line,#ccd2c6); border-radius:5px; font:inherit; font-size:12px; background:var(--surface,#f8faf5); color:var(--ink,#354738); }
.custom-current { margin-top:18px; border-top:1px solid var(--line); padding-top:15px; }
.custom-current label { display:block; font-size:12px; margin-bottom:10px; }
.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; }
.dialog-actions > button:first-child { border:0; background:none; color:var(--muted); cursor:pointer; }
.personal-settings-dialog { width:min(420px,calc(100vw - 28px)); }
.audio-preferences label { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-top:1px solid var(--line,#d6dbd0); font-size:13px; }
.audio-preferences input[type=range] { width:140px; }
#secret-board-fields:empty::before { content:'留心每一步，也听听棋盘的声音。'; display:block; margin-bottom:20px; color:var(--muted); font-size:13px; }
.appearance-more { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.appearance-more span { margin-left:4px; font-size:11px; opacity:.7; }
.appearance-card[hidden] { display:none!important; }
.appearance-board-type { width:88px; height:68px; transform:none; margin:0; }
.appearance-board-type.floor::after { display:none; }
.chess-symbol { display:block; width:45px; height:52px; }
.themed-token .chess-symbol { width:36px; height:39px; }
.stone-shape-sample { width:70px; height:44px; }
.classic-surface::before { display:none; }
.classic-surface .game-board-coordinates span { font-size:clamp(10px,2cqi,13px); }
@media(max-width:600px) { .custom-tier-heading,.custom-tier-row { gap:6px; grid-template-columns:38px minmax(0,1fr) minmax(0,1fr); }.custom-difficulty-dialog select { font-size:11px; padding:10px 2px; }.custom-tier-row strong { font-size:12px; } }

.board-wrap:has(.classic-surface[data-coordinates="true"]) { padding-inline:14px; padding-bottom:27px; }

.appearance-pebble.material-flint { background:linear-gradient(130deg,#cec9b9 0%,#7c8079 35%,#a6a99b 54%,#62675d 56%,#b3b3a6 85%); border-radius:42% 55% 34% 48%; }
.appearance-pebble[data-shape="angular"] { border-radius:28% 42% 23% 34%; clip-path:polygon(4% 45%,20% 10%,54% 0,94% 30%,87% 81%,41% 100%,7% 77%); }
.appearance-pebble[data-shape="mixed"].wolf { border-radius:32% 52% 27% 40%; }
.appearance-pebble[data-distinction="size"].wolf { width:44px; height:38px; }
.appearance-pebble[data-distinction="size"].sheep { width:27px; height:23px; }