/* ========================================= */
/* pieces.css - 棋子样式与落子特效           */
/* Project Lysh - Alpha 0.7.9.4              */
/* 从 style.css 拆分独立                     */
/* ========================================= */

/* ========================================= */
/* 棋子基础样式                              */
/* ========================================= */

.piece-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
.piece-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
/* [Alpha 0.7.9.6] 自然主题棋子PNG大小 */
.piece.skin-nature .piece-img { width: 105%; height: 105%; margin: -2.5%; transform: none; }

/* [Alpha 0.7.9.6] 冰/火主题棋子PNG大小 - [修复] 增大PNG图片大小到140%，使冰火棋子更大 */
.piece.skin-ice-fire .piece-img { width: 140%; height: 140%; margin: -20%; transform: none; }

/* ========================================= */
/* [Alpha 0.7.9.3] 温润棋子美术 - 低对比度版 */
/* Warm & Soft Piece Art - Low Contrast      */
/* 黑子：石墨灰调 / 白子：象牙暖白调          */
/* 核心理念：温润、透气、不油腻               */
/* ========================================= */

/* 棋子基础样式 */
.piece.skin-classic { 
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ===== 立体质感 - 炭灰黑子 ===== */
/* 
 * 设计理念：纯正的炭灰色，不偏绿不偏蓝
 * 中心较深，边缘有自然的灰色过渡
 */
.piece.skin-classic.p1.texture-3d { 
    background: 
        /* 球体主体：纯正炭灰色，无色偏 */
        radial-gradient(
            circle at 48% 46%,
            #1a1a1a 0%,
            #222222 18%,
            #2c2c2c 35%,
            #383838 52%,
            #454545 68%,
            #525252 82%,
            #5e5e5e 100%
        );
    
    /* 柔和的阴影 */
    box-shadow: 
        inset 0 -5px 12px -4px rgba(0, 0, 0, 0.4),
        inset 0 5px 10px -4px rgba(255, 255, 255, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.22),
        0 4px 8px -2px rgba(0, 0, 0, 0.15);
    
    border: none;
}

/* 黑子高光层 - 柔和的光斑 */
.piece.skin-classic.p1.texture-3d::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 15%;
    width: 38%;
    height: 28%;
    background: radial-gradient(
        ellipse 100% 80% at 50% 50%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.02) 70%,
        transparent 100%
    );
    border-radius: 50%;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* 黑子 - 边缘的微妙透气感 */
.piece.skin-classic.p1.texture-3d::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    /* 边缘用纯灰色，不带色偏 */
    background: radial-gradient(
        circle at 50% 50%,
        transparent 0%,
        transparent 65%,
        rgba(128, 128, 128, 0.06) 80%,
        rgba(150, 150, 150, 0.1) 92%,
        rgba(170, 170, 170, 0.12) 100%
    );
    pointer-events: none;
}

/* ===== 立体质感 - 象牙白子 ===== */
/* 
 * 设计理念：不是冷白，而是温暖的象牙色
 * 带一点点米黄/奶油色调，看起来温润舒服
 * 阴影用暖灰色而不是冷灰色
 */
.piece.skin-classic.p2.texture-3d { 
    background: 
        /* 球体主体：象牙白的柔和过渡 */
        radial-gradient(
            circle at 46% 44%,
            #faf8f5 0%,
            #f5f3f0 18%,
            #efece8 35%,
            #e8e4df 52%,
            #e0dbd5 68%,
            #d6d0c9 82%,
            #ccc5bd 100%
        );
    
    /* 温暖的阴影系统 */
    box-shadow: 
        /* 内阴影：底部用暖灰色 */
        inset 0 -5px 12px -4px rgba(180, 170, 155, 0.35),
        /* 内阴影：顶部柔和提亮 */
        inset 0 5px 10px -4px rgba(255, 255, 255, 0.7),
        /* 外阴影：暖色调投射 */
        0 2px 4px rgba(120, 110, 95, 0.15),
        0 4px 8px -2px rgba(100, 90, 75, 0.1);
    
    border: none;
}

/* 白子高光层 - 柔和不刺眼 */
.piece.skin-classic.p2.texture-3d::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 12%;
    width: 42%;
    height: 32%;
    background: radial-gradient(
        ellipse 100% 80% at 50% 50%,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.45) 30%,
        rgba(255, 255, 255, 0.15) 60%,
        transparent 100%
    );
    border-radius: 50%;
    transform: rotate(-12deg);
    pointer-events: none;
}

/* 白子 - 边缘的温润过渡 */
.piece.skin-classic.p2.texture-3d::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: 
        /* 右下角微弱的环境反光 */
        radial-gradient(
            ellipse 35% 30% at 75% 72%,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%
        ),
        /* 底部的暖色调（象牙特有） */
        radial-gradient(
            ellipse 70% 25% at 50% 92%,
            rgba(220, 200, 170, 0.1) 0%,
            transparent 70%
        );
    pointer-events: none;
}

/* ===== 扁平质感 ===== */

/* 黑子扁平版 */
.piece.skin-classic.p1.texture-flat { 
    background: radial-gradient(
        circle at 40% 38%, 
        #505458 0%, 
        #3a3e42 40%, 
        #2d3035 70%,
        #252830 100%
    );
    box-shadow: 
        inset 0 -4px 8px -2px rgba(0, 0, 0, 0.3),
        inset 0 3px 6px -2px rgba(255, 255, 255, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 3px 6px -2px rgba(0, 0, 0, 0.12);
    border: none;
}

.piece.skin-classic.p1.texture-flat::before,
.piece.skin-classic.p1.texture-flat::after {
    display: none;
}

/* 白子扁平版 */
.piece.skin-classic.p2.texture-flat { 
    background: radial-gradient(
        circle at 40% 38%, 
        #faf8f5 0%, 
        #f0ede8 35%, 
        #e5e0da 60%,
        #d8d2ca 100%
    );
    box-shadow: 
        inset 0 -4px 8px -2px rgba(160, 150, 135, 0.25),
        inset 0 3px 6px -2px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(100, 90, 75, 0.12),
        0 3px 6px -2px rgba(80, 70, 55, 0.08);
    border: none;
}

.piece.skin-classic.p2.texture-flat::before,
.piece.skin-classic.p2.texture-flat::after {
    display: none;
}

/* ===== 移动端适配 ===== */
@media (max-width: 600px) {
    .piece.skin-classic.p1.texture-3d {
        background: radial-gradient(
            circle at 48% 46%,
            #2d3033 0%,
            #3d4145 40%,
            #555b62 75%,
            #6a727b 100%
        );
        box-shadow: 
            inset 0 -4px 10px -3px rgba(0, 0, 0, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.18),
            0 3px 6px -2px rgba(0, 0, 0, 0.12);
    }
    
    .piece.skin-classic.p2.texture-3d {
        background: radial-gradient(
            circle at 46% 44%,
            #faf8f5 0%,
            #ebe7e2 40%,
            #ddd8d0 70%,
            #ccc5bd 100%
        );
        box-shadow: 
            inset 0 -4px 10px -3px rgba(180, 170, 155, 0.3),
            inset 0 3px 6px -2px rgba(255, 255, 255, 0.6),
            0 2px 4px rgba(120, 110, 95, 0.12),
            0 3px 6px -2px rgba(100, 90, 75, 0.08);
    }
    
    .piece.skin-classic.p1.texture-3d::before {
        width: 35%;
        height: 25%;
        background: radial-gradient(
            ellipse 100% 80% at 50% 50%,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            transparent 100%
        );
    }
    
    .piece.skin-classic.p1.texture-3d::after {
        display: none;
    }
    
    .piece.skin-classic.p2.texture-3d::before {
        width: 38%;
        height: 28%;
        background: radial-gradient(
            ellipse 100% 80% at 50% 50%,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 100%
        );
    }
    
    .piece.skin-classic.p2.texture-3d::after {
        display: none;
    }
}

/* 自然皮肤棋子 */
.piece.skin-nature { background: transparent !important; box-shadow: none !important; }


/* ========================================= */
/* [Alpha 0.7.9.3] 两种落子动画风格           */
/* Drop Animation Styles: Fast / Slow        */
/* 基于 Alpha 0.7.9.2 原版动画还原            */
/* 速度和回弹相互独立，统一时长               */
/* ========================================= */

/* 快速落子动画（Alpha 0.7.9.2 原版）- 无回弹 */
@keyframes dropFast {
    0% { 
        transform: scale(1.6) translateY(-30px); 
        opacity: 0; 
    } 
    60% { 
        transform: scale(0.95) translateY(2px); 
        opacity: 1; 
    }
    100% { 
        transform: scale(1) translateY(0); 
    } 
}

/* 慢速落子动画 - 无回弹 */
@keyframes dropSlow {
    0% { 
        transform: scale(1.6) translateY(-30px); 
        opacity: 0; 
    } 
    60% { 
        transform: scale(0.95) translateY(2px); 
        opacity: 1; 
    }
    100% { 
        transform: scale(1) translateY(0); 
    } 
}

/* 快速 + 回弹（时长与快速无回弹相同）*/
@keyframes dropFastBounce {
    0% { 
        transform: scale(1.6) translateY(-30px); 
        opacity: 0; 
    } 
    45% { 
        transform: scale(0.88) translateY(4px); 
        opacity: 1; 
    }
    70% {
        transform: scale(1.1) translateY(-4px);
    }
    88% {
        transform: scale(0.96) translateY(1px);
    }
    100% { 
        transform: scale(1) translateY(0); 
    } 
}

/* 慢速 + 回弹（时长与慢速无回弹相同）*/
@keyframes dropSlowBounce {
    0% { 
        transform: scale(1.6) translateY(-30px); 
        opacity: 0; 
    } 
    45% { 
        transform: scale(0.88) translateY(4px); 
        opacity: 1; 
    }
    70% {
        transform: scale(1.1) translateY(-4px);
    }
    88% {
        transform: scale(0.96) translateY(1px);
    }
    100% { 
        transform: scale(1) translateY(0); 
    } 
}

/* 动画类 - 速度和回弹独立，统一时长 */
.piece.drop-fast {
    animation: dropFast 0.25s ease-out;
}

.piece.drop-fast-bounce {
    animation: dropFastBounce 0.25s ease-out;
}

.piece.drop-slow {
    animation: dropSlow 0.45s ease-out;
}

.piece.drop-slow-bounce {
    animation: dropSlowBounce 0.45s ease-out;
}


/* ========================================= */
/* [Alpha 0.7.9.3] 黑白棋子波纹气场系统       */
/* 黑子：墨水喷溅 - 真实墨迹飞溅感            */
/* 白子：优雅涟漪 - 白色为主的柔和波纹        */
/* ========================================= */

/* ============ 黑子：墨水喷溅效果 ============ */

/* 中心墨点冲击 */
.ink-center-blot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
    transform: translate(-50%, -50%) scale(0.3);
    pointer-events: none;
    z-index: 15;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    animation: inkBlotBurst 0.35s ease-out forwards;
}

@keyframes inkBlotBurst {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.85;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* 主要墨迹飞溅 - 不规则墨点 */
.ink-splatter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--splat-size, 5px);
    height: calc(var(--splat-size, 5px) * var(--splat-stretch, 1));
    transform: translate(-50%, -50%) rotate(var(--splat-rotation, 0deg));
    pointer-events: none;
    z-index: 16;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.9) 60%,
        rgba(0, 0, 0, 0.7) 80%,
        rgba(0, 0, 0, 0.3) 100%);
    border-radius: 50% 45% 55% 50% / 45% 50% 50% 55%;
    animation: inkSplatterFly 0.4s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

@keyframes inkSplatterFly {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) rotate(var(--splat-rotation, 0deg)) scale(0.2);
        opacity: 1;
    }
    20% {
        transform: translate(-50%, -50%) translate(calc(var(--splat-x) * 0.3), calc(var(--splat-y) * 0.3)) rotate(var(--splat-rotation, 0deg)) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) translate(calc(var(--splat-x) * 0.7), calc(var(--splat-y) * 0.7)) rotate(var(--splat-rotation, 0deg)) scale(1);
        opacity: 0.85;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--splat-x), var(--splat-y)) rotate(var(--splat-rotation, 0deg)) scale(0.7);
        opacity: 0;
    }
}

/* 细小墨滴 - 更远更小 */
.ink-tiny-drop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--drop-size, 3px);
    height: var(--drop-size, 3px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 17;
    background: rgba(0, 0, 0, 0.92);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    animation: inkTinyFly 0.5s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

@keyframes inkTinyFly {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) translate(calc(var(--drop-x) * 0.4), calc(var(--drop-y) * 0.4)) scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--drop-x), var(--drop-y)) scale(0.5);
        opacity: 0;
    }
}

/* ============ 白子：优雅白色涟漪 ============ */

/* 白色同心圆波纹 - 淡灰边框，优雅内敛 */
.white-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;
    z-index: 15;
    border: 2px solid rgba(160, 165, 175, 0.7);
    background: transparent;
    box-shadow: 
        0 0 8px rgba(180, 185, 195, 0.4),
        0 0 16px rgba(200, 205, 215, 0.2),
        inset 0 0 6px rgba(220, 225, 235, 0.25);
    animation: whiteRingExpand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes whiteRingExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.9;
        border-width: 2.5px;
        border-color: rgba(150, 155, 165, 0.8);
    }
    40% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
        border-width: 2px;
        border-color: rgba(170, 175, 185, 0.6);
    }
    70% {
        transform: translate(-50%, -50%) scale(2.0);
        opacity: 0.35;
        border-width: 1.5px;
        border-color: rgba(190, 195, 205, 0.4);
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
        border-width: 1px;
    }
}

/* 中心柔光 - 纯白色光晕 */
.white-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    pointer-events: none;
    z-index: 16;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(250, 250, 252, 0.7) 30%,
        rgba(240, 242, 245, 0.4) 60%,
        transparent 100%);
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.5),
        0 0 30px rgba(240, 242, 248, 0.3);
    animation: whiteGlowPulse 0.4s ease-out forwards;
}

@keyframes whiteGlowPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.85;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* 白色光点散落 */
.white-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 17;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(250, 250, 255, 0.9) 50%,
        rgba(240, 242, 248, 0.6) 100%);
    box-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 8px rgba(245, 248, 255, 0.5);
    animation: whiteSparkFly 0.45s ease-out forwards;
}

@keyframes whiteSparkFly {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.5);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) translate(calc(var(--spark-x) * 0.4), calc(var(--spark-y) * 0.5)) scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--spark-x), var(--spark-y)) scale(0.4);
        opacity: 0;
    }
}

/* === 旧版样式兼容（隐藏）=== */
.piece-ripple, .ink-ripple, .ink-main, .ink-second, .ink-edge, .ink-splash,
.water-ring, .water-splash-center, .water-drop {
    display: none;
}


/* ========================================= */
/* [Alpha 0.7.9.3] 自然棋子落子特效系统      */
/* Nature Piece Drop Effects - Enhanced      */
/* ========================================= */

/* === 落叶飘落特效 === */
.nature-leaf {
    position: absolute;
    border-radius: 50% 0 50% 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(var(--start-x), var(--start-y)) rotate(0deg);
    pointer-events: none;
    z-index: 25;
    opacity: 0;
    background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%),
        linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.15) 100%);
    background-blend-mode: overlay;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.2),
        inset 0 1px 2px rgba(255,255,255,0.3);
    animation: leafFall 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes leafFall {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--start-x), var(--start-y)) rotate(0deg) scale(0.3);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--start-x), calc(var(--start-y) + 3px)) rotate(calc(var(--rotation) * 0.15)) scale(1.1);
    }
    40% {
        opacity: 0.95;
        transform: translate(-50%, -50%) translate(calc(var(--start-x) + var(--end-x) * 0.3), calc(var(--start-y) + var(--end-y) * 0.3)) rotate(calc(var(--rotation) * 0.4)) scale(1);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translate(calc(var(--end-x) * 0.7), calc(var(--end-y) * 0.7)) rotate(calc(var(--rotation) * 0.75)) scale(0.85);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--end-x), var(--end-y)) rotate(var(--rotation)) scale(0.5);
    }
}

/* 落叶尘土效果 */
.nature-leaf-dust {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    background: radial-gradient(circle, 
        rgba(139, 69, 19, 0.25) 0%, 
        rgba(160, 82, 45, 0.15) 30%, 
        rgba(210, 105, 30, 0.08) 60%, 
        transparent 80%);
    pointer-events: none;
    z-index: 24;
    animation: leafDustPuff 0.6s ease-out forwards;
}

@keyframes leafDustPuff {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* === 阳光特效系统 === */

/* 核心闪光（瞬间爆发） */
.nature-sun-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 200, 0.9) 20%, 
        rgba(255, 215, 0, 0.6) 40%, 
        transparent 70%);
    pointer-events: none;
    z-index: 30;
    animation: sunFlashBurst 0.25s ease-out forwards;
}

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

/* 主光晕（温暖扩散） */
.nature-sun-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: radial-gradient(circle, 
        rgba(255, 223, 0, 0.9) 0%, 
        rgba(255, 193, 7, 0.7) 25%, 
        rgba(255, 152, 0, 0.5) 50%, 
        rgba(255, 87, 34, 0.2) 75%, 
        transparent 100%);
    pointer-events: none;
    z-index: 17;
    box-shadow: 
        0 0 20px rgba(255, 193, 7, 0.5),
        0 0 40px rgba(255, 152, 0, 0.3);
    animation: sunGlowExpand 0.7s ease-out forwards;
}

@keyframes sunGlowExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0.85;
    }
    70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* 外层光环 */
.nature-sun-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    border: 3px solid rgba(255, 193, 7, 0.8);
    background: transparent;
    pointer-events: none;
    z-index: 18;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.6),
        inset 0 0 15px rgba(255, 193, 7, 0.3);
    animation: sunRingExpand 0.6s ease-out forwards;
}

@keyframes sunRingExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
        border-width: 4px;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.7;
        border-width: 2px;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
        border-width: 1px;
    }
}

/* 光芒射线 */
.nature-sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 35px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 223, 0, 0.95) 20%,
        rgba(255, 193, 7, 0.7) 50%,
        rgba(255, 152, 0, 0.3) 80%,
        transparent 100%);
    transform-origin: center bottom;
    transform: translate(-50%, -100%) rotate(var(--ray-angle)) scaleY(0);
    pointer-events: none;
    z-index: 19;
    border-radius: 2px;
    box-shadow:
        0 0 6px rgba(255, 215, 0, 0.8),
        0 0 12px rgba(255, 193, 7, 0.4);
    animation: sunRayShoot 0.5s ease-out forwards;
}

@keyframes sunRayShoot {
    0% {
        transform: translate(-50%, -100%) rotate(var(--ray-angle)) scaleY(0);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -100%) rotate(var(--ray-angle)) scaleY(1.3);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -100%) rotate(var(--ray-angle)) scaleY(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -100%) rotate(var(--ray-angle)) scaleY(0.2);
        opacity: 0;
    }
}

/* 金色粒子（闪烁飞散） */
.nature-sun-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 223, 0, 1) 40%,
        rgba(255, 193, 7, 0.8) 70%,
        transparent 100%);
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(0);
    pointer-events: none;
    z-index: 20;
    box-shadow:
        0 0 8px rgba(255, 215, 0, 1),
        0 0 16px rgba(255, 193, 7, 0.6);
    animation: sunParticleFly 0.7s ease-out forwards;
}

@keyframes sunParticleFly {
    0% {
        transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(0) scale(0.5);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-25px) scale(1.2);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-40px) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(-55px) scale(0.3);
        opacity: 0;
    }
}

/* ========================================= */
/* [Alpha 0.7.9.6] 冰火静态动效 v2 - Premium  */
/* 极寒冰华 / 炽焰余烬                        */
/* ========================================= */

.piece.skin-ice-fire {
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
    isolation: isolate;
}

.piece.skin-ice-fire.p1,
.piece.skin-ice-fire.p2 {
    background: transparent;
    box-shadow: none;
    border: none;
}

.piece.skin-ice-fire.p1::before,
.piece.skin-ice-fire.p1::after,
.piece.skin-ice-fire.p2::before,
.piece.skin-ice-fire.p2::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* === 冰系「冰华之冠」静态动效 === */

/* 冰棋子 ::before - 外层寒光脉冲环 */
.piece.skin-ice-fire.p1::before {
    inset: -7px;
    z-index: 15;
    background: radial-gradient(
        circle,
        rgba(180, 225, 255, 0.08) 40%,
        rgba(140, 210, 255, 0.25) 65%,
        rgba(100, 190, 255, 0.15) 80%,
        transparent 100%
    );
    filter: blur(2px);
    animation: iceSAuraPulse 3s ease-in-out infinite;
}

/* 冰棋子 ::after - 内层霜纹光环 */
.piece.skin-ice-fire.p1::after {
    inset: -4px;
    z-index: 16;
    border: 1.5px solid rgba(200, 235, 255, 0.35);
    box-shadow:
        0 0 8px rgba(170, 220, 255, 0.3),
        inset 0 0 6px rgba(200, 240, 255, 0.15);
    animation: iceSRingBreath 4s ease-in-out infinite;
}

/* 冰晶轨道容器 - 整体缓慢公转 */
.ice-s-orbit {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;
    animation: iceSOrbitSpin 12s linear infinite;
}

/* 单颗冰晶 - 五边形晶体 */
.ice-s-crystal {
    position: absolute;
    width: 3.5px;
    height: 5px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(210, 240, 255, 0.8) 50%,
        rgba(160, 215, 250, 0.5) 100%
    );
    clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
    box-shadow:
        0 0 4px rgba(200, 235, 255, 0.8),
        0 0 8px rgba(150, 210, 250, 0.4);
    animation: iceSCrystalTwinkle 2.5s ease-in-out infinite;
}

/* 霜尘微粒 */
.ice-s-dust {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 19;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(220, 245, 255, 0.6) 60%,
        transparent 100%
    );
    box-shadow: 0 0 3px rgba(200, 235, 255, 0.7);
    animation: iceSDustFloat 3.5s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* 寒雾底层 */
.ice-s-mist {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 40%;
    border-radius: 0 0 50% 50%;
    pointer-events: none;
    z-index: 13;
    background: radial-gradient(
        ellipse 100% 100% at 50% 0%,
        rgba(200, 240, 255, 0.2) 0%,
        rgba(170, 225, 255, 0.12) 40%,
        rgba(140, 210, 250, 0.05) 70%,
        transparent 100%
    );
    filter: blur(2.5px);
    animation: iceSMistDrift 4.5s ease-in-out infinite;
}

/* === 火系「炽焰余烬」静态动效 === */

/* 火棋子 ::before - 外层焰冠脉冲 */
.piece.skin-ice-fire.p2::before {
    inset: -7px;
    z-index: 15;
    background: radial-gradient(
        circle,
        rgba(255, 200, 100, 0.1) 30%,
        rgba(255, 150, 50, 0.22) 55%,
        rgba(255, 100, 20, 0.15) 75%,
        transparent 100%
    );
    filter: blur(2.5px);
    mix-blend-mode: screen;
    animation: fireSAuraPulse 2s ease-in-out infinite;
}

/* 火棋子 ::after - 内层焰环 */
.piece.skin-ice-fire.p2::after {
    inset: -4px;
    z-index: 16;
    border: 1.5px solid rgba(255, 180, 80, 0.3);
    box-shadow:
        0 0 8px rgba(255, 150, 50, 0.35),
        0 0 16px rgba(255, 100, 20, 0.15),
        inset 0 0 6px rgba(255, 200, 100, 0.1);
    animation: fireSRingFlicker 1.8s ease-in-out infinite;
}

/* 上升火星 */
.fire-s-ember {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255, 255, 230, 0.98) 0%,
        rgba(255, 210, 100, 0.9) 40%,
        rgba(255, 150, 30, 0.6) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 4px rgba(255, 200, 80, 0.9),
        0 0 8px rgba(255, 130, 20, 0.5);
    animation: fireSEmberRise 2.2s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* 热浪扰动层 */
.fire-s-haze {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 13;
    background: conic-gradient(
        from 0deg,
        rgba(255, 180, 80, 0) 0deg,
        rgba(255, 160, 50, 0.12) 45deg,
        rgba(255, 130, 30, 0.08) 90deg,
        rgba(255, 180, 80, 0) 135deg,
        rgba(255, 150, 40, 0.1) 225deg,
        rgba(255, 180, 80, 0) 360deg
    );
    filter: blur(2px);
    animation: fireSHazeSpin 6s linear infinite;
}

/* 炽光火花（削弱至80%：尺寸/亮度/频率） */
.fire-s-spark {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 21;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.76);
    box-shadow:
        0 0 2.5px rgba(255, 255, 200, 0.72),
        0 0 5px rgba(255, 200, 80, 0.48);
    animation: fireSSparkPop 2.25s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* === 冰系动画关键帧 === */

@keyframes iceSAuraPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.98); }
    50% { opacity: 0.85; transform: scale(1.04); }
}

@keyframes iceSRingBreath {
    0%, 100% { opacity: 0.3; transform: scale(0.97); border-color: rgba(200, 235, 255, 0.25); }
    50% { opacity: 0.7; transform: scale(1.03); border-color: rgba(200, 235, 255, 0.5); }
}

@keyframes iceSOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes iceSCrystalTwinkle {
    0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.65); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes iceSDustFloat {
    0%, 100% {
        opacity: 0.15;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.6);
    }
    50% {
        opacity: 0.85;
        transform: translate(-50%, -50%) translate(var(--drift-x, 0px), var(--drift-y, -2px)) scale(1.2);
    }
}

@keyframes iceSMistDrift {
    0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleX(0.9); }
    50% { opacity: 0.65; transform: translateX(-50%) scaleX(1.1) translateY(2px); }
}

/* === 火系动画关键帧 === */

@keyframes fireSAuraPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.98); }
    35% { opacity: 0.95; transform: scale(1.06); }
    70% { opacity: 0.65; transform: scale(1.02); }
}

@keyframes fireSRingFlicker {
    0%, 100% { opacity: 0.3; transform: scale(0.97); }
    25% { opacity: 0.75; transform: scale(1.04); }
    50% { opacity: 0.5; transform: scale(1.01); }
    75% { opacity: 0.85; transform: scale(1.05); }
}

@keyframes fireSEmberRise {
    0%, 100% {
        opacity: 0.15;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--sway, 0px), calc(var(--rise, 3px) * -0.4)) scale(1.2);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translate(calc(var(--sway, 0px) * -0.5), calc(var(--rise, 3px) * -0.8)) scale(0.9);
    }
}

@keyframes fireSHazeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fireSSparkPop {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
    40% { opacity: 0.64; transform: translate(-50%, -50%) scale(0.85); }
    60% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
}

/* Keep ice/fire drop animation behavior unchanged */
.piece.skin-ice-fire.p1.drop-fast,
.piece.skin-ice-fire.p2.drop-fast {
    animation: dropFast 0.25s ease-out forwards;
}

.piece.skin-ice-fire.p1.drop-fast-bounce,
.piece.skin-ice-fire.p2.drop-fast-bounce {
    animation: dropFastBounce 0.25s ease-out forwards;
}

.piece.skin-ice-fire.p1.drop-slow,
.piece.skin-ice-fire.p2.drop-slow {
    animation: dropSlow 0.45s ease-out forwards;
}

.piece.skin-ice-fire.p1.drop-slow-bounce,
.piece.skin-ice-fire.p2.drop-slow-bounce {
    animation: dropSlowBounce 0.45s ease-out forwards;
}

/* Static toggle: completely hide all static effect nodes */
.piece.skin-ice-fire.p1.no-static-anim::before,
.piece.skin-ice-fire.p1.no-static-anim::after,
.piece.skin-ice-fire.p1.no-static-anim .ice-s-orbit,
.piece.skin-ice-fire.p1.no-static-anim .ice-s-crystal,
.piece.skin-ice-fire.p1.no-static-anim .ice-s-dust,
.piece.skin-ice-fire.p1.no-static-anim .ice-s-mist,
.piece.skin-ice-fire.p2.no-static-anim::before,
.piece.skin-ice-fire.p2.no-static-anim::after,
.piece.skin-ice-fire.p2.no-static-anim .fire-s-ember,
.piece.skin-ice-fire.p2.no-static-anim .fire-s-haze,
.piece.skin-ice-fire.p2.no-static-anim .fire-s-spark {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Pause static layers while drop animation is active */
.piece.skin-ice-fire.p1.drop-fast::before,
.piece.skin-ice-fire.p1.drop-fast-bounce::before,
.piece.skin-ice-fire.p1.drop-slow::before,
.piece.skin-ice-fire.p1.drop-slow-bounce::before,
.piece.skin-ice-fire.p1.drop-fast::after,
.piece.skin-ice-fire.p1.drop-fast-bounce::after,
.piece.skin-ice-fire.p1.drop-slow::after,
.piece.skin-ice-fire.p1.drop-slow-bounce::after,
.piece.skin-ice-fire.p1.drop-fast .ice-s-orbit,
.piece.skin-ice-fire.p1.drop-fast-bounce .ice-s-orbit,
.piece.skin-ice-fire.p1.drop-slow .ice-s-orbit,
.piece.skin-ice-fire.p1.drop-slow-bounce .ice-s-orbit,
.piece.skin-ice-fire.p1.drop-fast .ice-s-dust,
.piece.skin-ice-fire.p1.drop-fast-bounce .ice-s-dust,
.piece.skin-ice-fire.p1.drop-slow .ice-s-dust,
.piece.skin-ice-fire.p1.drop-slow-bounce .ice-s-dust,
.piece.skin-ice-fire.p1.drop-fast .ice-s-mist,
.piece.skin-ice-fire.p1.drop-fast-bounce .ice-s-mist,
.piece.skin-ice-fire.p1.drop-slow .ice-s-mist,
.piece.skin-ice-fire.p1.drop-slow-bounce .ice-s-mist,
.piece.skin-ice-fire.p2.drop-fast::before,
.piece.skin-ice-fire.p2.drop-fast-bounce::before,
.piece.skin-ice-fire.p2.drop-slow::before,
.piece.skin-ice-fire.p2.drop-slow-bounce::before,
.piece.skin-ice-fire.p2.drop-fast::after,
.piece.skin-ice-fire.p2.drop-fast-bounce::after,
.piece.skin-ice-fire.p2.drop-slow::after,
.piece.skin-ice-fire.p2.drop-slow-bounce::after,
.piece.skin-ice-fire.p2.drop-fast .fire-s-ember,
.piece.skin-ice-fire.p2.drop-fast-bounce .fire-s-ember,
.piece.skin-ice-fire.p2.drop-slow .fire-s-ember,
.piece.skin-ice-fire.p2.drop-slow-bounce .fire-s-ember,
.piece.skin-ice-fire.p2.drop-fast .fire-s-haze,
.piece.skin-ice-fire.p2.drop-fast-bounce .fire-s-haze,
.piece.skin-ice-fire.p2.drop-slow .fire-s-haze,
.piece.skin-ice-fire.p2.drop-slow-bounce .fire-s-haze,
.piece.skin-ice-fire.p2.drop-fast .fire-s-spark,
.piece.skin-ice-fire.p2.drop-fast-bounce .fire-s-spark,
.piece.skin-ice-fire.p2.drop-slow .fire-s-spark,
.piece.skin-ice-fire.p2.drop-slow-bounce .fire-s-spark {
    animation: none !important;
}

/* Mobile: lighter shadow load for performance */
@media (max-width: 600px) {
    .ice-s-crystal {
        box-shadow:
            0 0 3px rgba(200, 235, 255, 0.6),
            0 0 5px rgba(150, 210, 250, 0.3);
    }

    .fire-s-ember {
        box-shadow:
            0 0 3px rgba(255, 200, 80, 0.7),
            0 0 5px rgba(255, 130, 20, 0.4);
    }
}


/* =========================================
   [Alpha 0.7.9.6] 冰火落子特效 v2 - Premium
   Ice Drop「极寒碎裂」/ Fire Drop「烈焰轰击」
   ========================================= */

/* 冰爆核心闪光 */
.ice-d-flash {
    position: absolute;
    top: 50%; left: 50%;
    width: 120%; height: 120%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none; z-index: 18;
    background: radial-gradient(circle,
        rgba(255,255,255,1) 0%, rgba(220,245,255,0.9) 25%,
        rgba(170,220,255,0.6) 50%, rgba(130,200,250,0.3) 75%, transparent 100%);
    animation: iceDFlash 0.3s ease-out forwards;
}
@keyframes iceDFlash {
    0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
    50%  { transform: translate(-50%,-50%) scale(1.2); opacity: 0.85; }
    100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; }
}

/* 霜冻冲击波环 */
.ice-d-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(0.3);
    pointer-events: none; z-index: 15;
    border: 2.5px solid rgba(180,225,255,0.9);
    background: transparent;
    box-shadow: 0 0 10px rgba(170,220,255,0.6), 0 0 20px rgba(140,200,250,0.3),
        inset 0 0 6px rgba(200,240,255,0.25);
    animation: iceDRing 0.55s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes iceDRing {
    0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 1; border-width: 3px; border-color: rgba(210,240,255,0.95); }
    40%  { transform: translate(-50%,-50%) scale(1.5); opacity: 0.7; border-width: 2px; border-color: rgba(170,220,255,0.75); }
    100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; border-width: 1px; }
}

/* 大冰晶碎片 - 雪白质感(anime.js控制运动) */
.ice-d-shard {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none; z-index: 17;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.95) 0%, rgba(240,250,255,0.9) 35%,
        rgba(220,245,255,0.8) 65%, rgba(200,235,255,0.6) 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 5px rgba(200,235,255,0.9), 0 0 10px rgba(150,210,250,0.5);
    opacity: 0;
}

/* 中冰晶碎片 - 冰蓝碎裂质感，棱角更锐利 */
.ice-d-shard-m {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none; z-index: 17;
    background: linear-gradient(160deg,
        rgba(190,230,255,0.95) 0%, rgba(140,210,250,0.85) 40%,
        rgba(100,185,240,0.7) 70%, rgba(70,160,230,0.5) 100%);
    clip-path: polygon(30% 0%, 80% 0%, 100% 45%, 70% 100%, 10% 80%, 0% 30%);
    box-shadow: 0 0 3px rgba(140,210,250,0.85), 0 0 7px rgba(100,185,240,0.4);
    opacity: 0;
}

/* 小冰晶碎片 - 深冰蓝碎冰质感，更通透 */
.ice-d-shard-s {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none; z-index: 17;
    background: linear-gradient(145deg,
        rgba(130,200,250,0.9) 0%, rgba(90,170,240,0.8) 45%,
        rgba(60,140,220,0.65) 100%);
    clip-path: polygon(50% 0%, 100% 35%, 85% 100%, 15% 100%, 0% 35%);
    box-shadow: 0 0 2px rgba(100,185,240,0.8), 0 0 5px rgba(70,160,230,0.35);
    opacity: 0;
}

/* 寒气雾扩散 */
.ice-d-mist {
    position: absolute; top: 50%; left: 50%;
    width: 140%; height: 140%; border-radius: 50%;
    transform: translate(-50%,-50%) scale(0.4);
    pointer-events: none; z-index: 14;
    background: radial-gradient(circle,
        rgba(200,240,255,0.45) 0%, rgba(170,225,255,0.3) 30%,
        rgba(140,210,250,0.15) 55%, transparent 100%);
    filter: blur(3px);
    animation: iceDMist 0.65s ease-out forwards;
}
@keyframes iceDMist {
    0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 0; }
    25%  { transform: translate(-50%,-50%) scale(0.9); opacity: 0.85; }
    55%  { transform: translate(-50%,-50%) scale(1.3); opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
}

/* 火焰核心爆发 */
.fire-d-flash {
    position: absolute; top: 50%; left: 50%;
    width: 130%; height: 130%; border-radius: 50%;
    transform: translate(-50%,-50%) scale(0);
    pointer-events: none; z-index: 18;
    background: radial-gradient(circle,
        rgba(255,255,255,1) 0%, rgba(255,255,200,0.95) 15%,
        rgba(255,220,100,0.8) 30%, rgba(255,160,50,0.55) 50%,
        rgba(255,100,0,0.3) 70%, transparent 100%);
    animation: fireDFlash 0.35s ease-out forwards;
}
@keyframes fireDFlash {
    0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
    40%  { transform: translate(-50%,-50%) scale(1.3); opacity: 0.9; }
    100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
}

/* 焰环冲击波 */
.fire-d-ring {
    position: absolute; top: 50%; left: 50%;
    width: 100%; height: 100%; border-radius: 50%;
    transform: translate(-50%,-50%) scale(0.3);
    pointer-events: none; z-index: 15;
    border: 2.5px solid rgba(255,160,30,0.9);
    background: transparent;
    box-shadow: 0 0 12px rgba(255,150,30,0.7), 0 0 25px rgba(255,100,0,0.4),
        0 0 40px rgba(255,70,0,0.2), inset 0 0 8px rgba(255,200,80,0.3);
    animation: fireDRing 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes fireDRing {
    0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 1; border-width: 3.5px; border-color: rgba(255,220,80,0.95); }
    35%  { transform: translate(-50%,-50%) scale(1.4); opacity: 0.8; border-width: 2.5px; border-color: rgba(255,170,40,0.8); }
    100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; border-width: 1px; }
}

/* 岩浆皇冠 - 撞击液面隆起的环形冠(CSS动画) */
.fire-d-crown {
    position: absolute; top: 50%; left: 50%;
    width: 110%; height: 110%; border-radius: 50%;
    transform: translate(-50%,-50%) scale(0.3);
    pointer-events: none; z-index: 16;
    border: 3px solid transparent;
    background: transparent;
    box-shadow:
        0 0 8px 2px rgba(255,200,60,0.7),
        0 0 16px 4px rgba(255,140,20,0.4),
        inset 0 0 6px 1px rgba(255,220,100,0.5);
    animation: fireDCrown 0.5s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
@keyframes fireDCrown {
    0%   { transform: translate(-50%,-50%) scale(0.3) translateY(0);
           opacity: 1; box-shadow: 0 0 10px 3px rgba(255,220,80,0.9), 0 0 20px 6px rgba(255,150,30,0.5), inset 0 0 8px 2px rgba(255,240,120,0.6); }
    30%  { transform: translate(-50%,-50%) scale(1.2) translateY(-8%);
           opacity: 0.9; box-shadow: 0 0 14px 4px rgba(255,200,60,0.75), 0 0 28px 8px rgba(255,130,20,0.35), inset 0 0 6px 1px rgba(255,220,100,0.4); }
    60%  { transform: translate(-50%,-50%) scale(1.8) translateY(-18%);
           opacity: 0.5; box-shadow: 0 0 10px 2px rgba(255,180,40,0.5), 0 0 20px 5px rgba(255,110,10,0.2); }
    100% { transform: translate(-50%,-50%) scale(2.4) translateY(-30%);
           opacity: 0; }
}

/* Worthington反冲柱 - 撞击后中心垂直反弹的岩浆柱(anime.js控制) */
/* 使用 margin-left 居中，不依赖 transform translate，防止 anime.js 覆盖偏移 */
.fire-d-jet {
    position: absolute;
    bottom: 50%; left: 50%;
    width: 14px; height: 30px;
    margin-left: -7px;
    background: linear-gradient(to top,
        rgba(255,255,230,1) 0%, rgba(255,240,150,0.95) 12%,
        rgba(255,200,70,0.88) 28%, rgba(255,150,30,0.75) 48%,
        rgba(255,100,10,0.5) 68%, rgba(220,60,0,0.2) 88%, transparent 100%);
    border-radius: 35% 35% 20% 20% / 45% 45% 25% 25%;
    transform-origin: bottom center;
    pointer-events: none; z-index: 19; opacity: 0;
    filter: blur(0.3px);
}

/* 熔岩飞溅液滴(anime.js控制运动) */
.fire-d-splash {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none; z-index: 17;
    background: radial-gradient(circle,
        rgba(255,255,220,1) 0%, rgba(255,220,100,0.95) 35%,
        rgba(255,170,40,0.8) 65%, rgba(255,110,10,0.5) 100%);
    box-shadow: 0 0 5px rgba(255,200,70,0.9), 0 0 10px rgba(255,140,20,0.5),
        0 0 16px rgba(255,80,0,0.25);
    opacity: 0;
}

/* 热浪涌动 */
.fire-d-surge {
    position: absolute; top: 50%; left: 50%;
    width: 150%; height: 150%; border-radius: 50%;
    transform: translate(-50%,-50%) scale(0.4);
    pointer-events: none; z-index: 14;
    background: radial-gradient(ellipse 100% 120% at 50% 55%,
        rgba(255,210,100,0.35) 0%, rgba(255,160,50,0.25) 25%,
        rgba(255,110,10,0.14) 50%, rgba(255,70,0,0.06) 75%, transparent 100%);
    filter: blur(3.5px);
    animation: fireDSurge 0.6s ease-out forwards;
}
@keyframes fireDSurge {
    0%   { transform: translate(-50%,-50%) scale(0.4) translateY(0); opacity: 0; }
    25%  { transform: translate(-50%,-50%) scale(0.85) translateY(-4%); opacity: 0.8; }
    55%  { transform: translate(-50%,-50%) scale(1.2) translateY(-10%); opacity: 0.5; }
    100% { transform: translate(-50%,-50%) scale(1.6) translateY(-20%); opacity: 0; }
}

/* 冰火落子移动端适配 */
@media (max-width: 600px) {
    .ice-d-ring { box-shadow: 0 0 6px rgba(170,220,255,0.5), 0 0 12px rgba(140,200,250,0.2); }
    .ice-d-shard { box-shadow: 0 0 4px rgba(200,235,255,0.7); }
    .ice-d-shard-m { box-shadow: 0 0 2px rgba(140,210,250,0.7); }
    .ice-d-shard-s { box-shadow: 0 0 1.5px rgba(100,185,240,0.6); }
    .ice-d-mist { filter: blur(2px); }
    .fire-d-ring { box-shadow: 0 0 8px rgba(255,150,30,0.6), 0 0 16px rgba(255,100,0,0.3); }
    .fire-d-crown { box-shadow: 0 0 6px 1px rgba(255,200,60,0.5), 0 0 12px 2px rgba(255,140,20,0.3); }
    .fire-d-jet { filter: blur(0.2px); }
    .fire-d-splash { box-shadow: 0 0 4px rgba(255,200,70,0.7), 0 0 8px rgba(255,140,20,0.35); }
    .fire-d-surge { filter: blur(2.5px); }
}


/* ========================================= */
/* [Alpha 0.7.9.6] 冰/火主题预览样式         */
/* Ice & Fire Theme Preview Styles           */
/* 用于棋子选择器中的迷你预览                 */
/* ========================================= */

/* 冰晶棋子预览 - PNG模型（参照自然风格） */
/* 修复：移除复杂inset阴影，添加CSS渐变后备，与自然棋子保持一致的视觉效果 */
.piece-ice-preview {
    border-radius: 50%;
    background: url('images/ice.png') center/contain no-repeat, radial-gradient(circle at 30% 30%, #a8d8ff 0%, #6bb3e0 100%);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 火焰棋子预览 - PNG模型（参照自然风格） */
/* 修复：移除复杂inset阴影，添加CSS渐变后备，与自然棋子保持一致的视觉效果 */
.piece-fire-preview {
    border-radius: 50%;
    background: url('images/fire.png') center/contain no-repeat, radial-gradient(circle at 30% 30%, #ffd700 0%, #ff8c00 100%);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}