/* Shared fade-out used by live DOM pruning. */
.live-prune-fade {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
/* =====================================================================
   HOME DASHBOARD — Phase 3 restyle (2026-04-24)
   Tokens from theme.css — no hard-coded hex outside hero gradient scope.
   ===================================================================== */

/* ─── Container ──────────────────────────────────────────────────────── */
.home-container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   HERO — stadium banner with gradient wash
   ============================================================ */
.home-hero {
  --hm-hero-radius: 14px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--hm-hero-radius);
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
  color: var(--home-hero-ink);
  background: var(--home-hero-bg);
  box-shadow: var(--home-hero-shadow);
  min-height: 0;
  height: auto;
}

/* Stadium backdrop — CSS-only fallback if no asset is provided.
   Replace the background of .home-hero__bg with a photo via an
   `.home-hero--with-photo` modifier if/when we ship one. */
.home-hero__bg {
  position: absolute;
  inset: 0;
  background: var(--home-hero-deco-bg);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.home-hero__wash {
  position: absolute;
  inset: 0;
  background: var(--home-hero-wash-bg);
  opacity: var(--home-hero-wash-opacity);
  pointer-events: none;
  mix-blend-mode: var(--home-hero-wash-blend);
  z-index: 0;
}

.home-hero > :not(.home-hero__bg):not(.home-hero__wash) {
  position: relative;
  z-index: 1;
}

/* Faint pitch-line grid overlay — subtle tactical texture */
.home-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,
      color-mix(in srgb, var(--on-surface) 4%, transparent) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--on-surface) 4%, transparent) 1px,
      transparent 1px);
  background-size: 56px 56px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 30%, transparent 80%);
}
.home-hero > .home-hero__grid { z-index: 0; }

/* Header row — brand on the left, date chip on the right */
.home-hero__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-hero__content {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.home-hero__title {
  margin: 0;
  line-height: 1.2;
}

.home-hero__brand {
  display: inline-block;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--home-hero-ink);
  line-height: 1.1;
  padding-bottom: 0.06em;
}

.home-hero__brand-q {
  display: inline-block;
  vertical-align: baseline;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  margin-left: -0.04em;
  /* Extend box to cover full italic visual bounds:
     right covers the italic lean, bottom covers the Q tail */
  padding: 0.05em 0.25em 0.15em 0.05em;
}

.home-hero__tagline {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--home-hero-ink) 68%, transparent);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

/* ============================================================
   FILTER BAR — pill tabs + filter button
   ============================================================ */
.home-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: 6px;
  border-radius: 14px;
  background: var(--surface-container);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-container) 5%, transparent);
}
.home-filter-bar__tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.home-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--on-surface-variant);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.home-filter-btn i { font-size: 0.95rem; }
.home-filter-btn:hover {
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  color: var(--on-surface);
}
.home-filter-btn.is-active {
  background: color-mix(in srgb, var(--primary-container) 14%, transparent);
  color: var(--primary-container);
}
.home-filter-btn--live .home-filter-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--error);
  animation: pulse-live 1.8s ease-in-out infinite;
}
.home-filter-btn--live.is-active {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}

.home-filter-bar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  color: var(--on-surface);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease;
}
.home-filter-bar__sort:hover {
  background: color-mix(in srgb, var(--primary-container) 10%, transparent);
  color: var(--primary-container);
}

/* ============================================================
   SECTION HEADERS (shared)
   ============================================================ */
.home-section-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--on-surface);
  margin: 0;
}

/* ============================================================
   TWO-COLUMN MAIN LAYOUT
   ============================================================ */
.home-layout-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}

.home-sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ============================================================
   TODAY'S MATCHES — premium redesign
   ============================================================ */
.home-today-section {
  background: var(--surface-container);
  border-radius: var(--te-radius-xl);
  box-shadow: var(--te-shadow-md);
  overflow: hidden;
  padding-bottom: 4px;
}

/* ── Section header ── */
.home-today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
}
.home-today-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface);
}
.home-today-title__bar {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--error);
  flex-shrink: 0;
}
.home-today-badge {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: 0.07em;
  padding: 4px 12px;
  border-radius: var(--te-radius-full);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

/* ── League group ── */
.home-league-block {
  margin-bottom: 0;
}
.home-league-block + .home-league-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 6%, transparent);
}

/* League header — logo left, name centered, count right */
.home-league-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 20px 10px;
  background: var(--surface-container-high);
  border-radius: var(--te-radius-md);
  margin: 0 12px 6px;
}
.home-league-header__center {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}
.home-league-count {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
  background: var(--surface-container);
  padding: 3px 10px;
  border-radius: var(--te-radius-full);
  white-space: nowrap;
  justify-self: end;
}

.home-today-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 24px 16px;
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}

/* ============================================================
   COMPETITIONS (League Cards)
   ============================================================ */
.home-competitions-section { margin-top: var(--space-2); }
.home-competitions-section > .d-flex { margin-bottom: 16px; }
.home-competitions-section .home-competitions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
  /* Recessed well: a darker tier behind the white cards so each league lifts
     out clearly (light mode otherwise reads white-on-white). */
  background: var(--surface-highest);
  padding: 16px;
  border-radius: var(--te-radius-xl);
}

/* Dark mode already steps card (surface-container) above the page; keep the
   well transparent so it doesn't invert into a lighter panel. */
html.theme-dark .home-competitions-section .home-competitions-grid {
  background: transparent;
  padding: 0;
}

/* Header normalisation for league overview cards: keep the title on one line
   and hide the Official/Live toggle so every card's standings table starts at
   the same y. Without these rules a longer name like "2. Bundesliga" wraps,
   the toggle wraps with it, and adjacent cards drift out of alignment. */
.home-competitions-grid-item > .es-card > header {
  flex-wrap: nowrap;
  min-height: 56px;
  align-items: center;
  background: var(--surface-container-high);
}

/* Lift each league card off the near-white page and clip the header band to
   the card radius, so leagues read as clearly separated (esp. light mode,
   where surface-container card vs surface page is otherwise white-on-white). */
.home-competitions-grid-item > .es-card {
  box-shadow: var(--te-shadow-ambient);
  overflow: hidden;
}
.home-competitions-grid-item .standings-card-title-group {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.home-competitions-grid-item .standings-card-title-group .mc-standings-heading {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-competitions-grid-item .standings-card-title-group .mc-standings-heading > img {
  flex-shrink: 0;
}
.home-competitions-grid-item .standings-mode-toggle {
  display: none;
}

.home-competitions-section .home-competitions-grid.home-competitions-grid--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.standings-card-league-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .home-competitions-section .home-competitions-grid.home-competitions-grid--two-col {
    grid-template-columns: 1fr !important;
  }
}

.home-competitions-section .home-league-card.es-card {
  background: var(--surface-container);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-container) 7%, transparent);
  transition: box-shadow 180ms ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.home-competitions-section .home-league-card.es-card:hover {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-container) 14%, transparent);
}
.home-competitions-section .home-league-card > header {
  padding: 14px 16px;
  border-bottom: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-container) 4%, transparent),
    transparent);
  gap: 10px;
}
.home-competitions-section .home-league-card > header a:first-child {
  min-width: 0;
  flex: 1 1 auto;
  align-items: center !important;
  color: var(--on-surface) !important;
  gap: 10px !important;
}
.home-competitions-section .home-league-card > header a:first-child > span:last-child {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-competitions-section .home-league-card .premium-league-logo-sm {
  width: 32px;
  height: 32px;
  padding: 3px;
  background: var(--surface-container);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-surface) 6%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-competitions-section .home-league-card .premium-league-logo-sm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-competitions-section .home-league-card > .home-league-card-body {
  padding: 4px 14px 14px !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.home-competitions-section .home-league-next {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 6%, transparent);
}
.home-competitions-section .home-league-next__label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}
.home-competitions-section .home-league-next-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  color: var(--on-surface);
  text-decoration: none;
  transition: background 140ms ease;
}
.home-competitions-section .home-league-next-link:hover {
  background: color-mix(in srgb, var(--primary-container) 8%, transparent);
}
.home-competitions-section .home-league-next-link .home-match-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-competitions-section .home-league-next-link .home-match-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--on-surface);
  min-width: 0;
}
.home-competitions-section .home-league-next-link .home-match-team .premium-team-logo-sm {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.home-competitions-section .home-league-next-link .home-match-team .premium-team-logo-sm img {
  width: auto;
  height: 100%;
  max-width: 34px;
  object-fit: contain;
}
.home-competitions-section .home-league-next-team-name {
  font-weight: 700;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-competitions-section .home-league-next__kickoff {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--on-surface) 8%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.home-competitions-section .home-league-next__live-row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--on-surface) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.home-competitions-section .home-league-next__score {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.home-competitions-section .home-league-next--empty {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 6%, transparent);
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  font-style: italic;
}

/* ============================================================
   SIDEBAR — POWER RANKINGS + QUICK LINKS
   ============================================================ */
.home-widget.es-card {
  background: var(--surface-container);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-container) 7%, transparent);
  overflow: hidden;
  padding: 4px 10px 12px !important;
}
.home-widget.es-card > header {
  padding: 14px 16px 10px;
  margin: -4px -10px 0;
  border-bottom: 0;
  background: transparent;
}
.home-widget.es-card .premium-section-title {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant) !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.home-widget.es-card > header a.small {
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--primary-container) !important;
  text-decoration: none !important;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 140ms ease;
}
.home-widget.es-card > header a.small:hover {
  background: color-mix(in srgb, var(--primary-container) 12%, transparent) !important;
}

/* Power rows */
.home-power-row {
  display: grid;
  grid-template-columns: 28px 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  transition: background 140ms ease;
}
.home-power-row + .home-power-row {
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 5%, transparent);
}
.home-power-row:hover {
  background: color-mix(in srgb, var(--primary-container) 6%, transparent);
}

.home-power-rank {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--on-surface-variant);
  text-align: center;
  font-variant-numeric: tabular-nums;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  line-height: 1;
}
.home-power-rank--gold {
  color: #7a5a00;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--warning) 38%, transparent);
}
.home-power-rank--silver {
  color: var(--on-surface-variant);
  background: linear-gradient(135deg, var(--surface-highest), var(--outline));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--outline) 30%, transparent);
}
.home-power-rank--bronze {
  color: #5a2e11;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--warning) 36%, transparent);
}
.home-power-row .premium-team-logo-sm {
  width: 28px;
  height: 28px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.home-power-row .premium-team-logo-sm img {
  width: auto;
  height: 100%;
  max-width: 48px;
  object-fit: contain;
}
.home-power-team {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
a.home-power-team.lu-link-team {
  display: block;
  color: var(--on-surface);
  text-decoration: none;
}
a.home-power-team.lu-link-team:hover { color: var(--primary-container); }
.home-power-score {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--primary-container);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-container) 10%, transparent);
  min-width: 46px;
  text-align: center;
}

/* Quick links */
.home-quick-links {
  display: grid;
  gap: 8px;
}
/* Quick-links buttons now use .tactical-btn (components/tactical-controls.css).
   The chevron arrow + justify-between layout was specific to .home-quick-links
   children; if needed it can be re-applied with a .tactical-btn--with-chevron
   modifier in the future, but currently the unified ghost button is sufficient. */

/* Bookmakers */
.home-bookmakers-widget.es-card {
  display: grid;
  gap: 12px;
}
.home-bookmakers-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.home-bookmakers-list { display: grid; gap: 6px; }
.home-bookmaker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  transition: background 140ms ease;
}
.home-bookmaker-row:hover {
  background: color-mix(in srgb, var(--primary-container) 7%, transparent);
}
.home-bookmaker-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.home-bookmaker-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.home-bookmaker-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
}
.home-bookmaker-metrics {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-bookmaker-score {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--on-surface-variant);
}
.home-bookmaker-rank {
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--primary-container);
}
.home-bookmakers-summary {
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.home-bookmakers-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-bookmakers-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.home-bookmakers-value,
.home-bookmakers-confidence {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .home-layout-row { grid-template-columns: 1fr; }
  .home-sidebar    { position: static; }
  .home-competitions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  .home-container { padding-left: 0; padding-right: 0; }

  /* The brand already sits next to the search bar in the header — the in-page
     hero is a duplicate, so drop it on mobile. */
  .home-hero { display: none; }

  #home-today-section .home-match-card {
    grid-template-columns: 52px 1fr auto;
    padding: 10px 12px 10px 14px;
  }
  #home-today-section .home-match-time { font-size: 0.85rem; }
  #home-today-section .home-match-team { font-size: 0.85rem; }
  .home-competitions-section .home-competitions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Filter bar: drop the Filter button and keep all four tabs on one line. */
  .home-filter-bar { flex-wrap: nowrap; }
  .home-filter-bar__sort { display: none; }
  .home-filter-bar__tabs { flex-wrap: nowrap; }
  .home-filter-btn { padding: 8px 8px; }
  .home-filter-btn i { display: none; }

  /* League group header: the match count duplicates the visible rows, and the
     round label sits as a redundant second name beside the league pill in the
     tight mobile header — drop both so only the centered league tag + name show. */
  .home-league-count { display: none; }
  .home-league-round { display: none; }

  /* Today's match rows: the status badge is redundant (live shows in the Live
     section, a score means finished, VS means upcoming). Drop it and the spacer
     column, enlarge the crests, and shrink the scoreline so logos read larger
     than the result. Scoped to the grouped today list — the Live section keeps
     its full row treatment. */
  .home-league-block .tactical-match-row {
    grid-template-columns: 44px 1fr auto 1fr 18px;
  }
  .home-league-block .tactical-match-row__status,
  .home-league-block .tactical-match-row__right { display: none; }
  .home-league-block .tactical-match-row .tactical-crest--sm { --_height: 32px; }
  .home-league-block .tactical-match-row__score {
    font-size: 0.75rem;
    padding: 3px 7px;
  }

  /* Swap the full team name for the 3-char API-Football code where one exists —
     short codes read cleanly in the tight mobile column. Teams without a code
     fall back to their full name. font-size on ::after must be explicit since the
     name span is zeroed out; weight/colour inherit so winner/loser emphasis holds. */
  .home-league-block .tactical-match-row__name[data-team-code]:not([data-team-code=""]) {
    font-size: 0;
    letter-spacing: 0;
  }
  .home-league-block .tactical-match-row__name[data-team-code]:not([data-team-code=""])::after {
    content: attr(data-team-code);
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
  }

  /* Cancelled matches: strike the whole row through and label it clearly. */
  .home-league-block .tactical-match-row:has(.tactical-match-row__status--canc) {
    opacity: 0.6;
  }
  .home-league-block .tactical-match-row:has(.tactical-match-row__status--canc) .tactical-match-row__name,
  .home-league-block .tactical-match-row:has(.tactical-match-row__status--canc) .tactical-match-row__time {
    text-decoration: line-through;
  }
  .home-league-block .tactical-match-row:has(.tactical-match-row__status--canc) .tactical-match-row__vs {
    font-size: 0;
  }
  .home-league-block .tactical-match-row:has(.tactical-match-row__status--canc) .tactical-match-row__vs::after {
    content: "Cancelled";
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--te-loss);
  }
}