* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
}

.stage {
  position: fixed;
  inset: 0;
  background: #000;
}

.scene-wrap,
.scene-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

#stopButtonRect,
#startButtonRect,
#nextButtonRect,
#hotCardRect,
#iceCardRect,
[data-flavor] {
  cursor: pointer;
}

#stopButtonRect:active,
#startButtonRect:active,
#nextButtonRect:active,
#hotCardRect:active,
#iceCardRect:active,
[data-flavor]:active {
  opacity: 0.85;
}

.pill-btn {
  cursor: pointer;
}

.pill-btn:active {
  opacity: 0.85;
}

.lift-card {
  cursor: pointer;
  transition: transform 160ms ease;
}

.lift-card:hover {
  transform: translateY(-14px);
}

.lift-card:active {
  transform: translateY(-6px);
}

.other-game-link {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  text-decoration: none;
  padding: 6px 10px;
}

.other-game-link:active {
  color: rgba(255, 255, 255, 0.85);
}

.bubble-img {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bubblePop 480ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes bubblePop {
  0% {
    opacity: 0;
    transform: scale(0.35) translateY(14px) rotate(-4deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.08) translateY(-4px) rotate(1deg);
  }
  80% {
    transform: scale(0.97) translateY(0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}