/* Modale de progression de fin de partie (montee de niveau / palier de
 * points d'exploit), portee depuis la maquette maquette/progression-fin-partie/
 * (memes classes/animations, adaptees pour vivre dans le jeu reel plutot que
 * dans une page de demo autonome). Pilotee par ProgressionFinPartie.js sur
 * l'evenement socket 'recompense_fin_partie' (Recompenses.js).
 *
 * Volontairement en dehors de #div_jeu (comme #bandeau_temps_ecoule juste a
 * cote dans index.html) : le plateau est redimensionne/transforme selon
 * l'orientation, ce qui ferait sinon bouger cette modale plein ecran avec lui.
 *
 * Toutes les custom properties sont scopees a #progression_fin_partie (pas de
 * :root global) : ce fragment est charge dans la meme page que aide.css/
 * classement.css/menu.css, qui declarent deja des noms generiques similaires
 * (--muted, --line, --ink...) a :root pour leurs propres vues SPA.
 */

#progression_fin_partie {
	--pfp-green-950: #153313;
	--pfp-green-800: #285f22;
	--pfp-green-700: #397a2e;
	--pfp-green-500: #75ad3e;
	--pfp-muted: #6e776e;
	--pfp-line: #dbe2d7;
	--pfp-gold: #eda719;
	--pfp-gold-dark: #a66005;
	--pfp-orange: #e98a08;

	position: fixed;
	/* Doit recouvrir le plateau/#victoire et le panneau de statistiques
	   (statistiques.css, #menu_stats_partie: 10002) puisque cette celebration
	   peut s'afficher des la reception de 'recompense_fin_partie', avant meme
	   que le joueur n'ouvre ce panneau - mais reste sous l'annonce globale de
	   nouveautes (annonce-nouveautes.css: 13000), prioritaire par nature. */
	z-index: 10500;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: "Comfortaa", sans-serif;
	color: #273127;
}

#progression_fin_partie[hidden] { display: none; }

#progression_fin_partie .pfp-backdrop {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgba(10, 24, 9, 0.76);
	backdrop-filter: blur(7px);
}

#progression_fin_partie .pfp-confetti-field {
	position: absolute;
	z-index: 2;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

#progression_fin_partie .pfp-confetti {
	position: absolute;
	top: -8%;
	left: var(--x);
	width: var(--size);
	height: calc(var(--size) * 0.42);
	border-radius: var(--radius);
	background: var(--color);
	opacity: 0;
}

#progression_fin_partie.is-animating .pfp-confetti {
	animation: pfp-confetti-fall var(--duration) var(--delay) cubic-bezier(0.16, 0.56, 0.38, 1) both;
}

#progression_fin_partie .celebration-modal {
	position: relative;
	z-index: 4;
	width: min(550px, calc(100vw - 32px));
	max-height: calc(100vh - 34px);
	overflow: hidden auto;
	border: 1px solid rgba(255, 255, 255, 0.94);
	border-radius: 30px;
	padding: 27px 42px 32px;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.92), transparent 32%),
		linear-gradient(180deg, #fffefa, #fbf7e8);
	box-shadow: 0 35px 100px rgba(4, 19, 3, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	text-align: center;
	scrollbar-width: thin;
}

#progression_fin_partie .celebration-modal[hidden] { display: none; }

#progression_fin_partie.is-animating .celebration-modal {
	animation: pfp-modal-arrival 0.64s cubic-bezier(0.18, 0.88, 0.28, 1.18) both;
}

#progression_fin_partie .modal-glow {
	position: absolute;
	top: -190px;
	left: 50%;
	width: 470px;
	height: 360px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 190, 65, 0.35), rgba(255, 234, 169, 0.09) 45%, transparent 72%);
	pointer-events: none;
}

#progression_fin_partie .celebration-heading { position: relative; z-index: 1; }

#progression_fin_partie .celebration-icon {
	width: 43px;
	height: 43px;
	display: grid;
	place-items: center;
	margin: 0 auto 10px;
	border: 1px solid #bfd5af;
	border-radius: 14px;
	background: #edf5e5;
	color: var(--pfp-green-700);
	font-size: 1.05rem;
	box-shadow: 0 5px 13px rgba(49, 100, 41, 0.12);
}

#progression_fin_partie .celebration-icon.gold {
	border-color: #f1cf81;
	background: #fff3ce;
	color: var(--pfp-gold-dark);
}

#progression_fin_partie .celebration-heading p {
	margin: 0 0 5px;
	color: var(--pfp-green-700);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

#progression_fin_partie .celebration-heading h2 {
	margin: 0;
	color: var(--pfp-green-950);
	font: 700 clamp(2rem, 5vw, 2.65rem)/1 "Amaranth", sans-serif;
}

#progression_fin_partie .corner-spark {
	position: absolute;
	z-index: 2;
	top: 60px;
	width: 64px;
	height: 90px;
	pointer-events: none;
}

#progression_fin_partie .corner-spark-left { left: 20px; }
#progression_fin_partie .corner-spark-right { right: 20px; transform: scaleX(-1); }

#progression_fin_partie .corner-spark i {
	position: absolute;
	display: block;
	background: var(--pfp-gold);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

#progression_fin_partie .corner-spark i:nth-child(1) { top: 0; left: 6px; width: 18px; height: 18px; }
#progression_fin_partie .corner-spark i:nth-child(2) { top: 32px; left: 36px; width: 9px; height: 9px; background: var(--pfp-green-500); --spark-delay: 0.14s; }
#progression_fin_partie .corner-spark i:nth-child(3) { top: 62px; left: 2px; width: 12px; height: 12px; background: var(--pfp-orange); --spark-delay: 0.28s; }

#progression_fin_partie.is-animating .corner-spark i { animation: pfp-sparkle-pop 0.65s calc(0.48s + var(--spark-delay, 0s)) both; }

#progression_fin_partie .level-emblem {
	position: relative;
	width: 220px;
	height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 20px auto 11px;
	border: 2px solid rgba(234, 168, 28, 0.58);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 38%, #fff 0 13%, transparent 14%),
		radial-gradient(circle, #fff9df 0 45%, #f7e7ae 70%, #df9d14 72%, #fff1af 74%, #d9910e 78%, #fff5ca 80%);
	box-shadow: 0 16px 32px rgba(152, 101, 6, 0.2), inset 0 0 32px rgba(255, 255, 255, 0.8);
}

#progression_fin_partie .level-emblem::before,
#progression_fin_partie .level-emblem::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px dashed rgba(161, 101, 5, 0.36);
	border-radius: 50%;
}

#progression_fin_partie .level-emblem::after {
	inset: -9px;
	border: 1px solid rgba(231, 168, 38, 0.18);
	box-shadow: 0 0 0 8px rgba(249, 214, 119, 0.08);
}

#progression_fin_partie .level-rays {
	position: absolute;
	z-index: -1;
	inset: -38px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 3deg, rgba(235, 175, 44, 0.28) 0deg 3deg, transparent 3deg 14deg);
	mask: radial-gradient(circle, transparent 0 57%, #000 58% 72%, transparent 73%);
}

#progression_fin_partie.is-animating .level-rays { animation: pfp-rays-turn 14s linear infinite; }

#progression_fin_partie .level-emblem strong {
	position: relative;
	z-index: 1;
	color: var(--pfp-green-950);
	font: 700 7.8rem/0.75 "Amaranth", sans-serif;
	letter-spacing: -0.06em;
	text-shadow: 0 3px 0 white, 0 8px 18px rgba(67, 85, 30, 0.14);
}

#progression_fin_partie .level-emblem small {
	position: relative;
	z-index: 1;
	margin-top: 18px;
	color: var(--pfp-gold-dark);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

#progression_fin_partie .level-old {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	color: #5f6e5f;
	font: 700 5.6rem/1 "Amaranth", sans-serif;
	opacity: 0;
}

#progression_fin_partie .level-old::after {
	content: "Ancien niveau";
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	width: max-content;
	transform: translateX(-50%);
	color: #707b70;
	font: 700 0.58rem/1 "Comfortaa", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

#progression_fin_partie .level-change-flash {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: 132px;
	height: 132px;
	transform: translate(-50%, -50%);
	border: 7px solid rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	opacity: 0;
	box-shadow: 0 0 20px 12px white, 0 0 48px 22px rgba(247, 199, 76, 0.78);
	pointer-events: none;
}

#progression_fin_partie.is-animating .level-emblem strong { animation: pfp-level-number 0.9s 2.08s cubic-bezier(0.18, 0.9, 0.32, 1.32) both; }
#progression_fin_partie.is-animating .level-emblem > small { animation: pfp-level-caption 0.45s 2.32s ease both; }
#progression_fin_partie.is-animating .level-old { animation: pfp-old-level 2.25s 0.25s ease both; }
#progression_fin_partie.is-animating .level-change-flash { animation: pfp-level-change-flash 0.78s 1.82s ease both; }

#progression_fin_partie .celebration-copy { margin: 0 auto 17px; }
#progression_fin_partie .celebration-copy strong { color: var(--pfp-green-950); font: 700 1.18rem/1.2 "Amaranth", sans-serif; }
#progression_fin_partie .celebration-copy p { max-width: 390px; margin: 6px auto 0; color: var(--pfp-muted); font-size: 0.68rem; line-height: 1.55; }
#progression_fin_partie .celebration-copy b { color: var(--pfp-green-700); }

#progression_fin_partie .level-unlocked-reaction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	margin: 0 auto 17px;
	border: 1px solid #f1cf81;
	border-radius: 16px;
	padding: 8px 13px 8px 9px;
	background: rgba(255, 248, 224, 0.92);
	box-shadow: 0 8px 20px rgba(160, 96, 5, 0.1);
	text-align: center;
}

#progression_fin_partie .level-unlocked-reaction[hidden] { display: none; }

#progression_fin_partie .level-unlocked-reaction img {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 12px;
	object-fit: cover;
	background: white;
	box-shadow: inset 0 0 0 1px rgba(141, 88, 4, 0.12);
}

#progression_fin_partie .level-unlocked-reaction div {
	display: grid;
	justify-items: center;
	gap: 2px;
}

#progression_fin_partie .level-unlocked-reaction strong {
	color: #8d5804;
	font-size: 0.7rem;
	line-height: 1.2;
}

#progression_fin_partie .level-unlocked-reaction span {
	font-size: 1.9rem;
	line-height: 1;
}

#progression_fin_partie .next-goal {
	margin: 0 auto 19px;
	padding: 13px 15px 11px;
	border: 1px solid var(--pfp-line);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.75);
	text-align: left;
}

#progression_fin_partie .next-goal > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 0.62rem; }
#progression_fin_partie .next-goal span { color: var(--pfp-muted); }
#progression_fin_partie .next-goal strong { color: var(--pfp-green-800); }

#progression_fin_partie .progress-track {
	height: 7px;
	margin: 9px 0 6px;
	overflow: hidden;
	border-radius: 999px;
	background: #dfe6dc;
}

#progression_fin_partie .progress-track i {
	display: block;
	width: var(--progress);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pfp-green-700), #82b846);
}

#progression_fin_partie.is-animating .progress-track i { animation: pfp-progress-fill 0.75s 1.05s ease both; }
#progression_fin_partie .next-goal small { display: block; color: var(--pfp-muted); font-size: 0.55rem; text-align: right; }

#progression_fin_partie .continue-button {
	min-width: 210px;
	min-height: 46px;
	border: 0;
	border-radius: 14px;
	padding: 12px 24px;
	background: linear-gradient(135deg, #397a2e, #285f22);
	color: white;
	font-size: 0.7rem;
	font-weight: 700;
	box-shadow: 0 5px 0 #1b4818, 0 11px 19px rgba(30, 80, 25, 0.2);
	transition: transform 0.16s, box-shadow 0.16s;
}

#progression_fin_partie .continue-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #1b4818, 0 14px 24px rgba(30, 80, 25, 0.24); }
#progression_fin_partie .continue-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #1b4818; }
#progression_fin_partie .continue-button i { margin-left: 8px; }

#progression_fin_partie .tier-modal {
	width: min(570px, calc(100vw - 32px));
	padding-top: 25px;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.94), transparent 35%),
		linear-gradient(180deg, #fffefa, #fff6dc);
}

#progression_fin_partie .tier-modal .modal-glow { background: radial-gradient(circle, rgba(250, 188, 42, 0.43), rgba(255, 233, 165, 0.13) 48%, transparent 72%); }

#progression_fin_partie .avatar-reveal {
	position: relative;
	width: 240px;
	height: 292px;
	margin: 10px auto 8px;
}

#progression_fin_partie .avatar-core {
	position: absolute;
	z-index: 0;
	top: 37px;
	left: 56px;
	width: 128px;
	height: 128px;
	overflow: hidden;
	border: 5px solid #fff8df;
	border-radius: 50%;
	background: #214f24;
	box-shadow: inset 0 -15px 25px rgba(4, 39, 11, 0.24), 0 9px 20px rgba(62, 76, 31, 0.18);
}

#progression_fin_partie .avatar-core img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Les bordures Argent et Or actuelles sont dessinees autour d'un cercle bien
   plus large que les bordures Heroiques historiques. L'avatar suit donc la
   geometrie de la nouvelle ligue, tandis que les deux images de transition
   gardent chacune leur propre calibrage ci-dessous. */
#progression_fin_partie .avatar-reveal.tier-series-argent .avatar-core,
#progression_fin_partie .avatar-reveal.tier-series-or .avatar-core {
	top: 25px;
	left: 44px;
	width: 152px;
	height: 152px;
}

#progression_fin_partie .tier-frame {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 240px;
	height: auto;
	filter: drop-shadow(0 10px 9px rgba(100, 62, 2, 0.2));
}

#progression_fin_partie .tier-frame[src*="/argent-"],
#progression_fin_partie .tier-frame[src*="/or-"] {
	left: 15px;
	width: 210px;
}

#progression_fin_partie .tier-frame-new { opacity: 1; }
#progression_fin_partie .tier-frame-old { opacity: 0; }

#progression_fin_partie.is-animating .tier-frame-old { animation: pfp-old-frame 2.25s 0.25s ease both; }
#progression_fin_partie.is-animating .tier-frame-new { animation: pfp-new-frame 0.9s 2.08s cubic-bezier(0.2, 0.9, 0.26, 1.15) both; }

#progression_fin_partie .reveal-flash {
	position: absolute;
	z-index: 4;
	top: 18px;
	left: 38px;
	width: 164px;
	height: 164px;
	border-radius: 50%;
	background: white;
	opacity: 0;
	box-shadow: 0 0 35px 24px white, 0 0 75px 35px rgba(255, 228, 121, 0.92);
	pointer-events: none;
}

#progression_fin_partie.is-animating .reveal-flash { animation: pfp-reveal-flash 0.78s 1.82s ease both; }

#progression_fin_partie .old-tier-label {
	display: none !important;
	position: absolute;
	z-index: 5;
	top: 183px;
	left: 50%;
	transform: translateX(-50%);
	border: 1px solid #e8d399;
	border-radius: 999px;
	padding: 5px 11px;
	background: rgba(255, 255, 255, 0.94);
	color: #986107;
	font-size: 0.57rem;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(90, 63, 14, 0.13);
	opacity: 0;
}

#progression_fin_partie.is-animating .old-tier-label { animation: pfp-old-tier-label 2.25s 0.25s ease both; }

#progression_fin_partie .tier-name {
	position: relative;
	z-index: 6;
	display: grid;
	justify-items: center;
	gap: 5px;
	min-height: 76px;
	margin: 0 0 11px;
	text-align: center;
}

#progression_fin_partie .tier-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

#progression_fin_partie .tier-previous span {
	color: #969b93;
	font: 700 0.9rem/1 "Amaranth", sans-serif;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

#progression_fin_partie .tier-previous i { color: #c6aa63; font-size: 0.65rem; }

#progression_fin_partie .tier-name > strong {
	display: block;
	max-width: 100%;
	color: #8d5804;
	font: 700 3.25rem/0.95 "Amaranth", sans-serif;
	overflow-wrap: anywhere;
	text-align: center;
	text-shadow: 0 2px 0 white, 0 7px 15px rgba(158, 100, 6, 0.16);
}

#progression_fin_partie.is-animating .tier-name strong { animation: pfp-tier-name 0.9s 2.08s cubic-bezier(0.18, 0.9, 0.28, 1.24) both; }
#progression_fin_partie.is-animating .tier-modal .celebration-copy { animation: pfp-tier-support-content 0.45s 2.5s ease both; }

#progression_fin_partie .points-earned {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 19px;
	border: 1px solid #ead7a8;
	border-radius: 999px;
	padding: 8px 12px;
	background: rgba(255, 251, 234, 0.9);
	font-size: 0.57rem;
}

#progression_fin_partie .points-earned i { color: var(--pfp-gold-dark); }
#progression_fin_partie .points-earned span { color: var(--pfp-muted); }
#progression_fin_partie .points-earned strong { color: #7c5009; }

#progression_fin_partie .tier-modal .points-earned {
	width: max-content;
	display: flex;
	margin-right: auto;
	margin-left: auto;
}

#progression_fin_partie .tier-modal .continue-button {
	width: min(250px, 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

@keyframes pfp-modal-arrival {
	0% { opacity: 0; transform: scale(0.88); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes pfp-confetti-fall {
	0% { opacity: 0; transform: translate3d(0, -4vh, 0) rotate(0deg); }
	9% { opacity: 1; }
	72% { opacity: 1; }
	100% { opacity: 0; transform: translate3d(var(--sway), 112vh, 0) rotate(var(--rotate)); }
}

@keyframes pfp-sparkle-pop {
	0% { opacity: 0; transform: scale(0) rotate(-25deg); }
	55% { opacity: 1; transform: scale(1.35) rotate(12deg); }
	100% { opacity: 0.85; transform: scale(1) rotate(0); }
}

@keyframes pfp-old-level {
	0% { opacity: 0; transform: translate(-50%, -42%) scale(0.78); filter: blur(0); }
	10% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
	70% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
	82% { opacity: 0.9; transform: translate(-50%, -56%) scale(0.98); filter: blur(0); }
	100% { opacity: 0; transform: translate(-50%, -78%) scale(0.86); filter: blur(4px); }
}

@keyframes pfp-level-number {
	0% { opacity: 0; transform: translateY(24px) scale(0.45); }
	60% { opacity: 1; transform: translateY(-2px) scale(1.12); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes pfp-level-caption {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pfp-level-change-flash {
	0%, 18% { opacity: 0; transform: translate(-50%, -50%) scale(0.48); }
	43% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48); }
}

@keyframes pfp-rays-turn { to { transform: rotate(360deg); } }

@keyframes pfp-progress-fill {
	from { width: 0; }
	to { width: var(--progress); }
}

@keyframes pfp-old-frame {
	0%, 70% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 10px 9px rgba(100, 62, 2, 0.2)); }
	82% { opacity: 0.9; transform: translateY(-5px) scale(0.98); filter: drop-shadow(0 10px 9px rgba(100, 62, 2, 0.2)); }
	100% { opacity: 0; transform: translateY(-18px) scale(0.88); filter: blur(4px) drop-shadow(0 10px 9px rgba(100, 62, 2, 0.2)); }
}

@keyframes pfp-new-frame {
	0% { opacity: 0; transform: translateY(16px) scale(0.86); }
	62% { opacity: 1; transform: translateY(-2px) scale(1.06); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes pfp-reveal-flash {
	0%, 18% { opacity: 0; transform: scale(0.48); }
	43% { opacity: 1; transform: scale(1.05); }
	100% { opacity: 0; transform: scale(1.42); }
}

@keyframes pfp-old-tier-label {
	0%, 70% { opacity: 1; transform: translate(-50%, 0); }
	82% { opacity: 0.9; transform: translate(-50%, -3px); }
	100% { opacity: 0; transform: translate(-50%, -12px); }
}

@keyframes pfp-tier-name {
	0% { opacity: 0; transform: translateY(7px) scale(0.7); }
	70% { opacity: 1; transform: translateY(0) scale(1.08); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pfp-tier-support-content {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	#progression_fin_partie .celebration-modal {
		width: calc(100vw - 22px);
		max-height: calc(100vh - 20px);
		border-radius: 24px;
		padding: 22px 22px 27px;
	}

	#progression_fin_partie .corner-spark-left { left: 10px; }
	#progression_fin_partie .corner-spark-right { right: 10px; }
	#progression_fin_partie .level-emblem { width: 205px; height: 205px; margin-top: 18px; }
	#progression_fin_partie .level-emblem strong { font-size: 7.15rem; }
	#progression_fin_partie .tier-modal { padding-top: 20px; }
	#progression_fin_partie .avatar-reveal { transform: scale(0.88); margin-top: 0; margin-bottom: -35px; }
	#progression_fin_partie .tier-name > strong { font-size: 2.85rem; }
}

@media (max-height: 760px) {
	#progression_fin_partie .celebration-modal { padding-top: 19px; padding-bottom: 24px; }
	#progression_fin_partie .celebration-icon { width: 37px; height: 37px; margin-bottom: 6px; }
	#progression_fin_partie .level-emblem { width: 190px; height: 190px; margin-top: 15px; }
	#progression_fin_partie .level-emblem strong { font-size: 6.65rem; }
	#progression_fin_partie .level-emblem small { margin-top: 14px; }
	#progression_fin_partie .celebration-copy { margin-bottom: 12px; }
	#progression_fin_partie .next-goal { margin-bottom: 14px; padding-top: 10px; padding-bottom: 9px; }
	#progression_fin_partie .avatar-reveal { transform: scale(0.82); margin-top: -10px; margin-bottom: -49px; }
	#progression_fin_partie .tier-name { margin-bottom: 5px; }
	#progression_fin_partie .tier-name > strong { font-size: 2.75rem; }
	#progression_fin_partie .points-earned { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	#progression_fin_partie *,
	#progression_fin_partie *::before,
	#progression_fin_partie *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
	}

	#progression_fin_partie .pfp-confetti { display: none; }
	#progression_fin_partie .tier-frame-old,
	#progression_fin_partie .old-tier-label,
	#progression_fin_partie .reveal-flash,
	#progression_fin_partie .level-change-flash,
	#progression_fin_partie .level-old { display: none; }
	#progression_fin_partie .tier-frame-new { opacity: 1; }
}