:root {
  --container-width: 678px;
  --font-size-medium: 50px;
  --font-size-large: 75px;
  --cell-size: 150px;
  --stage-size: 675px;
  --grid-margin: 15px;
  --row0-top: 15px;
  --row1-top: 180px;
  --row2-top: 345px;
  --row3-top: 510px;
  --cell0-left: 15px;
  --cell1-left: 180px;
  --cell2-left: 345px;
  --cell3-left: 510px;
  --span-size: 150px;
}

html {
  height: 100%;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

body {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "microsoft yahei";
  background-color: white;
  overflow: hidden;
}
.container {
  margin: auto;
  width: var(--container-width);
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
}

#scoreLabel {
  position: relative;
  top: -10px;
  font-size: var(--font-size-medium);
}

#highScoreLabel {
  position: relative;
  top: -10px;
  font-size: var(--font-size-medium);
}

.scoreBar {
  width: 50%;
  float: right;
  background: #fff;
  color: #111;

  padding: 10px;
  position: relative;
  margin-top: 10px;
}
.scoreBar:before {
  content: "";
  display: block;
  border-width: 20px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  position: absolute;
  top: 50%;
  left: -40px;
  margin-top: -20px;
}
#score {
  font-size: var(--font-size-large);
}

#addScore {
  position: absolute;
  bottom: 0px;
  font-size: var(--font-size-medium);
  color: #999;
  opacity: 0.8;
  top: 15%;
  left: 25%;
}
#addScore.show {
  opacity: 0.8;
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
#addScore.hide {
  opacity: 0;
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.highScoreBar {
  width: 50%;
  float: left;
  background: #fff;
  color: #111;
  padding: 10px;
  position: relative;
  margin-top: 10px;
}

.highScoreBar:before {
  content: "";
  display: block;
  border-width: 20px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  position: absolute;
  top: 50%;
  right: -40px;
  margin-top: -20px;
}

#highScore {
  font-size: var(--font-size-large);
}

#grid-container {
  position: relative;
}

.grid-row {
  position: relative;
  display: flex;
  width: 100%;
  height: 24.5%;
}

.grid-cell {
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
  background: #cdc1b4;
  margin-left: var(--grid-margin);
  margin-top: var(--grid-margin);
  border-radius: 5%;
}

#stage {
  background: #bbada0;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  position: absolute;
  width: var(--stage-size);
  height: var(--stage-size);
  top: 25%;
  left: 0;
  z-index: 1;
}

#undo {
  position: relative;
  z-index: 990;
}

.cover {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0.1;
  cursor: pointer;
  pointer-events: auto;
}

.row0 {
  top: var(--row0-top);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.row1 {
  top: var(--row1-top);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.row2 {
  top: var(--row2-top);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.row3 {
  top: var(--row3-top);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.cell0 {
  left: var(--cell0-left);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.cell1 {
  left: var(--cell1-left);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.cell2 {
  left: var(--cell2-left);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.cell3 {
  left: var(--cell3-left);
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

span {
  display: block;
  width: var(--span-size);
  height: var(--span-size);
  border-radius: 5%;
  position: absolute;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  background: #fff;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

div {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.num2 {
  background: url("./img/2.png");
  background-size: cover;
  /* background: #eee4da; */
  color: #777;
  font-size: 100px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  animation: myfirst 0.5s;
  -moz-animation: myfirst 0.5s; /* Firefox */
  -webkit-animation: myfirst 0.5s; /* Safari or Chrome or opera */
}

.num4 {
  background: url("./img/4.png");
  background-size: cover;
  /* background: #fafafa; */
  color: #e9b856;
  font-size: 100px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  animation: myfirst 0.5s;
  -moz-animation: myfirst 0.5s; /* Firefox */
  -webkit-animation: myfirst 0.5s; /* Safari or Chrome */
}

.num8 {
  background: url("./img/8.png");
  background-size: cover;
  /* background: #f3f3f3; */
  color: #f94e2f;
  font-size: 100px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  animation: myfirst 0.5s;
}

.num16 {
  background: url("./img/16.png");
  background-size: cover;
  /* background: #f5ec00; */
  color: #fff;
  font-size: 80px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  animation: myfirst 0.5s;
}

.num32 {
  background: url("./img/32.png");
  background-size: cover;
  /* background: #fcc20e; */
  color: #fdfdfd;
  font-size: 80px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num64 {
  background: url("./img/64.png");
  background-size: cover;
  /* background: #f94a3b; */
  color: #fff;
  font-size: 80px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num128 {
  background: url("./img/128.png");
  background-size: cover;
  /* background: #222; */
  color: #f94e2f;
  font-size: 52px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num256 {
  background: url("./img/256.png");
  background-size: cover;
  /* background: #d13100; */
  color: #ffcc66;
  font-size: 52px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num512 {
  background: url("./img/512.png");
  background-size: cover;
  /* background: #fff300; */
  color: #fb4e4e;
  font-size: 52px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num1024 {
  background: url("./img/1024.png");
  background-size: cover;
  /* background: #6483b5; */
  color: #f6f7ff;
  font-size: 52px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num2048 {
  background: url("./img/2048.png");
  background-size: cover;
  /* background: #000000; */
  color: #fff300;
  font-size: 52px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.num4096 {
  background: url("./img/4096.png");
  background-size: cover;
  /* background: #ff0099; */
  color: #fff;
  font-size: 52px;
  transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

@keyframes myfirst {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-moz-keyframes myfirst /* Firefox */ {
  0% {
    opacity: 0;
    -moz-transform: scale(0);
  }
  50% {
    opacity: 0.5;
    -moz-transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
@-webkit-keyframes myfirst /* Safari or Chrome */ {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

/* Fullscreen comment */

.fullscreen-comment {
  position: fixed;
  font-size: 3em;
  color: #ffd700;
  text-align: center;
  opacity: 0;
  animation: flashComment 1.5s ease-out;
  z-index: 1000;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
}

@keyframes flashComment {
  0% {
    opacity: 0;
    transform: scale(0) translate(-50%, -50%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: scale(2) translate(-50%, -50%);
  }
}

/* if height is less than 1000 pixels */
@media screen and (max-height: 1000px) {
  :root {
    --container-width: calc(678px * 0.85);
    --font-size-medium: calc(50px * 0.85);
    --font-size-large: calc(75px * 0.85);
    --cell-size: calc(150px * 0.85);
    --stage-size: calc(675px * 0.85);
    --grid-margin: calc(15px * 0.85);
    --row0-top: calc(15px * 0.85);
    --row1-top: calc(180px * 0.85);
    --row2-top: calc(345px * 0.85);
    --row3-top: calc(510px * 0.85);
    --cell0-left: calc(15px * 0.85);
    --cell1-left: calc(180px * 0.85);
    --cell2-left: calc(345px * 0.85);
    --cell3-left: calc(510px * 0.85);
    --span-size: calc(150px * 0.85);
  }
}

/* If height is less than 800 pixels */
@media screen and (max-height: 800px) {
  :root {
    --container-width: calc(678px * 0.70);
    --font-size-medium: calc(50px * 0.70);
    --font-size-large: calc(75px * 0.70);
    --cell-size: calc(150px * 0.70);
    --stage-size: calc(675px * 0.70);
    --grid-margin: calc(15px * 0.70);
    --row0-top: calc(15px * 0.70);
    --row1-top: calc(180px * 0.70);
    --row2-top: calc(345px * 0.70);
    --row3-top: calc(510px * 0.70);
    --cell0-left: calc(15px * 0.70);
    --cell1-left: calc(180px * 0.70);
    --cell2-left: calc(345px * 0.70);
    --cell3-left: calc(510px * 0.70);
    --span-size: calc(150px * 0.70);
  }
}