/* --------------------------------------------------------------
   WP GAMEZ – Global CSS Variables (Theming)
-------------------------------------------------------------- */

:root {
	/* --- Colors (Theme overridable) --- */
	--wp-gamez-bg: black;
	--wp-gamez-text: white;
	--wp-gamez-accent: green;

	/* XP-Bubble */
	--wp-gamez-xp-bubble-text: black;
	--wp-gamez-xp-bubble-start-opacity: 0;
	--wp-gamez-xp-bubble-end-opacity: 0;
	--wp-gamez-xp-bubble-text-shadow-color: white;
	--wp-gamez-xp-bubble-text-shadow-width: 1px;

	/* Level Up Overlay */
	--wp-gamez-levelup-bg: black;
	--wp-gamez-levelup-padding: 0;
	--wp-gamez-levelup-border-radius: 0;
	--wp-gamez-levelup-gap: 0;
	--wp-gamez-levelup-text: white;

	/* --- Spacing & Size --- */
	--wp-gamez-status-padding: 0;
	--wp-gamez-status-radius: 0;
	--wp-gamez-status-border: 7px solid var(--wp-gamez-accent);
	--wp-gamez-status-position-left: 0;
	--wp-gamez-status-position-bottom: 0;
	--wp-gamez-status-gap: 0;
	--wp-gamez-font-size: 1rem;
	--wp-gamez-font-weight: 900;

	/* --- Animations --- */
	--wp-gamez-animation-duration: 1s;
	--wp-gamez-levelup-duration: 2s;
	--wp-gamez-bubble-rise: -30px;
}

/* --------------------------------------------------------------
   Status Widget (Floating Level/Xp Badge)
-------------------------------------------------------------- */

/* Versteckt, bis erste XP gesammelt sind (oder abhängig von Einstellung) */
.wp-gamez-status-floating.wp-gamez-status-floating--hidden {
	display: none;
}

/* Basis-Style for variants */
.wp-gamez-status-floating,
.wp-gamez-status-inline {
	padding: var(--wp-gamez-status-padding);
	background: var(--wp-gamez-bg);
	color: var(--wp-gamez-text);

	border-radius: var(--wp-gamez-status-radius);
	border: var(--wp-gamez-status-border);
	font-size: var(--wp-gamez-font-size);
	font-weight: var(--wp-gamez-font-weight);

	display: flex;
	gap: var(--wp-gamez-status-gap);
	align-items: start;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* Floating-Version (global in Footer) */
.wp-gamez-status-floating {
	position: fixed;
	left: var(--wp-gamez-status-position-left);
	bottom: var(--wp-gamez-status-position-bottom);
	z-index: 99;
}

/* appearance dactivated → hide */
.wp-gamez-status-floating.wp-gamez-status-floating--disabled {
	display: none;
}

/* Inline-Version (Shortcode in Content) */
.wp-gamez-status-inline {
	position: static;
	z-index: auto;
}

/* --------------------------------------------------------------
   XP Bubble (+5 XP Animation)
-------------------------------------------------------------- */

.wp-gamez-xp-bubble {
	position: absolute;
	pointer-events: none;

	opacity: var(--wp-gamez-xp-bubble-start-opacity);
	color: var(--wp-gamez-xp-bubble-text);

	font-size: var(--wp-gamez-font-size);
	font-weight: normal;

	transform: translateY(0);
	z-index: 9999;

	text-shadow: 0.2px 0.2px 0 var(--wp-gamez-xp-bubble-text-shadow-color),
		-0.2px 0.2px 0 var(--wp-gamez-xp-bubble-text-shadow-color),
		-0.2px -0.2px 0 var(--wp-gamez-xp-bubble-text-shadow-color),
		0.2px -0.2px 0 var(--wp-gamez-xp-bubble-text-shadow-color);
}

.wp-gamez-xp-bubble--anim {
	animation: wp-gamez-xp-float var(--wp-gamez-animation-duration) ease-out
		forwards;
}

@keyframes wp-gamez-xp-float {
	0% {
		opacity: var(--wp-gamez-xp-bubble-start-opacity);
		transform: translateY(0);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: var(--wp-gamez-xp-bubble-end-opacity);
		transform: translateY(var(--wp-gamez-bubble-rise));
	}
}

/* --------------------------------------------------------------
   Level Up Overlay (Centered Pop-Up)
-------------------------------------------------------------- */

.wp-gamez-levelup {
	position: fixed;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	pointer-events: none;

	z-index: 9999;
	transition: opacity 0.3s ease-out;
}

.wp-gamez-levelup--visible {
	opacity: 1;
	pointer-events: auto;
}

.wp-gamez-levelup-box {
	background: var(--wp-gamez-levelup-bg);
	color: var(--wp-gamez-levelup-text);

	padding: var(--wp-gamez-levelup-padding);
	border-radius: var(--wp-gamez-levelup-border-radius);
	border: var(--wp-gamez-status-border);

	display: flex;
	flex-direction: column;
	gap: var(--wp-gamez-levelup-gap);

	font-size: calc(var(--wp-gamez-font-size) + 2px);
	text-align: center;
	font-weight: 900;

	animation: wp-gamez-levelup-pop var(--wp-gamez-levelup-duration) ease-out
		forwards;
}

@keyframes wp-gamez-levelup-pop {
	0% {
		transform: scale(0.7);
		opacity: 0;
	}
	20% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.wp-gamez-levelup-title {
	font-weight: 600;
	font-size: calc(var(--wp-gamez-font-size) + 4px);
}

.wp-gamez-status.wp-gamez-status-floating,
.wp-gamez-levelup .wp-gamez-levelup-box {
	font-size: 1.2rem;
	border-width: 0.2rem;
	font-weight: 600;
	gap: 0.5rem;
	color: var(--global-palette9);
}

@media screen and (max-width: 767px) {
	.wp-gamez-status.wp-gamez-status-floating,
	.wp-gamez-levelup .wp-gamez-levelup-box {
		font-size: 0.8rem;
		bottom: 4rem;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.wp-gamez-status.wp-gamez-status-floating,
	.wp-gamez-levelup .wp-gamez-levelup-box {
		font-size: 1rem;
	}
}