.match-engagement {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.match-engagement__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  line-height: 1;
  cursor: default;
  flex: 0 0 auto;
}

.match-engagement__btn--like {
  cursor: pointer;
}

.match-engagement__btn--like:hover,
.match-engagement__btn--like:focus-visible {
  color: var(--color-text);
}

.match-engagement__icon {
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}

.match-engagement__icon[hidden] {
  display: none !important;
}

.match-engagement__count {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  width: 3ch;
  flex: 0 0 3ch;
  text-align: center;
  overflow: hidden;
}

/* Analytical social: układ pionowy + rytm H2H; kolor/szerokości jak simple */
.analytical-match-card-2__cell--social .match-engagement,
.analytical-match-card-3__cell--social .match-engagement {
  --eng-icon: 1.125rem;
  --eng-count: 3ch;
  --eng-inner-gap: var(--space-4);
  --eng-mark-h: 28px;
  --eng-stat-h: var(--a3-row-h, var(--a2-row-h, 22px));
  --eng-pair-gap: var(--a3-row-gap, var(--a2-row-gap, var(--space-10)));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--eng-pair-gap);
  margin-top: 0;
  width: max-content;
  max-width: 100%;
  padding: 0 0 0 var(--space-10);
  border-left: 1px solid var(--border);
}

html[data-theme="dark"] .analytical-match-card-2__cell--social .match-engagement,
html[data-theme="dark"] .analytical-match-card-3__cell--social .match-engagement {
  border-left-color: rgba(255, 255, 255, 0.12);
}

.analytical-match-card-2__cell--social .match-engagement {
  --eng-pair-gap: var(--a2-row-gap, var(--space-10));
  --eng-stat-h: var(--a2-row-h, 22px);
  --eng-mark-h: var(--a2-h2h-logo, 28px);
}

.analytical-match-card-3__cell--social .match-engagement {
  --eng-pair-gap: var(--a3-row-gap, var(--space-10));
  --eng-stat-h: var(--a3-row-h, 22px);
  --eng-mark-h: 28px;
}

.analytical-match-card-2__cell--social .match-engagement__btn,
.analytical-match-card-3__cell--social .match-engagement__btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--eng-inner-gap);
  width: auto;
  min-height: var(--eng-stat-h);
  color: var(--muted-2);
  font-size: inherit;
  line-height: 1;
}

.analytical-match-card-2__cell--social .match-engagement__btn--like,
.analytical-match-card-3__cell--social .match-engagement__btn--like {
  min-height: var(--eng-mark-h);
  height: var(--eng-mark-h);
}

.analytical-match-card-2__cell--social .match-engagement__btn--coupon,
.analytical-match-card-3__cell--social .match-engagement__btn--coupon {
  min-height: var(--eng-stat-h);
  height: var(--eng-stat-h);
}

.analytical-match-card-2__cell--social .match-engagement__icon,
.analytical-match-card-3__cell--social .match-engagement__icon {
  font-size: var(--eng-icon);
  width: var(--eng-icon);
  height: var(--eng-icon);
  flex: 0 0 var(--eng-icon);
  text-align: center;
  line-height: 1;
}

.analytical-match-card-2__cell--social .match-engagement__count,
.analytical-match-card-3__cell--social .match-engagement__count {
  font-size: 0.8125rem;
  font-weight: 600;
  width: var(--eng-count);
  flex: 0 0 var(--eng-count);
  text-align: center;
  color: inherit;
  line-height: 1;
}

.analytical-match-card-2__cell--social .match-engagement__btn--like:hover,
.analytical-match-card-2__cell--social .match-engagement__btn--like:focus-visible,
.analytical-match-card-3__cell--social .match-engagement__btn--like:hover,
.analytical-match-card-3__cell--social .match-engagement__btn--like:focus-visible {
  color: var(--fg);
}

/* Simple footer: stały slot engagement → compare nigdy nie skacze przy 1 ↔ 999 */
.simple-match-card__footer .match-engagement,
.simple-match-card-value__footer .match-engagement {
  --eng-icon: 1.125rem;
  --eng-count: 3ch;
  --eng-inner-gap: var(--space-4);
  --eng-pair-gap: var(--space-8);

  box-sizing: content-box;
  margin-top: 0;
  margin-left: 0;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: calc(
    (var(--eng-icon) + var(--eng-inner-gap) + var(--eng-count)) * 2 + var(--eng-pair-gap)
  );
  gap: var(--eng-pair-gap);
  justify-content: flex-end;
}

/* Value bets: dociągnij like/ticket do prawej (edge nie zajmuje flex:1 jak compare) */
.simple-match-card-value__footer .match-engagement {
  margin-left: auto;
}

.simple-match-card__footer .match-engagement__btn,
.simple-match-card-value__footer .match-engagement__btn {
  gap: var(--eng-inner-gap);
  color: var(--muted-2);
}

.simple-match-card__footer .match-engagement__icon,
.simple-match-card-value__footer .match-engagement__icon {
  font-size: var(--eng-icon);
  width: var(--eng-icon);
  flex: 0 0 var(--eng-icon);
  text-align: center;
}

.simple-match-card__footer .match-engagement__count,
.simple-match-card-value__footer .match-engagement__count {
  font-size: 0.8125rem;
  width: var(--eng-count);
  flex: 0 0 var(--eng-count);
}

.simple-match-card__footer .match-engagement__btn--like:hover,
.simple-match-card__footer .match-engagement__btn--like:focus-visible,
.simple-match-card-value__footer .match-engagement__btn--like:hover,
.simple-match-card-value__footer .match-engagement__btn--like:focus-visible {
  color: var(--fg);
}

/* Telefon (simple): :hover zostaje po tapnięciu — feedback tylko na :active */
html[data-device="phone"] .simple-match-card__footer .match-engagement__btn--like:hover,
html[data-device="phone"] .simple-match-card__footer .match-engagement__btn--like:focus-visible,
html[data-device="phone"] .simple-match-card-value__footer .match-engagement__btn--like:hover,
html[data-device="phone"] .simple-match-card-value__footer .match-engagement__btn--like:focus-visible {
  color: var(--muted-2);
}

html[data-device="phone"] .simple-match-card__footer .match-engagement__btn--like:active,
html[data-device="phone"] .simple-match-card-value__footer .match-engagement__btn--like:active {
  color: var(--fg);
}