.two-zero.board-area {
    background-color: rgb(187,173,160);
    width: 499px;
    height: 499px;
    border-radius: 6px;
    position: relative;

    /* initialize as 3d */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.two-zero.board-area-one-row {
    height: 136px;
}

.one-row-board .board-area {
     height: 136px;
     overflow: hidden;
}

.cell-pos {
    height: 106px;
    width: 106px;
    position:absolute;
    border-radius: 4px;

    -webkit-transition: all 0.12s;
    transition: all 0.12s;

    /* initialize as 3d */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.cell-empty {
   background-color: rgb(205,193,180);
}

.cell {
    background-color: rgb(205,193,180);
    height: 106px;
    width: 106px;
    /* position: relative; */
    border-radius: 4px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 55px;
    line-height: 102px; 
    font-weight: bold;
    text-align: center;
    vertical-align: middle;

    /* initialize as 3d */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.cell.highlight {
  -webkit-animation: highlight 0.1s;
}

@-webkit-keyframes highlight {
  0%   { -webkit-transform: scale3d(1.2,1.2,1.0); 
         opacity: 0.7;}
  100% { -webkit-transform: scale3d(1.0,1.0,1.0); 
         opacity: 1.0;}  
}

.cell.reveal {
  -webkit-animation: reveal 0.1s;
}

@-webkit-keyframes reveal {
  0%   { -webkit-transform: scale3d(0.1,0.1,1.0); 
         opacity: 0.1;
         }
  100% { -webkit-transform: scale3d(1.0,1.0,1.0); 
         opacity: 1.0;}  
}

.pos-top-0 { top: 15px; }
.pos-top-1 { top: 136px; }
.pos-top-2 { top: 257px; }
.pos-top-3 { top: 378px; }

.pos-left-0 { left: 15px; }
.pos-left-1 { left: 136px; }
.pos-left-2 { left: 257px; }
.pos-left-3 { left: 378px; }



.cell-num-2 {
  background-color: rgb(238, 228,218);
  color: rgb(110,102,93);
} 

.cell-num-4 {
  background-color: rgb(237, 224,200);
  color: rgb(119,110,101);
} 

.cell-num-8 {
  background-color: rgb(242, 177, 121);
  color: rgb(249,246,242);
} 

.cell-num-16 {
  background-color: rgb(245, 149, 99);
  color: rgb(249,246,242);
} 

.cell-num-32 {
  background-color: rgb(245, 124, 95);
  color: rgb(249,246,242);
} 

.cell-num-64 {
  background-color: rgb(246, 94, 59);
  color: rgb(249,246,242);
} 

.cell-num-128 {
  background-color: rgb(237, 207,114);
  color: rgb(249,246,242);
  font-size: 48px;
} 

.cell-num-256 {
  background-color: rgb(237, 204, 97);
  color: rgb(249,246,242);
  font-size: 48px;
  border: 1px solid rgba(238, 228, 218, 0.5);
  box-shadow: 0 0 25px 5px rgb(237, 204, 97);
} 

.cell-num-512 {
  background-color: rgb(237, 204, 97);
  color: rgb(249,246,242);
  font-size: 48px;
  border: 1px solid rgba(238, 228, 218, 0.5);
  box-shadow: 0 0 25px 5px rgb(237, 204, 97);
} 

.cell-num-1024 {
  background-color: rgb(237, 204, 97);
  color: rgb(249,246,242);
  font-size: 40px;
  border: 1px solid rgba(238, 228, 218, 0.5);
  box-shadow: 0 0 25px 5px rgb(237, 204, 97);
} 

.cell-num-2048 {
  background-color: rgb(237, 204, 97);
  color: rgb(249,246,242);
  font-size: 40px;
  border: 1px solid rgba(238, 228, 218, 0.5);
  box-shadow: 0 0 25px 5px rgb(237, 204, 97);
}


@media (max-width: 480px){
  .board-area {
      width: 280px;
      height: 280px;
  }

  .one-row-board .board-area {
       height: 76px;
       width: 280px;
       overflow: hidden;
  }

  .cell-pos, .cell {
      width: 60px;
      height: 60px;
  }

  .cell {
    font-size: 25px;
    line-height: 60px;       
  }

  .cell-num-128, .cell-num-256, .cell-num-512 {
    font-size: 26px;
  } 
  
  .cell-num-1024, .cell-num-2048 {
    font-size: 21px;
  }

  .pos-top-0 { top: 8px; }
  .pos-top-1 { top: 76px; }
  .pos-top-2 { top: 144px; }
  .pos-top-3 { top: 212px; }

  .pos-left-0 { left: 8px; }
  .pos-left-1 { left: 76px; }
  .pos-left-2 { left: 144px; }
  .pos-left-3 { left: 212px; }

}