*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:#faf8ef;margin:0;display:flex;min-height:100vh;align-items:center;justify-content:center}
.game{width:340px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
h1{font-size:32px;margin:0;color:#776e65}
.controls{display:flex;gap:12px;align-items:center}
.score{background:#bbada0;color:#fff;padding:8px 12px;border-radius:4px;font-weight:700}
#new-game{background:#8f7a66;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer}
.board-wrapper{position:relative}
.board{background:#bbada0;padding:10px;border-radius:6px;display:grid;grid-template-columns:repeat(4,72px);grid-gap:10px;width:100%;height:340px}
.cell{width:72px;height:72px;border-radius:4px;background:rgba(238,228,218,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#776e65}
.tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:700;color:#fff;transition:transform 120ms ease-in-out,background 120ms linear}
.tile-inner{display:block;padding:6px 8px}
.message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(238,228,218,0.9);font-size:28px;color:#776e65;z-index:20}
.hidden{display:none}
.tile-2{background:#eee4da;color:#776e65}
.tile-4{background:#ede0c8;color:#776e65}
.tile-8{background:#f2b179}
.tile-16{background:#f59563}
.tile-32{background:#f67c5f}
.tile-64{background:#f65e3b}
.tile-128{background:#edcf72;color:#f9f6f2;font-size:20px}
.tile-256{background:#edcc61;color:#f9f6f2;font-size:20px}
.tile-512{background:#edc850;color:#f9f6f2;font-size:18px}
.tile-1024{background:#edc53f;color:#f9f6f2;font-size:16px}
.tile-2048{background:#edc22e;color:#f9f6f2;font-size:16px}
@media (max-width:420px){.game{width:92vw}.board{grid-template-columns:repeat(4,22vw);grid-gap:3vw;height:92vw}.cell{width:22vw;height:22vw;font-size:5vw}}