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;
  }
}