/* 
-------------------------
CSS TABLE OF CONTENTS
-------------------------
No JS
Nav CTAs
Main information
Infos
Prizepools
Rules
Collections
Schedule
Matches & Leaderboard
Tournaments
Partners
Teams
-------------------------
*/

/** LEAGUE **/

/* Hide JS dependant sections */
.no-js .prizepools,
.no-js .collections,
.no-js .leaderboard {
  display: none;
}

/* Nav CTAs */
nav.ctas {
  position: relative;
  display: flex;
  justify-content: space-between;
}
nav.ctas .btn--back {
  position: absolute;
  top: var(--spacing-24);
  left: var(--gutter);
}
nav.ctas .btn--share {
  position: absolute;
  top: var(--spacing-24);
  right: var(--gutter);
}

/* Main information */
.main-information {
  --icon-size: var(--text-2xl); /* 24px */
  --icon-color: var(--color-white-70);
}

/* Infos */
.infos {
  margin-top: var(--spacing-16);
}
#twitch-embed {
  background-color: #000;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin-bottom: var(--flow-space);
  border-radius: var(--border-r-2);
}
#twitch-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Prizepools */
.prizepools [role="tabpanel"][data-rank] {
  --rank-icon: var(--icon-rank);
  --rank-color: var(--color-grey-light-4);
  padding: 3rem 2rem 0;
  margin: 2rem -2rem 0;
  border-radius: .5rem;
  background:
    radial-gradient(93.23% 75% at 50% 25%, var(--color-grey-3-0) 0%, var(--color-grey-3) 100%),
    radial-gradient(67.44% 50% at 50% 13.38%, var(--color-white-15) 0%, var(--color-white-0) 100%),
    radial-gradient(62.51% 100% at 50% 0%, var(--color-white-100) 0%, var(--color-white-0) 100%);
}
.prizepools [role="tabpanel"][data-rank]::before { /* Gradient border */
  content: '';
  display: block;
  position: absolute;
  inset: -1px;
  border: 2px solid var(--rank-color);
  border-radius: calc(.5rem + 2px);
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: .2;
}
.prizepools [role="tabpanel"][data-rank]::after {
  content: attr(data-rank)'th';
  display: flex;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding-top: 1.6rem;
  position: absolute;
  top: 0;
  left: 50%;
  background-image: var(--rank-icon);
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: .5;
  color: var(--rank-color);
  text-shadow: 
    0px 2px 2.5px rgba(35, 32, 38, 0.2),
    0px 1.5px 7px rgba(35, 32, 38, 0.12),
    0px 4px 5px rgba(35, 32, 38, 0.14);
}
.prizepools [role="tabpanel"][data-rank="1"] {
  --rank-icon: var(--icon-rank-1);
  --rank-color: var(--color-rank-1-100);
  background:
    radial-gradient(93.23% 75% at 50% 25%, var(--color-grey-3-0) 0%, var(--color-grey-3) 100%),
    radial-gradient(67.44% 50% at 50% 13.38%, var(--color-rank-1-15) 0%, var(--color-rank-1-0) 100%),
    radial-gradient(62.51% 100% at 50% 0%, var(--color-rank-1-100) 0%, var(--color-rank-1-0) 100%);
}
.prizepools [role="tabpanel"][data-rank="1"]::after {
  content: attr(data-rank)'st';
}
.prizepools [role="tabpanel"][data-rank="2"] {
  --rank-icon: var(--icon-rank-2);
  --rank-color: var(--color-rank-2-100);
  background:
    radial-gradient(93.23% 75% at 50% 25%, var(--color-grey-3-0) 0%, var(--color-grey-3) 100%),
    radial-gradient(67.44% 50% at 50% 13.38%, var(--color-rank-2-15) 0%, var(--color-rank-2-0) 100%),
    radial-gradient(62.51% 100% at 50% 0%, var(--color-rank-2-100) 0%, var(--color-rank-2-0) 100%);
}
.prizepools [role="tabpanel"][data-rank="2"]::after {
  content: attr(data-rank)'nd';
}
.prizepools [role="tabpanel"][data-rank="3"] {
  --rank-icon: var(--icon-rank-3);
  --rank-color: var(--color-rank-3-100);
  background:
    radial-gradient(93.23% 75% at 50% 25%, var(--color-grey-3-0) 0%, var(--color-grey-3) 100%),
    radial-gradient(67.44% 50% at 50% 13.38%, var(--color-rank-3-15) 0%, var(--color-rank-3-0) 100%),
    radial-gradient(62.51% 100% at 50% 0%, var(--color-rank-3-100) 0%, var(--color-rank-3-0) 100%);
}
.prizepools [role="tabpanel"][data-rank="3"]::after {
  content: attr(data-rank)'rd';
}
@media (max-width: 35rem) {
  .prizepools [role="tabpanel"][data-rank] {
    margin-top: 3rem;
  }
}
@media (min-width: 80rem) {
  .prizepools [data-items="1"] .splide__list,
  .prizepools [data-items="2"] .splide__list,
  .prizepools [data-items="3"] .splide__list,
  .prizepools [data-items="4"] .splide__list {
    justify-content: center;
  }
  .prizepools [data-items="1"] .splide__arrows,
  .prizepools [data-items="2"] .splide__arrows,
  .prizepools [data-items="3"] .splide__arrows,
  .prizepools [data-items="4"] .splide__arrows,
  .prizepools [data-items="1"] .splide__pagination,
  .prizepools [data-items="2"] .splide__pagination,
  .prizepools [data-items="3"] .splide__pagination,
  .prizepools [data-items="4"] .splide__pagination {
    display: none !important;
  }
}
.prizepools .splide__list {
  padding-left: 3px !important;
  padding-right: 3px !important;
}
.prizepools .splide__arrows {
  top: 2rem;
  right: 2rem;
}
.prizepools .splide__slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0px 4px;
  margin-top: 1px;
}
.prizepools .splide:not(.is-overflow) .splide__pagination {
  display: flex;
}
.prizepools .cashprize,
.prizepools .uniq {
  flex: 1;
  width: 100%;
  min-height: 20rem;
  padding: .25rem;
  border-radius: .5rem;
  border: 2px solid var(--color-grey-2);
  outline: var(--border-width) solid var(--border-color);
}
.prizepools .cashprize {
  justify-content: center;
  border: var(--border-width) solid var(--color-grey-2);
  outline: 1px solid var(--color-white-80);
  outline-offset: 2px;
  background:
    radial-gradient(67.82% 54.56% at 50% 24.12%, var(--color-grey-3-0) 0%, var(--color-grey-3-50) 100%),
    radial-gradient(67.44% 50.29% at 50% 13.38%, var(--color-white-15) 0%, var(--color-white-0) 100%),
    radial-gradient(81.82% 130.88% at 50% 0%, var(--color-white-100) 0%, var(--color-white-0) 100%);
}
.prizepools [role="tabpanel"][data-rank="1"] .cashprize {
  outline-color: var(--color-rank-1-100);
  background:
    radial-gradient(67.82% 54.56% at 50% 24.12%, var(--color-grey-3-0) 0%, var(--color-grey-3-50) 100%),
    radial-gradient(67.44% 50.29% at 50% 13.38%, var(--color-rank-1-15) 0%, var(--color-rank-1-0) 100%),
    radial-gradient(81.82% 130.88% at 50% 0%, var(--color-rank-1-100) 0%, var(--color-rank-1-0) 100%);
}
.prizepools [role="tabpanel"][data-rank="2"] .cashprize {
  outline-color: var(--color-rank-2-100);
  background:
    radial-gradient(67.82% 54.56% at 50% 24.12%, var(--color-grey-3-0) 0%, var(--color-grey-3-50) 100%),
    radial-gradient(67.44% 50.29% at 50% 13.38%, var(--color-rank-2-15) 0%, var(--color-rank-2-0) 100%),
    radial-gradient(81.82% 130.88% at 50% 0%, var(--color-rank-2-100) 0%, var(--color-rank-2-0) 100%);
}
.prizepools [role="tabpanel"][data-rank="3"] .cashprize {
  outline-color: var(--color-rank-3-100);
  background:
    radial-gradient(67.82% 54.56% at 50% 24.12%, var(--color-grey-3-0) 0%, var(--color-grey-3-50) 100%),
    radial-gradient(67.44% 50.29% at 50% 13.38%, var(--color-rank-3-15) 0%, var(--color-rank-3-0) 100%),
    radial-gradient(81.82% 130.88% at 50% 0%, var(--color-rank-3-100) 0%, var(--color-rank-3-0) 100%);
}
.prizepools .cashprize > * {
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-white-100);
  margin-bottom: 1rem;
}
.prizepools .cashprize > strong {
  font-size: var(--text-3xl);
}
.prizepool__selectors {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  margin-top: var(--spacing-16);
  padding: .25rem;
}
.prizepool__selector {
  width: 16rem;
  padding: var(--spacing-3);
  border: var(--border-width) solid var(--color-white-10);
  border-radius: var(--border-r-1);
  cursor: pointer;
  transition: border-color var(--timing) var(--easing);
}
.prizepool__selector:hover {
  border-color: var(--color-white-30);
}
.prizepool__selector:first-child {
  margin-left: auto;
}
.prizepool__selector:last-child {
  margin-right: auto;
}
[role="tab"][data-rank="1"] {
  --focus-color: var(--color-rank-1-100);
  background: radial-gradient(80% 130% at 50% 0%, var(--color-rank-1-10) 0%, var(--color-rank-1-5) 100%);
  border-color: var(--color-rank-1-10);
}
[role="tab"][data-rank="1"]:hover {
  border-color: var(--color-rank-1-30);
}
[role="tab"][data-rank="1"] .rank {
  color: var(--color-rank-1-100);
}
[role="tab"][data-rank="2"] {
  --focus-color: var(--color-rank-2-100);
  background: radial-gradient(80% 130% at 50% 0%, var(--color-rank-2-10) 0%, var(--color-rank-2-5) 100%);
  border-color: var(--color-rank-2-10);
}
[role="tab"][data-rank="2"]:hover {
  border-color: var(--color-rank-2-30);
}
[role="tab"][data-rank="2"] .rank {
  color: var(--color-rank-2-100);
}
[role="tab"][data-rank="3"] {
  --focus-color: var(--color-rank-3-100);
  background: radial-gradient(80% 130% at 50% 0%, var(--color-rank-3-10) 0%, var(--color-rank-3-5) 100%);
  border-color: var(--color-rank-3-10);
}
[role="tab"][data-rank="3"]:hover {
  border-color: var(--color-rank-3-30);
}
[role="tab"][data-rank="3"] .rank {
  color: var(--color-rank-3-100);
}

/* Rules */
.rules {
  --flow-space: 2rem;
  padding-top: var(--spacing-32);
}
.rules .list {
  list-style: none;
  padding-left: 0;
  margin: var(--spacing-12) 0 var(--spacing-16);
}
.rules .list li {
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 1.5em;
}
.rules .list li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: .2em;
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.0986 12.9999C25.0986 19.6818 19.6818 25.0986 12.9999 25.0986C6.31797 25.0986 0.901205 19.6818 0.901205 12.9999C0.901205 6.31797 6.31797 0.901205 12.9999 0.901205C19.6818 0.901205 25.0986 6.31797 25.0986 12.9999Z' stroke='%23896AE2' stroke-width='1.3'/%3E%3Cpath d='M12 17.4746L16 13.4746L12 9.47461' stroke='%23896AE2' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.rules .list li > h3 {
  font-size: var(--text-xl);
  margin-bottom: .5em;
}
.rules .list li > p {
  max-width: 32ch;
}
@media (min-width: 60rem) { /* >= 960px */
  .rules .list {
    columns: 2;
    column-gap: 2rem;
  }
}

/* Collections */
.collections .splide__list {
  padding: 0 3px 9px 3px !important;
}
.collections .splide__slide {
  padding: 1rem 0px 4px;
  margin-top: 1px;
}

/* Schedule */
.schedule {
  --icon-size: 2rem;
}
.schedule .splide__track {
  padding: 4px !important;
  margin: 0 -4px !important;
}
.schedule .splide__list {
  list-style: none;
  padding-top: 2rem !important;
  margin-top: 1rem !important;
}
.schedule .splide__slide {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: 
    linear-gradient(to bottom left, transparent 21.33%, var(--color-primary-100) 78.67%), 
    linear-gradient(var(--color-primary-60), var(--color-primary-60)),
    var(--heroImage);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: visible;
}
.schedule .splide__slide h3 {
  margin: 0;
  font-size: var(--text-base);
}
.schedule .splide__slide p {
  font-size: var(--text-xs);
  margin: var(--spacing-1) 0;
}
.schedule .splide__slide picture {
  width: 100%;
  max-width: 4rem;
  height: 4rem;
}
.schedule .icon {
  --icon: var(--icon-calendar);
  background-color: var(--color-white-50);
  mask-image: var(--icon);
  mask-size: contain;
  mask-repeat: no-repeat;
}
.schedule [data-phase="registration"] .icon {
  --icon: var(--icon-ticket);
}
.schedule [data-phase="checkIn"] .icon {
  --icon: var(--icon-clipboard);
}
.schedule [data-phase="transferPeriod"] .icon {
  --icon: var(--icon-trade);
}
.schedule [data-phase="prizepoolDistribution"] .icon {
  --icon: var(--icon-trophy);
}
.schedule [data-status="past"] {
  padding-right: 4rem;
}
.schedule [data-status="past"],
.schedule [data-status="past"] svg {
  color: var(--color-white-50);
}
.schedule [data-status="past"] .icon-container::after {
  content: '';
  display: block;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23C5ABFF' d='M27.4346 9.97346C27.7881 9.54918 27.7308 8.91862 27.3065 8.56506C26.8822 8.21149 26.2517 8.26882 25.8981 8.69309L13.2658 23.8519L6.04011 16.6262C5.64959 16.2356 5.01643 16.2356 4.6259 16.6262C4.23538 17.0167 4.23538 17.6499 4.6259 18.0404L12.6259 26.0404C12.8246 26.2391 13.0976 26.345 13.3783 26.3323C13.659 26.3195 13.9214 26.1893 14.1012 25.9735L27.4346 9.97346Z' /%3E%3C/svg%3E");
}
.schedule [data-status="current"] {
  outline: var(--border-width) solid var(--color-primary-light-100);
  outline-offset: 2px;
}
.schedule [data-status="future"] {
  background: radial-gradient(circle at 100% 100%, rgba(149, 121, 229, .4) 0%, rgba(149, 121, 229, .1) 100%);
}
.schedule [data-status="future"] .icon-container  {
  background-color: var(--color-primary-10);
  --border-color: var(--color-primary-30);
}
.schedule [data-status="future"] svg {
  fill: var(--color-primary-light-100);
}
.schedule [data-status="future"] h3 {
  color: var(--color-primary-light-100);
}

/* Schedule Timeline */
.schedule .splide__slide::before,
.schedule .splide__slide::after {
  content: '';
  display: block;
  position: absolute;
  box-shadow: 0 0 4px 0 var(--color-primary-light-30);
}
.schedule .splide__slide::before {
  top: -35px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary-light-100);
}
.schedule .splide__slide::after {
  top: -32px;
  left: 20px;
  right: -20px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-primary-100);
}
.schedule [data-status="current"]::before {
  outline: 1px solid var(--color-primary-light-100);
  outline-offset: 4px;
}
.schedule :not([data-status="past"]) ~ li::before,
.schedule :not([data-status="past"])::after,
.schedule :not([data-status="past"]) ~ li::after {
  filter: grayscale(100%);
}

/* Matches & Leaderboard */
.matches-leaderboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.matches-leaderboard header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.matches-leaderboard > * {
  flex: 1;
}
.matches-leaderboard table {
  display: flex;
  width: calc(100% + 1rem);
  max-height: 35rem;
  padding-right: 1rem;
  margin-right: -1rem;
  overflow-y: auto;
}
.matches-leaderboard .leaderboard__rank {
  min-width: 1em;
  text-align: center;
  justify-content: center;
}
.matches-leaderboard .leaderboard__name {
  --skeleton-background: var(--color-white-10);
}
.leaderboard .leaderboard__name.skeleton {
  min-width: 100%;
}
.matches-leaderboard table tr:last-of-type {
  margin-bottom: 2.5rem;
}
.matches::after,
.leaderboard::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom, rgba(49, 45, 54, 0) 0%, var(--color-grey-3) 100%);
  z-index: 1;
}
@media (min-width: 60rem) { /* >= 960px */
  .matches-leaderboard {
    flex-direction: row;
  }
  .js .matches + .leaderboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem;
    bottom: 1px;
    width: var(--border-width);
    background-color: var(--border-color);
  }
}

/* Matches */
.matches tr > :first-child,
.matches tr > :last-child {
  flex: 1;
}
.matches tr > :first-child {
  text-align: right;
  justify-content: flex-end;
}
.matches tr > :last-child img {
  order: -1;
}
/* Leaderboard */
.leaderboard tr > :first-child {
  font-size: var(--text-2xl);
  justify-content: center;
}
.leaderboard tr > :nth-child(3) {
  flex: 1;
}
.leaderboard tr > :last-child {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0;
}
.leaderboard tbody tr:nth-child(1)::before,
.leaderboard tbody tr:nth-child(2)::before,
.leaderboard tbody tr:nth-child(3)::before {
  content: '';
  display: block;
  position: absolute;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 10%;
  background-color: #d4af37;
  border-radius: 8px 100% 8px 8px;
  opacity: .1;
  filter: blur(1.25rem);
  transform-origin: bottom left;
}
.leaderboard tbody tr:nth-child(2)::before {
  background-color: #C0C0C0;
}
.leaderboard tbody tr:nth-child(3)::before {
  background-color: #8C7853;
}
.leaderboard tbody tr:nth-child(1) td:nth-child(2) {
  color: var(--color-secondary-yellow-light-100);
}

/* Tournaments */
.tournaments .splide__slide {
  padding: var(--spacing-4) 0;
}
.tournament {
  --flow-space: var(--spacing-2);
  --icon-color: var(--color-white-100);
  font-size: var(--text-xs);
  box-shadow: var(--shadow-dark-3);
  background-color: var(--color-grey-4);
  height: 100%;
  transition: all 0.15s ease-out;
}
.tournament .card__header {
  background: var(--heroImage);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 0 var(--spacing-4);
}
.tournament .card__header.skeleton::before,
.tournament__status.skeleton::before,
.tournament__prizepool .pill.skeleton::before {
  inset: 0;
  border-radius: inherit;
}
.tournament .card__header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-dark-1);
}
.tournament__iconImage {
  margin-top: 6.5rem;
  box-shadow: var(--shadow-dark-4);
  z-index: 1;
}
.tournament .card__main {
  padding: var(--spacing-4);
}
.tournament__discipline_organizationName {
  min-width: 60%;
  display: flex;
}
.tournament__name {
  --skeleton-background: var(--color-white-10);
  min-width: 50%;
  font-size: var(--text-base);
  margin-top: var(--flow-space);
  margin-bottom: 0;
}
.tournament__matchType_date.skeleton {
  min-width: 75%;
}
.tournament__matchType_date.skeleton .icon,
.tournament__prizepool .pill.skeleton .icon {
  display: none;
}
.tournament__matchType_date,
.tournament__matchType_date > * {
  display: flex;
  align-items: center;
}
.tournament__matchType_date {
  gap: var(--spacing-4);
}
.tournament__matchType_date > * {
  gap: var(--spacing-1);
}
.tournament__leaderboard {
  min-width: 75%;
}
.tournament__prizepool {
  width: 100%;
  border-top: var(--border-width) solid var(--color-white-10);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-3);
  font-size: var(--text-sm);
}
.tournament__prizepool .pill {
  min-width: 4rem;
}
.tournament .card__footer {
  background-color: var(--color-grey-light-4);
  padding: var(--spacing-8) var(--spacing-12);
  overflow: hidden;
}
.tournament:not([data-status="live"]) .card__footer {
  background-color: var(--color-white-10);
}
.tournament__status {
  min-width: 8rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-white-100);
  background-color: var(--color-white-10);
}
.tournament[data-status="live"] .tournament__status {
  color: var(--color-primary-light-100);
  background-color: var(--color-primary-light-10);
}
.tournament:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-cta-hover);
}

/* Partners */
.partner {
  padding: 0;
  margin: 0;
  display: grid;
  place-content: center;
  padding: var(--spacing-8);
  border-radius: var(--border-r-1);
  background-color: var(--color-white-5);
  min-height: 8rem;
}
.partner img {
  object-fit: contain;
}

/* Teams */
.teams .splide__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: var(--spacing-16) var(--spacing-8);
  border-radius: var(--border-r-1);
  background-color: var(--color-white-5);
}
.team__logo {
  padding: var(--spacing-2);
  background-color: var(--color-white-10);
  border-radius: var(--border-r-1);
}
.team .team__name {
  font-size: var(--text-base);
  margin-bottom: .5em;
}
.team p {
  font-size: var(--text-xs);
}

@media (min-width: 80rem) {
  
  .xl\:arrows-pagination-hidden .splide__arrows,
  [data-count="<5"] .splide__arrows,
  .xl\:arrows-pagination-hidden .splide__pagination,
  [data-count="<5"] .splide__pagination {
    visibility: hidden;
  }

  [data-count="<5"] .splide__list {
    justify-content: center;
  }

}