/* Couleurs personnalisées inspirées du UNO "casse du siècle" */
:root {
	--uno-red: #d32f2f;
	--uno-dark: #1a1a1a;
	--uno-yellow: #ffeb3b;
	--uno-yellow-mieux: #ffe020;
	--uno-flame: #ff4500;
	--uno-red-max: #ff3737;
}

body {
	background-color: var(--uno-dark);
	color: white;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,10 Q45,30 30,50 Q15,70 30,90 M70,10 Q55,30 70,50 Q85,70 70,90' stroke='%23ff450033' fill='none' stroke-width='8'/%3E%3C/svg%3E");
}

.card {
	background-color: rgba(26, 26, 26, 0.9);
	border: 2px solid var(--uno-flame);
}

.rule-header {
	background-color: var(--uno-red);
}

.title-gradient {
	background: var(--uno-yellow-mieux);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Animation pour l'effet de flamme */
@keyframes flicker {
	0% {
		opacity: 0.8;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.8;
	}
}

.flame-effect {
	animation: flicker 3s infinite alternate;
}

.rule-card {
	transition: all 0.3s ease;
}

.rule-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px rgba(255, 69, 0, 0.3);
}