/* football.css — the Football Centre (screens/football): the tabs, the match cards and their grid, the
 * match sheet, My Team, the competitions sheet and Ultra Four. Sizes are the Android app's dp values
 * in CSS pixels. The app may be turned (orientation.js), so sizes follow the classes on <html>
 * (compact, lh-short…) rather than media queries. */
:root { --fb-gold: #FFC53D; }
:root[data-theme="light"] { --fb-gold: #B7791F; }

/* ======================= the screen ======================= */
.football .fb-tabs-wrap { flex: none; margin-top: 6px; }
.fb-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-high); vertical-align: top; }
.fb-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 9px; flex: none;
  font: 400 13px/18px var(--font); color: var(--text-2); white-space: pre; transition: transform 140ms var(--ease), background-color 140ms, color 140ms; }
.fb-tab.fb-sel { background: var(--surface-highest); color: var(--text); font-weight: 600; }
:root[data-theme="light"] .fb-tab.fb-sel { background: #fff; }
.fb-tab.hot { transform: scale(0.97); background: var(--accent); color: var(--on-accent); }
.fb-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.fb-tab.hot .fb-tab-dot { background: var(--on-accent); }
.compact .fb-tabs { display: flex; min-width: 100%; }
.compact .fb-tab { flex: 1 0 auto; padding: 0 12px; }

.fb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 10px; position: relative; }
.fb-tab-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fb-scroll { flex: 1; min-height: 0; padding-bottom: calc(var(--safe-bottom) + 32px); }
.fb-state { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(var(--safe-bottom) + 24px); }
.lh-short .football .fb-tabs-wrap { margin-top: 0; }
.lh-short .fb-body { margin-top: 8px; }
.lh-short .fb-state { padding-top: 8px; gap: 8px; }
.lh-short .fb-state .state-icon { width: 52px; height: 52px; margin-bottom: 0; }

/* the grid: as many 300-wide columns as fit (GridCells.Adaptive(300)) */
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; padding: 4px; align-items: start; }
.fb-full { grid-column: 1 / -1; min-width: 0; }
.fb-wait { display: flex; align-items: center; justify-content: center; height: 160px; }
.fb-wait-tall { height: 180px; }

/* the day chips (Upcoming) */
.fb-days { display: flex; gap: 8px; flex: none; padding-top: 4px; padding-bottom: 8px; }
.fb-days .chip span { white-space: pre; }

/* ======================= a match as a card ======================= */
.fb-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 122px; padding: 12px 14px; border-radius: 16px; background: var(--surface); text-align: left; min-width: 0;
  box-shadow: inset 0 0 0 0.6px var(--separator); transition: transform 160ms var(--ease), box-shadow 300ms; }
.fb-card.fb-tall { height: 140px; }
.fb-card.fb-flash { box-shadow: inset 0 0 0 2px var(--success); }
.fb-card.hot { transform: scale(0.98); }
.fb-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fb-card-league { margin-top: 6px; }
.fb-line { display: flex; align-items: center; min-width: 0; }
.fb-line + .fb-line { margin-top: 8px; }
.fb-line-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; margin-left: 10px; font: 600 14px/19px var(--font); color: var(--text); }
.fb-line.fb-lost .fb-line-name { font-weight: 400; color: var(--text-2); }
.fb-star { display: inline-flex; flex: none; color: var(--accent); }
.fb-line-goals { margin-left: 10px; min-width: 22px; text-align: right; font: 700 18px/24px var(--font); letter-spacing: -0.2px; color: var(--text); }
.fb-line.fb-lost .fb-line-goals { color: var(--text-2); }
.fb-line-goals.fb-scored { color: var(--success); }
.fb-chtag { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 170px; font: 400 12px/16px var(--font); color: var(--text-2); }
.fb-goaltag { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 199px; font: 600 11px/14px var(--font); color: var(--success); }
.fb-chtag .mi, .fb-goaltag .mi { flex: none; }

/* pills (Pill / LivePill / StatusPill) */
.fb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; flex: none; font: 600 11px/14px var(--font); letter-spacing: 0.2px; white-space: pre; }
.fb-pill.fb-soon { background: var(--accent-soft); color: var(--accent); }
.fb-pill.fb-done { background: var(--surface-highest); color: var(--text-2); }
.fb-pill.fb-off { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.fb-pill.fb-live { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.fb-pill.fb-closed { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.fb-pill.fb-gold { background: color-mix(in srgb, var(--fb-gold) 16%, transparent); color: var(--fb-gold); }
.fb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; animation: fb-pulse 900ms ease-in-out infinite alternate; }
@keyframes fb-pulse { from { opacity: 0.35; } to { opacity: 1; } }

/* crests (or their initials) and a competition's badge on white */
.fb-crest { position: relative; display: inline-block; flex: none; overflow: hidden; }
.fb-crest.fb-flat { border-radius: 0 !important; }
.fb-crest-i { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 200ms; }
.fb-crest-i.loaded { opacity: 1; }
.fb-crest .ph-ini { font-size: min(18px, var(--ini)); line-height: 1; }
.fb-lbadge { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 7px; background: rgba(255,255,255,0.92); overflow: hidden; }
:root[data-theme="light"] .fb-lbadge { background: #fff; }

/* headings and notes */
.fb-lhead { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; }
.fb-lhead .t-headline { min-width: 0; }
.fb-lcount { margin-left: -2px; flex: none; }
.fb-stitle { display: flex; align-items: flex-end; gap: 10px; padding: 14px 0 2px; min-width: 0; }
.fb-sdetail { padding-bottom: 2px; }
.fb-note { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 0.6px var(--separator); min-width: 0; }
.fb-none { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fb-none .fb-note { align-self: stretch; }

/* ======================= the match sheet ======================= */
#overlays .sheet.fb-msheet { width: min(860px, 95%, calc(100% - var(--safe-left) - var(--safe-right) - 16px)); height: 94%; max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 8px);
  margin: auto; padding: 18px 0; border-radius: 22px; }
#overlays .fb-msheet .grabber { display: none; }
#overlays .fb-msheet .sh-head { padding: 0 16px 0 22px; }
#overlays .fb-msheet .sh-body { padding: 0 22px; display: flex; flex-direction: column; overflow: hidden; }
.fb-ms-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fb-ms-league { min-width: 0; }
.fb-ms-watch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; flex: none; }
.fb-ms-seg { margin-top: 14px; flex: none; }
.fb-ms-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; margin-top: 12px; padding-bottom: 18px; }
.fb-ms-content::-webkit-scrollbar { display: none; }
.fb-ms-note { padding: 28px 0; text-align: center; }
.fb-ms-wait { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; }
/* a short screen (a phone on its side) or a narrow one: the whole sheet scrolls, scoreboard and all */
:root.lh-short #overlays .fb-msheet .sh-body, :root.compact #overlays .fb-msheet .sh-body { display: block; overflow-y: auto; }
:root.lh-short .fb-ms-body, :root.compact .fb-ms-body { display: block; }
:root.lh-short .fb-ms-content, :root.compact .fb-ms-content { overflow: visible; }
:root.lh-short #overlays .sheet.fb-msheet { padding: 14px 0 10px; }

/* the scoreboard */
.fb-sb { display: flex; align-items: flex-start; padding-top: 8px; flex: none; }
.fb-sb-team { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fb-sb-team > * { max-width: 100%; }
.fb-sb-crest { margin-bottom: 10px; }
.fb-sb-mid { width: 190px; flex: none; padding-top: 6px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fb-sb-score { font: 700 40px/48px var(--font); letter-spacing: -0.6px; white-space: pre; color: var(--text); }
.fb-sb-time { font: 700 34px/40px var(--font); letter-spacing: -0.6px; color: var(--text); }
.fb-sb-pill { margin-top: 8px; }
.fb-sb-venue { margin-top: 6px; max-width: 100%; }
:root.lh-short .fb-sb-crest, :root.compact .fb-sb-crest { width: 48px !important; height: 48px !important; border-radius: 10px !important; margin-bottom: 8px; }
:root.lh-short .fb-sb-score { font-size: 34px; line-height: 40px; }
:root.compact .fb-sb-mid { width: 128px; }
:root.compact .fb-sb-score { font-size: 30px; line-height: 36px; }
:root.compact .fb-sb-time { font-size: 28px; line-height: 34px; }

/* events down a centre line */
.fb-events { display: flex; flex-direction: column; gap: 4px; }
.fb-ev { display: flex; align-items: center; padding: 3px 0; }
.fb-ev-side { flex: 1; min-width: 0; display: flex; }
.fb-ev-side.fb-h { justify-content: flex-end; }
.fb-ev-min { width: 58px; flex: none; margin: 0 10px; padding: 4px 0; border-radius: 99px; background: var(--surface-high); text-align: center; font: 600 12px/16px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; }
.fb-ev-item { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.fb-ev-text { min-width: 0; display: flex; flex-direction: column; }
.fb-ev-item.fb-end .fb-ev-text { align-items: flex-end; text-align: right; }
.fb-ev-text > * { max-width: 100%; }
.fb-ev-goal { font-weight: 600; }
.fb-ev-ic { display: inline-flex; flex: none; }
.fb-ev-card { width: 12px; height: 16px; border-radius: 2px; background: #FFD60A; flex: none; }
.fb-ev-card.fb-red { background: #E5383B; }
.fb-half { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.fb-half > span:first-child, .fb-half > span:last-child { flex: 1; height: 1px; background: var(--separator); }

/* statistics */
.fb-stats { display: flex; flex-direction: column; gap: 12px; padding: 0 4px; }
.fb-stat-row { display: flex; align-items: center; }
.fb-stat-v { width: 64px; flex: none; font: 600 14px/19px var(--font); color: var(--text); white-space: nowrap; }
.fb-stat-v.fb-end { text-align: right; }
.fb-stat-v.fb-lo { color: var(--text-2); }
.fb-stat-name { flex: 1; min-width: 0; text-align: center; }
.fb-stat-bar { display: flex; gap: 4px; height: 6px; margin-top: 5px; }
.fb-bar { min-width: 0; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 50%, transparent); }
.fb-bar.fb-on { background: var(--accent); }

/* line-ups: side by side when there's room for both (560 wide), else one above the other */
.fb-lineups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(271px, 100%), 1fr)); gap: 18px; align-items: start; }
.fb-sheet { min-width: 0; padding: 14px; border-radius: 16px; background: var(--surface-high); }
.fb-sheet-head { display: flex; align-items: center; gap: 10px; }
.fb-sheet-cap { margin: 10px 0 4px; }
.fb-player { display: flex; align-items: center; gap: 0; padding: 3px 0; }
.fb-player-no { width: 30px; flex: none; font: 600 13px/18px var(--font); color: var(--accent); }
.fb-player .t-footnote { flex: none; margin-left: 8px; }

/* ======================= My Team ======================= */
.fb-team { display: flex; align-items: center; gap: 16px; margin-top: 4px; padding: 16px; border-radius: 18px; background: var(--surface); }
.fb-team-text { min-width: 0; }
.fb-team-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.fb-team-country { margin-right: 8px; }
.fb-form { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex: none; font: 700 10px/14px var(--font); color: #fff; }
.fb-form.fb-w { background: var(--success); }
.fb-form.fb-l { background: var(--danger); }
.fb-form.fb-d { background: var(--text-3); }
.compact .fb-team { flex-wrap: wrap; }
.compact .fb-team .btn { margin-left: 72px; }

/* choosing a team */
#overlays .fb-tpicker .sh-body { display: flex; flex-direction: column; overflow: hidden; }
.fb-tp-field { display: flex; align-items: center; gap: 12px; flex: none; }
.fb-tp-out { flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; margin-top: 12px; }
.fb-tp-out::-webkit-scrollbar { display: none; }
.fb-tp-line { padding: 2px 2px 6px; }
.fb-tp-wait { height: 80px; display: flex; align-items: center; justify-content: center; }
.fb-tp-spin { display: inline-flex; }
.fb-tp-list { display: flex; flex-direction: column; gap: 2px; }
.fb-trow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border-radius: 10px; text-align: left; transition: background-color 120ms, transform 140ms var(--ease); }
.fb-trow.hot { background: var(--accent); color: var(--on-accent); }
.fb-trow.hot .c2, .fb-trow.hot .ca { color: var(--on-accent); }
.fb-trow-crest { width: 34px; height: 34px; padding: 3px; border-radius: 8px; background: rgba(255,255,255,0.92); display: inline-flex; flex: none; }
.fb-trow-check { display: inline-flex; flex: none; }
.fb-tp-stop { display: flex; justify-content: flex-end; margin-top: 14px; flex: none; }

/* ======================= the competitions sheet ======================= */
.fb-lf-list { max-height: min(380px, calc(var(--lh) * 0.88 - 175px)); overflow-y: auto; margin: 0 -6px; }
.fb-lf-group { padding: 14px 12px 6px; }
.fb-lf-group:first-child { padding-top: 2px; }
.fb-lf-row { min-height: 44px; padding: 8px 12px; border-radius: 10px; }
.fb-lf-row .opt-label { font-weight: 400; }
.fb-lf-row .opt-check { display: inline-flex; visibility: hidden; }
.fb-lf-row .opt-check .mi { font-size: 19px; color: var(--accent); }
.fb-lf-row.fb-on .opt-check { visibility: visible; }
.fb-lf-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* ======================= Ultra Four ======================= */
.fb-u4 { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.fb-u4 > * { flex: none; }
.fb-u4-intro { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.compact .fb-u4-intro { flex-wrap: wrap; }
.fb-comp { padding: 18px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 0.6px var(--separator); margin: 0 4px; }
.compact .fb-comp { padding: 14px; }
.fb-comp-head { display: flex; align-items: center; gap: 14px; }
.fb-comp-head > .fb-pill { margin-left: -4px; }
.fb-trophy { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--fb-gold) 16%, transparent); color: var(--fb-gold); }
.fb-prize { font-weight: 600; color: var(--fb-gold); }
.fb-rollover { margin-top: 10px; display: flex; }
.fb-comp-rule { margin-top: 10px; }
.fb-fxs { margin-top: 12px; }
.fb-fx-sep { height: 1px; margin: 8px 0; background: var(--separator); }
.fb-fx-row { display: flex; align-items: center; }
.fb-fx-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.fb-fx-team.fb-h { justify-content: flex-end; margin-right: 12px; }
.fb-fx-team.fb-a { margin-left: 12px; }
.fb-fx-name { min-width: 0; font: 600 14px/19px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-fx-team.fb-h .fb-fx-name { text-align: right; }
.fb-fx-dash { padding: 0 8px; font: 600 18px/24px var(--font); color: var(--text-3); }
.fb-fx-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; min-height: 20px; }
.fb-fx-mark { display: inline-flex; }
/* on a narrow screen each side's crest sits over its name */
.compact .fb-fx-team { flex-direction: column; gap: 4px; }
.compact .fb-fx-team.fb-h { flex-direction: column-reverse; margin-right: 8px; }
.compact .fb-fx-team.fb-a { margin-left: 8px; }
.compact .fb-fx-name { white-space: normal; text-align: center !important; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; }
.fb-box { position: relative; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--surface-highest); display: inline-flex; align-items: center; justify-content: center;
  font: 700 18px/24px var(--font); color: var(--text); transition: transform 140ms var(--ease), background-color 140ms, color 140ms; }
.fb-box.fb-empty { color: var(--text-3); }
.fb-box.fb-locked { background: color-mix(in srgb, var(--surface-high) 60%, transparent); cursor: default; }
.fb-box.hot { transform: scale(1.06); background: var(--accent); color: var(--on-accent); }
.fb-box-lock { position: absolute; right: 2px; bottom: 2px; display: inline-flex; color: var(--text-3); }
.fb-u4-submit { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.compact .fb-u4-submit { flex-wrap: wrap; }
.fb-u4-note { flex: 1; min-width: 0; color: var(--text-2); }
.fb-u4-note.fb-good { color: var(--success); }
.fb-outcome { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-high); }
.fb-outcome-ic { display: inline-flex; flex: none; color: var(--text-2); }
.fb-outcome-text { font: 500 14px/19px var(--font); color: var(--text); }
.fb-outcome.fb-gold .fb-outcome-ic, .fb-outcome.fb-gold .fb-outcome-text { color: var(--fb-gold); }

/* the goals picker: 0 to 15, four to a row (eight on a short screen) */
.fb-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-bottom: 4px; }
:root.lh-short .fb-goals { grid-template-columns: repeat(8, 1fr); }
.fb-goal { height: 52px; border-radius: 12px; background: var(--surface-high); display: flex; align-items: center; justify-content: center; font: 700 18px/24px var(--font); color: var(--text);
  transition: transform 140ms var(--ease), background-color 140ms, color 140ms; }
.fb-goal.fb-sel { background: var(--accent-soft); color: var(--accent); }
.fb-goal.hot { transform: scale(0.96); background: var(--accent); color: var(--on-accent); }

/* ======================= Home › Matchday (football/matchday.js) ======================= */
.md-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.compact .md-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.md-empty { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: var(--surface); }
.md-empty-ico { display: inline-flex; color: var(--text-2); }
.md-livepill { display: inline-flex; margin-right: 14px; }
.md-centre { width: 168px; flex: none; text-align: left; }
.md-centre-art { height: 94px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #34D058, #0B7A3B); transition: transform 140ms var(--ease); }
.md-centre.hot .md-centre-art { transform: scale(0.97); }