/* Only the live game board uses these effects. Lessons have their own player. */
#board { position: relative; }
#board .square:disabled { opacity: 1; }
#board[data-animating] .square { cursor: wait; }
#board .move-flight-layer,
#board .move-trace { position: absolute; inset: 0; pointer-events: none; user-select: none; }
#board .move-flight-layer { z-index: 12; overflow: visible; }
#board .move-ghost { position: absolute; width: 14.285714%; height: 14.285714%; will-change: left, top, transform; }
#board .move-ghost .token { box-shadow: 0 3px 0 #8c8163, 0 6px 9px #283c3547; }
#board .move-ghost .token.black { box-shadow: 0 3px 0 #1b3122, 0 6px 9px #18291b59; }
#board .move-trace { z-index: 8; opacity: .74; }
#board .move-trace svg { display: block; width: 100%; height: 100%; overflow: visible; }
#board .move-origin { fill: none; stroke: #9c5f18; stroke-width: 3; stroke-dasharray: 5 5; opacity: .7; }
#board .move-trail { fill: none; stroke: #ac6920; stroke-width: 4; stroke-linecap: round; }
#board .move-arrowhead { fill: none; stroke: #945613; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  #board .move-ghost { will-change: auto; }
}

.move-feedback { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid #c8c3ae; }
.move-feedback>div { min-width:0; }
.move-feedback .eyebrow { display:block; font-size:10px; margin-bottom:5px; }
.move-feedback strong { display:block; color:#263c30; font-size:14px; line-height:1.5; }
.move-feedback .button { flex-shrink:0; font-size:12px; padding:10px 12px; }
.move-preferences { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 0 4px; }
.move-preferences label { display:flex; align-items:center; gap:10px; color:#526251; font-size:12px; }
.move-preferences select { width:auto; margin:0; padding:8px 26px 8px 10px; font-size:12px; min-height:40px; }
.move-preferences .button { padding:9px 12px; font-size:12px; min-height:40px; }
.move-preferences small { color:#65715f; font-size:11px; flex:1 1 160px; }
.move-preferences .audio-credit { color:#65715f; font-size:10px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:440px) { .move-feedback { gap:8px; } .move-feedback strong { font-size:12px; } .move-feedback .button { padding:9px; font-size:11px; } .move-preferences { gap:8px 12px; } .move-preferences small { flex-basis:70%; } }