/* NewPuzzelOnTheBlock - Tile Styles (Zweierpotenzen) */

.tile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: transform 80ms ease-out;
    will-change: transform;
}

.tile-falling {
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.8);
    z-index: 10;
    border: 2px solid #e94560;
}

/* Zweierpotenzen Farbschema (2048-Style) */
.tile-2 {
    background: #eee4da;
    color: #776e65;
    font-size: 1.8rem;
}

.tile-4 {
    background: #ede0c8;
    color: #776e65;
    font-size: 1.8rem;
}

.tile-8 {
    background: #f2b179;
    color: #f9f6f2;
    font-size: 1.8rem;
}

.tile-16 {
    background: #f59563;
    color: #f9f6f2;
    font-size: 1.6rem;
}

.tile-32 {
    background: #f67c5f;
    color: #f9f6f2;
    font-size: 1.6rem;
}

.tile-64 {
    background: #f65e3b;
    color: #f9f6f2;
    font-size: 1.6rem;
}

.tile-128 {
    background: #edcf72;
    color: #f9f6f2;
    font-size: 1.4rem;
    box-shadow: 0 0 15px 2px rgba(237, 207, 114, 0.4);
}

.tile-256 {
    background: #edcc61;
    color: #f9f6f2;
    font-size: 1.4rem;
    box-shadow: 0 0 15px 2px rgba(237, 204, 97, 0.5);
}

.tile-512 {
    background: #edc850;
    color: #f9f6f2;
    font-size: 1.4rem;
    box-shadow: 0 0 20px 3px rgba(237, 200, 80, 0.6);
}

.tile-1024 {
    background: #edc53f;
    color: #f9f6f2;
    font-size: 1.2rem;
    box-shadow: 0 0 25px 4px rgba(237, 197, 63, 0.7);
}

.tile-2048 {
    background: #edc22e;
    color: #f9f6f2;
    font-size: 1.2rem;
    box-shadow: 0 0 30px 5px rgba(237, 194, 46, 0.8);
    animation: glow2048 1s ease-in-out infinite alternate;
}

.tile-super {
    background: linear-gradient(135deg, #3c3a32, #1c1b18);
    color: #f9f6f2;
    font-size: 1rem;
    box-shadow: 0 0 35px 6px rgba(60, 58, 50, 0.9);
    animation: superGlow 0.8s ease-in-out infinite alternate;
}

/* Animations */
@keyframes tileAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes tileMerge {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow2048 {
    from {
        box-shadow: 0 0 25px 4px rgba(237, 194, 46, 0.6);
    }
    to {
        box-shadow: 0 0 40px 8px rgba(237, 194, 46, 1);
    }
}

@keyframes superGlow {
    from {
        box-shadow: 0 0 30px 5px rgba(60, 58, 50, 0.7);
    }
    to {
        box-shadow: 0 0 50px 10px rgba(100, 98, 90, 1);
    }
}

.tile-new {
    animation: tileAppear 150ms ease-out forwards;
}

.tile-merged {
    animation: tileMerge 150ms ease-out forwards;
}