body {
  background-color: rgb(250, 248, 240);
}

.active {
  box-shadow: 0 0 10px 1px rgb(255, 255, 255);
}

.map {
  border-collapse: collapse;
  background-color: rgb(186, 173, 161);
  position: absolute;
  top: 9vw;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 1vw;
}
.map tbody {
  height: 46vw;
  width: 46vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-evenly;
}
.map tbody tr {
  width: 46vw;
  display: flex;
  justify-content: space-evenly;
}
.map tbody tr td {
  padding: 0;
}
.map tbody tr td div {
  box-sizing: border-box;
  border-radius: 10px;
  width: 10vw;
  height: 10vw;
  background-color: rgb(204, 193, 181);
}

.panel {
  position: relative;
  background: #bbada0;
  display: inline-block;
  width: 11.2vw;
  height: 6.3vw;
  text-align: center;
  border-radius: 10px;
}
.panel .paneltitle {
  margin-top: 0.8vw;
  font-size: 1.3vw;
  line-height: 1.3vw;
  text-align: center;
  color: #eee4da;
  font-weight: 700;
}
.panel .addNumber {
  color: rgb(118, 110, 102);
  font-weight: 700;
  font-size: 2vw;
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, 0);
}
.panel .panelNumberCounter {
  font-size: 2.5vw;
  height: 4vw;
  line-height: 4vw;
  font-weight: 700;
  color: #fff;
}

.NewGame {
  background: #8f7a66;
  border-radius: 3px;
  color: #f9f6f2;
  height: 4vw;
  line-height: 4.2vw;
  font-size: 1.6vw;
  text-align: center;
  width: 9.5vw;
  cursor: pointer;
}

.content {
  position: absolute;
  z-index: 5;
  top: 9vw;
  left: 50%;
  transform: translate(-50%, 0);
  height: 46vw;
  width: 46vw;
}

.title {
  width: 50vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.moveItem {
  border-radius: 10px;
  width: 10vw;
  height: 10vw;
  position: absolute;
  top: 1.2vw;
  left: 1.2vw;
  text-align: center;
  line-height: 10vw;
  font-size: 5.3vw;
  font-weight: 700;
  transition: 100ms ease-in-out all;
}

div [data-value="2"] {
  background: #eee4da;
  color: rgb(118, 110, 102);
}

div [data-value="4"] {
  background: #ede0c8;
  color: rgb(118, 110, 102);
}

div [data-value="8"] {
  background: #f2b179;
  color: #f9f6f2;
}

div [data-value="16"] {
  color: #f9f6f2;
  background: #f59563;
}

div [data-value="32"] {
  color: #f9f6f2;
  background: #f67c5f;
}

div [data-value="64"] {
  color: #f9f6f2;
  background: #f65e3b;
}

div [data-value="128"] {
  color: #f9f6f2;
  background: #edcf72;
}

div [data-value="256"] {
  color: #f9f6f2;
  background: #edcc61;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
}

div [data-value="512"] {
  color: #f9f6f2;
  background: #edc850;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
}

div [data-value="1024"] {
  color: #f9f6f2;
  background: #edc53f;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
  font-size: 3.5vw;
}

div [data-value="2048"] {
  color: #f9f6f2;
  background: #edc22e;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
  font-size: 3.5vw;
}

.moveItem[data-address="0,0"] {
  left: 1.2vw;
  top: 1.2vw;
}

.moveItem[data-address="0,1"] {
  left: 1.2vw;
  top: 12.4vw;
}

.moveItem[data-address="0,2"] {
  left: 1.2vw;
  top: 23.6vw;
}

.moveItem[data-address="0,3"] {
  left: 1.2vw;
  top: 34.8vw;
}

.moveItem[data-address="1,0"] {
  left: 12.4vw;
  top: 1.2vw;
}

.moveItem[data-address="1,1"] {
  left: 12.4vw;
  top: 12.4vw;
}

.moveItem[data-address="1,2"] {
  left: 12.4vw;
  top: 23.6vw;
}

.moveItem[data-address="1,3"] {
  left: 12.4vw;
  top: 34.8vw;
}

.moveItem[data-address="2,0"] {
  left: 23.6vw;
  top: 1.2vw;
}

.moveItem[data-address="2,1"] {
  left: 23.6vw;
  top: 12.4vw;
}

.moveItem[data-address="2,2"] {
  left: 23.6vw;
  top: 23.6vw;
}

.moveItem[data-address="2,3"] {
  left: 23.6vw;
  top: 34.8vw;
}

.moveItem[data-address="3,0"] {
  left: 34.8vw;
  top: 1.2vw;
}

.moveItem[data-address="3,1"] {
  left: 34.8vw;
  top: 12.4vw;
}

.moveItem[data-address="3,2"] {
  left: 34.8vw;
  top: 23.6vw;
}

.moveItem[data-address="3,3"] {
  left: 34.8vw;
  top: 34.8vw;
}/*# sourceMappingURL=index.css.map */