/* FF Head-to-Head — Matrix-Styling
 *
 * WICHTIG: Alle Regeln sind mit .ff-h2h-Wrapper geprefixt UND nutzen td./th.
 * als Tag-Selektor, um gegen aggressive Theme-Reset-Styles zu bestehen
 * (z.B. table tbody > tr:nth-child(2n+1) > td aus theme/css/reset.css).
 * Specificity: (0,2,2) statt (0,1,0) der einfachen Klassen.
 */

.ff-h2h .ff-h2h-wrap {
	overflow-x: auto;
	padding: 6px 0 14px;
	-webkit-overflow-scrolling: touch;
}

.ff-h2h .ff-h2h-table {
	border-collapse: separate;
	border-spacing: 2px;
	margin: 0 auto;
	font-variant-numeric: tabular-nums;
}

/* Default-Hintergrund für alle Zellen. KEIN !important — das würde alle
 * spezifischen Zell-Varianten überschatten, weil dieser Selektor (0,3,2)
 * specificity hat. Die Theme-Reset-Regel (0,1,4) wird trotzdem geschlagen,
 * weil unsere Default-Specificity höher ist. */
.ff-h2h table.ff-h2h-table th,
.ff-h2h table.ff-h2h-table td {
	font-weight: 500;
	background: var(--ffui-bg-soft);
	border-radius: 3px;
}

/* Corner: Metrik-Name oben links */
.ff-h2h th.ff-h2h-corner {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--ffui-text-dim);
	padding: 4px 6px;
	text-align: right;
	font-weight: 600;
	background: transparent;
	min-width: 60px;
}

/* Column headers: Team-Logos */
.ff-h2h th.ff-h2h-col-head {
	width: 48px;
	min-width: 48px;
	height: 48px;
	padding: 4px;
	background: var(--ffui-bg-soft);
	text-align: center;
	vertical-align: middle;
}
.ff-h2h th.ff-h2h-col-head img {
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
.ff-h2h .ff-h2h-col-abbrev {
	font-size: 10px;
	font-weight: 700;
	color: var(--ffui-text-mid);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Row headers: Logo + Name links */
.ff-h2h th.ff-h2h-row-head {
	padding: 4px 10px;
	background: var(--ffui-bg-soft);
	min-width: 160px;
	max-width: 220px;
	text-align: left;
	vertical-align: middle;
}
.ff-h2h .ff-h2h-row-head-inner {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ff-h2h .ff-h2h-row-head-inner img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}
.ff-h2h .ff-h2h-row-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ffui-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Zellen: Grundform */
.ff-h2h td.ff-h2h-cell {
	width: 58px;
	min-width: 58px;
	height: 48px;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
	font-weight: 700;
	color: var(--ffui-text);
	cursor: default;
	transition: transform 0.15s ease;
	position: relative;
	padding: 2px;
}
.ff-h2h td.ff-h2h-cell:hover {
	transform: scale(1.08);
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Diagonale (Team gegen sich selbst) — gestreiftes Muster */
.ff-h2h td.ff-h2h-cell--diag {
	background: repeating-linear-gradient(
		45deg,
		#f4ede1,
		#f4ede1 4px,
		#faf6ee 4px,
		#faf6ee 8px
	) !important;
}

/* Leere Paarung (keine Spiele gefunden) */
.ff-h2h td.ff-h2h-cell--empty {
	color: var(--ffui-text-dim) !important;
	background: #fcfaf7 !important;
	font-weight: 400;
}

/* Positive Dominanz: Team i schlägt j → Orange */
.ff-h2h td.ff-h2h-cell--pos {
	background: rgba(224, 118, 69, calc(0.18 + var(--ff-h2h-i, 0) * 0.75)) !important;
	color: var(--ffui-text) !important;
}
/* Bei hoher Intensität weißen Text + Schatten für Lesbarkeit */
.ff-h2h td.ff-h2h-cell--pos[data-i-high="1"] {
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Negative Dominanz: Team i verliert gegen j → Blaugrau */
.ff-h2h td.ff-h2h-cell--neg {
	background: rgba(74, 144, 164, calc(0.18 + var(--ff-h2h-i, 0) * 0.65)) !important;
	color: var(--ffui-text) !important;
}
.ff-h2h td.ff-h2h-cell--neg[data-i-high="1"] {
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Ausgeglichen (0 Differenz) */
.ff-h2h td.ff-h2h-cell--even {
	background: #f0ece0 !important;
	color: var(--ffui-text-mid) !important;
}

/* Zell-Inhalt: Sub-Labels für Bilanz-Aufschlüsselung */
.ff-h2h .ff-h2h-cell-main {
	display: block;
	line-height: 1.1;
	font-size: 14px;
}
.ff-h2h .ff-h2h-cell-sub {
	display: block;
	font-size: 10px;
	font-weight: 500;
	opacity: 0.8;
	margin-top: 1px;
	letter-spacing: 0.3px;
	line-height: 1;
}

/* Farbig getrennte Siege/Niederlagen/Unentschieden in der wins-Metrik */
.ff-h2h .ff-h2h-wld {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.ff-h2h .ff-h2h-wld-w { color: inherit; font-weight: 700; }
.ff-h2h .ff-h2h-wld-sep { opacity: 0.35; font-weight: 500; margin: 0 1px; }
.ff-h2h .ff-h2h-wld-l { color: inherit; font-weight: 700; opacity: 0.6; }
.ff-h2h .ff-h2h-wld-d { color: inherit; font-weight: 500; font-size: 0.85em; opacity: 0.7; margin-left: 2px; }
/* Im weißen Text mehr Kontrast bei Separator */
.ff-h2h td.ff-h2h-cell--pos[data-i-high="1"] .ff-h2h-wld-sep,
.ff-h2h td.ff-h2h-cell--neg[data-i-high="1"] .ff-h2h-wld-sep { opacity: 0.6; }
.ff-h2h td.ff-h2h-cell--pos[data-i-high="1"] .ff-h2h-wld-l,
.ff-h2h td.ff-h2h-cell--neg[data-i-high="1"] .ff-h2h-wld-l { opacity: 0.85; }

/* Legende unterhalb der Matrix */
.ff-h2h .ff-h2h-legend {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin-top: 12px;
	font-size: 11px;
	color: var(--ffui-text-mid);
	flex-wrap: wrap;
}
.ff-h2h .ff-h2h-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ff-h2h .ff-h2h-legend-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.08);
}
.ff-h2h .ff-h2h-legend-swatch--pos { background: rgba(224, 118, 69, 0.75); }
.ff-h2h .ff-h2h-legend-swatch--neg { background: rgba(74, 144, 164, 0.65); }
.ff-h2h .ff-h2h-legend-swatch--even { background: #f0ece0; }

/* Mobile */
@media (max-width: 640px) {
	.ff-h2h th.ff-h2h-col-head,
	.ff-h2h td.ff-h2h-cell {
		width: 44px;
		min-width: 44px;
		height: 40px;
		font-size: 11px;
	}
	.ff-h2h th.ff-h2h-col-head img { max-width: 24px; max-height: 24px; }
	.ff-h2h th.ff-h2h-row-head {
		min-width: 120px;
		padding: 4px 6px;
	}
	.ff-h2h .ff-h2h-row-head-inner img { width: 18px; height: 18px; }
	.ff-h2h .ff-h2h-row-name { font-size: 11px; }
	.ff-h2h .ff-h2h-cell-main { font-size: 12px; }
	.ff-h2h .ff-h2h-cell-sub { font-size: 9px; }
}

/* Achsen-Lesehilfe direkt über der Matrix:
 * "↓ Dieses Team    spielt gegen    diesen Gegner →"
 * Zeigt dem Nutzer wie die Matrix zu lesen ist — kompakt, eine Zeile. */
.ff-h2h .ff-h2h-axes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	margin: 0 auto 10px;
	padding: 8px 14px;
	background: var(--ffui-bg-soft);
	border: 1px solid var(--ffui-border-soft);
	border-radius: 4px;
	font-size: 12px;
	color: var(--ffui-text-mid);
	flex-wrap: wrap;
	max-width: fit-content;
}
.ff-h2h .ff-h2h-axis-row,
.ff-h2h .ff-h2h-axis-col {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--ffui-text);
}
.ff-h2h .ff-h2h-axis-arrow {
	color: var(--ffui-accent);
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
}
.ff-h2h .ff-h2h-axis-sep {
	color: var(--ffui-text-dim);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

/* Title-Tooltip mehrzeilig darstellen — Browser machen das bei \n automatisch.
 * Keine CSS-Regel nötig, aber: title-Attribute werden als native Tooltips
 * gezeigt, die zuverlässig Zeilenumbrüche respektieren. */