hp {
    --p-color: #d4af37; /* 默认魔法金 */
    --bg-color: #0d0f12;
    --panel-bg: rgba(20,25,30,0.85);
    display: block;
    background-color: var(--bg-color);
    color: #e0e0e0;
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    /* 利用 color-mix 自动计算主题色的透明度，无论怎么变色都完美融合 */
    border: 1px solid color-mix(in srgb, var(--p-color) 40%, transparent);
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 10px color-mix(in srgb, var(--p-color) 20%, transparent);
    padding: 12px;
    margin: 15px 0;
    font-size: 14px;
    line-height: 1.6;
    transition: all 0.5s ease;
}

hp hd {
    display: block;
    text-align: center;
    color: var(--p-color);
    font-size: 1.15em;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px 5px;
    margin-bottom: 15px;
    border-bottom: 1px dashed color-mix(in srgb, var(--p-color) 50%, transparent);
    text-shadow: 0 0 8px color-mix(in srgb, var(--p-color) 50%, transparent);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--p-color) 15%, transparent) 0%, transparent 75%);
}

hp details {
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--p-color) 20%, transparent);
    border-radius: 6px;
    overflow: hidden;
}

hp summary {
    padding: 10px 12px;
    color: var(--p-color);
    font-weight: bold;
    cursor: pointer;
    outline: none;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid color-mix(in srgb, var(--p-color) 15%, transparent);
    transition: all 0.3s;
}

hp summary:hover {
    background: color-mix(in srgb, var(--p-color) 10%, transparent);
    text-shadow: 0 0 8px var(--p-color);
}

hp p {
    margin: 12px 10px;
    padding-left: 12px;
    border-left: 2px solid var(--p-color);
    position: relative;
}

hp p::before {
    content: "✦ " attr(t) " ✦";
    display: block;
    color: var(--p-color);
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 6px;
    opacity: 0.9;
}

hp d {
    display: block;
    color: #cccccc;
    margin-bottom: 4px;
    word-wrap: break-word;
}

hp d b {
    color: var(--p-color);
    margin-right: 6px;
    font-weight: bold;
}

/* 🚨 高危偏离度：捕捉包含 em 标签的 d 标签，触发猩红呼吸灯效 */
hp d:has(em) {
    font-weight: bold;
    color: #ff4d4d;
    padding: 8px;
    margin-top: 8px;
    border: 1px dashed #ff4d4d;
    border-radius: 4px;
    background: rgba(255, 77, 77, 0.05);
    animation: hp-danger-breathe 2s infinite ease-in-out;
}

hp d:has(em) em {
    font-style: normal;
    text-decoration: underline wavy #ff4d4d;
    font-size: 1.1em;
}

@keyframes hp-danger-breathe {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(255,77,77,0.5); 
        box-shadow: inset 0 0 5px rgba(255,77,77,0.2); 
        border-color: rgba(255,77,77,0.4);
    }
    50% { 
        text-shadow: 0 0 15px #ff4d4d; 
        box-shadow: inset 0 0 20px rgba(255,77,77,0.4); 
        border-color: #ff4d4d;
    }
}