/* 基础动画效果 */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 伤害动画 */
@keyframes damage {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(0.9); filter: brightness(1.5); }
    60% { transform: scale(1.1); filter: brightness(0.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes attacked {
    0% { filter: grayscale(0); }
    50% { filter: grayscale(1) brightness(1.5); }
    100% { filter: grayscale(0); }
}

/* 回复动画 */
@keyframes heal {
    0% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(90deg) brightness(1.3); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}

/* 增益动画 */
@keyframes buff {
    0% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(2) brightness(1.2); }
    100% { filter: saturate(1) brightness(1); }
}

/* 护盾动画 */
@keyframes shield {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }
}

/* 矿物效果动画 */
@keyframes coin {
    0% { transform: scale(1) rotate(0); }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

@keyframes sparkle {
    0% { filter: brightness(1) contrast(1); }
    50% { filter: brightness(1.5) contrast(1.2); }
    100% { filter: brightness(1) contrast(1); }
}

@keyframes attract {
    0% { transform: scale(1); }
    50% { 
        transform: scale(1.3);
        box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.3);
    }
    100% { transform: scale(1); }
}

/* 应用动画的类 */
.float { animation: float 2s ease-in-out infinite; }
.glow { animation: glow 1.5s ease-in-out infinite; }
.shake { animation: shake 0.5s ease-in-out; }
.spin { animation: spin 1s linear infinite; }
.pulse { animation: pulse 1s ease-in-out infinite; }
.fade-in { animation: fadeIn 0.3s ease-in-out forwards; }
.fade-out { animation: fadeOut 0.3s ease-in-out forwards; }
.damage { animation: damage 0.5s ease-in-out; }
.attacked { animation: attacked 0.5s ease-in-out; }
.heal { animation: heal 1s ease-in-out; }
.buff { animation: buff 1s ease-in-out; }
.shield { animation: shield 2s ease-in-out infinite; }
.coin { animation: coin 1s ease-in-out; }
.sparkle { animation: sparkle 1s ease-in-out infinite; }
.attract { animation: attract 1s ease-in-out; }

/* 组合动画 */
.status-icon {
    animation: float 2s ease-in-out infinite;
    display: inline-block;
}

.status-icon.active {
    animation: glow 1.5s ease-in-out infinite, float 2s ease-in-out infinite;
}

.mineral-caught {
    animation: sparkle 0.5s ease-in-out, float 1s ease-in-out;
}

/* 状态效果图标样式 */
.status-effect {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    font-size: 14px;
    margin: 2px;
    transition: all 0.3s ease;
}

.status-effect:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.8);
}

.status-effect .duration {
    font-size: 12px;
    opacity: 0.8;
}

/* 状态类型特定样式 */
.status-effect.attack { border: 1px solid #e74c3c; }
.status-effect.defense { border: 1px solid #3498db; }
.status-effect.heal { border: 1px solid #2ecc71; }
.status-effect.shield { border: 1px solid #f1c40f; }
.status-effect.debuff { border: 1px solid #8e44ad; }

/* 状态效果容器 */
.status-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin-top: 5px;
}