/* GMS-Karten aus den BBCodes [gmschar], [gmsguild], [gmsach=ID,card] ... */
.gmsCard {
	--gms-card-accent: var(--wcfContentLink);
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 560px;
	margin: 10px 0;
	padding: 12px 14px;
	border: 1px solid var(--wcfContentBorderInner);
	border-left: 4px solid var(--gms-card-accent);
	border-radius: 8px;
	background: var(--wcfContentBackground);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	color: var(--wcfContentText);
	text-decoration: none;
	vertical-align: top;
}

a.gmsCard:hover,
a.gmsCard:focus-visible {
	box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
	text-decoration: none;
}

.gmsCardMedia {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 2px solid var(--gms-card-accent);
	border-radius: 8px;
	background: rgba(0, 0, 0, .06);
	color: var(--gms-card-accent);
}

.gmsCardMedia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gmsCard--image .gmsCardMedia--image {
	width: 112px;
	height: 84px;
	border-width: 1px;
}

.gmsCardBody {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gmsCardTitle {
	color: var(--gms-card-accent);
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.25;
}

.gmsCardMeta {
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
}

.gmsCardNote {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 3px;
	background: var(--gms-card-accent);
	color: #fff;
	font-weight: 600;
}

.gmsCardText {
	margin-top: 2px;
	font-size: var(--wcfFontSizeSmall);
}

.gmsCard--guild.gmsCard--horde {
	--gms-card-accent: #b30000;
}

.gmsCard--guild.gmsCard--alliance {
	--gms-card-accent: #1a5fb4;
}

.gmsCard--achievement {
	--gms-card-accent: #c99a00;
}

.gmsCard--encounter {
	--gms-card-accent: #c2410c;
}

/* Mehrere Karten nebeneinander (z. B. Bosskills eines Tages) */
.gmsCards {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin: 10px 0;
}

.gmsCards .gmsCard {
	margin: 0;
	max-width: none;
}

.gmsInline {
	font-weight: 600;
	white-space: nowrap;
}

.gmsInline img {
	margin-right: 3px;
	vertical-align: -3px;
	border-radius: 3px;
}

@media (max-width: 544px) {
	.gmsCard {
		max-width: none;
	}
}

/* ---- Gildenuebersicht (Karten / nach Realm / Tabelle) ---- */
.gmsGuildCrest {
	--gms-crest-size: 48px;
	--gms-crest-bg: rgba(0, 0, 0, .25);
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--gms-crest-size);
	height: var(--gms-crest-size);
	overflow: hidden;
	border-radius: 8px;
	background: var(--gms-crest-bg);
	color: rgba(255, 255, 255, .7);
}

.gmsGuildCrestEmblem {
	width: 86%;
	height: 86%;
	object-fit: contain;
}

.gmsFaction--horde { --gms-faction: #c62828; --gms-faction-text: #ff6b5e; }
.gmsFaction--alliance { --gms-faction: #1f5fbf; --gms-faction-text: #6aa5ff; }

.gmsGuildFaction {
	color: var(--gms-faction-text, var(--wcfContentDimmedText));
	font-size: var(--wcfFontSizeSmall);
	font-weight: 600;
}

.gmsGuildName {
	color: var(--wcfContentLink);
	font-weight: 700;
}

.gmsGuildRealm {
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
}

.gmsGuildCardTitles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Grosse Karten */
.gmsGuildCards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.gmsGuildCard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wcfContentBorderInner);
	border-top: 6px solid var(--gms-faction, var(--wcfContentBorderInner));
	border-radius: 10px;
	background: var(--wcfContentBackground);
	color: var(--wcfContentText);
	text-decoration: none;
}

.gmsGuildCard:hover,
.gmsGuildCard:focus-visible {
	box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
	text-decoration: none;
}

.gmsGuildCardHead {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px;
}

.gmsGuildCard .gmsGuildName {
	font-size: 1.2em;
}

.gmsGuildStats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--wcfContentBorderInner);
}

.gmsGuildStat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
}

.gmsGuildStat + .gmsGuildStat {
	border-left: 1px solid var(--wcfContentBorderInner);
}

.gmsGuildStat strong {
	font-size: 1.15em;
}

.gmsGuildStat small,
.gmsGuildLast {
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
}

.gmsGuildLast {
	padding: 10px 14px;
	border-top: 1px solid var(--wcfContentBorderInner);
}

/* Nach Realm gruppiert */
.gmsGuildRealms {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	align-items: start;
}

.gmsGuildRealm {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 10px;
	background: var(--wcfContentBackground);
}

.gmsGuildRealmTitle {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
}

.gmsGuildRealmItem {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-left: 4px solid var(--gms-faction, var(--wcfContentBorderInner));
	border-radius: 8px;
	background: rgba(127, 127, 127, .08);
	color: var(--wcfContentText);
	text-decoration: none;
}

.gmsGuildRealmItem:hover {
	background: rgba(127, 127, 127, .16);
	text-decoration: none;
}

.gmsGuildRealmItem .gmsGuildCardTitles {
	flex: 1 1 auto;
}

.gmsGuildRealmStats {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
	white-space: nowrap;
}

.gmsGuildTable .columnIcon {
	width: 52px;
}

/* ---- Gildenaktivitaet ---- */
.gmsActivityFilter {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gmsChips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gmsChip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 4px 12px;
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 18px;
	background: var(--wcfContentBackground);
	color: var(--wcfContentText);
	font-size: var(--wcfFontSizeSmall);
	text-decoration: none;
}

.gmsChip:hover {
	border-color: var(--wcfContentLink);
	text-decoration: none;
}

.gmsChip.active {
	border-color: var(--wcfContentLink);
	color: var(--wcfContentLink);
	font-weight: 600;
}

.gmsChip--guild {
	border-left: 4px solid var(--gms-faction, var(--wcfContentBorderInner));
	padding-left: 6px;
}

.gmsChip small,
.gmsActivityGuild small {
	color: var(--wcfContentDimmedText);
}

.gmsChip .gmsGuildCrest,
.gmsActivityGuild .gmsGuildCrest {
	border-radius: 4px;
}

.gmsActivityList {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gmsActivityItem {
	--gms-activity-accent: #c99a00;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border: 1px solid var(--wcfContentBorderInner);
	border-left: 4px solid var(--gms-activity-accent);
	border-radius: 8px;
	background: var(--wcfContentBackground);
}

.gmsActivityItem--encounter {
	--gms-activity-accent: #c2410c;
}

.gmsActivityItem--guildAchievement {
	--gms-activity-accent: #2e7d32;
}

.gmsActivityIcon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border: 2px solid var(--gms-activity-accent);
	border-radius: 8px;
	background: rgba(0, 0, 0, .15);
	color: var(--gms-activity-accent);
}

.gmsActivityIcon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gmsActivityBody {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.gmsActivityTitle {
	font-weight: 600;
}

.gmsActivityMeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
}

.gmsActivityType {
	color: var(--gms-activity-accent);
	font-weight: 600;
}

.gmsActivityGuild {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.gmsActivityTime {
	flex: 0 0 auto;
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
	white-space: nowrap;
}

@media (max-width: 544px) {
	.gmsActivityItem {
		flex-wrap: wrap;
	}

	.gmsActivityTime {
		width: 100%;
		padding-left: 60px;
	}
}


/* ---- Gilden-Boxen (auch ausserhalb der Gildenseite) ---- */
/* ---------- Gildenuebersicht: Statistik ---------- */
.gmsStatsFilter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gmsStatsFilter select {
	width: 100%;
}
.gmsStatsKeys {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 12px;
	list-style: none;
	padding: 0;
}
.gmsStatsKeys li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 4px;
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: var(--wcfBorderRadius);
	text-align: center;
	min-height: 64px;
}
.gmsStatsKeys strong {
	font-size: 20px;
	line-height: 1.2;
	color: var(--wcfContentHeadlineText);
}
.gmsStatsKeys small,
.gmsStatsAchievements small {
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
}
.gmsStatsAchievements {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gmsStatsAchievements li {
	display: flex;
	flex-direction: column;
	padding: 8px 10px;
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: var(--wcfBorderRadius);
}
.gmsStatsAchievementTitle {
	font-weight: 600;
	color: var(--wcfContentLink);
}

/* Saeulen: Klassen (Seitenleiste) und Stufenbereiche */
.gmsStatsColumns {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
	height: 160px;
}
.gmsStatsColumn {
	flex: 1 1 0;
	max-width: 34px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.gmsStatsColumnsLevels .gmsStatsColumn {
	max-width: 64px;
}
.gmsStatsColumnCount {
	font-size: var(--wcfFontSizeSmall);
	font-weight: 600;
	color: var(--wcfContentText);
}
.gmsStatsColumnTrack {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	align-items: flex-end;
	background: rgba(127, 127, 127, 0.12);
	border-radius: 3px 3px 0 0;
}
.gmsStatsColumnBar {
	display: block;
	width: 100%;
	min-height: 2px;
	background: var(--wcfButtonPrimaryBackground);
	border-radius: 3px 3px 0 0;
}
.gmsStatsColumn img,
.gmsStatsColumnDot {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 50%;
}
.gmsStatsColumnDot {
	display: block;
	background: var(--wcfContentDimmedText);
}
.gmsStatsColumnLabel {
	font-size: var(--wcfFontSizeSmall);
	color: var(--wcfContentDimmedText);
	white-space: nowrap;
}

/* Balken: Rollen und Voelker */
.gmsStatsBars {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gmsStatsBars li {
	display: grid;
	grid-template-columns: 96px 1fr 2em;
	gap: 8px;
	align-items: center;
}
.gmsStatsBarLabel {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--wcfFontSizeSmall);
}
.gmsStatsBarLabel img {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border-radius: 50%;
}
.gmsStatsBarTrack {
	height: 8px;
	background: rgba(127, 127, 127, 0.18);
	border-radius: 4px;
	overflow: hidden;
}
.gmsStatsBarFill {
	display: block;
	height: 100%;
	background: var(--wcfButtonPrimaryBackground);
}
.gmsStatsRoleTank { background: #3a6fd8; }
.gmsStatsRoleHealer { background: #2e9e4a; }
.gmsStatsRoleDps { background: #b5261e; }
.gmsStatsFactionAlliance { background: #2b5fb4; }
.gmsStatsFactionHorde { background: #a3201a; }
.gmsStatsBarValue {
	font-weight: 600;
	text-align: right;
}


/* Listen in Boxen */
.gmsBoxList {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gmsBoxListItem {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.gmsBoxListItem > img,
.gmsBoxListIcon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: cover;
}

.gmsBoxListIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(127, 127, 127, .15);
}

.gmsBoxListBody {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gmsBoxListTitle {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gmsBoxListMeta {
	color: var(--wcfContentDimmedText);
	font-size: var(--wcfFontSizeSmall);
}

.gmsBoxMore {
	display: block;
	margin-top: 10px;
	font-size: var(--wcfFontSizeSmall);
}

/* Kleiner Fortschrittsbalken in Boxen */
.gmsMiniBar {
	--gms-bar: var(--wcfContentLink);
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(127, 127, 127, .2);
}

.gmsMiniBar > span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--gms-bar);
}

.gmsBoxListBody .gmsMiniBar {
	margin-top: 4px;
}

.gmsBoxListItem--wide .gmsBoxListBody {
	flex: 1 1 auto;
}

.gmsBoxListValue {
	flex: 0 0 auto;
	margin-left: auto;
	font-weight: 700;
}