/* V1.32. Shared geometry wins over the older viewport and focus overrides. */
/* Decorative corner plates must never cover an actual checker. */
#gameView #gameBoard .board-corner { z-index:0; pointer-events:none; }
#gameView #gameBoard .point,
#gameView #gameBoard .checker-stack,
#gameView #gameBoard .bar-zone { overflow:visible; }
#gameView #gameBoard .point { display:block; border-radius:0; }
#gameView #gameBoard :is(.checker,.bar-checker,.off-checker) {
  position:absolute; display:block; box-sizing:border-box;
  width:var(--checker-size,40px); height:var(--checker-size,40px);
  min-width:0; min-height:0; max-width:none; max-height:none; flex:none;
  aspect-ratio:1 / 1; border-radius:50%; left:50%; transform:translateX(-50%);
  overflow:visible; clip-path:none; border:0; background:none;
  z-index:calc(1 + var(--stack-index, var(--bar-index,0)));
  filter:none; animation:none; pointer-events:none;
  box-shadow:none;
}
/* The face, bevel and highlight are independent. No rounded box edge can
   crop the top of the vector face, and the halo remains outside the piece. */
#gameView #gameBoard :is(.checker,.bar-checker,.off-checker)::before { content:none; }
#gameView #gameBoard :is(.checker.white,.white-bar-zone .bar-checker,.off-checker.white) {
  --checker-face-light:var(--piece-white-light,#fff);
  --checker-face-color:var(--piece-white-color,#f4f7fc);
  --checker-face-edge:var(--piece-white-edge,#9da7ba);
  background:none;
}
#gameView #gameBoard :is(.checker.black,.black-bar-zone .bar-checker,.off-checker.black) {
  --checker-face-light:var(--piece-black-light,#59647a);
  --checker-face-color:var(--piece-black-color,#181d28);
  --checker-face-edge:var(--piece-black-edge,#04070b);
  background:none;
}
#gameView #gameBoard :is(.checker,.bar-checker,.off-checker,.ai-moving-checker) > .checker-face {
  position:absolute; display:block; left:-8%; top:-8%; width:116%; height:116%;
  min-width:0; min-height:0; max-width:none; max-height:none; margin:0; padding:0;
  border:0; border-radius:0; box-sizing:content-box; aspect-ratio:1;
  overflow:visible; clip-path:none; pointer-events:none; transform:none;
  filter:drop-shadow(0 3px 2.5px #0006);
}
#gameView #gameBoard .ai-moving-checker.checker-vector {
  background:none; border:0; box-shadow:none; overflow:visible;
}
#gameView #gameBoard .top-quadrant .checker { top:calc(var(--checker-pad,5px) + var(--stack-index) * var(--checker-step,30px)); bottom:auto; }
#gameView #gameBoard .bottom-quadrant .checker { bottom:calc(var(--checker-pad,5px) + var(--stack-index) * var(--checker-step,30px)); top:auto; }
#gameView #gameBoard .black-bar-zone .bar-checker { top:calc(var(--checker-pad,4px) + var(--bar-index) * var(--checker-step,25px)); bottom:auto; }
#gameView #gameBoard .white-bar-zone .bar-checker { bottom:calc(var(--checker-pad,4px) + var(--bar-index) * var(--checker-step,25px)); top:auto; }
/* A hollow ring with a constant radius: it never scales inside the checker. */
#gameView #gameBoard :is(.movable-checker,.selected-checker) { filter:none; animation:none; }
#gameView #gameBoard .movable-checker::after {
  content:""; position:absolute; inset:-3px; box-sizing:border-box;
  width:auto; height:auto; border:1.5px solid #cdff78; border-radius:50%;
  background:transparent; pointer-events:none; transform:none;
  box-shadow:0 0 6px #c8ff3870,0 0 12px #c8ff3826;
  opacity:.7; animation:checkerHaloBreathe 1.9s ease-in-out infinite;
}
#gameView #gameBoard .selected-checker::after {
  border-color:#e7ffb5; border-width:2px;
  box-shadow:0 0 7px #c8ff38a0,0 0 15px #c8ff3840;
  --halo-low:.8; --halo-high:1;
}
#gameView #gameBoard[data-move-guidance="destination"] .point:not(.selected) .movable-checker::after { --halo-low:.22; --halo-high:.42; }
@keyframes checkerHaloBreathe { 0%,100% {opacity:var(--halo-low,.5)} 50% {opacity:var(--halo-high,.95)} }
/* Tall recessed trays keep every borne off piece, with totals outside pieces. */
#gameView #gameBoard .bearoff-tray { min-height:0; min-width:0; padding:0; overflow:hidden; isolation:isolate; }
#gameView #gameBoard .off-checker-stack {
  position:absolute; left:2px; right:2px; top:18px; bottom:30px;
  border-radius:12px; pointer-events:none; overflow:visible;
  background:linear-gradient(90deg,#00000029,#00000009 48%,#ffffff05);
  box-shadow:inset 0 0 0 1px #ffffff08;
}
#gameView #gameBoard .white-off .off-checker-stack { top:30px; bottom:18px; }
/* Focus mode uses a thinner frame: leave room for its decorative corners. */
body.match-focus #gameView #gameBoard .black-off .off-checker-stack { top:30px; }
body.match-focus #gameView #gameBoard .white-off .off-checker-stack { bottom:30px; }
#gameView #gameBoard .black-off .off-checker { top:calc(var(--checker-pad,4px) + var(--stack-index) * var(--checker-step,20px)); bottom:auto; }
#gameView #gameBoard .white-off .off-checker { bottom:calc(var(--checker-pad,4px) + var(--stack-index) * var(--checker-step,20px)); top:auto; }
#gameView #gameBoard .off-tray-meta {
  position:absolute; left:1px; right:1px; bottom:6px; display:flex;
  align-items:center; justify-content:center; flex-direction:column; gap:1px;
  line-height:1.05; z-index:20; pointer-events:none;
}
#gameView #gameBoard .white-off .off-tray-meta { top:6px; bottom:auto; }
#gameView #gameBoard .off-tray-meta .off-label { display:block; font-size:6px; letter-spacing:.1em; color:#c5cbd3; }
#gameView #gameBoard .off-tray-meta strong { font-size:11px; line-height:1.1; color:#f4f7fc; font-variant-numeric:tabular-nums; }
#gameView #gameBoard.board-inverted .off-tray-meta { transform:rotate(180deg); }
#gameView #gameBoard.board-inverted .off-tray-meta :is(strong,.off-label) { transform:none; }
#gameView #gameBoard .bearoff-tray.legal-destination::after {
  top:50%; left:50%; margin-left:-9px; margin-top:-9px; z-index:25;
  width:18px; height:18px; background:#c8ff38; border:1px solid #eeffd7;
  box-shadow:0 0 0 3px #111820b0,0 0 10px #c8ff3860;
}
#gameView #gameBoard .bearoff-tray.combined-destination::after { background:#ff667a; }
#gameView #gameBoard .bearoff-tray.group-destination::after { background:#ffcf3f; }
#gameView #gameBoard .off-arrival::after {
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #deffa1;
  pointer-events:none; background:transparent; animation:offArrivalRing .7s ease-out both;
}
@keyframes offArrivalRing { 0% {opacity:1;box-shadow:0 0 12px #c8ff38a0} 100% {opacity:0;box-shadow:0 0 5px #c8ff3800} }
/* The moving piece lands in the precise slot, shrinking uniformly into its tray. */
#gameView #gameBoard > .ai-move-overlay { overflow:visible; }
#gameView #gameBoard .ai-moving-checker { aspect-ratio:1; border-radius:50%; box-sizing:border-box; }
#gameView #gameBoard .ai-target-ring { background:transparent; }
#gameView #gameBoard .bearoff-move-overlay .ai-route path { stroke:#d5ff8b; stroke-dasharray:3 6; opacity:.3; }
#gameView #gameBoard .bearoff-move-overlay :is(.ai-source-ring,.ai-target-ring) {
  border:1.5px solid #dbffab; background:transparent; box-shadow:0 0 9px #c8ff3850;
}
#gameView #gameBoard .bearoff-move-overlay .ai-move-caption { border-color:#b7e97460; color:#e7ffca; }
#gameView #gameBoard .bearoff-move-overlay[data-phase="landed"] .ai-target-ring { box-shadow:0 0 13px #c8ff38a0; }
#bearOffStatus { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) {
  #gameView #gameBoard .movable-checker::after { animation:none !important; opacity:.85; transform:none; }
  #gameView #gameBoard .off-arrival::after { animation:none; opacity:0; }
}