* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  display: block;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  border: none;
}

img,
span {
  display: block;
}

.clearfix {
  *zoom: 1;
}

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

#wrap {
  position: relative;
  font-size: 0.73143rem;
  height: 100%;
  background: #f2eae4;
  padding: 0.91429rem;
  box-sizing: border-box;
}

#wrap .header {
  display: flex;
  justify-content: space-between;
}

#wrap .header .title {
  font-size: 1.50857rem;
  font-weight: bolder;
  color: #776e65;
  display: flex;
  align-items: center;
}

#wrap .header .scores {
  display: flex;
}

#wrap .header .scores .scoreTitle, #wrap .header .scores .nowScores .scoreTitle, #wrap .header .scores .bestScores .scoreTitle {
  font-size: 0.73143rem;
  color: #e9dfd6;
}

#wrap .header .scores .score, #wrap .header .scores .nowScores .score, #wrap .header .scores .bestScores .score {
  font-size: 1.14286rem;
  color: #FFFFFF;
  margin-top: 0.22857rem;
}

#wrap .header .scores .scoresCommon, #wrap .header .scores .nowScores, #wrap .header .scores .bestScores {
  background: #bbada1;
  text-align: center;
  padding: 0.22857rem;
  height: 2.74286rem;
  font-weight: bolder;
  border-radius: 0.32rem;
}

#wrap .header .scores .nowScores {
  margin-right: 0.45714rem;
  width: 2.74286rem;
}

#wrap .header .scores .bestScores {
  width: 2.28571rem;
}

#wrap .playGame {
  display: flex;
  justify-content: space-between;
  margin-top: 2.28571rem;
  align-items: center;
}

#wrap .playGame .word {
  color: #776e65;
  font-weight: bolder;
  font-size: 0.68571rem;
}

#wrap .playGame .btnPlay {
  color: #ffffff;
  background: #8e7a67;
  height: 1.82857rem;
  width: 4.57143rem;
  border-radius: 0.22857rem;
  font-weight: bold;
  font-size: 0.77714rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.18286rem 0 0.18286rem;
}

#wrap .board {
  margin-top: 2.28571rem;
  padding: 0.45714rem;
  width: 13.25714rem;
  height: 13.25714rem;
  border-radius: 0.22857rem;
  background: #bbada1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  position: relative;
}

#wrap .board .gridStyle, #wrap .board .grid, #wrap .board .pieces {
  width: 2.97143rem;
  height: 2.97143rem;
  border-radius: 0.22857rem;
}

#wrap .board .grid {
  background: #cdc1b5;
}

#wrap .board .pieces {
  position: absolute;
  font-size: 0.91429rem;
  text-align: center;
  line-height: 2.97143rem;
  color: #FFFFFF;
  font-weight: bolder;
}

#wrap .board [id^="p0"] {
  top: 0.45714rem;
}

#wrap .board [id^="p1"] {
  top: 3.88571rem;
}

#wrap .board [id^="p2"] {
  top: 7.31429rem;
}

#wrap .board [id^="p3"] {
  top: 10.74286rem;
}

#wrap .board [id$="0"] {
  left: 0.45714rem;
}

#wrap .board [id$="1"] {
  left: 3.88571rem;
}

#wrap .board [id$="2"] {
  left: 7.31429rem;
}

#wrap .board [id$="3"] {
  left: 10.74286rem;
}

#wrap .board .score2 {
  background: #eee4db;
  color: #776d64;
}

#wrap .board .score4 {
  background: #eedfc9;
  color: #776d64;
}

#wrap .board .score8 {
  background: #edb281;
}

#wrap .board .score16 {
  background: #f19860;
}

#wrap .board .score32 {
  background: #f27d69;
}

#wrap .board .score64 {
  background: #f75d3e;
}

#wrap .board .score128 {
  background: #eed284;
}

#wrap .board .score256 {
  background: #eec650;
}

#wrap .board .score512 {
  background: #e9bb22;
}

#wrap .board .score1024 {
  background: #f1b605;
}

#wrap .board .score2048 {
  background: #f7d204;
}

#wrap .gameEnd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(214, 202, 202, 0.5);
  z-index: 99;
}

#wrap .gameEnd .content {
  width: 60%;
  height: 25%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  box-sizing: border-box;
  padding-top: 1.37143rem;
}

#wrap .gameEnd .content span {
  font-size: 1.6rem;
  font-weight: bolder;
  color: #7c6f68;
  text-align: center;
  margin-bottom: 2.05714rem;
}

#wrap .gameEnd .content .btn {
  display: flex;
  justify-content: space-around;
}

#wrap .gameEnd .content .btn .buttonFunction {
  width: 3.88571rem;
  height: 1.6rem;
  background: #8d7a63;
  border-radius: 0.22857rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  color: #dad6d6;
}