.afp-board {
	--afp-card: #111927;
	--afp-card-border: #293548;
	--afp-ink: #f3f6ff;
	--afp-muted: #a5b0cb;
	--afp-blue: #2d5d91;
	--afp-gold: #f4ca58;
	background: #f8f8f9;
	box-sizing: border-box;
	color: #111827;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 24px auto;
	max-width: 1080px;
	padding: clamp(12px, 3vw, 24px);
}

.afp-board * { box-sizing: border-box; }
.afp-board__header { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin: 0 4px 24px; }
.afp-board__header h2 { color: #101827; font-size: clamp(1.6rem, 5vw, 2.25rem); letter-spacing: -.04em; line-height: 1; margin: 6px 0 0; }
.afp-board__header time { color: #667085; font-size: .9rem; white-space: nowrap; }
.afp-board__eyebrow { color: #9b6a00; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.afp-date-navigation { align-items: center; display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto auto; margin: 0 4px 18px; }
.afp-date-navigation form { align-items: end; display: flex; gap: 7px; min-width: 0; }
.afp-date-navigation label { color: #667085; display: grid; flex: 1 1 auto; font-size: .66rem; font-weight: 750; gap: 4px; letter-spacing: .06em; min-width: 0; text-transform: uppercase; }
.afp-date-navigation input { appearance: none; background: #fff; border: 1px solid #cfd5df; border-radius: 9px; color: #172033; font: inherit; font-size: .82rem; min-height: 38px; min-width: 0; padding: 7px 9px; width: 100%; }
.afp-date-navigation button, .afp-date-navigation a { align-items: center; background: #fff; border: 1px solid #cfd5df; border-radius: 9px; color: #354052; display: inline-flex; font: inherit; font-size: .72rem; font-weight: 750; justify-content: center; min-height: 38px; padding: 7px 11px; text-decoration: none; }
.afp-date-navigation button { cursor: pointer; }
.afp-date-navigation__arrow { font-size: 1.35rem !important; min-width: 38px; padding: 4px !important; }
.afp-date-navigation__today.is-current { background: #172033; border-color: #172033; color: #fff; }
.afp-date-navigation input:focus-visible, .afp-date-navigation button:focus-visible, .afp-date-navigation a:focus-visible { outline: 2px solid #b27b00; outline-offset: 2px; }

.afp-grid { background: #fff; display: grid; overflow: hidden; padding: 4px 0; }
.afp-card {
	align-items: center;
	background: #fff;
	border: 0;
	color: #182230;
	display: flex;
	gap: 5px;
	justify-content: flex-start;
	padding: 1px 0;
}

.afp-matchup { align-items: center; display: flex; gap: 8px; }
.afp-team { color: #171717; font-size: clamp(1.1rem, 2.7vw, 1.8rem); line-height: 1.16; white-space: nowrap; }
.afp-versus { background: #efa91e; color: #fff; font-size: clamp(.72rem, 1.75vw, 1.05rem); font-weight: 800; line-height: 1; padding: .18em .2em; text-transform: lowercase; }
.afp-final-score { color: #171717; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 700; white-space: nowrap; }

.afp-picks { align-items: center; display: flex; gap: 7px; min-width: 0; }
.afp-picks::before { color: #202020; content: "-"; font-size: clamp(1.1rem, 2.7vw, 1.8rem); }
.afp-pick { align-items: center; display: flex; gap: 5px; white-space: nowrap; }
.afp-pick + .afp-pick::before { color: #9198a3; content: "/"; margin-right: 2px; }
.afp-pick strong { color: #171717; font-size: clamp(1.1rem, 2.7vw, 1.8rem); font-weight: 500; }
.afp-prediction-verdict { align-items: center; border-radius: .28em; color: #fff; display: inline-flex; flex: 0 0 1.35em; font-size: 1.1em; font-weight: 900; height: 1.35em; justify-content: center; line-height: 1; width: 1.35em; }
.afp-prediction-verdict.is-correct { background: #1ba856; }
.afp-prediction-verdict.is-incorrect { background: #e23b44; }

.afp-unavailable { color: #8a94a5; font-size: .85rem; margin: 0; white-space: nowrap; }
.afp-empty { background: #fff; border: 1px dashed #d7dce5; border-radius: 18px; color: #667085; font-size: .9rem; padding: 34px; text-align: center; }
.afp-disclaimer { color: #667085; font-size: .72rem; margin-top: 20px; text-align: center; }
.afp-notice { background: #fff8e6; border-left: 4px solid #d79a12; color: #503b09; margin: 16px 0; padding: 14px 16px; }

@media (max-width: 520px) {
	.afp-board { margin: 0; max-width: none; padding: 10px; width: 100%; }
	.afp-board__header { align-items: start; flex-direction: column; gap: 8px; }
	.afp-grid { width: 100%; }
	.afp-card { align-items: center; flex-wrap: wrap; gap: 2px 5px; justify-content: center; padding: 3px 0; }
	.afp-matchup { display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
	.afp-team { font-size: .92rem; min-width: 0; white-space: normal; }
	.afp-team--home { text-align: right; }
	.afp-team, .afp-picks::before, .afp-pick strong { font-size: .92rem; }
	.afp-versus { font-size: .68rem; }
	.afp-final-score { font-size: .9rem; }
	.afp-picks { gap: 5px; justify-content: center; width: auto; }
	.afp-pick { gap: 4px; }
	.afp-date-navigation { grid-template-columns: auto minmax(0, 1fr) auto; margin-inline: 0; }
	.afp-date-navigation form { align-items: stretch; grid-column: 2; grid-row: 1; }
	.afp-date-navigation form button { display: none; }
	.afp-date-navigation__arrow:first-child { grid-column: 1; grid-row: 1; }
	.afp-date-navigation__arrow:last-child { grid-column: 3; grid-row: 1; }
	.afp-date-navigation__today { grid-column: 2; grid-row: 2; justify-self: center; min-height: 32px !important; padding: 5px 14px !important; }
}

.afp-live-board {
	background: #1a1a1a;
	border-radius: 30px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
	box-sizing: border-box;
	color: #f8f8f8;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 24px auto;
	max-width: 920px;
	overflow: hidden;
}
.afp-live-board * { box-sizing: border-box; }
.afp-live-header { align-items: end; background: #242424; display: flex; gap: 20px; justify-content: space-between; padding: 22px 30px; }
.afp-live-header span { color: #e8bb49; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.afp-live-header h2 { color: #fff; font-size: clamp(1.35rem, 4vw, 1.9rem); line-height: 1; margin: 5px 0 0; }
.afp-live-header time { color: #aaa; font-size: .9rem; white-space: nowrap; }
.afp-live-board .afp-date-navigation { background: #1d1d1d; margin: 0; padding: 14px 30px; }
.afp-live-board .afp-date-navigation label { color: #999; }
.afp-live-board .afp-date-navigation input, .afp-live-board .afp-date-navigation button, .afp-live-board .afp-date-navigation a { background: #292929; border-color: #414141; color: #eee; color-scheme: dark; }
.afp-live-board .afp-date-navigation__today.is-current { background: #f4ca58; border-color: #f4ca58; color: #191919; }
.afp-live-board .afp-date-navigation input:focus-visible, .afp-live-board .afp-date-navigation button:focus-visible, .afp-live-board .afp-date-navigation a:focus-visible { outline-color: #f4ca58; }
.afp-score-group__title { align-items: center; background: #202020; border-bottom: 1px solid #303030; color: #ddd; display: flex; font-size: .76rem; gap: 9px; letter-spacing: .1em; margin: 0; padding: 13px 30px; text-transform: uppercase; }
.afp-score-group__title span { align-items: center; background: #353535; border-radius: 999px; color: #bbb; display: inline-flex; font-size: .64rem; justify-content: center; letter-spacing: 0; min-height: 22px; min-width: 22px; padding: 3px 7px; }
.afp-score-group--live .afp-score-group__title { color: #ffb4b4; }
.afp-score-group--live .afp-score-group__title span { background: #9e2629; color: #fff; }
.afp-score-row { border-bottom: 1px solid #282828; padding: 18px 24px; }
.afp-score-group:last-of-type .afp-score-row:last-child { border-bottom: 0; }
.afp-score-line { align-items: center; appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 10px; grid-template-columns: 48px minmax(0, 1fr) minmax(58px, auto) minmax(0, 1fr) 16px; padding: 0; text-align: inherit; width: 100%; }
.afp-score-line:focus-visible { border-radius: 8px; outline: 2px solid #f4ca58; outline-offset: 6px; }
.afp-score-status { background: #353535; border-radius: 999px; color: #bbb; font-size: .7rem; font-weight: 700; padding: 8px 6px; text-align: center; }
.afp-score-status.is-live { background: #9e2629; color: #fff; }
.afp-score-side { align-items: center; display: flex; gap: 8px; min-width: 0; }
.afp-score-side--home { justify-content: flex-end; }
.afp-score-side--away { justify-content: flex-start; }
.afp-score-side img { flex: 0 0 32px; height: 32px; object-fit: contain; width: 32px; }
.afp-score-team { font-size: clamp(.86rem, 2.5vw, 1.04rem); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.afp-score-side--home .afp-score-team { text-align: right; }
.afp-score-side--away .afp-score-team { text-align: left; }
.afp-score-result { align-items: center; display: inline-flex; font-size: clamp(.96rem, 3vw, 1.14rem); gap: 5px; justify-content: center; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.afp-score-prediction-result { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 1rem; font-size: .88rem; justify-content: center; letter-spacing: 0; line-height: 1; }
.afp-score-prediction-result.is-correct { color: #72ca77; }
.afp-score-prediction-result.is-incorrect { color: #ff7e7e; }
.afp-score-expand { border-bottom: 2px solid #8f8f8f; border-right: 2px solid #8f8f8f; height: 8px; justify-self: end; transform: rotate(45deg); transition: transform .2s ease; width: 8px; }
.afp-score-line[aria-expanded="true"] .afp-score-expand { transform: rotate(225deg); }
.afp-score-tip { align-items: center; background: #232b38; border-left: 3px solid #e5b43f; border-radius: 8px; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; margin: 12px 0 0 58px; padding: 8px 11px; }
.afp-score-tip.is-high { background: #283425; border-left-color: #6fc36a; }
.afp-score-tip span { color: #9ca7b9; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.afp-score-tip strong { color: #fff; font-size: .84rem; text-align: center; }
.afp-score-tip b { color: #f4ca58; font-size: .84rem; }
.afp-match-details { background: #151515; border: 1px solid #303030; border-radius: 12px; margin: 12px 0 0 58px; padding: 18px; }
.afp-match-details[hidden] { display: none; }
.afp-match-details h4 { color: #f4ca58; font-size: .72rem; letter-spacing: .08em; margin: 0 0 12px; text-transform: uppercase; }
.afp-detail-tabs { border-bottom: 1px solid #303030; display: flex; gap: 5px; margin: -3px 0 18px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.afp-detail-tabs::-webkit-scrollbar { display: none; }
.afp-detail-tab { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; color: #a5a5a5; cursor: pointer; flex: 0 0 auto; font: inherit; font-size: .7rem; font-weight: 750; padding: 8px 11px; white-space: nowrap; }
.afp-detail-tab:hover { color: #fff; }
.afp-detail-tab[aria-selected="true"] { background: #29364a; border-color: #3a5680; color: #f4ca58; }
.afp-detail-tab:focus-visible { outline: 2px solid #f4ca58; outline-offset: 2px; }
.afp-detail-panel[hidden] { display: none; }
.afp-detail-panel--overview { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afp-research-grid { display: grid; gap: 7px; }
.afp-research-row { align-items: center; background: #202020; border-radius: 6px; display: grid; font-size: .72rem; gap: 8px; grid-template-columns: 40px minmax(0, 1fr) 40px; padding: 7px 9px; }
.afp-research-row b:first-child { color: #76c7ff; }
.afp-research-row b:last-child { color: #ff9e9e; text-align: right; }
.afp-research-row span { color: #aaa; text-align: center; }
.afp-events { display: grid; align-content: start; gap: 7px; }
.afp-events h4 { margin-bottom: 5px; }
.afp-event { align-items: start; background: #202020; border-radius: 6px; display: grid; gap: 9px; grid-template-columns: 38px minmax(0, 1fr); padding: 8px 9px; }
.afp-event time { color: #f4ca58; font-size: .72rem; font-weight: 800; }
.afp-event strong { display: block; font-size: .76rem; }
.afp-event span { color: #999; display: block; font-size: .65rem; margin-top: 2px; }
.afp-event--card { border-left: 3px solid #edc84f; }
.afp-event--goal { border-left: 3px solid #61bf6b; }
.afp-lineup-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afp-lineup-team { background: #202020; border: 1px solid #2c2c2c; border-radius: 10px; min-width: 0; padding: 14px; }
.afp-lineup-heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.afp-lineup-heading h5 { color: #fff; font-size: .88rem; margin: 0; overflow-wrap: anywhere; }
.afp-lineup-heading b { background: #303b4c; border-radius: 999px; color: #f4ca58; font-size: .67rem; padding: 5px 8px; white-space: nowrap; }
.afp-lineup-coach { color: #aaa; font-size: .67rem; margin: 7px 0 13px; }
.afp-lineup-team h6 { color: #d7d7d7; font-size: .66rem; letter-spacing: .06em; margin: 13px 0 6px; text-transform: uppercase; }
.afp-player-list { color: #bdbdbd; display: grid; font-size: .68rem; gap: 5px; line-height: 1.3; margin: 0; padding-left: 23px; }
.afp-player-list--subs { color: #929292; list-style: none; padding-left: 0; }
.afp-stat-team-names { color: #fff; display: grid; font-size: .78rem; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
.afp-stat-team-names b:last-child { text-align: right; }
.afp-stat-grid { display: grid; gap: 5px; }
.afp-stat-row { align-items: center; background: #202020; border-radius: 6px; display: grid; font-size: .7rem; gap: 8px; grid-template-columns: minmax(44px, 1fr) minmax(110px, 2fr) minmax(44px, 1fr); padding: 8px 10px; }
.afp-stat-row span { color: #aaa; text-align: center; }
.afp-stat-row b:first-child { color: #76c7ff; }
.afp-stat-row b:last-child { color: #ff9e9e; text-align: right; }
.afp-standings-scroll { overflow-x: auto; }
.afp-standings-table { border-collapse: collapse; color: #bbb; font-size: .68rem; min-width: 550px; width: 100%; }
.afp-standings-table th { color: #858585; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }
.afp-standings-table th, .afp-standings-table td { border-bottom: 1px solid #2c2c2c; padding: 8px 7px; text-align: center; }
.afp-standings-table th:nth-child(2), .afp-standings-table td:nth-child(2) { text-align: left; }
.afp-standing-team { color: #eee; font-weight: 700; }
.afp-standing-points { color: #f4ca58; font-weight: 800; }
.afp-details-loading, .afp-details-empty, .afp-details-error { color: #999; font-size: .72rem; grid-column: 1 / -1; margin: 0; }
.afp-details-error { color: #ff9e9e; }
.afp-live-empty { color: #aaa; padding: 40px 24px; text-align: center; }
.afp-live-disclaimer { background: #202020; color: #999; font-size: .68rem; padding: 14px 20px; text-align: center; }

@media (max-width: 620px) {
	.afp-live-board { border-radius: 22px; }
	.afp-live-header { padding: 18px; }
	.afp-live-board .afp-date-navigation { padding: 13px 16px; }
	.afp-score-group__title { padding: 12px 16px; }
	.afp-score-row { padding: 18px 14px; }
	.afp-score-line { gap: 6px; grid-template-columns: 40px minmax(0, 1fr) minmax(42px, auto) minmax(0, 1fr) 12px; }
	.afp-score-status { font-size: .64rem; padding: 7px 4px; }
	.afp-score-side { gap: 5px; }
	.afp-score-side img { flex-basis: 26px; height: 26px; width: 26px; }
	.afp-score-team { font-size: clamp(.72rem, 3.15vw, .9rem); }
	.afp-score-result { font-size: clamp(.8rem, 3.7vw, .94rem); }
	.afp-score-tip { grid-template-columns: 1fr auto; margin-left: 46px; }
	.afp-score-tip span { grid-column: 1 / -1; }
	.afp-score-tip strong { text-align: left; }
	.afp-match-details { margin-left: 46px; padding: 14px; }
	.afp-detail-panel--overview, .afp-lineup-grid { grid-template-columns: minmax(0, 1fr); }
}
