:root{
  --board-gap:12px;
  --cell-size:96px;
  --radius:10px;
  --bg:#faf8ef;
  --grid:#bbada0;
  --tile:#cdc1b4;
  --text-dark:#776e65;
  --text-light:#f9f6f2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text-dark);
  display:grid;
  place-items:center;
}
.wrap{width:min(480px,94vw)}
.topbar{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}
.topbar h1{margin:0;font-size:32px}
.controls{display:flex;gap:10px;align-items:center}
.score{
  background:#bbada0;color:var(--text-light);
  padding:8px 12px;border-radius:8px;text-align:center;min-width:90px;
}
.score span{display:block;font-size:12px;opacity:.9}
.score strong{font-size:20px}
.btn{
  border:0;border-radius:8px;padding:10px 14px;background:#8f7a66;color:#fff;
  cursor:pointer;font-weight:700
}
.btn:hover{filter:brightness(1.05)}
.board{
  background:var(--grid);
  padding:var(--board-gap);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:repeat(4,var(--cell-size));
  grid-auto-rows:var(--cell-size);
  gap:var(--board-gap);
}
.cell{
  border-radius:7px;background:var(--tile);
  display:grid;place-items:center;font-weight:800;font-size:28px;color:var(--text-dark);
}
.tile-2{background:#eee4da}
.tile-4{background:#ede0c8}
.tile-8{background:#f2b179;color:var(--text-light)}
.tile-16{background:#f59563;color:var(--text-light)}
.tile-32{background:#f67c5f;color:var(--text-light)}
.tile-64{background:#f65e3b;color:var(--text-light)}
.tile-128{background:#edcf72;color:var(--text-light)}
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  display:grid;place-items:center;
}
.overlay.hidden{display:none}
.panel{
  background:#fff;padding:24px;border-radius:12px;text-align:center;width:min(320px,90vw);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}