#sh-svg {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  background: radial-gradient(ellipse at center, #283032, #1a2022);
  border-radius: 12px;
}
.sh-shape {
  cursor: pointer;
  transition: transform .1s ease, filter .1s ease;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.sh-shape:hover { filter: drop-shadow(0 3px 10px rgba(255,211,107,.5)); }
.sh-shape.is-good { animation: sh-pop .3s ease forwards; }
.sh-shape.is-bad  { animation: sh-shake .3s ease; }
@keyframes sh-pop { to { transform: scale(1.2); opacity: .3; } }
@keyframes sh-shake { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-3px,0);} 75%{transform:translate(3px,0);} }
.sh-target { color: var(--accent); font-family: 'Caveat', cursive; }
.sh-controls {
  display: flex;
  justify-content: center;
  margin-top: .75rem;
}