/* Comic click bubbles */
.comic-bubble {
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.7);

  display: inline-block;
  padding: 10px 16px;
  border: 4px solid #000;
  background: var(--bg, #ff0);
  color: #000;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.5px;

  box-shadow: 8px 8px 0 #000;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;

  opacity: 0;
  animation: comicPop 1.5s forwards ease-out;
}

@keyframes comicPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 18px)) rotate(var(--rot, 0deg)) scale(1);
  }
}