:root {
	--ketchup-red: #E31837;
	--ketchup-dark: #9E0000;
	--ketchup-light: #FF6B6B;
	--bottle-white: #F5F5F5;
	--success-green: #FFFFFF;
	--error-red: #FFFFFF;
	--warning-yellow: #ffc107;
}

/* Animations */
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
	20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Styles de base */
    body {
        background: #FFF5F5;
        font-family: 'Londrina Solid', cursive;
        background-image: 
            radial-gradient(var(--ketchup-light) 2px, transparent 2px),
            radial-gradient(var(--ketchup-light) 2px, transparent 2px);
        background-size: 50px 50px;
        background-position: 0 0, 25px 25px;
        background-attachment: fixed;
    }

.game-container {
	background: white;
	border-radius: 25px;
	box-shadow: 0 15px 50px rgba(227, 24, 55, 0.2);
	padding: 1rem;
	border: 5px solid var(--ketchup-red);
	margin-top:1rem;
}

.game-title {
	color: var(--ketchup-red);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 3.5rem;
	text-shadow: 
		3px 3px 0px var(--ketchup-dark),
		5px 5px 0px rgba(0, 0, 0, 0.2);
	animation: float 4s ease-in-out infinite;
}

/* Stats et progression */
.game-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
}

.stat-container {
    background: white;
    padding: 0.5rem 1rem; /* Réduit légèrement le padding pour mobile */
    border-radius: 20px;
    border: 3px solid var(--ketchup-red);
    box-shadow: 0 8px 0 var(--ketchup-dark);
    transition: all 0.3s ease;
    min-width: 120px; /* Réduit la largeur minimale */
    flex: 1; /* Permet aux conteneurs de se partager l'espace disponible */
    max-width: 150px; /* Empêche les conteneurs de devenir trop larges */
    animation: float 4s ease-in-out infinite;
}

.stat-label {
    color: var(--ketchup-dark);
    font-size: 1.1rem; /* Légèrement plus petit sur mobile */
    margin-bottom: 0.2rem;
}

.stat-value {
    color: var(--ketchup-red);
    font-size: 1.6rem; /* Légèrement plus petit sur mobile */
    font-weight: 900;
}

/* Zone de jeu principale */
.consonants-display {
	background: var(--ketchup-red);
	color: white;
	padding: 1rem;
	border-radius: 25px;
	box-shadow: 0 8px 0 var(--ketchup-dark);
	margin: 2rem 0;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}

.consonants-title {
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 0.5rem;
}

.consonants-letters {
	font-size: 3.5rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
	animation: pulse 2s infinite;
}

/* Messages de feedback */
.feedback-message {
	font-size: 2rem;
	font-weight: 900;
	margin-top: 1.5rem;
	animation: fadeIn 0.5s ease-out;
	text-align: center;
}

.feedback-success {
	color: var(--success-green);
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.feedback-error {
	color: var(--error-red);
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
	animation: shake 0.5s ease-in-out;
}

.feedback-warning {
	color: var(--warning-yellow);
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

/* Barre de progression */
.progress {
	height: 25px;
	border-radius: 50px;
	background-color: var(--bottle-white);
	border: 3px solid var(--ketchup-red);
	overflow: hidden;
	margin: 1rem 0;
}

.progress-bar {
	background: linear-gradient(45deg, var(--ketchup-red), var(--ketchup-light));
	border-radius: 50px;
	transition: width 0.5s ease-in-out;
}

/* Champ de saisie et boutons */
.custom-input {
	border: 4px solid var(--ketchup-red);
	border-radius: 15px;
	padding: 1.2rem;
	font-size: 1.4rem;
	font-family: 'Londrina Solid', cursive;
	transition: all 0.3s ease;
	background: var(--bottle-white);
	text-align: center;
	letter-spacing: 2px;
	margin-bottom: 1rem;
	width: 100%;
}

.custom-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.25);
	border-color: var(--ketchup-light);
	transform: scale(1.02);
}

.btn-ketchup {
	background: linear-gradient(45deg, var(--ketchup-red), var(--ketchup-light));
	color: white;
	border-radius: 15px;
	padding: 1.2rem;
	font-size: 1.4rem;
	font-weight: 900;
	text-transform: uppercase;
	border: none;
	box-shadow: 0 8px 0 var(--ketchup-dark);
	transition: all 0.2s ease;
	letter-spacing: 2px;
	width: 100%;
	margin-bottom: 1rem;
}

.btn-ketchup:hover, .btn-ketchup:focus {
	background: linear-gradient(45deg, var(--ketchup-light), var(--ketchup-red));
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 11px 0 var(--ketchup-dark);
}

.btn-ketchup:active {
	transform: translateY(2px);
	box-shadow: 0 6px 0 var(--ketchup-dark);
}

.btn-outline-ketchup {
	background: white;
	color: var(--ketchup-red);
	border: 3px solid var(--ketchup-red);
	border-radius: 15px;
	padding: 1.2rem;
	font-size: 1.4rem;
	font-weight: 900;
	text-transform: uppercase;
	box-shadow: 0 8px 0 rgba(227, 24, 55, 0.2);
	transition: all 0.2s ease;
	letter-spacing: 2px;
	width: 100%;
}

.btn-outline-ketchup:hover, .btn-outline-ketchup:focus {
	background: var(--ketchup-red);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 11px 0 rgba(227, 24, 55, 0.2);
}

.btn-outline-ketchup:active {
	transform: translateY(2px);
	box-shadow: 0 6px 0 rgba(227, 24, 55, 0.2);
}

#nextMilestone {
	color: var(--ketchup-dark);
	font-size: 1.1rem;
	text-align: center;
	margin: 0.5rem 0;
	animation: fadeIn 0.5s ease-out;
}


/* Styles pour la section règles */
.game-rules {
    text-align: left;
}

.rules-toggle {
    width: auto !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1.1rem !important;
}

.rules-container {
    background: white;
    border: 3px solid var(--ketchup-red);
    border-radius: 15px;
    padding: 1.5rem;
    animation: fadeIn 0.5s ease-out;
}

.rule-section {
    margin-bottom: 1.5rem;
}

.rule-section:last-child {
    margin-bottom: 0;
}

.rules-title {
    color: var(--ketchup-red);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-weight: bold;
}

.rules-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.rules-list li {
    margin-bottom: 0.5rem;
    color: var(--ketchup-dark);
    font-size: 1.1rem;
    padding-left: 1.5rem;
    position: relative;
}

.rules-list li i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.rule-section p {
    color: var(--ketchup-dark);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

@media (max-width: 768px) {
    .rules-container {
        padding: 1rem;
    }

    .rules-title {
        font-size: 1.2rem;
    }

    .rules-list li, 
    .rule-section p {
        font-size: 1rem;
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
	.game-container {
		padding: 1rem;
		margin: 10px;
	}

	.game-title {
		font-size: 2.5rem;
	}

	    .game-stats {
        padding: 0 10px; /* Ajoute un peu d'espace sur les côtés */
        gap: 1rem; /* Réduit l'espace entre les stats sur mobile */
    }

    .stat-container {
        padding: 0.4rem 0.8rem; /* Réduit encore le padding sur très petit écran */
        min-width: 100px; /* Réduit encore la largeur minimale */
    }

    .stat-label {
        font-size: 1rem;
    }

    .stat-value {
        font-size: 1.4rem;
    }

	.consonants-letters {
		font-size: 2.5rem;
	}
}

@media (max-width: 320px) {
    .game-stats {
        gap: 0.5rem;
    }

    .stat-container {
        padding: 0.3rem 0.6rem;
        min-width: 90px;
    }
}