/* =============================================================
   GAME: Janggi (Korean Chess)
   ============================================================= */
.board-janggi {
  --cell: min(calc((100vw - 72px) / 9), 50px);
  --jg-glow: #ff6f61;
  display: flex; flex-direction: column; gap: 6px; width: calc(var(--cell) * 9 + 12px);
}
.jg-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, #0e1a33, #0a1226);
  box-shadow: 0 0 0 2px var(--jg-glow), 0 0 26px rgba(255, 111, 97, .35);
}
.jg-lines { position: absolute; left: 6px; top: 6px; width: calc(var(--cell) * 9); height: calc(var(--cell) * 10); pointer-events: none; }
.jg-lines .ln { fill: none; stroke: rgba(255, 150, 135, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.jg-lines .pal { fill: rgba(255, 111, 97, .08); }

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

.jg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* octagonal pieces: ivory face over a wooden edge, bevel, engraved inner octagon and character */
.jg-pc { position: relative; width: 100%; height: 100%; 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)); }
.jg-pc .sd { fill: url(#jg-side); }
.jg-pc .fc { fill: url(#jg-face); }
.jg-pc .bv { fill: none; stroke: url(#jg-bevel); stroke-width: 1.2; }
.jg-pc .i { fill: none; stroke-width: 1; }
.jg-pc text { font-weight: 700; font-family: "Noto Serif KR", "Batang", "BatangChe", "Noto Serif SC", "Songti SC", "SimSun", serif; text-anchor: middle; dominant-baseline: central; }
.jg-pc.m-hangul text { font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Nanum Gothic", sans-serif; font-weight: 800; }
.jg-pc.m-letters text { font-family: var(--font-body); font-weight: 800; }
.jg-pc text.hl { fill: rgba(255, 255, 255, .85); stroke: rgba(255, 255, 255, .85); stroke-width: .5; }
.jg-pc.h .i { stroke: #c22a2a; }
.jg-pc.h text:not(.hl) { fill: #b5121b; stroke: #b5121b; stroke-width: .4; }
.jg-pc.c .i { stroke: #0f6d4a; }
.jg-pc.c text:not(.hl) { fill: #0b6142; stroke: #0b6142; stroke-width: .4; }
.jg-pt.movable:hover .jg-pc { transform: translateY(-1.5px) scale(1.05); }
.jg-pt.sel .jg-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, 111, 97, .95)); }
.jg-pt.check .jg-pc { animation: jg-check .8s ease-in-out infinite alternate; }
.jg-pt.bik .jg-pc { filter: drop-shadow(0 1.6px 1.4px rgba(0, 0, 0, .65)) drop-shadow(0 0 6px #ffd23f); }
@keyframes jg-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) { .jg-pt.check .jg-pc { animation: none; filter: drop-shadow(0 0 6px #ff3d7f); } }

.jg-strip { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.jg-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jg-who.active { color: var(--ink); }
.jg-who .dot { width: 12px; height: 12px; }
.jg-caps { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; gap: 0; }
.jg-pc.cap { width: 20px; height: 20px; filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .6)); }
.jg-pts { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); opacity: .85; }
.jg-dot.h { background: #ff3d5e; box-shadow: 0 0 8px rgba(255, 61, 94, .7); }
.jg-dot.c { background: #23d38a; box-shadow: 0 0 8px rgba(35, 211, 138, .7); }
.jg-chk { color: var(--t-red); text-transform: uppercase; letter-spacing: .04em; }
.jg-clock { margin-left: auto; padding-left: 10px; font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jg-pass { min-height: 38px; padding: 6px 14px; }