/*	css for my Snake Nokia Game	*/

* {box-sizing: border-box; margin: 0; padding: 0;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */	}

body {background: #111; color: #eee; font-family: sans-serif;
display: flex; align-items: center; justify-content: center;
height: 100vh;}

#game-container {text-align: center;}

#game-canvas {background: #000; border: 4px solid #555; display: block; margin: 0 auto;}

#scoreboard {font-size: 1rem;}
#ammo	{color: #a00;}
#level	{color: #ff0;}
.score	{color: #0f0;}
.controls td div:active	{outline: #0f0 solid 2px; background: #050; color: #000;}
.controls td div	{height: 3.5rem; width: 3.5rem; background: #555;display: flex; align-items: center; justify-content: center;
	border-radius: 25%; border-left: 3px solid #aaa; border-top: 3px solid #aaa;
	border-bottom: 3px solid #333; border-right: 3px solid #333;}


li	{margin: 0.25rem; position: relative;}
li div	{display: inline-block;height: 1rem; width: 1rem; border-radius: 50%;}
.food	{background: #0a0;} .wep	{background: red;}	.shr	{background: #0ff;}

#pause-btn {padding: 4px 10px;font-size: 1rem;cursor: pointer;}
.controls {display: none; position: fixed; bottom: 1rem; width: 80vw;}
.controls button {width: 3rem; height: 3rem; margin: 5px; font-size: 1rem; background: #333; color: #fff; display: none;}

@media (max-width: 600px) {
	#game-canvas {width: 80vw; height: 80vw;}
	.controls {display: flex; justify-content: center; flex-wrap: wrap;}
	#game-container	{position: fixed; top: 2rem;}
	.overlay	{position: fixed; width: 100%; left: 0; top: 0; z-index: 2;}
	.mob	{display: inline;}
	.pc	{display: none;}
				}
@media (min-width: 601px) {
	.mob	{display: none;}
	.pc	{display: inline;}
				}
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.hidden {
  display: none;
}

.basicBtn	{padding: 0.25rem; color: #000;}