/* -- Responsive: Mobile (=768px) -- */
@media (max-width: 768px) {
  body section.section.leadership-section[data-leadership] {
    padding: clamp(40px, 6vw, 60px) 0 !important;
  }

  body section.section.leadership-section[data-leadership] .wrap {
    padding: 0 16px !important;
  }

  body section.section.leadership-section[data-leadership] .section-heading.center {
    margin-bottom: 32px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-grid,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-card,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid article.leader-card,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid article.leader-card[data-index] {
    height: auto !important;
    min-height: auto !important;
    border-radius: 18px !important;
    display: block !important;
  }

  body section.section.leadership-section[data-leadership] .leader-card-inner {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    height: auto !important;
  }

  body section.section.leadership-section[data-leadership] .leader-image-col {
    max-height: 320px !important;
    overflow: hidden !important;
  }

  body section.section.leadership-section[data-leadership] .leader-photo-wrap,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-photo-wrap {
    padding: 12px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-photo-wrap img,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-photo-wrap img {
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-content-col {
    padding: 20px 16px 24px !important;
    justify-content: flex-start !important;
  }

  body section.section.leadership-section[data-leadership] .quote-mark,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .quote-mark {
    font-size: 40px !important;
    margin-top: -2px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-quote,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-quote {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }

  body section.section.leadership-section[data-leadership] .leader-name,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-name {
    font-size: 19px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-role-badge,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-role-badge {
    font-size: 10px !important;
    padding: 5px 12px !important;
  }

  /* Mobile animation: both cards fade up */
  body section.section.leadership-section[data-leadership] .leader-card,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid article.leader-card,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid article.leader-card[data-index] {
    transform: translateY(30px) scale(0.97) !important;
  }

  body section.section.leadership-section[data-leadership] .leader-card.leadership-animate,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid article.leader-card.leadership-animate {
    transform: translateY(0) scale(1) !important;
  }
}

/* -- Responsive: Small mobile (=480px) -- */
@media (max-width: 480px) {
  body section.section.leadership-section[data-leadership] .wrap {
    padding: 0 16px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-grid {
    gap: 16px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-content-col {
    padding: 18px 14px 22px !important;
  }

  body section.section.leadership-section[data-leadership] .leader-quote,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-quote {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  body section.section.leadership-section[data-leadership] .leader-name,
  body section.section.leadership-section[data-leadership] .wrap .leader-grid .leader-name {
    font-size: 17px !important;
  }
}
/* -------------------------------------------
   GAME SECTION � Premium Dark Esports
   ------------------------------------------- */

#games.section.white,
body:not(.admin-body) #games.section.white {
  position: relative !important;
  isolation: isolate !important;
  background: #080A12 !important;
  border-block: none !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

#games.section.white::before,
#games.section.white::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Red diagonal lines � left side */
#games.section.white::before {
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 60px,
      rgba(255, 23, 68, 0.04) 60px,
      rgba(255, 23, 68, 0.04) 61px,
      transparent 61px,
      transparent 120px
    ),
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 90px,
      rgba(255, 23, 68, 0.06) 90px,
      rgba(255, 23, 68, 0.06) 91px,
      transparent 91px,
      transparent 180px
    ) !important;
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, transparent 65%) !important;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, transparent 65%) !important;
}

/* Gold diagonal lines � right side */
#games.section.white::after {
  background:
    repeating-linear-gradient(
      55deg,
      transparent,
      transparent 60px,
      rgba(255, 193, 7, 0.04) 60px,
      rgba(255, 193, 7, 0.04) 61px,
      transparent 61px,
      transparent 120px
    ),
    repeating-linear-gradient(
      55deg,
      transparent,
      transparent 90px,
      rgba(255, 193, 7, 0.06) 90px,
      rgba(255, 193, 7, 0.06) 91px,
      transparent 91px,
      transparent 180px
    ) !important;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, transparent 65%) !important;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, transparent 65%) !important;
}

#games.section.white .wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* -- Heading -- */
#games.section.white .games-heading-row,
body:not(.admin-body) #games .heading-row {
  text-align: center !important;
}

#games.section.white .section-heading .eyebrow {
  color: #ff6a79 !important;
  border-color: rgba(255, 106, 121, .45) !important;
}

#games.section.white .section-heading h2 {
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

#games.section.white .section-heading p {
  color: rgba(255, 255, 255, .65) !important;
}

#games.section.white .view-all-btn {
  background: linear-gradient(135deg, #FF1744, #b71c1c) !important;
  border: 1px solid rgba(255, 23, 68, .3) !important;
  color: #fff !important;
}

#games.section.white .view-all-btn:hover {
  background: linear-gradient(135deg, #ff4569, #d32f2f) !important;
  box-shadow: 0 6px 24px rgba(255, 23, 68, .35) !important;
}

/* -- Game Grid: 3 cols desktop -- */
body:not(.admin-body) #games .game-grid,
#games .game-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  align-items: stretch !important;
}

/* -- Game Card: dark glass -- */
body:not(.admin-body) #games .game-card,
#games .game-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  background: rgba(14, 18, 30, .88) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 23, 68, .04) !important;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  position: relative !important;
}

body:not(.admin-body) #games .game-card:hover,
#games .game-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(255, 193, 7, .28) !important;
  box-shadow:
    0 20px 48px rgba(255, 193, 7, .1),
    0 4px 16px rgba(0, 0, 0, .4) !important;
}

/* -- Game Image -- */
body:not(.admin-body) #games .game-image,
#games .game-image {
  aspect-ratio: 16 / 10 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #0d1120 !important;
  position: relative !important;
}

/* -- Game Body -- */
body:not(.admin-body) #games .game-body,
#games .game-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 20px 22px !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  background: transparent !important;
}

/* Remove ticket punch-holes for cleaner look */
body:not(.admin-body) #games .game-body::before,
body:not(.admin-body) #games .game-body::after,
#games .game-body::before,
#games .game-body::after {
  display: none !important;
}

body:not(.admin-body) #games .game-body h3,
#games .game-body h3 {
  color: #ffffff !important;
  font-size: 20px !important;
  letter-spacing: .03em !important;
}

/* -- Platform pill -- */
body:not(.admin-body) #games .platform-pill-new,
#games .platform-pill-new {
  background: rgba(255, 23, 68, .1) !important;
  color: #ff6a79 !important;
  border: 1px solid rgba(255, 23, 68, .18) !important;
}

/* -- Status pill -- */
body:not(.admin-body) #games .status-pill {
  font-weight: 700 !important;
}

/* -- Window note -- */
body:not(.admin-body) #games .window-note,
#games .window-note {
  color: #ff6a79 !important;
  font-weight: 700 !important;
}

/* -- Discount chip -- */
body:not(.admin-body) #games .game-body > .discount-chip,
#games .game-body > .discount-chip {
  color: #ffc62c !important;
  background: rgba(255, 193, 7, .1) !important;
  border-color: rgba(255, 193, 7, .22) !important;
}

body:not(.admin-body) #games .game-body > .discount-chip i,
#games .game-body > .discount-chip i {
  color: #ffc62c !important;
}

/* -- Price chips -- */
body:not(.admin-body) #games .price-chips p,
#games .price-chips p {
  background: rgba(255, 23, 68, .06) !important;
  border-color: rgba(255, 23, 68, .15) !important;
}

body:not(.admin-body) #games .price-chips p+p,
#games .price-chips p+p {
  background: rgba(255, 193, 7, .06) !important;
  border-color: rgba(255, 193, 7, .15) !important;
}

body:not(.admin-body) #games .price-chips small,
#games .price-chips small {
  color: rgba(255, 255, 255, .5) !important;
}

body:not(.admin-body) #games .price-chips strong,
#games .price-chips strong {
  color: #ffffff !important;
}

body:not(.admin-body) #games .price-chips del,
#games .price-chips del {
  color: rgba(255, 255, 255, .35) !important;
  text-decoration-color: currentColor !important;
}

/* Price chip notch color fix */
body:not(.admin-body) #games .price-chips p::after,
#games .price-chips p::after {
  background: #0e121e !important;
  border-color: rgba(255, 23, 68, .15) !important;
}

body:not(.admin-body) #games .price-chips p+p::after,
#games .price-chips p+p::after {
  border-color: rgba(255, 193, 7, .15) !important;
}

/* -- CTA button -- */
body:not(.admin-body) #games .card-cta,
#games .card-cta {
  background: linear-gradient(135deg, #b71c1c, #FF1744) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 23, 68, .25) !important;
}

body:not(.admin-body) #games .card-cta i,
#games .card-cta i {
  transition: transform .25s ease !important;
}

body:not(.admin-body) #games .game-card:hover .card-cta,
#games .game-card:hover .card-cta {
  box-shadow: 0 12px 28px rgba(255, 23, 68, .4) !important;
  filter: brightness(1.1) !important;
}