/* =============================================================
   GAME: Surakarta
   ============================================================= */
.board-surakarta {
  --s: min(calc((100vw - 60px) / 9.6), 56px);
  --sk-glow: #ff5ec4; --sk-inner: #3df5ff; --sk-outer: #ff5ec4;
  position: relative; width: calc(var(--s) * 9.6); height: calc(var(--s) * 9.6);
  border-radius: calc(var(--s) * .6);
  box-shadow: 0 0 0 2px var(--sk-glow), 0 0 28px rgba(255, 94, 196, .35);
}
.sk-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-bg { fill: #0b0824; }
.sk-circ { fill: none; stroke-width: 9; stroke-linejoin: round; }
.sk-circ.inner { stroke: var(--sk-inner); }
.sk-circ.outer { stroke: var(--sk-outer); }
.sk-glow { filter: url(#sk-neon); opacity: .75; }
.sk-glow .sk-circ { stroke-width: 22; }
.sk-line { fill: none; stroke-width: 4; }
.sk-line.plain { stroke: #4a4378; }
.sk-line.inner { stroke: #b8fbff; stroke-width: 3; opacity: .7; }
.sk-line.outer { stroke: #ffc4ea; stroke-width: 3; opacity: .7; }
.sk-route { fill: none; stroke: #fff4a8; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 26; opacity: .95; animation: sk-march 1s linear infinite; }
.sk-trace { fill: none; stroke: #fff4a8; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.sk-lastroute { fill: none; stroke: #fff4a8; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 22; opacity: .45; }
@keyframes sk-march { to { stroke-dashoffset: -28; } }

/* points: invisible hit areas centred on each intersection */
.sk-pt {
  position: absolute; width: var(--s); height: var(--s); transform: translate(-50%, -50%);
  border: 0; padding: 0; margin: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: default; color: inherit;
}
.sk-pt::before { content: ""; position: absolute; width: 16%; height: 16%; border-radius: 50%; background: rgba(220, 210, 255, .35); }
.sk-pt:focus { outline: none; }
.sk-pt:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.sk-slot { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sk-pt.movable, .sk-pt.dest, .sk-pt.target { cursor: pointer; }
.sk-pt.dest::after {
  content: ""; position: absolute; width: 34%; height: 34%; border-radius: 50%;
  background: rgba(255, 244, 168, .75); box-shadow: 0 0 12px rgba(255, 244, 168, .8);
}
.sk-pt.dest:hover::after { width: 60%; height: 60%; opacity: .6; }
.sk-pt.target::after {
  content: ""; position: absolute; inset: 4%; border-radius: 50%; z-index: 2; pointer-events: none;
  border: 3px dashed #ff4a5e; box-shadow: 0 0 12px rgba(255, 74, 94, .8), inset 0 0 10px rgba(255, 74, 94, .5);
  animation: sk-spin 4s linear infinite;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-pt.last::before { width: 30%; height: 30%; background: none; border: 2px solid rgba(255, 244, 168, .7); }

/* glossy domed stones with a stacked edge */
.sk-piece {
  --h: calc(var(--s) * .028);
  position: relative; display: block; width: 66%; height: 66%; border-radius: 50%;
  transform: translateY(calc(var(--h) * -2));
  background: radial-gradient(circle at 34% 28%, var(--hi) 0, var(--face) 45%, var(--lo) 100%);
  box-shadow: inset 0 0 0 calc(var(--s) * .02) var(--rim), inset 0 calc(var(--s) * -.05) calc(var(--s) * .08) rgba(0, 0, 0, .25),
    0 var(--h) 0 var(--e1), 0 calc(var(--h) * 2) 0 var(--e2), 0 calc(var(--h) * 3) 0 var(--e3),
    0 calc(var(--h) * 4) calc(var(--h) * 3) rgba(0, 0, 0, .65);
  transition: transform .15s, filter .15s;
}
.sk-piece::after { content: ""; position: absolute; left: 22%; top: 14%; width: 34%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(1px); transform: rotate(-24deg); }
.sk-piece.p1 { --hi: #fff6c4; --face: #ffbf2e; --lo: #b86a00; --rim: rgba(255, 240, 180, .6); --e1: #a35c00; --e2: #e08a0a; --e3: #6e3c00; }
.sk-piece.p2 { --hi: #ffffff; --face: #c9d2f0; --lo: #6b74a6; --rim: rgba(255, 255, 255, .6); --e1: #5d6592; --e2: #9aa3d0; --e3: #3a4068; }
.sk-dot.p1 { background: #ffbf2e; }
.sk-dot.p2 { background: #c9d2f0; }
.sk-pt.movable .sk-piece { filter: drop-shadow(0 0 calc(var(--s) * .08) rgba(255, 244, 168, .75)); }
.sk-pt.cancap .sk-piece { animation: sk-pulse 1s ease-in-out infinite alternate; }
.sk-pt.movable:hover .sk-piece { transform: translateY(calc(var(--h) * -3.5)); }
.sk-pt.selected .sk-piece { transform: translateY(calc(var(--h) * -4)) scale(1.08); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--s) * .18) var(--sk-glow)); animation: none; }
@keyframes sk-pulse { to { filter: drop-shadow(0 0 2px #fff4a8) drop-shadow(0 0 calc(var(--s) * .16) rgba(255, 94, 196, .95)); } }

.sk-fly { position: absolute; width: calc(var(--s) * .66); height: calc(var(--s) * .66); transform: translate(-50%, -50%); z-index: 4; pointer-events: none; filter: drop-shadow(0 0 calc(var(--s) * .2) #fff4a8); }
.sk-fly[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sk-route, .sk-pt.target::after, .sk-pt.cancap .sk-piece { animation: none; }
  .sk-pt.cancap .sk-piece { filter: drop-shadow(0 0 2px #fff4a8) drop-shadow(0 0 calc(var(--s) * .14) rgba(255, 94, 196, .9)); }
}