css.css

html, body{
   margin: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
   background-image: linear-gradient(to left, #383838, rgb(150,150,150), #383838);
}

/* 2048 STYLE */
.game {
   position: absolute;
   width: 100%;
   height: 100%;
   font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
   user-select: none;
   -webkit-user-select: none;
}

.game__manual {
   position: absolute;
   top: 100px;
   font-size: 11px;
   text-align: center;
   color: #776e65;
   width: 100%;
}

.game__set-top {
   position: absolute;
   top: 10px;
   right: 5px;
   height: 19px;
   width: 25px;
   z-index: 22;
   cursor: pointer;
   transition: background 1s;
}

.game__set-top:hover{
   background: rgba(200, 200, 240, .3);
}

.game__set {
   position: absolute;
   top: 10px;
   right: 5px;
   height: 5px;
   width: 25px;
   margin-bottom: 14px;
   background: #776e65;
   border-radius: 2px;
   z-index: 21;
}

.game__set:before , .game__set:after {
   content: "";
   position: absolute;
   height: 5px;
   width: 25px;
   background: #776e65;
   border-radius: 2px;
}

.game__set:before  {
   top: 7px;
}

.game__set:after {
   top: 14px;
}

.game__setings {
   width: 96%;
   height: 96%;
   position: absolute;
   left: 2%;
   top: 2%;
   z-index: 20;
   background: rgba(255,0,0,.6);
   display: none;
}

.game__name {
   position: absolute;
   font-size: 40px;
   color: #776e65;
   font-weight: bold;
   top: 42px; left: 5px;
}

.game__head-right {
   position: absolute;
   top: 42px; right: 5px;
}

.game__score, .game__best {
   display: inline-block;
   text-align: center;
   margin-left: 1px;
   padding: 5px 7px;
   font-weight: bold;
   background: #BBADA0;
   color: #fff;
   font-size: 14px;
   border-radius: 5px;
}

.game__score-name, .game__best-name {
   color: #EEE4DA;
   font-size: 12px;
}

.game__score-n, .game__best-n {
   overflow:hidden;
   text-align: center;
	white-space: nowrap;
	text-overflow:ellipsis;
   max-width: 45px;
   transition: max-width .5s; 
}

.game__score-n:hover, .game__best-n:hover {
   max-width: 100px;
}

.game__score {
   position: relative;
}

.game__score-plus {
   position: absolute;
   left: 35%;
   transition: color .5s,
      top .5s;
}

.game__score-plus-start {
   color: #776e65;
   top: 40%;
   opacity: 1;
}

.game__score-plus-end {
   top: -40%;
   color: transparent;
}

.game__score-plus-passive {
   top: 40%;
   transition: none !important;
   color: transparent;
}

.game__border {
   position: absolute;
   bottom: 30px;
   left: 5px;
   border: 4px solid #BBADA0;
   width: 208px;
   height: 208px;
   border-radius: 3px;
}

.game__undo, .game__reastart {
   position: absolute;
   bottom: 248px; 
   color: #776e65;
   font-weight: bold;
   font-size: 12px;
   transition: color .2s;
   cursor: pointer;
}

.game__undo:hover, .game__reastart:hover {
   color: black;
}

.game__undo:active, .game__reastart:active {
   color: #BBADA0;
}

.game__reastart {
   left: 5px;   
}

.game__undo {
   right: 5px;
}

.game__cell {
   border: 2px solid #BBADA0;
   width: 48px;
   height: 48px;
   float: left;
} 

.game__tile {
   position: absolute;
   width: 48px;
   height: 48px;
   line-height: 48px;
   background: rgb(250,30,30);
   text-align: center;
   top: 2px; left: 2px;
   color: #f9f6f2;
   font-weight: bold;
   font-size: 20px;
   transition: transform .15s,
      left .15s, 
      top .15s,
      width .15s,
      height .15s,
      line-height .15s,
      font-size .15s;
} 

.game__tile-2 { 
   background: rgb(240,230,220);
   color: #796a5f;
}
.game__tile-4 { 
   background: rgb(240,220,190); 
   color: #796a5f;
}
.game__tile-8 { 
   background: rgb(240,180,120);
}
.game__tile-16 { 
   background: rgb(250,150,090);
}
.game__tile-32 { 
   background: rgb(250,120,100);
}
.game__tile-64 { 
   background: rgb(240,095,060);
}
.game__tile-128 { 
   background: rgb(240,210,115);
   box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), 
      inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
}
.game__tile-256 { 
   background: rgb(240,200,100);
   box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), 
      inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
}
.game__tile-512 { 
   background: rgb(240,200,080);
   box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), 
      inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
}
.game__tile-1024 { 
   font-size: 0.99em;
   background: rgb(240,200,060);
   box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), 
      inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
}
.game__tile-2048 { 
   font-size: 0.99em;
   background: rgb(240,190,045);
   box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), 
   inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
}

.game__tile-start-1 {
   left: 54px; 
   top: 106px;
}

.game__tile-start-2 {
   left: 158px; 
   top: 2px;
}

.game__message {
   position: absolute;
   left: 0; right: 0;
   top: 0; bottom: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
   text-align: center;
   background: rgba(238, 228, 218, 0.5);
   color: #776e65;
   display: none;
   opacity: 0;
   transition: opacity 0.5s; 
}

.game__message:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
   width: 0px;
}

.game__message-parent{
   display:inline-block;
   vertical-align:middle;
   max-width: 90%;
}

.game__message-p {
   font-size: 38px;
   font-weight: bold;
}

.game__message-button {
   display: inline-block;
   background: #8f7a66;
   color: #f9f6f2;
   height: 40px;
   line-height: 42px;
   cursor: pointer;
   font-weight: bold;
   padding: 0 15px;
   margin-bottom: 15px;
   border-radius: 3px;
   box-shadow: inset 0 0 0 50px rgba(255, 255, 255, .2);
   transition: box-shadow .5s;
}

.game__message-button:hover {
   box-shadow: none;
}  

.game__message-button:active {
   box-shadow: inset 0 0 0 50px rgba(255, 255, 255, .5);
}  

.game__combo {
   background: none;
}

.game__you-win {
   font-size: 15px;
}

.game__message-p-combo {
   color: #a50000;
}

.game-menu-item {
   display: block;
   padding-left: 40px;
   padding-right: 40px;
   overflow: hidden;
}

.game_prompt-input {
   width: 80%;
   padding-bottom: 3px;
   font-size: 50px;
   font-weight: bold;
   color: #8f7a66;
   background: transparent;
   text-align: center;
   border: none;
   border-bottom: 2px solid;
   outline: none;
}

/* PHONE STYLE */

.phone {
   width: 260px;
   height: 550px;
   position: absolute;
   left: 0; top: 0;
   right: 0; bottom: 0;
   margin: auto;
   transform: scale(1);
   transition: transform .5s; 
}

.phone__case {
   width: 100%;
   height: 100%;
   background: #f5f6f8;
   position: relative;
   z-index: 1;
   border-radius: 40px;
}

.phone__display {
   width: 226px;
   height: 396px;
   border: 2px solid #4e4e4e;
   background: #FAF8EF; /*#0f0f0e;*/
   position: absolute;
   left: 15px;
   top: 75px;
   z-index: 2;
   overflow: hidden;
   border-radius: 1.5%;
}

.phone__button-left {
   background: rgb(180,180,180);
   width: 19px;
   height: 19px;
   position: absolute;
   left: -2px;
   z-index: 0;
   border-radius: 15%;
}

.phone__mode {
   top: 77px;
}

.phone__volume-plus {
   top: 115px;
}

.phone__volume-minus {
   top: 153px;
}

.phone__sleep {
   background: rgb(180,180,180);
   width: 43px;
   height: 43px;
   position: absolute;
   top: -2px;
   right:  45px;
   z-index: 0;
   border-radius: 15%;
}

.phone__round_element {
   position: absolute;
   z-index: 2;
   background: #2B2E33;
   border: 2px solid #818181;
   border-radius: 50%;
}

.phone__camera {
   width: 7px;
   height: 7px;
   top: 20px;
   left: 125.5px;
}

.phone__speaker-left {
   width: 5px;
   height: 5px;
   top: 42px;
   left: 95px;
   background: #565656;
   border: 1px solid #A6A6A6;
}

.phone__speaker-right {
   width: 45px;
   height: 5px;
   top: 43px;
   left: 107.5px;
   background: #565656;
   border: none;
   border-radius: 10px;
}

.phone__main {
   width: 40px;
   height: 40px;
   background: #F3F3F3;
   border: 2px solid #4E4E4E;
   bottom: 18px;
   left: 108px;
}

/* SCALING STYLE */
.scale__minus, .scale__plus {
   font-size: 50px;
   font-weight: bold;
   position: absolute;
   top: 10px;
   cursor: pointer;
   color: rgb(100,100,100);
   z-index: 9999999999;
   transition: color .3s;
}

.scale__minus:hover, .scale__plus:hover {
   color: rgb(200,200,200);
}

.scale__minus:active, .scale__plus:active {
   color: rgb(250,250,250);
}

.scale__plus {
   right: 10px;
}

.scale__minus{
   right: 50px;
   top: 6px;
}

.scale__n {
   color: rgb(100,100,100);
   font-size: 50px;
   font-weight: bold;
   width: 200px;
   height: 200px;
   line-height: 200px;
   text-align: center;
   position: absolute;
   top: 0; right: 0;
   left: 0; bottom: 0;
   margin: auto;
   z-index: 999999;
   display: none;
   opacity: 0;
   transition: opacity .1s;
}