body,html{margin:0;padding:0;background:#faf8ef;color:#776e65}body,button,html{font-family:"Clear Sans","Helvetica Neue",Arial,sans-serif;font-size:18px}a{color:#776e65;font-weight:700;text-decoration:underline;cursor:pointer}hr{border:none;border-bottom:1px solid #d8d4d0;margin-top:20px;margin-bottom:30px}.dark-theme{background-color:#252525}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px hsla(0,0%,50.2%,0);border-radius:10px}::-webkit-scrollbar-thumb{background:#c7c7c7;border-radius:10px}.dark-theme ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px rgba(63,63,63,0);border-radius:10px}.dark-theme ::-webkit-scrollbar-thumb{background:#727171;border-radius:10px}.tile{position:absolute;width:106px;height:106px;line-height:106px;float:left;background:rgba(238,228,218,.35);box-shadow:0 0 30px 10px rgba(243,215,116,0),inset 0 0 0 1px hsla(0,0%,100%,0);transition:.1s ease-in-out;transition-property:transform}.tile,.tileInner{border-radius:3px}.tileInner{text-align:center;font-weight:700;z-index:10;font-size:45px}.new{animation:appear .3s ease .1s;animation-fill-mode:backwards}.merged{animation:grow .2s ease .1s;animation-fill-mode:backwards}.tile-2 .tileInner{background:#eee4da}.tile-4 .tileInner{background:#eee1c9}.tile-8 .tileInner{color:#f9f6f2;background:#f3b27a}.tile-16 .tileInner{color:#f9f6f2;background:#f69664}.tile-32 .tileInner{color:#f9f6f2;background:#f77c5f}.tile-64 .tileInner{color:#f9f6f2;background:#f75f3b}.tile-128 .tileInner{color:#f9f6f2;background:#edd073;box-shadow:0 0 30px 10px rgba(243,215,116,.24),inset 0 0 0 1px hsla(0,0%,100%,.14)}.tile-256 .tileInner{color:#f9f6f2;background:#edcc62;box-shadow:0 0 30px 10px rgba(243,215,116,.32),inset 0 0 0 1px hsla(0,0%,100%,.19)}.tile-512 .tileInner{color:#f9f6f2;background:#edc950;box-shadow:0 0 30px 10px rgba(243,215,116,.4),inset 0 0 0 1px hsla(0,0%,100%,.24)}.tile-1024 .tileInner{color:#f9f6f2;background:#edc53f;box-shadow:0 0 30px 10px rgba(243,215,116,.48),inset 0 0 0 1px hsla(0,0%,100%,.29);font-size:35px}.tile-2048 .tileInner{color:#f9f6f2;background:#edc22e;box-shadow:0 0 30px 10px rgba(243,215,116,.56),inset 0 0 0 1px hsla(0,0%,100%,.33);font-size:35px}@keyframes appear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes grow{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@media only screen and (max-width:520px){.tile{width:85px;height:85px;line-height:85px}.tileInner{font-size:36px}.tile-1024 .tileInner,.tile-2048 .tileInner{font-size:28px}}@media only screen and (max-width:420px){.tile{width:64px;height:64px;line-height:64px}.tileInner{font-size:27px}.tile-1024 .tileInner,.tile-2048 .tileInner{font-size:21px}}.tileContainer{position:absolute;z-index:2}.appButton{background-color:#8f7a66;border:none;border-radius:3px;padding:12px 20px;color:#f9f6f2;cursor:pointer;font-weight:700}.gameResult{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:fade-in 1.2s ease .5s;animation-fill-mode:both}.gameResult p{font-size:60px;font-weight:700;line-height:60px;margin-top:0;margin-bottom:10px}.gameResult .continueButton{margin-right:5px}.gameResultWin{background:rgba(237,194,46,.5)}.gameResultLose{background:rgba(238,228,218,.75)}#boardContainer{position:relative;padding-top:15px;padding-left:15px;cursor:default;background:#bbada0;border-radius:6px;width:500px;height:500px;box-sizing:border-box;touch-action:none}.gridContainer{position:absolute;z-index:2}.gridContainer .row{display:flex;justify-content:space-between;margin-bottom:15px}.gridContainer .row .cell{width:106px;height:106px;margin-right:15px;float:left;border-radius:3px;background:rgba(238,228,218,.35)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media only screen and (max-width:520px){#boardContainer{width:400px;height:400px;padding-top:12px;padding-left:12px}.gridContainer .row{margin-bottom:12px}.gridContainer .row .cell{width:85px;height:85px;margin-right:12px}}@media only screen and (max-width:420px){#boardContainer{width:300px;height:300px;padding-top:9px;padding-left:9px}.gridContainer .row{margin-bottom:9px}.gridContainer .row .cell{width:64px;height:64px;margin-right:9px}}.flex{display:flex}.flexWithSpaceBetween{display:flex;justify-content:space-between}.gameTitle{font-size:80px;font-weight:700}.container{width:500px;margin:30px auto}@media only screen and (min-width:750px)and (max-height:700px){.container{width:700px}.container .gameContainer{display:flex}}@media only screen and (max-width:520px){.container{width:400px}}@media only screen and (max-width:420px){.container{width:300px}}.scoreBox{display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;flex-direction:column;background:#bbada0;padding:10px 15px;border-radius:3px;margin-top:8px;text-align:center}.scoreBox .title{font-size:13px;color:#eee4da}.scoreBox .score{font-size:25px;font-weight:700;color:#fff}.scoresContainer{display:flex;justify-content:center;align-items:center;grid-gap:5px;gap:5px;width:100%}.addScore{position:absolute;right:30px;font-size:25px;line-height:25px;font-weight:700;color:rgba(119,110,101,.9);z-index:100;animation:move-up .6s ease-in;animation-fill-mode:both}@keyframes move-up{0%{top:25px;opacity:1}to{top:-50px;opacity:0}}.header{display:flex;justify-content:space-between;margin-bottom:20px}.header .actions{display:flex;flex-direction:column;align-items:center}.header .actions #restartGameBtn{margin-top:10px}@media only screen and (min-width:750px)and (max-height:700px){.header{width:200px;flex-direction:column;justify-content:flex-start}.header .gameIntro{text-align:center}}@media only screen and (max-width:420px){.header{flex-direction:column}.header .actions{flex-direction:row-reverse;justify-content:space-between}.header .actions .scoresContainer{width:auto}}
/*# sourceMappingURL=main.12f2fb27.chunk.css.map */