#spring {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#spring .stage {
  position: relative;
  width: 640px;
  height: 480px;
  flex: none;
  transform-origin: center;
}
#spring svg { display: block; font-family: Georgia, "Times New Roman", serif; }
#spring .msg { paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 3px; }
#spring .hs, #spring .btn, #spring .nav { cursor: pointer; }
#spring .btn:hover { filter: brightness(1.12); }
#spring .nav .bar { fill: #ff66ff; fill-opacity: .1; stroke: #ff00ff; stroke-width: 1; transition: fill-opacity .12s; }
#spring .nav:hover .bar { fill-opacity: .4; }
#spring .fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
#spring .fade.run { animation: spring-fade .22s ease-out; }
@keyframes spring-fade { from { opacity: 1; } to { opacity: 0; } }
#spring .swing { transform-box: fill-box; transform-origin: 50% 0; animation: spring-swing .9s ease-out; }
@keyframes spring-swing { 0% { transform: rotate(0); } 20% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
#spring .petal { animation: spring-petal 6s linear infinite; transform: translate(var(--x), -20px); }
@keyframes spring-petal { from { transform: translate(var(--x), -20px) rotate(0); } to { transform: translate(calc(var(--x) + 60px), 500px) rotate(360deg); } }

#bonus-btn {
  position: absolute;
  display: none;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 6px;
  background: linear-gradient(#ff7ad9, #e0109e);
  color: #fff;
  font: bold small-caps 18px Georgia, serif;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 2px #7a0a52, 0 3px 10px rgba(0, 0, 0, .5);
  cursor: pointer;
  transform-origin: 0 0;
}
#bonus-btn:hover { filter: brightness(1.12); }
#bonus-btn small { display: block; font-size: 11px; color: #fff3b0; }
#spring .loading { position: absolute; inset: 0; display: grid; place-items: center; color: #f7a8c8; font: 20px Georgia, serif; background: #000; }
#spring .pick { cursor: pointer; }
#spring .pick:hover image { filter: brightness(1.15) drop-shadow(0 0 6px #fff6c0); }
#spring .nohit { pointer-events: none; }
#spring .bellpick:hover image { filter: brightness(1.18) drop-shadow(0 0 10px #ffe08a); }
#spring .ripple { transform-box: fill-box; transform-origin: center; animation: spring-ripple .8s ease-out forwards; }
@keyframes spring-ripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }