html,
body {
  box-sizing: border-box;
  min-width: 100%;
  min-height: 100%;
  height: 100%; }

body {
  margin: 0;
  padding: 15px;
  display: flex;
  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; }

.cookie-notice {
  display: none; }

.app-notice {
  display: none; }

.sharing {
  display: none; }

.container {
  display: flex;
  width: 100%;
  margin: none; }

.meta {
  flex: 1;
  max-width: 35%;
  display: flex;
  flex-direction: column; }

.inner {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

.score-container,
.best-container {
  margin-top: 0;
  flex: 1;
  flex-shrink: 0;
  padding-left: 0;
  padding-right: 0; }

.score-container {
  margin-right: 10px; }

.heading {
  display: flex;
  flex-direction: column; }
  .heading:after {
    display: none; }

.scores-container {
  float: none;
  display: flex; }

.above-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 15px; }
  .above-game .restart-button {
    flex-shrink: 0; }
  .above-game:after {
    display: none; }

.extras {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; }
  .extras.below-game {
    display: none;
    flex-basis: auto; }

.game-explanation {
  margin-top: 0; }

.game-intro {
  margin-top: 15px;
  flex-shrink: 0; }

.game-intro,
.game-explanation {
  line-height: 1.3; }

h1.title {
  line-height: 1;
  margin-bottom: 10px; }

.game-container {
  flex-shrink: 0;
  margin-top: 0; }

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px; }
  .footer,
  .footer p {
    line-height: 1; }
  .footer p {
    margin: 0; }

.score-sharing {
  display: none !important; }

.mailing-list {
  display: none; }

.game-message {
  padding-top: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .game-message.game-won, .game-message.game-over {
    display: flex; }
    .game-message.game-won p, .game-message.game-over p {
      margin-top: 0 !important;
      animation: none !important; }
      @media screen and (min-width: 521px) and (max-width: 852px) {
        .game-message.game-won p, .game-message.game-over p {
          font-size: 30px; } }

@media screen and (min-width: 521px) and (max-width: 1280px) {
  .tile.tile-128 .tile-inner, .tile.tile-256 .tile-inner, .tile.tile-512 .tile-inner {
    font-size: 48px; }
  .tile.tile-1024 .tile-inner, .tile.tile-2048 .tile-inner {
    font-size: 37px; }
  .tile.tile-super .tile-inner {
    font-size: 27px; }
  .game-container {
    padding: 16px;
    border-radius: 6px;
    width: 540px;
    height: 540px; }
  .grid-row {
    margin-bottom: 16px; }
  .grid-cell {
    width: 115px;
    height: 115px;
    margin-right: 16px;
    border-radius: 3px; }
  .tile,
  .tile .tile-inner {
    width: 115px;
    height: 115px;
    line-height: 115px;
    font-size: 60px; }
  .tile.tile-position-1-1 {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  .tile.tile-position-1-2 {
    -webkit-transform: translate(0px, 131px);
    -moz-transform: translate(0px, 131px);
    -ms-transform: translate(0px, 131px);
    transform: translate(0px, 131px); }
  .tile.tile-position-1-3 {
    -webkit-transform: translate(0px, 262px);
    -moz-transform: translate(0px, 262px);
    -ms-transform: translate(0px, 262px);
    transform: translate(0px, 262px); }
  .tile.tile-position-1-4 {
    -webkit-transform: translate(0px, 393px);
    -moz-transform: translate(0px, 393px);
    -ms-transform: translate(0px, 393px);
    transform: translate(0px, 393px); }
  .tile.tile-position-2-1 {
    -webkit-transform: translate(131px, 0px);
    -moz-transform: translate(131px, 0px);
    -ms-transform: translate(131px, 0px);
    transform: translate(131px, 0px); }
  .tile.tile-position-2-2 {
    -webkit-transform: translate(131px, 131px);
    -moz-transform: translate(131px, 131px);
    -ms-transform: translate(131px, 131px);
    transform: translate(131px, 131px); }
  .tile.tile-position-2-3 {
    -webkit-transform: translate(131px, 262px);
    -moz-transform: translate(131px, 262px);
    -ms-transform: translate(131px, 262px);
    transform: translate(131px, 262px); }
  .tile.tile-position-2-4 {
    -webkit-transform: translate(131px, 393px);
    -moz-transform: translate(131px, 393px);
    -ms-transform: translate(131px, 393px);
    transform: translate(131px, 393px); }
  .tile.tile-position-3-1 {
    -webkit-transform: translate(262px, 0px);
    -moz-transform: translate(262px, 0px);
    -ms-transform: translate(262px, 0px);
    transform: translate(262px, 0px); }
  .tile.tile-position-3-2 {
    -webkit-transform: translate(262px, 131px);
    -moz-transform: translate(262px, 131px);
    -ms-transform: translate(262px, 131px);
    transform: translate(262px, 131px); }
  .tile.tile-position-3-3 {
    -webkit-transform: translate(262px, 262px);
    -moz-transform: translate(262px, 262px);
    -ms-transform: translate(262px, 262px);
    transform: translate(262px, 262px); }
  .tile.tile-position-3-4 {
    -webkit-transform: translate(262px, 393px);
    -moz-transform: translate(262px, 393px);
    -ms-transform: translate(262px, 393px);
    transform: translate(262px, 393px); }
  .tile.tile-position-4-1 {
    -webkit-transform: translate(393px, 0px);
    -moz-transform: translate(393px, 0px);
    -ms-transform: translate(393px, 0px);
    transform: translate(393px, 0px); }
  .tile.tile-position-4-2 {
    -webkit-transform: translate(393px, 131px);
    -moz-transform: translate(393px, 131px);
    -ms-transform: translate(393px, 131px);
    transform: translate(393px, 131px); }
  .tile.tile-position-4-3 {
    -webkit-transform: translate(393px, 262px);
    -moz-transform: translate(393px, 262px);
    -ms-transform: translate(393px, 262px);
    transform: translate(393px, 262px); }
  .tile.tile-position-4-4 {
    -webkit-transform: translate(393px, 393px);
    -moz-transform: translate(393px, 393px);
    -ms-transform: translate(393px, 393px);
    transform: translate(393px, 393px); } }

@media screen and (min-width: 521px) and (max-width: 1023px) {
  .score-container,
  .best-container {
    font-size: 20px;
    line-height: 45px; }
  .tile.tile-128 .tile-inner, .tile.tile-256 .tile-inner, .tile.tile-512 .tile-inner {
    font-size: 39px; }
  .tile.tile-1024 .tile-inner, .tile.tile-2048 .tile-inner {
    font-size: 30px; }
  .tile.tile-super .tile-inner {
    font-size: 26px; }
  .game-container {
    padding: 13px;
    border-radius: 6px;
    width: 440px;
    height: 440px; }
  .grid-row {
    margin-bottom: 13px; }
  .grid-cell {
    width: 93.75px;
    height: 93.75px;
    margin-right: 13px;
    border-radius: 3px; }
  .tile,
  .tile .tile-inner {
    width: 94px;
    height: 94px;
    line-height: 94px;
    font-size: 48px; }
  .tile.tile-position-1-1 {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  .tile.tile-position-1-2 {
    -webkit-transform: translate(0px, 106px);
    -moz-transform: translate(0px, 106px);
    -ms-transform: translate(0px, 106px);
    transform: translate(0px, 106px); }
  .tile.tile-position-1-3 {
    -webkit-transform: translate(0px, 213px);
    -moz-transform: translate(0px, 213px);
    -ms-transform: translate(0px, 213px);
    transform: translate(0px, 213px); }
  .tile.tile-position-1-4 {
    -webkit-transform: translate(0px, 320px);
    -moz-transform: translate(0px, 320px);
    -ms-transform: translate(0px, 320px);
    transform: translate(0px, 320px); }
  .tile.tile-position-2-1 {
    -webkit-transform: translate(106px, 0px);
    -moz-transform: translate(106px, 0px);
    -ms-transform: translate(106px, 0px);
    transform: translate(106px, 0px); }
  .tile.tile-position-2-2 {
    -webkit-transform: translate(106px, 106px);
    -moz-transform: translate(106px, 106px);
    -ms-transform: translate(106px, 106px);
    transform: translate(106px, 106px); }
  .tile.tile-position-2-3 {
    -webkit-transform: translate(106px, 213px);
    -moz-transform: translate(106px, 213px);
    -ms-transform: translate(106px, 213px);
    transform: translate(106px, 213px); }
  .tile.tile-position-2-4 {
    -webkit-transform: translate(106px, 320px);
    -moz-transform: translate(106px, 320px);
    -ms-transform: translate(106px, 320px);
    transform: translate(106px, 320px); }
  .tile.tile-position-3-1 {
    -webkit-transform: translate(213px, 0px);
    -moz-transform: translate(213px, 0px);
    -ms-transform: translate(213px, 0px);
    transform: translate(213px, 0px); }
  .tile.tile-position-3-2 {
    -webkit-transform: translate(213px, 106px);
    -moz-transform: translate(213px, 106px);
    -ms-transform: translate(213px, 106px);
    transform: translate(213px, 106px); }
  .tile.tile-position-3-3 {
    -webkit-transform: translate(213px, 213px);
    -moz-transform: translate(213px, 213px);
    -ms-transform: translate(213px, 213px);
    transform: translate(213px, 213px); }
  .tile.tile-position-3-4 {
    -webkit-transform: translate(213px, 320px);
    -moz-transform: translate(213px, 320px);
    -ms-transform: translate(213px, 320px);
    transform: translate(213px, 320px); }
  .tile.tile-position-4-1 {
    -webkit-transform: translate(320px, 0px);
    -moz-transform: translate(320px, 0px);
    -ms-transform: translate(320px, 0px);
    transform: translate(320px, 0px); }
  .tile.tile-position-4-2 {
    -webkit-transform: translate(320px, 106px);
    -moz-transform: translate(320px, 106px);
    -ms-transform: translate(320px, 106px);
    transform: translate(320px, 106px); }
  .tile.tile-position-4-3 {
    -webkit-transform: translate(320px, 213px);
    -moz-transform: translate(320px, 213px);
    -ms-transform: translate(320px, 213px);
    transform: translate(320px, 213px); }
  .tile.tile-position-4-4 {
    -webkit-transform: translate(320px, 320px);
    -moz-transform: translate(320px, 320px);
    -ms-transform: translate(320px, 320px);
    transform: translate(320px, 320px); } }

@media screen and (min-width: 521px) and (max-width: 852px) {
  h1.title {
    font-size: 50px; }
  .score-container,
  .best-container {
    padding: 8px 0px;
    font-size: 15px;
    line-height: 36px; }
    .score-container:after,
    .best-container:after {
      font-size: 13px;
      top: 5px; }
  .game-intro {
    display: none; }
  .extras {
    justify-content: space-between;
    padding-top: 15px; }
  .game-explanation {
    font-size: 15px; }
  .footer p.attribution span {
    display: none; }
  .tile.tile-128 .tile-inner, .tile.tile-256 .tile-inner, .tile.tile-512 .tile-inner {
    font-size: 30px; }
  .tile.tile-1024 .tile-inner, .tile.tile-2048 .tile-inner {
    font-size: 20px; }
  .tile.tile-super .tile-inner {
    font-size: 15px; }
  .game-container {
    padding: 10px;
    border-radius: 6px;
    width: 330px;
    height: 330px; }
  .grid-row {
    margin-bottom: 10px; }
  .grid-cell {
    width: 70px;
    height: 70px;
    margin-right: 10px;
    border-radius: 3px; }
  .tile,
  .tile .tile-inner {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 36px; }
  .tile.tile-position-1-1 {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  .tile.tile-position-1-2 {
    -webkit-transform: translate(0px, 80px);
    -moz-transform: translate(0px, 80px);
    -ms-transform: translate(0px, 80px);
    transform: translate(0px, 80px); }
  .tile.tile-position-1-3 {
    -webkit-transform: translate(0px, 160px);
    -moz-transform: translate(0px, 160px);
    -ms-transform: translate(0px, 160px);
    transform: translate(0px, 160px); }
  .tile.tile-position-1-4 {
    -webkit-transform: translate(0px, 240px);
    -moz-transform: translate(0px, 240px);
    -ms-transform: translate(0px, 240px);
    transform: translate(0px, 240px); }
  .tile.tile-position-2-1 {
    -webkit-transform: translate(80px, 0px);
    -moz-transform: translate(80px, 0px);
    -ms-transform: translate(80px, 0px);
    transform: translate(80px, 0px); }
  .tile.tile-position-2-2 {
    -webkit-transform: translate(80px, 80px);
    -moz-transform: translate(80px, 80px);
    -ms-transform: translate(80px, 80px);
    transform: translate(80px, 80px); }
  .tile.tile-position-2-3 {
    -webkit-transform: translate(80px, 160px);
    -moz-transform: translate(80px, 160px);
    -ms-transform: translate(80px, 160px);
    transform: translate(80px, 160px); }
  .tile.tile-position-2-4 {
    -webkit-transform: translate(80px, 240px);
    -moz-transform: translate(80px, 240px);
    -ms-transform: translate(80px, 240px);
    transform: translate(80px, 240px); }
  .tile.tile-position-3-1 {
    -webkit-transform: translate(160px, 0px);
    -moz-transform: translate(160px, 0px);
    -ms-transform: translate(160px, 0px);
    transform: translate(160px, 0px); }
  .tile.tile-position-3-2 {
    -webkit-transform: translate(160px, 80px);
    -moz-transform: translate(160px, 80px);
    -ms-transform: translate(160px, 80px);
    transform: translate(160px, 80px); }
  .tile.tile-position-3-3 {
    -webkit-transform: translate(160px, 160px);
    -moz-transform: translate(160px, 160px);
    -ms-transform: translate(160px, 160px);
    transform: translate(160px, 160px); }
  .tile.tile-position-3-4 {
    -webkit-transform: translate(160px, 240px);
    -moz-transform: translate(160px, 240px);
    -ms-transform: translate(160px, 240px);
    transform: translate(160px, 240px); }
  .tile.tile-position-4-1 {
    -webkit-transform: translate(240px, 0px);
    -moz-transform: translate(240px, 0px);
    -ms-transform: translate(240px, 0px);
    transform: translate(240px, 0px); }
  .tile.tile-position-4-2 {
    -webkit-transform: translate(240px, 80px);
    -moz-transform: translate(240px, 80px);
    -ms-transform: translate(240px, 80px);
    transform: translate(240px, 80px); }
  .tile.tile-position-4-3 {
    -webkit-transform: translate(240px, 160px);
    -moz-transform: translate(240px, 160px);
    -ms-transform: translate(240px, 160px);
    transform: translate(240px, 160px); }
  .tile.tile-position-4-4 {
    -webkit-transform: translate(240px, 240px);
    -moz-transform: translate(240px, 240px);
    -ms-transform: translate(240px, 240px);
    transform: translate(240px, 240px); } }

@media screen and (max-width: 520px) {
  .container {
    flex-direction: column; }
  .extras.below-game {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0; }
  h1.title {
    font-size: 40px; }
  .meta {
    max-width: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto; }
  .above-game {
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center; }
    .above-game .game-intro {
      margin-top: 0; }
    .above-game .restart-button {
      order: 1; }
  .extras {
    display: none; } }