.balloon-game-area {
    position: relative;
    width: 100%;
    height: 600px;
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
    overflow: hidden;
    border-radius: 20px;
    cursor: crosshair;
    border: 4px solid #fff;
}

.balloon-info {

    padding: 8px 0;

}

/* === LUFI KONTÉNER === */
.balloon-container {
    position: absolute;
    bottom: -150px;
    width: 80px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: var(--balloon-scale, 1);
    animation:
        floatUp var(--float-speed, 4s) linear forwards,
        sway var(--sway-duration, 3s) ease-in-out infinite alternate,
        tilt calc(var(--sway-duration, 3s) * 1.3) ease-in-out infinite alternate;
}

/* Felszállás */
@keyframes floatUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-900px);
    }
}

/* Oldalsó kilengés */
@keyframes sway {
    from {
        margin-left: calc(var(--sway, 20px) * -1);
    }

    to {
        margin-left: var(--sway, 20px);
    }
}

/* Enyhe forgás a saját tengely körül */
@keyframes tilt {
    0% {
        rotate: calc(var(--rotation-max, 5deg) * -1);
    }

    100% {
        rotate: var(--rotation-max, 5deg);
    }
}

/* === LUFI TEST === */
.balloon-body {
    width: 80px;
    height: 100px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    box-shadow:
        inset -10px -10px 15px rgba(0, 0, 0, 0.12),
        inset 5px 5px 10px rgba(255, 255, 255, 0.15),
        0 4px 15px var(--glow-color, rgba(0, 0, 0, 0.15));
    position: relative;
    transition: transform 0.1s;
    z-index: 1;
}

.balloon-body:hover {
    transform: scale(1.08);
    box-shadow:
        inset -10px -10px 15px rgba(0, 0, 0, 0.12),
        inset 5px 5px 10px rgba(255, 255, 255, 0.15),
        0 4px 25px var(--glow-color, rgba(0, 0, 0, 0.25));
}

/* Fő fényvisszaverődés - nagy ovális csillanás */
.balloon-highlight {
    position: absolute;
    top: 12%;
    left: 18%;
    width: 22px;
    height: 28px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    filter: blur(3px);
}

/* Kis éles spekuláris pont */
.balloon-body::before {
    content: '';
    position: absolute;
    top: 22%;
    left: 28%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(1px);
}

/* Alsó peremfény - visszavert fény az aljáról */
.balloon-body::after {
    content: '';
    position: absolute;
    bottom: 15%;
    right: 15%;
    width: 30px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(6px);
}

/* Csomó a lufi alján */
.balloon-knot {
    width: 12px;
    height: 8px;
    background: #94abb5;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    margin-top: -2px;
    z-index: 0;
}

/* === SZÁL (SVG hajlított) === */
.balloon-string {
    stroke: #94abb5;
    animation: stringSway ease-in-out infinite alternate;
    animation-duration: var(--sway-duration, 3s);
    transform-origin: top center;
}

@keyframes stringSway {
    0% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(3deg);
    }
}

/* === LUFI SZÍNEK === */
.b1 {
    background: radial-gradient(circle at 30% 30%, #ffd6d6, #ef5350, #c62828);
    --glow-color: rgba(230, 57, 70, 0.35);
}

.b2 {
    background: radial-gradient(circle at 30% 30%, #ffe5b4, #fb8c00, #e65100);
    --glow-color: rgba(247, 127, 0, 0.35);
}

.b3 {
    background: radial-gradient(circle at 30% 30%, #fff3b0, #fdd835, #f9a825);
    --glow-color: rgba(252, 191, 73, 0.35);
}

.b4 {
    background: radial-gradient(circle at 30% 30%, #d4f8e8, #4db6ac, #00796b);
    --glow-color: rgba(42, 157, 143, 0.35);
}

.b5 {
    background: radial-gradient(circle at 30% 30%, #d0ebff, #5c9dc5, #2a6592);
    --glow-color: rgba(69, 123, 157, 0.35);
}

.b6 {
    background: radial-gradient(circle at 30% 30%, #e0c3fc, #ab47bc, #6a1b9a);
    --glow-color: rgba(142, 68, 173, 0.35);
}

.b7 {
    background: radial-gradient(circle at 30% 30%, #fbc2eb, #ec407a, #ad1457);
    --glow-color: rgba(214, 51, 132, 0.35);
}

.b8 {
    background: radial-gradient(circle at 30% 30%, #caffbf, #66bb6a, #2e7d32);
    --glow-color: rgba(85, 166, 48, 0.35);
}

.b9 {
    background: radial-gradient(circle at 30% 30%, #dee2ff, #7e57c2, #4527a0);
    --glow-color: rgba(95, 61, 196, 0.35);
}

/* === PUKKANÁS RÉSZECSKÉK === */
.pop-particles {
    position: absolute;
    pointer-events: none;
    z-index: 15;
}

.pop-particle {
    position: absolute;
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 50%;
    left: 0;
    top: 0;
    animation: particleBurst 0.5s ease-out forwards;
}

@keyframes particleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx, 30px), var(--ty, 40px)) scale(0.2);
    }
}