/* Balloon Pop — sky blue x magenta party accent */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
    --shadow-glow: 0 0 25px rgba(217, 70, 239, 0.4);
    --shadow-glow-lg: 0 0 40px rgba(217, 70, 239, 0.5);
    --accent-blue: #0ea5e9;
}

.emoji-icon { font-size: 20px; }
.btn-add-item {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px; padding: 9px; border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border); background: transparent;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: var(--transition-fast); width: 100%;
}
.btn-add-item:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(14, 165, 233, 0.08); }

/* ---------- Balloon stage ---------- */
.balloon-stage { flex-direction: column; }
.balloon-stage { background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.2), transparent 28%), linear-gradient(180deg, rgba(56,189,248,.14), rgba(217,70,239,.04)); }

.balloon-rig {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* The balloon scales up from a bottom anchor as it's pumped, so most of the
   growth room needs to be above it. Centering the rig in the stage (the
   default .canvas-container behavior) leaves too little headroom on short
   containers and the top gets clipped by the stage's overflow:hidden —
   anchor the rig near the bottom instead. */
.canvas-container.balloon-stage { justify-content: flex-end; padding-bottom: 28px; }

.balloon {
    --balloon-color: #f472b6;
    position: relative;
    width: 150px; height: 180px;
    background: radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.78) 0 7%, transparent 18%), radial-gradient(ellipse at 32% 28%, color-mix(in srgb, var(--balloon-color) 52%, white), var(--balloon-color) 60%, color-mix(in srgb, var(--balloon-color) 72%, black));
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    box-shadow: inset -12px -14px 24px rgba(0,0,0,0.15), 0 14px 30px rgba(0,0,0,0.18);
    transform: scale(1);
    transform-origin: bottom center;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.balloon::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 14%; height: 28%; border-radius: 50%; border-bottom: 2px solid rgba(255,255,255,.2); transform: rotate(-12deg); }
.balloon::after { content: ''; position: absolute; top: 18px; right: 22px; width: 22px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent); transform: rotate(26deg); }
.balloon.popping {
    animation: balloonPop 0.28s ease forwards;
}
@keyframes balloonPop {
    0% { transform: scale(var(--pop-scale, 1.3)); opacity: 1; }
    40% { transform: scale(calc(var(--pop-scale, 1.3) * 1.15)); opacity: 1; }
    70% { transform: scale(0.2); opacity: 0.6; }
    100% { transform: scale(0); opacity: 0; }
}
.balloon-shine {
    position: absolute; top: 22%; left: 26%;
    width: 26px; height: 40px;
    background: rgba(255,255,255,0.55);
    border-radius: 50%;
    transform: rotate(-18deg);
}
.balloon.hidden { visibility: hidden; }

.balloon-knot {
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid var(--balloon-knot-color, #f472b6);
    margin-top: -2px;
}
.balloon-string {
    width: 2px; height: 70px;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.8) 0 4px, #7dd3fc 4px 7px, transparent 7px 10px);
}
.balloon-rig::before, .balloon-rig::after { content: '✦'; position: absolute; color: rgba(255,255,255,.75); font-size: 20px; text-shadow: 0 0 12px rgba(255,255,255,.65); animation: balloonStar 2.4s ease-in-out infinite alternate; }
.balloon-rig::before { top: 38px; left: -64px; } .balloon-rig::after { top: 104px; right: -64px; animation-delay: -.8s; }
@keyframes balloonStar { from { transform: scale(.7) rotate(0); opacity: .45; } to { transform: scale(1.18) rotate(30deg); opacity: 1; } }

/* Soft storybook-sky treatment. */
.balloon-stage { background: radial-gradient(ellipse at 18% 24%, rgba(255,255,255,.82) 0 5%, transparent 6%), radial-gradient(ellipse at 23% 24%, rgba(255,255,255,.72) 0 7%, transparent 8%), radial-gradient(ellipse at 78% 72%, rgba(255,255,255,.55) 0 5%, transparent 6%), linear-gradient(180deg, #bfeaf8 0%, #dff5fa 46%, #d8efc9 100%); }
.balloon-rig { filter: drop-shadow(0 18px 12px rgba(42,113,138,.2)); }
.balloon-knot { filter: drop-shadow(0 2px 0 rgba(122,62,122,.25)); }
.balloon-string { background: linear-gradient(90deg, transparent 45%, rgba(85,94,115,.7) 49% 51%, transparent 55%); }

.pump-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 18px auto 4px;
    padding: 16px 38px;
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
    color: #fff;
    background: var(--color-primary-gradient);
    border: none; border-radius: 50px;
    cursor: pointer;
    box-shadow: var(--shadow-glow-lg), 0 10px 0 rgba(0,0,0,0.18);
    transition: transform 0.1s ease;
}
.pump-btn:not(:disabled) { animation: pumpPulse 1.6s ease-in-out infinite; }
.pump-btn .material-symbols-outlined { font-size: 24px; }
.pump-btn:hover:not(:disabled) { transform: translateY(-2px); }
.pump-btn:active:not(:disabled) { transform: translateY(4px) scale(0.98); box-shadow: var(--shadow-glow), 0 4px 0 rgba(0,0,0,0.18); }
.pump-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
@keyframes pumpPulse {
    0%, 100% { box-shadow: var(--shadow-glow-lg), 0 10px 0 rgba(0,0,0,0.18); }
    50% { box-shadow: 0 0 46px color-mix(in srgb, var(--accent-blue) 55%, transparent), 0 10px 0 rgba(0,0,0,0.18); }
}

.balloon-stage.shaking { animation: dgShake 0.4s ease; }

@media (max-width: 640px) {
    .balloon { width: 116px; height: 140px; }
    .pump-btn { padding: 14px 28px; font-size: 0.95rem; }
    .canvas-container.balloon-stage { min-height: 380px; padding-bottom: 16px; }
}
.game-help { margin: 0 0 28px; padding: 26px; }.game-help h2 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 16px; }.game-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.game-help article { padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-hover); }.game-help h3 { color: var(--accent-blue); font-family: var(--font-display); font-size: 1rem; margin-bottom: 7px; }.game-help p { color: var(--text-secondary); font-size: .88rem; line-height: 1.75; }@media (max-width:720px){.game-help{padding:20px 16px}.game-help-grid{grid-template-columns:1fr}}