/* --- 战斗区 (PC默认样式) --- */
        #battle-stage {
            flex: 1; 
            position: relative;
            display: flex; justify-content: space-between; 
            padding: 45px 20px 10px 20px; /* PC端保持宽敞 */
            align-items: center;
            overflow: hidden;
            min-height: 0;
            background: transparent;
        }

        .side-container {
            width: 48%; height: 100%; display: flex; flex-direction: column;
            justify-content: center; align-items: center; gap: 8px; position: relative; 
            z-index: 10; 
        }

        /* 角色模型 */
        .sprite {
            width: 70px; height: 100px; position: relative; cursor: pointer;
            transition: transform 0.1s; display: flex; flex-direction: column; align-items: center;
            overflow: visible !important;
        }
        
        /* --- 尸体样式重构 (核心修复) --- */
        
        /* 1. 尸体容器本身：不设滤镜，只改鼠标手势 */
        .sprite.dead {
            cursor: not-allowed !important;
            z-index: 0; /* 尸体沉底 */
        }

        /* 2. 尸体内部元素变灰 (头像、血条、名字) */
        .sprite.dead .sprite-visual, 
        .sprite.dead .bars-container,
        .sprite.dead .sprite-info,
        .sprite.dead .sprite-shadow {
            filter: grayscale(100%) opacity(0.6);
            transition: filter 0.3s;
        }

        /* 3. 活人选中态 (排除死人) */
        .selection-mode .sprite:not(.dead):hover { 
            filter: brightness(1.3) drop-shadow(0 0 5px var(--highlight));
            cursor: crosshair;
            z-index: 20;
        }

        /* 4. 【关键】可复活的尸体选中态 */
        /* JS 加上 'can-revive' 类后，样式生效 */
        .selection-mode .sprite.dead.can-revive {
            cursor: crosshair !important; /* 允许点击 */
        }

        .selection-mode .sprite {
            pointer-events: auto !important;
        }

        .selection-mode .sprite.dead.can-revive:hover {
            /* 绿色虚线框 + 绿色光晕 (现在不会变灰了！) */
            outline: 2px dashed #76ff03; 
            box-shadow: 0 0 15px #76ff03;
            z-index: 100;
        }

        /* 5. 尸体被选中时，内部元素稍微变实一点，方便看清 */
        .selection-mode .sprite.dead.can-revive:hover .sprite-visual {
            filter: grayscale(100%) opacity(1); 
        }
        /* 【优化】点击反馈：只对 活人 或 可复活的尸体 生效 */
        .selection-mode .sprite:not(.dead):active,
        .selection-mode .sprite.dead.can-revive:active { 
            transform: scale(0.95); 
        }

        /* --- 选中标记 (红圈/旋转) --- */
        /* 仅对 活人 或 可复活尸体 生效 */
        .selection-mode .sprite:not(.dead):hover .target-marker,
        .selection-mode .sprite.dead.can-revive:hover .target-marker { 
            opacity: 1; 
            animation: spin 2s infinite linear; 
        }
        @keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

        .sprite-visual { 
            width: 60px; height: 60px; 
            font-size: 45px; 
            display: flex; justify-content: center; align-items: center;
            text-shadow: 0 4px 8px rgba(0,0,0,0.8); z-index: 2; position: relative; 
            transition: filter 0.2s; margin-bottom: -5px;
        }
        .sprite-visual img {
            width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.5); border: 1px solid #444;
        }

        .sprite-shadow { width: 30px; height: 4px; background: rgba(0,0,0,0.5); border-radius: 50%; margin-top: -4px; margin-bottom: 2px;}
        
        .name-common { color: var(--color-common); }
        .name-green { color: var(--color-green); }
        .name-blue { color: var(--color-blue); }
        .name-purple { color: var(--color-purple); }
        .name-gold { color: var(--color-gold); }
        .name-orange { color: var(--color-orange); }
        .name-rainbow { background: var(--color-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: bold; }

        .sprite-info { 
            font-size: 10px; margin-top: 1px; background: rgba(0,0,0,0.6); 
            padding: 1px 4px; border-radius: 3px; text-align: center; line-height: 1.2; 
            white-space: nowrap; width: auto; min-width: 60px; z-index: 10;
        }
        
        .bars-container { width: 45px; display: flex; flex-direction: column; gap: 1px; position: absolute; top: -27px; } 
        .hp-bar-wrap, .mp-bar-wrap, .ap-bar-wrap { width: 100%; height: 3px; background: #444; border-radius: 1px; overflow: hidden; }
        .hp-fill { height: 100%; background: var(--hp-green); transition: width 0.2s; }
        .mp-fill { height: 100%; background: #2196f3; transition: width 0.2s; } 
        .ap-fill { height: 100%; background: var(--ap-color); width: 0%; box-shadow: 0 0 4px var(--ap-color); }

        .active-turn .sprite-visual { animation: breathe 0.5s infinite alternate; filter: drop-shadow(0 0 8px var(--highlight)); }
        
        .target-marker {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 60px; height: 60px; border: 2px solid #ff3d00; border-radius: 50%;
            pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1;
        }

        .arrow-pointer { 
            position: absolute; top: -25px; font-size: 14px; color: var(--highlight); 
            animation: bounce 0.8s infinite; z-index: 10; display: none; 
        }
        .active-turn .arrow-pointer { display: block; }
        
        .speech-bubble {
            position: absolute; bottom: 90%; left: 50%; transform: translateX(-50%);
            background: rgba(255,255,255,0.9); color: #000; padding: 3px 6px; border-radius: 4px;
            font-size: 11px; width: 100px; text-align: center; opacity: 0; pointer-events: none; z-index: 100; font-weight: bold;
            transition: opacity 0.3s;
        }
        .speech-visible { opacity: 1; }

        /* --- 动画特效 --- */
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
        @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.1); } }
        @keyframes attack-right { 0% { transform: translateX(0); } 50% { transform: translateX(30px); } 100% { transform: translateX(0); } }
        @keyframes attack-left { 0% { transform: translateX(0); } 50% { transform: translateX(-30px); } 100% { transform: translateX(0); } }
        .anim-attack-right { animation: attack-right 0.15s ease-in-out; }
        .anim-attack-left { animation: attack-left 0.15s ease-in-out; }
        @keyframes hit-shake {
            0% { transform: translate(0, 0); filter: brightness(1) sepia(0); }
            10% { transform: translate(-5px, -2px) rotate(-2deg); filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5); }
            30% { transform: translate(4px, 3px) rotate(2deg); filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5); }
            50% { transform: translate(-3px, 1px); }
            70% { transform: translate(2px, -1px); }
            90% { transform: translate(-1px, 0); }
            100% { transform: translate(0, 0); filter: brightness(1) sepia(0); }
        }
        .anim-hit { animation: hit-shake 0.4s ease-out; }
        .slash-effect {
            position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; 
            background: linear-gradient(45deg, transparent 40%, #fff 45%, #fff 55%, transparent 60%);
            transform: translate(-50%, -50%) rotate(-45deg) scale(0); 
            z-index: 20; pointer-events: none; opacity: 0;
            animation: slash-pop 0.2s ease-out forwards;
        }
        @keyframes slash-pop { 0% { transform: translate(-50%, -50%) rotate(-45deg) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.5); opacity: 0; } }
        .shield-effect {
            position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 30px;
            z-index: 20; animation: shield-anim 0.5s forwards; pointer-events: none; text-shadow: 0 0 10px blue;
        }
        @keyframes shield-anim { 0% { opacity: 0; transform: translateX(-50%) scale(0.5); } 50% { opacity: 1; transform: translateX(-50%) scale(1.2); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
        .dodge-anim { animation: dodge-move 0.5s ease; opacity: 0.5; }
        @keyframes dodge-move { 0% { transform: translateX(0); } 30% { transform: translateX(-20px) skewX(-20deg); } 100% { transform: translateX(0); } }
        .damage-popup {
            position: absolute; color: #ffeb3b; font-weight: 900; font-size: 24px; font-family: "Impact", sans-serif;
            text-shadow: 2px 2px 0 #d32f2f, -1px -1px 0 #000; pointer-events: none; 
            z-index: 999; 
            white-space: nowrap; top: -20px; left: 50%;
            animation: dmg-float 0.8s forwards ease-out;
        }
        .damage-popup.crit { color: #fff; font-size: 32px; text-shadow: 3px 3px 0 #b71c1c, 0 0 10px gold; z-index: 1000; }
        .damage-popup.miss { color: #69f0ae; font-size: 18px; font-style: italic; text-shadow: 1px 1px 0 #000; animation: miss-float 0.6s forwards; }
        @keyframes dmg-float { 
            0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; } 
            20% { transform: translate(-50%, -30px) scale(1.3); opacity: 1; } 
            100% { transform: translate(-50%, -60px) scale(1); opacity: 0; } 
        }
        @keyframes miss-float {
            0% { transform: translate(-50%, 0); opacity: 0; }
            100% { transform: translate(-50%, -30px); opacity: 1; }
        }
        .blood-particle {
            position: absolute; width: 6px; height: 6px; 
            background-color: #ff5252; border-radius: 50%; pointer-events: none; z-index: 400;
            box-shadow: 0 0 6px #ff0000; 
            animation: blood-fly 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        }
        @keyframes blood-fly {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
        }
        /* 降服动画 */
        .anim-capture { animation: capture-sequence 1.2s forwards; }
        @keyframes capture-sequence {
            0% { transform: scale(1); filter: brightness(1); }
            20% { transform: scale(1.1); filter: brightness(2) drop-shadow(0 0 15px gold); } 
            40% { transform: translate(0, -20px) scale(0.9) rotate(15deg); filter: sepia(1) hue-rotate(40deg) saturate(3); } 
            100% { transform: translate(0, -50px) scale(0) rotate(720deg); opacity: 0; } 
        }
        .anim-capture-fail { animation: capture-fail-shake 0.8s forwards; }
        @keyframes capture-fail-shake {
            0% { transform: scale(1); }
            10%, 30%, 50%, 70% { transform: translate(-5px, 0) scale(1.1); filter: drop-shadow(0 0 10px gold) brightness(1.5); }
            20%, 40%, 60%, 80% { transform: translate(5px, 0) scale(1.1); filter: drop-shadow(0 0 10px red) brightness(0.8); }
            100% { transform: translate(0, 0) scale(1); filter: none; }
        }
        .capture-effect-overlay {
            position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
            font-size: 40px; z-index: 30; opacity: 0;
            animation: bowl-appear 1.2s forwards;
        }
        @keyframes bowl-appear {
            0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
            20% { opacity: 1; transform: translateX(-50%) translateY(0); }
            80% { opacity: 1; transform: translateX(-50%) translateY(0); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
        }

    /* --- CSS武学动画特效 --- */

    /* =========================================
        【技能特效：降龙十八掌 V6.0 终极光影版】
        (样式分离版)
        ========================================= */

        /* 1. 飞行轨迹 (大S形走位 - Y轴控制) */
        @keyframes dragon-flight-v6 {
            0%   { transform: translateY(0px) scale(0.4); opacity: 0; }
            10%  { opacity: 1; transform: translateY(0px) scale(0.7); }
            25%  { transform: translateY(-120px) scale(0.9) rotate(-15deg); } 
            50%  { transform: translateY(120px) scale(1.1) rotate(15deg); }   
            75%  { transform: translateY(-70px) scale(1.3) rotate(-5deg); }   
            100% { transform: translateY(0px) scale(1.6); opacity: 1; }      
        }

        /* 2. 龙身蠕动 (更有力量感的挤压) */
        @keyframes dragon-muscle-flex {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.9) skewX(10deg); }
        }

        /* 3. 真气光效流转 (光影呼吸) */
        @keyframes dragon-energy-pulse {
            0% { filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ff4500); }
            50% { filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px #ffd700) drop-shadow(0 0 60px #ff4500); }
            100% { filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ff4500); }
        }

        /* --- 容器与组件类 --- */

        /* 波动层：负责 S形 位移 */
        .skill-dragon-waver {
            position: absolute; left: 0; top: 0;
            animation: dragon-flight-v6 1.8s ease-in-out forwards;
        }

        /* 龙本体包装：负责光影呼吸 */
        .skill-dragon-v6-wrapper {
            position: absolute; right: 0; top: 0;
            /* 初始位移让龙头突前 */
            transform: translateX(30px);
            animation: dragon-energy-pulse 0.5s infinite alternate;
        }

        /* SVG 龙身 */
        .skill-dragon-v6-body-svg {
            position: absolute; right: 0; top: -50px;
            width: 280px; height: 140px;
            z-index: 0;
            animation: dragon-muscle-flex 0.4s infinite ease-in-out;
        }

        /* 龙头聚气光球 */
        .skill-dragon-energy-ball {
            position: absolute; right: -10px; top: 10px;
            width: 40px; height: 40px;
            background: radial-gradient(circle, #fff 20%, #ffd700 60%, transparent 80%);
            border-radius: 50%;
            z-index: 5;
            filter: blur(5px);
            opacity: 0.8;
            mix-blend-mode: screen;
        }

        /* 爆炸特效 */
        .skill-dragon-explosion {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            width: 120px; height: 120px;
            background: radial-gradient(circle, #fff 10%, #ffd700 50%, #ff4500 80%, transparent 100%);
            z-index: 100;
            mix-blend-mode: screen;
            filter: blur(2px);
        }

    /* =========================================
        【动作优化】人物发招动作
        ========================================= */

        /* 刚猛发招动画：蓄力 -> 轰击 -> 震动回位 */
        @keyframes cast-heavy-strike {
            0% { transform: scale(1) translate(0, 0); filter: brightness(1); }
            
            /* 1. 蓄力 (0.0s - 0.2s): 后缩，全身聚气发光 */
            20% { transform: scale(0.9) translate(-5px, 2px); filter: brightness(1.5) drop-shadow(0 0 10px gold); }
            
            /* 2. 轰击 (0.2s - 0.3s): 猛烈前冲，释放龙形气劲 */
            30% { transform: scale(1.1) translate(15px, -5px); filter: brightness(1.2); }
            
            /* 3. 后坐力震颤 (0.3s - 0.6s): 模拟强大的反作用力 */
            40% { transform: translate(-4px, 2px); }
            45% { transform: translate(4px, -2px); }
            50% { transform: translate(-3px, 0px); }
            55% { transform: translate(3px, 0px); }
            60% { transform: translate(-1px, 0px); }
            
            /* 4. 归位 */
            100% { transform: scale(1) translate(0, 0); filter: brightness(1); }
        }

        /* 激活动作类 */
        .action-heavy-strike {
            /* 0.6秒完成整套动作 */
            animation: cast-heavy-strike 0.6s ease-out forwards;
            /* 保证动作期间层级较高 */
            z-index: 100; 
        }

    /* =========================================
         --- 玉女素心剑 合击特效按钮 ---
        ========================================= */
        .btn-combo-rainbow {
            background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 50%, #a18cd1 100%);
            background-size: 200% 200%;
            border: 1px solid #fff !important;
            color: #fff !important;
            text-shadow: 0 0 5px #ff4081, 0 0 10px #2196f3;
            animation: combo-gradient 2s ease infinite;
            font-weight: bold;
        }
        @keyframes combo-gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* =========================================
           纯 CSS 绘制的太极图 (完美圆形 + 呼吸光晕)
           ========================================= */
        
        /* 通用太极构造类 */
        .css-taiji {
            /* 1. 基础圆盘：左白右黑 */
            background: linear-gradient(to right, #fff 50%, #000 50%);
            border-radius: 50%;
            position: relative;
            box-shadow: 0 0 20px rgba(255,255,255,0.5); /* 基础辉光 */
            border: 1px solid rgba(0,0,0,0.1); /* 微微描边 */
        }

        /* 2. 上面的圆 (白头黑点) */
        .css-taiji::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            width: 50%; height: 50%;
            border-radius: 50%;
            transform: translateX(-50%);
            background: #fff; /* 白底 */
            /* 黑点 */
            background-image: radial-gradient(circle, #000 15%, transparent 16%);
        }

        /* 3. 下面的圆 (黑头白点) */
        .css-taiji::after {
            content: '';
            position: absolute;
            bottom: 0; left: 50%;
            width: 50%; height: 50%;
            border-radius: 50%;
            transform: translateX(-50%);
            background: #000; /* 黑底 */
            /* 白点 */
            background-image: radial-gradient(circle, #fff 15%, transparent 16%);
        }

        /* --- 防御特效 (应用太极) --- */
        .taiji-shield-large {
            position: absolute;
            width: 120px; height: 120px; /* 固定尺寸 */
            z-index: 150;
            opacity: 0;
            /* 蓝色护盾光晕 */
            box-shadow: 0 0 30px #2196f3; 
            animation: taiji-appear-spin 2s linear infinite;
            pointer-events: none;
        }
        
        /* --- 攻击特效 (应用太极) --- */
        .taiji-floor {
            position: absolute;
            width: 140px; height: 140px; /* 地面阵法大一点 */
            z-index: 10;
            opacity: 0;
            /* 绿色地煞光晕 */
            filter: drop-shadow(0 0 15px #76ff03) brightness(1.5); 
            animation: floor-spin 2s linear infinite;
            pointer-events: none;
        }

        /* 旋转动画复用 */
        @keyframes taiji-appear-spin {
            0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
            10% { transform: translate(-50%, -50%) scale(1) rotate(36deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
        }
        @keyframes floor-spin {
            0% { transform: translate(-50%, -50%) scaleY(0.4) rotate(0deg); opacity: 0; }
            20% { opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scaleY(0.4) rotate(360deg); opacity: 0.8; }
        }

        /* --- 反弹能量球 (视觉增强版) --- */
        .energy-point {
            position: absolute;
            width: 16px; height: 16px; /* 变大 */
            background: #fff;
            border-radius: 50%;
            /* 强烈的金色光晕，模拟内力 */
            box-shadow: 
                0 0 10px #fff, 
                0 0 20px #ffeb3b, 
                0 0 40px #ff9800; 
            z-index: 500; /* 确保在最上层 */
            pointer-events: none;
            /* 加个简单的脉冲动画让它更像能量 */
            animation: pulse-energy 0.2s infinite alternate;
        }
        @keyframes pulse-energy {
            from { transform: scale(1); opacity: 1; }
            to { transform: scale(1.2); opacity: 0.8; }
        }

        /* 4. 龙卷风气流 (改为围绕人身旋转) */
        .air-flow-spin {
            position: absolute;
            width: 100px; height: 200px; /* 长条形气流 */
            left: 50%; top: 50%;
            background: linear-gradient(to top, transparent, rgba(255,255,255,0.4), transparent);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 5;
            animation: tornado-visual 0.5s linear infinite;
            pointer-events: none;
            filter: blur(4px);
        }
        @keyframes tornado-visual {
            0% { transform: translate(-50%, -50%) scaleX(0); opacity: 0.3; }
            50% { transform: translate(-50%, -50%) scaleX(1); opacity: 0.6; }
            100% { transform: translate(-50%, -50%) scaleX(0); opacity: 0.3; }
        }

        /* --- 蛤蟆功专属特效 --- */
        .toad-projectile {
            position: absolute;
            font-size: 100px; /* 超大只 */
            z-index: 150;
            pointer-events: none;
            /* 蛤蟆本来是绿的，旋转色相变成紫色，并加阴影 */
            filter: hue-rotate(220deg) brightness(0.8) drop-shadow(0 20px 10px rgba(0,0,0,0.5));
            transform-origin: center bottom;
        }

        /* 落地尘土 */
        .dust-cloud {
            position: absolute;
            width: 40px; height: 40px;
            background: radial-gradient(circle, #795548 10%, transparent 70%);
            border-radius: 50%;
            opacity: 0.8;
            z-index: 90;
            animation: dust-poof 0.6s ease-out forwards;
        }
        
        @keyframes dust-poof {
            0% { transform: scale(0.5) translate(0, 0); opacity: 0.8; }
            100% { transform: scale(4.0) translate(var(--tx), var(--ty)); opacity: 0; }
        }

        /* 金龙特效 */
        .dragon-projectile {
            position: absolute;
            font-size: 50px; 
            filter: sepia(1) saturate(5) hue-rotate(-15deg) brightness(1.3) drop-shadow(0 0 10px gold); 
            z-index: 100;
            pointer-events: none;
            top: 0; left: 0; 
            transform-origin: center center;
            display: flex; align-items: center; justify-content: flex-end; 
        }
        .dragon-tail {
            height: 24px;
            background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6) 40%, rgba(255,215,0,0.9));
            margin-right: -10px; border-radius: 12px; filter: blur(2px);
        }

        /* --- 一阳指激光特效 (修复方向版) --- */
        .laser-beam {
            position: absolute;
            height: 8px; 
            background: linear-gradient(90deg, rgba(255,215,0,0) 0%, #FFD700 20%, #FFF 50%, #FFD700 80%, rgba(255,215,0,0) 100%);
            transform-origin: left center; /* 以左侧为轴心发射 */
            z-index: 500; pointer-events: none;
            box-shadow: 0 0 10px #FFD700, 0 0 20px orange, 0 0 30px red; 
            opacity: 0;
            border-radius: 4px;
            mix-blend-mode: screen; 
            
            /* 【关键】定义一个 CSS 变量，默认 0度 */
            --laser-angle: 0deg;
            
            animation: laser-shoot 0.35s ease-out forwards;
        }

        @keyframes laser-shoot {
            /* 【关键】在每一帧里都加上 rotate(var(--laser-angle))，这样旋转就不会丢失了 */
            0% { transform: rotate(var(--laser-angle)) scaleX(0); opacity: 1; filter: brightness(2); }
            30% { transform: rotate(var(--laser-angle)) scaleX(1); opacity: 1; filter: brightness(1.5); }
            100% { transform: rotate(var(--laser-angle)) scaleX(1); opacity: 0; filter: brightness(1); }
        }

        /* --- 白驼山驭蛇术特效 --- */
        .snake-particle {
            position: absolute; font-size: 24px; pointer-events: none; z-index: 100;
            opacity: 0.9;
            animation: snake-slither 1s linear forwards;
        }
        
        /* 蛇行轨迹：S型走位 + 变大 */
        /* --- 修复后的蛇行轨迹：支持方向变量 --dir --- */
        @keyframes snake-slither {
            /* 原理：
            1. 位移：calc(数值 * var(--dir))。 1往右，-1往左。
            2. 转向：scaleX(calc(var(--dir) * -1))。
                我方(1) -> scaleX(-1) -> 翻转(头朝右)
                敌方(-1) -> scaleX(1)  -> 正常(头朝左)
            */
            0% { 
                transform: translate(0, 0) scale(0.5) scaleX(calc(var(--dir, 1) * -1)); 
                opacity: 0; 
            }
            20% { 
                opacity: 1; 
            }
            25% { 
                transform: translate(calc(20px * var(--dir, 1)), -10px) scale(0.8) scaleX(calc(var(--dir, 1) * -1)); 
            }
            50% { 
                transform: translate(calc(40px * var(--dir, 1)), 10px) scale(1.0) scaleX(calc(var(--dir, 1) * -1)); 
            }
            75% { 
                transform: translate(calc(60px * var(--dir, 1)), -10px) scale(1.2) scaleX(calc(var(--dir, 1) * -1)); 
            }
            100% { 
                transform: translate(calc(80px * var(--dir, 1)), 0) scale(1.5) scaleX(calc(var(--dir, 1) * -1)); 
                opacity: 0; 
            }
        }

        /* 北冥神功特效 */
        .beiming-vortex {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            font-size: 60px; z-index: 60; pointer-events: none;
            animation: vortex-spin 0.8s linear forwards;
            opacity: 0.8; filter: drop-shadow(0 0 10px blue);
        }
        @keyframes vortex-spin {
            0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.5); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translate(-50%, -50%) rotate(720deg) scale(1.5); opacity: 0; }
        }

        /* --- 优化：打狗棒法 (CSS手绘竹棒 + 0.3s黄金节奏) --- */
        .stick-effect {
            position: absolute; 
            /* 位置：悬在敌人头顶左侧，不挡脸 */
            top: -40px; left: -10px; 
            
            /* 【手绘竹棒】 */
            width: 6px;  /* 细！灵巧！ */
            height: 70px; /* 长！ */
            /* 使用渐变模拟竹节：浅绿-深绿交替 */
            background: linear-gradient(to bottom, 
                #76ff03 0%, #76ff03 20%, 
                #33691e 20%, #33691e 22%, /* 竹节 */
                #76ff03 22%, #76ff03 50%, 
                #33691e 50%, #33691e 52%, /* 竹节 */
                #76ff03 52%, #76ff03 80%, 
                #33691e 80%, #33691e 82%, /* 竹节 */
                #76ff03 100%
            );
            border-radius: 3px;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* 淡淡的影子 */
            
            z-index: 200;
            pointer-events: none;
            transform-origin: bottom center; /* 握把在下 */
            opacity: 0;
        }

        /* 新动画：0.3秒 急速点打 */
        .anim-stick-poke {
            animation: stick-poke-motion 0.3s ease-out forwards;
        }

        @keyframes stick-poke-motion {
            0% { 
                opacity: 0; 
                /* 举高高 */
                transform: translate(-30px, -50px) rotate(-60deg); 
            }
            20% { 
                opacity: 1; 
                /* 蓄力瞬间 */
                transform: translate(-30px, -50px) rotate(-60deg); 
            }
            60% { 
                /* 【打击点】笃！点在头上 */
                transform: translate(0, 0) rotate(10deg); 
            }
            80% {
                /* 微微回弹，表现韧性 */
                transform: translate(0, -5px) rotate(0deg);
            }
            100% { 
                opacity: 0; 
                transform: translate(0, -5px) rotate(0deg);
            }
        }

        /* 属性下降飘字 */
        .debuff-text {
            position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
            color: #b0bec5; font-size: 14px; font-weight: bold; pointer-events: none;
            animation: float-up 1s forwards; z-index: 100;
            text-shadow: 1px 1px 2px black;
        }
        @keyframes float-up { 0% { top: -30px; opacity: 1; } 100% { top: -60px; opacity: 0; } }
        
        /* 天下无狗 横扫特效 */
        .stick-sweep {
            position: absolute; top: 50%; left: 0; width: 100%; height: 10px;
            background: rgba(118, 255, 3, 0.8); /* 翠绿棒影 */
            box-shadow: 0 0 10px #76ff03;
            z-index: 50; pointer-events: none;
            transform-origin: center;
            animation: sweep-anim 0.5s ease-out forwards;
        }
        @keyframes sweep-anim {
            0% { transform: scaleX(0) rotate(0deg); opacity: 0.5; }
            50% { transform: scaleX(1) rotate(180deg); opacity: 1; }
            100% { transform: scaleX(0) rotate(360deg); opacity: 0; }
        }

                /* 毒伤飘字 (紫色) */
        .damage-popup.poison { 
            color: #e040fb; 
            font-size: 22px; 
            text-shadow: 2px 2px 0 #4a148c, -1px -1px 0 #000; 
        }
        /* 毒菱特效 (旋转飞出的暗器) */
        .anim-spin-shoot {
            animation: spin-shoot 0.4s ease-out forwards;
        }
        @keyframes spin-shoot {
            0% { transform: translate(-50px, 0) rotate(0deg) scale(0.5); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translate(20px, 0) rotate(720deg) scale(1.2); opacity: 0; }
        }