/* ========================================================== */
/* =================== 吟游诗人技能样式 =================== */
/* ========================================================== */

/* ========== 通用吟游诗人增益技能样式 ========== */
/* 勇气之歌和虚弱尖叫通用基础样式 */
.skill-damage-card[data-skill-id="ballad_of_courage"],
.skill-damage-card[data-skill-id="shriek_of_weakness"] {
    position: relative;
}

.skill-damage-card[data-skill-id="ballad_of_courage"]:before,
.skill-damage-card[data-skill-id="shriek_of_weakness"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

/* 增益技能激活状态通用动画 - 已删除，使用通用绿色主题 */

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

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

/* 黑暗喧嚣的详细计算流程卡片橙色主题 */
.skill-damage-card[data-skill-id="din_of_darkness"] .skill-damage-header {
    background: rgba(255, 136, 68, 0.05);
}

.skill-damage-card[data-skill-id="din_of_darkness"] .multi-damage-effect.selected {
    background: rgba(255, 136, 68, 0.15);
    border-color: rgba(255, 136, 68, 0.5);
}

.skill-damage-card[data-skill-id="din_of_darkness"] .multi-damage-effect.selected:hover {
    background: rgba(255, 136, 68, 0.2);
    border-color: rgba(255, 136, 68, 0.7);
}

/* 激昂旋律特殊样式 - 淡红色主题 */
.skill-damage-card[data-skill-id="rousing_rhythms"] {
    background: linear-gradient(135deg, #2a1a1f 0%, #3a2530 50%, #2a1a1f 100%);
    border: 2px solid #5a3a4a;
}

.skill-damage-card[data-skill-id="rousing_rhythms"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 158, 200, 0.08) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.skill-damage-card[data-skill-id="rousing_rhythms"]:hover {
    border: 2px solid #ff9ec8;
    box-shadow: 0 6px 20px rgba(255, 158, 200, 0.25), 0 0 15px rgba(255, 158, 200, 0.15);
    transform: translateY(-2px) translateZ(0);
}

/* 激昂旋律的详细计算流程卡片淡红色主题 */
.skill-damage-card[data-skill-id="rousing_rhythms"] .skill-damage-header {
    background: rgba(255, 158, 200, 0.05);
}

.skill-damage-card[data-skill-id="rousing_rhythms"] .multi-damage-effect.selected {
    background: rgba(255, 158, 200, 0.15);
    border-color: rgba(255, 158, 200, 0.5);
}

.skill-damage-card[data-skill-id="rousing_rhythms"] .multi-damage-effect.selected:hover {
    background: rgba(255, 158, 200, 0.2);
    border-color: rgba(255, 158, 200, 0.7);
}

/* 激昂旋律多重持续时间效果样式 */
.multi-duration-effects {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 158, 200, 0.3);
}

.multi-duration-effects h5 {
    margin: 0 0 10px 0;
    color: #ff9ec8;
    font-size: 14px;
    font-weight: 600;
}

.multi-duration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.multi-duration-effect {
    background: rgba(255, 158, 200, 0.1);
    border: 1px solid rgba(255, 158, 200, 0.3);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.multi-duration-effect:hover {
    background: rgba(255, 158, 200, 0.2);
    border-color: rgba(255, 158, 200, 0.5);
    transform: translateY(-1px);
}

.multi-duration-effect.selected {
    background: rgba(255, 158, 200, 0.25);
    border-color: rgba(255, 158, 200, 0.6);
    box-shadow: 0 2px 8px rgba(255, 158, 200, 0.3);
}

.duration-level {
    font-weight: 600;
    color: #ff9ec8;
    font-size: 12px;
    margin-bottom: 4px;
}

.duration-time {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.duration-desc {
    font-size: 11px;
    color: #cccccc;
    line-height: 1.2;
}

/* 激昂旋律增益效果文本样式 */
.rousing-rhythms-boost {
    color: #ff9ec8;
    font-weight: 600;
    padding: 2px 6px;
}

/* 轻快节拍增益效果文本样式 */
.lively-beat-boost {
    color: #ff9ec8;
    font-weight: 600;
    padding: 2px 6px;
}

/* 快板、渐速音、轻快的旋律、和谐之盾 增益效果文本样式 */
.quick-tempo-boost {
    color: #ff9ec8;
    font-weight: 600;
    padding: 2px 6px;
}
.accelerando-boost {
    color: #ff9ec8;
    font-weight: 600;
    padding: 2px 6px;
}
.brisk-melody-boost {
    color: #ffd700;
    font-weight: 600;
    padding: 2px 6px;
}
.harmonic-shield-boost {
    color: #90ee90;
    font-weight: 600;
    padding: 2px 6px;
}

/* 激昂旋律施放按钮特殊样式 - 未激活时淡红色 */
.skill-damage-card[data-skill-id="rousing_rhythms"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #4a2a3a, #5a3a4a);
    border: 1px solid #7a5a6a;
    color: #ff9ec8;
}

.skill-damage-card[data-skill-id="rousing_rhythms"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #5a3a4a, #6a4a5a);
    border: 1px solid #ff9ec8;
    box-shadow: 0 4px 8px rgba(255, 158, 200, 0.25);
}

/* 激昂旋律技能详情区域样式 */
.skill-damage-card[data-skill-id="rousing_rhythms"] .buff-skill-details {
    background: linear-gradient(135deg, #1f1a1f 0%, #2a1f25 100%);
    border: 1px solid rgba(255, 158, 200, 0.15);
}

/* 激昂旋律激活状态样式 - 已删除，使用通用绿色主题 */

/* ========== 吟游诗人轻快节拍技能样式 - 淡红色主题(鼓) ========== */
.skill-damage-card[data-skill-id="lively_beat"] {
    background: linear-gradient(135deg, #2a1a1f 0%, #3a2530 50%, #2a1a1f 100%);
    border: 2px solid #5a3a4a;
}

.skill-damage-card[data-skill-id="lively_beat"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 158, 200, 0.08) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.skill-damage-card[data-skill-id="lively_beat"]:hover {
    border: 2px solid #ff9ec8;
    box-shadow: 0 6px 20px rgba(255, 158, 200, 0.25), 0 0 15px rgba(255, 158, 200, 0.15);
    transform: translateY(-2px) translateZ(0);
}

.skill-damage-card[data-skill-id="lively_beat"] .skill-damage-header {
    background: rgba(255, 158, 200, 0.05);
}

.skill-damage-card[data-skill-id="lively_beat"] .multi-duration-effect.selected {
    background: rgba(255, 158, 200, 0.15);
    border-color: rgba(255, 158, 200, 0.5);
}

.skill-damage-card[data-skill-id="lively_beat"] .multi-duration-effect.selected:hover {
    background: rgba(255, 158, 200, 0.2);
    border-color: rgba(255, 158, 200, 0.7);
}

.skill-damage-card[data-skill-id="lively_beat"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #4a2a3a, #5a3a4a);
    border: 1px solid #7a5a6a;
    color: #ff9ec8;
}

.skill-damage-card[data-skill-id="lively_beat"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #5a3a4a, #6a4a5a);
    border: 1px solid #ff9ec8;
    box-shadow: 0 4px 8px rgba(255, 158, 200, 0.25);
}

.skill-damage-card[data-skill-id="lively_beat"] .buff-skill-details {
    background: linear-gradient(135deg, #1f1a1f 0%, #2a1f25 100%);
    border: 1px solid rgba(255, 158, 200, 0.15);
}

/* 轻快节拍激活状态样式 - 已删除，使用通用绿色主题 */

/* ========== 吟游诗人快板技能样式 - 淡红色主题(鼓) ========== */
.skill-damage-card[data-skill-id="quick_tempo"] {
    background: linear-gradient(135deg, #2a1a1f 0%, #3a2530 50%, #2a1a1f 100%);
    border: 2px solid #5a3a4a;
}

.skill-damage-card[data-skill-id="quick_tempo"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 158, 200, 0.08) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.skill-damage-card[data-skill-id="quick_tempo"]:hover {
    border: 2px solid #ff9ec8;
    box-shadow: 0 6px 20px rgba(255, 158, 200, 0.25), 0 0 15px rgba(255, 158, 200, 0.15);
    transform: translateY(-2px) translateZ(0);
}

.skill-damage-card[data-skill-id="quick_tempo"] .skill-damage-header {
    background: rgba(255, 158, 200, 0.05);
}

.skill-damage-card[data-skill-id="quick_tempo"] .multi-duration-effect.selected {
    background: rgba(255, 158, 200, 0.15);
    border-color: rgba(255, 158, 200, 0.5);
}

.skill-damage-card[data-skill-id="quick_tempo"] .multi-duration-effect.selected:hover {
    background: rgba(255, 158, 200, 0.2);
    border-color: rgba(255, 158, 200, 0.7);
}

.skill-damage-card[data-skill-id="quick_tempo"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #4a2a3a, #5a3a4a);
    border: 1px solid #7a5a6a;
    color: #ff9ec8;
}

.skill-damage-card[data-skill-id="quick_tempo"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #5a3a4a, #6a4a5a);
    border: 1px solid #ff9ec8;
    box-shadow: 0 4px 8px rgba(255, 158, 200, 0.25);
}

.skill-damage-card[data-skill-id="quick_tempo"] .buff-skill-details {
    background: linear-gradient(135deg, #1f1a1f 0%, #2a1f25 100%);
    border: 1px solid rgba(255, 158, 200, 0.15);
}

/* 快板激活状态样式 - 已删除，使用通用绿色主题 */

/* ========== 吟游诗人渐速音技能样式 - 淡红色主题(鼓) ========== */
.skill-damage-card[data-skill-id="accelerando"] {
    background: linear-gradient(135deg, #2a1a1f 0%, #3a2530 50%, #2a1a1f 100%);
    border: 2px solid #5a3a4a;
}

.skill-damage-card[data-skill-id="accelerando"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 158, 200, 0.08) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.skill-damage-card[data-skill-id="accelerando"]:hover {
    border: 2px solid #ff9ec8;
    box-shadow: 0 6px 20px rgba(255, 158, 200, 0.25), 0 0 15px rgba(255, 158, 200, 0.15);
    transform: translateY(-2px) translateZ(0);
}

.skill-damage-card[data-skill-id="accelerando"] .skill-damage-header {
    background: rgba(255, 158, 200, 0.05);
}

.skill-damage-card[data-skill-id="accelerando"] .multi-duration-effect.selected {
    background: rgba(255, 158, 200, 0.15);
    border-color: rgba(255, 158, 200, 0.5);
}

.skill-damage-card[data-skill-id="accelerando"] .multi-duration-effect.selected:hover {
    background: rgba(255, 158, 200, 0.2);
    border-color: rgba(255, 158, 200, 0.7);
}

.skill-damage-card[data-skill-id="accelerando"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #4a2a3a, #5a3a4a);
    border: 1px solid #7a5a6a;
    color: #ff9ec8;
}

.skill-damage-card[data-skill-id="accelerando"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #5a3a4a, #6a4a5a);
    border: 1px solid #ff9ec8;
    box-shadow: 0 4px 8px rgba(255, 158, 200, 0.25);
}

.skill-damage-card[data-skill-id="accelerando"] .buff-skill-details {
    background: linear-gradient(135deg, #1f1a1f 0%, #2a1f25 100%);
    border: 1px solid rgba(255, 158, 200, 0.15);
}

/* 渐速音激活状态样式 - 已删除，使用通用绿色主题 */

/* ========== 吟游诗人轻快的旋律技能样式 - 黄色主题(鲁特琴) ========== */
.skill-damage-card[data-skill-id="brisk_melody"] {
    background: linear-gradient(135deg, #2a251a 0%, #3a3020 50%, #2a251a 100%);
    border: 2px solid #5a4a2a;
}
.skill-damage-card[data-skill-id="brisk_melody"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}
.skill-damage-card[data-skill-id="brisk_melody"]:hover {
    border: 2px solid #ffd700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25), 0 0 15px rgba(255, 215, 0, 0.15);
    transform: translateY(-2px) translateZ(0);
}
.skill-damage-card[data-skill-id="brisk_melody"] .skill-damage-header {
    background: rgba(255, 215, 0, 0.05);
}
.skill-damage-card[data-skill-id="brisk_melody"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #4a3a2a, #5a4a3a);
    border: 1px solid #7a6a4a;
    color: #ffd700;
}
.skill-damage-card[data-skill-id="brisk_melody"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #5a4a3a, #6a5a4a);
    border: 1px solid #ffd700;
}
.skill-damage-card[data-skill-id="brisk_melody"] .buff-skill-details {
    background: linear-gradient(135deg, #1f1a15 0%, #2a2015 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
}

/* 轻快的旋律激活状态样式 - 已删除，使用通用绿色主题 */

/* ========== 吟游诗人和谐之盾技能样式 - 浅绿色主题(里拉琴) ========== */
.skill-damage-card[data-skill-id="harmonic_shield"] {
    background: linear-gradient(135deg, #1a1f1a 0%, #2a2f2a 50%, #1a1f1a 100%);
    border: 2px solid #4a5a4a;
}
.skill-damage-card[data-skill-id="harmonic_shield"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(144, 238, 144, 0.08) 0%, transparent 50%);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}
.skill-damage-card[data-skill-id="harmonic_shield"]:hover {
    border: 2px solid #90ee90;
    box-shadow: 0 6px 20px rgba(144, 238, 144, 0.25), 0 0 15px rgba(144, 238, 144, 0.15);
    transform: translateY(-2px) translateZ(0);
}
.skill-damage-card[data-skill-id="harmonic_shield"] .skill-damage-header {
    background: rgba(144, 238, 144, 0.05);
}
.skill-damage-card[data-skill-id="harmonic_shield"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #3a4a3a, #4a5a4a);
    border: 1px solid #6a7a6a;
    color: #90ee90;
}
.skill-damage-card[data-skill-id="harmonic_shield"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #4a5a4a, #5a6a5a);
    border: 1px solid #90ee90;
}
.skill-damage-card[data-skill-id="harmonic_shield"] .buff-skill-details {
    background: linear-gradient(135deg, #1a1f1a 0%, #2a2f1a 100%);
    border: 1px solid rgba(144, 238, 144, 0.15);
}

/* 和谐之盾激活状态样式 - 已删除，使用通用绿色主题 */

.skill-damage-card[data-skill-id="rousing_rhythms"] .effect-item {
    color: #efe6e6;
}

.skill-damage-card[data-skill-id="rousing_rhythms"] .effect-item i {
    color: #ff9ec8;
}

/* 增益技能效果文本样式 */
.ballad-courage-boost {
    color: #90ee90;
    font-weight: 600;
    padding: 2px 6px;
}

.shriek-weakness-boost {
    color: #dda0dd;
    font-weight: 600;
    padding: 2px 6px;
}




/* 响应式设计 */
@media (max-width: 768px) {
    .multi-duration-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ========== 吟游诗人勇气之歌技能样式 - 浅绿色主题 ========== */
/* 勇气之歌特定颜色样式 */
.skill-damage-card[data-skill-id="ballad_of_courage"] {
    background: linear-gradient(135deg, #1a1f1a 0%, #2a2f2a 50%, #1a1f1a 100%);
    border: 2px solid #4a5a4a;
}

.skill-damage-card[data-skill-id="ballad_of_courage"]:before {
    background: radial-gradient(circle at 30% 40%, rgba(144, 238, 144, 0.08) 0%, transparent 50%);
}

.skill-damage-card[data-skill-id="ballad_of_courage"]:hover {
    border: 2px solid #90ee90;
    box-shadow: 0 6px 20px rgba(144, 238, 144, 0.25), 0 0 15px rgba(144, 238, 144, 0.15);
    transform: translateY(-2px) translateZ(0);
}

/* 勇气之歌激活状态样式 - 已删除，使用通用绿色主题 */

/* 勇气之歌增益信息样式 */
.skill-damage-card[data-skill-id="ballad_of_courage"] .buff-info .buff-effect {
    color: #90ee90;
}

.skill-damage-card[data-skill-id="ballad_of_courage"] .buff-info .buff-duration {
    color: #7acc7a;
}

/* 勇气之歌施放按钮特殊样式 - 未激活时浅绿色 */
.skill-damage-card[data-skill-id="ballad_of_courage"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #3a4a3a, #4a5a4a);
    border: 1px solid #6a7a6a;
    color: #90ee90;
}

.skill-damage-card[data-skill-id="ballad_of_courage"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #4a5a4a, #5a6a5a);
    border: 1px solid #90ee90;
}

/* 勇气之歌技能详情区域样式 */
.skill-damage-card[data-skill-id="ballad_of_courage"] .buff-skill-details {
    background: linear-gradient(135deg, #1a1f1a 0%, #2a2f1a 100%);
}

/* ========== 吟游诗人虚弱尖叫技能样式 - 浅紫色主题 ========== */
/* 虚弱尖叫特定颜色样式 */
.skill-damage-card[data-skill-id="shriek_of_weakness"] {
    background: linear-gradient(135deg, #1f1a1f 0%, #2f2a2f 50%, #1f1a1f 100%);
    border: 2px solid #5a4a5a;
}

.skill-damage-card[data-skill-id="shriek_of_weakness"]:before {
    background: radial-gradient(circle at 30% 40%, rgba(221, 160, 221, 0.08) 0%, transparent 50%);
}

.skill-damage-card[data-skill-id="shriek_of_weakness"]:hover {
    border: 2px solid #dda0dd;
    box-shadow: 0 6px 20px rgba(221, 160, 221, 0.25), 0 0 15px rgba(221, 160, 221, 0.15);
    transform: translateY(-2px) translateZ(0);
}

/* 虚弱尖叫激活状态样式 - 已删除，使用通用绿色主题 */

/* 虚弱尖叫增益信息样式 */
.skill-damage-card[data-skill-id="shriek_of_weakness"] .buff-info .buff-effect {
    color: #dda0dd;
}

.skill-damage-card[data-skill-id="shriek_of_weakness"] .buff-info .buff-duration {
    color: #cc7acc;
}

/* 虚弱尖叫施放按钮特殊样式 - 未激活时浅紫色 */
.skill-damage-card[data-skill-id="shriek_of_weakness"] .cast-skill-btn-bottom:not(.buff-active-btn) {
    background: linear-gradient(135deg, #4a3a4a, #5a4a5a);
    border: 1px solid #7a6a7a;
    color: #dda0dd;
}

.skill-damage-card[data-skill-id="shriek_of_weakness"] .cast-skill-btn-bottom:not(.buff-active-btn):hover {
    background: linear-gradient(135deg, #5a4a5a, #6a5a6a);
    border: 1px solid #dda0dd;
}

/* 虚弱尖叫技能详情区域样式 */
.skill-damage-card[data-skill-id="shriek_of_weakness"] .buff-skill-details {
    background: linear-gradient(135deg, #1f1a1f 0%, #2f1a2f 100%);
}

/* ========== 吟游诗人尖锐刺耳技能样式 - 深紫色主题 ========== */
.skill-damage-card[data-skill-id="piercing_shrill"] {
    background: linear-gradient(135deg, #2a1e3a 0%, #3a2a4a 50%, #2a1e3a 100%);
    border: 2px solid #4a3a5a;
    position: relative;
    overflow: hidden;
}

.skill-damage-card[data-skill-id="piercing_shrill"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(153, 102, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(187, 136, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

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

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

/* 尖锐刺耳头部特殊样式 */
.skill-damage-card[data-skill-id="piercing_shrill"] .skill-damage-header {
    background: rgba(153, 102, 255, 0.08);
    position: relative;
    z-index: 2;
}

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

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

/* 尖锐刺耳英文名称特殊颜色 */
.skill-damage-card[data-skill-id="piercing_shrill"] .skill-english-name {
    color: #9966ff;
    text-shadow: none;
}

/* 尖锐刺耳伤害框架特殊样式 - 紫色主题 */
.skill-damage-card[data-skill-id="piercing_shrill"] .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="piercing_shrill"] .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="piercing_shrill"] .damage-label {
    color: #aa77ff !important;
    text-shadow: none;
}

/* 尖锐刺耳效果标签特殊样式 */
.skill-damage-card[data-skill-id="piercing_shrill"] .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="piercing_shrill"] .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="piercing_shrill"] .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="piercing_shrill"] .effect-tab .damage-value {
    color: #bb88ff !important;
    text-shadow: 0 0 4px rgba(153, 102, 255, 0.3);
}

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

/* 尖锐刺耳多重伤害效果样式 */
.skill-damage-card[data-skill-id="piercing_shrill"] .effect-item {
    background: rgba(153, 102, 255, 0.08);
    border: 1px solid rgba(153, 102, 255, 0.25);
    transition: all 0.3s ease;
}

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

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

/* 尖锐刺耳详细计算流程样式 */
.skill-damage-card[data-skill-id="piercing_shrill"] .damage-calculation-details {
    background: linear-gradient(135deg, #2a1e3a 0%, #3a2a4a 100%);
    border: 1px solid rgba(153, 102, 255, 0.3);
}

.skill-damage-card[data-skill-id="piercing_shrill"] .calculation-step {
    background: rgba(153, 102, 255, 0.05);
    border-left: 3px solid #9966ff;
}

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

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

/* 特殊效果颜色样式 */
.special-effect {
    color: #cc99ff;
    font-weight: 500;
}