@import url('../../fonts/pixelsagas.com/PS_Roddenberry/font.css');

:root {
  --svg-size: 256px;
}

html {
    display: flex;
    height: calc(100dvh - 1em);
}

span.inline-block {
  display: inline-block;
}

body.embedded {
    min-height: 43.5em; /* height after which it will vertically center */
}

body, select, footer {
  background-color: #ddd;
  color: #111;
}


body {
  font-family: Roddenberry, sans-serif;
  width: 100%;
  max-width: min(90em, 100dvw);
  min-height: min(52em, 100%); /* 52 em is the height after which it will vertically center */
  margin: auto;

  & > * {
    text-align: center;
  }

  aside {
    columns: 2;
    text-align: unset;
    gap: 0.25em;
    max-width: inherit;

    /* min-height: 40em; */

    & > group {
      display: block;
      break-before: auto;
      column-break-before: auto;
      -webkit-column-break-before: auto;

      &.break-before {
        display: block;
        break-before: always;
        column-break-before: always;
        -webkit-column-break-before: always;
      }
    }

    h2, h3 {
      break-after: avoid;
      margin-block-end: 0.75em;
      padding-block-start: 0.25em;
    }

    h2 {
      margin-block-start: 0.0;
      border-top: 0.75em solid rgb(102 13 31);
    }

    h3 {
      margin-block-start: 0.5em;
      border-bottom: 0.25em solid rgb(13 81 102);
      width: fit-content;
    }
  }

  & .hidden,
  &.humanoid .non-humanoid,
  &.exocomp .non-exocomp,
  &.medusan .non-medusan,
  &.cetaceous .non-cetaceous,
  &.humanoid .medusan-only,
  &.humanoid .cetaceous-only,
  &.humanoid .exocomp-only,
  &.exocomp .medusan-only,
  &.exocomp .cetaceous-only,
  &.exocomp .humanoid-only,
  &.cetaceous .medusan-only,
  &.cetaceous .humanoid-only,
  &.cetaceous .exocomp-only,
  &.medusan .humanoid-only,
  &.medusan .exocomp-only,
  &.medusan .cetaceous-only,
  &:not(.undershirt-color-choice) .undershirt-color-choice-only,
  &:not(.orville-badge-choice) .orville-badge-choice-only,
  &:not(.extra-overlay) .extra-overlay-only,
  &:not(.andorian-antennae) .andorian-antennae-only,
  &:not(.bird-tuft) .bird-tuft-only,
  &:not(.wiskers) .wiskers-only,
  &.no-uniform-color #uniform-color-section {
    display: none;
    visibility: hidden;
    height: 0;

    &select {
      display: none;
    }
  }

  main {
    background-color: #363638;
    margin-bottom: 1em;
    padding: 1em 0;
    display: flex;
    height: auto;
    height: fit-content;
  }

  character bg {
    background-image: linear-gradient(#E5D908 2px, transparent 2px), linear-gradient(to right, #E5D908 2px, transparent 2px);
    background-size: 32px 32px;
    background-position: -33px 0;
  }

  &.medusan #character-body {
      z-index: 6; /* draw in front of the suit by taking the "facial hair" spot */
  }

  character {
    background-color: transparent;
    padding: 1em 1em 0;
    width: var(--svg-size);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 0;

    & > .mirrored {
        transform: scaleX(-1) translateX(var(--mirror-offset, 6px));
    }

    & > * {
        position: relative;
    }

    #character-rear-hair {
        z-index: 1;
    }

    #character-ears-or-nose {
        z-index: 2;
    }

    #character-body {
        z-index: 3;
    }

    #character-uniform {
        z-index: 5;
    }

    #character-facial-hair {
        z-index: 6;
    }

    #character-head-features {
        grid-template-columns: var(--svg-size) 1fr;
        grid-template-rows: var(--svg-size) 1fr;

        & > * {
            position: relative;
            z-index: 7;

            &.underuniform {
                z-index: 4;
            }

            &.overhair {
                z-index: 9;
            }
        }
    }

    #character-hair {
        z-index: 8;
    }

    #body-overlay {
        z-index: 10;
    }

    #extra-overlay {
        z-index: 11;
    }
  }

  character,
  #character-head-features {
    margin: auto;
    display: grid;

    & > * {
      grid-area: 1 / 1 / 2 / 2;

      & svg {
        width: var(--svg-size);
        height: var(--svg-size);
        margin: auto;
      }
    }
  }

  footer {
    padding: 0.25em;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;

    #download {
      padding: 0.75em 2.25em;
      font-weight: bold;
      border-radius: 1em;
    }
  }
}

input, select, button, .body-radio-option {
  border-radius: 4px;
  max-width: 100%;
}

select:not([multiple]) {
    width: fit-content;
    margin-block: 0.25em 0.75em;
    display: block;
    padding: 0.5em 2em 0.5em 0.25em;
}

.body-radio-option {
  margin: 0.25em 0;
  line-height: 2em;
  min-width: 6em;
  width: 6em;

  & input {
    width: 1em;
  }

  & label {
    display: inline-block;
    width: calc(100% - 2em);
    max-width: 100%;
  }
}

input,
.body-radio-option,
select:not([multiple]),
select[multiple] option {
  background-color: #ccc;
  color: #222;

  &:hover {
    background-color: cornflowerblue;
  }
}

@media (pointer: fine) {
  #head-feature-select {
    height: 12em;
  }
}

body header {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* Vertical mode for Mobile/Small/Narrow */
@media screen and (width <= 899px) {
    body {
        --header-size: calc(var(--svg-size) + 5em);
        --footer-size: 5em;

        display: grid;
        position: absolute;
        inset: 0;
        margin: 0;
        grid-template-rows: var(--header-size) 1fr var(--footer-size);

        & main {
            position: absolute;
            inset: 0;
            bottom: unset;
            z-index: 1;
        }

        & aside {
            z-index: 0;
            position: absolute;
            inset: 0;
            padding: var(--header-size) 1em var(--footer-size);
            overflow-y: auto;
        }

        & footer {
            position: absolute;
            inset: 0;
            margin: 0;
            top: unset;
            z-index: 1;
            border-top: 2px inset #aaa;
        }
    }
}

@media (width >= 641px) {
  aside {
    padding: 0 1em;
    gap: unset;
  }

  .body-radio-option {
    width: 50%;
  }
}

@media (width >= 641px) and (width <= 1024px) {
  :root {
    --svg-size: 384px;
    --mirror-offset: 9px;
  }
}

@media (width >= 1024px) and (width <= 1440px) {
  :root {
    --svg-size: 512px;
    --mirror-offset: 12px;
  }
}

@media (width >= 1441px) {
  :root {
    --svg-size: 640px;
    --mirror-offset: 15px;
  }
}

body.saving {
  --svg-size: 512px !important;
  --mirror-offset: 12px;
}

/* Horizontal mode for Desktop/Large/Wide */
@media (width >= 900px) {
  body {
    display: grid;
    grid-template-columns: calc(var(--svg-size) + 4em) 1fr;
    grid-template-rows: auto auto 1fr;


    &:not(.embedded) header {
      display: unset;
      visibility: unset;
      height: max-content;
      grid-row: 1;
      grid-column: 1 / 3;
    }

    main {
      grid-row: 2;
      grid-column: 1;
    }

    aside {
      grid-row: 2;
      grid-column: 2;
    }

    footer {
      grid-row: 3;
      grid-column: 1 / 3;
    }
  }
}

@media (prefers-color-scheme: dark) {
  body, select, footer {
    background-color: #111;
    color: #ddd;
  }

  input,
  .body-radio-option,
  select:not([multiple]),
  select[multiple] option, button {
    background-color: #222;
    color: #ccc;

    &:hover {
      background-color: darkslateblue;
    }
  }

}

.index-list button,
.index-list select {
    display: inline-block;
    width: fit-content;
}

.index-list select {
    display: inline-block;
    width: fit-content;
    max-width: calc(100% - 6em);
}

.index-list button {
    max-width: 6em;
    padding: 0 1.25em;
    height: 2rem;
    font-weight: bold;
    border-radius: 4px;
    vertical-align: middle;
}

label.check-label {
    user-select: none;
    display: block;
    padding: 0.5em 0.25em 0.5em 0;
    margin: 0.5em 0;
    border: 1px outset rgb(221 221 221 / 47.5%);
    border-radius: 4px;
    width: fit-content;
    min-width: 50%;
}

label.toggle-button {
    vertical-align: top;
    position: relative;

    &, & > * {
        user-select: none;
    }

    input {
        /* display: none; */
        position: absolute;
        z-index: -1;
        inset: 1em;
    }

    & span {
        background-color: #111;
        padding: 0.25em 0.75em;
        border: 2px outset #ddd;
        border-radius: 4px;

        &:hover {
            border-color: cadetblue;
        }
    }

    & :focus + span {
        border-color: cadetblue;
    }

    & :checked + span {
        background-color: royalblue;
        border-color: black;

        &:hover {
            border-color: mediumslateblue;
        }
    }
}