@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Tiny5&display=swap');

body {
	margin: 0;
	border: 0 none;
	padding: 0;
	
	font-family: 'Press Start 2P', monospace;
	color-scheme: dark;
	background-color: black;
	color: #c2c3c7;
	font-size: 1.25rem;
	
	/* Make room for the footer. */
	padding-block-end: calc(0.75rem + 8px + 8px);
}

footer {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	padding-block: 4px;
	text-align: center;
	font-family: 'Tiny5', monospace;
	font-size: 0.75rem; /* 12px default */
	background-color: black;
}

button {
	user-select: none;
	cursor: pointer;
	border: 0 none;
	font: inherit;
	color: inherit;
	background: transparent;
	padding: 4px;
}
	button:active {
		color: white;
	}
	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

.top {
	margin-block: 1em;
	text-align: center;
	text-transform: uppercase;
}

#date {
	font-size: 0.75rem;
	margin-block-start: 0.5em;
}

#score {
	color: #29adff;
}
	#score::before {
		content: 'Score: ';
	}

.blue {
	color: #29adff;
}

#highScore {
	font-size: 0.75rem;
	margin-block-start: 0.5em;
}
	#highScore::before {
		content: 'Best: ';
	}

#attempts {
	font-size: 0.75rem;
	margin-block-start: 0.5em;
}
	#attempts::before {
		content: 'Attempts: ';
	}

#game-container {
	position: relative;
}

#time-indicator,
#game-container {
	width: 100%;
	max-width: 30rem; /* 480px default */
	margin-inline: auto;
}

#game-over {
	display: flex;
	flex-direction: column; 
	align-items: center;
	justify-content: center;
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
}

#time-indicator {
	display: block;
	margin-block: 1em;
	border-radius: 0;
}

#restart-btn {
	display: block;
	margin-inline: auto;
	text-transform: uppercase;
}

#game-grid {
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: repeat(16, 1fr);
	touch-action: none;
}
	#game-grid button {
		font-size: 1.5rem;
	}

#selection-rect {
	pointer-events: none;
	border: 1px solid white;
	box-sizing: border-box;
}

.num0 {
	color: transparent !important;
}
.num1 {
	color: #1d2b53 !important;
}
.num2 {
	color: #7e2553 !important;
}
.num3 {
	color: #008751 !important;
}
.num4 {
	color: #ab5236 !important;
}
.num5 {
	color: #5f574f !important;
}
.num6 {
	color: #c2c3c7 !important;
}
.num7 {
	color: #fff1e8 !important;
}
.num8 {
	color: #ff004d !important;
}
.num9 {
	color: #ffa300 !important;
}