.board{
  --gap:10px;
  --pad:10px;
  --cell:70px;
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:radial-gradient(120% 120% at 50% 0%, #111a24, #0b1017 70%);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
}

.bg{
  position:absolute;
  inset:var(--pad);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:var(--gap);
}
.bg span{
  background:#161e29;
  border-radius:calc(var(--cell) * .12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.tiles{position:absolute;inset:0}
.tile{
  position:absolute;
  left:0;top:0;
  transition:transform .1s ease;
  will-change:transform;
}
.tin{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--cell) * .12);
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:#232a33;
  color:#dfe7ef;
  font-size:calc(var(--cell) * .41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tin[data-len="3"]{font-size:calc(var(--cell) * .33)}
.tin[data-len="4"]{font-size:calc(var(--cell) * .26)}
.tin[data-len="5"]{font-size:calc(var(--cell) * .21)}

.tin[data-val="2"]{background:#1c2430;color:#8fa2b4;box-shadow:none}
.tin[data-val="4"]{background:#25303d;color:#c7d5e2}
.tin[data-val="8"]{background:linear-gradient(180deg,#f7c78d,#eda867);color:#2a1804}
.tin[data-val="16"]{background:linear-gradient(180deg,#f8a76f,#f08a4e);color:#2a1804}
.tin[data-val="32"]{background:linear-gradient(180deg,#fa8a68,#ef6b45);color:#270f06}
.tin[data-val="64"]{background:linear-gradient(180deg,#f8684b,#e2462a);color:#2b0c05}
.tin[data-val="128"]{background:linear-gradient(180deg,#f7dd8c,#ebc75c);color:#2c2204}
.tin[data-val="256"]{background:linear-gradient(180deg,#f5d76f,#e6bd42);color:#2c2204}
.tin[data-val="512"]{background:linear-gradient(180deg,#f3cf5c,#dfae2b);color:#2c2204}
.tin[data-val="1024"]{background:linear-gradient(180deg,#f6c94a,#e0a314);color:#2c2204}
.tin[data-val="2048"]{background:linear-gradient(180deg,#ffd76a,#f0a01e);color:#2c1a02;box-shadow:0 0 26px rgba(255,190,70,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.tin[data-val="super"]{background:linear-gradient(160deg,#ffe89a,#f5b428);color:#2c1a02;box-shadow:0 0 34px rgba(255,205,90,.45),inset 0 1px 0 rgba(255,255,255,.35)}

@keyframes pop-in{from{transform:scale(.45);opacity:0}to{transform:scale(1);opacity:1}}
.tin.new{animation:pop-in .18s ease both}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.15)}100%{transform:scale(1)}}
.tin.pop{animation:bump .18s ease}

@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.board.nudge{animation:nudge .18s ease}

@media (max-width:420px){
  .tin{font-size:calc(var(--cell) * .38)}
}