/* ./styles/style_battle_player.css */
/* 职责：定义所有与玩家面板相关的UI样式。 */

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

/*用于DOT和效果闪烁的颜色遮罩 */
.player-pane::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1; 
    pointer-events: none;
    border-radius: 0.5rem; 
    mix-blend-mode: overlay; 
    background-color: transparent; 
}

#player-status > h2 {
    text-align: left;
    padding-left: 0.5rem;
}

#player-status-bars-container {
    width: 100%;
    aspect-ratio: 384 / 64;
    background-image: url('../images/ui/player_statusbar_frame.png');
    background-size: 100% 100%;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 21fr 165fr 12fr 165fr 21fr;
    grid-template-rows: 16.5fr 10fr 6fr 15fr 16.5fr;
}

.psb-armor { grid-area: 2 / 2 / 3 / 3; } 
.psb-rage  { grid-area: 2 / 4 / 3 / 5; } 
.psb-hp    { grid-area: 4 / 2 / 5 / 3; } 
.psb-mp    { grid-area: 4 / 4 / 5 / 5; } 

#player-status-bars-container > div {
    position: relative;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    width: 100%;
}

.psb-fill {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out, background-color 0.3s ease; 
}

.psb-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem; 
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    z-index: 3;
}

/* --- 护盾样式 --- */
#player-temp-armor-bar-fill {
    background-color: #facc15; 
    right: 0;
    z-index: 1; 
}

#player-temp-armor-bar-fill.holy-shield-active {
    background-color: #FBBF24; 
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
    animation: glowing-gold 1.5s infinite ease-in-out;
}

@keyframes glowing-gold {
    0% { box-shadow: 0 0 4px rgba(251, 191, 36, 0.6); }
    50% { box-shadow: 0 0 12px rgba(251, 191, 36, 1); }
    100% { box-shadow: 0 0 4px rgba(251, 191, 36, 0.6); }
}

#player-armor-bar-fill {
    background-color: #a1a1aa; 
    right: 0;
    z-index: 2; 
}

/* --- 动态血条颜色系统 --- */
/* 基础位置和默认颜色 */
.psb-hp .psb-fill { 
    right: 0; 
    background-color: #22c55e; /* 默认绿色 */
}

/* 状态颜色覆盖 - 使用 !important 确保优先级 */
.psb-fill.hp-high { background-color: #22c55e !important; } /* 绿 */
.psb-fill.hp-mid  { background-color: #eab308 !important; } /* 黄 */
.psb-fill.hp-low  { background-color: #f97316 !important; } /* 橙 */
.psb-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); } /* 闪白光 */
}

/* 其他条的颜色 */
.psb-mp .psb-fill {
    background-color: #3b82f6;
    left: 0;
}
.psb-rage .psb-fill {
    background-color: #f97316;
    left: 0;
}

/* --- 头像与覆盖层 --- */
.avatar-box { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0;
}

.avatar-box img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    object-position: 50% 35%;
}

.info-overlay {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    z-index: 2;
    gap: 0.5rem;
}

.info-overlay h2#player-display-name {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

.player-pane .effects-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.25rem;
    align-self: flex-start;
    z-index: 3;
}

.effect-icon-img {
    width: 32px;
    height: 32px;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
}

#player-skill-container {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

#skill-button {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 350 / 61;
    border: none;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, filter 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/ui/btn_skill_default.png');
}

#skill-button:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.1);
}

#skill-button:disabled {
    cursor: not-allowed;
    background-image: url('../images/ui/btn_skill_disabled.png');
    filter: grayscale(1);
    opacity: 0.7;
}

.skill-name-text {
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.skill-cooldown-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px black;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    pointer-events: none;
}

#player-attunement-display {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
    transition: all 0.3s ease-in-out;
    display: none; 
}

#player-attunement-display.attunement-fire {
    display: block;
    background-image: url('../images/icons/icon_attunement_fire.png');
    animation: glowing-attunement 2s infinite ease-in-out;
    --glow-color: #ef4444; 
}

#player-attunement-display.attunement-ice {
    display: block;
    background-image: url('../images/icons/icon_attunement_ice.png');
    animation: glowing-attunement 2s infinite ease-in-out;
    --glow-color: #3b82f6; 
}

@keyframes glowing-attunement {
    0% { filter: drop-shadow(0 0 2px var(--glow-color)); }
    50% { filter: drop-shadow(0 0 8px var(--glow-color)); }
    100% { filter: drop-shadow(0 0 2px var(--glow-color)); }
}