@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&display=swap');
:root {
  --image-frame-width: 50px;
  --button-radius: 50vw;
  --color-main: #0a3033;
  --color-sub: #1895f6;
  --color-text: white;
  --transition-duration: 200ms;
  --transition-function: ease-in-out;
  --box-radius: 6px;
  --box-border: 2px solid color-mix(in srgb, var(--color-sub), white 65%);
  --box-outline: 1px solid color-mix(in srgb, var(--color-sub), black 65%);
  --box-background: linear-gradient(180deg,
    var(--color-main) 0%,
    color-mix(in srgb, var(--color-main), var(--color-sub) 55%) 100%
  );
  font-family: "Barlow Condensed", 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  color: var(--color-text);
}

@media (width <= 760px) {
  :root {
    --image-frame-width: 30px;
  }
}
/* BACKGROUNDS */
body {
  background-color: color-mix(in srgb, var(--color-main), black 60%);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-sub), var(--color-main) 70%) 0%, transparent 60%), url("../images/page-background.webp");
  background-position: center top;
  background-size: auto;
}

#gameboard {
  background-image: linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--color-main), black 60%) 100%);
}

#howtoplay {
  background-color: color-mix(in srgb, var(--color-main), black 60%);
}

/* HEADINGS */
h1 {
  font-size: 3rem;
  text-transform: uppercase;
}

h2 {
  font-size: 2rem;
}

h1, h2, .heading, #timer {
  font-weight: 700;
  font-style: normal;
}

h1, h2, .heading, #timer, #howtoplay {
  text-align: center;
  text-wrap: balance;
}

.heading {
  font-size: 3rem;
  line-height: 1.1;
  text-wrap: auto;
  width: 21ch;
}

@media (width <= 1200px) {
  .heading {
    font-size: 2.5rem;
    width: 25ch;
  }
}


#timer {
  font-size: 2rem;
}

#timer span {
  width: 4ch;
}

header picture {
  background-image: url("../images/header-1920.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (width <= 760px) {
  header picture {
    background-image: url("../images/header-760.webp");
  }
}
/* GAME BOARD */
.letterbox {
  --letterbox-color: #213c6c;
  background-color: var(--letterbox-color);
  background-image: radial-gradient(at center, var(--letterbox-color), transparent), url("../images/letterbox-background.webp");
  background-position: center;
  background-size: auto 100%;
  border-radius: var(--box-radius);
  padding: calc(var(--image-frame-width) / 2);
  min-height: calc(var(--image-frame-width) * 2);
}

.letterbox::before {
  border-width: var(--image-frame-width);
  border-style: solid;
  border-color: transparent;
  border-image-source: url("../images/letterbox-frame.webp");
  border-image-slice: 33.3334%;
  border-image-repeat: round;
  border-image-width: var(--image-frame-width);
}

.rewardbox {
  border-radius: var(--box-radius);
  border: var(--box-border);
  outline: var(--box-outline);
  outline-offset: -1px;
  background-color: var(--color-main);
  background-image: var(--box-background);
}

.rewardbox p {
  font-size: 0.875rem;
}

.rewardbox img {
  background-image: radial-gradient(ellipse farthest-side at center, var(--color-sub), transparent);
}

.btn-claim {
  --button-color: #eda63b;
  font-size: 0.875rem;
}

.finalrewardbox .btn-claim {
  margin-block: 0;
}

@media (width <= 760px) {
  .rewardbox p {
    font-size: 4vw;
  }
  .btn-claim {
    font-size: 4vw;
  }
}
/*  FINAL REWARD */
.finalrewardbox {
  border: 2px solid color-mix(in srgb, var(--color-main), var(--color-sub) 15%);
  outline: var(--box-outline);
  outline-offset: -1px;
  background-color: var(--color-sub);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-main), black 55%) 0%, color-mix(in srgb, var(--color-sub), black 35%) 100%);
  border-radius: var(--box-radius);
}

.finalreward-image {
  background-image: url("../images/reward-5-bg.webp"), radial-gradient(ellipse closest-side at center, color-mix(in srgb, var(--color-sub), transparent 40%), transparent), radial-gradient(ellipse farthest-side at bottom, color-mix(in srgb, var(--color-main), transparent 0%), transparent);
  background-position: center;
  background-size: cover;
}

.finalreward-image img {
  animation: float 6s ease-in-out infinite;
}

.finalreward-text {
  padding-block: 2rem;
}

.finalreward-text p:not(.heading) {
  font-size: 1.25rem;
}

@media (width <= 600px) {
  .finalreward-text p.heading {
    font-size: 2rem;
  }
}
/* HOW TO PLAY and EVENTS */
#howtoplay h2 + p {
  padding: 1em 0.5em;
  border-radius: var(--box-radius);
  background-color: color-mix(in srgb, var(--color-main), var(--color-sub) 10%);
  margin-block: -0.5em;
  line-height: 1.5;
}

#howtoplay .mission {
  --image-frame-width: 50px;
  border-radius: var(--box-radius);
  padding: calc(var(--image-frame-width));
  padding-block-end: 2rem;
}

#howtoplay .mission::before {
  border-width: var(--image-frame-width);
  border-style: solid;
  border-color: transparent;
  border-image-source: url("../images/mission-frame.webp");
  border-image-slice: 33.3334%;
  border-image-repeat: round;
  border-image-width: var(--image-frame-width);
}

#howtoplay .mission img {
  width: 50px;
  height: auto;
  position: absolute;
  margin-inline: auto;
  inset-block-start: -1rem;
}

#events figure {
  border-radius: var(--box-radius);
  transition-property: translate, filter, rotate;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-function);
}

/* MODALS */
dialog {
  border: var(--box-border);
  outline: var(--box-outline);
  outline-offset: -1px;
  background-color: var(--color-main);
  background-image: var(--box-background);
  border-radius: var(--box-radius);
  color: var(--color-text);
}

dialog .modal-ui button {
  --button-color: var(--color-sub);
  padding: 0.5rem;
  font-size: 0.875rem;
}

dialog .modal-close {
  font-size: 1.5em;
}

dialog p:first-of-type {
  font-size: 1.25rem;
}

/* BUTTONS */
.btn-claim,
dialog .modal-ui button {
  border: 2px solid color-mix(in srgb, var(--button-color), white 30%);
  border-radius: var(--button-radius);
  filter: drop-shadow(0 2px 2px color-mix(in srgb, black, transparent 70%));
  transition-property: translate, filter, rotate;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-function);
  font-size: 1.25em;
}

.btn-claim::before,
dialog .modal-ui button::before {
  inset: 0;
  z-index: -2;
  border-radius: var(--button-radius);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--button-color), white 60%) 2%, color-mix(in srgb, var(--button-color), white 80%) 3%, color-mix(in srgb, var(--button-color), black 10%) 97%, color-mix(in srgb, var(--button-color), black 25%) 98%);
}

.btn-claim::after,
dialog .modal-ui button::after {
  inset: 2px;
  z-index: -1;
  border-radius: var(--button-radius);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--button-color), white 50%) 4%, color-mix(in srgb, var(--button-color), black 20%) 10%, color-mix(in srgb, var(--button-color), black 30%) 60%, color-mix(in srgb, var(--button-color), white 5%) 100%);
}

/* HOVERS */
@media (hover: hover) {
  .btn-claim:hover,
  dialog .modal-ui button:hover {
    filter: drop-shadow(0 2px 5px color-mix(in srgb, black, transparent 40%));
  }
  #events a:hover figure {
    translate: 0 -0.5em;
    rotate: -2deg;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-sub), transparent 20%));
  }
  #events:has(a:hover) a:not(:hover) figure {
    filter: drop-shadow(0 3px 2px color-mix(in srgb, black, transparent 50%)) opacity(0.4);
  }
  #events a:has(+ a:hover) figure,
  #events a:hover + a figure {
    translate: 0 0.25em;
  }
}
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-1rem);
  }
  100% {
    transform: translatey(0px);
  }
}

.letterbox figure:not(.earned) {
  filter: grayscale(1) contrast(1.2) brightness(0.4) opacity(0.5);
}

#singleevent {
  border-radius: var(--box-radius);
  overflow: hidden;
}