*{
	--pbtn_width: 60px;
	--pbtn_height: 40px;
}

@media only screen and (max-width: 599px)
{
	.controls-section{
		gap: 0px;
		/* as opposed to 20px */
	}
}

#dpad{
	border: 1px solid silver;
	box-shadow: 4px 2px 4px var(--shadow);
	width: 152px;
	height: 152px;
	display: grid;
	border-radius: 50%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.d-button,
.p-button {
	touch-action: manipulation;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;

	color: silver;
	text-shadow: 1px 1px 1px gray;
	transition: 0.4s box-shadow ease;
}
/* /////////////// */
.d-button{
	width: 49px;
	height: 50px;
	border: 2px solid silver;
}
.d-up{
	border-top-left-radius: 20%;
	border-top-right-radius: 20%;
	border-bottom: 0px;
	box-shadow: 4px 0px 4px var(--shadow);
}
.d-down{
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border-top: 0px;
	box-shadow: 4px 2px 4px var(--shadow);
}
.d-left{
	border-top-left-radius: 20%;
	border-bottom-left-radius: 20%;
	border-right: 0px;
	box-shadow: 0px 4px 3px var(--shadow);

}
.d-right{
	border-top-right-radius: 20%;
	border-bottom-right-radius: 20%;
	border-left: 0px;
	box-shadow: 3px 2px 4px var(--shadow);
}
.d-center{
	border-radius: 30%;
	transform: scale(1.15);
	border: 1px solid rgba(128, 128, 128, 0.4);
	pointer-events: none;
	background-color: #a2a2a266;
}
.d-button.invisible {
	visibility: hidden;
	pointer-events: none;
}
.d-button:hover:active,
.p-button:hover:active,
.d-button:active,
.p-button:active{
	box-shadow: 0px 0px 0px gray;
	transform: scale(0.97);
}

/* //////////////// */
#push-buttons{
	width: 180px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
}
@media only screen 
and (min-width: 600px)
and (min-height: 600px)
{
	#push-buttons{
		top: 20px;
	}	
}
.p-button{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	position: relative;
	border: 2px solid silver;
	box-shadow: 2px 2px 4px gray;
}
#PA{
	top: -15%;
}
#PB{
	top: 15%;
}
#PC,
#PD{
	position: absolute;
	width: var(--pbtn_width);
	height: var(--pbtn_height);
	border-radius: 15px;
	border-width: 0px;
	pointer-events: none;
	opacity: 0;
}
#PC{
	/* bottom: -20px;
	left: 30px; */

	top: -20px;
	right: 30px;
		background: linear-gradient(
		rgba(102, 51, 153, 0.45),
		rgba(135, 207, 235, 0.67)
	);
}
#PD{
	top: -20px;
	right: 30px;
		background: linear-gradient(
		rgba(71, 153, 51, 0.45),
		rgba(235, 135, 135, 0.67)
	);
}
.p-P,
.p-Q,
.p-R {
	height: 35px;
	border-radius: 10px;
	cursor: pointer;
	position: absolute;
}

/* mode */
.p-P{
	position: relative;
	left: calc(-0.05 * var(--pbtn_width));
	top: -20%;
	padding: 20px;
	visibility: hidden;
}
@media only screen and (min-width: 600px){
	.p-P{
		top: 10px;
	}
}

/* QUIT */
.p-Q{
	bottom: 10px;
	right: 5%;
		background: linear-gradient(
		rgba(128, 93, 30),
		rgb(103, 13, 94)
	);
}
/* Reset */
.p-R{
	right: 5%;
	bottom: calc(var(--pbtn_height) + 10px);
		background: linear-gradient(
		rgba(128, 93, 30),
		rgba(13, 78, 103)
	);
	color: skyblue;
}

/* combi */
.p-P,
.p-Q,
.p-R{
	text-transform: uppercase;
	font-family: Satoshi-Medium;
	text-shadow: 1px 1px 1px black;
}