/* 裝備氣泡包覆與自然飄動特效 */
.cat-main-aura {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.22) 0%, rgba(255, 255, 255, 0.08) 65%, transparent 100%);
    border: 2px solid rgba(255, 215, 0, 0.55);
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.45), inset 0 0 25px rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: 2;
    animation: auraPulse 3s infinite alternate ease-in-out;
}

@keyframes auraPulse {
    0% { transform: scale(0.96); opacity: 0.65; }
    100% { transform: scale(1.06); opacity: 1; box-shadow: 0 0 50px rgba(255, 215, 0, 0.75); }
}

/* 解鎖裝備數量的個別自然飄動氣泡 */
.floating-bubble-item {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* 質感水光氣泡背景 */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 230, 150, 0.85) 50%, rgba(184, 147, 85, 0.9) 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), inset 0 0 12px rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3a2211;
    font-size: 1.5rem;
    pointer-events: auto;
    z-index: 3;
    cursor: pointer;
    opacity: 0; /* 預設 0，淡入進場 */
}

/* 懸停氣泡放大與發光 */
.floating-bubble-item:hover {
    transform: translate(var(--target-x), var(--target-y)) scale(1.25) !important;
    box-shadow: 0 0 28px #ffd700, inset 0 0 15px #ffffff;
}

/* 氣泡內圖示與懸浮標題 */
.bubble-inner-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bubble-title-tooltip {
    position: absolute;
    bottom: -30px;
    white-space: nowrap;
    background: rgba(30, 16, 8, 0.92);
    color: #ffd700;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #d4af37;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.floating-bubble-item:hover .bubble-title-tooltip {
    opacity: 1;
}

/* 【需求 2 修正】：淡入 + 3 種自然隨機飄動軌跡 */
.bubble-anim-1 {
    animation: bubbleFadeIn 0.8s ease-out forwards, naturalFloat1 4.2s infinite ease-in-out alternate;
}
.bubble-anim-2 {
    animation: bubbleFadeIn 0.8s ease-out forwards, naturalFloat2 4.8s infinite ease-in-out alternate;
}
.bubble-anim-3 {
    animation: bubbleFadeIn 0.8s ease-out forwards, naturalFloat3 5.4s infinite ease-in-out alternate;
}

@keyframes bubbleFadeIn {
    0% {
        opacity: 0;
        transform: translate(var(--target-x), var(--target-y)) scale(0.3);
    }
    100% {
        opacity: 1;
        transform: translate(var(--target-x), var(--target-y)) scale(1);
    }
}

@keyframes naturalFloat1 {
    0% { transform: translate(var(--target-x), var(--target-y)) translateY(0px) rotate(0deg); }
    100% { transform: translate(var(--target-x), var(--target-y)) translateY(-18px) rotate(6deg); }
}

@keyframes naturalFloat2 {
    0% { transform: translate(var(--target-x), var(--target-y)) translateY(0px) translateX(0px); }
    100% { transform: translate(var(--target-x), var(--target-y)) translateY(-22px) translateX(10px); }
}

@keyframes naturalFloat3 {
    0% { transform: translate(var(--target-x), var(--target-y)) translateY(0px) scale(0.96); }
    100% { transform: translate(var(--target-x), var(--target-y)) translateY(-16px) scale(1.06); }
}

/* 浮動字體特效 */
.confetti-piece {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    border-radius: 3px;
}

.floating-plus-text {
    position: fixed;
    z-index: 10001;
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 8px #ff6d00, 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    animation: floatUpFade 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    font-family: var(--font-main);
}

@keyframes floatUpFade {
    0% { opacity: 1; transform: translateY(0) scale(0.8); }
    50% { opacity: 1; transform: translateY(-45px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-90px) scale(0.9); }
}