.bub-area {
    position: relative; overflow: hidden; width: 100%;
    height: min(62vh, 540px); border-radius: 18px; border: 4px solid #cdeefe;
    background: linear-gradient(180deg, #d0f0ff, #eafaff); touch-action: none;
}
.bubble {
    position: absolute; bottom: -90px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .7);
    box-shadow: inset -6px -8px 12px rgba(0, 0, 0, .08);
    animation: rise linear forwards; will-change: transform;
}
@keyframes rise { to { transform: translate(var(--drift, 0), -130vh); } }
.bubble.pop { animation: none; transform: scale(1.5); opacity: 0; transition: transform .16s, opacity .16s; }
.bubble.bonus {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; border-color: #ffe066;
    box-shadow: inset -6px -8px 12px rgba(0, 0, 0, .08), 0 0 14px #ffe066;
}