/* === Merge 2048 Styles === */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    min-height: calc(100vh - var(--nav-height));
    padding-top: calc(var(--nav-height) + var(--space-6));
}

.stats-bar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.board-wrapper {
    position: relative;
}

.merge-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-2xl);
    padding: 10px;
    width: clamp(280px, 80vw, 400px);
    aspect-ratio: 1;
    box-shadow: 0 0 50px rgba(99, 102, 241, 0.08), inset 0 0 30px rgba(0, 0, 0, 0.2);
}

.merge-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    aspect-ratio: 1;
    user-select: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Empty tile */
.merge-tile--empty {
    background: rgba(255, 255, 255, 0.03);
}

/* Tile values - each power of 2 gets a distinct color */
.merge-tile--2 {
    background: rgba(238, 228, 218, 0.9);
    color: #776e65;
    font-size: clamp(1.4rem, 5vw, 2rem);
}

.merge-tile--4 {
    background: rgba(237, 224, 200, 0.9);
    color: #776e65;
    font-size: clamp(1.4rem, 5vw, 2rem);
}

.merge-tile--8 {
    background: #f2b179;
    color: #fff;
    font-size: clamp(1.4rem, 5vw, 2rem);
}

.merge-tile--16 {
    background: #f59563;
    color: #fff;
    font-size: clamp(1.3rem, 5vw, 1.9rem);
}

.merge-tile--32 {
    background: #f67c5f;
    color: #fff;
    font-size: clamp(1.3rem, 5vw, 1.9rem);
}

.merge-tile--64 {
    background: #f65e3b;
    color: #fff;
    font-size: clamp(1.3rem, 5vw, 1.9rem);
}

.merge-tile--128 {
    background: #edcf72;
    color: #fff;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    box-shadow: 0 0 15px rgba(237, 207, 114, 0.3);
}

.merge-tile--256 {
    background: #edcc61;
    color: #fff;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    box-shadow: 0 0 20px rgba(237, 204, 97, 0.4);
}

.merge-tile--512 {
    background: #edc850;
    color: #fff;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    box-shadow: 0 0 25px rgba(237, 200, 80, 0.5);
}

.merge-tile--1024 {
    background: #edc53f;
    color: #fff;
    font-size: clamp(0.9rem, 3.5vw, 1.3rem);
    box-shadow: 0 0 30px rgba(237, 197, 63, 0.6);
}

.merge-tile--2048 {
    background: linear-gradient(135deg, #edc22e, #f9d423);
    color: #fff;
    font-size: clamp(0.9rem, 3.5vw, 1.3rem);
    box-shadow: 0 0 40px rgba(237, 194, 46, 0.8);
    animation: tileGlow 1s ease-in-out infinite alternate;
}

.merge-tile--super {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.6);
    animation: tileGlow 1s ease-in-out infinite alternate;
}

/* Animations */
.merge-tile--new {
    animation: tileAppear 0.2s ease-out;
}

.merge-tile--merged {
    animation: tileMerge 0.2s ease-out;
}

@keyframes tileAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes tileGlow {
    0% {
        box-shadow: 0 0 20px rgba(237, 194, 46, 0.4);
    }

    100% {
        box-shadow: 0 0 40px rgba(237, 194, 46, 0.8);
    }
}

/* Game Over Overlay */
.merge-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.merge-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.overlay-card {
    background: var(--gradient-card);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    box-shadow: 0 0 60px rgba(99, 102, 241, 0.15);
    backdrop-filter: blur(20px);
    animation: scaleIn 0.3s ease-out;
}

.overlay-icon {
    font-size: 3rem;
}

.overlay-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    font-family: var(--font-display);
}

.overlay-score {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.controls-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 600px) {
    .merge-board {
        gap: 6px;
        padding: 6px;
    }
}