/* Artwork additions are scoped to the SVG; instrument hit areas stay interactive. */
/* SVG drum groups need the same tap-highlight reset as HTML buttons. */
#drum-kit,
#drum-kit * { -webkit-tap-highlight-color:transparent; }
#drum-kit .drum-sticks,
#drum-kit .drum-sticks *,
#drum-kit .cowbell-mount,
#drum-kit .kick-hardware,
#drum-kit .kick-hardware * { pointer-events:none; }
#drum-kit .kick-pedal { transform-box:view-box; transform-origin:556px 553px; }
#drum-kit .kick-beater { transform-box:view-box; transform-origin:556px 498px; }
#drum-kit .hihat-pedal { transform-box:view-box; transform-origin:177px 518px; }
/* Stick transforms are fixed at render time; only their opacity changes on a hit. */
#drum-kit .drum-stick--ready { opacity:1; }
#drum-kit .drum-stick--hit { opacity:0; }
#drum-kit .head-surface { transform-box:fill-box; transform-origin:center; }
#drum-kit .cymbal-surface,
#drum-kit .cymbal-shoulder { pointer-events:none; }
#drum-kit .cowbell-body { transform-origin:750px 264px; }
#drum-kit [data-drum="cowbell"].is-hit .cowbell-body { animation:cowbell-hit .2s ease-out; }
#drum-kit [data-drum="cowbell"]:focus-visible { outline:none; }
#drum-kit [data-drum="cowbell"]:focus-visible .hit-glow { opacity:.85; stroke:#eff0b9; }
@keyframes cowbell-hit { 30% { transform:rotate(-2deg); } 65% { transform:rotate(1deg); } }
@media(prefers-reduced-motion:reduce) {
  #drum-kit .drum-stick,
  #drum-kit .cowbell-body,
  #drum-kit .kick-pedal,
  #drum-kit .hihat-pedal,
  #drum-kit .kick-beater { animation:none!important; transition:none!important; }
}