:root {
  --gc-gradient: linear-gradient(180deg, #FFD338 8.33%, #FCAF00 36.7%, #FFFF8B 103.53%);
  --sc-gradient: linear-gradient(180deg, #579415 -13.89%, #7AED00 23.66%, #D5F91C 88.89%);
  --gold-gradient: linear-gradient(90deg, #FDC20E 0%, #FF7403 100%);
  --gc-stroke: linear-gradient(180deg, #FFFF00, #FFFF01);
  --sc-stroke: linear-gradient(180deg, #00FF07, #01FF04);
  --silver-gradient: linear-gradient(257deg, #4F555F 47.45%, #A4B1C5 72.63%, #FFF 78.47%, #7A8392 87.99%);
  --bronze-gradient: linear-gradient(249deg, #AC6825 60.44%, #F0A56F 72.44%, #FFD3B3 88.63%, #AC6825 96.64%);
  --gold: #FEC20E;
}

body {
  background-color: #002060;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.swappable-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.heading-gradient {
  background: linear-gradient(90deg, #FEC20E 28%, #FF7403 97.28%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-size: 28px;
  font-style: italic;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.56px;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding-left: .3em;
  padding-right: .3em;
}

.hero-banner {
  background-image: url(../images/leaderboard/hero-bg-mobile.avif?v=1.1);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  padding-left: 20px;
  position: relative;
}

.hero-banner:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: linear-gradient(to bottom, transparent, #002060);
  z-index: 0;
}

.hero-banner img {
  width: 100%;
  height: auto;
}

.hero-banner .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding-top: 70px;
  position: relative;
  z-index: 1;
}

.hero-banner article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-banner .bottom {
  gap: 10px;
  padding-top: 14vh;
}

.hero-banner article .title {
  aspect-ratio: 280/90;
  width: 100%;
  max-width: 280px;
}

.hero-banner article .prize-pool {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.5em;
}

.hero-banner article .prize-pool .coin-gc,
.hero-banner article .prize-pool .coin-sc {
  display: flex;
  font-weight: 900;
  align-items: center;
  gap: 10px;
}

.hero-banner article .prize-pool .coin-gc span,
.hero-banner article .prize-pool .coin-sc span {
  position: relative;
}

.hero-banner article .prize-pool .coin-gc span:after,
.hero-banner article .prize-pool .coin-sc span:after {
  content: attr(data-text);
  /* requires data-text="Your Text" on the element */
  position: absolute;
  z-index: -1;
  inset: 0;
  paint-order: stroke fill;
}

.hero-banner article .prize-pool .coin-gc span {
  background: var(--gc-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-banner article .prize-pool .coin-sc,
.hero-banner article .prize-pool .coin-gc {
  font-size: 34px;
  line-height: 1em;
}

.hero-banner article .prize-pool .coin-gc span:after {
  background: var(--gc-stroke);
  /* your stroke gradient */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px transparent;
}

.hero-banner article .prize-pool .coin-gc img {
  aspect-ratio: 134/133;
  height: 38px;
}

.hero-banner article .prize-pool .coin-sc span {
  background: var(--sc-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-banner article .prize-pool .coin-sc span:after {
  background: var(--sc-stroke);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px transparent;
}


.hero-banner article .prize-pool>em {
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
}

.hero-banner article .prize-pool .coin-gc em,
.hero-banner article .prize-pool .coin-sc em {
  background: white;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  letter-spacing: -0.5px;
}

.hero-banner article .prize-pool .coin-sc img {
  aspect-ratio: 129/126;
  height: 38px;
}

.hero-banner article .min-play {
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.35px;
}

.hero-banner article .conditions {
  color: #FFF;
  text-align: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
}

.hero-banner article .counter {
  border-radius: 10px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(7.5px);
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.3px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.hero-banner article .counter .ended {
  font-size: 18px;
}

.hero-banner article .counter span:not(.counter-label) {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 0;
  font-size: 14px;
  width: 45px;
  text-align: center;
}

.hero-banner article .counter span:first-of-type {
  margin-right: 17px;
}

.hero-banner article .conditions,
.hero-banner article .btn {
  width: 90%;
  max-width: 324px;
  margin-left: auto;
  margin-right: auto;
}

.tournament-info {
  border-radius: 15px;
  background: radial-gradient(74.83% 39.3% at 50% 2.27%, #001744 17.5%, #000C23 100%);
  color: rgba(255, 255, 255, 0.80);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 16.8px */
  letter-spacing: -0.35px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.tournament-info .heading {
  color: #FFF;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  /* 24px */
  letter-spacing: -0.5px;
  margin-bottom: 17px;
  margin-top: 0;
}

.tournament-info table {
  width: 100%;
}

.tournament-info table tr td {
  text-align: left;
  padding-bottom: 20px;
}

.tournament-info table tr td:first-of-type {
  font-weight: 700;
}

.tournament-info table tr td:not(first-of-type) {
  font-weight: 500;
}

.gold {
  color: #FFCE00;
}

.btn {
  display: flex;
  height: 46px;
  padding: 17px 22px 19px 22px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 645665px;
  background: linear-gradient(87deg, #FF7403 -31.83%, #FDC20E 108.42%);
}

.btn span {
  color: #FFF;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 28px;
  /* 155.556% */
}

.top-winners {
  background-image: url("../images/leaderboard/winner-bg.avif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}

.top-winners:before {
  content: "";
  background: linear-gradient(to bottom, #002060, transparent);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 0;
}

.top-winners:after {
  content: "";
  background: linear-gradient(to bottom, transparent, #002060);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 0;
}

.top-winners__place.top-winners__place--2 {
  margin-bottom: -25%;
}

.top-winners__place.top-winners__place--3 {
  margin-bottom: -30%;
}

.top-winners__title {
  position: relative;
  z-index: 2;
}

.top-winners__podium {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.top-winners__row {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: -0.5rem;
  max-width: 100%;
  padding: 0 0.25rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.top-winners__place {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: flex-end;
  min-width: 0;
  padding-bottom: 0.25rem;
  position: relative;
  text-align: center;
}

.top-winners__place--1 {
  padding-top: 0.5rem;
  padding-bottom: 10%;
}

.top-winners__place--1::before {
  background: radial-gradient(ellipse 70% 80% at 50% 70%,
      rgba(100, 180, 255, 0.14) 0%,
      transparent 65%);
  content: "";
  height: 140%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -10%;
  transform: translateX(-50%);
  width: 160%;
  z-index: -1;
}

.top-winners__trophy {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: clamp(2.5rem, 18vw, 5rem);
}

.top-winners__place--1 .top-winners__trophy {
  width: clamp(2.75rem, 22vw, 5.75rem);
}

.top-winners__name {
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -1.75px;
  line-height: 100%;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0 0.15rem;
}

.top-winners__name--silver {
  background: linear-gradient(261deg,
      #4f555f 24.87%,
      #a4b1c5 40.54%,
      #fff 50.43%,
      #7a8392 56.34%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.top-winners__name--gold {
  background: var(--Zula-gradient-cta-wide,
      linear-gradient(90deg, #fdc20e 0%, #ff7403 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.top-winners__name--bronze {
  background: linear-gradient(249deg,
      #ac6825 60.44%,
      #f0a56f 72.44%,
      #ffd3b3 88.63%,
      #ac6825 96.64%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.top-winners__base {
  line-height: 0;
  margin-top: 0;
  width: 100%;
}

.top-winners__base-img {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: 100%;
}

.collect-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.collect-points .wrapper {
  display: flex;
  flex-direction: column;
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 19.2px */
  letter-spacing: -0.4px;
  gap: 5px;
}

.collect-points .wrapper .heading {
  display: table;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 26.4px */
  letter-spacing: -0.55px;
  background: linear-gradient(90deg, #FE7403 0%, #FEC20E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 auto;
}

.collect-points .wrapper .column p {
  margin: 0;
}

.collect-points .wrapper .column {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 20px;
  border-radius: 15px;
  background: radial-gradient(74.83% 39.3% at 50% 2.27%, #001744 17.5%, #000C23 100%);
}

.collect-points-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 5px;
}

.collect-points__pill {
  background-color: #001744;
  border-radius: 100px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 10px 20px;
}

.collect-points__value {
  color: #FFCE00;
  font-size: 14px;
  font-style: normal;
  font-weight: 900 !important;
  line-height: normal;
}

span.collect-points__label.text-white.text-start {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 24px */
  letter-spacing: -0.5px;
}

.fuel-race__banner {
  animation: pulseGlow 2s ease-in-out infinite, shimmer 2s ease-in-out infinite;
  background-color: #001744;
  background-image: linear-gradient(110deg,
      transparent 30%,
      rgba(253, 194, 14, 0.08) 45%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(253, 194, 14, 0.08) 55%,
      transparent 70%);
  background-position: -200% 0;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  border: 3px solid rgb(253, 194, 14);
  border-radius: 10px;
  margin: 0 auto;
  max-width: 537px;
  opacity: 1;
  position: relative;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  text-align: center;
  padding: 15px 20px;
}

.fuel-race__banner .btn {
  width: fit-content;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .fuel-race__banner {
    animation: none;
    background-position: 0 0;
    box-shadow: 0 0 8px 2px rgba(253, 194, 14, 0.4),
      inset 0 0 4px 1px rgba(253, 194, 14, 0.1);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 8px 2px rgba(253, 194, 14, 0.4),
      inset 0 0 4px 1px rgba(253, 194, 14, 0.1);
  }

  50% {
    box-shadow: 0 0 22px 6px rgba(253, 194, 14, 0.7),
      inset 0 0 10px 3px rgba(253, 194, 14, 0.2);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.fuel-race__title,
.fuel-race__subtitle {
  font-style: italic;
  font-weight: 900;
  line-height: 136%;
  /* 46.24px */
  letter-spacing: -0.35px;
  background: linear-gradient(90deg, #FE7403 0%, #FEC20E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.fuel-race__title {
  font-size: 18px;
}

.fuel-race__subtitle {
  font-size: 14px;
  letter-spacing: -0.7px;
}

.racetrack-table nav {
  border-radius: 100px;
  background: #001744;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 269px;
  margin-left: auto;
  margin-right: auto;
}

.racetrack-table nav button {
  padding: 6px 20px;
  border-radius: 73px;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  color: #FFFBFA;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 171.429% */
}

.racetrack-table nav button.active {
  border: 1px solid #FFF;
  background: linear-gradient(180deg, #021C41 0%, #1E457D 100%);
}

.racetrack-table {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.leaderboard {
  border-radius: 15px;
  padding: 10px;
  background: radial-gradient(74.83% 39.3% at 50% 2.27%, #001744 17.5%, #000C23 100%);
}

.leaderboard .top-label {
  display: flex;
  flex-direction: row;
  color: #FFF;
  font-weight: 600;
  line-height: 120%;
  /* 24px */
  justify-content: space-between;
  align-items: center;
}

.leaderboard .top-label .heading {
  font-size: 20px;
  font-style: normal;
  letter-spacing: -0.5px;
  margin: 0
}

.leaderboard .top-label div {
  font-size: 16px;
  letter-spacing: -0.4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.leaderboard .top-label div small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -0.25px;
}

.leaderboard-header,
.leaderboard-row {
  display: grid;
  grid-template-columns: 60px 1fr .5fr 60px;
}

.leaderboard-header {
  margin-top: 17px;
  margin-bottom: 10px;
  padding: 0px 16px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.7;
}

.leaderboard:not(.prize-table) .leaderboard-header span:last-of-type {
  text-align: center;
}

.leaderboard-row {
  align-items: center;
  background: #111840;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 2px;
  text-align: center;
  position: relative;
}

.prize-table .leaderboard-header,
.prize-table .leaderboard-row {
  grid-template-columns: 1fr 1fr;
}

.rank {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rank-1 .rank:before,
.rank-2 .rank:before,
.rank-3 .rank:before {
  background-size: contain;
  content: "";
  width: 21px;
  height: 21px;
}

.rank-1 .rank:before {
  background-image: url(../images/leaderboard/icon-trophy-gold.svg);
}

.rank-2 .rank:before {
  background-image: url(../images/leaderboard/icon-trophy-silver.svg);
}

.rank-3 .rank:before {
  background-image: url(../images/leaderboard/icon-trophy-bronze.svg);
}

.rank-1 .nickname span,
.rank-1 .rank span {
  background: var(--gold-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rank-2 .nickname span,
.rank-2 .rank span {
  background: var(--silver-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rank-3 .nickname span,
.rank-3 .rank span {
  background: var(--bronze-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.coin-amount,
.points,
.nickname,
.daily-mining,
.hoard,
.basic-rank,
.old-rank {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}

.points {
  text-align: right;
}

.nickname {
  text-align: left;
  word-break: break-all;
  padding-right: 10px;
}

.prize {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.prize-sc,
.prize-gc {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-amount {
  display: flex;
  background: var(--sc-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  gap: 5px;
  align-items: center;
}

.sc-amount:before {
  content: "";
  display: inline-block;
  background-image: url(../images/leaderboard/icon-coin-sc.avif);
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
}

.gc-amount {
  display: flex;
  background: var(--gc-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  gap: 5px;
  align-items: center;
}

.gc-amount:before {
  content: "";
  display: inline-block;
  background-image: url(../images/leaderboard/icon-coin-gc.avif);
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
}

.leaderboard-scroll {
  max-height: 600px;
  /* adjust to fit exactly 10 rows visually */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e2a5e transparent;
}

/* Chrome/Safari scrollbar */
.leaderboard-scroll::-webkit-scrollbar {
  width: 4px;
}

.leaderboard-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.leaderboard-scroll::-webkit-scrollbar-thumb {
  background: #1e2a5e;
  border-radius: 4px;
}

.steps-list {
  list-style: none;
  counter-reset: steps;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  text-align: left !important;
}

.steps-list li {
  counter-increment: steps;
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.4em;
}

.steps-list li::before {
  content: counter(steps);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 100px;
  border: 1px solid #FFF;
  background: linear-gradient(90deg, #FDC20E 4.2%, #FF7403 43%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.left_side img {
  max-width: 385px !important;
  width: 100%;
  display: none;
}

.right_side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right_side .btn {
  max-width: 346px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
}

.important-to-know {
  color: #FFF;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 16.8px */
  letter-spacing: -0.35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.important-to-know ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style-position: inside;
  padding: 0;
}

.accordion-button,
.accordion-button:not(.collapsed) {
  background: #034CE3;

}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media (min-width:390px) {
  .collect-points__pill {
    padding: 10px 20px;
  }

  .hero-banner .bottom {
    padding-top: 24vh;
  }

  .coin-amount,
  .points,
  .nickname {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
  }
}

@media (min-width:440px) {
  .hero-banner .bottom {
    padding-top: 30vh;
  }

}

@media (min-width: 480px) {
  .top-winners__row {
    gap: 0.5rem;
    margin-bottom: -0.75rem;
    padding: 0 0.5rem;
  }

  .top-winners__place {
    gap: 0.5rem;
  }
}

@media (min-width: 768px) {
  .points {
    text-align: center;
  }

  body {
    gap: 50px;
  }

  .swappable-block {

    flex-direction: column-reverse;
    gap: 50px;
  }

  .leaderboard-header,
  .leaderboard-row {
    grid-template-columns: 80px 1fr .5fr .5fr;
  }

  .left_side img {
    display: block;
  }

  .hero-banner article .prize-pool .coin-sc span:after,
  .hero-banner article .prize-pool .coin-gc span:after {
    -webkit-text-stroke: 3px transparent;
  }

  .heading-gradient {
    font-size: 40px;
  }

  .hero-banner {
    background-image: url(../images/leaderboard/hero-bg-desktop.avif?v=1.1);
  }

  .hero-banner .top {
    flex-direction: row;
  }

  .hero-banner .bottom {
    gap: 5px;
    padding-top: 0;
    width: 356px;
  }

  .hero-banner article .prize-pool .coin-gc em,
  .hero-banner article .prize-pool .coin-sc em {
    font-size: 36px;
  }

  .hero-banner .wrapper {
    padding-top: 80px;
  }

  .hero-banner article {
    justify-content: space-between;
  }

  .hero-banner article .title {
    aspect-ratio: 548/175;
    display: block;
    width: 356px;
    max-width: none;
  }

  .hero-banner article .prize-pool {
    align-items: flex-end;
    gap: 5px;
  }

  .top-winners__name {
    font-size: 24px;
  }

  .top-winners__row {
    margin-bottom: -1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
  }

  .top-winners__base {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
  }

  .basic-rank,
  .old-rank,
  .nickname,
  .rank {
    font-size: 20px;
  }

  .daily-mining,
  .hoard,
  .points,
  .coin-amount {
    font-size: 16px;
  }

  .gc-amount:before,
  .sc-amount:before {
    width: 19px;
    height: 19px;
  }

  .leaderboard .top-label .heading {
    font-size: 26px;
  }

  .leaderboard .top-label div {
    font-size: 20px;
  }

  .leaderboard .top-label div small {
    font-size: 14px;
  }

  .leaderboard {
    padding: 20px;
  }

  .leaderboard-scroll {
    max-height: 820px;
  }

  .fuel-race__title {
    font-size: 34px;
  }

  .fuel-race__subtitle {
    font-size: 28px;
  }

  .collect-points .wrapper {
    font-size: 16px;
    gap: 20px;

  }

  .collect-points .wrapper .column {
    padding: 20px 30px;
    gap: 13px;
    min-height: 196px;
    justify-content: center;
  }

  .collect-points .wrapper .column:not(:nth-of-type(2)) {
    gap: 30px;
  }

  .collect-points .wrapper .column .heading {
    font-size: 22px;
  }

  .collect-points__value,
  span.collect-points__label.text-white.text-start {
    font-size: 16px;
  }

  .collect-points__pill {
    padding: 20px 40px;
  }

  .collect-points-grid {
    gap: 10px;
  }

  .collect-points {
    gap: 50px;
  }

  .right_side .btn {
    margin-left: initial;
    margin-right: initial;
  }

  .right_side .heading-gradient {
    text-align: left;
    margin: 0;
  }
}

@media (min-width: 1024px) {

  .top-winners__name {
    font-size: 30px;
  }

  .top-winners__row {
    margin-bottom: -1.25rem;
    max-width: 56rem;
  }

  .top-winners__base {
    max-width: 56rem;
  }

  .collect-points .wrapper {
    flex-direction: row;
    align-items: flex-start;
  }

  .collect-points .wrapper .column:not(:nth-of-type(2)) {
    width: 29%;
  }
}

@media (min-width:1200px) {

  .hero-banner .bottom,
  .hero-banner article .title {
    width: 548px;
  }

  .hero-banner article .prize-pool .coin-gc img,
  .hero-banner article .prize-pool .coin-sc img {
    height: 50px;
  }

  .hero-banner article .prize-pool .coin-gc,
  .hero-banner article .prize-pool .coin-sc {
    font-size: 60px;
  }

  .hero-banner article .prize-pool>em {
    font-size: 26px;
  }
}

@media (min-width:1366px) {

  .hero-banner article .prize-pool .coin-gc img,
  .hero-banner article .prize-pool .coin-sc img {
    height: 60px;
  }

  .hero-banner article .prize-pool .coin-gc,
  .hero-banner article .prize-pool .coin-sc {
    font-size: 70px;
  }

  .hero-banner .wrapper {
    gap: 35px;
  }

  .hero-banner .bottom {
    gap: 10px;
  }

  .tournament-info {
    margin-top: 35px;
  }
}