:root{
  --board-gap: 12px;
  --tile-size: 100px;
  --board-radius: 14px;
}

.board{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  grid-template-rows: repeat(4, var(--tile-size));
  gap: var(--board-gap);
  background: #0f172a;
  padding: var(--board-gap);
  border-radius: var(--board-radius);
}

.tiles{
  pointer-events: none;
  position: absolute;
  inset: 0;
  padding: var(--board-gap);
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  grid-template-rows: repeat(4, var(--tile-size));
  gap: var(--board-gap);
}

.cell{
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 10px;
  background: #0b1222;
}

.tile{
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 800;
  color: #0b1222;
  transform: scale(1);
  transition: transform .12s ease-out, left .12s ease-out, top .12s ease-out;
}

.tile.new{ animation: pop .15s ease-out; }
.tile.merge{ animation: bump .12s ease-out; }

@keyframes pop{ from{ transform: scale(.6); opacity:.4 } to{ transform: scale(1); opacity:1 } }
@keyframes bump{ from{ transform: scale(1.12) } to{ transform: scale(1) } }

.overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.overlay-card{
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(2px);
}

.hidden{ display:none }

.bg-2{ background:#e8e3da; color:#0b1222 }
.bg-4{ background:#e9dfc7; color:#0b1222 }
.bg-8{ background:#f7b26a; color:#0b1222 }
.bg-16{ background:#f89d5b; color:white }
.bg-32{ background:#f67857; color:white }
.bg-64{ background:#f45f3d; color:white }
.bg-128{ background:#e6d26f; color:#0b1222 }
.bg-256{ background:#e4c853; color:#0b1222 }
.bg-512{ background:#dfc245; color:#0b1222 }
.bg-1024{ background:#d8bd3b; color:#0b1222 }
.bg-2048{ background:#c6b22d; color:#0b1222 }
.bg-super{ background:#8f8eea; color:white }

@media (max-width: 560px){
  :root{ --tile-size: 72px; --board-gap: 10px; }
}