.g2048 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

.g2048__hud {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    justify-content: center;
}
.g2048__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
}
.g2048__stat span:last-child {
    font-size: 1.2rem;
    color: var(--text);
    font-weight: 700;
    text-transform: none;
}

.g2048__board-wrap {
    position: relative;
    width: 100%;
}

.g2048__board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    background: #14171f;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    aspect-ratio: 1 / 1;
    touch-action: none;
}

.g2048__cell-bg {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}

.g2048__tile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 1.6rem;
    color: #2b2b2b;
    background: #eee4da;
    transition: transform 120ms ease;
}

.g2048__tile[data-value="2"] { background: #eee4da; }
.g2048__tile[data-value="4"] { background: #ede0c8; }
.g2048__tile[data-value="8"] { background: #f2b179; color: #fff; }
.g2048__tile[data-value="16"] { background: #f59563; color: #fff; }
.g2048__tile[data-value="32"] { background: #f67c5f; color: #fff; }
.g2048__tile[data-value="64"] { background: #f65e3b; color: #fff; }
.g2048__tile[data-value="128"] { background: #edcf72; color: #fff; font-size: 1.4rem; }
.g2048__tile[data-value="256"] { background: #edcc61; color: #fff; font-size: 1.4rem; }
.g2048__tile[data-value="512"] { background: #edc850; color: #fff; font-size: 1.4rem; }
.g2048__tile[data-value="1024"] { background: #edc53f; color: #fff; font-size: 1.15rem; }
.g2048__tile[data-value="2048"] { background: var(--accent); color: #fff; font-size: 1.15rem; }

.g2048__tile.is-new {
    animation: g2048-pop 160ms ease;
}
@keyframes g2048-pop {
    0% { transform: scale(0.3); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

.g2048__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 15, 20, 0.82);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    color: var(--text);
}

.g2048__hint {
    color: var(--text-faint);
    font-size: 0.85rem;
    text-align: center;
}