/* ============================================ */
/* ANIMATION */
/* ============================================ */
/* Classes d'animation pour mise en évidence */
.highlight-card {
	transform: scale(1.05) !important;
	box-shadow: 0 0 20px rgba(76, 175, 80, 0.8) !important;
	border: 2px solid #4CAF50 !important;
	z-index: 100 !important;
	position: relative !important;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.highlight-player-panel {
	animation: pulse-green 2s infinite;
	border: 2px solid #4CAF50 !important;
	border-radius: 8px !important;
	background: rgba(76, 175, 80, 0.1) !important;
}

.highlight-great-balance {
	animation: pulse-blue 1.5s infinite;
	transform: scale(1.02);
	box-shadow: 0 0 15px rgba(0, 123, 255, 0.6);
}

.highlight-dice {
	animation: bounce 1s infinite;
	border: 3px solid #FFD700 !important;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;
}

.highlight-choice-option {
	background: linear-gradient(45deg, #e3f2fd, #bbdefb) !important;
	border: 2px solid #2196F3 !important;
	transform: translateX(5px) !important;
	box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
	animation: pulseChoice 1.5s infinite;
}

.choice-selected-animation {
	animation: choiceSelected 0.5s ease-out;
	background: #c8f5c8 !important;
	border-color: #28a745 !important;
	transform: scale(1.05) !important;
}

.shake-animation {
	animation: shake 0.5s ease-in-out;
}

.value-change-positive {
	animation: value-increase 0.8s ease-out;
	color: #28a745 !important;
	font-weight: bold !important;
}

.value-change-negative {
	animation: value-decrease 0.8s ease-out;
	color: #dc3545 !important;
	font-weight: bold !important;
}

/* Animations keyframes */
@keyframes pulse-green {
	0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
	50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.9); }
}

@keyframes pulse-blue {
	0%, 100% { box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
	50% { box-shadow: 0 0 15px rgba(0, 123, 255, 0.9); }
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-5px); }
	60% { transform: translateY(-3px); }
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-2px); }
	75% { transform: translateX(2px); }
}

@keyframes value-increase {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); color: #28a745; }
	100% { transform: scale(1); }
}

@keyframes value-decrease {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); color: #dc3545; }
	100% { transform: scale(1); }
}

@keyframes choiceSelected {
	0% { 
		background: #e3f2fd;
		transform: scale(1); 
	}
	50% { 
		background: #4caf50;
		transform: scale(1.1);
		box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
	}
	100% { 
		background: #c8f5c8;
		transform: scale(1.05);
	}
}

@keyframes pulseChoice {
	0%, 100% { 
		box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
	}
	50% { 
		box-shadow: 0 6px 16px rgba(33, 150, 243, 0.6);
		transform: translateX(7px);
	}
}

/* IDs spécifiques pour les animations de valeurs VCI */
.player-vci-label {
	position: relative;
	transition: all 0.3s ease;
}

/* Support pour les animations de changement de NC */
.player-nc {
	position: relative;
	transition: all 0.3s ease;
}

/* Animation pour les éléments qui apparaissent/disparaissent */
.fade-in {
	animation: fadeIn 0.5s ease-in;
}

.fade-out {
	animation: fadeOut 0.5s ease-out;
}

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

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

/* Animation pour les notifications temporaires */
.temp-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 15px 20px;
	border-radius: 8px;
	z-index: 1000;
	animation: slideInRight 0.3s ease, slideOutRight 0.3s ease 2.7s;
	animation-fill-mode: both;
}

@keyframes slideInRight {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(100%); opacity: 0; }
}

.choice-selected-animation {
	animation: choiceSelected 0.5s ease-out;
	background: #c8f5c8 !important;
	border-color: #28a745 !important;
	transform: scale(1.05) !important;
}

@keyframes choiceSelected {
	0% { 
		background: #e3f2fd;
		transform: scale(1); 
	}
	50% { 
		background: #4caf50;
		transform: scale(1.1);
		box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
	}
	100% { 
		background: #c8f5c8;
		transform: scale(1.05);
	}
}

.highlight-choice-option {
	background: linear-gradient(45deg, #e3f2fd, #bbdefb) !important;
	border: 2px solid #2196F3 !important;
	transform: translateX(5px) !important;
	box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
	animation: pulseChoice 1.5s infinite;
}

@keyframes pulseChoice {
	0%, 100% { 
		box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
	}
	50% { 
		box-shadow: 0 6px 16px rgba(33, 150, 243, 0.6);
		transform: translateX(7px);
	}
}