/*
 * Ringside shared components — The Crown Ledger.
 *
 * One component system serves the block and Elementor renderers. Its surfaces
 * read as championship registers and premium event-programme plates: ruled,
 * numbered, angular and independent of the host theme's page scaffolding.
 */

:root {
	color-scheme: dark;
	--sfw-base: #070914;
	--sfw-panel: #111526;
	--sfw-panel-raised: #181d33;
	--sfw-panel2: var(--sfw-panel-raised);
	--sfw-ink: #f5f1e7;
	--sfw-muted: #9aa2ba;
	--sfw-line: #2b324d;
	--sfw-gold: #f2c866;
	--sfw-violet: #725cff;
	--sfw-cyan: #38d6c7;
	--sfw-win: #49d17d;
	--sfw-glass: rgba(7, 9, 20, 0.88);
	--sfw-accent: var(--sfw-gold);
	--sfw-display: "Criteria CF ExtraBold", Impact, sans-serif;
	--sfw-interface: "Space Grotesk", Arial, sans-serif;
	--sfw-radius: 2px;
	--sfw-control-radius: 4px;
	--sfw-cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
	--sfw-shadow: 6px 6px 0 color-mix(in srgb, var(--sfw-violet) 12%, transparent);
}

:root.sfw-light {
	color-scheme: light;
	--wp--preset--color--base: #f2eee3;
	--wp--preset--color--panel: #fffdf7;
	--wp--preset--color--panel-2: #e8e1d2;
	--wp--preset--color--ink: #171827;
	--wp--preset--color--muted: #686e82;
	--wp--preset--color--line: #d3c9b8;
	--wp--preset--color--gold: #9b6a08;
	--wp--preset--color--accent: #5941df;
	--wp--preset--color--cyan: #087f76;
	--wp--preset--color--win: #187846;
	--wp--preset--color--glass: rgba(242, 238, 227, 0.92);
	--wp--preset--color--glass-2: rgba(255, 253, 247, 0.92);
	--wp--preset--color--edge: #d3c9b8;
	--sfw-base: #f2eee3;
	--sfw-panel: #fffdf7;
	--sfw-panel-raised: #e8e1d2;
	--sfw-panel2: var(--sfw-panel-raised);
	--sfw-ink: #171827;
	--sfw-muted: #686e82;
	--sfw-line: #d3c9b8;
	--sfw-gold: #9b6a08;
	--sfw-violet: #5941df;
	--sfw-cyan: #087f76;
	--sfw-win: #187846;
	--sfw-glass: rgba(242, 238, 227, 0.92);
	--sfw-shadow: 6px 6px 0 color-mix(in srgb, var(--sfw-violet) 9%, transparent);
}

::selection {
	background: var(--sfw-violet);
	color: var(--sfw-ink);
}

:where([class^="sfw-"], [class*=" sfw-"]):not(html):not(body),
:where([class^="sfw-"], [class*=" sfw-"]):not(html):not(body) * {
	box-sizing: border-box;
}

:where([class^="sfw-"], [class*=" sfw-"]):not(html):not(body) {
	font-family: var(--sfw-interface);
	font-size: 15px;
	line-height: 1.62;
}

:where(.sfw-btn, .sfw-pill, .sfw-mode, .sfw-filter-search, .sfw-filter-nation, .sfw-pick-opt) {
	font: inherit;
}

:where(.sfw-btn, .sfw-pill, .sfw-mode, .sfw-filter-search, .sfw-filter-nation, .sfw-pick-opt, [class^="sfw-"] a, [class*=" sfw-"] a):focus-visible {
	outline: 2px solid var(--sfw-cyan);
	outline-offset: 3px;
}

:where(.sfw-btn, .sfw-champ, .sfw-ecard, .sfw-bkcard, .sfw-bk-champ):focus-visible {
	box-shadow: inset 0 0 0 2px var(--sfw-cyan);
}

.sfw-grid,
.sfw-ecards,
.sfw-matchcard,
.sfw-bk,
.sfw-mycard {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.sfw-empty,
.sfw-noresults {
	display: block;
	margin: 13px 0 0;
	padding: 22px 0;
	color: var(--sfw-muted);
	font-size: 13px;
	letter-spacing: 0.02em;
}
.sfw-empty[hidden],
.sfw-noresults[hidden] { display: none !important; }

/* ------------------------------------------------------------------ atoms */

.sfw-i { width: 14px; height: 14px; flex: 0 0 auto; }
.sfw-i--xs { width: 11px; height: 11px; }
.sfw-i--sm { width: 13px; height: 13px; }
.sfw-i--xl { width: 42px; height: 42px; }
.sfw-i--hot { color: var(--sfw-cyan); }
.sfw-i--champ { color: var(--sfw-gold); }

.sfw-face {
	display: block;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	object-fit: cover;
	object-position: 50% 12%;
	background: var(--sfw-panel-raised);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
}
.sfw-face--xs { width: 26px; height: 26px; }
.sfw-face--sm { width: 32px; height: 32px; }
.sfw-face--md { width: 44px; height: 44px; }
.sfw-face--lg { width: 84px; height: 84px; }
.sfw-face--xl { width: 120px; height: 120px; border-color: var(--sfw-gold); }
.sfw-face--mono {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sfw-muted);
	font-family: var(--sfw-display);
	font-size: 15px;
	letter-spacing: 0.04em;
}
.sfw-face--lg.sfw-face--mono { font-size: 26px; }
.sfw-face--xl.sfw-face--mono { font-size: 38px; }

.sfw-nation,
.sfw-chip,
.sfw-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sfw-nation {
	padding: 3px 7px;
	color: var(--sfw-muted);
	background: var(--sfw-panel-raised);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-control-radius);
}

.sfw-chip {
	gap: 5px;
	padding: 4px 9px;
	color: var(--sfw-muted);
	border: 1px solid var(--sfw-line);
	border-radius: 999px;
	text-decoration: none;
}
.sfw-chip--champ,
.sfw-chip--coin { color: var(--sfw-gold); border-color: color-mix(in srgb, var(--sfw-gold) 55%, var(--sfw-line)); }
.sfw-chip--rank { color: var(--sfw-ink); }
.sfw-chip--label,
.sfw-chip--streak { color: var(--sfw-cyan); border-color: color-mix(in srgb, var(--sfw-cyan) 50%, var(--sfw-line)); }

.sfw-record {
	display: inline-flex;
	gap: 5px;
	font-variant-numeric: tabular-nums;
}
.sfw-record > span {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	min-width: 40px;
	padding: 4px 8px;
	border-radius: var(--sfw-radius);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}
.sfw-record-w { background: var(--sfw-win); color: var(--sfw-base); }
.sfw-record-l { background: var(--sfw-panel-raised); color: var(--sfw-muted); border: 1px solid var(--sfw-line); }
.sfw-record-d { color: var(--sfw-muted); border: 1px dashed var(--sfw-line); }
.sfw-record-w::after,
.sfw-record-l::after,
.sfw-record-d::after {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.72;
}
.sfw-record-w::after { content: "W"; }
.sfw-record-l::after { content: "L"; }
.sfw-record-d::after { content: "D"; }

.sfw-badge {
	gap: 6px;
	padding: 4px 10px;
	color: var(--sfw-muted);
	border: 1px solid var(--sfw-line);
	border-radius: 999px;
}
.sfw-badge.is-live { color: var(--sfw-ink); background: var(--sfw-violet); border-color: var(--sfw-violet); }
.sfw-badge.is-upcoming { color: var(--sfw-cyan); border-color: color-mix(in srgb, var(--sfw-cyan) 45%, var(--sfw-line)); }
.sfw-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: sfw-signal 1.6s steps(2, end) infinite;
}
@keyframes sfw-signal { 50% { opacity: 0.38; } }

.sfw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	color: var(--sfw-base) !important;
	background: var(--sfw-gold);
	border: 1px solid var(--sfw-gold);
	border-radius: var(--sfw-radius);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.sfw-btn:hover {
	color: var(--sfw-ink) !important;
	background: var(--sfw-violet);
	border-color: var(--sfw-violet);
	transform: translate(-2px, -2px);
}

.sfw-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	color: var(--sfw-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.sfw-meta-row > span { display: inline-flex; align-items: center; gap: 7px; }
.sfw-meta-row a { color: inherit; }

/* ----------------------------------------------------------- counter rail */

.sfw-el-counters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	border-block: 1px solid var(--sfw-line);
}
.sfw-el-counter {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 86px;
	flex-direction: column;
	justify-content: center;
	padding: 14px 18px 12px;
	border-left: 1px solid var(--sfw-line);
}
.sfw-el-counter:last-child { border-right: 1px solid var(--sfw-line); }
.sfw-el-counter::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 42%;
	height: 2px;
	background: var(--sfw-gold);
}
.sfw-el-counter:nth-child(3n + 2)::before { background: var(--sfw-violet); }
.sfw-el-counter:nth-child(3n + 3)::before { background: var(--sfw-cyan); }
.sfw-el-counter-n {
	margin-bottom: 5px;
	color: var(--sfw-ink);
	font-family: var(--sfw-interface);
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 0.92;
	letter-spacing: -0.02em;
}
.sfw-el-counter-l {
	color: var(--sfw-muted);
	font-size: 9px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- ledger tables */

.sfw-rankings,
.sfw-lb,
.sfw-rfull-scroll {
	max-width: 100%;
	overflow-x: auto;
}
.sfw-rankings table,
.sfw-lb table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.62;
	font-variant-numeric: tabular-nums;
}
.sfw-rankings th,
.sfw-lb th {
	padding: 9px 10px;
	color: var(--sfw-muted);
	background: var(--sfw-panel-raised);
	border-block: 1px solid var(--sfw-line);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
}
.sfw-rankings td,
.sfw-lb td {
	padding: 10px;
	color: var(--sfw-ink);
	border-bottom: 1px solid var(--sfw-line);
}
.sfw-rankings tbody tr,
.sfw-lb tbody tr { transition: background-color 140ms ease; }
.sfw-rankings tbody tr:hover,
.sfw-lb tbody tr:hover { background: color-mix(in srgb, var(--sfw-violet) 10%, transparent); }
.sfw-rankings tr.is-champ td { background: color-mix(in srgb, var(--sfw-gold) 8%, transparent); }
.sfw-rankings tr.is-champ td:first-child { box-shadow: inset 2px 0 var(--sfw-gold); }
.sfw-rankings tr.is-champ .sfw-name b { color: var(--sfw-gold); }
.sfw-col-rank { width: 44px; color: var(--sfw-muted); font-weight: 700; }
.sfw-col-rec { font-weight: 700; white-space: nowrap; }
.sfw-col-streak { white-space: nowrap; }
.sfw-col-name a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.sfw-name { display: flex; min-width: 0; flex-direction: column; }
.sfw-name b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sfw-name i { color: var(--sfw-muted); font-size: 11px; font-style: normal; }

/* --------------------------------------------------------------- marquee */

.sfw-ticker {
	display: flex;
	max-width: 100%;
	overflow-x: auto;
	gap: 0;
	padding-inline: max(16px, calc((100% - 1280px) / 2));
	background: var(--sfw-panel);
	border-block: 1px solid var(--sfw-gold);
	scrollbar-width: none;
}
.sfw-ticker::-webkit-scrollbar { display: none; }
.sfw-tick {
	display: flex;
	align-items: center;
	min-height: 54px;
	gap: 12px;
	flex: 0 0 auto;
	padding: 8px 18px;
	border-right: 1px solid var(--sfw-line);
	text-decoration: none;
	transition: background-color 140ms ease;
}
.sfw-tick:first-child { border-left: 1px solid var(--sfw-line); }
.sfw-tick:hover { background: color-mix(in srgb, var(--sfw-violet) 12%, transparent); }
.sfw-tick--live { box-shadow: inset 0 -2px var(--sfw-cyan); }
.sfw-tick--scheduled { box-shadow: inset 0 -2px var(--sfw-violet); }
.sfw-tick--final { box-shadow: inset 0 -2px var(--sfw-gold); }
.sfw-tick-no {
	color: var(--sfw-cyan);
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	white-space: nowrap;
}
.sfw-tick-line { display: flex; flex-direction: column; line-height: 1.35; }
.sfw-tick-line b { color: var(--sfw-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sfw-tick-line i { color: var(--sfw-muted); font-size: 10px; font-style: normal; white-space: nowrap; }

/* ---------------------------------------------- programme / matchup bill */

.sfw-next,
.sfw-ehero,
.sfw-bhero {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	background:
		linear-gradient(90deg, var(--sfw-gold) 0 96px, transparent 96px) top left / 100% 2px no-repeat,
		linear-gradient(90deg, transparent 0 66%, color-mix(in srgb, var(--sfw-violet) 16%, transparent) 66%) bottom right / 100% 44% no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	box-shadow: var(--sfw-shadow);
}
.sfw-next > *,
.sfw-ehero > *,
.sfw-bhero > * { position: relative; z-index: 1; }
.sfw-next-top,
.sfw-ehero-top { display: flex; align-items: center; gap: 14px; }
.sfw-next-no {
	flex: 1 1 auto;
	color: var(--sfw-gold);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.sfw-ehero-no {
	color: var(--sfw-cyan);
	font-family: var(--sfw-interface);
	font-size: 30px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.sfw-ehero-titles {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
}
.sfw-ehero-title {
	color: var(--sfw-ink);
	font-family: var(--sfw-display);
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
.sfw-ehero-sub { color: var(--sfw-muted); font-size: 12px; }

.sfw-next-match,
.sfw-ehero > .sfw-match,
.sfw-bhero > .sfw-match {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	background: var(--sfw-base);
	border-block: 1px solid var(--sfw-line);
}
.sfw-next-side,
.sfw-match-side {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 18px 12px;
	color: inherit;
	background: var(--sfw-panel-raised);
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.sfw-next-side:first-child,
.sfw-match-side:first-child { border-left: 1px solid var(--sfw-line); }
.sfw-next-side:last-child,
.sfw-match-side:last-child { border-right: 1px solid var(--sfw-line); }
.sfw-next-side:hover,
.sfw-match-side:hover { background: color-mix(in srgb, var(--sfw-violet) 14%, var(--sfw-panel-raised)); }
.sfw-next-side b,
.sfw-match-name b {
	display: block;
	color: var(--sfw-ink);
	font-family: var(--sfw-display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}
.sfw-next-side i,
.sfw-match-name i { display: block; color: var(--sfw-muted); font-size: 11px; font-style: normal; }
.sfw-next-rec,
.sfw-match-rec { color: var(--sfw-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sfw-match-side.is-winner { box-shadow: inset 0 -2px var(--sfw-win); }
.sfw-match-side.is-loser { opacity: 0.68; }
.sfw-match-side--a { border-top: 2px solid var(--sfw-cyan); }
.sfw-match-side--b { border-top: 2px solid var(--sfw-gold); }
.sfw-match-winchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--sfw-win);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.sfw-next-mid,
.sfw-ehero > .sfw-match > .sfw-match-mid,
.sfw-bhero > .sfw-match > .sfw-match-mid {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 6px;
	color: var(--sfw-ink);
	background: var(--sfw-violet);
	text-align: center;
}
.sfw-next-vs,
.sfw-ehero > .sfw-match .sfw-match-vs,
.sfw-bhero > .sfw-match .sfw-match-vs {
	color: var(--sfw-ink);
	font-family: var(--sfw-display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.sfw-next-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--sfw-ink);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.sfw-next-count b {
	color: var(--sfw-ink);
	font-family: var(--sfw-interface);
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 0.9;
}
.sfw-ehero > .sfw-match .sfw-match-method,
.sfw-bhero > .sfw-match .sfw-match-method { color: var(--sfw-ink); font-size: 12px; }
.sfw-match-sub { color: var(--sfw-muted); font-size: 11px; font-weight: 700; }
.sfw-next .sfw-meta-row,
.sfw-ehero .sfw-meta-row,
.sfw-bhero .sfw-meta-row { padding-top: 14px; border-top: 1px solid var(--sfw-line); }
.sfw-next .sfw-btn,
.sfw-ehero .sfw-btn,
.sfw-bhero .sfw-btn { align-self: flex-start; }

/* ----------------------------------------------------- championship ledger */

.sfw-champs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	counter-reset: sfw-title;
}
.sfw-champ {
	position: relative;
	display: flex;
	overflow: hidden;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 22px 16px 18px;
	color: inherit;
	background:
		linear-gradient(90deg, var(--sfw-gold) 0 54%, var(--sfw-line) 54%) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	text-align: left;
	text-decoration: none;
	counter-increment: sfw-title;
	transition: border-color 160ms ease, transform 160ms ease;
}
.sfw-champ::before {
	content: counter(sfw-title, decimal-leading-zero);
	position: absolute;
	top: 10px;
	right: 14px;
	color: var(--sfw-line);
	font-family: var(--sfw-interface);
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.sfw-champ:hover { border-color: var(--sfw-gold); transform: translate(-2px, -2px); }
.sfw-champ-media { position: relative; margin: 4px 0 10px; }
.sfw-champ .sfw-face--lg { border-color: color-mix(in srgb, var(--sfw-gold) 65%, var(--sfw-line)); }
.sfw-champ-crown { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; color: var(--sfw-gold); }
.sfw-champ-div { color: var(--sfw-gold); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sfw-champ-name {
	color: var(--sfw-ink);
	font-family: var(--sfw-display);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}
.sfw-champ-nick { color: var(--sfw-muted); font-size: 11px; }
.sfw-champ-rec { margin-top: 3px; color: var(--sfw-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- record books */

.sfw-leaders { display: flex; flex-direction: column; gap: 0; }
.sfw-leaders-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--sfw-gold);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}
.sfw-leader { padding: 11px 0; border-bottom: 1px solid var(--sfw-line); }
.sfw-leader:first-of-type { border-top: 1px solid var(--sfw-line); }
.sfw-leader-line { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
.sfw-leader-n {
	width: 24px;
	flex: 0 0 24px;
	color: var(--sfw-cyan);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.sfw-leader-line a { overflow: hidden; color: var(--sfw-ink); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.sfw-leader-line a:hover { color: var(--sfw-cyan); }
.sfw-leader-div { flex: 0 0 auto; color: var(--sfw-muted); font-size: 10px; }
.sfw-leader-value { margin-left: auto; flex: 0 0 auto; color: var(--sfw-ink); font-family: var(--sfw-interface); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sfw-leader-track { display: block; overflow: hidden; height: 3px; margin: 8px 0 0 34px; background: var(--sfw-line); }
.sfw-leader-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--sfw-violet), var(--sfw-cyan)); }

/* --------------------------------------------------------- wrestler ledger */

.sfw-statline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sfw-stat {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px 14px;
	background: var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	box-shadow: inset 0 2px var(--sfw-violet);
	text-align: left;
}
.sfw-stat:nth-child(3n + 2) { box-shadow: inset 0 2px var(--sfw-cyan); }
.sfw-stat:nth-child(3n + 3) { box-shadow: inset 0 2px var(--sfw-gold); }
.sfw-stat-i { width: 17px; height: 17px; margin-bottom: 4px; color: var(--sfw-cyan); }
.sfw-stat b { color: var(--sfw-ink); font-family: var(--sfw-interface); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.sfw-stat span { color: var(--sfw-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }

.sfw-bio { display: flex; flex-direction: column; }
.sfw-bio-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 43px;
	padding: 9px 0;
	border-bottom: 1px solid var(--sfw-line);
	font-size: 12px;
}
.sfw-bio-row:first-child { border-top: 1px solid var(--sfw-line); }
.sfw-bio-row .sfw-i,
.sfw-bio-row span { color: var(--sfw-muted); }
.sfw-bio-row b { margin-left: auto; color: var(--sfw-ink); font-weight: 700; text-align: right; }

.sfw-frec { display: flex; flex-direction: column; gap: 13px; }
.sfw-frec-top { display: flex; flex-wrap: wrap; gap: 7px; }
.sfw-frec-chips { display: flex; align-items: center; gap: 12px; }
.sfw-frec-chips .sfw-record > span { min-width: 40px; padding: 5px 9px; font-size: 14px; }
.sfw-frec-pinfalls { color: var(--sfw-muted); font-size: 11px; font-weight: 700; }
.sfw-frec-bar {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) 44px;
	align-items: center;
	gap: 10px;
	font-size: 11px;
}
.sfw-frec-bar-label { color: var(--sfw-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sfw-frec-bar .sfw-leader-track { margin: 0; }
.sfw-frec-bar b { color: var(--sfw-ink); font-variant-numeric: tabular-nums; text-align: right; }

.sfw-hist { display: flex; flex-direction: column; border-top: 1px solid var(--sfw-line); }
.sfw-hist-row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding: 10px 8px;
	border-bottom: 1px solid var(--sfw-line);
	text-decoration: none;
	transition: background-color 140ms ease;
}
.sfw-hist-row:hover { background: color-mix(in srgb, var(--sfw-violet) 9%, transparent); }
.sfw-hist-row.is-upcoming { box-shadow: inset 2px 0 var(--sfw-cyan); }
.sfw-hist-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	font-size: 11px;
	font-weight: 700;
}
.sfw-hist-badge.is-win { color: var(--sfw-base); background: var(--sfw-win); border-color: var(--sfw-win); }
.sfw-hist-badge.is-loss { color: var(--sfw-muted); background: var(--sfw-panel-raised); }
.sfw-hist-badge.is-draw { color: var(--sfw-muted); border-style: dashed; }
.sfw-hist-badge.is-next { color: var(--sfw-cyan); border-color: var(--sfw-cyan); }
.sfw-hist-opp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sfw-hist-opp b { display: block; overflow: hidden; color: var(--sfw-ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sfw-hist-opp i { color: var(--sfw-muted); font-size: 10px; font-style: normal; }
.sfw-hist-how { color: var(--sfw-ink); font-size: 11px; font-weight: 700; }
.sfw-hist-event { min-width: 0; color: var(--sfw-ink); font-size: 11px; text-align: right; }
.sfw-hist-event i { display: block; color: var(--sfw-muted); font-size: 10px; font-style: normal; }

/* ------------------------------------------------------- contender register */

.sfw-rfull { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sfw-rfull-div {
	min-width: 0;
	padding: 18px;
	background:
		linear-gradient(90deg, var(--sfw-violet) 0 72px, var(--sfw-line) 72px) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
}
.sfw-rfull-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sfw-line);
}
.sfw-rfull-title b { display: block; color: var(--sfw-ink); font-family: var(--sfw-display); font-size: 21px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.sfw-rfull-title span { color: var(--sfw-muted); font-size: 10px; }
.sfw-rfull-champ { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sfw-rfull-champ span { display: flex; min-width: 0; flex-direction: column; }
.sfw-rfull-champ b { display: inline-flex; align-items: center; gap: 6px; color: var(--sfw-gold); font-size: 12px; font-weight: 700; }
.sfw-rfull-champ i { color: var(--sfw-muted); font-size: 10px; font-style: normal; }
.sfw-rfull-champ .sfw-i--champ { width: 13px; height: 13px; }

/* ------------------------------------------------------------- roster index */

.sfw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 18px; }
.sfw-filter-search,
.sfw-filter-nation {
	min-width: 176px;
	min-height: 44px;
	padding: 9px 12px;
	color: var(--sfw-ink);
	background: var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-control-radius);
	font-size: 12px;
}
.sfw-filter-search::placeholder { color: var(--sfw-muted); opacity: 1; }
.sfw-filter-search:focus,
.sfw-filter-nation:focus { border-color: var(--sfw-cyan); }
.sfw-pills,
.sfw-sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.sfw-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 7px 12px;
	color: var(--sfw-muted);
	background: var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.sfw-pill:hover { color: var(--sfw-ink); border-color: var(--sfw-cyan); }
.sfw-pill.is-active { color: var(--sfw-ink); background: var(--sfw-violet); border-color: var(--sfw-violet); }
.sfw-filter-count { margin-left: auto; color: var(--sfw-muted); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; text-transform: uppercase; }

.sfw-grid-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sfw-card {
	position: relative;
	display: flex;
	overflow: hidden;
	min-width: 0;
	flex-direction: column;
	background: var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	content-visibility: auto;
	contain-intrinsic-size: 360px;
	transition: border-color 160ms ease, transform 160ms ease;
}
.sfw-card:hover { border-color: var(--sfw-violet); transform: translate(-2px, -2px); }
.sfw-card.is-champ { box-shadow: inset 0 2px var(--sfw-gold); }
.sfw-card[hidden] { display: none; }
.sfw-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--sfw-panel-raised);
	border-bottom: 1px solid var(--sfw-line);
}
.sfw-card-media::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38%; height: 2px; background: var(--sfw-cyan); pointer-events: none; }
.sfw-card-media img,
.sfw-card-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 220ms ease; }
.sfw-card:hover .sfw-card-media img { transform: scale(1.02); }
.sfw-card-photo.sfw-face--mono { height: 100%; border: 0; border-radius: 0; font-size: 36px; }
.sfw-card-rank,
.sfw-card-nation { position: absolute; top: 10px; z-index: 1; background: var(--sfw-glass); }
.sfw-card-rank { left: 10px; }
.sfw-card-nation { right: 10px; }
.sfw-card-body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 16px; }
.sfw-card-name { color: var(--sfw-ink); font-family: var(--sfw-display); font-size: 20px; font-weight: 800; line-height: 1.05; text-decoration: none; text-transform: uppercase; }
.sfw-card-name:hover { color: var(--sfw-cyan); }
.sfw-card-meta { color: var(--sfw-muted); font-size: 11px; line-height: 1.5; }
.sfw-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--sfw-line); }
.sfw-card-stats span { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sfw-card-stats span + span::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 0; width: 1px; background: var(--sfw-line); }
.sfw-card-stats .sfw-i { margin-bottom: 2px; color: var(--sfw-cyan); }
.sfw-card-stats b { color: var(--sfw-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sfw-card-stats i { color: var(--sfw-muted); font-size: 8px; font-style: normal; letter-spacing: 0.13em; text-transform: uppercase; }

/* ---------------------------------------------------------- programme cards */

.sfw-ecards-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 12px;
	color: var(--sfw-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}
.sfw-ecards-head::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--sfw-line); }
.sfw-ecards-head:first-child { margin-top: 0; }
.sfw-ecards-head.is-live { color: var(--sfw-cyan); }
.sfw-ecards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sfw-ecards-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfw-ecards-grid--two .sfw-ecard-media { aspect-ratio: 16 / 6.5; }
.sfw-ecard {
	position: relative;
	display: flex;
	overflow: hidden;
	min-width: 0;
	flex-direction: column;
	color: inherit;
	background: var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease;
}
.sfw-ecard:hover { border-color: var(--sfw-cyan); transform: translate(-2px, -2px); }
.sfw-ecard-media { position: relative; overflow: hidden; aspect-ratio: 16 / 8; background: var(--sfw-panel-raised); border-bottom: 1px solid var(--sfw-line); }
.sfw-ecard-media::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46%; height: 2px; background: var(--sfw-violet); }
.sfw-ecard-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.sfw-ecard:hover .sfw-ecard-media img { transform: scale(1.02); }
.sfw-ecard-media--empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sfw-line); }
.sfw-ecard-media .sfw-badge { position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--sfw-glass); }
.sfw-ecard-media .sfw-badge.is-live { background: var(--sfw-violet); }
.sfw-ecard-no { position: absolute; bottom: 6px; left: 12px; z-index: 1; color: var(--sfw-ink); font-family: var(--sfw-interface); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.sfw-ecard-body { display: flex; flex-direction: column; gap: 6px; padding: 15px; }
.sfw-ecard-body > b { color: var(--sfw-ink); font-family: var(--sfw-display); font-size: 19px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.sfw-ecard-headline { color: var(--sfw-muted); font-size: 11px; }
.sfw-ecard-headline--tba { color: var(--sfw-muted); font-style: italic; font-weight: 400; }
.sfw-ecard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin-top: 3px; color: var(--sfw-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.sfw-ecard-meta,
.sfw-ecard-meta em { font-style: normal; }
.sfw-ecard-meta em { display: inline-flex; align-items: center; gap: 5px; }
.sfw-ecard-meta .sfw-i { margin-right: 3px; vertical-align: -1px; }

/* ----------------------------------------------------------- numbered bouts */

.sfw-fightcard { display: flex; flex-direction: column; gap: 8px; }
.sfw-fightcard > .sfw-match {
	position: relative;
	padding: 15px 16px;
	background:
		linear-gradient(90deg, var(--sfw-violet) 0 44px, transparent 44px) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
}
.sfw-fightcard > .sfw-match.is-title { background: linear-gradient(90deg, var(--sfw-gold) 0 82px, transparent 82px) top left / 100% 2px no-repeat, var(--sfw-panel); }
.sfw-match-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.sfw-match-row { display: flex; align-items: center; gap: 12px; }
.sfw-match-f { display: flex; min-width: 0; flex: 1 1 0; align-items: center; gap: 11px; text-decoration: none; }
.sfw-match-f.is-rev { flex-direction: row-reverse; text-align: right; }
.sfw-match-f.is-rev .sfw-match-f-info { align-items: flex-end; }
.sfw-match-f-info { display: flex; min-width: 0; flex-direction: column; }
.sfw-match-f-info b { overflow: hidden; max-width: 100%; color: var(--sfw-ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sfw-match-f-info span { color: var(--sfw-muted); font-size: 10px; }
.sfw-match-f.is-winner b { color: var(--sfw-win); }
.sfw-match-f.is-loser { opacity: 0.62; }
.sfw-match-w { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; flex: 0 0 auto; color: var(--sfw-base); background: var(--sfw-win); border-radius: var(--sfw-radius); font-size: 10px; font-weight: 700; }
.sfw-fightcard .sfw-match-mid { display: flex; min-width: 82px; flex: 0 0 82px; flex-direction: column; align-items: center; gap: 2px; padding-inline: 7px; text-align: center; text-decoration: none; }
.sfw-fightcard .sfw-match-vs { color: var(--sfw-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sfw-fightcard .sfw-match-method { color: var(--sfw-cyan); font-family: var(--sfw-display); font-size: 16px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.sfw-fightcard .sfw-match-mid span { color: var(--sfw-muted); font-size: 9px; font-weight: 700; }
.sfw-fightcard .sfw-match-mid:hover .sfw-match-vs { color: var(--sfw-ink); }

/* ---------------------------------------------------------- tale of tape */

.sfw-tape {
	padding: 18px;
	background:
		linear-gradient(90deg, var(--sfw-cyan) 0 72px, var(--sfw-line) 72px) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
}
.sfw-tape-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--sfw-line); }
.sfw-tape-head a { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.sfw-tape-head b { overflow: hidden; color: var(--sfw-ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sfw-tape-head > span { color: var(--sfw-cyan); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; }
.sfw-tape-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--sfw-line); }
.sfw-tape-row:last-child { border-bottom: 0; }
.sfw-tape-label { color: var(--sfw-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }
.sfw-tape-val { color: var(--sfw-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sfw-tape-val.is-rev { text-align: right; }
.sfw-tape-val.is-adv { color: var(--sfw-cyan); }

/* ---------------------------------------------------------- bracket paths */

.sfw-bk-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 8px; }
.sfw-bk-grid { display: grid; min-width: 760px; align-items: stretch; gap: 20px; }
.sfw-bk-grid--3 { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.sfw-bk-grid--2 { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.sfw-bk-grid--1 { grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 480px; }
.sfw-bk-round { position: relative; display: flex; height: auto; flex-direction: column; justify-content: space-around; gap: 14px; padding-top: 46px; }
.sfw-bk-round::before { content: ""; position: absolute; top: 33px; right: -11px; left: -11px; height: 1px; background: var(--sfw-line); }
.sfw-bk-round-name { position: absolute; top: 8px; right: 0; left: 0; color: var(--sfw-gold); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; }
.sfw-bk-round--champ { justify-content: center; }
.sfw-bk-match { position: relative; background: var(--sfw-panel); border: 1px solid var(--sfw-line); border-radius: var(--sfw-radius); box-shadow: 4px 4px 0 color-mix(in srgb, var(--sfw-violet) 10%, transparent); }
.sfw-bk-match::after { content: ""; position: absolute; top: 50%; right: -21px; width: 20px; height: 1px; background: var(--sfw-violet); }
.sfw-bk-round:last-child .sfw-bk-match::after { display: none; }
.sfw-bk-match.is-decided { border-color: color-mix(in srgb, var(--sfw-win) 55%, var(--sfw-line)); }
.sfw-bk-slot { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 11px; border-bottom: 1px solid var(--sfw-line); text-decoration: none; }
.sfw-bk-match > .sfw-bk-slot:nth-of-type(2) { border-bottom: 0; }
.sfw-bk-name { overflow: hidden; color: var(--sfw-ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sfw-bk-rec { margin-left: auto; flex: 0 0 auto; color: var(--sfw-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.sfw-bk-slot.is-winner { background: color-mix(in srgb, var(--sfw-win) 9%, transparent); }
.sfw-bk-slot.is-winner .sfw-bk-name,
.sfw-bk-slot.is-winner .sfw-i { color: var(--sfw-win); }
.sfw-bk-slot.is-loser { opacity: 0.58; }
.sfw-bk-slot.is-tbd .sfw-bk-name { color: var(--sfw-muted); font-style: italic; }
.sfw-bk-how {
	position: absolute;
	top: 50%;
	right: 8px;
	padding: 2px 7px;
	transform: translateY(-50%);
	color: var(--sfw-win);
	background: var(--sfw-panel-raised);
	border: 1px solid var(--sfw-line);
	border-radius: 999px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sfw-bk-champ {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 22px 16px;
	color: inherit;
	background:
		linear-gradient(90deg, var(--sfw-gold) 0 58%, transparent 58%) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid color-mix(in srgb, var(--sfw-gold) 50%, var(--sfw-line));
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	text-align: left;
	text-decoration: none;
}
.sfw-bk-champ b { color: var(--sfw-ink); font-family: var(--sfw-display); font-size: 20px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.sfw-bk-champ i { color: var(--sfw-muted); font-size: 11px; }
.sfw-bk-champ.is-tbd b { color: var(--sfw-muted); font-size: 16px; font-style: italic; }
.sfw-bk-trophy { width: 26px; height: 26px; color: var(--sfw-gold); }

.sfw-bkcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sfw-bkcard {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 9px;
	padding: 18px;
	color: inherit;
	background:
		linear-gradient(90deg, var(--sfw-violet) 0 62px, transparent 62px) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease;
}
.sfw-bkcard:hover { border-color: var(--sfw-violet); transform: translate(-2px, -2px); }
.sfw-bkcard-top { display: flex; align-items: center; justify-content: space-between; color: var(--sfw-cyan); }
.sfw-bkcard-title { color: var(--sfw-ink); font-family: var(--sfw-display); font-size: 20px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.sfw-bkcard-meta { color: var(--sfw-muted); font-size: 11px; }
.sfw-bkcard-progress { display: block; overflow: hidden; height: 3px; background: var(--sfw-line); }
.sfw-bkcard-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--sfw-violet), var(--sfw-cyan)); }
.sfw-bkcard-champ { display: inline-flex; align-items: center; gap: 7px; color: var(--sfw-gold); font-size: 11px; font-weight: 700; }
.sfw-bkcard-champ.is-tbd { color: var(--sfw-muted); font-weight: 400; }

/* ------------------------------------------------------------- fantasy desk */

.sfw-pickem { display: flex; flex-direction: column; gap: 10px; }
.sfw-pick-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background:
		linear-gradient(90deg, var(--sfw-cyan) 0 58px, transparent 58px) top left / 100% 2px no-repeat,
		var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
}
.sfw-pick-head .sfw-i { width: 18px; height: 18px; color: var(--sfw-cyan); }
.sfw-pick-head b { display: block; color: var(--sfw-ink); font-family: var(--sfw-display); font-size: 19px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.sfw-pick-head i { color: var(--sfw-muted); font-size: 11px; font-style: normal; }
.sfw-pick-head span:first-of-type { flex: 1 1 auto; }
.sfw-pick-score { flex: 0 0 auto; color: var(--sfw-gold); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfw-pick-login { padding: 18px; background: var(--sfw-panel); border: 1px dashed var(--sfw-line); border-radius: var(--sfw-radius); text-align: center; }
.sfw-pick-login p { margin: 0 0 12px; color: var(--sfw-muted); font-size: 12px; }
.sfw-pick { padding: 14px 16px; background: var(--sfw-panel); border: 1px solid var(--sfw-line); border-radius: var(--sfw-radius); }
.sfw-pick.is-saving { opacity: 0.6; pointer-events: none; }
.sfw-pick-total { margin-left: auto; color: var(--sfw-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.sfw-pick-row { display: flex; align-items: stretch; gap: 8px; }
.sfw-pick-vs { align-self: center; flex: 0 0 auto; color: var(--sfw-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sfw-pick-opt {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 54px;
	flex: 1 1 0;
	align-items: center;
	gap: 9px;
	padding: 9px 11px 13px;
	color: inherit;
	background: var(--sfw-panel-raised);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-control-radius);
	text-align: left;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}
.sfw-pick-opt:disabled { cursor: default; }
.sfw-pick-opt:not(:disabled):hover { border-color: var(--sfw-cyan); }
.sfw-pick-opt.is-chosen { background: color-mix(in srgb, var(--sfw-violet) 13%, var(--sfw-panel-raised)); border-color: var(--sfw-violet); box-shadow: inset 0 0 0 1px var(--sfw-violet); }
.sfw-pick-opt.is-winner { border-color: var(--sfw-win); }
.sfw-pick-opt.is-loser { opacity: 0.62; }
.sfw-pick-opt .sfw-face { width: 34px; height: 34px; }
.sfw-pick-opt-info { min-width: 0; }
.sfw-pick-opt-info b { display: block; overflow: hidden; color: var(--sfw-ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sfw-pick-opt-info i { display: block; overflow: hidden; color: var(--sfw-muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.sfw-pick-pct { margin-left: auto; flex: 0 0 auto; color: var(--sfw-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sfw-pick-pct.is-hidden { visibility: hidden; }
.sfw-pick-mark { position: absolute; top: -7px; right: -7px; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--sfw-ink); background: var(--sfw-violet); border: 1px solid var(--sfw-panel); border-radius: var(--sfw-radius); }
.sfw-pick-opt.is-chosen .sfw-pick-mark { display: inline-flex; }
.sfw-pick-bar { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; height: 3px; background: var(--sfw-line); }
.sfw-pick-bar.is-hidden { visibility: hidden; }
.sfw-pick-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sfw-violet), var(--sfw-cyan)); transition: width 300ms ease; }
.sfw-pick-note { display: block; margin-top: 9px; color: var(--sfw-muted); font-size: 11px; }
.sfw-pick-note:empty { display: none; }
.sfw-pick-note.is-correct { color: var(--sfw-win); }
.sfw-pick-note.is-wrong { color: var(--sfw-cyan); }

.sfw-lb .sfw-col-name { display: table-cell; }
.sfw-lb .sfw-col-name i { color: var(--sfw-muted); font-size: 10px; }
.sfw-lb-ava {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	margin-right: 9px;
	color: var(--sfw-muted);
	background: var(--sfw-panel-raised);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}
.sfw-lb tr.is-me td { background: color-mix(in srgb, var(--sfw-violet) 9%, transparent); }
.sfw-lb-pts { color: var(--sfw-gold); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- theme switch */

.sfw-mode-wrap { display: inline-flex; }
.sfw-mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0;
	color: var(--sfw-muted);
	background: var(--sfw-panel);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-control-radius);
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.sfw-mode:hover { color: var(--sfw-ink); background: var(--sfw-panel-raised); border-color: var(--sfw-cyan); }
.sfw-mode svg { width: 17px; height: 17px; }
.sfw-mode .sfw-mode-sun { display: block; }
.sfw-mode .sfw-mode-moon { display: none; }
:root.sfw-light .sfw-mode .sfw-mode-sun { display: none; }
:root.sfw-light .sfw-mode .sfw-mode-moon { display: block; }

/* ------------------------------------------------------- arena ledger field */

.sfw-arena {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.sfw-arena::before {
	content: "";
	position: absolute;
	inset: 12% -8% 8%;
	background:
		repeating-linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, var(--sfw-line) 70%, transparent) 46px 47px),
		linear-gradient(90deg, transparent 0 14%, color-mix(in srgb, var(--sfw-violet) 13%, transparent) 14% 36%, transparent 36% 72%, color-mix(in srgb, var(--sfw-cyan) 10%, transparent) 72% 88%, transparent 88%);
	clip-path: polygon(0 10%, 94% 0, 100% 88%, 8% 100%);
	opacity: 0.72;
}
.sfw-arena::after {
	content: "";
	position: absolute;
	top: 22%;
	right: 4%;
	left: 4%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sfw-gold) 14% 40%, transparent 40% 68%, var(--sfw-violet) 68% 88%, transparent);
}
.sfw-arena-beam {
	position: absolute;
	top: -18%;
	width: 20%;
	height: 112%;
	opacity: 0.14;
	background: linear-gradient(180deg, var(--sfw-cyan), transparent 72%);
	clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
}
.sfw-arena-beam.is-l { left: 9%; transform: rotate(8deg); transform-origin: 50% 0; }
.sfw-arena-beam.is-r { right: 11%; background: linear-gradient(180deg, var(--sfw-violet), transparent 72%); transform: rotate(-9deg); transform-origin: 50% 0; }
.sfw-arena-pulse {
	position: absolute;
	left: 50%;
	width: min(42vw, 560px);
	height: 64px;
	transform: translate(-50%, -50%);
	border: 1px solid color-mix(in srgb, var(--sfw-cyan) 48%, transparent);
	border-radius: var(--sfw-radius);
	clip-path: var(--sfw-cut);
	opacity: 0.13;
}
.sfw-arena-pulse:nth-last-child(3) { top: 61%; width: min(30vw, 390px); }
.sfw-arena-pulse:nth-last-child(2) { top: 69%; width: min(38vw, 490px); border-color: color-mix(in srgb, var(--sfw-violet) 46%, transparent); }
.sfw-arena-pulse:nth-last-child(1) { top: 77%; width: min(46vw, 590px); }

/* ------------------------------------------------------------- light mode */

:root.sfw-light .sfw-card-rank,
:root.sfw-light .sfw-card-nation,
:root.sfw-light .sfw-ecard-media .sfw-badge { background: var(--sfw-glass); }
:root.sfw-light .sfw-badge.is-live,
:root.sfw-light .sfw-pill.is-active,
:root.sfw-light .sfw-pick-mark { color: #fffdf7; }
:root.sfw-light .sfw-match-w,
:root.sfw-light .sfw-hist-badge.is-win,
:root.sfw-light .sfw-record-w { color: #fffdf7; }
:root.sfw-light .wp-block-cover .wp-block-post-title,
:root.sfw-light .wp-block-cover .wp-block-post-title a { color: #f5f1e7 !important; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.sfw-grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sfw-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfw-rfull { grid-template-columns: 1fr; }
	.sfw-next,
	.sfw-ehero,
	.sfw-bhero { padding: 22px; }
	.sfw-ticker { padding-inline: 24px; }
}

@media (max-width: 768px) {
	.sfw-el-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfw-el-counter:nth-child(2) { border-right: 1px solid var(--sfw-line); }
	.sfw-grid-cards,
	.sfw-ecards-grid,
	.sfw-bkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfw-ecards-grid--two .sfw-ecard-media { aspect-ratio: 16 / 8; }
	.sfw-statline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfw-pick-row { flex-direction: column; }
	.sfw-pick-vs { display: none; }
	.sfw-hist-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
	.sfw-hist-event { display: none; }
	.sfw-face--xl { width: 88px; height: 88px; }
	.sfw-ehero-no { font-size: 26px; }
	.sfw-next,
	.sfw-ehero,
	.sfw-bhero { padding: 20px; }
	.sfw-next-match,
	.sfw-ehero > .sfw-match,
	.sfw-bhero > .sfw-match { grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); }
	.sfw-next-side,
	.sfw-match-side { padding-inline: 8px; }
	.sfw-next-side b,
	.sfw-match-name b { font-size: 17px; }
	.sfw-ticker { padding-inline: 24px; }
	.sfw-next .sfw-btn,
	.sfw-ehero .sfw-btn,
	.sfw-bhero .sfw-btn { align-self: stretch; }
}

@media (max-width: 480px) {
	.sfw-grid-cards,
	.sfw-ecards-grid,
	.sfw-bkcards,
	.sfw-champs { grid-template-columns: 1fr; }
	.sfw-el-counter { min-height: 76px; padding-inline: 14px; }
	.sfw-el-counter-n { font-size: 30px; }
	.sfw-next,
	.sfw-ehero,
	.sfw-bhero { gap: 15px; padding: 16px; }
	.sfw-next-match,
	.sfw-ehero > .sfw-match,
	.sfw-bhero > .sfw-match { grid-template-columns: 1fr; }
	.sfw-next-side,
	.sfw-match-side { border-inline: 1px solid var(--sfw-line); }
	.sfw-next-mid,
	.sfw-ehero > .sfw-match > .sfw-match-mid,
	.sfw-bhero > .sfw-match > .sfw-match-mid { min-height: 58px; flex-direction: row; }
	.sfw-ehero-top { align-items: flex-start; }
	.sfw-ehero-no { width: 100%; }
	.sfw-rfull-div,
	.sfw-tape { padding: 15px; }
	.sfw-rfull-head { align-items: flex-start; flex-direction: column; }
	.sfw-match-row { flex-wrap: wrap; }
	.sfw-fightcard .sfw-match-mid {
		order: -1;
		width: 100%;
		min-width: 100%;
		flex: 1 0 100%;
		flex-direction: row;
		justify-content: center;
		gap: 8px;
	}
	.sfw-rankings th:nth-child(n + 4),
	.sfw-rankings td:nth-child(n + 4) { display: none; }
	.sfw-rankings.is-compact th,
	.sfw-rankings.is-compact td { display: table-cell; }
	.sfw-filters { flex-direction: column; align-items: stretch; }
	.sfw-filter-search,
	.sfw-filter-nation { width: 100%; min-width: 0; }
	.sfw-filter-count { margin-left: 0; }
	.sfw-pill { min-height: 44px; }
	.sfw-ticker { padding-inline: 16px; }
	.sfw-tick { min-height: 52px; padding-inline: 14px; }
	.sfw-tape-head { align-items: flex-start; }
	.sfw-tape-head a { flex-direction: column; align-items: flex-start; }
	.sfw-bio-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.sfw-live-dot { animation: none !important; }
	.sfw-card,
	.sfw-card-media img,
	.sfw-champ,
	.sfw-ecard,
	.sfw-ecard-media img,
	.sfw-bkcard,
	.sfw-btn,
	.sfw-pill,
	.sfw-mode,
	.sfw-tick,
	.sfw-pick-fill,
	.sfw-pick-opt,
	.sfw-rankings tbody tr,
	.sfw-lb tbody tr,
	.sfw-hist-row { transition: none; }
}