html {
  height: 250vh;
}

.character-sheet {
  --c-element-height: 34px;
  --c-label-width: 128px;
  --c-element-padding: calc(var(--c-element-height) / 10);
  --clr-element-bg: #2f2f30;
  --clr-element-txt: white;
  --clr-text: #2f2f30;
  color: var(--clr-text);

  --font-h1: "Beleren", serif;
  --font-h2: "Monotype Corsiva", cursive;
  --font-h3: "Beleren", serif;
  --font-text-serif: Cambria, "Certa Serif", serif;
  --font-text-sans: Roboto, "Certa Sans", sans;
  --font-text: var(--font-text-serif);
  font-family: var(--font-text);

  --point-size: 20px;
  --point-margin-gap: calc(var(--point-size) / 6);

  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

/* DESCRIPTION PLUG-IN */

descr {
  --descr-max-width: 40ch;
  --descr-border-clr: #535353;
  --descr-bg-clr: white;
  --descr-padding: 1ch;
  --descr-padding-inline: calc(var(--descr-padding) * 2);
  display: none;
  position: fixed;
  max-width: var(--descr-max-width);
  /*
  border: 1px solid var(--descr-border-clr);
  */
  background-color: var(--descr-bg-clr);
  background-image: linear-gradient(
    90deg,
    var(--descr-border-clr) var(--descr-padding-inline),
    transparent var(--descr-padding-inline)
  );
  padding: var(--descr-padding);
  padding-inline-start: var(--descr-padding-inline);

  transition: 3s 3s display;

  bottom: 0;
}

*:hover + descr,
descr:hover {
  display: block;
}

/* Points */
.point-container {
  --point-border-thickness: calc(var(--point-size) / 8);
  display: flex;
  flex-flow: row wrap;
  gap: var(--point-margin-gap);

  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;

    width: var(--point-size);
    height: var(--point-size);
    margin: 0;

    border: var(--point-border-thickness) solid var(--clr-text);
    background-color: transparent;

    cursor: pointer;

    &[data-state="checked"] {
      background-color: var(--clr-text);
    }

    &[data-state="indeterminate"] {
      background-image: linear-gradient(
        135deg,
        var(--clr-text) 50%,
        transparent 50%
      );
    }

    &[data-state="off-limit"] {
      background-image:
        linear-gradient(
          45deg,
          transparent 45%,
          var(--clr-text) 45%,
          var(--clr-text) 55%,
          transparent 55%
        ),
        linear-gradient(
          135deg,
          transparent 45%,
          var(--clr-text) 45%,
          var(--clr-text) 55%,
          transparent 55%
        );
      background-size: 100% 100%;
      cursor: default;
    }
  }
}

#toolbar {
  position: fixed;
  inset-inline-start: 20px;
  inset-block-end: 55px;

  ul {
    display: flex;
    flex-flow: row nowrap;
  }
}

.c-attribute {
  --c-element-width: 158px;
  --c-element-input: 2em;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-end;
  width: calc((var(--c-element-input) + var(--c-element-width)) * 1.1);

  & > label {
    --clr-text: var(--clr-element-txt);
    height: calc(var(--c-element-height) + var(--c-element-padding) * 2);
    display: flex;
    flex-flow: row nowrap;
    color: var(--clr-text);

    span {
      font-family: var(--font-h2, "Monotype Corsiva"), serif;
      font-size: var(--c-element-height);
      background-color: var(--clr-element-bg, #2f2f30);
      padding: var(--c-element-padding);
      width: var(--c-element-width);

      padding-inline-start: 0.15em;
      line-height: 1.5;
      text-shadow: 0px 2px var(--clr-element-bg);

      display: flex;
      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: space-between;
    }

    picture {
      display: flex;
      align-items: center;
      margin-inline-end: 0.2em;
      img {
        height: calc(var(--c-element-height) * 0.9);
        filter: invert(1);
      }
    }

    input {
      font-family: Effra;
      font-size: var(--c-element-input);
      width: var(--c-element-input);
      text-align: center;

      border: none;
      background: transparent;
      -moz-appearance: textfield;

      text-shadow: 0px 1px rgba(0, 0, 0, 0.45);

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
    }
  }
}

.c-skills-container {
  --skills-to-attribute-margin: calc(var(--point-margin-gap) * 4);
  --skills-margin: calc(var(--point-margin-gap) / 1);
  display: flex;
  flex-flow: row wrap;

  justify-content: flex-end;
  align-items: center;
  margin-block: var(--skills-margin);

  legend {
    float: inline-end;
    margin-inline-end: calc(var(--skills-margin) * 3);
    font-family: var(--font-h3);
    font-size: 1.2em;
  }

  &:first-of-type {
    margin-block-start: var(--skills-to-attribute-margin);
  }
  &:last-of-type {
    margin-block-end: var(--skills-to-attribute-margin);
  }
}

.c-motif {
  --c-element-width: calc(var(--c-label-width) * 1.25);
  --c-label-height: var(--c-element-height);
  --motif-gap: 8px;

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;

  position: relative;
  width: var(--c-element-width);
  padding-block-start: calc(var(--c-label-height) + var(--motif-gap));
  padding-block-end: var(--motif-gap);

  label {
    --clr-text: var(--clr-element-txt);
    background-color: var(--clr-element-bg);
    color: var(--clr-text);
    font-family: var(--font-h2);
    font-size: var(--c-element-height);
    height: var(--c-label-height);
    width: var(--c-label-width);
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;

    padding-inline-start: 0.15em;
    line-height: 1.3;
    text-shadow: 0px 2px var(--clr-element-bg);
  }

  picture {
    --picture-size: calc(var(--point-size) * 2.5);
    display: flex;
    justify-content: center;
    align-items: center;

    height: var(--picture-size);
    aspect-ratio: 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
  }

  .c-motif-point-container {
    --points-per-row: 4;
    width: calc(
      var(--points-per-row) * var(--point-size) + (var(--points-per-row) - 1) *
        var(--point-margin-gap)
    );
  }
}

/* TRAITS */

.c-trait {
  --trait-name-attr: attr(data-art-name raw-string);
  --title-height: var(--c-element-height);
  --trait-text-padding: calc(var(--c-element-padding) * 2);
  --trait-name-margin: calc(var(--c-element-height) / 2);
  --trait-name-font-size: var(--c-element-height);

  counter-reset: trait-power-level;
  position: relative;
  width: 60ch;

  .c-trait-name {
    --clr-text: var(--clr-element-txt);
    --trait-name-padding: calc(var(--trait-text-padding) * 1);

    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: space-between;
    padding-inline: var(--trait-name-padding);
    margin-block-end: var(--trait-name-margin);
    height: var(--title-height);
    background-color: var(--clr-element-bg);
    color: var(--clr-text);

    font-size: var(--trait-name-font-size);
    font-family: var(--font-h3);
    line-height: 1.25;
    text-shadow: 0px 2px var(--clr-element-bg);

    .c-module-ctd-art-point-container {
      align-items: center;
      align-content: center;
      height: 100%;
    }
  }

  .c-trait-text {
    --height-of-1-line: 1.2em;

    display: flex;
    flex-flow: row wrap;
    column-gap: var(--trait-text-padding);

    p {
      padding-inline: var(--trait-text-padding);
      line-height: var(--height-of-1-line);
      font-weight: bolder;
      width: 100%;

      /* Indentention hack*/
      &::before {
        --indent-width: 1em;
        content: "";
        float: left;
        width: var(--indent-width);
        height: clamp(0px, 100% - var(--height-of-1-line), 1px);
      }
      &:last-of-type {
        margin-block-end: var(--trait-name-margin);
      }
    }

    .trait-trivia {
      font-weight: lighter;
      margin-block-start: var(--trait-name-margin);

      summary {
        --sum-padding: calc(var(--c-element-padding) * 3);
        --clr-text: var(--clr-element-txt);
        cursor: pointer;
        list-style: none;

        color: var(--clr-text);
        background-color: var(--clr-element-bg);
        width: fit-content;
        height: 1em;

        padding-inline: var(--sum-padding);
        padding-block: calc(var(--sum-padding) / 2);
        font-family: var(--font-h2);
        font-size: 1.5em;
        line-height: 1.25;

        /* Summary button animation */
        transition:
          background-color 0.2s ease,
          transform 0.2s ease;

        &:active {
          transform: scale(0.96) !important;
        }
        &:hover {
          transform: scale(0.99);
        }
        /* ^ ^ ^ */

        &::-webkit-details-marker {
          display: none;
        }

        &::marker {
          content: none;
        }

        &::after {
          content: "⇲";
          margin-inline-start: 1em;
        }
      }

      &[open] summary::after {
        content: "⇱";
      }

      .trivia-text {
        --trivia-margin: 1em;
        border: var(--clr-element-bg) 1px solid;
        margin-inline-start: var(--trivia-margin);
        margin-block-start: calc(var(--trivia-margin) * -1);
        padding: var(--trivia-margin);
        /*
        padding-block-start: calc(var(--trivia-margin) * 2);
        */

        p:last-of-type {
          margin-block-end: 0;
        }
      }

      &:last-of-type {
        margin-block-end: var(--trait-name-margin);
      }

      &.ctd-unleashing {
      }
      &.ctd-bunk {
      }
    }

    .trait-levels {
      display: flex;
      flex-flow: row wrap;

      /* Each <li> is a level */
      li {
        counter-increment: trait-power-level;
      }

      .trait-power {
        display: flex;
        flex-flow: row wrap;
        justify-content: stretch;

        .c-trait-name {
          --trait-name-font-size: calc(var(--c-element-height) / 1.2);

          flex-direction: column;
          width: auto;
          height: auto;
          justify-content: space-around;

          font-family: var(--font-h2);
          flex: 1 0 30%;

          &::after {
            content: counter(trait-power-level) "-lv power of the Art of "
              var(--trait-name-attr);
            font-size: calc(var(--trait-name-font-size) / 2);
            font-family: "Courier New", Courier, monospace;
            color: color-mix(in oklab, var(--clr-element-bg), var(--clr-text));
          }
        }

        .c-trait-power-description {
          flex: 1 0 60%;

          /*
          p:last-of-type {
            margin-block-end: 0;
          }
            */
        }

        .c-trait-text,
        .c-module-ctd-art-power-text {
          width: 100%;
        }
      }
    }
  }

  &[data-art-name="Wayfare"]::before {
    content: "art";
    font-size: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

    background-image: url(https://i.ibb.co/2718TTB2/wayfare.png);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-attachment: fixed;
    background-size: 34%;
    background-position: 50% 20%;

    opacity: 0.2;
    filter: grayscale(30%);
    z-index: -1;
  }
}