.dpad-frame {
	position: relative;
	width: 48px;
	height: 48px;
	background: white;
	/* Le cadre */
	border: 3px solid #333; 
	border-radius: 6px;
	/* Garantit que le tout fait exactement 44px bordure incluse */
	box-sizing: border-box; 
}

.dpad-frame button {
	position: absolute;
	width: 14px;
	height: 14px;
	padding: 0;
	margin: 0;
	border: none;
	background: var(--color-primary);
	color: white;
	font-size: 8px; /* Petites flèches pour le look */
	line-height: 14px;
	cursor: pointer;
	border-radius: 2px;
}

.dpad-frame:hover {
	filter: drop-shadow(0 0 5px var(--color-mouse));
	transform: scale(1.05);
}

/* 2. État au survol (La souris passe dessus) */
.dpad-frame button:hover {
	background: black;
	cursor: pointer;
}

/* Positionnement interne (calculé pour un centre vide) */
.b-up    { top: 1px; left: 14px; }
.b-down  { bottom: 1px; left: 14px; }
.b-left  { left: 1px; top: 14px; }
.b-right { right: 1px; top: 14px; }

/* Effet au clic */
.dpad-frame button:active {
	background:var(--color-accent);
	transform: scale(0.9);
}

.dpad-frame:has(button:active) {
	border-color: var(--color-background-light);
}