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

/*******************
    粉色边框特效 
********************/
.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;
    }
}

/* 2026-1-2 新增 */
/*******************
    蓝色气泡特效 
********************/
.vfx-blue-bubbles {
    position: relative;
    overflow: hidden;
    z-index: 101 !important;
}

.vfx-blue-bubbles::before,
.vfx-blue-bubbles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 191, 255, 0.3);
    animation: bubbles 2s ease-in-out infinite;
    pointer-events: none;
}

.vfx-blue-bubbles::before {
    width: 20px;
    height: 20px;
    top: -20px;
    left: 20%;
    animation-delay: 0s;
}

.vfx-blue-bubbles::after {
    width: 15px;
    height: 15px;
    top: -15px;
    left: 70%;
    animation-delay: 1s;
}

@keyframes bubbles {
    0% { 
        transform: translateY(0) scale(0); 
        opacity: 0;
    }
    20% { 
        opacity: 1;
    }
    100% { 
        transform: translateY(100px) scale(1.5); 
        opacity: 0;
    }
}

/*******************
    粉色闪烁边框 
********************/
.vfx-pink-blink-border {
    box-shadow: 0 0 0 2px #ff69b4, 0 0 15px rgba(255, 105, 180, 0.6);
    animation: blink 1s ease-in-out infinite;
    z-index: 101 !important;
}

@keyframes blink {
    0%, 50% { opacity: 1; box-shadow: 0 0 0 2px #ff69b4, 0 0 15px rgba(255, 105, 180, 0.6); }
    51%, 100% { opacity: 1; box-shadow: 0 0 0 1px #ff69b4, 0 0 5px rgba(255, 105, 180, 0.3); }
}

/*******************
    动态彩虹背景特效 - 支持图片 
********************/
.vfx-rainbow-bg {
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 101 !important;
}

/* 应用到图片上的样式 */
.vfx-rainbow-bg img {
    position: relative;
    z-index: 1;
    display: block;
    mix-blend-mode: screen;
}

/* 应用到其他元素上的样式 */
.vfx-rainbow-bg:not(img) {
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 1400% 1400%;
    animation: rainbow-bg 3s ease infinite;
}

/* 为图片父容器添加彩虹背景 */
.vfx-rainbow-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 1400% 1400%;
    animation: rainbow-bg 3s ease infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes rainbow-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/*******************
    红色缩放特效 
********************/
.vfx-red-scale {
    box-shadow: 0 0 0 2px #ff0000, 0 0 15px rgba(255, 0, 0, 0.6);
    animation: red-scale 1.5s ease-in-out infinite alternate;
    z-index: 101 !important;
}

@keyframes red-scale {
    from { transform: scale(1); box-shadow: 0 0 0 2px #ff0000, 0 0 15px rgba(255, 0, 0, 0.6); }
    to { transform: scale(1.05); box-shadow: 0 0 0 4px #ff0000, 0 0 25px rgba(255, 0, 0, 0.9); }
}

/*******************
     元老特效 
********************/
.vfx-elder {
    position: relative;
    overflow: hidden;
    z-index: 101 !important;
    box-shadow: 0 0 0 1px #ffd700, 0 0 15px rgba(255, 215, 0, 0.4);
    animation: elder-shine 2s ease-in-out infinite alternate;
}

@keyframes elder-shine {
    from {
        box-shadow: 0 0 0 1px #ffd700, 0 0 15px rgba(255, 215, 0, 0.4);
    }
    to {
        box-shadow: 0 0 0 2px #ffd700, 0 0 25px rgba(255, 215, 0, 0.7);
    }
}

/* 元老特效 - 皇冠图标 */
.vfx-elder::before {
    content: '👑';
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 15px;
    z-index: 102;
    animation: elder-crown-scale 2s ease-in-out infinite alternate;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

@keyframes elder-crown-scale {
    from { transform: scale(1); }
    to { transform: scale(1.3); }
}

/* 元老特效 - 金色光晕 */
.vfx-elder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: elder-aura 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 100;
}

@keyframes elder-aura {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.);
    }
}

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