.game-container {
	float: left;
	margin-right: 14px;
}

.scores-container {
	float: left;
}

.score-container, .best-container {
	font-size: 25px;
	height: 25px;
	font-weight: bold;
	margin-bottom: 12px;
}

.game-container {
	position: relative;
	padding: 15px;
	cursor: default;
	touch-action: none;
	background: #aaa;
	border-radius: 6px;
	width: 500px;
	height: 500px;
	box-sizing: border-box;
}

.game-container .game-message {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(222, 222, 222, 0.5);
	z-index: 100;
	text-align: center;
	color: #333;
	-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.keep-playing-button {
	display: none;
}
.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 {
	float: left;
	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: rgba(222, 222, 222, 0.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(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: rgb(207, 224, 234);
	text-align: center;
	font-weight: bold;
	z-index: 10;
	font-size: 55px;
	color: #333;
}
.tile.tile-2 .tile-inner {
	background: rgb(110, 203, 242);
}
.tile.tile-4 .tile-inner {
	background: rgb(116, 197, 197);
}
.tile.tile-8 .tile-inner {
	background: rgb(172, 202, 129);
}
.tile.tile-16 .tile-inner {
	background: rgb(231, 205, 133);
}
.tile.tile-32 .tile-inner {
	background: rgb(230, 161, 99);
}
.tile.tile-64 .tile-inner {
	background: rgb(222, 114, 95);
}
.tile.tile-128 .tile-inner {
	background: rgb(204, 88, 105);
	font-size: 45px;
}
.tile.tile-256 .tile-inner {
	background: rgb(212, 172, 205);
	font-size: 45px;
}
.tile.tile-512 .tile-inner {
	background: rgb(130, 109, 168);
	font-size: 45px;
}
.tile.tile-1024 .tile-inner {
	background: rgb(88, 129, 190);
	font-size: 35px;
}
.tile.tile-2048 .tile-inner {
	background: rgb(90, 90, 90);
	font-size: 35px;
}
.tile.tile-super .tile-inner {
	background: rgb(246, 247, 245);
	font-size: 30px;
}

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


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

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

@-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); } }

@-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); } }