:root {
	--clr-bg-main: rgba(0, 0, 0, .1);
	--clr-bg-main-darker: rgba(0, 0, 0, .2);

	--font-size-base: 12px;

	--size-field: 2rem;
	--size-icon: 1rem;

	--img-checked: url(img/checked.png);
	--img-dead:    url(img/dead.png);
	--img-flag:    url(img/flag.png);
	--img-mine:    url(img/mine.png);
	--img-ok:      url(img/ok.png);
	--img-win:     url(img/win.png);
	--img-wow:     url(img/wow.png);

	--img-digit-:  url(img/digits/digit-.png);
	--img-digit0:  url(img/digits/digit0.png);
	--img-digit1:  url(img/digits/digit1.png);
	--img-digit2:  url(img/digits/digit2.png);
	--img-digit3:  url(img/digits/digit3.png);
	--img-digit4:  url(img/digits/digit4.png);
	--img-digit5:  url(img/digits/digit5.png);
	--img-digit6:  url(img/digits/digit6.png);
	--img-digit7:  url(img/digits/digit7.png);
	--img-digit8:  url(img/digits/digit8.png);
	--img-digit9:  url(img/digits/digit9.png);

	--img-open1:   url(img/num_of_neighbors/open1.png);
	--img-open2:   url(img/num_of_neighbors/open2.png);
	--img-open3:   url(img/num_of_neighbors/open3.png);
	--img-open4:   url(img/num_of_neighbors/open4.png);
	--img-open5:   url(img/num_of_neighbors/open5.png);
	--img-open6:   url(img/num_of_neighbors/open6.png);
	--img-open7:   url(img/num_of_neighbors/open7.png);
	--img-open8:   url(img/num_of_neighbors/open8.png);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.hidden {
	display: none;
}

html {
	font-size: var(--font-size-base);
}

body {
	background-color: var(--clr-bg-main);
	display: grid;
	height: 100vh;
	width: 100vw;
	place-content: center;
}

.game-panel {
	display: block;
}

.game-header {
	align-items: center;
	background-color: var(--clr-bg-main-darker);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: .5rem;

	button {
		background-color: transparent;
		border: none;
	}

	.counter,
	.status,
	.time {
		display: flex;
		flex-direction: row;
		gap: 0;
	}

	.counter {}
	.status {}
	.time {}
}

#grid {
	tr {
		/* background-color: var(--clr-bg-main); */
	}

	td {
		border: 1px solid var(--clr-bg-main-darker)
	}

	button {
	}

	border-collapse: collapse;
}

/* all field buttons, start */
button[class^="field_button"] {
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	height: var(--size-field);
	transition: all .1s ease-in-out;
	width: var(--size-field);

	&:focus,
	&:active {
		outline: none !important;
	}
}
/* all field buttons, end */


/* default field buttons, start */
.field_button {
	background-color: var(--clr-bg-main);
	border: none;
	border-radius: 0;
	
	img {}
	
	&:hover {
		background-color: var(--clr-bg-main-darker);
	}
}
/* default field buttons, end */

/* default field buttons, start */
.field_button_flagged {
	background-color: var(--clr-bg-main-darker);
	background-image: var(--img-checked);
}
/* default field buttons, end */


/* image field buttons, start */
.field_button_img {
	&:hover {
		background-color: transparent;
	}
}
/* image field buttons, end */


/* empty field buttons, start */
.field_button_empty {
	opacity: 0;
}
/* empty field buttons, end */


/* mine field buttons, start */
.field_button_mine {
	background-color: var(--clr-bg-main-darker);
	background-image: var(--img-mine);
	
	&.boom {
		background-color: #f0a;
	}
}
/* mine field buttons, end */