body,html{margin:0;padding:0;background:#faf8ef;color:#776e65;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;font-size:18px}#app{width:500px;margin:50px auto}.heading{margin-bottom:15px}.heading:after{content:"";display:block;clear:both}h1.title{font-size:80px;font-weight:700;margin:0;display:block;float:left}.scores-container{float:right;text-align:right;position:relative}.best-container,.score-container{position:relative;display:inline-block;background:#bbada0;padding:15px 25px;font-size:25px;height:25px;line-height:47px;font-weight:700;border-radius:3px;color:#fff;margin-top:8px;text-align:center}.score-container:after{content:"Score"}.best-container:after{content:"Best"}.best-container:after,.score-container:after{position:absolute;width:100%;top:10px;left:0;text-transform:uppercase;font-size:13px;line-height:13px;text-align:center;color:#eee4da}.score-add{position:absolute;color:hsla(30,8%,43%,.9);font-size:25px;left:0;right:0;top:0;bottom:0;z-index:10;opacity:0;transition:.5s ease-in-out}.restart-container{line-height:2.45}.restart-container:after{content:"";display:block;clear:both}.restart-container .tip{width:350px;float:left}.btn{background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;text-align:center;border:0;cursor:pointer;outline:none;font-size:inherit;font-weight:600}.restart-button{float:right}.game-container{width:500px;height:500px;padding:15px;margin-top:40px;box-sizing:border-box;border-radius:6px;background:#bbada0;position:relative}.grid-container{position:absolute;z-index:1}.grid-row{margin-bottom:15px}.grid-row:after{content:"";display:block;clear:both}.grid-row:last-child{margin-bottom:0}.grid-cell{width:106.25px;height:106.25px;border-radius:3px;float:left;margin-right:15px;background:hsla(30,37%,89%,.35)}.grid-cell:last-child{margin-right:0}.tile-container{position:absolute;z-index:2}.tile,.tile .tile-inner{width:107px;height:107px;line-height:107px}.tile.tile-position-1-1{-webkit-transform:translate(0);transform:translate(0)}.tile.tile-position-1-2{-webkit-transform:translateY(121px);transform:translateY(121px)}.tile.tile-position-1-3{-webkit-transform:translateY(242px);transform:translateY(242px)}.tile.tile-position-1-4{-webkit-transform:translateY(363px);transform:translateY(363px)}.tile.tile-position-2-1{-webkit-transform:translate(121px);transform:translate(121px)}.tile.tile-position-2-2{-webkit-transform:translate(121px,121px);transform:translate(121px,121px)}.tile.tile-position-2-3{-webkit-transform:translate(121px,242px);transform:translate(121px,242px)}.tile.tile-position-2-4{-webkit-transform:translate(121px,363px);transform:translate(121px,363px)}.tile.tile-position-3-1{-webkit-transform:translate(242px);transform:translate(242px)}.tile.tile-position-3-2{-webkit-transform:translate(242px,121px);transform:translate(242px,121px)}.tile.tile-position-3-3{-webkit-transform:translate(242px,242px);transform:translate(242px,242px)}.tile.tile-position-3-4{-webkit-transform:translate(242px,363px);transform:translate(242px,363px)}.tile.tile-position-4-1{-webkit-transform:translate(363px);transform:translate(363px)}.tile.tile-position-4-2{-webkit-transform:translate(363px,121px);transform:translate(363px,121px)}.tile.tile-position-4-3{-webkit-transform:translate(363px,242px);transform:translate(363px,242px)}.tile.tile-position-4-4{-webkit-transform:translate(363px,363px);transform:translate(363px,363px)}.tile{position:absolute;transition:-webkit-transform .1s ease-in-out;transition:transform .1s ease-in-out;transition:transform .1s ease-in-out,-webkit-transform .1s ease-in-out}.tile .tile-inner{border-radius:3px;background:#eee4da;text-align:center;font-weight:700;z-index:10;font-size:55px}.tile.tile-2 .tile-inner{background:#eee4da}.tile.tile-2 .tile-inner,.tile.tile-4 .tile-inner{box-shadow:0 0 30px 10px hsla(47,84%,70%,0),inset 0 0 0 1px hsla(0,0%,100%,0)}.tile.tile-4 .tile-inner{background:#eee1c9}.tile.tile-8 .tile-inner{color:#f9f6f2;background:#f3b27a}.tile.tile-16 .tile-inner{color:#f9f6f2;background:#f69664}.tile.tile-32 .tile-inner{color:#f9f6f2;background:#f77c5f}.tile.tile-64 .tile-inner{color:#f9f6f2;background:#f75f3b}.tile.tile-128 .tile-inner{color:#f9f6f2;background:#edd073;box-shadow:0 0 30px 10px hsla(47,84%,70%,.238095),inset 0 0 0 1px hsla(0,0%,100%,.142857);font-size:45px}@media screen and (max-width:520px){.tile.tile-128 .tile-inner{font-size:25px}}.tile.tile-256 .tile-inner{color:#f9f6f2;background:#edcc62;box-shadow:0 0 30px 10px hsla(47,84%,70%,.31746),inset 0 0 0 1px hsla(0,0%,100%,.190476);font-size:45px}@media screen and (max-width:520px){.tile.tile-256 .tile-inner{font-size:25px}}.tile.tile-512 .tile-inner{color:#f9f6f2;background:#edc950;box-shadow:0 0 30px 10px hsla(47,84%,70%,.396825),inset 0 0 0 1px hsla(0,0%,100%,.238095);font-size:45px}@media screen and (max-width:520px){.tile.tile-512 .tile-inner{font-size:25px}}.tile.tile-1024 .tile-inner{color:#f9f6f2;background:#edc53f;box-shadow:0 0 30px 10px hsla(47,84%,70%,.47619),inset 0 0 0 1px hsla(0,0%,100%,.285714);font-size:35px}@media screen and (max-width:520px){.tile.tile-1024 .tile-inner{font-size:15px}}.tile.tile-2048 .tile-inner{color:#f9f6f2;background:#edc22e;box-shadow:0 0 30px 10px hsla(47,84%,70%,.555556),inset 0 0 0 1px hsla(0,0%,100%,.333333);font-size:35px}@media screen and (max-width:520px){.tile.tile-2048 .tile-inner{font-size:15px}}.tile.tile-super .tile-inner{color:#f9f6f2;background:#3c3a33;font-size:30px}.tile-new .tile-inner{-webkit-animation:appear .2s ease .1s;animation:appear .2s ease .1s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.tile-merged .tile-inner{z-index:20;-webkit-animation:pop .2s ease-in-out .1s;animation:pop .2s ease-in-out .1s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.message-container{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;z-index:100;-webkit-animation:fade-in .8s ease-in-out both;animation:fade-in .8s ease-in-out both}.message-container p{font-size:60px;font-weight:700;height:60px;line-height:60px;margin-top:180px;margin-bottom:25px}.gg{background:hsla(30,37%,89%,.5)}.win{background:rgba(237,194,46,.5)}footer{margin-top:40px}footer hr{border:none;border-bottom:1px solid #d8d4d0;margin-top:20px;margin-bottom:30px}footer a{color:#776e65}@-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)}}@-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 fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (max-width:520px){body,html{margin:20px 0;font-size:14px}#app{width:280px;margin:auto}h1.title{font-size:25px;margin-top:34px}.best-container,.score-container{font-size:16px}.restart-container .tip{width:160px;line-height:20px}.game-container{width:280px;height:280px;padding:10px;margin-top:40px;border-radius:6px;background:#bbada0}.grid-row{margin-bottom:10px}.grid-cell{width:57.5px;height:57.5px;border-radius:3px;margin-right:10px;background:hsla(30,37%,89%,.35)}.tile,.tile .tile-inner{border-radius:3px;background:#eee4da;font-size:35px;width:58px;height:58px;line-height:58px}.tile.tile-position-1-1{-webkit-transform:translate(0);transform:translate(0)}.tile.tile-position-1-2{-webkit-transform:translateY(67px);transform:translateY(67px)}.tile.tile-position-1-3{-webkit-transform:translateY(135px);transform:translateY(135px)}.tile.tile-position-1-4{-webkit-transform:translateY(202px);transform:translateY(202px)}.tile.tile-position-2-1{-webkit-transform:translate(67px);transform:translate(67px)}.tile.tile-position-2-2{-webkit-transform:translate(67px,67px);transform:translate(67px,67px)}.tile.tile-position-2-3{-webkit-transform:translate(67px,135px);transform:translate(67px,135px)}.tile.tile-position-2-4{-webkit-transform:translate(67px,202px);transform:translate(67px,202px)}.tile.tile-position-3-1{-webkit-transform:translate(135px);transform:translate(135px)}.tile.tile-position-3-2{-webkit-transform:translate(135px,67px);transform:translate(135px,67px)}.tile.tile-position-3-3{-webkit-transform:translate(135px,135px);transform:translate(135px,135px)}.tile.tile-position-3-4{-webkit-transform:translate(135px,202px);transform:translate(135px,202px)}.tile.tile-position-4-1{-webkit-transform:translate(202px);transform:translate(202px)}.tile.tile-position-4-2{-webkit-transform:translate(202px,67px);transform:translate(202px,67px)}.tile.tile-position-4-3{-webkit-transform:translate(202px,135px);transform:translate(202px,135px)}.tile.tile-position-4-4{-webkit-transform:translate(202px,202px);transform:translate(202px,202px)}.message-container p{margin-top:60px;font-size:40px}footer{margin-top:20px}footer hr{margin-top:15px;margin-bottom:15px}}.add{-webkit-animation:add;animation:add;-webkit-animation-duration:.6s;animation-duration:.6s}@-webkit-keyframes add{to{opacity:1;top:-35px}}@keyframes add{to{opacity:1;top:-35px}}
/*# sourceMappingURL=app.8458ddad140d66feec559a1d349b5f4a.css.map */