:root{
  --bg:#faf8ef;
  --board:#bbada0;
  --tile-light:#eee4da;
  --tile-2:#eee4da; --tile-4:#ede0c8; --tile-8:#f2b179; --tile-16:#f59563;
  --tile-32:#f67c5f; --tile-64:#f65e3b; --tile-128:#edcf72; --tile-256:#edcc61;
  --tile-512:#edc850; --tile-1024:#edc53f; --tile-2048:#edc22e; --text-dark:#776e65;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial;
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden;
}
.container{width:100%;max-width:520px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.top h1{font-size:48px;letter-spacing:2px;margin:0;color:#776e65}
.score-area{display:flex;gap:8px}
.score,.best{background:#bbada0;color:#fff;padding:10px;border-radius:6px;min-width:72px;text-align:center}
.score .label,.best .label{font-size:11px;opacity:.85}
.score div,#best{font-weight:700;font-size:20px}
.game{background:transparent}
.board{width:100%;aspect-ratio:1/1;background:var(--board);padding:16px;border-radius:8px;position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:12px;touch-action:none}
.board .cell{background:rgba(238,228,218,0.35);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;color:rgba(119,110,101,0.5);font-size:24px}
.tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:transform .12s ease, background .2s ease, color .2s ease; font-weight:700}
.tile .value{font-size:28px;color:var(--text-dark);transform:translateZ(0)}
.controls{display:flex;gap:8px;margin-top:12px}
button{background:#8f7a66;border:0;padding:8px 10px;border-radius:6px;color:white;font-weight:600;cursor:pointer}
button#undo{background:#bdb3aa;color:#333}
.notice{height:36px;margin-top:8px;color:#333;font-size:14px}

.cell.val-2,.tile.val-2{background:var(--tile-2);color:var(--text-dark)}
.cell.val-4,.tile.val-4{background:var(--tile-4);color:var(--text-dark)}
.cell.val-8,.tile.val-8{background:var(--tile-8);color:#fff}
.cell.val-16,.tile.val-16{background:var(--tile-16);color:#fff}
.cell.val-32,.tile.val-32{background:var(--tile-32);color:#fff}
.cell.val-64,.tile.val-64{background:var(--tile-64);color:#fff}
.cell.val-128,.tile.val-128{background:var(--tile-128);color:#fff;font-size:20px}
.cell.val-256,.tile.val-256{background:var(--tile-256);color:#fff;font-size:20px}
.cell.val-512,.tile.val-512{background:var(--tile-512);color:#fff;font-size:18px}
.cell.val-1024,.cell.val-2048,.tile.val-1024,.tile.val-2048{background:var(--tile-1024);color:#fff;font-size:16px}

@media (max-width:420px){
  .top h1{font-size:38px}
  .tile .value{font-size:22px}
}

/* small animations */
.tile.appearing,.cell.appearing{animation:pop .14s ease}
@keyframes pop{from{transform:scale(.1)}to{transform:scale(1)}}