/* =============================================================
   GAME: Lines of Action
   ============================================================= */
.board-linesofaction {
  --cell: min(calc((100vw - 72px) / 8), 56px);
  --loa-glow: #19f5d8;
}
.loa-grid {
  position: relative; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #031a1a;
  box-shadow: 0 0 0 2px var(--loa-glow), 0 0 26px rgba(25, 245, 216, .35);
}
.loa-sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: default; }
.loa-sq.l { background: #1d5352; }
.loa-sq.d { background: #0b2b2c; }
.loa-sq.movable, .loa-sq.dest, .loa-sq.cap { cursor: pointer; }
.loa-sq:focus { outline: none; }
.loa-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.loa-sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 210, 63, .2); }
.loa-sq.lane::before { content: ""; position: absolute; inset: 0; background: rgba(25, 245, 216, .1); }
.loa-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(25, 245, 216, .28); box-shadow: inset 0 0 0 2px var(--loa-glow); }
.loa-sq.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(25, 245, 216, .7); box-shadow: 0 0 9px rgba(25, 245, 216, .9); z-index: 2; }
.loa-sq.dest:hover::after { width: 40%; height: 40%; }
.loa-sq.cap::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(25, 245, 216, .9), 0 0 9px rgba(25, 245, 216, .7); z-index: 2; }

.loa-rank, .loa-file { position: absolute; font: 700 calc(var(--cell) * .2)/1 var(--font-body); pointer-events: none; z-index: 1; }
.loa-rank { left: 2px; top: 2px; }
.loa-file { right: 3px; bottom: 2px; }
.loa-sq.l .loa-rank, .loa-sq.l .loa-file { color: #0b2b2c; }
.loa-sq.d .loa-rank, .loa-sq.d .loa-file { color: #4f9c98; }

/* pieces: thick round stones seen from above with a ridged edge (stacked shadows) */
.loa-pc {
  --h: calc(var(--cell) * .026);
  position: relative; z-index: 1; width: 72%; height: 72%; border-radius: 50%; pointer-events: none;
  transform: translateY(calc(var(--h) * -2));
  background: radial-gradient(circle at 50% 50%, transparent 60%, var(--lip) 66%, transparent 72%),
    radial-gradient(circle at 36% 28%, var(--hi) 0, var(--face) 50%, var(--lo) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--cell) * .018) var(--rim),
    0 var(--h) 0 var(--e1), 0 calc(var(--h) * 2) 0 var(--e2), 0 calc(var(--h) * 3) 0 var(--e1),
    0 calc(var(--h) * 4) calc(var(--h) * 3) rgba(0, 0, 0, .6);
  transition: transform .15s, filter .15s;
}
.loa-pc::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; box-shadow: inset 0 1px 1.5px var(--groove), 0 1px 0 var(--ridge); }
.loa-pc.p1 {
  --hi: #5e6b74; --face: #232a31; --lo: #0a0d10; --lip: rgba(0, 0, 0, .35); --rim: rgba(25, 245, 216, .55);
  --e1: #161b20; --e2: #1f5a55; --groove: rgba(0, 0, 0, .75); --ridge: rgba(255, 255, 255, .14);
}
.loa-pc.p2 {
  --hi: #ffffff; --face: #eef6f5; --lo: #a9c4c2; --lip: rgba(40, 90, 90, .12); --rim: rgba(60, 140, 135, .45);
  --e1: #a3bfbc; --e2: #dcebea; --groove: rgba(40, 90, 90, .35); --ridge: rgba(255, 255, 255, .95);
}
.loa-sq.movable:hover .loa-pc { transform: translateY(calc(var(--h) * -3.5)); }
.loa-sq.sel .loa-pc { transform: translateY(calc(var(--h) * -4)) scale(1.06); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .16) var(--loa-glow)); }
.loa-pc.win { animation: loa-win 1s ease-in-out infinite alternate; }
@keyframes loa-win { to { filter: drop-shadow(0 0 2px var(--t-gold)) drop-shadow(0 0 calc(var(--cell) * .16) rgba(255, 210, 63, .9)); } }
@media (prefers-reduced-motion: reduce) { .loa-pc.win { animation: none; filter: drop-shadow(0 0 calc(var(--cell) * .14) rgba(255, 210, 63, .9)); } }

.loa-dot.p1 { background: #232a31; box-shadow: 0 0 0 2px #19f5d8; }
.loa-dot.p2 { background: var(--t-white); }
.loa-grp { font-size: .78em; font-weight: 600; color: var(--muted); }