/* Five playable squares per side; the host continues to own the wolf/sheep rules. */
:root, [data-pieces="classic"] { --wolf-piece: url("./assets/classic-wolf.png"); --sheep-piece: url("./assets/classic-sheep.png"); }
[data-pieces="wood"] { --wolf-piece: url("./assets/wood-wolf.png"); --sheep-piece: url("./assets/wood-sheep.png"); }
[data-pieces="porcelain"] { --wolf-piece: url("./assets/porcelain-wolf.png"); --sheep-piece: url("./assets/porcelain-sheep.png"); }
[data-pieces="metal"] { --wolf-piece: url("./assets/metal-wolf.png"); --sheep-piece: url("./assets/metal-sheep.png"); }
:root, [data-board="walnut"] { --square-light: #e5ce9d; --square-dark: #79553b; --frame: #53382a; --frame-edge: #33231c; --inlay: #ccab74; --coordinate-ink: #dec495; }
[data-board="ebony"] { --square-light: #e1ddcb; --square-dark: #34393a; --frame: #272d2e; --frame-edge: #171d20; --inlay: #ae9b73; --coordinate-ink: #c4bc9d; }
[data-board="green"] { --square-light: #e6dfcc; --square-dark: #566d59; --frame: #4e3c2a; --frame-edge: #2a271c; --inlay: #bdab75; --coordinate-ink: #ded2ad; }
.ch-board { --tile-size: 16.8%; position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 1; border: max(2px, .5cqi) solid var(--frame-edge); border-radius: 5px; background: var(--frame); box-shadow: inset 0 1px 1px #ffecb455, 0 5px 0 var(--frame-edge), 0 7px 1px #b8a084, 0 17px 30px #45382c2b, 0 40px 65px #4b423614; }
.ch-wood { position: absolute; inset: 0; border-radius: inherit; background: url("../go-preview/assets/wood-grain-photo.webp") center / cover; mix-blend-mode: soft-light; opacity: .56; pointer-events: none; }
.ch-board::before { content: ""; position: absolute; inset: 2.5%; border: 1px solid var(--inlay); border-radius: 1px; opacity: .65; pointer-events: none; }
.ch-board::after { content: ""; position: absolute; inset: 6.9%; border: 1px solid #080e0d90; box-shadow: 0 0 0 1px var(--inlay), inset 0 1px 4px #241c1766; pointer-events: none; }
.ch-squares { position: absolute; inset: 8%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); outline: 1px solid var(--inlay); box-shadow: 0 0 0 3px var(--frame-edge), 0 0 0 4px var(--inlay); }
.ch-square { position: relative; background: var(--square-light); overflow: hidden; }
.ch-square.dark { background: var(--square-dark); }
.ch-square::before { content: ""; position: absolute; inset: 0; background: url("../go-preview/assets/wood-grain-photo.webp") var(--grain-x) var(--grain-y) / 490% 430%; mix-blend-mode: multiply; opacity: .23; transform: rotate(90deg); }
.ch-square:nth-child(3n)::before { transform: none; opacity: .20; }
[data-board="ebony"] .ch-square::before { opacity: .13; }
[data-board="green"] .ch-square::before { opacity: .05; }
.ch-square::after { content: ""; position: absolute; inset: 0; box-shadow: inset 1px 1px 0 #fff1, inset -1px -1px 0 #201a1419; }
.ch-points, .ch-coordinates { position: absolute; inset: 0; }
.ch-point { position: absolute; display: block; width: var(--tile-size); height: var(--tile-size); transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 1px; background: transparent; -webkit-tap-highlight-color: transparent; z-index: var(--row-layer); }
.ch-point:focus-visible { outline: 2px solid #d7af58; outline-offset: -4px; }
.ch-point::before { content: ""; position: absolute; inset: 5%; border: 1px solid transparent; pointer-events: none; }
.ch-point.is-selectable { cursor: pointer; }
@media (hover: hover) { .ch-point.is-selectable:not(.is-selected):hover::before { background: #efdca41c; border-color: #ebd69a70; } }
.ch-point.is-selected::before { inset: 2%; background: #ddba6061; border: 2px solid #edd296; box-shadow: inset 0 0 12px #b48a4170; }
.ch-point.is-selected:focus-visible { outline: none; }
.ch-piece { position: absolute; left: 0; bottom: 6%; width: 100%; height: 113%; display: block; background: var(--wolf-piece) center bottom / contain no-repeat; transform-origin: 50% 92%; pointer-events: none; filter: drop-shadow(2px 3px 2px #201b1966); }
.ch-piece.sheep { background-image: var(--sheep-piece); }
.ch-piece::before { content: ""; position: absolute; z-index: -1; left: 25%; right: 21%; bottom: 2%; height: 13%; border-radius: 50%; background: #1c201d45; filter: blur(2px); transform: rotate(-9deg); }
.ch-piece-label { position: absolute; z-index: 1; left: 50%; bottom: 3%; transform: translateX(-50%); padding: .2em .36em; border: 1px solid #c3b28f; border-radius: 3px; background: #252c27e8; color: #f7edd7; font: 500 clamp(9px, 2cqi, 12px)/1 "Microsoft YaHei UI", sans-serif; box-shadow: 0 1px 2px #161c1b33; }
.ch-piece.sheep .ch-piece-label { color: #34382d; background: #f2ead6ed; }
:is(.ch-board, .motion-demo-board):not(.show-labels) .ch-piece-label { display: none; }
.ch-hint { position: absolute; left: 40%; top: 40%; width: 20%; height: 20%; border-radius: 50%; background: #4658408c; border: 1px solid #f4edd380; box-shadow: 0 0 0 5px #e9dab52b; pointer-events: none; }
.ch-point.is-target::before { border-color: #f1e3b15c; }
.ch-point.is-capture .ch-hint { inset: 5%; width: auto; height: auto; border-radius: 2px; border: 2px dashed #d29251; background: #c686351a; box-shadow: 0 0 0 1px #f8e1bb80; }
.ch-last-marker { position: absolute; z-index: 1; right: 12%; bottom: 17%; width: 8%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #faf1d9; background: #bb8a43; pointer-events: none; }
.ch-point.is-selected .ch-last-marker { display: none; }
.ch-placement-ghost { position: absolute; inset: 0; background: var(--wolf-piece) center bottom / auto 113% no-repeat; opacity: 0; pointer-events: none; }
.ch-placement-ghost.sheep { background-image: var(--sheep-piece); }
.ch-point.is-placement:hover .ch-placement-ghost { opacity: .4; }
.ch-coordinate { position: absolute; transform: translate(-50%, -50%); color: var(--coordinate-ink); font: 400 clamp(10px, 2.3cqi, 15px)/1 Georgia, serif; pointer-events: none; }
.ch-inscription { position: absolute; bottom: 1.15%; left: 0; right: 0; text-align: center; color: var(--coordinate-ink); opacity: .45; font: 400 clamp(6px, 1.1cqi, 9px) Georgia, serif; pointer-events: none; }
.ch-point.is-moving { z-index: 20; }
.ch-piece.is-in-motion { will-change: transform; filter: none; }
.ch-piece.is-in-motion::before { opacity: 0; }
.ch-point.is-moving .ch-last-marker { visibility: hidden; }
.ch-motion-shadow { position: absolute; z-index: -1; border-radius: 50%; background: #18201d70; filter: blur(2px); pointer-events: none; }
.ch-captured-ghost { position: absolute; z-index: 15; width: var(--tile-size); height: var(--tile-size); transform: translate(-50%, -50%); pointer-events: none; }
[data-shadows="false"] .ch-piece { filter: none; }
[data-shadows="false"] .ch-piece::before { display: none; }
.ch-mini, .ch-sample, .ch-sculpture { display: block; background: var(--wolf-piece) center bottom / contain no-repeat; font-style: normal; }
:is(.ch-mini, .ch-sample, .ch-sculpture).sheep { background-image: var(--sheep-piece); }

/* The main board now renders actual meshes. DOM points remain for keyboard access. */
.ch-board.is-three { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.ch-board.is-three:not(.is-flat) { aspect-ratio: 1.22; }
.ch-board.is-three::before, .ch-board.is-three::after { display: none; }
.ch-board.is-three :is(.ch-wood, .ch-squares, .ch-coordinates, .ch-inscription) { display: none; }
.ch-three-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.can-orbit .ch-three-canvas { touch-action: none; cursor: grab; }
.can-orbit .ch-three-canvas:active { cursor: grabbing; }
.ch-board.is-three .ch-points { z-index: 2; pointer-events: none; overflow: hidden; }
.ch-board.is-three .ch-point { width: 30px; height: 30px; z-index: 1; pointer-events: none; }
.ch-board.is-three .ch-point::before, .ch-board.is-three .ch-point :is(.ch-piece, .ch-hint, .ch-placement-ghost) { display: none; }
.ch-board.is-three .ch-point:focus-visible { outline: 2px solid #d4a654; outline-offset: 3px; border-radius: 50%; }
.ch-loading { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #858572; font-size: 12px; pointer-events: none; }
.context-lost::after { content: "三维画面暂时中断，请刷新页面"; position: absolute; inset: 0; display: grid; place-items: center; color: #776b56; background: #edeae2e8; font-size: 12px; }
.ch-board.is-three.is-flat { background: var(--frame); border: 3px solid var(--frame-edge); border-radius: 5px; box-shadow: 0 5px 0 var(--frame-edge), 0 17px 30px #45382c2b; }
.ch-board.is-three.is-flat::before, .ch-board.is-three.is-flat::after { display: block; }
.ch-board.is-three.is-flat :is(.ch-wood, .ch-squares, .ch-coordinates, .ch-inscription) { display: block; }
.ch-board.is-three.is-flat .ch-squares { display: grid; }
.ch-board.is-three.is-flat .ch-three-canvas { z-index: 1; }
.ch-board.is-three.is-flat .ch-point { width: var(--tile-size); height: var(--tile-size); }
.ch-board.is-three.is-flat .ch-point::before, .ch-board.is-three.is-flat .ch-hint { display: block; }
.ch-board.is-three:not(.is-flat) .ch-last-marker { display: none; }