.fftt-cp-wrapper {
	--fftt-cp-accent: #0a1eaf;
	--fftt-cp-accent-tint: #e8eafc;
	margin: 1.5em 0;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1a1a1a;
}

.fftt-cp-banner {
	display: flex;
	align-items: center;
	gap: 0.6em;
	background: var(--fftt-cp-accent);
	border-radius: 8px 8px 0 0;
	padding: 0.9em 1.25em;
	box-shadow: 0 1px 2px rgba(10, 20, 50, 0.06);
}

.fftt-cp-banner-logo {
	/* The FFTT division badge is a white graphic on a transparent
	   background, meant to sit directly on the (colored) banner. */
	width: 38px;
	height: 38px;
	object-fit: contain;
	flex-shrink: 0;
}

.fftt-cp-banner-label {
	color: #fff;
	font-weight: 600;
	font-size: 1.15em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.fftt-cp-table-wrap {
	margin-bottom: 1.5em;
	padding: 8px;
	border-radius: 0 0 10px 10px;
	background: var(--fftt-cp-accent-tint);
	box-shadow: 0 1px 2px rgba(10, 20, 50, 0.06);
}

.fftt-cp-poule-title {
	margin: 0;
	padding: 0.5em 0.5em 0.6em;
	font-size: 1.05em;
	font-weight: 600;
	color: var(--fftt-cp-accent);
}

.fftt-cp-table-scroll {
	overflow-x: auto;
	border-radius: 6px;
	background: #fff;
	margin: 0;
	padding: 0;
}

.fftt-cp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
	margin: 0;
}

.fftt-cp-table th,
.fftt-cp-table td {
	padding: 0.65em 0.85em;
	text-align: center;
	/* !important: some themes style plain table/th/td borders with higher
	   specificity than a single class selector can beat on its own. */
	border-width: 0 !important;
	border-style: solid !important;
	border-color: transparent !important;
	border-bottom-width: 1px !important;
	border-bottom-color: #eceef7 !important;
}

.fftt-cp-table th:nth-child(2),
.fftt-cp-table td:nth-child(2) {
	text-align: left;
}

.fftt-cp-table thead th {
	background: var(--fftt-cp-accent-tint);
	color: var(--fftt-cp-accent);
	font-weight: 600;
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-bottom-width: 2px !important;
	border-bottom-color: var(--fftt-cp-accent) !important;
}

.fftt-cp-table tbody tr:last-child td {
	border-bottom-width: 0 !important;
}

.fftt-cp-row:nth-child(even) {
	background: #fafbff;
}

.fftt-cp-row--selected {
	background: var(--fftt-cp-accent-tint) !important;
	font-weight: 600;
	box-shadow: inset 4px 0 0 var(--fftt-cp-accent);
}

.fftt-cp-club {
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.fftt-cp-club-logo,
.fftt-cp-card-logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e2e4f0;
	flex-shrink: 0;
}

.fftt-cp-card-logo {
	width: 36px;
	height: 36px;
}

.fftt-cp-club-name {
	font-weight: 500;
}

/* -- mobile "+" row toggle (columns beyond POS/CLUBS/PTS), hidden by default -- */

.fftt-cp-toggle-th,
.fftt-cp-row-toggle-cell {
	display: none;
}

/* !important throughout: this is a plain <button>, and some themes set a
   branded default button background/color that would otherwise win. */
.fftt-cp-row-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px;
	height: 26px;
	border-radius: 50% !important;
	border: 1px solid var(--fftt-cp-accent) !important;
	background: #fff !important;
	color: var(--fftt-cp-accent) !important;
	font-weight: 700;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
}

.fftt-cp-row-detail-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	gap: 0.5em;
	margin: 0.4em 0;
	padding: 0;
}

.fftt-cp-row-detail-list > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15em;
	background: #f6f7fc;
	border-radius: 6px;
	padding: 0.4em 0.3em;
}

.fftt-cp-row-detail-list dt {
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #777;
	font-weight: 600;
}

.fftt-cp-row-detail-list dd {
	margin: 0;
	font-weight: 600;
}

.fftt-cp-matches-kicker {
	display: none;
	margin: 0 0 0.3em;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #999;
}

.fftt-cp-tab-short {
	display: none;
}

.fftt-cp-tabs {
	display: flex;
	gap: 0.4em;
	margin-bottom: 1em;
	border-bottom: 2px solid var(--fftt-cp-accent-tint);
}

.fftt-cp-tab {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.6em 0.2em;
	margin-bottom: -2px;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	color: #777;
}

.fftt-cp-tab:hover {
	color: var(--fftt-cp-accent);
}

.fftt-cp-tab--active {
	color: var(--fftt-cp-accent);
	border-bottom-color: var(--fftt-cp-accent);
}

.fftt-cp-round + .fftt-cp-round {
	margin-top: 1.5em;
}

.fftt-cp-round-title {
	margin: 0 0 0.6em;
	font-size: 1em;
	font-weight: 600;
	color: var(--fftt-cp-accent);
}

.fftt-cp-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75em;
	align-items: stretch;
}

.fftt-cp-card {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	border: 1px solid var(--fftt-cp-accent-tint);
	border-radius: 8px;
	padding: 0.75em 0.9em 0.85em;
	background: var(--fftt-cp-accent-tint);
	box-shadow: 0 1px 2px rgba(10, 20, 50, 0.06);
}

/* Played matches (a result is in) get a neutral grey card instead of the
   accent tint, to visually set them apart from upcoming matches. */
.fftt-cp-card--played {
	background: #eef0f3;
	border-color: #e2e4ea;
}

/*
 * Badges live in a normal-flow top bar (not absolutely positioned over the
 * team row below), so the row of team names/logos is never at risk of
 * being covered — whether the top-left side has 0, 1 or 2 badges stacked.
 */
.fftt-cp-card-topbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: flex-start;
	gap: 0.5em;
}

.fftt-cp-card-top-left {
	display: flex;
}

.fftt-cp-card-top-center {
	display: flex;
	justify-content: center;
}

.fftt-cp-card-top-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35em;
}

.fftt-cp-card-teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5em 0.75em;
}

.fftt-cp-card-badge {
	font-size: 0.7em;
	font-weight: 700;
	color: var(--fftt-cp-accent);
	background: var(--fftt-cp-accent-tint);
	border-radius: 4px;
	padding: 0.1em 0.5em;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.fftt-cp-card-detail-icon {
	display: flex;
	color: var(--fftt-cp-accent);
	opacity: 0.55;
}

.fftt-cp-card--clickable:hover .fftt-cp-card-detail-icon,
.fftt-cp-card--clickable:focus-visible .fftt-cp-card-detail-icon {
	opacity: 1;
}

.fftt-cp-card-team {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-width: 0;
}

/*
 * Team logos always sit next to the score/badge in the middle, names always
 * sit toward the card's outer edges — true for both home and away, selected
 * club or not, so a given club's logo doesn't jump sides between matches.
 */
.fftt-cp-card-team--home {
	justify-content: flex-end;
	text-align: right;
}

.fftt-cp-card-team--away {
	justify-content: flex-start;
	text-align: left;
}

.fftt-cp-card-team-name {
	font-weight: 500;
	/* Kept on one line at all times (never cropped): frontend.js measures the
	   longest name across the list and sets this custom property so every
	   card shares one font-size small enough for it to fit. */
	font-size: var(--fftt-cp-card-name-size, 0.92em);
	min-width: 0;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
}

.fftt-cp-card-team--selected .fftt-cp-card-logo {
	border-color: var(--fftt-cp-accent);
	border-width: 2px;
}

/*
 * The match's actual winner is always bolded once a score is in. When the
 * selected club won, its name also turns green (bold + green). When it
 * lost, the winner just stays bold black — the selected club's name (the
 * loser) turns red instead, without bold.
 */
.fftt-cp-card-team--winner .fftt-cp-card-team-name {
	font-weight: 700;
}

.fftt-cp-card-team--win .fftt-cp-card-team-name {
	color: #1a7f37;
}

.fftt-cp-card-team--loss .fftt-cp-card-team-name {
	color: #c5221f;
	font-weight: 400;
}

/*
 * The space between the two logos stays the same whether a "VS" placeholder
 * or a score is showing: this wrapper reserves a fixed minimum width for
 * either, instead of letting the grid's auto column follow content width.
 */
.fftt-cp-card-result {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
}

.fftt-cp-score {
	font-weight: 700;
	font-size: 1.15em;
	color: var(--fftt-cp-accent);
	white-space: nowrap;
}

.fftt-cp-card-vs {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e5342b;
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fftt-cp-badge {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.fftt-cp-badge--home {
	background: var(--fftt-cp-accent);
	color: #fff;
}

.fftt-cp-badge--away {
	background: #eceef7;
	color: #444;
}

.fftt-cp-empty {
	font-style: italic;
	color: #666;
	padding: 1em 1.25em;
}

.fftt-cp-card--clickable {
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fftt-cp-card--clickable:hover,
.fftt-cp-card--clickable:focus-visible {
	border-color: var(--fftt-cp-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	outline: none;
}

/* -- match detail modal -- */

.fftt-cp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 34, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	z-index: 100000;
}

.fftt-cp-modal {
	--fftt-cp-accent: #0a1eaf;
	--fftt-cp-accent-tint: #e8eafc;
	position: relative;
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 710px;
	max-height: 85vh;
	overflow-y: auto;
	/* The modal is appended to document.body, outside .fftt-cp-wrapper, so
	   it doesn't inherit a theme's own base font-size on body (not always
	   16px in production) — without its own, every em-based size here would
	   quietly scale with it. */
	font-size: 16px;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1a1a1a;
}

/* !important throughout: this is a plain <button>, and some themes set a
   branded default button background/color that would otherwise win. */
.fftt-cp-modal-close {
	position: absolute;
	top: 0.6em;
	right: 0.7em;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px;
	height: 32px;
	border: none !important;
	border-radius: 50% !important;
	background: #f0f1f8 !important;
	box-shadow: none !important;
	color: #333 !important;
	font-size: 1.3em;
	line-height: 1;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
	z-index: 1;
	appearance: none;
	-webkit-appearance: none;
}

.fftt-cp-modal-close:hover {
	background: #e2e4f0 !important;
}

.fftt-cp-modal-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75em;
	background: var(--fftt-cp-accent-tint);
	padding: 1.6em 1em 1.2em;
	border-radius: 10px 10px 0 0;
}

.fftt-cp-modal-team {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-width: 0;
}

.fftt-cp-modal-header .fftt-cp-modal-team:first-child {
	justify-content: flex-end;
	text-align: right;
}

.fftt-cp-modal-team-name {
	font-weight: 600;
	font-size: 0.95em;
	overflow-wrap: anywhere;
}

.fftt-cp-modal-logo {
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e2e4f0;
	flex-shrink: 0;
}

.fftt-cp-modal-score {
	font-weight: 700;
	font-size: 1.3em;
	color: var(--fftt-cp-accent);
	white-space: nowrap;
}

.fftt-cp-modal-body {
	padding: 1.2em 1.4em 1.5em;
}

.fftt-cp-modal-loading,
.fftt-cp-modal-empty {
	font-style: italic;
	color: #666;
	text-align: center;
	margin: 1em 0;
}

.fftt-cp-modal-heading {
	margin: 0 0 0.6em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fftt-cp-accent);
}

.fftt-cp-modal-section + .fftt-cp-modal-section {
	margin-top: 1.4em;
}

.fftt-cp-modal-players,
.fftt-cp-modal-games {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.fftt-cp-modal-player-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0.6em;
	background: #f8f9fc;
	border-radius: 6px;
	padding: 0.5em 0.75em;
	font-size: 0.9em;
}

.fftt-cp-modal-game {
	background: #f8f9fc;
	border-radius: 6px;
	padding: 0.5em 0.75em;
	font-size: 0.9em;
}

.fftt-cp-modal-game-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto;
	align-items: center;
	gap: 0.6em;
}

.fftt-cp-modal-game-row--clickable {
	cursor: pointer;
}

.fftt-cp-modal-game-row--clickable:hover .fftt-cp-modal-game-toggle {
	color: var(--fftt-cp-accent) !important;
}

/* !important throughout: this is a plain <button>, and some themes set a
   branded default button background/color that would otherwise win. */
.fftt-cp-modal-game-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px;
	height: 24px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #999 !important;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	flex-shrink: 0;
	transition: transform 0.15s ease, color 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.fftt-cp-modal-game-toggle--open {
	color: var(--fftt-cp-accent) !important;
	transform: rotate(180deg);
}

.fftt-cp-modal-game-detail {
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px solid #e2e4f0;
}

.fftt-cp-modal-game-detail[hidden] {
	display: none;
}

.fftt-cp-modal-sets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em;
}

.fftt-cp-modal-set {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	min-width: 42px;
}

.fftt-cp-modal-set-number {
	font-size: 0.75em;
	font-weight: 600;
	color: #999;
}

.fftt-cp-modal-set-scores {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	border: 1px solid #e2e4f0;
	border-radius: 6px;
	padding: 0.3em 0.65em;
	min-width: 34px;
}

.fftt-cp-modal-set-score {
	font-size: 0.9em;
	padding: 0.15em 0;
}

.fftt-cp-modal-set-score--winner {
	font-weight: 700;
	color: var(--fftt-cp-accent);
}

.fftt-cp-modal-set-score--empty {
	color: #ccc;
}

.fftt-cp-modal-set-divider {
	width: 100%;
	height: 1px;
	background: #e2e4f0;
}

/*
 * A quiet "A1 / X1" reminder of which row is which, shaped like a set card
 * (same number-spacer + box structure) so it lines up as a row header to
 * the left of set 1, but unboxed and muted so it doesn't read as a set.
 */
.fftt-cp-modal-sets-legend .fftt-cp-modal-set-number {
	visibility: hidden;
}

.fftt-cp-modal-sets-legend-box {
	background: transparent;
	border-color: transparent;
	padding: 0.3em 0.3em;
}

.fftt-cp-modal-sets-legend-item {
	/* Same font-size/line-height/padding as .fftt-cp-modal-set-score so its
	   divider lines up exactly with the real set cards' — only color/weight
	   differ to keep it visually muted. */
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #aaa;
	padding: 0.15em 0;
}

.fftt-cp-modal-sets-legend .fftt-cp-modal-set-divider {
	background: #ccc;
}

/*
 * The A-side label (A1, A2…) always hugs the row's left edge and the X-side
 * label (X1, X2…) always hugs its right edge — a fixed vertical line for the
 * labels no matter how long each player's name is (the name grows toward
 * the middle instead of pushing the label around).
 */
.fftt-cp-modal-player-a,
.fftt-cp-modal-game-player--a {
	display: flex;
	align-items: center;
	gap: 0.35em;
	justify-content: flex-start;
	text-align: left;
}

.fftt-cp-modal-player-b,
.fftt-cp-modal-game-player--b {
	display: flex;
	align-items: center;
	gap: 0.35em;
	justify-content: flex-end;
	text-align: right;
}

/*
 * A double game's row stacks its 2 players one per line instead of joining
 * them with "et" on one line — same label+name shape per line as a single
 * player (reuses .fftt-cp-modal-game-player--a/--b), just wrapped in a
 * column instead of packed into the row directly.
 */
.fftt-cp-modal-game-player-double {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.fftt-cp-modal-game-player-double--a { align-items: flex-start; }
.fftt-cp-modal-game-player-double--b { align-items: flex-end; }

.fftt-cp-modal-player-label {
	display: inline-block;
	width: 28px;
	background: var(--fftt-cp-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.75em;
	border-radius: 4px;
	padding: 0.1em 0;
	text-align: center;
	box-sizing: border-box;
	flex-shrink: 0;
}

/* Same "A1" numbering as in singles, just recolored orange — the only cue
   that this player is part of a double rather than a separate labeling
   scheme. */
.fftt-cp-modal-player-label--double {
	background: #e07b1f;
}

/* Same orange for the score and the winning side's name/set-scores, so the
   whole double row (and its expanded set detail) reads as one color story
   instead of switching back to blue partway through. */
.fftt-cp-modal-game--double .fftt-cp-modal-game-score,
.fftt-cp-modal-game--double .fftt-cp-modal-game-player--winner,
.fftt-cp-modal-game--double .fftt-cp-modal-set-score--winner {
	color: #e07b1f;
}

.fftt-cp-modal-player-info {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.fftt-cp-modal-player-a .fftt-cp-modal-player-info {
	align-items: flex-start;
}

.fftt-cp-modal-player-b .fftt-cp-modal-player-info {
	align-items: flex-end;
}

.fftt-cp-modal-player-name {
	font-size: 1.05em;
	font-weight: 600;
	color: #1a1a1a;
}

.fftt-cp-modal-player-rank {
	font-size: 0.75em;
	font-weight: 400;
	color: #777;
}

.fftt-cp-modal-game-player--winner {
	font-weight: 700;
	color: var(--fftt-cp-accent);
}

.fftt-cp-modal-game-score {
	font-weight: 700;
	color: var(--fftt-cp-accent);
	text-align: center;
	white-space: nowrap;
}

/* ---- Mobile view of the match detail ----
   The desktop layout (pairings side by side, accordion rows) doesn't fit a
   phone, so frontend.js builds a second, dedicated view into the same modal
   body — each team's players grouped in one card, then one card per game
   with both players and their 5 set boxes always visible. Hidden by
   default; the ≤ 480px block below swaps it in for the desktop view. */
.fftt-cp-modal-view--mobile { display: none; }

.fftt-cp-mm-count {
	margin: 0 0 0.9em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75em;
	font-weight: 600;
	color: #8b90a3;
}

.fftt-cp-mm-team {
	list-style: none;
	margin: 0 0 0.8em;
	padding: 0;
	background: #fff;
	border: 1px solid #e2e4f0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(10, 20, 50, 0.06);
}

.fftt-cp-mm-player {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.6em 0.8em;
}

.fftt-cp-mm-player + .fftt-cp-mm-player { border-top: 1px solid #e2e4f0; }

.fftt-cp-mm-pinfo {
	min-width: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.fftt-cp-mm-pname { font-weight: 700; font-size: 0.95em; }
.fftt-cp-mm-prank { font-size: 0.75em; color: #666; }

.fftt-cp-mm-game {
	background: #fff;
	border: 1px solid #e2e4f0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(10, 20, 50, 0.06);
}

.fftt-cp-mm-game + .fftt-cp-mm-game { margin-top: 0.6em; }

.fftt-cp-mm-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 0.6em;
}

.fftt-cp-mm-side + .fftt-cp-mm-side { border-top: 1px solid #e2e4f0; }

.fftt-cp-mm-names {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
	font-size: 0.82em;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.fftt-cp-mm-side--winner .fftt-cp-mm-names { font-weight: 700; }
.fftt-cp-mm-name { min-width: 0; }
.fftt-cp-mm-sets { display: flex; gap: 3px; }

.fftt-cp-mm-set {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(22px, 6.2vw, 28px);
	height: clamp(22px, 6.2vw, 28px);
	border-radius: 6px;
	background: #f1f3f9;
	color: #8b90a3;
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
}

.fftt-cp-mm-set--won {
	background: var(--fftt-cp-accent-tint);
	color: var(--fftt-cp-accent);
	font-weight: 700;
}

.fftt-cp-mm-set--empty {
	background: none;
	color: #c4c8d8;
}

/* Doubles keep the same orange as the desktop view for their winning sets,
   so they still read as a double at a glance. */
.fftt-cp-mm-game--double .fftt-cp-mm-set--won {
	background: #fdebd9;
	color: #e07b1f;
}

@media (max-width: 480px) {
	.fftt-cp-modal-view--desktop { display: none; }
	.fftt-cp-modal-view--mobile { display: block; }

	.fftt-cp-modal-body {
		background: #f2f3fb;
		padding: 1em 0.6em 1.2em;
	}

	.fftt-cp-modal-header {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.fftt-cp-modal-header .fftt-cp-modal-team:first-child,
	.fftt-cp-modal-team {
		flex-direction: row;
		justify-content: center;
		text-align: left;
	}

	.fftt-cp-modal-score {
		text-align: center;
	}

	.fftt-cp-modal-player-row,
	.fftt-cp-modal-game-row {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 0.2em;
	}

	.fftt-cp-modal-player-a,
	.fftt-cp-modal-player-b,
	.fftt-cp-modal-game-player--a,
	.fftt-cp-modal-game-player--b {
		justify-content: center;
		text-align: center;
	}

	.fftt-cp-modal-player-a .fftt-cp-modal-player-info,
	.fftt-cp-modal-player-b .fftt-cp-modal-player-info {
		align-items: center;
	}

	.fftt-cp-modal-game-player-double--a,
	.fftt-cp-modal-game-player-double--b {
		align-items: center;
	}
}

@media (min-width: 641px) {
	.fftt-cp-row-detail {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.fftt-cp-col-extra {
		display: none;
	}

	.fftt-cp-toggle-th,
	.fftt-cp-row-toggle-cell {
		display: table-cell;
		text-align: center;
	}

	.fftt-cp-table th,
	.fftt-cp-table td {
		padding: 0.55em 0.5em;
		font-size: 0.88em;
	}

	.fftt-cp-table td[data-label="CLUBS"] {
		text-align: left;
	}

	.fftt-cp-row-detail td {
		border-bottom: none;
		padding: 0 0.6em 0.6em;
	}

	.fftt-cp-matches-kicker {
		display: block;
	}

	.fftt-cp-tab-full {
		display: none;
	}

	.fftt-cp-tab-short {
		display: inline;
	}

	.fftt-cp-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.fftt-cp-tab {
		white-space: nowrap;
		font-size: 0.9em;
		flex-shrink: 0;
	}

	.fftt-cp-cards {
		grid-template-columns: 1fr;
	}

	.fftt-cp-card-teams {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.fftt-cp-card-team--home,
	.fftt-cp-card-team--away {
		flex-direction: row;
		justify-content: center;
		text-align: left;
	}
}