.profile {
  --background: hsl(from var(--background-color) h s calc(l + 85));
  background-color: var(--background);
  background-image: 
    radial-gradient(ellipse farthest-side at top,
      white,
      transparent
    ),
    var(--rewards-background);
  background-position: center;
  background-repeat: repeat-y;
  background-size: contain;
  color: contrast-color(var(--background));

  padding: 3vw;
  padding-block-end: calc(3vw + 1rem);
}

.profile:not(.drafted),
html:has(.profile.drafted) .rewards,
html:has(.profile.drafted) .cta .live {
  display: none;
  visibility: hidden;
}

.profile .contents {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media (width <= 760px) {
  .profile .contents {
    gap: clamp(2.500rem, calc(1.364rem + 3.03vw), 5.000rem);
  }
}

.profile .player {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player-ign {
  font-size: clamp(1.250rem, calc(0.909rem + 0.909vw), 2.000rem);
  text-align: left;
  margin-block-end: 0.25em;
}

.player-playtime {
  list-style: none;
  align-items: baseline;

  .playtime-value {
    color: var(--key-color);
  }

  .playtime-value .value::after {
    font-size: 0.75em;
  }

  .hours::after {
    content: ' H';
  }

  .minutes::after {
    content: ' M';
  }
}




.profile .contents .stats {
  gap: calc(var(--gap) / 2);
  padding: 2vw;
}

.player-squad {
  padding-block-end: 2rem;
  gap: 0.125rem;
}

.player-squad-name {
  font-size: clamp(1.000rem, calc(0.773rem + 0.606vw), 1.500rem);
  font-weight: 700;
  text-align: center;
  text-wrap: no-wrap;
}

.player-squad-image {
  width: 7.5rem;
}

.stats-weekly,
.stats-weekly ul,
.player-playtime {
  display: flex;
  gap: calc(var(--gap) / 2);
  text-align: center;
}

.stats-weekly {
  flex-direction: column;
}

.stats-weekly ul {
  align-items: baseline;
}

.stats-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-block-start: 2.5rem;

  figure {
    gap: 0.5rem;
  }
}

.profile-icons {
  --size: 3.25rem;
  width: var(--size);
  height: var(--size);
  mask-image: var(--mask);
  mask-composite: add;
  mask-mode: luminance;
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;

  background-color: currentColor;
}

    .icon-matches {
      --mask: var(--icon-matches);
    }
    .icon-wins {
      --mask: var(--icon-wins);
    }
    .icon-kills {
      --mask: var(--icon-kills);
    }
    .icon-match-points {
      --mask: var(--icon-match-points);
    }
    .icon-win-points {
      --mask: var(--icon-win-points);
    }
    .icon-kill-points {
      --mask: var(--icon-kill-points);
    }

.stats-weekly ul {
  list-style: none;
}

.week-countdown {
  display: flex;
  gap: 0.25em;

  span::after {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-inline-start: 0.125em;
  }
}





.rewards-tracker {
  display: flex;
  flex-direction: column;
  flex: 0 1 31.25rem;
  gap: 0.5rem;
  padding: 2vw;
}

.profile-rewards-image {
  width: min(100%, 31.25rem);
}

.profile-rewards-label {
  font-weight: 600;
}

.rewards-tracker .rewards-cards {
  background-color: hsl(from var(--background) h s calc(l + 10));
  filter: drop-shadow(0 2px 2px hsl(from var(--background) h s calc(l - 20) / 0.75));
}

.rewards-tracker .rewards-cards img {
  background-image:
    linear-gradient(
      to bottom,
      hsl(from var(--background-color) h s calc(l + 80) / 0.9) 33.33%,
      hsl(from var(--background-color) h s calc(l + 90) / 0.7) 66.66%,
      transparent
    );

  mask-image: var(--rewards-tracker-rewards-cards-mask);
  mask-composite: add;
  mask-mode: luminance;
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;

  opacity: 0.9;
}

.rewards-tracker .rewards-cards button {
  --distance: 0.25rem;
  position: absolute;
  inset-block-start: var(--distance);
  inset-inline-end: var(--distance);
  padding-inline: 0.5rem;
}

.reward-progress {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}



.pip {
  --opacity: 1;

  background-color: hsl(from var(--background) h s calc(l - 5));
  color: contrast-color(var(--background));
  border-radius: var(--border-radius);

  padding-inline: 0.25em 0.125em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  opacity: var(--opacity);

  span {
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 0.25em 0.5em;
  }

  span span {
    padding: 0;
  }
}

.pip:not(.missed):not(.earned) {
  --opacity: 0.5;
}

@media (width <= 600px ) {
  .pip {
    flex-direction: column;
    padding-inline: 0.125em;

    span {
      padding: 0.25em;
    }
  }
}

.pip::before {
  content: '\2610';
  font-weight: 700;
}

.pip.earned {
  --background: hsl(from var(--key-color) h s calc(l - 5));

  background-image: radial-gradient(
    circle farthest-side at center,
    hsl(from var(--background) h s calc(l + 10)),
    hsl(from var(--background) calc(h + 5) s l)
  );
}

.pip.earned::before {
  content: '\2713';
}

.pip.missed {
  --background: hsl(from var(--key-color) h calc(s - 40) calc(l + 20));
  --opacity: 0.7;
}

.pip.missed::before {
  content: '\2715';
}

.pip.gold,
.pip.silver,
.pip.bronze {
  color: white;
}

.pip.gold {
  background-image: var(--gold-background);
}

.pip.silver {
  background-image: var(--silver-background);
}

.pip.bronze {
  background-image: var(--bronze-background);
}