@charset "utf8";
.container {
	width: 400px;
	margin: 20px auto;
}
.gridContainer {
	width: 100%;
	height: 100%;
	position: relative;
}
.grid {
	width: 400px;
	position: absolute;
	top: 0px;
	left: -29px;
	border-radius: 20px;
	border-spacing: 10px;
	table-layout: fixed;
}
.cell {
	width: 100px;
	height: 100px;
	border-radius: 20px;
	font-size: 64px;
	font-weight: bold;
	text-align: center;
}
#gbase { background-color: #bbada0; }
#gbase .cell { background-color: #ccc0b3; }
.num2 { background-color: #eee3da; }
.num4 { background-color: #ede0c8; }
.num8 { background-color: #f2b179; }
.num16 { background-color: #f59563; }
.num32 { background-color: #f67c5f; }
.num64 { background-color: #f65e3b; }
.num128 { background-color: #edcf72; }
.num256 { background-color: #edcc61; }
.num512 { background-color: #9c0; }
.num1024 { background-color: #33b5e5; }
.num2048 { background-color: #09c; }
.num8, .num16, .num32, .num64, .num128, .num256, .num512, .num1024, .num2014 { color: #fff; }
.num128, .num256, .num512 { font-size: 48px; }
.num1024, .num2014 { font-size: 36px; }
#gameStart, #gameOver {
	display: none;
	width: 500px;
	height: 240px;
	margin: -120px -250px;
	position: fixed;
	top: 50%;
	left: 50%;
	background-color: #09c;
	border-radius: 20px;
	color: #fff;
}
#gameStart h1, #gameOver h1 {
	height: 72px;
	line-height: 72px;
	text-align: center;
	font-size: 36px;
	background-color: rgba(222,222,222,.4);
}
#gameOver p {
	text-align: center;
}
#gameStart .play, #gameOver .replay {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	padding: 0px;
	margin: 0px auto;
	cursor: pointer;
	background-color: rgba(255,255,255,.7);
}
.replay:hover {
	transform: rotate(360deg);
	transition: transform .5s;
}
#game .replay {
	float: right;
	display: block;
	width: 50px;
	height: 50px;
	padding: 0px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background-color: transparent;
}
.play:hover {
	transform: scale(1.1);
	transition: transform .5s;
}