@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* REMOVE - FOR DEV USE ONLY */
.cookie-consent-container {
  display: none;
  visibility: hidden;
}

/* REMOVE - FOR DEV USE ONLY */
#page-top-navigation {
  position: sticky;
  top: 0;
}

/* REMOVE - FOR DEV USE ONLY */
#sgw-top-navigation {
  background-color: black;
  height: 50px;
}

/* REMOVE - FOR DEV USE ONLY */
@media (width <=600px) {
  #sgw-top-navigation {
    height: 40px;
  }
}

:root {
  --key-color: #57971c;

  color-scheme: dark;
  accent-color: var(--key-color);
  --container: 88.75rem;
  --background-color: #141618;
  --gold-background: linear-gradient(to right, #8A6623, #C5A028);
  --gold-border-color: #FFD700;
  --silver-background: linear-gradient(to right, #4A4E52, #7B8187);
  --silver-border-color: #BDC3C7;
  --bronze-background: linear-gradient(to right, #633517, #965A38);
  --bronze-border-color: #CD7F32;

  --transition-duration: 200ms;
  --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  --border-radius: 0.15rem;  
  --gap: clamp(0.500rem, calc(-0.409rem + 2.424vw), 2.500rem);
  --section-margin: clamp(2.000rem, calc(1.773rem + 0.606vw), 2.500rem);

  --header-background-1920: url('../images/header-background-1920.webp');
  --header-background-960: url('../images/header-background-960.webp');
  --main-bottom: url('../images/main-bottom.webp');
  --cta-background: url('../images/cta-background.webp');
  --cta-halftone: url('../images/cta-halftone.webp');
  --leaderboards-background: url('../images/leaderboards-background.webp');
  --rewards-background: url('../images/rewards-background.webp');

  --icon-matches: url('../images/icon-matches.webp');
  --icon-wins: url('../images/icon-wins.webp');
  --icon-kills: url('../images/icon-kills.webp');
  --icon-match-points: url('../images/icon-match-points.webp');
  --icon-win-points: url('../images/icon-win-points.webp');
  --icon-kill-points: url('../images/icon-kill-points.webp');

  --rewards-tracker-rewards-cards-mask: url('../images/rewards-tracker-rewards-cards-mask.webp');

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}


main img {
  width: 100%;
  height: auto;
}

main figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--gap) / 2);
  text-align: center;
}

body {
  background-color: var(--background-color);
}

main {
  --top-background: var(--header-background-1920);
  /* padding-block-start: 6rem; */

  background-image:
    radial-gradient(circle farthest-side at bottom,
      var(--background-color),
      transparent 50%
    ),
    var(--main-bottom),
    var(--top-background);
  background-position: bottom center, bottom center, top center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (width <= 960px) {
  main {
    --top-background: var(--header-background-960);
  }
}
/* @media (width <= 600px) {
  main {
    padding-block-start: 3rem;
  }
} */

header {
  /* margin-block-end: calc(2vw + 0.5rem); */
  display: flex;
  justify-content: flex-start;

  picture {
    margin-inline: auto;
  }
}


/* Glow mask effect */
/* .glow {
  position: relative;
}
.glow.active {
  z-index: 1;
}

.glow.active::before {
  content: '';
  opacity: 1;
  width: var(--glow-scale);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: width, opacity;
}

.glow::before {
  position: absolute;
  z-index: -1;
  width: 0%;
  aspect-ratio: 1/1;

  background-color: var(--key-color);
  background-image: radial-gradient(
    circle, 
    white 0%, 
    var(--key-color) 70%);
  mask-image: var(--glow-mask);
  mask-composite: add;
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
} */

/* Frames / Border Images */
/* .frame {
  position: relative;
  isolation: isolate;
}
.frame > * {
  z-index: 1;
}
.frame::after {
  z-index: 0;
  inset: 0;
  pointer-events: none;
  display: block;
  content: '';
  position: absolute;
  border-image-source: var(--border-image);
  border-image-slice: var(--border-slice);
  border-image-repeat: var(--border-repeat, round);
  border-width: var(--border-width);
  border-style: solid;
  border-color: transparent;
} */

/*  DIALOG MODALS */
dialog[open] {
  --modal-width: 20rem;

  background-color: hsl(from var(--background-color) h s 15%); /*REPLACE*/
  width: min(96%, var(--modal-width, 25rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: var(--border-radius);

  background-image:
    radial-gradient(circle at top,
      hsl(from var(--key-color) h s l / 0.65),
      transparent 75%
    ),
    radial-gradient(circle at bottom,
      hsl(from var(--background-color) h s l / 0.65),
      transparent 75%
    ),
    linear-gradient(to top,
      transparent 5px,
      var(--key-color) 5px,
      var(--key-color) 6px,
      transparent 6px
    ),
    linear-gradient(to bottom,
      transparent 5px,
      var(--key-color) 5px,
      var(--key-color) 6px,
      transparent 6px
    );

  animation-name: slide-in ;
  animation-duration: var(--transition-duration);
  animation-timing-function: var(--transition-timing-function);
  animation-fill-mode: forwards;

  h1, h2, p, figcaption {
    text-align: center;
  }

  h1 {
    font-family: "Anton", "Impact", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: clamp(2.250rem, calc(1.966rem + 0.758vw), 2.875rem);
    margin-block: 0.5em;
  }

  h2, figcaption {
    font-size: 1rem;
    margin-block: 0.5em;
  }

  img {
    margin-inline: auto;
    border-radius: var(--border-radius);
  }

  p {
    padding-block: 0.5rem;
  }
}
dialog[open]::after {
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  content: '';
  position: absolute;
  border-image-source: var(--frame-modals); /*REPLACE*/
  border-image-slice: 30;
  border-image-repeat: round;
  border-width: 1.875rem;
  border-style: solid;
  border-color: transparent;
}

dialog[open] > * {
  z-index: 1;
}

dialog[open] .modal-container {
  padding: 1rem;
  padding-block-end: 2rem;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scrollbar-width: thin;
}

:is(
  dialog[open]#squad-selection-modal,
  dialog[open]#rewards-individual-modal,
  dialog[open]#rewards-permanent-modal,
  dialog[open]#rewards-squad-modal
) .modal-close {
  position: absolute;
  inset-inline-end: 0.55rem;
  inset-block-start: 0.5rem;
  font-weight: 900;
}
@media (hover) {
  dialog[open]#squad-selection-modal .modal-close:hover {
    color: hsl(from var(--key-color) h s 75%);
    filter: drop-shadow(0 0 10px var(--key-color));
  }
}

.modal-close {
  position: relative;
}

@keyframes slide-in {
  from {
    transform: translateY(-10rem);
    opacity: 0;
  }

  to {
    transform: translateY(10);
    opacity: 1;
  }
}



.timer::before,
.countdown::before {
  display: none;
}



main button,
dialog button:not(:first-child),
main a > div {
  --background: hsl(from var(--key-color) h s 65%);

  padding: 0.25em 1.5em;
  border-radius: var(--border-radius);
  user-select: none;
  text-transform: uppercase;
  font-weight: 400;
  font-family: "Anton", "Impact", sans-serif;
  font-size: clamp(1.250rem, calc(1.136rem + 0.303vw), 1.500rem);
  letter-spacing: 0.04em;

  background-color: var(--background);
  background-image: radial-gradient(ellipse at center,
    hsl(from var(--key-color) h s 80%),
    var(--key-color));
  color: contrast-color(var(--background));
  border-block: 2px solid hsl(from var(--key-color) calc(h + 15) s 60%);

  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: filter;
}

button.small {
  --background: hsl(from var(--background-color) h s calc(l + 90));

  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  width: fit-content;
  margin-inline: auto;
  letter-spacing: 0.1em;
  padding-block: 0.5em;

  background-image: none;
}

@media (hover) {
  main button:hover,
  dialog button:not(:first-child):hover,
  main a:hover > div {
    filter: brightness(1.1) drop-shadow(0 0 10px var(--key-color));
  }
}

@media (pointer: coarse) {
  main button,
  dialog button:not(:first-child),
  main a > div {
    padding: 0.25em 2em;
    width: 90%;
  }
}

section h2 {
  margin-inline: auto;
  margin-block: 0.25em;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(2.250rem, calc(1.795rem + 1.212vw), 3.250rem);

  font-family: "Anton", "Impact", sans-serif;
  font-weight: 400;

  width: fit-content;
  border-block-end: 8px solid var(--key-color);
}

.label {
  text-transform: uppercase;
  font-size: 0.75em;
  line-height: 1;
}

.value {
  /* --background: hsl(from var(--background-color) h s calc(l + 10)); */
  background-color: hsl(from var(--background) h s calc(l + 10));
  color: hsl(from var(--key-color) h calc(s + 10) calc(l + 5));
  font-weight: 600;

  padding: 0.25em 0.5em;
  margin-block-start: 0.125em;
  border-radius: var(--border-radius);
  line-height: 1;
  user-select: none;
}