body { font-family: sans-serif; background: #faf8ef; color: #333; display: grid; place-items: center; }
main { width: min(560px, 95vw); }
.panel { margin: 10px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.board { display: grid; grid-template-columns: repeat(4, 80px); gap: 8px; background: #bbada0; padding: 8px; border-radius: 8px; width: fit-content; touch-action: none; user-select: none; -webkit-user-select: none; }
.tile { width: 80px; height: 80px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 28px; background: #cdc1b4; color: #776e65; }
.tile.v2{background:#eee4da}.tile.v4{background:#ede0c8}.tile.v8{background:#f2b179;color:#f9f6f2}
.tile.v16{background:#f59563;color:#f9f6f2}.tile.v32{background:#f67c5f;color:#f9f6f2}.tile.v64{background:#f65e3b;color:#f9f6f2}
.tile.v128,.tile.v256,.tile.v512,.tile.v1024,.tile.v2048{background:#edcf72;color:#f9f6f2}
pre { white-space: pre-wrap; font-size: 12px; background: #fff; padding: 8px; border: 1px solid #ddd; width: 100%; }

.controls { flex-direction: column; align-items: flex-start; }
.move-row { display: flex; gap: 8px; }
.move { width: 56px; height: 44px; font-size: 20px; font-weight: 700; border: 1px solid #b9aa9d; background: #eee4da; border-radius: 8px; }
.move:active { transform: scale(0.97); }

@media (max-width: 600px) {
  .board { grid-template-columns: repeat(4, 68px); gap: 6px; padding: 6px; }
  .tile { width: 68px; height: 68px; font-size: 24px; }
}