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