html {
	font-size: 48px;
	font-family: sans-serif;
}
button {
	font-size: 1em;
}

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   -ms-user-select: none;
   user-select: none;
}

@media screen and (min-width: 800px) {
	body {
		width: 800px;
		margin: 0 auto;
	}
}

#game {
	margin: 0 auto;
	position: relative;
}

#game, #end {
	box-sizing: border-box;
	background: #f4f4f4;
	padding: 0.5em;
	border-radius: 0.5em;
}

.stats {
	margin-top: 0.2em;
}

.stat {
	display: inline-block;
	margin-bottom: 0.2em;
}
.stat:not(:last-child) {
	margin-right: 1em;
}
.stat.score {
	display: block;
}
#game.high-score #high-score, #game.high-score #score {
	color: red;
}

#grid {
	margin: 0 auto;
}
#hoof {
	display: block;
	margin: 0.1em auto 0 auto;
	border: none;
	width: 100%;
	background: lightgreen;
	transition: background-color 0.5s, color 0.5s;
}	
#hoof[disabled] {
	opacity: 0;
	background: #eee;
	color: #eee;
}

.block {
	width: 2rem;
	height: 2rem;
	line-height: 2em;
	text-align: center;
	font-family: sans-serif;
	background: #eee;
	cursor: pointer;
	border-radius: 0.125em;
}
@keyframes fadein {
	0% { opacity: 0; }
	20% {opacity: 0; }
	100% { opacity: 1; }
}
.block[data-value="1"] { background-color: #d3e2b6; }
.block[data-value="2"] { background-color: #c3dbb4; }
.block[data-value="3"] { background-color: #aaccb1; }
.block[data-value="4"] { background-color: #87bdb1; }
.block[data-value="0"] { background-color: #68b3af; }

.block.new {
	animation-name: fadein;
	animation-duration: 1s;
}

.block.clicked {
	background: #444;
	color: white;
	transition: background-color 0.3s, color 0.3s;
}
#game.can-hoof .block.clicked, #game.can-hoof #hoof {
	background: #005;
	color: white;
}
#game.can-hoof.next-level .block.clicked {
	animation-name: wobble;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
}
@keyframes wobble {
	0% {
		transform: rotate(3deg)
	}
	50% {
		transform: rotate(-3deg);
	}
	100% {
		transform: rotate(3deg);
	}
}

.diff-container {
	position: relative;
	overflow: hidden;
	height: 1em;
	display: inline-block;
	vertical-align: top;
}
.diff.changed { 
	opacity: 1;
	transition: opacity 0.5s;
	left: 0;
}
.diff {
	color: red;
	position: absolute;

	opacity: 0;
	top: 0;
	transition: opacity 1s;
}

#end {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	color: black;
	z-index: -1;
	top: 0;
	left: 0;
}
#game.end #end {
	opacity: 1;
	transition: opacity 1s;
	z-index: 2;
}

.restart {
	display: block;
	margin: 1em auto 0;
	padding: 0.5em;
	background: lightgreen;
	border: none;
}

#me {
    border-top: 0.1rem solid #aaa;
    padding-top: 1em;
    margin-top: 2em;
    color: #aaa;
    padding-bottom: 1em;
}

#new-high-score-message {
	animation: high-score 0.6s infinite ease-in-out alternate;
	color: red;
    margin: 0;
}
@keyframes high-score {
	0% {
		color: black;
	}
	100% {
		color: red;
	}
}