* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Segoe UI', system-ui, sans-serif;
	background: #0d0d0f url('assets/img/background.png') center/cover no-repeat fixed;
	color: #e0e0e0;
	min-height: 100vh;
	padding-top: 180px;
}

/* ========== Intro cinématique (premier lancement) ========== */
.intro-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #0a0a0c;
	overflow: hidden;
	transition: opacity 1.2s ease-out;
}
.intro-overlay.intro-visible {
	display: flex;
}
.intro-overlay.intro-out {
	opacity: 0;
	pointer-events: none;
}

/* ——— Trous de balle pendant l'intro : positions aléatoires, disparition après quelques secondes ——— */
/* Conteneur fixe plein écran ; pointer-events: none pour ne pas bloquer les clics (bouton, etc.). */
.intro-bullet-holes {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
}

/* Chaque trou : image aléatoire (trouballe1/2/3), position absolue définie en JS. */
.intro-bullet-hole {
	position: absolute;
	width: 48px;
	height: 48px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	animation: intro-bullet-hole-in 0.2s ease-out forwards;
}

/* Disparition en douceur avant suppression du DOM */
.intro-bullet-hole.intro-bullet-hole-out {
	animation: intro-bullet-hole-out 0.5s ease-in forwards;
}

@keyframes intro-bullet-hole-in {
	0% { opacity: 0; transform: scale(0.8); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes intro-bullet-hole-out {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.9); }
}

/* Secousse prononcée de l'écran à chaque impact (appliquée sur l'overlay) */
.intro-overlay.intro-shake {
	animation: intro-shake 0.5s ease-out;
}

@keyframes intro-shake {
	0%   { transform: translate(0, 0); }
	8%   { transform: translate(-14px, -8px); }
	16%  { transform: translate(12px, 6px); }
	24%  { transform: translate(-10px, 8px); }
	32%  { transform: translate(8px, -6px); }
	40%  { transform: translate(-6px, 6px); }
	48%  { transform: translate(5px, -4px); }
	56%  { transform: translate(-4px, 4px); }
	64%  { transform: translate(3px, -2px); }
	72%  { transform: translate(-2px, 2px); }
	80%  { transform: translate(1px, -1px); }
	100% { transform: translate(0, 0); }
}

/* ——— Titre intro : background.png + "Apocalypse Gang" (8–10 s) ——— */
.intro-title-wrap {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.intro-title-bg {
	position: absolute;
	inset: 0;
	background: url('assets/img/background.png') center/cover no-repeat;
	background-color: #0a0a0c;
}
/* Texte centré, rouge sombre, bold, léger text-shadow dramatique */
.intro-title-text {
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: 'Arial Black', 'Arial', sans-serif;
	font-weight: 900;
	font-size: clamp(1.5rem, 6vw, 4rem);
	color: #8B0000;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 20px rgba(139, 0, 0, 0.3);
	opacity: 0;
	transform: scale(0.5);
	will-change: transform, opacity, filter;
}
/* Séquence : fade-in → zoom 0.5→2 → rotation+glow → pulse → fin */
.intro-title-text.intro-title-run {
	animation: intro-title-sequence 9s ease-in-out forwards;
}
@keyframes intro-title-sequence {
	/* 0–1 s : apparition progressive */
	0% {
		opacity: 0;
		transform: scale(0.5);
		filter: brightness(1);
	}
	12% {
		opacity: 1;
		transform: scale(0.5);
		filter: brightness(1);
	}
	/* 1–5 s : zoom progressif 0.5 → 2 */
	55% {
		opacity: 1;
		transform: scale(2);
		filter: brightness(1);
	}
	/* 5–7 s : rotation 360° + glow rouge */
	66% {
		opacity: 1;
		transform: scale(2) rotate(180deg);
		filter: brightness(1.4) drop-shadow(0 0 12px rgba(139, 0, 0, 0.8));
	}
	78% {
		opacity: 1;
		transform: scale(2) rotate(360deg);
		filter: brightness(1.4) drop-shadow(0 0 16px rgba(139, 0, 0, 0.9));
	}
	/* 7–8 s : retour position + pulse 1 → 1.1 → 1 */
	85% {
		opacity: 1;
		transform: scale(1.1);
		filter: brightness(1.1);
	}
	92% {
		opacity: 1;
		transform: scale(1);
		filter: brightness(1);
	}
	/* 8–9 s : disparition / discret */
	100% {
		opacity: 0;
		transform: scale(1);
		filter: brightness(1);
	}
}

/* Scène avec zoom progressif (simulation caméra) */
.intro-scene {
	position: absolute;
	inset: -10%;
	background: transparent;
	animation: intro-zoom 14s ease-in-out forwards;
	transform-origin: 50% 60%;
}
@keyframes intro-zoom {
	0% { transform: scale(1.2); }
	100% { transform: scale(1.6); }
}

/* Fond : ciel + ville en ruines (dégradés) */
.intro-bg {
	position: absolute;
	inset: 0;
}
.intro-sky {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #1a0a0a 0%, #2d1515 25%, #1f1212 50%, #0d0808 100%);
}
.intro-city {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70%;
	background: linear-gradient(180deg, transparent 0%, rgba(20, 10, 10, 0.9) 30%, #0c0606 100%);
	clip-path: polygon(0 40%, 5% 25%, 15% 50%, 25% 20%, 35% 45%, 45% 15%, 55% 40%, 65% 25%, 75% 50%, 85% 30%, 95% 45%, 100% 35%, 100% 100%, 0 100%);
}
.intro-ground {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 25%;
	background: linear-gradient(180deg, transparent 0%, rgba(15, 8, 8, 0.95) 100%);
}

/* Lumières rouges / oranges (fenêtres, feux) */
.intro-lights {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.intro-light {
	position: absolute;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	background: rgba(255, 80, 40, 0.85);
	box-shadow: 0 0 20px rgba(255, 60, 20, 0.8);
	animation: intro-light-flicker 3s ease-in-out infinite;
}
.intro-light-1 { left: 12%; top: 35%; animation-delay: 0s; }
.intro-light-2 { left: 28%; top: 28%; animation-delay: 0.4s; }
.intro-light-3 { left: 52%; top: 32%; animation-delay: 0.8s; }
.intro-light-4 { left: 72%; top: 25%; animation-delay: 0.2s; }
.intro-light-5 { left: 88%; top: 38%; animation-delay: 0.6s; }
@keyframes intro-light-flicker {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* Fumée */
.intro-smoke {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.intro-smoke-layer {
	position: absolute;
	inset: -20%;
	background: radial-gradient(ellipse 80% 50% at 50% 60%, rgba(60, 25, 15, 0.25) 0%, transparent 60%);
	animation: intro-smoke-drift 12s linear infinite;
}
.intro-smoke-2 { animation-duration: 18s; animation-direction: reverse; opacity: 0.6; }

@keyframes intro-smoke-drift {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-5%, -3%) scale(1.1); }
}

/* Flash explosion lointaine */
.intro-flash {
	position: absolute;
	inset: 0;
	background: rgba(255, 100, 50, 0);
	pointer-events: none;
	transition: background 0.15s ease-out;
}
.intro-flash.intro-flash-active {
	background: rgba(255, 120, 60, 0.25);
}

/* Silhouettes (voiture, personnage) */
.intro-silhouettes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.intro-silhouette {
	position: absolute;
	bottom: 18%;
	width: 80px;
	height: 24px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 4px;
	animation: intro-silhouette-move 20s linear infinite;
}
.intro-silhouette-figure {
	width: 24px;
	height: 48px;
	bottom: 20%;
	left: 15%;
	animation: intro-silhouette-move 25s linear infinite;
	animation-delay: -5s;
}
@keyframes intro-silhouette-move {
	0% { transform: translateX(-20px); opacity: 0.3; }
	5% { opacity: 0.8; }
	95% { opacity: 0.8; }
	100% { transform: translateX(100vw); opacity: 0.3; }
}

/* Vignette (bords sombres) */
.intro-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
	pointer-events: none;
}

/* Grain type vieux film */
.intro-grain {
	position: absolute;
	inset: 0;
	opacity: 0.12;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: intro-grain-flicker 0.5s steps(1) infinite;
}
@keyframes intro-grain-flicker {
	0%, 100% { opacity: 0.1; }
	50% { opacity: 0.15; }
}

/* Texte narratif (centré bas, fade + machine à écrire côté JS) */
.intro-text-wrap {
	position: relative;
	z-index: 2;
	width: 90%;
	max-width: 560px;
	text-align: center;
	margin-top: auto;
	margin-bottom: 12vh;
	padding: 0 16px;
}
.intro-text {
	font-size: clamp(0.95rem, 2.5vw, 1.15rem);
	line-height: 1.6;
	color: rgba(230, 220, 210, 0.95);
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
	margin: 0;
	min-height: 3.2em;
}
.intro-text.intro-text-shake {
	animation: intro-text-shake 0.25s ease-in-out;
}
@keyframes intro-text-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

/* Bouton Commencer (slide-in depuis le bas + pulse) */
.intro-btn-wrap {
	position: relative;
	z-index: 3;
	margin-top: auto;
	margin-bottom: 15vh;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.5s ease-out;
}
.intro-btn-wrap.intro-btn-visible {
	opacity: 1;
	transform: translateY(0);
}
.intro-btn-start {
	font-size: 1.15rem;
	padding: 14px 36px;
	border: 2px solid rgba(255, 180, 80, 0.8);
	background: linear-gradient(180deg, rgba(180, 60, 20, 0.5) 0%, rgba(100, 30, 10, 0.7) 100%);
	color: #ffe0c0;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	box-shadow: 0 0 30px rgba(255, 100, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	animation: intro-btn-pulse 2s ease-in-out infinite;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.intro-btn-start:hover {
	transform: scale(1.05);
	box-shadow: 0 0 40px rgba(255, 120, 50, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.intro-btn-start:focus {
	outline: 2px solid rgba(255, 180, 80, 0.9);
	outline-offset: 4px;
}
@keyframes intro-btn-pulse {
	0%, 100% { box-shadow: 0 0 30px rgba(255, 100, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
	50% { box-shadow: 0 0 45px rgba(255, 120, 50, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}

.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1000;
	padding: 10px 16px 12px;
}

/* Confettis level-up (5 s, topbar, non intrusifs – pointer-events: none, z-index sous le contenu) */
.confetti-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 120px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 0;
}
.topbar .topbar-row {
	position: relative;
	z-index: 1;
}
.confetti-container.confetti-container-active {
	opacity: 1;
}
.confetti-piece {
	position: absolute;
	border-radius: 2px;
	animation: confetti-fall 5s linear forwards;
	will-change: transform, opacity;
	opacity: 0.92;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}
@keyframes confetti-fall {
	0% {
		transform: translateY(-12px) rotate(0deg);
		opacity: 0.92;
	}
	85% {
		opacity: 0.5;
	}
	100% {
		transform: translateY(115px) rotate(720deg);
		opacity: 0;
	}
}

/* Diamant (récompense level-up) – image diams.png + pop + clignotement 5 s */
.res-item-diamond {
	position: relative;
}
.res-item-diamond .diamond-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	object-fit: contain;
	vertical-align: middle;
	transition: filter 0.2s ease;
}
.diamond-icon-blink {
	animation: diamond-blink 0.8s ease-in-out infinite;
}
.diamond-icon-pop {
	animation: diamond-pop 0.4s ease-out;
}
.diamond-reward-pulse .diamond-icon {
	filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.7)) drop-shadow(0 0 12px rgba(99, 102, 241, 0.35));
}
@keyframes diamond-blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.9; transform: scale(1.08); }
}
@keyframes diamond-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.topbar-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.topbar-row-1 {
	margin-bottom: 8px;
}

.tb-pseudo {
	color: #7dd3fc;
	font-weight: 600;
	font-size: 1.1rem;
	animation: pseudo-glow 2s ease-in-out infinite;
}

.tb-meta {
	font-size: 13px;
	color: #a0a0b0;
	margin-left: 12px;
}

.tb-level {
	color: #a78bfa;
	font-size: 12px;
	margin-left: 4px;
}

@keyframes pseudo-glow {
	0%, 100% { text-shadow: 0 0 8px rgba(125, 211, 252, 0.5); }
	50% { text-shadow: 0 0 14px rgba(125, 211, 252, 0.85), 0 0 22px rgba(125, 211, 252, 0.35); }
}

/* Ligne dédiée à la barre XP : centrée, une seule ligne */
.topbar-row-xp {
	margin-bottom: 8px;
	justify-content: center;
}
.topbar-row-xp .bar-block-xp {
	width: 100%;
	max-width: 280px;
}
.topbar-row-xp .bar-track-xp {
	width: 100%;
	height: 14px;
}
.topbar-row-bars {
	gap: 24px;
	margin-bottom: 8px;
}

@media (max-width: 520px) {
	.topbar-row-bars {
		gap: 12px;
	}
	.topbar-row-bars .bar-track {
		width: 56px;
	}
	.topbar-row-xp .bar-block-xp {
		max-width: 100%;
	}
}

.bar-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.bar-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.regen-timer {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	white-space: nowrap;
	text-align: center;
	margin-top: 2px;
	letter-spacing: 0.02em;
}

.bar-block-pv-clickable {
	cursor: pointer;
}
.bar-block-pv-clickable:hover {
	opacity: 0.95;
}

.bar-track {
	width: 72px;
	height: 12px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.bar-fill {
	height: 100%;
	border-radius: 5px;
	transition: width 0.3s ease;
	min-width: 0;
}

#bar-pv.bar-fill {
	transition: width 0.3s ease, background 0.5s ease;
}
/* PV : rouge ≤25%, jaune 26–75%, vert >75% */
#bar-pv.bar-pv-low  { background: linear-gradient(90deg, #dc3545, #ef4444); }
#bar-pv.bar-pv-mid  { background: linear-gradient(90deg, #eab308, #fbbf24); }
#bar-pv.bar-pv-full { background: linear-gradient(90deg, #22c55e, #34d399); }
/* Énergie : jaune en permanence */
#bar-energie.bar-fill,
#bar-energie.bar-energie { background: linear-gradient(90deg, #ca8a04, #eab308); }
/* Vitalité : bleu en permanence */
#bar-vitalite.bar-fill,
#bar-vitalite.bar-vitalite { background: linear-gradient(90deg, #0891b2, #06b6d4); }

/* Barre XP (mauve, glow fort, % sur la barre, tooltip, animation fluide) */
.bar-block-xp .bar-wrap { min-width: 0; width: 100%; }
.bar-track-xp {
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.bar-fill-xp {
	background: linear-gradient(90deg, #6d28d9, #8b5cf6, #a855f7);
	box-shadow: 0 0 16px rgba(168, 85, 247, 0.65), 0 0 32px rgba(139, 92, 246, 0.35);
	transition: width 0.35s ease-out;
}
.bar-track-xp:has(.bar-fill-xp) {
	box-shadow: 0 0 12px rgba(168, 85, 247, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.bar-xp-pct {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
	pointer-events: none;
}
@media (min-width: 520px) {
	.bar-xp-pct { font-size: 12px; }
}
.bar-fill-xp-gain {
	animation: xp-bar-gain 0.45s ease-out;
}
@keyframes xp-bar-gain {
	0% { box-shadow: 0 0 16px rgba(168, 85, 247, 0.65), 0 0 32px rgba(139, 92, 246, 0.35); }
	50% { box-shadow: 0 0 24px rgba(168, 85, 247, 0.9), 0 0 48px rgba(139, 92, 246, 0.5); }
	100% { box-shadow: 0 0 16px rgba(168, 85, 247, 0.65), 0 0 32px rgba(139, 92, 246, 0.35); }
}

.bar-text {
	font-size: 11px;
	color: #888;
	min-width: 38px;
}

.topbar-row-3 {
	gap: 12px;
}

.res-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #c0c0c8;
	background: rgba(0, 0, 0, 0.3);
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.res-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	vertical-align: middle;
}

.menu {
	position: fixed;
	top: 148px;
	left: 0;
	right: 0;
	height: 44px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 12px;
	z-index: 999;
	flex-wrap: wrap;
}

.nav-btn {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: #c0c0c8;
	background: rgba(40, 40, 50, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-btn:hover {
	background: rgba(60, 60, 70, 0.9);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.15);
}

.nav-btn:focus {
	outline: none;
	border-color: #7dd3fc;
}

.nav-btn-reset {
	color: #f87171;
	border-color: rgba(248, 113, 113, 0.4);
}

.nav-btn-reset:hover {
	background: rgba(60, 30, 30, 0.8);
	color: #fca5a5;
}

.content {
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 16px;
	min-height: 60vh;
	background: transparent;
}

.content h2 {
	color: #e0e0e0;
	font-size: 1.4rem;
	margin-top: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 8px;
}

.content .card {
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
	backdrop-filter: blur(4px);
}

/* ——— Accueil : layout 2 colonnes (Top 10 Guildes | Top 10 Joueurs) + News pleine largeur ——— */
.hub-home {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.hub-home .hub-card.card {
	background: rgba(0, 0, 0, 0.52);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.hub-row-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.hub-row-2 {
	width: 100%;
}
@media (max-width: 700px) {
	.hub-row-1 {
		grid-template-columns: 1fr;
	}
}
.hub-card h3 {
	margin: 0 0 12px 0;
	font-size: 1.05rem;
	color: #a78bfa;
}
.hub-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hub-tab-btn {
	padding: 8px 14px;
	font-size: 0.9rem;
	color: #94a3b8;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	border-radius: 6px 6px 0 0;
}
.hub-tab-btn:hover {
	color: #e2e8f0;
	background: rgba(255, 255, 255, 0.05);
}
.hub-tab-btn.active {
	color: #a78bfa;
	border-bottom-color: #a78bfa;
	font-weight: 600;
}
.hub-tab-panel {
	transition: opacity 0.2s ease;
}
.hub-tab-panel[hidden] {
	display: none !important;
}
.hub-top-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hub-top-row {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 0.9rem;
	color: #e2e8f0;
}
.hub-top-row:hover:not(.hub-top-empty) {
	background: rgba(255, 255, 255, 0.05);
}
.hub-top-rank {
	font-weight: 700;
	color: #94a3b8;
	min-width: 22px;
}
.hub-top-name {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hub-top-meta {
	font-size: 0.82rem;
	color: #94a3b8;
	white-space: nowrap;
}
.hub-top-row.hub-top-empty .hub-top-name,
.hub-top-row.hub-top-empty .hub-top-meta {
	color: #64748b;
}
.hub-news-list-wrap {
	max-height: 45vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.hub-card-news .hub-news-list-wrap {
	max-height: 50vh;
}
.hub-news-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hub-news-item {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
}
.hub-news-title {
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	background: transparent;
	border: none;
	color: #e2e8f0;
	font-size: 0.95rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s;
}
.hub-news-title:hover {
	background: rgba(255, 255, 255, 0.06);
}
.hub-news-category {
	font-size: 0.8rem;
	color: #94a3b8;
	flex-shrink: 0;
}
.hub-news-body {
	padding: 10px 12px 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.9rem;
	color: #cbd5e1;
	line-height: 1.45;
	white-space: pre-wrap;
}
.hub-news-body.collapsed {
	display: none;
}
.hub-news-empty {
	margin: 0;
	color: #94a3b8;
	font-size: 0.9rem;
}

.hub-research-summary .hub-research-tabs { margin-bottom: 12px; }
.hub-research-tab-row { margin: 8px 0 2px 0; font-size: 0.9rem; color: #a78bfa; }
.hub-research-tab-label { font-weight: 600; }
.hub-research-tab-progress { color: #94a3b8; font-size: 0.85rem; margin-left: 6px; }
.hub-research-node-list { margin: 0 0 8px 0; padding-left: 20px; font-size: 0.85rem; color: #cbd5e1; line-height: 1.5; list-style: none; }
.hub-research-node-list li { margin: 2px 0; }
.hub-research-node-item.hub-research-done { color: #86efac; }
.hub-research-node-item.hub-research-progress { color: #fcd34d; }
.hub-research-node-item.hub-research-locked { color: #94a3b8; opacity: 0.85; }
.hub-research-lock { margin: 0 0 10px 0; color: #94a3b8; font-size: 0.9rem; }
.hub-research-go-btn { margin-top: 8px; }

/* ========== Bouton flottant Recherche (Accueil, bas gauche) ========== */
.hub-research-fab {
	position: fixed;
	left: 20px;
	bottom: 24px;
	z-index: 800;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
.hub-research-fab.hub-research-fab-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}
.hub-research-fab-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(56, 189, 248, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: #e0e0e0;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.hub-research-fab-btn:hover {
	transform: scale(1.08);
	box-shadow:
		0 6px 20px rgba(0, 0, 0, 0.5),
		0 0 24px rgba(56, 189, 248, 0.35),
		0 0 0 1px rgba(56, 189, 248, 0.4);
	filter: brightness(1.05);
}
.hub-research-fab-btn:active {
	transform: scale(1.02);
}
.hub-research-fab-icon {
	font-size: 28px;
	line-height: 1;
	pointer-events: none;
}
.hub-research-fab.hub-research-fab-pulse .hub-research-fab-btn {
	animation: hub-research-fab-pulse 2s ease-in-out infinite;
}
@keyframes hub-research-fab-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.25); }
	50% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.3), 0 0 0 1px rgba(56, 189, 248, 0.5); }
}
.hub-research-fab-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #dc2626;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.hub-research-fab-badge.hub-research-fab-badge-show {
	opacity: 1;
	transform: scale(1);
}
@media (max-width: 600px) {
	.hub-research-fab {
		left: 14px;
		bottom: 18px;
	}
	.hub-research-fab-btn {
		width: 52px;
		height: 52px;
	}
	.hub-research-fab-icon {
		font-size: 24px;
	}
}

/* ========== Bulle Recherche globale (toutes les pages, bas gauche, fixe au scroll) ========== */
.research-bubble-wrap {
	position: fixed;
	left: 20px;
	bottom: 24px;
	z-index: 850;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.85);
	transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}
.research-bubble-wrap.research-bubble-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}
.research-bubble-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(180, 83, 9, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: #fbbf24;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.research-bubble-btn:hover {
	transform: scale(1.1);
	box-shadow:
		0 6px 22px rgba(0, 0, 0, 0.55),
		0 0 28px rgba(180, 83, 9, 0.25),
		0 0 0 1px rgba(251, 191, 36, 0.4);
	background: linear-gradient(145deg, #252b3b 0%, #141922 100%);
}
.research-bubble-btn:active {
	transform: scale(1.02);
}
.research-bubble-icon {
	font-size: 26px;
	line-height: 1;
	pointer-events: none;
}
.research-bubble-wrap.research-bubble-badge-on .research-bubble-btn {
	animation: research-bubble-pulse 2.2s ease-in-out infinite;
}
@keyframes research-bubble-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(180,83,9,0.3), inset 0 1px 0 rgba(255,255,255,0.06); }
	50% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 24px rgba(220,38,38,0.35), 0 0 0 1px rgba(220,38,38,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
}
.research-bubble-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(220, 38, 38, 0.6), 0 0 0 1px rgba(255,255,255,0.15) inset;
	opacity: 0;
	transform: scale(0.75);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.research-bubble-badge.research-bubble-badge-show {
	opacity: 1;
	transform: scale(1);
}
@media (max-width: 600px) {
	.research-bubble-wrap { left: 14px; bottom: 18px; }
	.research-bubble-btn { width: 50px; height: 50px; }
	.research-bubble-icon { font-size: 22px; }
}

/* ========== Modal Recherche rapide (style mafia downtown, animations) ========== */
.research-quick-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.research-quick-modal-overlay.research-quick-modal-open {
	opacity: 1;
	visibility: visible;
}
.research-quick-modal-overlay.research-quick-modal-open .research-quick-modal {
	animation: research-quick-modal-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.research-quick-modal-overlay.research-quick-modal-closing .research-quick-modal {
	animation: research-quick-modal-out 0.25s ease-in forwards;
}
@keyframes research-quick-modal-in {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
@keyframes research-quick-modal-out {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
}
.research-quick-modal {
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #151a24 0%, #0c0f14 100%);
	border: 1px solid rgba(180, 83, 9, 0.35);
	box-shadow:
		0 24px 48px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 0 40px rgba(180, 83, 9, 0.12);
	border-radius: 12px;
	overflow: hidden;
}
.research-quick-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: rgba(0, 0, 0, 0.35);
	border-bottom: 1px solid rgba(180, 83, 9, 0.25);
}
.research-quick-modal-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #fbbf24;
	text-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}
.research-quick-modal-close {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #94a3b8;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.research-quick-modal-close:hover {
	background: rgba(220, 38, 38, 0.25);
	color: #fca5a5;
}
.research-quick-modal-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 20px;
	background: rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow-x: auto;
}
.research-quick-tab-btn {
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	color: #cbd5e1;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.research-quick-tab-btn:hover {
	background: rgba(251, 191, 36, 0.12);
	border-color: rgba(251, 191, 36, 0.3);
	color: #fbbf24;
}
.research-quick-tab-btn.active {
	background: rgba(251, 191, 36, 0.18);
	border-color: rgba(251, 191, 36, 0.5);
	color: #fbbf24;
}
.research-quick-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
	min-height: 180px;
}
.research-quick-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.research-quick-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 14px;
	margin-bottom: 8px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.research-quick-item:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}
.research-quick-item.research-quick-done {
	border-color: rgba(34, 197, 94, 0.3);
	background: rgba(34, 197, 94, 0.08);
}
.research-quick-item.research-quick-progress {
	border-color: rgba(251, 191, 36, 0.4);
	background: rgba(251, 191, 36, 0.1);
}
.research-quick-item.research-quick-ready {
	border-color: rgba(56, 189, 248, 0.35);
	background: rgba(56, 189, 248, 0.06);
}
.research-quick-item.research-quick-locked {
	opacity: 0.75;
	border-color: rgba(100, 116, 139, 0.2);
}
.research-quick-item-name { font-weight: 500; color: #e2e8f0; }
.research-quick-item-status {
	font-size: 0.8rem;
	padding: 4px 8px;
	border-radius: 6px;
	font-weight: 600;
}
.research-quick-item-status.status-done { background: rgba(34, 197, 94, 0.25); color: #86efac; }
.research-quick-item-status.status-progress { background: rgba(251, 191, 36, 0.25); color: #fde047; }
.research-quick-item-status.status-ready { background: rgba(56, 189, 248, 0.25); color: #7dd3fc; }
.research-quick-item-status.status-locked { background: rgba(100, 116, 139, 0.2); color: #94a3b8; }
.research-quick-item-timer { font-size: 0.85rem; color: #fbbf24; }
.research-quick-item-cost { font-size: 0.75rem; color: #94a3b8; width: 100%; display: block; margin-top: 4px; }
.research-quick-start-btn { flex-shrink: 0; }
.research-quick-reductions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.research-quick-reductions .research-help-wrap { position: relative; display: inline-flex; }
.research-quick-reductions .research-help-badge { top: -6px; right: -6px; min-width: 14px; height: 14px; font-size: 10px; }
.research-quick-reductions .research-reduction-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.research-quick-reductions .research-reduction-count { font-size: 0.75rem; margin-left: 2px; }
.research-quick-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.2);
}

.crimes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.crime-card {
	padding: 14px;
}

.crime-card .crime-name {
	margin: 0 0 8px 0;
	font-size: 1rem;
	color: #e0e0e0;
}

.crime-card .crime-meta {
	margin: 4px 0;
	font-size: 12px;
	color: #a0a0b0;
}

.crime-card .crime-gains {
	margin: 6px 0 8px 0;
	font-size: 12px;
	color: #86efac;
	background: rgba(22, 101, 52, 0.15);
	border-radius: 6px;
	padding: 6px 8px;
	border: 1px solid rgba(34, 197, 94, 0.25);
}

.crime-no-vitality {
	margin: 6px 0 0 0;
	font-size: 0.8rem;
	color: #f87171;
	font-weight: 500;
}

.crime-no-vitality.hidden {
	display: none;
}

.crime-card .crime-btn {
	margin-top: 10px;
	width: 100%;
	font-weight: 600;
	color: #e8f5e9;
	background: rgba(22, 101, 52, 0.4);
	border: 2px solid #22c55e;
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
	transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.crime-card .crime-btn:hover:not(:disabled) {
	box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), 0 0 30px rgba(34, 197, 94, 0.25);
	transform: scale(1.02);
}

.crime-card .crime-btn:active:not(:disabled) {
	transform: scale(0.98);
}

.crime-card .crime-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

/* ——— Onglets globaux (effet 3D, dark, cohérent) ——— */
.crimes-tab-btn,
.shop-filter-btn,
.player-tab-btn {
	background: linear-gradient(180deg, rgba(28, 28, 36, 0.98) 0%, rgba(18, 18, 24, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-top-color: rgba(255, 255, 255, 0.1);
	border-bottom-color: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	color: #a8b0c0;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.crimes-tab-btn:hover,
.shop-filter-btn:hover,
.player-tab-btn:hover {
	background: linear-gradient(180deg, rgba(38, 38, 48, 0.98) 0%, rgba(26, 26, 34, 0.98) 100%);
	color: #e0e4ec;
	border-top-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.crimes-tab-btn.active,
.shop-filter-btn.active,
.player-tab-btn.active {
	background: linear-gradient(180deg, rgba(22, 22, 30, 0.98) 0%, rgba(14, 14, 20, 0.98) 100%);
	border-top-color: rgba(255, 255, 255, 0.06);
	border-bottom-color: rgba(0, 0, 0, 0.6);
	color: #e2e6ee;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 14px rgba(167, 139, 250, 0.2);
}

/* Onglets Crimes / Mission spéciale */
.crimes-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.crimes-tab-btn {
	padding: 10px 18px;
	font-size: 0.95rem;
}
.crimes-tab-btn.active {
	border-color: rgba(167, 139, 250, 0.4);
}
.crimes-tab-panel {
	display: none;
}
.crimes-tab-panel.active {
	display: block;
}

/* Grille missions spéciales (braquage, etc.) */
.special-missions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.special-mission-card {
	padding: 18px;
	border: 1px solid rgba(167, 139, 250, 0.35);
	background: rgba(30, 25, 45, 0.4);
}
.special-mission-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.special-mission-icon {
	font-size: 1.8rem;
	line-height: 1;
}
.special-mission-name {
	margin: 0;
	font-size: 1.15rem;
	color: #e0e0e0;
}
.special-mission-level,
.special-mission-duration,
.special-mission-loot,
.special-mission-rare {
	margin: 6px 0;
	font-size: 0.9rem;
	color: #a0a0b0;
}
.special-mission-rare strong {
	color: #a78bfa;
}
.special-mission-locked {
	opacity: 0.85;
	position: relative;
}
.special-mission-locked .mission-lock {
	color: #94a3b8;
	font-style: italic;
}
.special-mission-in-progress {
	opacity: 0.92;
}
.special-mission-in-progress .mission-timer {
	font-variant-numeric: tabular-nums;
}
.crimes-tab-btn.missions-unlocked:not(.active) {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(167, 139, 250, 0.25);
	color: #c4b5fd;
	animation: special-mission-glow 2s ease-in-out infinite;
}
.nav-btn.nav-has-special-mission {
	animation: special-mission-glow 2s ease-in-out infinite;
	box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

/* Bouton Gang : invisible avant niv.12, fade-in à l’apparition */
#nav-gang.nav-gang-locked {
	display: none !important;
	pointer-events: none !important;
}
#nav-gang.nav-gang-unlocked {
	display: inline-block;
	pointer-events: auto;
	animation: nav-gang-fade-in 0.4s ease-out;
}
@keyframes nav-gang-fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* Bouton Recrutement : invisible avant niv.15, fade-in à l'apparition */
#nav-research.nav-research-locked {
	display: none !important;
	pointer-events: none !important;
}
#nav-recruitment.nav-recruitment-locked {
	display: none !important;
	pointer-events: none !important;
}
#nav-research.nav-research-unlocked {
	display: inline-block;
	pointer-events: auto;
}
#nav-recruitment.nav-recruitment-unlocked {
	display: inline-block;
	pointer-events: auto;
	animation: nav-recruitment-fade-in 0.4s ease-out;
}
@keyframes nav-recruitment-fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes special-mission-glow {
	0%, 100% { box-shadow: 0 0 8px rgba(167, 139, 250, 0.35); }
	50% { box-shadow: 0 0 16px rgba(167, 139, 250, 0.55); }
}

/* Overlay verrouillé Mission Spéciale (même style que Recrutement) */
.missions-panel-wrap {
	position: relative;
	min-height: 180px;
}
.missions-overlay-lock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #0ff;
	font-size: 18px;
	font-weight: bold;
	border-radius: 8px;
	z-index: 2;
	animation: recruitmentGlow 1s ease-in-out infinite alternate;
}
.missions-overlay-lock.hidden {
	display: none !important;
}
.missions-cadenas-glow {
	text-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
}
.crimes-tab-locked-pulse {
	animation: crimes-tab-locked-pulse 0.4s ease;
}
@keyframes crimes-tab-locked-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
	50% { box-shadow: 0 0 14px 2px rgba(167, 139, 250, 0.5); }
}

.crimes-missions-title {
	font-size: 1.1rem;
	color: #a78bfa;
	margin: 24px 0 12px 0;
}
.crimes-missions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.mission-card .crime-name {
	color: #e0e0e0;
}
.mission-card .crime-meta {
	color: #94a3b8;
}
.mission-lock {
	font-size: 13px;
	color: #fbbf24;
	margin: 8px 0;
}
.mission-timer {
	font-size: 13px;
	color: #a78bfa;
	margin: 8px 0;
	font-weight: 600;
}
.mission-progress-wrap {
	width: 100%;
	margin: 10px 0 6px 0;
}
.mission-progress-track {
	height: 10px;
	background: rgba(30, 30, 38, 0.9);
	border-radius: 5px;
	overflow: hidden;
}
.mission-progress-fill {
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
	transition: width 0.5s ease;
	min-width: 0;
}
.mission-btn {
	background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
	color: #fff;
	border: none;
}

/* ——— Business (idle) ——— */
.business-total-revenue {
	margin-bottom: 20px;
	padding: 12px 16px;
	background: rgba(30, 35, 40, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	font-size: 1rem;
	color: #c0c0d0;
}

.business-total-revenue strong {
	color: #22c55e;
	font-size: 1.15rem;
}

.business-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.business-card {
	padding: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.business-card-flash {
	animation: business-card-flash 0.35s ease;
}

@keyframes business-card-flash {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
	50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.4); }
	100% { box-shadow: none; }
}

.business-icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 8px;
	background: rgba(40, 40, 50, 0.6);
	margin-bottom: 8px;
}

.business-name {
	margin: 0 0 8px 0;
	font-size: 1rem;
	color: #e0e0e0;
}

.business-card .business-meta {
	margin: 4px 0;
	font-size: 12px;
	color: #a0a0b0;
}

.business-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
	width: 100%;
}

.business-btn {
	flex: 1;
	min-width: 80px;
	font-size: 12px;
	padding: 8px 10px;
	transition: opacity 0.2s, box-shadow 0.2s;
}

.business-buy-max {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	line-height: 1.3;
	min-width: 100px;
	max-width: 100%;
	text-align: center;
	padding: 10px 8px;
	font-size: 14px;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.business-buy-max-line1,
.business-buy-max-line2 {
	display: block;
	width: 100%;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	text-align: center;
	font-size: 14px;
	line-height: 1.3;
}

.business-buy-max-line2 {
	font-weight: 600;
}

.business-buy-1.business-btn-afford,
.business-buy-max.business-btn-afford {
	background: rgba(22, 101, 52, 0.5);
	border: 1px solid #22c55e;
	color: #e8f5e9;
}

.business-buy-1.business-btn-afford:hover:not(:disabled),
.business-buy-max.business-btn-afford:hover:not(:disabled) {
	background: rgba(22, 101, 52, 0.7);
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.business-buy-1.business-btn-no-afford,
.business-buy-max.business-btn-no-afford {
	background: rgba(127, 29, 29, 0.4);
	border: 1px solid #dc2626;
	color: #fecaca;
}

.business-buy-1.business-btn-no-afford:disabled,
.business-buy-max.business-btn-no-afford:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.business-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ——— Business tabs ——— */
.business-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.business-tab-btn {
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 600;
	background: rgba(55, 65, 81, 0.8);
	border: 1px solid #4b5563;
	color: #e5e7eb;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
}
.business-tab-btn.active {
	background: rgba(34, 197, 94, 0.25);
	border-color: #22c55e;
	color: #a7f3d0;
}
.business-tab-btn:hover:not(.active):not(.business-tab-locked) {
	background: rgba(75, 85, 99, 0.9);
}
.business-tab-locked {
	opacity: 0.85;
}
.business-tab-panel {
	display: none;
}
.business-tab-panel.active {
	display: block;
}

/* ——— Production (onglet Business) ——— */
.business-production-wrap {
	position: relative;
	min-height: 200px;
}
.production-overlay-lock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #0ff;
	font-size: 18px;
	font-weight: bold;
	border-radius: 8px;
	z-index: 2;
	animation: productionGlow 1s ease-in-out infinite alternate;
}
.production-overlay-lock.hidden {
	display: none !important;
}
.production-cadenas-glow {
	text-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
}
@keyframes productionGlow {
	from { filter: brightness(1); }
	to { filter: brightness(1.15); text-shadow: 0 0 12px #0ff, 0 0 24px #0ff; }
}
.production-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.production-panel-tick .production-card {
	animation: production-tick-pulse 0.5s ease;
}
@keyframes production-tick-pulse {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.03); }
}
.production-card {
	padding: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 10px;
	transition: box-shadow 0.25s ease, transform 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}
/* Paliers de glow : 1–10 vert, 11–20 bleu, 21–30 mauve, 31–40 orange, 41+ cyan */
/* Paliers niveau : 1–9 vert, 10–19 bleu, 20–29 mauve, 30–39 orange, 40+ cyan (bordure/outline). */
.production-tier-green { outline: 2px solid rgba(34, 197, 94, 0.7); box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); border-color: rgba(34, 197, 94, 0.5); }
.production-tier-blue { outline: 2px solid rgba(59, 130, 246, 0.7); box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); border-color: rgba(59, 130, 246, 0.5); }
.production-tier-mauve { outline: 2px solid rgba(167, 139, 250, 0.7); box-shadow: 0 0 12px rgba(167, 139, 250, 0.45); border-color: rgba(167, 139, 250, 0.55); }
.production-tier-orange { outline: 2px solid rgba(249, 115, 22, 0.7); box-shadow: 0 0 12px rgba(249, 115, 22, 0.45); border-color: rgba(249, 115, 22, 0.55); }
.production-tier-cyan { outline: 2px solid rgba(34, 211, 238, 0.7); box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); border-color: rgba(34, 211, 238, 0.6); }
.production-card-can-upgrade.production-tier-green { box-shadow: 0 0 16px rgba(34, 197, 94, 0.5); }
.production-card-can-upgrade.production-tier-blue { box-shadow: 0 0 16px rgba(59, 130, 246, 0.5); }
.production-card-can-upgrade.production-tier-mauve { box-shadow: 0 0 16px rgba(167, 139, 250, 0.55); }
.production-card-can-upgrade.production-tier-orange { box-shadow: 0 0 16px rgba(249, 115, 22, 0.55); }
.production-card-can-upgrade.production-tier-cyan { box-shadow: 0 0 18px rgba(34, 211, 238, 0.6); }
.production-card-can-upgrade:hover { filter: brightness(1.05); }
.production-card-flash {
	animation: production-card-flash 0.4s ease;
}
@keyframes production-card-flash {
	0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.6); filter: brightness(1.1); }
	50% { box-shadow: 0 0 24px 8px rgba(167, 139, 250, 0.4); filter: brightness(1.15); }
	100% { filter: brightness(1); }
}
.production-icon {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
	background: rgba(40, 40, 50, 0.6);
	margin-bottom: 8px;
}
.production-name {
	margin: 0 0 8px 0;
	font-size: 1.05rem;
	color: #e0e0e0;
}
.production-meta,
.production-cost {
	margin: 4px 0;
	font-size: 13px;
	color: #a0a0b0;
}
.production-cost {
	font-size: 12px;
	margin-bottom: 6px;
}
.production-insufficient {
	color: #f87171;
	font-size: 12px;
	margin: 4px 0;
}
.production-insufficient.hidden {
	display: none;
}
.production-btn-upgrade {
	margin-top: 8px;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	background: linear-gradient(145deg, #166534, #15803d);
	border: 1px solid #22c55e;
	color: #fff;
	cursor: pointer;
	transition: box-shadow 0.2s, transform 0.15s;
}
.production-btn-upgrade:hover:not(:disabled) {
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
	transform: translateY(-1px);
}
.production-btn-upgrade:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

@media (max-width: 480px) {
	.business-grid {
		grid-template-columns: 1fr;
	}
	.business-actions {
		flex-direction: column;
	}
	.business-btn {
		min-width: 100%;
	}
	.business-buy-max {
		font-size: 13px;
		min-width: 0;
		width: 100%;
	}
	.business-buy-max-line1,
	.business-buy-max-line2 {
		font-size: 13px;
	}
}

/* ——— Banque ——— */
.bank-panel {
	max-width: 420px;
}

.bank-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bank-tab-btn {
	padding: 10px 18px;
	font-size: 0.95rem;
	font-weight: 500;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #94a3b8;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.bank-tab-btn:hover {
	color: #e2e8f0;
}

.bank-tab-btn.active {
	color: #22c55e;
	border-bottom-color: #22c55e;
}

.bank-tab-panel.hidden {
	display: none;
}

.bank-card {
	padding: 20px;
}

.bank-row {
	margin: 10px 0;
	font-size: 1rem;
	color: #c0c0d0;
}

.bank-row strong {
	color: #e0e0e8;
}

.bank-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.bank-btn {
	flex: 1;
	min-width: 120px;
	font-size: 13px;
	padding: 10px 14px;
	transition: opacity 0.2s, box-shadow 0.2s;
}

.bank-btn.bank-btn-ok {
	background: rgba(22, 101, 52, 0.5);
	border: 1px solid #22c55e;
	color: #e8f5e9;
}

.bank-btn.bank-btn-ok:hover:not(:disabled) {
	background: rgba(22, 101, 52, 0.7);
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.bank-btn.bank-btn-disabled {
	background: rgba(127, 29, 29, 0.4);
	border: 1px solid #dc2626;
	color: #fecaca;
}

.bank-btn.bank-btn-disabled:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.bank-card-flash {
	animation: bank-card-flash 0.35s ease;
}

@keyframes bank-card-flash {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
	50% { box-shadow: 0 0 18px 4px rgba(34, 197, 94, 0.35); }
	100% { box-shadow: none; }
}

@media (max-width: 480px) {
	.bank-actions {
		flex-direction: column;
	}
	.bank-btn {
		min-width: 100%;
	}
}

.hidden {
	display: none !important;
}

/* ——— Gang (guildes) ——— */
.gang-panel {
	margin-top: 12px;
	transition: opacity 0.25s ease;
}
.gang-panel.gang-panel-fade-out {
	opacity: 0;
}
.gang-key-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
#clef-container,
.gang-key-visual {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	flex-shrink: 0;
}
#img-clef,
.icon-clef-gang {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
	opacity: 0.5;
	transition: opacity 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
#img-clef.active,
.icon-clef-gang.active {
	opacity: 1;
	filter: brightness(1.1);
}
#img-clef.active:not(.glow-pulse),
.icon-clef-gang.active:not(.glow-pulse) {
	box-shadow: 0 0 12px purple, 0 0 24px rgba(167, 139, 250, 0.4);
}
@keyframes pulse {
	0% {
		box-shadow: 0 0 10px rgba(148, 0, 211, 0.7);
	}
	50% {
		box-shadow: 0 0 25px rgba(148, 0, 211, 1);
	}
	100% {
		box-shadow: 0 0 10px rgba(148, 0, 211, 0.7);
	}
}
#img-clef.glow-pulse,
.icon-clef-gang.glow-pulse {
	animation: pulse 1.5s infinite;
	border-radius: 10px;
}
#timer-clef {
	font-size: 14px;
	color: #fff;
}
.gang-key-status.gang-key-crafting {
	opacity: 0.92;
}
.gang-key-status.gang-key-crafting .gang-key-visual {
	position: relative;
}
.gang-key-timer,
#gang-key-craft-timer,
#gang-key-craft-timer-text {
	font-variant-numeric: tabular-nums;
}
.icon-clef-gang.crafting {
	filter: brightness(0.7);
}
.icon-clef-gang.locked {
	opacity: 0.6;
	filter: grayscale(0.5);
}
.gang-key-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	pointer-events: none;
}
.gang-key-overlay-text {
	font-size: 11px;
	color: #e0e0e0;
	font-weight: 600;
}
.gang-key-overlay .gang-key-timer {
	font-size: 12px;
	color: #a78bfa;
}
.gang-key-msg {
	margin: 0;
	flex: 1;
	min-width: 200px;
}
.gang-key-timer {
	font-size: 13px;
	color: #94a3b8;
	margin: 4px 0 0 0;
}
.gang-actions {
	margin-bottom: 20px;
}
.gang-btn-create {
	background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.gang-btn-create:hover {
	opacity: 0.95;
}
.gang-list-title {
	font-size: 1.1rem;
	color: #a78bfa;
	margin: 16px 0 12px 0;
}
.gang-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.gang-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px;
}
.gang-card-logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 10px;
}
.gang-card-name {
	font-weight: 600;
	margin: 0 0 6px 0;
	color: #e0e0e0;
	font-size: 1rem;
}
.gang-card-meta {
	font-size: 12px;
	color: #94a3b8;
	margin: 0 0 12px 0;
}
.gang-card .gang-btn {
	margin-top: auto;
	padding: 8px 16px;
	font-size: 13px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #e0e0e0;
	cursor: pointer;
}
.gang-card .gang-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}
.gang-my-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	max-width: 560px;
	min-width: 0;
	margin-bottom: 20px;
	padding: 20px;
}
.gang-my-card .gang-logo {
	width: 72px;
	height: 72px;
	min-width: 72px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	margin: 0;
}
.gang-logo .gang-logo-img,
.gang-list-logo .gang-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
}
.gang-logo .gang-logo-emoji,
.gang-list-logo .gang-logo-emoji {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	font-size: inherit;
}
.gang-my-card-body {
	flex: 1;
	min-width: 0;
}
.gang-my-card-title {
	margin: 0 0 6px 0;
	font-size: 14px;
	color: #94a3b8;
	font-weight: 600;
}
.gang-my-card .gang-name {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 6px 0;
	color: #e0e0e0;
}
.gang-my-card .gang-meta,
.gang-my-card .gang-rank,
.gang-my-card .gang-bonus {
	font-size: 13px;
	color: #94a3b8;
	margin: 0 0 4px 0;
}
.gang-my-card-actions {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gang-my-card .gang-btn {
	margin: 0;
	padding: 8px 14px;
	font-size: 13px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #e0e0e0;
	cursor: pointer;
}
.gang-btn-leave {
	background: rgba(220, 38, 38, 0.25);
	color: #fca5a5;
	border-color: rgba(220, 38, 38, 0.4);
}
.gang-btn-leave:hover {
	background: rgba(220, 38, 38, 0.35);
}

/* Onglets Accueil / Coffre fort (membre dans un gang) */
.gang-member-tabs-wrap {
	margin-bottom: 0;
}
.gang-member-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.25);
	background: rgba(15, 23, 42, 0.65);
	border-radius: 10px 10px 0 0;
	padding: 4px 8px 0 8px;
}
.gang-member-tab {
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	background: rgba(30, 41, 59, 0.4);
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	transition: color 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
	margin-bottom: -1px;
}
.gang-member-tab:hover {
	color: #cbd5e1;
	background: rgba(30, 41, 59, 0.7);
	box-shadow: 0 0 14px rgba(167, 139, 250, 0.2);
}
.gang-member-tab.active {
	color: #a78bfa;
	background: rgba(30, 41, 59, 0.85);
	border-bottom-color: #a78bfa;
	box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}
.gang-member-panel {
	padding: 20px;
	margin-top: 0;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-top: none;
	border-radius: 0 0 10px 10px;
	background: rgba(30, 41, 59, 0.4);
}
.gang-member-panel.hidden {
	display: none !important;
}

/* Coffre fort */
.gang-vault-title {
	margin: 0 0 8px 0;
	font-size: 1.1rem;
	color: #e2e8f0;
}
.gang-vault-desc {
	font-size: 13px;
	color: #94a3b8;
	margin: 0 0 16px 0;
}

/* ——— Arbre de recherche (section + onglet Gang) ——— */
.research-intro {
	margin: 0 0 14px 0;
	font-size: 0.9rem;
	color: #94a3b8;
	line-height: 1.4;
}
.research-section {
	position: relative;
	min-height: 200px;
}
.research-overlay-lock {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.85);
	border-radius: 12px;
	z-index: 2;
}
.research-lock-msg {
	font-size: 1.1rem;
	color: #a78bfa;
	margin: 0 0 8px 0;
}
.research-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px 0;
}
.research-tab-btn {
	padding: 8px 14px;
	background: rgba(30, 41, 59, 0.8);
	border: 1px solid rgba(148, 163, 184, 0.3);
	border-radius: 8px;
	color: #e2e8f0;
	font-size: 0.9rem;
	cursor: pointer;
}
.research-tab-btn.active {
	background: rgba(167, 139, 250, 0.3);
	border-color: rgba(167, 139, 250, 0.6);
}
.research-tree {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	padding: 16px 0;
}
.research-node {
	padding: 14px;
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.25);
	background: rgba(30, 41, 59, 0.7);
	transition: box-shadow 0.2s;
}
.research-node-inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.research-node-name {
	font-weight: 700;
	color: #e2e8f0;
	font-size: 0.95rem;
}
.research-node-bonus-wrap { display: block; margin-top: 4px; }
.research-node-bonus-label { font-size: 0.8rem; color: #94a3b8; font-weight: 600; }
.research-node-bonus {
	font-size: 0.8rem;
	color: #86efac;
}
.research-node-cost {
	font-size: 0.85rem;
	color: #94a3b8;
}
.research-node-timer {
	font-size: 0.85rem;
	color: #fbbf24;
}
.research-node-reductions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}
/* Bouton AIDE recherche : vert, glow pulse + pastille pour attirer l'œil */
.research-help-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.research-help-btn.research-help-glow {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(22, 163, 74, 0.5));
	border: 1px solid rgba(34, 197, 94, 0.7);
	color: #bbf7d0;
	font-weight: 700;
	animation: research-help-glow-pulse 1.2s ease-in-out infinite;
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}
.research-help-btn.research-help-glow:hover {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(22, 163, 74, 0.65));
	box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.3);
}
@keyframes research-help-glow-pulse {
	0%, 100% {
		box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.25);
	}
	50% {
		box-shadow: 0 0 18px rgba(34, 197, 94, 0.8), 0 0 28px rgba(34, 197, 94, 0.4);
	}
}
.research-help-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #052e16;
	background: #22c55e;
	border: 2px solid #bbf7d0;
	border-radius: 50%;
	animation: research-help-badge-pulse 1.2s ease-in-out infinite;
	pointer-events: none;
}
@keyframes research-help-badge-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.95; }
}
.research-reduction-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	min-height: 32px;
	border-radius: 6px;
	background: rgba(30, 41, 59, 0.8);
	border: 1px solid rgba(148, 163, 184, 0.3);
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.research-reduction-btn:hover {
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
	transform: scale(1.05);
}
.research-reduction-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
.research-reduction-count {
	font-size: 0.75rem;
	font-weight: 700;
	color: #e2e8f0;
}
.research-node-done { border-color: rgba(34, 197, 94, 0.5); background: rgba(22, 101, 52, 0.2); }
.research-node-progress { border-color: rgba(251, 191, 36, 0.5); background: rgba(120, 53, 15, 0.2); }
.research-node-available { border-color: rgba(167, 139, 250, 0.5); cursor: pointer; }
.research-node-locked { opacity: 0.75; }
.research-node-btn { margin-top: 6px; padding: 6px 12px; font-size: 0.85rem; }
.research-node-done-label { color: #22c55e; font-weight: 700; }
.research-node-locked-label { font-size: 0.8rem; color: #94a3b8; }
.research-node-prereq { display: block; font-size: 0.8rem; margin-top: 4px; font-weight: 600; }
.research-node-prereq-red { color: #ef4444; }
.research-node-prereq-green { color: #22c55e; }

.gang-hq-bonus-active {
	margin: 0 0 12px 0;
	font-size: 14px;
	color: #86efac;
}
.gang-hq-bonus-inactive {
	margin: 0 0 12px 0;
	font-size: 13px;
	color: #94a3b8;
}
.gang-hq-progress-wrap {
	margin-top: 16px;
	padding: 14px;
	background: rgba(15, 23, 42, 0.5);
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.2);
}
.gang-hq-cost-label {
	margin: 0 0 6px 0;
	font-size: 13px;
	color: #94a3b8;
}
.gang-hq-cost {
	margin: 0 0 4px 0;
	font-size: 13px;
	color: #e2e8f0;
}
.gang-hq-cost-source {
	margin: 0 0 12px 0;
	font-size: 12px;
	color: #64748b;
}
.gang-hq-btn {
	padding: 10px 18px;
	background: rgba(167, 139, 250, 0.25);
	border: 1px solid rgba(167, 139, 250, 0.5);
	color: #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}
.gang-hq-btn:hover:not(:disabled) {
	background: rgba(167, 139, 250, 0.4);
	box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}
.gang-hq-btn.gang-hq-btn-disabled:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.gang-vault-stock {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px 20px;
	margin-bottom: 20px;
	padding: 14px;
	background: rgba(15, 23, 42, 0.5);
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.15);
}
.gang-vault-stock-item {
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: 6px;
}
.gang-vault-stock-item strong { color: #a78bfa; }
.gang-vault-res-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
}
.gang-vault-deposit {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}
.gang-vault-deposit h4 {
	margin: 0 0 8px 0;
	font-size: 14px;
	color: #e2e8f0;
	grid-column: 1 / -1;
}
.gang-vault-deposit .gang-vault-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 10px 12px;
	background: rgba(15, 23, 42, 0.4);
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.15);
}
.gang-vault-deposit .gang-vault-row label {
	font-size: 12px;
	font-weight: 600;
	color: #94a3b8;
	margin: 0;
}
.gang-vault-deposit .gang-vault-row .gang-vault-input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.gang-vault-input {
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.3);
	background: rgba(15, 23, 42, 0.6);
	color: #e2e8f0;
	font-size: 14px;
}
.gang-vault-deposit .gang-vault-btn {
	padding: 8px 12px;
	font-size: 12px;
	border-radius: 6px;
	background: rgba(167, 139, 250, 0.2);
	border: 1px solid rgba(167, 139, 250, 0.4);
	color: #c4b5fd;
	cursor: pointer;
}
.gang-vault-deposit .gang-vault-btn:hover {
	background: rgba(167, 139, 250, 0.3);
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.25);
}

/* Onglet Membres - tableau */
.gang-membres-table-wrap {
	overflow-x: auto;
	margin-top: 12px;
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.2);
	background: rgba(15, 23, 42, 0.4);
}
.gang-membres-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.gang-membres-table thead {
	background: rgba(30, 41, 59, 0.8);
}
.gang-membres-table th {
	padding: 12px 14px;
	text-align: left;
	font-weight: 600;
	color: #94a3b8;
	border-bottom: 2px solid rgba(167, 139, 250, 0.35);
	white-space: nowrap;
}
.gang-membres-table tbody tr {
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.gang-membres-table tbody tr:hover {
	background: rgba(30, 41, 59, 0.5);
}
.gang-membres-table td {
	padding: 10px 14px;
	color: #e2e8f0;
}
.gang-membres-table .gang-membre-pseudo {
	color: #e2e8f0;
	font-weight: 600;
}
.gang-membres-table .gang-membre-rank {
	color: #a78bfa;
}
.gang-membres-table .gang-membre-level,
.gang-membres-table .gang-membre-power {
	text-align: center;
	color: #c4b5fd;
}
.gang-membres-table .gang-membre-contrib {
	text-align: center;
	color: #fbbf24;
}

/* Onglet Boss de gang */
.gang-boss-honor {
	margin: 0 0 16px 0;
	font-size: 14px;
	color: #e2e8f0;
}
.gang-boss-honor strong { color: #fbbf24; }
.gang-boss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 16px;
}
.gang-boss-card {
	position: relative;
	padding: 16px;
	background: rgba(30, 41, 59, 0.5);
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 12px;
	overflow: hidden;
}
.gang-boss-card.gang-boss-locked {
	opacity: 0.85;
}
.gang-boss-card.gang-boss-dead {
	opacity: 0.7;
	border-color: rgba(148, 163, 184, 0.15);
}
.gang-boss-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(15, 23, 42, 0.88);
	border-radius: 12px;
	z-index: 2;
	color: #94a3b8;
	font-size: 13px;
}
.gang-boss-overlay-cooldown {
	background: rgba(15, 23, 42, 0.92);
}
.gang-boss-lock-icon {
	font-size: 28px;
	animation: gang-boss-lock-glow 2s ease-in-out infinite;
}
@keyframes gang-boss-lock-glow {
	0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5)); }
	50% { opacity: 0.85; filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.7)); }
}
.gang-boss-reset-msg {
	font-weight: 600;
	color: #a78bfa;
}
.gang-boss-reset-timer {
	font-family: monospace;
	font-size: 14px;
	color: #c4b5fd;
}
.gang-boss-card-inner {
	position: relative;
	z-index: 1;
}
.gang-boss-img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	display: block;
	margin: 0 auto 10px;
	border-radius: 8px;
}
.gang-boss-name {
	margin: 0 0 6px 0;
	font-size: 14px;
	font-weight: 700;
	color: #e2e8f0;
	text-align: center;
}
.gang-boss-meta {
	margin: 0 0 10px 0;
	font-size: 12px;
	color: #94a3b8;
	text-align: center;
}
.gang-boss-hp-wrap {
	margin-bottom: 10px;
}
.gang-boss-hp-bar {
	height: 8px;
	background: rgba(15, 23, 42, 0.8);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 4px;
}
.gang-boss-hp-fill {
	height: 100%;
	background: linear-gradient(90deg, #22c55e, #eab308);
	border-radius: 4px;
	transition: width 0.3s ease;
}
.gang-boss-hp-text {
	font-size: 11px;
	color: #94a3b8;
}
.gang-boss-defeated {
	margin: 0 0 10px 0;
	font-size: 12px;
	color: #22c55e;
	text-align: center;
	font-weight: 600;
}
.gang-boss-participants {
	margin: 0 0 12px 0;
	font-size: 12px;
	color: #94a3b8;
}
.gang-boss-participants strong { color: #a78bfa; }
.gang-boss-btn-fight {
	width: 100%;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 8px;
	background: rgba(167, 139, 250, 0.25);
	border: 1px solid rgba(167, 139, 250, 0.5);
	color: #e2e8f0;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
}
.gang-boss-btn-fight:hover:not(:disabled) {
	background: rgba(167, 139, 250, 0.4);
	box-shadow: 0 0 14px rgba(167, 139, 250, 0.35);
}
.gang-boss-btn-fight.gang-boss-btn-disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Bandeau info gang */
.gang-info-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 12px 16px;
	margin-bottom: 16px;
	background: rgba(30, 41, 59, 0.6);
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 10px;
	position: relative;
}
.gang-info-item {
	font-size: 14px;
	color: #e2e8f0;
}
.gang-info-item strong { color: #a78bfa; }
.gang-info-locked {
	margin: 0;
	width: 100%;
	font-size: 13px;
	color: #fbbf24;
}
.gang-admin-badge {
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fcd34d;
	background: rgba(245, 158, 11, 0.25);
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid rgba(245, 158, 11, 0.5);
}

/* Onglets Créer / Rejoindre */
.gang-tabs-wrap {
	margin-top: 20px;
}
.gang-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.25);
	background: rgba(15, 23, 42, 0.65);
	border-radius: 10px 10px 0 0;
	padding: 4px 8px 0 8px;
}
.gang-tab {
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	background: rgba(30, 41, 59, 0.4);
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	transition: color 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
	margin-bottom: -1px;
}
.gang-tab:hover {
	color: #cbd5e1;
	background: rgba(30, 41, 59, 0.7);
	box-shadow: 0 0 16px rgba(167, 139, 250, 0.35), 0 -2px 0 0 rgba(167, 139, 250, 0.2);
}
.gang-tab.active {
	color: #a78bfa;
	background: rgba(30, 41, 59, 0.85);
	border-bottom-color: #a78bfa;
	box-shadow: 0 0 18px rgba(167, 139, 250, 0.45), 0 0 8px rgba(167, 139, 250, 0.25);
}
.gang-form-actions .btn:hover,
.gang-btn-create:hover,
.gang-btn-join:hover {
	box-shadow: 0 0 14px rgba(167, 139, 250, 0.3);
}
.gang-tab.gang-tab-locked {
	opacity: 0.85;
	cursor: not-allowed;
}
@keyframes gang-tab-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}
.gang-tab.gang-tab-shake {
	animation: gang-tab-shake 0.4s ease;
}
.gang-tab-panel {
	padding: 20px;
	margin-top: 0;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-top: none;
	border-radius: 0 0 10px 10px;
	background: rgba(30, 41, 59, 0.4);
}
.gang-tab-panel.hidden {
	display: none !important;
}
.gang-tab-panel label {
	display: block;
	margin: 8px 0 4px 0;
	font-size: 13px;
	color: #94a3b8;
}
.gang-tab-panel .gang-input,
.gang-tab-panel .gang-select {
	width: 100%;
	max-width: 280px;
	padding: 10px 12px;
	margin-bottom: 12px;
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.3);
	background: rgba(15, 23, 42, 0.6);
	color: #e2e8f0;
}
.gang-input-tag { max-width: 80px; text-transform: uppercase; }
.gang-input-color {
	width: 60px;
	height: 36px;
	padding: 2px;
	cursor: pointer;
	border-radius: 8px;
	vertical-align: middle;
}
.gang-cost {
	font-size: 13px;
	color: #94a3b8;
	margin: 12px 0;
}
.gang-feedback {
	min-height: 20px;
	font-size: 13px;
	margin: 8px 0;
}
.gang-feedback-error { color: #f87171; }
.gang-feedback-ok { color: #86efac; }
.gang-form-actions {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}
.gang-form-actions .btn { padding: 10px 18px; }

/* Liste rejoindre */
.gang-list-join {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.gang-list-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 10px;
	background: rgba(30, 41, 59, 0.5);
	transition: box-shadow 0.2s;
}
.gang-list-item:hover {
	box-shadow: 0 0 14px rgba(167, 139, 250, 0.15);
}
.gang-list-logo {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
}
.gang-list-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.gang-list-name { font-weight: 600; color: #e2e8f0; }
.gang-list-tag { color: #a78bfa; font-size: 13px; }
.gang-list-meta { font-size: 12px; color: #94a3b8; }
.gang-list-empty {
	padding: 24px;
	text-align: center;
	color: #94a3b8;
	font-style: italic;
}
.gang-tag { color: #a78bfa; font-size: 0.9em; }
.gang-logo-glow { transition: box-shadow 0.2s; }

@keyframes gang-fade-success {
	0% { opacity: 1; }
	50% { opacity: 0.7; background-color: rgba(34, 197, 94, 0.08); }
	100% { opacity: 1; }
}
.gang-fade-success {
	animation: gang-fade-success 0.6s ease;
}

.topbar-row-gang {
	font-size: 12px;
	color: #94a3b8;
	padding: 4px 0 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	margin-top: 4px;
}
.tb-gang-name { color: #a78bfa; font-weight: 600; }
.tb-gang-rank { color: #94a3b8; }
.tb-gang-my-honor { color: #eab308; }
.tb-gang-bonus { color: #86efac; font-size: 11px; }

.modal-overlay.gang-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 8200;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.modal-overlay.gang-modal-overlay.show {
	display: flex;
	opacity: 1;
}
.gang-modal-overlay .modal {
	min-width: 300px;
	max-width: 95%;
	padding: 24px;
}
.gang-modal-overlay .modal h3 {
	margin: 0 0 16px 0;
	color: #a78bfa;
	font-size: 1.2rem;
}
.gang-modal-overlay label {
	display: block;
	margin: 8px 0 4px 0;
	font-size: 13px;
	color: #94a3b8;
}
.gang-input, .gang-select {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(0, 0, 0, 0.3);
	color: #e0e0e0;
	font-size: 14px;
	box-sizing: border-box;
}
.gang-cost {
	margin: 12px 0;
	font-size: 13px;
	color: #94a3b8;
}
.modal-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	justify-content: flex-end;
}
.gang-detail-modal .gang-detail-logo {
	width: 72px;
	height: 72px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	margin: 0 auto 12px auto;
}
.gang-detail-modal .gang-detail-logo .gang-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
}
.gang-detail-modal .gang-detail-logo .gang-logo-emoji {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
}
.gang-create-image-instructions {
	font-size: 13px;
	color: #94a3b8;
	margin: 8px 0 6px 0;
	line-height: 1.4;
}
.gang-create-image-preview {
	min-height: 24px;
	margin: 10px 0;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
}
.gang-create-image-preview-ok .gang-create-image-preview-img {
	max-width: 80px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.gang-create-image-preview-error {
	font-size: 12px;
	color: #f87171;
	padding: 8px;
}
.gang-detail-meta {
	font-size: 13px;
	color: #94a3b8;
	margin: 0 0 16px 0;
}
.gang-detail-members {
	list-style: none;
	padding: 0;
	margin: 0 0 16px 0;
	font-size: 13px;
	color: #c0c0d0;
}
.gang-detail-members li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ——— Boss ——— */
.boss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.boss-card {
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: box-shadow 0.25s ease;
}

.boss-card-flash {
	animation: boss-card-flash 0.3s ease;
}

@keyframes boss-card-flash {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
	50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.4); }
	100% { box-shadow: none; }
}

.boss-img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	border-radius: 10px;
	background: rgba(40, 40, 50, 0.6);
	margin-bottom: 10px;
}

.boss-level-rarity {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 0.75rem;
	flex-wrap: wrap;
}

.boss-victories-hint {
	margin: 4px 0 0 0;
	font-size: 0.75rem;
	color: #94a3b8;
}

.boss-level {
	background: rgba(80, 80, 100, 0.8);
	color: #c0c0d0;
	padding: 2px 8px;
	border-radius: 6px;
	font-weight: 600;
}

.boss-rarity-label {
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
}

.boss-rarity-0 .boss-rarity-label { color: #9ca3af; background: rgba(156, 163, 175, 0.2); }
.boss-rarity-1 .boss-rarity-label { color: #60a5fa; background: rgba(96, 165, 250, 0.2); }
.boss-rarity-2 .boss-rarity-label { color: #a78bfa; background: rgba(167, 139, 250, 0.2); }
.boss-rarity-3 .boss-rarity-label { color: #fbbf24; background: rgba(251, 191, 36, 0.2); }
.boss-rarity-4 .boss-rarity-label { color: #f97316; background: rgba(249, 115, 22, 0.25); }

.boss-rarity-4.boss-card { border: 1px solid rgba(249, 115, 22, 0.4); }

.boss-name {
	margin: 0 0 8px 0;
	font-size: 1.05rem;
	color: #e0e0e0;
	line-height: 1.25;
}

/* Barre de PV du boss : dans la card, sous le nom, largeur 100% de la card */
.boss-card .boss-bar-wrap {
	width: 100%;
	max-width: 100%;
	margin: 8px 0 12px 0;
	font-size: 11px;
	color: #a0a0b0;
	box-sizing: border-box;
}

.boss-card .boss-bar-track {
	width: 100%;
	height: 14px;
	background: rgba(30, 30, 38, 0.95);
	border-radius: 7px;
	overflow: hidden;
	margin-bottom: 4px;
	border: 1px solid rgba(120, 40, 40, 0.5);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.boss-card .boss-bar-fill {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: width 0.2s ease-out;
	min-width: 0;
}

.boss-card .boss-bar-fill-low {
	background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #991b1b 100%);
	box-shadow: 0 0 12px rgba(239, 68, 68, 0.55), 0 0 6px rgba(185, 28, 28, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.boss-card .boss-bar-text {
	font-weight: 600;
	color: #e0e0e0;
	font-size: 12px;
}

.boss-card-victory {
	animation: boss-card-victory 0.8s ease;
}

@keyframes boss-card-victory {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
	40% { box-shadow: 0 0 30px 8px rgba(34, 197, 94, 0.5); }
	100% { box-shadow: none; }
}

.boss-card .boss-meta {
	margin: 4px 0;
	font-size: 12px;
	color: #a0a0b0;
}

.boss-msg {
	margin: 4px 0 0 0;
	font-size: 0.8rem;
	color: #f87171;
	font-weight: 500;
}

.boss-no-energy,
.boss-no-fights {
	display: none;
}

.boss-reset-timer {
	display: none;
	margin-top: 2px;
	font-size: 0.85rem;
	color: #93c5fd;
	font-weight: 600;
}

/* Timer de combat 1h – visible tant que le combat est actif */
.boss-combat-timer {
	display: none;
	margin-top: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #fcd34d;
	text-shadow: 0 0 6px rgba(252, 211, 77, 0.4);
}
.boss-combat-timer:not(.hidden) {
	display: block;
}
.boss-combat-timer-label {
	color: #e0e0e8;
	font-weight: 500;
}

/* Message temps écoulé (échec combat) */
.boss-timeout-msg {
	display: none;
	margin-top: 4px;
	font-size: 0.85rem;
	color: #f87171;
	font-weight: 600;
}
.boss-timeout-msg:not(.hidden) {
	display: block;
}

.boss-no-energy:not(.hidden),
.boss-no-fights:not(.hidden) {
	display: block;
}

.boss-reset-timer:not(.hidden) {
	display: block;
}

.boss-btn {
	margin-top: 14px;
	width: 100%;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	transition: opacity 0.2s, box-shadow 0.2s;
}

.boss-btn.boss-btn-fight {
	background: rgba(22, 101, 52, 0.5);
	border: 1px solid #22c55e;
	color: #e8f5e9;
}

.boss-btn.boss-btn-fight:hover:not(:disabled) {
	background: rgba(22, 101, 52, 0.7);
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.boss-btn.boss-btn-disabled {
	background: rgba(127, 29, 29, 0.4);
	border: 1px solid #dc2626;
	color: #fecaca;
}

.boss-btn.boss-btn-disabled:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 480px) {
	.boss-grid {
		grid-template-columns: 1fr;
	}
	.boss-img {
		width: 64px;
		height: 64px;
	}
}

/* ——— Arène d'entraînement (bots) ——— */
.arena-subtitle {
	margin: -4px 0 16px 0;
	font-size: 0.9rem;
	color: #94a3b8;
}
.arena-lobby {
	max-width: 420px;
	padding: 20px;
}
.arena-desc {
	margin-bottom: 16px;
	line-height: 1.45;
	color: #a0a0b0;
}
.arena-btn-start {
	background: rgba(59, 130, 246, 0.35);
	border: 1px solid #3b82f6;
	color: #e0f2fe;
	margin-bottom: 8px;
}
.arena-btn-start:hover:not(:disabled) {
	background: rgba(59, 130, 246, 0.5);
}
.arena-msg {
	font-size: 0.85rem;
	color: #f87171;
	margin-top: 8px;
}
.arena-difficulty {
	margin: 0 0 14px 0;
	font-size: 0.9rem;
	color: #a0aec0;
}
.arena-difficulty strong {
	color: #e2e8f0;
}
.arena-difficulty-wins {
	color: #94a3b8;
	font-weight: normal;
}

.arena-auto-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding: 10px 12px;
	background: rgba(30, 30, 38, 0.6);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.arena-auto-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	color: #e0e0e0;
	cursor: pointer;
	user-select: none;
}

.arena-auto-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
	cursor: pointer;
}

.arena-auto-status {
	margin: 0;
	font-size: 0.85rem;
	color: #94a3b8;
	font-style: italic;
}

.arena-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.arena-card {
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: box-shadow 0.25s ease;
}

.arena-card-name {
	margin: 0 0 10px 0;
	font-size: 1.05rem;
	color: #e0e0e0;
}

.arena-card-badge {
	margin: 0 0 8px 0;
	font-size: 11px;
	color: #94a3b8;
}
.arena-card-badge-stats {
	color: #fbbf24;
	font-weight: 600;
}

.arena-card-stats-title {
	margin: 0 0 6px 0;
	font-size: 11px;
	color: #64748b;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.arena-card-stats-block {
	margin-bottom: 12px;
	width: 100%;
}

.arena-card-pv-label {
	margin: 0 0 4px 0;
	font-size: 11px;
	color: #94a3b8;
	font-weight: 600;
}

.arena-card-bar-wrap {
	width: 100%;
	margin-bottom: 10px;
	font-size: 11px;
	color: #a0a0b0;
}

.arena-card-bar-track {
	width: 100%;
	height: 12px;
	background: rgba(30, 30, 38, 0.9);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 4px;
}

.arena-card-bar-fill {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
	transition: width 0.4s ease-out;
	min-width: 0;
}

.arena-card-bar-fill-low {
	background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
}

.arena-card-bar-text {
	font-weight: 600;
	color: #e0e0e0;
}

.arena-card-meta {
	margin: 4px 0 10px 0;
	font-size: 12px;
	color: #a0a0b0;
}

.arena-card .arena-btn {
	margin-top: auto;
}

.arena-btn-fight {
	background: rgba(59, 130, 246, 0.35);
	border: 1px solid #3b82f6;
	color: #e0f2fe;
}

.arena-btn-fight:hover:not(:disabled) {
	background: rgba(59, 130, 246, 0.5);
}

.arena-btn-disabled,
.arena-card .arena-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.arena-duel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
	padding: 20px;
}
.arena-fighter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.arena-fighter-name {
	font-weight: 600;
	color: #e0e0e8;
}
.arena-bot-label {
	font-size: 0.75rem;
	color: #94a3b8;
	text-transform: uppercase;
}
.arena-fighter-level {
	font-size: 0.85rem;
	color: #a0a0b0;
}
.arena-bar-wrap {
	width: 100%;
	font-size: 12px;
	color: #a0a0b0;
}
.arena-bar-track {
	width: 100%;
	height: 14px;
	background: rgba(30, 30, 38, 0.9);
	border-radius: 7px;
	overflow: hidden;
	margin-bottom: 4px;
}
.arena-bar-fill {
	height: 100%;
	border-radius: 6px;
	transition: width 0.35s ease-out, background 0.5s ease;
	min-width: 0;
}
.arena-bar-fill.arena-bar-pv-full { background: linear-gradient(90deg, #28a745, #34d399); }
.arena-bar-fill.arena-bar-pv-mid  { background: linear-gradient(90deg, #ffc107, #fbbf24); }
.arena-bar-fill.arena-bar-pv-low  { background: linear-gradient(90deg, #dc3545, #ef4444); }
.arena-bot .arena-bar-fill {
	background: linear-gradient(90deg, #7c3aed, #a855f7);
}
.arena-bar-text {
	font-weight: 600;
	color: #e0e0e0;
}
.arena-bot-stats {
	margin: 4px 0 0 0;
	font-size: 0.8rem;
	color: #888;
}
.arena-vs {
	text-align: center;
	font-weight: 700;
	font-size: 1.1rem;
	color: #64748b;
}
.arena-cooldown {
	margin: 0;
	font-size: 0.9rem;
	color: #94a3b8;
}
.arena-btn-attack {
	background: rgba(34, 197, 94, 0.4);
	border: 1px solid #22c55e;
	color: #dcfce7;
	font-weight: 600;
}
.arena-btn-attack:hover:not(:disabled) {
	background: rgba(34, 197, 94, 0.55);
}
.arena-btn-attack:disabled,
.arena-btn-attack.arena-btn-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn {
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: rgba(60, 60, 75, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
}

.btn:hover {
	background: rgba(80, 80, 95, 0.95);
}

.btn:active {
	transform: scale(0.98);
}

.btn-confirm {
	background: #2563eb;
	border-color: #3b82f6;
}

.btn-confirm:hover {
	background: #1d4ed8;
}

.tutorial-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9000;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.tutorial-overlay.show {
	display: flex;
	opacity: 1;
}

/* ——— Tutoriel : étape focus (spotlight sur un bouton) ——— */
.tutorial-focus-wrap {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9002;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 90%;
	width: 360px;
	padding: 18px 22px;
	background: rgba(20, 20, 28, 0.98);
	border: 1px solid rgba(167, 139, 250, 0.35);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(167, 139, 250, 0.15);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.tutorial-overlay.show .tutorial-focus-wrap.tutorial-focus-visible {
	display: flex;
	opacity: 1;
}
.tutorial-focus-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #e0e0e0;
	text-align: center;
}
.tutorial-skip-btn {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 9003;
	padding: 8px 14px;
	font-size: 0.85rem;
	background: rgba(100, 100, 120, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: #94a3b8;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.tutorial-skip-btn:hover {
	background: rgba(120, 120, 140, 0.8);
	color: #e0e0e0;
}

/* Animation d’attention sur l’élément cible (zoom + halo + pulsation) */
.tut-highlight {
	animation: tut-highlight-pulse 1.5s ease-in-out infinite;
	position: relative;
	z-index: 9001;
}

/* ========== Tutoriel CRIMES : AUCUN blur/overlay pendant interaction ========== */
   1. Isoler le bouton CRIME : zoom + au-dessus de tout, sans déplacer le menu ni le reste de la page.
   2. Flou léger sur l’arrière-plan (overlay avec backdrop-filter), sauf visuellement sur le bouton (clip-path).
   3. Menu de navigation : reste FIXE à sa place (on ne touche pas à position) avec z-index > overlay pour recevoir les clics.
   4. Après quelques secondes (JS), overlay et zoom disparaissent → écran normal → le joueur peut faire les 2 crimes.
   5. Le bouton CRIME brille / pulse pour attirer l’attention. */

/* Overlay en mode "spotlight" : fond semi-transparent + flou léger. z-index 9000 (inférieur au menu en spotlight).
   pointer-events: none pour que les clics traversent l’overlay et atteignent le menu (bouton CRIME cliquable). */
/* Étape CRIMES : overlay masqué (display: none). Page nette, crimes cliquables, 0 blocage. */
.tutorial-overlay.tutorial-crime-interaction-mode {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* RÉSERVÉ aux autres étapes spotlight, JAMAIS utilisé pour CRIMES (évite soft-lock). */
.tutorial-overlay.tutorial-spotlight {
	position: fixed;
	inset: 0;
	z-index: 8999;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: none;
}

/* Enfants de l’overlay (tooltip, Passer) : ils doivent rester cliquables. */
.tutorial-overlay.tutorial-spotlight .tutorial-box,
.tutorial-overlay.tutorial-spotlight .tutorial-focus-wrap,
.tutorial-overlay.tutorial-spotlight .tutorial-skip-btn {
	pointer-events: auto;
}

/* Bouton CRIME uniquement : zoom + pulsation/brillance. Le menu lui ne bouge pas (pas de transform sur .menu). */
/* Bouton CRIME : glow pulse UNIQUEMENT. AUCUN transform/scale (évite les bugs de layout). */
.tut-crime-glow {
	animation: tut-crime-glow-pulse 1s ease-in-out infinite;
	outline: 2px solid rgba(167, 139, 250, 0.6);
	outline-offset: 2px;
}

@keyframes tut-crime-glow-pulse {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.5), 0 0 20px rgba(167, 139, 250, 0.3);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.7), 0 0 30px rgba(167, 139, 250, 0.5);
	}
}

/* Menu : ne pas changer position (garder le position: fixed de .menu) pour qu’il reste à sa place.
   On augmente uniquement z-index (9010 > 9000) pour que le menu soit au-dessus de l’overlay et reçoive les clics. */
.menu.tutorial-spotlight-menu {
	z-index: 9000;
}

@keyframes tut-highlight-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.5), 0 0 16px rgba(167, 139, 250, 0.3);
	}
	50% {
		transform: scale(1.06);
		box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.25), 0 0 24px rgba(167, 139, 250, 0.5);
	}
}

/* Transition fluide entre étapes (dialogue ↔ focus) */
.tutorial-box {
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.tutorial-box.tutorial-step-hidden {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.98);
}

/* Pseudo cliquable → Skill Points */
.tb-pseudo-clickable {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tb-pseudo-clickable:hover {
	opacity: 0.9;
}

/* Modal pseudo : premier lancement uniquement — fond assombri, PAS de blur */
.pseudo-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.pseudo-modal-overlay.show {
	display: flex;
	opacity: 1;
}
.pseudo-modal {
	background: #1a1a1e;
	border: 1px solid rgba(167, 139, 250, 0.35);
	border-radius: 12px;
	padding: 24px;
	min-width: 300px;
	max-width: 95%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.pseudo-modal-title {
	margin: 0 0 16px 0;
	font-size: 1.2rem;
	color: #e0e0e0;
}
.pseudo-modal-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	background: #0d0d0f;
	color: #e0e0e0;
	margin-bottom: 12px;
	box-sizing: border-box;
}
.pseudo-modal-input:focus {
	outline: none;
	border-color: rgba(167, 139, 250, 0.5);
}
.pseudo-modal-error {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
	color: #f87171;
}
.pseudo-modal-error.hidden {
	display: none;
}
.pseudo-modal-btn {
	width: 100%;
}

/* Modal soin PV (Boss, Crime, Arène) */
.heal-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9000;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.heal-modal-overlay.show {
	display: flex;
	opacity: 1;
}
.heal-modal {
	background: #1a1a1e;
	border: 1px solid rgba(34, 197, 94, 0.4);
	border-radius: 12px;
	padding: 24px;
	min-width: 300px;
	max-width: 95%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.heal-modal-title {
	margin: 0 0 12px 0;
	font-size: 1.2rem;
	color: #e0e0e0;
}
.heal-modal-message {
	margin: 0 0 16px 0;
	color: #d1d5db;
	font-size: 0.95rem;
}
.heal-modal-insufficient {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
	color: #f87171;
}
.heal-modal-insufficient.hidden {
	display: none;
}
.heal-modal-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.heal-modal-btn { min-width: 100px; }
.heal-modal-btn-cancel {
	background: rgba(100, 100, 100, 0.4);
	border-color: rgba(255, 255, 255, 0.2);
}

/* Modal Profil (ex-Skill Points) : onglets Stats, Skill Points, Achievements */
.skill-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 8500;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.skill-modal-overlay.show {
	display: flex;
	opacity: 1;
}
.skill-modal {
	min-width: 320px;
	max-width: 95%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px;
}
.player-modal .player-modal-header {
	margin-bottom: 12px;
}
.player-modal-pseudo {
	margin: 4px 0 0 0;
	font-size: 0.95rem;
	color: #94a3b8;
}
.player-modal-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.player-tab-btn {
	flex: 1;
	min-width: 80px;
	padding: 10px 14px;
	font-size: 0.9rem;
}
.player-tab-btn.active {
	border-color: rgba(167, 139, 250, 0.45);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(167, 139, 250, 0.22);
}
.player-modal-content {
	min-height: 200px;
}
.player-tab-panel {
	display: none;
}
.player-tab-panel.active {
	display: block;
}
.player-modal-footer {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.player-modal-footer .btn-reset-profil {
	background: rgba(248, 113, 113, 0.2);
	border: 1px solid rgba(248, 113, 113, 0.5);
	color: #f87171;
	margin-right: auto;
}
.player-modal-footer .btn-reset-profil:hover {
	background: rgba(248, 113, 113, 0.35);
	border-color: rgba(248, 113, 113, 0.7);
}
.player-modal-footer .skill-close-btn {
	margin-left: auto;
}
.player-stats-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}
.player-stat-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 8px;
}
.player-stat-label {
	flex: 1;
	min-width: 140px;
	font-size: 0.9rem;
	color: #a0a0b0;
}
.player-stat-value {
	font-weight: 700;
	color: #e0e0e0;
	font-size: 1rem;
}
.player-stat-detail {
	width: 100%;
	font-size: 0.75rem;
	color: #64748b;
	margin-top: 2px;
}
.player-stats-bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.player-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.player-bar-label {
	min-width: 60px;
	font-size: 0.85rem;
	color: #94a3b8;
}
.player-bar-track {
	flex: 1;
	min-width: 80px;
	height: 14px;
	background: rgba(30, 30, 38, 0.9);
	border-radius: 7px;
	overflow: hidden;
}
.player-bar-fill {
	height: 100%;
	border-radius: 7px;
	transition: width 0.35s ease-out, background 0.5s ease;
}
.player-bar-fill-pv.player-bar-pv-full { background: linear-gradient(90deg, #28a745, #34d399); }
.player-bar-fill-pv.player-bar-pv-mid  { background: linear-gradient(90deg, #ffc107, #fbbf24); }
.player-bar-fill-pv.player-bar-pv-low  { background: linear-gradient(90deg, #dc3545, #ef4444); }
.player-bar-fill-en { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.player-bar-fill-vi { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.player-bar-text {
	font-size: 0.85rem;
	font-weight: 600;
	color: #e0e0e0;
	min-width: 50px;
}
.player-achievements-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.player-achievement {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}
.player-achievement-done {
	background: rgba(34, 197, 94, 0.08);
	border-color: rgba(34, 197, 94, 0.25);
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}
.player-achievement-r0 .player-achievement-name { color: #9ca3af; }
.player-achievement-r1 .player-achievement-name { color: #60a5fa; }
.player-achievement-r2 .player-achievement-name { color: #a78bfa; }
.player-achievement-r3 .player-achievement-name { color: #fbbf24; }
.player-achievement-r4 .player-achievement-name { color: #f97316; }
.player-achievement-done.player-achievement-r0 .player-achievement-name { color: #d1d5db; }
.player-achievement-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}
.player-achievement-name {
	font-weight: 500;
	font-size: 0.95rem;
}
.player-achievement-progress {
	flex-basis: 100%;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 2px;
	margin-left: 0;
}

@media (max-width: 480px) {
	.player-modal-tabs {
		flex-wrap: wrap;
	}
	.player-tab-btn {
		min-width: 80px;
	}
	.player-stat-label {
		min-width: 100%;
	}
}

.skill-modal-title {
	margin: 0 0 8px 0;
	font-size: 1.35rem;
	color: #e0e0e0;
}
.skill-modal-subtitle {
	margin: 0 0 16px 0;
	font-size: 0.95rem;
	color: #a0a0b0;
}
.skill-modal-hint {
	font-size: 0.8rem;
	color: #788;
	font-weight: normal;
}
.skill-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}
.skill-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.2s, box-shadow 0.2s;
}
.skill-row-flash {
	box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
	background: rgba(168, 85, 247, 0.12);
}
.skill-label {
	flex: 1;
	font-weight: 500;
	color: #e0e0e8;
}
.skill-value {
	min-width: 36px;
	font-weight: 700;
	color: #a78bfa;
	font-size: 1.05rem;
}
.skill-detail {
	font-size: 0.8rem;
	color: #888;
}
.skill-add-btn {
	min-width: 40px;
	height: 36px;
	padding: 0 12px;
	font-size: 1.2rem;
	font-weight: 700;
	background: rgba(34, 197, 94, 0.35);
	border: 1px solid #22c55e;
	color: #dcfce7;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
}
.skill-add-btn:hover:not(:disabled) {
	background: rgba(34, 197, 94, 0.5);
	transform: scale(1.05);
}
.skill-add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.skill-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
.skill-reset-btn {
	background: rgba(168, 85, 247, 0.25);
	border: 1px solid #a855f7;
	color: #e9d5ff;
}
.skill-reset-btn:hover:not(:disabled) {
	background: rgba(168, 85, 247, 0.4);
}
.skill-reset-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.skill-close-btn {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #c0c0c8;
}

.tutorial-box {
	background: rgba(26, 26, 31, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 28px;
	min-width: 300px;
	max-width: 90%;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
	transform: scale(0.95);
	transition: transform 0.25s ease;
}

.tutorial-overlay.show .tutorial-box {
	transform: scale(1);
}

.tutorial-title {
	margin: 0 0 16px 0;
	font-size: 1.25rem;
	color: #e0e0e0;
}

/* Dialogue intro (Big Boss) */
.tutorial-box-dialogue {
	max-width: 480px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.tut-portrait-wrap {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(40, 40, 50, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.tut-portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tut-content {
	flex: 1;
	min-width: 0;
}

.tut-speaker {
	margin: 0 0 10px 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #f59e0b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tut-speaker.tut-speaker-player {
	color: #7dd3fc;
}

.tut-dialogue {
	margin-bottom: 16px;
	line-height: 1.5;
	color: #d0d0d8;
	font-size: 1rem;
	min-height: 2.5em;
}

.tut-input-wrap {
	margin-bottom: 16px;
	display: block;
}

.tut-input-wrap.hidden {
	display: none;
}

.tutorial-body {
	margin-bottom: 16px;
}

.tutorial-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	color: #e0e0e0;
	background: rgba(40, 40, 50, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transition: border-color 0.2s;
}

.tutorial-input:focus {
	outline: none;
	border-color: #7dd3fc;
}

.tutorial-input::placeholder {
	color: #666;
}

#tut-confirm {
	width: 100%;
	margin-top: 8px;
}

.loot-banner {
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	z-index: 9000;
	padding: 12px 24px;
	background: rgba(10, 14, 12, 0.92);
	border: 2px solid #22c55e;
	border-radius: 8px;
	color: #e0e0e0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.loot-banner.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ——— Bandeau d'achat boutique ——— */
.purchase-banner {
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%) translateY(-24px);
	z-index: 8995;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: rgba(10, 14, 12, 0.94);
	border-radius: 10px;
	border: 1px solid rgba(34, 211, 238, 0.4);
	color: #e2e8f0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(34, 211, 238, 0.15);
	backdrop-filter: blur(4px);
}
.purchase-banner.purchase-banner-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.purchase-banner-icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
}
.purchase-banner-text {
	letter-spacing: 0.02em;
}
.purchase-banner--weapon {
	border-color: rgba(239, 68, 68, 0.5);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(239, 68, 68, 0.2);
}
.purchase-banner--armor {
	border-color: rgba(59, 130, 246, 0.5);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(59, 130, 246, 0.2);
}
.purchase-banner--voiture {
	border-color: rgba(249, 115, 22, 0.5);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(249, 115, 22, 0.2);
}
.purchase-banner--default {
	border-color: rgba(34, 211, 238, 0.4);
}

/* ——— Bandeau achievement débloqué ——— */
.achievement-banner {
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%) translateY(-24px);
	z-index: 8996;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 20px;
	background: rgba(15, 20, 18, 0.96);
	border-radius: 10px;
	border: 1px solid rgba(251, 191, 36, 0.5);
	color: #e2e8f0;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(251, 191, 36, 0.2);
	backdrop-filter: blur(4px);
}
.achievement-banner.achievement-banner-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.achievement-banner-title { color: #fbbf24; }
.achievement-banner-reward { font-size: 0.85rem; font-weight: 500; color: #94a3b8; }
.achievement-banner-hint { font-size: 0.75rem; color: #64748b; margin-top: 4px; }

/* ——— Modal tous les achievements complétés ——— */
.achievement-all-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	pointer-events: auto;
	cursor: pointer;
}
.achievement-all-modal-overlay .achievement-all-modal {
	max-width: 360px;
	padding: 24px;
	text-align: center;
	pointer-events: auto;
}
.achievement-all-modal-overlay .achievement-all-modal .btn { pointer-events: auto; cursor: pointer; }
.achievement-all-modal-hint { font-size: 0.85rem; color: #94a3b8; margin: 8px 0 12px 0; }
.achievement-all-modal-overlay h3 { color: #4ade80; margin-top: 0; }
.achievement-all-modal-overlay .achievement-all-modal-close { margin-top: 16px; }

/* ——— Barre progression achievements (Profil) ——— */
.player-achievements-progress {
	margin: 0 0 8px 0;
	font-size: 0.95rem;
	color: #94a3b8;
}
.player-achievements-bar-wrap {
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 16px;
}
.player-achievements-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #22c55e, #4ade80);
	border-radius: 4px;
	transition: width 0.3s ease;
}
.player-achievement-desc {
	display: block;
	font-size: 0.8rem;
	color: #94a3b8;
	font-weight: 400;
	margin-top: 2px;
}

/* ——— Bandeau de loot horizontal (crimes, boss, événements) ——— Responsive */
.loot-bandeau-wrap {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 8990;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.3s ease, transform 0.35s ease;
}

.loot-bandeau-wrap.show {
	opacity: 1;
	transform: translateY(0);
}

.loot-bandeau-wrap.loot-bandeau-wrap-out {
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Bandeau combat auto : bas de l'écran, slide-in depuis le bas, fond sombre, bordure victoire */
.loot-bandeau-wrap.loot-bandeau-wrap-auto {
	top: auto;
	bottom: 0;
	transform: translateY(100%);
}
.loot-bandeau-wrap.loot-bandeau-wrap-auto.show {
	transform: translateY(0);
}
.loot-bandeau-wrap.loot-bandeau-wrap-auto.loot-bandeau-wrap-out {
	transform: translateY(100%);
}
.loot-bandeau-wrap.loot-bandeau-wrap-auto .loot-bandeau {
	background: rgba(8, 18, 12, 0.95);
	border-bottom: none;
	border-top: 3px solid #4ade80;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4), 0 0 28px rgba(34, 197, 94, 0.4);
}
.loot-bandeau-wrap.loot-bandeau-wrap-auto.loot-bandeau-victory .loot-bandeau {
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4), 0 0 36px rgba(34, 197, 94, 0.5);
}

.loot-bandeau {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	width: 100%;
	max-width: 100%;
	padding: 12px 20px;
	background: rgba(10, 22, 14, 0.97);
	border-bottom: 3px solid #22c55e;
	box-shadow: 0 0 28px rgba(34, 197, 94, 0.5), 0 0 56px rgba(34, 197, 94, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 24px rgba(34, 197, 94, 0.08);
}

.loot-bandeau-wrap.loot-bandeau-victory .loot-bandeau {
	box-shadow: 0 0 36px rgba(34, 197, 94, 0.6), 0 0 64px rgba(34, 197, 94, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 28px rgba(34, 197, 94, 0.1);
	border-bottom-color: #4ade80;
}

.loot-bandeau-wrap.loot-bandeau-rare .loot-bandeau {
	border-bottom-color: #fbbf24;
	box-shadow: 0 0 28px rgba(251, 191, 36, 0.4), 0 0 24px rgba(34, 197, 94, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.loot-bandeau-wrap.loot-bandeau-achievement .loot-bandeau {
	border-bottom-color: #38bdf8;
	box-shadow: 0 0 32px rgba(56, 189, 248, 0.5), 0 0 48px rgba(34, 197, 94, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.loot-bandeau-wrap.loot-bandeau-achievement .loot-bandeau-title {
	color: #7dd3fc;
}

.loot-bandeau-title {
	font-size: 1.1rem;
	font-weight: 800;
	color: #4ade80;
	text-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
	margin-right: 8px;
	flex-shrink: 0;
}

.loot-bandeau-rare-label {
	font-size: 0.9rem;
	font-weight: 700;
	color: #fbbf24;
	margin-right: 8px;
	text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
	flex-shrink: 0;
}

.loot-bandeau-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
}

.loot-bandeau-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 56px;
}
/* Glow par type (assets cohérents) */
.loot-bandeau-item--cash .loot-bandeau-thumb { box-shadow: 0 0 12px rgba(34, 197, 94, 0.5); }
.loot-bandeau-item--xp .loot-bandeau-thumb { box-shadow: 0 0 12px rgba(59, 130, 246, 0.5); }
.loot-bandeau-item--resource .loot-bandeau-thumb { box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); }
.loot-bandeau-item--resource.loot-bandeau-item--drug .loot-bandeau-thumb { box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); }
.loot-bandeau-item--weapon .loot-bandeau-thumb,
.loot-bandeau-item--armor .loot-bandeau-thumb { box-shadow: 0 0 12px rgba(59, 130, 246, 0.5); }
.loot-bandeau-item--voiture .loot-bandeau-thumb { box-shadow: 0 0 12px rgba(249, 115, 22, 0.5); }

.loot-bandeau-thumb {
	width: 45px;
	height: 45px;
	border-radius: 8px;
	object-fit: contain;
	background: rgba(20, 28, 22, 0.9);
	margin-bottom: 4px;
	flex-shrink: 0;
}

.loot-bandeau-thumb-icon {
	width: 45px;
	height: 45px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	flex-shrink: 0;
	font-size: 1.35rem;
	font-weight: 700;
	background: rgba(20, 28, 22, 0.9);
}

.loot-bandeau-thumb-icon.loot-bandeau-icon-cash {
	background: rgba(34, 197, 94, 0.25);
	color: #22c55e;
}

.loot-bandeau-thumb-icon.loot-bandeau-icon-xp {
	background: rgba(59, 130, 246, 0.25);
	color: #5b9cff;
}

.loot-bandeau-name {
	font-size: 0.75rem;
	color: #b8d4be;
	line-height: 1.2;
	word-break: break-word;
	max-width: 70px;
}

.loot-bandeau-qty {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e8f5e9;
}

@media (max-width: 480px) {
	.loot-bandeau {
		padding: 12px 10px;
	}
	.loot-bandeau-items {
		gap: 12px 16px;
	}
	.loot-bandeau-thumb,
	.loot-bandeau-thumb-icon {
		width: 40px;
		height: 40px;
	}
	.loot-bandeau-name {
		font-size: 0.7rem;
		max-width: 60px;
	}
}

/* ——— Loot bandeau : équipement ——— */
.loot-bandeau-item-equipment {
	min-width: 80px;
}
.loot-bandeau-item-equipment .loot-bandeau-item-meta {
	display: flex;
	flex-direction: column;
	font-size: 0.7rem;
	color: #94a3b8;
	margin-top: 2px;
}
.loot-bandeau-item-rarity { font-weight: 600; }
.loot-bandeau-item-equipment.item-rarity-0 .loot-bandeau-item-rarity { color: #9ca3af; }
.loot-bandeau-item-equipment.item-rarity-1 .loot-bandeau-item-rarity { color: #60a5fa; }
.loot-bandeau-item-equipment.item-rarity-2 .loot-bandeau-item-rarity { color: #a78bfa; }
.loot-bandeau-item-equipment.item-rarity-3 .loot-bandeau-item-rarity { color: #fbbf24; }
.loot-bandeau-item-equipment.item-rarity-4 .loot-bandeau-item-rarity { color: #f97316; }

/* ——— Inventaire (items équipement) ——— */
.inventory-subtitle {
	margin: -4px 0 16px 0;
	font-size: 0.88rem;
	color: #94a3b8;
}
.inventory-panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Personnage avec slots – conteneur unique, image contrainte, slots relatifs au conteneur */
.character-sheet-wrap {
	margin-bottom: 8px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.character-sheet-heading {
	margin: 0 0 10px 0;
	font-size: 1rem;
	color: #c0c0d0;
	text-align: center;
	width: 100%;
}
/* Conteneur UNIQUE : centré, taille fixe max, l’image + tous les slots sont DEDANS */
.equipment-container {
	position: relative;
	width: 280px;
	max-width: 90vw;
	margin: 0 auto;
	/* La hauteur est définie par l’image (block, in flow) → slots en % = % de ce bloc */
}
/* Image du personnage : contrainte, ne déborde jamais, sert de référence visuelle */
.character-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	vertical-align: top;
}
/* Slot = logique. Glow = sur le slot uniquement, jamais sur l’image. */
.equip-slot {
	position: absolute;
	width: 64px;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.65);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-sizing: border-box;
	overflow: hidden;
}
.equip-slot:hover {
	border-color: rgba(59, 130, 246, 0.7);
	box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
	background: rgba(30, 58, 138, 0.35);
}
.equip-slot:focus {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}
/* Slots équipés : pas de glow vert, bordure discrète */
.equip-slot.equipped,
.equip-slot.slot-head.equipped,
.equip-slot.slot-chest.equipped,
.equip-slot.slot-hands.equipped,
.equip-slot.slot-feet.equipped {
	border-color: rgba(255, 255, 255, 0.35);
}
.equip-slot.equipped:hover {
	border-color: rgba(59, 130, 246, 0.7);
	box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}
/* Raretés (évolution future) – pour l’instant seul le vert est utilisé */
.equip-slot.equipped.equip-slot-rarity-1 { box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), 0 0 24px rgba(59, 130, 246, 0.25); border-color: rgba(59, 130, 246, 0.5); }
.equip-slot.equipped.equip-slot-rarity-2 { box-shadow: 0 0 12px rgba(168, 85, 247, 0.5), 0 0 24px rgba(168, 85, 247, 0.25); border-color: rgba(168, 85, 247, 0.5); }
.equip-slot.equipped.equip-slot-rarity-3 { box-shadow: 0 0 12px rgba(249, 115, 22, 0.5), 0 0 24px rgba(249, 115, 22, 0.25); border-color: rgba(249, 115, 22, 0.5); }
.equip-slot.equipped.equip-slot-rarity-4 { box-shadow: 0 0 12px rgba(234, 179, 8, 0.6), 0 0 24px rgba(234, 179, 8, 0.3); border-color: rgba(234, 179, 8, 0.6); }
/* Positions des slots : en % du .equipment-container (même repère que l’image), centre = point */
.slot-head  { top: 10%;  left: 50%; transform: translate(-50%, -50%); }
.slot-chest { top: 36%; left: 50%; transform: translate(-50%, -50%); }
.slot-hands { top: 42%; left: 20%; transform: translate(-50%, -50%); }
.slot-feet  { top: 78%; left: 50%; transform: translate(-50%, -50%); }
/* Item = visuel uniquement. Le slot contrôle l’item : centrage par flex, pas de position absolute. */
.equip-slot img {
	display: block;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
	pointer-events: none;
	/* Jamais position: absolute – l’item reste centré par le slot */
}
.equip-slot-empty {
	font-size: 0.75rem;
	color: #94a3b8;
	pointer-events: none;
}

@media (max-width: 480px) {
	.equipment-container { width: 260px; }
	.character-image { max-height: 360px; }
	.equip-slot { width: 52px; height: 52px; }
}

/* Modal choix d'équipement pour un slot */
.inventory-slot-picker-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 16px;
	box-sizing: border-box;
}
.inventory-slot-picker-overlay.inventory-slot-picker-overlay-visible {
	display: flex;
}
.inventory-slot-picker-modal {
	max-width: 380px;
	width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	padding: 20px;
}
.inventory-slot-picker-title {
	margin: 0 0 14px 0;
	font-size: 1.1rem;
	color: #e0e0e0;
}
.inventory-slot-picker-list {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
	min-height: 80px;
	max-height: 50vh;
}
.inventory-slot-picker-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(30, 30, 40, 0.6);
	flex-wrap: wrap;
}
.inventory-slot-picker-item-equipped {
	border-color: rgba(59, 130, 246, 0.4);
	background: rgba(30, 58, 138, 0.2);
}
.inventory-slot-picker-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	flex-shrink: 0;
}
.inventory-slot-picker-icon-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: rgba(80, 80, 100, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #64748b;
	flex-shrink: 0;
}
.inventory-slot-picker-name {
	font-weight: 600;
	color: #e0e0e0;
	flex: 1;
	min-width: 0;
}
.inventory-slot-picker-bonus {
	font-size: 0.8rem;
	color: #94a3b8;
	width: 100%;
	margin-top: 2px;
}
.inventory-slot-picker-badge {
	font-size: 0.75rem;
	color: #3b82f6;
	font-weight: 600;
}
.inventory-slot-picker-empty {
	margin: 0;
	color: #94a3b8;
	font-style: italic;
}
.inventory-slot-picker-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.inventory-slot-picker-actions .btn {
	flex: 1;
	min-width: 100px;
}

.inventory-equipped {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.inventory-consommables-wrap { margin-bottom: 20px; }
.inventory-consommables-wrap h3 { margin: 0 0 10px 0; font-size: 1rem; color: #c0c0d0; }
.inventory-consommables-list { display: flex; flex-wrap: wrap; gap: 10px; }
.inventory-consommable-card {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px; background: rgba(10, 15, 25, 0.92); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 8px;
	font-size: 0.9rem; color: #e2e8f0;
}
.inventory-consommable-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; }
.inventory-consommable-icon { width: 28px; height: 28px; object-fit: contain; }
.inventory-consommable-icon-placeholder { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148,163,184,0.2); border-radius: 4px; font-size: 0.9rem; color: #94a3b8; }
.inventory-consommable-qty { font-weight: 700; color: #94a3b8; }

.inventory-equipped h3,
.inventory-list-wrap h3 {
	margin: 0 0 12px 0;
	font-size: 1rem;
	color: #c0c0d0;
	grid-column: 1 / -1;
}
.inventory-slot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: rgba(8, 10, 18, 0.9);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.inventory-slot-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #94a3b8;
}
.inventory-slot-empty {
	font-size: 0.9rem;
	color: #64748b;
	font-style: italic;
	padding: 16px 0;
}
.inventory-item-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(6, 8, 14, 0.92);
	gap: 4px;
}
.inventory-item-card.item-rarity-0 { border-color: rgba(156, 163, 175, 0.3); }
.inventory-item-card.item-rarity-1 { border-color: rgba(96, 165, 250, 0.4); }
.inventory-item-card.item-rarity-2 { border-color: rgba(167, 139, 250, 0.4); }
.inventory-item-card.item-rarity-3 { border-color: rgba(251, 191, 36, 0.4); }
.inventory-item-card.item-rarity-4 { border-color: rgba(249, 115, 22, 0.5); }
.inventory-item-icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.5);
}
.inventory-item-icon-placeholder {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: rgba(40, 42, 55, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: #64748b;
}
.inventory-item-name {
	font-weight: 600;
	color: #e0e0e0;
}
.inventory-item-stack {
	font-weight: 700;
	color: #94a3b8;
	margin-left: 4px;
	font-size: 0.95rem;
}
.inventory-item-rarity {
	font-size: 0.75rem;
	font-weight: 600;
}
.inventory-item-card.item-rarity-0 .inventory-item-rarity { color: #9ca3af; }
.inventory-item-card.item-rarity-1 .inventory-item-rarity { color: #60a5fa; }
.inventory-item-card.item-rarity-2 .inventory-item-rarity { color: #a78bfa; }
.inventory-item-card.item-rarity-3 .inventory-item-rarity { color: #fbbf24; }
.inventory-item-card.item-rarity-4 .inventory-item-rarity { color: #f97316; }
.inventory-item-bonus {
	font-size: 0.8rem;
	color: #94a3b8;
	line-height: 1.3;
}
.inventory-btn-equip,
.inventory-btn-unequip {
	margin-top: 8px;
	font-size: 12px;
	padding: 6px 12px;
}
.inventory-btn-unequip {
	background: rgba(239, 68, 68, 0.2);
	border-color: rgba(239, 68, 68, 0.5);
	color: #fca5a5;
}
.inventory-item-equipped-label {
	font-size: 0.75rem;
	color: #22c55e;
	margin-top: 6px;
}
.inventory-item-no-equip {
	font-size: 0.75rem;
	color: #94a3b8;
	margin-top: 6px;
	font-style: italic;
}
.inventory-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}
.inventory-empty {
	color: #64748b;
	font-style: italic;
	margin: 0;
}
.btn-small {
	padding: 6px 12px;
	font-size: 12px;
}

/* ——— Boutique ——— */
.shop-subtitle {
	margin: -4px 0 16px 0;
	font-size: 0.9rem;
	color: #94a3b8;
}
.shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.shop-filter-btn {
	padding: 8px 14px;
	font-size: 0.85rem;
}
.shop-filter-btn.active {
	border-color: rgba(168, 85, 247, 0.45);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(168, 85, 247, 0.2);
}
.shop-tab-panel {
	display: none;
}
.shop-tab-panel.active {
	display: block;
}
.shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
/* Carte boutique plus foncée pour meilleure visibilité */
.shop-panel-dark .shop-card {
	background: rgba(12, 12, 18, 0.92);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.shop-panel-dark .shop-card:hover {
	background: rgba(18, 18, 26, 0.95);
	border-color: rgba(255, 255, 255, 0.2);
}
.shop-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(28, 28, 36, 0.8);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.shop-card:hover {
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.shop-card-locked {
	opacity: 0.75;
	pointer-events: none;
}
.shop-card-locked .shop-card-lock {
	color: #f87171;
	font-size: 0.8rem;
	margin-top: 8px;
}
.shop-card-icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.35);
	margin-bottom: 10px;
}
.shop-card-icon-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: rgba(80, 80, 100, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #64748b;
	margin-bottom: 10px;
}
.shop-card-name {
	margin: 0 0 4px 0;
	font-size: 1rem;
	color: #e0e0e0;
}
.shop-card-type {
	font-size: 0.75rem;
	color: #64748b;
	text-transform: uppercase;
	margin-bottom: 2px;
}
.shop-card-rarity {
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 6px;
}
.shop-card.shop-rarity-0 .shop-card-rarity { color: #9ca3af; }
.shop-card.shop-rarity-1 .shop-card-rarity { color: #60a5fa; }
.shop-card.shop-rarity-2 .shop-card-rarity { color: #a78bfa; }
.shop-card.shop-rarity-3 .shop-card-rarity { color: #fbbf24; }
.shop-card.shop-rarity-4 .shop-card-rarity { color: #f97316; }
.shop-card-bonus {
	font-size: 0.8rem;
	color: #94a3b8;
	line-height: 1.35;
	margin: 0 0 10px 0;
}
.shop-card-price {
	font-size: 1rem;
	font-weight: 700;
	color: #22c55e;
	margin: 0 0 12px 0;
}
.shop-card-resource .shop-card-price {
	color: #94a3b8;
}
.shop-card-no-buy.shop-card-resource-msg {
	font-size: 0.8rem;
	color: #fbbf24;
	margin: 10px 0 0 0;
	text-align: center;
	line-height: 1.3;
}
.shop-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: auto;
}
.shop-card-actions-multi {
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}
.shop-card-actions-multi .shop-btn-buy {
	flex: 1 1 auto;
	min-width: 80px;
}
.shop-insufficient-msg {
	color: #f87171;
	font-size: 12px;
	margin: 4px 0 8px;
}
.shop-tooltip-hint {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: #94a3b8;
}
.shop-btn-buy,
.shop-btn-buy-max {
	width: 100%;
	padding: 8px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}
.shop-btn-buy:disabled,
.shop-btn-buy-max:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.shop-btn-ok {
	background: rgba(34, 197, 94, 0.35);
	border: 1px solid #22c55e;
	color: #dcfce7;
}
.shop-btn-ok:hover:not(:disabled) {
	background: rgba(34, 197, 94, 0.5);
}
.shop-btn-no {
	background: rgba(239, 68, 68, 0.25);
	border: 1px solid #ef4444;
	color: #fecaca;
}
.shop-btn-no:hover:not(:disabled) {
	background: rgba(239, 68, 68, 0.35);
}
.shop-max-info {
	display: block;
	font-size: 0.75rem;
	color: #94a3b8;
	line-height: 1.3;
}

@media (max-width: 520px) {
	.shop-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 12px;
	}
	.shop-card {
		padding: 12px;
	}
}

/* ——— Recrutement de gang ——— */
.recruitment-building {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
}
.recruitment-building .recruitment-body {
	padding: 12px 0;
}
.overlay-lock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #0ff;
	font-size: 18px;
	font-weight: bold;
	border-radius: inherit;
	z-index: 2;
	animation: recruitmentGlow 1s ease-in-out infinite alternate;
}
.overlay-lock.hidden {
	display: none !important;
}
.cadenas-glow {
	text-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
}
@keyframes recruitmentGlow {
	from { filter: brightness(1); }
	to { filter: brightness(1.15); text-shadow: 0 0 12px #0ff, 0 0 24px #0ff; }
}
.recruit-progress-bar {
	position: relative;
	width: 100%;
	height: 24px;
	background: #222;
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
	overflow: hidden;
	margin: 10px 0;
}
.recruit-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(to right, #0891b2, #22d3ee);
	transition: width 0.3s ease;
	box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}
.recruit-progress-pct {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	font-weight: bold;
	color: #e2e8f0;
	text-shadow: 0 1px 2px rgba(0,0,0,0.9);
	pointer-events: none;
}
.recruit-progress-times {
	margin: 4px 0 10px;
	font-size: 13px;
	color: #94a3b8;
}
.recruit-members-count,
.recruit-batch-count,
.recruit-cost,
.recruit-stats-desc {
	margin: 8px 0;
	font-size: 14px;
}
.recruit-stats-block {
	margin-bottom: 16px;
	padding: 12px;
	background: rgba(15, 23, 42, 0.6);
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.2);
}
.recruit-equip-count {
	margin: 4px 0;
	font-size: 13px;
	color: #94a3b8;
}
.recruit-power-active {
	margin: 10px 0 6px;
	font-size: 13px;
	color: #a5b4fc;
}
.recruit-stats-warning {
	margin: 8px 0 0;
	font-size: 12px;
	color: #fbbf24;
}
.recruit-equip-indicator { font-weight: 600; }
.recruit-equip-indicator.recruit-equip-full { color: #22c55e; }
.recruit-equip-indicator.recruit-equip-partial { color: #f97316; }
.recruit-equip-indicator.recruit-equip-none { color: #ef4444; }
.recruit-forming-info {
	margin: 8px 0;
	font-size: 14px;
	color: #e2e8f0;
}
.recruit-pending-count {
	margin: 6px 0;
	font-size: 14px;
	color: #fbbf24;
}
.recruit-pending-hint {
	font-size: 12px;
	color: #94a3b8;
}
.recruit-cap-msg {
	margin: 6px 0;
	font-size: 13px;
	color: #fbbf24;
}
.recruit-claim-required-msg {
	color: #f87171;
	font-size: 13px;
	margin: 6px 0;
}
.recruit-claim-btn {
	background: linear-gradient(145deg, #7c3aed, #6d28d9);
	box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
	animation: recruit-claim-pulse 2s ease-in-out infinite;
}
@keyframes recruit-claim-pulse {
	0%, 100% { box-shadow: 0 0 12px rgba(124, 58, 237, 0.4); }
	50% { box-shadow: 0 0 18px rgba(124, 58, 237, 0.6); }
}
.recruit-insufficient-msg {
	color: #f87171;
	font-size: 13px;
	margin: 6px 0;
}
.recruit-insufficient-msg.hidden {
	display: none;
}
.recruit-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.recruit-btn {
	margin: 4px 0;
	padding: 10px 16px;
	border-radius: 8px;
	background: linear-gradient(145deg, #374151, #4b5563);
	color: #fff;
	font-weight: bold;
	border: 1px solid #4b5563;
	box-shadow: 0 0 8px rgba(0, 255, 255, 0.35);
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.recruit-btn:hover:not(:disabled) {
	box-shadow: 0 0 14px rgba(0, 255, 255, 0.5);
	transform: translateY(-1px);
}
.recruit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}
.recruit-btn-interrupt {
	background: linear-gradient(145deg, #7f1d1d, #991b1b);
	border-color: #b91c1c;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.recruit-btn-interrupt:hover:not(:disabled) {
	box-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
}
.recruit-reductions-label {
	margin: 10px 0 6px;
	font-size: 0.95rem;
	color: #d1d5db;
}
.recruit-reductions-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 12px;
	align-items: center;
}
.recruit-reduction-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: linear-gradient(145deg, #1e3a5f, #0f172a);
	border: 1px solid #334155;
	border-radius: 8px;
	color: #e2e8f0;
	font-size: 0.85rem;
	cursor: pointer;
	transition: box-shadow 0.2s, transform 0.15s;
}
.recruit-reduction-btn:hover:not(:disabled) {
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
	transform: translateY(-1px);
}
.recruit-reduction-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.recruit-reduction-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
.recruit-reduction-name {
	font-weight: 600;
}
.recruit-reduction-count {
	background: rgba(0, 0, 0, 0.4);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 0.8rem;
	min-width: 1.4em;
	text-align: center;
}
.production-reductions-label {
	margin: 8px 0 6px;
	font-size: 0.9rem;
	color: #d1d5db;
}
.production-reductions-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 10px;
	align-items: center;
}
.production-reduction-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: linear-gradient(145deg, #1e3a5f, #0f172a);
	border: 1px solid #334155;
	border-radius: 8px;
	color: #e2e8f0;
	font-size: 0.8rem;
	cursor: pointer;
	transition: box-shadow 0.2s, transform 0.15s;
}
.production-reduction-btn:hover:not(:disabled) {
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
	transform: translateY(-1px);
}
.production-reduction-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.production-reduction-icon {
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.production-reduction-count {
	background: rgba(0, 0, 0, 0.4);
	padding: 2px 5px;
	border-radius: 6px;
	font-size: 0.75rem;
	min-width: 1.2em;
	text-align: center;
}
.nav-recruitment-btn {
	position: relative;
}
.nav-recruit-dot {
	display: none;
	position: absolute;
	top: 4px;
	right: 4px;
	width: 8px;
	height: 8px;
	background: #ef4444;
	border-radius: 50%;
	box-shadow: 0 0 6px #ef4444;
}
.nav-recruit-dot.visible {
	display: block;
}

/* ——— Admin / Dev (visible uniquement si isAdmin) ——— */
.admin-toggle-btn {
	position: fixed;
	bottom: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(55, 65, 81, 0.95);
	border: 1px solid #6b7280;
	color: #d1d5db;
	font-size: 18px;
	cursor: pointer;
	z-index: 9998;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: background 0.2s, transform 0.15s;
}
.admin-toggle-btn:hover {
	background: rgba(75, 85, 99, 0.95);
	transform: scale(1.05);
}
.admin-toggle-btn.hidden {
	display: none !important;
}
.admin-panel {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}
.admin-panel.admin-panel-open {
	opacity: 1;
	visibility: visible;
}
.admin-panel.hidden {
	display: none !important;
}
.admin-panel-inner {
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 12px;
	max-width: 420px;
	width: 95%;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.admin-panel-title {
	margin: 0;
	padding: 12px 40px 12px 14px;
	font-size: 1rem;
	color: #e5e7eb;
	border-bottom: 1px solid #374151;
}
.admin-panel-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: #9ca3af;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
}
.admin-panel-close:hover {
	color: #fff;
}
#admin-panel-content {
	padding: 12px;
	overflow-y: auto;
	flex: 1;
}
.admin-section {
	margin-bottom: 14px;
}
.admin-section h4 {
	margin: 0 0 8px 0;
	font-size: 12px;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.admin-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.admin-btn {
	padding: 6px 10px;
	font-size: 11px;
	background: #374151;
	border: 1px solid #4b5563;
	color: #e5e7eb;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
}
.admin-btn:hover {
	background: #4b5563;
}
.admin-btn-danger {
	background: rgba(185, 28, 28, 0.4);
	border-color: #b91c1c;
	color: #fecaca;
}
.admin-btn-danger:hover {
	background: rgba(185, 28, 28, 0.6);
}
.admin-panel-footer {
	margin: 0;
	padding: 10px 12px;
	border-top: 1px solid #374151;
}