/* The spotlight rectangles. SVG geometry properties (x/y/width/height) are
   animatable in current browsers; where they aren't, the box simply snaps. */
#hole, #ring { transition: x .32s ease, y .32s ease, width .32s ease, height .32s ease; }
#ring { animation: ringPulse 2.1s ease-in-out infinite; }
@keyframes ringPulse { 0%,100%{ stroke-width:7 } 50%{ stroke-width:11 } }
#hits button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  #hole, #ring { transition: none }
  #ring { animation: none }
  .animate-risein { animation: none }
}