/* ========================================= */
/* [Voodoo Skill] 巫毒技能视觉特效模块        */
/* Voodoo Skill Visual Effects Module        */
/* 说明：包含激活阶段和腐蚀阶段的全部样式      */
/* ========================================= */

/* ========================================= */
/* [Part 1] 腐蚀阶段 -诅咒生效                */
/* Corroded Cell - Curse Effect              */
/* ========================================= */

/* 腐蚀格子基础样式 */
.cell.corroded {
    /* 深暗绿色腐蚀背景 */
    background: 
        /* 毒液光泽 */
        radial-gradient(ellipse 80% 60% at 30% 30%,
            rgba(34, 197, 94, 0.15) 0%,
            transparent 50%
        ),
        /* 腐蚀坑洞 */
        radial-gradient(circle at 50% 50%,
            #0f2417 0%,
            #1a3a1f 40%,
            #2d3436 70%,
            #1a1a1a 100%
        ) !important;
    
    /* 立体坑洞效果 */
    box-shadow: 
        /* 内凹陷 */
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        inset 0 -2px 4px rgba(34, 197, 94, 0.2),
        /* 外发光 - 毒液 */
        0 0 15px rgba(34, 197, 94, 0.3),
        0 0 30px rgba(22, 101, 52, 0.2) !important;
    
    /* 圆角 */
    border-radius: 6px;
    
    /* 层级提升 */
    z-index: 5 !important;
    
    /* 入场动画 */
    animation: corrodedAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 腐蚀出现动画 */
@keyframes corrodedAppear {
    0% {
        transform: scale(0.3);
        opacity: 0;
        filter: brightness(2);
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

/* 毒液溢出效果 - 边缘伪元素 */
.cell.corroded::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    
    /* 毒液滴落效果 */
    background: 
        /* 顶部毒液 */
        radial-gradient(ellipse 40% 20% at 20% 0%,
            rgba(34, 197, 94, 0.4) 0%,
            transparent 100%
        ),
        radial-gradient(ellipse 30% 15% at 70% 0%,
            rgba(34, 197, 94, 0.3) 0%,
            transparent 100%
        ),
        /* 底部毒液 */
        radial-gradient(ellipse 35% 18% at 30% 100%,
            rgba(22, 101, 52, 0.4) 0%,
            transparent 100%
        ),
        radial-gradient(ellipse 25% 12% at 80% 100%,
            rgba(22, 101, 52, 0.3) 0%,
            transparent 100%
        );
    
    z-index: 1;
    pointer-events: none;
    
    /* 毒液流动动画 */
    animation: poisonDrip 3s ease-in-out infinite;
}

/* 毒液滴落动画 */
@keyframes poisonDrip {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(1px);
    }
}

/* 骷髅标志 - 使用 ::after 伪元素 */
.cell.corroded::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    
    /* 骷髅 SVG - 带绿色眼窝光芒 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7' fill='%232d3436' stroke='%234a5568' stroke-width='0.5'/%3E%3Cellipse cx='9' cy='8' rx='2' ry='2.5' fill='%23000'/%3E%3Cellipse cx='15' cy='8' rx='2' ry='2.5' fill='%23000'/%3E%3Cpath d='M11 11L12 13L13 11' fill='%23000' stroke='%23000' stroke-width='0.5'/%3E%3Crect x='8' y='14' width='2' height='3' fill='%234a5568' rx='0.5'/%3E%3Crect x='11' y='14' width='2' height='3' fill='%234a5568' rx='0.5'/%3E%3Crect x='14' y='14' width='2' height='3' fill='%234a5568' rx='0.5'/%3E%3Ccircle cx='9' cy='8' r='0.8' fill='%2322c55e' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.4;0.9;0.4' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='15' cy='8' r='0.8' fill='%2322c55e' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.4;0.9;0.4' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    z-index: 2;
    opacity: 0.9;
    
    /* 骷髅出现动画 */
    animation: skullAppear 0.4s ease-out 0.3s both;
}

/* 骷髅出现动画 */
@keyframes skullAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
    }
    to {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* 被腐蚀的棋子样式 */
.cell.corroded .piece {
    /* 灰暗模糊 */
    opacity: 0.25 !important;
    filter: grayscale(1) blur(1.5px) brightness(0.5) !important;
    
    /* 缩小并下沉 */
    transform: scale(0.7) translateY(5%);
    
    /* 过渡动画 */
    transition: all 0.5s ease;
    
    /* 层级降低 */
    z-index: 1 !important;
}

/* 腐蚀格子周围的毒气扩散 */
.cell.corroded .corroded-aura {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(34, 197, 94, 0.2) 0%,
        rgba(22, 101, 52, 0.1) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: corrodedAuraPulse 2.5s ease-in-out infinite;
}

@keyframes corrodedAuraPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* 移动端适配 - 腐蚀效果 */
@media (max-width: 600px) {
    .cell.corroded {
        box-shadow: 
            inset 0 1px 4px rgba(0, 0, 0, 0.7),
            inset 0 -1px 2px rgba(34, 197, 94, 0.2),
            0 0 10px rgba(34, 197, 94, 0.25) !important;
    }
    
    .cell.corroded::before {
        display: none; /* 移动端简化毒液效果 */
    }
    
    .cell.corroded::after {
        width: 60%;
        height: 60%;
    }
    
    .cell.corroded .piece {
        opacity: 0.2 !important;
        transform: scale(0.6) translateY(3%);
    }
}

/* 动效减弱支持 - 腐蚀效果 */
@media (prefers-reduced-motion: reduce) {
    .cell.corroded,
    .cell.corroded::before,
    .cell.corroded::after,
    .cell.corroded .corroded-aura {
        animation: none;
    }
    
    .cell.corroded .piece {
        transition: none;
    }
}

/* ========================================= */
/* [Part 2] 激活阶段 -诅咒氛围                */
/* Casting Voodoo - Cursed Atmosphere        */
/* ========================================= */

/* 棋盘诅咒覆盖层 */
.board.casting-voodoo {
    /* 紫色迷雾滤镜 */
    filter: brightness(0.85) saturate(1.2);
    
    /* 紫色光晕边框 */
    box-shadow: 
        /* 原有阴影保留 */
        inset 1px 1px 0 rgba(255,255,255,0.4),
        inset -1px -1px 0 rgba(0,0,0,0.1),
        1px 1px 0 var(--wood-side),
        2px 2px 0 var(--wood-side),
        3px 3px 0 var(--wood-side),
        4px 4px 0 var(--wood-side),
        5px 5px 0 var(--wood-side),
        6px 6px 0 var(--wood-side),
        7px 7px 5px rgba(0,0,0,0.3),
        15px 25px 40px rgba(0,0,0,0.25),
        /* 新增诅咒光晕 */
        0 0 30px rgba(139, 92, 246, 0.4),
        0 0 60px rgba(139, 92, 246, 0.2),
        inset 0 0 50px rgba(88, 28, 135, 0.3);
    
    /* 过渡动画 */
    transition: filter 0.5s ease, box-shadow 0.5s ease;
    
    /* 动画：诅咒脉动 */
    animation: voodooPulse 2s ease-in-out infinite;
}

/*诅咒脉动动画 */
@keyframes voodooPulse {
    0%, 100% {
        box-shadow: 
            inset 1px 1px 0 rgba(255,255,255,0.4),
            inset -1px -1px 0 rgba(0,0,0,0.1),
            1px 1px 0 var(--wood-side),
            2px 2px 0 var(--wood-side),
            3px 3px 0 var(--wood-side),
            4px 4px 0 var(--wood-side),
            5px 5px 0 var(--wood-side),
            6px 6px 0 var(--wood-side),
            7px 7px 5px rgba(0,0,0,0.3),
            15px 25px 40px rgba(0,0,0,0.25),
            0 0 30px rgba(139, 92, 246, 0.4),
            0 0 60px rgba(139, 92, 246, 0.2),
            inset 0 0 50px rgba(88, 28, 135, 0.3);
    }
    50% {
        box-shadow: 
            inset 1px 1px 0 rgba(255,255,255,0.4),
            inset -1px -1px 0 rgba(0,0,0,0.1),
            1px 1px 0 var(--wood-side),
            2px 2px 0 var(--wood-side),
            3px 3px 0 var(--wood-side),
            4px 4px 0 var(--wood-side),
            5px 5px 0 var(--wood-side),
            6px 6px 0 var(--wood-side),
            7px 7px 5px rgba(0,0,0,0.3),
            15px 25px 40px rgba(0,0,0,0.25),
            0 0 45px rgba(139, 92, 246, 0.6),
            0 0 90px rgba(139, 92, 246, 0.3),
            inset 0 0 70px rgba(88, 28, 135, 0.5);
    }
}

/* 迷雾覆盖层 - 使用伪元素 */
.board.casting-voodoo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    
    /* 紫色迷雾渐变 */
    background: 
        /* 径向迷雾 */
        radial-gradient(ellipse 120% 80% at 50% 50%,
            rgba(88, 28, 135, 0.15) 0%,
            rgba(107, 33, 168, 0.1) 40%,
            transparent 70%
        ),
        /* 边缘暗角 */
        radial-gradient(ellipse 100% 100% at 50% 50%,
            transparent 30%,
            rgba(59, 7, 100, 0.2) 100%
        );
    
    /* 迷雾流动动画 */
    animation: voodooMist 4s ease-in-out infinite;
    border-radius: 4px;
}

/* 迷雾流动动画 */
@keyframes voodooMist {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* 可选棋子高亮 - 敌方棋子浮现诅咒标记 */
.board.casting-voodoo .cell:not(.corroded) .piece {
    /* 诅咒光环 */
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
    transition: filter 0.3s ease;
}

/* 悬停时的强化诅咒效果 */
.board.casting-voodoo .cell:not(.corroded):hover .piece {
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.9))
            drop-shadow(0 0 25px rgba(139, 92, 246, 0.5));
    transform: scale(1.05);
    cursor: pointer;
}

/* 诅咒符号 - 悬停时显示（覆盖腐蚀效果的::before） */
.board.casting-voodoo .cell:not(.corroded):hover::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 80% !important;
    height: 80% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
    
    /* 紫色骷髅图案 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A855F7' stroke-width='1.5'%3E%3Ccircle cx='12' cy='10' r='7'/%3E%3Ccircle cx='9' cy='9' r='1.5' fill='%23A855F7'/%3E%3Ccircle cx='15' cy='9' r='1.5' fill='%23A855F7'/%3E%3Cpath d='M9 14h6'/%3E%3Cpath d='M10 14v3'/%3E%3Cpath d='M12 14v3'/%3E%3Cpath d='M14 14v3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    opacity: 0.7;
    animation: voodooSkullAppear 0.3s ease-out;
    border-radius: 0;
    box-shadow: none;
}

/* 骷髅出现动画 */
@keyframes voodooSkullAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
    }
    to {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* 移动端适配 - 激活阶段 */
@media (max-width: 600px) {
    .board.casting-voodoo {
        animation: voodooPulseMobile 2s ease-in-out infinite;
    }
    
    @keyframes voodooPulseMobile {
        0%, 100% {
            box-shadow: 
                inset 1px 1px 0 rgba(255,255,255,0.3),
                1px 1px 0 var(--wood-side),
                2px 2px 0 var(--wood-side),
                3px 3px 0 var(--wood-side),
                5px 5px 15px rgba(0,0,0,0.25),
                0 0 20px rgba(139, 92, 246, 0.3);
        }
        50% {
            box-shadow: 
                inset 1px 1px 0 rgba(255,255,255,0.3),
                1px 1px 0 var(--wood-side),
                2px 2px 0 var(--wood-side),
                3px 3px 0 var(--wood-side),
                5px 5px 15px rgba(0,0,0,0.25),
                0 0 35px rgba(139, 92, 246, 0.5);
        }
    }
    
    .board.casting-voodoo::after {
        display: none; /* 移动端简化迷雾 */
    }
}

/* 动效减弱支持 - 激活阶段 */
@media (prefers-reduced-motion: reduce) {
    .board.casting-voodoo,
    .board.casting-voodoo::after {
        animation: none;
    }
    
    .board.casting-voodoo .cell:not(.corroded):hover .piece {
        transform: none;
    }
}