/* =============================================================
   GAME: Amazons
   ============================================================= */
.board-amazons {
  --cell: min(calc((100vw - 72px) / 10), 50px);
  --az-glow: #5dff6a;
  --az-fire: #ff9a3d;
}
.az-grid {
  position: relative; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #04140a;
  box-shadow: 0 0 0 2px var(--az-glow), 0 0 26px rgba(93, 255, 106, .32);
}
.az-sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: default; }
.az-sq.l { background: #2c5a31; }
.az-sq.d { background: #143519; }
.az-sq.movable, .az-sq.dest, .az-sq.aim, .az-sq.sel { cursor: pointer; }
.az-sq:focus { outline: none; }
.az-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.az-sq.burnt { background: radial-gradient(circle at 50% 50%, #3a1a0c 0, #1c0c06 70%); }
.az-sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 210, 63, .22); }
.az-sq.from::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 2px dashed rgba(93, 255, 106, .6); }
.az-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(93, 255, 106, .26); box-shadow: inset 0 0 0 2px var(--az-glow); }
.az-sq.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(93, 255, 106, .7); box-shadow: 0 0 8px rgba(93, 255, 106, .9); z-index: 2; }
.az-sq.dest:hover::after { width: 40%; height: 40%; }
/* arrow targets: little fiery crosshairs */
.az-sq.aim::after {
  content: ""; position: absolute; width: 34%; height: 34%; border-radius: 50%; z-index: 2;
  border: 2px solid rgba(255, 154, 61, .95); box-shadow: 0 0 8px rgba(255, 154, 61, .9), inset 0 0 4px rgba(255, 154, 61, .7);
}
.az-sq.aim:hover::after { width: 52%; height: 52%; background: rgba(255, 154, 61, .25); }
.az-grid.aiming { box-shadow: 0 0 0 2px var(--az-fire), 0 0 26px rgba(255, 154, 61, .38); }

.az-rank, .az-file { position: absolute; font: 700 calc(var(--cell) * .22)/1 var(--font-body); pointer-events: none; z-index: 1; }
.az-rank { left: 2px; top: 2px; }
.az-file { right: 3px; bottom: 2px; }
.az-sq.l .az-rank, .az-sq.l .az-file { color: #143519; }
.az-sq.d .az-rank, .az-sq.d .az-file { color: #5f9a63; }

.az-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.az-pc { position: relative; width: 96%; height: 96%; z-index: 1; pointer-events: none; overflow: visible; transition: transform .15s, filter .15s; }
.az-pc g { stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.az-pc .band { fill: none; }
.az-pc.p1 g { fill: url(#az-gw); stroke: #1b3a1d; }
.az-pc.p1 { filter: drop-shadow(0 1.6px 1.2px rgba(2, 10, 4, .65)) drop-shadow(0 0 2.5px rgba(93, 255, 106, .3)); }
.az-pc.p2 g { fill: url(#az-gb); stroke: #d2ffd8; }
.az-pc.p2 { filter: drop-shadow(0 1.6px 1.2px rgba(2, 10, 4, .75)) drop-shadow(0 0 3px rgba(93, 255, 106, .55)); }
.az-sq.movable:hover .az-pc { transform: translateY(-2px) scale(1.05); }
.az-sq.sel .az-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(2, 10, 4, .6)) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(93, 255, 106, .95)); }

.az-arrow { position: relative; z-index: 1; width: 84%; height: 84%; pointer-events: none; overflow: visible; }
.az-arrow .burn { fill: rgba(255, 120, 40, .14); stroke: rgba(255, 154, 61, .35); stroke-width: 1.2; }
.az-arrow .shaft { stroke: #e9c98f; stroke-width: 2.6; stroke-linecap: round; }
.az-arrow .head { fill: #ffb35c; stroke: #7a3a00; stroke-width: .8; stroke-linejoin: round; }
.az-arrow .fl { stroke: #ff5c3d; stroke-width: 2; stroke-linecap: round; }
.az-sq.lastarrow .az-arrow { filter: drop-shadow(0 0 4px rgba(255, 154, 61, .95)); animation: az-thud .35s ease-out; }
@keyframes az-thud { from { transform: scale(1.5) rotate(-12deg); opacity: .3; } }

.az-dot.p1 { background: #f1fff0; box-shadow: 0 0 0 2px #5dff6a; }
.az-dot.p2 { background: #17402a; box-shadow: 0 0 0 2px #8dff96; }
@media (prefers-reduced-motion: reduce) { .az-sq.lastarrow .az-arrow { animation: none; } }