@font-face {
	font-family: "FFXIII";
	/* Nom de la police */
	src: url("fonts/ffxiii.ttf") format("truetype");
	/* Chemin vers le fichier de police */
	/* Ajoutez d'autres déclarations de format si nécessaire */
}

html {
	height: 100%;
	/* Le jeu définit sa propre palette. Empêche les navigateurs mobiles
	 * d'appliquer automatiquement un recoloring sombre au contenu. */
	color-scheme: light only;
}

body {
	font-family: "Poppins", Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-color: #585858;
	background-image: url("img/bg/bg2026v3.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
}

.numbers {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 700;
}

button {
	/*margin: 10px;*/
	padding: 10px;
	font-size: 16px;
}

button:focus {
    outline: none;
   
}

.gameContainer {
	position: relative;
	overflow: hidden;
	max-width: 500px;
	/* Largeur maximale du conteneur */
	margin: 0 auto;
	/* Centrer le conteneur horizontalement */
	height: 100%;
}

/* UI */

/* monster ui */
#monsterContainer,
.monsterContainer {
	text-shadow: none;
	color: #fff;
}

#monsterContainer {
	margin: 0px -15px;
	max-height: 33vh;
	overflow-x: hidden;
	overflow-y: scroll;
	position: absolute;
	left: -100%;
	top: -33vh;
	width: 100%;
	border-top: 3px solid #d1c2a4;
}

#enemyZone {
	height: 100vh;
}

.enemyMonsterContainer {
	height: 80vh;
	position: relative;
	display: flex;
	flex-direction: column;
	/* Change la direction de la disposition en flex pour une colonne */
	align-items: center;
	justify-content: center;
}

.enemyMonsterImg {
	max-width: 100%;
}

.monsterLine {
	background-image: url(img/bg/list-footerDark-BG.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
	height: 70px;
	font-size: 11px;
	padding: 4px 15px 0;
}

.monsterLine .row {
	align-items: center;
}

.monsterLine .monsterImg {
	text-align: center;
}

.monsterLine .monsterImg img {
	width: 40px;

}

.monsterInfo {
	line-height: 16px;
}

#enemyMonsterName {
	color: white;
	font-weight: bold;
}

.progress {
	height: 20px;
	border-radius: 10px;
	overflow: hidden;
	width: calc(100%);
	/* Ajuste la largeur pour être égale à la largeur du nom moins le padding */
	border: 2px solid white;
}

.progress-bar {
	height: 100%;
}

.upgradeBtnText {
	font-size: 14px;
}

.moneySc {
	width: 20px;
}

.moneySc.small {
	width: 15px;
}

.moneyHc {
	width: 30px;
}

.headerBar {
	position: relative;
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	border-radius: 3px;
	background-image: url(img/ui/headerBG.png);
	background-repeat: repeat-x;
	align-items: center;
	height: 36px;
	font-size: 20px;
}

.headerBar .portraitFrame {
	background-image: url(img/ui/portraitFrame.png);
	width: 52px;
	height: 52px;
	position: absolute;
	top: -8px;
	left: -4px;
	overflow: hidden;
	z-index: 2;
	border-radius: 5px;
}

.headerBar .portraitImg {
	width: 52px;
	height: 52px;
	position: absolute;
	top: -8px;
	left: -4px;
	overflow: hidden;
	z-index: 1;
	border-radius: 5px;
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center center;
}

.footerBar {
	/*position: absolute;*/
	bottom: -15px;
	background-image: url(img/bg/footer-buttons.png);
	height: 60px;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.playerDpsInfos {
	border-radius: 10px;
	background-image: url(img/bg/BG-quest-header-creatures.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	font-weight: bold;
	font-size: 15px;
}

/* btn overdire */
.btn-warning {
	background-color: #ff7300;
	border-color: #c5600d;
	color: white;
}

.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):active {
	background-color: #be5804;
	border-color: #c5600d;
	color: white;
}

#clickOverlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 2;
	width: 100%;
	height: 100%;
}

/* Les effets de frappe sont purement visuels : ils ne doivent jamais
   intercepter les clics rapides destinés à #clickOverlay. */
#damageAnimation,
#damageAnimation * {
	pointer-events: none;
}

.damageAnimation {
	position: absolute;
	width: 20px;
	/* Ajustez la taille de l'animation selon vos besoins */
	height: 20px;
	z-index: 99;
	animation: damageAnimation .28s ease-out;
	/* Ajoutez une animation CSS (à définir) */
}

@keyframes damageAnimation {
	to {
		transform: scale(2);
		/* Ajustez la transformation selon vos besoins */
		opacity: 0;
	}
}

.non-selectable {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Opera, and Firefox */
}

.bar-100 {
	background-color: rgb(11, 78, 224);
}

.bar-90 {
	background-color: rgb(11, 217, 224);
}

.bar-80 {
	background-color: rgb(11, 224, 171);
}

.bar-70 {
	background-color: rgb(11, 224, 75);
}

.bar-60 {
	background-color: rgb(71, 224, 11);
}

.bar-50 {
	background-color: rgb(185, 224, 11);
}

.bar-40 {
	background-color: rgb(224, 185, 11);
}

.bar-30 {
	background-color: rgb(224, 132, 11);
}

.bar-20 {
	background-color: rgb(224, 61, 11);
}

.bar-10,
.bar-0 {
	background-color: rgb(224, 11, 11);
}

#uiLvlContainer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0px 15px;
	z-index: 3;
}

#levelUIContainer {
	border-radius: 10px;
	padding: 10px;
	position: absolute;
	z-index: 3;
	width: 330px;
	left: 50%;
	/* Alignement horizontal au centre */
	transform: translate(-50%, 0px);
}



.level-selector-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
	padding: 5px;
	border-radius: 10px;

	font-size: 15px;
}

.level-selector {
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 10px;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	font-family: Arial, sans-serif;
	margin: 0 5px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	background-color: #1b5d91;
	font-family: "consolas", "Poppins", Arial, sans-serif;
}

#levelInfo {
	/*font-family: "consolas", "Poppins", Arial, sans-serif;*/
	background-color: #000;
	opacity: 0.5;
}

/* UI BTN ACTION */
#uiBtnContainer {
	border-radius: 10px;
	padding: 10px;
	position: absolute;
	z-index: 3;
	width: 100px;
	bottom: 100px;
	left: 50%;
	/* Alignement horizontal au centre */
	transform: translate(-50%, 0px);
}

.selected {
	background-color: rgb(224,
			132,
			11);
	/* Couleur de fond pour le niveau sélectionné */
}

.damage-text {
	position: absolute;
	color: white;
	font-size: 50px;
	font-weight: bold;
	pointer-events: none;
	will-change: transform, opacity;
	transform: translate(-50%, -50%);
	animation: damageConvergeToEnemy 1.05s cubic-bezier(.18,.72,.28,1) forwards;
}

/* Les nombres de dégâts sont aspirés vers le centre exact du portrait ennemi. */
@keyframes damageConvergeToEnemy {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	58% {
		opacity: .96;
	}

	100% {
		opacity: 0;
		transform: translate(
			calc(-50% + var(--damage-dx, 0px)),
			calc(-50% + var(--damage-dy, 0px))
		) scale(.08);
	}
}

.gold-amount {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 34px;
	color: gold;
	text-shadow: 0px 2px 2px #000;
	opacity: 0;
	transition: opacity 0.5s ease-out, transform 1s ease-out;
}

.gold-amount.show {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.hidden {
	display: none;
}

.action-btn {
	position: fixed;
	top: 10px;
	/* Ajustez la position verticale selon vos besoins */
	right: 10px;
	/* Alignement sur le bord droit */
	z-index: 4;
	/* Assurez-vous que les boutons sont au-dessus du contenu */
	padding: 10px;
	background-color: #ffffff;
	border: 1px solid #000000;
	cursor: pointer;
}


.fs-10 {
	font-size: 10px;
}

.fs-12 {
	font-size: 12px;
}

.greyFilter {
	filter: grayscale(100%);
}

/* ==========================================================
   UI refresh 2026 - mobile-first, simple HTML/CSS/Bootstrap
   ========================================================== */

:root {
	--ui-navy: rgba(6, 25, 48, .92);
	--ui-navy-soft: rgba(11, 38, 67, .86);
	--ui-blue: #1b6ea8;
	--ui-cyan: #66e4f0;
	--ui-gold: #f7b23b;
	--ui-gold-light: #ffe09a;
	--ui-line: rgba(214, 236, 255, .56);
	--ui-text-soft: #c9d8e8;
	--ui-shadow: 0 8px 22px rgba(0, 0, 0, .38);
}

html,
body {
	min-height: 100%;
}

body {
	height: 100dvh;
	min-height: 100dvh;
	background-position: center center;
	background-attachment: fixed;
}

.gameContainer {
	height: 100dvh;
	min-height: 100dvh;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- HUD ressources ---------- */
.headerBar {
	position: absolute;
	top: max(14px, env(safe-area-inset-top));
	left: 15px;
	right: 15px;
	z-index: 8;
	margin: 0;
	height: 44px;
	border-radius: 16px;
	border: 1px solid var(--ui-line);
	background: linear-gradient(180deg, rgba(16, 55, 89, .96), rgba(4, 22, 43, .97));
	background-image: none;
	box-shadow: var(--ui-shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
	font-size: 18px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.headerBar::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(255, 255, 255, .15);
}

.headerBar .portraitFrame,
.headerBar .portraitImg {
	width: 58px;
	height: 58px;
	top: -7px;
	left: -3px;
	border-radius: 0;
}

.headerBar .portraitFrame {
	background-size: 100% 100%;
	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45));
}

.headerBar .portraitImg {
	border: 2px solid rgba(245, 209, 138, .9);
	background-size: 145%;
	background-clip: padding-box;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
}

.headerBar > .col-5,
.headerBar > .col-7 {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-weight: 700;
	letter-spacing: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

.headerBar > .col-5 {
	padding-left: 46px !important;
}

.moneySc {
	width: 22px;
	height: auto;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

.moneyHc {
	width: 27px;
	height: auto;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

.moneySc.small {
	width: 15px;
	margin-left: 3px;
}

/* ---------- Sélecteur de zone ---------- */
#levelUIContainer {
	top: calc(max(14px, env(safe-area-inset-top)) + 55px);
	left: 50%;
	width: min(350px, calc(100% - 28px));
	padding: 0;
	transform: translateX(-50%);
	z-index: 7;
}



.level-selector-container {
	margin-top: 0 !important;
	padding: 7px 8px;
	gap: 7px;
	border: 1px solid rgba(205, 229, 248, .42);
	border-radius: 16px;
	background: rgba(5, 28, 54, .84);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .08);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}

.level-selector {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	margin: 0;
	line-height: 42px;
	font-family: "Poppins", Arial, sans-serif;
	font-size: 20px;
	border: 2px solid rgba(225, 239, 252, .82);
	border-radius: 12px;
	background: linear-gradient(180deg, #256fa4, #174c78);
	box-shadow: 0 4px 8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .12s ease, filter .12s ease;
}

.level-selector:active {
	transform: scale(.96);
}

.level-selector.selected {
	background: linear-gradient(180deg, #ffc857, #ee8b17);
	border-color: #fff1c5;
	color: #fff;
	box-shadow: 0 0 0 2px rgba(255, 176, 43, .24), 0 5px 12px rgba(0, 0, 0, .35);
}

#levelInfo {
	display: table;
	margin: 6px auto 0;
	padding: 5px 13px;
	min-width: 152px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(3, 20, 38, .9);
	opacity: 1;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

/* ---------- Ennemi / boss ---------- */
#enemyZone {
	height: 100dvh;
	padding: 0;
}

.enemyMonsterContainer {
	height: 100dvh;
	justify-content: flex-start;
	padding-top: clamp(255px, 36vh, 340px);
	padding-bottom: 170px;
	z-index: 1;
	transition: padding-top .18s ease;
}

.enemyMonsterHud {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(344px, calc(100vw - 40px));
	margin-top: 82px;
	padding: 16px 14px 12px;
	border: 1px solid rgba(214, 236, 255, .35);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(6, 26, 48, .48), rgba(4, 18, 35, .18));
	box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.enemyMonsterHud::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at center 22%, rgba(9, 24, 41, .28), rgba(9, 24, 41, 0) 58%);
	pointer-events: none;
}

.enemyMonsterImg {
	position: relative;
	z-index: 1;
	width: 112px;
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
	border-radius: 999px;
	border: 1px solid rgba(241, 248, 255, .42);
	background: radial-gradient(circle, rgba(15, 64, 102, .82), rgba(5, 26, 47, .56) 68%, rgba(5, 26, 47, .22) 100%);
	box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 18px rgba(0, 0, 0, .34);
	overflow: hidden;
	filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .28));
}

.enemyMonsterImg > img {
	display: block;
	width: 92px !important;
	max-width: 92px;
	height: 92px;
	margin: 0 auto;
	object-fit: contain;
	object-position: center center;
}

.enemyMonsterInfo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	padding: 8px 10px 9px;
	border: 1px solid rgba(228, 240, 252, .52);
	border-radius: 14px;
	background: rgba(4, 21, 39, .88);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .07);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

#enemyMonsterName {
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}

#enemyMonsterHpBar.progress {
	height: 14px;
	margin: 0;
	border: 1px solid rgba(240, 248, 255, .9);
	border-radius: 999px;
	background: rgba(0, 12, 25, .92);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}

#enemyMonsterHpBar .progress-bar {
	border-radius: 999px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .25);
}

#enemyMonsterHpValue {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

#enemyMonsterHpValue .hpValue {
	color: #fff !important;
}

/* Drawer ouvert : le combat reste lisible dans l'espace libre au-dessus.
   On remonte le HUD et on le compacte sans modifier la logique de combat. */
.gameContainer.monster-panel-open .enemyMonsterContainer {
	padding-top: clamp(158px, 19vh, 176px);
}

.gameContainer.monster-panel-open .enemyMonsterHud {
	width: min(300px, calc(100vw - 70px));
	margin-top: 0;
	padding: 6px 8px 7px;
	border-radius: 15px;
	transition: width .18s ease, margin-top .18s ease, padding .18s ease;
}

.gameContainer.monster-panel-open .enemyMonsterImg {
	width: 62px;
	height: 62px;
	margin-bottom: 4px;
	border-width: 1px;
}

.gameContainer.monster-panel-open .enemyMonsterImg > img {
	width: 52px !important;
	max-width: 52px;
	height: 52px;
}

.gameContainer.monster-panel-open .enemyMonsterInfo {
	padding: 5px 8px 6px;
	border-radius: 11px;
}

.gameContainer.monster-panel-open #enemyMonsterName {
	margin-bottom: 3px;
	font-size: 12px;
}

.gameContainer.monster-panel-open #enemyMonsterHpBar.progress {
	height: 10px;
}

.gameContainer.monster-panel-open #enemyMonsterHpValue {
	margin-top: 3px;
	font-size: 12px;
}

/* Le tier est déjà indiqué dans le bandeau de zone : on récupère de la hauteur
   lorsque le drawer est ouvert. Le badge bonus Andy reste, lui, visible. */
.gameContainer.monster-panel-open .encounterBadgeTier {
	display: none;
}

.gameContainer.monster-panel-open .encounterBadgeBonus {
	min-height: 19px;
	margin-bottom: 4px;
	padding: 2px 7px;
	font-size: 8px;
}

#timer {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	z-index: 2;
	align-self: center;
	width: auto !important;
	margin: -5px auto 9px;
	padding: 4px 11px;
	border: 1px solid rgba(255, 214, 214, .42);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(151, 38, 38, .96), rgba(101, 20, 20, .96));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .12);
}

.gameContainer.monster-panel-open #timer {
	margin: -2px auto 4px;
	padding: 3px 8px;
	font-size: 10px;
}

/* ---------- Bouton Monstres ---------- */
#uiBtnContainer {
	bottom: calc(76px + env(safe-area-inset-bottom));
	left: 50%;
	width: auto;
	padding: 0;
	transform: translateX(-50%);
	z-index: 9;
}

.monsterToggleBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	margin: 0;
	padding: 4px 16px;
	border: 1px solid rgba(255, 231, 178, .8);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(22, 67, 102, .96), rgba(7, 31, 56, .97));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}

.monsterToggleBtn .monsterToggleLabel {
	display: inline-block;
	line-height: 1;
}

.monsterToggleBtn .monsterToggleChevron {
	font-size: 10px;
	transition: transform .2s ease;
}

.monsterToggleBtn.is-open .monsterToggleChevron {
	transform: rotate(180deg);
}

/* ---------- Barre stats ---------- */
#uiLvlContainer {
	bottom: max(8px, env(safe-area-inset-bottom));
	left: 0;
	width: 100%;
	padding: 0 12px;
	z-index: 8;
}

#uiLvlContainer > .row {
	margin: 0;
}

#uiLvlContainer > .row > .col-md-12 {
	padding: 0;
}

.playerDpsInfos {
	margin: 0;
	height: 53px;
	border: 1px solid rgba(217, 236, 251, .5);
	border-radius: 15px;
	background: linear-gradient(180deg, rgba(15, 51, 82, .92), rgba(6, 24, 45, .94));
	background-image: none;
	box-shadow: var(--ui-shadow), inset 0 1px rgba(255, 255, 255, .1);
	font-weight: 600;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}

.statItem {
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 22px 20px;
	align-items: center;
	justify-content: center;
	justify-items: center;
	column-gap: 9px;
	padding: 7px 7px 5px;
	text-align: center;
}

.statItem + .statItem::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: rgba(255, 255, 255, .14);
}

.statIcon {
	grid-column: 1;
	grid-row: 1;
	font-size: 13px;
	color: var(--ui-gold-light);
	text-align: center;
}


.statIconSvg {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 19px;
	height: 19px;
	justify-self: center;
	align-self: center;
	fill: var(--ui-gold-light);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

.statIconSwords {
	width: 20px;
	height: 20px;
}

.statIconClick {
	font-size: 16px;
}

.statIconImage {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 17px;
	height: 20px;
	object-fit: contain;
	justify-self: center;
	align-self: center;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

.statIconImageSc {
	width: 17px;
	height: 21px;
}

.statValue {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	padding-left: 0;
	font-family: "Poppins", Arial, sans-serif;
	font-size: 18px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
	text-align: center;
}

.statLabel {
	grid-column: 1 / 3;
	grid-row: 2;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--ui-text-soft);
	text-align: center;
}

/* ---------- Drawer d'amélioration des monstres ---------- */
#monsterContainer {
	position: absolute;
	left: 0 !important;
	bottom: calc(100% + 51px);
	top: auto;
	width: 100%;
	max-height: min(46vh, 430px);
	margin: 0;
	padding: 6px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid rgba(220, 237, 251, .52);
	border-top: 1px solid rgba(220, 237, 251, .52);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(7, 33, 60, .97), rgba(3, 20, 38, .98));
	box-shadow: 0 -7px 24px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .08);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px) scale(.985);
	transform-origin: bottom center;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

#monsterContainer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

#monsterContainer::-webkit-scrollbar {
	width: 5px;
}

#monsterContainer::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, .04);
	border-radius: 5px;
}

#monsterContainer::-webkit-scrollbar-thumb {
	background: rgba(118, 196, 231, .55);
	border-radius: 5px;
}

.monsterLine {
	height: 76px;
	margin-bottom: 5px;
	padding: 5px 7px;
	border: 1px solid rgba(177, 210, 235, .25);
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(20, 65, 99, .88), rgba(8, 36, 64, .92));
	background-image: none;
	box-shadow: inset 0 1px rgba(255, 255, 255, .05);
	font-size: 11px;
}

.monsterLine:last-child {
	margin-bottom: 0;
}

.monsterLine .row {
	margin: 0;
	align-items: center;
}

.monsterLine .monsterImg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto;
	border: 1px solid rgba(228, 239, 248, .35);
	border-radius: 12px;
	background: radial-gradient(circle, rgba(57, 118, 153, .55), rgba(5, 29, 51, .65));
	overflow: hidden;
}

.monsterLine .monsterImg img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}

.monsterName {
	max-width: 150px;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

.monsterInfo {
	display: flex;
	gap: 8px;
	line-height: 1.25;
	font-size: 11px;
	font-weight: 500;
	color: #d9e7f4;
}

.monsterInfo span {
	color: #fff;
	font-weight: 700;
}

.monsterUpgradeContainer {
	display: flex;
	align-items: center;
	min-height: 22px;
	margin-top: 2px;
}

.monsterUpgradeContainer img {
	width: 19px !important;
	height: 19px;
	margin: 1px 3px 0 0 !important;
	border-radius: 4px;
	cursor: pointer;
}

.monsterLine .btnUpgrade {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 43px;
	margin: 0;
	padding: 4px 6px !important;
	border-width: 1px;
	border-radius: 11px;
	box-shadow: 0 4px 9px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .16);
	font-weight: 700;
}

.monsterLine .btn-warning {
	background: linear-gradient(180deg, #ffb33e, #ef7f12);
	border-color: #ffd27c;
}

.monsterLine .btn-info {
	background: linear-gradient(180deg, #36a9d5, #197aa6);
	border-color: #8ed8ef;
}

.monsterLine .btn-secondary {
	background: linear-gradient(180deg, #667381, #444f5a);
	border-color: #89939d;
	opacity: .78;
}

.upgradeBtnText {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.upgradeBtnPrice,
.buyBtnPrice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ---------- Achat multiple de niveaux ---------- */
.monsterBulkUpgradeBtn {
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, opacity .14s ease;
}

.monsterBulkUpgradeBtn.is-bulk:not(:disabled) {
    box-shadow:
        0 5px 12px rgba(0, 0, 0, .32),
        0 0 0 1px rgba(255, 235, 178, .3),
        inset 0 1px rgba(255, 255, 255, .18);
}

.bulkUpgradeAmount {
    display: inline-block;
    min-width: 1.8em;
    text-align: left;
    font-weight: 800;
}

/* ---------- Feedback de combat ---------- */
.enemyMonsterImg.enemy-hit {
	animation: enemyHitPulse .18s ease-out;
}

@keyframes enemyHitPulse {
	0% {
		transform: translateX(0) scale(1);
		filter: brightness(1) drop-shadow(0 8px 8px rgba(0, 0, 0, .28));
	}
	35% {
		transform: translateX(-4px) scale(.94);
		filter: brightness(1.55) drop-shadow(0 0 12px rgba(255, 238, 184, .75));
	}
	70% {
		transform: translateX(3px) scale(1.04);
	}
	100% {
		transform: translateX(0) scale(1);
		filter: brightness(1) drop-shadow(0 8px 8px rgba(0, 0, 0, .28));
	}
}

.enemyMonsterHud.enemy-death .enemyMonsterImg {
	animation: enemyDeathPortrait .52s cubic-bezier(.2,.8,.25,1) forwards;
}

.enemyMonsterHud.enemy-death .enemyMonsterInfo {
	animation: enemyDeathInfo .52s ease forwards;
}

@keyframes enemyDeathPortrait {
	0% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
	28% {
		opacity: 1;
		transform: scale(1.13) rotate(2deg);
		filter: brightness(1.75) drop-shadow(0 0 18px rgba(255, 213, 96, .8));
	}
	100% {
		opacity: 0;
		transform: translateY(16px) scale(.58) rotate(-7deg);
		filter: brightness(1.2) blur(1px);
	}
}

@keyframes enemyDeathInfo {
	0%, 55% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: .35;
		transform: translateY(5px);
	}
}

/* Récompense SC : lisible même sur le décor très coloré. */
.gold-amount {
	top: 56%;
	left: 50%;
	z-index: 20;
	width: auto !important;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 12px);
	transition: none;
}

.gold-amount.show {
	animation: rewardFloat .98s cubic-bezier(.18,.82,.25,1) forwards;
}

.rewardBurst {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid rgba(140, 226, 255, .68);
	border-radius: 999px;
	background: rgba(3, 24, 45, .92);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .1);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	color: #fff;
	font-size: clamp(20px, 5vw, 27px);
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
	white-space: nowrap;
}

.rewardBurst img {
	width: 22px;
	height: 27px;
	object-fit: contain;
	filter: drop-shadow(0 0 7px rgba(55, 210, 255, .65));
}

@keyframes rewardFloat {
	0% {
		opacity: 0;
		transform: translate(-50%, 18px) scale(.82);
	}
	18% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1.06);
	}
	62% {
		opacity: 1;
		transform: translate(-50%, -22px) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -48px) scale(.96);
	}
}

.damage-text {
	z-index: 21;
	font-size: clamp(34px, 11vw, 52px);
	pointer-events: none;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .8));
}

.damage-text.is-critical {
	font-size: clamp(40px, 13vw, 62px);
	font-style: italic;
	letter-spacing: .03em;
	filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .9));
}

@media (max-width: 390px) {
	.headerBar {
		left: 9px;
		right: 9px;
	}

	#levelUIContainer {
		width: calc(100% - 18px);
	}

	

.level-selector-container {
		gap: 4px;
	}

	.level-selector {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		line-height: 38px;
		font-size: 18px;
	}

	.enemyMonsterContainer {
		padding-top: clamp(240px, 34vh, 300px);
	}

	.monsterLine {
		height: 72px;
		padding-left: 4px;
		padding-right: 4px;
	}

	.monsterLine .monsterImg {
		width: 46px;
		height: 46px;
	}

	.monsterLine .monsterImg img {
		width: 45px;
		height: 45px;
	}

	.monsterName {
		font-size: 12px;
	}

	.monsterInfo {
		gap: 5px;
		font-size: 9px;
	}

	.upgradeBtnText {
		font-size: 10px;
	}

	.statValue {
		font-size: 17px;
	}

	.statLabel {
		font-size: 10px;
	}
}


/* =========================================================
   UI V2.1 - Drawer créatures / améliorations
   ========================================================= */
#monsterContainer {
	max-height: min(50vh, 465px);
	padding: 0 7px 7px;
	border-color: rgba(215, 235, 250, .48);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(8, 33, 58, .97), rgba(3, 18, 34, .985));
	box-shadow: 0 -12px 30px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.monsterDrawerHeader {
	position: sticky;
	top: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	margin: 0 -7px 6px;
	padding: 6px 9px 6px 13px;
	border-bottom: 1px solid rgba(193, 222, 243, .25);
	background: linear-gradient(180deg, rgba(16, 55, 85, .99), rgba(7, 31, 55, .99));
	box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
}

.monsterDrawerTitleWrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.05;
}

.monsterDrawerEyebrow {
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.35px;
	color: #8fcce8;
}

.monsterDrawerTitle {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1px;
	color: #fff;
}

.monsterDrawerClose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(218, 236, 249, .3);
	border-radius: 10px;
	background: rgba(2, 18, 34, .55);
	color: #d9eaf6;
	font-size: 14px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .06);
	cursor: pointer;
}

.monsterDrawerClose:active {
	transform: scale(.95);
}

.monsterLine {
	min-height: 72px;
	height: auto;
	margin-bottom: 5px;
	padding: 6px 7px;
	border: 1px solid rgba(176, 210, 234, .24);
	border-radius: 14px;
	background: linear-gradient(90deg, rgba(21, 64, 96, .9), rgba(7, 31, 56, .94));
	box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 3px 7px rgba(0, 0, 0, .16);
}

.monsterLine.is-unowned {
	background: linear-gradient(90deg, rgba(28, 58, 78, .82), rgba(9, 27, 43, .94));
}

.monsterThumbColumn {
	flex: 0 0 52px;
	width: 52px;
	margin-right: 7px;
}

.monsterLine .monsterImg {
	width: 50px;
	height: 50px;
	margin: 0;
	border: 1px solid rgba(226, 239, 249, .3);
	border-radius: 13px;
	background: radial-gradient(circle at 50% 40%, rgba(63, 132, 168, .6), rgba(5, 27, 48, .72));
	box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.monsterLine .monsterImg img {
	width: 48px;
	height: 48px;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .32));
}

.monsterMainColumn {
	min-width: 0;
	padding: 0 5px 0 0;
}

.monsterName {
	max-width: none;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

.monsterInfo {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 3px;
	font-size: 11px;
	line-height: 1;
}

.monsterStat {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-height: 18px;
	padding: 2px 6px;
	border: 1px solid rgba(190, 220, 241, .16);
	border-radius: 7px;
	background: rgba(1, 16, 31, .38);
	white-space: nowrap;
}

.monsterStatLabel {
	font-size: 10px;
	font-weight: 600;
	color: #9fc1d8;
}

.monsterStatValue {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

.monsterUpgradeContainer {
	display: flex;
	align-items: center;
	min-height: 19px;
	margin: 0;
	gap: 3px;
	white-space: nowrap;
}

.monsterUpgradeContainer:empty {
	display: none;
}

.monsterUpgradeContainer .monsterUpgradeBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}

.monsterUpgradeContainer .monsterUpgradeBadge img {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	object-fit: contain;
	border-radius: 4px;
}

.monsterUpgradeBadge.is-acquired {
	opacity: 1;
	filter: none;
}

.monsterUpgradeBadge.is-available {
	opacity: .72;
	filter: saturate(.75) brightness(.9);
}

.monsterUpgradeBadge.is-unaffordable {
	opacity: .48;
	filter: grayscale(.62) saturate(.48);
}

.monsterUpgradeBadge.is-locked {
	opacity: .25;
	filter: grayscale(1) saturate(0);
}

.monsterUpgradeBadge:hover,
.monsterUpgradeBadge:focus-visible {
	opacity: 1;
	transform: translateY(-1px) scale(1.08);
	filter: brightness(1.12) saturate(1);
	outline: none;
}


.upgradeInfoPopover {
	position: fixed;
	z-index: 40;
	display: none;
	width: min(286px, calc(100vw - 24px));
	padding: 11px;
	border: 1px solid rgba(204, 228, 246, .5);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(11, 39, 66, .985), rgba(3, 20, 38, .99));
	box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #fff;
	text-shadow: none;
}

.upgradeInfoPopover.is-visible {
	display: block;
	animation: upgradeInfoIn .12s ease-out;
}

@keyframes upgradeInfoIn {
	from { opacity: 0; transform: translateY(4px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.upgradeInfoHeader {
	display: grid;
	grid-template-columns: 38px 1fr 28px;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
}

.upgradeInfoIcon {
	width: 36px;
	height: 36px;
	object-fit: contain;
	border: 1px solid rgba(225, 240, 250, .26);
	border-radius: 9px;
	background: rgba(3, 19, 35, .45);
}

.upgradeInfoHeading {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.upgradeInfoHeading strong {
	font-size: 14px;
	font-weight: 800;
}

.upgradeInfoHeading span {
	margin-top: 1px;
	font-size: 11px;
	color: #a9c9dd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upgradeInfoClose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(215, 235, 248, .22);
	border-radius: 8px;
	background: rgba(2, 16, 30, .42);
	color: #cde0ec;
	font-size: 12px;
}

.upgradeInfoRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 29px;
	padding: 5px 7px;
	border-top: 1px solid rgba(206, 228, 244, .1);
	font-size: 12px;
}

.upgradeInfoRow > span {
	color: #9ebfd4;
}

.upgradeInfoRow > strong {
	font-size: 12px;
	font-weight: 800;
	text-align: right;
}

.upgradeInfoPrice {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.upgradeInfoPrice img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.upgradeInfoStatus {
	margin-top: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 800;
	text-align: center;
}

.upgradeInfoStatus.is-acquired {
	background: rgba(37, 132, 91, .25);
	color: #86e6b7;
}

.upgradeInfoStatus.is-available {
	background: rgba(184, 117, 19, .25);
	color: #ffd382;
}

.upgradeInfoStatus.is-unaffordable,
.upgradeInfoStatus.is-locked {
	background: rgba(107, 124, 139, .2);
	color: #c0d0dc;
}

.upgradeInfoBuyBtn {
	width: 100%;
	min-height: 36px;
	margin: 8px 0 0;
	padding: 7px 10px;
	border: 1px solid #ffd27c;
	border-radius: 9px;
	background: linear-gradient(180deg, #ffb33e, #ef7f12);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 4px 9px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .16);
}

.monsterActionColumn {
	flex: 0 0 104px;
	width: 104px;
	padding: 0;
}

.monsterLine .monsterActionBtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 5px 5px !important;
	border-radius: 11px;
	font-size: 10px;
	line-height: 1;
	box-shadow: 0 4px 9px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .16);
}

.monsterActionLabel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .25px;
	text-transform: uppercase;
	white-space: nowrap;
}

.monsterActionBtn .upgradeBtnPrice,
.monsterActionBtn .buyBtnPrice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.monsterActionBtn .moneySc.small {
	width: 14px;
	height: 14px;
	margin: 0 0 0 2px;
}

@media (max-width: 390px) {
	#monsterContainer {
		max-height: min(52vh, 440px);
	}

	.monsterLine {
		min-height: 69px;
		padding: 5px 6px;
	}

	.monsterThumbColumn {
		flex-basis: 48px;
		width: 48px;
		margin-right: 6px;
	}

	.monsterLine .monsterImg {
		width: 46px;
		height: 46px;
	}

	.monsterLine .monsterImg img {
		width: 44px;
		height: 44px;
	}

	.monsterActionColumn {
		flex-basis: 94px;
		width: 94px;
	}

	.monsterName {
		font-size: 11px;
	}

	.monsterActionLabel {
		font-size: 10px;
	}

	.monsterActionBtn .upgradeBtnPrice,
	.monsterActionBtn .buyBtnPrice {
		font-size: 12px;
	}
}

@media (max-width: 390px) {
	.monsterUpgradeContainer {
		gap: 2px;
	}

	.monsterUpgradeContainer .monsterUpgradeBadge {
		flex-basis: 16px;
		width: 16px;
		height: 16px;
	}

	.monsterUpgradeContainer .monsterUpgradeBadge img {
		width: 14px;
		height: 14px;
	}
}


/* =========================================================
   V2.8 — Boss / rencontres spéciales
   Aucun changement de gameplay : uniquement des repères visuels.
   ========================================================= */

.level-selector {
    position: relative;
}

.level-selector.is-boss-level {
    border-color: rgba(255, 188, 93, .95);
    box-shadow:
        0 4px 9px rgba(0, 0, 0, .32),
        inset 0 1px rgba(255, 255, 255, .16),
        0 0 0 1px rgba(255, 112, 65, .24);
}

.level-selector.selected.is-boss-level {
    background: linear-gradient(180deg, #ffad3d, #d94b25);
    border-color: #ffe0a3;
    box-shadow:
        0 0 0 2px rgba(255, 128, 54, .25),
        0 5px 12px rgba(0, 0, 0, .36),
        0 0 14px rgba(255, 100, 45, .28);
}

.level-selector-boss-element {
    position: absolute;
    z-index: 3;
    top: -2px;
    right: -4px;
    width: 14px;
    height: 14px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9));
}

.level-selector.selected .level-selector-boss-element {
     filter:
        drop-shadow(1px 0 0 #000) drop-shadow(-0.5px 0 0 #000) drop-shadow(0 0.5px 0 #000) drop-shadow(0 1px 0 #000);
}

#levelInfo.is-boss-zone {
    border-color: rgba(255, 190, 116, .46);
    background: linear-gradient(180deg, rgba(111, 32, 27, .94), rgba(58, 15, 20, .94));
    color: #fff2d4;
    box-shadow: 0 4px 12px rgba(62, 9, 9, .35);
}

#levelInfo.is-boss-zone i {
    margin-right: 4px;
    color: #ffd56d;
}

.enemyMonsterHud.is-boss {
    border-color: rgba(255, 184, 89, .58);
    background:
        radial-gradient(circle at 50% 20%, rgba(124, 38, 20, .24), transparent 46%),
        linear-gradient(180deg, rgba(35, 20, 28, .62), rgba(12, 18, 31, .28));
    box-shadow:
        0 13px 30px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(255, 129, 56, .10),
        0 0 22px rgba(255, 91, 38, .10);
}

.enemyMonsterHud.is-boss .enemyMonsterImg {
    border-color: rgba(255, 194, 104, .62);
    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        0 10px 18px rgba(0, 0, 0, .34),
        0 0 16px rgba(255, 116, 49, .14);
}

.enemyMonsterHud.is-bonus {
    border-color: rgba(255, 218, 109, .68);
    background:
        radial-gradient(circle at 50% 24%, rgba(225, 166, 39, .18), transparent 52%),
        linear-gradient(180deg, rgba(45, 37, 17, .58), rgba(10, 23, 38, .26));
    box-shadow:
        0 13px 30px rgba(0, 0, 0, .30),
        0 0 20px rgba(255, 199, 66, .12);
}

.encounterBadge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    margin: 0 auto 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .25px;
    text-transform: uppercase;
    white-space: nowrap;
}

.encounterBadgeBonus {
    color: #fff1b8;
    border: 1px solid rgba(255, 221, 122, .60);
    background: linear-gradient(180deg, rgba(123, 84, 13, .94), rgba(70, 43, 5, .94));
    box-shadow: 0 3px 10px rgba(0, 0, 0, .26), inset 0 1px rgba(255,255,255,.10);
}

.encounterBadgeBonus i {
    color: #64e2ff;
}


/* V2.9 — Rencontre bonus : distinction forte, y compris sur un niveau boss. */
.enemyMonsterHud.is-bonus {
    border-color: rgba(255, 221, 104, .92);
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 207, 73, .26), transparent 50%),
        linear-gradient(180deg, rgba(74, 52, 12, .82), rgba(22, 27, 31, .48));
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 224, 129, .16),
        0 0 28px rgba(255, 190, 48, .28);
}

.enemyMonsterHud.is-bonus .enemyMonsterImg {
    border: 3px solid rgba(255, 218, 75, .95);
    background:
        radial-gradient(circle, rgba(123, 92, 17, .88), rgba(31, 35, 25, .72) 68%, rgba(15, 18, 20, .28) 100%);
    box-shadow:
        inset 0 1px rgba(255,255,255,.20),
        0 10px 18px rgba(0,0,0,.36),
        0 0 0 4px rgba(255, 187, 39, .15),
        0 0 24px rgba(255, 190, 48, .42);
}

.enemyMonsterHud.is-bonus .enemyMonsterInfo {
    border-color: rgba(255, 220, 117, .62);
    background: rgba(49, 37, 10, .86);
}

.enemyMonsterHud.is-bonus #enemyMonsterHpBar.progress {
    border-color: rgba(255, 225, 131, .95);
}

.enemyMonsterHud.is-bonus .encounterBadgeBonus {
    color: #fff6cb;
    border-color: rgba(255, 226, 126, .95);
    background: linear-gradient(180deg, #b77a12, #6f4305);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .28),
        0 0 16px rgba(255, 190, 48, .22),
        inset 0 1px rgba(255,255,255,.18);
}

.enemyMonsterHud.is-bonus .encounterBadgeBonus i {
    color: #6ce7ff;
}


/* =========================================================
   UI V3.0 - passe de finition globale / lisibilité
   ========================================================= */

/* Typographie : quelques petits textes gagnent 1 px sans changer le layout. */
.headerBar {
	font-size: 19px;
}

#levelInfo {
	font-size: 15px;
	font-weight: 700;
}

#timer {
	font-size: 13px;
}

#enemyMonsterName,
#enemyMonsterHpValue {
	font-size: 16px;
}

.encounterBadge,
.encounterBadgeBonus {
	font-size: 11px;
	letter-spacing: .15px;
}

.monsterDrawerEyebrow {
	font-size: 11px;
}

.monsterDrawerTitle {
	font-size: 17px;
}

.monsterName {
	font-size: 14px;
}

.monsterStatLabel {
	font-size: 11px;
}

.monsterStatValue {
	font-size: 12px;
}

.monsterActionLabel {
	font-size: 11px;
}

.monsterActionBtn .upgradeBtnPrice,
.monsterActionBtn .buyBtnPrice {
	font-size: 14px;
}

.upgradeInfoHeading strong {
	font-size: 15px;
}

.upgradeInfoHeading span,
.upgradeInfoStatus {
	font-size: 12px;
}

.upgradeInfoRow,
.upgradeInfoRow > strong,
.upgradeInfoBuyBtn {
	font-size: 13px;
}

/* Transitions cohérentes et légères sur les éléments interactifs. */
.level-selector,
.monsterToggleBtn,
.monsterDrawerClose,
.monsterLine,
.monsterActionBtn,
.upgradeInfoBuyBtn,
.upgradeInfoClose {
	transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease, background-color .15s ease;
}

.level-selector:active,
.monsterToggleBtn:active,
.monsterActionBtn:active,
.upgradeInfoBuyBtn:active,
.upgradeInfoClose:active {
	transform: scale(.96);
}

/* Focus clavier lisible sans ajouter de contour permanent. */
.level-selector:focus-visible,
.monsterToggleBtn:focus-visible,
.monsterDrawerClose:focus-visible,
.monsterActionBtn:focus-visible,
.upgradeInfoBuyBtn:focus-visible,
.upgradeInfoClose:focus-visible,
.monsterUpgradeBadge:focus-visible {
	outline: 2px solid rgba(102, 228, 240, .95);
	outline-offset: 2px;
}

/* Hover seulement sur les appareils qui ont réellement un pointeur. */
@media (hover: hover) and (pointer: fine) {
	.level-selector:hover:not(.selected) {
		filter: brightness(1.09);
		box-shadow: 0 6px 12px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .2);
		transform: translateY(-1px);
	}

	.monsterToggleBtn:hover,
	.monsterDrawerClose:hover,
	.upgradeInfoClose:hover {
		filter: brightness(1.1);
		border-color: rgba(225, 241, 252, .58);
	}

	.monsterLine:hover {
		border-color: rgba(163, 220, 248, .42);
		box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 5px 10px rgba(0, 0, 0, .2);
	}

	.monsterActionBtn:hover,
	.upgradeInfoBuyBtn:hover {
		filter: brightness(1.07) saturate(1.05);
		box-shadow: 0 6px 12px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .2);
	}
}

/* Les textes secondaires restent secondaires, mais plus lisibles sur le fond sombre. */
.monsterStatLabel,
.upgradeInfoHeading span,
.upgradeInfoRow > span {
	color: #b7d2e3;
}

/* Barre basse : centrage visuel renforcé sans l'agrandir davantage. */
.statItem {
	text-align: center;
}

.statValue,
.statLabel {
	justify-self: center;
	text-align: center;
}

/* Sur petit mobile, on garde la lisibilité sans faire grossir les cartes. */
@media (max-width: 390px) {
	.headerBar {
		font-size: 18px;
	}

	#levelInfo {
		font-size: 14px;
	}

	#enemyMonsterName,
	#enemyMonsterHpValue {
		font-size: 15px;
	}

	.monsterDrawerTitle {
		font-size: 16px;
	}

	.monsterDrawerEyebrow {
		font-size: 10px;
	}

	.monsterName {
		font-size: 13px;
	}

	.monsterStatLabel {
		font-size: 10px;
	}

	.monsterStatValue {
		font-size: 11px;
	}

	.monsterActionLabel {
		font-size: 10px;
	}

	.monsterActionBtn .upgradeBtnPrice,
	.monsterActionBtn .buyBtnPrice {
		font-size: 13px;
	}
}

/* Respecte le réglage système "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


/* =========================================================
   V3.2 — Catalogue MMEG / tiers d'ennemis
   ========================================================= */
.enemyCatalogError {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(340px, calc(100vw - 36px));
	min-height: 92px;
	margin: auto;
	padding: 16px;
	border: 1px solid rgba(255, 184, 118, .65);
	border-radius: 16px;
	background: rgba(55, 20, 15, .9);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
	color: #fff2de;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

/* Les tiers utilisent déjà le style boss validé. Ces attributs/classes
   servent aussi de points d'accroche pour de futurs skins spécifiques. */
#levelInfo[data-encounter-tier="boss25"] {
	border-color: rgba(210, 173, 255, .72);
}

#levelInfo[data-encounter-tier="boss50"] {
	border-color: rgba(114, 225, 255, .72);
}

#levelInfo[data-encounter-tier="boss100"] {
	border-color: rgba(255, 213, 118, .9);
	box-shadow: 0 0 0 1px rgba(255, 176, 43, .2), 0 5px 16px rgba(0, 0, 0, .34);
}


/* =========================================================
   V3.3 — identité visuelle des tiers de boss
   Les pools d'artworks restent ceux du catalogue MMEG V3.2.
   ========================================================= */

.encounterBadgeTier {
    margin-bottom: 8px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.38);
    background: rgba(13, 31, 50, .9);
    box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.10);
}

.encounterBadgeTier i {
    font-size: 9px;
}

/* Boss R3 — bronze / ambre. */
.enemyMonsterHud.enemy-tier-boss5:not(.is-bonus) {
    border-color: rgba(240, 165, 76, .72);
    background:
        radial-gradient(circle at 50% 22%, rgba(193, 105, 33, .22), transparent 48%),
        linear-gradient(180deg, rgba(54, 31, 24, .72), rgba(10, 21, 34, .34));
    box-shadow: 0 14px 30px rgba(0,0,0,.32), 0 0 18px rgba(218, 126, 46, .13);
}
.enemyMonsterHud.enemy-tier-boss5:not(.is-bonus) .enemyMonsterImg {
    border-color: rgba(243, 177, 89, .72);
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 18px rgba(0,0,0,.34), 0 0 15px rgba(222, 130, 50, .18);
}
.encounterBadgeTier-boss5 {
    color: #ffe0b1;
    border-color: rgba(239, 171, 87, .70);
    background: linear-gradient(180deg, rgba(133, 73, 28, .96), rgba(75, 38, 18, .96));
}

/* Boss R4 — rouge / rubis. */
.enemyMonsterHud.enemy-tier-boss10:not(.is-bonus) {
    border-color: rgba(255, 112, 94, .78);
    background:
        radial-gradient(circle at 50% 22%, rgba(177, 36, 37, .24), transparent 48%),
        linear-gradient(180deg, rgba(57, 22, 29, .76), rgba(12, 18, 32, .36));
    box-shadow: 0 14px 30px rgba(0,0,0,.33), 0 0 20px rgba(255, 72, 61, .15);
}
.enemyMonsterHud.enemy-tier-boss10:not(.is-bonus) .enemyMonsterImg {
    border-color: rgba(255, 126, 105, .82);
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 18px rgba(0,0,0,.34), 0 0 17px rgba(255, 73, 63, .20);
}
.encounterBadgeTier-boss10 {
    color: #ffd6cf;
    border-color: rgba(255, 119, 101, .76);
    background: linear-gradient(180deg, rgba(145, 40, 42, .97), rgba(80, 20, 28, .97));
}

/* Boss Elite 25 — violet / arcane. */
.enemyMonsterHud.enemy-tier-boss25:not(.is-bonus) {
    border-color: rgba(198, 143, 255, .82);
    background:
        radial-gradient(circle at 50% 20%, rgba(128, 69, 194, .28), transparent 49%),
        linear-gradient(180deg, rgba(47, 29, 67, .78), rgba(12, 19, 34, .36));
    box-shadow: 0 14px 32px rgba(0,0,0,.34), 0 0 25px rgba(177, 104, 255, .19);
}
.enemyMonsterHud.enemy-tier-boss25:not(.is-bonus) .enemyMonsterImg {
    border-color: rgba(211, 164, 255, .90);
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 18px rgba(0,0,0,.34), 0 0 20px rgba(178, 101, 255, .28);
}
.encounterBadgeTier-boss25 {
    color: #f0ddff;
    border-color: rgba(213, 168, 255, .82);
    background: linear-gradient(180deg, rgba(103, 58, 151, .97), rgba(54, 29, 86, .97));
}
#levelInfo[data-encounter-tier="boss25"] {
    background: linear-gradient(180deg, rgba(89, 48, 125, .96), rgba(45, 24, 70, .96));
    color: #f2e6ff;
    box-shadow: 0 4px 14px rgba(54, 20, 88, .42), 0 0 13px rgba(180, 110, 255, .14);
}

/* Boss Evolué 50 — cyan / énergie. */
.enemyMonsterHud.enemy-tier-boss50:not(.is-bonus) {
    border-color: rgba(98, 218, 255, .86);
    background:
        radial-gradient(circle at 50% 20%, rgba(41, 158, 201, .27), transparent 49%),
        linear-gradient(180deg, rgba(23, 53, 70, .80), rgba(9, 21, 36, .38));
    box-shadow: 0 14px 32px rgba(0,0,0,.34), 0 0 26px rgba(73, 205, 255, .20);
}
.enemyMonsterHud.enemy-tier-boss50:not(.is-bonus) .enemyMonsterImg {
    border-color: rgba(122, 226, 255, .94);
    box-shadow: inset 0 1px rgba(255,255,255,.20), 0 10px 18px rgba(0,0,0,.34), 0 0 21px rgba(68, 204, 255, .30);
}
.encounterBadgeTier-boss50 {
    color: #d9f8ff;
    border-color: rgba(124, 227, 255, .86);
    background: linear-gradient(180deg, rgba(29, 119, 154, .97), rgba(17, 68, 98, .97));
}
#levelInfo[data-encounter-tier="boss50"] {
    background: linear-gradient(180deg, rgba(25, 105, 137, .96), rgba(14, 55, 83, .96));
    color: #dffaff;
    box-shadow: 0 4px 14px rgba(7, 52, 78, .42), 0 0 13px rgba(80, 210, 255, .14);
}

/* Grand Boss 100 — or / blanc, pulsation discrète. */
.enemyMonsterHud.enemy-tier-boss100:not(.is-bonus) {
    border-color: rgba(255, 220, 116, .96);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 220, 120, .27), transparent 50%),
        linear-gradient(180deg, rgba(72, 54, 22, .84), rgba(13, 21, 33, .40));
    box-shadow:
        0 15px 34px rgba(0,0,0,.36),
        0 0 0 1px rgba(255, 228, 142, .17),
        0 0 30px rgba(255, 205, 80, .28);
    animation: grandBossAura 2.4s ease-in-out infinite;
}
.enemyMonsterHud.enemy-tier-boss100:not(.is-bonus) .enemyMonsterImg {
    border: 2px solid rgba(255, 229, 151, .98);
    box-shadow:
        inset 0 1px rgba(255,255,255,.24),
        0 10px 18px rgba(0,0,0,.34),
        0 0 0 3px rgba(255, 203, 64, .10),
        0 0 25px rgba(255, 209, 79, .37);
}
.encounterBadgeTier-boss100 {
    color: #fff7cf;
    border-color: rgba(255, 229, 149, .95);
    background: linear-gradient(180deg, rgba(166, 114, 27, .98), rgba(92, 59, 10, .98));
    box-shadow: 0 4px 12px rgba(0,0,0,.30), 0 0 15px rgba(255, 207, 78, .22), inset 0 1px rgba(255,255,255,.18);
}
#levelInfo[data-encounter-tier="boss100"] {
    background: linear-gradient(180deg, rgba(154, 103, 23, .97), rgba(80, 51, 9, .97));
    color: #fff7ce;
    border-color: rgba(255, 224, 136, .95);
    box-shadow: 0 5px 16px rgba(72, 43, 5, .42), 0 0 18px rgba(255, 199, 56, .18);
}

.level-selector.selected.enemy-tier-boss25 {
    background: linear-gradient(180deg, #b875ef, #7140a5);
    border-color: #ead4ff;
}
.level-selector.selected.enemy-tier-boss50 {
    background: linear-gradient(180deg, #52cce9, #237fa9);
    border-color: #d7f8ff;
}
.level-selector.selected.enemy-tier-boss100 {
    background: linear-gradient(180deg, #ffd866, #c68415);
    border-color: #fff2bd;
}

@keyframes grandBossAura {
    0%, 100% { box-shadow: 0 15px 34px rgba(0,0,0,.36), 0 0 0 1px rgba(255,228,142,.17), 0 0 23px rgba(255,205,80,.20); }
    50% { box-shadow: 0 15px 34px rgba(0,0,0,.36), 0 0 0 1px rgba(255,228,142,.22), 0 0 35px rgba(255,205,80,.34); }
}

@media (prefers-reduced-motion: reduce) {
    .enemyMonsterHud.enemy-tier-boss100:not(.is-bonus) { animation: none; }
}

/* =========================================================
   V3.7.5 — Outils debug / équilibrage
   Le panneau n'est injecté que lorsque le mode DBG est activé.
   ========================================================= */
.debugToolsRoot {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 5000;
    font-family: "Poppins", sans-serif;
    color: #eef8ff;
}

.debugToolsToggle {
    border: 1px solid rgba(122, 222, 255, .82);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(17, 93, 128, .96), rgba(8, 48, 73, .96));
    color: #e9fbff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .12);
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
}

.debugToolsToggle:hover,
.debugToolsToggle:focus-visible {
    filter: brightness(1.1);
    outline: 2px solid rgba(125, 226, 255, .42);
    outline-offset: 2px;
}

.debugToolsPanel {
    position: absolute;
    right: 0;
    top: 45px;
    width: min(420px, calc(100vw - 20px));
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
    border: 1px solid rgba(103, 192, 230, .70);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 38, 60, .985), rgba(5, 24, 40, .985));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .50), inset 0 1px rgba(255, 255, 255, .08);
    padding: 12px;
    text-align: left;
}

.debugToolsPanel.is-open { display: block; }

.debugToolsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.debugToolsHeader small {
    display: block;
    color: #77dffc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.debugToolsHeader strong {
    display: block;
    font-size: 17px;
    line-height: 1.1;
}

.debugToolsClose {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(141, 198, 224, .45);
    background: rgba(11, 44, 65, .85);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.debugToolsWarning {
    padding: 8px 9px;
    border-radius: 9px;
    border: 1px solid rgba(255, 196, 82, .42);
    background: rgba(115, 71, 8, .24);
    color: #ffe8aa;
    font-size: 10px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.debugStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.debugStatsGrid > div {
    min-width: 0;
    padding: 7px 6px;
    border: 1px solid rgba(92, 173, 207, .26);
    border-radius: 9px;
    background: rgba(9, 55, 82, .62);
}

.debugStatsGrid span {
    display: block;
    font-size: 8px;
    color: #8fbed3;
    text-transform: uppercase;
    font-weight: 700;
}

.debugStatsGrid strong {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debugBossMetrics {
    margin-top: 7px;
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(13, 72, 100, .45);
    color: #d6f6ff;
    font-size: 10px;
    line-height: 1.45;
}

.debugToolsSection {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(108, 179, 210, .20);
}


.debugFreshBackupState {
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid rgba(107, 185, 218, .25);
    background: rgba(5, 34, 52, .72);
    color: #b8ddeb;
    font-size: 9px;
    line-height: 1.4;
}

.debugFreshBackupState.is-active {
    border-color: rgba(106, 231, 172, .44);
    background: rgba(18, 87, 64, .30);
    color: #a9f4d2;
}

.debugFreshActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 7px;
}

.debugFreshActions button {
    min-height: 34px;
    border: 1px solid rgba(104, 192, 228, .48);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(23, 115, 151, .94), rgba(11, 72, 105, .94));
    color: #f4fcff;
    padding: 6px 8px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.debugFreshActions button:hover { filter: brightness(1.12); }
.debugFreshActions button:disabled { opacity: .4; cursor: not-allowed; }

.debugFreshHint {
    margin-top: 6px;
    color: #8fb8c9;
    font-size: 8px;
    line-height: 1.4;
}

.debugToolsSection h4 {
    margin: 0 0 7px;
    color: #9fe9ff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.debugFormRow {
    display: flex;
    align-items: end;
    gap: 7px;
}

.debugFormRowTwo > label { flex: 1; }

.debugToolsPanel label {
    margin: 0;
    color: #b6d4e2;
    font-size: 9px;
    font-weight: 700;
}

.debugToolsPanel input[type="text"],
.debugToolsPanel input[type="number"],
.debugToolsPanel select {
    width: 100%;
    margin-top: 3px;
    min-height: 34px;
    border: 1px solid rgba(116, 190, 222, .46);
    border-radius: 8px;
    background: rgba(3, 24, 39, .90);
    color: #f4fbff;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    outline: none;
}

.debugToolsPanel input:focus,
.debugToolsPanel select:focus {
    border-color: rgba(102, 224, 255, .92);
    box-shadow: 0 0 0 2px rgba(76, 196, 232, .14);
}

.debugPrimaryBtn,
.debugPresetRow button,
.debugToolsFooter button {
    border: 1px solid rgba(104, 192, 228, .48);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(23, 115, 151, .94), rgba(11, 72, 105, .94));
    color: #f4fcff;
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.debugPrimaryBtn:hover,
.debugPresetRow button:hover,
.debugToolsFooter button:hover { filter: brightness(1.12); }

.debugPrimaryBtn:disabled,
.debugPresetRow button:disabled,
.debugToolsFooter button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#debugApplyLevel,
#debugApplyCreature {
    width: 100%;
    margin-top: 7px;
}

.debugPresetRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.debugToolsSection .debugPresetRow:has(.debugCurrencyPreset) {
    grid-template-columns: repeat(3, 1fr);
}

.debugInlineAction input { flex: 1; }
.debugInlineAction button { flex: 0 0 72px; }

.debugNextRecruit {
    margin-top: 7px;
    padding: 6px 7px;
    border-radius: 8px;
    background: rgba(6, 35, 53, .75);
    color: #bfefff;
    font-size: 9px;
    line-height: 1.4;
}

.debugCreatureControls {
    margin-top: 7px;
    align-items: center;
}

.debugCreatureControls > label:first-child { flex: 0 0 95px; }
.debugCheckboxLabel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 13px;
    cursor: pointer;
}

.debugCheckboxLabel input { margin: 0; }

.debugToolsFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(108, 179, 210, .20);
}

.debugToolsFooter #debugDisableTools { grid-column: 1 / -1; }
.debugDangerBtn {
    border-color: rgba(255, 111, 111, .48) !important;
    background: linear-gradient(180deg, rgba(136, 45, 45, .94), rgba(82, 25, 25, .94)) !important;
}

.debugToolsStatus {
    min-height: 16px;
    margin-top: 7px;
    color: #9dddf3;
    font-size: 9px;
    text-align: center;
}
.debugToolsStatus.is-success { color: #8df2c4; }
.debugToolsStatus.is-error { color: #ff9f9f; }

@media (max-width: 520px) {
    .debugToolsRoot { right: 7px; top: 7px; }
    .debugToolsPanel { width: calc(100vw - 14px); max-height: calc(100vh - 62px); }
}

/* V3.7.6.1 — restauration UI de l'optimizer DPS (perdue lors des patches debug/HUD). */
.monsterDpsShareStat {
    border-color: rgba(98, 207, 238, .22);
    background: rgba(4, 45, 65, .42);
}

.monsterDpsShareValue {
    color: #9be8ff;
}

.monsterUpgradeInsight {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 15px;
    margin: -1px 0 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #b7d2e3;
}

.monsterUpgradeGainValue {
    color: #d9f4ff;
}

.monsterUpgradeEfficiencyValue {
    color: #8fcbe3;
}

.monsterUpgradeInsightSep {
    opacity: .45;
}

.monsterEfficiencyBestBadge {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 221, 116, .62);
    border-radius: 5px;
    background: rgba(152, 97, 8, .28);
    color: #ffe49a;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.monsterEfficiencyBestBadge.is-visible {
    display: inline-flex;
}

.monsterActionBtn.is-optimal-upgrade {
    border-color: rgba(255, 225, 119, .95) !important;
    box-shadow: 0 0 0 2px rgba(255, 213, 74, .18), 0 5px 12px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .2) !important;
}

.monsterUpgradeBadge.is-optimal-upgrade {
    opacity: 1 !important;
    filter: brightness(1.2) saturate(1.15) drop-shadow(0 0 4px rgba(255, 213, 74, .85)) !important;
    transform: scale(1.08);
}

.upgradeInfoBest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 220, 105, .42);
    border-radius: 8px;
    background: rgba(143, 91, 7, .24);
    color: #ffe49a;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 390px) {
    .monsterUpgradeInsight {
        gap: 3px;
        font-size: 8px;
    }

    .monsterEfficiencyBestBadge {
        font-size: 7px;
        padding: 2px 3px;
    }
}

/* =========================================================
   V3.8.1 — Achat OPTI sticky
   Toujours visible sous l'en-tête du drawer. Le bouton reprend
   le même calcul SC/DPS que les badges OPTI des créatures.
   ========================================================= */
.monsterOptiBar {
    position: sticky;
    top: 48px;
    z-index: 3;
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: -6px 0 6px;
    padding: 6px 1px 7px;
    background: linear-gradient(180deg, rgba(7, 31, 55, .99), rgba(5, 25, 46, .97));
    box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
}

.monsterOptiBuyBtn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255, 218, 91, .72);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(177, 114, 13, .96), rgba(115, 68, 7, .98));
    color: #fff8d7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .16);
    font-family: "Poppins", sans-serif;
    text-align: left;
    cursor: pointer;
    transition: filter .12s ease, transform .12s ease, border-color .12s ease;
}

.monsterOptiBuyBtn.is-ready:hover,
.monsterOptiBuyBtn.is-ready:focus-visible {
    filter: brightness(1.08);
    border-color: rgba(255, 233, 146, .96);
    outline: none;
}

.monsterOptiBuyBtn.is-ready:active {
    transform: translateY(1px);
}

.monsterOptiBuyBtn:disabled {
    cursor: default;
    border-color: rgba(157, 180, 196, .28);
    background: linear-gradient(180deg, rgba(72, 91, 105, .82), rgba(43, 58, 70, .88));
    color: rgba(226, 237, 244, .66);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.monsterOptiAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 235, 164, .42);
    border-radius: 8px;
    background: rgba(53, 31, 3, .28);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .2px;
    white-space: nowrap;
}

.monsterOptiSummary {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.12;
}

.monsterOptiTarget {
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.monsterOptiMeta {
    margin-top: 2px;
    overflow: hidden;
    color: rgba(255, 244, 207, .78);
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.monsterOptiBuyBtn:disabled .monsterOptiMeta {
    color: rgba(220, 232, 240, .5);
}

@media (max-width: 390px) {
    .monsterOptiBuyBtn {
        gap: 6px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .monsterOptiAction {
        min-width: 80px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 10px;
    }

    .monsterOptiTarget {
        font-size: 10px;
    }

    .monsterOptiMeta {
        font-size: 8px;
    }
}


/* =========================================================
   V3.8.2 — Sélecteur bulk global tactile
   Permet sur mobile de remplacer Shift/Ctrl/Alt avec un bouton
   x1/x10/x100/x1000 placé directement à côté de l'OPTI.
   ========================================================= */
.monsterBulkModeBtn {
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 44px;
    padding: 5px 4px;
    border: 1px solid rgba(116, 205, 240, .58);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(26, 107, 145, .96), rgba(12, 62, 91, .98));
    color: #eafaff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .12);
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.monsterBulkModeBtn:hover,
.monsterBulkModeBtn:focus-visible {
    filter: brightness(1.08);
    border-color: rgba(156, 230, 255, .92);
    outline: none;
}

.monsterBulkModeBtn:active {
    transform: translateY(1px) scale(.98);
}

.monsterBulkModeBtn.is-active {
    border-color: rgba(255, 218, 91, .88);
    background: linear-gradient(180deg, rgba(194, 126, 17, .98), rgba(117, 70, 8, .99));
    color: #fff8d7;
}

.monsterBulkModeBtn.is-keyboard-override {
    box-shadow: 0 0 0 2px rgba(113, 218, 255, .2), 0 4px 10px rgba(0, 0, 0, .24);
}

.monsterBulkModeValue {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.3px;
}

.monsterBulkModeLabel {
    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .45px;
    opacity: .78;
}

@media (max-width: 390px) {
    .monsterOptiBar {
        gap: 4px;
    }

    .monsterBulkModeBtn {
        flex-basis: 50px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .monsterBulkModeValue {
        font-size: 14px;
    }

    .monsterBulkModeLabel {
        font-size: 6px;
    }
}

/* V3.9 — Profil joueur / statistiques / sauvegarde */
.headerBar .portraitImg { cursor: pointer; }
.headerBar .portraitImg:focus-visible { outline: 2px solid var(--ui-cyan); outline-offset: 2px; }
.player-panel-open { overflow: hidden; }
.playerPanel { position: fixed; inset: 0; z-index: 5000; display: none; font-family: "Poppins", sans-serif; }
.playerPanel.is-open { display: block; }
.playerPanelBackdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.playerPanelDialog { position: absolute; top: max(10px, env(safe-area-inset-top)); bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 18px), 500px); display: flex; flex-direction: column; overflow: hidden; color: white; background: linear-gradient(180deg, var(--ui-navy), rgba(4,18,34,.98)); border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: 0 18px 55px rgba(0,0,0,.65); }
.playerPanelHeader { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid rgba(214,236,255,.2); }
.playerPanelHeader small { display:block; color:var(--ui-cyan); font-size:10px; letter-spacing:1.5px; font-weight:700; }
.playerPanelHeader strong { display:block; color:var(--ui-gold-light); font-size:20px; line-height:1.1; }
#playerPanelClose { border:0; background:transparent; color:white; font-size:32px; line-height:1; padding:0 4px; cursor:pointer; }
.playerPanelTabs { display:grid; grid-template-columns:repeat(3,1fr); padding:8px; gap:6px; background:rgba(0,0,0,.18); }
.playerPanelTab { border:1px solid rgba(214,236,255,.25); border-radius:8px; padding:9px 4px; color:var(--ui-text-soft); background:rgba(255,255,255,.04); font-weight:800; font-size:12px; }
.playerPanelTab.is-active { color:#071a2e; background:var(--ui-cyan); border-color:var(--ui-cyan); }
.playerPanelBody { overflow-y:auto; overscroll-behavior:contain; padding:12px; -webkit-overflow-scrolling:touch; }
.playerPanelPane { display:none; }.playerPanelPane.is-active { display:block; }
.profileHero { display:grid; grid-template-columns:86px 1fr; gap:14px; align-items:center;}
.profilePortraitPreview { width:82px; height:82px; background:linear-gradient(135deg,rgba(102,228,240,.18),rgba(247,178,59,.18)), url('img/ui/portraitFrame.png') center/cover; border:1px solid var(--ui-line); }
.profileHero span { display:block; color:var(--ui-text-soft); font-size:11px; text-transform:uppercase; }.profileHero strong { display:block; color:var(--ui-gold-light); font-size:22px; margin-bottom:4px; }
.playerFieldLabel { display:block; margin:16px 0 5px; color:var(--ui-text-soft); font-size:12px; font-weight:700; }
.playerNicknameEdit { display:flex; gap:7px; }.playerNicknameEdit input { min-width:0; flex:1; border:1px solid var(--ui-line); border-radius:8px; background:rgba(0,0,0,.28); color:white; padding:10px; }.playerNicknameEdit button,.playerSaveSection button,.playerImportButton { border:1px solid var(--ui-cyan); border-radius:8px; background:var(--ui-blue); color:white; padding:10px 12px; font-size:11px; font-weight:800; cursor:pointer; }
.playerPanelHint,.playerSaveSection p { color:var(--ui-text-soft); font-size:11px; margin:10px 0; }
.playerStatsSection,.playerSaveSection { margin-bottom:12px; border:1px solid rgba(214,236,255,.2); border-radius:11px; overflow:hidden; background:rgba(255,255,255,.035); }
.playerStatsSection h3,.playerSaveSection h3 { margin:0; padding:9px 11px; color:var(--ui-gold-light); background:rgba(0,0,0,.2); font-size:13px; font-weight:800; text-transform:uppercase; }
.playerStatsGrid { padding:4px 10px; }.playerStatRow { display:flex; justify-content:space-between; gap:12px; padding:7px 1px; border-bottom:1px solid rgba(214,236,255,.09); font-size:12px; }.playerStatRow:last-child{border-bottom:0}.playerStatRow span{color:var(--ui-text-soft)}.playerStatRow strong{color:white;text-align:right}
.playerSaveSection { padding-bottom:11px; }.playerSaveSection p,.playerSaveSection button,.playerSaveSection .playerImportButton,#playerSaveStatus { margin-left:11px; margin-right:11px; }.playerSaveSection button { display:block; width:calc(100% - 22px); margin-top:7px; }.playerImportButton { display:block; text-align:center; margin-top:8px; }.playerSaveSection input[type=file]{display:none}#playerSaveStatus{min-height:18px;margin-top:8px;color:var(--ui-cyan);font-size:11px}#playerSaveStatus.is-error{color:#ff8d8d}
@media (max-width: 360px) { .playerPanelDialog{width:calc(100% - 8px);top:4px;bottom:4px}.playerPanelBody{padding:8px}.profileHero{grid-template-columns:68px 1fr}.profilePortraitPreview{width:64px;height:64px}.playerNicknameEdit{display:block}.playerNicknameEdit button{width:100%;margin-top:7px} }

/* V3.9.1 — le cadre du portrait est décoratif et ne doit pas intercepter le clic. */
.headerBar .portraitFrame { pointer-events: none; }


/* V3.9.6 — Portrait joueur : cadrage + sélecteur 5 portraits par évolution. */
.profilePortraitPreview {
    box-sizing:border-box; flex:0 0 auto; overflow:hidden;
    background-color:rgba(5,25,46,.82);
    background-position:center center !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    border:0px solid rgba(245,209,138,.9);
    box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.playerPortraitPicker{margin-top:14px;padding-top:12px;border-top:1px solid rgba(214,236,255,.16)}
.playerPortraitPickerTitle{color:var(--ui-gold-light);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
.playerPortraitPicker .playerPanelHint{margin:3px 0 10px}
.portraitChoiceGroup{margin-top:10px}
.portraitChoiceGroupTitle{margin-bottom:5px;color:var(--ui-text-soft);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.portraitChoiceGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.portraitChoice{position:relative;min-width:0;aspect-ratio:1/1;padding:2px;overflow:hidden;border:1px solid rgba(214,236,255,.28);border-radius:8px;background:rgba(5,25,46,.78);box-shadow:inset 0 1px rgba(255,255,255,.04);cursor:pointer;touch-action:manipulation}
.portraitChoice:hover,.portraitChoice:focus-visible{border-color:var(--ui-cyan);outline:none}
.portraitChoice.is-selected{border:2px solid var(--ui-gold-light);box-shadow:0 0 0 2px rgba(247,178,59,.2),inset 0 1px rgba(255,255,255,.08)}
.portraitChoiceImage{position:absolute;inset:2px;display:block;background-position:center center;background-size:contain;background-repeat:no-repeat}
.portraitChoiceRank{position:absolute;right:2px;bottom:2px;z-index:1;min-width:16px;padding:1px 3px;border-radius:4px;background:rgba(2,14,27,.82);color:var(--ui-gold-light);font-size:8px;font-weight:900;line-height:1.25;text-align:center}
@media (max-width:360px){.portraitChoiceGrid{gap:4px}.portraitChoice{border-radius:6px}}


/* V3.9.9 — Aucun portrait de créature n'est pré-affiché avant chargement de la save. */
.playerPortraitPending {
    background-image: none !important;
    background-color: rgba(5, 25, 46, .92) !important;
}


/* =========================================================
   V3.9.11 — Recommandation de zone optimale Cristaux/min
   ========================================================= */
.optimalCrystalZone {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:fit-content;
    max-width:calc(100% - 24px);
    margin:5px auto 0;
    padding:5px 10px;
    border:1px solid rgba(116,190,222,.42);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(13,46,72,.96),rgba(5,27,47,.98));
    color:#fff;
    font-family:"Poppins",Arial,sans-serif;
    font-size:10px;
    line-height:1.2;
    box-shadow:
        0 3px 10px rgba(0,0,0,.30),
        inset 0 1px rgba(255,255,255,.06);
    cursor:pointer;
    white-space:nowrap;
    touch-action:manipulation;
}
.optimalCrystalZone:hover,.optimalCrystalZone:focus-visible{
    border-color:rgba(142,220,255,.72);
    outline:none;
    filter:brightness(1.06);
}
.optimalCrystalZone:active{transform:scale(.98)}
.optimalCrystalZone:disabled{cursor:default;opacity:.7}
.optimalZoneLabel{color:#8edcff;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.optimalCrystalZone strong{color:#ffe09a;font-size:11px;font-weight:900}
.optimalZoneRate{color:#dcecf7;font-weight:700}
.optimalZoneGain{padding-left:6px;border-left:1px solid rgba(255,255,255,.14);color:#b9cedd;font-size:9px;font-weight:700}
.optimalCrystalZone.is-current{border-color:rgba(247,178,59,.52)}
.optimalCrystalZone.is-current .optimalZoneGain{color:#ffe09a}
@media (max-width:390px){
    .optimalCrystalZone{gap:4px;padding:5px 8px;font-size:9px}
    .optimalCrystalZone strong{font-size:10px}
    .optimalZoneGain{display:none}
}


/* =========================================================
   V3.9.12 — Bonus flottants temporaires
   ========================================================= */
.floating-boost {
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.55));
    animation: floatingBoostPulse 1.15s ease-in-out infinite alternate;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
}
.floating-boost-damage {
    filter: drop-shadow(0 0 7px rgba(247,178,59,.8)) drop-shadow(0 4px 7px rgba(0,0,0,.55));
}
.floating-boost-crystals {
    filter: drop-shadow(0 0 7px rgba(102,228,240,.82)) drop-shadow(0 4px 7px rgba(0,0,0,.55));
}
.floating-boost-frenzy {
    filter: drop-shadow(0 0 8px rgba(226,92,255,.9)) drop-shadow(0 4px 7px rgba(0,0,0,.55));
}
.floating-boost-haste {
    filter: drop-shadow(0 0 8px rgba(255,196,64,.9)) drop-shadow(0 4px 7px rgba(0,0,0,.55));
}
.floating-reward,
.floating-summon-fragment {
    filter: drop-shadow(0 0 7px rgba(210,142,255,.82)) drop-shadow(0 4px 7px rgba(0,0,0,.72));
    animation: floatingBoostPulse 1.15s ease-in-out infinite alternate;
    user-select:none;
    -webkit-user-drag:none;
    touch-action:manipulation;
}
.floating-reward-common,
.floating-summon-fragment-small { filter:drop-shadow(0 0 7px rgba(93,232,132,.86)) drop-shadow(0 4px 7px rgba(0,0,0,.72)); }
.floating-reward-rare,
.floating-summon-fragment-medium { filter:drop-shadow(0 0 7px rgba(255,178,55,.90)) drop-shadow(0 4px 7px rgba(0,0,0,.72)); }
.floating-reward-legendary,
.floating-summon-fragment-legendary { filter:drop-shadow(0 0 8px rgba(190,119,255,.92)) drop-shadow(0 4px 7px rgba(0,0,0,.72)); }
.floating-reward-supreme { filter:drop-shadow(0 0 10px rgba(255,236,143,.98)) drop-shadow(0 4px 8px rgba(0,0,0,.78)); }
.floating-boost-expire {
    pointer-events: none;
    animation: floatingBoostExpire .28s ease forwards !important;
}
@keyframes floatingBoostPulse {
    from { transform: scale(.92) rotate(-4deg); }
    to { transform: scale(1.08) rotate(4deg); }
}
@keyframes floatingBoostExpire {
    to { opacity:0; transform:scale(.45) rotate(18deg); }
}

.floatingBoostHud {
    position: absolute;
    top: 200px;
    left: 8px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: max-content;
    max-width: 150px;
    transform: none;
    pointer-events: none;
}
.floatingBoostHud:not(.is-visible) { display:none; }
.floatingBoostStatus {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:102px;
    padding:5px 8px;
    border:1px solid rgba(214,236,255,.35);
    border-radius:12px;
    background:rgba(4,22,43,.9);
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}
.floatingBoostStatus img {
    width:28px;
    height:28px;
    object-fit:contain;
}
.floatingBoostStatus span {
    display:flex;
    flex-direction:column;
    line-height:1.05;
}
.floatingBoostStatus strong {
    color:#fff;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
}
.floatingBoostStatus small {
    margin-top:2px;
    min-width:4ch;
    color:var(--ui-text-soft);
    font-size:9px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    text-align:left;
}
.floatingBoostStatus-damage { border-color:rgba(247,178,59,.5); }
.floatingBoostStatus-damage strong { color:var(--ui-gold-light); }
.floatingBoostStatus-crystals { border-color:rgba(102,228,240,.5); }
.floatingBoostStatus-crystals strong { color:var(--ui-cyan); }
.floatingBoostStatus-frenzy { border-color:rgba(226,92,255,.58); }
.floatingBoostStatus-frenzy strong { color:#f0a4ff; }
.floatingBoostStatus-haste { border-color:rgba(255,196,64,.58); }
.floatingBoostStatus-haste strong { color:#ffd36a; }

.floatingBoostPickup {
    position:fixed;
    z-index:7300;
    transform:translate(-50%,-50%);
    padding:6px 10px;
    border-radius:999px;
    background:rgba(3,20,38,.94);
    color:#fff;
    font-family:"Poppins",Arial,sans-serif;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    pointer-events:none;
    animation:floatingBoostPickupAnim 1.05s ease forwards;
}
.floatingBoostPickup-damage { color:var(--ui-gold-light); }
.floatingBoostPickup-crystals { color:var(--ui-cyan); }
.floatingBoostPickup-frenzy { color:#f0a4ff; }
.floatingBoostPickup-haste { color:#ffd36a; }
.floatingBoostPickup-fragment,
.floatingBoostPickup-reward { color:#dca7ff; }
.floatingBoostPickup-fragment-small,
.floatingBoostPickup-reward-common { color:#8ff0a8; }
.floatingBoostPickup-fragment-medium,
.floatingBoostPickup-reward-rare { color:#ffd071; }
.floatingBoostPickup-fragment-legendary,
.floatingBoostPickup-reward-legendary { color:#dca7ff; }
.floatingBoostPickup-reward-supreme { color:#fff0a8; }
@keyframes floatingBoostPickupAnim {
    0% { opacity:0; transform:translate(-50%,-30%) scale(.8); }
    18% { opacity:1; transform:translate(-50%,-55%) scale(1.08); }
    100% { opacity:0; transform:translate(-50%,-140%) scale(.95); }
}
@media (max-width:390px) {
    .floatingBoostHud {
        top: 200px;
        left: 6px;
        gap: 4px;
        max-width: 132px;
    }
    .floatingBoostStatus { min-width:92px; padding:4px 6px; }
    .floatingBoostStatus img { width:24px; height:24px; }
    .floatingBoostStatus strong { font-size:9px; }
}


/* =========================================================
   V3.9.14 — Lisibilité des objets flottants
   Halo sombre + ombre portée adaptée aux PNG transparents.
   ========================================================= */
.floating-image {
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(0, 0, 0, .62) 0%,
            rgba(0, 0, 0, .42) 48%,
            rgba(0, 0, 0, .14) 66%,
            rgba(0, 0, 0, 0) 76%
        );
    padding: 3px;
    filter:
        drop-shadow(0 0 2px rgba(0, 0, 0, 1))
        drop-shadow(0 3px 5px rgba(0, 0, 0, .95))
        drop-shadow(0 7px 10px rgba(0, 0, 0, .72));
}

/* Les nouveaux boosts gardent leur halo coloré, avec un contour noir plus net. */
.floating-boost-damage,
.floating-boost-crystals,
.floating-boost-frenzy,
.floating-boost-haste {
    filter:
        drop-shadow(0 0 2px rgba(0, 0, 0, 1))
        drop-shadow(0 4px 7px rgba(0, 0, 0, .95))
        drop-shadow(0 7px 10px rgba(0, 0, 0, .72));
}

@media (max-width: 600px) {
    .floating-image,
    .floating-boost-damage,
    .floating-boost-crystals,
    .floating-boost-frenzy,
    .floating-boost-haste,
    .floating-reward,
    .floating-summon-fragment {
        filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .82));
    }
}


/* =========================================================
   V3.9.28 — Composition des couches combat / drawer
   Une seule architecture, sans surenchère de z-index.
   ========================================================= */

/*
   Couches :
   1. enemyZone       : surface logique de clic
   2. clickOverlay    : VISUEL uniquement (damage numbers)
   3. enemyMonsterHud : HUD combat
   4. collectibles    : interactifs par eux-mêmes
   5. UI native       : levelUI / uiLvl / drawer, hors de la surface de clic
*/
#enemyZone {
    position: relative;
    cursor: pointer;
}

/* Important : cette couche couvre l'écran mais ne reçoit PLUS aucun événement. */
#clickOverlay {
    pointer-events: none !important;
}

#clickOverlay *,
#damageAnimation,
#damageAnimation * {
    pointer-events: none !important;
}

/* Le drawer fournit à JS sa hauteur réelle via cette variable. */
.gameContainer.monster-panel-open {
    --monster-drawer-bottom-space: 0px;
}

/* Le grand conteneur de combat reste dans le flux normal. */
.gameContainer.monster-panel-open .enemyMonsterContainer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
}

/* Seul le petit HUD visible est ancré au bord supérieur réel du drawer. */
.gameContainer.monster-panel-open .enemyMonsterHud {
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--monster-drawer-bottom-space) + 3px) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 6 !important;
    pointer-events: auto;
}

/* Cliquer directement sur le HUD reste donc un clic combat : l'événement
   remonte naturellement jusqu'à #enemyZone. */

/* Récompense : visuelle uniquement et au-dessus du HUD. */
.gameContainer.monster-panel-open .gold-amount {
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--monster-drawer-bottom-space) + 10px) !important;
    z-index: 7 !important;
    width: auto !important;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.gameContainer.monster-panel-open .gold-amount.show {
    transform: translate(-50%, -48px) !important;
}

/* Les collectibles restent au-dessus du décor et sont les seuls éléments
   interactifs situés directement dans enemyZone. */
#enemyZone > .floating-image {
    pointer-events: auto;
}

/* Les surfaces d'UI conservent simplement leurs couches existantes :
   levelUI z7, uiLvl/drawer z8. Aucun clickOverlay ne peut les couvrir. */


/* =========================================================
   V3.9.29 — Le panneau ennemi est une surface de clic combat.
   ========================================================= */
.enemyMonsterHud {
    cursor: pointer;
    touch-action: manipulation;
}

.enemyMonsterHud * {
    cursor: inherit;
}


/* =========================================================
   V3.9.31 — Hit-test HUD ennemi indépendant des z-index
   L'interaction est résolue en JS par coordonnées en phase capture.
   ========================================================= */
.enemyMonsterHud,
.enemyMonsterHud * {
    cursor: pointer;
}

/* Aucun calque artificiel n'est nécessaire au-dessus du HUD. */


/* =========================================================
   V3.9.32 — Entrée combat unifiée Pointer Events
   ========================================================= */
#enemyZone,
.enemyMonsterHud {
    touch-action: manipulation;
}


/* =========================================================
   V3.9.33 — Collecte visuelle des Cristaux
   ========================================================= */
.softCurrencyHud {
    position: relative;
}

#softCurrencyIcon {
    transform-origin: center center;
}

.softCurrencyFlyingIcon {
    position: fixed;
    z-index: 4000;
    width: 27px;
    height: 27px;
    object-fit: contain;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.95))
        drop-shadow(0 4px 7px rgba(0,0,0,.65));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, opacity;
}

.softCurrencyGainFeedback {
    position: absolute;
    left: calc(50% + 18px);
    top: 50%;
    z-index: 2;
    opacity: 0;
    color: #63ef8b;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
        0 1px 1px rgba(0,0,0,1),
        0 2px 4px rgba(0,0,0,.9);
    pointer-events: none;
}

.softCurrencyImpact {
    animation: softCurrencyImpact .38s cubic-bezier(.18,.8,.25,1);
}

@keyframes softCurrencyImpact {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.34); filter: brightness(1.45); }
    100% { transform: scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
    .softCurrencyFlyingIcon {
        display: none !important;
    }

    .softCurrencyImpact {
        animation: none !important;
    }
}


/* =========================================================
   V3.9.34 — Tas de Cristaux + feedback renforcé
   ========================================================= */
.softCurrencyFlyingIcon {
    /* width/height sont synchronisés en JS sur #softCurrencyIcon. */
    width: auto;
    height: auto;
}

.softCurrencyGainFeedback {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .25px;
    color: #69f297;
    text-shadow:
        0 1px 1px rgba(0,0,0,1),
        0 2px 5px rgba(0,0,0,.95),
        0 0 8px rgba(47,190,92,.28);
}

.softCurrencyImpact {
    animation-duration: .28s;
}

@media (max-width: 390px) {
    .softCurrencyGainFeedback {
        font-size: 17px;
    }
}

#softCurrencyValue {
    display: inline-block;
    transform-origin: center center;
}

/* =========================================================
   V3.9.69 — Mouvement flottant continu
   Le mouvement reste rare (3–6 s), mais chaque dérive dure plus
   longtemps et utilise un seul transform GPU : translation + rotation.
   Aucun keyframe secondaire ne vient casser la trajectoire.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    #enemyZone > .floating-image {
        transition: none !important;
    }
}


/* =========================================================
   V3.9.41 — Popover palier desktop : couche interactive sûre
   ========================================================= */
#upgradeInfoPopover {
    z-index: 5000 !important;
    pointer-events: auto !important;
}

#upgradeInfoPopover.is-visible,
#upgradeInfoPopover.is-visible * {
    pointer-events: auto;
}

/* =========================================================
   V3.9.43 — Raccourci vers la zone maximale débloquée
   ========================================================= */
.level-selector-jump-max {
    flex:0 0 28px;
    width:28px;
    height:46px;
    margin:0;
    padding:0;
    border:1px solid rgba(213,236,251,.66);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(34,104,151,.9),rgba(17,65,100,.94));
    color:#f3fbff;
    font:900 24px/1 "Poppins",Arial,sans-serif;
    cursor:pointer;
    box-shadow:0 4px 8px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);
    transition:transform .12s ease,filter .12s ease,opacity .12s ease;
    touch-action:manipulation;
}
.level-selector-jump-max:hover:not(:disabled),
.level-selector-jump-max:focus-visible {
    outline:none;
    filter:brightness(1.13);
}
.level-selector-jump-max:active:not(:disabled) { transform:scale(.95); }
.level-selector-jump-max:disabled { opacity:.28; cursor:default; }
@media (max-width:390px) {
    .level-selector-jump-max { flex-basis:26px; width:26px; height:42px; font-size:22px; }
}


/* =========================================================
   Combat — dégâts flottants JRPG / MMO
   Arc autour du monstre + couleur de l'élément de l'attaquant.
   Les nombres restent purement visuels et plafonnés côté JS.
   ========================================================= */
.combat-damage-float {
    --damage-color: #f8f3e6;
    --damage-glow: rgba(255, 255, 255, .34);
    position: absolute;
    z-index: 24;
    min-width: 2ch;
    transform: translate3d(-50%, -50%, 0);
    color: var(--damage-color);
    font-family: "FFXIII", Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 4.3vw, 24px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: .01em;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    user-select: none;
    -webkit-text-stroke: 1px rgba(8, 13, 20, .96);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .94),
        0 0 5px var(--damage-glow);
    opacity: 0;
    contain: layout style;
}

.combat-damage-float.damage-element-fire {
    --damage-color: #ff7356;
    --damage-glow: rgba(255, 83, 43, .62);
}
.combat-damage-float.damage-element-water {
    --damage-color: #63c8ff;
    --damage-glow: rgba(55, 170, 255, .62);
}
.combat-damage-float.damage-element-air {
    --damage-color: #8ff0d0;
    --damage-glow: rgba(93, 232, 194, .58);
}
.combat-damage-float.damage-element-earth {
    --damage-color: #b9e56d;
    --damage-glow: rgba(128, 208, 74, .58);
}
.combat-damage-float.damage-element-light {
    --damage-color: #ffe48c;
    --damage-glow: rgba(255, 214, 83, .64);
}
.combat-damage-float.damage-element-dark {
    --damage-color: #c89bff;
    --damage-glow: rgba(167, 91, 255, .66);
}
.combat-damage-float.damage-element-neutral {
    --damage-color: #eef8ff;
    --damage-glow: rgba(164, 222, 255, .46);
}

.combat-damage-float.is-click {
    --damage-color: #eef8ff;
    --damage-glow: rgba(164, 222, 255, .50);
}

.combat-damage-float.is-critical {
    z-index: 25;
    font-size: clamp(27px, 7vw, 38px);
    font-weight: 900;
    letter-spacing: .018em;
    -webkit-text-stroke-width: 1.5px;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .98),
        0 0 7px var(--damage-glow);
}

@media (max-width: 420px) {
    .combat-damage-float {
        font-size: clamp(15px, 5.1vw, 23px);
        -webkit-text-stroke-width: .7px;
        text-shadow: 0 2px 0 rgba(0, 0, 0, .94);
    }
    .combat-damage-float.is-critical {
        font-size: clamp(25px, 7.2vw, 34px);
        -webkit-text-stroke-width: 1px;
        text-shadow: 0 2px 0 rgba(0, 0, 0, .98);
    }
}


/* V3.9.50 — conserver visibles les zones futures verrouillées */
.level-selector.is-locked {
    opacity:.38;
    filter:saturate(.45) brightness(.78);
    cursor:not-allowed;
    pointer-events:none;
    border-style:dashed;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.level-selector.is-locked::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:rgba(3,14,26,.22);
    pointer-events:none;
}


/* =========================================================
   UI unify pass — enemy HUD desktop = mobile compact layout
   ========================================================= */
.enemyMonsterHud {
    width: max-content;
    min-width: 194px;
    max-width: min(252px, calc(100vw - 124px));
    margin-top: 82px;
    padding: 5px 6px 5px;
    border-radius: 16px;
}

.enemyMonsterImg {
    width: 112px;
    height: 116px;
    margin: 0 auto 1px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    filter: none;
}

.enemyMonsterImg > img {
    width: 92px !important;
    max-width: 92px;
    height: 92px;
}

.enemyMonsterInfo {
    width: max-content;
    min-width: 180px;
    max-width: min(238px, calc(100vw - 138px));
    padding: 3px 5px 4px;
    border-radius: 9px;
}

#enemyMonsterName {
    margin-bottom: 2px;
    font-size: 10.5px;
    line-height: 1.05;
}

#enemyMonsterHpBar.progress {
    height: 7px;
}

#enemyMonsterHpValue {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1;
}

#timer {
    min-height: 0;
    margin: -3px auto 2px;
    padding: 2px 7px;
    border-width: 1px;
    font-size: 8.5px;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10);
}

.gameContainer.monster-panel-open .enemyMonsterHud {
    width: max-content;
    min-width: 194px;
    max-width: min(252px, calc(100vw - 124px));
    margin-top: 0;
    padding: 5px 6px 5px;
    border-radius: 16px;
}

.gameContainer.monster-panel-open .enemyMonsterImg {
    width: 94px;
    height: 98px;
    margin-bottom: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    filter: none;
}

.gameContainer.monster-panel-open .enemyMonsterImg > img {
    width: 82px !important;
    max-width: 82px;
    height: 82px;
}

.gameContainer.monster-panel-open .enemyMonsterInfo {
    width: max-content;
    min-width: 180px;
    max-width: min(238px, calc(100vw - 138px));
    padding: 3px 5px 4px;
    border-radius: 9px;
}

.gameContainer.monster-panel-open #enemyMonsterName {
    margin-bottom: 2px;
    font-size: 10.5px;
    line-height: 1.05;
}

.gameContainer.monster-panel-open #enemyMonsterHpBar.progress {
    height: 7px;
}

.gameContainer.monster-panel-open #enemyMonsterHpValue {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1;
}

.gameContainer.monster-panel-open #timer {
    min-height: 0;
    margin: -3px auto 2px;
    padding: 2px 7px;
    border-width: 1px;
    font-size: 8.5px;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10);
}

@media (max-width: 380px) {
    .enemyMonsterHud,
    .gameContainer.monster-panel-open .enemyMonsterHud {
        min-width: 186px;
        max-width: min(238px, calc(100vw - 116px));
    }

    .enemyMonsterInfo,
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        min-width: 172px;
        max-width: min(224px, calc(100vw - 130px));
    }
}

/* =========================================================
   V3.9.56 — Rail horizontal des zones
   Toutes les zones déjà débloquées (1..maxZone serveur) sont présentes.
   Navigation par swipe tactile, drag souris/stylet, molette et clavier.
   ========================================================= */
.level-selector-container {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    justify-content:stretch;
    overflow:hidden;
}

.level-selector-track {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;

    gap:7px;
    padding: 2px 1px 8px;
    margin-bottom: -6px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-behavior:auto;
    touch-action:pan-x;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    -webkit-overflow-scrolling:touch;
}

.level-selector-track::-webkit-scrollbar {
    display:none;
}

.level-selector-track.is-dragging {
    cursor:grabbing;
    scroll-snap-type:none;
    scroll-behavior:auto;
}

.level-selector-track .level-selector {
    scroll-snap-align:center;
    scroll-snap-stop:normal;
}

.level-selector-track .level-selector.is-wide-number {
    font-size:16px;
    letter-spacing:-.4px;
}

.level-selector-track .level-selector.is-very-wide-number {
    font-size:12px;
    letter-spacing:-.7px;
}

.level-selector-track:focus-visible {
    outline:2px solid rgba(102,228,240,.86);
    outline-offset:1px;
    border-radius:10px;
}

/* Auto-clicker flottant / HUD */
.floating-boost-auto_clicker { width: 62px !important; border-radius: 12px; }
.floatingBoostStatus-auto_clicker img { object-fit: contain; }

/* =========================================================
   V3.9.62 — Stage responsive + bandes latérales desktop
   Le décor illustré appartient désormais à la zone de jeu
   (max 500px) et non au viewport complet.
   ========================================================= */

:root {
	--game-stage-max-width: 500px;
	--game-side-bg-top: #0b2c4c;
	--game-side-bg-mid: #071d34;
	--game-side-bg-bottom: #04111f;
}

/*
 * Le viewport extérieur reprend la DA bleu nuit des fenêtres.
 * Sur desktop / écran large, cette couche devient naturellement visible
 * à gauche et à droite de la zone de jeu centrale.
 */
body {
	background-color: var(--game-side-bg-mid);
	background-image:
		radial-gradient(circle at 50% 18%, rgba(31, 105, 158, .26) 0, rgba(10, 37, 65, .08) 34%, rgba(4, 17, 31, 0) 62%),
		linear-gradient(180deg, var(--game-side-bg-top) 0%, var(--game-side-bg-mid) 54%, var(--game-side-bg-bottom) 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/*
 * Le vrai background de combat est cadré sur les dimensions réelles du jeu.
 * Il n'est donc plus étiré sur un écran 16:9 / 21:9 avant d'être vu à travers
 * une colonne de 500px.
 */
.gameContainer {
	width: min(100%, var(--game-stage-max-width));
	max-width: var(--game-stage-max-width);
	margin-inline: auto;
	background-color: #17242d;
	background-image: var(--game-battle-background, url("img/bg/bg2026v3.png"));
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
	border-inline: 1px solid rgba(124, 194, 235, .18);
	box-shadow:
		-30px 0 70px rgba(1, 8, 18, .42),
		30px 0 70px rgba(1, 8, 18, .42),
		inset 1px 0 0 rgba(255, 255, 255, .025),
		inset -1px 0 0 rgba(255, 255, 255, .025);
}

/*
 * Sur téléphone la zone de jeu occupe tout l'écran : aucune bordure latérale
 * ne doit réduire la largeur utile, y compris dans une future WebView Android.
 */
@media (max-width: 520px) {
	.gameContainer {
		width: 100%;
		max-width: 100%;
		border-inline: 0;
		box-shadow: none;
	}
}

/* =========================================================
   V3.9.65 — Background fantasy desktop
   ========================================================= */

@media (min-width: 521px) {
	body {
		background-color: #071728;
		background-image:
			linear-gradient(
				90deg,
				rgba(3, 11, 24, .18) 0%,
				rgba(3, 11, 24, .04) calc(50% - 320px),
				rgba(3, 11, 24, 0) calc(50% - 255px),
				rgba(3, 11, 24, 0) calc(50% + 255px),
				rgba(3, 11, 24, .04) calc(50% + 320px),
				rgba(3, 11, 24, .18) 100%
			),
			url("/client/assets/ui/game-page-background.png");
		background-repeat: no-repeat, no-repeat;
		background-position: center, center center;
		background-size: cover, cover;
		background-attachment: fixed, fixed;
	}

	.gameContainer {
		border-inline: 1px solid rgba(121, 176, 214, .16);
		box-shadow:
			-22px 0 38px rgba(2, 9, 20, .42),
			22px 0 38px rgba(2, 9, 20, .42),
			inset 1px 0 0 rgba(129, 219, 255, .08),
			inset -1px 0 0 rgba(129, 219, 255, .08);
	}

	.gameContainer::before,
	.gameContainer::after {
		content: none;
	}
}



/* =========================================================
   V3.9.66 — Edge blend + ambient particles
   ========================================================= */

body {
	position: relative;
	overflow-x: hidden;
}

.gameContainer {
	position: relative;
	z-index: 2;
}

.pageAmbientMagic {
	display: none;
}

html.fx-ambient-off .pageAmbientMagic,
html.fx-ambient-off .homeAmbientMagic {
	display: none !important;
}

@media (min-width: 521px) {
	.pageAmbientMagic {
		display: block;
		position: fixed;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
		z-index: 1;
	}

	.pageAmbientMagicSide {
		position: absolute;
		top: 0;
		bottom: 0;
		width: max(170px, calc((100vw - var(--game-stage-max-width)) / 2 + 56px));
		max-width: 44vw;
		isolation: isolate;
	}

	.pageAmbientMagicSide--left {
		left: 0;
	}

	.pageAmbientMagicSide--right {
		right: 0;
	}

	.pageAmbientMagicSide::before,
	.pageAmbientMagicSide::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		pointer-events: none;
	}

	.pageAmbientMagicSide::before {
		width: 124px;
		opacity: 1;
	}

	.pageAmbientMagicSide--left::before {
		right: 0;
		background: linear-gradient(90deg, rgba(8, 17, 34, 0) 0%, rgba(18, 44, 78, .18) 24%, rgba(17, 44, 82, .45) 52%, rgba(8, 20, 38, .82) 100%);
	}

	.pageAmbientMagicSide--right::before {
		left: 0;
		background: linear-gradient(270deg, rgba(8, 17, 34, 0) 0%, rgba(57, 38, 86, .18) 24%, rgba(76, 48, 101, .42) 52%, rgba(15, 18, 35, .82) 100%);
	}

	.pageAmbientMagicSide::after {
		width: 100%;
		opacity: .9;
		filter: blur(34px);
	}

	.pageAmbientMagicSide--left::after {
		left: -10%;
		background:
			radial-gradient(circle at 72% 22%, rgba(82, 177, 255, .22) 0%, rgba(82, 177, 255, 0) 40%),
			radial-gradient(circle at 66% 64%, rgba(129, 101, 255, .16) 0%, rgba(129, 101, 255, 0) 42%);
	}

	.pageAmbientMagicSide--right::after {
		right: -10%;
		background:
			radial-gradient(circle at 28% 28%, rgba(255, 143, 96, .2) 0%, rgba(255, 143, 96, 0) 40%),
			radial-gradient(circle at 34% 68%, rgba(124, 115, 255, .14) 0%, rgba(124, 115, 255, 0) 42%);
	}

	.pageAmbientMagicParticle {
		position: absolute;
		left: var(--particle-left);
		bottom: var(--particle-bottom);
		width: var(--particle-size);
		height: var(--particle-size);
		border-radius: 999px;
		opacity: 0;
		background: radial-gradient(circle, rgba(246, 252, 255, 1) 0%, rgba(170, 231, 255, .98) 22%, rgba(131, 193, 255, .94) 48%, rgba(137, 145, 255, .55) 74%, rgba(137, 145, 255, 0) 100%);
		box-shadow: 0 0 10px rgba(176, 235, 255, .8), 0 0 24px rgba(111, 137, 255, .38), 0 0 34px rgba(91, 46, 255, .16);
		mix-blend-mode: screen;
		animation: pageAmbientMagicFloat var(--particle-duration) linear infinite;
		animation-delay: var(--particle-delay);
		will-change: transform, opacity;
	}

	.pageAmbientMagicParticle::before,
	.pageAmbientMagicParticle::after {
		content: "";
		position: absolute;
		border-radius: inherit;
		pointer-events: none;
	}

	.pageAmbientMagicParticle::before {
		inset: -42%;
		background: inherit;
		filter: blur(7px);
		opacity: .72;
	}

	.pageAmbientMagicParticle::after {
		inset: -8%;
		background: radial-gradient(circle, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .4) 38%, rgba(255, 255, 255, 0) 100%);
		animation: pageAmbientMagicTwinkle var(--particle-twinkle-duration, 4.6s) ease-in-out infinite;
		animation-delay: var(--particle-delay);
	}

	.gameContainer::before,
	.gameContainer::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 30px;
		pointer-events: none;
		z-index: 4;
	}

	.gameContainer::before {
		left: -1px;
		background: linear-gradient(90deg, rgba(6, 12, 23, .82) 0%, rgba(8, 21, 38, .42) 44%, rgba(8, 21, 38, 0) 100%);
		box-shadow: 14px 0 34px rgba(92, 179, 255, .12);
	}

	.gameContainer::after {
		right: -1px;
		background: linear-gradient(270deg, rgba(6, 12, 23, .82) 0%, rgba(8, 21, 38, .42) 44%, rgba(8, 21, 38, 0) 100%);
		box-shadow: -14px 0 34px rgba(255, 132, 92, .08);
	}
}

@keyframes pageAmbientMagicFloat {
	0% {
		transform: translate3d(0, 0, 0) scale(.62);
		opacity: 0;
	}

	10% {
		opacity: var(--particle-opacity);
	}

	74% {
		opacity: calc(var(--particle-opacity) * .82);
	}

	100% {
		transform: translate3d(var(--particle-drift), calc(var(--particle-rise) * -1), 0) scale(1.24);
		opacity: 0;
	}
}

@keyframes pageAmbientMagicTwinkle {
	0%,
	100% {
		opacity: .28;
		transform: scale(.72);
	}

	50% {
		opacity: .95;
		transform: scale(1.22);
	}
}



/* =========================================================
   DEV A/B — background de la fenêtre de jeu
   A (défaut) : arène historique bg2026v3.png, strictement inchangée.
   B (?test=B) : décor Elemental Legacy aussi dans la fenêtre de jeu,
   avec le même langage de particules ambiantes par-dessus.
   ========================================================= */
body[data-game-bg-test="B"] {
	/* Variante B : le décor devient la scène elle-même. Aucun voile global,
	   gradient de raccord ou second background dans la colonne de jeu. */
	background-color: #071728;
	background-image: url("/client/assets/ui/game-page-background.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

body[data-game-bg-test="B"] .gameContainer {
	/* La fenêtre historique reste le conteneur logique de l'UI mais n'a plus
	   de cadre visuel : on voit directement le background du viewport. */
	background: transparent;
	border-inline: 0;
	box-shadow: none;
}

body[data-game-bg-test="B"] .gameContainer::before,
body[data-game-bg-test="B"] .gameContainer::after,
body[data-game-bg-test="B"] .pageAmbientMagicSide::before,
body[data-game-bg-test="B"] .pageAmbientMagicSide::after {
	content: none !important;
	display: none !important;
}

@media (max-width: 700px) {
	body[data-game-bg-test="B"] {
		background-image: url("/client/assets/ui/game-page-background-mobile.webp");
		background-position: center center;
		background-size: cover;
		background-attachment: scroll;
	}
}

@media (min-width: 521px) {
	body[data-game-bg-test="B"] .pageAmbientMagic {
		z-index: 3;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicSide {
		width: 50%;
		max-width: none;
	}
}

/* Le système historique de particules n'était volontairement rendu que sur
   les bandes latérales desktop. En variante B on réutilise exactement son
   animation dans la fenêtre de jeu également sur téléphone. */
@media (max-width: 520px) {
	body[data-game-bg-test="B"] .pageAmbientMagic {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 3;
		overflow: hidden;
		pointer-events: none;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicSide {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 50%;
		isolation: isolate;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicSide--left { left: 0; }
	body[data-game-bg-test="B"] .pageAmbientMagicSide--right { right: 0; }

	body[data-game-bg-test="B"] .pageAmbientMagicSide::before,
	body[data-game-bg-test="B"] .pageAmbientMagicSide::after {
		content: none;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicParticle {
		position: absolute;
		left: var(--particle-left);
		bottom: var(--particle-bottom);
		width: var(--particle-size);
		height: var(--particle-size);
		border-radius: 999px;
		opacity: 0;
		background: radial-gradient(circle, rgba(246, 252, 255, 1) 0%, rgba(170, 231, 255, .98) 22%, rgba(131, 193, 255, .94) 48%, rgba(137, 145, 255, .55) 74%, rgba(137, 145, 255, 0) 100%);
		box-shadow: 0 0 10px rgba(176, 235, 255, .8), 0 0 24px rgba(111, 137, 255, .38), 0 0 34px rgba(91, 46, 255, .16);
		mix-blend-mode: screen;
		animation: pageAmbientMagicFloat var(--particle-duration) linear infinite;
		animation-delay: var(--particle-delay);
		will-change: transform, opacity;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicParticle::before,
	body[data-game-bg-test="B"] .pageAmbientMagicParticle::after {
		content: "";
		position: absolute;
		border-radius: inherit;
		pointer-events: none;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicParticle::before {
		inset: -42%;
		background: inherit;
		filter: blur(7px);
		opacity: .72;
	}

	body[data-game-bg-test="B"] .pageAmbientMagicParticle::after {
		inset: -8%;
		background: radial-gradient(circle, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .4) 38%, rgba(255, 255, 255, 0) 100%);
		animation: pageAmbientMagicTwinkle var(--particle-twinkle-duration, 4.6s) ease-in-out infinite;
		animation-delay: var(--particle-delay);
	}
}

/* V3.9.75 — Profil / STATS : séparation visuelle des stats globales et du Prestige. */
.playerStatsCategoryTitle {
    margin: 2px 2px 7px;
    color: #8edcff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}
.playerStatsCategoryTitle--prestige {
    margin-top: 16px;
    color: #d7a7ff;
}
.playerStatsCategoryTitle--prestige[hidden],
.playerPrestigeStatsSection[hidden] {
    display: none !important;
}
.playerPrestigeStatsSection {
    border-color: rgba(186, 117, 255, .34);
    background: linear-gradient(180deg, rgba(93, 42, 138, .13), rgba(255,255,255,.025));
}
.playerPrestigeStatsSection h3 {
    color: #e5c0ff;
    background: rgba(84, 30, 126, .24);
}

/* =========================================================
   TEST — Zone tray : background élémentaire uniquement sélectionné
   Une zone boss non sélectionnée conserve le style historique du rail.
   ========================================================= */
.level-selector.selected.is-boss-level[data-boss-element="fire"] {
    background: linear-gradient(180deg, #c65359, #7c3038);
    border-color: #ffd3d6;
    box-shadow:
        0 0 0 2px rgba(198, 83, 89, .22),
        0 5px 12px rgba(0, 0, 0, .36);
}

.level-selector.selected.is-boss-level[data-boss-element="water"] {
    background: linear-gradient(180deg, #3f9fd0, #24658a);
    border-color: #d7f6ff;
    box-shadow:
        0 0 0 2px rgba(91, 196, 240, .22),
        0 5px 12px rgba(0, 0, 0, .36);
}

.level-selector.selected.is-boss-level[data-boss-element="air"] {
    background: linear-gradient(180deg, #9bb4ca, #617b98);
    border-color: #f1fbff;
    box-shadow:
        0 0 0 2px rgba(202, 230, 250, .22),
        0 5px 12px rgba(0, 0, 0, .36);
}

.level-selector.selected.is-boss-level[data-boss-element="earth"] {
    background: linear-gradient(180deg, #5f8f86, #3a6267);
    border-color: #d9f4ec;
    box-shadow:
        0 0 0 2px rgba(137, 207, 187, .18),
        0 5px 12px rgba(0, 0, 0, .36);
}

.level-selector.selected.is-boss-level[data-boss-element="light"] {
    background: linear-gradient(180deg, #d6b84f, #8f7427);
    border-color: #fff0a8;
    box-shadow:
        0 0 0 2px rgba(233, 203, 92, .22),
        0 5px 12px rgba(0, 0, 0, .36);
}

.level-selector.selected.is-boss-level[data-boss-element="dark"] {
    background: linear-gradient(180deg, #7161a6, #463a78);
    border-color: #e4dcff;
    box-shadow:
        0 0 0 2px rgba(157, 132, 223, .22),
        0 5px 12px rgba(0, 0, 0, .36);
}