.fb-tooltip {
    position: absolute;
    top: -45px;
    padding: 6px 14px;
    background: var(--tooltip-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.4);
    z-index: 10000;
}

/* 1. 水滴特效 (Droplet) */
.effect-droplet {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    box-shadow: inset 12px 12px 25px rgba(255, 255, 255, 0.8), inset -12px -12px 25px rgba(0, 0, 0, 0.03), 8px 20px 35px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: droplet-morph 8s ease-in-out infinite;
}

/* 2. 气泡特效 (Bubble) */
.effect-bubble {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.2) 25%, transparent 100%);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.6), inset -10px -10px 25px rgba(0, 255, 255, 0.12), inset 10px 10px 25px rgba(255, 0, 255, 0.12), 0 15px 35px rgba(0, 123, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: bubble-float 5s ease-in-out infinite;
}

/* 3. 晶格特效 (Crystal) */
.effect-crystal {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    transform: rotate(45deg);
}
.effect-crystal > *:not(.fb-tooltip) { transform: rotate(-45deg); }

/* 4. 磁力特效 (Magnetic) */
.effect-magnetic {
    background: transparent;
    border-radius: 50%;
    border: 1px dashed rgba(0, 198, 255, 0.3);
    overflow: visible !important;
}
.effect-magnetic::after {
    content: '';
    position: absolute;
    top: -10%; left: -10%;
    width: 120%; height: 120%;
    border-radius: 50%;
    border: 2px solid rgba(0, 198, 255, 0.6);
    animation: magnetic-pulse 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    pointer-events: none;
}

/* 5. 极光特效 (Aurora) */
.effect-aurora {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 25%, #7000ff 50%, #ff00de 75%, #00f2fe 100%);
    background-size: 400% 400%;
    animation: aurora-flow 8s linear infinite, droplet-morph 12s ease-in-out infinite;
    border: none;
    box-shadow: 0 10px 30px rgba(79, 172, 254, 0.5);
    filter: contrast(1.1) saturate(1.2);
}

/* Hover 通用 */
[class*="effect-"]:hover .fb-tooltip {
    opacity: 1;
    transform: translateY(-15px) scale(1);
}
[class*="effect-"]:hover {
    transform: scale(1.1);
}

/* 动画 */
@keyframes droplet-morph {
    0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
    33% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
    66% { border-radius: 50% 50% 30% 70% / 54% 60% 40% 46%; }
}
@keyframes bubble-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes magnetic-pulse {
    0% { transform: scale(0.85); opacity: 0.8; border-width: 4px; }
    100% { transform: scale(1.4); opacity: 0; border-width: 1px; }
}
@keyframes aurora-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}