/**
 * « À la baguette ! » — ce que ce jeu-là ajoute à l'habillage commun.
 *
 * Le voile, les boutons, la barre de réglages et le tableau des scores sont
 * dans socle/assets/cpf-socle.css : ils sont les mêmes pour tous les jeux.
 * Ici, seulement l'aire de jeu et les quatre pupitres.
 *
 * @package cpf-jeux
 */

/* --- La scène --------------------------------------------------------- */

.cpf-jeu__scene {
	position: relative;
	border: 1px solid color-mix(in srgb, var(--cpf-framboise-sombre) 18%, transparent);
	border-radius: 4px;
	overflow: hidden;
	background: var(--cpf-sable);
}

.cpf-jeu__toile {
	display: block;
	width: 100%;
	touch-action: manipulation;
}

/* --- Les quatre pupitres ---------------------------------------------- */

.cpf-jeu__pupitres {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.cpf-jeu__pupitre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.7rem 0.2rem;
	border: 1px solid color-mix(in srgb, var(--voie) 45%, transparent);
	border-radius: 4px;
	background: color-mix(in srgb, var(--voie) 9%, transparent);
	color: var(--voie);
	font: inherit;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color 60ms linear, transform 60ms linear;
}

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

.cpf-jeu__pupitre-nom { font-size: 0.8rem; font-weight: 600; }

.cpf-jeu__pupitre-touche {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--cpf-gris);
}

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

@media (max-width: 430px) {
	.cpf-jeu__pupitre { padding: 0.9rem 0.1rem; }
	.cpf-jeu__pupitre-nom { font-size: 0.7rem; }
	.cpf-jeu__chapo { font-size: 0.9rem; line-height: 1.4; }
	.cpf-jeu__voile { gap: 0.5rem; padding: 1rem 0.8rem; }
}

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

/* --- Le choix du morceau, à l'accueil ------------------------------------ */

.cpf-jeu__morceaux {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
	gap: 0.4rem;
	width: 100%;
	max-width: 30rem;
}

/* Hors répertoire : sur toute la largeur, et en pointillés. */
.cpf-jeu__morceau--hors {
	grid-column: 1 / -1;
	border-style: dashed;
	background: transparent;
}

/* En étroit : deux morceaux par ligne quand même, pour que tout le choix
   tienne sans défiler. Ce bloc DOIT venir après la règle de base ci-dessus :
   placé plus haut dans la feuille, il était écrasé par elle. */
@media (max-width: 430px) {
	.cpf-jeu__morceaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cpf-jeu__morceau { padding: 0.4rem 0.55rem; }
}

/* --- Le choix de la vitesse ----------------------------------------------- */

.cpf-jeu__vitesses {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.3rem 0;
	margin-top: 0.3rem;
}

.cpf-jeu__vitesses-titre {
	margin-right: 0.6rem;
	font-size: 0.8rem;
	color: var(--cpf-gris);
}

.cpf-jeu__vitesse {
	padding: 0.35rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--cpf-framboise) 40%, transparent);
	background: transparent;
	font: inherit;
	font-size: 0.82rem;
	color: var(--cpf-framboise-sombre);
	cursor: pointer;
}

.cpf-jeu__vitesse + .cpf-jeu__vitesse { border-left-width: 0; }
.cpf-jeu__vitesse:first-of-type { border-radius: 3px 0 0 3px; }
.cpf-jeu__vitesse:last-of-type { border-radius: 0 3px 3px 0; }

.cpf-jeu__vitesse[aria-pressed="true"] {
	color: var(--cpf-base);
	background: var(--cpf-framboise);
	border-color: var(--cpf-framboise);
}

.cpf-jeu__vitesses-aide {
	flex-basis: 100%;
	text-align: center;
	font-size: 0.75rem;
	color: var(--cpf-gris);
}

/* En étroit, les quatre niveaux sur une seule ligne : l'étiquette passe au-dessus,
   les boutons se resserrent. En fin de feuille, pour venir après leurs règles de
   base (voir le piège de cascade plus haut). */
@media (max-width: 430px) {
	.cpf-jeu__vitesses-titre { flex-basis: 100%; margin: 0 0 0.15rem; text-align: center; }
	.cpf-jeu__vitesse { padding: 0.35rem 0.5rem; font-size: 0.78rem; }
}