/* ------------------------------------------------------------------
   Fluid game board.

   The original stylesheets hard-coded a 500px board and swapped it for a
   280px one below 520px, which left most of a phone screen unused. Every
   dimension below is derived from a single `--board` length instead, so the
   board grows to fill the viewport on mobile and the tile positions follow
   automatically.

   Loaded after the per-theme stylesheet so these rules win.
   ------------------------------------------------------------------ */

.gameplay-container {
    --board: 500px;
    --board-pad: 15px;
    --gap: 15px;
    --cell: calc((var(--board) - 2 * var(--board-pad) - 3 * var(--gap)) / 4);
    --step: calc(var(--cell) + var(--gap));

    width: var(--board);
    max-width: 100%;
    /* The removed ad slot used to provide the gap below the board. */
    margin: 0 auto 24px;
}

.above-game {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.above-game .scores-container,
.above-game .restart-button {
    float: none;
}

/* The old float-clearing pseudo-element becomes a flex item and steals the
   space that should push "New game" to the right edge of the board. */
.above-game:after {
    content: none;
}

.restart-button {
    padding: 0 16px;
}

.game-container {
    width: var(--board);
    height: var(--board);
    padding: var(--board-pad);
    box-sizing: border-box;
}

.grid-row {
    margin-bottom: var(--gap);
}

.grid-row:last-child {
    margin-bottom: 0;
}

.grid-cell {
    width: var(--cell);
    height: var(--cell);
    margin-right: var(--gap);
}

.grid-cell:last-child {
    margin-right: 0;
}

.tile,
.tile .tile-inner {
    width: var(--cell);
    height: var(--cell);
    line-height: var(--cell);
}

.tile.tile-position-1-1 { transform: translate(0, 0); }
.tile.tile-position-1-2 { transform: translate(0, var(--step)); }
.tile.tile-position-1-3 { transform: translate(0, calc(2 * var(--step))); }
.tile.tile-position-1-4 { transform: translate(0, calc(3 * var(--step))); }
.tile.tile-position-2-1 { transform: translate(var(--step), 0); }
.tile.tile-position-2-2 { transform: translate(var(--step), var(--step)); }
.tile.tile-position-2-3 { transform: translate(var(--step), calc(2 * var(--step))); }
.tile.tile-position-2-4 { transform: translate(var(--step), calc(3 * var(--step))); }
.tile.tile-position-3-1 { transform: translate(calc(2 * var(--step)), 0); }
.tile.tile-position-3-2 { transform: translate(calc(2 * var(--step)), var(--step)); }
.tile.tile-position-3-3 { transform: translate(calc(2 * var(--step)), calc(2 * var(--step))); }
.tile.tile-position-3-4 { transform: translate(calc(2 * var(--step)), calc(3 * var(--step))); }
.tile.tile-position-4-1 { transform: translate(calc(3 * var(--step)), 0); }
.tile.tile-position-4-2 { transform: translate(calc(3 * var(--step)), var(--step)); }
.tile.tile-position-4-3 { transform: translate(calc(3 * var(--step)), calc(2 * var(--step))); }
.tile.tile-position-4-4 { transform: translate(calc(3 * var(--step)), calc(3 * var(--step))); }

/* Win / game-over overlay: centred with flexbox rather than a fixed offset,
   so it lines up at any board size. */
.game-container .game-message.game-won,
.game-container .game-message.game-over {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.game-container .game-message p {
    font-size: calc(var(--cell) * 0.55);
    line-height: 1.2;
    height: auto;
    margin: 0;
}

.game-container .game-message .lower {
    margin-top: calc(var(--cell) * 0.28);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.game-container .game-message a {
    margin-left: 0;
}

/* Phones: fill the screen instead of sitting in a 280px box. */
@media screen and (max-width: 560px) {
    .gameplay-container {
        --board: min(100vw - 24px, 460px);
        --board-pad: 10px;
        --gap: 10px;
        margin-top: 4px;
    }

    .game-container {
        margin-top: 12px;
    }

    .score-container,
    .best-container {
        padding: 10px 12px;
        min-width: 62px;
    }

    .restart-button {
        font-size: 13px;
        padding: 0 14px;
    }

    .headline__title {
        margin-bottom: 8px;
    }
}

/* Short landscape screens: cap the board by height so it still fits. */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .gameplay-container {
        --board: min(100vw - 24px, 78vh, 460px);
    }
}