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}@-webkit-keyframes move-up{0%{top:0;opacity:1}to{top:-50px;opacity:0}}@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{-webkit-animation:move-up .6s ease-in;animation:move-up .6s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}#board2D-container{position:relative;grid-area:board2D-container;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;font-size:2vw;-webkit-align-items:center;align-items:center;top:0;right:0}#board3D-container{position:relative;grid-area:board3D-container;font-size:5px}.header{grid-area:header;display:-webkit-flex;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:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;position:absolute;width:4em;width:var(--box-size);height:4em;height:var(--box-size);z-index:2;margin:.25em;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{-webkit-animation:pop .2s ease;animation:pop .2s ease;-webkit-animation-fill-mode:forwards;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:13.5em;height:calc((var(--box-size) + var(--gutter))*var(--boxes) + var(--gutter)*0);width:13.5em;width:calc((var(--box-size) + var(--gutter))*var(--boxes) + var(--gutter)*0)}.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:rgba(238,228,218,.35)}.tile .tile-inner{border-radius:3px;background:#eee4da;text-align:center;font-weight:700;z-index:10;height:100%;width:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;color:#f9f6f2}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes appear{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.tile-inner.tile-merged{z-index:20;position:absolute;-webkit-animation:pop .1s ease .1s;animation:pop .1s ease .1s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.tile-inner.new_tile{-webkit-animation:appear .1s ease .1s;animation:appear .1s ease .1s;-webkit-animation-fill-mode:backwards;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 rgba(243,215,116,.2381),inset 0 0 0 1px hsla(0,0%,100%,.14286)}.tile.tile-256 .tile-inner{background:#edcc61;box-shadow:0 0 30px 10px rgba(243,215,116,.31746),inset 0 0 0 1px hsla(0,0%,100%,.19048)}.tile.tile-512 .tile-inner{background:#edc850}.tile.tile-512 .tile-inner,.tile.tile-1024 .tile-inner{box-shadow:0 0 30px 10px rgba(243,215,116,.39683),inset 0 0 0 1px hsla(0,0%,100%,.2381)}.tile.tile-1024 .tile-inner{background:#edc53f}.tile.tile-2048 .tile-inner{background:#edc22e;box-shadow:0 0 30px 10px rgba(243,215,116,.47619),inset 0 0 0 1px hsla(0,0%,100%,.28571)}.tile.tile-4096 .tile-inner{background:#ffcc29;box-shadow:0 0 30px 10px rgba(225,168,34,.19048),inset 0 0 0 1px hsla(0,0%,100%,.19048)}.tile.tile-8192 .tile-inner{background:#fa6353;box-shadow:0 0 30px 10px rgba(250,99,83,.19048),inset 0 0 0 1px rgba(255,225,255,.19048)}.tile.tile-16384 .tile-inner{background:#e285a2;box-shadow:0 0 30px 10px rgba(226,133,162,.19048),inset 0 0 0 1px rgba(255,225,255,.19048)}.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;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;-webkit-perspective:1700px;perspective:1700px;-webkit-perspective-origin:50% 0;perspective-origin:50% 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotate3d(1,2,0,-20deg);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}.placeholders3D,.tile3D-wrapper,.tiles3D{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.tile3D div{position:absolute;background:rgba(0,0,0,.1);display:-webkit-flex;display:flex;border:1px solid hsla(0,0%,55.7%,.1803921568627451);-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:1}.tile3D,.tile3D div{width:8em;width:var(--cube-size);height:8em;height:var(--cube-size)}.tile3D{-webkit-transform-style:preserve-3d;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{-webkit-transform:scale3d(.5,.5,.5) translate3d(1em,1em,-1em);transform:scale3d(.5,.5,.5) translate3d(1em,1em,-1em)}.tile3D.remove .tile-inner{-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.tile3D.swept{-webkit-animation:pop .2s ease;animation:pop .2s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse}.tile3D div:first-child{-webkit-transform:translateZ(4em);transform:translateZ(4em);-webkit-transform:translateZ(var(--cube-size-half));transform:translateZ(var(--cube-size-half))}.tile3D div:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(4em);transform:rotateX(180deg) translateZ(4em);-webkit-transform:rotateX(180deg) translateZ(var(--cube-size-half));transform:rotateX(180deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(3){-webkit-transform:rotateY(-90deg) translateZ(4em);transform:rotateY(-90deg) translateZ(4em);-webkit-transform:rotateY(-90deg) translateZ(var(--cube-size-half));transform:rotateY(-90deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(4){-webkit-transform:rotateY(90deg) translateZ(4em);transform:rotateY(90deg) translateZ(4em);-webkit-transform:rotateY(90deg) translateZ(var(--cube-size-half));transform:rotateY(90deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(5){-webkit-transform:rotateX(90deg) translateZ(4em);transform:rotateX(90deg) translateZ(4em);-webkit-transform:rotateX(90deg) translateZ(var(--cube-size-half));transform:rotateX(90deg) translateZ(var(--cube-size-half))}.tile3D div:nth-child(6){-webkit-transform:rotateX(-90deg) translateZ(4em);transform:rotateX(-90deg) translateZ(4em);-webkit-transform:rotateX(-90deg) translateZ(var(--cube-size-half));transform:rotateX(-90deg) translateZ(var(--cube-size-half))}.tile-inner.tile-placeholder{background:none}@-webkit-keyframes fade{0%{opacity:1}to{opacity:0}}@keyframes fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes appear3D{0%{-webkit-transform:translateZ(0) scale3d(.05,.05,.05);transform:translateZ(0) scale3d(.05,.05,.05)}to{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}}@keyframes appear3D{0%{-webkit-transform:translateZ(0) scale3d(.05,.05,.05);transform:translateZ(0) scale3d(.05,.05,.05)}to{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}}@-webkit-keyframes pop{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes popAgain{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes popAgain{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}.tile3D.new_tile{-webkit-animation:appear3D .15s ease .1s;animation:appear3D .15s ease .1s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.tile3D.tile_merged{-webkit-animation:pop .15s ease .1s;animation:pop .15s ease .1s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.tile3D.tile_merged_again{-webkit-animation:popAgain .15s ease .1s;animation:popAgain .15s ease .1s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.tile3D .tile-inner span{font-size:6em}
/*# sourceMappingURL=main.67083b74.chunk.css.map */