OneCompiler

2048

461
<!DOCTYPE html> <!--The HTML, CSS, and JS is not offical. Source: http://2048game.com/ --> <head> <title>2048</title> <style> #center{ max-width:500px; margin:auto; } @import url(fonts/clear-sans.css);c html, body { margin: 100px; padding: 0; background:#ffaa80; color: #776e65; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px;} body { margin: 80px 0; }

.heading:after {
content: "";
display: block;
clear: both; }

h1.title {
font-size: 80px;
font-weight: bold;
margin: 0;
display: block;
float: left; }
h1.title a {
text-decoration: none; }

@-webkit-keyframes move-up {
0% {
top: 25px;
opacity: 1; }

100% {
top: -50px;
opacity: 0; } }

@-moz-keyframes move-up {
0% {
top: 25px;
opacity: 1; }

100% {
top: -50px;
opacity: 0; } }

@keyframes move-up {
0% {
top: 25px;
opacity: 1; }

100% {
top: -50px;
opacity: 0; } }

.scores-container {
float: right;
text-align: right; }

.score-container, .best-container {
position: relative;
display: inline-block;
background: #bbada0;
padding: 15px 25px;
font-size: 25px;
height: 25px;
line-height: 47px;
font-weight: bold;
border-radius: 3px;
color: white;
margin-top: 8px;
text-align: center; }
.score-container:after, .best-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-container .score-addition, .best-container .score-addition {
position: absolute;
right: 30px;
color: red;
font-size: 25px;
line-height: 25px;
font-weight: bold;
color: rgba(119, 110, 101, 0.9);
z-index: 100;
-webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in;
animation: move-up 600ms 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: 10px;
line-height: 1.65; }

a {
color: #776e65;
font-weight: bold;
text-decoration: underline;
cursor: pointer; }

strong.important {
text-transform: uppercase; }

hr {
border: none;
border-bottom: 1px solid #d8d4d0;
margin-top: 20px;
margin-bottom: 30px; }

.container {
width: 500px;
margin: 0 auto; }

@-webkit-keyframes fade-in {
0% {
opacity: 0; }

100% {
opacity: 1; } }

@-moz-keyframes fade-in {
0% {
opacity: 0; }

100% {
opacity: 1; } }

@keyframes fade-in {
0% {
opacity: 0; }

100% {
opacity: 1; } }

.game-container {
margin-top: 40px;
position: relative;
padding: 15px;
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: #bbada0;
border-radius: 6px;
width: 500px;
height: 500px;
-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: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-container .game-message p {
font-size: 60px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px; }
.game-container .game-message .lower {
display: block;
margin-top: 59px; }
.game-container .game-message a {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px; }
.game-container .game-message a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; }

.grid-container {
position: absolute;
z-index: 1; }

.grid-row {
margin-bottom: 15px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }

.grid-cell {
width: 106.25px;
height: 106.25px;
margin-right: 15px;
float: left;
border-radius: 3px;
background: skyblue; }
.grid-cell:last-child {
margin-right: 0; }

.tile-container {
position: absolute;
z-index: 2; }

.tile, .tile .tile-inner {
width: 107px;
height: 107px;
line-height: 116.25px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px);
transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px);
transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px);
transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px);
transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px);
transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px);
transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px);
transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px);
transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px);
transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px);
transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px);
transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px);
transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px);
transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px);
transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px);
transform: translate(363px, 363px); }

.tile {
position: absolute;
-webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out;
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform; }
.tile .tile-inner {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
z-index: 10;
font-size: 55px; }
.tile.tile-2 .tile-inner {
color: #ff6666;
background: #e6e6ff;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-4 .tile-inner {
color: #ff6666;
background: #b3b3ff;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-8 .tile-inner {
color: #ff6666;
background: #8080ff; }
.tile.tile-16 .tile-inner {
color: #ff6666;
background: #4d4dff; }
.tile.tile-32 .tile-inner {
color: #ff6666;
background: #666699; }
.tile.tile-64 .tile-inner {
color: #ff6666;
background: #1a1aff; }
.tile.tile-128 .tile-inner {
color: #ff6666;
background: #0000e6;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px; }
@media screen and (max-width: 520px) {
.tile.tile-128 .tile-inner {
font-size: 25px; } }
.tile.tile-256 .tile-inner {
color: #ff6666;
background: #0000b3;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px; }
@media screen and (max-width: 520px) {
.tile.tile-256 .tile-inner {
font-size: 25px; } }
.tile.tile-512 .tile-inner {
color: #ff6666;
background: #000080;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px; }
@media screen and (max-width: 520px) {
.tile.tile-512 .tile-inner {
font-size: 25px; } }
.tile.tile-1024 .tile-inner {
color: #ff6666;
background: #00004d;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px; }
@media screen and (max-width: 520px) {
.tile.tile-1024 .tile-inner {
font-size: 15px; } }
.tile.tile-2048 .tile-inner {
color: #ff6666;
background: #00001a;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
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: #990099;
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); }

100% {
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); }

100% {
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); }

100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }

.tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms;
animation: appear 200ms ease 100ms;
-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); }

100% {
-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); }

100% {
-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); }

100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }

.tile-merged .tile-inner {
z-index: 20;
-webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms;
animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards; }

.above-game:after {
content: "";
display: block;
clear: both; }

.game-intro {
float: left;
line-height: 42px;
margin-bottom: 0; }

.restart-button {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
display: block;
text-align: center;
float: right; }

.game-explanation {
margin-top: 50px; }

@media screen and (max-width: 520px) {
html, body {
font-size: 15px; }

body {
margin: 20px 0;
padding: 0 20px; }

h1.title {
font-size: 27px;
margin-top: 15px; }

.container {
width: 280px;
margin: 0 auto; }

.score-container, .best-container {
margin-top: 0;
padding: 15px 10px;
min-width: 40px; }

.heading {
margin-bottom: 10px; }

.game-intro {
width: 55%;
display: block;
box-sizing: border-box;
line-height: 1.65; }

.restart-button {
width: 42%;
padding: 0;
display: block;
box-sizing: border-box;
margin-top: 2px; }

.game-container {
margin-top: 17px;
position: relative;
padding: 10px;
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: #bbada0;
border-radius: 6px;
width: 280px;
height: 280px;
-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: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-container .game-message p {
font-size: 60px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px; }
.game-container .game-message .lower {
display: block;
margin-top: 59px; }
.game-container .game-message a {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px; }
.game-container .game-message a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; }

.grid-container {
position: absolute;
z-index: 1; }

.grid-row {
margin-bottom: 10px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }

.grid-cell {
width: 57.5px;
height: 57.5px;
margin-right: 10px;
float: left;
border-radius: 3px;
background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child {
margin-right: 0; }

.tile-container {
position: absolute;
z-index: 2; }

.tile, .tile .tile-inner {
width: 58px;
height: 58px;
line-height: 67.5px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 67px);
-moz-transform: translate(0px, 67px);
transform: translate(0px, 67px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 135px);
-moz-transform: translate(0px, 135px);
transform: translate(0px, 135px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 202px);
-moz-transform: translate(0px, 202px);
transform: translate(0px, 202px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(67px, 0px);
-moz-transform: translate(67px, 0px);
transform: translate(67px, 0px); }
.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, 0px); }
.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, 0px); }
.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: 35px; }

.game-message p {
font-size: 30px !important;
height: 30px !important;
line-height: 30px !important;
margin-top: 90px !important; }
.game-message .lower {
margin-top: 30px !important; } }
.right {
float: right; }

.left {
float: left; }

.clearfix {
clear: both; }

.play-now {
margin-top: 22px; }
.play-now a {
border-radius: 6px;
padding: 12px;
text-decoration: none;
background-color: #bbada0;
color: white; }
.play-now a:hover {
text-decoration: underline; }

body {
margin: 30px 0;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 15px;
position: relative; }

footer {
padding-bottom: 30px; }

p {
line-height: 1.45; }

.heading {
margin-bottom: 20px; }

.side-column {
background-image: url(/img/pattern/amam.png);
background-position: 0px 0px;
background-repeat: repeat-y;
width: 180px;
height: 100%;
position: absolute;
top: 0;
bottom: 0; }

.side-column-left {
left: 0;
border-right: 1px solid white; }

.side-column-right {
right: 0;
border-left: 1px solid white;
background-position: -19px 0px; }

.side-ad {
margin-top: 360px;
margin-left: 10px; }
@media (min-height: 769px) {
.side-ad {
margin-top: 400px; } }
.side-ad .sponsored {
text-transform: uppercase;
font-size: 10px; }

.game-container {
margin-top: 25px; }

.grammarly-box {
padding: 20px;
background: #fff;
margin-bottom: 30px;
border: solid 1px #eee;
border-top: solid 2px #F08150; }
.grammarly-box .caption {
font-size: 18px;
line-height: 25px;
margin-bottom: 10px;
display: inline-block; }
.grammarly-box p {
margin-bottom: 0;
line-height: 1.3;
font-size: 14px; }

.bold {
font-weight: bold; }

.box-shadow {
background: #fff;
position: relative; }

.box-shadow:after,
.box-shadow:before {
top: 80%;
left: 5px;
width: 50%;
z-index: -1;
content: "";
bottom: 15px;
max-width: 300px;
background: #999;
position: absolute; }

.shadow-effect {
position: relative; }

.shadow-effect:after, .shadow-effect:before {
transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
box-shadow: 0 15px 10px #999;
-moz-box-shadow: 0 15px 10px #999;
-webkit-box-shadow: 0 15px 10px #999; }

.shadow-effect:after {
left: auto;
right: 5px;
transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }

.top-link-ads-wrapper {
border-bottom: 1px solid #D7C7B9;
padding: 4px;
margin-bottom: 15px; }

.top-link-ads {
height: 15px; }

.text-center {
text-align: center; }

h2.subtitle {
font-size: 1em;
margin: 0; }

.game-intro {
line-height: inherit;
float: none;
width: 100% !important; }

.game-explanation {
margin-top: 0px; }

.focus-line {
background-color: #ffc;
text-align: center;
padding: 5px 0; }

.ads-button {
margin-top: 15px;
margin-bottom: 10px; }

.fb-line {
margin-bottom: 20px;
float: right;
width: 160px; }
.fb-line .game-explanation {
font-size: 14px;
margin-bottom: 20px;
text-align: justify; }
.fb-line p {
margin-bottom: 0px;
float: none; }
.fb-line .fb-like-wrapper {
height: 30px; }

.ads-bellow-game {
margin-bottom: 20px;
height: 250px;
overflow: hidden;
float: left; }

.share-img-container {
padding-right: 25px; }

.share-img {
display: inline-block; }

.share-img-small {
display: none; }

.facebook-share-button {
color: #394F9F;
font-size: 14px;
display: block;
float: left; }

.twitter-button-wrapper {
float: left;
font-size: 14px;
margin-right: 10px;
width: 61px; }

.unstyled {
margin: 0px;
padding-left: 0px; }
.unstyled li {
list-style: none; }

h1.title-internal {
font-size: 40px; }

.shop-learn-more {
padding: 10px 0px;
border: 1px solid #d8d4d0;
text-align: center;
display: block; }
.shop-learn-more:hover {
background-color: #d8d4d0; }

.tips-and-tricks {
clear: both; }
.tips-and-tricks li {
margin-bottom: 10px;
margin-right: 10px;
float: left;
border: 1px solid #d8d4d0; }
.tips-and-tricks li a {
display: inline-block;
padding: 10px 0px;
width: 242px;
text-align: center; }
.tips-and-tricks li a:hover {
background-color: #d8d4d0; }
.tips-and-tricks li.even {
margin-right: 0px; }

.shop-list .item-link img {
width: 195px;
height: 195px; }
.shop-list .item-link .title {
margin: 5px 0; }

.quotes .quote {
margin-bottom: 20px; }

.iframe-main {
position: absolute;
background: transparent;
width: 100%;
height: 100%;
top: 50px;
padding: 0; }

.score-sharing {
display: inline-block;
margin-left: 10px; }

footer {
font-size: 17px; }

#flappy-thirds-wrapper {
text-align: center; }
#flappy-thirds-wrapper canvas {
border: 1px solid #d8d4d0; }

.choose-language, .solitaire-ad {
text-decoration: none;
font-size: 14px;
margin-left: 10px; }

.solitaire-ad {
padding-left: 5px; }
.solitaire-ad img {
margin-left: 15px; }

/* patch flag icons */
.choose-language span.flag-icon {
border: 1px solid #776e65; }

.flag-icon-en {
background-image: url(../flags/4x3/us.svg); }

.mobile-top {
position: relative;
display: none;
margin-bottom: 15px;
color: #f9f6f2; }
.mobile-top .open {
background-color: #776e65;
padding: 10px 0; }
.mobile-top .closed {
display: none;
height: 20px; }
.mobile-top .ad {
width: 320px;
height: 100px;
margin: 0 auto;
background-color: white; }
.mobile-top .close-btn {
position: absolute;
top: 5px;
right: 10px;
color: white;
text-decoration: none; }

.mobile-top-alt {
display: none; }

@media screen and (max-width: 860px) {
.side-column {
width: 130px; }

.side-ad {
display: none; }

.solitaire-ad img {
width: 100px; }

.side-column-left {
background-position: -60px 0px; } }
@media screen and (max-width: 760px) {
.side-column {
display: none; }

.mobile-top {
display: block; }

body {
padding: 0px; } }
@media screen and (min-width: 481px) {
.tile .tile-inner {
line-height: 107px; }

h1.title {
font-size: 74px;
line-height: 66px; } }
@media screen and (max-height: 768px) and (min-width: 481px) {
.heading {
margin-bottom: 15px; }

h1.title-internal {
font-size: 40px;
line-height: 64px; }

.container {
width: 450px; }

.game-container {
margin-top: 40px;
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: #bbada0;
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: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-container .game-message p {
font-size: 60px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px; }
.game-container .game-message .lower {
display: block;
margin-top: 59px; }
.game-container .game-message a {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px; }
.game-container .game-message a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; }

.grid-container {
position: absolute;
z-index: 1; }

.grid-row {
margin-bottom: 12px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }

.grid-cell {
width: 97.5px;
height: 97.5px;
margin-right: 12px;
float: left;
border-radius: 3px;
background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child {
margin-right: 0; }

.tile-container {
position: absolute;
z-index: 2; }

.tile, .tile .tile-inner {
width: 98px;
height: 98px;
line-height: 107.5px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 109px);
-moz-transform: translate(0px, 109px);
transform: translate(0px, 109px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 219px);
-moz-transform: translate(0px, 219px);
transform: translate(0px, 219px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 328px);
-moz-transform: translate(0px, 328px);
transform: translate(0px, 328px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(109px, 0px);
-moz-transform: translate(109px, 0px);
transform: translate(109px, 0px); }
.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, 0px); }
.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, 0px); }
.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 .tile-inner {
font-size: 53px;
line-height: 98px; }

.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; }

.game-intro {
font-size: 17px; }

.restart-button {
padding: 0 14px; }

.game-container {
margin-top: 10px; }

.tips-and-tricks li a {
width: 218px; }

footer {
font-size: 16px; } }
@media screen and (max-width: 480px) {
html, body {
font-size: 15px; }

body {
margin: 0 0 20px 0; }

#flappy-thirds-wrapper canvas {
width: 100%; }

.restart-button {
width: 35%; }

.game-container {
margin-top: 10px; }

.score-container:after, .best-container:after {
font-size: 11px; }

.approved img {
width: 280px; }

.play-now a {
padding: 8px; }

h1.title-internal {
font-size: 24px; }

.share-img {
display: none; }

.share-img-small {
display: none; }

.tips-and-tricks li a {
width: 280px; }
.tips-and-tricks li a.even {
margin-right: 0px; }

.top-link-ads-wrapper {
display: none; }

.fb-line {
float: left;
width: 100%;
font-size: 15px; }

.ads-bellow-game {
margin-top: 30px;
text-align: center;
float: none;
width: 100%; } }

</style>
</head> <script> Function.prototype.bind = Function.prototype.bind || function(a) { var b = this; return function(c) { c instanceof Array || (c = [c]); b.apply(a, c) } } ; (function() { function a(a) { this.el = a; a = a.className.replace(/^\s+|\s+$/g, "").split(/\s+/); for (var b = 0; b < a.length; b++) d.call(this, a[b]) } function b(a, b, c) { Object.defineProperty ? Object.defineProperty(a, b, { get: c }) : a.__defineGetter__(b, c) } if (!("undefined" === typeof window.Element || "classList"in document.documentElement)) { var c = Array.prototype , d = c.push , e = c.splice , f = c.join; a.prototype = { add: function(a) { this.contains(a) || (d.call(this, a), this.el.className = this.toString()) }, contains: function(a) { return -1 != this.el.className.indexOf(a) }, item: function(a) { return this[a] || null }, remove: function(a) { if (this.contains(a)) { for (var b = 0; b < this.length && this[b] != a; b++) ; e.call(this, b, 1); this.el.className = this.toString() } }, toString: function() { return f.call(this, " ") }, toggle: function(a) { this.contains(a) ? this.remove(a) : this.add(a); return this.contains(a) } }; window.DOMTokenList = a; b(HTMLElement.prototype, "classList", function() { return new a(this) }) } })(); (function() { for (var a = 0, b = ["webkit", "moz"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"]; window.requestAnimationFrame || (window.requestAnimationFrame = function(b, c) { var f = (new Date).getTime() , h = Math.max(0, 16 - (f - a)) , g = window.setTimeout(function() { b(f + h) }, h); a = f + h; return g } ); window.cancelAnimationFrame || (window.cancelAnimationFrame = function(a) { clearTimeout(a) } ) })(); function KeyboardInputManager() { this.events = {}; window.navigator.msPointerEnabled ? (this.eventTouchstart = "MSPointerDown", this.eventTouchmove = "MSPointerMove", this.eventTouchend = "MSPointerUp") : (this.eventTouchstart = "touchstart", this.eventTouchmove = "touchmove", this.eventTouchend = "touchend"); this.listen() } KeyboardInputManager.prototype.on = function(a, b) { this.events[a] || (this.events[a] = []); this.events[a].push(b) } ; KeyboardInputManager.prototype.emit = function(a, b) { var c = this.events[a]; c && c.forEach(function(a) { a(b) }) } ; KeyboardInputManager.prototype.listen = function() { var a = this , b = { 38: 0, 39: 1, 40: 2, 37: 3, 75: 0, 76: 1, 74: 2, 72: 3, 87: 0, 68: 1, 83: 2, 65: 3 }; document.addEventListener("keydown", function(c) { var d = c.altKey || c.ctrlKey || c.metaKey || c.shiftKey , e = b[c.which]; d || void 0 === e || (c.preventDefault(), a.emit("move", e)); d || 82 !== c.which || a.restart.call(a, c) }); this.bindButtonPress(".retry-button", this.restart); this.bindButtonPress(".restart-button", this.restart); this.bindButtonPress(".keep-playing-button", this.keepPlaying); var c, d, e = document.getElementsByClassName("game-container")[0]; e.addEventListener(this.eventTouchstart, function(a) { !window.navigator.msPointerEnabled && 1 < a.touches.length || 1 < a.targetTouches || (window.navigator.msPointerEnabled ? (c = a.pageX, d = a.pageY) : (c = a.touches[0].clientX, d = a.touches[0].clientY), a.preventDefault()) }); e.addEventListener(this.eventTouchmove, function(a) { a.preventDefault() }); e.addEventListener(this.eventTouchend, function(b) { if (!(!window.navigator.msPointerEnabled && 0 < b.touches.length || 0 < b.targetTouches)) { var e, g; window.navigator.msPointerEnabled ? (e = b.pageX, g = b.pageY) : (e = b.changedTouches[0].clientX, g = b.changedTouches[0].clientY); e -= c; b = Math.abs(e); g -= d; var m = Math.abs(g); 10 < Math.max(b, m) && a.emit("move", b > m ? 0 < e ? 1 : 3 : 0 < g ? 2 : 0) } }) } ; KeyboardInputManager.prototype.restart = function(a) { a.preventDefault(); this.emit("restart") } ; KeyboardInputManager.prototype.keepPlaying = function(a) { a.preventDefault(); this.emit("keepPlaying") } ; KeyboardInputManager.prototype.bindButtonPress = function(a, b) { var c = document.querySelector(a); c.addEventListener("click", b.bind(this)); c.addEventListener(this.eventTouchend, b.bind(this)) } ; function HTMLActuator() { this.tileContainer = document.querySelector(".tile-container"); this.scoreContainer = document.querySelector(".score-container"); this.bestContainer = document.querySelector(".best-container"); this.messageContainer = document.querySelector(".game-message"); this.sharingContainer = document.querySelector(".score-sharing"); this.score = 0 } HTMLActuator.prototype.actuate = function(a, b) { var c = this; window.requestAnimationFrame(function() { c.clearContainer(c.tileContainer); a.cells.forEach(function(a) { a.forEach(function(a) { a && c.addTile(a) }) }); c.updateScore(b.score); c.updateBestScore(b.bestScore); b.terminated && (b.over ? c.message(!1) : b.won && c.message(!0)) }) } ; HTMLActuator.prototype.continueGame = function() { this.clearMessage() } ; HTMLActuator.prototype.clearContainer = function(a) { for (; a.firstChild; ) a.removeChild(a.firstChild) } ; HTMLActuator.prototype.addTile = function(a) { var b = this , c = document.createElement("div") , d = document.createElement("div") , e = this.positionClass(a.previousPosition || { x: a.x, y: a.y }) , f = ["tile", "tile-" + a.value, e]; 2048 < a.value && f.push("tile-super"); this.applyClasses(c, f); d.classList.add("tile-inner"); d.textContent = a.value; a.previousPosition ? window.requestAnimationFrame(function() { f[2] = b.positionClass({ x: a.x, y: a.y }); b.applyClasses(c, f) }) : a.mergedFrom ? (f.push("tile-merged"), this.applyClasses(c, f), a.mergedFrom.forEach(function(a) { b.addTile(a) })) : (f.push("tile-new"), this.applyClasses(c, f)); c.appendChild(d); this.tileContainer.appendChild(c) } ; HTMLActuator.prototype.applyClasses = function(a, b) { a.setAttribute("class", b.join(" ")) } ; HTMLActuator.prototype.normalizePosition = function(a) { return { x: a.x + 1, y: a.y + 1 } } ; HTMLActuator.prototype.positionClass = function(a) { a = this.normalizePosition(a); return "tile-position-" + a.x + "-" + a.y } ; HTMLActuator.prototype.updateScore = function(a) { this.clearContainer(this.scoreContainer); var b = a - this.score; this.score = a; this.scoreContainer.textContent = this.score; 0 < b && (a = document.createElement("div"), a.classList.add("score-addition"), a.textContent = "+" + b, this.scoreContainer.appendChild(a)) } ; HTMLActuator.prototype.updateBestScore = function(a) { this.bestContainer.textContent = a } ; HTMLActuator.prototype.message = function(a) { var b = a ? "You win!" : "Game over!"; this.messageContainer.classList.add(a ? "game-won" : "game-over"); this.messageContainer.getElementsByTagName("p")[0].textContent = b; this.clearContainer(this.sharingContainer); this.sharingContainer.appendChild(this.scoreTweetButton()); twttr.widgets.load() } ; HTMLActuator.prototype.clearMessage = function() { this.messageContainer.classList.remove("game-won"); this.messageContainer.classList.remove("game-over") } ; HTMLActuator.prototype.scoreTweetButton = function() { var a = document.createElement("a"); a.classList.add("twitter-share-button"); a.setAttribute("href", "https://twitter.com/share"); a.setAttribute("data-url", "http://2048game.com"); a.setAttribute("data-counturl", "http://2048game.com"); a.textContent = "Tweet"; a.setAttribute("data-text", "I scored " + this.score + " points at 2048, a game where you join numbers to score high! #2048game"); return a } ; function Grid(a, b) { this.size = a; this.cells = b ? this.fromState(b) : this.empty() } Grid.prototype.empty = function() { for (var a = [], b = 0; b < this.size; b++) for (var c = a[b] = [], d = 0; d < this.size; d++) c.push(null); return a } ; Grid.prototype.fromState = function(a) { for (var b = [], c = 0; c < this.size; c++) for (var d = b[c] = [], e = 0; e < this.size; e++) { var f = a[c][e]; d.push(f ? new Tile(f.position,f.value) : null) } return b } ; Grid.prototype.randomAvailableCell = function() { var a = this.availableCells(); if (a.length) return a[Math.floor(Math.random() * a.length)] } ; Grid.prototype.availableCells = function() { var a = []; this.eachCell(function(b, c, d) { d || a.push({ x: b, y: c }) }); return a } ; Grid.prototype.eachCell = function(a) { for (var b = 0; b < this.size; b++) for (var c = 0; c < this.size; c++) a(b, c, this.cells[b][c]) } ; Grid.prototype.cellsAvailable = function() { return !!this.availableCells().length } ; Grid.prototype.cellAvailable = function(a) { return !this.cellOccupied(a) } ; Grid.prototype.cellOccupied = function(a) { return !!this.cellContent(a) } ; Grid.prototype.cellContent = function(a) { return this.withinBounds(a) ? this.cells[a.x][a.y] : null } ; Grid.prototype.insertTile = function(a) { this.cells[a.x][a.y] = a } ; Grid.prototype.removeTile = function(a) { this.cells[a.x][a.y] = null } ; Grid.prototype.withinBounds = function(a) { return 0 <= a.x && a.x < this.size && 0 <= a.y && a.y < this.size } ; Grid.prototype.serialize = function() { for (var a = [], b = 0; b < this.size; b++) for (var c = a[b] = [], d = 0; d < this.size; d++) c.push(this.cells[b][d] ? this.cells[b][d].serialize() : null); return { size: this.size, cells: a } } ; function Tile(a, b) { this.x = a.x; this.y = a.y; this.value = b || 2; this.mergedFrom = this.previousPosition = null } Tile.prototype.savePosition = function() { this.previousPosition = { x: this.x, y: this.y } } ; Tile.prototype.updatePosition = function(a) { this.x = a.x; this.y = a.y } ; Tile.prototype.serialize = function() { return { position: { x: this.x, y: this.y }, value: this.value } } ; window.fakeStorage = { _data: {}, setItem: function(a, b) { return this._data[a] = String(b) }, getItem: function(a) { return this._data.hasOwnProperty(a) ? this._data[a] : void 0 }, removeItem: function(a) { return delete this._data[a] }, clear: function() { return this._data = {} } }; function LocalStorageManager() { this.bestScoreKey = "bestScore"; this.gameStateKey = "gameState"; this.storage = this.localStorageSupported() ? window.localStorage : window.fakeStorage } LocalStorageManager.prototype.localStorageSupported = function() { var a = window.localStorage; try { return a.setItem("test", "1"), a.removeItem("test"), !0 } catch (b) { return !1 } } ; LocalStorageManager.prototype.getBestScore = function() { return this.storage.getItem(this.bestScoreKey) || 0 } ; LocalStorageManager.prototype.setBestScore = function(a) { this.storage.setItem(this.bestScoreKey, a) } ; LocalStorageManager.prototype.getGameState = function() { var a = this.storage.getItem(this.gameStateKey); return a ? JSON.parse(a) : null } ; LocalStorageManager.prototype.setGameState = function(a) { this.storage.setItem(this.gameStateKey, JSON.stringify(a)) } ; LocalStorageManager.prototype.clearGameState = function() { this.storage.removeItem(this.gameStateKey) } ; function GameManager(a, b, c, d) { this.size = a; this.inputManager = new b; this.storageManager = new d; this.actuator = new c; this.startTiles = 2; this.inputManager.on("move", this.move.bind(this)); this.inputManager.on("restart", this.restart.bind(this)); this.inputManager.on("keepPlaying", this.keepPlaying.bind(this)); this.setup() } GameManager.prototype.restart = function() { this.storageManager.clearGameState(); this.actuator.continueGame(); this.setup() } ; GameManager.prototype.keepPlaying = function() { this.keepPlaying = !0; this.actuator.continueGame() } ; GameManager.prototype.isGameTerminated = function() { return this.over || this.won && !this.keepPlaying ? !0 : !1 } ; GameManager.prototype.setup = function() { var a = this.storageManager.getGameState(); a ? (this.grid = new Grid(a.grid.size,a.grid.cells), this.score = a.score, this.over = a.over, this.won = a.won, this.keepPlaying = a.keepPlaying) : (this.grid = new Grid(this.size), this.score = 0, this.keepPlaying = this.won = this.over = !1, this.addStartTiles()); this.actuate() } ; GameManager.prototype.addStartTiles = function() { for (var a = 0; a < this.startTiles; a++) this.addRandomTile() } ; GameManager.prototype.addRandomTile = function() { if (this.grid.cellsAvailable()) { var a = 0.9 > Math.random() ? 2 : 4 , a = new Tile(this.grid.randomAvailableCell(),a); this.grid.insertTile(a) } } ; GameManager.prototype.actuate = function() { this.storageManager.getBestScore() < this.score && this.storageManager.setBestScore(this.score); this.over ? this.storageManager.clearGameState() : this.storageManager.setGameState(this.serialize()); this.actuator.actuate(this.grid, { score: this.score, over: this.over, won: this.won, bestScore: this.storageManager.getBestScore(), terminated: this.isGameTerminated() }) } ; GameManager.prototype.serialize = function() { return { grid: this.grid.serialize(), score: this.score, over: this.over, won: this.won, keepPlaying: this.keepPlaying } } ; GameManager.prototype.prepareTiles = function() { this.grid.eachCell(function(a, b, c) { c && (c.mergedFrom = null, c.savePosition()) }) } ; GameManager.prototype.moveTile = function(a, b) { this.grid.cells[a.x][a.y] = null; this.grid.cells[b.x][b.y] = a; a.updatePosition(b) } ; GameManager.prototype.move = function(a) { var b = this; if (!this.isGameTerminated()) { var c, d, e = this.getVector(a), f = this.buildTraversals(e), h = !1; this.prepareTiles(); f.x.forEach(function(a) { f.y.forEach(function(f) { c = { x: a, y: f }; if (d = b.grid.cellContent(c)) { f = b.findFarthestPosition(c, e); var k = b.grid.cellContent(f.next); if (k && k.value === d.value && !k.mergedFrom) { var l = new Tile(f.next,2 * d.value); l.mergedFrom = [d, k]; b.grid.insertTile(l); b.grid.removeTile(d); d.updatePosition(f.next); b.score += l.value; 2048 === l.value && (b.won = !0) } else b.moveTile(d, f.farthest); b.positionsEqual(c, d) || (h = !0) } }) }); h && (this.addRandomTile(), this.movesAvailable() || (this.over = !0), this.actuate()) } } ; GameManager.prototype.getVector = function(a) { return { 0: { x: 0, y: -1 }, 1: { x: 1, y: 0 }, 2: { x: 0, y: 1 }, 3: { x: -1, y: 0 } }[a] } ; GameManager.prototype.buildTraversals = function(a) { for (var b = { x: [], y: [] }, c = 0; c < this.size; c++) b.x.push(c), b.y.push(c); 1 === a.x && (b.x = b.x.reverse()); 1 === a.y && (b.y = b.y.reverse()); return b } ; GameManager.prototype.findFarthestPosition = function(a, b) { var c; do c = a, a = { x: c.x + b.x, y: c.y + b.y }; while (this.grid.withinBounds(a) && this.grid.cellAvailable(a));return { farthest: c, next: a } } ; GameManager.prototype.movesAvailable = function() { return this.grid.cellsAvailable() || this.tileMatchesAvailable() } ; GameManager.prototype.tileMatchesAvailable = function() { for (var a, b = 0; b < this.size; b++) for (var c = 0; c < this.size; c++) if (a = this.grid.cellContent({ x: b, y: c })) for (var d = 0; 4 > d; d++) { var e = this.getVector(d); if ((e = this.grid.cellContent({ x: b + e.x, y: c + e.y })) && e.value === a.value) return !0 } return !1 } ; GameManager.prototype.positionsEqual = function(a, b) { return a.x === b.x && a.y === b.y } ; window.requestAnimationFrame(function() { new GameManager(4,KeyboardInputManager,HTMLActuator,LocalStorageManager) }); </script> <div id="center"> <div class="heading"> <h1 class="title">2048</h1> <div class="scores-container"> <div class="score-container">0</div> <div class="best-container">2960</div> </div> </div> <div class="game-intro"> <a class="restart-button">New Game</a> <h2 class="subtitle">Play <strong>2048 Game</strong> Online</h2> <div class="above-game"> <p>Join the numbers and get to the <strong>2048 tile!</strong></p> </div> </div> <div class="game-container"> <div class="game-message"> <p></p> <div class="lower"> <a class="keep-playing-button">Keep playing</a> <a class="retry-button">Try again</a> <div class="score-sharing"> </div> </div> </div> <div class="grid-container"> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> </div> <div class="tile-container"><div class="tile tile-4 tile-position-3-4 tile-new"><div class="tile-inner">4</div></div><div class="tile tile-2 tile-position-4-1 tile-new"><div class="tile-inner">2</div></div></div> </div> </div>