/* =============================================================
   GAME: Hnefatafl (Viking chess)
   ============================================================= */
.board-tafl {
  --cell: min(calc((100vw - 72px) / 11), 48px);
  --tf-glow: #6c7bff;
}
.tf-grid {
  position: relative; display: grid; grid-template-columns: repeat(11, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #080a24; gap: 1px;
  box-shadow: 0 0 0 2px var(--tf-glow), 0 0 26px rgba(108, 123, 255, .38);
}
.tf-sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: default; border-radius: 2px; }
.tf-sq.l { background: #232a63; }
.tf-sq.d { background: #1c2254; }
/* refuges: the four corners and the throne carry a carved knot */
.tf-sq.corner, .tf-sq.throne { background: #3a2a6e; }
.tf-sq.corner::before, .tf-sq.throne::before {
  content: ""; position: absolute; inset: 14%; pointer-events: none;
  background: linear-gradient(45deg, transparent 44%, rgba(255, 210, 63, .55) 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(255, 210, 63, .55) 45% 55%, transparent 56%);
  border: 2px solid rgba(255, 210, 63, .5); border-radius: 3px;
}
.tf-sq.movable, .tf-sq.dest { cursor: pointer; }
.tf-sq:focus { outline: none; }
.tf-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.tf-sq.last { background: #3d3a6e; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .55); }
.tf-sq.lastcap::after { content: ""; width: 34%; height: 34%; border-radius: 50%; border: 2px dashed rgba(255, 120, 140, .7); }
.tf-sq.sel { background: #3c48a8; box-shadow: inset 0 0 0 2px var(--tf-glow); }
.tf-sq.dest::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(140, 155, 255, .8); box-shadow: 0 0 8px rgba(108, 123, 255, .95); z-index: 2; }
.tf-sq.dest:hover::after { width: 44%; height: 44%; }

.tf-pc {
  --h: calc(var(--cell) * .03);
  position: relative; z-index: 1; width: 76%; height: 76%; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  transform: translateY(calc(var(--h) * -1.5));
  background: radial-gradient(circle at 36% 28%, var(--hi) 0, var(--face) 50%, var(--lo) 100%);
  box-shadow: inset 0 0 0 calc(var(--cell) * .03) var(--rim), 0 var(--h) 0 var(--e1), 0 calc(var(--h) * 2) 0 var(--e2),
    0 calc(var(--h) * 3) calc(var(--h) * 2.5) rgba(0, 0, 0, .65);
  transition: transform .15s, filter .15s;
}
.tf-pc svg { width: 64%; height: 64%; overflow: visible; }
.tf-pc.att { --hi: #6a6f96; --face: #2a2d4a; --lo: #0d0e1c; --rim: rgba(140, 155, 255, .7); --e1: #15172a; --e2: #3b4596; }
.tf-pc.att svg path { fill: none; stroke: #9aa6ff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tf-pc.def { --hi: #ffffff; --face: #ece9ff; --lo: #b3acd8; --rim: rgba(90, 80, 160, .45); --e1: #a9a2d2; --e2: #d9d4f4; }
.tf-pc.def svg path { fill: rgba(108, 123, 255, .25); stroke: #4a3f9a; stroke-width: 2.2; stroke-linejoin: round; }
.tf-pc.king { width: 86%; height: 86%; --hi: #fffbe6; --face: #fff1c2; --lo: #d6b45a; --rim: rgba(160, 110, 0, .6); --e1: #b68e2c; --e2: #f0d27a; }
.tf-pc.king svg { width: 72%; height: 72%; }
.tf-crown path, .tf-crown rect { fill: #ffd23f; stroke: #7a4a00; stroke-width: 1; stroke-linejoin: round; }
.tf-pc.king.danger { animation: tf-danger .8s ease-in-out infinite alternate; }
.tf-pc.king.win { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 calc(var(--cell) * .25) var(--t-gold)); }
@keyframes tf-danger { to { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .2) rgba(255, 61, 127, .95)); } }
.tf-sq.movable:hover .tf-pc { transform: translateY(calc(var(--h) * -3)); }
.tf-sq.sel .tf-pc { transform: translateY(calc(var(--h) * -3)) scale(1.06); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .16) var(--tf-glow)); }
.tf-warn { color: var(--t-red); }

.tf-dot.p1 { background: #2a2d4a; box-shadow: 0 0 0 2px #9aa6ff; }
.tf-dot.p2 { background: #ece9ff; box-shadow: 0 0 0 2px #ffd23f; }
@media (prefers-reduced-motion: reduce) { .tf-pc.king.danger { animation: none; filter: drop-shadow(0 0 calc(var(--cell) * .18) rgba(255, 61, 127, .95)); } }