/* Overlays hero — joueurs en ligne & Discord */

.status-overlays {
	--so-bg: rgba(18, 10, 10, 0.88);
	--so-border: var(--t-border, rgba(201, 162, 39, 0.28));
	--so-text: var(--t-text, #f2ece2);
	--so-muted: var(--t-muted, #9a8f82);
	--so-accent: var(--t-gold-light, #e8c84a);
	--so-live-players: #3d9a6a;
	--so-live-discord: #5865f2;
	--so-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);

	position: absolute;
	top: 100px;
	left: 55px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(100%, 260px);
	pointer-events: none;
}

.status-overlays__card {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	row-gap: 0;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--so-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--so-border);
	box-shadow: var(--so-shadow);
	font-weight: 600;
	color: var(--so-text);
	pointer-events: auto;
}

.status-overlays__card--discord {
	animation: soFadeInLeft 0.8s ease-out both;
	animation-delay: 0.12s;
}

.status-overlays__card--discord::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--so-live-discord);
	box-shadow: 0 0 12px var(--so-live-discord);
	animation: soPulseDiscord 2s infinite;
}

.status-overlays__card--players {
	animation: soFadeInRight 1s ease-out;
}

.status-overlays__card--players::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--so-live-players);
	box-shadow: 0 0 10px var(--so-live-players);
}

.status-overlays__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: var(--so-accent);
	mask-size: contain;
	-webkit-mask-size: contain;
}

.status-overlays__icon--users {
	width: 24px;
	height: 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") no-repeat center;
}

.status-overlays__icon--discord {
	background: var(--so-live-discord);
	mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg") no-repeat center;
	-webkit-mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg") no-repeat center;
}

.status-overlays__count {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--so-accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.status-overlays__label {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--so-muted);
}

.status-overlays__cta {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	color: #171719;
	background: var(--so-accent);
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(212, 168, 75, 0.55);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-overlays__cta:hover {
	transform: scale(1.04);
	box-shadow: 0 0 16px rgba(212, 168, 75, 0.75);
	color: #171719;
}

.status-overlays__cta--discord {
	color: #fff;
	background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
	box-shadow: 0 0 12px rgba(88, 101, 242, 0.55);
	animation: soCtaPulse 2.5s infinite;
}

.status-overlays__cta--discord:hover {
	color: #fff;
	box-shadow: 0 0 20px rgba(88, 101, 242, 0.85);
}

.status-overlays__extra {
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	white-space: nowrap;
}

@keyframes soFadeInRight {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes soFadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px) scale(0.96);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
		filter: blur(0);
	}
}

@keyframes soPulseDiscord {
	0%,
	100% {
		box-shadow: 0 0 10px var(--so-live-discord);
	}
	50% {
		box-shadow: 0 0 18px var(--so-live-discord);
	}
}

@keyframes soCtaPulse {
	0%,
	100% {
		box-shadow: 0 0 10px rgba(88, 101, 242, 0.45);
	}
	50% {
		box-shadow: 0 0 20px rgba(88, 101, 242, 0.85);
	}
}

@media (max-width: 768px) {
	.status-overlays {
		top: auto;
		bottom: 90px;
		left: 50%;
		transform: translateX(-50%);
		align-items: center;
		width: min(calc(100% - 2rem), 280px);
	}
}