/*--
  © 2026 Nereus Games – http://nereus.games/
  ❤︎ Sharing is caring. Please share & reuse as you see fit.
  */


main#spiriquiz {
  background:                   var(--indigo);
  color:                        var(--white);
  display:                      flex;
  flex-direction:               column;
  margin-top:                   0;
  padding-top:                  0;
  position:                     relative;
  &:has(.intro) {
    background:                 url('/assets/spiriquiz/wallpaper.png') center / auto repeat fixed;
    }
  & .progress {
    background:                 linear-gradient(to right, var(--yellow) var(--p, 0%), var(--white) var(--p, 0%));
    height:                     3px;
    margin:                     0;
    position:                   absolute;
    inset:                      auto 0 0 0;
    z-index:                    var(--z-progress);
    transition:                 background .3s ease;
    }
  & .screen {
    display:                    flex;
    align-items:                stretch;
    flex:                       1;
    position:                   relative;
    & figure {
      flex:                     0 0 50vw;
      width:                    50vw;
      height:                   100%;
      margin:                   0;
      overflow:                 hidden;
      position:                 absolute;
      inset:                    0 auto 0 0;
      & img {
        display:                block;
        width:                  100%;
        height:                 100%;
        object-fit:             cover;
        }
      }
    & article {
      display:                  flex;
      flex:                     1;
      flex-direction:           column;
      justify-content:          safe center;
      margin-left:              50vw;
      max-width:                60ch;
      padding:                  6rem 3rem 3rem;
      }
    &:not(.illustrated) article {
      margin:                   0 auto;
      width:                    100%;
      }
    &.result figure {
      padding-top:              var(--header-clearance);
      }
    &.result figure img {
      object-fit:               contain;
      }
    @media (max-width: 840px) {
      flex-direction:           column;
      & figure {
        flex:                   0 0 auto;
        width:                  100vw;
        height:                 auto;
        position:               relative;
        inset:                  auto;
        & img {
          height:               auto;
          }
        }
      &.result figure {
        width:                  80vw;
        margin:                 0 auto;
        }
      &:not(.illustrated) article {
        padding-top:            var(--header-clearance);
        }
      & article {
        margin-left:            0;
        max-width:              none;
        min-width:              0;
        padding:                1.5rem;
        & form {
          min-width:            0;
          }
        & fieldset {
          min-width:            0;
          min-inline-size:      0; /* Firefox/Safari honour the logical property on fieldset more reliably than min-width */
          }
        & fieldset.images {
          max-width:            calc(100vw - 3rem);
          }
        }
      }
    }
  & .intro {
    & article {
      align-items:              center;
      text-align:               center;
      & > p {
        font-style:             italic;
        }
      }
    & h1 {
      font-size:                2rem;
      font-style:               italic;
      }
    & form {
      margin-top:               .5rem;
      }
    & .caption {
      font-size:                .75rem;
      margin-top:               .75rem;
      opacity:                  .7;
      }
    & strong {
      color:                    var(--yellow);
      }
    @media (min-width: 840px) {
      & article {
        max-width:              80ch;
        & > p {
          font-size:            1.15rem;
          line-height:          1.55;
          &:first-of-type {
            margin-top:         1.5rem;
            }
          }
        }
      & h1 {
        font-size:              2.5rem;
        }
      }
    }
  & .cta {
    background:                 var(--yellow);
    border:                     none;
    border-radius:              6px;
    color:                      var(--navy);
    cursor:                     pointer;
    display:                    inline-block;
    font-family:                inherit;
    font-size:                  1rem;
    font-weight:                700;
    height:                     auto;
    margin:                     0;
    outline:                    none;
    padding:                    .6rem 1.4rem;
    text-decoration:            none;
    transition:                 transform .2s ease;
    &:hover, &:focus {
      transform:                scale(1.05);
      }
    }
  & fieldset {
    border:                     0;
    display:                    flex;
    flex-direction:             column;
    gap:                        .5rem;
    list-style:                 none;
    margin:                     1.5rem 0;
    padding:                    0;
    & label {
      align-items:              baseline;
      background:               rgba(221, 187, 51, .12);
      border:                   1px solid transparent;
      border-radius:            4px;
      color:                    var(--yellow);
      cursor:                   pointer;
      display:                  flex;
      gap:                      .5rem;
      margin:                   0;
      padding:                  .15rem .4rem;
      transition:               background .2s, border-color .2s, transform .2s;
      width:                    100%;
      & > * {
        margin:                 0;
        }
      &:hover, &:has(input:focus-visible:not(:checked)) {
        transform:              scale(1.05);
        }
      &:has(input:checked) {
        background:             transparent;
        border-color:           var(--yellow);
        transform:              none;
        }
      }
    & input[type="radio"] {
      appearance:               none;
      background:               transparent;
      border:                   1.5px solid var(--yellow);
      border-radius:            50%;
      cursor:                   pointer;
      flex-shrink:              0;
      height:                   1rem;
      margin:                   0;
      position:                 relative;
      width:                    1rem;
      transform:                translateY(2px);
      &:checked::after {
        background:             var(--yellow);
        border-radius:          50%;
        content:                '';
        height:                 50%;
        width:                  50%;
        position:               absolute;
        top:                    50%;
        left:                   50%;
        transform:              translate(-50%, -50%);
        }
      }
    &.images {
      align-items:              stretch;
      flex-direction:           row;
      flex-wrap:                nowrap;
      gap:                      1rem;
      overflow-x:               auto;
      padding:                  .5rem 0;
      scrollbar-width:          none;
      &::-webkit-scrollbar { display: none; }
      & label {
        align-items:            stretch;
        flex:                   0 0 180px;
        flex-direction:         column;
        overflow:               hidden;
        padding:                0;
        position:               relative;
        width:                  180px;
        }
      & img {
        aspect-ratio:           1 / 1;
        display:                block;
        object-fit:             cover;
        width:                  100%;
        }
      & input[type="radio"] {
        background:             rgba(1, 45, 108, .8);
        border-radius:          50%;
        padding:                .25rem;
        position:               absolute;
        top:                    .5rem;
        left:                   .5rem;
        }
      &.above span {
        font-weight:            500;
        padding:                .5rem .75rem;
        text-align:             center;
        }
      &.replace span {
        clip:                   rect(0 0 0 0);
        height:                 1px;
        overflow:               hidden;
        position:               absolute;
        width:                  1px;
        }
      }
    }
  & .share {
    display:                    flex;
    font-size:                  1.5rem;
    gap:                        .5rem;
    list-style:                 none;
    margin:                     .25rem 0;
    padding:                    0;
    & * {
      margin:                   0;
      text-decoration:          none;
      }
    & a:hover {
      color:                    var(--yellow);
      }
    }
  & .credit {
    background:                 rgba(0, 0, 0, .4);
    border-radius:              .25rem;
    font-size:                  .8rem;
    letter-spacing:             .08em;
    opacity:                    .8;
    padding-block:              .15rem;
    padding-inline:             .4rem;
    pointer-events:             none;
    position:                   absolute;
    bottom:                     .5rem;
    left:                       .05rem;
    white-space:                nowrap;
    writing-mode:               sideways-lr;
    z-index:                    var(--z-credit);
    @media (max-width: 840px) {
      top:                      var(--header-clearance);
      right:                    .05rem;
      bottom:                   auto;
      left:                     auto;
      }
    }
  & .interlude h2,
  & .result h2 {
    font-size:                  1.5rem;
    }
  & .result h3 {
    font-size:                  1rem;
    margin-top:                 2rem;
    }
  }