/* =============================================================
   GAME: Co Up (hidden xiangqi)
   ============================================================= */
.board-coup {
  --cell: min(calc((100vw - 72px) / 9), 50px);
  --cu-glow: #ffc857;
  display: flex; flex-direction: column; gap: 6px; width: calc(var(--cell) * 9 + 12px);
}
.cu-grid {
  position: relative; display: grid; grid-template-columns: repeat(9, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: linear-gradient(180deg, #1c0d2c, #130822);
  box-shadow: 0 0 0 2px var(--cu-glow), 0 0 26px rgba(255, 200, 87, .32);
}
.cu-lines { position: absolute; left: 6px; top: 6px; width: calc(var(--cell) * 9); height: calc(var(--cell) * 10); pointer-events: none; }
.cu-lines .ln { fill: none; stroke: rgba(255, 200, 87, .5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cu-lines .mk { stroke: rgba(255, 200, 87, .38); }
.cu-lines .river { fill: rgba(255, 200, 87, .07); }

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

.cu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cu-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)); }
.cu-pc .sd { fill: url(#cu-side); }
.cu-pc .fc { fill: url(#cu-face); }
.cu-pc .bk { fill: url(#cu-back); }
.cu-pc .bv { fill: none; stroke: url(#cu-bevel); stroke-width: 1.3; }
.cu-pc .i { fill: none; stroke-width: 1.2; }
.cu-pc circle.hl { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: .8; }
.cu-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; }
.cu-pc text.hl { fill: rgba(255, 255, 255, .85); stroke: rgba(255, 255, 255, .85); stroke-width: .5; }
.cu-pc.lt text { font: 800 19px var(--font-body); }
.cu-pc.r .i { stroke: #c22a2a; }
.cu-pc.r text:not(.hl) { fill: #b5121b; stroke: #b5121b; stroke-width: .5; }
.cu-pc.b .i { stroke: #2b2620; }
.cu-pc.b text:not(.hl) { fill: #1b1814; stroke: #1b1814; stroke-width: .5; }
/* face-down: plain wooden back, a ring and a stamped star in the owner's colour */
.cu-pc.down .i { stroke-width: 1.6; }
.cu-pc.down.r .i { stroke: #e0283a; }
.cu-pc.down.b .i { stroke: #1d1612; }
.cu-pc.down .mo { fill: rgba(255, 236, 200, .28); stroke: rgba(60, 30, 8, .55); stroke-width: .6; }
.cu-pc.down.r .ct { fill: #e0283a; }
.cu-pc.down.b .ct { fill: #1d1612; }
.cu-pc.flip { animation: cu-flip .45s ease-out; }
@keyframes cu-flip { from { transform: rotateY(90deg) scale(1.15); } 60% { transform: rotateY(-12deg) scale(1.08); } to { transform: none; } }
.cu-pt.movable:hover .cu-pc { transform: translateY(-1.5px) scale(1.05); }
.cu-pt.sel .cu-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 5px rgba(255, 200, 87, .95)); }
.cu-pt.check .cu-pc { animation: cu-check .8s ease-in-out infinite alternate; }
@keyframes cu-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) {
  .cu-pt.check .cu-pc { animation: none; filter: drop-shadow(0 0 6px #ff3d7f); }
  .cu-pc.flip { animation: none; }
}

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