/* Animated username textures. Each WebP is stretched once across its exact target. */
.username-effect-host,
.username-effect,
.username-effect-text {
	--username-effect-image: none;
	font: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.username-effect,
.username-effect-text {
	display: inline-block;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	vertical-align: baseline;
	background: none;
}

.username-effect.username-effect--ready,
.username-effect-text.username-effect--ready {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	background-color: transparent !important;
	background-image: var(--username-effect-image) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-origin: content-box !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	text-shadow: none !important;
	filter: none !important;
	image-rendering: auto;
}

/* Patron effects replace the nameplate surface while keeping readable solid text. */
.patron.username-effect-plate {
	color: var(--username-effect-text-color, #fff) !important;
	-webkit-text-fill-color: currentColor !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
}

.patron.username-effect-plate.username-effect--ready {
	background-image: var(--username-effect-image) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-origin: border-box !important;
	image-rendering: auto;
}

/* Never hide a username before its WebP is decoded. */
.username-effect:not(.username-effect--ready),
.username-effect-text:not(.username-effect--ready) {
	background-image: none !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.username-effect,
	.username-effect-text,
	.username-effect.username-effect--ready,
	.username-effect-text.username-effect--ready {
		color: inherit !important;
		-webkit-text-fill-color: currentColor !important;
		background-image: none !important;
	}
}

/* Preview text keeps its natural width; JS reduces only the font size when needed. */
.obs-effect-preview,
.obs-effect-live-preview {
	contain: layout paint;
}

.obs-effect-preview .username-effect-host:not(.patron),
.obs-effect-live-preview .username-effect-host:not(.patron),
.obs-effect-preview .username-effect:not(.patron),
.obs-effect-live-preview .username-effect:not(.patron) {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: .12em .08em !important;
	white-space: nowrap !important;
	overflow: visible !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
	line-height: 1.2 !important;
	text-align: center !important;
}

/* Keep the site's real patron plate geometry in previews. */
.obs-effect-preview .patron.username-effect-host,
.obs-effect-live-preview .patron.username-effect-host {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
	line-height: 1.2 !important;
	text-align: center !important;
}

/* Card previews use the same readable scale for free names and patron plates. */
.obs-effect-preview .username-effect-host,
.obs-effect-preview .username-effect,
.obs-effect-preview .patron.username-effect-host {
	font-size: clamp(1.45rem, 2.7vw, 2rem) !important;
	font-weight: 900 !important;
}

.obs-effect-color-input {
	position: fixed;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.obs-effect-card {
	content-visibility: auto;
	contain-intrinsic-size: 320px;
}