@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poetsen+One&display=swap");

:root {
  /* Colors */
  --bg-primary: #ffe7ee;
  --bg-secondary: #0e172c;
  --bg-neutral: #fffffe;
  --text-primary: #da627d;
  --text-accent: #a786df;
  --text-neutral-white: #d9d4e7;
  --text-neutral-black: #0e172c;
  /* Font-family */
  --ff-poetsen-one: "Poetsen One", sans-serif;
  --ff-lato: "Lato", sans-serif;
  /* Font-size */
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.75rem;
  --fs-700: 2.25rem;
  --fs-800: 2.75rem;
  --fs-900: 3.75rem;
  /* Font-weight */
  --fw-400: 400;
  --fw-500: 500;
  --fw-700: 700;
  --fw-900: 900;
  /* Line-height */
  --lh-st: 1.5;
  --lh-lg: 2;
  --lh-xlg: 2.5;
  /* Spacing */
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  /* background: url("./assets/images/beaubus_viki_pattern.svg"); */
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%23f0d8e1' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
  color: var(--text-neutral-black);
  line-height: var(--lh-st);
  font-family: var(--ff-lato);
  font-size: var(--fs-400);
  font-weight: var(--fw-400);
}

.flow-content {
  & > * + * {
    margin-top: 1.5rem;
  }
}

h1 {
  color: var(--text-primary);
  font-family: var(--ff-poetsen-one);
  font-size: calc(var(--fs-900) + var(--fs-600));
  text-transform: uppercase;
}

h2 {
  color: var(--text-primary);
  font-size: var(--fs-800);
  font-family: var(--ff-poetsen-one);
  text-transform: uppercase;
}

img {
  max-width: 100%;
}

.btn {
  color: inherit;
  font-size: var(--fs-500);
  font-weight: var(--fw-700);
  border: none;
  cursor: pointer;
  transition: transform 0.25s;
}

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 0.75rem;
}

.intro {
  height: 100vh;
  display: none;

  &.intro--show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  & header {
    text-align: center;
  }

  & .description {
    font-size: calc(var(--fs-500));
    text-wrap: balance;
  }

  & .caption {
    font-size: var(--fs-800);
    font-weight: var(--fw-700);
  }

  & .intro__btn {
    background: var(--bg-secondary);
    color: var(--text-neutral-white);
    margin-top: 2rem;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-size: var(--fs-400);

    &:hover {
      transform: translateY(-5px);
    }
  }
}

.game-container {
  display: none;

  &.game-container--show {
    display: block;
  }

  & .navigation {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: end;
  }
  & nav > .btn {
    background: transparent;
  }

  & nav > .btn:hover {
    transform: translateY(-5px);
  }

  & h2 {
    text-align: center;
  }

  & .game-container__main {
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .game-container__btn {
    font-size: var(--fs-400);
    background: var(--bg-secondary);
    color: var(--text-neutral-white);
    border-radius: 6px;
    margin-block: 1rem;
    padding: 0.75rem;
    cursor: pointer;
    display: none;

    &:hover {
      transform: translateY(-5px);
    }

    &.game-container__btn--show {
      display: block;
    }
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 125px);
  grid-gap: 1.25rem;
  margin-block: 2rem;
  justify-content: center;
}

.card {
  width: 125px;
  height: 125px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0);

  & .card__front,
  .card__back {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-700);
    backface-visibility: hidden;
    border-radius: 4px;
  }

  & .card__front {
    background: #da627d;
    color: #450920;
    z-index: 1;

    & svg {
      fill: #fff;
      width: 4rem;
    }
  }

  & .card__back {
    background: #fff;
    color: #da627d;
    transform: rotateY(180deg);
  }

  &.active,
  &.open,
  &.disabled {
    transform: rotateY(180deg);
  }

  &.active {
    transition: 2s;
  }

  &.open {
    cursor: not-allowed;
    pointer-events: none;
  }
}

.modal {
  background: rgba(0, 0, 0, 0.75);
  display: none;
  position: fixed;
  inset: 0;

  &.modal--show {
    display: grid;
    place-items: center;
  }

  & .modal__content {
    border-radius: 6px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    & .rules {
      & .rules__title {
        font-size: var(--fs-600);
        color: #da627d;
        text-align: center;
        margin-bottom: 1rem;
      }
      & .rules__list {
        & > li {
          padding-left: 0.5rem;
          &:not(:last-child) {
            margin-bottom: 1rem;
          }
        }
      }

      & .rules__highlight {
        color: #da627d;
        font-style: italic;
      }
    }
  }

  & .modal__content--box {
    background: var(--bg-neutral);
    border: 10px solid #da627d;
  }

  & .modal__close-btn {
    background: transparent;
    align-self: flex-end;
    border-radius: 50%;
    padding: 0.15rem 0.5rem;
    transition: 0.25s;

    &:hover {
      background: var(--bg-secondary);
      color: var(--text-neutral-white);
    }
  }
}

.clue-display {
  /* position: relative; */
  background: rgba(255, 255, 255, 0.5);
  margin: 0 1rem;
  padding: 1rem;
  max-width: 40rem;
  /* background-blend-mode: d */
  & .clue-display__label {
    position: absolute;
    top: -0.2%;
    left: -0.2%;
    background: #da627d;
    color: #fff;
    padding: 0.5rem;
    font-size: var(--fs-600);
  }

  & .clue-display__title {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    font-size: var(--fs-500);
    color: #da627d;
  }

  & .clue-display__clues {
    margin-block: 1rem;
    display: none;

    &.clue-display__clues--show {
      display: block;
    }

    & > li {
      padding-left: 0.5rem;
      margin-bottom: 0.5rem;
      list-style-type: disclosure-closed;
    }

    & > li::marker {
      color: #da627d;
    }
  }

  & .clue-display__form {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  & .clue-display__input {
    background: transparent;
    border: none;
    /* font-size: var(--fs-500); */
    padding: 0.5rem;
    border-bottom: 2px solid var(--bg-secondary);
    color: inherit;
    outline-color: var(--bg-secondary);
    flex-grow: 1;
  }

  & .clue-display__submit-btn {
    background: var(--bg-secondary);
    border: none;
    border-radius: 4px;
    /* font-size: var(--fs-500); */
    padding: 0.5rem 0.75rem;
    color: var(--text-neutral-white);
    cursor: pointer;
  }

  & .clue-display__error {
    font-size: calc(var(--fs-400) / 1.15);
    margin-top: 0.5rem;
    color: #da627d;
    display: none;

    &.clue-display__error--show {
      display: inline-block;
    }
  }
}

.success-modal {
  & .success-modal__header {
    color: var(--text-neutral-white);
    transform: translateY(30vh);
    text-align: center;
    text-wrap: balance;
  }

  & .success-modal__title {
    font-size: var(--fs-700);
  }

  & .success-modal__content {
    font-size: var(--fs-600);
    margin-block: 1rem;
    text-align: center;
  }
}

.outro {
  text-align: center;
  display: none;
  height: 100vh;

  &.outro--show {
    display: grid;
    justify-items: center;
    align-content: center;
  }

  & .outro__content {
    color: inherit;
    font-size: var(--fs-600);
    margin-top: 1rem;
    text-wrap: pretty;
  }

  & .outro__highlight {
    color: #da627d;
    font-size: var(--fs-900);
    font-weight: var(--fw-700);
    margin-block: 1rem;
    text-transform: uppercase;
    text-wrap: pretty;
  }
}

@media screen and (width < 500px) {
  .cards {
    grid-template-columns: 1fr;
  }
}