/* Five legal lines in each direction. Xiangqi appearance, Wolves Eat Sheep rules. */
:root, [data-font="clerical"] { --wolf-glyph: url("./assets/lettering/clerical-wolf.svg"); --sheep-glyph: url("./assets/lettering/clerical-sheep.svg"); }
[data-font="oracle"] { --wolf-glyph: url("./assets/lettering/oracle-wolf.svg?v=20261006-5"); --sheep-glyph: url("./assets/lettering/oracle-sheep.svg?v=20261006-5"); }
[data-font="bronze"] { --wolf-glyph: url("./assets/lettering/bronze-wolf.svg?v=20261006-5"); --sheep-glyph: url("./assets/lettering/bronze-sheep.svg?v=20261006-5"); }
[data-font="seal"] { --wolf-glyph: url("./assets/lettering/seal-wolf.svg?v=20261006-5"); --sheep-glyph: url("./assets/lettering/seal-sheep.svg?v=20261006-5"); }
[data-font="regular"] { --wolf-glyph: url("./assets/lettering/regular-wolf.svg"); --sheep-glyph: url("./assets/lettering/regular-sheep.svg"); }
[data-font="running"] { --wolf-glyph: url("./assets/lettering/running-wolf.svg"); --sheep-glyph: url("./assets/lettering/running-sheep.svg"); }
.xq-board {
  --wood-color: #dfbd87; --wood-light: #f3dcad; --wood-side: #9a663a;
  --grid-ink: #58412d; --frame-ink: #82603e; --point-size: 17%;
  position: relative; isolation: isolate; width: 100%; aspect-ratio: 1;
  container-type: inline-size; border: 1px solid #9b744c; border-radius: 5px;
  background: linear-gradient(125deg, var(--wood-light), var(--wood-color) 66%, color-mix(in srgb, var(--wood-color) 90%, #88653c));
  box-shadow: inset 0 1px 2px #fff7, inset 1px 0 1px #fff5,
    0 2px 0 #b38959, 0 5px 0 var(--wood-side), 0 7px 0 #694623,
    3px 12px 12px #4c321c24, 12px 26px 45px #50372322;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.xq-board[data-wood="light"] { --wood-color: #e9d4ae; --wood-light: #f9eacb; --wood-side: #b59164; --grid-ink: #65503b; --frame-ink: #9b7651; border-color: #ba966d; }
.xq-board[data-wood="dark"] { --wood-color: #bd9567; --wood-light: #d9b788; --wood-side: #85532d; --grid-ink: #3f2c1c; --frame-ink: #6c472e; border-color: #8b603b; }
.xq-board[data-ink="vermilion"] { --grid-ink: #91432f; --frame-ink: #a45e40; }
.xq-grain { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("./assets/wood-grain.webp") center / 100% 100%; opacity: .63; mix-blend-mode: multiply; pointer-events: none; }
.xq-board::before { content: ""; position: absolute; z-index: -2; left: -1px; right: -1px; top: 100%; height: 6px; border-radius: 0 0 4px 4px; background: url("./assets/wood-grain.webp") center bottom / 100% auto, var(--wood-side); background-blend-mode: multiply; box-shadow: inset 0 -1px 1px #4d2f24; pointer-events: none; }
.xq-board::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffecc166, inset 0 3px 5px #fff2, inset 0 -2px 3px #66432524; pointer-events: none; }
.xq-grid, .xq-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xq-grid path { fill: none; stroke: var(--grid-ink); stroke-width: 1.7px; vector-effect: non-scaling-stroke; stroke-linecap: square; filter: drop-shadow(0 .45px 0 #f8e4b99c); }
.xq-grid .xq-register { stroke-width: 1.65px; opacity: .95; }
.xq-frame { fill: none; stroke: var(--frame-ink); stroke-width: .9px; vector-effect: non-scaling-stroke; }
.xq-frame path { stroke-width: 1.1px; }
.xq-board-inscription { position: absolute; left: 40%; right: 40%; bottom: 3.6%; display: flex; justify-content: center; align-items: center; gap: .5cqi; color: var(--frame-ink); font: 500 clamp(8px, 1.6cqi, 11px) "KaiTi", "SimSun", serif; letter-spacing: .15em; white-space: nowrap; opacity: .75; pointer-events: none; }
.xq-board-inscription i { display: block; width: 1.9cqi; height: 1px; background: currentColor; }
.xq-points { position: absolute; inset: 0; }
.xq-point { position: absolute; z-index: 1; width: var(--point-size); aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); background: none; border: 0; border-radius: 50%; cursor: default; -webkit-tap-highlight-color: transparent; }
.xq-point.is-selectable, .xq-point.is-target, .xq-point.is-placement { cursor: pointer; }
.xq-point:focus-visible { outline: 2px solid #914831; outline-offset: -2px; }
.xq-piece {
  --piece-face: url("./assets/piece-boxwood.svg"); --piece-ink: #9e3326; --flat-color: #e6c08b;
  position: absolute; inset: 0; display: block; border-radius: 50%; font-style: normal;
  background: var(--piece-face) center / 100% 100% no-repeat;
  filter: drop-shadow(.2cqi .35cqi .19cqi #3420114d) drop-shadow(.25cqi .5cqi .5cqi #36291b24);
  pointer-events: none;
}
.xq-piece.sheep { --piece-ink: #292d28; }
.xq-point .xq-piece { inset: 1.5%; }
.xq-piece::before { content: ""; position: absolute; inset: 10% 10% 17%; border-radius: 50%; background: url("./assets/wood-grain.webp") center / 250% 250%; mix-blend-mode: multiply; opacity: .10; transform: rotate(var(--grain-angle, 0deg)); }
/* Shallow engraved rings sit in the top face, centered with the lettering. */
.xq-piece::after { content: ""; position: absolute; left: 16%; right: 16%; top: 14%; bottom: 21%; border: max(2px, .36cqi) solid var(--piece-ink); border-radius: 50%; opacity: .94; box-shadow: 0 .09cqi .04cqi #fff4, inset 0 .09cqi .04cqi #39221140; }
.xq-piece-label { position: absolute; z-index: 1; left: 0; right: 0; top: 46.5%; transform: translateY(-50%); text-align: center; font: 400 clamp(23px, 8cqi, 56px)/1 serif; color: transparent; }
.xq-piece-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; transform: translate(-50%, -50%); background: var(--piece-ink); mask: var(--wolf-glyph) center / contain no-repeat; filter: drop-shadow(0 .10cqi .05cqi #fff5); }
.xq-piece.sheep .xq-piece-label::after { mask-image: var(--sheep-glyph); }
.xq-board:not(.show-labels) .xq-piece-label { display: none; }
[data-pieces="rosewood"] .xq-piece { --piece-face: url("./assets/piece-rosewood.svg"); --flat-color: #c8a373; }
[data-pieces="ebony"] .xq-piece { --piece-face: url("./assets/piece-ebony.svg"); --flat-color: #ded0ad; }
[data-pieces="resin"] .xq-piece { --piece-face: url("./assets/piece-resin.svg"); --flat-color: #efe4cc; }
[data-pieces="resin"] .xq-piece::before { opacity: 0; }
[data-pieces="ebony"] .xq-piece::before { opacity: .04; }
@media (hover: hover) { .xq-point.is-selectable:not(.is-selected):hover .xq-piece { filter: brightness(1.045) drop-shadow(.2cqi .35cqi .19cqi #3420114d); } }
.xq-point.is-selected { z-index: 2; }
.xq-point.is-selected::after { content: ""; position: absolute; inset: 3%; border: 2px solid #b55a34; border-radius: 50%; box-shadow: 0 0 0 2px #fff4da80, 0 0 9px #c3844c55; pointer-events: none; }
.xq-point.is-selected:focus-visible { outline: none; }
.xq-last-marker { position: absolute; z-index: 2; width: 8%; aspect-ratio: 1; right: 14%; top: 16%; border: 1px solid #f9e4ae; border-radius: 50%; background: #a65a31; pointer-events: none; }
.xq-point.is-selected .xq-last-marker { display: none; }
.xq-hint { position: absolute; inset: 38%; border-radius: 50%; border: 1px solid #707651; background: #79825380; box-shadow: 0 0 0 4px #fff0cc40; pointer-events: none; }
.xq-point.is-capture .xq-hint { z-index: 3; inset: 6%; border: 2px dashed #a34830; background: transparent; box-shadow: 0 0 0 2px #fbe2b752; }
.xq-placement-ghost { position: absolute; inset: 6%; border: 1px solid #a76345; border-radius: 50%; background: #edce9c; opacity: 0; pointer-events: none; }
.xq-point.is-placement:hover .xq-placement-ghost { opacity: .38; }
.xq-placement-ghost.sheep { border-color: #484839; }
.xq-coordinate { position: absolute; transform: translate(-50%, -50%); color: color-mix(in srgb, var(--grid-ink) 75%, transparent); font: 400 clamp(10px, 2cqi, 12px) Georgia, serif; pointer-events: none; }
.xq-point.is-moving { z-index: 5; }
.xq-piece.is-in-motion { z-index: 1; filter: none; will-change: transform; }
.xq-point.is-moving .xq-last-marker { visibility: hidden; }
.xq-motion-shadow { position: absolute; z-index: 0; border-radius: 50%; background: #39271255; filter: blur(2px); pointer-events: none; }
.xq-captured-ghost { position: absolute; z-index: 3; width: var(--point-size); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.xq-captured-ghost .xq-piece { inset: 1.5%; }
[data-volume="flat"] .xq-piece { background: none; filter: none; }
[data-volume="flat"] .xq-piece::before { inset: 3.5% 4.3% 5.5%; background: var(--flat-color); border: 1px solid #6e51394d; opacity: 1; mix-blend-mode: normal; transform: none; }
@container (max-width: 400px) { .xq-grid path { stroke-width: 1.5px; } .xq-grid .xq-register { stroke-width: 1.6px; } }

.xq-board[data-wood="bamboo"] { --wood-color:#d9c69b; --wood-light:#f2e5c6; --wood-side:#a68c56; }.xq-board[data-wood="redwood"] { --wood-color:#c6815b; --wood-light:#e7b58d; --wood-side:#894b31; }.xq-board[data-wood="ash"] { --wood-color:#c4b4a0; --wood-light:#e6ded0; --wood-side:#8e7f6b; }