/* =============================================================
   GAME: Fox and Geese
   ============================================================= */
.board-foxgeese {
  --cell: min(calc((100vw - 72px) / 7), 60px);
  --fg-glow: #ffb35c;
  padding: 10px; border-radius: 16px; background: #1a0e05;
  box-shadow: 0 0 0 2px var(--fg-glow), 0 0 26px rgba(255, 179, 92, .35);
}
.fg-wrap { position: relative; width: calc(var(--cell) * 7); height: calc(var(--cell) * 7); }
.fg-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fg-cross { fill: #2e1b0b; stroke: rgba(255, 179, 92, .35); stroke-width: .03; stroke-linejoin: round; }
.fg-lines line { stroke: #b07a3f; stroke-width: .06; stroke-linecap: round; }
.fg-grid { position: relative; display: grid; grid-template-columns: repeat(7, var(--cell)); grid-auto-rows: var(--cell); }
.fg-pt { position: relative; border: 0; padding: 0; margin: 0; background: transparent; display: grid; place-items: center; cursor: default; border-radius: 50%; }
.fg-pt::before { content: ""; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: #d9a066; box-shadow: 0 0 0 2px #2e1b0b; }
.fg-pt:focus { outline: none; }
.fg-pt:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.fg-pt.movable, .fg-pt.dest { cursor: pointer; }
.fg-pt.last::before { width: 34%; height: 34%; background: rgba(255, 210, 63, .45); box-shadow: 0 0 10px rgba(255, 210, 63, .6); }
.fg-pt.trail::before { width: 34%; height: 34%; background: rgba(255, 120, 60, .5); }
.fg-pt.lastcap::after { content: ""; position: absolute; width: 44%; height: 44%; border-radius: 50%; border: 2px dashed rgba(255, 120, 140, .75); }
.fg-pt.dest::after { content: ""; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: rgba(255, 179, 92, .75); box-shadow: 0 0 10px rgba(255, 179, 92, .95); z-index: 2; }
.fg-pt.dest.jump::after { background: rgba(255, 92, 60, .85); box-shadow: 0 0 12px rgba(255, 92, 60, .95); }
.fg-pt.dest:hover::after { width: 50%; height: 50%; }

/* counters: glossy domed discs with an emblem */
.fg-pc {
  --h: calc(var(--cell) * .025);
  position: relative; z-index: 1; width: 66%; height: 66%; 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) * .02) var(--rim), 0 var(--h) 0 var(--e1), 0 calc(var(--h) * 2) 0 var(--e2),
    0 calc(var(--h) * 3) calc(var(--h) * 3) rgba(0, 0, 0, .6);
  transition: transform .15s, opacity .2s, filter .15s;
}
.fg-icon { width: 82%; height: 82%; overflow: visible; }
.fg-pc.goose { --hi: #ffffff; --face: #f3f1ea; --lo: #c2bba8; --rim: rgba(120, 100, 60, .35); --e1: #b9b19c; --e2: #e2dccb; }
.fg-pc.goose .neck { fill: none; stroke: #ffffff; stroke-width: 3.4; stroke-linecap: round; }
.fg-pc.goose .neck-o { fill: none; stroke: #8a826c; stroke-width: 5; stroke-linecap: round; }
.fg-pc.goose .head-o { fill: #8a826c; }
.fg-pc.goose .head { fill: #ffffff; }
.fg-pc.goose .beak { fill: #ff9a1f; stroke: #a35300; stroke-width: .5; stroke-linejoin: round; }
.fg-pc.goose .eye { fill: #1a1208; }
.fg-pc.fox { width: 76%; height: 76%; --hi: #ffd0a0; --face: #ff8a2a; --lo: #b34a00; --rim: rgba(255, 230, 200, .55); --e1: #8c3a00; --e2: #d96a12; }
.fg-pc.fox .ear { fill: #7a2e00; stroke: #3d1600; stroke-width: .6; stroke-linejoin: round; }
.fg-pc.fox .face { fill: #ff7a14; stroke: #3d1600; stroke-width: .7; stroke-linejoin: round; }
.fg-pc.fox .muzzle { fill: #fff3e3; }
.fg-pc.fox .eye, .fg-pc.fox .nose { fill: #1a0a00; }
.fg-pc.ghost { opacity: .3; transform: scale(.8); }
.fg-pt.movable .fg-pc { filter: drop-shadow(0 0 calc(var(--cell) * .07) rgba(255, 179, 92, .9)); }
.fg-pt.movable:hover .fg-pc { transform: translateY(calc(var(--h) * -3)); }
.fg-pt.selected .fg-pc { transform: translateY(calc(var(--h) * -3)) scale(1.08); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .16) var(--fg-glow)); }
.fg-pc.fox.caught { animation: fg-caught .8s ease-in-out infinite alternate; }
@keyframes fg-caught { to { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .2) rgba(255, 61, 127, .95)); } }
@media (prefers-reduced-motion: reduce) { .fg-pc.fox.caught { animation: none; filter: drop-shadow(0 0 calc(var(--cell) * .18) rgba(255, 61, 127, .95)); } }

.fg-dot.p1 { background: #f3f1ea; box-shadow: 0 0 0 2px #ff9a1f; }
.fg-dot.p2 { background: #ff7a14; box-shadow: 0 0 0 2px #fff3e3; }