:root {
  --sports-green: #00ff88;
  --sports-gold: #ffd166;
  --sports-orange: #ff9500;
  --sports-red: #ff5d73;
  --sports-blue: #54c2ff;
  --sports-purple: #b38cff;
}

.sports-page body {
  background: linear-gradient(180deg, #0b1017 0%, #101a24 42%, #121a27 100%);
}

.sports-page .hero {
  padding-top: 9rem;
}

.sports-page .site-header {
  background: rgba(11, 16, 23, 0.45);
}

.sports-page .site-header.scrolled {
  background: rgba(11, 16, 23, 0.96);
}

.sports-visual-card {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), rgba(255, 149, 0, 0.04)),
              linear-gradient(180deg, rgba(22, 31, 40, 0.9), rgba(10, 14, 21, 0.95));
}

.sports-visual-figure {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), rgba(255, 149, 0, 0.04));
  border: 1px solid rgba(0, 255, 136, 0.22);
  overflow: hidden;
}

.sports-match-card {
  position: relative;
  z-index: 2;
  width: min(92%, 460px);
  background: rgba(9, 14, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.sports-match-header,
.match-topline,
.match-header,
.odds-row-item,
.hot-pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sports-match-header {
  color: var(--color-grey);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 93, 115, 0.12);
  color: var(--sports-red);
  border: 1px solid rgba(255, 93, 115, 0.28);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sports-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.team-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
}

.team-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-weight: 800;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.25);
}

.team-badge-green {
  background: linear-gradient(135deg, #14b86a, #0a874f);
}

.team-badge-orange {
  background: linear-gradient(135deg, #ff9a1a, #ff6a00);
}

.team-badge-blue {
  background: linear-gradient(135deg, #4ab2ff, #307dff);
}

.team-badge-red {
  background: linear-gradient(135deg, #ff657d, #d93f5d);
}

.team-badge-purple {
  background: linear-gradient(135deg, #af7bff, #7a4cfb);
}

.team-badge-gold {
  background: linear-gradient(135deg, #f6d365, #fda085);
}

.vs-tag {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-grey);
}

.sports-score {
  color: var(--color-white);
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
}

.sports-floating-chip {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0b1017;
  background: linear-gradient(135deg, var(--sports-green), var(--sports-gold));
  box-shadow: 0 12px 25px rgba(0, 255, 136, 0.25);
}

.chip-one {
  right: 8%;
  top: 18%;
}

.chip-two {
  left: 8%;
  bottom: 18%;
  color: #111827;
  background: linear-gradient(135deg, #f8f5ff, #d9e4ff);
}

.glow-line {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.7), transparent);
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.5);
}

.featured-matches-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.match-card {
  background: linear-gradient(180deg, rgba(18, 24, 32, 0.9), rgba(10, 14, 21, 0.96));
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.match-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow: 0 16px 36px rgba(0, 255, 136, 0.12);
}

.league-tag {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
  font-weight: 600;
}

.match-header {
  margin: 2rem 0 1.5rem;
}

.match-vs {
  color: var(--color-grey);
  font-weight: 700;
  font-size: 1.2rem;
}

.match-score {
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

.odds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 1.2rem;
  color: var(--color-grey);
}

.odds-row span {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 0.5rem 0.8rem;
}

.odds-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 2.5rem;
  align-items: stretch;
}

.odds-main,
.sports-sidebar {
  padding: 2.4rem;
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 24, 32, 0.92), rgba(12, 17, 23, 0.96));
}

.section-head {
  margin-bottom: 2rem;
}

.odds-list {
  display: grid;
  gap: 1.2rem;
}

.odds-row-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}

.team-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  color: var(--color-white);
}

.mini-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 800;
}

.mini-badge.green { background: linear-gradient(135deg, #18b369, #0f8b52); }
.mini-badge.orange { background: linear-gradient(135deg, #ff9a1a, #ff6a00); }
.mini-badge.blue { background: linear-gradient(135deg, #49adff, #2d7ef4); }
.mini-badge.purple { background: linear-gradient(135deg, #af7bff, #7a4cfb); }

.market-tag {
  font-size: 1.1rem;
  color: var(--color-green);
  background: rgba(0, 255, 136, 0.08);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(0, 255, 136, 0.14);
}

.sports-sidebar .eyebrow {
  margin-bottom: 1.8rem;
}

.hot-pick-list {
  display: grid;
  gap: 1.2rem;
}

.hot-pick-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
}

.hot-title {
  font-size: 1.4rem;
  color: var(--color-white);
}

.hot-pick-item strong {
  font-size: 1.5rem;
  color: var(--sports-green);
}

.sports-categories-section {
  padding-top: 1rem;
}

.sports-promo .promo-banner {
  min-height: 250px;
}

.promo-eyebrow {
  font-size: 1.2rem;
}

.cta-section {
  padding: 2rem 0 6rem;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.8rem 3rem;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(255, 149, 0, 0.05));
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.cta-inner h2 {
  font-size: clamp(2.6rem, 4vw, 4rem);
}

.site-footer {
  padding-top: 1rem;
}

.logo-footer {
  width: 150px;
  margin-bottom: 1.4rem;
}

.footer-badges {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-grey);
}

@media (max-width: 1024px) {
  .featured-matches-grid {
    grid-template-columns: 1fr;
  }

  .odds-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sports-match-card {
    width: 100%;
    padding: 1.6rem 1.2rem;
  }

  .sports-teams {
    gap: 0.8rem;
  }

  .team-badge {
    width: 46px;
    height: 46px;
  }

  .sports-score {
    font-size: 1.4rem;
  }

  .sports-visual-figure {
    min-height: 310px;
  }

  .odds-main,
  .sports-sidebar,
  .cta-inner {
    padding: 2rem 1.5rem;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .sports-page .hero {
    padding-top: 8.5rem;
  }

  .sports-visual-figure {
    min-height: 270px;
  }

  .sports-floating-chip {
    padding: 0.65rem 0.9rem;
    font-size: 1.1rem;
  }

  .featured-matches-grid {
    gap: 1.5rem;
  }

  .match-card,
  .odds-main,
  .sports-sidebar {
    padding: 1.5rem 1.2rem;
  }

  .odds-row-item,
  .hot-pick-item {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .game-card {
    min-height: 0;
  }
}