.game2048-stage {
    margin-top: 14px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.board2048 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px;
    background: #b8aa9d;
    touch-action: none;
    user-select: none;
}

.tile2048 {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: #766d64;
    background: #cdc1b5;
    font-size: 22px;
    font-weight: 850;
}

.tile2048[data-value="2"] { background: #eee4da; }
.tile2048[data-value="4"] { background: #ede0c8; }
.tile2048[data-value="8"] { color: #fff; background: #f2b179; }
.tile2048[data-value="16"] { color: #fff; background: #f59563; }
.tile2048[data-value="32"] { color: #fff; background: #f67c5f; }
.tile2048[data-value="64"] { color: #fff; background: #f65e3b; }
.tile2048[data-value="128"] { color: #fff; background: #edcf72; font-size: 19px; }
.tile2048[data-value="256"] { color: #fff; background: #edcc61; font-size: 19px; }
.tile2048[data-value="512"] { color: #fff; background: #edc850; font-size: 19px; }
.tile2048[data-value="1024"] { color: #fff; background: #edc53f; font-size: 17px; }
.tile2048[data-value="2048"] { color: #fff; background: #edc22e; font-size: 17px; }

.control2048 {
    width: 216px;
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 64px);
    grid-template-rows: repeat(2, 58px);
    gap: 8px;
    justify-content: center;
}

.control2048 button {
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.control2048 button:active {
    background: var(--pressed);
}

.control2048 [data-dir="up"] { grid-column: 2; }
.control2048 [data-dir="left"] { grid-column: 1; }
.control2048 [data-dir="down"] { grid-column: 2; }
.control2048 [data-dir="right"] { grid-column: 3; }