/* Short landscape viewports: keep the board and readable controls side by side.
   The game grid coordinates and storage remain unchanged. */
@media (min-width: 480px) and (max-height: 460px) {
  html,
  body {
    font-size: 15px;
  }
  body {
    margin: 8px 0 0;
    padding: 0 12px;
  }
  .container {
    --board: min(280px, calc(100svh - 16px), calc(100vw - 224px));
    --cell: calc((var(--board) - 40px) / 4);
    width: min(740px, 100%);
    height: calc(100svh - 16px);
    display: grid;
    grid-template-columns: minmax(180px, 1fr) var(--board);
    grid-template-rows: 1fr 1fr;
    gap: 8px 20px;
    align-items: center;
  }
  .heading {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0;
  }
  h1.title {
    font-size: 36px;
    float: none;
    margin: 0;
  }
  .scores-container {
    float: none;
  }
  .score-container,
  .best-container {
    min-width: 48px;
    margin: 0;
    padding: 12px 10px;
    height: 25px;
    font-size: 22px;
    line-height: 32px;
  }
  .score-container:after,
  .best-container:after {
    top: 5px;
    font-size: 11px;
  }
  .above-game {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .game-intro {
    float: none;
    width: auto;
    text-align: center;
    line-height: 1.4;
  }
  .restart-button {
    float: none;
    min-width: 140px;
    width: auto;
    min-height: 44px;
    line-height: 44px;
    font-size: 15px;
    margin: 0;
    padding: 0 16px;
  }
  .game-container {
    grid-column: 2;
    grid-row: 1 / 3;
    width: var(--board);
    height: var(--board);
    margin: 0;
    padding: 8px;
  }
  .grid-container {
    width: calc(var(--board) - 16px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .grid-row {
    display: contents;
  }
  /* Float-layout clearfix boxes would become four extra CSS grid items. */
  .grid-row::after {
    content: none;
    display: none;
  }
  .grid-cell {
    width: var(--cell);
    height: var(--cell);
    margin: 0;
  }
  .tile,
  .tile .tile-inner {
    width: var(--cell);
    height: var(--cell);
    line-height: var(--cell);
  }
  .game-container .tile .tile-inner {
    font-size: clamp(18px, calc(var(--cell) * 0.6), 35px);
  }
  .game-container .tile.tile-128 .tile-inner,
  .game-container .tile.tile-256 .tile-inner,
  .game-container .tile.tile-512 .tile-inner {
    font-size: clamp(15px, calc(var(--cell) * 0.44), 26px);
  }
  .game-container .tile.tile-1024 .tile-inner,
  .game-container .tile.tile-2048 .tile-inner {
    font-size: clamp(12px, calc(var(--cell) * 0.32), 20px);
  }
  .game-container .tile.tile-super .tile-inner {
    font-size: clamp(10px, calc(var(--cell) * 0.26), 16px);
  }
  .tile[class*="tile-position-"] {
    transform: translate(
      calc(var(--x) * (var(--cell) + 8px)),
      calc(var(--y) * (var(--cell) + 8px))
    );
  }
  .tile-position-1-1,
  .tile-position-1-2,
  .tile-position-1-3,
  .tile-position-1-4 {
    --x: 0;
  }
  .tile-position-2-1,
  .tile-position-2-2,
  .tile-position-2-3,
  .tile-position-2-4 {
    --x: 1;
  }
  .tile-position-3-1,
  .tile-position-3-2,
  .tile-position-3-3,
  .tile-position-3-4 {
    --x: 2;
  }
  .tile-position-4-1,
  .tile-position-4-2,
  .tile-position-4-3,
  .tile-position-4-4 {
    --x: 3;
  }
  .tile-position-1-1,
  .tile-position-2-1,
  .tile-position-3-1,
  .tile-position-4-1 {
    --y: 0;
  }
  .tile-position-1-2,
  .tile-position-2-2,
  .tile-position-3-2,
  .tile-position-4-2 {
    --y: 1;
  }
  .tile-position-1-3,
  .tile-position-2-3,
  .tile-position-3-3,
  .tile-position-4-3 {
    --y: 2;
  }
  .tile-position-1-4,
  .tile-position-2-4,
  .tile-position-3-4,
  .tile-position-4-4 {
    --y: 3;
  }
  .game-container .game-message.game-over,
  .game-container .game-message.game-won {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    overflow: auto;
  }
  .game-container .game-message p {
    height: auto;
    font-size: 28px;
    line-height: 1.1;
    margin: 0 0 8px;
  }
  .game-container .game-message .lower {
    margin: 0;
  }
  .game-container .game-message a {
    min-height: 40px;
    line-height: 40px;
    margin: 4px;
    padding: 0 10px;
    font-size: 14px;
  }
}