/* Quiet tactile feedback: the carved board remains the focal point. */
.board .pit { touch-action: manipulation; }
.board .seed { transition: transform 160ms ease, filter 160ms ease; }
.board .pit:focus-visible { outline: 3px solid var(--cream, #f0d9a4); outline-offset: 4px; z-index: 2; }
.board .pit--legal:focus-visible .seed,
.board .pit--legal:active .seed { transform: translateY(-3px); filter: brightness(1.08); }
@media (hover: hover) {
  .board .pit--legal:hover .seed { transform: translateY(-3px); filter: brightness(1.08); }
}
.board .pit__count { font-variant-numeric: tabular-nums; }
.board--guided .pit__count { min-width: 17px; height: 17px; right: -2px; top: -4px; }
.board__guidance {
  margin: 12px 0 0; color: #f0d9a4; font: 500 11px/1.4 var(--font-ui);
  text-align: center; letter-spacing: .015em;
}
.board__guidance[hidden] { display: none; }
.board__row { position: relative; }
.board--guided .board__row--own::after {
  content: attr(data-direction); position: absolute; right: -4%; top: 50%;
  transform: translateY(-50%); color: #f0d9a4; font: 600 13px/1 var(--font-ui);
  pointer-events: none;
}
.board__feedback { margin: 0; color: #fff0d3; font: 500 12px/1.5 var(--font-ui); text-align: center; }
.board__feedback:not(:empty) { margin-top: 12px; }
.board__sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.board .pit--skip::after {
  content: ''; position: absolute; inset: -9%; border: 2px dashed #f0d9a4;
  border-bottom-color: transparent; border-radius: 50%; pointer-events: none;
  animation: board-skip-mark .5s ease forwards;
}
@keyframes board-skip-mark { 0%, 65% { opacity: .9; } 100% { opacity: 0; } }
.board .cap-float--big { font-size: 18px; letter-spacing: 0; }
.board .board__surge { opacity: .4; animation-name: board-capture-glow; }
@keyframes board-capture-glow { 0%, 100% { opacity: 0; } 40% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .board .seed, .board .pit, .board .board__hand { transition: none; }
  .board .pit--legal:hover .seed,
  .board .pit--legal:focus-visible .seed,
  .board .pit--legal:active .seed { transform: none; }
  .board .pit--skip::after { animation: none; }
}