/* ==================== 武功光影特效系统 ==================== */

/* 特效强度变量 - 由JS动态设置 */
.skill-effect {
    --effect-intensity: 1;
    --scale-factor: calc(0.8 + var(--effect-intensity) * 0.2);
    --glow-factor: calc(10px * var(--effect-intensity));
    --duration-factor: calc(1s / var(--effect-intensity));
}

/* 特效层基础样式 */
.effect-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

/* 特效元素基础 */
.skill-effect {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ==================== 降龙十八掌 - 金龙特效 ==================== */
.effect-dragon {
    width: 200px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dragon-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 215, 0, 0.3) 20%,
        rgba(255, 215, 0, 0.8) 50%,
        rgba(255, 140, 0, 1) 80%,
        transparent 100%
    );
    clip-path: polygon(
        0% 50%, 15% 20%, 30% 45%, 45% 25%, 
        60% 40%, 75% 30%, 90% 45%, 100% 50%,
        90% 55%, 75% 70%, 60% 60%, 45% 75%,
        30% 55%, 15% 80%, 0% 50%
    );
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 140, 0, 0.6),
        0 0 90px rgba(255, 69, 0, 0.4);
    animation: dragonRush 0.8s ease-out forwards;
}

.dragon-head {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ffd700 0%, #ff8c00 50%, #ff4500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 
        0 0 40px #ffd700,
        0 0 80px #ff8c00,
        inset -5px -5px 20px rgba(0,0,0,0.3);
    animation: dragonHead 0.8s ease-out forwards;
}

.dragon-head::before,
.dragon-head::after {
    content: '';
    position: absolute;
    background: #ff4500;
    border-radius: 50%;
}

.dragon-head::before {
    width: 8px;
    height: 12px;
    top: 15px;
    left: 15px;
    box-shadow: 15px 0 0 #ff4500;
}

.dragon-head::after {
    width: 20px;
    height: 8px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes dragonRush {
    0% {
        transform: translate(-150%, -50%) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(50%, -50%) scale(1.2);
        opacity: 0;
    }
}

@keyframes dragonHead {
    0% {
        transform: translateY(-50%) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) scale(1.5);
        opacity: 0;
    }
}

/* ==================== 六脉神剑 - 六道剑气 ==================== */
.effect-sword-qi {
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sword-beam {
    position: absolute;
    width: 150px;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(0, 255, 255, 0.5) 20%,
        rgba(0, 255, 255, 1) 50%,
        rgba(135, 206, 250, 0.8) 80%,
        transparent
    );
    border-radius: 2px;
    box-shadow: 
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px rgba(0, 255, 255, 0.5);
    transform-origin: left center;
}

.sword-beam:nth-child(1) { animation: swordBeam1 0.6s ease-out forwards; }
.sword-beam:nth-child(2) { animation: swordBeam2 0.6s ease-out 0.1s forwards; }
.sword-beam:nth-child(3) { animation: swordBeam3 0.6s ease-out 0.2s forwards; }
.sword-beam:nth-child(4) { animation: swordBeam4 0.6s ease-out 0.3s forwards; }
.sword-beam:nth-child(5) { animation: swordBeam5 0.6s ease-out 0.4s forwards; }
.sword-beam:nth-child(6) { animation: swordBeam6 0.6s ease-out 0.5s forwards; }

@keyframes swordBeam1 {
    0% { transform: rotate(0deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(0deg) scaleX(1.5); opacity: 0; }
}

@keyframes swordBeam2 {
    0% { transform: rotate(30deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(30deg) scaleX(1.5); opacity: 0; }
}

@keyframes swordBeam3 {
    0% { transform: rotate(60deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(60deg) scaleX(1.5); opacity: 0; }
}

@keyframes swordBeam4 {
    0% { transform: rotate(90deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(90deg) scaleX(1.5); opacity: 0; }
}

@keyframes swordBeam5 {
    0% { transform: rotate(120deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(120deg) scaleX(1.5); opacity: 0; }
}

@keyframes swordBeam6 {
    0% { transform: rotate(150deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(150deg) scaleX(1.5); opacity: 0; }
}

/* ==================== 太极拳 - 阴阳太极 ==================== */
.effect-taiji {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.taiji-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.9) 0deg 180deg,
        rgba(0, 0, 0, 0.9) 180deg 360deg
    );
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.5),
        0 0 60px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(255, 255, 255, 0.3);
    animation: taijiSpin 1s ease-out forwards;
}

.taiji-circle::before,
.taiji-circle::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.taiji-circle::before {
    width: 50%;
    height: 50%;
    background: white;
    top: 0;
    left: 25%;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.taiji-circle::after {
    width: 50%;
    height: 50%;
    background: black;
    bottom: 0;
    left: 25%;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.3);
}

.taiji-dot-white,
.taiji-dot-black {
    position: absolute;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    z-index: 10;
}

.taiji-dot-white {
    background: white;
    top: 15%;
    left: 40%;
}

.taiji-dot-black {
    background: black;
    bottom: 15%;
    left: 40%;
}

@keyframes taijiSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg) scale(1.5);
        opacity: 0;
    }
}

/* ==================== 九阴白骨爪 - 鬼爪特效 ==================== */
.effect-claw {
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.claw-mark {
    position: absolute;
    width: 120px;
    height: 30px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(138, 43, 226, 0.8) 30%,
        rgba(75, 0, 130, 1) 70%,
        transparent
    );
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(138, 43, 226, 0.8),
        0 0 40px rgba(75, 0, 130, 0.6);
}

.claw-mark:nth-child(1) {
    top: 20%;
    left: 10%;
    transform: rotate(-30deg);
    animation: clawSwipe1 0.5s ease-out forwards;
}

.claw-mark:nth-child(2) {
    top: 40%;
    left: 5%;
    transform: rotate(-15deg);
    animation: clawSwipe2 0.5s ease-out 0.1s forwards;
}

.claw-mark:nth-child(3) {
    top: 60%;
    left: 10%;
    transform: rotate(0deg);
    animation: clawSwipe3 0.5s ease-out 0.2s forwards;
}

.claw-mark:nth-child(4) {
    top: 30%;
    right: 10%;
    transform: rotate(30deg);
    animation: clawSwipe4 0.5s ease-out 0.15s forwards;
}

.claw-mark:nth-child(5) {
    top: 50%;
    right: 5%;
    transform: rotate(15deg);
    animation: clawSwipe5 0.5s ease-out 0.25s forwards;
}

@keyframes clawSwipe1 {
    0% { transform: translateX(-100px) rotate(-30deg) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(50px) rotate(-30deg) scale(1); opacity: 0; }
}

@keyframes clawSwipe2 {
    0% { transform: translateX(-100px) rotate(-15deg) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(50px) rotate(-15deg) scale(1); opacity: 0; }
}

@keyframes clawSwipe3 {
    0% { transform: translateX(-100px) rotate(0deg) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(50px) rotate(0deg) scale(1); opacity: 0; }
}

@keyframes clawSwipe4 {
    0% { transform: translateX(100px) rotate(30deg) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50px) rotate(30deg) scale(1); opacity: 0; }
}

@keyframes clawSwipe5 {
    0% { transform: translateX(100px) rotate(15deg) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50px) rotate(15deg) scale(1); opacity: 0; }
}

/* ==================== 独孤九剑 - 剑影重重 ==================== */
.effect-sword {
    width: 250px;
    height: 250px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sword-slash {
    position: absolute;
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.9) 40%,
        rgba(192, 192, 192, 1) 60%,
        transparent
    );
    border-radius: 2px;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(192, 192, 192, 0.8);
}

.sword-slash:nth-child(1) {
    top: 30%;
    left: 10%;
    transform: rotate(-45deg);
    animation: swordSlash1 0.4s ease-out forwards;
}

.sword-slash:nth-child(2) {
    top: 50%;
    left: 5%;
    transform: rotate(0deg);
    animation: swordSlash2 0.4s ease-out 0.08s forwards;
}

.sword-slash:nth-child(3) {
    top: 70%;
    left: 10%;
    transform: rotate(45deg);
    animation: swordSlash3 0.4s ease-out 0.16s forwards;
}

.sword-slash:nth-child(4) {
    top: 20%;
    right: 10%;
    transform: rotate(-60deg);
    animation: swordSlash4 0.4s ease-out 0.24s forwards;
}

.sword-slash:nth-child(5) {
    top: 60%;
    right: 5%;
    transform: rotate(30deg);
    animation: swordSlash5 0.4s ease-out 0.32s forwards;
}

@keyframes swordSlash1 {
    0% { transform: translateX(-100px) rotate(-45deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(50px) rotate(-45deg) scaleX(1); opacity: 0; }
}

@keyframes swordSlash2 {
    0% { transform: translateX(-100px) rotate(0deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(50px) rotate(0deg) scaleX(1); opacity: 0; }
}

@keyframes swordSlash3 {
    0% { transform: translateX(-100px) rotate(45deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(50px) rotate(45deg) scaleX(1); opacity: 0; }
}

@keyframes swordSlash4 {
    0% { transform: translateX(100px) rotate(-60deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50px) rotate(-60deg) scaleX(1); opacity: 0; }
}

@keyframes swordSlash5 {
    0% { transform: translateX(100px) rotate(30deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50px) rotate(30deg) scaleX(1); opacity: 0; }
}

/* ==================== 寒冰真气 - 冰霜特效 ==================== */
.effect-ice {
    width: 220px;
    height: 220px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ice-crystal {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, 
        rgba(200, 230, 255, 0.9) 0%,
        rgba(135, 206, 250, 0.8) 50%,
        rgba(70, 130, 180, 0.9) 100%
    );
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 
        0 0 20px rgba(135, 206, 250, 0.8),
        0 0 40px rgba(70, 130, 180, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.ice-crystal:nth-child(1) {
    top: 10%;
    left: 20%;
    animation: iceForm1 0.7s ease-out forwards;
}

.ice-crystal:nth-child(2) {
    top: 30%;
    right: 15%;
    animation: iceForm2 0.7s ease-out 0.1s forwards;
}

.ice-crystal:nth-child(3) {
    bottom: 20%;
    left: 15%;
    animation: iceForm3 0.7s ease-out 0.2s forwards;
}

.ice-crystal:nth-child(4) {
    bottom: 30%;
    right: 20%;
    animation: iceForm4 0.7s ease-out 0.3s forwards;
}

.ice-crystal:nth-child(5) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    animation: iceForm5 0.7s ease-out 0.15s forwards;
}

@keyframes iceForm1 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2) rotate(45deg); opacity: 0; }
}

@keyframes iceForm2 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2) rotate(-45deg); opacity: 0; }
}

@keyframes iceForm3 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2) rotate(90deg); opacity: 0; }
}

@keyframes iceForm4 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2) rotate(-90deg); opacity: 0; }
}

@keyframes iceForm5 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ==================== 火焰刀 - 烈焰刀气 ==================== */
.effect-fire-blade {
    width: 200px;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.fire-blade {
    position: absolute;
    width: 180px;
    height: 40px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 69, 0, 0.8) 20%,
        rgba(255, 140, 0, 1) 50%,
        rgba(255, 215, 0, 0.9) 80%,
        transparent
    );
    border-radius: 20px;
    box-shadow: 
        0 0 30px rgba(255, 69, 0, 0.8),
        0 0 60px rgba(255, 140, 0, 0.6),
        0 0 90px rgba(255, 215, 0, 0.4);
    filter: blur(2px);
}

.fire-blade:nth-child(1) {
    top: 20%;
    animation: fireBlade1 0.6s ease-out forwards;
}

.fire-blade:nth-child(2) {
    top: 45%;
    animation: fireBlade2 0.6s ease-out 0.15s forwards;
}

.fire-blade:nth-child(3) {
    top: 70%;
    animation: fireBlade3 0.6s ease-out 0.3s forwards;
}

@keyframes fireBlade1 {
    0% { transform: translateX(-150px) scaleX(0.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(100px) scaleX(1.2); opacity: 0; }
}

@keyframes fireBlade2 {
    0% { transform: translateX(-150px) scaleX(0.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(100px) scaleX(1.2); opacity: 0; }
}

@keyframes fireBlade3 {
    0% { transform: translateX(-150px) scaleX(0.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(100px) scaleX(1.2); opacity: 0; }
}

/* ==================== 毒功 - 毒雾特效 ==================== */
.effect-poison {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.poison-cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(148, 0, 211, 0.8) 0%,
        rgba(75, 0, 130, 0.6) 40%,
        rgba(34, 139, 34, 0.4) 70%,
        transparent 100%
    );
    filter: blur(8px);
}

.poison-cloud:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    animation: poisonSpread1 1s ease-out forwards;
}

.poison-cloud:nth-child(2) {
    width: 80px;
    height: 80px;
    top: 40%;
    right: 15%;
    animation: poisonSpread2 1s ease-out 0.2s forwards;
}

.poison-cloud:nth-child(3) {
    width: 120px;
    height: 120px;
    bottom: 15%;
    left: 20%;
    animation: poisonSpread3 1s ease-out 0.4s forwards;
}

.poison-cloud:nth-child(4) {
    width: 60px;
    height: 60px;
    top: 30%;
    left: 40%;
    animation: poisonSpread4 1s ease-out 0.6s forwards;
}

@keyframes poisonSpread1 {
    0% { transform: scale(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes poisonSpread2 {
    0% { transform: scale(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes poisonSpread3 {
    0% { transform: scale(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes poisonSpread4 {
    0% { transform: scale(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}

/* ==================== 掌风 - 气浪特效 ==================== */
.effect-palm {
    width: 220px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.palm-wave {
    position: absolute;
    width: 200px;
    height: 60px;
    background: radial-gradient(ellipse, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(200, 200, 200, 0.6) 30%,
        rgba(150, 150, 150, 0.3) 60%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(3px);
}

.palm-wave:nth-child(1) {
    top: 15%;
    animation: palmWave1 0.5s ease-out forwards;
}

.palm-wave:nth-child(2) {
    top: 40%;
    animation: palmWave2 0.5s ease-out 0.1s forwards;
}

.palm-wave:nth-child(3) {
    top: 65%;
    animation: palmWave3 0.5s ease-out 0.2s forwards;
}

@keyframes palmWave1 {
    0% { transform: translateX(-150px) scaleY(0.3); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100px) scaleY(1); opacity: 0; }
}

@keyframes palmWave2 {
    0% { transform: translateX(-150px) scaleY(0.3); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100px) scaleY(1); opacity: 0; }
}

@keyframes palmWave3 {
    0% { transform: translateX(-150px) scaleY(0.3); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100px) scaleY(1); opacity: 0; }
}

/* ==================== 指法 - 指劲特效 ==================== */
.effect-finger {
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.finger-beam {
    position: absolute;
    width: 100px;
    height: 6px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 215, 0, 0.8) 30%,
        rgba(255, 140, 0, 1) 70%,
        transparent
    );
    border-radius: 3px;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(255, 140, 0, 0.6);
}

.finger-beam:nth-child(1) {
    top: 25%;
    left: 10%;
    transform: rotate(-20deg);
    animation: fingerShot1 0.4s ease-out forwards;
}

.finger-beam:nth-child(2) {
    top: 45%;
    left: 5%;
    transform: rotate(0deg);
    animation: fingerShot2 0.4s ease-out 0.1s forwards;
}

.finger-beam:nth-child(3) {
    top: 65%;
    left: 10%;
    transform: rotate(20deg);
    animation: fingerShot3 0.4s ease-out 0.2s forwards;
}

@keyframes fingerShot1 {
    0% { transform: translateX(-80px) rotate(-20deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(80px) rotate(-20deg) scaleX(1.5); opacity: 0; }
}

@keyframes fingerShot2 {
    0% { transform: translateX(-80px) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(80px) scaleX(1.5); opacity: 0; }
}

@keyframes fingerShot3 {
    0% { transform: translateX(-80px) rotate(20deg) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(80px) rotate(20deg) scaleX(1.5); opacity: 0; }
}

/* ==================== 暗器 - 飞镖特效 ==================== */
.effect-dart {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dart {
    position: absolute;
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(192, 192, 192, 0.9) 40%,
        rgba(255, 255, 255, 1) 60%,
        transparent
    );
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.dart::before {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 10px solid rgba(192, 192, 192, 0.9);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.dart:nth-child(1) {
    top: 20%;
    left: 10%;
    transform: rotate(15deg);
    animation: dartFly1 0.3s ease-out forwards;
}

.dart:nth-child(2) {
    top: 35%;
    left: 5%;
    transform: rotate(-10deg);
    animation: dartFly2 0.3s ease-out 0.05s forwards;
}

.dart:nth-child(3) {
    top: 50%;
    left: 8%;
    transform: rotate(5deg);
    animation: dartFly3 0.3s ease-out 0.1s forwards;
}

.dart:nth-child(4) {
    top: 65%;
    left: 12%;
    transform: rotate(-20deg);
    animation: dartFly4 0.3s ease-out 0.15s forwards;
}

.dart:nth-child(5) {
    top: 80%;
    left: 6%;
    transform: rotate(25deg);
    animation: dartFly5 0.3s ease-out 0.2s forwards;
}

@keyframes dartFly1 {
    0% { transform: translateX(-100px) rotate(15deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(150px) rotate(15deg); opacity: 0; }
}

@keyframes dartFly2 {
    0% { transform: translateX(-100px) rotate(-10deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(150px) rotate(-10deg); opacity: 0; }
}

@keyframes dartFly3 {
    0% { transform: translateX(-100px) rotate(5deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(150px) rotate(5deg); opacity: 0; }
}

@keyframes dartFly4 {
    0% { transform: translateX(-100px) rotate(-20deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(150px) rotate(-20deg); opacity: 0; }
}

@keyframes dartFly5 {
    0% { transform: translateX(-100px) rotate(25deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(150px) rotate(25deg); opacity: 0; }
}

/* ==================== 通用攻击特效 ==================== */
.effect-hit {
    width: 150px;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hit-flash {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 200, 100, 0.6) 30%,
        transparent 70%
    );
    border-radius: 50%;
    animation: hitFlash 0.3s ease-out forwards;
}

.hit-lines {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hit-line {
    position: absolute;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    left: 50%;
    top: 50%;
    transform-origin: left center;
}

.hit-line:nth-child(1) { transform: rotate(0deg); animation: hitLine 0.3s ease-out forwards; }
.hit-line:nth-child(2) { transform: rotate(45deg); animation: hitLine 0.3s ease-out 0.05s forwards; }
.hit-line:nth-child(3) { transform: rotate(90deg); animation: hitLine 0.3s ease-out 0.1s forwards; }
.hit-line:nth-child(4) { transform: rotate(135deg); animation: hitLine 0.3s ease-out 0.15s forwards; }
.hit-line:nth-child(5) { transform: rotate(180deg); animation: hitLine 0.3s ease-out 0.2s forwards; }
.hit-line:nth-child(6) { transform: rotate(225deg); animation: hitLine 0.3s ease-out 0.25s forwards; }
.hit-line:nth-child(7) { transform: rotate(270deg); animation: hitLine 0.3s ease-out 0.3s forwards; }
.hit-line:nth-child(8) { transform: rotate(315deg); animation: hitLine 0.3s ease-out 0.35s forwards; }

@keyframes hitFlash {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes hitLine {
    0% { transform: scaleX(0); opacity: 1; }
    100% { transform: scaleX(1.5); opacity: 0; }
}

/* ==================== 暴击特效 ==================== */
.effect-crit {
    width: 250px;
    height: 250px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.crit-burst {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 1) 0%,
        rgba(255, 140, 0, 0.8) 20%,
        rgba(255, 69, 0, 0.4) 50%,
        transparent 70%
    );
    border-radius: 50%;
    animation: critBurst 0.5s ease-out forwards;
}

.crit-sparks {
    position: absolute;
    width: 100%;
    height: 100%;
}

.crit-spark {
    position: absolute;
    width: 4px;
    height: 40px;
    background: linear-gradient(to top, #ffd700, transparent);
    left: 50%;
    top: 50%;
    transform-origin: center bottom;
}

.crit-spark:nth-child(1) { transform: rotate(0deg) translateY(-60px); animation: critSpark 0.5s ease-out forwards; }
.crit-spark:nth-child(2) { transform: rotate(30deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.05s forwards; }
.crit-spark:nth-child(3) { transform: rotate(60deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.1s forwards; }
.crit-spark:nth-child(4) { transform: rotate(90deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.15s forwards; }
.crit-spark:nth-child(5) { transform: rotate(120deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.2s forwards; }
.crit-spark:nth-child(6) { transform: rotate(150deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.25s forwards; }
.crit-spark:nth-child(7) { transform: rotate(180deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.3s forwards; }
.crit-spark:nth-child(8) { transform: rotate(210deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.35s forwards; }
.crit-spark:nth-child(9) { transform: rotate(240deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.4s forwards; }
.crit-spark:nth-child(10) { transform: rotate(270deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.45s forwards; }
.crit-spark:nth-child(11) { transform: rotate(300deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.5s forwards; }
.crit-spark:nth-child(12) { transform: rotate(330deg) translateY(-60px); animation: critSpark 0.5s ease-out 0.55s forwards; }

@keyframes critBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes critSpark {
    0% { transform: rotate(var(--rotation, 0deg)) translateY(-60px) scaleY(0); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: rotate(var(--rotation, 0deg)) translateY(-100px) scaleY(1.5); opacity: 0; }
}

/* ==================== 治疗特效 ==================== */
.effect-heal {
    width: 180px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.heal-orb {
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, 
        rgba(144, 238, 144, 1) 0%,
        rgba(50, 205, 50, 0.8) 50%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(144, 238, 144, 0.8);
}

.heal-orb:nth-child(1) {
    left: 20%;
    animation: healRise1 1s ease-out forwards;
}

.heal-orb:nth-child(2) {
    left: 40%;
    animation: healRise2 1s ease-out 0.2s forwards;
}

.heal-orb:nth-child(3) {
    left: 60%;
    animation: healRise3 1s ease-out 0.4s forwards;
}

.heal-orb:nth-child(4) {
    left: 35%;
    animation: healRise4 1s ease-out 0.6s forwards;
}

.heal-orb:nth-child(5) {
    left: 55%;
    animation: healRise5 1s ease-out 0.8s forwards;
}

@keyframes healRise1 {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; }
    100% { bottom: 150px; opacity: 0; transform: scale(1.2); }
}

@keyframes healRise2 {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; }
    100% { bottom: 180px; opacity: 0; transform: scale(1); }
}

@keyframes healRise3 {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; }
    100% { bottom: 160px; opacity: 0; transform: scale(1.3); }
}

@keyframes healRise4 {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; }
    100% { bottom: 140px; opacity: 0; transform: scale(0.9); }
}

@keyframes healRise5 {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; }
    100% { bottom: 170px; opacity: 0; transform: scale(1.1); }
}

/* ==================== 防御特效 ==================== */
.effect-shield {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.shield-bubble {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(100, 149, 237, 0.8);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(100, 149, 237, 0.3) 0%,
        rgba(70, 130, 180, 0.2) 50%,
        transparent 70%
    );
    box-shadow: 
        0 0 30px rgba(100, 149, 237, 0.6),
        inset 0 0 30px rgba(100, 149, 237, 0.3);
    animation: shieldForm 0.6s ease-out forwards;
}

.shield-hex {
    position: absolute;
    width: 40px;
    height: 46px;
    background: rgba(100, 149, 237, 0.6);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 15px rgba(100, 149, 237, 0.8);
}

.shield-hex:nth-child(2) {
    top: 10%;
    left: 30%;
    animation: hexForm1 0.5s ease-out 0.1s forwards;
}

.shield-hex:nth-child(3) {
    top: 10%;
    right: 30%;
    animation: hexForm2 0.5s ease-out 0.2s forwards;
}

.shield-hex:nth-child(4) {
    top: 40%;
    left: 10%;
    animation: hexForm3 0.5s ease-out 0.3s forwards;
}

.shield-hex:nth-child(5) {
    top: 40%;
    right: 10%;
    animation: hexForm4 0.5s ease-out 0.4s forwards;
}

.shield-hex:nth-child(6) {
    bottom: 10%;
    left: 30%;
    animation: hexForm5 0.5s ease-out 0.5s forwards;
}

.shield-hex:nth-child(7) {
    bottom: 10%;
    right: 30%;
    animation: hexForm6 0.5s ease-out 0.6s forwards;
}

@keyframes shieldForm {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

@keyframes hexForm1 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(60deg); opacity: 0; }
}

@keyframes hexForm2 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(-60deg); opacity: 0; }
}

@keyframes hexForm3 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(120deg); opacity: 0; }
}

@keyframes hexForm4 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(-120deg); opacity: 0; }
}

@keyframes hexForm5 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(180deg); opacity: 0; }
}

@keyframes hexForm6 {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(-180deg); opacity: 0; }
}

/* ==================== 闪避特效 ==================== */
.effect-dodge {
    width: 150px;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dodge-ghost {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.3) 0%,
        transparent 70%
    );
    animation: dodgeGhost 0.5s ease-out forwards;
}

.dodge-ghost:nth-child(1) {
    animation: dodgeGhost1 0.5s ease-out forwards;
}

.dodge-ghost:nth-child(2) {
    animation: dodgeGhost2 0.5s ease-out 0.1s forwards;
}

.dodge-ghost:nth-child(3) {
    animation: dodgeGhost3 0.5s ease-out 0.2s forwards;
}

@keyframes dodgeGhost1 {
    0% { transform: translateX(0) scale(1); opacity: 0.8; }
    100% { transform: translateX(-80px) scale(0.5); opacity: 0; }
}

@keyframes dodgeGhost2 {
    0% { transform: translateX(0) scale(0.8); opacity: 0.6; }
    100% { transform: translateX(-60px) scale(0.3); opacity: 0; }
}

@keyframes dodgeGhost3 {
    0% { transform: translateX(0) scale(0.6); opacity: 0.4; }
    100% { transform: translateX(-40px) scale(0.2); opacity: 0; }
}

/* ==================== 特效性能优化 ==================== */
.skill-effect {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少动画复杂度以提升性能 */
@media (prefers-reduced-motion: reduce) {
    .skill-effect,
    .skill-effect * {
        animation-duration: 0.3s !important;
        animation-iteration-count: 1 !important;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .skill-effect {
        transform: scale(0.7);
    }
}

/* ==================== 剑气飞斩特效 ==================== */
.effect-sword-beam {
    width: 100%;
    height: 200px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sword-beam-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 单道剑气 */
.sword-beam-attack {
    position: absolute;
    width: 250px;
    height: 6px;
    left: 50%;
    opacity: 0;
    animation: swordBeamFly 2s ease-out forwards;
}

.sword-beam-attack:nth-child(1) { animation-delay: 0s; }
.sword-beam-attack:nth-child(2) { animation-delay: 0.15s; }
.sword-beam-attack:nth-child(3) { animation-delay: 0.3s; }

/* 剑身 - 细长如剑 */
.sword-beam-attack .beam-core {
    position: absolute;
    width: 65%;
    height: 100%;
    left: 22%;
    background: linear-gradient(90deg,
        rgba(150, 220, 255, 0.3) 0%,
        rgba(200, 240, 255, 0.9) 20%,
        rgba(255, 255, 255, 1) 50%,
        rgba(200, 240, 255, 0.9) 80%,
        rgba(150, 220, 255, 0.3) 100%
    );
    border-radius: 3px;
    box-shadow:
        0 0 10px rgba(200, 240, 255, 1),
        0 0 20px rgba(150, 220, 255, 0.8),
        0 0 30px rgba(100, 200, 255, 0.5);
}

/* 剑刃 - 两侧更亮 */
.sword-beam-attack .beam-edge {
    position: absolute;
    width: 65%;
    height: 1px;
    left: 22%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 1);
}

.sword-beam-attack .beam-edge.top { top: 0; }
.sword-beam-attack .beam-edge.bottom { bottom: 0; }

/* 剑尖 - 锋利的三角形 */
.sword-beam-attack .beam-tip {
    position: absolute;
    width: 30px;
    height: 6px;
    right: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(200, 240, 255, 0.8) 30%,
        transparent 100%
    );
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* 剑柄 - 护手 + 握把 + 剑首 */
.sword-beam-attack .beam-hilt {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 20px;
}

/* 剑首 - 尾端的圆形装饰（最左边） */
.sword-beam-attack .hilt-pommel {
    position: absolute;
    width: 12px;
    height: 12px;
    left: -1px;
    top: -3px;
    background: radial-gradient(circle,
        rgba(255, 230, 150, 1) 0%,
        rgba(255, 200, 80, 1) 30%,
        rgba(220, 160, 40, 0.95) 60%,
        rgba(180, 130, 30, 0.9) 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 12px rgba(255, 200, 80, 1),
        0 0 20px rgba(255, 180, 50, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(200, 150, 50, 0.8);
}

/* 握把 - 手抓住的地方（中间偏左） */
.sword-beam-attack .hilt-grip {
    position: absolute;
    width: 18px;
    height: 22px;
    left: 6px;
    top: -8px;
    background: linear-gradient(90deg,
        rgba(120, 80, 50, 0.95) 0%,
        rgba(160, 110, 70, 1) 25%,
        rgba(190, 140, 100, 1) 50%,
        rgba(160, 110, 70, 1) 75%,
        rgba(120, 80, 50, 0.95) 100%
    );
    border-radius: 4px;
    box-shadow:
        0 0 8px rgba(139, 90, 43, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

/* 握把纹理 - 缠绕的绑带效果 */
.sword-beam-attack .hilt-grip::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    top: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 60, 30, 0.7) 20%,
        rgba(100, 60, 30, 0.7) 80%,
        transparent 100%
    );
}

.sword-beam-attack .hilt-grip::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    top: 14px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 60, 30, 0.7) 20%,
        rgba(100, 60, 30, 0.7) 80%,
        transparent 100%
    );
}

/* 护手 - 保护手的十字形（中间） */
.sword-beam-attack .hilt-guard {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 18px;
    top: -7px;
}

.sword-beam-attack .hilt-guard::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    top: 7.5px;
    background: linear-gradient(90deg,
        rgba(200, 180, 150, 0.9) 0%,
        rgba(240, 220, 190, 1) 30%,
        rgba(255, 240, 220, 1) 50%,
        rgba(240, 220, 190, 1) 70%,
        rgba(200, 180, 150, 0.9) 100%
    );
    border-radius: 2px;
    box-shadow: 
        0 0 10px rgba(240, 220, 190, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.sword-beam-attack .hilt-guard::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    left: 7.5px;
    top: 0;
    background: linear-gradient(180deg,
        rgba(200, 180, 150, 0.9) 0%,
        rgba(240, 220, 190, 1) 30%,
        rgba(255, 240, 220, 1) 50%,
        rgba(240, 220, 190, 1) 70%,
        rgba(200, 180, 150, 0.9) 100%
    );
    border-radius: 2px;
    box-shadow: 
        0 0 10px rgba(240, 220, 190, 0.8),
        2px 0 4px rgba(0, 0, 0, 0.3);
}

/* 剑气拖尾 */
.sword-beam-attack .beam-trail {
    position: absolute;
    width: 150px;
    height: 4px;
    left: -30px;
    top: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(150, 220, 255, 0.3) 30%,
        rgba(200, 240, 255, 0.5) 60%,
        transparent 100%
    );
    filter: blur(2px);
}

/* 剑轨道 - 长轨迹线 */
.sword-beam-attack .beam-orbit {
    position: absolute;
    width: 180px;
    height: 2px;
    left: -40px;
    top: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 200, 255, 0.1) 10%,
        rgba(150, 220, 255, 0.4) 30%,
        rgba(200, 240, 255, 0.6) 50%,
        rgba(150, 220, 255, 0.4) 70%,
        rgba(100, 200, 255, 0.1) 90%,
        transparent 100%
    );
    filter: blur(1px);
}

/* 飞行粒子 */
/* 飞行轨迹 - 从左飞到右 */
@keyframes swordBeamFly {
    0% {
        opacity: 0;
        transform: translateX(-780px);
    }
    5% {
        opacity: 1;
        transform: translateX(-760px);
    }
    85% {
        opacity: 1;
        transform: translateX(180px);
    }
    100% {
        opacity: 0;
        transform: translateX(200px);
    }
}

/* ==================== 仙剑飞升 - 剑气化剑升空特效 ==================== */
.effect-immortal-sword {
    width: 100%;
    height: 200px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.immortal-sword-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 仙剑主体 */
.immortal-sword-fairy {
    position: absolute;
    width: 200px;
    height: 18px;
    left: -800px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    animation: immortalSwordFly 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 剑身 */
.immortal-sword-fairy .fairy-blade {
    position: absolute;
    width: 145px;
    height: 18px;
    left: 25px;
    top: 0;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.95) 0%,
        rgba(240, 250, 255, 1) 15%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 70%,
        rgba(240, 250, 255, 1) 85%,
        rgba(200, 230, 255, 0.95) 100%
    );
    clip-path: polygon(
        0% 15%,
        3% 8%,
        8% 3%,
        15% 0%,
        100% 0%,
        100% 100%,
        15% 100%,
        8% 97%,
        3% 92%,
        0% 85%
    );
    box-shadow:
        0 0 25px rgba(200, 235, 255, 1),
        0 0 50px rgba(150, 200, 255, 0.9),
        0 0 90px rgba(100, 180, 255, 0.7),
        0 0 140px rgba(80, 160, 255, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.9);
}

/* 剑身中心光 */
.immortal-sword-fairy .fairy-blade::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 5%,
        rgba(255, 255, 255, 1) 20%,
        rgba(255, 255, 255, 1) 80%,
        rgba(255, 255, 255, 0.7) 95%,
        transparent 100%
    );
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* 剑身渐变 */
.immortal-sword-fairy .fairy-blade::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.5) 0%,
        transparent 25%,
        transparent 75%,
        rgba(180, 220, 255, 0.4) 100%
    );
}

/* 剑刃上边缘 */
.immortal-sword-fairy .fairy-edge-top {
    position: absolute;
    width: 145px;
    height: 3px;
    left: 25px;
    top: -1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 15%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 85%,
        transparent 100%
    );
    filter: blur(1px);
    box-shadow: 0 0 10px rgba(200, 235, 255, 1);
}

/* 剑刃下边缘 */
.immortal-sword-fairy .fairy-edge-bottom {
    position: absolute;
    width: 145px;
    height: 3px;
    left: 25px;
    bottom: -1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 15%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 85%,
        transparent 100%
    );
    filter: blur(1px);
    box-shadow: 0 0 10px rgba(200, 235, 255, 1);
}

/* 剑尖 */
.immortal-sword-fairy .fairy-tip {
    position: absolute;
    width: 35px;
    height: 18px;
    right: 0;
    top: 0;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.9) 0%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 70%,
        rgba(200, 230, 255, 0.9) 100%
    );
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    filter: drop-shadow(0 0 15px rgba(200, 235, 255, 1));
}

/* 剑尖光晕 */
.immortal-sword-fairy .fairy-tip::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(220, 240, 255, 0.6) 40%,
        rgba(180, 220, 255, 0.3) 70%,
        transparent 100%
    );
    filter: blur(2px);
}

/* 剑尖拖尾 */
.immortal-sword-fairy .fairy-tip::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(200, 235, 255, 0.5) 0%,
        rgba(150, 200, 255, 0.2) 50%,
        transparent 100%
    );
    filter: blur(5px);
}

/* 剑格（护手） */
.immortal-sword-fairy .fairy-guard {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 8px;
    top: -5px;
    background: linear-gradient(135deg,
        rgba(180, 220, 255, 0.9) 0%,
        rgba(220, 240, 255, 1) 25%,
        rgba(255, 255, 255, 1) 50%,
        rgba(220, 240, 255, 1) 75%,
        rgba(180, 220, 255, 0.9) 100%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow:
        0 0 15px rgba(200, 235, 255, 1),
        0 0 30px rgba(150, 200, 255, 0.7),
        inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation: guardGlowImmortal 0.6s ease-in-out infinite;
}

.immortal-sword-fairy .fairy-guard::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.9) 50%,
        rgba(180, 220, 255, 0.5) 100%
    );
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

/* 剑柄 */
.immortal-sword-fairy .fairy-handle {
    position: absolute;
    width: 25px;
    height: 12px;
    left: -15px;
    top: 3px;
    background: linear-gradient(180deg,
        rgba(150, 190, 230, 0.95) 0%,
        rgba(200, 225, 250, 1) 30%,
        rgba(220, 240, 255, 1) 50%,
        rgba(200, 225, 250, 1) 70%,
        rgba(150, 190, 230, 0.95) 100%
    );
    border-radius: 2px;
    box-shadow:
        0 0 10px rgba(150, 200, 255, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.immortal-sword-fairy .fairy-handle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(90deg,
        transparent 0px,
        rgba(255, 255, 255, 0.4) 2px,
        transparent 4px
    );
    border-radius: 2px;
}

/* 剑首（剑柄尾端圆球） */
.immortal-sword-fairy .fairy-pommel {
    position: absolute;
    width: 14px;
    height: 14px;
    left: -22px;
    top: 2px;
    background: radial-gradient(circle at 40% 40%,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.95) 30%,
        rgba(180, 220, 255, 0.9) 60%,
        rgba(150, 200, 255, 0.8) 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(200, 235, 255, 1),
        0 0 30px rgba(150, 200, 255, 0.7);
    animation: pommelGlowImmortal 0.5s ease-in-out infinite;
}

.immortal-sword-fairy .fairy-pommel::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.8) 100%
    );
    border-radius: 50%;
}

/* 剑身符文光点 */
.immortal-sword-fairy .fairy-runes {
    position: absolute;
    width: 130px;
    height: 18px;
    left: 30px;
    top: 0;
    background:
        radial-gradient(ellipse 2px 6px at 15% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 6px at 30% 50%, rgba(220, 240, 255, 0.8), transparent),
        radial-gradient(ellipse 2px 6px at 45% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 6px at 60% 50%, rgba(220, 240, 255, 0.8), transparent),
        radial-gradient(ellipse 2px 6px at 75% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 6px at 90% 50%, rgba(220, 240, 255, 0.7), transparent);
    animation: runesGlowImmortal 0.3s ease-in-out infinite;
}

/* 剑身光晕 */
.immortal-sword-fairy .fairy-aura {
    position: absolute;
    width: 280%;
    height: 100px;
    left: -90%;
    top: -41px;
    background: radial-gradient(ellipse at 55% center,
        rgba(200, 235, 255, 0.7) 0%,
        rgba(150, 200, 255, 0.45) 25%,
        rgba(100, 180, 255, 0.25) 45%,
        rgba(80, 160, 255, 0.1) 60%,
        transparent 75%
    );
    filter: blur(18px);
    animation: auraPulseImmortal 0.4s ease-in-out infinite;
}

/* 外层光晕 */
.immortal-sword-fairy .fairy-outer-glow {
    position: absolute;
    width: 350%;
    height: 140px;
    left: -125%;
    top: -61px;
    background: radial-gradient(ellipse at 50% center,
        rgba(180, 220, 255, 0.4) 0%,
        rgba(150, 200, 255, 0.25) 30%,
        rgba(100, 180, 255, 0.12) 50%,
        transparent 70%
    );
    filter: blur(30px);
    animation: outerGlowPulseImmortal 0.6s ease-in-out infinite;
}

/* 彩虹光效 */
.immortal-sword-fairy .fairy-rainbow {
    position: absolute;
    width: 250%;
    height: 70px;
    left: -75%;
    top: -26px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 220, 0.12) 10%,
        rgba(255, 230, 180, 0.18) 20%,
        rgba(200, 255, 200, 0.12) 30%,
        rgba(180, 230, 255, 0.22) 40%,
        rgba(200, 200, 255, 0.18) 50%,
        rgba(220, 180, 255, 0.12) 60%,
        transparent 70%
    );
    filter: blur(20px);
    animation: rainbowShiftImmortal 2s linear infinite;
}

/* 云雾效果 */
.immortal-sword-fairy .fairy-mist {
    position: absolute;
    width: 400%;
    height: 90px;
    left: -150%;
    top: -36px;
    background: radial-gradient(ellipse at center,
        rgba(220, 240, 255, 0.45) 0%,
        rgba(180, 220, 255, 0.25) 30%,
        rgba(150, 200, 255, 0.12) 55%,
        transparent 75%
    );
    filter: blur(30px);
    animation: mistFloatImmortal 0.8s ease-in-out infinite;
}

/* 飞行粒子 */
.immortal-sword-fairy .fairy-particles {
    position: absolute;
    width: 280%;
    height: 70px;
    left: -90%;
    top: -26px;
    background:
        radial-gradient(ellipse 3px 3px at 35px 10px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 2px at 70px 15px, rgba(220, 240, 255, 0.85), transparent),
        radial-gradient(ellipse 3px 3px at 105px 8px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 2px at 140px 12px, rgba(200, 235, 255, 0.8), transparent),
        radial-gradient(ellipse 3px 3px at 175px 18px, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(ellipse 2px 2px at 210px 6px, rgba(220, 240, 255, 0.85), transparent);
    animation: particleSparkleImmortal 0.35s ease-in-out infinite;
}

/* 星星点缀 */
.immortal-sword-fairy .fairy-stars {
    position: absolute;
    width: 250%;
    height: 50px;
    left: -75%;
    top: -16px;
}

.immortal-sword-fairy .fairy-stars::before {
    content: '✦ ✧ ✦ ✧ ✦ ✧';
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 18px;
    text-shadow:
        0 0 10px rgba(200, 235, 255, 1),
        0 0 20px rgba(150, 200, 255, 0.8);
    animation: starsFloatImmortal 0.6s ease-in-out infinite;
}

.immortal-sword-fairy .fairy-stars::after {
    content: '✧ ✦ ✧ ✦ ✧ ✦';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 10px;
    color: rgba(220, 240, 255, 0.7);
    letter-spacing: 22px;
    text-shadow:
        0 0 8px rgba(200, 235, 255, 0.9),
        0 0 16px rgba(150, 200, 255, 0.6);
    animation: starsFloatImmortal 0.6s ease-in-out infinite reverse;
    animation-delay: 0.3s;
}

/* 剑气拖尾 */
.immortal-sword-fairy .fairy-trail {
    position: absolute;
    width: 400px;
    height: 35px;
    left: -280px;
    top: -8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(180, 220, 255, 0.08) 25%,
        rgba(200, 235, 255, 0.2) 55%,
        rgba(220, 240, 255, 0.4) 80%,
        rgba(200, 235, 255, 0.6) 100%
    );
    filter: blur(18px);
    animation: trailFlowImmortal 0.25s ease-out infinite;
}

/* 能量环 */
.immortal-sword-fairy .fairy-energy-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(200, 235, 255, 0.5);
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(200, 235, 255, 0.6),
        inset 0 0 15px rgba(200, 235, 255, 0.3);
    animation: energyRingExpandImmortal 0.8s ease-out infinite;
}

/* 命中爆炸特效 */
.immortal-sword-impact {
    position: absolute;
    width: 240px;
    height: 240px;
    left: 85%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: immortalImpact 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards;
}

.immortal-sword-impact .impact-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid rgba(200, 235, 255, 0.95);
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(200, 235, 255, 1),
        0 0 100px rgba(150, 200, 255, 0.7),
        0 0 150px rgba(100, 180, 255, 0.4),
        inset 0 0 50px rgba(200, 235, 255, 0.5);
    animation: impactRingExpandImmortal 0.8s ease-out forwards;
}

.immortal-sword-impact .impact-ring-inner {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    border: 3px solid rgba(220, 240, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(220, 240, 255, 0.8);
    animation: impactRingPulseImmortal 0.4s ease-in-out infinite;
}

.immortal-sword-impact .impact-ring-middle {
    position: absolute;
    width: 85%;
    height: 85%;
    left: 7.5%;
    top: 7.5%;
    border: 2px dashed rgba(200, 235, 255, 0.6);
    border-radius: 50%;
    animation: impactRingRotateImmortal 3s linear infinite;
}

.immortal-sword-impact .impact-core {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.9) 20%,
        rgba(180, 220, 255, 0.7) 40%,
        rgba(150, 200, 255, 0.4) 60%,
        transparent 80%
    );
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(255, 255, 255, 1),
        0 0 100px rgba(200, 235, 255, 0.8),
        0 0 150px rgba(150, 200, 255, 0.5);
    animation: impactCorePulseImmortal 0.6s ease-in-out infinite;
}

/* 光芒射线 */
.immortal-sword-impact .impact-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.immortal-sword-impact .impact-rays::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 4px;
    left: -100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 235, 255, 0.8) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(200, 235, 255, 0.8) 70%,
        transparent 100%
    );
    box-shadow:
        0 0 20px rgba(200, 235, 255, 1),
        0 0 40px rgba(150, 200, 255, 0.7);
}

/* 星星爆裂 */
.immortal-sword-impact .impact-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.immortal-sword-impact .impact-stars::before {
    content: '✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧';
    position: absolute;
    width: 100%;
    left: 0;
    top: 20%;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 20px;
    text-shadow:
        0 0 10px rgba(200, 235, 255, 1),
        0 0 20px rgba(150, 200, 255, 0.8);
    animation: impactStarsBurstImmortal 0.8s ease-out forwards;
}

/* ==================== 仙剑飞升动画关键帧 ==================== */

@keyframes guardGlowImmortal {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(200, 235, 255, 1)); }
    50% { filter: drop-shadow(0 0 25px rgba(220, 240, 255, 1)); }
}

@keyframes pommelGlowImmortal {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(200, 235, 255, 1), 0 0 30px rgba(150, 200, 255, 0.7); }
    50% { transform: scale(1.1); box-shadow: 0 0 25px rgba(200, 235, 255, 1), 0 0 50px rgba(150, 200, 255, 0.9); }
}

@keyframes runesGlowImmortal {
    0%, 100% { opacity: 0.5; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.5); }
}

@keyframes auraPulseImmortal {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.8; }
    50% { transform: scaleX(1.12) scaleY(1.15); opacity: 1; }
}

@keyframes outerGlowPulseImmortal {
    0%, 100% { opacity: 0.7; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.1); }
}

@keyframes rainbowShiftImmortal {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(20px); }
}

@keyframes mistFloatImmortal {
    0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
    50% { transform: translateY(-10px) scaleX(1.15) scaleY(1.08); }
}

@keyframes particleSparkleImmortal {
    0%, 100% { opacity: 0.35; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.4); }
}

@keyframes starsFloatImmortal {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
}

@keyframes trailFlowImmortal {
    0% { transform: translateX(15px); opacity: 0.4; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes energyRingExpandImmortal {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes immortalSwordFly {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(-800px) rotate(-25deg) scale(0.3);
        filter: blur(8px) brightness(2);
    }
    10% {
        opacity: 1;
        transform: translateY(-50%) translateX(-700px) rotate(0deg) scale(1);
        filter: blur(0) brightness(1.3);
    }
    15% {
        transform: translateY(-50%) translateX(-600px) rotate(8deg) scale(1.05);
    }
    22% {
        transform: translateY(-50%) translateX(-450px) rotate(-4deg) scale(1);
    }
    30% {
        transform: translateY(-50%) translateX(-300px) rotate(0deg) scale(1);
        filter: blur(0) brightness(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-50%) translateX(100px) rotate(0deg) scale(1);
    }
    85% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(300px) rotate(-8deg) scale(0.6);
        filter: blur(6px) brightness(1.5);
    }
}

@keyframes immortalImpact {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes impactRingExpandImmortal {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0.5; }
}

@keyframes impactRingPulseImmortal {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes impactRingRotateImmortal {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes impactCorePulseImmortal {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

@keyframes impactStarsBurstImmortal {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(2) translateY(-50px); }
}

/* ==================== 火焰刀 - palm_effects完整风格 ==================== */
.effect-huoyan-blade {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 能量核心 - 所有武功通用 */
.effect-huoyan-blade .energy-core {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 100, 1), rgba(255, 80, 0, 0.6), transparent);
    box-shadow: 0 0 40px rgba(255, 120, 0, 0.8), 0 0 80px rgba(255, 60, 0, 0.5);
}

.effect-huoyan-blade .energy-core::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: corePulse 2s ease-in-out infinite;
}

.effect-huoyan-blade .energy-core::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    animation: coreGlow 1.5s ease-in-out infinite alternate;
}

/* 火焰刀形状 */
.effect-huoyan-blade .fire-blade {
    position: absolute;
    width: 80px;
    height: 12px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -6px;
    background: linear-gradient(90deg, transparent, rgba(255, 200, 50, 1), rgba(255, 100, 0, 1), rgba(255, 50, 0, 0.8), transparent);
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    animation: bladePulse 1s ease-in-out infinite;
}

/* 漂浮火星 - fire-spark */
.effect-huoyan-blade .ember {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 200, 1), rgba(255, 180, 80, 0.8));
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 180, 80, 1);
}

.effect-huoyan-blade .fire-spark {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 200, 1), rgba(255, 180, 80, 0.8));
    border-radius: 50%;
    filter: blur(2px);
}

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

@keyframes coreGlow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes bladePulse {
    0%, 100% { transform: scaleX(1) translateX(-50%); filter: blur(2px); }
    50% { transform: scaleX(1.5) translateX(-50%); filter: blur(4px); }
}

@keyframes emberFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-15px) scale(1.3); opacity: 1; }
}

/* ==================== 点击爆发特效样式 ==================== */
.burst-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.energy-burst {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    pointer-events: none;
}

.shockwave {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid;
    border-radius: 50%;
    pointer-events: none;
    animation: shockwaveExpand 1s ease-out forwards;
}

@keyframes burstExpand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

@keyframes shockwaveExpand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

/* ==================== 降龙十八掌 - palm_effects完整风格 ==================== */
.effect-xialong {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 能量核心 */
.effect-xialong .energy-core {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 100, 1), rgba(255, 150, 0, 0.6), transparent);
    box-shadow: 0 0 40px rgba(255, 180, 0, 0.8), 0 0 80px rgba(255, 120, 0, 0.5);
}

.effect-xialong .energy-core::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: corePulse 2s ease-in-out infinite;
}

.effect-xialong .energy-core::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    animation: coreGlow 1.5s ease-in-out infinite alternate;
}

/* 龙爪特效 */
.effect-xialong .dragon-claw-line {
    position: absolute;
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 200, 50, 1), rgba(255, 150, 0, 0.8));
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(255, 180, 0, 0.8);
}

/* 漂浮火星 */
.effect-xialong .ember {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 200, 1), rgba(255, 180, 80, 0.8));
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 180, 80, 1);
}

.effect-xialong .fire-spark {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 200, 1), rgba(255, 180, 80, 0.8));
    border-radius: 50%;
    filter: blur(2px);
}

/* ==================== 绵掌 - palm_effects完整风格 ==================== */
.effect-mianzhang {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 能量核心 - 白色云雾 */
.effect-mianzhang .energy-core {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 240, 220, 0.6), transparent);
    box-shadow: 0 0 40px rgba(255, 250, 240, 0.8), 0 0 80px rgba(255, 230, 200, 0.5);
}

.effect-mianzhang .energy-core::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: corePulse 2s ease-in-out infinite;
}

.effect-mianzhang .energy-core::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    animation: coreGlow 1.5s ease-in-out infinite alternate;
}

/* 云雾效果 */
.effect-mianzhang .cloud-puff {
    position: absolute;
    background: radial-gradient(ellipse, rgba(255, 250, 240, 0.7), transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
}

/* 丝线效果 */
.effect-mianzhang .silk-thread {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.9), transparent);
    left: 50%;
    transform: translateX(-50%);
}

/* ==================== 大金刚掌 - palm_effects完整风格 ==================== */
.effect-jingang {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 能量核心 - 金色佛光 */
.effect-jingang .energy-core {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 240, 180, 1), rgba(255, 200, 80, 0.6), transparent);
    box-shadow: 0 0 40px rgba(255, 230, 150, 0.8), 0 0 80px rgba(255, 180, 50, 0.5);
}

.effect-jingang .energy-core::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: corePulse 2s ease-in-out infinite;
}

.effect-jingang .energy-core::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    animation: coreGlow 1.5s ease-in-out infinite alternate;
}

/* 冰魄掌特效 - 冰蓝色寒冰特效 */
.effect-bingpo {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.effect-bingpo .energy-core {
    position: absolute;
    width: 40%;
    height: 40%;
    left: 30%;
    top: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 220, 255, 0.9) 0%, rgba(100, 180, 255, 0.5) 50%, transparent 70%);
    animation: corePulse 1.2s ease-in-out infinite alternate;
}

.effect-bingpo .core-glow {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 200, 255, 0.6) 0%, transparent 70%);
    animation: coreGlow 1.2s ease-in-out infinite alternate;
}

.effect-bingpo .ice-crystal {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(200, 240, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(150, 220, 255, 0.8);
    animation: crystalFloat 2s ease-in-out infinite;
}

.effect-bingpo .frost-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(180, 230, 255, 0.7);
    border-radius: 50%;
}

.effect-bingpo .ice-wave {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(150, 200, 255, 0.6);
    border-radius: 50%;
}

@keyframes crystalFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
    50% { transform: translateY(-10px) rotate(180deg); opacity: 1; }
}

/* 空明拳特效 - 淡蓝色空灵拳意 */
.effect-kongming {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.effect-kongming .energy-core {
    position: absolute;
    width: 35%;
    height: 35%;
    left: 32.5%;
    top: 32.5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 240, 255, 0.95) 0%, rgba(180, 220, 255, 0.6) 50%, transparent 70%);
    animation: corePulse 1.5s ease-in-out infinite alternate;
}

.effect-kongming .core-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 230, 255, 0.5) 0%, transparent 70%);
    animation: coreGlow 1.5s ease-in-out infinite alternate;
}

.effect-kongming .void-orb {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(230, 245, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(200, 230, 255, 0.8), 0 0 30px rgba(180, 220, 255, 0.5);
}

.effect-kongming .ether-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(210, 235, 255, 0.8);
    border-radius: 50%;
}

.effect-kongming .void-wave {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(200, 230, 255, 0.4);
    border-radius: 50%;
}

@keyframes voidPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 0.4; }
}

/* 分筋错骨特效 - 青绿色劲力特效 */
.effect-fenjing {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.effect-fenjing .energy-core {
    position: absolute;
    width: 30%;
    height: 30%;
    left: 35%;
    top: 35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 255, 180, 0.9) 0%, rgba(80, 200, 120, 0.5) 50%, transparent 70%);
    animation: corePulse 1s ease-in-out infinite alternate;
}

.effect-fenjing .core-glow {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 230, 150, 0.5) 0%, transparent 70%);
    animation: coreGlow 1s ease-in-out infinite alternate;
}

.effect-fenjing .bone-shard {
    position: absolute;
    width: 4px;
    height: 15px;
    background: linear-gradient(to top, rgba(150, 255, 180, 0.9), rgba(80, 200, 120, 0.5));
    border-radius: 2px;
}

.effect-fenjing .tendon-particle {
    position: absolute;
    width: 2px;
    height: 8px;
    background: rgba(130, 230, 160, 0.8);
    border-radius: 1px;
}

.effect-fenjing .crack-wave {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(100, 220, 140, 0.5);
    border-radius: 50%;
}

.effect-fenjing .energy-spike {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(150, 255, 180, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(100, 200, 120, 0.8);
}

@keyframes boneCrack {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
}

/* 须弥山掌特效 - 金棕色山岳特效 */
.effect-xumi {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.effect-xumi .energy-core {
    position: absolute;
    width: 45%;
    height: 45%;
    left: 27.5%;
    top: 27.5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 150, 0.95) 0%, rgba(230, 180, 100, 0.6) 50%, transparent 70%);
    animation: corePulse 1.3s ease-in-out infinite alternate;
}

.effect-xumi .core-glow {
    position: absolute;
    width: 75%;
    height: 75%;
    left: 12.5%;
    top: 12.5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 120, 0.5) 0%, transparent 70%);
    animation: coreGlow 1.3s ease-in-out infinite alternate;
}

.effect-xumi .mountain-fragment {
    position: absolute;
    background: linear-gradient(135deg, rgba(255, 220, 150, 0.9), rgba(200, 150, 80, 0.6));
    border-radius: 2px;
}

.effect-xumi .dust-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(230, 190, 120, 0.8);
    border-radius: 50%;
}

.effect-xumi .shockwave {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(230, 180, 100, 0.6);
    border-radius: 50%;
}

.effect-xumi .energy-burst {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(255, 230, 170, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(230, 180, 100, 0.8);
}

@keyframes mountainRise {
    0% { transform: translateY(20px) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-10px) scale(1); opacity: 0; }
}

/* 天龙八部特效 - 金色佛光天龙特效 */
.effect-tianlong {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.effect-tianlong .energy-core {
    position: absolute;
    width: 40%;
    height: 40%;
    left: 30%;
    top: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 248, 220, 0.95) 0%, rgba(255, 215, 120, 0.6) 50%, transparent 70%);
    animation: corePulse 1.4s ease-in-out infinite alternate;
}

.effect-tianlong .core-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 160, 0.5) 0%, transparent 70%);
    animation: coreGlow 1.4s ease-in-out infinite alternate;
}

.effect-tianlong .buddha-light {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 250, 230, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 220, 150, 0.9), 0 0 30px rgba(255, 200, 100, 0.6);
}

.effect-tianlong .lotus-petal {
    position: absolute;
    width: 8px;
    height: 12px;
    background: linear-gradient(to top, rgba(255, 240, 200, 0.9), rgba(255, 200, 120, 0.5));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.effect-tianlong .dragon-scale {
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(255, 230, 150, 0.85);
    border-radius: 20%;
}

.effect-tianlong .golden-wave {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 215, 120, 0.5);
    border-radius: 50%;
}

@keyframes lotusBloom {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) rotate(180deg); opacity: 0; }
}

/* ==================== 仙剑飞升特效 - 剑气化剑升空 ==================== */
.effect-xianjian {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.effect-xianjian .fairy-sword {
    position: absolute;
    width: 200px;
    height: 18px;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.effect-xianjian .fairy-blade {
    position: absolute;
    width: 145px;
    height: 18px;
    left: 25px;
    top: 0;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.95) 0%,
        rgba(240, 250, 255, 1) 15%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 70%,
        rgba(240, 250, 255, 1) 85%,
        rgba(200, 230, 255, 0.95) 100%
    );
    clip-path: polygon(
        0% 15%,
        3% 8%,
        8% 3%,
        15% 0%,
        100% 0%,
        100% 100%,
        15% 100%,
        8% 97%,
        3% 92%,
        0% 85%
    );
    box-shadow:
        0 0 25px rgba(200, 235, 255, 1),
        0 0 50px rgba(150, 200, 255, 0.9),
        0 0 90px rgba(100, 180, 255, 0.7),
        0 0 140px rgba(80, 160, 255, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.9);
}

.effect-xianjian .fairy-edge-top {
    position: absolute;
    width: 145px;
    height: 3px;
    left: 25px;
    top: -1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 15%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 85%,
        transparent 100%
    );
    filter: blur(1px);
    box-shadow: 0 0 10px rgba(200, 235, 255, 1);
}

.effect-xianjian .fairy-edge-bottom {
    position: absolute;
    width: 145px;
    height: 3px;
    left: 25px;
    bottom: -1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 15%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 85%,
        transparent 100%
    );
    filter: blur(1px);
    box-shadow: 0 0 10px rgba(200, 235, 255, 1);
}

.effect-xianjian .fairy-tip {
    position: absolute;
    width: 35px;
    height: 18px;
    right: 0;
    top: 0;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.9) 0%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 70%,
        rgba(200, 230, 255, 0.9) 100%
    );
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    filter: drop-shadow(0 0 15px rgba(200, 235, 255, 1));
}

.effect-xianjian .fairy-tip::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(220, 240, 255, 0.6) 40%,
        rgba(180, 220, 255, 0.3) 70%,
        transparent 100%
    );
    filter: blur(2px);
}

.effect-xianjian .fairy-guard {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 8px;
    top: -5px;
    background: linear-gradient(135deg,
        rgba(180, 220, 255, 0.9) 0%,
        rgba(220, 240, 255, 1) 25%,
        rgba(255, 255, 255, 1) 50%,
        rgba(220, 240, 255, 1) 75%,
        rgba(180, 220, 255, 0.9) 100%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow:
        0 0 15px rgba(200, 235, 255, 1),
        0 0 30px rgba(150, 200, 255, 0.7),
        inset 0 0 8px rgba(255, 255, 255, 0.8);
}

.effect-xianjian .fairy-guard::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.9) 50%,
        rgba(180, 220, 255, 0.5) 100%
    );
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

.effect-xianjian .fairy-handle {
    position: absolute;
    width: 25px;
    height: 12px;
    left: -15px;
    top: 3px;
    background: linear-gradient(180deg,
        rgba(150, 190, 230, 0.95) 0%,
        rgba(200, 225, 250, 1) 30%,
        rgba(220, 240, 255, 1) 50%,
        rgba(200, 225, 250, 1) 70%,
        rgba(150, 190, 230, 0.95) 100%
    );
    border-radius: 2px;
    box-shadow:
        0 0 10px rgba(150, 200, 255, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.effect-xianjian .fairy-pommel {
    position: absolute;
    width: 14px;
    height: 14px;
    left: -22px;
    top: 2px;
    background: radial-gradient(circle at 40% 40%,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.95) 30%,
        rgba(180, 220, 255, 0.9) 60%,
        rgba(150, 200, 255, 0.8) 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(200, 235, 255, 1),
        0 0 30px rgba(150, 200, 255, 0.7);
}

.effect-xianjian .fairy-trail {
    position: absolute;
    width: 400px;
    height: 35px;
    left: -280px;
    top: -8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(180, 220, 255, 0.08) 25%,
        rgba(200, 235, 255, 0.2) 55%,
        rgba(220, 240, 255, 0.4) 80%,
        rgba(200, 235, 255, 0.6) 100%
    );
    filter: blur(18px);
}

.effect-xianjian .energy-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(200, 235, 255, 0.5);
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(200, 235, 255, 0.6),
        inset 0 0 15px rgba(200, 235, 255, 0.3);
}

.effect-xianjian .impact {
    position: absolute;
    width: 240px;
    height: 240px;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.effect-xianjian .impact-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid rgba(200, 235, 255, 0.95);
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(200, 235, 255, 1),
        0 0 100px rgba(150, 200, 255, 0.7),
        0 0 150px rgba(100, 180, 255, 0.4),
        inset 0 0 50px rgba(200, 235, 255, 0.5);
}

.effect-xianjian .impact-ring-inner {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    border: 3px solid rgba(220, 240, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(220, 240, 255, 0.8);
}

.effect-xianjian .impact-ring-middle {
    position: absolute;
    width: 85%;
    height: 85%;
    left: 7.5%;
    top: 7.5%;
    border: 2px dashed rgba(200, 235, 255, 0.6);
    border-radius: 50%;
}

.effect-xianjian .impact-core {
    position: absolute;
    width: 45%;
    height: 45%;
    left: 27.5%;
    top: 27.5%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.95) 25%,
        rgba(200, 235, 255, 0.7) 50%,
        rgba(150, 200, 255, 0.35) 75%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(200, 235, 255, 1),
        0 0 120px rgba(150, 200, 255, 0.6);
}

.effect-xianjian .impact-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.effect-xianjian .impact-stars::before,
.effect-xianjian .impact-stars::after {
    content: '✦ ✧ ✦ ✧ ✦ ✧ ✦';
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow:
        0 0 15px rgba(200, 235, 255, 1),
        0 0 30px rgba(150, 200, 255, 0.8);
}

.effect-xianjian .impact-stars::before {
    top: 5%;
}

.effect-xianjian .impact-stars::after {
    bottom: 5%;
}

.effect-xianjian .sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(200, 235, 255, 1);
}

/* 仙剑特效 - 补充缺失的元素样式 */
.effect-xianjian .fairy-outer-glow {
    position: absolute;
    width: 350%;
    height: 140px;
    left: -125%;
    top: -61px;
    background: radial-gradient(ellipse at 50% center,
        rgba(180, 220, 255, 0.4) 0%,
        rgba(150, 200, 255, 0.25) 30%,
        rgba(100, 180, 255, 0.12) 50%,
        transparent 70%
    );
    filter: blur(30px);
    animation: outerGlowPulseImmortal 0.6s ease-in-out infinite;
}

.effect-xianjian .fairy-aura {
    position: absolute;
    width: 280%;
    height: 100px;
    left: -90%;
    top: -41px;
    background: radial-gradient(ellipse at 55% center,
        rgba(200, 235, 255, 0.7) 0%,
        rgba(150, 200, 255, 0.45) 25%,
        rgba(100, 180, 255, 0.25) 45%,
        rgba(80, 160, 255, 0.1) 60%,
        transparent 75%
    );
    filter: blur(18px);
    animation: auraPulseImmortal 0.4s ease-in-out infinite;
}

.effect-xianjian .fairy-rainbow {
    position: absolute;
    width: 250%;
    height: 70px;
    left: -75%;
    top: -26px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 220, 0.12) 10%,
        rgba(255, 230, 180, 0.18) 20%,
        rgba(200, 255, 200, 0.12) 30%,
        rgba(180, 230, 255, 0.22) 40%,
        rgba(200, 200, 255, 0.18) 50%,
        rgba(220, 180, 255, 0.12) 60%,
        transparent 70%
    );
    filter: blur(20px);
    animation: rainbowShiftImmortal 2s linear infinite;
}

.effect-xianjian .fairy-mist {
    position: absolute;
    width: 400%;
    height: 90px;
    left: -150%;
    top: -36px;
    background: radial-gradient(ellipse at center,
        rgba(220, 240, 255, 0.45) 0%,
        rgba(180, 220, 255, 0.25) 30%,
        rgba(150, 200, 255, 0.12) 55%,
        transparent 75%
    );
    filter: blur(30px);
    animation: mistFloatImmortal 0.8s ease-in-out infinite;
}

.effect-xianjian .fairy-runes {
    position: absolute;
    width: 130px;
    height: 18px;
    left: 30px;
    top: 0;
    background:
        radial-gradient(ellipse 2px 6px at 15% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 6px at 30% 50%, rgba(220, 240, 255, 0.8), transparent),
        radial-gradient(ellipse 2px 6px at 45% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 6px at 60% 50%, rgba(220, 240, 255, 0.8), transparent),
        radial-gradient(ellipse 2px 6px at 75% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(ellipse 2px 6px at 90% 50%, rgba(220, 240, 255, 0.7), transparent);
    animation: runesGlowImmortal 0.3s ease-in-out infinite;
}

.effect-xianjian .fairy-particles {
    position: absolute;
    width: 280%;
    height: 70px;
    left: -90%;
    top: -26px;
}

.effect-xianjian .fairy-particles::before,
.effect-xianjian .fairy-particles::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.85) 40%,
        rgba(180, 220, 255, 0.5) 70%,
        transparent 100%
    );
    box-shadow:
        35px 12px 0 rgba(200, 235, 255, 0.75),
        70px -6px 0 rgba(255, 255, 255, 0.85),
        105px 18px 0 rgba(220, 240, 255, 0.65),
        140px -10px 0 rgba(255, 255, 255, 0.75),
        175px 6px 0 rgba(200, 235, 255, 0.55),
        210px -8px 0 rgba(255, 255, 255, 0.65);
    animation: particleSparkleImmortal 0.35s ease-in-out infinite;
}

.effect-xianjian .fairy-particles::after {
    top: 35px;
    animation-delay: 0.18s;
}

.effect-xianjian .fairy-stars {
    position: absolute;
    width: 250%;
    height: 50px;
    left: -75%;
    top: -16px;
}

.effect-xianjian .fairy-stars::before {
    content: '✦ ✧ ✦ ✧ ✦ ✧';
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 18px;
    text-shadow:
        0 0 10px rgba(200, 235, 255, 1),
        0 0 20px rgba(150, 200, 255, 0.8);
    animation: starsFloatImmortal 0.6s ease-in-out infinite;
}

.effect-xianjian .fairy-stars::after {
    content: '✧ ✦ ✧ ✦ ✧ ✦';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 10px;
    color: rgba(220, 240, 255, 0.7);
    letter-spacing: 22px;
    text-shadow:
        0 0 8px rgba(200, 235, 255, 0.9),
        0 0 16px rgba(150, 200, 255, 0.6);
    animation: starsFloatImmortal 0.6s ease-in-out infinite reverse;
    animation-delay: 0.3s;
}

.effect-xianjian .fairy-energy-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(200, 235, 255, 0.5);
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(200, 235, 255, 0.6),
        inset 0 0 15px rgba(200, 235, 255, 0.3);
    animation: energyRingExpandImmortal 0.8s ease-out infinite;
}

/* 新增特效样式已添加 */