* {
	-webkit-tap-highlight-color: transparent;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	font-size: 16px;
	--shadow: rgba(128, 128, 128, 0.7);
}
.isArea{
	display: grid;
	touch-action: manipulation;
	grid-template-columns: 0.65fr 0.35fr;
	grid-template-rows: 1fr;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(48, 24, 24, 0.12);
}
.isArea-dark{
	background-color: black;
}
section{
	position: relative;
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;

	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
@media only screen and (max-width: 599.98px){
	.isArea{
		grid-template-columns: 1fr;
		grid-template-rows: 0.7fr 0.3fr;
	}
	section{
		flex-direction: row;
	}
}

#game-area {
	width: 350px;
	height: 400px;
	position: relative;
	perspective: 1000px;
}
@media only screen and (min-width: 1024px){
	#game-area{
		transform: scaleY(1.2) scaleX(1.2);
	}
}

/*****************/
/* zone stylings */
.d-normal,
.d-normal-trigger{
	color: red;
	font-size: 0.7rem;
	font-weight: 900;
	font-family: sans-serif;
	display: flex;
	align-items: center;
	text-shadow: 1px 1px 1px black;
}
/* .d-normal-trigger{
	border: 2px solid red;
} */
.isGrid[data-goal="true"] {
	background: radial-gradient(
		circle,
		orange,
		yellow,
		yellowgreen,
		greenyellow,
		green,
		black
	);
	box-shadow: 0 0 0 5px black;
	z-index: 0;
}
.hide-goal{
	visibility: hidden;
}