/* CSS */
/* (Version) By sync - Boulette (V5.5.4)
	Jeu du Memory
*/
body {
	background-color: #1f2937;
	color: #f8fafc;
	font-family: 'Segoe UI', sans-serif;
	display: flex; flex-direction: column; align-items: center; min-height: 100vh;
}
html, body {
	/* Empêche la sélection de texte */
	 -webkit-user-select: text;
	user-select: text;
	user-source: hidden; -ms-user-select: text;
}

h1, h2 { text-align: center; color: #f8fafc; margin: 10px 0px;}
#controls { text-align: center; margin: 10px;}
button {
	margin: 5px; padding: 6px 12px; font-size: 14px; border-radius: 6px; border: none;
	background-color: #374151; color: #f8fafc; transition:0.2s;
}
button:hover { background-color: #4b5563;}

.memory-game {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
	gap: 12px;
	width: 90%;
	max-width: 700px;
	margin: 20px auto;
}

.card { width: 100%; padding-top: 100%; position: relative; perspective: 1000px; cursor: pointer;}
.card-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 12px;}
.card.flipped .card-inner { transform: rotateY(180deg);}

.card-front, .card-back {
	position: absolute; width: 100%; height: 100%; border-radius: 12px; backface-visibility: hidden;
	display: flex; justify-content: center; align-items: center; font-size: 2rem;
}
.card-front { background-color: #111827; color:#f8fafc; border:2px solid #374151;}
.card-back { background-color:#374151; color:#f8fafc; transform: rotateY(180deg);}

.card.matched { box-shadow: 0 0 20px #facc15; animation: glow 0.8s ease-in-out;}
@keyframes glow { 0%,100%{box-shadow:0 0 10px #facc15;}50%{box-shadow:0 0 25px #f59e0b;}}

footer {
	max-width: 350px;
	width: 50%;
	margin: 0 auto; /* centre horizontalement dans la page */
	display: flex;
	justify-content: center; /* centre le contenu à l'horizontale */
	align-items: center; /* centre verticalement s’il y a de la hauteur */
	font-size: 12px;
	color: var(--muted);
	text-align: center; /* s’assure que le texte à l’intérieur est centré */
}

@media screen and (max-width: 500px) {.memory-game { gap:8px;}}
/* === ÉCRANS DE FIN === */
#endMessage {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	color: #ff0000;
	font-weight: bold;
	text-shadow: 2px 2px 5px #000;
	opacity: 0;
	animation: none;
	z-index: 9999;
}

@keyframes growShake { /* tremblement */
	0% { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 0;}
	50% { transform: translate(-50%, -50%) scale(1.2) rotate(2.5deg); opacity: 1;}
	70% { transform: translate(-50%, -50%) scale(1.3) rotate(-2deg);}
	100% { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); opacity: 1;}
}

/* Feux d'artifice */
.firework {
	position: fixed;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: white;
	animation: explode 1s ease-out 0s 2, fadeOut 1s ease-out forwards; /* Répétition et effet de disparition */
	pointer-events: none;
}

/* Animation explosion */
@keyframes explode {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(2);
		opacity: 0.7;
	}
	100% {
		transform: scale(1.5); /* Ne réduit pas tout à zéro pour un effet plus doux */
		opacity: 1;
	}
}

/* Fade-out après explosion */
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* FIN CSS */