// Let's use SCSS to be able to randomize
// This value have to match with the Haml
$delays-count: 50;
$delays: ();
@for $i from 1 to $delays-count
{
	// Between 1 and 5 seconds
	$delays: append($delays, random(4000) + 1000);
}

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
body
{
	font-family: 'Source Code Pro', monospace;
	font-size: 3.2rem;
	letter-spacing: -.06em;
}

@keyframes hide { to { visibility: hidden; } }
@keyframes signal
{
	from { background: #e74c3c; }
	to { background: #2ecc71; }
}
@keyframes counter
{
	from { top: 0; }
	to { top: -1000%; }
}
input[type="checkbox"] { display: none; }
#intro { z-index: 2; }
#intro, #win, #lose
{
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	background: #3498db;
	cursor: pointer;
}
#intro > div, #win > div, #lose > div
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#intro > label
{
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	animation: delaysZi 0s linear infinite paused;
}
@keyframes delaysZi
{
	from { z-index: 0; }
	to { z-index: $delays-count; }
}
@for $i from 0 to $delays-count
{
	#intro > label:nth-child(#{$i})
	{
		animation-duration: #{random(400) + 50}ms;
		animation-delay: #{random(1000) * -1}ms;
	}
}
.start:checked ~ #intro > label
{
	animation-play-state: running;
}
.start:checked ~ #intro { z-index: -999; opacity: 0; }
.start:checked ~ #signal { animation: signal 3s both steps(1); }
@for $i from 1 to $delays-count
{
	#d#{$i}:checked ~ #signal { animation-duration: #{nth($delays, $i)}ms; }
}
.start:checked ~ #results #lose { animation: hide 3s both steps(1); }
@for $i from 1 to $delays-count
{
	#d#{$i}:checked ~ #results #lose { animation-duration: #{nth($delays, $i)}ms; }
}
#game:checked ~ #results #lose
{
	animation-play-state: paused;
}
#signal
{
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	cursor: pointer;
}
#game:checked ~ #signal
{
	display: none;
}
#results
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	appearance: none;
	display: block;
	border: none;
	padding: 0;
	margin: 0;
}
#win, #lose
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#win { background: #2ecc71; }
#lose { background: #e74c3c; }
#win .wrap { vertical-align: baseline; }
#counter
{
	font-size: 0;
	display: inline-block;
	white-space: nowrap;
}
#counter::after
{
	content: 'ms';
	display: inline-block;
	vertical-align: bottom;
	font-size: 3.2rem;
	height: 1em;
	line-height: 1em;
	padding-left: 0.2em;
	overflow: hidden;
}
#counter .digit
{
	display: inline-block;
	position: relative;
	overflow: hidden;
	font-size: 3.2rem;
	height: 1em;
	line-height: 1em;
	white-space: normal;
}
#counter .digit::before
{
	/* Size it */
	content: '0';
	color: rgba(0,0,0,0);
	visibility: hidden;
}
#counter .digit::after
{
	content: '0 \A 1 \A 2 \A 3 \A 4 \A 5 \A 6 \A 7 \A 8 \A 9';
	position: absolute;
	top: 0;
	left: 0;
}
.start:checked ~ #results #counter .digit:after
{
	animation-name: counter;
	animation-delay: 3s;
	animation-timing-function: steps(10);
	animation-iteration-count: infinite;
}
@for $i from 1 to $delays-count
{
	#d#{$i}:checked ~ #results #counter .digit:after
	{
		animation-delay: #{nth($delays, $i)}ms;
	}
}
#counter .digit:nth-child(1)::after { animation-duration: 1000s; }
#counter .digit:nth-child(2)::after { animation-duration: 100s; }
#counter .digit:nth-child(3)::after { animation-duration: 10s; }
#counter .digit:nth-child(4)::after { animation-duration: 1s; }
#counter .digit:nth-child(5)::after { animation-duration: .1s; }
#counter .digit:nth-child(6)::after { animation-duration: .01s; }
#game:checked ~ #results #counter .digit:after
{
	animation-play-state: paused;
}