.prediction-results {
  padding-inline: 0;
  background-color: hsl(from var(--background-color) h s calc(l + 0));
  background-image:
    var(--background-results), 
    radial-gradient(
      ellipse farthest-side at bottom, 
      hsl(from var(--key-color) h s l / 0.4), 
      transparent
    ),
    linear-gradient(
      to top, 
      black,
      transparent
    );
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto, auto, auto;
}

.results {
  --card-width: 14rem;
  min-height: 90px;
}

.results-ui {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 1rem;
}

.results-wrapper {
  padding-block: 1rem;
}

@media (width <= 1080px) {
  .results-wrapper {
    --padding: 8vw;
  }
}

@media (width <= 600px) {
  .results-wrapper {
    --padding: 9vw;
  }
}

/* 260609-CSS-A START */
/* If results-wrapper is empty, there are no predictions on record, this section is hidden */
.prediction-results:has(.results-wrapper:empty) {
  display: none;
}
/* 260609-CSS-A END */

.result-block {
  --border-image: var(--frame-matchblock); 
  --border-slice: 30;
  --border-width: 1.875rem;

  pointer-events: none;
  flex: 0 0 var(--card-width);
  display: flex;
  flex-direction: column;

  background-color: hsl(from var(--esports-nav-base-color) h s 15%);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  text-align: left;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  filter: drop-shadow(0 5px 2px hsl(from black h s l / 0.5));
}

.result-date {
  letter-spacing: 0.1em;
  font-size: 0.625em;
  opacity: 0.8;
}

.result-type {
  text-transform: uppercase;
  font-size: 0.875em;
  opacity: 0.8;
  border-block-end: 1px solid hsl(from var(--esports-nav-base-color) h s 35%);
}

.result-text {
  font-size: 1.25em;
  padding-block: 0.5em 1em;
  
  display: flex;
  justify-content: flex-start;
  align-items: center;

  flex: 1 0 auto;
}

.result-reward {
  font-size: 2em;
  font-weight: 700;
  font-family: var(--font-family);
  justify-content: flex-end;
  line-height: 1;
}

.result-block.correct {
  background-image: radial-gradient(circle at top, 
    hsl(from var(--key-color) h s l / 0.2) 30%, 
    transparent 100%);

  .result-reward {
    color: hsl(from var(--key-color) h s 65%);
    filter: drop-shadow(0 0 10px var(--key-color));
  }
}


.prediction-results {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: 
   "header" "slider" "ui";

  .club-section-intro {
    grid-area: header;
    margin-block-end: 0;
  }

  .club-section-intro + .results-ui {
    grid-area: ui;
  }

  .results {
    grid-area: slider;
  }

  .results-slider-nav {
    grid-area: slider;
    z-index: 1;
  }
}

.results-slider-nav {
  padding: 0.5vw;
  filter: drop-shadow(0 0 10px black);
  gap: 0.25rem;
}

@media (width > 600px) {
  .results-slider-nav button {
    width: 2.5rem;
    height: 9rem;
    font-size: 2rem;
  }
}

@media (width <= 600px) {
  .prediction-results .results-slider-nav{
    grid-area: unset;
  }
  .results-slider-nav {
    justify-content: center;
  }
  .results-slider-nav button {
    width: 40%;
    height: auto;
    padding: 0.5rem 1rem;
  }
}




.results-grid {
  --gap: 1rem;
  display: grid;
  grid-template-columns: repeat(
    auto-fit, 
    minmax(
      min(100%, calc(var(--card-width) - var(--gap))), 
      1fr
    )
  );
  gap: 1rem;
}

/* 260609-CSS-G START */
.results-grid {
  --columns: 6;
  grid-template-columns: repeat(var(--columns),1fr);
}
@media (width <= 1200px) {
  .results-grid {
    --columns:5
  }
}
@media (width <= 1000px) {
  .results-grid {
    --columns:4
  }
}
@media (width <= 900px) {
  .results-grid {
    --columns:3
  }
}
@media (width <= 700px) {
  .results-grid {
    --columns:2
  }
}
@media (width <= 600px) {
  .results-grid {
    --columns:1
  }
}
/* 260609-CSS-G END */

.results-page {
  padding-block-start: 0;
  background-color: transparent;
  background-image: radial-gradient(
    ellipse farthest-side at center,
    hsl(from var(--key-color) h calc(s - 40) calc(l - 30) / 0.6),
    transparent
  );
}

.results-page-ui {
  label {
    padding: 0.5em;
  }
}

.results-filter {
  display: flex;
  align-items: center;
}

.results-page:has(#show-correct:checked) .result-block.wrong {
  display: none;
  visibility: hidden;
}

.results-page:has(#show-correct:checked) .result-block.upcoming {
  display: none;
  visibility: hidden;
}

/* 260609-CSS-C START */
/* .results-page:has(.results-grid:not(:empty)) .results-message,
main:has(.results-grid:not(:empty)) .back-to-home,
.results-page:has(.results-grid:empty) :where(.results-ui,.results-filter,.results),
main:has(.results-grid:empty) .back-to-top {
  display: none;
  visibility: hidden;
} */
body.no-results {
  .back-to-top,
  .results-ui,
  .results-filter,
  .results {
    display: none;
    visibility: hidden;
  }
} 
body:not(.no-results) {
  .results-message,
  .back-to-home {
    display: none;
    visibility: hidden;
  }
}
/* 260609-CSS-C END */