body{
	background: #000000 url(background.jpg) no-repeat top center;
	font-family:arial;
}

a{
	color:#ffffff;
	text-decoration:none;
}

canvas{
	background:#000000;
	border:1px #cccccc solid;
	display:block;
	width:100%;
	height:auto;
}

.container{
	margin:20px auto 0 auto;
	max-width:600px;
	width:95vw;
	overflow:auto;
	position:relative;
}

#stats{
	width:590px;
	background:#333333;
	padding:5px;
	font-size:20px;
	font-weight:bold;
	color:#ffffff;
	margin-bottom:5px;
	overflow:auto;
}

#score,#high_score{
	width:25%;
	height:50px;
	padding-top:20px;
	float:left;
	margin-right:5px;
	overflow:auto;
	background:#000000;
	text-alignment:center;
}

#reset_score{
	padding:10px;
	float:right;
}

#overlay{
	display:none;
	color:#ffffff;
	font-size:25px;
	text-align:center;
	position:absolute;
	top:170px;
	left:180px;
}

#overlay a{
	display:block;
	margin-top:10px;
	padding:10px;
	background:#666666;
}

#overlay a:hover{
	background:#333333;
}

/* --- Mobile / touch controls --- */
.touch-controls{ display:none; margin:12px auto; width:100%; max-width:420px; justify-content:center; align-items:center; gap:8px; user-select:none; -webkit-user-select:none; touch-action:none; }
.touch-controls .touch-row{ display:flex; gap:8px; margin-left:8px; }
.touch-btn{ background:#444; color:#fff; border:none; padding:12px 16px; font-size:20px; border-radius:6px; box-shadow:0 2px 0 #000; }
.touch-btn:active{ transform:translateY(1px); box-shadow:none; }
@media (max-width:700px){
	.touch-controls{ display:flex; flex-direction:column; }
	.touch-controls .touch-row{ order:2; }
	.touch-controls #btn-up{ order:1; margin-bottom:6px; }
	#stats{ font-size:16px; }
	#overlay{ left:50%; transform:translateX(-50%); top:30%; }
}