/* Spielseite (fi-spiel.php) – Aufbau wie realinside, Farben aus dem FCBinside-Entwurf. Baut auf fi-home.css auf. */

body.fi-matchpage {
	--m-navy: #0e1a33; --m-green: #1e9e57; --m-red: #d6283b; --m-gray: #9a9fa8;
	--m-bg: #f6f6f6;       /* Seitenhintergrund aus dem App-Screenshot */
	--m-accent: #e51a7a;   /* Pink für aktive Tabs, Überschriften */
	background: var(--m-bg);
}
.fi-matchpage .fi-main { background: var(--m-bg); }

/* ---------- Kopf im Vollbild (App-Screenshot 29.09.): Bayern-Rot → Beere ---------- */
.fi-match-hero {
	padding: calc(env(safe-area-inset-top) + 6px) 16px 18px;
	background: linear-gradient(135deg, #e10033 0%, #c4073e 45%, #9b1450 100%);
	color: #fff;
}
.fi-match-top { display: flex; align-items: center; gap: 12px; height: 34px; margin-left: -6px; }
.fi-match-back { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; }
.fi-match-back svg { width: 22px; height: 22px; }
.fi-match-comp { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 700; letter-spacing: .09em; }
.fi-match-when { flex: none; color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.fi-match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 4px; margin: 10px -8px 0; }
.fi-match-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.fi-match-team img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15)); }
.fi-match-name { font-size: 14.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

.fi-match-center { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 86px; padding-top: 12px; }
.fi-match-big { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fi-match-label { color: rgba(255, 255, 255, .78); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.fi-match-hero.is-live .fi-match-label { color: #fff; padding: 2px 8px; background: rgba(0, 0, 0, .25); border-radius: 2px; }

/* Form wie bei realinside: Kästchen unter dem Namen */
.fi-form-dots { display: flex; gap: 3px; }
.fi-form-dots i {
	display: grid; place-items: center; width: 16px; height: 16px;
	color: #fff; font-size: 9px; font-style: normal; font-weight: 800;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.fi-form-dots .is-s { background: var(--m-green); }
.fi-form-dots .is-u { background: #7e8794; }
.fi-form-dots .is-n { background: #3c0a1c; }

.fi-match-scorers {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .2);
	list-style: none; color: rgba(255, 255, 255, .88); font-size: 12px; line-height: 1.5;
}
.fi-match-scorers li { display: flex; flex-direction: column; }
.fi-match-scorers--home { text-align: right; }
.fi-match-scorers--away { text-align: left; }
.fi-match-info { margin: 16px 0 0; color: rgba(255, 255, 255, .72); font-size: 12px; }

/* ---------- Tabs (App-Screenshot): linksbündig, fett, pinker Strich unter dem aktiven Wort ---------- */
.fi-matchpage .fi-tabs--4 {
	display: flex; gap: 20px; padding: 0 16px; overflow-x: auto; scrollbar-width: none;
	background: var(--m-bg); border-bottom: 0;
}
.fi-matchpage .fi-tabs--4::-webkit-scrollbar { display: none; }
.fi-matchpage .fi-tabs--4 .fi-tab {
	flex: none; height: 46px; gap: 6px; padding: 4px 0 0;
	font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #5e636d;
}
.fi-matchpage .fi-tabs--4 .fi-tab.is-active { color: #111; }
.fi-matchpage .fi-tabs--4 .fi-tab.is-active::after { left: 0; right: 0; bottom: 0; height: 2px; background: var(--m-accent); }
.fi-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-pill); animation: fi-pulse 1.2s infinite; }
@keyframes fi-pulse { 50% { opacity: .3; } }
.fi-panel[hidden] { display: none; }

.fi-empty-state { margin: 0; padding: 32px var(--h-pad) 16px; color: var(--h-muted); font-size: 15px; }
.fi-games-title {
	display: flex; align-items: center; gap: 10px;
	margin: 0; padding: 24px 16px 10px;
	color: var(--m-accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.fi-games-title::before { content: ""; width: 3px; height: 14px; background: var(--m-accent); }
/* Inhalte als weiße Fläche auf hellgrauem Grund */
.fi-matchpage .fi-panel { padding-bottom: 24px; }
.fi-matchpage .fi-hitem, .fi-matchpage .fi-games, .fi-matchpage .fi-h2h-summary, .fi-matchpage .fi-lineup,
.fi-matchpage .fi-stats, .fi-matchpage .fi-timeline-match, .fi-matchpage .fi-placeholder { background: #fff; }

/* ---------- H2H ---------- */
.fi-h2h-summary { padding: 18px var(--h-pad) 6px; }
.fi-h2h-counts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.fi-h2h-counts span { display: flex; flex-direction: column; gap: 2px; color: var(--h-muted); font-size: 12px; font-weight: 600; }
.fi-h2h-counts strong { color: var(--h-text); font-size: 26px; font-weight: 800; line-height: 1.1; }
.fi-h2h-counts span:first-child strong { color: var(--m-green); }
.fi-h2h-counts span:last-child strong { color: var(--m-red); }
.fi-h2h-bar { display: flex; height: 8px; margin-top: 12px; background: var(--h-line); }
.fi-h2h-bar .is-s { background: var(--m-green); }
.fi-h2h-bar .is-u { background: var(--m-gray); }
.fi-h2h-bar .is-n { background: var(--m-red); }
.fi-h2h-note { margin: 10px 0 0; color: var(--h-muted); font-size: 12px; text-align: center; }

.fi-games { margin: 8px 0 0; padding: 0; list-style: none; }
.fi-game { border-bottom: 1px solid var(--h-line); }
.fi-game-link { display: flex; align-items: center; gap: 16px; padding: 12px var(--h-pad); color: inherit; text-decoration: none; }
.fi-game-teams { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.fi-game-team { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fi-game-team img { width: 24px; height: 24px; object-fit: contain; }
.fi-game-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-game-team.is-own .fi-game-name { font-weight: 700; }
.fi-game-goals { font-weight: 800; font-variant-numeric: tabular-nums; }
.fi-game-when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-left: 14px; border-left: 1px solid var(--h-line); }
.fi-game-date { color: var(--h-muted); font-size: 12px; font-weight: 600; }
.fi-game-comp { color: var(--h-muted); font-size: 11px; }
.fi-game-res { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; font-size: 11px; font-weight: 800; }
.fi-game-res--s { background: var(--m-green); }
.fi-game-res--u { background: var(--m-gray); }
.fi-game-res--n { background: var(--m-red); }

/* ---------- Aufstellung ---------- */
.fi-lineups { display: grid; }
.fi-lineup { padding: 16px var(--h-pad); border-bottom: 8px solid var(--m-bg); }
.fi-lineup-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.fi-lineup-head img { width: 22px; height: 22px; object-fit: contain; }
.fi-lineup-head em { margin-left: auto; padding: 3px 8px; background: var(--m-navy); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.fi-lineup-list { margin: 0; padding: 0; list-style: none; }
.fi-lineup-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--h-line); font-size: 15px; }
.fi-lineup-list b { width: 24px; color: var(--h-muted); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.fi-lineup-list span { flex: 1; min-width: 0; font-weight: 600; }
.fi-lineup-list small { color: var(--h-muted); font-size: 11px; font-weight: 700; }
.fi-lineup-list i { font-style: normal; font-weight: 800; }
.fi-lineup-list .is-out { color: var(--m-red); }
.fi-lineup-list .is-in { color: var(--m-green); }
.fi-lineup-subhead { margin: 16px 0 4px; color: var(--h-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fi-lineup-list--subs li { font-size: 14px; }
.fi-lineup-coach { margin: 12px 0 0; color: var(--h-muted); font-size: 13px; }

/* ---------- Platzhalter ---------- */
.fi-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px var(--h-pad); color: var(--h-muted); text-align: center; }
.fi-placeholder svg { color: var(--h-pink); }
.fi-placeholder p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.5; }
.fi-placeholder strong { display: block; margin-bottom: 4px; color: var(--h-text); font-size: 16px; }

/* ---------- Statistik ---------- */
.fi-stats { padding: 16px var(--h-pad) 8px; }
.fi-stats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--h-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fi-stats-head img { width: 24px; height: 24px; object-fit: contain; }
.fi-stat { padding: 8px 0; }
.fi-stat-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.fi-stat-row span { color: var(--h-muted); font-weight: 600; }
.fi-stat-row b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fi-stat-bar { display: flex; gap: 4px; height: 6px; margin-top: 6px; }
.fi-stat-bar i { background: #d5dae3; }
.fi-stat-bar i.is-lead { background: #dc052d; } /* Bayern-Rot */
.fi-stat-bar i:first-child { margin-left: auto; }

/* ---------- Spielverlauf ---------- */
.fi-timeline-match { margin: 0; padding: 0 0 16px; list-style: none; }
.fi-tl { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 10px; padding: 8px var(--h-pad); border-bottom: 1px solid var(--h-line); font-size: 14px; }
.fi-tl-min { grid-column: 2; grid-row: 1; color: var(--h-muted); font-size: 12px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.fi-tl-text { display: flex; flex-direction: column; gap: 2px; grid-row: 1; }
.fi-tl--home .fi-tl-text { grid-column: 1; text-align: right; }
.fi-tl--away .fi-tl-text { grid-column: 3; text-align: left; }
.fi-tl-text small { color: var(--h-muted); font-size: 12px; }
.fi-tl-in { color: var(--m-green); font-weight: 600; }
.fi-tl-out { color: var(--m-red); font-size: 13px; }
.fi-tl.is-goal .fi-tl-text strong::before { content: "⚽ "; }
.fi-tl.is-yellow .fi-tl-text strong::before { content: ""; display: inline-block; width: 9px; height: 12px; margin-right: 6px; background: #f2c230; vertical-align: -1px; }
.fi-tl.is-red .fi-tl-text strong::before { content: ""; display: inline-block; width: 9px; height: 12px; margin-right: 6px; background: var(--m-red); vertical-align: -1px; }
.fi-tl.is-goal { background: #fff0f3; }

/* =========================================================================
 * Nach App-Screenshots (Aufstellung + Spielverlauf, 29.09.)
 * ========================================================================= */

.fi-match-big--score { font-size: 34px; letter-spacing: 0; }

/* Weiße Karte mit feinem Rand auf hellgrauem Grund */
.fi-mcard { margin: 0 15px; padding: 0; background: #fff; border: 1px solid #e7e8e8; list-style: none; }
.fi-mcard--text p { margin: 0; padding: 13px 14px; font-size: 16px; line-height: 1.45; color: #1a1a1a; }
.fi-matchpage .fi-panel > .fi-hitem:first-of-type a { border-top: 0; }
.fi-games-title--row { justify-content: space-between; }
.fi-games-title--row h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.fi-games-title--row::before { display: none; }
.fi-games-title--row h2::before { content: ""; width: 3px; height: 14px; background: var(--m-accent); }
.fi-lineup-formation { color: #66686a; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- Spielverlauf: Heim links, Minute mittig, Gast rechts, neueste oben ---------- */
.fi-flow { padding: 8px 13px; }
.fi-flow-row { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 4px; align-items: center; padding: 7px 0; }
.fi-flow-min { grid-column: 2; grid-row: 1; text-align: center; color: #62666b; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fi-flow-row.is-goal .fi-flow-min { color: #dd1574; }
.fi-flow-text { grid-row: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fi-flow-row--home .fi-flow-text { grid-column: 1; align-items: flex-start; }
.fi-flow-row--away .fi-flow-text { grid-column: 3; align-items: flex-end; text-align: right; }
.fi-flow-main { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.fi-flow-row--away .fi-flow-main { flex-direction: row-reverse; }
.fi-flow-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 800; color: #111; letter-spacing: -.01em; }
.fi-flow-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #646569; font-size: 12px; }
.fi-flow-icon { flex: none; display: grid; place-items: center; color: #6b6f76; }
.fi-flow-icon--goal { font-size: 14px; line-height: 1; filter: grayscale(1); }
.fi-flow-icon--sub svg { width: 11px; height: 8px; }
.fi-flow-icon--card { width: 9px; height: 11.5px; border-radius: 1px; background: #f4c41a; }
.fi-flow-icon--card.is-red { background: var(--m-red); }

/* ---------- Aufstellung ---------- */
.fi-lineup-card { padding: 14px 13px 16px; }
.fi-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: #f1f3f2; }
.fi-seg-btn {
	height: 37px; padding: 0 8px; border: 0; background: none; cursor: pointer;
	font-family: inherit; font-size: 14.5px; font-weight: 500; color: #62656d;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fi-seg-btn.is-active { background: #fff; color: #111; font-weight: 800; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

/* Spielfeld: Streifen #2f7d51 / #35885c, Linien halbtransparent weiß */
.fi-pitch {
	position: relative; margin-top: 11px; aspect-ratio: 791 / 1197; overflow: hidden;
	background: repeating-linear-gradient(180deg, #2f7d51 0 10%, #35885c 10% 20%);
}
.fi-pitch-lines { position: absolute; inset: 2.6% 3.9%; border: 1px solid rgba(255, 255, 255, .32); }
.fi-pitch-lines i { position: absolute; display: block; border: 1px solid rgba(255, 255, 255, .32); }
.fi-pitch-box { left: 21.2%; width: 57.6%; height: 14.8%; }
.fi-pitch-box.is-top { top: -1px; border-top: 0; }
.fi-pitch-box.is-bottom { bottom: -1px; border-bottom: 0; }
.fi-pitch-mid { left: -1px; right: -1px; top: 50%; height: 0; border-width: 1px 0 0 !important; }
.fi-pitch-circle { left: 50%; top: 50%; width: 32.4%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }

.fi-pitch-player {
	position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px;
	width: 25%; transform: translate(-50%, -19px); /* Mitte des Fotos auf der Position */
}
.fi-pitch-photo { display: block; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #fff; }
.fi-pitch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fi-pitch-name {
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: #fff; font-size: 12.5px; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Bank */
.fi-bench-title { margin: 18px 0 6px; color: #62656d; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fi-bench { margin: 0; padding: 0; list-style: none; }
.fi-bench li { display: flex; align-items: baseline; gap: 10px; min-height: 26px; font-size: 14px; color: #3a3a40; }
.fi-bench b { width: 20px; flex: none; color: #626571; font-weight: 800; font-variant-numeric: tabular-nums; }
.fi-bench span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-bench small { color: #62666b; font-size: 12px; }

/* Statistik & H2H als Karte */
.fi-stats.fi-mcard { padding: 14px 13px 10px; }

/* =========================================================================
 * Noten (RankIt) – nach App-Screenshots „Bewerten“ / „Übersicht“
 * ========================================================================= */

.fi-noten { padding-top: 14px; }
.fi-seg--noten { margin: 0 15px; padding: 3px; gap: 3px; background: #eceef0; }
.fi-seg--noten .fi-seg-btn { height: 38px; font-size: 16px; }
.fi-seg--noten .fi-seg-btn.is-active { font-weight: 600; }
.fi-games-title--dark { color: #111; font-size: 15.5px; font-weight: 600; letter-spacing: .1em; padding-top: 26px; }

/* Beere mit Zacken wie in der App (#9a1350 / #7c0d40) */
.fi-motm, .fi-pitch--noten {
	background-color: #9a1350;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 0h26l50 50-50 50H0l50-50z' fill='%237c0d40'/%3E%3C/svg%3E");
	background-size: 100px 100px;
}

/* ---------- Spieler des Spiels ---------- */
.fi-motm { margin: 14px 15px 0; padding: 14px 10px 12px; color: #fff; }
.fi-motm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 10px; }
.fi-motm-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fi-motm-state { flex: none; color: #f8cf4f; font-size: 12.5px; font-weight: 600; }
.fi-motm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fi-motm-card {
	position: relative; display: grid; grid-template-columns: 35px 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 10px 8px;
	padding: 10px 9px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14);
	color: #fff; text-align: left; font-family: inherit; cursor: pointer;
}
.fi-motm-card:disabled { cursor: default; }
.fi-motm-photo { width: 35px; height: 35px; overflow: hidden; border-radius: 50%; background: #fff; }
.fi-motm-photo img { width: 100%; height: 100%; object-fit: cover; }
.fi-motm-who { display: flex; flex-direction: column; min-width: 0; }
.fi-motm-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.fi-motm-who small { color: #fccae6; font-size: 11.5px; }
.fi-motm-cup { display: none; position: absolute; top: 9px; right: 8px; font-size: 16px; }
.fi-motm-card.is-leader .fi-motm-cup { display: block; }
.fi-motm-card.is-leader .fi-motm-who { padding-right: 18px; }
.fi-motm-who { grid-column: 2 / 4; }
.fi-motm-bar { grid-column: 1 / 3; height: 3.5px; background: rgba(255, 255, 255, .25); }
.fi-motm-bar i { display: block; height: 100%; background: rgba(255, 255, 255, .55); }
.fi-motm-pct { justify-self: end; color: #f8cf4f; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
/* eigene Stimme: weiße Karte mit goldenem Rand */
.fi-motm-card.is-mine { background: #fff; border: 2px solid #fdd25d; color: #49051e; padding: 9px 8px; }
.fi-motm-card.is-mine .fi-motm-who small { color: #772241; }
.fi-motm-card.is-mine .fi-motm-bar { background: #ddd; }
.fi-motm-card.is-mine .fi-motm-bar i { background: #bbb; }
.fi-motm-card.is-mine .fi-motm-pct { color: #420a1f; }

/* ---------- Einzelbewertung ---------- */
.fi-rate { padding: 14px 13px 13px; }
.fi-rate + .fi-rate { margin-top: 10px; }
.fi-rate-head { display: flex; align-items: flex-start; gap: 12px; }
.fi-rate-photo { flex: none; width: 40px; height: 40px; overflow: hidden; }
.fi-rate-photo img { width: 100%; height: 100%; object-fit: cover; }
.fi-rate-who { flex: 1; min-width: 0; }
.fi-rate-who h3 { margin: 2px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; color: #111; letter-spacing: -.01em; }
.fi-rate-who p { margin: 0; color: #6b6d72; font-size: 12.5px; }
.fi-flag { font-size: 11px; }
.fi-rate-badges { display: flex; gap: 6px; flex: none; }
.fi-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 62px; height: 41px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fi-badge small { font-size: 7.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.fi-badge--edit { color: #fff; }
.fi-badge--edit.is-great { background: #15a34a; }
.fi-badge--edit.is-good { background: #22c45e; }
.fi-badge--edit.is-ok { background: #e9b308; }
.fi-badge--edit.is-weak { background: #f97316; }
.fi-badge--edit.is-bad { background: #dc2626; }
.fi-badge--fans { background: #fbe8f1; color: #e51a7a; }
.fi-rate-votes { margin: 10px 0 8px; color: #6b6d72; font-size: 14px; }
.fi-rate-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.fi-rate-btn {
	height: 38px; border: 1px solid #e5e7e7; background: #fff; color: #111; cursor: pointer;
	font-family: inherit; font-size: 17px; font-variant-numeric: tabular-nums;
}
.fi-rate-btn[aria-pressed="true"] { background: #e61a7a; border-color: #e61a7a; color: #fff; }
.fi-rate-btn:disabled { cursor: default; color: #9a9ca1; }
.fi-rate-btn:disabled[aria-pressed="true"] { color: #fff; }
.fi-rate.is-saving .fi-rate-btns { opacity: .6; pointer-events: none; }
.fi-rate-toggle {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 0; border: 0; background: none; cursor: pointer;
	color: #e61a7a; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.fi-rate-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fi-rate-stats { margin-top: 8px; }
.fi-rate-bar { margin-bottom: 10px; }
.fi-rate-bar > div { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; color: #626669; }
.fi-rate-bar b { color: #111; font-weight: 700; }
.fi-rate-bar i { display: block; height: 4px; background: #e4e6e7; }
.fi-rate-bar em { display: block; height: 100%; background: #e8197a; }
.fi-rate-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fi-rate-tiles div { display: flex; justify-content: space-between; gap: 6px; padding: 9px 8px; background: #f2f4f5; font-size: 13px; color: #626669; white-space: nowrap; }
.fi-rate-tiles b { color: #111; font-weight: 700; }
.fi-rate-note { margin: 10px 0 0; color: #b32d2e; font-size: 13px; }

/* ---------- Übersicht: Fan-Noten auf dem Beeren-Spielfeld ---------- */
.fi-pitch--noten { margin: 14px 15px 0; aspect-ratio: 853 / 919; }
.fi-pitch--noten .fi-pitch-lines { inset: 3.9% 7.9%; border-color: rgba(255, 255, 255, .22); border-radius: 6px; }
.fi-pitch--noten .fi-pitch-lines i { border-color: rgba(255, 255, 255, .22); }
.fi-pitch--noten .fi-pitch-box { left: 23.8%; width: 52.3%; height: 9.8%; }
.fi-pitch--noten .fi-pitch-circle { width: 29.5%; }
.fi-pitch-player--note { transform: translate(-50%, -17px); gap: 5px; }
.fi-note-bubble {
	display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); color: #fff;
	font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fi-note-bubble.is-great { background: #176b41; }
.fi-note-bubble.is-good { background: #2e9257; }
.fi-note-bubble.is-ok { background: #b08b1c; }
.fi-note-bubble.is-bad { background: #b3261e; }
.fi-note-bubble.is-top { background: #e61a7a; }
.fi-note-bubble.is-none { background: rgba(255, 255, 255, .25); }
.fi-bench-title--noten { margin: 16px 15px 10px; font-size: 13px; font-weight: 600; }
.fi-note-subs { display: flex; flex-wrap: wrap; gap: 14px 0; padding: 0 15px 8px; }
.fi-note-sub { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 65px; color: #111; font-size: 13px; }
.fi-note-sub > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Form im Reiter H2H (vorher im Kopf) */
.fi-form-card { padding: 4px 13px; }
.fi-form-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.fi-form-row + .fi-form-row { border-top: 1px solid var(--h-line); }
.fi-form-row img { width: 24px; height: 24px; object-fit: contain; }
.fi-form-team { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: #111; }
.fi-form-card .fi-form-dots { gap: 4px; }
.fi-form-card .fi-form-dots i { width: 22px; height: 22px; font-size: 11px; box-shadow: none; }
.fi-form-card .fi-form-dots .is-n { background: var(--m-red); }

/* ======================= Computer (ab 1024 px): Seitenkopf, roter Kopf über die volle Breite mit Inhalt in 1280 px,
 * darunter Reiter + Inhalt links, Spielinfos + Tabelle rechts. Handy unverändert. ======================= */
.fi-mp-side { display: none; }
@media (max-width: 1023px) { body.fi-matchpage .fi-apphead, body.fi-matchpage .fi-appsearch { display: none !important; } }
@media (min-width: 1024px) {
	/* Kopf als Kasten in der Inhaltsbreite (links/rechts Platz für Werbung); Wettbewerb, Wappen und Quoten bündig */
	.fi-match-hero { max-width: calc(var(--w-max) - 2 * var(--w-pad)); margin: 24px auto 0; padding: 22px 32px 18px; box-sizing: border-box; }
	.fi-match-top { height: auto; margin-left: 0; }
	.fi-match-back { display: none; }
	.fi-match-comp, .fi-match-when { font-size: 13.5px; }
	.fi-match-teams { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; margin: 14px 0 0; }
	.fi-match-team { gap: 12px; }
	.fi-match-team:first-child { align-items: flex-start; text-align: left; } /* Heim-Wappen bündig links mit „Bundesliga · …“ */
	.fi-match-team:last-child { align-items: flex-end; text-align: right; } /* Gast-Wappen bündig rechts mit dem Datum */
	.fi-match-team img { width: 96px; height: 96px; }
	.fi-match-name { font-size: 22px; }
	.fi-match-center { gap: 14px; min-width: 180px; padding-top: 18px; }
	.fi-match-big { font-size: 60px; }
	.fi-match-label { font-size: 12px; }
	.fi-match-hero > :not(.fi-match-top, .fi-match-teams) { max-width: none; margin-inline: 0; }

	.fi-mp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--w-gap); align-items: start; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--w-pad) 64px; box-sizing: border-box; }
	.fi-mp-main { min-width: 0; }
	.fi-matchpage .fi-tabs--4 { gap: 28px; margin-bottom: 8px; padding: 0; border-bottom: 1px solid #e3e4e8; }
	.fi-matchpage .fi-tabs--4 .fi-tab { height: 54px; font-size: 16.5px; }
	.fi-matchpage .fi-tabs--4 .fi-tab:hover { color: #111; }
	.fi-mp-main .fi-games-title { padding-inline: 0; }
	.fi-mp-main .fi-hitem a { gap: 16px; padding: 12px 16px; } /* weiße Karten: Text nicht am Rand */
	.fi-mp-main .fi-empty-state, .fi-mp-main .fi-placeholder { padding-inline: 0; }
	/* Karten bündig mit den Reitern (am Handy 15 px Rand) */
	.fi-mp-main :is(.fi-panel, .fi-tk, .fi-tk-feed) > *, .fi-mp-main :is(.fi-seg, .fi-motm, .fi-mcard, .fi-tk-chat, .fi-tk-entry, .fi-tk-phase) { margin-left: 0; margin-right: 0; }
	body.fi-home2.fi-matchpage .fi-main { background: var(--m-bg); }

	.fi-mp-side { display: flex; flex-direction: column; gap: 20px; padding-top: 62px; } /* bündig mit dem Inhalt unter den Reitern */
	.fi-mp-box { padding: 20px 20px 18px; background: #fff; }
	.fi-mp-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #111; font-size: 16px; font-weight: 800; }
	.fi-mp-h::before { content: ""; width: 4px; height: 16px; background: var(--m-accent); }
	.fi-mp-facts { margin: 0; }
	.fi-mp-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid #ececef; font-size: 14px; }
	.fi-mp-facts dt { color: #6b6f76; font-weight: 600; }
	.fi-mp-facts dd { display: flex; align-items: center; gap: 7px; margin: 0; color: #111; font-weight: 700; }
	.fi-mp-facts dd img { flex: none; object-fit: contain; }
	.fi-mp-more { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ececef; color: var(--m-accent); font-size: 14px; font-weight: 800; text-decoration: none; }
	.fi-mp-more:hover { text-decoration: underline; }
	/* Tabelle passt in den Kasten: feste Spalten, lange Vereinsnamen gekürzt */
	.fi-mp-box .fi-sp-table { table-layout: fixed; font-size: 13px; }
	.fi-mp-box .fi-sp-table :is(th, td) { padding: 6px 4px; }
	.fi-mp-box .fi-sp-table :is(th, td):nth-child(1) { width: 30px; }
	.fi-mp-box .fi-sp-table :is(th, td):nth-child(3) { width: 30px; }
	.fi-mp-box .fi-sp-table :is(th, td):nth-child(4) { width: 40px; }
	.fi-mp-box .fi-sp-table :is(th, td):nth-child(5) { width: 34px; padding-right: 0; }
	.fi-mp-box .fi-sp-table th:nth-child(1), .fi-mp-box .fi-sp-table td:first-child { padding-left: 8px; }
	.fi-mp-box .fi-sp-tteam span { max-width: none; }
}

/* Computer: Live-Chat dauerhaft offen rechts (assets/fi-ticker.js setzt .is-docked), bleibt beim Scrollen stehen.
 * Spielinfos und Tabelle weichen dem Chat, solange es einen Ticker gibt. */
@media (min-width: 1024px) {
	.fi-mp-side:has(.is-docked) { position: sticky; top: 92px; height: calc(100vh - 108px); min-height: 480px; margin-top: 62px; padding-top: 0; }
	.fi-mp-side:has(.is-docked) > .fi-mp-box { display: none; }
	.fi-tk-chat.is-docked { display: flex; flex-direction: column; height: 100%; margin: 0; }
	.fi-tk-chat.is-docked .fi-tk-chat-toggle { cursor: default; }
	.fi-tk-chat.is-docked .fi-tk-chat-toggle svg { display: none; }
	.fi-tk-chat.is-docked .fi-tk-chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
	.fi-tk-chat.is-docked .fi-chat-list { flex: 1; min-height: 0; max-height: none; }
	.fi-tk-chat.is-docked .fi-chat-form { padding-bottom: 4px; }
}

/* Computer, kompakter (Wunsch 01.10.): Spielseite schmaler als die übrigen Seiten (mehr Luft für Werbung links/rechts),
 * kleinerer Kopf, engere Ticker-Beiträge, Einbettungen linksbündig statt mittig mit weißen Flächen. */
@media (min-width: 1024px) {
	body.fi-matchpage { --mp-max: 984px; } /* Ticker-Spalte 580 px: X-/Instagram-Posts (max. 550 px) füllen sie ohne weiße Ränder; + Chat 340 px */
	.fi-match-hero { max-width: calc(var(--mp-max) - 2 * var(--w-pad)); margin-top: 20px; padding: 16px 24px 14px; }
	.fi-match-comp, .fi-match-when { font-size: 12.5px; }
	.fi-match-teams { margin-top: 6px; }
	.fi-match-team { gap: 8px; }
	.fi-match-team img { width: 68px; height: 68px; }
	.fi-match-name { font-size: 18px; }
	.fi-match-center { gap: 10px; min-width: 150px; padding-top: 8px; }
	.fi-match-big { font-size: 46px; }
	.fi-match-label { font-size: 11px; }

	.fi-mp-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; max-width: var(--mp-max); padding-bottom: 48px; }
	.fi-matchpage .fi-tabs--4 { gap: 24px; margin-bottom: 4px; }
	.fi-matchpage .fi-tabs--4 .fi-tab { height: 46px; font-size: 15px; }
	.fi-mp-side { padding-top: 50px; }
	.fi-mp-side:has(.is-docked) { margin-top: 50px; }

	.fi-mp-main .fi-tk { padding-top: 8px; }
	.fi-mp-main .fi-tk-entry, .fi-mp-main .fi-tk-phase { margin-bottom: 8px; }
	.fi-mp-main .fi-tk-phase { padding: 9px 14px; }
	.fi-mp-main .fi-tk-head { gap: 9px; padding: 9px 14px 6px; }
	.fi-mp-main .fi-tk-avatar { width: 28px; height: 28px; }
	.fi-mp-main .fi-tk-author b { font-size: 13.5px; }
	.fi-mp-main .fi-tk-author small { font-size: 11px; }
	.fi-mp-main .fi-tk-team { width: 20px; height: 20px; }
	.fi-mp-main .fi-tk-title { padding: 0 14px 6px; font-size: 16px; }
	.fi-mp-main .fi-tk-sub { padding: 0 14px 10px; font-size: 14.5px; }
	.fi-mp-main .fi-tk-body { padding: 0 14px 10px; font-size: 15px; line-height: 1.5; }
	.fi-mp-main .fi-tk-player { padding: 8px 14px 2px; }
	.fi-mp-main .fi-tk-player img { width: 46px; height: 46px; }
	.fi-mp-main .fi-tk-player strong { font-size: 16.5px; }
	.fi-mp-main .fi-tk-banner { padding: 6px 14px; font-size: 14px; }
	.fi-mp-main .fi-tk-embed { padding: 0 14px 10px; }
	.fi-mp-main .fi-tk-embed :is(.twitter-tweet, .instagram-media) { margin: 0 !important; }
	.fi-mp-main .fi-tk-embed iframe { margin: 0 !important; }
	.fi-mp-main .fi-tk-image { max-height: 420px; object-fit: cover; }
}