/* =================================================================
   MATH MERGE: LAYOUT & CLS PREVENTION
   ================================================================= */
#game-content-area {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    min-height: 320px;
    margin: 0 auto;
}

/* =================================================================
   MATH MERGE: TILE ANIMATIONS (Hardware Accelerated)
   ================================================================= */
.tile {
    position: absolute;
    transform: translate(var(--x, 0px), var(--y, 0px));
    transition: transform 0.15s ease-in-out;
}

.tile-merged {
    animation: tile-pop 0.2s ease-in-out;
}

.tile-new {
    animation: tile-appear 0.15s ease-in-out;
}

@keyframes tile-pop {
    0% {
        transform: translate(var(--x, 0px), var(--y, 0px)) scale(1);
    }

    50% {
        transform: translate(var(--x, 0px), var(--y, 0px)) scale(1.2);
    }

    100% {
        transform: translate(var(--x, 0px), var(--y, 0px)) scale(1);
    }
}

@keyframes tile-appear {
    0% {
        transform: translate(var(--x, 0px), var(--y, 0px)) scale(0);
        opacity: 0;
    }

    100% {
        transform: translate(var(--x, 0px), var(--y, 0px)) scale(1);
        opacity: 1;
    }
}

/* =================================================================
   MATH MERGE: INTERACTION CONTROLS
   ================================================================= */
.mathmerge-page-scope {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mathmerge-page-scope #math-merge-grid {
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}