:root{--bg-color: #f9f8f0;--text-color: #776e65;--score-bg-color: #7ba55d;--best-score-bg-color: #dfbe3d;--score-text-color: white;--score-title-text-color: #ffffffee;--score-addition-text-color: #385f1cdd;--grid-bg-color: #b7ada0;--grid-cell-bg-color: #c9c1b4;--tile-2-bg-color: #ebe4da;--tile-2-text-color: #746e65;--tile-4-bg-color: #e9e0c8;--tile-4-text-color: #746e65;--tile-8-bg-color: #dfb079;--tile-8-text-color: #f8f6f2;--tile-16-bg-color: #dc9462;--tile-16-text-color: #f8f6f2;--tile-32-bg-color: #d87b5d;--tile-32-text-color: #f8f6f2;--tile-64-bg-color: #d45c37;--tile-64-text-color: #f8f6f2;--tile-128-bg-color: #edcf72;--tile-128-text-color: #f8f6f2;--tile-256-bg-color: #edcc61;--tile-256-text-color: #f8f6f2;--tile-512-bg-color: #edc850;--tile-512-text-color: #f8f6f2;--tile-1024-bg-color: #edc53f;--tile-1024-text-color: #f8f6f2;--tile-2048-bg-color: #edc22e;--tile-2048-text-color: #f8f6f2;--tile-super-bg-color: #3c3a32;--tile--super-text-color: #f8f6f2}html,body{margin:0;padding:0;background:var(--bg-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:18px}.heading .title{margin:0}.heading .title button{width:fit-content;font-size:58px;line-height:60px;font-weight:700;display:flex;float:left}@-webkit-keyframes move-up{0%{top:25px;opacity:1}to{top:-50px;opacity:0}}@-moz-keyframes move-up{0%{top:25px;opacity:1}to{top:-50px;opacity:0}}@keyframes move-up{0%{top:25px;opacity:1}to{top:-50px;opacity:0}}.scores-container{float:right;text-align:right;box-sizing:content-box}.score-container,.best-container{position:relative;display:inline-block;color:var(--score-text-color);padding:18px 25px 6px;font-size:24px;font-weight:700;border-radius:3px;text-align:center}.score-container{background:var(--score-bg-color)}.best-container{background:var(--best-score-bg-color)}.score-container:after,.best-container:after{position:absolute;width:100%;top:10px;left:0;color:var(--score-title-text-color);text-transform:uppercase;font-size:13px;line-height:13px;text-align:center}.score-container .score-addition,.best-container .score-addition{position:absolute;right:30px;font-size:25px;line-height:25px;font-weight:700;color:var(--score-addition-text-color);z-index:100;-webkit-animation:move-up .6s ease-in;-moz-animation:move-up .6s ease-in;animation:move-up .6s ease-in;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}.score-container:after{content:"Score"}.best-container:after{content:"Best"}p{margin-top:0;margin-bottom:2px;line-height:1.65}button{border:none;background-color:transparent;width:100%;cursor:pointer}strong.important{text-transform:uppercase}.container{width:450px;margin:0 auto;padding-top:28px}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.game-container{position:relative;padding:12px;cursor:default;-webkit-touch-callout:none;-ms-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-ms-touch-action:none;touch-action:none;background:var(--grid-bg-color);border-radius:6px;width:450px;height:450px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.game-container .game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#eee4da80;z-index:100;text-align:center;-webkit-animation:fade-in .8s ease 1.2s;-moz-animation:fade-in .8s ease 1.2s;animation:fade-in .8s ease 1.2s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}.game-container .game-message p{font-size:60px;font-weight:700;height:60px;line-height:60px;margin-top:150px}.game-container .game-message .lower{display:block;margin-top:59px}.retry-button{width:fit-content;font-size:18px;font-weight:700;display:inline-block;border-radius:3px;padding:6px 20px;text-decoration:none;color:#f9f6f2;background:#8f7a66}.game-container .game-message.game-won{background:#edc22e80;color:#f9f6f2}.game-container .game-message.game-won,.game-container .game-message.game-over{display:block}.grid-container{position:absolute;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);row-gap:12px;column-gap:12px}.grid-cell{width:97.5px;height:97.5px;float:left;border-radius:3px;background:var(--grid-cell-bg-color)}.tile-container{position:absolute;z-index:2}.tile,.tile .tile-inner{width:97.5px;height:97.5px;line-height:98px}.tile.tile-position-1-1{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);transform:translate(0)}.tile.tile-position-1-2{-webkit-transform:translate(0px,109px);-moz-transform:translate(0px,109px);transform:translateY(109px)}.tile.tile-position-1-3{-webkit-transform:translate(0px,219px);-moz-transform:translate(0px,219px);transform:translateY(219px)}.tile.tile-position-1-4{-webkit-transform:translate(0px,328px);-moz-transform:translate(0px,328px);transform:translateY(328px)}.tile.tile-position-2-1{-webkit-transform:translate(109px,0px);-moz-transform:translate(109px,0px);transform:translate(109px)}.tile.tile-position-2-2{-webkit-transform:translate(109px,109px);-moz-transform:translate(109px,109px);transform:translate(109px,109px)}.tile.tile-position-2-3{-webkit-transform:translate(109px,219px);-moz-transform:translate(109px,219px);transform:translate(109px,219px)}.tile.tile-position-2-4{-webkit-transform:translate(109px,328px);-moz-transform:translate(109px,328px);transform:translate(109px,328px)}.tile.tile-position-3-1{-webkit-transform:translate(219px,0px);-moz-transform:translate(219px,0px);transform:translate(219px)}.tile.tile-position-3-2{-webkit-transform:translate(219px,109px);-moz-transform:translate(219px,109px);transform:translate(219px,109px)}.tile.tile-position-3-3{-webkit-transform:translate(219px,219px);-moz-transform:translate(219px,219px);transform:translate(219px,219px)}.tile.tile-position-3-4{-webkit-transform:translate(219px,328px);-moz-transform:translate(219px,328px);transform:translate(219px,328px)}.tile.tile-position-4-1{-webkit-transform:translate(328px,0px);-moz-transform:translate(328px,0px);transform:translate(328px)}.tile.tile-position-4-2{-webkit-transform:translate(328px,109px);-moz-transform:translate(328px,109px);transform:translate(328px,109px)}.tile.tile-position-4-3{-webkit-transform:translate(328px,219px);-moz-transform:translate(328px,219px);transform:translate(328px,219px)}.tile.tile-position-4-4{-webkit-transform:translate(328px,328px);-moz-transform:translate(328px,328px);transform:translate(328px,328px)}.tile{position:absolute;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;transition:.1s ease-in-out;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform}.tile .tile-inner{border-radius:3px;text-align:center;font-weight:700;z-index:10;font-size:53px}.tile.tile-2 .tile-inner{color:var(--tile-2-text-color);background:var(--tile-2-bg-color)}.tile.tile-4 .tile-inner{color:var(--tile-4-text-color);background:var(--tile-4-bg-color)}.tile.tile-8 .tile-inner{color:var(--tile-8-text-color);background:var(--tile-8-bg-color)}.tile.tile-16 .tile-inner{color:var(--tile-16-text-color);background:var(--tile-16-bg-color)}.tile.tile-32 .tile-inner{color:var(--tile-32-text-color);background:var(--tile-32-bg-color)}.tile.tile-64 .tile-inner{color:var(--tile-64-text-color);background:var(--tile-64-bg-color)}.tile.tile-128 .tile-inner{color:var(--tile-128-text-color);background:var(--tile-128-bg-color);font-size:45px}@media screen and (max-width: 520px){.tile.tile-128 .tile-inner{font-size:25px}}.tile.tile-256 .tile-inner{color:var(--tile-256-text-color);background:var(--tile-256-bg-color);font-size:45px}@media screen and (max-width: 520px){.tile.tile-256 .tile-inner{font-size:25px}}.tile.tile-512 .tile-inner{color:var(--tile-512-text-color);background:var(--tile-512-bg-color);font-size:45px}@media screen and (max-width: 520px){.tile.tile-512 .tile-inner{font-size:25px}}.tile.tile-1024 .tile-inner{color:var(--tile-1024-text-color);background:var(--tile-1024-bg-color);font-size:35px}@media screen and (max-width: 520px){.tile.tile-1024 .tile-inner{font-size:15px}}.tile.tile-2048 .tile-inner{color:var(--tile-2048-text-color);background:var(--tile-2048-bg-color);font-size:35px}@media screen and (max-width: 520px){.tile.tile-2048 .tile-inner{font-size:15px}}.tile.tile-super .tile-inner{color:var(--tile-super-text-color);background:var(--tile-super-bg-color);font-size:30px}@media screen and (max-width: 520px){.tile.tile-super .tile-inner{font-size:10px}}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}@-moz-keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}@keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}.tile-new .tile-inner{-webkit-animation:appear .2s ease .1s;-moz-animation:appear .2s ease .1s;animation:appear .2s ease .1s;-webkit-animation-fill-mode:backwards;-moz-animation-fill-mode:backwards;animation-fill-mode:backwards}@-webkit-keyframes pop{0%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}@-moz-keyframes pop{0%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}@keyframes pop{0%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}.tile-merged .tile-inner{z-index:20;-webkit-animation:pop .2s ease .1s;-moz-animation:pop .2s ease .1s;animation:pop .2s ease .1s;-webkit-animation-fill-mode:backwards;-moz-animation-fill-mode:backwards;animation-fill-mode:backwards}.game-intro{display:block}.restart-button{display:block;background:#8f7a66;border-radius:3px;padding:10px 0;text-decoration:none;font-weight:700;font-size:16px;color:#f9f6f2;text-align:center;margin-top:10px}html{text-size-adjust:100%;-webkit-text-size-adjust:100%;font-variation-settings:normal;font-feature-settings:normal;-webkit-font-smoothing:antialiased}p{line-height:1.45}.flex-1{flex:1 1}.level-y{display:inline-flex;align-items:center}.flex{display:flex}.items-center{align-items:center}h2.subtitle{font-size:1em;margin:0}@media screen and (max-height: 768px) and (min-width: 481px){.tile-128 .tile-inner,.tile-256 .tile-inner,.tile-512 .tile-inner{font-size:43px!important}.tile-1024 .tile-inner,.tile-2048 .tile-inner{font-size:33px!important}}@media screen and (max-width: 481px){html,body{font-size:15px}.heading .title button{font-size:50px}.container{width:280px;padding-top:42px}.score-container,.best-container{padding:18px 10px 4px;min-width:40px;font-size:20px}.score-container .score-addition,.best-container .score-addition{font-size:18px}.game-container{padding:10px;width:280px;height:280px}.game-container .game-message p{font-size:30px;font-weight:700;height:30px;line-height:30px;margin-top:90px}.game-container .game-message .lower{display:block;margin-top:29px}.retry-button{font-size:14px;padding:5px 16px}.grid-container{row-gap:10px;column-gap:10px}.grid-cell{width:57.5px;height:57.5px}.tile .tile-inner{width:58px;height:58px;line-height:58px}.tile.tile-position-1-1{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);transform:translate(0)}.tile.tile-position-1-2{-webkit-transform:translate(0px,67px);-moz-transform:translate(0px,67px);transform:translateY(67px)}.tile.tile-position-1-3{-webkit-transform:translate(0px,135px);-moz-transform:translate(0px,135px);transform:translateY(135px)}.tile.tile-position-1-4{-webkit-transform:translate(0px,202px);-moz-transform:translate(0px,202px);transform:translateY(202px)}.tile.tile-position-2-1{-webkit-transform:translate(67px,0px);-moz-transform:translate(67px,0px);transform:translate(67px)}.tile.tile-position-2-2{-webkit-transform:translate(67px,67px);-moz-transform:translate(67px,67px);transform:translate(67px,67px)}.tile.tile-position-2-3{-webkit-transform:translate(67px,135px);-moz-transform:translate(67px,135px);transform:translate(67px,135px)}.tile.tile-position-2-4{-webkit-transform:translate(67px,202px);-moz-transform:translate(67px,202px);transform:translate(67px,202px)}.tile.tile-position-3-1{-webkit-transform:translate(135px,0px);-moz-transform:translate(135px,0px);transform:translate(135px)}.tile.tile-position-3-2{-webkit-transform:translate(135px,67px);-moz-transform:translate(135px,67px);transform:translate(135px,67px)}.tile.tile-position-3-3{-webkit-transform:translate(135px,135px);-moz-transform:translate(135px,135px);transform:translate(135px,135px)}.tile.tile-position-3-4{-webkit-transform:translate(135px,202px);-moz-transform:translate(135px,202px);transform:translate(135px,202px)}.tile.tile-position-4-1{-webkit-transform:translate(202px,0px);-moz-transform:translate(202px,0px);transform:translate(202px)}.tile.tile-position-4-2{-webkit-transform:translate(202px,67px);-moz-transform:translate(202px,67px);transform:translate(202px,67px)}.tile.tile-position-4-3{-webkit-transform:translate(202px,135px);-moz-transform:translate(202px,135px);transform:translate(202px,135px)}.tile.tile-position-4-4{-webkit-transform:translate(202px,202px);-moz-transform:translate(202px,202px);transform:translate(202px,202px)}.tile .tile-inner{font-size:32px;line-height:58px}.game-intro{font-size:14px}.restart-button{padding:5px 0;margin-top:6px;font-size:14px;font-weight:600}}
