/* 2048 Ultimate Edition – layout fixes for iOS Safari + stable grid */

:root{
    --cell: 50px;
    --gap: 5px;
    --tile-fg: #111;
    --tile-bg: #eef;
    --tile-border: rgba(0,0,0,.15);
    --highlight-bg: #eef;
    --selected-bg: #ffa;
}

@media (prefers-color-scheme: dark){
    :root{
        --tile-fg: #e7eaf0;
        --tile-bg: #212733;
        --tile-border: rgba(255,255,255,.12);
        --highlight-bg: #2a3242;
        --selected-bg: #7a6a2a;
    }
}

body { margin: 0; }
article { text-align: center; }

/* Keep the board from collapsing on small screens; allow horizontal scroll instead of wrapping into 1 column */
#game_area { overflow-x: auto; }
#game_field{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
}

/* IMPORTANT: force “one row per selector” so tiles never wrap into a single column */
div.selector, game-selector {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--cell);
    gap: var(--gap);
    justify-content: center;
    align-items: center;
}

.tile{
    width: var(--cell);
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--tile-fg);
    background-color: transparent;
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Empty cells in the game field */
#game_field .tile{
    background-color: var(--tile-bg);
}

/* Setup selector highlighting */
.highlight{ background-color: var(--highlight-bg) !important; }
.selected{  background-color: var(--selected-bg) !important; }

span { margin: 5px; }

div.selector,
game-selector {
    display: flex;
    flex-wrap: nowrap;          /* ❗ запрещаем перенос */
    gap: var(--gap);
}

div.selector .tile,
game-selector .tile {
    width: clamp(28px, 8vw, var(--cell));
    height: clamp(28px, 8vw, var(--cell));
    flex: 0 1 auto;             /* ❗ разрешаем сжатие */
}