.board-2048{--gap:10px;--cell:80px;background:radial-gradient(at 50% 0,#ffd23f14,#0000 70%),#1b1240;position:absolute;inset:0}.board-2048.is-nudge{animation:.22s board-nudge}@keyframes board-nudge{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.board-cells,.board-tiles{inset:var(--gap);position:absolute}.board-cells{grid-template-columns:repeat(var(--size,4), 1fr);gap:var(--gap);grid-auto-rows:1fr;display:grid}.board-cells span{border-radius:calc(var(--cell) * .14);background:#ffffff0d;box-shadow:inset 0 3px #0000004d}.tile{z-index:2;width:var(--cell);height:var(--cell);transform:translate(calc(var(--c) * (var(--cell) + var(--gap))), calc(var(--r) * (var(--cell) + var(--gap))));transition:transform .11s ease-in-out;position:absolute;top:0;left:0}.tile.is-ghost{z-index:1}.tile-inner{width:100%;height:100%;font-family:var(--font-display);font-size:calc(var(--cell) * .46);color:var(--line);background:var(--tile-bg,#fff3da);border:3px solid var(--line);border-radius:calc(var(--cell) * .14);place-items:center;line-height:1;display:grid;box-shadow:inset 0 -5px #0000002e,inset 0 3px #fff6}.tile[data-d="3"] .tile-inner{font-size:calc(var(--cell) * .38)}.tile[data-d="4"] .tile-inner{font-size:calc(var(--cell) * .3)}.tile[data-d="5"] .tile-inner{font-size:calc(var(--cell) * .24)}.tile.is-new .tile-inner{animation:.16s ease-out .1s backwards tile-appear}.tile.is-merged{z-index:3}.tile.is-merged .tile-inner{animation:.2s ease-out .1s backwards tile-pop}@keyframes tile-appear{0%{opacity:0;transform:scale(.2)}}@keyframes tile-pop{0%{opacity:0}1%{opacity:1;transform:scale(.9)}55%{transform:scale(1.18)}}.tile[data-v="2"]{--tile-bg:#fff3da}.tile[data-v="4"]{--tile-bg:#ffe0ae}.tile[data-v="8"]{--tile-bg:#ffb35c}.tile[data-v="16"]{--tile-bg:#ff8a3d}.tile[data-v="32"]{--tile-bg:#ff6a52}.tile[data-v="64"]{--tile-bg:#ff4a6a}.tile[data-v="128"]{--tile-bg:#ff70b8}.tile[data-v="256"]{--tile-bg:#c38bff}.tile[data-v="512"]{--tile-bg:#8fa0ff}.tile[data-v="1024"]{--tile-bg:#52c8ff}.tile[data-v="2048"] .tile-inner{--tile-bg:#ffd23f;box-shadow:0 0 0 3px #ffd23f,0 0 22px #ffd23fb3,inset 0 -5px #0000002e}.tile[data-v=super] .tile-inner{color:#ffd23f;text-shadow:2px 2px 0 var(--line);background:linear-gradient(135deg,#3fe0a5,#52b6ff 50%,#a084ff)}@media (prefers-reduced-motion:reduce){.tile{transition:none}}
