@import url("https://fonts.googleapis.com/css2?family=Alegreya+SC:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&family=Alegreya:ital,wght@0,400..900;1,400..900&family=BIZ+UDPMincho&family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Great+Vibes&family=Monomakh&family=Shafarik&family=Triodion&family=Vollkorn:ital,wght@0,400..900;1,400..900&family=Zen+Antique+Soft&display=swap");

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */

:root {
  --body-bg-img: linear-gradient(
    to top,
    rgb(203, 181, 255),
    rgb(151, 236, 169)
  );
  --bg-plain-color: #a98c73aa;
}

#stm-sheet {
  --sheet-bg-img: url(../assets/stm/paper.png);
  --sheet-border-img: url(../assets/stm/border_2.png);

  --talents-bg: url(../assets/stm/sun.png);

  --parameters-areas: "ATTRBT APPRCH" "TALENT FIGHT";
  --sheet-padding: 1em;

  --point-width: 2ch;
  --point-gap: 3px;

  --sect-approaches-width: 450px;
  --sect-attributes-width: 500px;

  position: relative;
  flex-flow: column nowrap;
  padding: var(--sheet-padding);
  padding-inline: calc(var(--sheet-padding) * 1.25);

  background-color: rgba(38, 39, 55, 0.6);
  background-image: var(--sheet-bg-img);

  border: 25px solid transparent;

  border-image-slice: 51 64 57 191;
  border-image-width: 42px 58px 51px 147px;
  border-image-outset: 15px 32px 23px 122px;
  border-image-repeat: round round;
  border-image-source: var(--sheet-border-img);
}

/* ==========================================================================
   2. Base Layout
   ========================================================================== */

#sheet-header {
  display: flex;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  hgroup {
    h1,
    :heading {
    }
    p {
    }
  }
}

#sheet-body {
  width: 100%;
  flex-flow: column nowrap;
}

/* ==========================================================================
   3. Lore Section
   ========================================================================== */

#sheet-lore {
  --grid-areas: "NAME ART PERSONA";
  --img-height: 175px;
  --img-ratio: calc(3 / 4);
  --img-width: calc(var(--img-height) * var(--img-ratio));

  --lore-height: var(--img-height);
  --lore-item-max: 3;
  --lore-item-height-orig: calc(var(--lore-height) / var(--lore-item-max));
  --lore-item-height: var(--lore-item-height-orig);

  --lore-width: 100%;
  --span-width: 15ch;
  --input-width: 100%;

  --name-w-perc: 45%;
  --name-w: 405px;
  --persona-w-perc: calc(100% - var(--name-w));
  --persona-w: 495px;

  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: var(--lore-height);

  hgroup {
    position: absolute;
  }

  .lore-container {
    display: grid !important;
    grid-template-areas: var(--grid-areas);
    grid-template-columns: 1fr var(--img-width) 1fr;
    width: var(--lore-width);

    > div {
      display: flex;
      flex-flow: column wrap;
      width: 100%;

      div {
        height: var(--lore-item-height);
        line-height: var(--lore-item-height);

        label {
          display: flex;
          flex-flow: row nowrap;
          width: 100%;

          span {
            display: inline-block;
            width: var(--span-width);
            text-align: start;
            padding-inline-start: calc(var(--span-width) / 20);
          }

          input {
            width: var(--input-width);
            height: var(--lore-item-height);
            line-height: var(--lore-item-height);
          }
        }
      }
    }

    .lore-character-image {
      grid-area: ART;
      aspect-ratio: var(--img-ratio);
      height: var(--img-height);
      width: var(--img-width);

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

    .lore-name-concept-container {
      --lore-item-height: calc(var(--lore-item-height-orig) * 1.5);
      grid-area: NAME;
      min-width: auto !important;
      height: var(--lore-height);
    }

    .lore-persona {
      grid-area: PERSONA;
    }
  }
}

/* ==========================================================================
   4. Parameters Section (Main Grid)
   ========================================================================== */

#sheet-parameters {
  display: grid;
  grid-template-areas: var(--parameters-areas);
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;

  > hgroup {
    position: absolute;
    right: 0;
  }
}

/* ==========================================================================
   5. Attributes
   ========================================================================== */

#section-dice-parameters {
  --att-margin-left: 4em;
  grid-area: ATTRBT;
  width: min(100%, var(--sect-attributes-width));
  height: auto;
  min-height: max-content;
  justify-content: center;
  margin-block: auto;
  margin-inline-start: calc(var(--att-margin-left) / -2);
  row-gap: 2em;
}

#section-attributes {
  grid-area: ATTRBT;
  width: 100%;
  height: 40%;

  > hgroup {
    position: absolute;
  }

  svg {
    overflow: visible;
    pointer-events: none;

    input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: textfield;
      pointer-events: all;
      user-select: all;
      border: none;
      background: none;
      padding: 0;
      caret-color: transparent;
      width: 1ch;
      text-align: center;

      &:focus {
        outline: none;
      }

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

.attributes-container {
  height: 100%;

  ul {
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
}

.attribute-item-list {
  height: 100%;
  margin-inline-start: var(--att-margin-left);
}

.attribute-container {
  height: 100%;

  img {
    fill: white;
  }

  svg {
    transform: scale(1.1) translateY(var(--svg-top-margin, 0));
  }
}

.attribute-svg {
  foreignObject {
    width: 100%;
    height: 100%;
    transform: translateX(-50%) translateY(-25%);
    overflow: visible;
  }
}

.attribute-total {
  font-size: 10px;
  text-align: center;
}

/* Attribute Specific Overrides */
#attribute-voice {
  --svg-top-margin: 10px;
}

#attribute-mind {
  --svg-top-margin: 5px;

  foreignObject .attribute-total {
    transform: translateY(0.3px);
  }
}

#attribute-body {
  --svg-top-margin: 0;
}

/* ==========================================================================
   6. Skills
   ========================================================================== */

#section-skills {
  --skills-x: 50%;
  grid-area: SKILLS;
  height: auto;
  width: 100%;
  justify-content: center;
  position: relative;

  > hgroup {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }
}

.skills-container {
  ul {
    --ul-hor-gap: calc(var(--point-gap) * 0.8);
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    row-gap: calc(var(--point-gap) * 3);
    column-gap: var(--ul-hor-gap);
    justify-content: space-around;
    align-items: center;
    align-content: center;
  }
}

.skill-list-item-container {
  width: calc((100% - var(--ul-hor-gap) * 6) / 3);

  ul {
    display: flex;
    flex-flow: column wrap;
    row-gap: calc(var(--point-gap) * 1.5);
  }
}

.skill-list-item {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: center;

  .skill-name {
    width: 6ch;
    text-align: left;
  }

  .point-container {
    height: var(--point-width);
  }

  .point-total {
    position: absolute;
    text-align: center;
    width: 1ch;
  }
}

/* ==========================================================================
   7. Approaches
   ========================================================================== */

#section-approaches {
  grid-area: APPRCH;
  width: min(100%, var(--sect-approaches-width));
  display: flex;
  flex-flow: column wrap;

  > hgroup {
    position: absolute;
    right: 0;
  }
}

.approaches-container {
  display: flex;
  flex-flow: column wrap;

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

.approach-list-item {
  width: 50%;

  .approach-container {
    display: grid;
    grid-template-areas:
      "---- NAME TOTL"
      "IMAG PNTS PNTS"
      "IMAG PNTS PNTS";
    align-items: center;
    justify-items: stretch;

    .approach-name {
      grid-area: NAME;
    }

    img {
      display: block;
      grid-area: IMAG;
    }

    .point-container {
      grid-area: PNTS;
      width: 50%;
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(4, var(--point-width));
      align-content: center;
      justify-content: center;
      justify-items: center;
    }

    .point-total {
      grid-area: TOTL;
      width: 1ch;
    }
  }
}

/* ==========================================================================
   8. Talents & Flaws (Notes)
   ========================================================================== */

.vertical-notes {
  display: flex;
  flex-flow: column wrap;
}

#sheet-talents-flaws {
  grid-area: TALENT;
  width: -webkit-fill-available;

  background-image: var(--talents-bg);
  background-blend-mode: color;
  background-repeat: no-repeat;
  background-position: 85% 15%;
  background-size: 27%;
}

#sheet-talents {
  grid-area: TALENT;
}

#sheet-flaws {
  grid-area: FLAWS;
}

/* ==========================================================================
   9. Common Components (Points & Checkboxes)
   ========================================================================== */

.point-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  row-gap: var(--point-gap);
  column-gap: var(--point-gap);
}

.point-checkbox {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0;
  width: var(--point-width);
  height: var(--point-width);
  background-color: white;

  &:checked {
    background-color: red;
  }
}

/* ==========================================================================
   11. Combat (FIGHT Area)
   ========================================================================== */

#sheet-fight {
  grid-area: FIGHT;
  width: auto;
  display: flex;
  flex-flow: column nowrap;
}

/* Hit Threshold */
#fight-ht {
  display: flex;
  flex-flow: column nowrap;
}

.ht-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ht-value {
  font-size: 1.5em;
  font-weight: bold;
}

/* Damage Section */
#fight-damage {
  display: flex;
  flex-flow: column nowrap;
}

#light-damage,
#heavy-damage {
  display: flex;
  flex-flow: column nowrap;
}

#light-damage > div,
#heavy-damage > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

#light-damage label,
#heavy-damage label {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

#light-damage input,
#heavy-damage input {
  border: none;
  text-align: center;
}

#light-damage input:focus,
#heavy-damage input:focus {
  outline: none;
}

/* Hide number spin buttons */
#light-damage input::-webkit-outer-spin-button,
#light-damage input::-webkit-inner-spin-button,
#heavy-damage input::-webkit-outer-spin-button,
#heavy-damage input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#light-damage input[type="number"],
#heavy-damage input[type="number"] {
  -moz-appearance: textfield;
}

#light-damage figure,
#heavy-damage figure {
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  line-height: 1.2;
}

.damage-max {
  font-weight: bold;
}

#sheet-fight figcaption {
  font-size: 0.7em;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==========================================================================
   Damage checkboxes
   ========================================================================== */

#fight-damage .damage-block > div {
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

#fight-damage label {
  flex: 0 1 auto;
}

#fight-damage .damage-points {
  order: 3;
  width: auto;
  margin: 0;
}

#fight-damage figure {
  margin: 0;
  min-width: 4ch;
}

/* ==========================================================================
   10. Responsive / Media Queries
   ========================================================================== */

/* Tablet / Small Desktop */
@media (max-width: 1024px) {
  #stm-sheet {
    --sect-approaches-width: 100%;
    --sect-attributes-width: 100%;
    --point-width: 1.5ch;
    --point-gap: 2px;
  }

  /* Lore */
  #sheet-lore .lore-container {
    --grid-areas: "ART" "NAME" "PERSONA";
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #sheet-lore .lore-name-concept-container {
    flex: 1 1 280px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #sheet-lore .lore-persona {
    flex: 1 1 320px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #sheet-lore label {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  #sheet-lore label span {
    flex-shrink: 0;
    width: auto !important;
    padding-right: 8px;
  }

  #sheet-lore label input {
    min-width: 0;
    flex-grow: 1;
    width: auto !important;
  }

  /* Parameters */
  #sheet-parameters {
    flex-direction: column !important;
    gap: 2rem;
  }

  #section-approaches,
  #section-dice-parameters {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Attributes */
  #section-attributes {
    height: auto !important;
  }

  .attribute-item-list {
    margin-inline-start: 0 !important;
    width: 33.333% !important;
    display: flex;
    justify-content: center;
  }

  .attribute-container svg {
    width: 100% !important;
    height: auto !important;
    max-width: 90px;
    transform: translateY(var(--svg-top-margin, 0)) !important;
  }

  /* Skills */
  .skills-container ul {
    justify-content: center !important;
    gap: 1rem !important;
  }

  .skill-list-item-container {
    flex: 1 1 30% !important;
    min-width: 130px !important;
    max-width: 100%;
    width: auto !important;
  }

  .skill-list-item {
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px;
  }

  .skill-list-item .skill-name {
    width: 5ch !important;
    flex-shrink: 0;
    text-align: left;
  }

  .skill-list-item .point-container {
    flex-wrap: nowrap !important;
    justify-content: flex-start;
  }

  .skill-list-item .point-total {
    position: static !important;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Approaches */
  .approach-list-item {
    width: 50% !important;
  }

  .approach-container {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 6px;
  }

  .approach-container img {
    width: 35px;
    height: auto;
  }

  .approach-container .point-container {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
  }
}

/* Mobile */
@media (max-width: 400px) {
  #stm-sheet {
    --point-width: 1.3ch;
    --point-gap: 1px;
  }

  .approach-container img {
    width: 25px;
  }
}