.match-card-link,
.match-card-row {
  display:block;
  padding:.4rem .2rem;
  border:0;

  color:inherit;
  text-decoration:none;
  transition:background .15s ease;
  margin-bottom: 1.2rem;
}

.match-card-link:hover {
  background:rgba(17, 24, 39, .015);
}

.match-card-link:focus-visible {
  outline:2px solid #111827;
  outline-offset:4px;
  border-radius:12px;
}

.match-card-group {
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:#6b7280;
  font-size:.78rem;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.match-card-board {
  display:grid;
  grid-template-columns:minmax(70px, 180px) 64px minmax(90px, 1fr) 64px minmax(70px, 180px);
  align-items:center;
  gap:.95rem;
  width:100%;
  margin:0 auto;
}

.match-card-home,
.match-card-away {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.28rem;
}

.match-card-home {
  align-items:flex-start;
  text-align:left;
}

.match-card-away {
  align-items:flex-end;
  text-align:right;
}

.match-card-team-mark {
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}

.match-card-logo {
  width:44px;
  height:44px;
  object-fit:contain;
  background:#fff;
}

.match-card-logo-fallback {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:#f3f4f6;
  border:1px solid rgba(17, 24, 39, .08);
  color:#111827;
  font-size:.9rem;
  font-weight:700;
}

.match-card-favorite {
  position:absolute;
  top:50%;
  right:-18px;
  transform:translateY(-50%);
  color:#0042a5;
  font-size:1.05rem;
  line-height:1;
}

.match-card-away .match-card-favorite {
  right:auto;
  left:-18px;
}

.match-card-favorite[hidden] {
  display:none;
}

.match-card-team-name {
  display:block;
  max-width:180px;
  min-width:0;
  overflow:hidden;
  color:#111827;
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:.9rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-align:inherit;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.match-card-score {
  min-width:28px;
  color:#111827;
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:1.72rem;
  font-weight:400;
  line-height:.82;
  text-align:center;
  white-space:nowrap;
  word-break:keep-all;
  font-variant-numeric:tabular-nums;
}

.match-card-score-home {
  transform:translateX(8px);
}

.match-card-score-away {
  transform:translateX(-8px);
}

.match-card-center {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.24rem;
  text-align:center;
}

.match-card-meta {
  color:#6b7280;
  font-size:.78rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.match-card-meta.is-live {
  color:#008f6a;
}

.match-card-phase {
  max-width:100%;
  overflow:hidden;
  color:#98a2b3;
  font-size:.66rem;
  font-weight:700;
  line-height:1;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.match-card-skeleton-row {
  display:block;
  padding:.4rem .2rem;
}

.match-card-skeleton-group,
.match-card-skeleton-logo,
.match-card-skeleton-name,
.match-card-skeleton-score,
.match-card-skeleton-meta,
.match-card-skeleton-phase {
  display:block;
  background:linear-gradient(90deg,#eceff3 0%,#f8fafc 46%,#eceff3 100%);
  background-size:220% 100%;
  animation:match-card-shimmer 1.15s ease-in-out infinite;
}

.match-card-skeleton-group {
  width:110px;
  height:11px;
  margin:0;
  border-radius:999px;
}

.match-card-skeleton-board {
  display:grid;
  grid-template-columns:minmax(70px, 180px) 64px minmax(90px, 1fr) 64px minmax(70px, 180px);
  align-items:center;
  gap:.95rem;
  width:100%;
  margin:0 auto;
}

.match-card-skeleton-team {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.28rem;
}

.match-card-skeleton-team:first-child {
  align-items:flex-start;
}

.match-card-skeleton-team:last-child {
  align-items:flex-end;
}

.match-card-skeleton-center {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  gap:.24rem;
}

.match-card-skeleton-logo {
  width:44px;
  height:44px;
  border-radius:10px;
}

.match-card-skeleton-name {
  width:min(120px, 72%);
  height:12px;
  border-radius:6px;
}

.match-card-skeleton-score {
  width:24px;
  height:29px;
  border-radius:7px;
  justify-self:center;
}

.match-card-skeleton-meta {
  width:72px;
  height:12px;
  margin:auto;
  border-radius:999px;
}

.match-card-skeleton-phase {
  width:48px;
  height:8px;
  border-radius:999px;
}

@keyframes match-card-shimmer {
  0% { background-position:120% 0; }
  100% { background-position:-120% 0; }
}

@media (max-width:576px) {
  .match-card-link,
  .match-card-row,
  .match-card-skeleton-row {
    padding:.3rem 0;
  }

  .match-card-group {
    font-size:.7rem;
  }

  .match-card-board,
  .match-card-skeleton-board {
    grid-template-columns:38px minmax(44px, 54px) minmax(62px, 1fr) minmax(44px, 54px) 38px;
    gap:clamp(.25rem, 1.8vw, .45rem);
  }

  .match-card-logo,
  .match-card-logo-fallback,
  .match-card-skeleton-logo {
    width:38px;
    height:38px;
  }

  .match-card-team-name,
  .match-card-skeleton-name {
    display:none;
  }

  .match-card-score {
    min-width:30px;
    font-size:1.65rem;
  }

  .match-card-score-home {
    transform:translateX(5px);
  }

  .match-card-score-away {
    transform:translateX(-5px);
  }

  .match-card-meta {
    font-size:.68rem;
  }

  .match-card-favorite {
    right:-15px;
    font-size:.95rem;
  }

  .match-card-away .match-card-favorite {
    right:auto;
    left:-15px;
  }

  .match-card-skeleton-score {
    width:20px;
    height:25px;
  }

  .match-card-skeleton-meta {
    width:58px;
    height:10px;
  }

  .match-card-phase {
    font-size:.6rem;
  }

  .match-card-skeleton-phase {
    width:42px;
    height:7px;
  }
}