@import url("/$ui.css");
@import url("/$all-desktop.css") (min-width: 750px) and (min-height: 500px);
@import url("/$all-mobile.css") (max-width: 749px) or (max-height: 499px);


html {
  --max-width: 100rem;

  overflow: hidden;
  background-color: var(--background-color);

  &::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/assets/background.webp");
    background-position: top center;
    opacity: 0.5;
    z-index: -1;
  }
}


body {
  display: grid;
  color: var(--foreground-color);
  overflow-y: scroll;


  img {
    max-width: 100%;
    height: auto;
  }


  > header {
    margin-top: var(--spacing-regular);

    &:not(:has(> .slideshow > .slide)) {
      margin-top: 0;


      > .logo,
      > .slideshow {
        display: none;
      }
    }


    > .title {
      > h1 {
        > a {
          text-decoration: none;
        }
      }
    }


    > .logo {
      display: grid;
      grid-template-rows: repeat(2, auto);
      justify-items: center;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;


      > img {
        filter: drop-shadow(0 0 var(--width-of-maximum-borders) rgba(0, 0, 0, 1));
      }
    }


    > .slideshow {
      --slides: 4;
      --slide-fade-in: 2s;
      --slide-stay: 3s;
      --slide-duration: calc(var(--slide-fade-in) + var(--slide-stay));
      box-shadow: 0 0 var(--width-of-maximum-borders) black;
      border: var(--width-of-maximum-borders) solid var(--color-of-borders);
      border-radius: var(--radius-of-borders);
      overflow: hidden;
      isolation: isolate;
      z-index: -1;
      opacity: 0;

      &[data-start] {
        animation: fade-in-slideshow;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;


        > .slide {
          animation: slideshow calc(var(--slide-duration) * var(--slides)) infinite;
        }
      }


      > .slide {
        position: absolute;
        inset: 0;
        opacity: 0;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: calc(var(--radius-of-borders) - var(--width-of-maximum-borders));
          box-shadow: inset 0 0 var(--width-of-maximum-borders) black;
        }

        &:nth-child(1) { animation-delay: calc(var(--slide-fade-in) * -1 + var(--slide-duration) * 0); }
        &:nth-child(2) { animation-delay: calc(var(--slide-fade-in) * -1 + var(--slide-duration) * 1); }
        &:nth-child(3) { animation-delay: calc(var(--slide-fade-in) * -1 + var(--slide-duration) * 2); }
        &:nth-child(4) { animation-delay: calc(var(--slide-fade-in) * -1 + var(--slide-duration) * 3); }


        > img {
          width: 100%;
          max-width: none;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }


  > dialog {
    color: black;


    > header {
      a.logout ~ a {
        display: none !important;
      }
    }
  }


  > main {
    grid-area: main;


    > section {
      --columns: 1;

      margin-inline: auto;
      padding-block: var(--spacing-maximum);
      width: 100%;
      display: grid;
      grid-template-columns:
        minmax(calc(var(--spacing-regular) + env(safe-area-inset-left)), 1fr)
        [content-start]
          repeat(
            var(--columns),
            min(
              var(--max-width) / var(--columns),
              100% / var(--columns) - 2 * var(--spacing-regular) - env(safe-area-inset-left) - env(safe-area-inset-right)
            )
          )
        [content-end]
        minmax(calc(var(--spacing-regular) + env(safe-area-inset-right)), 1fr);
      row-gap: var(--spacing-regular);


      > * {
        grid-column: content;
      }


      > h2,
      > h3 {
        font-size: 3.2rem;
        font-style: italic;
        line-height: 1.3;
        text-align: center;
        text-wrap: balance;

        &:not(:has(+ p)) {
          margin-bottom: var(--spacing-minimum);
        }
      }


      > p {
        margin-bottom: var(--spacing-minimum);
        font-size: 2rem;
        line-height: 180%;
        text-align: center;
        text-wrap: balance;
      }
    }
  }


  #login,
  #login-reset {
    width: 38rem;
    max-width: calc(100% - 2 * var(--dialog-inset));

    &[data-shake] {
      animation-name: shake;
    }

    &[data-shaken]:not([data-shake]) {
      animation-duration: 0s;
    }


    > main {
      > form {
        padding: 0;
        display: grid;
        column-gap: var(--spacing-minimum);
        row-gap: var(--spacing-regular);
        grid-template-columns: auto 1fr;
        align-items: center;


        > .label {
          display: contents;


          > span {
            font-size: 1.7rem;
            text-align: right;
          }


          > input {
            width: 100%;
          }
        }


        input[type="submit"] {
          display: none;
        }
      }


      > hr {
        margin-block: var(--spacing-regular);
      }


      > p {
        margin: 0;
        font-size: 1.6rem;
        line-height: 1.5;

        & + p {
          margin-top: var(--spacing-minimum);
        }
      }
    }


    > footer {
      > hr {
        flex: 1 1;
      }
    }
  }


  #register {
    width: 38rem;
    max-width: calc(100% - 2 * var(--dialog-inset));


    > main {
      padding: 0;
      display: grid;
      grid-template-areas: "content";

      /* height fix to cancel out the height removal of the not shown footer, when showing done */
      &:has(.done:not([hidden])) {
        padding-block: calc(var(--toolbar-height) / 2);
      }


      > section {
        padding: var(--spacing-regular);
        grid-area: content;
        overflow-x: hidden;
        overflow-y: auto;

        &[hidden] {
          display: grid;
          visibility: hidden;
        }


        p,
        span,
        li {
          word-wrap: break-word;
          overflow-wrap: break-word;
          hyphens: auto;
        }


        > .intro {
          margin-bottom: var(--spacing-regular);
          font-size: 1.7rem;


          > p:not(:first-child) {
            margin-top: var(--spacing-minimum);
          }
        }


        > form {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-regular);


          > .field {
            display: grid;
            grid-template-rows: repeat(2, auto);
            gap: 0.4rem;

            &:has(input[type="checkbox"]) {
              grid-template-rows: auto;
              grid-template-columns: auto 1fr;
              gap: var(--spacing-minimum);
              align-items: center;
            }


            > .label:has(+ input, + select) {
              opacity: 0.8;

              &::after {
                content: ":";
              }
            }


            > input:not([type="checkbox"]),
            > select {
              width: 100%;
            }


            > .description {
              opacity: 0.8;
            }
          }


          > hr {
            margin-top: calc(var(--spacing-regular) * -0.5);
            border: none;
            background: none;
          }
        }


        &.membership {
          max-height: 40rem;


          form {
            > p {
              font-size: 1.7rem;
              font-weight: 500;

              &::after {
                content: ":";
              }

              &.basic-membership:not(:is(section.membership:has(option[value="basic-membership"]:checked) *)),
              &.supporter-membership:not(:is(section.membership:has(option[value="supporter-membership"]:checked) *)),
              &.gamers-choice-membership:not(:is(section.membership:has(option[value="gamers-choice-membership"]:checked) *)),
              &.none:not(:is(section.membership:has(option[value="none"]:checked) *)) {
                display: none;
              }
            }


            > ul {
              margin-top: calc(var(--spacing-regular) / -2);


              > li {
                margin-left: 1.8rem;

                &:not(:last-child) {
                  margin-bottom: 0.4rem;
                }

                &:is(section.membership:has(option[value="none"]:checked) *),
                &.supporter-membership:not(:is(section.membership:has(
                  option[value="supporter-membership"]:checked,
                  option[value="gamers-choice-membership"]:checked
                ) *)),
                &.gamers-choice-membership:not(:is(section.membership:has(option[value="gamers-choice-membership"]:checked) *)) {
                  text-decoration: line-through;
                  text-decoration-color: rgba(255, 0, 0, 0.4);
                  text-decoration-thickness: 0.2rem;
                }
              }
            }
          }
        }


        &.done {
          display: flex;
          flex-direction: column;


          > * {
            flex: 0 0 auto;
          }


          > .loading {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: none;
            place-items: center;

            &::before {
              content: "";
              border: 0.4rem solid rgba(0, 0, 0, 0.1);
              border-top-color: black;
              border-radius: 100vmax;
              aspect-ratio: 1 / 1;
              width: var(--height-of-button);
              height: auto;
              display: block;
              animation: rotate-spinner 1.4s linear infinite;
            }

            &:is(#register:has(> header > .close:disabled) *) {
              display: grid;


                ~ * {
                visibility: hidden;
              }
            }
          }


          > svg {
            align-self: center;
            --size: 7.2rem;
            width: var(--size);
            height: var(--size);
          }


          > h4 {
            font-size: 2.4rem;
            text-align: center;
          }


          > p {
            margin-top: var(--spacing-regular);
            text-align: center;
            text-wrap: balance;


            > .mail {
              font-weight: 500;
            }
          }


          > hr {
            flex: 1 1;
            border: none;
          }
        }
      }
    }


    > footer {
      display: flex;

      &[hidden] {
        display: none;
      }


      > button {
        aspect-ratio: 1 / 1;
        border-radius: 100vmax;
        padding-inline: 0;
        display: grid;
        place-content: center;
        overflow: hidden;

        &[hidden] {
          display: grid;
          visibility: hidden;
        }
      }


      > .progress {
        margin-inline: auto;
        display: flex;
        gap: 0.8rem;


        > button {
          border: none;
          border-radius: 100vmax;
          padding: 0.6rem;
          height: auto;

          &[disabled] {
            opacity: 0.25;
          }

          &:nth-last-child(1 of :enabled) {
            outline: 0.2rem solid var(--color-blue);
          }


          > svg {
            --size: 1.8rem;
            width: var(--size);
            height: var(--size);
          }
        }
      }
    }
  }
}


@keyframes slideshow {
  0% {
    opacity: 0;
  }

  10%, 25% {
    opacity: 1;
  }

  30%, 100% {
    opacity: 0;
  }

  100% {
    scale: 1.1;
  }
}


@keyframes fade-in-slideshow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes shake {
  20% {
    translate: -2.5rem 0;
  }

  40% {
    translate: 2.5rem 0;
  }

  60% {
    translate: -1rem;
  }

  80% {
    translate: 1rem;
  }
}


@keyframes rotate-spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}