/* Mini-game Bóng bay (dùng với shared/js/balloon.js).
   Game đặt chiều cao bầu trời bằng biến --sky-h và bề rộng tối đa bằng --play-max. */

.sky {
  position: relative;
  width: 100%;
  max-width: var(--play-max, 1100px);
  height: var(--sky-h, 320px);
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(120px 46px at 18% 26%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(160px 54px at 26% 30%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(140px 50px at 78% 18%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(180px 60px at 86% 24%, rgba(255, 255, 255, 0.75), transparent 70%),
    linear-gradient(180deg, #a9dcff 0%, #d7efff 60%, #fff4e6 100%);
}
.sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7));
  pointer-events: none;
}
.sky.hurt { animation: sky-hurt 0.45s; }
.balloon {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  pointer-events: none;
}
.balloon-body {
  position: relative;
  display: grid;
  place-items: center;
  height: 102px;
  border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.9) 0 7%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset -8px -12px 20px rgba(0, 0, 0, 0.14), 0 14px 22px -12px rgba(31, 27, 61, 0.45);
}
.balloon-body::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid var(--c2);
}
.balloon-string { width: 20px; height: 46px; margin: 4px auto 0; overflow: visible; }
.balloon-string path { fill: none; stroke: rgba(31, 27, 61, 0.35); stroke-width: 1.5; }
.balloon-text {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.balloon-text b { color: #fff36b; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
/* Bóng phép tính: phép tính ở trên, ô đáp số bên dưới */
.balloon-answer { display: none; }
.balloon.is-question .balloon-body { align-content: center; gap: 4px; height: 112px; }
.balloon.is-question .balloon-text { font-size: 26px; }
.balloon.is-question .balloon-answer {
  display: block;
  min-width: 46px;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f1b3d;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.balloon.target .balloon-body { box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(255, 255, 255, 0.4), 0 14px 22px -12px rgba(31, 27, 61, 0.45); }
.balloon.popping .balloon-body { animation: balloon-pop 0.3s ease-out forwards; }
.balloon.popping .balloon-string { opacity: 0; }
.balloon-bit {
  position: absolute;
  left: 50%;
  top: 50px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  animation: bit-fly 0.42s ease-out forwards;
}
.hearts { font-size: 0.8rem; letter-spacing: -2px; white-space: nowrap; }
.intro-balloons { font-size: 3rem; letter-spacing: 6px; animation: float 3s ease-in-out infinite; }
@keyframes balloon-pop { 60% { transform: scale(1.35); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes bit-fly { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
@keyframes sky-hurt { 30% { box-shadow: inset 0 0 0 6px rgba(239, 79, 95, 0.55); } }