/* Team Fixtures Hub — lightweight, scoped styles.
   Inherits the theme's font. Tune --tfh-accent (color) and --tfh-scale (size)
   from the settings screen; both are injected as inline CSS variables. */

.tfh {
	--tfh-accent: #0a7d34;
	--tfh-scale: 1;
	--tfh-bg: #ffffff;
	--tfh-soft: #f5f6f7;
	--tfh-line: #e6e8ea;
	--tfh-text: inherit;
	--tfh-muted: #6b7280;
	--tfh-radius: 12px;

	font-family: inherit;
	color: var(--tfh-text);
	line-height: 1.4;
	box-sizing: border-box;
}

.tfh *,
.tfh *::before,
.tfh *::after {
	box-sizing: border-box;
}

.tfh img {
	height: auto;
	vertical-align: middle;
}

/* ---------- Next match card ---------- */

.tfh-next-match {
	background: var(--tfh-bg);
	border: 1px solid var(--tfh-line);
	border-radius: var(--tfh-radius);
	padding: 1.5rem 1.4rem 1.75rem;
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.tfh-comp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	flex-wrap: wrap;
	font-size: calc(clamp(.95rem, 2.8vw, 1.1rem) * var(--tfh-scale));
	color: var(--tfh-muted);
	margin-bottom: 1.2rem;
}

.tfh-comp__logo { width: calc(26px * var(--tfh-scale)); height: calc(26px * var(--tfh-scale)); object-fit: contain; }
.tfh-comp__round { opacity: .8; }

.tfh-teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(.6rem, 3vw, 1.25rem);
	margin-bottom: 1.2rem;
}

.tfh-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}

.tfh-team__logo {
	width: calc(clamp(72px, 20vw, 104px) * var(--tfh-scale));
	height: calc(clamp(72px, 20vw, 104px) * var(--tfh-scale));
	object-fit: contain;
}

.tfh-team__name { font-weight: 600; font-size: calc(clamp(1.15rem, 4.4vw, 1.45rem) * var(--tfh-scale)); }

.tfh-vs__label {
	font-size: calc(clamp(.85rem, 2.6vw, .95rem) * var(--tfh-scale));
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tfh-muted);
}

.tfh-meta {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	font-size: calc(clamp(1rem, 3vw, 1.15rem) * var(--tfh-scale));
	color: var(--tfh-muted);
	margin-bottom: 1.2rem;
}

.tfh-meta__date { font-weight: 600; color: var(--tfh-text); }

/* Countdown */
.tfh-countdown {
	display: inline-flex;
	gap: .55rem;
	padding: .6rem 1rem;
	background: var(--tfh-accent);
	color: #fff;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.tfh-countdown__unit { display: inline-flex; align-items: baseline; gap: .15rem; }
.tfh-countdown__num { font-size: calc(clamp(1.35rem, 4.6vw, 1.7rem) * var(--tfh-scale)); }
.tfh-countdown__lab { font-size: calc(clamp(.72rem, 2vw, .82rem) * var(--tfh-scale)); opacity: .85; text-transform: uppercase; }

.tfh-status {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--tfh-soft);
	font-weight: 600;
	font-size: calc(clamp(.95rem, 2.8vw, 1.1rem) * var(--tfh-scale));
}

.tfh-status.is-live {
	background: #e11d48;
	color: #fff;
	animation: tfh-pulse 1.6s ease-in-out infinite;
}

@keyframes tfh-pulse { 50% { opacity: .65; } }

@media (prefers-reduced-motion: reduce) {
	.tfh-status.is-live { animation: none; }
}

/* H2H */
.tfh-h2h { margin-top: 1.4rem; text-align: left; }
.tfh-h2h__title { margin: 0 0 .5rem; font-size: calc(clamp(.8rem, 2.2vw, .9rem) * var(--tfh-scale)); text-transform: uppercase; letter-spacing: .06em; color: var(--tfh-muted); }
.tfh-h2h__list { list-style: none; margin: 0; padding: 0; }
.tfh-h2h__item { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--tfh-line); font-size: calc(clamp(.95rem, 2.8vw, 1.05rem) * var(--tfh-scale)); }
.tfh-h2h__date { color: var(--tfh-muted); white-space: nowrap; }

/* ---------- Lists (calendar & results) ---------- */

.tfh-calendar,
.tfh-results {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.tfh-list { list-style: none; margin: 0; padding: 0; }

.tfh-list__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .4rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--tfh-line);
	border-radius: var(--tfh-radius);
	margin-bottom: .7rem;
	background: var(--tfh-bg);
}

.tfh-list__date { font-weight: 600; font-size: calc(clamp(1rem, 3vw, 1.1rem) * var(--tfh-scale)); }
.tfh-list__match { display: flex; align-items: center; justify-content: center; gap: .65rem; flex-wrap: wrap; font-size: calc(clamp(1.1rem, 3.8vw, 1.35rem) * var(--tfh-scale)); }
.tfh-list__comp { font-size: calc(clamp(.88rem, 2.5vw, 1rem) * var(--tfh-scale)); color: var(--tfh-muted); }

.tfh-list__team { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.tfh-list__team img { width: calc(clamp(30px, 7.5vw, 40px) * var(--tfh-scale)); height: calc(clamp(30px, 7.5vw, 40px) * var(--tfh-scale)); object-fit: contain; }
.tfh-list__team.is-winner { font-weight: 700; }
.tfh-list__sep { color: var(--tfh-muted); font-size: calc(clamp(.82rem, 2.2vw, .92rem) * var(--tfh-scale)); }

.tfh-score {
	font-weight: 700;
	font-size: calc(clamp(1.15rem, 3.8vw, 1.4rem) * var(--tfh-scale));
	font-variant-numeric: tabular-nums;
	padding: .14rem .65rem;
	background: var(--tfh-soft);
	border-radius: 6px;
}

.tfh-empty {
	padding: 1rem;
	border: 1px dashed var(--tfh-line);
	border-radius: var(--tfh-radius);
	color: var(--tfh-muted);
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}

/* ---------- Featured-match sections ---------- */

.tfh-section { margin-top: 1.6rem; text-align: left; }
.tfh-section__title {
	margin: 0 0 .7rem;
	font-size: calc(clamp(.82rem, 2.3vw, .95rem) * var(--tfh-scale));
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tfh-muted);
	border-bottom: 1px solid var(--tfh-line);
	padding-bottom: .35rem;
}

/* Live score */
.tfh-vs__score { font-weight: 800; font-size: calc(clamp(1.6rem, 6vw, 2.1rem) * var(--tfh-scale)); font-variant-numeric: tabular-nums; }
.tfh-vs__min { display: block; font-size: calc(.8rem * var(--tfh-scale)); font-weight: 700; color: #e11d48; }

/* Events */
.tfh-events__list { list-style: none; margin: 0; padding: 0; }
.tfh-event { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--tfh-line); font-size: calc(.95rem * var(--tfh-scale)); }
.tfh-event:first-child { border-top: 0; }
.tfh-event__min { min-width: 2.6em; font-weight: 700; color: var(--tfh-muted); font-variant-numeric: tabular-nums; }
.tfh-event__icon { width: 1.1em; text-align: center; }
.tfh-event__icon.is-yellow::before { content: ""; display: inline-block; width: .7em; height: .95em; background: #f5c518; border-radius: 2px; }
.tfh-event__icon.is-red::before { content: ""; display: inline-block; width: .7em; height: .95em; background: #e11d48; border-radius: 2px; }
.tfh-event__assist { color: var(--tfh-muted); }
.tfh-event__detail { color: var(--tfh-muted); margin-left: .4rem; }

/* Statistics */
.tfh-stat { margin-bottom: .7rem; }
.tfh-stat__row { display: flex; justify-content: space-between; align-items: center; font-size: calc(.92rem * var(--tfh-scale)); font-weight: 600; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.tfh-stat__label { color: var(--tfh-muted); font-weight: 500; }
.tfh-stat__bar { position: relative; height: 7px; border-radius: 999px; background: var(--tfh-line); overflow: hidden; }
.tfh-stat__bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tfh-accent); }

/* Lineups */
.tfh-lineups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tfh-lineup__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.tfh-lineup__formation { font-size: calc(.8rem * var(--tfh-scale)); color: var(--tfh-muted); }
.tfh-lineup__xi { list-style: none; margin: 0; padding: 0; }
.tfh-lineup__xi li { display: flex; gap: .5rem; padding: .18rem 0; font-size: calc(.9rem * var(--tfh-scale)); }
.tfh-lineup__num { min-width: 1.8em; text-align: right; color: var(--tfh-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .tfh-lineups__grid { grid-template-columns: 1fr; } }

/* Prediction */
.tfh-pred__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: end; text-align: center; }
.tfh-pred__col { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.tfh-pred__pct { font-weight: 700; font-size: calc(.95rem * var(--tfh-scale)); }
.tfh-pred__bar { width: 70%; max-width: 56px; height: 80px; background: var(--tfh-line); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.tfh-pred__bar span { display: block; width: 100%; background: var(--tfh-accent); border-radius: 6px 6px 0 0; }
.tfh-pred__lbl { font-size: calc(.82rem * var(--tfh-scale)); color: var(--tfh-muted); }
.tfh-pred__advice { margin: .9rem 0 0; font-size: calc(.92rem * var(--tfh-scale)); background: var(--tfh-soft); padding: .55rem .75rem; border-radius: 8px; }

/* Recent form */
.tfh-form { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .9rem; }
.tfh-form__title { font-size: calc(.78rem * var(--tfh-scale)); text-transform: uppercase; letter-spacing: .05em; color: var(--tfh-muted); }
.tfh-form__pills { display: inline-flex; gap: .2rem; }
.tfh-form__pill { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 4px; font-size: calc(.72rem * var(--tfh-scale)); font-weight: 700; color: #fff; }
.tfh-form__pill.is-w { background: #16a34a; }
.tfh-form__pill.is-d { background: #9ca3af; }
.tfh-form__pill.is-l { background: #e11d48; }

/* Standings table */
.tfh-table { width: 100%; border-collapse: collapse; font-size: calc(.9rem * var(--tfh-scale)); }
.tfh-table th, .tfh-table td { padding: .45rem .4rem; text-align: center; border-bottom: 1px solid var(--tfh-line); }
.tfh-table th { color: var(--tfh-muted); font-weight: 600; font-size: .85em; text-transform: uppercase; }
.tfh-table__team { text-align: left; }
.tfh-table__team { white-space: nowrap; }
.tfh-table td.tfh-table__team { display: flex; align-items: center; gap: .45rem; }
.tfh-table__team img { width: calc(20px * var(--tfh-scale)); height: calc(20px * var(--tfh-scale)); object-fit: contain; }
.tfh-table tr.is-mine { background: color-mix(in srgb, var(--tfh-accent) 10%, transparent); font-weight: 600; }

/* ---------- Player profile ---------- */

.tfh-player { max-width: 640px; margin: 0 auto; text-align: left; }

.tfh-player__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tfh-player__photo {
	width: calc(96px * var(--tfh-scale));
	height: calc(96px * var(--tfh-scale));
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--tfh-line);
	flex-shrink: 0;
}
.tfh-player__name { margin: 0 0 .3rem; font-size: calc(clamp(1.25rem, 4.6vw, 1.6rem) * var(--tfh-scale)); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tfh-player__injured { font-size: calc(.7rem * var(--tfh-scale)); font-weight: 700; text-transform: uppercase; color: #fff; background: #e11d48; padding: .15rem .5rem; border-radius: 4px; }
.tfh-player__club { display: flex; align-items: center; gap: .45rem; color: var(--tfh-muted); font-size: calc(1rem * var(--tfh-scale)); }
.tfh-player__club img { width: calc(24px * var(--tfh-scale)); height: calc(24px * var(--tfh-scale)); object-fit: contain; }

.tfh-player__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.tfh-player__facts li { display: flex; flex-direction: column; gap: .1rem; background: var(--tfh-soft); border-radius: 8px; padding: .5rem .7rem; }
.tfh-player__facts span { font-size: calc(.75rem * var(--tfh-scale)); text-transform: uppercase; letter-spacing: .04em; color: var(--tfh-muted); }
.tfh-player__facts strong { font-size: calc(.98rem * var(--tfh-scale)); }

.tfh-table--stats th, .tfh-table--stats td { text-align: center; }
.tfh-table--stats .tfh-table__team { text-align: left; }
.tfh-table tr.is-total td, .tfh-table tfoot .is-total td { border-top: 2px solid var(--tfh-line); background: var(--tfh-soft); }

.tfh-career { list-style: none; margin: 0; padding: 0; }
.tfh-career__item { display: flex; align-items: baseline; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--tfh-line); font-size: calc(.95rem * var(--tfh-scale)); }
.tfh-career__item:first-child { border-top: 0; }
.tfh-career__date { min-width: 3em; font-weight: 700; color: var(--tfh-muted); }
.tfh-career__arrow { color: var(--tfh-muted); margin: 0 .2rem; }

.tfh-trophies__count { margin: 0 0 .6rem; font-weight: 600; color: var(--tfh-accent); font-size: calc(.95rem * var(--tfh-scale)); }
.tfh-trophies { list-style: none; margin: 0; padding: 0; }
.tfh-trophy { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; border-top: 1px solid var(--tfh-line); font-size: calc(.93rem * var(--tfh-scale)); }
.tfh-trophy:first-child { border-top: 0; }
.tfh-trophy__season { min-width: 5.5em; color: var(--tfh-muted); font-variant-numeric: tabular-nums; }
.tfh-trophy__name { flex: 1; }
.tfh-trophy__place { font-size: calc(.75rem * var(--tfh-scale)); color: var(--tfh-muted); }
.tfh-trophy__place.is-winner { color: var(--tfh-accent); font-weight: 700; }

/* ---------- Squad ---------- */

.tfh-squad { max-width: 720px; margin: 0 auto; }
.tfh-squad__group { margin-bottom: 1.2rem; }
.tfh-squad__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.tfh-squad__player a, .tfh-squad__player { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid var(--tfh-line); border-radius: 10px; background: var(--tfh-bg); text-decoration: none; color: inherit; }
.tfh-squad__player a:hover { border-color: var(--tfh-accent); }
.tfh-squad__photo { width: calc(38px * var(--tfh-scale)); height: calc(38px * var(--tfh-scale)); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tfh-squad__name { flex: 1; font-size: calc(.95rem * var(--tfh-scale)); font-weight: 500; }
.tfh-squad__num { display: inline-block; min-width: 1.6em; color: var(--tfh-muted); font-variant-numeric: tabular-nums; }
.tfh-squad__age { color: var(--tfh-muted); font-size: calc(.85rem * var(--tfh-scale)); }