body {
  transition: background-color 0.4s;
}

#game {
  display: grid;
  place-content: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#game div {
  white-space: nowrap;
  text-align: center;
}

#game b {
  display: inline-block;
  width: 13vmin;
  height: 13vmin;
  border-radius: 50%;
  cursor: pointer;
  margin: 1.2vmin 1.8vmin;
  transition: box-shadow 0.2s, background-color 0.4s;
  box-shadow: 0 0 0 0.7vmin white;
  position: relative;
}

/* the odd ball gently bounces so very young kids can find it */
#game b[data-pick="1"] {
  animation: kick 1.4s infinite cubic-bezier(0.31, 0.44, 0.44, 1.65);
  animation-delay: 3s;
}

#game b.wrong {
  animation: shake 0.4s;
}

#game b.fall {
  width: 7vmin;
  height: 7vmin;
  position: absolute;
  pointer-events: none;
  animation: falling 2.8s cubic-bezier(0.31, 0.44, 0.44, 1.65);
}

#game p {
  color: white;
  display: none;
  width: 100vw;
  text-align: center;
  font-size: 16vmin;
  font-weight: 900;
  animation: twist 1s infinite cubic-bezier(0.31, 0.44, 0.44, 1.65);
  text-shadow: 1vmin 1vmin 0 #e33,
    1vmin -1vmin 0 #93e,
    -1vmin -1vmin 0 #ed3,
    -2vmin 1vmin 0 #3b9,
    2vmin 1vmin 0 #e39;
}

@keyframes falling {
  0% { top: -10vh; }
  100% { top: 110vh; }
}

@keyframes twist {
  0%, 100% { transform: rotate(0); }
  25%, 75% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

@keyframes kick {
  0%, 100% { top: 0; transform: scaleY(1); }
  10% { top: 0; transform: scaleY(0.85); }
  50% { top: -1.5vmin; transform: scaleY(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1.2vmin); }
  75% { transform: translateX(1.2vmin); }
}