/* =============================================================
   GAME: Makruk (Thai chess)
   ============================================================= */
.board-makruk {
  --cell: min(calc((100vw - 72px) / 8), 56px);
  --mk-glow: #f0d878;
  --mk-line: rgba(240, 216, 120, .34);
  display: flex; flex-direction: column; gap: 6px; width: calc(var(--cell) * 8 + 12px);
}
/* a traditional makruk board is one colour, squares marked only by lines */
.mk-grid {
  position: relative; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px;
  background-image: linear-gradient(to right, var(--mk-line) 1px, transparent 1px), linear-gradient(to bottom, var(--mk-line) 1px, transparent 1px), radial-gradient(ellipse at 50% 40%, #3b2a55, #261a3a 60%, #1a1129);
  background-size: var(--cell) var(--cell), var(--cell) var(--cell), 100% 100%;
  background-origin: content-box, content-box, border-box;
  background-clip: content-box, content-box, border-box;
  box-shadow: 0 0 0 2px var(--mk-glow), 0 0 26px rgba(240, 216, 120, .32);
}
.mk-grid::before {
  content: ""; position: absolute; inset: 6px; box-shadow: inset 0 0 0 1.5px rgba(240, 216, 120, .55); pointer-events: none;
}
.mk-sq { position: relative; border: 0; padding: 0; margin: 0; background: transparent; display: grid; place-items: center; cursor: default; }
.mk-sq.movable, .mk-sq.dest, .mk-sq.cap { cursor: pointer; }
.mk-sq:focus { outline: none; }
.mk-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.mk-sq.last::before { content: ""; position: absolute; inset: 1px 0 0 1px; background: rgba(255, 210, 63, .2); }
.mk-sq.sel::before { content: ""; position: absolute; inset: 1px 0 0 1px; background: rgba(240, 216, 120, .22); box-shadow: inset 0 0 0 2px var(--mk-glow); }
.mk-sq.check { background-image: radial-gradient(circle, rgba(255, 61, 127, .95) 0%, rgba(255, 61, 127, .5) 42%, transparent 72%); }
.mk-sq.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(240, 216, 120, .7); box-shadow: 0 0 8px rgba(240, 216, 120, .85); z-index: 2; }
.mk-sq.dest:hover::after { width: 40%; height: 40%; }
.mk-sq.cap::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(240, 216, 120, .85), 0 0 8px rgba(240, 216, 120, .6); z-index: 2; }

.mk-rank, .mk-file { position: absolute; font: 700 calc(var(--cell) * .19)/1 var(--font-body); color: rgba(240, 216, 120, .6); pointer-events: none; }
.mk-rank { left: 3px; top: 3px; }
.mk-file { right: 3px; bottom: 2px; }

.mk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk-pc { position: relative; width: 92%; height: 92%; z-index: 1; pointer-events: none; overflow: visible; transition: transform .15s, filter .15s; }
.mk-pc g { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mk-pc .ln { fill: none; }
.mk-pc.w g { fill: url(#mk-gw); stroke: #2a1f3a; }
.mk-pc.w .pc-eye { fill: #2a1f3a; stroke: none; }
.mk-pc.w { filter: drop-shadow(0 1.6px 1.2px rgba(6, 2, 14, .6)) drop-shadow(0 0 2.5px rgba(255, 240, 200, .3)); }
.mk-pc.b g { fill: url(#mk-gb); stroke: #f0d878; }
.mk-pc.b .pc-eye { fill: #f0d878; stroke: none; }
.mk-pc.b { filter: drop-shadow(0 1.6px 1.2px rgba(6, 2, 14, .7)) drop-shadow(0 0 3px rgba(240, 216, 120, .5)); }
.mk-sq.movable:hover .mk-pc { transform: translateY(-2px) scale(1.05); }
.mk-sq.sel .mk-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(6, 2, 14, .6)) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(240, 216, 120, .9)); }

.mk-strip { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.mk-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mk-who.active { color: var(--ink); }
.mk-who .dot { width: 12px; height: 12px; }
.mk-caps { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; }
.mk-pc.cap { width: 19px; height: 19px; margin-right: -4px; filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .55)); }
.mk-adv { font-weight: 700; color: var(--ink); }
.mk-dot.w { background: #fff6e0; box-shadow: 0 0 0 2px #3b2a55; }
.mk-dot.b { background: #7a2a1a; box-shadow: 0 0 0 2px #f0d878; }
.mk-chk { color: var(--t-red); text-transform: uppercase; letter-spacing: .04em; }
.mk-count { color: #f0d878; }

.mk-moves {
  list-style: none; margin: 0; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 2px 10px;
  max-height: 64px; overflow-y: auto; background: var(--bg); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
  font: 600 .85rem/1.5 var(--font-body); scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.mk-moves[hidden] { display: none; }
.mk-moves li { display: inline-flex; gap: 4px; white-space: nowrap; }
.mk-moves .n { color: var(--muted); }
.mk-moves .cur { color: #1c1226; background: #f0d878; border-radius: 4px; padding: 0 3px; }
@media (prefers-reduced-motion: reduce) { .mk-pc { transition: none; } }