.game {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;

	position: relative;
	margin: auto;
	color: #333;
	/* font-size: 20px; */
	font-size: 0;
	opacity: 0;
	transition: opacity .3s;
}

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





/*  panel  */
.panel {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	height: 2.5em;
	width: 100%;

	line-height: 2.5em;
	background: #373750;
	user-select: none;
	cursor: default;
}
.panel > * {box-shadow:inset 0 0 0.15em 0 yellow}


.icon {
	width: 2.5em;
	height: 100%;
	cursor: pointer;
	line-height: 2.5em;
	font-weight: 600;
	color: rgba(238, 238, 238, 0.9);
	text-align: center;
}
.icon:hover {color: #fff}
.icon::before {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	transition: color .2s
}
.icon_info::before {
	content:'\24D8';
	font-size: 1.5em;
}
.icon_option::before {
	content: '\2699';
	font-size: 2em;
}
.icon.ani::before {color: #fff}

.score {
	flex-grow: 1;
	position: relative;
	font-size: 1.5em;
	margin: 0 -0.03em;

	letter-spacing: 0.05em;
	font-family: monospace;
	text-align: center;
	color: #d5dd4d;
}
.score_bg,
.score_info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	white-space: pre;
}
.score_bg {opacity:.9}
.score_info {color:#fa915e}





/* game zone */
.game_box {
	position: relative;
	margin: auto;
	box-shadow: inset 0 0 .3em 0 yellow;
	background: #26322b;
}




.info_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;

	position: absolute;
	left: 4em;
	top: 0;
	opacity: 0;

	width: 5em;
	height: 100%;
	background: #38433C;
	box-shadow: inset 0 0 0.3em 0 yellow;
	letter-spacing: -.025em;
	transition: left .3s, opacity .3s;
	animation: hide_panel .3s linear 1 forwards;
}
.info_box.ani {
	left: 0;
	opacity: 1;
	transition: left .3s, opacity .3s;
	animation: show_panel .3s linear 1 forwards;
}
.info_box > div {
	font-size: .8em;
	width: 4em;
	height: 2.5em;
	padding: .05em;

	line-height: 1.2em;
	border-radius: .2em;
	text-align: center;
	letter-spacing: 0;
	background: #eee;
}

.info_box__bsp {
	display: block;
	font-size: 2em;
	width: 100%;
	text-align: center;
	transform: translateY(-0.5em);
}

.btn_start_i {
	cursor: pointer;
	letter-spacing: -.05em;
}




.option_box {
	position: absolute;
	top: 0;
	right: 4em;

	width: 5em;
	height: 100%;
	opacity: 0;
	background: #38433C;
	box-shadow: inset 0 0 0.3em 0 yellow;
	text-align: center;
	line-height: 1.2em;
	letter-spacing: -.025em;
	transition: right .3s, opacity .3s;
	animation: hide_panel .3s linear 1 forwards;
}
.option_box.ani {
	opacity: 1;
	right: 0;
	transition: right .3s, opacity .3s;
	animation: show_panel .3s linear 1 forwards;
}

.option_box__rows {
	font-size: .8em;
	position: absolute;
	bottom: 6em;
	left: 1.25em;

	width: 4em;
	height: 2.5em;
	margin: auto;
	padding: .05em;

	line-height: 1.2em;
	border-radius: .2em;
	text-align: center;
	letter-spacing: 0;
	background: #eee;
}
@keyframes show_panel {
	0%   {z-index:1}
	1%   {z-index:9}
	100% {z-index:9}
}
@keyframes hide_panel {
	0%   {z-index:9}
	99%  {z-index:9}
	100% {z-index:1}
}


/* оформление input (.filling) */
.filling{
	font-size: inherit;
	position: absolute;
	bottom: 10.65em;
	left: -1.25em;

	width: 7.5em;
	height: 1.5em;
	transform: rotate(-90deg);
	border-radius: 0.75em;
	cursor: pointer;
}
/* скрывает слайдер */
.filling:focus {outline:none}
.filling::-webkit-slider-thumb {-webkit-appearance:none}
.filling{-webkit-appearance:none}
.filling::-ms-track {
	background:transparent;
	border-color:transparent;
	color:transparent;
}


/* Оформление ползунка */
/* для WebKit */
.filling::-webkit-slider-thumb {border-radius:50%; height:1.5em; width:1.5em; background:#4646b9; margin:0}
/* для Firefox */
.filling::-moz-range-thumb {border-radius:50%; height:1.5em; width:1.5em; background:#4646b9; margin:0}
/* для IE */
.filling::-ms-thumb {border-radius:50%; height:1.5em; width:1.5em; background:#4646b9; margin:0}

/* Оформление полосы диапазона */
.filling::-webkit-slider-runnable-track {background:#eee; border-radius:0.75em; height:1.5em}
.filling:focus::-webkit-slider-runnable-track {background:#eee; border-radius:0.75em; height:1.5em}
.filling::-moz-range-track {background:#eee; border-radius:0.75em; height:1.5em}
.filling::-ms-track {
	background: transparent;
	border-color: transparent;
	border-width: 1.5em 0;
	color: transparent;
	border-radius: 0.75em;
}
.filling::-ms-fill-lower {background:#eee}
.filling::-ms-fill-upper {background:#eee}
.filling:focus::-ms-fill-lower {background:#eee}
.filling:focus::-ms-fill-upper {background:#eee}







/*  game filds zone  */
.game_box i {
	position: relative;
	display: block;
	line-height: 0;
	width: 1.4em; /* 28px; */
	height: 1.4em;
	margin: .05em;
	border-radius: 50%;
}

.fild_box {
	position: relative;  /* так height != 0 */
	z-index: 5;
	display: flex;
	flex-wrap: nowrap;
	padding: 0.15em; /* 3px */
}
.fild_box i {background: rgba(212, 214, 207, 0.1)}


.biom_box {
	position: absolute;
	top: 0.15em;
	left: 0.15em;

	display: flex;
	flex-wrap: nowrap;
	pointer-events: none;
}

.col {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	width: 1.5em; /* 30px; */
}



/* анимирование очков */
.biom_box .del {animation: delete .5s linear 1 forwards}
@keyframes delete {
	0%   {width:1.4em; height:1.4em; margin:.05em}
	90%  {width:0em; height:0em; margin:.75em}
	100% {width:0; height:0; margin:0}
}

.del::after{
	position: absolute;
	top: 0;
	z-index: 2;
	font-size: 1.8em;
	content: '\1F31F';

	width: auto;
	height: 1em;
	animation: stars 0.4s linear 1 forwards;
	color: yellow;
	font-style: normal;
	text-align: center;
}
@keyframes stars {
	0%   {opacity:1; top:0em}
	70%  {opacity:.9; top:-1em}
	100% {opacity:0; top:-1.2em}
}

.del::before {
	position: absolute;
	font-size: .7em;
	left: .7em;
	top: 0em;
	z-index: 5;

	width: auto;
	height: 1em;
	animation: score 0.4s linear 1 forwards;
	background: transparent;
	color: #00f;
	font-style: normal;
	text-align: center;
}
@keyframes score {
	0%   {opacity:1; top:0em}
	70%  {opacity:.9; top:-2.5em}
	100% {opacity:0; top:-3.1em}
}


/* цвета шаров */
.el1 {background: #3c36ff}
.el2 {background: #e418e8}
.el3 {background: #f12525}
.el4 {background: #10b620}
.el5 {background: #5ae4e0}
.el6 {background: #f3ff12}
/* отображаемые очки */
.del.el1::before {content: '90'}
.del.el2::before {content: '75'}
.del.el3::before {content: '60'}
.del.el4::before {content: '60'}
.del.el5::before {content: '75'}
.del.el6::before {content: '90'}






.game_menu {
	display: flex;
	align-items:center;
	justify-content:center;

	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;

	width: 100%;
	height: 100%;
	background: rgba(65, 105, 99, 0.68);
	opacity: 1;
	transition: opacity .3s;

}
.game_menu.ani {
	font-size: 0;
	transform: scale(0);
	background: transparent;
	opacity: 0;
	transition: opacity .3s;
}

.result_message {
	padding: 1.5em;
	text-align: center;
	color: #d5dd4d;
	background: #373750;
	box-shadow: inset 0 0 .3em 0 yellow;
}
.message {
	line-height: 1.5em;
}
.result {
	font-size: 1.5em;
	padding: .25em 0;
	color: #fa915e;
	font-family: monospace;
}
.ask {
	line-height: 2em;
	display: none;
}
.btn_start,
.btn_ask {
	padding: .5em .75em;
	margin: auto;
	max-width: 10.5em;

	letter-spacing: .025em;
	border-radius: .3em;
	text-transform: uppercase;
	background: #eee;
	cursor: pointer;
	color: #333;
	font-weight: 500;
}
.btn_start:hover,
.btn_ask:hover {
	background-color: #fff;
	transition: background-color .2s;
}

.btn_ask {
	min-width: 4em;
	margin: 1em;
	padding: .5em .75em;
}





/* Оформление для темной темы */
:root {color-scheme: light dark;}
	@media (prefers-color-scheme: dark) {
		/* <!-- стили --> */
}