/* ============================================================================
   FOOTBALL DATA PLUGIN (fdp-) — FRONTEND SKINS
   RTL-first · system-font · CSS-variable themed · namespaced .fdp-*
   --------------------------------------------------------------------------
   ORGANIZATION
     1. DESIGN TOKENS (:root)        — colors, spacing, radius, shadow, type
     2. BASE / RESET                 — page scaffold, RTL setup, helpers
     3. GLOBAL COMPONENTS            — team, form-pill, tabs, badge, card,
                                       skeleton, logo placeholder
     4. PAGE BLOCKS                  — appended per deliverable below
   ========================================================================== */

/* ============================================================================
   1. DESIGN TOKENS
   Re-theme the entire skin from here. Dark-theme tokens are scaffolded under
   [data-fdp-theme="dark"] (light is the shipped default).
   ========================================================================== */
:root{
  /* — Brand / accent (calm blue; kept distinct from semantic W/D/L colors) — */
  --fdp-accent:            oklch(0.52 0.17 252);
  --fdp-accent-strong:     oklch(0.45 0.17 252);
  --fdp-accent-soft:       oklch(0.95 0.035 252);
  --fdp-accent-contrast:   #ffffff;

  /* — Cool-grey neutral ramp (hue 255, very low chroma) — */
  --fdp-bg:                oklch(0.984 0.004 255);   /* page background      */
  --fdp-surface:           oklch(1 0 0);             /* cards / tables       */
  --fdp-surface-2:         oklch(0.975 0.005 255);   /* subtle fills, hovers */
  --fdp-surface-3:         oklch(0.955 0.006 255);   /* headers, zebra       */
  --fdp-border:            oklch(0.916 0.006 255);
  --fdp-border-strong:     oklch(0.86 0.008 255);

  --fdp-text:              oklch(0.27 0.02 262);     /* primary text         */
  --fdp-text-2:            oklch(0.46 0.018 260);    /* secondary            */
  --fdp-text-3:            oklch(0.62 0.014 258);    /* muted / meta         */
  --fdp-text-on-accent:    #ffffff;

  /* — Semantic (form, status, zones) — */
  --fdp-win:               oklch(0.60 0.14 152);
  --fdp-win-soft:          oklch(0.94 0.05 152);
  --fdp-draw:              oklch(0.76 0.12 80);
  --fdp-draw-soft:         oklch(0.95 0.05 85);
  --fdp-loss:              oklch(0.58 0.19 27);
  --fdp-loss-soft:         oklch(0.94 0.05 27);
  --fdp-live:              oklch(0.57 0.21 27);

  /* — Qualification / relegation zone markers (per-competition overridable) — */
  --fdp-zone-champions:    oklch(0.52 0.17 252);
  --fdp-zone-europa:       oklch(0.58 0.14 200);
  --fdp-zone-conference:   oklch(0.62 0.13 165);
  --fdp-zone-promotion:    oklch(0.60 0.14 152);
  --fdp-zone-playoff:      oklch(0.76 0.12 80);
  --fdp-zone-relegation:   oklch(0.58 0.19 27);

  /* — Spacing scale — */
  --fdp-s-1: 4px;  --fdp-s-2: 8px;  --fdp-s-3: 12px; --fdp-s-4: 16px;
  --fdp-s-5: 20px; --fdp-s-6: 24px; --fdp-s-7: 32px; --fdp-s-8: 40px;
  --fdp-s-9: 56px;

  /* — Radius — */
  --fdp-radius-sm: 6px;
  --fdp-radius:    8px;
  --fdp-radius-lg: 12px;
  --fdp-radius-pill: 999px;

  /* — Shadow (subtle, never glowy) — */
  --fdp-shadow-sm: 0 1px 2px oklch(0.5 0.02 260 / 0.06);
  --fdp-shadow:    0 1px 2px oklch(0.5 0.02 260 / 0.06), 0 2px 6px oklch(0.5 0.02 260 / 0.06);
  --fdp-shadow-lg: 0 8px 24px oklch(0.4 0.03 260 / 0.12);

  /* — Type — swap --fdp-font in one place to change the whole skin — */
  --fdp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --fdp-fs-xs: 11px; --fdp-fs-sm: 12px; --fdp-fs-base: 14px; --fdp-fs-md: 15px;
  --fdp-fs-lg: 18px; --fdp-fs-xl: 22px; --fdp-fs-2xl: 28px; --fdp-fs-3xl: 40px;
  --fdp-fw-normal: 400; --fdp-fw-medium: 500; --fdp-fw-semibold: 600; --fdp-fw-bold: 700;
}

/* Dark-theme scaffold (not shipped; flip [data-fdp-theme="dark"] on a wrapper) */
[data-fdp-theme="dark"]{
  --fdp-bg:            oklch(0.205 0.012 260);
  --fdp-surface:       oklch(0.245 0.014 260);
  --fdp-surface-2:     oklch(0.275 0.014 260);
  --fdp-surface-3:     oklch(0.305 0.015 260);
  --fdp-border:        oklch(0.34 0.014 260);
  --fdp-border-strong: oklch(0.42 0.016 260);
  --fdp-text:          oklch(0.95 0.01 260);
  --fdp-text-2:        oklch(0.78 0.012 260);
  --fdp-text-3:        oklch(0.62 0.012 260);
  --fdp-accent-soft:   oklch(0.32 0.05 252);
}

/* ============================================================================
   2. BASE / RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
.fdp-root{
  font-family:var(--fdp-font);
  font-size:var(--fdp-fs-base);
  line-height:1.5;
  color:var(--fdp-text);
  background:var(--fdp-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.fdp-root *{ margin:0; }
.fdp-root img{ display:block; max-width:100%; }
.fdp-root button{ font:inherit; color:inherit; cursor:pointer; }
.fdp-root a{ color:inherit; text-decoration:none; }
.fdp-root ul,.fdp-root ol{ list-style:none; padding:0; }
.fdp-root table{ border-collapse:collapse; width:100%; }

/* Numbers/scores ALWAYS read LTR + tabular, even inside RTL flow */
.fdp-num{
  direction:ltr;
  unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Visually-hidden (a11y labels) */
.fdp-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================================
   3. GLOBAL COMPONENTS
   ========================================================================== */

/* --- 3.1 .fdp-card — base surface --------------------------------------- */
.fdp-card{
  background:var(--fdp-surface);
  border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius-lg);
  box-shadow:var(--fdp-shadow-sm);
}
.fdp-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--fdp-s-3);
  padding:var(--fdp-s-4) var(--fdp-s-5);
  border-bottom:1px solid var(--fdp-border);
}
.fdp-card__title{ font-size:var(--fdp-fs-md); font-weight:var(--fdp-fw-semibold); }
.fdp-card__body{ padding:var(--fdp-s-5); }

/* --- 3.2 Logo placeholder — tinted circle + initials --------------------- */
/* Convention: <span class="fdp-logo" data-initials="ZM" style="--fdp-logo-h:210"></span>
   Drop a real <img> inside to override the placeholder. --fdp-logo-h sets hue. */
.fdp-logo{
  --fdp-logo-h: 255;
  position:relative;
  display:inline-grid; place-items:center;
  width:40px; height:40px; flex:0 0 auto;
  border-radius:var(--fdp-radius-pill);
  background:oklch(0.93 0.04 var(--fdp-logo-h));
  color:oklch(0.45 0.12 var(--fdp-logo-h));
  font-weight:var(--fdp-fw-bold);
  font-size:0.9em;
  letter-spacing:.02em;
  overflow:hidden;
  border:1px solid oklch(0.88 0.05 var(--fdp-logo-h));
  user-select:none;
}
.fdp-logo::after{ content:attr(data-initials); }
.fdp-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--fdp-surface); }
.fdp-logo--sm{ width:26px; height:26px; font-size:var(--fdp-fs-xs); }
.fdp-logo--lg{ width:64px; height:64px; font-size:var(--fdp-fs-lg); }
.fdp-logo--xl{ width:88px; height:88px; font-size:var(--fdp-fs-2xl); }
.fdp-logo--square{ border-radius:var(--fdp-radius); }

/* --- 3.3 .fdp-team — logo + name lockup (RTL aware) ---------------------- */
.fdp-team{
  display:inline-flex; align-items:center; gap:var(--fdp-s-3);
  min-width:0;
}
.fdp-team__name{
  font-weight:var(--fdp-fw-medium);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fdp-team--sm{ gap:var(--fdp-s-2); font-size:var(--fdp-fs-sm); }
.fdp-team--md{ gap:var(--fdp-s-3); font-size:var(--fdp-fs-base); }
.fdp-team--lg{ gap:var(--fdp-s-4); font-size:var(--fdp-fs-lg); font-weight:var(--fdp-fw-semibold); }
/* stacked variant: logo above centered name (used in match header) */
.fdp-team--stack{ flex-direction:column; gap:var(--fdp-s-3); text-align:center; }
.fdp-team--stack .fdp-team__name{ white-space:normal; }

/* --- 3.4 .fdp-form-pill — recent W/D/L --------------------------------- */
.fdp-form{ display:inline-flex; gap:var(--fdp-s-1); direction:ltr; }
.fdp-form-pill{
  display:inline-grid; place-items:center;
  width:20px; height:20px; border-radius:var(--fdp-radius-sm);
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-bold);
  color:#fff; line-height:1;
}
.fdp-form-pill--win{  background:var(--fdp-win); }
.fdp-form-pill--draw{ background:var(--fdp-draw); color:oklch(0.32 0.06 80); }
.fdp-form-pill--loss{ background:var(--fdp-loss); }
.fdp-form-pill--empty{ background:var(--fdp-surface-3); color:var(--fdp-text-3); }

/* --- 3.5 .fdp-badge — status chips ------------------------------------- */
.fdp-badge{
  display:inline-flex; align-items:center; gap:var(--fdp-s-1);
  padding:3px var(--fdp-s-2); border-radius:var(--fdp-radius-pill);
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-semibold);
  letter-spacing:.02em; line-height:1.4;
  background:var(--fdp-surface-3); color:var(--fdp-text-2);
}
.fdp-badge--live{ background:var(--fdp-loss-soft); color:var(--fdp-live); }
.fdp-badge--finished{ background:var(--fdp-surface-3); color:var(--fdp-text-2); }
.fdp-badge--scheduled{ background:var(--fdp-accent-soft); color:var(--fdp-accent-strong); }
.fdp-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* --- 3.6 .fdp-tabs — tablist + panels ---------------------------------- */
.fdp-tabs__list{
  display:flex; gap:var(--fdp-s-1);
  overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--fdp-border);
}
.fdp-tabs__list::-webkit-scrollbar{ display:none; }
.fdp-tab{
  position:relative;
  padding:var(--fdp-s-3) var(--fdp-s-4);
  white-space:nowrap;
  font-size:var(--fdp-fs-base); font-weight:var(--fdp-fw-medium);
  color:var(--fdp-text-2);
  background:none; border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s;
}
.fdp-tab:hover{ color:var(--fdp-text); }
.fdp-tab[aria-selected="true"]{
  color:var(--fdp-accent-strong);
  border-bottom-color:var(--fdp-accent);
}
button.fdp-tab{ appearance:none; -webkit-appearance:none; cursor:pointer; font-family:inherit; line-height:inherit; }
.fdp-tabs__panel{ padding-top:var(--fdp-s-5); }
.fdp-tabs__panel[hidden]{ display:none; }

/* --- 3.7 .fdp-skeleton — loading shimmer ------------------------------- */
.fdp-skeleton{
  position:relative; overflow:hidden;
  background:var(--fdp-surface-3);
  border-radius:var(--fdp-radius-sm);
}
.fdp-skeleton::after{
  content:""; position:absolute; inset:0;
  transform:translateX(100%); /* RTL: shimmer sweeps from left edge inward */
  background:linear-gradient(90deg, transparent,
            oklch(1 0 0 / 0.55), transparent);
  animation:fdp-shimmer 1.3s infinite;
}
@keyframes fdp-shimmer{ 100%{ transform:translateX(-100%); } }
.fdp-skel-line{ height:12px; }
.fdp-skel-circle{ border-radius:50%; }
@media (prefers-reduced-motion: reduce){
  .fdp-skeleton::after{ animation:none; }
}

/* --- 3.8 .fdp-empty — empty state -------------------------------------- */
.fdp-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--fdp-s-2); text-align:center;
  padding:var(--fdp-s-8) var(--fdp-s-5);
  color:var(--fdp-text-3);
}
.fdp-empty__icon{
  width:44px; height:44px; border-radius:var(--fdp-radius-pill);
  display:grid; place-items:center;
  background:var(--fdp-surface-3); color:var(--fdp-text-3);
  margin-bottom:var(--fdp-s-1);
}
.fdp-empty__icon svg{ width:22px; height:22px; }
.fdp-empty__title{ font-weight:var(--fdp-fw-semibold); color:var(--fdp-text-2); }
.fdp-empty__text{ font-size:var(--fdp-fs-sm); max-width:34ch; }

/* small shared section label inside cards */
.fdp-block-label{
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-semibold);
  letter-spacing:.06em; text-transform:uppercase; color:var(--fdp-text-3);
}

/* ============================================================================
   4. PAGE BLOCKS  (appended per deliverable below)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   DELIVERABLE 1 — MATCH PAGE  .fdp-match (+ --upcoming / --live / --finished)
   -------------------------------------------------------------------------- */
.fdp-match{
  background:var(--fdp-surface);
  border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius-lg);
  box-shadow:var(--fdp-shadow);
  overflow:hidden;
}
/* meta strip: competition · round · date/time */
.fdp-match__meta{
  display:flex; align-items:center; justify-content:center; gap:var(--fdp-s-3);
  flex-wrap:wrap;
  padding:var(--fdp-s-3) var(--fdp-s-5);
  background:var(--fdp-surface-2);
  border-bottom:1px solid var(--fdp-border);
  font-size:var(--fdp-fs-sm); color:var(--fdp-text-2);
}
.fdp-match__meta b{ color:var(--fdp-text); font-weight:var(--fdp-fw-semibold); }
.fdp-match__meta .sep{ color:var(--fdp-border-strong); }

/* header: home | center | away */
.fdp-match__header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:var(--fdp-s-4);
  padding:var(--fdp-s-7) var(--fdp-s-5) var(--fdp-s-6);
}
.fdp-match__side{ display:flex; flex-direction:column; align-items:center; gap:var(--fdp-s-3); min-width:0; }
.fdp-match__center{ display:flex; flex-direction:column; align-items:center; gap:var(--fdp-s-2); min-width:140px; }
.fdp-match__form{ margin-top:var(--fdp-s-1); }

/* center: score */
.fdp-match__score{
  display:flex; align-items:center; gap:var(--fdp-s-3);
  font-size:var(--fdp-fs-3xl); font-weight:var(--fdp-fw-bold);
  line-height:1; letter-spacing:.01em;
}
.fdp-match__score .dash{ color:var(--fdp-text-3); font-weight:var(--fdp-fw-medium); }
.fdp-match__vs{ font-size:var(--fdp-fs-xl); font-weight:var(--fdp-fw-semibold); color:var(--fdp-text-3); }
.fdp-match__ht{ font-size:var(--fdp-fs-sm); color:var(--fdp-text-3); }
.fdp-match__ht .fdp-num{ color:var(--fdp-text-2); font-weight:var(--fdp-fw-medium); }

/* .fdp-status — full-time / scheduled label */
.fdp-status{
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-bold);
  letter-spacing:.06em; text-transform:uppercase; color:var(--fdp-text-2);
}

/* .fdp-live-badge — pulsing LIVE + minute */
.fdp-live-badge{
  display:inline-flex; align-items:center; gap:var(--fdp-s-2);
  padding:4px var(--fdp-s-3); border-radius:var(--fdp-radius-pill);
  background:var(--fdp-loss-soft); color:var(--fdp-live);
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-bold); letter-spacing:.06em;
}
.fdp-live-badge__dot{ width:8px; height:8px; border-radius:50%; background:var(--fdp-live); position:relative; }
.fdp-live-badge__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--fdp-live);
  animation:fdp-pulse 1.6s ease-out infinite;
}
@keyframes fdp-pulse{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(2.6); opacity:0; } }
.fdp-match__minute{ font-size:var(--fdp-fs-md); font-weight:var(--fdp-fw-bold); color:var(--fdp-live); }
@media (prefers-reduced-motion: reduce){ .fdp-live-badge__dot::after{ animation:none; } }

/* .fdp-countdown */
.fdp-countdown{ display:flex; gap:var(--fdp-s-2); direction:ltr; }
.fdp-countdown__seg{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:46px; padding:var(--fdp-s-2) var(--fdp-s-1);
  background:var(--fdp-surface-3); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius);
}
.fdp-countdown__num{ font-size:var(--fdp-fs-xl); font-weight:var(--fdp-fw-bold); line-height:1; }
.fdp-countdown__lbl{ font-size:9px; font-weight:var(--fdp-fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:var(--fdp-text-3); }
.fdp-match__kickoff{ font-size:var(--fdp-fs-sm); color:var(--fdp-text-2); }

/* .fdp-prediction — show/hide-able banner */
.fdp-prediction{
  margin:0 var(--fdp-s-5) var(--fdp-s-5);
  padding:var(--fdp-s-4);
  border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius);
  background:var(--fdp-surface-2);
}
.fdp-prediction__title{ display:flex; align-items:center; gap:var(--fdp-s-2); font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-semibold); color:var(--fdp-text-2); margin-bottom:var(--fdp-s-3); }
.fdp-prediction__bar{ display:flex; height:30px; border-radius:var(--fdp-radius-sm); overflow:hidden; background:var(--fdp-surface-3); }/* RTL: home seg first → right, matches home team on right */
.fdp-prediction__seg{ display:grid; place-items:center; font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-bold); color:#fff; }
.fdp-prediction__seg--home{ background:var(--fdp-accent); }
.fdp-prediction__seg--draw{ background:var(--fdp-draw); color:oklch(0.32 0.06 80); }
.fdp-prediction__seg--away{ background:var(--fdp-text-2); }
.fdp-prediction__legend{ display:flex; justify-content:space-between; margin-top:var(--fdp-s-2); font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }

/* tabs wrapper inside match */
.fdp-match__tabs{ padding:0 var(--fdp-s-5) var(--fdp-s-5); }
.fdp-match__tabs .fdp-tabs__list{ margin:0 calc(-1*var(--fdp-s-5)); padding:0 var(--fdp-s-5); }

/* .fdp-scorers — per team scorer list */
.fdp-scorers{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fdp-s-5); }
.fdp-scorers__col + .fdp-scorers__col{ border-inline-start:1px solid var(--fdp-border); padding-inline-start:var(--fdp-s-5); }
.fdp-scorers__col--away{ text-align:start; }
.fdp-scorer{ display:flex; align-items:center; gap:var(--fdp-s-2); padding:var(--fdp-s-1) 0; font-size:var(--fdp-fs-sm); }
.fdp-scorer svg{ width:14px; height:14px; color:var(--fdp-text-3); flex:0 0 auto; }
.fdp-scorer__min{ color:var(--fdp-text-3); }
.fdp-scorers__col--away .fdp-scorer{ flex-direction:row-reverse; }

/* .fdp-events — live/finished timeline */
.fdp-events{ display:flex; flex-direction:column; }
.fdp-event{
  display:grid; grid-template-columns:1fr 52px 1fr; align-items:center; gap:var(--fdp-s-3);
  padding:var(--fdp-s-3) 0; border-bottom:1px solid var(--fdp-border);
}
.fdp-event:last-child{ border-bottom:0; }
.fdp-event__min{
  justify-self:center; min-width:40px; text-align:center;
  font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-bold); color:var(--fdp-text-2);
  background:var(--fdp-surface-3); border-radius:var(--fdp-radius-pill); padding:2px 6px;
}
.fdp-event__side{ display:flex; align-items:center; gap:var(--fdp-s-2); min-width:0; }
.fdp-event__side--home{ justify-content:flex-start; }      /* RTL start = right */
.fdp-event__side--away{ justify-content:flex-end; flex-direction:row-reverse; }
.fdp-event__icon{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; flex:0 0 auto; }
.fdp-event__icon svg{ width:14px; height:14px; }
.fdp-event__icon--goal{ background:var(--fdp-win-soft); color:var(--fdp-win); }
.fdp-event__icon--yellow{ background:var(--fdp-draw-soft); color:oklch(0.5 0.1 80); }
.fdp-event__icon--red{ background:var(--fdp-loss-soft); color:var(--fdp-loss); }
.fdp-event__icon--sub{ background:var(--fdp-accent-soft); color:var(--fdp-accent-strong); }
.fdp-event__txt{ min-width:0; }
.fdp-event__player{ font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fdp-event__detail{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }

/* .fdp-stats — opposing bars */
.fdp-stats{ display:flex; flex-direction:column; gap:var(--fdp-s-4); }
.fdp-stat__top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; margin-bottom:6px; }
.fdp-stat__val{ font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-bold); }
.fdp-stat__label{ text-align:center; font-size:var(--fdp-fs-xs); color:var(--fdp-text-2); font-weight:var(--fdp-fw-medium); }
.fdp-stat__bar{ display:flex; height:8px; border-radius:var(--fdp-radius-pill); overflow:hidden; direction:ltr; background:var(--fdp-surface-3); gap:2px; }
.fdp-stat__fill{ height:100%; }
.fdp-stat__fill--home{ background:var(--fdp-accent); border-radius:0 var(--fdp-radius-pill) var(--fdp-radius-pill) 0; }
.fdp-stat__fill--away{ background:var(--fdp-text-2); border-radius:var(--fdp-radius-pill) 0 0 var(--fdp-radius-pill); margin-inline-start:auto; }
/* bar reads home(right) vs away(left): home fill anchored right, away left */
.fdp-stat__bar{ position:relative; }
.fdp-stat__fill--home{ order:2; }
.fdp-stat__fill--away{ order:1; }

/* .fdp-h2h — head to head comparison rows */
.fdp-h2h{ display:flex; flex-direction:column; gap:var(--fdp-s-3); }
.fdp-h2h__row{ display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:var(--fdp-s-3); }
.fdp-h2h__val{ font-weight:var(--fdp-fw-bold); text-align:center; }
.fdp-h2h__bar{ display:flex; height:6px; gap:2px; }/* RTL: home fill → right */
.fdp-h2h__fill{ background:var(--fdp-surface-3); border-radius:var(--fdp-radius-pill); height:100%; }
.fdp-h2h__fill--home{ background:var(--fdp-accent); }
.fdp-h2h__fill--away{ background:var(--fdp-text-2); }
.fdp-h2h__lbl{ grid-column:1/-1; text-align:center; font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); margin-top:-2px; }

/* .fdp-fixture — compact result/fixture row (used in tabs & "round matches") */
.fdp-fixture{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--fdp-s-3);
  padding:var(--fdp-s-3) var(--fdp-s-2); border-bottom:1px solid var(--fdp-border);
}
.fdp-fixture:last-child{ border-bottom:0; }
.fdp-fixture__home{ justify-content:flex-end; flex-direction:row-reverse; }
.fdp-fixture__away{ justify-content:flex-start; }
.fdp-fixture__mid{
  min-width:54px; text-align:center; font-weight:var(--fdp-fw-bold);
  font-size:var(--fdp-fs-base);
}
.fdp-fixture__mid .t{ font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-medium); color:var(--fdp-text-3); }

/* .fdp-lineup — pitch + list */
.fdp-lineup{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--fdp-s-5); align-items:start; }
.fdp-pitch{
  position:relative; aspect-ratio:68/52; border-radius:var(--fdp-radius);
  background:
    repeating-linear-gradient(180deg, oklch(0.55 0.08 152) 0 11.11%, oklch(0.52 0.08 152) 11.11% 22.22%);
  border:1px solid oklch(0.45 0.07 152);
  overflow:hidden;
}
.fdp-pitch__lines{ position:absolute; inset:0; }
.fdp-pitch__lines::before{ /* halfway line */
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(255,255,255,.45);
}
.fdp-pitch__lines::after{ /* center circle */
  content:""; position:absolute; left:50%; top:50%; width:22%; aspect-ratio:1;
  transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.45); border-radius:50%;
}
.fdp-pitch__half{ position:absolute; left:50%; transform:translateX(-50%); width:42%; aspect-ratio:42/14; border:2px solid rgba(255,255,255,.4); }
.fdp-pitch__half--top{ top:0; border-top:0; }
.fdp-pitch__half--bottom{ bottom:0; border-bottom:0; }
.fdp-dot{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px; width:54px;
}
.fdp-dot__circle{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-bold); color:#fff;
  border:2px solid rgba(255,255,255,.9); box-shadow:var(--fdp-shadow-sm);
}
.fdp-dot--home .fdp-dot__circle{ background:var(--fdp-accent); }
.fdp-dot--away .fdp-dot__circle{ background:var(--fdp-loss); }
.fdp-dot__name{ font-size:9px; font-weight:var(--fdp-fw-semibold); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); white-space:nowrap; }
.fdp-lineup__list{ font-size:var(--fdp-fs-sm); }
.fdp-lineup__formation{ display:flex; align-items:center; justify-content:space-between; gap:var(--fdp-s-2); margin-bottom:var(--fdp-s-2); }
.fdp-lineup__formation b{ font-weight:var(--fdp-fw-bold); }
.fdp-lineup__player{ display:flex; align-items:center; gap:var(--fdp-s-2); padding:6px 0; border-bottom:1px solid var(--fdp-border); }
.fdp-lineup__player:last-child{ border-bottom:0; }
.fdp-lineup__num{ width:22px; text-align:center; color:var(--fdp-text-3); font-weight:var(--fdp-fw-bold); }
@media (max-width:760px){ .fdp-lineup{ grid-template-columns:1fr; } }

@media (max-width:680px){
  .fdp-match__header{ grid-template-columns:1fr auto 1fr; gap:var(--fdp-s-2); padding:var(--fdp-s-5) var(--fdp-s-3); }
  .fdp-match__score{ font-size:var(--fdp-fs-2xl); }
  .fdp-team--lg .fdp-team__name{ font-size:var(--fdp-fs-base); }
  .fdp-scorers{ grid-template-columns:1fr; }
  .fdp-scorers__col + .fdp-scorers__col{ border-inline-start:0; padding-inline-start:0; border-top:1px solid var(--fdp-border); padding-top:var(--fdp-s-3); }
}

/* ----------------------------------------------------------------------------
   DELIVERABLE 2 — COMPETITION PAGE  .fdp-competition
   -------------------------------------------------------------------------- */
/* header */
.fdp-competition__header{
  display:flex; align-items:center; gap:var(--fdp-s-4); flex-wrap:wrap;
  padding:var(--fdp-s-5);
  background:var(--fdp-surface); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius-lg); box-shadow:var(--fdp-shadow-sm);
}
.fdp-competition__title{ display:flex; align-items:center; gap:var(--fdp-s-3); margin-inline-end:auto; }
.fdp-competition__title h3{ font-size:var(--fdp-fs-xl); font-weight:var(--fdp-fw-bold); }
.fdp-competition__title p{ font-size:var(--fdp-fs-sm); color:var(--fdp-text-3); }
.fdp-season-select{
  position:relative; display:inline-flex; align-items:center; gap:var(--fdp-s-2);
  padding:var(--fdp-s-2) var(--fdp-s-3); padding-inline-end:var(--fdp-s-5);
  border:1px solid var(--fdp-border); border-radius:var(--fdp-radius);
  background:var(--fdp-surface-2); font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium);
  cursor:pointer;
}
.fdp-season-select svg{ width:14px; height:14px; color:var(--fdp-text-3); }
.fdp-comp-tabs{ width:100%; }

/* segmented control (filters / phase / stage switchers) */
.fdp-seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--fdp-surface-3); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius); 
}
.fdp-seg__btn{
  padding:6px var(--fdp-s-3); border:0; background:none; border-radius:var(--fdp-radius-sm);
  font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium); color:var(--fdp-text-2); white-space:nowrap;
}
.fdp-seg__btn[aria-pressed="true"]{ background:var(--fdp-surface); color:var(--fdp-text); box-shadow:var(--fdp-shadow-sm); }

/* --- Format 1 — LEAGUE STANDINGS .fdp-standings --- */
.fdp-standings{ width:100%; overflow-x:auto; }
.fdp-standings table{ min-width:560px; }
.fdp-standings th, .fdp-standings td{
  padding:var(--fdp-s-3) var(--fdp-s-2); text-align:center;
  font-size:var(--fdp-fs-sm); border-bottom:1px solid var(--fdp-border); white-space:nowrap;
}
.fdp-standings th{
  font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-semibold); color:var(--fdp-text-3);
  text-transform:uppercase; letter-spacing:.03em; background:var(--fdp-surface-2);
  position:sticky; top:0;
}
.fdp-standings tbody tr:hover{ background:var(--fdp-surface-2); }
.fdp-c-pos{ position:relative; width:54px; }
.fdp-c-pos .fdp-num{ font-weight:var(--fdp-fw-semibold); }
.fdp-c-club{ text-align:start !important; min-width:160px; }
.fdp-c-club .fdp-team{ font-weight:var(--fdp-fw-medium); }
.fdp-c-pts{ font-weight:var(--fdp-fw-bold); color:var(--fdp-text); }
.fdp-c-form{ width:128px; }
.fdp-c-form .fdp-form{ justify-content:center; }
/* zone marker — colored bar pinned to the row's inline-start (right edge in RTL) */
.fdp-zone{
  position:absolute; inset-inline-start:0; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:transparent;
}
.fdp-zone--champions{  background:var(--fdp-zone-champions); }
.fdp-zone--europa{     background:var(--fdp-zone-europa); }
.fdp-zone--conference{ background:var(--fdp-zone-conference); }
.fdp-zone--promotion{  background:var(--fdp-zone-promotion); }
.fdp-zone--playoff{    background:var(--fdp-zone-playoff); }
.fdp-zone--relegation{ background:var(--fdp-zone-relegation); }
/* position trend arrows */
.fdp-pos-trend{ display:inline-flex; width:0; height:0; margin-inline-start:4px; vertical-align:middle;
  border-inline:4px solid transparent; }
.fdp-pos-trend--up{ border-bottom:6px solid var(--fdp-win); }
.fdp-pos-trend--down{ border-top:6px solid var(--fdp-loss); }
.fdp-pos-trend--same{ width:7px; height:2px; background:var(--fdp-text-3); border:0; border-radius:2px; }
/* standings legend */
.fdp-standings__legend{ display:flex; flex-wrap:wrap; gap:var(--fdp-s-4); padding:var(--fdp-s-4) var(--fdp-s-5); border-top:1px solid var(--fdp-border); font-size:var(--fdp-fs-xs); color:var(--fdp-text-2); }
.fdp-standings__legend span{ display:inline-flex; align-items:center; gap:var(--fdp-s-2); }
.fdp-standings__legend i{ width:10px; height:10px; border-radius:3px; }
/* compact variant (used in match tabs) */
.fdp-standings--compact table{ min-width:0; }
.fdp-standings--compact th, .fdp-standings--compact td{ padding:var(--fdp-s-2); }

/* --- Format 2 — KNOCKOUT .fdp-knockout --- */
.fdp-round-header{
  display:flex; align-items:center; gap:var(--fdp-s-3);
  margin:var(--fdp-s-5) 0 var(--fdp-s-3);
  font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-bold); color:var(--fdp-text-2);
  text-transform:uppercase; letter-spacing:.04em;
}
.fdp-round-header::after{ content:""; flex:1; height:1px; background:var(--fdp-border); }
.fdp-ko-match{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--fdp-s-3);
  padding:var(--fdp-s-3) var(--fdp-s-4); background:var(--fdp-surface);
  border:1px solid var(--fdp-border); border-radius:var(--fdp-radius); margin-bottom:var(--fdp-s-2);
}
.fdp-ko-match__home{ justify-content:flex-end; flex-direction:row-reverse; }
.fdp-ko-match__away{ justify-content:flex-start; }
.fdp-ko-match__agg{ text-align:center; min-width:60px; }
.fdp-ko-match__agg b{ font-size:var(--fdp-fs-lg); font-weight:var(--fdp-fw-bold); }
.fdp-ko-match__legs{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }
.fdp-penalties{ display:block; margin-top:2px; font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-semibold); color:var(--fdp-accent-strong); }

/* --- Visual bracket .fdp-bracket --- */
.fdp-bracket{ display:flex; overflow-x:auto; padding:var(--fdp-s-2) 0 var(--fdp-s-4); gap:0; scrollbar-width:thin; }
.fdp-bracket__round{ display:flex; flex-direction:column; flex:1 0 196px; }
.fdp-bracket__round-title{ text-align:center; font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-bold); color:var(--fdp-text-3); text-transform:uppercase; letter-spacing:.05em; padding-bottom:var(--fdp-s-3); }
.fdp-bracket__col{ display:flex; flex-direction:column; flex:1; }
.fdp-bracket__match{ flex:1 1 0; display:flex; align-items:center; position:relative; }
.fdp-bracket__box{
  width:100%; margin-inline-end:22px;
  background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius);
  overflow:hidden;
}
.fdp-bracket__round:last-child .fdp-bracket__box{ margin-inline-end:0; }
.fdp-bracket__team{
  display:flex; align-items:center; gap:var(--fdp-s-2); justify-content:space-between;
  padding:6px var(--fdp-s-3); font-size:var(--fdp-fs-sm);
}
.fdp-bracket__team + .fdp-bracket__team{ border-top:1px solid var(--fdp-border); }
.fdp-bracket__team .nm{ display:flex; align-items:center; gap:var(--fdp-s-2); min-width:0; }
.fdp-bracket__team .nm span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fdp-bracket__team--win{ font-weight:var(--fdp-fw-bold); }
.fdp-bracket__team--win .sc{ color:var(--fdp-accent-strong); }
/* connectors: horizontal stub toward the next (inner) round + vertical pair link */
.fdp-bracket__round:not(:last-child) .fdp-bracket__match::after{
  content:""; position:absolute; inset-inline-start:0; top:50%;
  width:22px; height:2px; background:var(--fdp-border-strong); transform:translateY(-50%);
}
.fdp-bracket__round:not(:last-child) .fdp-bracket__match:nth-child(odd)::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; height:50%;
  width:2px; background:var(--fdp-border-strong);
}
.fdp-bracket__round:not(:last-child) .fdp-bracket__match:nth-child(even)::before{
  content:""; position:absolute; inset-inline-start:0; bottom:50%; height:50%;
  width:2px; background:var(--fdp-border-strong);
}
/* incoming stub on rounds after the first (right side of box) */
.fdp-bracket__round:not(:first-child) .fdp-bracket__box{ position:relative; }
.fdp-bracket__round:not(:first-child) .fdp-bracket__box::after{
  content:""; position:absolute; inset-inline-end:-22px; top:50%;
  width:22px; height:2px; background:var(--fdp-border-strong); transform:translateY(-50%);
}

/* --- Format 3 — GROUPS .fdp-groups --- */
.fdp-groups{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--fdp-s-5); }
.fdp-group-table{ background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius-lg); overflow:hidden; }
.fdp-group-table__head{ padding:var(--fdp-s-3) var(--fdp-s-4); background:var(--fdp-surface-2); border-bottom:1px solid var(--fdp-border); font-weight:var(--fdp-fw-bold); font-size:var(--fdp-fs-sm); }
.fdp-group-table table{ width:100%; }
.fdp-group-table th, .fdp-group-table td{ padding:var(--fdp-s-2) var(--fdp-s-3); font-size:var(--fdp-fs-sm); text-align:center; border-bottom:1px solid var(--fdp-border); }
.fdp-group-table tr:last-child td{ border-bottom:0; }
.fdp-group-table th{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); font-weight:var(--fdp-fw-semibold); }
.fdp-group-table .fdp-c-club{ text-align:start; }
.fdp-group-table td.fdp-c-pos{ position:relative; }

/* --- Format 4 — TWO-PHASE .fdp-two-phase --- */
.fdp-two-phase__split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fdp-s-5); }
.fdp-two-phase__group h4{ display:flex; align-items:center; gap:var(--fdp-s-2); font-size:var(--fdp-fs-md); font-weight:var(--fdp-fw-semibold); margin-bottom:var(--fdp-s-3); }
.fdp-two-phase__group h4 i{ width:10px; height:10px; border-radius:3px; }
@media (max-width:760px){ .fdp-two-phase__split{ grid-template-columns:1fr; } }

/* --- News .fdp-news --- */
.fdp-news{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--fdp-s-5); }
.fdp-news__card{ background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius-lg); overflow:hidden; transition:box-shadow .15s, transform .15s; }
.fdp-news__card:hover{ box-shadow:var(--fdp-shadow); transform:translateY(-2px); }
.fdp-news__thumb{
  aspect-ratio:16/9; background:
    repeating-linear-gradient(135deg, var(--fdp-surface-3) 0 10px, var(--fdp-surface-2) 10px 20px);
  display:grid; place-items:center; color:var(--fdp-text-3);
  font-family:ui-monospace,monospace; font-size:var(--fdp-fs-xs);
}
.fdp-news__body{ padding:var(--fdp-s-4); }
.fdp-news__date{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }
.fdp-news__title{ font-size:var(--fdp-fs-base); font-weight:var(--fdp-fw-semibold); margin:4px 0 6px; line-height:1.4; }
.fdp-news__excerpt{ font-size:var(--fdp-fs-sm); color:var(--fdp-text-2); line-height:1.55; text-wrap:pretty; }

/* ----------------------------------------------------------------------------
   DELIVERABLE 3 — MATCH CENTER / FIXTURES  .fdp-matchcenter
   -------------------------------------------------------------------------- */
.fdp-matchcenter{ display:flex; flex-direction:column; gap:var(--fdp-s-4); }
/* top filter tabs: Important · All · Live · Finished */
.fdp-mc-tabs{ display:flex; gap:var(--fdp-s-1); }
.fdp-mc-tabs__btn{
  display:inline-flex; align-items:center; gap:var(--fdp-s-2);
  padding:var(--fdp-s-2) var(--fdp-s-4); border-radius:var(--fdp-radius-pill);
  background:var(--fdp-surface-2); border:1px solid var(--fdp-border);
  font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium); color:var(--fdp-text-2); white-space:nowrap;
}
.fdp-mc-tabs__btn[aria-pressed="true"]{ background:var(--fdp-accent); border-color:var(--fdp-accent); color:#fff; }
.fdp-mc-tabs__btn .star{ width:13px; height:13px; }
.fdp-mc-tabs__btn .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--fdp-live); }

/* day slider */
.fdp-day-slider{ display:flex; align-items:stretch; gap:var(--fdp-s-2); }
.fdp-day-slider__nav{
  flex:0 0 auto; width:36px; display:grid; place-items:center;
  background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius);
  color:var(--fdp-text-2);
}
.fdp-day-slider__nav:hover{ background:var(--fdp-surface-2); }
.fdp-day-slider__nav svg{ width:16px; height:16px; }
.fdp-day-slider__track{ display:flex; gap:var(--fdp-s-2); overflow-x:auto; scrollbar-width:none; flex:1; }
.fdp-day-slider__track::-webkit-scrollbar{ display:none; }
.fdp-day{
  flex:0 0 auto; min-width:62px; padding:var(--fdp-s-2) var(--fdp-s-3);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius);
  position:relative;
}
.fdp-day__dow{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }
.fdp-day__date{ font-size:var(--fdp-fs-base); font-weight:var(--fdp-fw-semibold); }
.fdp-day[aria-pressed="true"]{ background:var(--fdp-accent); border-color:var(--fdp-accent); }
.fdp-day[aria-pressed="true"] .fdp-day__dow,.fdp-day[aria-pressed="true"] .fdp-day__date{ color:#fff; }
.fdp-day__has{ width:5px; height:5px; border-radius:50%; background:var(--fdp-accent); position:absolute; bottom:5px; }
.fdp-day[aria-pressed="true"] .fdp-day__has{ background:#fff; }
.fdp-day--today .fdp-day__date{ color:var(--fdp-accent-strong); }
/* calendar trigger + popover */
.fdp-cal-wrap{ position:relative; flex:0 0 auto; }
.fdp-cal-btn{
  width:36px; height:100%; display:grid; place-items:center;
  background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius); color:var(--fdp-text-2);
}
.fdp-cal-btn svg{ width:17px; height:17px; }
.fdp-calendar{
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:20;
  width:248px; padding:var(--fdp-s-4);
  background:var(--fdp-surface); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius-lg); box-shadow:var(--fdp-shadow-lg);
}
.fdp-calendar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--fdp-s-3); }
.fdp-calendar__head b{ font-size:var(--fdp-fs-sm); }
.fdp-calendar__nav{ display:grid; place-items:center; width:26px; height:26px; border-radius:var(--fdp-radius-sm); color:var(--fdp-text-2); }
.fdp-calendar__nav:hover{ background:var(--fdp-surface-2); }
.fdp-calendar__nav svg{ width:14px; height:14px; }
.fdp-calendar__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.fdp-calendar__dow{ font-size:9px; color:var(--fdp-text-3); text-align:center; padding:2px 0; font-weight:var(--fdp-fw-semibold); }
.fdp-calendar__day{ aspect-ratio:1; display:grid; place-items:center; border-radius:var(--fdp-radius-sm); font-size:var(--fdp-fs-xs); border:0; background:none; color:var(--fdp-text); }
.fdp-calendar__day:hover{ background:var(--fdp-surface-2); }
.fdp-calendar__day--muted{ color:var(--fdp-text-3); opacity:.5; }
.fdp-calendar__day--has{ font-weight:var(--fdp-fw-bold); position:relative; }
.fdp-calendar__day--has::after{ content:""; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--fdp-accent); }
.fdp-calendar__day--active{ background:var(--fdp-accent); color:#fff; }

/* league group header */
.fdp-mc-league-header{
  display:flex; align-items:center; gap:var(--fdp-s-3);
  padding:var(--fdp-s-3) var(--fdp-s-4);
  background:var(--fdp-surface-2); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius) var(--fdp-radius) 0 0; border-bottom:0;
}
.fdp-mc-league-header__name{ font-weight:var(--fdp-fw-semibold); font-size:var(--fdp-fs-base); }
.fdp-mc-league-header__meta{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); margin-inline-start:auto; }
.fdp-mc-group{ margin-bottom:var(--fdp-s-5); }
.fdp-mc-list{ background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:0 0 var(--fdp-radius) var(--fdp-radius); overflow:hidden; }

/* match row — 3 variants */
.fdp-mc-match{
  display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:var(--fdp-s-3);
  padding:var(--fdp-s-3) var(--fdp-s-4); border-bottom:1px solid var(--fdp-border);
}
.fdp-mc-match:last-child{ border-bottom:0; }
.fdp-mc-match:hover{ background:var(--fdp-surface-2); }
.fdp-mc-match__status{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center; font-size:var(--fdp-fs-sm); color:var(--fdp-text-3);
}
.fdp-mc-match__time{ font-weight:var(--fdp-fw-semibold); color:var(--fdp-text-2); }
.fdp-mc-match__min{ font-size:var(--fdp-fs-xs); font-weight:var(--fdp-fw-bold); color:var(--fdp-live); }
.fdp-mc-match__teams{ display:flex; flex-direction:column; gap:var(--fdp-s-2); min-width:0; }
.fdp-mc-row{ display:flex; align-items:center; gap:var(--fdp-s-2); justify-content:space-between; }
.fdp-mc-row .fdp-team{ min-width:0; }
.fdp-mc-row__sc{ font-weight:var(--fdp-fw-bold); font-size:var(--fdp-fs-base); min-width:18px; text-align:center; }
.fdp-mc-match--live .fdp-mc-row__sc{ color:var(--fdp-live); }
.fdp-mc-row--win{ font-weight:var(--fdp-fw-bold); }
.fdp-mc-row--lose{ color:var(--fdp-text-3); }
.fdp-mc-match__pens{ grid-column:2/3; font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }
.fdp-mc-match__fav{ color:var(--fdp-text-3); width:30px; display:grid; place-items:center; }
.fdp-mc-match__fav svg{ width:16px; height:16px; }
.fdp-mc-match__fav--on{ color:var(--fdp-draw); }
.fdp-mc-match__live-tag{ align-self:center; }

/* ----------------------------------------------------------------------------
   DELIVERABLE 4 — LEAGUES LIST  .fdp-leagues
   -------------------------------------------------------------------------- */
/* Variant A — grid of cards */
.fdp-leagues--grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--fdp-s-4); }
.fdp-league-card{
  display:flex; flex-direction:column; align-items:center; gap:var(--fdp-s-3); text-align:center;
  padding:var(--fdp-s-5) var(--fdp-s-4);
  background:var(--fdp-surface); border:1px solid var(--fdp-border); border-radius:var(--fdp-radius-lg);
  transition:box-shadow .15s, transform .15s, border-color .15s;
}
.fdp-league-card:hover{ box-shadow:var(--fdp-shadow); transform:translateY(-2px); border-color:var(--fdp-border-strong); }
.fdp-league-card__name{ font-weight:var(--fdp-fw-semibold); font-size:var(--fdp-fs-base); }
.fdp-league-card__meta{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }

/* Variant B — sidebar pills */
.fdp-leagues--sidebar{ display:flex; flex-direction:column; gap:2px; max-width:280px; }
.fdp-league-btn{
  display:flex; align-items:center; gap:var(--fdp-s-3);
  padding:var(--fdp-s-2) var(--fdp-s-3); border-radius:var(--fdp-radius);
  background:none; border:1px solid transparent; text-align:start; width:100%;
  font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium); color:var(--fdp-text-2);
}
.fdp-league-btn:hover{ background:var(--fdp-surface-2); color:var(--fdp-text); }
.fdp-league-btn[aria-current="true"]{ background:var(--fdp-accent-soft); color:var(--fdp-accent-strong); font-weight:var(--fdp-fw-semibold); }
.fdp-league-btn__name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fdp-league-btn__count{ font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }

/* @@BLOCK-CSS@@ */