/* Idol 2048 主题 CSS - 图片覆盖样式 */

/*
使用说明：
1. 准备 idol 图片，命名为：tile-2.jpg?v=3, tile-4.jpg?v=3, ..., tile-2048.jpg?v=3, tile-4096.jpg?v=3, tile-8192.jpg?v=3, tile-16384.jpg?v=3, tile-32768.jpg?v=3
2. 将图片放到 images/idol-tiles/ 文件夹中
3. 在 index.html 中引入这个 CSS 文件
4. 支持的等级：2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768
*/

/* tile-2: 数字 2 的方块 */
.tile.tile-2 .tile-inner {
    background: url('../images/idol-tiles/tile-2.jpg?v=3') center center / cover no-repeat, #eee4da;
    color: transparent; /* 隐藏数字，只显示图片 */
}

/* tile-4: 数字 4 的方块 */
.tile.tile-4 .tile-inner {
    background: url('../images/idol-tiles/tile-4.jpg?v=3') center center / cover no-repeat, #ede0c8;
    color: transparent;
}

/* tile-8: 数字 8 的方块 */
.tile.tile-8 .tile-inner {
    background: url('../images/idol-tiles/tile-8.jpg?v=3') center center / cover no-repeat, #f2b179;
    color: transparent;
}

/* tile-16: 数字 16 的方块 */
.tile.tile-16 .tile-inner {
    background: url('../images/idol-tiles/tile-16.jpg?v=3') center center / cover no-repeat, #f59563;
    color: transparent;
}

/* tile-32: 数字 32 的方块 */
.tile.tile-32 .tile-inner {
    background: url('../images/idol-tiles/tile-32.jpg?v=3') center center / cover no-repeat, #f67c5f;
    color: transparent;
}

/* tile-64: 数字 64 的方块 */
.tile.tile-64 .tile-inner {
    background: url('../images/idol-tiles/tile-64.jpg?v=3') center center / cover no-repeat, #f65e3b;
    color: transparent;
}

/* tile-128: 数字 128 的方块 */
.tile.tile-128 .tile-inner {
    background: url('../images/idol-tiles/tile-128.jpg?v=3') center center / cover no-repeat, #edcf72;
    color: transparent;
}

/* tile-256: 数字 256 的方块 */
.tile.tile-256 .tile-inner {
    background: url('../images/idol-tiles/tile-256.jpg?v=3') center center / cover no-repeat, #edcc61;
    color: transparent;
}

/* tile-512: 数字 512 的方块 */
.tile.tile-512 .tile-inner {
    background: url('../images/idol-tiles/tile-512.jpg?v=3') center center / cover no-repeat, #edc850;
    color: transparent;
}

/* tile-1024: 数字 1024 的方块 */
.tile.tile-1024 .tile-inner {
    background: url('../images/idol-tiles/tile-1024.jpg?v=3') center center / cover no-repeat, #edc53f;
    color: transparent;
    box-shadow: none !important; /* 移除光晕 */
}

/* tile-2048: 数字 2048 的方块 */
.tile.tile-2048 .tile-inner {
    background: url('../images/idol-tiles/tile-2048.jpg?v=4') center center / cover no-repeat, #edc22e;
    color: transparent;
    box-shadow: 0 0 40px 15px rgba(243, 215, 116, 0.8), inset 0 0 0 2px rgba(255, 215, 0, 0.5) !important; /* 金色光晕 */
}

/* 2048合成庆祝动画 */
.tile.tile-2048-celebration {
    animation: celebrate-2048 2s ease-in-out forwards;
    z-index: 1000 !important;
}

@keyframes celebrate-2048 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.5);
    }
    80% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

/* tile-4096: 数字 4096 的方块 */
.tile-container .tile.tile-position-1-1.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-1-2.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-1-3.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-1-4.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-2-1.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-2-2.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-2-3.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-2-4.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-3-1.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-3-2.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-3-3.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-3-4.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-4-1.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-4-2.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-4-3.tile-4096.tile-super .tile-inner,
.tile-container .tile.tile-position-4-4.tile-4096.tile-super .tile-inner,
.tile.tile-4096.tile-super .tile-inner,
.tile.tile-4096 .tile-inner {
    background: url('../images/idol-tiles/tile-4096.jpg?v=3') center center / cover no-repeat !important;
    background-size: cover !important;
    color: transparent !important;
    box-shadow: 0 0 40px 15px rgba(240, 150, 255, 0.8), inset 0 0 0 2px rgba(200, 100, 255, 0.5) !important; /* 紫色光晕 */
}

/* tile-8192: 数字 8192 的方块 */
.tile-container .tile.tile-position-1-1.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-1-2.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-1-3.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-1-4.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-2-1.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-2-2.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-2-3.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-2-4.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-3-1.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-3-2.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-3-3.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-3-4.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-4-1.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-4-2.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-4-3.tile-8192.tile-super .tile-inner,
.tile-container .tile.tile-position-4-4.tile-8192.tile-super .tile-inner,
.tile.tile-8192.tile-super .tile-inner,
.tile.tile-8192 .tile-inner {
    background: url('../images/idol-tiles/tile-8192.jpg?v=3') center center / cover no-repeat !important;
    background-size: cover !important;
    color: transparent !important;
    box-shadow: 0 0 40px 15px rgba(100, 200, 255, 0.8), inset 0 0 0 2px rgba(50, 150, 255, 0.5) !important; /* 蓝色光晕 */
}

/* tile-16384: 数字 16384 的方块 */
.tile.tile-16384.tile-super .tile-inner,
.tile.tile-16384 .tile-inner {
    background: url('../images/idol-tiles/tile-16384.jpg?v=3') center center / cover no-repeat, linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: #fff !important;
    font-size: 35px !important;
    box-shadow: 0 0 40px 15px rgba(255, 100, 100, 0.8), inset 0 0 0 2px rgba(255, 50, 50, 0.5) !important; /* 红色光晕 */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* tile-32768: 数字 32768 的方块（终极形态）*/
.tile.tile-32768.tile-super .tile-inner,
.tile.tile-32768 .tile-inner {
    background: url('../images/idol-tiles/tile-32768.jpg?v=3') center center / cover no-repeat, linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: #fff !important;
    font-size: 35px !important;
    box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9), inset 0 0 0 3px rgba(255, 255, 255, 0.7) !important; /* 白色光晕 */
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    animation: rainbow-glow 3s ease-in-out infinite; /* 彩虹闪烁效果 */
}

@keyframes rainbow-glow {
    0%, 100% { box-shadow: 0 0 50px 20px rgba(255, 0, 0, 0.9), inset 0 0 0 3px rgba(255, 0, 0, 0.7) !important; }
    16% { box-shadow: 0 0 50px 20px rgba(255, 165, 0, 0.9), inset 0 0 0 3px rgba(255, 165, 0, 0.7) !important; }
    33% { box-shadow: 0 0 50px 20px rgba(255, 255, 0, 0.9), inset 0 0 0 3px rgba(255, 255, 0, 0.7) !important; }
    50% { box-shadow: 0 0 50px 20px rgba(0, 255, 0, 0.9), inset 0 0 0 3px rgba(0, 255, 0, 0.7) !important; }
    66% { box-shadow: 0 0 50px 20px rgba(0, 0, 255, 0.9), inset 0 0 0 3px rgba(0, 0, 255, 0.7) !important; }
    83% { box-shadow: 0 0 50px 20px rgba(75, 0, 130, 0.9), inset 0 0 0 3px rgba(75, 0, 130, 0.7) !important; }
}

/* 可选：如果想保留数字，注释掉上面的 color: transparent; 并使用以下样式 */
/*
.tile .tile-inner {
    background-size: cover !important;
    background-position: center !important;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 10px rgba(0,0,0,0.8);
    color: white !important;
}
*/

/* 可选：游戏背景定制 */
/*
body {
    background: url('../images/idol-tiles/background.jpg') center center / cover fixed no-repeat, #faf8ef;
}
*/

/* 可选：标题定制 */
/*
h1.title {
    color: #your-brand-color;
}
h1.title:before {
    content: "Idol ";
}
*/