.bl-hero { display: flex; justify-content: center; }
.bl-mini { width: 120px; height: 120px; }
.bl-mini .bl-string, .bl-string { fill: none; stroke: var(--text-3); stroke-width: 3; stroke-linecap: round; }
.bl-play { max-width: 560px; margin: 0 auto; width: 100%; }
.bl-stage { min-height: 300px; padding: 8px 8px 0; overflow: hidden; }
.bl-svg { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; overflow: visible; }
.bl-balloon, .bl-knot { transition: opacity .12s ease-out; }
.bl-count { font-family: var(--font-num); font-weight: 900; font-size: 46px; fill: rgba(255, 255, 255, .92); paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 3px; }
.bl-hose { fill: none; stroke: var(--text-3); stroke-width: 5; stroke-linecap: round; }
.bl-pump-body { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 2; }
.bl-pump-base { fill: var(--text-2); }
.bl-rod { stroke: var(--text-2); stroke-width: 5; stroke-linecap: round; }
.bl-grip { fill: var(--primary); }
.bl-handle { transition: transform .1s ease-out; }
.bl-handle.is-down { transform: translateY(18px); }
.bl-dots { display: flex; justify-content: center; gap: 10px; --c: var(--primary); }
.bl-dots span { width: 16px; height: 16px; border-radius: 50%; background: var(--border-strong); transition: background .15s, transform .15s; }
.bl-dots span.on { background: var(--c); transform: scale(1.15); }
.bl-live { margin: 0; min-height: 1.6em; font-weight: 700; color: var(--text-2); }
.bl-controls { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.bl-controls[hidden] { display: none !important; }
.bl-pump-btn { min-height: 76px; font-size: 22px; touch-action: manipulation; }
.bl-next-btn { min-height: 76px; }
.bl-order { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bl-chip {
  --c: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; font-weight: 700; max-width: 100%;
}
.bl-chip b { color: var(--text-3); font-weight: 800; }
.bl-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.bl-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8em; }
.bl-chip.is-now { border-color: var(--c); background: var(--surface); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.bl-chip.is-out { border-color: var(--danger); background: var(--primary-soft); }
.bl-part {
  position: absolute; width: 11px; height: 7px; border-radius: 2px; pointer-events: none; z-index: 2;
  transform: translate(-50%, -50%); animation: bl-part 1s cubic-bezier(.12, .7, .3, 1) forwards;
}
@keyframes bl-part {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; }
}
.bl-bang {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  font-size: clamp(44px, 12vw, 72px); font-weight: 900; color: var(--primary); letter-spacing: -0.04em;
  text-shadow: 0 3px 0 var(--surface), 0 0 18px var(--surface);
  animation: bl-bang .6s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes bl-bang { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (max-width: 400px) {
  .bl-controls { grid-template-columns: 1fr 1fr; }
  .bl-pump-btn { font-size: 19px; padding: 0 12px; }
  .bl-next-btn { font-size: 16px; padding: 0 12px; }
}
.game-shell.is-full .bl-play { max-width: 640px; }