/* 格子特效样式文件 */

/* 粉色边框特效 */
.vfx-pink-border {
    box-shadow: 0 0 0 2px #ff69b4, 0 0 10px rgba(255, 105, 180, 0.5);
    transition: all 0.3s ease;
    z-index: 101 !important;
}

/* 金色发光特效 */
.vfx-gold-glow {
    box-shadow: 0 0 0 2px #ffd700, 0 0 15px rgba(255, 215, 0, 0.6);
    animation: gold-glow 2s ease-in-out infinite alternate;
    z-index: 101 !important;
}

@keyframes gold-glow {
    from { 
        box-shadow: 0 0 0 2px #ffd700, 0 0 15px rgba(255, 215, 0, 0.6); 
    }
    to { 
        box-shadow: 0 0 0 3px #ffd700, 0 0 25px rgba(255, 215, 0, 0.9); 
    }
}

/* 彩虹边框特效 */
.vfx-rainbow-border {
    animation: rainbow-border 3s linear infinite;
    z-index: 101 !important;
}

@keyframes rainbow-border {
    0% { box-shadow: 0 0 0 2px #ff0000; }
    14% { box-shadow: 0 0 0 2px #ff7f00; }
    28% { box-shadow: 0 0 0 2px #ffff00; }
    42% { box-shadow: 0 0 0 2px #00ff00; }
    57% { box-shadow: 0 0 0 2px #0000ff; }
    71% { box-shadow: 0 0 0 2px #4b0082; }
    85% { box-shadow: 0 0 0 2px #9400d3; }
    100% { box-shadow: 0 0 0 2px #ff0000; }
}

/* 蓝色阴影特效 */
.vfx-blue-shadow {
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.8), 
                0 0 20px rgba(0, 191, 255, 0.4),
                0 0 30px rgba(0, 191, 255, 0.2);
    transition: all 0.3s ease;
    z-index: 101 !important;
}

/* 绿色脉动特效 */
.vfx-green-pulse {
    box-shadow: 0 0 0 2px #32cd32, 0 0 10px rgba(50, 205, 50, 0.5);
    animation: green-pulse 1.5s ease-in-out infinite;
    z-index: 101 !important;
}

@keyframes green-pulse {
    0% { 
        box-shadow: 0 0 0 2px #32cd32, 0 0 10px rgba(50, 205, 50, 0.5); 
    }
    50% { 
        box-shadow: 0 0 0 4px #32cd32, 0 0 20px rgba(50, 205, 50, 0.8); 
    }
    100% { 
        box-shadow: 0 0 0 2px #32cd32, 0 0 10px rgba(50, 205, 50, 0.5); 
    }
}

/* 紫色光晕特效 */
.vfx-purple-glow {
    box-shadow: 0 0 0 2px #9370db, 0 0 15px rgba(147, 112, 219, 0.7);
    transition: all 0.3s ease;
    z-index: 101 !important;
}

.vfx-purple-glow:hover {
    box-shadow: 0 0 0 3px #9370db, 0 0 25px rgba(147, 112, 219, 0.9);
}

/* 红色火焰特效 */
.vfx-red-flame {
    overflow: hidden;
}

.vfx-red-flame::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 0, 0, 0.1), transparent);
    animation: flame 2s linear infinite;
    pointer-events: none;
}

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

/* 黄色星星特效 */
.vfx-yellow-stars {
    position: relative;
    overflow: hidden;
}

.vfx-yellow-stars::after {
    content: '⭐⭐⭐';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    font-size: 20px;
    color: #ffd700;
    opacity: 0.6;
    animation: stars-fall 3s linear infinite;
    pointer-events: none;
}

@keyframes stars-fall {
    0% { 
        transform: translateY(-100%) rotate(0deg); 
        opacity: 0;
    }
    10% { 
        opacity: 0.6;
    }
    90% { 
        opacity: 0.6;
    }
    100% { 
        transform: translateY(100%) rotate(360deg); 
        opacity: 0;
    }
}

/* 蓝色水波纹特效 */
.vfx-blue-water {
    position: relative;
    overflow: hidden;
}

.vfx-blue-water::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, transparent 60%, rgba(0, 191, 255, 0.1) 70%, transparent 80%);
    animation: water-ripple 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes water-ripple {
    0% { 
        transform: scale(0.5); 
        opacity: 0.5;
    }
    50% { 
        transform: scale(1.5); 
        opacity: 0.2;
    }
    100% { 
        transform: scale(2); 
        opacity: 0;
    }
}

/* 特效叠加规则 */
/* 注意：多个特效叠加时，后面的特效会覆盖前面的特效 */
/* 建议每个格子只应用一个特效，或精心设计叠加效果 */