/* @import url('https://fonts.googleapis.com/css2?family=Comme&family=Chivo+Mono&family=Playwrite+CU&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono&family=Comme&family=Playwrite+CU&display=swap');


:root {
	--tool-color-main:rgb(255, 255, 255);
	--tool-background-color-main: rgb(16, 16, 16);
	--tool-background-image-main: url("../images/noise.svg");
	--tool-font-family-main: "Comme", sans-serif;

	--tool-background-color-nav-button:#e9edf5;
	--tool-background-color-hover-nav-button:#f3f6fb;
	--tool-border-color-nav-button: #b8c0ce;

	--tool-font-family-digit-button: "Chivo Mono", monospace;

	--tool-font-family-label: "Playwrite CU", cursive;
}

* {
	margin: 0;
	padding: 0;
	border: none;
	font-weight: 400;
	font-style: normal;
}

body {
	background-image: var(--tool-background-image-main);
	background-color: var(--tool-background-color-main);
	background-blend-mode: lighten;
	color: var(--tool-color-main);
	font-family: var(--tool-font-family-main) !important;
}

.game-overlay {
	padding-bottom: 1em;
	padding-top: 1em;
}

.game-overlay > header {
	margin-bottom: 1em;
}

.game-overlay > header > h1.name {
	font-size: 4em !important;
	font-weight: 700 !important;
}

.game-overlay > header > h2.version {
	font-size: 2em !important;
	font-weight: 700 !important;
	margin-top: -0.25em;
	margin-bottom: 0.5em;
}

.game-overlay .loading-message {
	font-size: 2em !important;
	text-transform: uppercase;
	margin-top: 1em;
}

.game-overlay button {
	padding: 0.125em 0.25em;
	border-radius: 0.25em;
	font-size: 2.5em !important;
	margin-top: 1em;
	cursor: pointer;
}

.game-overlay button + button {
	margin-left: 0.5em;
}

.game-overlay .number {
	font-size: 8em !important;
}

.game-overlay select,
.game-overlay label {
	font-size: 2.5em !important;
}

body[data-digits-count="32"] .game-overlay button.digit {
	font-size: 1.0625em !important;
}

body[data-digits-count="24"] .game-overlay button.digit {
	font-size: 1.4375em !important;
}

body[data-digits-count="16"] .game-overlay button.digit {
	font-size: 2.1875em !important;
}

.game-overlay button.digit {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1.375em;
	line-height: 1.375em;
	text-align: center;
	background: #111;
	color: #eee;
	border-radius: 0.375em;
	padding: 0;
	font-family: var(--tool-font-family-digit-button) !important;
	box-shadow: 
	inset 0 0.125em 0.25em rgba(255, 255, 255, 0.075),
	inset 0 -0.125em 0.25em rgba(0, 0, 0, 0.5),
	0 0.125em 0.375em rgba(0,0,0,0.375);
}

.game-overlay button.digit::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
	linear-gradient(to bottom,
		rgba(255,255,255,0.12) 0%,
		rgba(255,255,255,0.02) 40%,
		rgba(0,0,0,0.4) 60%,
		rgba(0,0,0,0.7) 100%);
	pointer-events: none;
}

.game-overlay button.digit:active {
	transform: translateY(0.015625em);
}

.game-overlay nav button {
	background: var(--tool-background-color-nav-button);
	color: var(--tool-background-color-main);
	border: 0.0625em solid var(--tool-border-color-nav-button);
	transition: background-color 0.25s, box-shadow 0.25s, transform 0.125s, color 0.25s;
}

.game-overlay nav button:hover {
	background-color: var(--tool-background-color-hover-nav-button);
	box-shadow: 0 0 0.1875em rgba(255,255,255,0.125);
	color: #000;
}

/*
.game-overlay nav button:active {
	transform: scale(0.96875);
}
*/

.game-overlay select {
	appearance: none;
	padding: 0.25em 1em 0.25em 0.375em;
	border-radius: 0.125em;
	cursor: pointer;
	background-image: url("../images/select_arrow.svg");
	background-repeat: no-repeat;
	background-position: right 0.5em center;
	background-size: 0.375em;
	transition: box-shadow .25s, border-color .25s;
	display: inline-block;
	margin-top: 1em;
}

.game-overlay label {
	display: block;
	font-family: var(--tool-font-family-label) !important;
}

.game-overlay .loading-placeholder {
	font-family: var(--tool-font-family-label) !important;
	font-size: 1px !important;
	color: rgba(0, 0, 0, 0);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}