/* =================================================================
   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;
}

/* Reduce SEO subheader footprint on mobile viewports */
@media (max-width: 767px) {
    #math-merge-subheader {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
}

/* Tactile Depth Styling (Flat CSS-only) */
html body #game-content-area #math-merge-grid div.tile.math-merge-cell {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
    background-clip: border-box !important;
}

#math-merge-grid .empty-grid-cell {
    border-top: 2px solid rgba(0, 0, 0, 0.25) !important;
}

/* =================================================================
   MATH MERGE: TILE COLORS (THERMAL PROGRESSION)
   ================================================================= */
html body #game-content-area #math-merge-grid .empty-grid-cell,
html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-0 {
    background-color: #1e293b !important;
    color: transparent !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-2 {
    background: linear-gradient(135deg, #1e3a8a, #172554) !important;
    border-bottom-color: #0f172a !important;
    color: #e2e8f0 !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-4 {
    background: linear-gradient(135deg, #4338ca, #312e81) !important;
    border-bottom-color: #1e1b4b !important;
    color: #e0e7ff !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-8 {
    background: linear-gradient(135deg, #0d9488, #115e59) !important;
    border-bottom-color: #042f2e !important;
    color: #ccfbf1 !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-16 {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border-bottom-color: #14532d !important;
    color: #dcfce7 !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-32 {
    background: linear-gradient(135deg, #65a30d, #4d7c0f) !important;
    border-bottom-color: #3f6212 !important;
    color: #ecfccb !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-64 {
    background: linear-gradient(135deg, #ca8a04, #a16207) !important;
    border-bottom-color: #713f12 !important;
    color: #fefce8 !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-128 {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-bottom-color: #78350f !important;
    color: #fffbeb !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-256 {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    border-bottom-color: #7c2d12 !important;
    color: #fff7ed !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-512 {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border-bottom-color: #7f1d1d !important;
    color: #fef2f2 !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-1024 {
    background: linear-gradient(135deg, #be185d, #9d174d) !important;
    border-bottom-color: #831843 !important;
    color: #fdf2f8 !important;
}

html body #game-content-area #math-merge-grid div.tile.math-merge-cell.tile-2048 {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    border-bottom-color: #881337 !important;
    color: #fff1f2 !important;
}

.pop-animate {
    animation: pop-scale-anim 150ms ease-in-out !important;
}

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

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

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