/* ./styles/battle_effects.css */
/* 职责：定义所有战斗特效和@keyframes动画。 */

.stat-buffed {
    color: var(--color-buff);
    text-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
}

/* --- 回合提示 --- */
.turn-announcement-text {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #8B5CF6;
    animation: turn-fade-in-out 1.2s ease-in-out forwards;
    white-space: nowrap;
}

@keyframes turn-fade-in-out {
    0% { opacity: 0; transform: scale(0.8); }
    25% { opacity: 1; transform: scale(1.1); }
    75% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* --- 浮动文字 --- */
.floating-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    pointer-events: none;
    animation: floatUp 1.5s ease-out forwards;
    z-index: 100;
}

.floating-text.pos-armor { top: 40%; }
.floating-text.pos-hp { top: 60%; }

.floating-text.damage { color: #ef4444; text-shadow: 1px 1px 0 #000; }
.floating-text.crit {
    color: #fde047;
    font-size: 2.25rem;
    text-shadow: 0 0 10px #f59e0b, 1px 1px 0 #000;
}
.floating-text.damage-armor { color: #9ca3af; text-shadow: 1px 1px 0 #000; }
.floating-text.heal { color: #22c55e; text-shadow: 1px 1px 0 #000; }
.floating-text.mp { color: #3b82f6; text-shadow: 1px 1px 0 #000; }
.floating-text.gold { color: #facc15; text-shadow: 1px 1px 0 #000; }
.floating-text.armor { color: #2dd4bf; text-shadow: 1px 1px 0 #000; }

@keyframes floatUp {
    from { transform: translate(-50%, -50%); opacity: 1; }
    to { transform: translate(-50%, -200%); opacity: 0; }
}

/* --- 屏幕/头像晃动 --- */
.screen-shake {
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.avatar-hit-shake {
    animation: avatar-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes avatar-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

/* --- 效果图标 --- */
.effect-icon {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
}

/* --- 攻击/闪烁特效 --- */
.attack-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    pointer-events: none;
    z-index: 110;
    background-image: url('../images/effects/slash_effect.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: slash-animation 0.4s ease-out forwards;
}

@keyframes slash-animation {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.icon-transform-flash {
    animation: icon-flash 0.5s ease-in-out;
}

@keyframes icon-flash {
    0%, 100% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(1.2); background-color: white; box-shadow: 0 0 2rem white; }
}

.challenge-target-glow {
    animation: glowing 1.5s infinite ease-in-out;
}

@keyframes glowing {
    0% { box-shadow: 0 0 5px #FBBF24; }
    50% { box-shadow: 0 0 20px #F59E0B; }
    100% { box-shadow: 0 0 5px #FBBF24; }
}

/* --- DOT/状态 闪烁动画 --- */
@keyframes flash-poison-overlay {
    0% { background-color: transparent; }
    40% { background-color: rgba(139, 92, 246, 0.7); } /* 紫色 */
    100% { background-color: transparent; }
}
@keyframes flash-bleed-overlay {
    0% { background-color: transparent; }
    40% { background-color: rgba(239, 68, 68, 0.7); } /* 红色 */
    100% { background-color: transparent; }
}
@keyframes flash-burn-overlay {
    0% { background-color: transparent; }
    40% { background-color: rgba(249, 115, 22, 0.7); } /* 橙色 */
    100% { background-color: transparent; }
}
@keyframes flash-buff-overlay {
    0% { background-color: transparent; }
    40% { background-color: rgba(34, 197, 94, 0.7); } /* 绿色 */
    100% { background-color: transparent; }
}
@keyframes flash-control-overlay {
    0% { background-color: transparent; }
    40% { background-color: rgba(14, 165, 233, 0.7); } /* 青色/蓝色 */
    100% { background-color: transparent; }
}

/* 应用动画到伪元素 */
.avatar-flash-poison::after {
    animation: flash-poison-overlay 0.6s ease-in-out;
}
.avatar-flash-bleed::after {
    animation: flash-bleed-overlay 0.6s ease-in-out;
}
.avatar-flash-burn::after {
    animation: flash-burn-overlay 0.6s ease-in-out;
}
.avatar-flash-buff::after {
    animation: flash-buff-overlay 0.6s ease-in-out;
}
.avatar-flash-control::after {
    animation: flash-control-overlay 0.6s ease-in-out;
}