/**
 * Fight Simulator — streak, injury and nickname markers on a ranking row.
 *
 * Deliberately the same rhythm as Championship Manager's `.cm-rankings-subtitle`
 * and Federation Manager's `.fedman-rankings-office`, so a wrestler carrying
 * several of them reads as one stack rather than three competing ideas.
 *
 * Specificity, never the override keyword. Where a rule has to win, it wins by
 * carrying an ancestor.
 * The ladder can render inside a wpForo page, whose `#wpforo #wpforo-wrap`
 * scoping is more specific than a bare class, so the badge rules carry a
 * `.fs-wrestler-info` ancestor to match it.
 */

.fs-rankings-streak,
.fs-rankings-injury {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
	margin-left: 6px;
	line-height: 1;
}

.fs-rankings-icon {
	width: 13px;
	height: 13px;
	display: block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * The shapes live here rather than in the markup because Fight Simulator runs
 * the name HTML through `wp_kses_post()`, which strips `<svg>` entirely. The
 * mask takes its colour from `background-color: currentColor` above, so the
 * hot / cold / severity colours still reach the glyph.
 */
.fs-icon-flame {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0S3.5 4 3.5 8.5a4.5 4.5 0 0 0 9 0C12.5 6 10 4.5 10 4.5s.5 2-1 3c0 0 .5-4-1-7.5z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0S3.5 4 3.5 8.5a4.5 4.5 0 0 0 9 0C12.5 6 10 4.5 10 4.5s.5 2-1 3c0 0 .5-4-1-7.5z"/></svg>');
}

.fs-icon-snowflake {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.25 0h1.5v4.19l1.72-1.72 1.06 1.06-2.78 2.78v1.03l.9-.52 3.8-2.2.75 1.3-3.63 2.1 2.35.63-.39 1.45-3.2-.86-.9.52.9.52 3.2-.86.39 1.45-2.35.63 3.63 2.1-.75 1.3-3.8-2.2-.9-.52v1.03l2.78 2.78-1.06 1.06-1.72-1.72V16h-1.5v-4.19l-1.72 1.72-1.06-1.06 2.78-2.78V8.66l-.9.52-3.8 2.2-.75-1.3 3.63-2.1-2.35-.63.39-1.45 3.2.86.9-.52-.9-.52-3.2.86-.39-1.45 2.35-.63-3.63-2.1.75-1.3 3.8 2.2.9.52V7.31L4.47 4.53l1.06-1.06 1.72 1.72z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.25 0h1.5v4.19l1.72-1.72 1.06 1.06-2.78 2.78v1.03l.9-.52 3.8-2.2.75 1.3-3.63 2.1 2.35.63-.39 1.45-3.2-.86-.9.52.9.52 3.2-.86.39 1.45-2.35.63 3.63 2.1-.75 1.3-3.8-2.2-.9-.52v1.03l2.78 2.78-1.06 1.06-1.72-1.72V16h-1.5v-4.19l-1.72 1.72-1.06-1.06 2.78-2.78V8.66l-.9.52-3.8 2.2-.75-1.3 3.63-2.1-2.35-.63.39-1.45 3.2.86.9-.52-.9-.52-3.2.86-.39-1.45 2.35-.63-3.63-2.1.75-1.3 3.8 2.2.9.52V7.31L4.47 4.53l1.06-1.06 1.72 1.72z"/></svg>');
}

.fs-icon-injury {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.6 1.4a3.3 3.3 0 0 1 4.7 4.7l-2.2 2.2-4.7-4.7zM6.3 4.7l4.7 4.7-2.2 2.2-4.7-4.7zM3.4 7.6l4.7 4.7-2.2 2.2a3.3 3.3 0 0 1-4.7-4.7z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.6 1.4a3.3 3.3 0 0 1 4.7 4.7l-2.2 2.2-4.7-4.7zM6.3 4.7l4.7 4.7-2.2 2.2-4.7-4.7zM3.4 7.6l4.7 4.7-2.2 2.2a3.3 3.3 0 0 1-4.7-4.7z"/></svg>');
}

/* Hot: a winning run. Cold: a losing one. */
.fs-rankings-streak.is-hot {
	color: var(--csds-scarlet);
}

.fs-rankings-streak.is-cold {
	color: var(--csds-ink-muted);
}

.fs-rankings-streak-count {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/*
 * Injury marks are muted rather than alarming — the ladder is a standings
 * table, not a medical chart, and a red cross beside a name outranks the name.
 */
.fs-rankings-injury.is-minor {
	color: var(--csds-gold);
}

.fs-rankings-injury.is-severe {
	color: var(--csds-crimson);
}

/*
 * The nickname sits under the name, matching the office line's size and
 * leading, in italics because it is what somebody is called rather than a
 * fact about them.
 */
.fs-rankings-nickname {
	display: block;
	font-size: 12px;
	line-height: 1.2;
	font-style: italic;
	color: var(--csds-ink-muted);
}

/*
 * Inside Championship Manager's wrapper the sub-lines take a 24px indent to
 * clear the belt icon, so this one does too — otherwise a champion's nickname
 * would start left of their titles.
 */
.cm-rankings-champion-wrap .fs-rankings-nickname {
	margin-left: 24px;
}

/* Visible to screen readers only. The badges carry a title attribute for
   pointer users, which assistive technology does not reliably announce. */
.fs-rankings-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * wpForo scopes its own table styles under `#wpforo #wpforo-wrap`, which beats
 * a bare class. These repeat the rules that matter with an ancestor that wins
 * on specificity rather than by overriding.
 */
#wpforo #wpforo-wrap .fs-wrestler-info .fs-rankings-streak,
#wpforo #wpforo-wrap .fs-wrestler-info .fs-rankings-injury {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	line-height: 1;
}

#wpforo #wpforo-wrap .fs-wrestler-info .fs-rankings-nickname {
	display: block;
	font-size: 12px;
	font-style: italic;
}

@media (prefers-color-scheme: dark) {
	.fs-rankings-nickname {
		color: var(--csds-ink-muted);
	}
}
