chess-playback { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
chess-playback .control-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 7px; border: 1px solid var(--panel-border, #ccd9cc); border-radius: 9px; background: var(--panel-bg, #fffdf8); color: var(--ink, #263b35); cursor: pointer; }
chess-playback .control-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
chess-playback .control-icon:disabled { opacity: .4; cursor: default; }
chess-playback .control-icon:focus-visible { outline: 3px solid #df9835; outline-offset: 2px; }

chess-playback[hidden] { display: none; }
@media (pointer: coarse) { chess-playback .control-icon { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; } }