.balloon-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.balloon {
    position: absolute;
    will-change: transform;
    transform-origin: center bottom;
    pointer-events: auto;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><defs><linearGradient id="s" x1="0%25" y1="0%25" x2="100%25" y2="0%25"><stop offset="0%25" stop-color="%23707070"/><stop offset="25%25" stop-color="%23a0a0a0"/><stop offset="45%25" stop-color="%23d8d8d8"/><stop offset="55%25" stop-color="%23f0f0f0"/><stop offset="75%25" stop-color="%23c0c0c0"/><stop offset="100%25" stop-color="%23606060"/></linearGradient></defs><g transform="rotate(140, 64, 64)"><path d="M62.5 6 C62.5 4 65.5 4 65.5 6 L65.5 10 L62.5 10 Z" fill="url(%23s)" stroke="%23505050" stroke-width="0.3"/><rect x="62.5" y="10" width="3" height="100" fill="url(%23s)" stroke="%23505050" stroke-width="0.3"/><ellipse cx="64" cy="7.5" rx="1" ry="2" fill="%230a0a0a"/><path d="M62.5 110 L65.5 110 L64 125 Z" fill="url(%23s)" stroke="%23505050" stroke-width="0.3"/><line x1="63.2" y1="12" x2="63.2" y2="109" stroke="%23ffffff" stroke-width="0.4" opacity="0.7"/><line x1="63.5" y1="111" x2="64" y2="123" stroke="%23ffffff" stroke-width="0.3" opacity="0.5"/></g></svg>') 0 0, auto;
}

.balloon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}