body,html{position:fixed;width:100%;background:#faf8ef;color:#211e1d}body{margin:0;padding:0;font-family:sans-serif;font-size:10px;overflow:hidden}.score-container{display:inline-block;position:relative}@keyframes move-up{0%{top:0;opacity:1}to{top:-50px;opacity:0}}.new-points{position:absolute;left:42px;top:0;display:inline-block}.scored{animation:move-up .6s ease-in;animation-fill-mode:both}#board2D-container{position:relative;grid-area:board2D-container;display:flex;justify-content:center;font-size:2vw;align-items:center;top:0;right:0}#board3D-container{position:relative;grid-area:board3D-container;font-size:5px}.header{grid-area:header;display:flex;width:100%;max-width:600px;margin:auto}.footer{grid-area:footer;text-align:center}.grid{display:grid;grid-gap:1em;grid-template-areas:"header" "board3D-container" "board2D-container" "footer"}@media only screen and (min-width:375px){#board3D-container{font-size:6px}.board3D-wrapper .board3D{padding:6em 2em 0}#board2D-container{font-size:1.75vw}}@media only screen and (min-width:500px){#board2D-container{font-size:8px}}@media only screen and (min-width:768px)and (min-height:1024px){#board3D-container{font-size:11px}.board3D-wrapper{width:500px;padding:8em 0 0}}@media only screen and (min-width:768px){#board3D-container{font-size:7px}#board2D-container{font-size:10px}#board3D-container .board3D-wrapper{width:330px;padding:3em 0 0}.board3D-wrapper .board3D{padding:6em 0 0}}@media only screen and (min-width:1024px)and (min-height:768px){#board3D-container{font-size:9px}#board3D-container .board3D-wrapper{width:440px;padding:3em 0 0}.board3D-wrapper .board3D{padding:6em 2em 0}#board2D-container{font-size:10px}}@media only screen and (min-width:11200px){.grid{grid-template-columns:1fr auto;grid-template-areas:"header  header" "board3D-container board2D-container" "footer  footer";max-width:600px}#board2D-container{font-size:14px}#board3D-container{width:45vw;max-width:600px;font-size:10px}}:root{--box-size: 4em;--gutter: calc(var(--box-size) / 8);--boxes: 3}.tile{display:flex;align-items:center;justify-content:center;position:absolute;width:var(--box-size);height:var(--box-size);z-index:2;margin:calc(var(--gutter) / 2);transition:all .1s cubic-bezier(.77,0,.175,1)}.tile.remove{z-index:0}.tile.remove.swept{z-index:2}.tile.remove.swept .tile-inner{animation:pop .2s ease;animation-fill-mode:forwards;animation-direction:reverse}.board2D{position:relative;background-color:#bbada0;border-radius:3px;border:.35em solid #bbada0;margin-right:1px;font-size:1em;height:calc((var(--box-size) + var(--gutter)) * var(--boxes) + 0 * var(--gutter));width:calc((var(--box-size) + var(--gutter)) * var(--boxes) + 0 * var(--gutter))}.board2D:only-child{font-size:2em}.board2D .tile-placeholder{z-index:0}.board2D .tile-inner{font-size:2em}.board2D .tile-1024 .tile-inner,.board2D .tile-2048 .tile-inner,.board2D .tile-super .tile-inner{font-size:1.5em}.board2D .tile-placeholder .tile-inner{background:#eee4da59}.tile .tile-inner{border-radius:3px;background:#eee4da;text-align:center;font-weight:700;z-index:10;height:100%;width:100%;display:flex;align-items:center;color:#f9f6f2}@keyframes appear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.tile-inner.tile-merged{z-index:20;position:absolute;animation:pop .1s ease .1s;animation-fill-mode:backwards}.tile-inner.new_tile{animation:appear .1s ease .1s;animation-fill-mode:backwards}.tile-inner span{margin:auto}.tile.tile-2 .tile-inner{color:#211e1d;background:#eee4da}.tile.tile-4 .tile-inner{color:#211e1d;background:#ede0c8}.tile.tile-8 .tile-inner{color:#f9f6f2;background:#f2b179}.tile.tile-16 .tile-inner{background:#f59563}.tile.tile-32 .tile-inner{background:#f67c5f}.tile.tile-64 .tile-inner{background:#f65e3b}.tile.tile-128 .tile-inner{background:#edcf72;box-shadow:0 0 30px 10px #f3d7743d,inset 0 0 0 1px #ffffff24}.tile.tile-256 .tile-inner{background:#edcc61;box-shadow:0 0 30px 10px #f3d77451,inset 0 0 0 1px #ffffff31}.tile.tile-512 .tile-inner{background:#edc850;box-shadow:0 0 30px 10px #f3d77465,inset 0 0 0 1px #ffffff3d}.tile.tile-1024 .tile-inner{background:#edc53f;box-shadow:0 0 30px 10px #f3d77465,inset 0 0 0 1px #ffffff3d}.tile.tile-2048 .tile-inner{background:#edc22e;box-shadow:0 0 30px 10px #f3d77479,inset 0 0 0 1px #ffffff49}.tile.tile-4096 .tile-inner{background:#ffcc29;box-shadow:0 0 30px 10px #e1a82231,inset 0 0 0 1px #ffffff31}.tile.tile-8192 .tile-inner{background:#fa6353;box-shadow:0 0 30px 10px #fa635331,inset 0 0 0 1px #ffe1ff31}.tile.tile-16384 .tile-inner{background:#e285a2;box-shadow:0 0 30px 10px #e285a231,inset 0 0 0 1px #ffe1ff31}.tile.tile-32768 .tile-inner{background:#7792e1}.tile.tile-65536 .tile-inner{background:#856cbb}.tile.tile-131072 .tile-inner{background:#78e9b9}.tile.tile-262144 .tile-inner{background:#aee383}.tile.tile-524288 .tile-inner{background:#6ea279}.tile.tile-1048576 .tile-inner{background:#63d3a8}.tile.tile-2097152 .tile-inner{background:#02b9bb}.tile.tile-4194304 .tile-inner{background:#3be1ff}.tile.tile-8388608 .tile-inner{background:#44bfff}.tile.tile-16777216 .tile-inner{background:#67d3cf}.tile.tile-33554432 .tile-inner{background:#4ebf0e}.tile.tile-67108864 .tile-inner{background:#22af91}.tile.tile-134217728 .tile-inner{background:#008230}.tiles2D .tile.tile-1000 .tile-inner{font-size:1.4em}.tiles2D .tile.tile-10000 .tile-inner{font-size:1.35em}.tiles2D .tile.tile-100000 .tile-inner{font-size:1.15em}.tiles2D .tile.tile-1000000 .tile-inner{font-size:1em}.tiles2D .tile.tile-1000000 .tile-inner{font-size:.95em}.tiles2D .tile.tile-10000000 .tile-inner{font-size:.85em}.tiles2D .tile.tile-100000000 .tile-inner{font-size:.75em}:root{--cube-size: 8em;--cube-size-half: 4em}.board3D{z-index:100;perspective:1700px;perspective-origin:50% 0%;transform-style:preserve-3d;transform:rotate3d(1,2,0,-20deg);transition:all .1s ease-in;height:45em;position:relative;padding:6em 6em 0}.board3D-wrapper{position:relative;margin:auto;width:300px}.tile3D-wrapper{transition:.15s ease-in;position:absolute;transform-style:preserve-3d}.tiles3D,.placeholders3D{transform-style:preserve-3d}.tile3D div{position:absolute;width:var(--cube-size);height:var(--cube-size);background:#0000001a;display:flex;border:1px solid #8e8e8e2e;justify-content:center;align-items:center;backface-visibility:hidden;opacity:1}.tile3D{width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d}.board3D .tile.tile-100 .tile-inner span{font-size:3.5em}.board3D .tile.tile-1000 .tile-inner span{font-size:2.95em}.board3D .tile.tile-10000 .tile-inner span{font-size:2.75em}.board3D .tile.tile-100000 .tile-inner span{font-size:2.25em}.board3D .tile.tile-1000000 .tile-inner span{font-size:1.85em}.board3D .tile.tile-10000000 .tile-inner span{font-size:1.65em}.board3D .tile.tile-100000000 .tile-inner span{font-size:1.35em}.tile3D.remove{transform:scale3d(.5,.5,.5) translate3d(1em,1em,-1em)}.tile3D.remove .tile-inner{animation-name:fade;animation-duration:1s;animation-fill-mode:forwards}.tile3D.swept{animation:pop .2s ease;animation-fill-mode:forwards;animation-direction:reverse}.tile3D div:nth-child(1){transform:translateZ(var(--cube-size-half))}.tile3D div:nth-child(2){transform:rotateX(180deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(3){transform:rotateY(-90deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(4){transform:rotateY(90deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(5){transform:rotateX(90deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(6){transform:rotateX(-90deg) translateZ(var(--cube-size-half))}.tile-inner.tile-placeholder{background:none}@keyframes fade{0%{opacity:1}to{opacity:0}}@keyframes appear3D{0%{transform:translateZ(0) scale3d(.05,.05,.05)}to{transform:translateZ(0) scaleZ(1)}}@keyframes pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes popAgain{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.tile3D.new_tile{animation:appear3D .15s ease .1s;animation-fill-mode:backwards}.tile3D.tile_merged{animation:pop .15s ease .1s;animation-fill-mode:backwards}.tile3D.tile_merged_again{animation:popAgain .15s ease .1s;animation-fill-mode:backwards}.tile3D .tile-inner span{font-size:6em}