kelompok06-2048/2048_Tiles_Colors.css

.tile-2 { 
    background: #00eaff55; 
    box-shadow: 0 0 12px #00eaff; 
}

.tile-4 { 
    background: #00ff9955; 
    box-shadow: 0 0 12px #00ff99; 
}

.tile-8 { 
    background: #ff00ff55; 
    box-shadow: 0 0 12px #ff00ff; 
}

.tile-16 { 
    background: #ff006655; 
    box-shadow: 0 0 12px #ff0066; 
}

.tile-32 { 
    background: #ffaa0055; 
    box-shadow: 0 0 12px #ffaa00; 
}

.tile-64 { 
    background: #ff000055; 
    box-shadow: 0 0 12px #ff0000; 
}

.tile-128 { 
    background: #5f00ff55; 
    box-shadow: 0 0 12px #5f00ff; 
}

.tile-256 { 
    background: rgba(75, 0, 130, 0.6); 
    box-shadow: 0 0 20px #4b0082; 
    color: white !important;
}

.tile-512 { 
    background: rgba(255, 69, 0, 0.6);
    box-shadow: 0 0 25px #ff4500; 
    color: white !important;
}

.tile-1024 { 
    background: rgba(212, 115, 130, 0.65); 
    box-shadow: 0 0 25px #d47382; 
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3); 
}

.tile-2048 { 
    background: #ffd70066; 
    box-shadow: 0 0 18px #ffd700;
    animation: goldShimmer 2.6s infinite;
}

@keyframes goldShimmer {
    0% { box-shadow: 0 0 12px #ffd70066; transform: translateZ(0); }
    50% { box-shadow: 0 0 30px #ffd700aa; transform: translateY(-2px); }
    100% { box-shadow: 0 0 12px #ffd70066; transform: translateZ(0); }
}

.tile-4096 { 
    background: #ff220066; 
    box-shadow: 0 0 20px #ff2200;
}

.tile-8192 { 
    background: #0044ff66; 
    box-shadow: 0 0 20px #0044ff;
}

.tile-16384 { 
    background: #ccff0066; 
    box-shadow: 0 0 20px #ccff00;
}

.tile-32768 { 
    background: #7700ff66; 
    box-shadow: 0 0 25px #7700ff;
}

.tile-65536 { 
    background: #000000aa; 
    box-shadow: 0 0 30px #ffffff, inset 0 0 10px #ffffff;
    border: 1px solid rgba(255,255,255,0.3);
    animation: pulseWhite 2s infinite;
}

@keyframes pulseWhite {
    0% { box-shadow: 0 0 20px #ffffff; }
    50% { box-shadow: 0 0 40px #ffffff, 0 0 10px #00eaff; }
    100% { box-shadow: 0 0 20px #ffffff; }
}

.tile-131072 {
    background: linear-gradient(135deg, 
        rgba(255, 0, 0, 0.5), 
        rgba(0, 255, 0, 0.5), 
        rgba(0, 0, 255, 0.5)
    );
    background-size: 200% 200%;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: holoMove 3s ease infinite;
}

@keyframes holoMove {
    0% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 25px #ff00ff; 
    }
    50% { 
        background-position: 100% 50%; 
        box-shadow: 0 0 25px #00ffff; 
    }
    100% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 25px #ff00ff; 
    }
}

.tile-262144 { 
    background: linear-gradient(-45deg, #ff0080, #ff8c00, #40e0d0, #9932cc);
    background-size: 300% 300%;
    color: white !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.6), 
        inset 0 0 20px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.8);
    animation: auroraFlow 5s ease infinite alternate;
}

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

.tile-524288 {
    background: radial-gradient(circle at center, #ffffac 0%, #ffeb3b 30%, #ff9800 60%, #d50000 100%);
    background-size: 200% 200%;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    box-shadow:
        0 0 30px #ff5722,
        0 0 60px #ffc107,
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.6);
    animation: sunBurn 3s infinite alternate ease-in-out;
}

@keyframes sunBurn {
    0% {
        background-position: 50% 50%;
        box-shadow: 0 0 30px #ff5722, 0 0 50px #ff9800;
        transform: scale(1);
    }
    100% {
        background-position: 60% 40%;
        box-shadow: 0 0 50px #ff5722, 0 0 80px #ffeb3b;
        transform: scale(1.02);
    }
}

.tile-1048576 {
    background: radial-gradient(circle, #ffffff 10%, #00ffff 30%, #9400d3 70%, #000000 100%);
    background-size: 300% 300%;
    color: white !important;
    box-shadow: 
        0 0 40px #00ffff, 
        0 0 80px #9400d3,
        inset 0 0 30px #ffffff;
    border: 2px solid #ffffff;
    animation: supernovaPulse 0.5s infinite alternate ease-in-out;
}

@keyframes supernovaPulse {
    0% {
        box-shadow: 0 0 40px #00ffff, 0 0 80px #9400d3;
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 60px #00ffff, 0 0 100px #ff00ff;
        transform: scale(1.03);
    }
}

.tile-2097152 {
    background: linear-gradient(
        45deg, 
        #240b36 0%,
        #c31432 25%, 
        #240b36 50%, 
        #00d2ff 75%,
        #240b36 100%
    );
    background-size: 400% 400%;
    color: #ffffff !important;
    text-shadow: 0 0 5px #00d2ff, 0 0 10px #c31432;
    box-shadow: 
        0 0 20px rgba(138, 43, 226, 0.8),
        inset 0 0 15px rgba(0, 210, 255, 0.3);
    border: 1px solid #00d2ff;
    animation: galaxyFlow 6s ease infinite;
}

@keyframes galaxyFlow {
    0% { 
        background-position: 0% 50%; 
        border-color: #00d2ff; 
    }
    50% { 
        background-position: 100% 50%; 
        border-color: #c31432; 
    }
    100% { 
        background-position: 0% 50%; 
        border-color: #00d2ff; 
    }
}

.tile-4194304 {
    background-color: #330000;
    background-image: 
        radial-gradient(circle at 50% 50%, transparent 20%, #000000 120%),
        linear-gradient(45deg, #ff4500 25%, #ff8c00 50%, #ff4500 75%);
    color: #fffacd !important;
    text-shadow: 0 0 5px #ff0000;
    box-shadow: 
        0 0 20px #ff4500,
        inset 0 0 10px #8b0000;
    border: 2px solid #ff8c00;
    font-size: clamp(22px, 1.6vmin, 14px);
    animation: magmaPulse 0.8s infinite alternate;
}

@keyframes magmaPulse {
    0% { 
        box-shadow: 0 0 15px #ff4500; 
        border-color: #ff4500; 
    }
    100% { 
        box-shadow: 0 0 35px #ff8c00; 
        border-color: #ffff00; 
    }
}

.tile-8388608 {
    background: linear-gradient(
        125deg, 
        #000000 0%, 
        #3a0000 40%, 
        #800000 50%, 
        #3a0000 60%, 
        #000000 100%
    );
    background-size: 300% 300%;
    color: white !important;
    text-shadow: 0 0 10px #ff0000;
    box-shadow: 
        0 0 30px #800000, 
        inset 0 0 20px rgba(255, 0, 0, 0.2);
    border: 1px solid #ff0000;
    font-size: clamp(21px, 1.6vmin, 14px);
    animation: eclipseMove 4s ease infinite;
}

@keyframes eclipseMove {
    0% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 20px #800000; 
    }
    50% { 
        background-position: 100% 50%; 
        box-shadow: 0 0 50px #ff0000; 
    }
    100% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 20px #800000; 
    }
}