/**
 * « Tapez dans les mains ! » — ce que ce jeu-là ajoute à l'habillage commun.
 *
 * La scène, le voile, les boutons de choix, le choix du niveau, la barre de
 * réglages et le tableau des scores sont dans socle/assets/cpf-socle.css. Il ne
 * reste ici que ce qui est à ce jeu : la touche unique, et une scène qui
 * grandit pour son écran d'accueil.
 *
 * @package cpf-jeux
 */

/* --- La scène, qui grandit pour son accueil ------------------------------ */

/* Le voile du socle est posé en absolu par-dessus la toile : la scène garde
   alors la hauteur du dessin, et un accueil plus haut qu'elle se retrouve
   derrière une barre de défilement interne — le choix du niveau passait sous
   le bord, et sur téléphone il fallait deviner qu'il existait.

   Ici, toile et voile occupent LA MÊME case d'une grille : la scène prend la
   hauteur du plus grand des deux, donc celle de l'accueil tant qu'il est
   affiché, et celle du dessin dès que le voile disparaît (il est alors en
   display:none, et ne compte plus). Ça ne monte pas au socle : c'est le seul
   jeu dont l'accueil déborde, et le jour où un deuxième déborde, ce sera le
   moment. */
.cpf-mains .cpf-jeu__scene {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cpf-mains .cpf-jeu__toile {
	grid-area: 1 / 1;
	align-self: center;
}

.cpf-mains .cpf-jeu__voile {
	grid-area: 1 / 1;
	position: relative;
	overflow-y: visible;
}

/* --- La touche unique --------------------------------------------------- */

.cpf-mains__pad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	margin-top: 0.5rem;
	padding: 1rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--cpf-framboise) 45%, transparent);
	border-radius: 4px;
	background: color-mix(in srgb, var(--cpf-framboise) 9%, transparent);
	color: var(--cpf-framboise-sombre);
	font: inherit;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color 60ms linear, transform 60ms linear;
}

.cpf-mains__pad.est-enfonce {
	background: color-mix(in srgb, var(--cpf-framboise) 28%, transparent);
	transform: translateY(1px);
}

.cpf-mains__pad-mains { font-size: 1.5rem; line-height: 1; }

.cpf-mains__pad-texte {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Écrans étroits ---------------------------------------------------- */

/* Après les règles de base : une feuille se lit de haut en bas, et un bloc
   étroit placé avant se fait écraser par ce qu'il affine. */
@media (max-width: 430px) {
	.cpf-mains__pad { padding: 1.3rem 0.5rem; }
	.cpf-mains__pad-texte { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cpf-mains__pad { transition: none; }
}