/* ========================================================== */
/* =================== 法师技能样式 =================== */
/* ========================================================== */

/* ==================== 通用法师技能基础样式 ==================== */
/* 通用法师技能卡片基础结构 */
.skill-damage-card[data-skill-id="fireball"],
.skill-damage-card[data-skill-id="magic_missile"],
.skill-damage-card[data-skill-id="ice_bolt"],
.skill-damage-card[data-skill-id="zap"], 
.skill-damage-card[data-skill-id="explosion"],
.skill-damage-card[data-skill-id="chain_lightning"],
.skill-damage-card[data-skill-id="lightning_strike"],
.skill-damage-card[data-skill-id="ignite"] {
    position: relative;
    overflow: hidden;
}

/* 通用法师技能伪元素装饰基础属性 */
.skill-damage-card[data-skill-id="fireball"]::before,
.skill-damage-card[data-skill-id="magic_missile"]::before,
.skill-damage-card[data-skill-id="ice_bolt"]::before,
.skill-damage-card[data-skill-id="zap"]::before,
.skill-damage-card[data-skill-id="explosion"]::before,
.skill-damage-card[data-skill-id="chain_lightning"]::before,
.skill-damage-card[data-skill-id="lightning_strike"]::before,
.skill-damage-card[data-skill-id="ignite"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

/* 通用法师技能悬停变换效果 */
.skill-damage-card[data-skill-id="fireball"]:hover,
.skill-damage-card[data-skill-id="ice_bolt"]:hover,
.skill-damage-card[data-skill-id="zap"]:hover,
.skill-damage-card[data-skill-id="explosion"]:hover,
.skill-damage-card[data-skill-id="chain_lightning"]:hover,
.skill-damage-card[data-skill-id="ignite"]:hover {
    transform: translateY(-2px);
}

/* 特殊的悬停变换效果 */
.skill-damage-card[data-skill-id="magic_missile"]:hover {
    transform: translateY(-3px) translateZ(0);
}

.skill-damage-card[data-skill-id="lightning_strike"]:hover {
    transform: translateY(-3px);
}

/* 通用法师技能头部基础样式 */
.skill-damage-card[data-skill-id="fireball"] .skill-damage-header,
.skill-damage-card[data-skill-id="magic_missile"] .skill-damage-header,
.skill-damage-card[data-skill-id="ice_bolt"] .skill-damage-header,
.skill-damage-card[data-skill-id="zap"] .skill-damage-header,
.skill-damage-card[data-skill-id="explosion"] .skill-damage-header,
.skill-damage-card[data-skill-id="chain_lightning"] .skill-damage-header,
.skill-damage-card[data-skill-id="lightning_strike"] .skill-damage-header,
.skill-damage-card[data-skill-id="ignite"] .skill-damage-header {
    position: relative;
    z-index: 2;
}

/* 通用法师技能多重伤害效果项目基础样式 */
.skill-damage-card[data-skill-id="fireball"] .effect-item,
.skill-damage-card[data-skill-id="magic_missile"] .effect-item,
.skill-damage-card[data-skill-id="ice_bolt"] .effect-item,
.skill-damage-card[data-skill-id="zap"] .effect-item,
.skill-damage-card[data-skill-id="explosion"] .effect-item,
.skill-damage-card[data-skill-id="chain_lightning"] .effect-item,
.skill-damage-card[data-skill-id="lightning_strike"] .effect-item,
.skill-damage-card[data-skill-id="ignite"] .effect-item {
    transition: all 0.3s ease;
}

/* ========================================================== */
/* =================== 魔法飞弹特殊样式 =================== */
/* ========================================================== */

/* 魔法飞弹特殊样式 - 紫色奥术主题 */
.skill-damage-card[data-skill-id="magic_missile"] {
    background: linear-gradient(135deg, #2a1e3a 0%, #3a2a4a 100%);
    border: 2px solid #4a3a5a;
}

.skill-damage-card[data-skill-id="magic_missile"]::before {
    background: radial-gradient(circle at 30% 40%, rgba(153, 102, 255, 0.1) 0%, transparent 50%);
}

.skill-damage-card[data-skill-id="magic_missile"]:hover {
    border: 2px solid #9966ff;
    box-shadow: 0 8px 25px rgba(153, 102, 255, 0.4);
}

.skill-damage-card[data-skill-id="magic_missile"]:hover::before {
    background: radial-gradient(circle at 30% 40%, rgba(153, 102, 255, 0.15) 0%, transparent 60%);
}

/* 魔法飞弹头部特殊样式 */
.skill-damage-card[data-skill-id="magic_missile"] .skill-damage-header {
    background: rgba(153, 102, 255, 0.08);
}

.skill-damage-card[data-skill-id="magic_missile"] .skill-damage-header:hover {
    background: rgba(153, 102, 255, 0.12);
}

/* 魔法飞弹技能名称特殊颜色 */
.skill-damage-card[data-skill-id="magic_missile"] .skill-name {
    color: #bb88ff;
    text-shadow: 0 0 2px rgba(153, 102, 255, 0.2);
}

/* 魔法飞弹英文名称特殊颜色 */
.skill-damage-card[data-skill-id="magic_missile"] .skill-english-name {
    color: #9966ff;
    text-shadow: none;
}

/* 魔法飞弹伤害框架特殊样式 - 紫色主题 */
.skill-damage-card[data-skill-id="magic_missile"] .damage-value-large {
    color: #bb88ff !important;
    text-shadow: 0 0 8px rgba(153, 102, 255, 0.5);
    font-weight: 700;
}

.skill-damage-card[data-skill-id="magic_missile"] .damage-value {
    color: #9966ff !important;
    text-shadow: 0 0 4px rgba(153, 102, 255, 0.3);
    font-weight: 600;
}

.skill-damage-card[data-skill-id="magic_missile"] .damage-label {
    color: #aa77ff !important;
    text-shadow: none;
}

/* 魔法飞弹效果标签特殊样式 */
.skill-damage-card[data-skill-id="magic_missile"] .effect-tab {
    background: linear-gradient(135deg, rgba(153, 102, 255, 0.1) 0%, rgba(187, 136, 255, 0.05) 100%);
    border: 1px solid rgba(153, 102, 255, 0);
    color: #bb88ff;
}

.skill-damage-card[data-skill-id="magic_missile"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(153, 102, 255, 0.18) 0%, rgba(187, 136, 255, 0.1) 100%);
    border-color: rgba(153, 102, 255, 0.4);
    box-shadow: 0 2px 6px rgba(153, 102, 255, 0.25);
}

.skill-damage-card[data-skill-id="magic_missile"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(153, 102, 255, 0.28) 0%, rgba(187, 136, 255, 0.18) 100%);
    border-color: #9966ff;
    box-shadow: 0 0 10px rgba(153, 102, 255, 0.5);
}

.skill-damage-card[data-skill-id="magic_missile"] .effect-tab .damage-value {
    color: #bb88ff !important;
    text-shadow: 0 0 4px rgba(153, 102, 255, 0.3);
}

.skill-damage-card[data-skill-id="magic_missile"] .effect-tab .damage-label {
    color: #aa77ff !important;
    text-shadow: none;
}

/* 魔法飞弹详情样式 */
.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details {
    background: linear-gradient(135deg, #2a1a2a 0%, #281528 100%);
    border: 1px solid rgba(150, 100, 255, 0.2);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details h4 {
    color: #b47aff;
    text-shadow: 0 0 2px rgba(150, 100, 255, 0.2);
    border-bottom-color: rgba(150, 100, 255, 0.3);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .property-item {
    background: rgba(150, 100, 255, 0.08);
    border: 1px solid rgba(150, 100, 255, 0.15);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .property-value {
    color: #b47aff;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .scaling-item {
    background: rgba(150, 100, 255, 0.12);
    border-color: rgba(150, 100, 255, 0.4);
    color: #b47aff;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .effect-name {
    color: #b47aff;
    text-shadow: 0 0 3px rgba(150, 100, 255, 0.3);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .multi-damage-effect {
    border: 1px solid rgba(150, 100, 255, 0.2);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .multi-damage-effect:hover {
    background: rgba(150, 100, 255, 0.1);
    border-color: rgba(150, 100, 255, 0.4);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .multi-damage-effect.selected {
    background: rgba(150, 100, 255, 0.15);
    border-color: rgba(150, 100, 255, 0.6);
    box-shadow: 0 0 8px rgba(150, 100, 255, 0.2);
}

.skill-damage-card[data-skill-id="magic_missile"] .offensive-skill-details .damage-calculation {
    border-top-color: rgba(150, 100, 255, 0.3);
}

/* ========================================================== */
/* =================== 爆裂特殊样式 =================== */
/* ========================================================== */

/* 爆裂特殊样式 - 火焰主题 */
.skill-damage-card[data-skill-id="explosion"] {
    background: linear-gradient(135deg, #3a1e1a 0%, #4a2520 100%);
    border: 2px solid #5a3530;
    box-shadow: 0 4px 15px rgba(204, 102, 68, 0.3);
}

.skill-damage-card[data-skill-id="explosion"]::before {
    background: radial-gradient(circle at 40% 30%, rgba(204, 102, 68, 0.08) 0%, transparent 70%);
}

.skill-damage-card[data-skill-id="explosion"]:hover {
    border: 2px solid #cc6644;
    box-shadow: 0 8px 25px rgba(204, 102, 68, 0.5);
}

.skill-damage-card[data-skill-id="explosion"]:hover::before {
    background: radial-gradient(circle at 40% 30%, rgba(204, 102, 68, 0.15) 0%, transparent 70%);
}

/* 爆裂头部特殊样式 */
.skill-damage-card[data-skill-id="explosion"] .skill-damage-header {
    background: rgba(204, 102, 68, 0.1);
}

.skill-damage-card[data-skill-id="explosion"] .skill-damage-header:hover {
    background: rgba(204, 102, 68, 0.15);
}

/* 爆裂技能名称特殊颜色 */
.skill-damage-card[data-skill-id="explosion"] .skill-name {
    color: #dd8866;
    text-shadow: 0 0 2px rgba(204, 102, 68, 0.3);
    font-weight: 600;
}

/* 爆裂英文名称特殊颜色 */
.skill-damage-card[data-skill-id="explosion"] .skill-english-name {
    color: #cc6644;
    text-shadow: none;
}

/* 爆裂多重伤害效果样式 */
.skill-damage-card[data-skill-id="explosion"] .effect-item {
    background: rgba(204, 102, 68, 0.08);
    border: 1px solid rgba(204, 102, 68, 0.25);
}

.skill-damage-card[data-skill-id="explosion"] .effect-item:hover {
    background: rgba(204, 102, 68, 0.12);
    border-color: rgba(204, 102, 68, 0.4);
    box-shadow: 0 2px 6px rgba(204, 102, 68, 0.2);
}

.skill-damage-card[data-skill-id="explosion"] .effect-item.selected {
    background: rgba(204, 102, 68, 0.22);
    border-color: #cc6644;
    box-shadow: 0 0 10px rgba(204, 102, 68, 0.4);
}

/* 爆裂效果标签样式 */
.skill-damage-card[data-skill-id="explosion"] .effect-tab {
    background: linear-gradient(135deg, rgba(204, 102, 68, 0.1) 0%, rgba(221, 136, 102, 0.05) 100%);
    border: 1px solid rgba(204, 102, 68, 0);
    color: #dd8866;
}

.skill-damage-card[data-skill-id="explosion"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(204, 102, 68, 0.18) 0%, rgba(221, 136, 102, 0.1) 100%);
    border-color: rgba(204, 102, 68, 0.4);
    box-shadow: 0 2px 6px rgba(204, 102, 68, 0.25);
}

.skill-damage-card[data-skill-id="explosion"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(204, 102, 68, 0.28) 0%, rgba(221, 136, 102, 0.18) 100%);
    border-color: #cc6644;
    box-shadow: 0 0 10px rgba(204, 102, 68, 0.5);
}

/* 爆裂详情特殊样式 */
.skill-damage-card[data-skill-id="explosion"] .offensive-skill-details {
    background: linear-gradient(135deg, #2a1a1a 0%, #281515 100%);
    border: 1px solid rgba(204, 102, 68, 0.2);
}

.skill-damage-card[data-skill-id="explosion"] .offensive-skill-details h4 {
    color: #dd8866;
    text-shadow: 0 0 2px rgba(204, 102, 68, 0.2);
    border-bottom-color: rgba(204, 102, 68, 0.3);
}

.skill-damage-card[data-skill-id="explosion"] .offensive-skill-details .property-item {
    background: rgba(204, 102, 68, 0.08);
    border: 1px solid rgba(204, 102, 68, 0.15);
}

.skill-damage-card[data-skill-id="explosion"] .offensive-skill-details .property-value {
    color: #dd8866;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="explosion"] .offensive-skill-details .scaling-item {
    background: rgba(204, 102, 68, 0.12);
    border-color: rgba(204, 102, 68, 0.4);
    color: #dd8866;
    text-shadow: none;
}

/* ========================================================== */
/* =================== 冰弹箭特殊样式 =================== */
/* ========================================================== */

/* 冰弹箭特殊样式 - 冰蓝色主题 */
.skill-damage-card[data-skill-id="ice_bolt"] {
    background: linear-gradient(135deg, #1a2e3a 0%, #2a3e4a 100%);
    border: 2px solid #3a4e5a;
    box-shadow: 0 4px 15px rgba(68, 170, 204, 0.2);
}

.skill-damage-card[data-skill-id="ice_bolt"]::before {
    background: radial-gradient(circle at 30% 40%, rgba(68, 204, 255, 0.1) 0%, transparent 60%);
    border-radius: inherit;
}

.skill-damage-card[data-skill-id="ice_bolt"]:hover {
    border: 2px solid #44ccff;
    box-shadow: 0 8px 25px rgba(68, 204, 255, 0.4);
}

.skill-damage-card[data-skill-id="ice_bolt"]:hover::before {
    background: radial-gradient(circle at 30% 40%, rgba(68, 204, 255, 0.15) 0%, transparent 60%);
}

/* 冰弹箭头部特殊样式 */
.skill-damage-card[data-skill-id="ice_bolt"] .skill-damage-header {
    background: rgba(68, 204, 255, 0.08);
}

.skill-damage-card[data-skill-id="ice_bolt"] .skill-damage-header:hover {
    background: rgba(68, 204, 255, 0.12);
}

/* 冰弹箭技能名称特殊颜色 */
.skill-damage-card[data-skill-id="ice_bolt"] .skill-name {
    color: #66ddff;
    text-shadow: 0 0 2px rgba(68, 204, 255, 0.2);
    font-weight: 600;
}

/* 冰弹箭英文名称特殊颜色 */
.skill-damage-card[data-skill-id="ice_bolt"] .skill-english-name {
    color: #44ccff;
    text-shadow: none;
}

/* 冰弹箭多重伤害效果样式 */
.skill-damage-card[data-skill-id="ice_bolt"] .effect-item {
    background: rgba(68, 204, 255, 0.08);
    border: 1px solid rgba(68, 204, 255, 0.2);
}

.skill-damage-card[data-skill-id="ice_bolt"] .effect-item:hover {
    background: rgba(68, 204, 255, 0.12);
    border-color: rgba(68, 204, 255, 0.35);
    box-shadow: 0 2px 6px rgba(68, 204, 255, 0.15);
}

.skill-damage-card[data-skill-id="ice_bolt"] .effect-item.selected {
    background: rgba(68, 204, 255, 0.2);
    border-color: #44ccff;
    box-shadow: 0 0 10px rgba(68, 204, 255, 0.3);
}

/* 冰弹箭效果标签样式 */
.skill-damage-card[data-skill-id="ice_bolt"] .effect-tab {
    background: linear-gradient(135deg, rgba(68, 204, 255, 0.08) 0%, rgba(102, 221, 255, 0.05) 100%);
    border: 1px solid rgba(68, 205, 255, 0);
    color: #66ddff;
}

.skill-damage-card[data-skill-id="ice_bolt"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(68, 204, 255, 0.15) 0%, rgba(102, 221, 255, 0.08) 100%);
    border-color: rgba(68, 204, 255, 0.4);
    box-shadow: 0 2px 6px rgba(68, 204, 255, 0.2);
}

.skill-damage-card[data-skill-id="ice_bolt"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(68, 204, 255, 0.25) 0%, rgba(102, 221, 255, 0.15) 100%);
    border-color: #44ccff;
    box-shadow: 0 0 10px rgba(68, 204, 255, 0.4);
}

/* 冰弹箭详情特殊样式 */
.skill-damage-card[data-skill-id="ice_bolt"] .offensive-skill-details {
    background: linear-gradient(135deg, #1a2e3a 0%, #243440 100%);
    border: 1px solid rgba(68, 204, 255, 0.2);
}

.skill-damage-card[data-skill-id="ice_bolt"] .offensive-skill-details h4 {
    color: #66ddff;
    text-shadow: 0 0 2px rgba(68, 204, 255, 0.25);
    border-bottom-color: rgba(68, 204, 255, 0.3);
}

.skill-damage-card[data-skill-id="ice_bolt"] .offensive-skill-details .property-item {
    background: rgba(68, 204, 255, 0.08);
    border: 1px solid rgba(68, 204, 255, 0.15);
}

.skill-damage-card[data-skill-id="ice_bolt"] .offensive-skill-details .property-value {
    color: #66ddff;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="ice_bolt"] .offensive-skill-details .scaling-item {
    background: rgba(68, 204, 255, 0.12);
    border-color: rgba(68, 204, 255, 0.4);
    color: #66ddff;
    text-shadow: none;
}

/* 冰弹箭专用 effect-tab damage-label 样式 */
.skill-damage-card[data-skill-id="ice_bolt"] .effect-tab .damage-label {
    color: #44ccff !important;
    text-shadow: 0 0 2px rgba(68, 204, 255, 0.4) !important;
    opacity: 0.95 !important;
}

/* ========================================================== */
/* =================== 电击特殊样式 =================== */
/* ========================================================== */

/* 电击特殊样式 - 蓝色闪电主题 */
.skill-damage-card[data-skill-id="zap"] {
    background: linear-gradient(135deg, #1a1e3a 0%, #2a2e4a 100%);
    border: 2px solid #3a4e7a;
    box-shadow: 0 4px 15px rgba(68, 150, 255, 0.3);
}

.skill-damage-card[data-skill-id="zap"]::before {
    background: radial-gradient(circle at 30% 40%, rgba(68, 150, 255, 0.12) 0%, transparent 60%);
    border-radius: inherit;
}

.skill-damage-card[data-skill-id="zap"]:hover {
    border: 2px solid #4496ff;
    box-shadow: 0 8px 25px rgba(68, 150, 255, 0.5);
}

.skill-damage-card[data-skill-id="zap"]:hover::before {
    background: radial-gradient(circle at 30% 40%, rgba(68, 150, 255, 0.18) 0%, transparent 60%);
}

/* 电击头部特殊样式 */
.skill-damage-card[data-skill-id="zap"] .skill-damage-header {
    background: rgba(68, 150, 255, 0.1);
}

.skill-damage-card[data-skill-id="zap"] .skill-damage-header:hover {
    background: rgba(68, 150, 255, 0.15);
}

/* 电击技能名称特殊颜色 */
.skill-damage-card[data-skill-id="zap"] .skill-name {
    color: #66bbff;
    text-shadow: 0 0 3px rgba(68, 150, 255, 0.3);
    font-weight: 600;
}

/* 电击英文名称特殊颜色 */
.skill-damage-card[data-skill-id="zap"] .skill-english-name {
    color: #4496ff;
    text-shadow: 0 0 2px rgba(68, 150, 255, 0.2);
}

/* 电击伤害框架特殊样式 - 蓝色主题 */
.skill-damage-card[data-skill-id="zap"] .damage-value-large {
    color: #66bbff !important;
    text-shadow: 0 0 8px rgba(68, 150, 255, 0.5);
    font-weight: 700;
}

.skill-damage-card[data-skill-id="zap"] .damage-value {
    color: #4496ff !important;
    text-shadow: 0 0 4px rgba(68, 150, 255, 0.3);
    font-weight: 600;
}

.skill-damage-card[data-skill-id="zap"] .damage-label {
    color: #5aa7ff !important;
    text-shadow: none;
}

/* 电击效果标签特殊样式 */
.skill-damage-card[data-skill-id="zap"] .effect-tab {
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.1) 0%, rgba(102, 187, 255, 0.05) 100%);
    border: 1px solid rgba(68, 150, 255, 0);
    color: #66bbff;
}

.skill-damage-card[data-skill-id="zap"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.18) 0%, rgba(102, 187, 255, 0.1) 100%);
    border-color: rgba(68, 150, 255, 0.4);
    box-shadow: 0 2px 6px rgba(68, 150, 255, 0.25);
}

.skill-damage-card[data-skill-id="zap"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.28) 0%, rgba(102, 187, 255, 0.18) 100%);
    border-color: #4496ff;
    box-shadow: 0 0 10px rgba(68, 150, 255, 0.5);
}

.skill-damage-card[data-skill-id="zap"] .effect-tab .damage-value {
    color: #66bbff !important;
    text-shadow: 0 0 4px rgba(68, 150, 255, 0.3);
}

.skill-damage-card[data-skill-id="zap"] .effect-tab .damage-label {
    color: #5aa7ff !important;
    text-shadow: none;
}

/* 电击多重伤害效果样式 */
.skill-damage-card[data-skill-id="zap"] .effect-item {
    background: rgba(68, 150, 255, 0.08);
    border: 1px solid rgba(68, 150, 255, 0.2);
}

.skill-damage-card[data-skill-id="zap"] .effect-item:hover {
    background: rgba(68, 150, 255, 0.12);
    border-color: rgba(68, 150, 255, 0.3);
}

.skill-damage-card[data-skill-id="zap"] .effect-item.selected {
    background: rgba(68, 150, 255, 0.2);
    border-color: #4496ff;
    box-shadow: 0 0 8px rgba(68, 150, 255, 0.3);
}

/* 电击详情特殊样式 */
.skill-damage-card[data-skill-id="zap"] .offensive-skill-details {
    background: linear-gradient(135deg, #1a1e2a 0%, #252a38 100%);
    border: 1px solid rgba(68, 150, 255, 0.2);
}

.skill-damage-card[data-skill-id="zap"] .offensive-skill-details h4 {
    color: #66bbff;
    text-shadow: 0 0 2px rgba(68, 150, 255, 0.2);
    border-bottom-color: rgba(68, 150, 255, 0.3);
}

.skill-damage-card[data-skill-id="zap"] .offensive-skill-details .property-item {
    background: rgba(68, 150, 255, 0.08);
    border: 1px solid rgba(68, 150, 255, 0.15);
}

.skill-damage-card[data-skill-id="zap"] .offensive-skill-details .property-value {
    color: #66bbff;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="zap"] .offensive-skill-details .scaling-item {
    background: rgba(68, 150, 255, 0.12);
    border-color: rgba(68, 150, 255, 0.4);
    color: #66bbff;
    text-shadow: none;
}

/* ========================================================== */
/* =================== 雷击术特殊样式 =================== */
/* ========================================================== */

/* 雷击术特殊样式 - 大闪电蓝色主题 */
.skill-damage-card[data-skill-id="lightning_strike"] {
    background: linear-gradient(135deg, #141a3a 0%, #1e2545 100%);
    border: 2px solid #2a4070;
    box-shadow: 0 4px 20px rgba(68, 150, 255, 0.4);
}

.skill-damage-card[data-skill-id="lightning_strike"]::before {
    background: 
        radial-gradient(circle at 20% 30%, rgba(68, 150, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(90, 167, 255, 0.1) 0%, transparent 60%);
    border-radius: inherit;
}

.skill-damage-card[data-skill-id="lightning_strike"]:hover {
    border: 2px solid #3366cc;
    box-shadow: 0 8px 30px rgba(68, 150, 255, 0.6);
}

.skill-damage-card[data-skill-id="lightning_strike"]:hover::before {
    background: 
        radial-gradient(circle at 20% 30%, rgba(68, 150, 255, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(90, 167, 255, 0.15) 0%, transparent 60%);
}

/* 雷击术头部特殊样式 */
.skill-damage-card[data-skill-id="lightning_strike"] .skill-damage-header {
    background: rgba(68, 150, 255, 0.12);
}

.skill-damage-card[data-skill-id="lightning_strike"] .skill-damage-header:hover {
    background: rgba(68, 150, 255, 0.18);
}

/* 雷击术技能名称特殊颜色 */
.skill-damage-card[data-skill-id="lightning_strike"] .skill-name {
    color: #77ccff;
    text-shadow: 0 0 5px rgba(68, 150, 255, 0.4);
    font-weight: 700;
    font-size: 24px;
}

/* 雷击术英文名称特殊颜色 */
.skill-damage-card[data-skill-id="lightning_strike"] .skill-english-name {
    color: #5599ff;
    text-shadow: 0 0 3px rgba(68, 150, 255, 0.3);
}

/* 雷击术多重伤害效果样式 */
.skill-damage-card[data-skill-id="lightning_strike"] .effect-item {
    background: rgba(68, 150, 255, 0.1);
    border: 1px solid rgba(68, 150, 255, 0.25);
}

.skill-damage-card[data-skill-id="lightning_strike"] .effect-item:hover {
    background: rgba(68, 150, 255, 0.15);
    border-color: rgba(68, 150, 255, 0.4);
    box-shadow: 0 2px 8px rgba(68, 150, 255, 0.2);
}

.skill-damage-card[data-skill-id="lightning_strike"] .effect-item.selected {
    background: rgba(68, 150, 255, 0.25);
    border-color: #4496ff;
    box-shadow: 0 0 12px rgba(68, 150, 255, 0.4);
}

/* 雷击术效果标签样式 */
.skill-damage-card[data-skill-id="lightning_strike"] .effect-tab {
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.1) 0%, rgba(90, 167, 255, 0.05) 100%);
    border: 1px solid rgba(68, 149, 255, 0);
    color: #77ccff;
}

.skill-damage-card[data-skill-id="lightning_strike"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.2) 0%, rgba(90, 167, 255, 0.1) 100%);
    border-color: rgba(68, 150, 255, 0.5);
    box-shadow: 0 2px 8px rgba(68, 150, 255, 0.3);
}

.skill-damage-card[data-skill-id="lightning_strike"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.3) 0%, rgba(90, 167, 255, 0.2) 100%);
    border-color: #4496ff;
    box-shadow: 0 0 12px rgba(68, 150, 255, 0.5);
}

/* 雷击术详情特殊样式 */
.skill-damage-card[data-skill-id="lightning_strike"] .offensive-skill-details {
    background: linear-gradient(135deg, #0f1528 0%, #1a1f35 100%);
    border: 1px solid rgba(68, 150, 255, 0.25);
}

.skill-damage-card[data-skill-id="lightning_strike"] .offensive-skill-details h4 {
    color: #77ccff;
    text-shadow: 0 0 3px rgba(68, 150, 255, 0.3);
    border-bottom-color: rgba(68, 150, 255, 0.4);
}

.skill-damage-card[data-skill-id="lightning_strike"] .offensive-skill-details .property-item {
    background: rgba(68, 150, 255, 0.1);
    border: 1px solid rgba(68, 150, 255, 0.2);
}

.skill-damage-card[data-skill-id="lightning_strike"] .offensive-skill-details .property-value {
    color: #77ccff;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="lightning_strike"] .offensive-skill-details .scaling-item {
    background: rgba(68, 150, 255, 0.15);
    border-color: rgba(68, 150, 255, 0.5);
    color: #77ccff;
    text-shadow: none;
}

/* 雷击术专用 effect-tab damage-label 样式 */
.skill-damage-card[data-skill-id="lightning_strike"] .effect-tab .damage-label {
    color: #4496ff !important;
    text-shadow: 0 0 4px rgba(68, 150, 255, 0.6) !important;
    opacity: 0.92 !important;
    font-weight: 500 !important;
}

/* ========================================================== */
/* =================== 连环闪电特殊样式 =================== */
/* ========================================================== */

/* 连环闪电特殊样式 - 蓝紫色闪电主题 */
.skill-damage-card[data-skill-id="chain_lightning"] {
    background: linear-gradient(135deg, #1a2540 0%, #253655 100%);
    border: 2px solid #354470;
    box-shadow: 0 4px 15px rgba(102, 153, 255, 0.3);
}

.skill-damage-card[data-skill-id="chain_lightning"]::before {
    background: radial-gradient(circle at 30% 20%, rgba(102, 153, 255, 0.1) 0%, transparent 60%);
}

.skill-damage-card[data-skill-id="chain_lightning"]:hover {
    border: 2px solid #6699ff;
    box-shadow: 0 8px 25px rgba(102, 153, 255, 0.5);
}

.skill-damage-card[data-skill-id="chain_lightning"]:hover::before {
    background: radial-gradient(circle at 30% 20%, rgba(102, 153, 255, 0.15) 0%, transparent 70%);
}

/* 连环闪电头部特殊样式 */
.skill-damage-card[data-skill-id="chain_lightning"] .skill-damage-header {
    background: rgba(102, 153, 255, 0.1);
}

.skill-damage-card[data-skill-id="chain_lightning"] .skill-damage-header:hover {
    background: rgba(102, 153, 255, 0.15);
}

/* 连环闪电技能名称特殊颜色 */
.skill-damage-card[data-skill-id="chain_lightning"] .skill-name {
    color: #88aaff;
    text-shadow: 0 0 2px rgba(102, 153, 255, 0.3);
    font-weight: 600;
}

/* 连环闪电英文名称特殊颜色 */
.skill-damage-card[data-skill-id="chain_lightning"] .skill-english-name {
    color: #6688dd;
    text-shadow: none;
}

/* 连环闪电多重伤害效果样式 */
.skill-damage-card[data-skill-id="chain_lightning"] .effect-item {
    background: rgba(102, 153, 255, 0.08);
    border: 1px solid rgba(102, 153, 255, 0.25);
}

.skill-damage-card[data-skill-id="chain_lightning"] .effect-item:hover {
    background: rgba(102, 153, 255, 0.12);
    border-color: rgba(102, 153, 255, 0.4);
    box-shadow: 0 2px 6px rgba(102, 153, 255, 0.2);
}

.skill-damage-card[data-skill-id="chain_lightning"] .effect-item.selected {
    background: rgba(102, 153, 255, 0.22);
    border-color: #6699ff;
    box-shadow: 0 0 10px rgba(102, 153, 255, 0.4);
}

/* 连环闪电效果标签样式 */
.skill-damage-card[data-skill-id="chain_lightning"] .effect-tab {
    background: linear-gradient(135deg, rgba(102, 153, 255, 0.1) 0%, rgba(136, 170, 255, 0.05) 100%);
    border: 1px solid rgba(102, 153, 255, 0);
    color: #88aaff;
}

.skill-damage-card[data-skill-id="chain_lightning"] .effect-tab:hover {
    background: linear-gradient(135deg, rgba(102, 153, 255, 0.18) 0%, rgba(136, 170, 255, 0.1) 100%);
    border-color: rgba(102, 153, 255, 0.4);
    box-shadow: 0 2px 6px rgba(102, 153, 255, 0.25);
}

.skill-damage-card[data-skill-id="chain_lightning"] .effect-tab.active {
    background: linear-gradient(135deg, rgba(102, 153, 255, 0.28) 0%, rgba(136, 170, 255, 0.18) 100%);
    border-color: #6699ff;
    box-shadow: 0 0 10px rgba(102, 153, 255, 0.5);
}

/* 连环闪电详情特殊样式 */
.skill-damage-card[data-skill-id="chain_lightning"] .offensive-skill-details {
    background: linear-gradient(135deg, #1a2540 0%, #253655 100%);
    border: 1px solid rgba(102, 153, 255, 0.25);
}

.skill-damage-card[data-skill-id="chain_lightning"] .offensive-skill-details h4 {
    color: #88aaff;
    text-shadow: 0 0 2px rgba(102, 153, 255, 0.3);
    border-bottom-color: rgba(102, 153, 255, 0.35);
}

.skill-damage-card[data-skill-id="chain_lightning"] .offensive-skill-details .property-item {
    background: rgba(102, 153, 255, 0.1);
    border: 1px solid rgba(102, 153, 255, 0.2);
}

.skill-damage-card[data-skill-id="chain_lightning"] .offensive-skill-details .property-value {
    color: #88aaff;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="chain_lightning"] .offensive-skill-details .scaling-item {
    background: rgba(102, 153, 255, 0.15);
    border-color: rgba(102, 153, 255, 0.4);
    color: #88aaff;
}

/* 连环闪电专用 effect-tab damage-label 样式 */
.skill-damage-card[data-skill-id="chain_lightning"] .effect-tab .damage-label {
    color: #6699ff !important;
    text-shadow: 0 0 3px rgba(102, 153, 255, 0.5) !important;
    opacity: 0.9 !important;
}

/* ========================================================== */
/* =================== 点燃技能特殊样式 =================== */
/* ========================================================== */

/* 点燃技能卡片 - 暗红火焰主题 */
.skill-damage-card[data-skill-id="ignite"] {
    background: linear-gradient(135deg, #2e1e1a 0%, #3a2a20 100%);
    border: 2px solid #614c37;
    box-shadow: 0 4px 15px rgba(180, 100, 80, 0.3);
}

.skill-damage-card[data-skill-id="ignite"]::before {
    background: radial-gradient(circle at 30% 20%, rgba(180, 100, 80, 0.1) 0%, transparent 70%);
    border-radius: 12px;
}

.skill-damage-card[data-skill-id="ignite"]:hover {
    border: 2px solid #cc6644;
    box-shadow: 0 8px 25px rgba(180, 100, 80, 0.5);
}

.skill-damage-card[data-skill-id="ignite"]:hover::before {
    background: radial-gradient(circle at 30% 20%, rgba(180, 100, 80, 0.15) 0%, transparent 70%);
}

/* 点燃头部特殊样式 */
.skill-damage-card[data-skill-id="ignite"] .skill-damage-header {
    background: rgba(180, 100, 80, 0.1);
}

.skill-damage-card[data-skill-id="ignite"] .skill-damage-header:hover {
    background: rgba(180, 100, 80, 0.15);
}

/* 点燃技能名称特殊颜色 */
.skill-damage-card[data-skill-id="ignite"] .skill-name {
    color: #dd8866;
    text-shadow: 0 0 2px rgba(180, 100, 80, 0.4);
    font-weight: 600;
}

/* 点燃英文名称特殊颜色 */
.skill-damage-card[data-skill-id="ignite"] .skill-english-name {
    color: #bb7755;
    text-shadow: none;
}

/* 点燃多重伤害技能样式 */
.skill-damage-card[data-skill-id="ignite"] .multi-damage-effect {
    background: rgba(180, 100, 80, 0.1);
    border: 1px solid rgba(180, 100, 80, 0.3);
}

.skill-damage-card[data-skill-id="ignite"] .multi-damage-effect:hover {
    background: rgba(180, 100, 80, 0.2);
    border: 1px solid rgba(180, 100, 80, 0.5);
}

/* 点燃效果名称样式 */
.skill-damage-card[data-skill-id="ignite"] .effect-name {
    color: #dd8866;
}

.skill-damage-card[data-skill-id="ignite"] .effect-damage {
    color: #ff6b35;
}

.skill-damage-card[data-skill-id="ignite"] .effect-description {
    color: #bb7755;
}

/* 点燃施放按钮样式 */
.skill-damage-card[data-skill-id="ignite"] .cast-skill-btn-bottom {
    background: linear-gradient(135deg, #cc6644, #aa5533);
}

.skill-damage-card[data-skill-id="ignite"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #aa5533, #994422);
}

/* ========================================================== */
/* =================== 火球术特殊样式 =================== */
/* ========================================================== */

/* 火球术详情特殊样式 */
.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details {
    background: linear-gradient(135deg, #2a1a1a 0%, #281515 100%);
    border: 1px solid rgba(255, 100, 50, 0.2);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details h4 {
    color: #ff6b47;
    text-shadow: 0 0 2px rgba(255, 100, 50, 0.2);
    border-bottom-color: rgba(255, 100, 50, 0.3);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .property-item {
    background: rgba(255, 100, 50, 0.08);
    border: 1px solid rgba(255, 100, 50, 0.15);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .property-value {
    color: #ff6b47;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .scaling-item {
    background: rgba(255, 100, 50, 0.12);
    border-color: rgba(255, 100, 50, 0.4);
    color: #ff6b47;
    text-shadow: none;
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .effect-name {
    color: #ff6b47;
    text-shadow: 0 0 3px rgba(255, 100, 50, 0.3);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .multi-damage-effect {
    border: 1px solid rgba(255, 100, 50, 0.2);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .multi-damage-effect:hover {
    background: rgba(255, 100, 50, 0.1);
    border-color: rgba(255, 100, 50, 0.4);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .multi-damage-effect.selected {
    background: rgba(255, 100, 50, 0.15);
    border-color: rgba(255, 100, 50, 0.6);
    box-shadow: 0 0 8px rgba(255, 100, 50, 0.2);
}

.skill-damage-card[data-skill-id="fireball"] .offensive-skill-details .damage-calculation {
    border-top-color: rgba(255, 100, 50, 0.3);
}

/* ========================================================== */
/* =================== 法师伤害类型样式 =================== */
/* ========================================================== */

/* 燃烧伤害颜色 - 黄色 */
.burn-damage {
    color: #ffcc44 !important;
}

/* 爆裂伤害颜色 */
.explosion-damage {
    color: #ff7744 !important;
    text-shadow: 0 0 4px rgba(255, 119, 68, 0.4);
    font-weight: 700;
}

.explosion-aoe-damage {
    color: #dd6633 !important;
    text-shadow: 0 0 4px rgba(221, 102, 51, 0.4);
    font-weight: 700;
}

.explosion-burn-damage {
    color: #cc5522 !important;
    text-shadow: 0 0 4px rgba(204, 85, 34, 0.4);
    font-weight: 700;
}

/* 连环闪电伤害颜色 */
.chain-lightning-damage {
    color: #6699ff !important;
    text-shadow: 0 0 4px rgba(102, 153, 255, 0.4);
    font-weight: 700;
}

.chain-lightning-bounce-damage {
    color: #5588dd !important;
    text-shadow: 0 0 4px rgba(85, 136, 221, 0.4);
    font-weight: 700;
}

.chain-lightning-shock-damage {
    color: #4477cc !important;
    text-shadow: 0 0 4px rgba(68, 119, 204, 0.4);
    font-weight: 700;
}

/* 魔法飞弹伤害颜色 */
/* 奥术单发伤害颜色 - 紫色 */
.arcane-damage {
    color: #9966ff !important;
}

/* 奥术总伤害颜色 - 亮紫色 */
.arcane-total-damage {
    color: #bb88ff !important;
}

/* 冰霜伤害颜色 - 深冰蓝色 */
.frost-damage {
    color: #66ddff !important;
}

/* 冰元素伤害样式 - 蓝色冰霜主题 */
.ice-damage,
.effect-tab .ice-damage,
.damage-value.ice-damage,
.effect-tab .damage-value.ice-damage {
    color: #44ccff !important;
    text-shadow: 0 0 4px rgba(68, 204, 255, 0.4) !important;
    font-weight: 700 !important;
}

/* 闪电元素伤害样式 - 蓝色闪电主题 */
.lightning-damage,
.effect-tab .lightning-damage,
.damage-value.lightning-damage,
.effect-tab .damage-value.lightning-damage {
    color: #4496ff !important;
    text-shadow: 0 0 4px rgba(68, 150, 255, 0.5) !important;
    font-weight: 700 !important;
}

/* 感电效果样式 - 蓝色闪电主题 */
.electrified-effect,
.effect-tab .electrified-effect,
.damage-value.electrified-effect,
.effect-tab .damage-value.electrified-effect {
    color: #5aa7ff !important;
    text-shadow: 0 0 4px rgba(90, 167, 255, 0.4) !important;
    font-weight: 700 !important;
}

/* ========================================================== */
/* =================== 融化技能特殊样式 =================== */
/* ========================================================== */

/* 融化技能图标大小 */
.skill-damage-card[data-skill-id="melt_buff"] .skill-icon {
    width: 100px !important;
    height: 100px !important;
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}