/* Bubble Pop — widget-local styles. The widget chrome (HUD, arena base,
   overlays, score form, leaderboard) lives in ../../style.css; only this
   game's own visuals live here. */

:root {
  --zz-arena-top: #dcecff;
  --zz-arena-bottom: #b3d2ff;
  --zz-bubble-ink: #1d3a5f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zz-arena-top: #15202f;
    --zz-arena-bottom: #12294a;
  }
}

.arena {
  background: linear-gradient(180deg, var(--zz-arena-top), var(--zz-arena-bottom));
}

/* The <button> is the (moving) hit area; the inner .skin is the visual so the
   pop animation can scale it without fighting the button's translate(). */

.bubble {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bubble .skin {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-weight: 800;
  color: var(--zz-bubble-ink);
  box-shadow: inset -3px -5px 10px rgba(29, 58, 95, 0.18);
}

.bubble .skin::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  width: 28%;
  height: 18%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transform: rotate(-24deg);
}

.bubble.c0 .skin { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), #a7d4ff 45%, #5b9ee0); }
.bubble.c1 .skin { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), #ffc2d1 45%, #ef8fa9); }
.bubble.c2 .skin { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), #cdc0ff 45%, #9a86ec); }
.bubble.c3 .skin { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), #b1ecd1 45%, #6fc9a1); }
.bubble.c4 .skin { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), #ffdfa6 45%, #efb35f); }

@media (prefers-reduced-motion: no-preference) {
  .bubble.popped .skin {
    animation: zz-pop 0.22s ease-out forwards;
  }

  @keyframes zz-pop {
    40%  { transform: scale(1.25); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble.popped .skin {
    opacity: 0;
    transition: opacity 0.15s linear;
  }
}

.bubble.gone .skin {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}