/* Kategorieseite (category.php) – baut auf front.css auf */

/* Wettbewerbs-Kopf – Farbschema je Kategorie */
.ri-comp {
	--cat-bg: #0B2A5B;
	--cat-fg: #fff;
	--cat-muted: #A9B8D6;
	--cat-accent: var(--ri-accent);
	padding: 18px var(--ri-pad);
	background: var(--cat-bg);
	color: var(--cat-fg);
}
.ri-comp--laliga {
	--cat-fg: var(--ri-text);
	--cat-muted: var(--ri-muted);
	--cat-accent: #EE3B3B;
	background: linear-gradient(135deg, #fff 0%, #fff 55%, #FDECEC 100%);
	border-bottom: 1px solid var(--ri-line);
}
.ri-comp--ucl {
	--cat-muted: #9FB0E0;
	--cat-accent: #7FD3FF;
	background:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
		radial-gradient(1px 1px at 38% 10%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(1.5px 1.5px at 66% 26%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1px 1px at 86% 14%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(120% 90% at 50% 0%, #1B2B7A 0%, #0A1446 60%, #070E33 100%);
}
.ri-comp--copa { --cat-muted: #E8C6CD; --cat-accent: #E7B94C; background: linear-gradient(180deg, #8E1229 0%, #6A0B1D 100%); }
.ri-comp--transfers { --cat-fg: #0B2A5B; --cat-muted: #7B6A3F; --cat-accent: #B8860B; background: #F7F0DC; border-bottom: 1px solid #EFE4C4; }

.ri-comp-main { display: flex; align-items: center; gap: 14px; }
.ri-comp-logo { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.ri-comp--copa .ri-comp-logo { padding: 8px; box-sizing: border-box; background: #fff; }
.ri-comp-logo--icon { display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: var(--cat-accent); }
.ri-comp--transfers .ri-comp-logo--icon { background: #0B2A5B; color: #E7B94C; }
.ri-comp-logo--icon img { width: 56px; height: 56px; }
.ri-app .ri-comp-title {
	margin: 0;
	color: var(--cat-fg);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-transform: uppercase;
}
.ri-app .ri-comp-sub { margin: 4px 0 0; color: var(--cat-muted); font-size: 14px; font-weight: 600; }

.ri-comp-main > div { flex: 1; min-width: 0; container-type: inline-size; }
/* Titel skaliert mit der freien Breite: längstes Wort ("CHAMPIONS") passt immer in die Spalte */
.ri-app .ri-comp-main .ri-comp-title { font-size: clamp(12px, 13cqi, 22px); letter-spacing: .02em; }
.ri-app .ri-comp-real {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 8px 10px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	color: var(--cat-fg);
}
.ri-comp--laliga .ri-comp-real, .ri-comp--transfers .ri-comp-real { background: #fff; border-color: var(--ri-line); }
.ri-comp-real img { width: 28px; height: 28px; object-fit: contain; }
.ri-comp-real-text { display: flex; flex-direction: column; line-height: 1.2; }
.ri-comp-real-text strong { color: var(--cat-accent); font-size: 15px; font-weight: 800; white-space: nowrap; }
.ri-comp-real-text span { color: var(--cat-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tabs: Farbe des Wettbewerbs */
.ri-category .ri-tabs--3 { grid-template-columns: repeat(3, 1fr); }
.ri-category .ri-tab.is-active { border-bottom-color: var(--ri-accent); }

/* News-Blättern */
.ri-pager { display: flex; gap: 10px; justify-content: center; padding: 20px var(--ri-pad) 28px; }
.ri-app .ri-pager-btn {
	flex: 1;
	max-width: 220px;
	padding: 14px 16px;
	background: #0B2A5B;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}
.ri-app .ri-pager-btn--ghost { background: none; border: 1px solid var(--ri-line); color: var(--ri-text); }
.ri-empty-state { padding: 32px var(--ri-pad); color: var(--ri-muted); }

/* Tabelle */
.ri-table-wrap { overflow-x: auto; }
.ri-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.ri-table th {
	padding: 10px 6px;
	border-bottom: 1px solid var(--ri-line);
	color: var(--ri-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}
.ri-table td { padding: 10px 6px; border-bottom: 1px solid var(--ri-line); text-align: center; }
.ri-table th:first-child, .ri-table td:first-child { padding-left: var(--ri-pad); }
.ri-table th:last-child, .ri-table td:last-child { padding-right: var(--ri-pad); }
.ri-table .ri-table-team { text-align: left; }
.ri-table td.ri-table-team { font-weight: 600; white-space: nowrap; }
.ri-table-team-inner { display: flex; align-items: center; gap: 8px; }
.ri-table-team img { width: 22px; height: 22px; object-fit: contain; }
.ri-table-rank { color: var(--ri-muted); font-weight: 700; }
.ri-table-pts { font-weight: 800; }
.ri-table tr.is-real td { background: #0B2A5B; color: #fff; }
.ri-table tr.is-real .ri-table-rank, .ri-table tr.is-real .ri-table-pts { color: var(--ri-accent); }
@media (max-width: 380px) { .ri-table .ri-table-wdl { display: none; } }

/* Spielplan */
.ri-app .ri-games-title {
	margin: 0;
	padding: 18px var(--ri-pad) 8px;
	color: var(--ri-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ri-games { list-style: none; margin: 0; padding: 0; }
.ri-game {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px var(--ri-pad);
	border-bottom: 1px solid var(--ri-line);
}
.ri-game-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ri-game-team { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.ri-game-team img { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }
.ri-game-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ri-game-team.is-real { font-weight: 800; }
.ri-game-goals { min-width: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.ri-game-when {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 76px;
	padding-left: 16px;
	border-left: 1px solid var(--ri-line);
}
.ri-game-date { color: var(--ri-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ri-game-time {
	padding: 4px 8px;
	background: #0B2A5B;
	color: var(--ri-accent);
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.ri-game-res {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}
.ri-game-res--s { background: #1E9E57; }
.ri-game-res--u { background: #9A9FA8; }
.ri-game-res--n { background: #D6283B; }
.ri-game-res--live { width: auto; padding: 0 6px; background: #D6283B; font-size: 10px; letter-spacing: .08em; }
.ri-game.is-live .ri-game-goals { color: #D6283B; }

/* Sehr schmale Handys (z. B. iPhone SE): Logo und Platzierungs-Box kompakter */
@media (max-width: 359px) {
	.ri-comp-main { gap: 10px; }
	.ri-comp-logo, .ri-comp-logo--icon img { width: 42px; height: 42px; }
	.ri-app .ri-comp-real { gap: 6px; padding: 6px 8px; }
	.ri-comp-real img { width: 22px; height: 22px; }
	.ri-comp-real-text strong { font-size: 13px; }
	.ri-app .ri-comp-sub { font-size: 12px; }
}