/*先写正常页面，响应式用媒体查询，小于520px，修改某些元素的长宽，字体大小*/
body {
  background-color: #FAF8EE;
  font-family: arial;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.container {
  margin: 0 auto;
}
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.title {
  margin: 0;
  color: #776E65;
}
.panel {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.score-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.score-panel__container {
  margin: 5px 0 5px 5px;
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #BBADA0;
}
.score-panel__title {
  margin: 0;
  color: #EEE;
  font-weight: bolder;
}
.score-panel__score {
  margin: 0;
  color: #FFF;
  text-align: center;
  font-weight: bold;
}
.control-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.control-panel__btn {
  margin: 5px 0 5px 5px;
  padding: 5px 10px;
  color: #FFF;
  background-color: #8F7A66;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
}
.control-panel__btn:active {
  color: #ddd;
  background-color: #7F5A46;
}
.game-over {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background: rgba(255, 255, 255, 0.6);
}
.game-over-modal {
  margin: 0 auto;
  text-align: center;
}
.slide-in {
  -webkit-animation: slideIn 1s linear;
          animation: slideIn 1s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes slideIn {
  from {
    -webkit-transform: translateY(80%);
            transform: translateY(80%);
  }
  to {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
  }
}
@keyframes slideIn {
  from {
    -webkit-transform: translateY(80%);
            transform: translateY(80%);
  }
  to {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
  }
}
.game-over-title {
  color: #776E65;
  font-weight: bold;
}
.try-again {
  margin: 5px 0 5px 5px;
  padding: 5px 10px;
  color: #FFF;
  background-color: #8F7A66;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
}
.try-again:active {
  color: #ddd;
  background-color: #7F5A46;
}
.gameboard {
  position: relative;
  margin: 10px 0;
  background-color: #BBADA0;
  border-radius: 10px;
  overflow: hidden;
}
.grid-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.grid-cell {
  background-color: #CDC1B4;
  border-radius: 3px;
}
.tile-container {
  position: absolute;
  left: 0;
  top: 0;
}
.tile {
  position: absolute;
  text-align: center;
  font-weight: bold;
  border-radius: 3px;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.fade-in {
  -webkit-animation: fadeIn 0.3s ease-out 0s;
          animation: fadeIn 0.3s ease-out 0s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
.hide {
  opacity: 0;
  filter: alpha(opacity=0);
}
.tile-color-2 {
  background-color: #EEE4DA;
  color: #776E65;
}
.tile-color-4 {
  background-color: #EDE0C8;
  color: #776E65;
}
.tile-color-8 {
  background-color: #F2B179;
  color: #FFF;
}
.tile-color-16 {
  background-color: #F59563;
  color: #FFF;
}
.tile-color-32 {
  background-color: #F67C5F;
  color: #FFF;
}
.tile-color-64 {
  background-color: #F65E3B;
  color: #FFF;
}
.tile-color-128 {
  background-color: #EDCF72;
  color: #FFF;
}
.tile-color-256 {
  background-color: #EDCC61;
  color: #FFF;
}
.tile-color-512 {
  background-color: #EDC850;
  color: #FFF;
}
.tile-color-1024 {
  background-color: #edc089;
  color: #FFF;
}
.tile-color-2048 {
  background-color: #edb8c2;
  color: #FFF;
}
.tile-color-4096 {
  background-color: #dc98b2;
  color: #FFF;
}
.tile-color-8192 {
  background-color: #db88a2;
  color: #FFF;
}
@media screen and (max-width: 520px) {
  .container {
    width: 290px;
  }
  .grid-container {
    padding: 10px;
  }
  .grid-row {
    margin-bottom: 10px;
  }
  .grid-cell {
    height: 60px;
    width: 60px;
  }
  .tile {
    height: 60px;
    width: 60px;
    line-height: 60px;
  }
  .gameboard {
    width: 290px;
    height: 290px;
  }
  .tile-pos-0-0 {
    -webkit-transform: translate(10px, 10px);
            transform: translate(10px, 10px);
  }
  .tile-pos-0-1 {
    -webkit-transform: translate(80px, 10px);
            transform: translate(80px, 10px);
  }
  .tile-pos-0-2 {
    -webkit-transform: translate(150px, 10px);
            transform: translate(150px, 10px);
  }
  .tile-pos-0-3 {
    -webkit-transform: translate(220px, 10px);
            transform: translate(220px, 10px);
  }
  .tile-pos-1-0 {
    -webkit-transform: translate(10px, 80px);
            transform: translate(10px, 80px);
  }
  .tile-pos-1-1 {
    -webkit-transform: translate(80px, 80px);
            transform: translate(80px, 80px);
  }
  .tile-pos-1-2 {
    -webkit-transform: translate(150px, 80px);
            transform: translate(150px, 80px);
  }
  .tile-pos-1-3 {
    -webkit-transform: translate(220px, 80px);
            transform: translate(220px, 80px);
  }
  .tile-pos-2-0 {
    -webkit-transform: translate(10px, 150px);
            transform: translate(10px, 150px);
  }
  .tile-pos-2-1 {
    -webkit-transform: translate(80px, 150px);
            transform: translate(80px, 150px);
  }
  .tile-pos-2-2 {
    -webkit-transform: translate(150px, 150px);
            transform: translate(150px, 150px);
  }
  .tile-pos-2-3 {
    -webkit-transform: translate(220px, 150px);
            transform: translate(220px, 150px);
  }
  .tile-pos-3-0 {
    -webkit-transform: translate(10px, 220px);
            transform: translate(10px, 220px);
  }
  .tile-pos-3-1 {
    -webkit-transform: translate(80px, 220px);
            transform: translate(80px, 220px);
  }
  .tile-pos-3-2 {
    -webkit-transform: translate(150px, 220px);
            transform: translate(150px, 220px);
  }
  .tile-pos-3-3 {
    -webkit-transform: translate(220px, 220px);
            transform: translate(220px, 220px);
  }
  .tile-2 {
    font-size: 36px;
  }
  .tile-4 {
    font-size: 36px;
  }
  .tile-8 {
    font-size: 36px;
  }
  .tile-16 {
    font-size: 33px;
  }
  .tile-32 {
    font-size: 33px;
  }
  .tile-64 {
    font-size: 33px;
  }
  .tile-128 {
    font-size: 30px;
  }
  .tile-256 {
    font-size: 30px;
  }
  .tile-512 {
    font-size: 30px;
  }
  .tile-1024 {
    font-size: 24px;
  }
  .tile-2048 {
    font-size: 24px;
  }
  .tile-4096 {
    font-size: 24px;
  }
  .tile-8192 {
    font-size: 24px;
  }
  .title {
    font-size: 56px;
  }
  .control-panel__btn {
    font-size: 12px;
  }
  .score-panel__score {
    font-size: 16px;
  }
  .note {
    font-size: 12px;
  }
  .game-over {
    width: 290px;
    height: 290px;
  }
  .game-over-modal {
    width: 290px;
    height: 290px;
  }
  .game-over-title {
    font-size: 32px;
  }
  .try-again {
    font-size: 16px;
  }
}
@media screen and (min-width: 521px) {
  .container {
    width: 520px;
  }
  .grid-container {
    padding: 12px;
  }
  .grid-row {
    margin-bottom: 12px;
  }
  .grid-cell {
    height: 115px;
    width: 115px;
  }
  .tile {
    height: 115px;
    width: 115px;
    line-height: 115px;
  }
  .gameboard {
    width: 520px;
    height: 520px;
  }
  .tile-pos-0-0 {
    -webkit-transform: translate(12px, 12px);
            transform: translate(12px, 12px);
  }
  .tile-pos-0-1 {
    -webkit-transform: translate(139px, 12px);
            transform: translate(139px, 12px);
  }
  .tile-pos-0-2 {
    -webkit-transform: translate(266px, 12px);
            transform: translate(266px, 12px);
  }
  .tile-pos-0-3 {
    -webkit-transform: translate(393px, 12px);
            transform: translate(393px, 12px);
  }
  .tile-pos-1-0 {
    -webkit-transform: translate(12px, 139px);
            transform: translate(12px, 139px);
  }
  .tile-pos-1-1 {
    -webkit-transform: translate(139px, 139px);
            transform: translate(139px, 139px);
  }
  .tile-pos-1-2 {
    -webkit-transform: translate(266px, 139px);
            transform: translate(266px, 139px);
  }
  .tile-pos-1-3 {
    -webkit-transform: translate(393px, 139px);
            transform: translate(393px, 139px);
  }
  .tile-pos-2-0 {
    -webkit-transform: translate(12px, 266px);
            transform: translate(12px, 266px);
  }
  .tile-pos-2-1 {
    -webkit-transform: translate(139px, 266px);
            transform: translate(139px, 266px);
  }
  .tile-pos-2-2 {
    -webkit-transform: translate(266px, 266px);
            transform: translate(266px, 266px);
  }
  .tile-pos-2-3 {
    -webkit-transform: translate(393px, 266px);
            transform: translate(393px, 266px);
  }
  .tile-pos-3-0 {
    -webkit-transform: translate(12px, 393px);
            transform: translate(12px, 393px);
  }
  .tile-pos-3-1 {
    -webkit-transform: translate(139px, 393px);
            transform: translate(139px, 393px);
  }
  .tile-pos-3-2 {
    -webkit-transform: translate(266px, 393px);
            transform: translate(266px, 393px);
  }
  .tile-pos-3-3 {
    -webkit-transform: translate(393px, 393px);
            transform: translate(393px, 393px);
  }
  .tile-2 {
    font-size: 72px;
  }
  .tile-4 {
    font-size: 72px;
  }
  .tile-8 {
    font-size: 72px;
  }
  .tile-16 {
    font-size: 66px;
  }
  .tile-32 {
    font-size: 66px;
  }
  .tile-64 {
    font-size: 66px;
  }
  .tile-128 {
    font-size: 60px;
  }
  .tile-256 {
    font-size: 60px;
  }
  .tile-512 {
    font-size: 60px;
  }
  .tile-1024 {
    font-size: 48px;
  }
  .tile-2048 {
    font-size: 48px;
  }
  .tile-4096 {
    font-size: 48px;
  }
  .tile-8192 {
    font-size: 48px;
  }
  .title {
    font-size: 84px;
  }
  .control-panel__btn {
    font-size: 18px;
  }
  .score-panel__score {
    font-size: 24px;
  }
  .note {
    font-size: 18px;
  }
  .game-over {
    width: 520px;
    height: 520px;
  }
  .game-over-modal {
    width: 520px;
    height: 520px;
  }
  .game-over-title {
    font-size: 48px;
  }
  .try-again {
    font-size: 24px;
  }
}