.game-header .score,
.game-header .timer {
    display: none;
}

:root {
    --t48-cell: 106px;
    --t48-gap: 12px;
    --t48-pad: 12px;
}

/* ── Header / Scores ─────────────────────────────────────────────────────────── */

.t48-header {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.t48-scores {
    display: flex;
    gap: 12px;
}

.t48-score-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
}

.t48-score-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    font-weight: 600;
}

.t48-score-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* ── Board wrap ──────────────────────────────────────────────────────────────── */

.t48-board-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.t48-board {
    position: relative;
    width: calc(4 * var(--t48-cell) + 3 * var(--t48-gap) + 2 * var(--t48-pad));
    height: calc(4 * var(--t48-cell) + 3 * var(--t48-gap) + 2 * var(--t48-pad));
    background: #1a2e1a;
    border: 3px solid var(--accent-gold);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    user-select: none;
    touch-action: none;
}

/* ── Background cells ────────────────────────────────────────────────────────── */

.t48-cells {
    position: absolute;
    inset: var(--t48-pad);
    display: grid;
    grid-template-columns: repeat(4, var(--t48-cell));
    gap: var(--t48-gap);
}

.t48-cell {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

/* ── Tiles layer ─────────────────────────────────────────────────────────────── */

.t48-tiles {
    position: absolute;
    inset: var(--t48-pad);
}

.tile {
    position: absolute;
    width: var(--t48-cell);
    height: var(--t48-cell);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 2.2rem;
    transform: translate(
        calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
        calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
    );
    transition: transform 100ms ease;
    will-change: transform;
    z-index: 1;
}

.tile[data-val="128"],
.tile[data-val="256"],
.tile[data-val="512"] {
    font-size: 1.8rem;
}

.tile[data-val="1024"],
.tile[data-val="2048"],
.tile[data-val="4096"],
.tile[data-val="8192"],
.tile[data-val="16384"] {
    font-size: 1.3rem;
}

/* ── Tile colors (CSS fallback — JS also sets inline) ────────────────────────── */

.tile[data-val="2"]    { background: #eee4da; color: #776e65; }
.tile[data-val="4"]    { background: #ede0c8; color: #776e65; }
.tile[data-val="8"]    { background: #f2b179; color: #ffffff; }
.tile[data-val="16"]   { background: #f59563; color: #ffffff; }
.tile[data-val="32"]   { background: #f67c5f; color: #ffffff; }
.tile[data-val="64"]   { background: #f65e3b; color: #ffffff; }
.tile[data-val="128"]  { background: #edcf72; color: #ffffff; }
.tile[data-val="256"]  { background: #edcc61; color: #ffffff; }
.tile[data-val="512"]  { background: #edc850; color: #ffffff; }
.tile[data-val="1024"] { background: #edc53f; color: #ffffff; }
.tile[data-val="2048"] { background: #d4af37; color: #ffffff; box-shadow: 0 0 24px rgba(212, 175, 55, 0.6); }

/* 4096 and above */
.tile:not([data-val="2"]):not([data-val="4"]):not([data-val="8"]):not([data-val="16"]):not([data-val="32"]):not([data-val="64"]):not([data-val="128"]):not([data-val="256"]):not([data-val="512"]):not([data-val="1024"]):not([data-val="2048"]) {
    background: #9b59b6;
    color: #ffffff;
}

/* ── Animations ──────────────────────────────────────────────────────────────── */

@keyframes t48-appear {
    0% {
        transform: translate(
            calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
            calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
        ) scale(0);
        opacity: 0;
    }
    60% {
        transform: translate(
            calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
            calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
        ) scale(1.1);
    }
    100% {
        transform: translate(
            calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
            calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
        ) scale(1);
        opacity: 1;
    }
}

@keyframes t48-pop {
    0% {
        transform: translate(
            calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
            calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
        ) scale(1);
    }
    40% {
        transform: translate(
            calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
            calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
        ) scale(1.22);
    }
    100% {
        transform: translate(
            calc(var(--c, 0) * (var(--t48-cell) + var(--t48-gap))),
            calc(var(--r, 0) * (var(--t48-cell) + var(--t48-gap)))
        ) scale(1);
    }
}

.tile-new {
    animation: t48-appear 0.2s ease-out;
}

.tile-merged {
    animation: t48-pop 0.15s ease-out;
    z-index: 2;
}

/* ── Result info (injected into shared win-overlay) ──────────────────────────── */

.t48-result-info {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 8px 0 24px;
}

.t48-result-info strong {
    color: var(--accent-gold);
    font-weight: 700;
}

/* ── Swipe hint ──────────────────────────────────────────────────────────────── */

.t48-swipe-hint {
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    opacity: 0.7;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    :root {
        --t48-cell: clamp(58px, calc((100vw - 72px) / 4), 100px);
        --t48-gap: 8px;
        --t48-pad: 8px;
    }

    .tile {
        font-size: clamp(1rem, 5.5vw, 2.2rem);
    }

    .tile[data-val="128"],
    .tile[data-val="256"],
    .tile[data-val="512"] {
        font-size: clamp(0.85rem, 4.5vw, 1.8rem);
    }

    .tile[data-val="1024"],
    .tile[data-val="2048"],
    .tile[data-val="4096"],
    .tile[data-val="8192"],
    .tile[data-val="16384"] {
        font-size: clamp(0.7rem, 3.5vw, 1.3rem);
    }

    .t48-score-box {
        padding: 6px 14px;
        min-width: 70px;
    }

    .t48-score-value {
        font-size: 1.2rem;
    }

}