/* static/css/components/matchup-card.css */
.matchup-card { background: transparent !important; border: 0 !important; }
.matchup-card .team-logo { max-height: 56px; width: auto; object-fit: contain; }
@media (min-width: 992px){ .matchup-card .team-logo { max-height: 64px; } }

/* compact pill variant (use when you pass compact=True) */
.matchup-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius: .75rem;
}
.matchup-pill .team-logo{ width: 48px; height: 48px; object-fit: contain; }
@media (min-width: 992px){ .matchup-pill .team-logo{ width: 56px; height: 56px; } }
.matchup-pill .text-bg-light{ background: rgba(255,255,255,.85) !important; }

/* helpful when logos have white boxes on dark bg */
.logo-blend { mix-blend-mode: multiply; }