/* Superkids V1 -- Balloons 🎈 (3D) */
.balloon-wrap {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(#5fb8ff, #a9dcff 55%, #fff1d6);
}
.balloon-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: pointer;
}

/* ---------- HUD ---------- */
.balloon-hud {
  position: absolute; top: 10px; left: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  pointer-events: none;
}
.balloon-hud > button { pointer-events: auto; }

.balloon-target {
  --c: #FF6B9D;
  flex: none; width: 96px; height: 96px; border-radius: 50%; padding: 0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 70%, #000), 0 12px 22px rgba(0,0,0,.18);
  border: 6px solid var(--c);
}
.balloon-target.bump { animation: balloon-bump .6s cubic-bezier(.34,1.56,.64,1); }
.balloon-target:active { transform: translateY(5px); }
.balloon-target-in {
  font-size: 64px; font-weight: 800; line-height: 1; color: var(--c);
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
  margin-top: 6px;
}
.balloon-target.is-color { background: var(--c); border-color: #fff; }
.balloon-target.is-color .balloon-target-in {
  width: 30%; height: 22%; margin: -36% 0 0 -30%; border-radius: 50%;
  background: rgba(255,255,255,.6); transform: rotate(-30deg);
}

.balloon-mid {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.balloon-stars {
  display: flex; gap: 4px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 5px 0 rgba(108,92,231,.25), 0 10px 18px rgba(0,0,0,.12);
}
.balloon-star {
  font-size: 34px; line-height: 1;
  filter: grayscale(1) opacity(.28);
  transition: filter .2s;
}
.balloon-star.on { filter: none; animation: balloon-bump .55s cubic-bezier(.34,1.56,.64,1); }

.balloon-rounds { display: flex; gap: 8px; }
.balloon-rounds i {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.6); box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.balloon-rounds i.now { background: #FF6B9D; transform: scale(1.25); }
.balloon-rounds i.done { background: #00B894; }

.balloon-say { flex: none; width: 76px; height: 76px; padding: 0; font-size: 36px; }

/* big cheer between rounds */
.balloon-cheer {
  position: absolute; left: 50%; top: 45%; z-index: 3;
  font-size: 150px; line-height: 1; pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.15));
}
.balloon-cheer.go { animation: balloon-cheer 1.9s cubic-bezier(.34,1.56,.64,1) both; }

.balloon-nogl { font-size: 100px; text-align: center; margin-top: 25vh; }

@keyframes balloon-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes balloon-cheer {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(.9); opacity: 0; }
}

@media (max-width: 600px) {
  .balloon-hud { top: 6px; left: 10px; right: 10px; gap: 8px; }
  .balloon-target { width: 80px; height: 80px; border-width: 5px; }
  .balloon-target-in { font-size: 52px; }
  .balloon-stars { padding: 5px 10px; gap: 2px; }
  .balloon-star { font-size: 26px; }
  .balloon-say { width: 66px; height: 66px; min-width: 66px; min-height: 66px; font-size: 30px; }
  .balloon-cheer { font-size: 120px; }
}
@media (max-width: 360px) {
  .balloon-star { font-size: 21px; }
}