:root {
	--rpgstats-bar-h: 2px;
	--rpgstats-col-w: 12rem;
}

/* Kategorie-Reihe für Donut, Legende und Geschlechterbalken.
   Eine Achse statt zwölf Farben: der Akzent wandert schrittweise in die
   Textfarbe. Weil --md-ink im Hellmodus dunkel und im Dunkelmodus hell ist,
   bleibt die Reihe in beiden Modi lesbar und folgt dem Akzent-Picker. */
:root {
	--rpgstats-cat-1:  var(--md-accent);
	--rpgstats-cat-2:  color-mix(in oklab, var(--md-accent), var(--md-ink) 12%);
	--rpgstats-cat-3:  color-mix(in oklab, var(--md-accent), var(--md-ink) 22%);
	--rpgstats-cat-4:  color-mix(in oklab, var(--md-accent), var(--md-ink) 31%);
	--rpgstats-cat-5:  color-mix(in oklab, var(--md-accent), var(--md-ink) 39%);
	--rpgstats-cat-6:  color-mix(in oklab, var(--md-accent), var(--md-ink) 46%);
	--rpgstats-cat-7:  color-mix(in oklab, var(--md-accent), var(--md-ink) 53%);
	--rpgstats-cat-8:  color-mix(in oklab, var(--md-accent), var(--md-ink) 60%);
	--rpgstats-cat-9:  color-mix(in oklab, var(--md-accent), var(--md-ink) 67%);
	--rpgstats-cat-10: color-mix(in oklab, var(--md-accent), var(--md-ink) 74%);
	--rpgstats-cat-11: color-mix(in oklab, var(--md-accent), var(--md-ink) 81%);
	--rpgstats-cat-12: color-mix(in oklab, var(--md-accent), var(--md-ink) 88%);
}

.rpgstats-wrapper,
.rpgstats-profile {
	font-size: var(--md-t-body);
	color: var(--md-ink-dim);
}
.rpgstats-wrapper *,
.rpgstats-wrapper *::before,
.rpgstats-wrapper *::after { box-sizing: border-box; }

/* Die Symbole kommen teils aus dem Plugin-PHP und lassen sich nicht aus den
   Vorlagen nehmen. Sie bleiben, treten aber zurück. */
.rpgstats-wrapper i[class*="fa-"],
.rpgstats-profile i[class*="fa-"] {
	font-size: .8em;
	color: var(--md-ink-faint);
}

/* ============================================================
   Navigation der Statistikseite
   ============================================================ */
.rpgstats-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.2rem;
}
.rpgstats-nav__link--active { border-color: var(--md-rule); color: var(--md-ink-bright); }

.rpgstats-timefilter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.rpgstats-timefilter__btn--active { border-color: var(--md-rule); color: var(--md-ink-bright); }

.rpgstats-back { margin-bottom: 1.2rem; }
.rpgstats-back a {
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-dim);
	transition: color var(--md-dur) var(--md-ease);
}
.rpgstats-back a:hover { color: var(--md-ink); }

/* ============================================================
   Abschnitte
   ============================================================ */
.rpgstats-section { margin-top: clamp(2rem, 4vw, 3rem); }
.rpgstats-section:first-child { margin-top: 0; }

/* ============================================================
   Zahlenreihen: Board, Index, Postbit, Profilzähler
   ------------------------------------------------------------
   Keine Kacheln mit Verlauf mehr. Die Zahl trägt die Serife,
   die Beschriftung steht klein und versal darunter.
   ============================================================ */
.rpgstats-board-summary,
.rpgstats-summary,
.rpgstats-index__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 1px;
	background: var(--md-rule-hair);
	border: 1px solid var(--md-rule-hair);
}
.rpgstats-board-stat,
.rpgstats-box,
.rpgstats-index__item {
	display: grid;
	align-content: start;
	gap: .3rem;
	padding: 1.1rem 1.2rem;
	background: var(--md-scrim-solid);
	text-align: left;
}
.rpgstats-box__icon { color: var(--md-ink-faint); }

.rpgstats-board-stat__value,
.rpgstats-box__value,
.rpgstats-index__num,
.rpgstats-mini-stat__value,
.rpgstats-char-avg__value,
.rpgstats-avg__value,
.rpgstats-player-age-stat__value,
.rpgstats-age-avg-card__value {
	font-family: var(--md-f-serif);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.1;
	letter-spacing: var(--md-ls-display);
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-bright);
}

.rpgstats-board-stat__label,
.rpgstats-box__label,
.rpgstats-index__label,
.rpgstats-mini-stat__label,
.rpgstats-char-avg__label,
.rpgstats-player-age-stat__label,
.rpgstats-age-avg-card__label,
.rpgstats-postbit__label,
.rpgstats-profile-counts__label {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* Auf der Startseite steht der Block zwischen Begruessung und Brett. */
.rpgstats-index { margin: clamp(1.5rem, 3vw, 2.25rem) 0; }

.rpgstats-index__genders { margin-top: 1.4rem; }
.rpgstats-index__genders-row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
}
.rpgstats-index__gender {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	font-size: var(--md-t-micro);
	color: var(--md-ink-dim);
}
.rpgstats-index__gender-count {
	font-variant-numeric: tabular-nums;
	color: var(--md-ink);
}
.rpgstats-index__gender-name {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* Im Beitrag und im Profilkopf stehen die Zahlen in einer Zeile. */
.rpgstats-postbit,
.rpgstats-profile-counts {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.2rem;
}
.rpgstats-postbit__stat,
.rpgstats-profile-counts__stat {
	display: flex;
	align-items: baseline;
	gap: .4rem;
}
.rpgstats-postbit__num,
.rpgstats-profile-counts__num {
	font-variant-numeric: tabular-nums;
	color: var(--md-ink);
}

.rpgstats-mini-stat,
.rpgstats-char-avg,
.rpgstats-player-age-stat { display: grid; gap: .25rem; align-content: start; }

/* ============================================================
   Hinweise
   ============================================================ */
.rpgstats-message {
	display: flex;
	padding: .85rem 1.15rem;
	border: 1px solid var(--md-rule-hair);
	border-left: 2px solid var(--md-rule-soft);
	color: var(--md-ink-dim);
}
.rpgstats-message--info { border-left-color: var(--md-ink); }
.rpgstats-message--error { border-left-color: var(--md-accent); }

/* ============================================================
   Spielerliste
   ============================================================ */
.rpgstats-search { margin-bottom: 1.4rem; }
.rpgstats-search input { max-width: 22rem; }

.rpgstats-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.rpgstats-table th,
.rpgstats-table td {
	padding: .8rem 1rem .8rem 0;
	background: none;
	text-align: left;
	vertical-align: top;
}
.rpgstats-table th:last-child,
.rpgstats-table td:last-child { padding-right: 0; }
.rpgstats-table thead th {
	padding-top: 0;
	border-bottom: 1px solid var(--md-rule-soft);
	font-size: var(--md-t-kicker);
	font-weight: 400;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--md-ink-faint);
}
.rpgstats-table tbody td {
	border-bottom: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
	line-height: 1.7;
	color: var(--md-ink-dim);
}
.rpgstats-table tbody tr:last-child td { border-bottom: 0; }

.rpgstats-player-link {
	font-family: var(--md-f-serif);
	font-size: 1.05rem;
	letter-spacing: var(--md-ls-display);
	color: var(--md-ink-bright);
	transition: color var(--md-dur) var(--md-ease);
}
.rpgstats-player-link:hover { color: var(--md-accent-soft); }
/* Die Charakterbilder der Zeile kommen aus dem Plugin-PHP, nicht aus der
   Vorlage. Sie brauchen hier ihr Format, sonst stehen sie in Originalgröße. */
.rpgstats-char-list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	color: var(--md-ink-faint);
}
.rpgstats-mini-avatar-link { display: inline-block; line-height: 0; }
.rpgstats-mini-avatar {
	width: 32px; height: 32px;
	object-fit: cover;
	padding: 2px;
	border: 1px solid var(--md-rule-hair);
	filter: var(--md-photo-filter);
	transition: border-color var(--md-dur) var(--md-ease), filter var(--md-dur) var(--md-ease);
}
.rpgstats-mini-avatar-link:hover .rpgstats-mini-avatar {
	border-color: var(--md-rule);
	filter: none;
}

/* ============================================================
   Durchschnitt mit Skala
   ============================================================ */
.rpgstats-averages,
.rpgstats-char-avg-grid,
.rpgstats-player-age-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.6rem;
}
.rpgstats-avg { display: grid; gap: .35rem; align-content: start; }
.rpgstats-avg__label {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.rpgstats-avg__scale {
	position: relative;
	height: var(--rpgstats-bar-h);
	margin-top: .4rem;
	background: var(--md-rule-hair);
}
.rpgstats-avg__marker {
	position: absolute;
	top: 50%;
	width: 7px; height: 7px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--md-accent);
	transform: translateY(-50%);
}
.rpgstats-avg__range {
	display: flex;
	justify-content: space-between;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* ============================================================
   Donut, Legende
   ============================================================ */
.rpgstats-donut-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6rem;
}
.rpgstats-donut-container {
	padding: 1.2rem;
	border: 1px solid var(--md-rule-hair);
}
.rpgstats-donut-title {
	margin-bottom: 1rem;
	font-family: var(--md-f-serif);
	font-size: var(--md-t-head);
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink);
}
.rpgstats-donut-wrapper {
	position: relative;
	width: 100%;
	max-width: 12rem;
	margin: 0 auto;
}
.rpgstats-donut { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.rpgstats-donut__segment {
	fill: none;
	stroke-width: 10;
	stroke: var(--rpgstats-cat-12);
}
.rpgstats-donut__segment:nth-child(1)  { stroke: var(--rpgstats-cat-1); }
.rpgstats-donut__segment:nth-child(2)  { stroke: var(--rpgstats-cat-2); }
.rpgstats-donut__segment:nth-child(3)  { stroke: var(--rpgstats-cat-3); }
.rpgstats-donut__segment:nth-child(4)  { stroke: var(--rpgstats-cat-4); }
.rpgstats-donut__segment:nth-child(5)  { stroke: var(--rpgstats-cat-5); }
.rpgstats-donut__segment:nth-child(6)  { stroke: var(--rpgstats-cat-6); }
.rpgstats-donut__segment:nth-child(7)  { stroke: var(--rpgstats-cat-7); }
.rpgstats-donut__segment:nth-child(8)  { stroke: var(--rpgstats-cat-8); }
.rpgstats-donut__segment:nth-child(9)  { stroke: var(--rpgstats-cat-9); }
.rpgstats-donut__segment:nth-child(10) { stroke: var(--rpgstats-cat-10); }
.rpgstats-donut__segment:nth-child(11) { stroke: var(--rpgstats-cat-11); }

.rpgstats-donut__center {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: .2rem;
	pointer-events: none;
}
.rpgstats-donut__center-value {
	font-family: var(--md-f-serif);
	font-size: 1.5rem;
	letter-spacing: var(--md-ls-display);
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-bright);
}
.rpgstats-donut__center-label {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

.rpgstats-donut-legend { display: grid; gap: .35rem; margin-top: 1.2rem; }
.rpgstats-legend-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: .6rem;
	font-size: var(--md-t-micro);
	color: var(--md-ink-dim);
}
.rpgstats-legend-color {
	align-self: center;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--rpgstats-cat-12);
}
.rpgstats-legend-item:nth-child(1)  .rpgstats-legend-color { background: var(--rpgstats-cat-1); }
.rpgstats-legend-item:nth-child(2)  .rpgstats-legend-color { background: var(--rpgstats-cat-2); }
.rpgstats-legend-item:nth-child(3)  .rpgstats-legend-color { background: var(--rpgstats-cat-3); }
.rpgstats-legend-item:nth-child(4)  .rpgstats-legend-color { background: var(--rpgstats-cat-4); }
.rpgstats-legend-item:nth-child(5)  .rpgstats-legend-color { background: var(--rpgstats-cat-5); }
.rpgstats-legend-item:nth-child(6)  .rpgstats-legend-color { background: var(--rpgstats-cat-6); }
.rpgstats-legend-item:nth-child(7)  .rpgstats-legend-color { background: var(--rpgstats-cat-7); }
.rpgstats-legend-item:nth-child(8)  .rpgstats-legend-color { background: var(--rpgstats-cat-8); }
.rpgstats-legend-item:nth-child(9)  .rpgstats-legend-color { background: var(--rpgstats-cat-9); }
.rpgstats-legend-item:nth-child(10) .rpgstats-legend-color { background: var(--rpgstats-cat-10); }
.rpgstats-legend-item:nth-child(11) .rpgstats-legend-color { background: var(--rpgstats-cat-11); }
.rpgstats-legend-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpgstats-legend-value { font-variant-numeric: tabular-nums; color: var(--md-ink); }

/* ============================================================
   Verteilung als Wortwolke
   ============================================================ */
.rpgstats-dist-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.rpgstats-dist-tag {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	padding: .35rem .7rem;
	border: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
	color: var(--md-ink-dim);
}
.rpgstats-dist-tag__count {
	font-variant-numeric: tabular-nums;
	color: var(--md-ink);
}

/* ============================================================
   Säulen je Monat
   ============================================================ */
.rpgstats-vbars {
	display: flex;
	align-items: flex-end;
	gap: .4rem;
	height: 13rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--md-rule-hair);
}
.rpgstats-vbar {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.rpgstats-vbar__column { display: flex; align-items: flex-end; height: 100%; }
.rpgstats-vbar__fill {
	position: relative;
	width: 100%;
	height: calc(var(--percentage, 0) * 1%);
	min-height: 1px;
	background: var(--md-ink-dim);
	transition: height var(--md-dur) var(--md-ease);
}
.rpgstats-vbar:hover .rpgstats-vbar__fill { background: var(--md-accent); }
.rpgstats-vbar__value {
	position: absolute;
	bottom: 100%;
	left: 50%;
	padding-bottom: .25rem;
	font-size: var(--md-t-kicker);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--md-ink-faint);
	transform: translateX(-50%);
}
.rpgstats-vbar__label {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding-top: .4rem;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: center;
	color: var(--md-ink-faint);
}

/* ============================================================
   Balken je Charakter
   ============================================================ */
.rpgstats-charbars { display: grid; gap: .9rem; }
.rpgstats-charbar {
	display: grid;
	grid-template-columns: 28px minmax(6rem, 10rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: .8rem;
}
.rpgstats-charbar__avatar {
	width: 28px; height: 28px;
	object-fit: cover;
	padding: 2px;
	border: 1px solid var(--md-rule-hair);
	filter: var(--md-photo-filter);
}
.rpgstats-charbar__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--md-f-serif);
	font-size: 1rem;
	letter-spacing: var(--md-ls-display);
	color: var(--md-ink);
}

/* Die Farbachse des Plugins (--hue) bleibt ungenutzt: der Balken ist ein
   Zustand und trägt Helligkeit. */
.rpgstats-bar__track {
	min-width: 0;
	height: var(--rpgstats-bar-h);
	background: var(--md-rule-hair);
}
.rpgstats-bar__fill {
	width: calc(var(--percentage, 0) * 1%);
	max-width: 100%;
	height: 100%;
	background: var(--md-ink-dim);
	transition: width var(--md-dur) var(--md-ease);
}
.rpgstats-charbar:hover .rpgstats-bar__fill { background: var(--md-accent); }
.rpgstats-bar__value {
	white-space: nowrap;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-faint);
}

/* ============================================================
   Aktivitätsleiste der letzten zwölf Monate
   ============================================================ */
.rpgstats-sparkline-wrap { margin-top: .6rem; }
.rpgstats-sparkline {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 3rem;
	border-bottom: 1px solid var(--md-rule-hair);
}
.rpgstats-sparkline__point {
	flex: 1 1 0;
	min-width: 0;
	height: var(--height, 0%);
	min-height: 1px;
	background: var(--md-ink-dim);
}
.rpgstats-sparkline__point:hover { background: var(--md-accent); }
.rpgstats-sparkline-labels {
	display: flex;
	gap: 3px;
	margin-top: .35rem;
}
.rpgstats-sparkline__label {
	flex: 1 1 0;
	min-width: 0;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: center;
	color: var(--md-ink-faint);
}

/* ============================================================
   Charakter-Auswahl und Einzelansicht
   ============================================================ */
.rpgstats-char-select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	margin-bottom: 1.4rem;
}
.rpgstats-char-select label {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.rpgstats-char-select select { width: auto; min-width: 12rem; }

.rpgstats-char-detail {
	padding: 1.2rem;
	border: 1px solid var(--md-rule-hair);
}
.rpgstats-char-detail__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.1rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid var(--md-rule-hair);
}
.rpgstats-char-detail__avatar {
	width: 52px; height: 52px;
	object-fit: cover;
	padding: 3px;
	border: 1px solid var(--md-rule-hair);
	filter: var(--md-photo-filter);
}
.rpgstats-char-detail__info h4 {
	margin: 0;
	font-family: var(--md-f-serif);
	font-weight: 400;
	font-size: 1.2rem;
	letter-spacing: var(--md-ls-display);
	text-transform: uppercase;
	color: var(--md-ink-bright);
}
.rpgstats-char-detail__info h4 a { color: inherit; }
.rpgstats-char-detail__info h4 a:hover { color: var(--md-accent-soft); }
.rpgstats-char-detail__info p {
	margin: .3rem 0 0;
	font-size: var(--md-t-micro);
	color: var(--md-ink-faint);
}
.rpgstats-char-detail__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 1.2rem;
}
.rpgstats-char-detail__averages,
.rpgstats-char-detail__sparkline {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--md-rule-hair);
}
.rpgstats-char-detail__sparkline p { margin: 0 0 .4rem; }

/* ============================================================
   Alter und Demografie
   ============================================================ */
.rpgstats-age-grid,
.rpgstats-demographics-grid {
	display: grid;
	gap: 1.6rem;
}
@media (min-width: 900px) {
	.rpgstats-age-grid,
	.rpgstats-demographics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rpgstats-demo-card,
.rpgstats-age-ranges {
	padding: 1.2rem;
	border: 1px solid var(--md-rule-hair);
}

.rpgstats-age-avg-cards,
.rpgstats-age-dist-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 1px;
	background: var(--md-rule-hair);
	border: 1px solid var(--md-rule-hair);
}
.rpgstats-age-avg-card,
.rpgstats-age-dist-card {
	display: grid;
	gap: .25rem;
	padding: .9rem 1rem;
	background: var(--md-scrim-solid);
}
.rpgstats-age-dist { margin-top: 1.6rem; }
.rpgstats-age-dist-card__name {
	font-family: var(--md-f-serif);
	font-size: 1rem;
	letter-spacing: var(--md-ls-display);
	color: var(--md-ink);
}
.rpgstats-age-dist-card__avg {
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-bright);
}
.rpgstats-age-dist-card__count,
.rpgstats-age-avg-card__icon {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

.rpgstats-age-range-bars { display: grid; gap: 1.1rem; }
.rpgstats-age-range__header,
.rpgstats-gender-bar__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem .8rem;
	margin-bottom: .35rem;
	font-size: var(--md-t-micro);
	color: var(--md-ink-dim);
}
.rpgstats-age-range__name,
.rpgstats-gender-bar__name { color: var(--md-ink); }
.rpgstats-age-range__count,
.rpgstats-gender-bar__count {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-faint);
}
.rpgstats-age-range__track,
.rpgstats-gender-bar__track {
	height: var(--rpgstats-bar-h);
	background: var(--md-rule-hair);
}
.rpgstats-age-range__fill,
.rpgstats-gender-bar__fill {
	width: calc(var(--percentage, 0) * 1%);
	max-width: 100%;
	height: 100%;
	background: var(--md-ink-dim);
	transition: width var(--md-dur) var(--md-ease);
}
.rpgstats-age-range__desc {
	display: block;
	margin-top: .3rem;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* Die Geschlechterbalken teilen die Kategorie-Reihe mit dem Donut. */
.rpgstats-gender-bars { display: grid; gap: 1.1rem; }
.rpgstats-gender-bar:nth-child(1) .rpgstats-gender-bar__fill { background: var(--rpgstats-cat-1); }
.rpgstats-gender-bar:nth-child(2) .rpgstats-gender-bar__fill { background: var(--rpgstats-cat-3); }
.rpgstats-gender-bar:nth-child(3) .rpgstats-gender-bar__fill { background: var(--rpgstats-cat-5); }
.rpgstats-gender-bar:nth-child(4) .rpgstats-gender-bar__fill { background: var(--rpgstats-cat-7); }
.rpgstats-gender-bar:nth-child(5) .rpgstats-gender-bar__fill { background: var(--rpgstats-cat-9); }

.rpgstats-age-by-gender {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--md-rule-hair);
}
.rpgstats-age-gender-list { display: grid; gap: .5rem; }
.rpgstats-age-gender-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	font-size: var(--md-t-micro);
	color: var(--md-ink-dim);
}
.rpgstats-age-gender-item__value {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink);
}

/* ============================================================
   Bestenliste
   ============================================================ */
.rpgstats-top3-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6rem;
}
.rpgstats-top3-card {
	padding: 1.2rem;
	border: 1px solid var(--md-rule-hair);
}
.rpgstats-top3-card__title {
	margin-bottom: .9rem;
	font-family: var(--md-f-serif);
	font-size: var(--md-t-head);
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink);
}
.rpgstats-top3-row {
	display: grid;
	grid-template-columns: 1.4rem 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: .7rem;
	padding: .55rem 0;
	border-top: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
}
.rpgstats-top3-row:first-child { border-top: 0; }
.rpgstats-top3-rank {
	font-family: var(--md-f-serif);
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-faint);
}
.rpgstats-top3-row:first-child .rpgstats-top3-rank { color: var(--md-ink-bright); }
.rpgstats-top3-avatar {
	width: 26px; height: 26px;
	object-fit: cover;
	padding: 2px;
	border: 1px solid var(--md-rule-hair);
	filter: var(--md-photo-filter);
}
.rpgstats-top3-icon { text-align: center; }
.rpgstats-top3-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--md-f-serif);
	font-size: 1rem;
	letter-spacing: var(--md-ls-display);
	color: var(--md-ink);
}
.rpgstats-top3-name:hover { color: var(--md-accent-soft); }
.rpgstats-top3-value {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-dim);
}

/* ============================================================
   Statistik im Profil
   ============================================================ */
.rpgstats-profile {
	padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
	border-bottom: 1px solid var(--md-rule-hair);
}
.rpgstats-profile .rpgstats-section { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.rpgstats-profile .rpgstats-section:first-of-type { margin-top: 1.2rem; }
.rpgstats-profile .md-head { margin-bottom: 1rem; }

/* ============================================================
   Schmale Schirme
   ============================================================ */
@media (max-width: 760px) {
	.rpgstats-charbar { grid-template-columns: 28px minmax(0, 1fr) auto; }
	.rpgstats-charbar .rpgstats-bar__track { grid-column: 1 / -1; }
	.rpgstats-vbars { height: 10rem; }
	.rpgstats-vbar__value { display: none; }
	.rpgstats-table thead { display: none; }
	.rpgstats-table,
	.rpgstats-table tbody,
	.rpgstats-table tr,
	.rpgstats-table td { display: block; width: 100%; }
	.rpgstats-table tbody tr {
		padding: .8rem 0;
		border-bottom: 1px solid var(--md-rule-hair);
	}
	.rpgstats-table tbody td { padding: .1rem 0; border-bottom: 0; }
	.rpgstats-table td.rpgstats-char-list { display: flex; }
}