/**
 * LE SOCLE — l'habillage commun à tous les jeux.
 *
 * Les couleurs sont celles du thème du site (theme.json). Les variables
 * --wp--preset--* n'existent pas dans les pages de démonstration ouvertes
 * seules : chacune a donc une valeur de repli, écrite en dur.
 *
 * Ce fichier ne contient QUE ce qui est commun : le voile d'accueil et de fin,
 * les boutons, la barre de réglages, le tableau des scores. Tout ce qui est
 * propre à un jeu — son aire de jeu, ses commandes — vit dans le jeu.
 *
 * @package cpf-jeux
 */

.cpf-jeu {
	--cpf-base: var(--wp--preset--color--base, #FAF7F4);
	--cpf-encre: var(--wp--preset--color--contrast, #2B2B2B);
	--cpf-framboise: var(--wp--preset--color--accent-1, #A8394B);
	--cpf-framboise-sombre: var(--wp--preset--color--accent-3, #7A2836);
	--cpf-sable: var(--wp--preset--color--accent-5, #EDE4DA);
	--cpf-gris: var(--wp--preset--color--accent-4, #6B6B6B);
	--cpf-serif: var(--wp--preset--font-family--vollkorn, Vollkorn, Georgia, "Times New Roman", serif);
	--cpf-sans: var(--wp--preset--font-family--manrope, Manrope, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

	max-width: 46rem;
	margin-inline: auto;
	font-family: var(--cpf-sans);
	color: var(--cpf-encre);
}

/* --- Le voile : accueil, pause, fin de partie -------------------------- */

.cpf-jeu__voile {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-content: safe center;   /* s'il déborde, on garde le haut visible */
	overflow-y: auto;
	gap: 0.7rem;
	padding: 1.4rem;
	text-align: center;
	background: color-mix(in srgb, var(--cpf-base) 93%, transparent);
}

.cpf-jeu__voile.est-cache { display: none; }
.cpf-jeu__voile.est-discret { background: color-mix(in srgb, var(--cpf-base) 60%, transparent); }

.cpf-jeu__titre {
	font-family: var(--cpf-serif);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
	color: var(--cpf-framboise-sombre);
}

.cpf-jeu__chapo {
	margin: 0;
	max-width: 30rem;
	font-size: 1rem;
	line-height: 1.5;
}

.cpf-jeu__aide {
	margin: 0;
	max-width: 32rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--cpf-gris);
}

.cpf-jeu__retour {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.85rem;
	color: var(--cpf-framboise-sombre);
}

.cpf-jeu__compte {
	margin: 0;
	font-family: var(--cpf-serif);
	font-size: clamp(2.5rem, 2rem + 4vw, 4.5rem);
	font-weight: 700;
	color: var(--cpf-framboise);
}

.cpf-jeu__score {
	margin: 0;
	font-family: var(--cpf-serif);
	font-size: clamp(2.2rem, 1.8rem + 3vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--cpf-framboise);
}

/* --- Boutons ----------------------------------------------------------- */

.cpf-jeu__bouton {
	appearance: none;
	border: 0;
	border-radius: 3px;
	padding: 0.75rem 1.6rem;
	font: inherit;
	font-weight: 600;
	color: var(--cpf-base);
	background: var(--cpf-framboise);
	cursor: pointer;
}

.cpf-jeu__bouton:hover { background: var(--cpf-framboise-sombre); }
.cpf-jeu__bouton:disabled { background: var(--cpf-gris); cursor: default; }

.cpf-jeu__bouton--second {
	color: var(--cpf-framboise);
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
}

.cpf-jeu__bouton--second:hover {
	color: var(--cpf-base);
	background: var(--cpf-framboise);
}

/* Une rangée de choix — deux modes, ou « rejouer / changer de mode ». */
.cpf-jeu__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	align-items: center;
}

.cpf-jeu__lien {
	appearance: none;
	border: 0;
	background: none;
	padding: 0.2rem;
	font: inherit;
	font-size: 0.85rem;
	color: var(--cpf-framboise);
	text-decoration: underline;
	cursor: pointer;
}

.cpf-jeu :focus-visible {
	outline: 2px solid var(--cpf-encre);
	outline-offset: 2px;
}

/* --- La barre de réglages ---------------------------------------------- */

.cpf-jeu__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-top: 0.6rem;
	font-size: 0.8rem;
	color: var(--cpf-gris);
}

.cpf-jeu__reglage {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.cpf-jeu__reglage input {
	width: 5rem;
	padding: 0.25rem 0.35rem;
	border: 1px solid color-mix(in srgb, var(--cpf-encre) 25%, transparent);
	border-radius: 3px;
	font: inherit;
}

/* --- L'envoi du score --------------------------------------------------- */

.cpf-jeu__envoi-bloc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.cpf-jeu__envoi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.cpf-jeu__pseudo {
	padding: 0.7rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--cpf-encre) 30%, transparent);
	border-radius: 3px;
	font: inherit;
	min-width: 12rem;
}

/* --- Le tableau des scores ---------------------------------------------- */

.cpf-jeu__tableau { margin-top: 1.6rem; }

.cpf-jeu__tableau-titre {
	font-family: var(--cpf-serif);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
}

.cpf-jeu__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rang;
}

.cpf-jeu__liste li {
	counter-increment: rang;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--cpf-framboise) 15%, transparent);
}

.cpf-jeu__liste li::before {
	content: counter(rang) ".";
	min-width: 1.6rem;
	color: var(--cpf-gris);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.cpf-jeu__nom { flex: 1; }

.cpf-jeu__points {
	font-family: var(--cpf-serif);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--cpf-framboise-sombre);
}

/* --- Les boutons de choix : un morceau, une grille ------------------------ */

/* Montés du premier jeu au socle quand le second — le memory — en a eu besoin
   à son tour. La disposition (grille, colonnes) reste propre à chaque jeu. */
.cpf-jeu__morceau {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.05rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--cpf-framboise) 35%, transparent);
	border-radius: 4px;
	background: color-mix(in srgb, var(--cpf-framboise) 6%, transparent);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cpf-jeu__morceau:hover,
.cpf-jeu__morceau:focus-visible {
	background: color-mix(in srgb, var(--cpf-framboise) 15%, transparent);
}

.cpf-jeu__morceau-titre {
	font-family: var(--cpf-serif);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cpf-framboise-sombre);
}

.cpf-jeu__morceau-detail {
	font-size: 0.74rem;
	color: var(--cpf-gris);
}