/* ======================================================== */
/* Responsive & iCUE Preview Layout Rules                   */
/* ======================================================== */
/* Universal Footer Bar & Micro-Screen Guard (< 240px) */
@media (max-height: 240px) {
  .footer-bar {
    display: none !important;
  }
  .fixture-card-header {
    display: none !important;
  }
}

/* iCUE Software Desktop Carousel & Mimic Drawer Preview (Width <= 500px or Height <= 180px) */
@media (max-width: 500px), (max-height: 240px) {
  .container {
    padding: 3px 6px !important;
  }
  .footer-bar {
    display: none !important;
  }
  .fixture-card-header {
    display: none !important;
  }
  .team-sub-row {
    display: none !important;
  }
  .club-nickname {
    display: none !important;
  }
  .header-bar {
    padding-bottom: 2px !important;
  }
  .team-crest {
    width: 24px !important;
    height: 24px !important;
  }
  .club-name {
    font-size: calc(var(--text-scale, 1) * 0.9rem) !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .view-tab-label {
    display: none !important;
  }
  .view-tab-btn {
    padding: 2px 5px !important;
    font-size: calc(var(--text-scale, 1) * 0.72rem) !important;
  }
  .hero-fixture-card {
    padding: 4px 6px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .fixture-clash {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 2px 0 !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .team-clash-box {
    padding: 2px 4px !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .hero-crest {
    width: clamp(28px, 6vw, 42px) !important;
    height: clamp(28px, 6vw, 42px) !important;
  }
  .hero-abbr {
    font-size: calc(var(--text-scale, 1) * clamp(0.82rem, 2.2vw, 1rem)) !important;
  }
  .hero-name {
    display: none !important;
  }
  .hero-side-pill {
    display: none !important;
  }
  .team-clash-rank {
    display: none !important;
  }
  .countdown-clash-hub {
    flex: 1.4 !important;
    gap: 2px !important;
  }
  .countdown-hero-label {
    display: none !important;
  }
  .countdown-hero-digits {
    padding: 2px 6px !important;
    gap: 3px !important;
    border-radius: 6px !important;
    max-width: 100% !important;
  }
  .cd-cell {
    min-width: 0 !important;
  }
  .cd-num {
    font-size: calc(var(--text-scale, 1) * clamp(1rem, 2.6vw, 1.25rem)) !important;
    line-height: 1 !important;
  }
  .cd-sep {
    font-size: calc(var(--text-scale, 1) * 0.85rem) !important;
    margin-top: -3px !important;
  }
  .cd-lbl {
    font-size: calc(var(--text-scale, 1) * 0.45rem) !important;
  }
  .hero-kickoff-time {
    font-size: calc(var(--text-scale, 1) * 0.62rem) !important;
    padding: 1px 6px !important;
    margin-top: 1px !important;
  }
  /* S-size Widget Live Matchday Tuning */
  .container.is-compact .live-hero-card {
    padding: 6px 14px 6px 14px !important;
    gap: 4px !important;
    justify-content: space-between !important;
  }
  .container.is-compact .live-hero-card .live-scoreboard-hero {
    padding: 4px 0 !important;
    gap: clamp(8px, 1.5vw, 16px) !important;
  }
  .container.is-compact .live-hero-card .live-crest {
    width: clamp(52px, 13vh, 66px) !important;
    height: clamp(52px, 13vh, 66px) !important;
  }
  .container.is-compact .live-hero-card .live-name {
    font-size: calc(var(--text-scale, 1) * clamp(1.05rem, 2.8vh, 1.25rem)) !important;
  }
  .container.is-compact .live-hero-card .live-score {
    font-size: calc(var(--text-scale, 1) * clamp(2.8rem, 8.5vh, 3.6rem)) !important;
  }
  .container.is-compact .live-hero-card .live-clock {
    font-size: calc(var(--text-scale, 1) * clamp(1.8rem, 5.5vh, 2.4rem)) !important;
  }
  .container.is-compact .live-hero-card .live-events-feed {
    max-height: clamp(40px, 9vh, 52px) !important;
    padding-top: 4px !important;
  }
}

/* Explicit .container.is-preview rules (Applies across all iCUE Software Preview slots) */
.container.is-preview {
  padding: 3px 6px !important;
}
.container.is-preview .footer-bar {
  display: none !important;
}
.container.is-preview .fixture-card-header {
  display: none !important;
}
.container.is-preview .team-sub-row,
.container.is-preview .club-nickname,
.container.is-preview .refresh-btn {
  display: none !important;
}
.container.is-preview .club-name {
  font-size: calc(var(--text-scale, 1) * 0.9rem) !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.container.is-preview .view-tab-label {
  display: none !important;
}
.container.is-preview .view-tab-btn {
  padding: 2px 5px !important;
  font-size: calc(var(--text-scale, 1) * 0.72rem) !important;
}
.container.is-preview .hero-fixture-card {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  justify-content: center !important;
  gap: 4px !important;
}
.container.is-preview.is-size-m .hero-crest {
  width: clamp(44px, 12vh, 68px) !important;
  height: clamp(44px, 12vh, 68px) !important;
}
.container.is-preview.is-size-m .hero-abbr {
  font-size: calc(var(--text-scale, 1) * clamp(1.1rem, 2.8vh, 1.45rem)) !important;
}
.container.is-preview.is-size-m .hero-name {
  font-size: calc(var(--text-scale, 1) * clamp(0.74rem, 1.8vh, 0.9rem)) !important;
  display: block !important;
}
.container.is-preview.is-size-m .hero-side-pill,
.container.is-preview.is-size-m .team-clash-rank,
.container.is-preview.is-size-m .countdown-hero-label {
  display: none !important;
}
.container.is-preview.is-size-m .countdown-hero-digits {
  padding: 3px 6px !important;
  gap: 3px !important;
  border-radius: 8px !important;
}
.container.is-preview.is-size-m .cd-num {
  font-size: calc(var(--text-scale, 1) * clamp(1.1rem, 3.2vh, 1.5rem)) !important;
}
.container.is-preview.is-size-m .cd-lbl {
  font-size: calc(var(--text-scale, 1) * 0.48rem) !important;
}
.container.is-preview.is-size-m .cd-sep {
  font-size: calc(var(--text-scale, 1) * 0.85rem) !important;
}
.container.is-preview.is-size-m .countdown-hero-digits .cd-cell:last-of-type,
.container.is-preview.is-size-m .countdown-hero-digits .cd-sep:last-of-type {
  display: none !important;
}
.container.is-size-m .fixture-companion-card,
.container.is-size-s .fixture-companion-card,
.container.is-preview.is-size-m .fixture-companion-card,
.container.is-preview.is-size-s .fixture-companion-card {
  display: none !important;
}

.container.is-preview.is-size-m .live-stats-container,
.container.is-preview.is-size-s .live-stats-container,
.container.is-preview.is-size-m .live-events-feed,
.container.is-preview.is-size-s .live-events-feed {
  display: none !important;
}

/* Micro-width Countdown Guard (e.g. M-slot preview in iCUE desktop carousel) */
@media (max-width: 280px) {
  .countdown-hero-digits .cd-cell:last-of-type,
  .countdown-hero-digits .cd-sep:last-of-type {
    display: none !important;
  }
}
.container.is-preview.is-size-m .countdown-hero-digits .cd-cell:last-of-type,
.container.is-preview.is-size-m .countdown-hero-digits .cd-sep:last-of-type {
  display: none !important;
}

/* Micro-height Standings Table Guard (e.g. S-slot preview in iCUE desktop carousel) */
@media (max-height: 140px) {
  .standings-card-header {
    padding-bottom: 2px !important;
  }
  .standings-season-badge {
    display: none !important;
  }
  .standings-table thead th {
    padding: 2px 4px !important;
    font-size: 0.65rem !important;
  }
  .standings-table td {
    padding: 2px 4px !important;
    font-size: 0.72rem !important;
  }
  .standings-row-crest {
    width: 16px !important;
    height: 16px !important;
  }
  .standings-table tbody tr:not(.standings-row-highlight) {
    display: none !important;
  }
}
.container.is-preview.is-compact .standings-card-header {
  padding-bottom: 2px !important;
}
.container.is-preview.is-compact .standings-season-badge {
  display: none !important;
}
.container.is-preview.is-compact .standings-table tbody tr:not(.standings-row-highlight) {
  display: none !important;
}

/* Very compact carousel preview (< 130px) */
@media (max-height: 130px) {
  .container {
    padding: 2px 6px !important;
  }
  .header-controls {
    display: none !important;
  }
  .header-bar {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .hero-crest {
    width: 32px !important;
    height: 32px !important;
  }
  .hero-abbr {
    font-size: calc(var(--text-scale, 1) * 0.85rem) !important;
  }
  .cd-num {
    font-size: calc(var(--text-scale, 1) * 1.1rem) !important;
  }
  .cd-sep {
    font-size: calc(var(--text-scale, 1) * 0.85rem) !important;
  }
  .hero-kickoff-time {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .col-hide-sm {
    display: none;
  }
  .standings-club-name {
    max-width: 100px;
  }
  .fixture-clash {
    grid-template-columns: 1fr 1.8fr 1fr;
    gap: 8px;
  }
}

/* S-size Widget / Shorter Viewport Concluded Match Layout Rules */
.container.is-compact .concluded-integrated-stats,
.container.is-compact .concluded-timeline-strip,
.container.is-compact .team-scorers-column,
.container.is-compact .concluded-compact-essentials {
  display: none !important;
}

.container.is-compact .concluded-compact-details-btn {
  display: inline-flex !important;
}

.container.is-compact .hero-fixture-card,
.container.is-size-s .hero-fixture-card {
  justify-content: center !important;
}

.container.is-compact .fixture-clash,
.container.is-size-s .fixture-clash {
  align-items: center !important;
  justify-content: space-evenly !important;
  padding: 4px 0 !important;
}

.container.is-compact .countdown-clash-hub,
.container.is-size-s .countdown-clash-hub,
.container.is-compact .concluded-score-hub,
.container.is-size-s .concluded-score-hub {
  align-self: center !important;
  justify-content: center !important;
  margin: auto 0 !important;
}

/* S-size Single Story News Card Styling */
.container.is-compact .news-articles-grid {
  gap: 0;
  overflow-y: hidden;
}

.container.is-compact .news-card-item {
  flex: 1;
  justify-content: flex-start;
  padding: clamp(12px, 2.2vh, 18px) clamp(16px, 2.4vw, 22px);
  gap: 10px;
}

.container.is-compact .news-card-item .news-headline-row {
  gap: 10px;
}

.container.is-compact .news-card-item .spotlight-headline {
  font-size: calc(var(--text-scale, 1) * clamp(1.15rem, 3.2vw, 1.35rem));
  font-weight: 800;
  line-height: 1.32;
  color: #ffffff;
}

.container.is-compact .news-card-item .spotlight-description {
  -webkit-line-clamp: 4;
  font-size: calc(var(--text-scale, 1) * clamp(0.92rem, 2.2vw, 1.05rem));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.container.is-compact .news-card-item .read-story-btn {
  width: 28px;
  height: 28px;
  font-size: calc(var(--text-scale, 1) * 1rem);
}

.container.is-compact .news-header-nav .news-counter {
  font-size: calc(var(--text-scale, 1) * 0.8rem);
  font-weight: 700;
}

.container.is-compact .news-header-nav .news-page-btn {
  padding: 4px 10px;
  font-size: calc(var(--text-scale, 1) * 0.82rem);
  touch-action: manipulation;
}

@media (min-height: 241px) and (max-height: 480px), ((max-width: 900px) and (min-aspect-ratio: 1.8) and (min-height: 241px)) {
  /* On compact or shorter height widgets (S size), hide dense live stats grid to avoid clipping */
  .live-stats-container {
    display: none !important;
  }
  .live-events-feed {
    max-height: clamp(32px, 7vh, 44px) !important;
    padding-top: 4px !important;
    flex-shrink: 0 !important;
  }
  .live-hero-card {
    justify-content: space-between !important;
    padding: clamp(6px, 1.6vh, 10px) clamp(12px, 1.8vw, 18px) !important;
    gap: 4px !important;
  }
  .live-scoreboard-hero {
    padding: 4px 0 !important;
    gap: clamp(10px, 2vw, 18px) !important;
    flex: 1 !important;
  }
  .live-crest {
    width: clamp(60px, 16vh, 84px) !important;
    height: clamp(60px, 16vh, 84px) !important;
  }
  .live-name {
    font-size: calc(var(--text-scale, 1) * clamp(1rem, 2.8vh, 1.25rem)) !important;
  }
  .live-score {
    font-size: calc(var(--text-scale, 1) * clamp(2.8rem, 8.5vh, 4rem)) !important;
  }
  .live-clock {
    font-size: calc(var(--text-scale, 1) * clamp(1.8rem, 5.5vh, 2.6rem)) !important;
  }
  .live-pulsing-badge {
    font-size: calc(var(--text-scale, 1) * clamp(0.72rem, 1.8vh, 0.82rem)) !important;
    padding: 2px 8px !important;
  }
  #liveVenueTag {
    display: none !important;
  }
  /* On compact or shorter height widgets (S size), switch to simple essentials with details button */
  .concluded-integrated-stats {
    display: none !important;
  }
  .concluded-timeline-strip {
    display: none !important;
  }
  .team-scorers-column {
    display: none !important;
  }
  .concluded-compact-essentials {
    display: none !important;
  }
  .concluded-compact-details-btn {
    display: inline-flex !important;
  }
  .concluded-score-digits {
    padding: 3px 12px !important;
    gap: 8px !important;
  }
  .concluded-score-num {
    font-size: calc(var(--text-scale, 1) * clamp(2rem, 6vh, 2.8rem)) !important;
  }
  .concluded-score-sep {
    font-size: calc(var(--text-scale, 1) * 1.5rem) !important;
  }
  .fixture-companion-card {
    display: none !important;
  }
  .hero-fixture-card {
    justify-content: center !important;
    padding: clamp(6px, 1.6vh, 12px) clamp(12px, 1.8vw, 18px) !important;
    gap: 6px !important;
  }
  .hero-crest {
    width: clamp(74px, 22vh, 98px) !important;
    height: clamp(74px, 22vh, 98px) !important;
  }
  .hero-abbr {
    font-size: calc(var(--text-scale, 1) * clamp(1.6rem, 4.8vh, 2.2rem)) !important;
  }
  .hero-name {
    font-size: calc(var(--text-scale, 1) * clamp(0.95rem, 2.6vh, 1.15rem)) !important;
    display: block !important;
  }
  .hero-side-pill {
    font-size: calc(var(--text-scale, 1) * 0.72rem) !important;
    padding: 2px 7px !important;
  }
  .team-clash-rank {
    font-size: calc(var(--text-scale, 1) * 0.76rem) !important;
  }
  .fixture-clash {
    align-items: center !important;
    padding: 4px 0 !important;
    gap: clamp(12px, 2vw, 20px) !important;
  }
  .countdown-hero-label {
    display: none !important;
  }
  #matchRoundInfo {
    display: none !important;
  }
  #venueTag {
    display: none !important;
  }
  .countdown-hero-digits {
    padding: clamp(6px, 1.6vh, 10px) clamp(14px, 2vw, 20px) !important;
    gap: clamp(8px, 1.2vw, 14px) !important;
    border-radius: 14px !important;
  }
  .cd-cell {
    min-width: 2.2ch !important;
    text-align: center !important;
  }
  .cd-num {
    font-size: calc(var(--text-scale, 1) * clamp(2.6rem, 8.8vh, 3.6rem)) !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    min-width: 2ch !important;
    display: inline-block !important;
  }
  .cd-lbl {
    font-size: calc(var(--text-scale, 1) * clamp(0.6rem, 1.6vh, 0.72rem)) !important;
  }
  .cd-sep {
    font-size: calc(var(--text-scale, 1) * clamp(1.8rem, 6vh, 2.4rem)) !important;
  }
  .hero-kickoff-time {
    font-size: calc(var(--text-scale, 1) * clamp(0.85rem, 2.4vh, 1.02rem)) !important;
    padding: 3px 14px !important;
  }
}

.container.is-spacious .concluded-compact-details-btn,
.container.is-spacious .concluded-compact-essentials {
  display: none !important;
}

/* ======================================================== */
/* M-Size Widget Typography & High-Visibility Rules         */
/* ======================================================== */
.container.is-spacious .club-name {
  font-size: calc(var(--text-scale, 1) * clamp(1.35rem, 2.6vw, 1.55rem));
}
.container.is-spacious .club-nickname {
  font-size: calc(var(--text-scale, 1) * 0.92rem);
}
.container.is-spacious .team-crest {
  width: 44px;
  height: 44px;
}
.container.is-spacious .standing-pill {
  font-size: calc(var(--text-scale, 1) * 0.82rem);
  padding: 3px 10px;
}
.container.is-spacious .record-chip {
  font-size: calc(var(--text-scale, 1) * 0.82rem);
  padding: 3px 8px;
}
.container.is-spacious .view-tab-btn {
  font-size: calc(var(--text-scale, 1) * 0.92rem) !important;
  padding: 7px 16px !important;
  min-height: 38px !important;
}
.container.is-spacious .view-tab-icon {
  font-size: calc(var(--text-scale, 1) * 1.05rem) !important;
}
.container.is-spacious .view-nav-tabs {
  gap: 5px !important;
  padding: 3px 5px !important;
}

/* Fixtures / Schedule View in M Size */
.container.is-spacious .schedule-card-title {
  font-size: calc(var(--text-scale, 1) * 0.96rem);
}
.container.is-spacious .schedule-scope-btn {
  font-size: calc(var(--text-scale, 1) * 0.86rem);
  padding: 6px 16px;
  min-height: 38px;
}
.container.is-spacious .schedule-scope-count {
  font-size: calc(var(--text-scale, 1) * 0.78rem);
  padding: 2px 7px;
}
.container.is-spacious .schedule-filter-chip {
  font-size: calc(var(--text-scale, 1) * 0.84rem);
  padding: 6px 14px;
  min-height: 34px;
}
.container.is-spacious .schedule-filter-count {
  font-size: calc(var(--text-scale, 1) * 0.76rem);
  padding: 2px 7px;
}
.container.is-spacious .schedule-list {
  gap: 8px;
  padding: 8px 2px;
}
.container.is-spacious .schedule-row-item {
  padding: 10px 14px;
}
.container.is-spacious .schedule-row-crest {
  width: 36px;
  height: 36px;
}
.container.is-spacious .schedule-row-crest-placeholder {
  width: 36px;
  height: 36px;
}
.container.is-spacious .schedule-row-opponent {
  font-size: calc(var(--text-scale, 1) * 1.12rem);
  font-weight: 800;
}
.container.is-spacious .schedule-comp-tag {
  font-size: calc(var(--text-scale, 1) * 0.78rem);
  padding: 2px 8px;
}
.container.is-spacious .schedule-venue-name {
  font-size: calc(var(--text-scale, 1) * 0.84rem);
  color: rgba(255, 255, 255, 0.72);
}
.container.is-spacious .schedule-side-badge {
  font-size: calc(var(--text-scale, 1) * 0.78rem);
  padding: 4px 10px;
}
.container.is-spacious .schedule-date-text {
  font-size: calc(var(--text-scale, 1) * 0.96rem);
  font-weight: 800;
}
.container.is-spacious .schedule-time-text {
  font-size: calc(var(--text-scale, 1) * 0.82rem);
  color: rgba(255, 255, 255, 0.75);
}

/* Recent Results in M Size */
.container.is-spacious .results-card-title {
  font-size: calc(var(--text-scale, 1) * 0.94rem);
}
.container.is-spacious .results-record-badge {
  font-size: calc(var(--text-scale, 1) * 0.84rem);
}
.container.is-spacious .match-row-item {
  padding: 10px 14px;
}
.container.is-spacious .match-row-crest {
  width: 36px;
  height: 36px;
}
.container.is-spacious .match-row-opponent {
  font-size: calc(var(--text-scale, 1) * 1.08rem);
  font-weight: 800;
}
.container.is-spacious .match-row-venue {
  font-size: calc(var(--text-scale, 1) * 0.82rem);
}
.container.is-spacious .match-row-score {
  font-size: calc(var(--text-scale, 1) * 1.25rem);
}
.container.is-spacious .match-row-right .form-pill {
  width: 24px;
  height: 24px;
  font-size: calc(var(--text-scale, 1) * 0.82rem);
}

/* Standings in M Size */
.container.is-spacious .standings-card-title {
  font-size: calc(var(--text-scale, 1) * 0.94rem);
}
.container.is-spacious .standings-season-badge {
  font-size: calc(var(--text-scale, 1) * 0.84rem);
}
.container.is-spacious .standings-table {
  font-size: calc(var(--text-scale, 1) * 0.92rem);
}
.container.is-spacious .standings-table thead th {
  font-size: calc(var(--text-scale, 1) * 0.78rem);
  padding: 8px 10px;
}
.container.is-spacious .standings-table td {
  padding: 8px 10px;
}
.container.is-spacious .standings-row-crest {
  width: 24px;
  height: 24px;
}

/* Footer in M Size */
.container.is-spacious .footer-bar {
  padding-top: 6px;
}
.container.is-spacious .last-result-indicator {
  font-size: calc(var(--text-scale, 1) * 0.88rem);
}
.container.is-spacious .form-label {
  font-size: calc(var(--text-scale, 1) * 0.82rem);
}
.container.is-spacious .form-pill {
  width: 22px;
  height: 22px;
  font-size: calc(var(--text-scale, 1) * 0.76rem);
}

@media (min-height: 481px) and (max-aspect-ratio: 1.79) {
  /* On taller M-size or spacious screens, hide the fallback compact details button & bar */
  .concluded-compact-details-btn {
    display: none !important;
  }
  .concluded-compact-essentials {
    display: none !important;
  }

  .club-name {
    font-size: calc(var(--text-scale, 1) * clamp(1.35rem, 2.6vw, 1.55rem));
  }
  .club-nickname {
    font-size: calc(var(--text-scale, 1) * 0.92rem);
  }
  .team-crest {
    width: 44px;
    height: 44px;
  }
  .standing-pill {
    font-size: calc(var(--text-scale, 1) * 0.82rem);
    padding: 3px 10px;
  }
  .record-chip {
    font-size: calc(var(--text-scale, 1) * 0.82rem);
    padding: 3px 8px;
  }
  .view-tab-btn {
    font-size: calc(var(--text-scale, 1) * 0.92rem) !important;
    padding: 7px 16px !important;
    min-height: 38px !important;
  }
  .view-tab-icon {
    font-size: calc(var(--text-scale, 1) * 1.05rem) !important;
  }
  .view-nav-tabs {
    gap: 5px !important;
    padding: 3px 5px !important;
  }

  /* Fixtures / Schedule View in M Size */
  .schedule-card-title {
    font-size: calc(var(--text-scale, 1) * 0.96rem);
  }
  .schedule-scope-btn {
    font-size: calc(var(--text-scale, 1) * 0.86rem);
    padding: 6px 16px;
    min-height: 38px;
  }
  .schedule-scope-count {
    font-size: calc(var(--text-scale, 1) * 0.78rem);
    padding: 2px 7px;
  }
  .schedule-filter-chip {
    font-size: calc(var(--text-scale, 1) * 0.84rem);
    padding: 6px 14px;
    min-height: 34px;
  }
  .schedule-filter-count {
    font-size: calc(var(--text-scale, 1) * 0.76rem);
    padding: 2px 7px;
  }
  .schedule-list {
    gap: 8px;
    padding: 8px 2px;
  }
  .schedule-row-item {
    padding: 10px 14px;
  }
  .schedule-row-crest {
    width: 36px;
    height: 36px;
  }
  .schedule-row-crest-placeholder {
    width: 36px;
    height: 36px;
  }
  .schedule-row-opponent {
    font-size: calc(var(--text-scale, 1) * 1.12rem);
    font-weight: 800;
  }
  .schedule-comp-tag {
    font-size: calc(var(--text-scale, 1) * 0.78rem);
    padding: 2px 8px;
  }
  .schedule-venue-name {
    font-size: calc(var(--text-scale, 1) * 0.84rem);
    color: rgba(255, 255, 255, 0.72);
  }
  .schedule-side-badge {
    font-size: calc(var(--text-scale, 1) * 0.78rem);
    padding: 4px 10px;
  }
  .schedule-date-text {
    font-size: calc(var(--text-scale, 1) * 0.96rem);
    font-weight: 800;
  }
  .schedule-time-text {
    font-size: calc(var(--text-scale, 1) * 0.82rem);
    color: rgba(255, 255, 255, 0.75);
  }

  /* Recent Results in M Size */
  .results-card-title {
    font-size: calc(var(--text-scale, 1) * 0.94rem);
  }
  .results-record-badge {
    font-size: calc(var(--text-scale, 1) * 0.84rem);
  }
  .match-row-item {
    padding: 10px 14px;
  }
  .match-row-crest {
    width: 36px;
    height: 36px;
  }
  .match-row-opponent {
    font-size: calc(var(--text-scale, 1) * 1.08rem);
    font-weight: 800;
  }
  .match-row-venue {
    font-size: calc(var(--text-scale, 1) * 0.82rem);
  }
  .match-row-score {
    font-size: calc(var(--text-scale, 1) * 1.25rem);
  }
  .match-row-right .form-pill {
    width: 24px;
    height: 24px;
    font-size: calc(var(--text-scale, 1) * 0.82rem);
  }

  /* Standings in M Size */
  .standings-card-title {
    font-size: calc(var(--text-scale, 1) * 0.94rem);
  }
  .standings-season-badge {
    font-size: calc(var(--text-scale, 1) * 0.84rem);
  }
  .standings-table {
    font-size: calc(var(--text-scale, 1) * 0.92rem);
  }
  .standings-table thead th {
    font-size: calc(var(--text-scale, 1) * 0.78rem);
    padding: 8px 10px;
  }
  .standings-table td {
    padding: 8px 10px;
  }
  .standings-row-crest {
    width: 24px;
    height: 24px;
  }

  /* Fixture View Scaling in M Size (840x696, aspect ~1.2) */
  .hero-fixture-card {
    justify-content: space-between !important;
    padding: 14px 18px 12px 18px !important;
  }
  .fixture-card-header {
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
  }
  .fixture-clash {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    padding: 8px 0 !important;
    gap: clamp(6px, 1vw, 14px) !important;
  }
  #homeCompetitorCard {
    grid-column: 1 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 190px !important;
  }
  #countdownModule,
  #concludedScoreHub {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  #awayCompetitorCard {
    grid-column: 3 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 190px !important;
  }
  .team-clash-box {
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  .hero-crest {
    width: clamp(64px, 12vh, 88px) !important;
    height: clamp(64px, 12vh, 88px) !important;
  }
  .hero-abbr {
    font-size: calc(var(--text-scale, 1) * clamp(1.4rem, 3.2vh, 1.85rem)) !important;
  }
  .hero-name {
    font-size: calc(var(--text-scale, 1) * clamp(0.85rem, 2vh, 1.05rem)) !important;
    max-width: 160px !important;
  }
  .countdown-clash-hub {
    gap: 8px !important;
  }
  .countdown-hero-label {
    font-size: calc(var(--text-scale, 1) * clamp(0.72rem, 1.6vh, 0.82rem)) !important;
  }
  .countdown-hero-digits {
    padding: clamp(6px, 1.4vh, 10px) clamp(10px, 1.2vw, 16px) !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
    border-radius: 12px !important;
  }
  .cd-cell {
    min-width: 1.8ch !important;
    text-align: center !important;
  }
  .cd-num {
    font-size: calc(var(--text-scale, 1) * clamp(1.8rem, 5vh, 2.5rem)) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    min-width: 1.8ch !important;
    display: inline-block !important;
  }
  .cd-lbl {
    font-size: calc(var(--text-scale, 1) * clamp(0.58rem, 1.4vh, 0.72rem)) !important;
  }
  .cd-sep {
    font-size: calc(var(--text-scale, 1) * clamp(1.2rem, 3.6vh, 1.8rem)) !important;
  }
  .hero-kickoff-time {
    font-size: calc(var(--text-scale, 1) * clamp(0.8rem, 2vh, 0.95rem)) !important;
    padding: 4px 14px !important;
  }
  .footer-bar {
    padding-top: 10px !important;
  }
  .last-result-indicator {
    font-size: calc(var(--text-scale, 1) * 0.95rem) !important;
  }
  .form-label {
    font-size: calc(var(--text-scale, 1) * 0.88rem) !important;
  }
  .form-pill {
    width: 26px !important;
    height: 26px !important;
    font-size: calc(var(--text-scale, 1) * 0.82rem) !important;
  }

  /* Live View Scaling in M Size (840x696) */
  .container.is-size-m .live-hero-card {
    justify-content: space-between !important;
    padding: 14px 20px 12px 20px !important;
    gap: 8px !important;
  }
  .container.is-size-m .live-scoreboard-hero {
    padding: 6px 0 !important;
    gap: 14px !important;
  }
  .container.is-size-m .live-crest {
    width: clamp(76px, 15vh, 105px) !important;
    height: clamp(76px, 15vh, 105px) !important;
  }
  .container.is-size-m .live-name {
    font-size: calc(var(--text-scale, 1) * clamp(1.05rem, 2.5vh, 1.32rem)) !important;
  }
  .container.is-size-m .live-score {
    font-size: calc(var(--text-scale, 1) * clamp(2.8rem, 7.5vh, 4.2rem)) !important;
  }
  .container.is-size-m .live-clock {
    font-size: calc(var(--text-scale, 1) * clamp(1.8rem, 5vh, 2.6rem)) !important;
  }
  .container.is-size-m .live-events-feed {
    max-height: 120px !important;
    flex-shrink: 0 !important;
  }
  .container.is-size-m .live-stats-container {
    padding: clamp(6px, 1.4vh, 12px) clamp(12px, 1.8vw, 18px) !important;
    gap: 6px !important;
    flex: 1 !important;
  }

  /* Ensure companion cards are never displayed on M-size single-column layout */
  .container.is-size-m #liveStatsCompanionCard,
  .container.is-size-m #liveIncidentsCompanionCard,
  .container.is-size-m #fixtureStandingsCard,
  .container.is-size-m #fixtureScheduleCard,
  .container.is-size-m .fixture-companion-card {
    display: none !important;
  }
}

/* Ensure companion cards are never displayed on S-size compact layout */
.container.is-size-s #liveStatsCompanionCard,
.container.is-size-s #liveIncidentsCompanionCard,
.container.is-size-s #fixtureStandingsCard,
.container.is-size-s #fixtureScheduleCard,
.container.is-size-s .fixture-companion-card {
  display: none !important;
}
.container.is-size-s .fixture-view:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}
.container.is-size-s .hero-fixture-card:not(.hidden) {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ======================================================== */
/* Size L (1688x696, AR ~2.43) & XL (2536x696, AR ~3.64)     */
/* Center single-view clash & multi-column grid layouts      */
/* ======================================================== */
/* ======================================================== */
/* Size L (1688x696, AR ~2.43) - 2-Column Split Layout       */
/* ======================================================== */
.container.is-size-l .fixture-view:not(.hidden) {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 16px !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}
.container.is-size-l #fixtureStandingsCard,
.container.is-size-l #liveStatsCompanionCard {
  display: none !important;
}
.container.is-size-l .hero-fixture-card:not(.hidden):not(.fixture-companion-card) {
  display: flex !important;
  grid-column: 1 !important;
  max-width: none !important;
  width: 100% !important;
  justify-content: space-between !important;
  padding: 14px 20px 12px 20px !important;
}
.container.is-size-l .live-hero-card:not(.hidden) {
  display: flex !important;
  grid-column: 1 !important;
  max-width: none !important;
  width: 100% !important;
  justify-content: space-between !important;
  padding: 14px 20px 12px 20px !important;
  gap: 10px !important;
}
.container.is-size-l #fixtureScheduleCard:not(.hidden),
.container.is-size-l #liveIncidentsCompanionCard:not(.hidden) {
  display: flex !important;
  grid-column: 2 !important;
}

.container.is-size-l .schedule-view-card:not(.hidden),
.container.is-size-l .results-view-card:not(.hidden),
.container.is-size-l .standings-view-card:not(.hidden),
.container.is-size-l .news-view-card:not(.hidden) {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.container.is-size-l .schedule-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 10px 4px !important;
}

.container.is-size-l .results-match-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.container.is-size-l .standings-view-card {
  max-width: 1540px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.container.is-size-l .fixture-clash,
.container.is-size-xl .fixture-clash {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  gap: clamp(6px, 1vw, 16px) !important;
}

.container.is-size-l #homeCompetitorCard,
.container.is-size-xl #homeCompetitorCard {
  grid-column: 1 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 220px !important;
}

.container.is-size-l #countdownModule,
.container.is-size-l #concludedScoreHub,
.container.is-size-xl #countdownModule,
.container.is-size-xl #concludedScoreHub {
  grid-column: 2 !important;
  justify-self: center !important;
}

.container.is-size-l #awayCompetitorCard,
.container.is-size-xl #awayCompetitorCard {
  grid-column: 3 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 220px !important;
}

@media (min-aspect-ratio: 1.85) and (max-aspect-ratio: 2.84) and (min-height: 481px), (min-width: 1001px) and (min-height: 481px) and (max-width: 1999px) {
  .fixture-view:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 16px !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
  }
  #fixtureStandingsCard,
  #liveStatsCompanionCard {
    display: none !important;
  }
  .hero-fixture-card:not(.hidden):not(.fixture-companion-card) {
    display: flex !important;
    grid-column: 1 !important;
    max-width: none !important;
    width: 100% !important;
    justify-content: space-between !important;
    padding: 14px 20px 12px 20px !important;
  }
  .live-hero-card:not(.hidden) {
    display: flex !important;
    grid-column: 1 !important;
    max-width: none !important;
    width: 100% !important;
    justify-content: space-between !important;
    padding: 14px 20px 12px 20px !important;
    gap: 10px !important;
  }
  #fixtureScheduleCard:not(.hidden),
  #liveIncidentsCompanionCard:not(.hidden) {
    display: flex !important;
    grid-column: 2 !important;
  }
  .container.is-size-l .live-hero-card .live-events-feed {
    display: none !important;
  }
  .container.is-size-l .live-hero-card .live-stats-container {
    display: flex !important;
    padding: 14px 20px !important;
    gap: 12px !important;
    flex: 1.2 !important;
    justify-content: space-around !important;
  }
  /* L Size Stats Sizing Boost */
  .container.is-size-l .live-hero-card .possession-labels {
    font-size: calc(var(--text-scale, 1) * 1.02rem) !important;
    font-weight: 800 !important;
  }
  .container.is-size-l .live-hero-card .possession-bar-track {
    height: 10px !important;
  }
  .container.is-size-l .live-hero-card .integrated-stats-grid {
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    flex: 1 !important;
  }
  .container.is-size-l .live-hero-card .integrated-stat-row {
    padding: 8px 14px !important;
  }
  .container.is-size-l .live-hero-card .stat-val-home,
  .container.is-size-l .live-hero-card .stat-val-away {
    font-size: calc(var(--text-scale, 1) * 1.38rem) !important;
    font-weight: 900 !important;
  }
  .container.is-size-l .live-hero-card .stat-label-col {
    font-size: calc(var(--text-scale, 1) * 0.92rem) !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }
  .hero-crest {
    width: clamp(70px, 14vh, 96px) !important;
    height: clamp(70px, 14vh, 96px) !important;
  }
  .hero-abbr {
    font-size: calc(var(--text-scale, 1) * clamp(1.4rem, 3.2vh, 1.85rem)) !important;
  }
  .cd-num {
    font-size: calc(var(--text-scale, 1) * clamp(1.8rem, 5vh, 2.5rem)) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    min-width: 1.8ch !important;
    display: inline-block !important;
  }
  .cd-cell {
    min-width: 1.8ch !important;
  }
  .countdown-hero-digits {
    padding: clamp(6px, 1.4vh, 10px) clamp(10px, 1.2vw, 16px) !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
    border-radius: 12px !important;
  }
  .cd-lbl {
    font-size: calc(var(--text-scale, 1) * clamp(0.58rem, 1.4vh, 0.72rem)) !important;
  }
  .cd-sep {
    font-size: calc(var(--text-scale, 1) * clamp(1.2rem, 3.6vh, 1.8rem)) !important;
  }
}

/* ======================================================== */
/* Size XL (2536x696, AR ~3.64) - 3-Column Panoramic Layout  */
/* ======================================================== */
.container.is-size-xl .fixture-view:not(.hidden) {
  display: grid !important;
  grid-template-columns: 0.95fr 1.15fr 0.95fr !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}
.container.is-size-xl #fixtureStandingsCard:not(.hidden),
.container.is-size-xl #liveStatsCompanionCard:not(.hidden) {
  display: flex !important;
  grid-column: 1 !important;
}
.container.is-size-xl .hero-fixture-card:not(.hidden):not(.fixture-companion-card) {
  display: flex !important;
  grid-column: 2 !important;
  max-width: none !important;
  width: 100% !important;
  justify-content: space-between !important;
  padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1.5vw, 24px) !important;
}
.container.is-size-xl .live-hero-card:not(.hidden) {
  display: flex !important;
  grid-column: 2 !important;
  max-width: none !important;
  width: 100% !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(10px, 1.5vh, 14px) clamp(12px, 1.5vw, 24px) !important;
}
.container.is-size-xl #fixtureScheduleCard:not(.hidden),
.container.is-size-xl #liveIncidentsCompanionCard:not(.hidden) {
  display: flex !important;
  grid-column: 3 !important;
}

@media (min-aspect-ratio: 2.85) and (min-height: 481px), (min-width: 2000px) and (min-height: 481px) {
  .fixture-view:not(.hidden) {
    display: grid !important;
    grid-template-columns: 0.95fr 1.15fr 0.95fr !important;
    gap: clamp(10px, 1.2vw, 18px) !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
  }
  #fixtureStandingsCard:not(.hidden),
  #liveStatsCompanionCard:not(.hidden) {
    display: flex !important;
    grid-column: 1 !important;
  }
  .hero-fixture-card:not(.hidden):not(.fixture-companion-card) {
    display: flex !important;
    grid-column: 2 !important;
    max-width: none !important;
    width: 100% !important;
    justify-content: space-between !important;
    padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1.5vw, 24px) !important;
  }
  .live-hero-card:not(.hidden) {
    display: flex !important;
    grid-column: 2 !important;
    max-width: none !important;
    width: 100% !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 1.5vw, 24px) !important;
  }
  #fixtureScheduleCard:not(.hidden),
  #liveIncidentsCompanionCard:not(.hidden) {
    display: flex !important;
    grid-column: 3 !important;
  }
  /* On XL live view, hide internal center stats & events since they are in columns 1 and 3 */
  .container.is-size-xl .live-hero-card .live-stats-container,
  .container.is-size-xl .live-hero-card .live-events-feed {
    display: none !important;
  }
  .container.is-size-xl .live-scoreboard-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    gap: clamp(12px, 2vw, 28px) !important;
    padding: 0 !important;
    width: 100% !important;
    flex: 1 !important;
  }
  .container.is-size-xl .live-team {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    min-width: 140px !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
  }
  .container.is-size-xl .live-team.live-home {
    order: 1 !important;
  }
  .container.is-size-xl .live-team .live-crest {
    order: 1 !important;
    width: clamp(110px, 20vh, 150px) !important;
    height: clamp(110px, 20vh, 150px) !important;
  }
  .container.is-size-xl .live-team .live-team-meta,
  .container.is-size-xl .live-team .live-team-meta.text-right {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 3px !important;
    width: 100% !important;
  }
  .container.is-size-xl .live-hero-card .live-name {
    font-size: calc(var(--text-scale, 1) * clamp(1.2rem, 3vh, 1.55rem)) !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    max-width: 200px !important;
    text-align: center !important;
    overflow: visible !important;
  }
  .container.is-size-xl .live-hero-card .live-side-sub {
    font-size: calc(var(--text-scale, 1) * 0.82rem) !important;
    text-align: center !important;
  }
  /* Standalone Score in team column or beside */
  .container.is-size-xl .live-team.live-home .live-score {
    order: 3 !important;
    display: none !important;
  }
  .container.is-size-xl .live-team.live-away {
    order: 5 !important;
    justify-content: center !important;
  }
  .container.is-size-xl .live-team.live-away .live-score {
    order: 3 !important;
    display: none !important;
  }
  /* Center score & clock cluster */
  .container.is-size-xl .live-hero-card #liveHomeScore {
    display: block !important;
    font-size: calc(var(--text-scale, 1) * clamp(4.2rem, 11vh, 6.2rem)) !important;
    padding: 0 10px !important;
    flex-shrink: 0 !important;
  }
  .container.is-size-xl .live-hero-card #liveAwayScore {
    display: block !important;
    font-size: calc(var(--text-scale, 1) * clamp(4.2rem, 11vh, 6.2rem)) !important;
    padding: 0 10px !important;
    flex-shrink: 0 !important;
  }
  .container.is-size-xl .live-clock-hub {
    order: 3 !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .container.is-size-xl .live-hero-card .live-clock {
    font-size: calc(var(--text-scale, 1) * clamp(2.8rem, 7.5vh, 3.8rem)) !important;
  }
  .container.is-size-xl .live-hero-card .live-pulsing-badge {
    font-size: calc(var(--text-scale, 1) * clamp(0.85rem, 2vh, 1rem)) !important;
    padding: 5px 14px !important;
  }
  .hero-crest {
    width: clamp(76px, 16vh, 108px) !important;
    height: clamp(76px, 16vh, 108px) !important;
  }
  .hero-abbr {
    font-size: calc(var(--text-scale, 1) * clamp(1.5rem, 3.5vh, 2rem)) !important;
  }
  .cd-num {
    font-size: calc(var(--text-scale, 1) * clamp(2rem, 5.5vh, 2.8rem)) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    min-width: 1.8ch !important;
    display: inline-block !important;
  }
  .cd-cell {
    min-width: 1.8ch !important;
  }
  .countdown-hero-digits {
    padding: clamp(6px, 1.4vh, 12px) clamp(12px, 1.4vw, 18px) !important;
    gap: clamp(6px, 0.8vw, 12px) !important;
    border-radius: 14px !important;
  }
  .cd-lbl {
    font-size: calc(var(--text-scale, 1) * clamp(0.6rem, 1.5vh, 0.76rem)) !important;
  }
  .cd-sep {
    font-size: calc(var(--text-scale, 1) * clamp(1.3rem, 3.8vh, 2rem)) !important;
  }
}

/* Shared L & XL Layout Rules for other views */
@media (min-width: 1001px) and (min-height: 481px) {
  /* Schedule View in L and XL: 3-column match grid */
  .schedule-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) !important;
    gap: 12px !important;
    padding: 10px 4px !important;
  }
  .schedule-row-item {
    padding: 12px 16px !important;
  }

  /* Results View in L and XL: 2-column or 3-column match grid */
  .results-match-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)) !important;
    gap: 12px !important;
  }
  .match-row-item {
    padding: 12px 16px !important;
  }

  /* Standings in L and XL: Max width centered for crisp reading */
  .standings-view-card {
    max-width: 1540px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .standings-club-name {
    max-width: 320px !important;
  }
  .standings-table .col-wide-only {
    display: table-cell !important;
  }
}

.container.is-size-xl .standings-view-card {
  max-width: 2200px !important;
  width: 100% !important;
}
.container.is-size-xl .standings-club-name {
  max-width: 440px !important;
}
.container.is-size-xl .schedule-list {
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) !important;
}
.container.is-size-xl .results-view-card {
  max-width: 2200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.container.is-size-xl .results-match-list {
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) !important;
}


.hidden,
.footer-bar.hidden,
.container.footer-hidden .footer-bar,
.header-bar.hidden,
.container.header-hidden.nav-tabs-hidden .header-bar,
.container.header-hidden .team-identity,
#viewNavTabs.hidden,
.container.nav-tabs-hidden #viewNavTabs,
.hero-fixture-card.hidden,
.live-hero-card.hidden,
.fixture-companion-card.hidden,
#liveStatsCompanionCard.hidden,
#liveIncidentsCompanionCard.hidden {
  display: none !important;
}