/* Native select menus must remain readable even when the browser draws the popup. */
select,
select.form-control,
select.custom-select {
	color-scheme: dark !important;
	color: #f4f1f2 !important;
	background-color: #111116 !important;
	border-color: rgba(255, 255, 255, .16) !important;
}

select option,
select optgroup {
	color: #f4f1f2 !important;
	background-color: #111116 !important;
}

select option:disabled {
	color: #7f7a7d !important;
}

/* Preserve the original hat artwork geometry instead of forcing every asset into a square. */
body#shop .obs-hat-preview {
	min-height: 168px;
	overflow: visible;
}

body#shop .obs-hat-preview .profile-pic-75-wrapper {
	width: 75px !important;
	height: 75px !important;
	overflow: visible !important;
	transform: scale(1.34);
	transform-origin: center center;
}

body#shop .obs-hat-preview img.profile-pic-75 {
	width: 75px !important;
	height: 75px !important;
	object-fit: cover !important;
}

body#shop .obs-hat-preview img.profile-pic-75-hat {
	width: 75px !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	image-rendering: auto;
}

/* Use the same 75x75 avatar and natural-height overlay geometry in profile popovers. */
.popover-user-profile .popover-profile-identity .profile-pic-75-wrapper {
	position: relative !important;
	flex: 0 0 75px !important;
	width: 75px !important;
	height: 75px !important;
	overflow: visible !important;
	transform: none !important;
}

.popover-user-profile .popover-profile-identity img.profile-pic-75 {
	position: relative !important;
	z-index: 1;
	display: block !important;
	width: 75px !important;
	height: 75px !important;
	object-fit: cover !important;
	object-position: center !important;
}

.popover-user-profile .popover-profile-identity img.profile-pic-75-hat {
	position: absolute !important;
	z-index: 2;
	left: 0 !important;
	bottom: 0 !important;
	display: block !important;
	width: 75px !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center bottom !important;
	transform: none !important;
	border-radius: 0 !important;
	image-rendering: auto;
}

.popover-user-profile .popover-profile-identity img.profile-pic-75-hat.d-none {
	display: none !important;
}

.admin-only-comments-notice {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	color: #f5dadd;
	font-weight: 700;
	border: 1px solid rgba(210, 43, 53, .4);
	border-radius: 6px;
	background: rgba(94, 14, 24, .24);
}

/* Official admin identity is a fixed plate, never a user-owned cosmetic effect. */
.admin-nameplate,
.user-name > .mod,
.chat-username.mod,
.post-meta .mod,
.comment .user-info .mod {
	display: inline-block !important;
	padding: .12em .48em .16em !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-weight: 900 !important;
	line-height: 1.35 !important;
	white-space: nowrap !important;
	vertical-align: baseline !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	border-radius: .42rem !important;
	background-color: #6f35cb !important;
	background-image: linear-gradient(
		90deg,
		#ef3131 0%,
		#ff8a20 16%,
		#f7d92d 32%,
		#30c761 48%,
		#219ce5 64%,
		#6558d9 80%,
		#d543c5 100%
	) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-origin: border-box !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .35) !important;
	filter: none !important;
	animation: none !important;
}

.admin-nameplate.username-effect-host,
.admin-nameplate.username-effect,
.admin-nameplate.username-effect-text,
.admin-nameplate.username-effect-plate,
.admin-nameplate.username-effect--ready,
.user-name > .mod.username-effect--ready,
.chat-username.mod.username-effect--ready {
	--username-effect-image: none !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	background-image: linear-gradient(
		90deg,
		#ef3131 0%,
		#ff8a20 16%,
		#f7d92d 32%,
		#30c761 48%,
		#219ce5 64%,
		#6558d9 80%,
		#d543c5 100%
	) !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
}