/* Place main game area in the center of the screen */
html {
	margin:  0;
	border:  0;
	padding: 0;
	
	width:  100%;
	height: 100%;
	text-align: center;
}
body {
	margin:  1em;
	border:  0;
	padding: 0;
	
	width:  37em;
	height: auto;
	text-align: start;
	display: inline-block;
}

/* Hide views that don't represent the current view */
html #header-start,
html #view-start,
html #header-play,
html #view-play,
html #header-score,
html #view-score,
html #header-over,
html #view-over {
	display: none;
}
html.mode-start #header-start,
html.mode-start #view-start,
html.mode-play #header-play,
html.mode-play #view-play,
html.mode-score #header-score,
html.mode-score #view-score,
html.mode-over #header-over,
html.mode-over #view-over {
	display: block;
}

/* Move current score next to title */
header {
	position: relative;
	
	margin:  0;
	border:  0;
	padding: 0 1em;
	
	height: 5em;
}
header > h1 {
	margin:  0;
	border:  0;
	padding: 0.825em 1.5em 0.825em 0;
	
	font-size: 1.75em;
	
	float: left;
}
header > article {
	text-align: right;
}
header > article > * {
	display: inline;
}
header > article > p {
	position: absolute;
	
	width:  1.70em;
	height: 1.34em;
	top:   -1.00em;
	right:  0;
	
	padding-top: 0.34em;
	font-size:   2em;
}
body > article {
	clear: both;
}

/* Use entire vertical screen estate on smaller screens */
@media all and (max-width: 39em) {
	body {
		width: calc(100% - 2em);
	}
	
	header > h1 {
		padding-right: 0;
	}
}