:root {
  --gc-gradient: linear-gradient(
    180deg,
    #fff5a0  0%,   /* pale yellow specular top    */
    #ffd700 18%,   /* bright gold upper            */
    #ffaa00 38%,   /* vivid amber mid-top          */
    #e06000 62%,   /* burnt orange center shadow   */
    #c84400 78%,   /* deep rust low shadow         */
    #ff9900 92%,   /* warm orange base rim         */
    #ffcc00 100%   /* gold base highlight          */
  );
  --sc-gradient: linear-gradient(
    180deg,
    #afffb0  0%,   /* bright highlight top */
    #55ff22 28%,   /* vivid lime mid-top  */
    #22cc00 55%,   /* solid green center  */
    #0f7a00 82%,   /* dark green shadow   */
    #1db800 100%   /* mid-dark base       */
  );

  --gc-stroke: #FFFF00;
  --sc-stroke: #01FF06;

}

.hero-banner {
  background-image: url(../images/leaderboard/lost-gold-hunt/hero-bg-mobile.webp?v=1.1);
}

.hero-banner article .title {
  aspect-ratio: 672/386;
}

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

.gold-mining .leaderboard-row {
  padding-left:0;
  padding-right:0;
}

.old-rank {
  text-align: center;
}

.racetrack-table nav button.gold {
  color: var(--gold);
}
.racetrack-table nav button.gold.active {
  border: 1px solid var(--gold);
}

.racetrack-table nav,
.racetrack-table nav button {
  width: fit-content;
}

.top-winners {
  background-image: url("../images/leaderboard/winner-bg.avif");
}

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

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

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

.bg-img {
  border-radius: 0;
  padding: 0;
  background: none;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  overflow: hidden;  
}

.racetrack.leaderboard {
  background-image: url(../images/leaderboard/lost-gold-hunt/treasure-hunter-rankings-mobile.avif);
  aspect-ratio: 708/1830;

}

.racetrack.gold-mining {
  background-image: url(../images/leaderboard/lost-gold-hunt/gold-mine-mobile.avif);
  aspect-ratio: 708/1263;
}

.prize-table.leaderboard {
  background-image: url(../images/leaderboard/lost-gold-hunt/prize-pool-mobile.avif);
  aspect-ratio:708/1709;
}

.leaderboard-header {
  margin-top: 44%;
  margin-left:auto;
  margin-right:auto;
  width:85%;
  color: rgba(0, 0, 0, 0.80);
  font-size: 10px;
}
.prize-table .leaderboard-header {
  margin-top: 50%;
}

.leaderboard-header, .leaderboard-row {
    display: grid;
    grid-template-columns: 47px .4fr .3fr .3fr;
}

.leaderboard-scroll {
  max-height: 70.5%;    
  width:78%;
  margin-left:auto;
  margin-right:auto;
}

.gold-mining .leaderboard-scroll {
  max-height:56%;
}

.gold-mining .leaderboard-header, 
.gold-mining .leaderboard-row {
    display: grid;
    grid-template-columns: 40px 40px .4fr .4fr 0.4fr;
}


.quick-questions,
.top-50 {
  max-width:800px;
}

.for-gold-mining {
  display:none;
}

.col1a,
.col2a,
.col4a{
  text-align: center;
}

.col2a span {
  background: var(--gold-gradient);
  background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

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

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

.hero-banner article .prize-pool {
  gap: 9px;
}

.hero-banner article .prize-pool .coin-sc, 
.hero-banner article .prize-pool .coin-gc {
  filter: drop-shadow(0 0 2px black);
}

.leaderboard-header {
  color: black;
  font-weight: 700;
}

.quick-questions,
.top-50 {
  display:flex;
  flex-direction: column;
  gap: 20px;
}
.top-50 ol {
  gap:10px;
}

.prize-table {
  gap: 10px;
  display: flex;
  flex-direction: column;
}

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

.prize-table .leaderboard-header span:first-of-type {
  padding-left:13px;
}

@media (min-width:425px) {
  .hero-banner article .prize-pool {
    gap: 13px;
  }  
}
@media (min-width: 768px) {
  .leaderboard-header, .leaderboard-row {
      grid-template-columns: 80px 1fr .5fr .5fr;
  }

  .prize-table .leaderboard-header,
  .prize-table .leaderboard-scroll  {
    width:65%;
  }

  .quick-questions,
  .top-50 {
    gap: 30px;
  }

  .gold-mining .leaderboard-scroll .col1a,
  .gold-mining .leaderboard-header .col1a,
  .gold-mining .leaderboard-scroll .col2a,
  .gold-mining .leaderboard-header .col2a {
    padding-right:10px;
  }

  .gold-mining .leaderboard-header {
    padding-left:0;
    padding-right:0;
  }
  .gold-mining .leaderboard-header, 
  .gold-mining .leaderboard-row {
    grid-template-columns: 90px 90px .6fr .4fr .3fr;
  }


  .gold-mining .leaderboard-scroll {
    max-height:45%;
  }

  .gold-mining .leaderboard-row {
    padding-top:5px;
    padding-bottom:5px;
  }

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

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

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

  .leaderboard-header {  
    margin-top: 50%;
    font-size:16px;
    width:80%;
  }

  .gold-mining .leaderboard-header {  
    margin-top: 42%;
  }

  .leaderboard-scroll {
    max-height: 50%;    
    width:80%;
  }

  .bg-img {
    margin-left:auto;
    margin-right:auto;
    max-width: 1028px;
  }
  .hero-banner {
    background-image: url(../images/leaderboard/lost-gold-hunt/hero-bg-desktop.avif?v=1.1);
  }

  .racetrack.leaderboard {
    background-image: url(../images/leaderboard/lost-gold-hunt/treasure-hunter-rankings-desktop.avif?v=1.1);
    aspect-ratio: 1801/2639;

  }

  .racetrack.gold-mining {
    background-image: url(../images/leaderboard/lost-gold-hunt/gold-mine-desktop.avif);
    aspect-ratio: 1785/2163;
  }

  .prize-table.leaderboard {
    background-image: url(../images/leaderboard/lost-gold-hunt/prize-pool-desktop.avif);
    aspect-ratio:1785/2787;
  }
}



@media (min-width:1024px) {
  .gold-mining .leaderboard-header, 
  .gold-mining .leaderboard-row {
    grid-template-columns: 100px 110px .6fr .4fr .3fr;
  }

  .gold-mining .leaderboard-scroll .col1a,
  .gold-mining .leaderboard-header .col1a,
  .gold-mining .leaderboard-scroll .col2a,
  .gold-mining .leaderboard-header .col2a {
    padding-right:20px;
  }

  .quick-questions .wrapper {
    flex-wrap: wrap;
  }
  .quick-questions .wrapper .column {
    flex: 0 0 calc(50% - 30px);
    min-height: auto;
  }

  .racetrack-table {
    position: relative;
    max-width:1100px;
  }
  .racetrack-table:before {
    position:absolute;
    background-image:url(../images/leaderboard/lost-gold-hunt/polly.avif);
    background-size: contain;
    aspect-ratio: 698/626;
    content:"";
    bottom:0;
    left:0;
    width:27%;
    z-index:1;
  }
  .racetrack-table:after {
    position:absolute;
    background-image:url(../images/leaderboard/lost-gold-hunt/wheel.avif);
    background-size: contain;
    aspect-ratio: 487/580;
    content:"";
    bottom:0;
    right:0;
    width:20%;
    z-index:1;
  }
}