/* G6M_ACCOUNT_MENU_BADGES_V527
   Premium flex-wrap layout for account dropdown badges.
   Fixes overlap, Rookie full-width stretch, inconsistent sizing.
   CSS only — injected late (body end) to beat UI.X cascade. */

:root {
	--g6m-acc-badge-h: 34px;
	--g6m-acc-badge-pad-x: 16px;
	--g6m-acc-badge-gap: 10px;
	--g6m-acc-badge-radius: 999px;
	--g6m-acc-badge-icon: 14px;
	--g6m-acc-badge-font: Rajdhani, "Segoe UI", system-ui, sans-serif;
	--g6m-acc-badge-border: 1.5px;
}

/* Full-width badge band under avatar+name via CSS grid */
html body .menu.menu--account .menu-row--alt .contentRow,
html body .menu.menu--account .contentRow {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	grid-template-areas:
		"avatar header"
		"badges badges"
		"stats stats" !important;
	column-gap: 12px !important;
	row-gap: 8px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

html body .menu.menu--account .contentRow-figure {
	grid-area: avatar !important;
	align-self: start !important;
}

html body .menu.menu--account .contentRow-main {
	display: contents !important;
}

html body .menu.menu--account .contentRow-header {
	grid-area: header !important;
	min-width: 0 !important;
	margin: 0 !important;
}

html body .menu.menu--account .contentRow-lesser,
html body .menu.menu--account .g6m-account-menu-badges-row {
	grid-area: badges !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	align-content: flex-start !important;
	justify-content: flex-start !important;
	gap: var(--g6m-acc-badge-gap) !important;
	row-gap: var(--g6m-acc-badge-gap) !important;
	column-gap: var(--g6m-acc-badge-gap) !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 80px !important;
	margin: 8px 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
	position: relative !important;
}

html body .menu.menu--account .contentRow-minor {
	grid-area: stats !important;
	width: 100% !important;
	margin-top: 0 !important;
}

/* Flatten wrappers → badges share one flex line */
html body .menu.menu--account .g6m-account-menu-banners,
html body .menu.menu--account .g6m-account-menu-usertitle {
	display: contents !important;
}

html body .menu.menu--account .menu-content,
html body .menu.menu--account .menu-row {
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

/* Uniform pill shell */
html body .menu.menu--account .contentRow-lesser .userBanner,
html body .menu.menu--account .contentRow-lesser em.userBanner,
html body .menu.menu--account .contentRow-lesser span.userBanner,
html body .menu.menu--account .contentRow-lesser .userTitle,
html body .menu.menu--account .g6m-account-menu-usertitle .userTitle {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: var(--g6m-acc-badge-h) !important;
	min-height: var(--g6m-acc-badge-h) !important;
	max-height: var(--g6m-acc-badge-h) !important;
	padding: 0 var(--g6m-acc-badge-pad-x) !important;
	margin: 0 !important;
	border-radius: var(--g6m-acc-badge-radius) !important;
	border-width: var(--g6m-acc-badge-border) !important;
	border-style: solid !important;
	font-family: var(--g6m-acc-badge-font) !important;
	font-size: 0.72rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
	float: none !important;
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	isolation: isolate !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
	animation: none !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner::after,
html body .menu.menu--account .contentRow-lesser .userTitle::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	border-radius: inherit !important;
	pointer-events: none !important;
	z-index: 1 !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%, rgba(0, 0, 0, 0.22) 100%) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%, rgba(0, 0, 0, 0.22) 100%) !important;
	background-size: auto !important;
	background-repeat: no-repeat !important;
	opacity: 1 !important;
	display: block !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner::before,
html body .menu.menu--account .contentRow-lesser .userTitle::before {
	content: "" !important;
	display: inline-block !important;
	flex: 0 0 var(--g6m-acc-badge-icon) !important;
	width: var(--g6m-acc-badge-icon) !important;
	height: var(--g6m-acc-badge-icon) !important;
	min-width: var(--g6m-acc-badge-icon) !important;
	min-height: var(--g6m-acc-badge-icon) !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	z-index: 2 !important;
	align-self: center !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner strong,
html body .menu.menu--account .contentRow-lesser .userBanner span {
	position: relative !important;
	z-index: 2 !important;
	overflow: visible !important;
	white-space: nowrap !important;
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
}

html body .menu.menu--account .userBanner-before,
html body .menu.menu--account .userBanner-after {
	display: none !important;
}

/* Colors */
html body .menu.menu--account .contentRow-lesser .userBanner--g6mFounder {
	border-color: #ffd86b !important;
	background:
		linear-gradient(180deg, rgba(255, 216, 107, 0.22), rgba(0, 0, 0, 0.55)),
		linear-gradient(135deg, #ffd86b 0%, #ffb300 48%, #c57a00 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 0 14px rgba(255, 179, 0, 0.55),
		0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner.userBanner--staff:not(.userBanner--g6mAdmin):not(.userBanner--g6mFounder):not(.userBanner--g6mModerator):not(.userBanner--g6mSuperMod) {
	border-color: #ff2d95 !important;
	background:
		linear-gradient(180deg, rgba(255, 45, 149, 0.22), rgba(0, 0, 0, 0.55)),
		linear-gradient(135deg, #ff2d95 0%, #c2185b 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 0 14px rgba(255, 45, 149, 0.55),
		0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner--g6mModerator,
html body .menu.menu--account .contentRow-lesser .userBanner--g6mSuperMod {
	border-color: #ff9800 !important;
	background:
		linear-gradient(180deg, rgba(255, 152, 0, 0.22), rgba(0, 0, 0, 0.55)),
		linear-gradient(135deg, #ffb74d 0%, #ff9800 48%, #e65100 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 0 14px rgba(255, 152, 0, 0.55),
		0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner--g6mMember {
	border-color: #d4af37 !important;
	background:
		linear-gradient(180deg, rgba(212, 175, 55, 0.24), rgba(0, 0, 0, 0.55)),
		linear-gradient(135deg, #f0d78c 0%, #d4af37 48%, #a67c00 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 0 12px rgba(212, 175, 55, 0.4),
		0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner--g6mNew,
html body .menu.menu--account .contentRow-lesser .userTitle {
	border-color: #94a3b8 !important;
	background:
		linear-gradient(180deg, rgba(100, 116, 139, 0.28), rgba(0, 0, 0, 0.55)),
		linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 0 10px rgba(100, 116, 139, 0.28),
		0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

html body .menu.menu--account .contentRow-lesser .userBanner:hover,
html body .menu.menu--account .contentRow-lesser .userTitle:hover {
	transform: scale(1.03) !important;
	filter: brightness(1.06) !important;
}

@media (max-width: 500px) {
	html body .menu.menu--account .contentRow-lesser,
	html body .menu.menu--account .g6m-account-menu-badges-row {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: center !important;
		min-height: 0 !important;
	}

	html body .menu.menu--account .contentRow-lesser .userBanner,
	html body .menu.menu--account .contentRow-lesser .userTitle {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
		align-self: stretch !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .menu.menu--account .contentRow-lesser .userBanner:hover,
	html body .menu.menu--account .contentRow-lesser .userTitle:hover {
		transform: none !important;
		filter: none !important;
	}
}

/* END G6M_ACCOUNT_MENU_BADGES_V527 */