@font-face {
    font-family: 'doomregular';
    src: url('fonts/doom.eot');
    src: url('fonts/doom.eot?#iefix') format('embedded-opentype'),
         url('fonts/doom.woff') format('woff'),
         url('fonts/doom.ttf') format('truetype'),
         url('fonts/doom.svg#doomregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'pixel';
    src: url('fonts/nishuki_pixels-webfont.eot');
    src: url('fonts/nishuki_pixels-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nishuki_pixels-webfont.woff') format('woff'),
         url('fonts/nishuki_pixels-webfont.ttf') format('truetype'),
         url('fonts/nishuki_pixels-webfont.svg#nishuki_pixelsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html,
body{background:#000;padding:0;margin:0;font-family:"doomregular",Arial, regular, sans-serif;font-size:18px;}
body{padding:40px 0 80px;}
.heading:after{content:"";display:block;clear:both;}
h1{text-align:center;}
h1.title{font-size:80px;font-weight:bold;margin:0;display:block;}

@-webkit-keyframes move-up {
  0% {  top: 25px;opacity:1;}
  100% {top:-50px;opacity:0;}
}
@-moz-keyframes move-up {
  0% {  top: 25px;opacity: 1;}
  100% {top:-50px;opacity: 0;}
}
@keyframes move-up{
  0%{   top: 25px;opacity: 1;}
  100% {top:-50px;opacity: 0;}
}
.scores-container{float:right;text-align:right;}
.score-container, 
.best-container{position:relative;display:inline-block;
  padding:5px 0;font-size:25px;height:25px;line-height:47px;font-weight:bold;
  border-radius:3px;color:white;margin-top:8px;text-align:center;}
.score-container:after,
.best-container:after{
    position:absolute;width:100%;top:80px;left:0;line-height:13px;text-align:center;
    color: #fff;font-size: 25px;opacity: 0.5;text-align:center;text-shadow:3px 2px 1px #2b2b2b;
}
.score-container .score-addition,
.best-container .score-addition{
    position: absolute;
    right: 30px;
    color: red;
    font-size: 25px;
    line-height: 25px;
    font-weight: bold;
    color: rgba(119, 110, 101, 0.9);
    z-index: 100;
    -webkit-animation: move-up 600ms ease-in;
    -moz-animation: move-up 600ms ease-in;
    animation:move-up 600ms ease-in;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    animation-fill-mode:both;
}

.score-container:after{content:"Score";}
.best-container:after{content:"Best";}

p{margin-top:0;margin-bottom:10px;line-height:1.65;}
a{font-weight:bold;text-decoration: underline;cursor:pointer;}
strong.important{text-transform: uppercase;}
.container{width:500px;margin:0 auto;}

#board{position:fixed;display:block;width:960px;margin-left:-480px;height:114px;background:transparent url(i/bgBoard.jpg) repeat-x 0 47px;clear:left;width:100%;bottom:0;padding-left:50%;z-index:6;-webkit-transform:translateZ(510px);}
#wrapBoardCentral{position:relative;background:url(i/console.jpg) no-repeat 0 0;width:960px;height:114px;display:block;box-shadow:0 0 25px #000;}
#wrapBoardCentral .inset{float:left;height:110px;}

.bignumber{font-size:50px;line-height:52px;font-weight:normal;text-align:center;display:block;color:#cc0104;
  text-shadow:
  0 4px 1px #520300,
  0 -4px 1px #520300,
  4px 0 1px #520300,
  -4px 0 1px #520300,
  7px 5px 10px #000;
}

.game-container .bignumber .lower a{position:relative;text-decoration:underline; text-shadow:
  0 1px 1px #520300,
  0 -1px 1px #520300,
  1px 0 1px #520300,
  -1px 0 1px #520300,
  4px 1px 5px #000;
}
.game-container .bignumber .lower a:hover:before{
  display:block;position:absolute;left:-20px;top:5px;content:"";width:30px;height:33px;background:url(i/selected.png) no-repeat 0 0;
}

.inset .medium{font-size:25px;line-height:40px;}
.inset .subtitle{text-align:center;display:block;font-size:25px;color:#fff;opacity:0.5;text-shadow:3px 2px 1px #2b2b2b;}
.inset0{width:337px;}
.inset1{width:262px;}
.inset2{width:175px;margin-left:60px;}
.inset3{width:107px;position:relative;}


#head{display:block;margin:22px 0 0 27px;width:50px;height:64px;background:url(i/doomfaces.png) no-repeat -210px 0;text-indent:-9999px;cursor:pointer;}
#head.normal{background-position:-210px 0;animation:lookOnLeft 6s steps(1) infinite;}
#head.wow{background-position:-107px -1px;}
#head.hard{background-position:-54px 0;}
#head.dead{background-position:-3px -331px;}
#head.win{background-position:-54px -329px;}
#head:hover{background-position:-1px 0;}

/* Animation HEAD */
@keyframes lookOnLeft{
   0%{background-position:-210px 0;}
   50%{background-position:-262px 0;}
   70%{background-position:-158px 0;}
   85%{background-position:-210px 0;}
}


@-webkit-keyframes fade-in {
  0%  {opacity:0;}
  100%{opacity:1;}
}
@-moz-keyframes fade-in {
  0% {opacity: 0; }
  100% {opacity: 1; }
}
@keyframes fade-in {
  0% {opacity: 0; }
  100%{opacity: 1; }
}

.game-container{
border:14px solid #000;
-moz-border-image:url(i/borderSkull.png) 14 14 14 14 repeat;
-webkit-border-image:url(i/borderSkull.png) 14 14 14 14 repeat;
-o-border-image:url(i/borderSkull.png) 14 14 14 14 repeat;
border-image:url(i/borderSkull.png) 14 14 14 14 fill repeat;
box-shadow:0 0 15px #000, inset 0 0 10px #000;

background:#fff url(i/bgField.jpg) repeat 0 0;
margin-top:40px;position:relative;
padding:15px;cursor:default;width:500px;height:500px;

  -webkit-touch-callout:none;
  -ms-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -ms-touch-action:none;
  touch-action:none;

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.game-container .game-message{
  display:none;position:absolute;
  top:0;right:0;bottom:0;left:0;
  background: rgba(238, 228, 218, 0.5);
  z-index:6;text-align:center;
  -webkit-animation: fade-in 800ms ease 1200ms;
  -moz-animation: fade-in 800ms ease 1200ms;
  animation: fade-in 800ms ease 1200ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.game-container .game-message p{
font-size:60px;font-weight:bold;height:60px;line-height:60px;margin-top:130px;}
.game-container .game-message .lower{display:block;margin-top:59px;}
.game-container .game-message a{color:#cc0104;
display:inline-block;padding:0 20px;text-decoration:none;
height:40px;line-height:42px;font-size:30px;margin-left:9px;}
.game-container .game-message a.keep-playing-button{display:none;}
.game-container .game-message.game-won{background: rgba(255, 255, 255, 0.5);}
.game-container .game-message.game-won a.keep-playing-button{display:inline-block;}
.game-container .game-message.game-won, 
.game-container .game-message.game-over{display: block;}

.grid-container{position:absolute;z-index:1;}
.grid-row{margin-bottom:15px;}
.grid-row:last-child{margin-bottom:0;}
.grid-row:after{content:"";display:block;clear:both;}
.grid-cell{width:100px;height:100px;margin-right:12px;float:left;outline:1px dashed rgba(255,255,255,0.5);}
.grid-cell:last-child{margin-right:0;}
.tile-container{position:absolute;z-index:2;}

.tile, .tile .tile-inner{width:100px;height:100px;line-height:116px;}
.tile.tile-position-1-1{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);transform:translate(0px,0px); }
.tile.tile-position-1-2{-webkit-transform:translate(0px,115px);-moz-transform:translate(0px,115px);transform:translate(0px,115px);}
.tile.tile-position-1-3{-webkit-transform:translate(0px,230px);-moz-transform:translate(0px,230px);transform:translate(0px,230px);}
.tile.tile-position-1-4{-webkit-transform:translate(0px,345px);-moz-transform:translate(0px,345px);transform:translate(0px,345px);}
.tile.tile-position-2-1{-webkit-transform:translate(112px,0px);-moz-transform:translate(112px,0px);transform:translate(112px,0px);}
.tile.tile-position-2-2{-webkit-transform:translate(112px,115px);-moz-transform:translate(112px,115px);transform:translate(112px,115px);}
.tile.tile-position-2-3{-webkit-transform:translate(112px,230px);-moz-transform:translate(112px,230px);transform:translate(112px,230px);}
.tile.tile-position-2-4{-webkit-transform:translate(112px,345px);-moz-transform:translate(112px,345px);transform:translate(112px,345px);}
.tile.tile-position-3-1{-webkit-transform:translate(224px,0px);-moz-transform:translate(224px,0px);transform:translate(224px,0px);}
.tile.tile-position-3-2{-webkit-transform:translate(224px,115px);-moz-transform:translate(224px,115px);transform:translate(224px,115px);}
.tile.tile-position-3-3{-webkit-transform:translate(224px,230px);-moz-transform:translate(224px,230px);transform:translate(224px,230px);}
.tile.tile-position-3-4{-webkit-transform:translate(224px,345px);-moz-transform:translate(224px,345px);transform:translate(224px,345px);}
.tile.tile-position-4-1{-webkit-transform:translate(336px,0px);-moz-transform:translate(336px,0px);transform:translate(336px,0px);}
.tile.tile-position-4-2{-webkit-transform:translate(336px,115px);-moz-transform:translate(336px,115px);transform:translate(336px,115px);}
.tile.tile-position-4-3{-webkit-transform:translate(336px,230px);-moz-transform:translate(336px,230px);transform:translate(336px,230px);}
.tile.tile-position-4-4{-webkit-transform:translate(336px,345px);-moz-transform:translate(336px,345px);transform:translate(336px,345px);}

.tile{
  position:absolute;
  -webkit-transition:100ms ease-in-out;
  -moz-transition:100ms ease-in-out;
  transition:100ms ease-in-out;
  -webkit-transition-property:-webkit-transform;
  -moz-transition-property:-moz-transform;
  transition-property:transform;}
.tile .tile-inner{text-align:center;font-weight:bold;z-index:10;text-indent:-9999px;overflow:hidden;}

.tile.tile-2 .tile-inner{background:transparent url(i/zombiGuy.gif) no-repeat 50% 50%;}
.tile.tile-4 .tile-inner{background:transparent url(i/seargent.gif) no-repeat 50% 50%;}
.tile.tile-8 .tile-inner{background:transparent url(i/imp.gif) no-repeat 50% 50%;}
.tile.tile-16 .tile-inner{background:transparent url(i/chaingun.gif) no-repeat 50% 50%;}
.tile.tile-32 .tile-inner{background:transparent url(i/daemon.gif) no-repeat 50% 50%;}
.tile.tile-64 .tile-inner{background:transparent url(i/lostsoul.gif) no-repeat 50% 50%;}
.tile.tile-128 .tile-inner{background:transparent url(i/cacodaemon.gif) no-repeat 50% 50%;}
.tile.tile-256 .tile-inner{background:transparent url(i/baronofhell.gif) no-repeat 50% 50%;}
.tile.tile-512 .tile-inner{background:transparent url(i/baron.gif) no-repeat 50% 50%;}
.tile.tile-1024 .tile-inner{background:transparent url(i/spider.gif) no-repeat 50% 50%;}
.tile.tile-2048 .tile-inner{background:transparent url(i/cyberdaemon.gif) no-repeat 50% 50%;}
.tile.tile-super .tile-inner{background:transparent url(i/nazi.gif) no-repeat 50% 50%;}
.tile.tile-old{background-position:50% 50%;background-repeat:no-repeat;}
.tile.tile-old .tile-inner{background:none;}

@media screen and (max-width: 520px){
  .tile.tile-128 .tile-inner{font-size:25px;}
  .tile.tile-256 .tile-inner{font-size:25px;}
  .tile.tile-512 .tile-inner{font-size: 25px;}
  .tile.tile-1024 .tile-inner{font-size: 15px;}
  .tile.tile-2048 .tile-inner{font-size:15px;}
  .tile.tile-super .tile-inner{font-size:10px;}
}

@-webkit-keyframes appear {
   0% {opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0);}
  100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1); }
}
@-moz-keyframes appear {
    0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0);}
  100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
}
@keyframes appear {
  0% { opacity:0;-webkit-transform: scale(0);-moz-transform: scale(0);transform:scale(0);}
  100%{opacity:1;-webkit-transform: scale(1);-moz-transform: scale(1);transform:scale(1);}
}

.tile-new .tile-inner{
  -webkit-animation:appear 200ms ease 100ms;
  -moz-animation:appear 200ms ease 100ms;
  animation:appear 200ms ease 100ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

@-webkit-keyframes pop {
  0%  {-webkit-transform:scale(0);-moz-transform: scale(0);transform: scale(0);}
  50% {-webkit-transform:scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);}
  100%{-webkit-transform:scale(1);-moz-transform: scale(1);transform: scale(1);}
}
@-moz-keyframes pop{
  0%  {-webkit-transform:scale(0);-moz-transform: scale(0);transform: scale(0);}
  50% {-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);}
  100%{-webkit-transform:scale(1);-moz-transform: scale(1);transform: scale(1);}
}
@keyframes pop{
  0%  {-webkit-transform:scale(0);-moz-transform: scale(0);transform:scale(0);}
  50% {-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);}
  100%{-webkit-transform:scale(1);-moz-transform: scale(1);transform:scale(1);}
}

.tile-merged .tile-inner{
  z-index:20;
  -webkit-animation:pop 200ms ease 100ms;
  -moz-animation:pop 200ms ease 100ms;
  animation:pop 200ms ease 100ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.game-intro{float:left;line-height:42px;margin-bottom:0;}

.music{background:url(i/music.png) no-repeat 10px 4px;display:block;height:80px;}
.music.on{background-position:41px 4px;}
.music.on:hover{background-position:51px -74px;}
.music.off{background-position:51px -74px;}
.music.off:hover{background-position:41px 4px;}

p, p a{
  text-shadow: 0 1px 1px #520300, 0 -1px 1px #520300, 1px 0 1px #520300, -1px 0 1px #520300, 3px 2px 10px #000;
  color:#cc0104;
}
.laius p{text-align:center;}
.game-explanation{
  padding:20px;
  background:rgba(0,0,0,0.6);
  margin-top:50px;
  margin-bottom:50px;
  color: #cc0104;
  text-shadow: 0 1px 1px #520300, 0 -1px 1px #520300, 1px 0 1px #520300, -1px 0 1px #520300, 3px 2px 10px #000;
  letter-spacing: 0.08em;
  font-size:25px;
}
.game-explanation.smaller{
  font-size:14px;
  margin-bottom:150px;
}


@media screen and(max-width: 520px){
  html, body{font-size: 15px;}
  body{margin:20px 0;padding: 0 20px;}
  h1.title{font-size:27px;margin-top: 15px;}
  .container{width:280px;margin:0 auto;}
  .score-container,
  .best-container{margin-top:0;padding:15px 10px;min-width: 40px;}
  .heading{margin-bottom:10px;}
  .game-intro{width:55%;display:block;box-sizing:border-box;line-height:1.65;}
  .restart-button{width:42%;padding:0;display:block;box-sizing:border-box;margin-top:2px;}
  .game-container{margin-top:17px;position:relative;padding:10px;cursor:default;-webkit-touch-callout:none;-ms-touch-callout: none;-webkit-user-select: none;
    -moz-user-select:none;-ms-user-select:none;-ms-touch-action:none;
    touch-action: none;background: #bbada0;border-radius:6px;width:280px;
    height:280px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
    box-sizing:border-box;
}
.game-container .game-message{
  display:none;position:absolute;
  top:0;right:0;bottom:0;left:0;
  background:rgba(238, 228, 218, 0.5);
  z-index:6;text-align:center;
  -webkit-animation:fade-in 800ms ease 1200ms;
  -moz-animation:fade-in 800ms ease 1200ms;
  animation:fade-in 800ms ease 1200ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode:both;}
.game-container .game-message p{

  font-size:60px;
  font-weight:bold;
  height:60px;
  line-height:60px;
  margin-top:222px;
}
.game-container .game-message .lower{display:block;margin-top:59px;}
.game-container .game-message a{
display: inline-block;background: #8f7a66;border-radius: 3px;padding: 0 20px;text-decoration:none;
color: #f9f6f2;height: 40px;line-height: 42px;margin-left: 9px;}
.game-container .game-message a.keep-playing-button{display:none;}
.game-container .game-message.game-won{
  background: rgba(237, 194, 46, 0.5);
  color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button{display:block;}
.game-container .game-message.game-won,
.game-container .game-message.game-over{display:block;}
.grid-container{position:absolute;z-index:1;}
.grid-row {margin-bottom: 10px; }
.grid-row:last-child{margin-bottom: 0;}
.grid-row:after{content:"";display:block;clear:both;}

  .grid-cell{width:57px;height:57px;margin-right:9px;float:left;border-radius:3px;background:rgba(238, 228, 218, 0.18);}
  .grid-cell:last-child{margin-right: 0;}
  .tile-container{position:absolute;z-index:2;}
  .tile,
  .tile .tile-inner{width:58px;height:58px;line-height:67.5px;}
  .tile.tile-position-1-1{-webkit-transform:translate(0px, 0px);-moz-transform:translate(0px, 0px);transform:translate(0px, 0px);}
  .tile.tile-position-1-2{-webkit-transform:translate(0px, 67px);-moz-transform: translate(0px, 67px);transform: translate(0px, 67px);}
  .tile.tile-position-1-3{-webkit-transform: translate(0px, 135px);-moz-transform: translate(0px, 135px);transform: translate(0px, 135px);}
  .tile.tile-position-1-4{-webkit-transform: translate(0px, 202px);-moz-transform: translate(0px, 202px);transform: translate(0px, 202px); }
  .tile.tile-position-2-1{-webkit-transform: translate(67px, 0px);-moz-transform: translate(67px, 0px);transform: translate(67px, 0px); }
  .tile.tile-position-2-2{-webkit-transform: translate(67px, 67px);-moz-transform: translate(67px, 67px);transform: translate(67px, 67px); }
  .tile.tile-position-2-3{-webkit-transform: translate(67px, 135px);-moz-transform: translate(67px, 135px);transform: translate(67px, 135px); }
  .tile.tile-position-2-4{-webkit-transform: translate(67px, 202px);-moz-transform: translate(67px, 202px);transform: translate(67px, 202px);}
  .tile.tile-position-3-1{-webkit-transform: translate(135px, 0px);-moz-transform: translate(135px, 0px);transform: translate(135px, 0px);}
  .tile.tile-position-3-2{-webkit-transform: translate(135px, 67px);-moz-transform: translate(135px, 67px);transform: translate(135px, 67px);}
  .tile.tile-position-3-3{-webkit-transform: translate(135px, 135px);-moz-transform: translate(135px, 135px);transform: translate(135px, 135px);}
  .tile.tile-position-3-4{-webkit-transform: translate(135px, 202px);-moz-transform: translate(135px, 202px);transform: translate(135px, 202px);}
  .tile.tile-position-4-1{-webkit-transform: translate(202px, 0px);-moz-transform: translate(202px, 0px);transform: translate(202px, 0px);}
  .tile.tile-position-4-2{-webkit-transform: translate(202px, 67px);-moz-transform: translate(202px, 67px);transform: translate(202px, 67px);}
  .tile.tile-position-4-3{-webkit-transform: translate(202px, 135px);-moz-transform: translate(202px, 135px);transform: translate(202px, 135px);}
  .tile.tile-position-4-4{-webkit-transform: translate(202px, 202px);-moz-transform: translate(202px, 202px);transform: translate(202px, 202px);}

  .tile .tile-inner{font-size: 35px;}
  .game-message p{
  font-size: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  margin-top: 90px !important;
  }
  .game-message .lower{margin-top: 30px !important; }
}