/* =============================================================
   GAME: Chinese Chess (Xiangqi)
   ============================================================= */
.board-xiangqi {
  --cell: min(calc((100vw - 72px) / 9), 50px);
  --xq-glow: #35ffd1;
  display: flex; flex-direction: column; gap: 6px; width: calc(var(--cell) * 9 + 12px);
}
.xq-grid {
  position: relative; display: grid; grid-template-columns: repeat(9, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #0a1b1d;
  box-shadow: 0 0 0 2px var(--xq-glow), 0 0 26px rgba(53, 255, 209, .35);
}
.xq-lines { position: absolute; left: 6px; top: 6px; width: calc(var(--cell) * 9); height: calc(var(--cell) * 10); pointer-events: none; }
.xq-lines .ln { fill: none; stroke: rgba(53, 255, 209, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.xq-lines .mk { stroke: rgba(53, 255, 209, .4); }
.xq-lines .river { fill: rgba(53, 255, 209, .07); }

.xq-pt { position: relative; border: 0; padding: 0; margin: 0; background: transparent; display: grid; place-items: center; cursor: default; border-radius: 50%; }
.xq-pt.movable, .xq-pt.dest, .xq-pt.cap { cursor: pointer; }
.xq-pt:focus { outline: none; }
.xq-pt:focus-visible { box-shadow: 0 0 0 3px var(--focus); z-index: 3; }
.xq-pt.last::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2px dashed rgba(255, 210, 63, .8); z-index: 2; pointer-events: none; }
.xq-pt.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(53, 255, 209, .7); box-shadow: 0 0 8px rgba(53, 255, 209, .9); z-index: 2; }
.xq-pt.dest:hover::after { width: 42%; height: 42%; }
.xq-pt.cap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(53, 255, 209, .9), 0 0 10px rgba(53, 255, 209, .7); z-index: 2; }

.xq-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* pieces: ivory face over a wooden edge, bevel highlight, engraved ring + character, contact shadow */
.xq-pc { position: relative; width: 92%; height: 92%; z-index: 1; pointer-events: none; overflow: visible; transition: transform .15s, filter .15s; filter: drop-shadow(0 1.6px 1.4px rgba(0, 0, 0, .65)); }
.xq-pc .sd { fill: url(#xq-side); }
.xq-pc .fc { fill: url(#xq-face); }
.xq-pc .bv { fill: none; stroke: url(#xq-bevel); stroke-width: 1.3; }
.xq-pc .i { fill: none; stroke-width: 1.2; }
.xq-pc circle.hl { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: .8; }
.xq-pc text { font: 700 21px "Noto Serif SC", "Noto Serif TC", "Songti SC", "STSong", "SimSun", "Microsoft YaHei", "PingFang SC", serif; text-anchor: middle; dominant-baseline: central; }
.xq-pc text.hl { fill: rgba(255, 255, 255, .85); stroke: rgba(255, 255, 255, .85); stroke-width: .5; }
.xq-pc.lt text { font: 800 19px var(--font-body); }
.xq-pc.r .i { stroke: #c22a2a; }
.xq-pc.r text:not(.hl) { fill: #b5121b; stroke: #b5121b; stroke-width: .5; }
.xq-pc.b .i { stroke: #2b2620; }
.xq-pc.b text:not(.hl) { fill: #1b1814; stroke: #1b1814; stroke-width: .5; }
.xq-pt.movable:hover .xq-pc { transform: translateY(-1.5px) scale(1.05); }
.xq-pt.sel .xq-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 5px rgba(53, 255, 209, .95)); }
.xq-pt.check .xq-pc { animation: xq-check .8s ease-in-out infinite alternate; }
@keyframes xq-check {
  from { filter: drop-shadow(0 1.6px 1.4px rgba(0, 0, 0, .65)) drop-shadow(0 0 3px #ff3d7f); }
  to { filter: drop-shadow(0 1.6px 1.4px rgba(0, 0, 0, .65)) drop-shadow(0 0 9px #ff3d7f) drop-shadow(0 0 3px #ff3d7f); }
}
@media (prefers-reduced-motion: reduce) { .xq-pt.check .xq-pc { filter: drop-shadow(0 0 6px #ff3d7f); } }

.xq-strip { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.xq-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.xq-who.active { color: var(--ink); }
.xq-who .dot { width: 12px; height: 12px; }
.xq-caps { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; gap: 1px; }
.xq-pc.cap { width: 19px; height: 19px; filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .6)); }
.xq-dot.r { background: #ff3d5e; box-shadow: 0 0 8px rgba(255, 61, 94, .7); }
.xq-dot.b { background: var(--t-black); box-shadow: 0 0 0 2px var(--xq-glow, #35ffd1); }
.xq-chk { color: var(--t-red); text-transform: uppercase; letter-spacing: .04em; }

.xq-letters { min-height: 38px; padding: 6px 14px; }
.xq-letters[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #35ffd1; color: #35ffd1; }