.standings-table {
  width: 98%;
  font-size: 0.85rem;
  border-radius: 8px;
  overflow: hidden;
  display: flex;

  flex-direction: column;
  /* background-color: #facc15; */
  margin-bottom: 20px;
  margin-top: 10px;
  -webkit-overflow-scrolling: touch;
}

/* ✅ Match EXACT number of columns */
.standing-row {
  display: grid;
  grid-template-columns:
    40px
    /* pos */
    1fr
    /* team */
    140px
    /* stats */
    50px
    /* GA */
    50px
    /* GF */
    50px
    /* GD */
    60px;
  /* PTS */

  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--background_white);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideIn 0.4s ease forwards;
  margin: 10px 0;
  /* background-color: #facc15; */

}

/* Header row */
.standing-row.header {
  font-weight: bold;
  background: rgba(255, 255, 255, 0.08);
}

/* Team block */
.team-info {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

.team-info img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.team-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats block */
.stats {
  display: flex;
  justify-content: space-between;
  gap: clamp(2px, 0.8vw, 4px);
  margin-right: 20px;
  text-align: center;
  min-width: 0;
}

.stats span {
  /* background-color: rgb(42, 102, 102); */
  flex: 1 1 0;
  min-width: 0;
}

/* Position */
.pos {
  font-weight: bold;
}

/* Highlight zones */
.standing-row.top {
  background: rgba(34, 197, 94, 0.021);
}

.third {
  background: #ac8a031a;
}

.standing-row.relegation {
  background: rgba(239, 68, 68, 0.021);
}

/* Points emphasis */
.pts {
  font-weight: bold;
  color: var(--text_sky);
}

.standings-group {
  margin-bottom: 20px;
}

.group-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--background_sky);
}

/* ---------------- MOBILE ---------------- */
@media screen and (max-width: 768px) {
  .standing-row {
    grid-template-columns:
      22px minmax(0, 1fr) 76px 28px 28px 28px 36px;

    padding: 4px 6px;
    font-size: 12px;
    column-gap: 4px;
  }

  .team-info img {
    width: 18px;
    height: 18px;
  }

  .team-name {
    font-size: 10px;
  }


  .stats {
    font-size: 10px;
    gap: 4px;
    margin-right: 5px;
  }

  .gd,
  .pts {
    font-size: 10px;
  }
}

@media screen and (max-width: 420px) {
  .standing-row {
    grid-template-columns:
      18px minmax(56px, 1fr) 62px 22px 22px 22px 30px;
    padding: 4px;
    font-size: 11px;
    column-gap: 3px;
  }

  .team-info {
    gap: 4px;
  }

  .team-info img {
    width: 16px;
    height: 16px;
  }

  .team-name,
  .stats,
  .ga,
  .gf,
  .gd,
  .pts {
    font-size: 9px;
  }
}

@media screen and (max-width: 340px) {
  .standing-row {
    grid-template-columns:
      16px minmax(48px, 1fr) 54px 20px 20px 20px 28px;
    font-size: 10px;
    column-gap: 2px;
  }

  .team-info img {
    display: none;
  }
}