/* ./styles/style_battle_enemy.css */
/* 职责：定义所有与敌人面板相关的UI样式。 */

.enemy-pane { 
    position: relative;
    width: 100%; 
    aspect-ratio: 1; 
    border-radius: 0.5rem;
    overflow:hidden;
    flex-shrink: 0;
}

/* 颜色闪烁遮罩 (DOTs, Debuffs) */
.enemy-pane::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1; /* 位于UI (z-index 2) 之下 */
    pointer-events: none;
    border-radius: 0.5rem; 
    mix-blend-mode: overlay; /* 使用“叠加”混合模式 */
    background-color: transparent; 
}

/* 蓄力脉冲遮罩 */
.enemy-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1; 
    pointer-events: none;
    border-radius: 0.5rem;
    mix-blend-mode: add; 
    background-color: transparent;
    opacity: 0;
}

/* 蓄力脉冲动画 */
@keyframes charge-pulse {
    0% { opacity: 0; background-color: rgba(239, 68, 68, 0.7); }
    50% { opacity: 0.8; background-color: rgba(249, 115, 22, 0.8); }
    100% { opacity: 0; background-color: rgba(239, 68, 68, 0.7); }
}

.enemy-pane.is-charging-animation::before {
    animation: charge-pulse 1.2s infinite ease-in-out;
}

.enemy-pane .info-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
}

.enemy-pane h2#enemy-name {
    width: 100%;
    text-align: right;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

#enemy-status-container {
    position: relative;
    width: 100%;
    max-width: 342px;
    aspect-ratio: 342 / 59;
    background-image: url('../images/ui/frame_enemystatusbar.png');
    background-size: 100% 100%;
    margin: 0 auto;
    container-type: size;
    container-name: enemy-status;
}

#enemy-hp-bar-new {
    position: absolute;
    top: 35.6%;
    left: 6.4%;
    width: 67.25%;
    height: 25.4%;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
}

#enemy-hp-bar-fill {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* 默认移除固定背景色，交由class控制，但保留绿色作为安全色 */
    background-color: #22c55e; 
    border-radius: 5px;
    transition: width 0.5s ease-in-out, background-color 0.3s ease;
}

/* --- 动态血条颜色系统 (与玩家保持一致) --- */
#enemy-hp-bar-fill.hp-high { background-color: #22c55e !important; }
#enemy-hp-bar-fill.hp-mid  { background-color: #eab308 !important; }
#enemy-hp-bar-fill.hp-low  { background-color: #f97316 !important; }
#enemy-hp-bar-fill.hp-critical { 
    background-color: #ef4444 !important; 
    animation: hp-critical-flash 0.8s infinite ease-in-out;
}

@keyframes hp-critical-flash {
    0%, 100% { background-color: #ef4444; box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { background-color: #fee2e2; box-shadow: 0 0 8px rgba(239, 68, 68, 0.8); }
}

#enemy-hp-bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 护甲槽：锚点与 frame 图对齐；宽高用 % 随状态条缩放，字号用 cqh 避免 rem 漂移 */
.enemy-armor-text {
    position: absolute;
    top: 80%;
    left: 58%;
    width: 13%;
    height: 38%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20cqh;
    line-height: 1;
    font-weight: bold;
    color: #bfdbfe;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
}

.enemy-armor-text.hidden {
    display: none;
}

#enemy-counter-new {
    position: absolute;
    top: 22%;
    left: 80.7%;
    width: 9.35%;
    height: 54.2%;
}

#enemy-counter-text-new {
    width: 100%;
    height: 100%;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enemy-pane .effects-container {
    display: flex;
    flex-direction: column-reverse; 
    gap: 0.25rem;
    align-self: flex-end; 
}