/* ========== 卡片动画特效样式 ========== */
/* 从 cards.css 拆分 v3.5 */

/* ========== 加减分特效样式 ========== */
/* 加分时宠物抖动效果 - 加速版 */
.student-card.reward-effect .card-pet-image img,
.student-card.reward-effect .card-pet-egg {
    animation: petBounce 0.9s ease-in-out !important;
}

/* 加分时边框四周红色到金色渐变外发光效果 - 单向渐变1.5秒 */
.student-card.reward-border-flash {
    animation: borderRedToGoldFlash 1.5s ease-out forwards !important;
}

/* 加分时进度条主题色到金色渐进效果 */
.student-card.reward-progress-effect .progress-fill {
    animation: progressThemeToGold 0.8s ease-out forwards, progressGoldShimmer 0.4s ease-in-out 0.8s 2 !important;
}

/* 减分绿色闪动 - 仅进度条和食物数字 */
.student-card.flash-green .progress-fill {
    animation: flashGreenBar 0.5s ease-in-out 3;
}

.student-card.flash-green .info-item:first-child span {
    animation: flashGreenText 0.5s ease-in-out 3;
    display: inline-block;
}

/* 飞行食物图标容器 */
.flying-food-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 150;
    overflow: visible;
}

/* 飞行食物图标 */
.flying-food {
    position: absolute;
    width: 32px;
    height: 32px;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    z-index: 151;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 飞行动画阶段1：飞行 */
.flying-food.phase-fly {
    animation: foodFlyIn 0.6s ease-out forwards;
}

/* 飞行动画阶段2：抖动 */
.flying-food.phase-shake {
    animation: foodShake 0.4s ease-in-out forwards;
}

/* 飞行动画阶段3：消失 */
.flying-food.phase-fade {
    animation: foodFadeOut 0.3s ease-out forwards;
}

/* 迸发粒子容器 */
.burst-particles-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 152;
}

/* 迸发粒子（桃心/五角星） - 增强版 */
.burst-particle {
    position: absolute;
    font-size: 20px;
    line-height: 1;
    animation: particleBurst 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    text-shadow: 0 0 8px currentColor;
}

/* 不同大小的粒子 - 增大尺寸 */
.burst-particle.size-small { font-size: 16px; }
.burst-particle.size-medium { font-size: 22px; }
.burst-particle.size-large { font-size: 28px; }
.burst-particle.size-xlarge { font-size: 36px; }

/* 金色"+"粒子样式 - 有质感 */
.burst-particle.plus-particle {
    font-weight: 900;
    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
    color: #ffd700 !important;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.9),
        0 0 20px rgba(255, 193, 7, 0.7),
        1px 1px 2px rgba(139, 90, 43, 0.8),
        -1px -1px 1px rgba(255, 255, 200, 0.5);
    filter: drop-shadow(0 2px 4px rgba(139, 90, 43, 0.5));
    background: linear-gradient(135deg, #ffd700 0%, #ffec8b 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 金色"+"粒子不同大小 */
.burst-particle.plus-particle.size-small { font-size: 18px; }
.burst-particle.plus-particle.size-medium { font-size: 24px; }
.burst-particle.plus-particle.size-large { font-size: 32px; }
.burst-particle.plus-particle.size-xlarge { font-size: 40px; }


/* ========== 升级庆祝效果样式 ========== */
/* 卡片抖动+边缘微光 */
.student-card.level-up-celebrate {
    animation: cardShake 0.6s ease-in-out, cardGlow 1s ease-in-out infinite;
}

/* ========== 降级效果样式 ========== */
/* 卡片抖动+绿色边缘微光 */
.student-card.level-down-effect {
    animation: cardShake 0.6s ease-in-out, cardGlowGreen 1s ease-in-out infinite;
}

/* 宠物增强呼吸效果 */
.student-card.pet-breathe-strong .card-pet-image img {
    animation: breatheStrong 0.8s ease-in-out infinite !important;
}

/* 烟花容器 */
.card-fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

/* 烟花粒子 */
.firework-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: fireworkParticle 1s ease-out forwards;
}

/* 升级文字提示 - 在卡片内居中显示 */
.card-level-up-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: #d4a574;
    text-shadow: 1px 1px 4px rgba(139, 90, 43, 0.8), 0 0 10px rgba(255, 215, 0, 0.6);
    z-index: 200;
    pointer-events: none;
    animation: cardTextPopIn 0.5s ease-out forwards;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    padding: 7px 11px;
    border-radius: 7px;
    border: 2px solid #d4a574;
}

.card-level-up-text.fade-out {
    animation: cardTextFadeOut 0.5s ease-in forwards;
}

/* 降级文字提示 - 在卡片内居中显示 */
.card-level-down-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: #4caf50;
    text-shadow: 1px 1px 4px rgba(76, 175, 80, 0.8), 0 0 10px rgba(139, 195, 74, 0.6);
    z-index: 200;
    pointer-events: none;
    animation: cardTextPopIn 0.5s ease-out forwards;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    padding: 7px 11px;
    border-radius: 7px;
    border: 2px solid #4caf50;
}

.card-level-down-text.fade-out {
    animation: cardTextFadeOut 0.5s ease-in forwards;
}

/* 完成养成文字提示 - 在卡片内居中显示 */
.card-pet-complete-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: #d4a574;
    text-shadow: 1px 1px 4px rgba(139, 90, 43, 0.8), 0 0 10px rgba(255, 215, 0, 0.6);
    z-index: 200;
    pointer-events: none;
    animation: cardTextPopIn 0.5s ease-out forwards;
    white-space: nowrap;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 7px 11px;
    border-radius: 7px;
    border: 2px solid #d4a574;
}

.card-pet-complete-text.fade-out {
    animation: cardTextFadeOut 0.5s ease-in forwards;
}

/* 礼物兑换成功文字 - 在卡片内居中显示 */
.card-gift-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: bold;
    color: #d4a574;
    text-shadow: 1px 1px 4px rgba(139, 90, 43, 0.8), 0 0 10px rgba(255, 215, 0, 0.6);
    z-index: 200;
    pointer-events: none;
    animation: cardTextPopIn 0.5s ease-out forwards;
    white-space: nowrap;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 7px 11px;
    border-radius: 7px;
    border: 2px solid #d4a574;
}

.card-gift-text.fade-out {
    animation: cardTextFadeOut 0.5s ease-in forwards;
}

/* 文字周围小型烟花容器 - 在卡片内 */
.card-text-fireworks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 135px;
    pointer-events: none;
    z-index: 199;
}

/* 小型烟花粒子 */
.mini-firework {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: fireworkParticle 1.2s ease-out forwards;
}


/* ========== 新版升级特效样式 ========== */
/* 升级特效覆盖层 */
.level-up-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 236, 179, 0.85) 0%,
        rgba(255, 213, 128, 0.8) 30%,
        rgba(255, 183, 77, 0.75) 60%,
        rgba(255, 152, 56, 0.7) 100%
    );
    backdrop-filter: blur(3px);
    z-index: 300;
    overflow: hidden;
    animation: overlayFadeIn 0.2s ease-out forwards;
}

.level-up-overlay.fade-out {
    animation: overlayFadeOut 0.3s ease-out forwards;
}

/* 恭喜图标 - 从左上角飞入到"啦"字上方，跟随容器一起跳跃 */
.level-up-congrats-icon {
    position: absolute;
    font-size: 28px;
    z-index: 310;
    top: -32px;
    right: 8px;
    animation: congratsIconFlyInLocal 0.4s ease-out forwards;
}

/* 文字容器（包含图标和文字，整体跳跃） */
.level-up-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 305;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: textBounce 0.3s ease-in-out 0.4s infinite;
}

/* "升级啦！"主文字 - 渐变色 */
.level-up-main-text {
    font-size: 30px;
    font-weight: 900;
    background: linear-gradient(90deg, #ffe082 0%, #ffca28 33%, #ffa726 66%, #ff8a65 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(2px 2px 4px rgba(139, 90, 43, 0.5));
    line-height: 1.2;
    white-space: nowrap;
    animation: textPopIn 0.3s ease-out forwards;
    position: relative;
}

/* "恭喜晋级LVX"副文字 */
.level-up-sub-text {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 152, 56, 0.5);
    margin-top: 5px;
    white-space: nowrap;
    animation: textPopIn 0.3s ease-out 0.1s forwards;
    opacity: 0;
}

/* 升级粒子容器 */
.level-up-particles-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 302;
    overflow: hidden;
}

/* 升级粒子 */
.level-up-particle {
    position: absolute;
    font-size: 18px;
    line-height: 1;
    animation: particleRiseUp 1.1s ease-out forwards;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    z-index: 302;
}

/* 金色+号粒子样式 */
.level-up-particle.plus-type {
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 193, 7, 0.6);
}


/* ========== 养成完成特效样式 ========== */
/* 养成完成时卡片凸出效果 */
.student-card.pet-complete-effect {
    height: 310px;
    transform: translateY(-4px) scale(1.04);
    z-index: 100;
    border-color: color-mix(in srgb, var(--theme-color) 18%, transparent);
    box-shadow: 
        -12px 12px 20px -5px color-mix(in srgb, var(--theme-color) 35%, transparent),
        12px 12px 20px -5px color-mix(in srgb, var(--theme-color) 35%, transparent),
        0 6px 10px -2px color-mix(in srgb, var(--theme-color) 50%, transparent),
        0 16px 25px -6px color-mix(in srgb, var(--theme-color) 40%, transparent),
        0 32px 45px -12px color-mix(in srgb, var(--theme-color) 28%, transparent),
        0 50px 65px -20px color-mix(in srgb, var(--theme-color) 15%, transparent);
}

/* 养成完成时等级图标样式 */
.student-card.pet-complete-effect .card-level {
    background-color: #ffffff;
    color: #d4a574;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* 养成完成时进度条渐变 */
.student-card.pet-complete-effect .progress-fill {
    background: linear-gradient(90deg, #ffe082 0%, #ffca28 25%, #ffa726 50%, #ffca28 75%, #ffe082 100%) !important;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.7) !important;
    animation: none !important;
}

/* 养成完成时卡片四周循环光环效果 */
.student-card.pet-complete-effect {
    animation: petCompleteGlow 2s ease-in-out infinite;
}

/* 领取徽章按钮样式 */
.claim-badge-btn {
    width: 88%;
    height: 36px;
    margin-top: 10px;
    background: linear-gradient(135deg, #ffe082 0%, #ffd54f 50%, #ffca28 100%);
    border: none;
    border-radius: 8px;
    color: #8b5a2b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    transition: all 0.3s ease;
    z-index: 10;
    animation: claimBtnBreathe 2s ease-in-out infinite;
}

.claim-badge-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6);
    animation: none;
}

/* 领取徽章按钮上方的烟花容器 */
.claim-badge-fireworks {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 40px;
    pointer-events: none;
    z-index: 20;
    overflow: visible;
}

/* 小型烟花粒子 */
.claim-firework-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: claimFireworkBurst 1.2s ease-out forwards;
}


/* ========== 徽章领取弹窗样式 ========== */
.badge-claim-modal-content {
    width: 420px;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: visible;
    background: linear-gradient(180deg, #fff9e6 0%, #fff5d6 30%, #ffefb8 60%, #ffe082 100%);
    box-shadow: 0 20px 60px rgba(255, 193, 7, 0.4);
    animation: badgeCardPopIn 0.5s ease-out forwards;
    position: relative;
}

.badge-claim-modal-content .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 30px 20px;
}

/* 标题容器 */
.badge-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}

/* 标题文字 */
.badge-title-text {
    font-size: 26px;
    font-weight: 700;
    color: #d4a574;
    text-shadow: 0 2px 4px rgba(139, 90, 43, 0.3);
    white-space: nowrap;
}

/* 学生名字突显 */
.badge-student-name {
    color: #ff6b35;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

/* 标题两侧星星容器 */
.badge-title-stars {
    width: 50px;
    height: 50px;
    position: relative;
}

.badge-title-stars-left,
.badge-title-stars-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 光圈和宠物图片容器 */
.badge-display-container {
    position: relative;
    width: 210px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 霓虹灯光点容器 */
.badge-neon-dots-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 徽章展示区域 */
.badge-display {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at center, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 250, 205, 0.95) 25%,
        rgba(255, 236, 139, 0.85) 50%,
        rgba(255, 215, 0, 0.7) 75%,
        rgba(255, 193, 7, 0.4) 100%
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.7),
        0 0 80px rgba(255, 193, 7, 0.4),
        0 0 120px rgba(255, 152, 0, 0.2);
    animation: badgeShine 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
    overflow: visible;
}

/* 宠物图片 */
.badge-pet-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    animation: petBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* 完成宠物养成文字 */
.badge-pet-complete-text {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 600;
    color: #8b5a2b;
    text-align: center;
}

/* 宠物名字突显 */
.badge-pet-name {
    color: #ff6b35;
    font-weight: 700;
}

/* 获得徽章文字 */
.badge-congrats-text {
    margin-top: 12px;
    font-size: 22px;
    font-weight: 700;
    color: #d4a574;
    text-shadow: 0 2px 4px rgba(139, 90, 43, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 徽章图标跳动效果 */
.badge-icon-bounce {
    width: 28px;
    height: 28px;
    object-fit: contain;
    animation: badgeIconBounce 1s ease-in-out infinite;
}

/* 领取徽章弹窗底部按钮 */
.badge-claim-modal-content .modal-footer {
    padding: 15px 30px 25px;
    border-top: none;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 稍后领取按钮 */
.btn-badge-later {
    flex: 1;
    height: 48px;
    background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
    border: none;
    border-radius: 24px;
    color: #666;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.btn-badge-later:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
}

/* 领取徽章按钮 */
.btn-claim-badge-confirm {
    flex: 1;
    height: 48px;
    background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);
    border: none;
    border-radius: 24px;
    color: #8b5a2b;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 179, 0, 0.5);
    transition: all 0.3s ease;
}

.btn-claim-badge-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 179, 0, 0.7);
}

/* 徽章弹窗缩小消失动画 */
.badge-claim-modal-content.shrink-out {
    animation: badgeCardShrinkOut 0.4s ease-in forwards;
}

/* 徽章飞入动画类 */
.badge-claim-modal-content.badge-fly-out {
    animation: badgeFlyToCard 0.8s ease-in-out forwards;
}

/* 粒子喷射容器 */
.badge-particle-emitter {
    position: absolute;
    width: 140px;
    height: 140px;
    left: -70px;
    top: -70px;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

/* 甜筒图标容器 */
.badge-emitter-icon-container {
    position: absolute;
    width: 90px;
    height: 90px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* 甜筒图标容器脉冲动画 */
.badge-emitter-icon-container.pulse {
    animation: emitterContainerPulse 0.3s ease-out;
}

@keyframes emitterContainerPulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* 🎉主体图标 */
.badge-emitter-icon {
    position: absolute;
    width: 65px;
    height: 65px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    text-align: center;
    line-height: 65px;
    z-index: 10;
    animation: iceCreamBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 183, 77, 0.95)) drop-shadow(0 0 30px rgba(255, 152, 0, 0.8)) drop-shadow(0 0 45px rgba(212, 165, 116, 0.6));
}

/* 甜筒跳动动画 */
@keyframes iceCreamBounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
    25% { transform: translate(-50%, -50%) scale(1.06) rotate(2deg); }
    50% { transform: translate(-50%, -50%) scale(1.1) rotate(-2deg); }
    75% { transform: translate(-50%, -50%) scale(1.04) rotate(3deg); }
}

/* 发光光晕 */
.badge-emitter-glow {
    position: absolute;
    width: 95px;
    height: 95px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 183, 77, 0.75) 0%, 
        rgba(255, 152, 0, 0.55) 25%,
        rgba(212, 165, 116, 0.4) 50%,
        rgba(255, 193, 7, 0.25) 70%,
        transparent 85%
    );
    animation: glowPulseWarm 1.6s ease-in-out infinite;
    z-index: 1;
}

@keyframes glowPulseWarm {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}

/* 喷射粒子样式 */
.badge-emitter-particle {
    position: absolute;
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
    animation: particleSprayAndFallSilky 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 4px currentColor);
    opacity: 0;
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    z-index: 5;
    will-change: transform, opacity;
}

.badge-emitter-particle.size-tiny { font-size: 12px; }
.badge-emitter-particle.size-small { font-size: 16px; }
.badge-emitter-particle.size-medium { font-size: 20px; }
.badge-emitter-particle.size-large { font-size: 26px; }

/* 标题星星样式 */
.badge-title-star {
    position: absolute;
    font-size: 16px;
    animation: starTwinkleMultiColor 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px currentColor);
}

/* 霓虹灯光点 */
.badge-neon-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    filter: blur(3px);
    animation: neonDotFloat 3s ease-in-out infinite;
    box-shadow: 0 0 15px currentColor;
}


/* ========== 徽章弹窗动画 ========== */

/* 宠物弹跳动画 */
@keyframes petBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 徽章图标跳动动画 */
@keyframes badgeIconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-6px) scale(1.1); }
    50% { transform: translateY(0) scale(1); }
    75% { transform: translateY(-3px) scale(1.05); }
}

/* 多彩星星闪烁动画 */
@keyframes starTwinkleMultiColor {
    0%, 100% { opacity: 0.5; transform: scale(0.7) rotate(0deg); filter: drop-shadow(0 0 8px currentColor) brightness(1); }
    25% { opacity: 1; transform: scale(1.3) rotate(90deg); filter: drop-shadow(0 0 15px currentColor) brightness(1.3); }
    50% { opacity: 0.8; transform: scale(1) rotate(180deg); filter: drop-shadow(0 0 12px currentColor) brightness(1.1); }
    75% { opacity: 1; transform: scale(1.2) rotate(270deg); filter: drop-shadow(0 0 18px currentColor) brightness(1.4); }
}

/* 霓虹光点浮动动画 */
@keyframes neonDotFloat {
    0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(0.8); }
    25% { opacity: 1; transform: translate(var(--float-x, 10px), var(--float-y, -10px)) scale(1.2); }
    50% { opacity: 0.7; transform: translate(calc(var(--float-x, 10px) * 0.5), calc(var(--float-y, -10px) * 1.5)) scale(1); }
    75% { opacity: 1; transform: translate(calc(var(--float-x, 10px) * -0.3), calc(var(--float-y, -10px) * 0.8)) scale(1.3); }
}

/* 徽章弹窗弹出动画 */
@keyframes badgeCardPopIn {
    0% { opacity: 0; transform: scale(0.5) translateY(50px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 徽章弹窗缩小消失动画 */
@keyframes badgeCardShrinkOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}

/* 徽章闪耀动画 */
@keyframes badgeShine {
    0%, 100% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(255, 193, 7, 0.4), 0 0 120px rgba(255, 152, 0, 0.2); }
    50% { box-shadow: 0 0 60px rgba(255, 215, 0, 0.9), 0 0 100px rgba(255, 193, 7, 0.6), 0 0 150px rgba(255, 152, 0, 0.3); }
}

/* 徽章飞入卡片动画 */
@keyframes badgeFlyToCard {
    0% { opacity: 1; transform: scale(1) translate(0, 0); }
    30% { opacity: 1; transform: scale(0.6) translate(0, 0); }
    100% { opacity: 0; transform: scale(0.15) translate(var(--fly-to-x, 0), var(--fly-to-y, 0)); }
}

/* 粒子喷射并坠落动画 */
@keyframes particleSprayAndFallSilky {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); }
    5% { opacity: 0.9; transform: translate(calc(var(--spray-x, 40px) * 0.6), calc(var(--spray-y, -30px) * 0.6)) rotate(30deg) scale(0.95); }
    10% { opacity: 0.85; transform: translate(var(--spray-x, 40px), var(--spray-y, -30px)) rotate(60deg) scale(1); }
    50% { opacity: 0.22; transform: translate(calc(var(--spray-x, 40px) + var(--fall-x, 100px) * 0.50), calc(var(--spray-y, -30px) + var(--fall-y, 200px) * 0.52)) rotate(300deg) scale(0.60); }
    100% { opacity: 0; transform: translate(calc(var(--spray-x, 40px) + var(--fall-x, 100px)), calc(var(--spray-y, -30px) + var(--fall-y, 200px))) rotate(580deg) scale(0.10); }
}

/* 飞行徽章图标样式 */
.flying-badge-icon {
    position: fixed;
    z-index: 10002;
    pointer-events: none;
    filter: drop-shadow(0 4px 20px rgba(255, 193, 7, 1)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}