html, body {margin: -60px 0 0 0;
  padding: 70px 0 0 0px;
  background: #212121;
  color: rgb(119, 110, 101);
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  zoom: 1.355;
}



input { display: inline-block; background: rgb(143, 122, 102); border-radius: 3px; padding: 0px 20px; text-decoration: none; color: rgb(249, 246, 242); height: 40px; cursor: pointer; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; border: none; outline: none; box-sizing: border-box; font-weight: bold; margin: 0px; appearance: none; }
input[type="text"], input[type="email"] { cursor: auto; background: rgb(252, 251, 249); font-weight: normal; color: rgb(119, 110, 101); padding: 0px 15px; }
input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder { color: rgb(157, 148, 140); }
.heading::after { content: ""; display: block; clear: both; }
h1.title { font-size: 80px; font-weight: bold; margin: 0px; display: block; float: left; }
@-webkit-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; display: flex; }
.scores-container * + * { margin-left: 5px; }
.score-container, .best-container {position: relative;display: block;background: linear-gradient(90deg,#9c27b0,#e91e63);padding: 15px 25px;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: 10px; left: 0px; text-transform: uppercase; font-size: 13px; line-height: 13px; text-align: center; color: rgb(238, 228, 218); }
.score-container .score-addition, .best-container .score-addition { position: absolute; right: 30px; font-size: 25px; line-height: 25px; font-weight: bold; color:white; z-index: 100; animation: 600ms ease-in 0s 1 normal both running move-up; }
.score-container::after { content: "Score"; }
.best-container::after { content: "Best"; }
p { margin-top: 0px; margin-bottom: 10px; line-height: 1.65; }
a, .cc_container a:not(.cc_btn) {font-weight: light ;text-decoration: none;cursor: pointer;color: rgb(121, 121, 121);}
strong.important { text-transform: uppercase; }
hr { border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(216, 212, 208); margin-top: 20px; margin-bottom: 30px; }
.container { width: 500px; margin: 30px auto 0px;}
@-webkit-keyframes fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.game-container {margin-top: 40px;position: relative;padding: 15px;cursor: default;user-select: none;touch-action: none;background: #3b4043;border-radius: 6px;width: 500px;height: 500px;box-sizing: border-box;}
.game-message {display: none;position: absolute;inset: 0px;background: hsl(0deg 0% 0% / 65%);z-index: 100;flex-direction: column;align-items: center;justify-content: center;text-align: center;animation: 800ms ease 1200ms 1 normal both running fade-in;}
.game-message p { font-size: 60px; font-weight: bold; height: 60px; line-height: 60px; }
.game-message .lower { display: block; margin-top: 29px; }
.game-message a {display: inline-block;background: linear-gradient(270deg,#e91e63,#ff9800);border-radius: 3px;padding: 0px 20px;text-decoration: none;color: rgb(249, 246, 242);height: 40px;line-height: 42px;cursor: pointer;margin-left: 9px;}
.game-message a.keep-playing-button { display: none; }
.game-message.game-won { background: rgba(237, 194, 46, 0.5); color: rgb(249, 246, 242); }
.game-message.game-won a.keep-playing-button { display: inline-block; }
.game-message.game-won, .game-message.game-over {display: flex;color: #f095ff;}
.grid-container { position: absolute; z-index: 1; }
.grid-row { margin-bottom: 15px; }
.grid-row:last-child { margin-bottom: 0px; }
.grid-row::after { content: ""; display: block; clear: both; }
.grid-cell { width: 106.25px; height: 106.25px; margin-right: 15px; float: left; border-radius: 3px; background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { margin-right: 0px; }
.tile-container { position: absolute; z-index: 2; }
.tile, .tile .tile-inner { width: 107px; height: 107px; line-height: 107px; }
.tile.tile-position-1-1 { transform: translate(0px, 0px); }
.tile.tile-position-1-2 { transform: translate(0px, 121px); }
.tile.tile-position-1-3 { transform: translate(0px, 242px); }
.tile.tile-position-1-4 { transform: translate(0px, 363px); }
.tile.tile-position-2-1 { transform: translate(121px, 0px); }
.tile.tile-position-2-2 { transform: translate(121px, 121px); }
.tile.tile-position-2-3 { transform: translate(121px, 242px); }
.tile.tile-position-2-4 { transform: translate(121px, 363px); }
.tile.tile-position-3-1 { transform: translate(242px, 0px); }
.tile.tile-position-3-2 { transform: translate(242px, 121px); }
.tile.tile-position-3-3 { transform: translate(242px, 242px); }
.tile.tile-position-3-4 { transform: translate(242px, 363px); }
.tile.tile-position-4-1 { transform: translate(363px, 0px); }
.tile.tile-position-4-2 { transform: translate(363px, 121px); }
.tile.tile-position-4-3 { transform: translate(363px, 242px); }
.tile.tile-position-4-4 { transform: translate(363px, 363px); }
.tile { position: absolute; transition: transform 100ms ease-in-out 0s; }
.tile .tile-inner { border-radius: 3px; background: rgb(238, 228, 218); text-align: center; font-weight: bold; z-index: 10; font-size: 55px; }
.tile.tile-2 .tile-inner {background: #d7b6dd;color: #9c27b0;box-shadow: rgba(243, 215, 116, 0) 0px 0px 30px 10px, rgba(255, 255, 255, 0) 0px 0px 0px 1px inset;}
.tile.tile-4 .tile-inner {background: #c8eeff;color: #03a9f4;box-shadow: rgba(243, 215, 116, 0) 0px 0px 30px 10px, rgba(255, 255, 255, 0) 0px 0px 0px 1px inset;}
.tile.tile-8 .tile-inner {color: #a55506;background: #ffad32;}
.tile.tile-16 .tile-inner {color: #ffe2b7;background: #ff7d00;}
.tile.tile-32 .tile-inner {color: #abffab;background: #00c600;}
.tile.tile-64 .tile-inner {color: #ffc5c1;background: #ff1100;}
.tile.tile-128 .tile-inner { color: #fffac4; background: #f5dd0a;font-size: 45px; }.tile.tile-256 .tile-inner { color: #b6deff; background: #1c7ecd; box-shadow: rgb(242 215 117 / 0%) 0px 0px 30px 10px, rgb(255 255 255 / 14%) 0px 0px 0px 1px inset; font-size: 45px; }
.tile.tile-512 .tile-inner { color: #f3acff; background: #9805b2; box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }
.tile.tile-1024 .tile-inner { background:radial-gradient(#FFEB3B,#ff3d00f0);color: white;text-shadow: 2px 2px 15px #78280ff0;box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }
.tile.tile-2048 .tile-inner { color: rgb(255 255 255); background: radial-gradient(#d100f4,#ff0157);text-shadow: 2px 2px 15px #44081ced; box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }
.tile.tile-4096 .tile-inner { background:radial-gradient(#00ffd0,#00189fa3);color: white;text-shadow: 5px 5px 20px #111d71;box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }

.tile.tile-8192 .tile-inner { color: rgb(255 255 255); background: radial-gradient(#ee8dff,#bf34d7,#e91e63);text-shadow: 2px 2px 15px #000000; box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }
.tile.tile-16384 .tile-inner { background:radial-gradient(#FFEB3B,#FFEB3B,#e91e63);color: white;text-shadow: 2px 2px 15px #000000;box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }
.tile.tile-32768 .tile-inner { color: rgb(255 255 255); background: radial-gradient(#ee8dff,#bf34d7,#e91e63);text-shadow: 2px 2px 15px #000000; box-shadow: rgba(243, 215, 116, 0.24) 0px 0px 30px 10px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 45px; }

@-webkit-keyframes appear { 
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes appear { 
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
.tile-new .tile-inner { animation: 200ms ease 100ms 1 normal backwards running appear; }
@-webkit-keyframes pop { 
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes pop { 
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.tile-merged .tile-inner { z-index: 20; animation: 200ms ease 100ms 1 normal backwards running pop; }
.above-game { display: flex; justify-content: space-between; align-items: center; }
.game-intro {line-height: 1.2;margin-bottom: 0px;margin-right: 10px;}
.how-to-play-link { display: inline-block;text-shadow: 2px 2px 4px #000000;color:white;text-decoration:none}
.restart-button {background: linear-gradient(270deg,#e91e63,#ff9800);border-radius: 3px;padding: 0px 20px;text-decoration: none;color: rgb(249, 246, 242);height: 40px;line-height: 42px;cursor: pointer;display: block;text-align: center;flex-shrink: 0;}
@keyframes game-explanation-fading-highlight { 
  0% { background-color: rgb(243, 215, 116); box-shadow: rgb(243, 215, 116) 0px 0px 0px 15px; }
  100% { background-color: transparent; box-shadow: transparent 0px 0px 0px 10px; }
}
.game-explanation {color: #aaaaaa;display: block;margin-top: 30px;border-radius: 1px;}
.game-explanation-highlighted { animation: 2s ease-in 1s 1 normal both running game-explanation-fading-highlight; }
.game-explanation-touch { display: none; }
@media (hover: none) {
  .game-explanation-touch { display: inline; }
  .game-explanation-mouse { display: none; }
}
.sharing { margin-top: 20px; text-align: center; }
.sharing > iframe, .sharing > span, .sharing > form { display: inline-block; vertical-align: middle; }

@-webkit-keyframes pop-in-big { 
  0% { transform: scale(0) translateZ(0px); opacity: 0; margin-top: -40px; }
  100% { transform: scale(1) translateZ(0px); opacity: 1; margin-top: 30px; }
}
@keyframes pop-in-big { 
  0% { transform: scale(0) translateZ(0px); opacity: 0; margin-top: -40px; }
  100% { transform: scale(1) translateZ(0px); opacity: 1; margin-top: 30px; }
}
@-webkit-keyframes pop-in-small { 
  0% { transform: scale(0) translateZ(0px); opacity: 0; margin-top: -40px; }
  100% { transform: scale(1) translateZ(0px); opacity: 1; margin-top: 10px; }
}
@keyframes pop-in-small { 
  0% { transform: scale(0) translateZ(0px); opacity: 0; margin-top: -40px; }
  100% { transform: scale(1) translateZ(0px); opacity: 1; margin-top: 10px; }
}


@media only screen and (min-width:1024px){
body{
  zoom: 0.5;
}


}