/* ========================================================== */
/* ================= 德鲁伊技能专用样式 =================== */
/* ========================================================== */

/* 德鲁伊技能通用基础样式 */
.skill-damage-card[data-skill-id="bear_form"],
.skill-damage-card[data-skill-id="panther_form"],
.skill-damage-card[data-skill-id="chicken_form"],
.skill-damage-card[data-skill-id="rat_form"],
.skill-damage-card[data-skill-id="penguin_form"],
.skill-damage-card[data-skill-id="natural_healing"],
.skill-damage-card[data-skill-id="nature_touch"],
.skill-damage-card[data-skill-id="blooming_grove"],
.skill-damage-card[data-skill-id="tree_of_life"],
.skill-damage-card[data-skill-id="barkskin"] {
    position: relative;
    overflow: hidden;
}

/* 德鲁伊技能通用悬停变换 */
.skill-damage-card[data-skill-id="bear_form"]:hover,
.skill-damage-card[data-skill-id="panther_form"]:hover,
.skill-damage-card[data-skill-id="chicken_form"]:hover,
.skill-damage-card[data-skill-id="rat_form"]:hover,
.skill-damage-card[data-skill-id="penguin_form"]:hover,
.skill-damage-card[data-skill-id="natural_healing"]:hover,
.skill-damage-card[data-skill-id="nature_touch"]:hover,
.skill-damage-card[data-skill-id="blooming_grove"]:hover,
.skill-damage-card[data-skill-id="tree_of_life"]:hover,
.skill-damage-card[data-skill-id="barkskin"]:hover {
    transform: translateY(-2px) translateZ(0);
}

/* 德鲁伊变身技能通用阴影效果 - 绿色主题 */
.skill-damage-card[data-skill-id="bear_form"]:hover {
    box-shadow: 0 6px 20px rgba(68, 204, 68, 0.4);
}


/* 熊形态特殊样式 - 绿色主题 */
.skill-damage-card[data-skill-id="bear_form"] {
    background: linear-gradient(135deg, #1e2e1e 0%, #2a3a2a 100%);
    border: 2px solid #2a4a2a;
}

.skill-damage-card[data-skill-id="bear_form"]:hover {
    border: 2px solid #44cc44;
}

/* 狂野按钮样式 */
.wild-btn {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: 2px solid #ff6b35;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    justify-content: center;
    white-space: nowrap;
}

.wild-btn:hover {
    background: linear-gradient(135deg, #ff8c5a 0%, #ffa726 100%);
    border-color: #ff8c5a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.wild-btn.wild-active {
    background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
    border-color: #4fc3f7;
}

.wild-btn.wild-active:hover {
    background: linear-gradient(135deg, #81d4fa 0%, #4fc3f7 100%);
    border-color: #81d4fa;
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.4);
}

.wild-btn i {
    font-size: 12px;
}

.wild-btn .btn-text {
    font-size: 12px;
    font-weight: 600;
}

/* 豹形态特殊样式 - 橙色主题 */
.skill-damage-card[data-skill-id="panther_form"] {
    background: linear-gradient(135deg, #2e1e1a 0%, #3a2a20 100%);
    border: 2px solid #4a3a2a;
}

.skill-damage-card[data-skill-id="panther_form"]:hover {
    border: 2px solid #ff8844;
    box-shadow: 0 6px 20px rgba(255, 136, 68, 0.4);
}

/* 鸡形态特殊样式 - 黄色/金色主题 */
.skill-damage-card[data-skill-id="chicken_form"] {
    background: linear-gradient(135deg, #2e2a1a 0%, #3a3520 100%);
    border: 2px solid #4a452a;
}

.skill-damage-card[data-skill-id="chicken_form"]:hover {
    border: 2px solid #ffcc44;
    box-shadow: 0 6px 20px rgba(255, 204, 68, 0.4);
}

/* 鼠形态特殊样式 - 灰色/暗色主题 */
.skill-damage-card[data-skill-id="rat_form"] {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    border: 2px solid #3a3a3a;
}

.skill-damage-card[data-skill-id="rat_form"]:hover {
    border: 2px solid #888888;
    box-shadow: 0 6px 20px rgba(136, 136, 136, 0.4);
}

/* 企鹅形态特殊样式 - 水色主题 */
.skill-damage-card[data-skill-id="penguin_form"] {
    background: linear-gradient(135deg, #1a2e3e 0%, #20404a 100%);
    border: 2px solid #2a5060;
}

.skill-damage-card[data-skill-id="penguin_form"]:hover {
    border: 2px solid #44a8cc;
    box-shadow: 0 6px 20px rgba(68, 168, 204, 0.4);
}

/* 德鲁伊重击技能特殊伤害显示颜色 */
.skill-damage-card[data-skill-id="bear_bash"] .damage-value-large {
    color: #ff4444;
}

/* 变身技能中的重击攻击选项特殊颜色 */
.transformation-attack-option[data-sub-skill-id="bear_bash"] .damage-value-medium {
    color: #ff4444;
}

/* 豹形态攻击选项特殊颜色 - 橙色主题 */
.transformation-attack-option[data-sub-skill-id="panther_scratch"] .damage-value-medium {
    color: #ff8844;
}

.transformation-attack-option[data-sub-skill-id="panther_neckbite"] .damage-value-medium {
    color: #ffaa44;
}

/* 鸡形态攻击选项特殊颜色 - 黄色/金色主题 */
.transformation-attack-option[data-sub-skill-id="chicken_pecking"] .damage-value-medium {
    color: #ffcc44;
}

.transformation-attack-option[data-sub-skill-id="chicken_clucking"] .damage-value-medium {
    color: #ffdd66;
}

/* 鼠形态攻击选项特殊颜色 - 灰色/暗色主题 */
.transformation-attack-option[data-sub-skill-id="rat_infected_fangs"] .damage-value-medium {
    color: #888888;
}

.transformation-attack-option[data-sub-skill-id="rat_squeak"] .damage-value-medium {
    color: #666666;
}

/* 企鹅形态攻击选项特殊颜色 - 水色主题 */
.transformation-attack-option[data-sub-skill-id="penguin_sharp_beak"] .damage-value-medium {
    color: #44a8cc;
}

.transformation-attack-option[data-sub-skill-id="penguin_water_cannon"] .damage-value-medium {
    color: #66bbdd;
}

/* 变身技能名称样式 */
.skill-name.skill-transformation {
    color: #44cc44;
}

/* ==================== 自然愈合技能样式 ==================== */
/* 基于当前页面色调的自然愈合样式 - 保持与变身技能相同的绿色主题 */

/* 自然愈合技能卡片 - 采用和熊形态相同的绿色主题 */
.skill-damage-card[data-skill-id="natural_healing"] {
    background: linear-gradient(135deg, #1e2e1e 0%, #2a3a2a 100%);
    border: 2px solid #2a4a2a;
}

.skill-damage-card[data-skill-id="natural_healing"]:hover {
    border: 2px solid #44cc44;
    box-shadow: 0 6px 20px rgba(68, 204, 68, 0.4);
}

/* 自然愈合技能名称 - 与其他德鲁伊技能保持一致 */
.skill-damage-card[data-skill-id="natural_healing"] .skill-name {
    color: #44cc44;
}

/* 自然愈合治疗数值 - 使用绿色主题 */
.skill-damage-card[data-skill-id="natural_healing"] .damage-value-large {
    color: #44cc44 !important;
    text-shadow: 0 0 8px rgba(68, 204, 68, 0.6) !important;
}

/* ==================== 自然之触技能样式 ==================== */
.skill-damage-card[data-skill-id="blooming_grove"] {
    background: linear-gradient(135deg, #2e2a1a 0%, #3a3520 100%);
    border: 2px solid #4a3a1a;
    position: relative;
}

.skill-damage-card[data-skill-id="blooming_grove"]:hover {
    border: 2px solid #ffcc44;
    box-shadow: 0 6px 20px rgba(255, 204, 68, 0.45);
}

.skill-damage-card[data-skill-id="blooming_grove"] .skill-name,
.skill-damage-card[data-skill-id="tree_of_life"] .skill-name {
    color: #ffdd66;
}

.skill-damage-card[data-skill-id="blooming_grove"] .damage-value-large,
.skill-damage-card[data-skill-id="blooming_grove"] .damage-value,
.skill-damage-card[data-skill-id="blooming_grove"] .healing-power {
    color: #ffcc44 !important;
    text-shadow: 0 0 8px rgba(255, 204, 68, 0.6) !important;
}

.skill-damage-card[data-skill-id="tree_of_life"] {
    background: linear-gradient(135deg, #2e2a1a 0%, #3a3520 100%);
    border: 2px solid #4a3a1a;
    position: relative;
}

.skill-damage-card[data-skill-id="tree_of_life"]:hover {
    border: 2px solid #ffd24d;
    box-shadow: 0 6px 20px rgba(255, 210, 77, 0.45);
}

.skill-damage-card[data-skill-id="tree_of_life"] .damage-value-large,
.skill-damage-card[data-skill-id="tree_of_life"] .damage-value,
.skill-damage-card[data-skill-id="tree_of_life"] .healing-power {
    color: #ffd24d !important;
    text-shadow: 0 0 8px rgba(255, 210, 77, 0.6) !important;
}

/* ========== 统一的浅绿色主题（参考变形卡片风格） ========== */
.skill-damage-card[data-skill-id="nature_orb"],
.skill-damage-card[data-skill-id="rejuvenation"],
.skill-damage-card[data-skill-id="flicker_flame"],
.skill-damage-card[data-skill-id="nature_touch"] {
    background: linear-gradient(135deg, #1e2e1e 0%, #2a3a2a 100%);
    border: 2px solid #2a4a2a;
}

.skill-damage-card[data-skill-id="nature_orb"]:hover,
.skill-damage-card[data-skill-id="rejuvenation"]:hover,
.skill-damage-card[data-skill-id="flicker_flame"]:hover,
.skill-damage-card[data-skill-id="nature_touch"]:hover {
    border: 2px solid #66dd66;
    box-shadow: 0 6px 20px rgba(102, 221, 102, 0.45);
}

.skill-damage-card[data-skill-id="nature_orb"] .skill-name,
.skill-damage-card[data-skill-id="rejuvenation"] .skill-name,
.skill-damage-card[data-skill-id="flicker_flame"] .skill-name,
.skill-damage-card[data-skill-id="nature_touch"] .skill-name {
    color: #88ee88;
}

.skill-damage-card[data-skill-id="nature_orb"] .damage-value-large,
.skill-damage-card[data-skill-id="nature_orb"] .damage-value,
.skill-damage-card[data-skill-id="nature_orb"] .healing-power,
.skill-damage-card[data-skill-id="rejuvenation"] .damage-value-large,
.skill-damage-card[data-skill-id="rejuvenation"] .damage-value,
.skill-damage-card[data-skill-id="rejuvenation"] .healing-power,
.skill-damage-card[data-skill-id="flicker_flame"] .damage-value-large,
.skill-damage-card[data-skill-id="flicker_flame"] .damage-value,
.skill-damage-card[data-skill-id="flicker_flame"] .healing-power,
.skill-damage-card[data-skill-id="nature_touch"] .damage-value-large,
.skill-damage-card[data-skill-id="nature_touch"] .damage-value,
.skill-damage-card[data-skill-id="nature_touch"] .healing-power {
    color: #66dd66 !important;
    text-shadow: 0 0 8px rgba(102, 221, 102, 0.6) !important;
}

/* 浅绿色主题的 effect-tab（覆盖全局红色） */
.skill-damage-card[data-skill-id="nature_orb"] .effect-tab,
.skill-damage-card[data-skill-id="rejuvenation"] .effect-tab,
.skill-damage-card[data-skill-id="flicker_flame"] .effect-tab,
.skill-damage-card[data-skill-id="nature_touch"] .effect-tab {
    background: linear-gradient(135deg, rgba(102, 221, 102, 0.10) 0%, rgba(102, 221, 102, 0.06) 100%);
    border: 1px solid rgba(102, 221, 102, 0.30);
    color: #b5eab5;
}

.skill-damage-card[data-skill-id="nature_orb"] .effect-tab:hover,
.skill-damage-card[data-skill-id="rejuvenation"] .effect-tab:hover,
.skill-damage-card[data-skill-id="flicker_flame"] .effect-tab:hover,
.skill-damage-card[data-skill-id="nature_touch"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(102, 221, 102, 0.20) 0%, rgba(102, 221, 102, 0.12) 100%);
    border-color: rgba(102, 221, 102, 0.55);
}

.skill-damage-card[data-skill-id="nature_orb"] .effect-tab.active,
.skill-damage-card[data-skill-id="rejuvenation"] .effect-tab.active,
.skill-damage-card[data-skill-id="flicker_flame"] .effect-tab.active,
.skill-damage-card[data-skill-id="nature_touch"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(102, 221, 102, 0.30) 0%, rgba(102, 221, 102, 0.15) 100%);
    border-color: #66dd66;
    color: #e0ffe0;
}

.skill-damage-card[data-skill-id="nature_orb"] .effect-tab .damage-value,
.skill-damage-card[data-skill-id="rejuvenation"] .effect-tab .damage-value,
.skill-damage-card[data-skill-id="flicker_flame"] .effect-tab .damage-value,
.skill-damage-card[data-skill-id="nature_touch"] .effect-tab .damage-value {
    color: #66dd66 !important;
}

.skill-damage-card[data-skill-id="nature_orb"] .effect-tab .damage-label,
.skill-damage-card[data-skill-id="rejuvenation"] .effect-tab .damage-label,
.skill-damage-card[data-skill-id="flicker_flame"] .effect-tab .damage-label,
.skill-damage-card[data-skill-id="nature_touch"] .effect-tab .damage-label {
    color: #a8d8a8 !important;
}

/* ========== 统一的浅黄色主题（参考变形卡片风格） ========== */
.skill-damage-card[data-skill-id="blooming_grove"],
.skill-damage-card[data-skill-id="tree_of_life"] {
    background: linear-gradient(135deg, #2e2a1a 0%, #3a3520 100%);
    border: 2px solid #4a3a1a;
}

.skill-damage-card[data-skill-id="blooming_grove"]:hover,
.skill-damage-card[data-skill-id="tree_of_life"]:hover {
    border: 2px solid #ffcc44;
    box-shadow: 0 6px 20px rgba(255, 204, 68, 0.45);
}

.skill-damage-card[data-skill-id="blooming_grove"] .damage-value-large,
.skill-damage-card[data-skill-id="blooming_grove"] .damage-value,
.skill-damage-card[data-skill-id="blooming_grove"] .healing-power,
.skill-damage-card[data-skill-id="tree_of_life"] .damage-value-large,
.skill-damage-card[data-skill-id="tree_of_life"] .damage-value,
.skill-damage-card[data-skill-id="tree_of_life"] .healing-power {
    color: #ffcc44 !important;
    text-shadow: 0 0 8px rgba(255, 204, 68, 0.6) !important;
}

/* 树皮护甲 - 黄色主题（与万愈丛/生命之树一致） */
.skill-damage-card[data-skill-id="barkskin"] {
    background: linear-gradient(135deg, #2e2a1a 0%, #3a3520 100%);
    border: 2px solid #4a3a1a;
}

.skill-damage-card[data-skill-id="barkskin"]:hover {
    border: 2px solid #ffcc44;
    box-shadow: 0 6px 20px rgba(255, 204, 68, 0.45);
}

.skill-damage-card[data-skill-id="barkskin"] .skill-name {
    color: #ffdd66;
}

.skill-damage-card[data-skill-id="barkskin"] .damage-value-large,
.skill-damage-card[data-skill-id="barkskin"] .damage-value,
.skill-damage-card[data-skill-id="barkskin"] .healing-power {
    color: #ffcc44 !important;
    text-shadow: 0 0 8px rgba(255, 204, 68, 0.6) !important;
}

.skill-damage-card[data-skill-id="barkskin"] .effect-tab {
    background: linear-gradient(135deg, rgba(255, 204, 68, 0.10) 0%, rgba(255, 204, 68, 0.06) 100%);
    border: 1px solid rgba(255, 204, 68, 0.30);
    color: #ffefb3;
}

.skill-damage-card[data-skill-id="barkskin"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(255, 204, 68, 0.20) 0%, rgba(255, 204, 68, 0.12) 100%);
    border-color: rgba(255, 204, 68, 0.55);
}

.skill-damage-card[data-skill-id="barkskin"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(255, 204, 68, 0.30) 0%, rgba(255, 204, 68, 0.15) 100%);
    border-color: #ffcc44;
    color: #fff7cc;
}

/* 浅黄色主题的 effect-tab（覆盖全局红色） */
.skill-damage-card[data-skill-id="blooming_grove"] .effect-tab,
.skill-damage-card[data-skill-id="tree_of_life"] .effect-tab {
    background: linear-gradient(135deg, rgba(255, 204, 68, 0.10) 0%, rgba(255, 204, 68, 0.06) 100%);
    border: 1px solid rgba(255, 204, 68, 0.30);
    color: #ffefb3;
}

.skill-damage-card[data-skill-id="blooming_grove"] .effect-tab:hover,
.skill-damage-card[data-skill-id="tree_of_life"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(255, 204, 68, 0.20) 0%, rgba(255, 204, 68, 0.12) 100%);
    border-color: rgba(255, 204, 68, 0.55);
}

.skill-damage-card[data-skill-id="blooming_grove"] .effect-tab.active,
.skill-damage-card[data-skill-id="tree_of_life"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(255, 204, 68, 0.30) 0%, rgba(255, 204, 68, 0.15) 100%);
    border-color: #ffcc44;
    color: #fff7cc;
}

.skill-damage-card[data-skill-id="blooming_grove"] .effect-tab .damage-value,
.skill-damage-card[data-skill-id="tree_of_life"] .effect-tab .damage-value {
    color: #ffcc44 !important;
}

.skill-damage-card[data-skill-id="blooming_grove"] .effect-tab .damage-label,
.skill-damage-card[data-skill-id="tree_of_life"] .effect-tab .damage-label {
    color: #e6d18a !important;
}
/* 卡片整体色调为浅绿色 */
.skill-damage-card[data-skill-id="nature_touch"] {
    background: linear-gradient(135deg, #203320 0%, #2f4430 100%);
    border: 2px solid #2f5a2f;
}

.skill-damage-card[data-skill-id="nature_touch"]:hover {
    border: 2px solid #66dd66;
    box-shadow: 0 6px 20px rgba(102, 221, 102, 0.45);
}

.skill-damage-card[data-skill-id="nature_touch"] .skill-name {
    color: #88ee88;
}

.skill-damage-card[data-skill-id="nature_touch"] .damage-value-large,
.skill-damage-card[data-skill-id="nature_touch"] .damage-value,
.skill-damage-card[data-skill-id="nature_touch"] .healing-power {
    color: #66dd66 !important;
    text-shadow: 0 0 8px rgba(102, 221, 102, 0.6) !important;
}

.skill-damage-card[data-skill-id="nature_touch"] .effect-tab {
    background: linear-gradient(135deg, rgba(102, 221, 102, 0.1) 0%, rgba(102, 221, 102, 0.06) 100%);
    border: 1px solid rgba(102, 221, 102, 0.35);
    color: #b5eab5;
}

.skill-damage-card[data-skill-id="nature_touch"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(102, 221, 102, 0.2) 0%, rgba(102, 221, 102, 0.12) 100%);
    border-color: rgba(102, 221, 102, 0.55);
}

.skill-damage-card[data-skill-id="nature_touch"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(102, 221, 102, 0.3) 0%, rgba(102, 221, 102, 0.15) 100%);
    border-color: #66dd66;
    color: #e0ffe0;
}

/* 自然愈合技能按钮样式 - 与其他德鲁伊技能一致 */
.skill-damage-card[data-skill-id="natural_healing"] .effect-tab {
    background: linear-gradient(135deg, rgba(68, 204, 68, 0.1) 0%, rgba(68, 204, 68, 0.05) 100%);
    border: 1px solid rgba(68, 204, 68, 0.3);
    color: #a8d8a8;
}

.skill-damage-card[data-skill-id="natural_healing"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(68, 204, 68, 0.2) 0%, rgba(68, 204, 68, 0.1) 100%);
    border-color: rgba(68, 204, 68, 0.5);
}

.skill-damage-card[data-skill-id="natural_healing"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(68, 204, 68, 0.3) 0%, rgba(68, 204, 68, 0.15) 100%);
    border-color: #44cc44;
    color: #ccffcc;
}

/* 自然愈合详细计算区域 */
.skill-damage-card[data-skill-id="natural_healing"] .damage-calculation-details {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(68, 204, 68, 0.2);
}

.skill-damage-card[data-skill-id="natural_healing"] .calculation-step {
    background: rgba(68, 204, 68, 0.05);
    border-left: 3px solid #44cc44;
}

.skill-damage-card[data-skill-id="natural_healing"] .calculation-step .step-title {
    color: #a8d8a8;
}

.skill-damage-card[data-skill-id="natural_healing"] .calculation-step .step-value {
    color: #ccffcc;
}

/* 自然愈合标签文本 */
.skill-damage-card[data-skill-id="natural_healing"] .damage-label {
    color: #a8d8a8;
}

/* 自然愈合治疗强度数值 - 确保优先级高于全局样式 */
.skill-damage-card[data-skill-id="natural_healing"] .healing-power,
.skill-damage-card[data-skill-id="natural_healing"] .damage-value.healing-power,
.skill-damage-card[data-skill-id="natural_healing"] .effect-tab .healing-power,
.skill-damage-card[data-skill-id="natural_healing"] .effect-tab .damage-value.healing-power {
    color: #44cc44 !important;
    text-shadow: 0 0 8px rgba(68, 204, 68, 0.6) !important;
}

/* 自然愈合所有数值都使用绿色样式 */
.skill-damage-card[data-skill-id="natural_healing"] .damage-value {
    color: #44cc44 !important;
    text-shadow: 0 0 8px rgba(68, 204, 68, 0.6) !important;
}

/* 自然愈合技能图标完整样式 */
.skill-damage-card[data-skill-id="natural_healing"] .skill-icon {
    width: 100px !important;
    height: 100px !important;
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}


/* ========================================================== */
/* ================= 变身技能专用样式 ====================== */
/* ========================================================== */

/* 变身技能攻击选项容器 */
.transformation-attacks-container {
    display: flex;
    gap: 12px;
    margin-right: 16px;
}

/* 技能名字容器 - 包含名字和变身按钮 */
.skill-name-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

/* 变身控制按钮容器 */
.transformation-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 变身按钮样式 */
.transform-btn {
    background: linear-gradient(135deg, #44cc44 0%, #2a8a2a 100%);
    border: 2px solid #44cc44;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 12px;
    min-width: 60px;
    justify-content: center;
    white-space: nowrap;
}

.transform-btn:hover {
    background: linear-gradient(135deg, #55dd55 0%, #3a9a3a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(68, 204, 68, 0.3);
}

.transform-btn.transformed {
    background: linear-gradient(135deg, #2a4a2a 0%, #4a6a2a 100%);
    border: 2px solid #4a8a2a;
    color: #66ff66;
}

.transform-btn.transformed:hover {
    background: linear-gradient(135deg, #3a5a3a 0%, #5a7a5a 100%);
    border: 2px solid #5a9a5a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(68, 138, 68, 0.3);
}

.transform-btn i {
    font-size: 16px;
}

/* 变身效果属性显示样式 */
.stat-line.transformation-effect {
    border-left: 3px solid #44cc44;
    background: rgba(68, 204, 68, 0.1);
    position: relative;
}

.stat-line.transformation-effect::before {
    content: '🐻';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

.stat-line.modified-stat {
    border-left: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.1);
    position: relative;
}


/* 变身技能攻击选项通用基础样式 */
.transformation-attack-option {
    background: linear-gradient(135deg, rgba(68, 204, 68, 0.1) 0%, rgba(68, 204, 68, 0.05) 100%);
    border: 1px solid rgba(68, 204, 68, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 79px;
}

.transformation-attack-option:hover {
    background: linear-gradient(135deg, rgba(68, 204, 68, 0.2) 0%, rgba(68, 204, 68, 0.1) 100%);
    border-color: rgba(68, 204, 68, 0.5);
    transform: translateY(-1px);
}

.transformation-attack-option.selected {
    background: linear-gradient(135deg, rgba(68, 204, 68, 0.3) 0%, rgba(68, 204, 68, 0.15) 100%);
    border-color: #44cc44;
    box-shadow: 0 0 10px rgba(68, 204, 68, 0.3);
}

.damage-value-medium {
    font-size: 32px;
    font-weight: 600;
    color: #44cc44;
    line-height: 1.2;
}

/* 变身技能详情 */
.transformation-skill-details {
    padding: 0px;
    background: rgba(255, 255, 255, 0.02);
}

/* 变身效果容器 */
.transformation-effects {
    margin: 16px 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(68, 204, 68, 0.2);
}

/* 正面效果 */
.positive-effects {
    margin-bottom: 12px;
}

.positive-effects h5 {
    color: #44cc44;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.positive-effects .effect-item {
    color: #a8d8a8;
    font-size: 13px;
    margin-bottom: 4px;
    padding-left: 16px;
}

/* 负面效果 */
.negative-effects h5 {
    color: #ff6b6b;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.negative-effects .effect-item {
    color: #d8a8a8;
    font-size: 13px;
    margin-bottom: 4px;
    padding-left: 16px;
}

/* 当前攻击计算区域 */
.current-attack-calculation {
    margin-top: 20px;
    padding: 16px;
    background: rgba(68, 204, 68, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(68, 204, 68, 0.2);
}

.current-attack-calculation h4 {
    color: #44cc44;
    margin-bottom: 12px;
    font-size: 16px;
}

/* ========================================================== */
/* ================= 德鲁伊天赋卡片样式 =================== */
/* ========================================================== */

/* 德鲁伊天赋卡片列表容器 */
.talents-card-list {
    margin-top: 20px;
}

/* 德鲁伊天赋卡片主容器 */
.druid-talent-card {
    background: linear-gradient(135deg, #1a2e1a 0%, #1e3a1e 50%, #22462f 100%);
    border: 2px solid #2a5a3a;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(34, 70, 47, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.druid-talent-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(68, 204, 102, 0.4);
    border-color: #44cc66;
}

/* 天赋卡片头部 */
.talent-card-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.3s ease;
}

.talent-card-header:hover {
    background: rgba(68, 204, 102, 0.05);
}

/* 天赋图标 */
.talent-icon {
    width: 56px;
    height: 56px;
    margin-right: 16px;
    border-radius: 8px;
    border: 2px solid #44cc66;
    overflow: hidden;
    background: rgba(68, 204, 102, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(68, 204, 102, 0.3);
}

.talent-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 天赋信息区域 */
.talent-info {
    flex: 1;
    margin-right: 16px;
}

.talent-name {
    font-size: 18px;
    font-weight: 700;
    color: #88ff88;
    margin-bottom: 6px;
    text-shadow: 0 0 10px rgba(136, 255, 136, 0.5);
}

.talent-description {
    font-size: 13px;
    color: #a8d8a8;
    margin-bottom: 8px;
    line-height: 1.4;
}

.talent-scaling {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scaling-label {
    font-size: 12px;
    color: #66bb66;
    font-weight: 600;
}

.scaling-value {
    font-size: 12px;
    color: #bbddbb;
    background: rgba(68, 204, 102, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(68, 204, 102, 0.3);
}

/* 治疗结果显示区域 */
.talent-healing-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 120px;
}

.healing-per-second {
    text-align: center;
}

.healing-value-large {
    font-size: 28px;
    font-weight: 700;
    color: #66ff66;
    line-height: 1;
    text-shadow: 0 0 15px rgba(102, 255, 102, 0.6);
}

.healing-per-interval {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid rgba(68, 204, 102, 0.3);
}

.healing-value-medium {
    font-size: 20px;
    font-weight: 600;
    color: #88ee88;
    line-height: 1;
    text-shadow: 0 0 10px rgba(136, 238, 136, 0.5);
}

.healing-label {
    font-size: 11px;
    color: #99cc99;
    font-weight: 500;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 展开图标 */
.talent-card-header .expand-icon {
    color: #66bb66;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.talent-card-header:hover .expand-icon {
    color: #88dd88;
}

/* 天赋卡片详情区域 */
.talent-card-details {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(68, 204, 102, 0.2);
}

/* 计算详情 */
.talent-calculation-details {
    margin-bottom: 20px;
}

.talent-calculation-details h4 {
    color: #88ff88;
    font-size: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calculation-steps {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(68, 204, 102, 0.2);
}

.calc-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(68, 204, 102, 0.1);
}

.calc-step:last-child {
    border-bottom: none;
}

.step-label {
    font-size: 13px;
    color: #a8d8a8;
    font-weight: 500;
}

.step-value {
    font-size: 13px;
    color: #bbeebb;
    font-weight: 600;
    background: rgba(68, 204, 102, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.calc-formula {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid rgba(68, 204, 102, 0.3);
}

.formula-text {
    font-size: 12px;
    color: #99dd99;
    font-family: 'Courier New', monospace;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 4px;
}

.formula-result {
    font-size: 14px;
    color: #66ff66;
    font-weight: 700;
    text-align: center;
    background: rgba(68, 204, 102, 0.15);
    padding: 8px;
    border-radius: 4px;
    text-shadow: 0 0 10px rgba(102, 255, 102, 0.5);
}

/* 天赋机制说明 */
.talent-mechanics {
    margin-bottom: 20px;
}

.talent-mechanics h4 {
    color: #88ff88;
    font-size: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mechanics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.mechanic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(68, 204, 102, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(68, 204, 102, 0.2);
    font-size: 13px;
    color: #bbddbb;
}

.mechanic-item i {
    color: #66cc66;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* 优化建议 */
.talent-optimization h4 {
    color: #88ff88;
    font-size: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.optimization-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(68, 204, 102, 0.08);
    border-radius: 6px;
    border-left: 4px solid #44cc66;
    font-size: 13px;
    color: #bbddbb;
    line-height: 1.5;
}

.tip-icon {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 自然愈合特定样式 */
.natural-healing-card {
    background: linear-gradient(135deg, 
        #1a2e1a 0%, 
        #1e3a1e 25%, 
        #22462f 50%, 
        #1e3a1e 75%, 
        #1a2e1a 100%);
    border-color: #2a5a3a;
}

.natural-healing-card:hover {
    border-color: #44cc66;
    box-shadow: 0 8px 25px rgba(68, 204, 102, 0.5);
}

.natural-healing-card .talent-name {
    background: linear-gradient(90deg, #66ff66, #88ff88, #66ff66);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: naturalHealingGlow 3s ease-in-out infinite;
}

@keyframes naturalHealingGlow {
    0%, 100% { 
        filter: brightness(1);
        text-shadow: 0 0 10px rgba(136, 255, 136, 0.5);
    }
    50% { 
        filter: brightness(1.2);
        text-shadow: 0 0 15px rgba(136, 255, 136, 0.8);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .talent-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .talent-healing-result {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
    }
    
    .mechanics-grid {
        grid-template-columns: 1fr;
    }
    
    .healing-value-large {
        font-size: 24px;
    }
    
    .healing-value-medium {
        font-size: 18px;
    }
}