h1{
	text-align:center;
	font-weight: bold;
	font-size: 30px;
}
p {
	position: relative;
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 1.65; 
}
button{
	float: right;
}
.container{
	height: 700px;
	width: 500px;
	position: relative;
	margin: 0px auto;
	border: 1px;
	padding: 1px;
}
.heading{
	position: relative;
	height: 50px;
	width: 500px;
	display: block;
}
.score-container {
 	float: left;
}
.currentscore, .bestscore{
	position: relative;
	display: inline-block;
	background: #ffaabb;
	font-size: 15px;
	height:40px;
	width:80px;
	line-height: 60px;
	font-weight: bold;
	border-radius: 3px;
	color: white;
	text-align: center; 
}
.currentscore:after {
    content: "Score";
}
.bestscore:after {
	content: "Best";
}
.currentscore:after, .bestscore:after {
    position: absolute;
    width: 100%;
    top: 5px;
    left: 0;
/*    text-transform: uppercase;*/
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: #fff;
}
#newGame {
  height: 40px;
  width: 100px;
  border-radius: 5px;
  background-color: #ffaabb;
  border: none;
  box-shadow: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: 迷你简细行楷;
  cursor: pointer;
}
.game-container {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: #ffaabb;
  padding: 15px;
  border-radius: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
}
.box{
	width: 470px;
	height: 470px;
}
.row {
  width: 470px;
  height: 106.25px;
  margin-bottom: 15px;
  clear: both;
}
.row:last-child {
	margin-bottom: 0px; 
}
.row:after {
    content: "";
    display: block;
    clear: both; 
}
.cell {
	width: 106.25px;
	height: 106.25px;
	margin-right: 15px;
	float: left;
  	border-radius: 3px;
	background: #ffdddd/*rgba(238, 228, 218, 0.35)*/; 
}
.cell:last-child {
	margin-right: 0; 
}
.tile-container {
	color: #f9f6f2;
	width: 470px;
	height: 470px;
	position: absolute;
	top: 15px;
}
.footer{
	position:absolute;
	bottom: 0px;
	width:500px;
	height: 30px;
	background-color:#ffaabb;
	clear:both;
	text-align:center;
	font-size: 18px;
}
.game-over-mes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: rgba(204, 204, 204, 0.5);
}
.game-over-mes:after {
  content: "o(╥﹏╥)o Game Over";
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  margin: auto;
  text-align: center;
}
.game-win {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: rgba(204, 204, 204, 0.5);
}
.game-win:after {
  content: "ヾ(◍°∇°◍)ﾉﾞYou Win";
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 180px;
  left: 0;
  right: 0;
  height: 70px;
  margin: auto;
  text-align: center;
}
.game-win-again {
  width: 160px;
  height: 50px;
  border-radius: 5px;
  background-color: #8f7a66;
  border: none;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 30px;
}
.game-win-again:after {
  content: "Continue";
}
.tile {
  position: absolute;
  width: 106.25px;
  height: 106.25px;
  text-align: center;
  line-height: 106.25px;
  font-size: 50px;
  top: 0;
  transition: transform 150ms ease-out;
  -moz-transition: transform 150ms ease-out;
  /* Firefox 4 */
  -webkit-transition: transform 150ms ease-out;
  /* Safari 和 Chrome */
  -o-transition: transform 150ms ease-out;
  /* Opera */
  animation: tiledisplay 300ms 1;
  -webkit-animation: tiledisplay 300ms 1;
  /* Safari 和 Chrome */
}
@keyframes tiledisplay {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-webkit-keyframes tiledisplay
/* Safari and Chrome */

{
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

.tile-container .tile-2 {
  color: #776e65;
  background: #eee4da;
}
.tile-container .tile-4 {
  color: #776e65;
  background: #ede0c8;
}
.tile-container .tile-8 {
  background: #f2b179;
}
.tile-container .tile-16 {
  background: #f59563;
}
.tile-container .tile-32 {
  background: #f67c5f;
}
.tile-container .tile-64 {
  background: #f65e3b;
}
.tile-container .tile-128 {
  background: #edcf72;
}
.tile-container .tile-256 {
  background: #edcc61;
}
.tile-container .tile-512 {
  background: #edc850;
}
.tile-container .tile-1024 {
  background: #edc53f;
}
.tile-container .tile-2048 {
  background: #edc22e;
}
.tile-container .tile-pos-0-0 {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.tile-container .tile-pos-0-1 {
  -webkit-transform: translate(0, 121.25px);
  -ms-transform: translate(0, 121.25px);
  -o-transform: translate(0, 121.25px);
  transform: translate(0, 121.25px);
}

.tile-container .tile-pos-0-2 {
  -webkit-transform: translate(0, 242.5px);
  -ms-transform: translate(0, 242.5px);
  -o-transform: translate(0, 242.5px);
  transform: translate(0, 242.5px);
}

.tile-container .tile-pos-0-3 {
  -webkit-transform: translate(0, 363.75px);
  -ms-transform: translate(0, 363.75px);
  -o-transform: translate(0, 363.75px);
  transform: translate(0, 363.75px);
}

.tile-container .tile-pos-1-0 {
  -webkit-transform: translate(121.25px, 0);
  -ms-transform: translate(121.25px, 0);
  -o-transform: translate(121.25px, 0);
  transform: translate(121.25px, 0);
}

.tile-container .tile-pos-1-1 {
  -webkit-transform: translate(121.25px, 121.25px);
  -ms-transform: translate(121.25px, 121.25px);
  -o-transform: translate(121.25px, 121.25px);
  transform: translate(121.25px, 121.25px);
}

.tile-container .tile-pos-1-2 {
  -webkit-transform: translate(121.25px, 242.5px);
  -ms-transform: translate(121.25px, 242.5px);
  -o-transform: translate(121.25px, 242.5px);
  transform: translate(121.25px, 242.5px);
}

.tile-container .tile-pos-1-3 {
  -webkit-transform: translate(121.25px, 363.75px);
  -ms-transform: translate(121.25px, 363.75px);
  -o-transform: translate(121.25px, 363.75px);
  transform: translate(121.25px, 363.75px);
}

.tile-container .tile-pos-2-0 {
  -webkit-transform: translate(242.5px, 0);
  -ms-transform: translate(242.5px, 0);
  -o-transform: translate(242.5px, 0);
  transform: translate(242.5px, 0);
}

.tile-container .tile-pos-2-1 {
  -webkit-transform: translate(242.5px, 121.25px);
  -ms-transform: translate(242.5px, 121.25px);
  -o-transform: translate(242.5px, 121.25px);
  transform: translate(242.5px, 121.25px);
}

.tile-container .tile-pos-2-2 {
  -webkit-transform: translate(242.5px, 242.5px);
  -ms-transform: translate(242.5px, 242.5px);
  -o-transform: translate(242.5px, 242.5px);
  transform: translate(242.5px, 242.5px);
}

.tile-container .tile-pos-2-3 {
  -webkit-transform: translate(242.5px, 363.75px);
  -ms-transform: translate(242.5px, 363.75px);
  -o-transform: translate(242.5px, 363.75px);
  transform: translate(242.5px, 363.75px);
}

.tile-container .tile-pos-3-0 {
  -webkit-transform: translate(363.75px, 0);
  -ms-transform: translate(363.75px, 0);
  -o-transform: translate(363.75px, 0);
  transform: translate(363.75px, 0);
}

.tile-container .tile-pos-3-1 {
  -webkit-transform: translate(363.75px, 121.25px);
  -ms-transform: translate(363.75px, 121.25px);
  -o-transform: translate(363.75px, 121.25px);
  transform: translate(363.75px, 121.25px);
}

.tile-container .tile-pos-3-2 {
  -webkit-transform: translate(363.75px, 242.5px);
  -ms-transform: translate(363.75px, 242.5px);
  -o-transform: translate(363.75px, 242.5px);
  transform: translate(363.75px, 242.5px);
}

.tile-container .tile-pos-3-3 {
  -webkit-transform: translate(363.75px, 363.75px);
  -ms-transform: translate(363.75px, 363.75px);
  -o-transform: translate(363.75px, 363.75px);
  transform: translate(363.75px, 363.75px);
}