/* ------------------------------------------------------------------
 * حباب سرگردان (Wandering Bubble) -- گیمیفیکیشن
 * لایه‌ی مستقل و کاملاً ایزوله، تداخلی با استایل‌های اصلی سایت ندارد.
 * ------------------------------------------------------------------ */
.wb-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 2147483000;
    overflow: visible;
}

.wb-bubble {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.9), rgba(255,255,255,.05) 42%, rgba(150,195,255,.10) 72%, rgba(120,160,255,.04) 100%);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,.45),
        inset 0 0 36px rgba(120,160,255,.16),
        0 6px 20px rgba(20,30,60,.18);
    -webkit-backdrop-filter: blur(2px) saturate(1.35) brightness(1.05);
    backdrop-filter: blur(2px) saturate(1.35) brightness(1.05);
    will-change: transform, border-radius;
    transform: translate3d(-1000px, -1000px, 0);
}

.wb-bubble .wb-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
        rgba(255,90,180,.22), rgba(90,200,255,.22), rgba(255,225,90,.22),
        rgba(160,90,255,.22), rgba(255,90,180,.22));
    mix-blend-mode: overlay;
    opacity: .85;
    pointer-events: none;
}

.wb-bubble .wb-highlight {
    position: absolute;
    width: 26%;
    height: 16%;
    top: 14%;
    left: 20%;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    filter: blur(1.5px);
    transform: rotate(-25deg);
    pointer-events: none;
}

.wb-bubble.wb-dragging { cursor: grabbing; }

/* ------------------------------------------------------------------
 * حالت جایگزین (Enhanced fallback) -- برای مرورگرهایی که فیلتر SVG
 * (دیفورم/ذره‌بینی واقعی نوشته و تصویر زیر حباب) را در backdrop-filter
 * پشتیبانی نمی‌کنند (اکثر مرورگرهای موبایل، از جمله سافاری/کروم iOS و
 * فایرفاکس). در این حالت به‌جای دیفورم واقعی، درخشش/شفافیت/انعکاس شیشه
 * تقویت می‌شود تا حس شیشه‌ای و زنده بودن حباب حفظ شود. مقدار
 * backdrop-filter خودش inline از جاوااسکریپت ست می‌شود.
 * ------------------------------------------------------------------ */
.wb-bubble.wb-bubble-enhanced {
    box-shadow:
        inset 0 0 24px rgba(255,255,255,.55),
        inset 0 0 44px rgba(120,160,255,.22),
        inset 0 -10px 30px rgba(255,255,255,.14),
        0 8px 24px rgba(20,30,60,.22);
}

.wb-bubble.wb-bubble-enhanced .wb-sheen {
    opacity: 1;
    mix-blend-mode: overlay;
}

.wb-bubble.wb-bubble-enhanced .wb-highlight {
    width: 34%;
    height: 20%;
    background: rgba(255,255,255,.95);
    filter: blur(1px);
}

.wb-bubble.wb-bubble-enhanced .wb-highlight-2 {
    position: absolute;
    width: 14%;
    height: 9%;
    bottom: 20%;
    right: 22%;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    filter: blur(2px);
    transform: rotate(20deg);
    pointer-events: none;
}

@media (max-width: 640px) {
    .wb-bubble { box-shadow: inset 0 0 14px rgba(255,255,255,.4), inset 0 0 26px rgba(120,160,255,.14), 0 4px 14px rgba(20,30,60,.16); }
    .wb-bubble.wb-bubble-enhanced { box-shadow: inset 0 0 24px rgba(255,255,255,.55), inset 0 0 44px rgba(120,160,255,.22), inset 0 -10px 30px rgba(255,255,255,.14), 0 8px 24px rgba(20,30,60,.22); }
}

/* ------------------------------------------------------------------
 * قطره‌های پاشیده‌شده هنگام ترکیدنِ حباب -- چند دایره‌ی کوچکِ شیشه‌ای که
 * لحظه‌ی کلیک از مرکز حباب به بیرون می‌پاشند و محو می‌شوند، دقیقاً مثل
 * قطرات باقی‌مانده از ترکیدن واقعیِ یک حباب صابون.
 * ------------------------------------------------------------------ */
.wb-droplet {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(150,195,255,.55) 60%, rgba(120,160,255,.25) 100%);
    box-shadow: 0 0 4px rgba(120,160,255,.4);
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(0, 0) scale(1);
    opacity: 1;
}