:root {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  --white: #fff;
  --light: #ddd;
  --dark:  #222;
  --red:   #600;
  --brred: #c00;
  --bg:    #030;
  --btn:   #060;
  --rim:   #090;
  --used:  #444;
  --black: #000;

  --form: 300px;
  --half: 150px;
  --size:  50px;
  --pad:    8px;
  --brdr:   1px;
  --arrow: 24px; /* border-width for up and down labels */
  --msg:   62px;

  --warning: 30px solid var(--btn); /* set color for dev */
  --triangle: 30px solid var(--btn);

}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--light);
  background-color: var(--dark);

  counter-set:
    w-d 23  /* w */
    e-o 5   /* e */
    l-n 12  /* l */
    l-e 12  /* l */
  ;

}

form {
  position: relative;
  width: var(--form);
  height: var(--half);

  border: var(--brdr) solid white;
  border-radius: var(--pad);
  box-sizing: border-box;

  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}


/* Enter AND Play Again BUTTONS */
button,
.button {
  background-color: var(--btn);
  border: var(--brdr) outset var(--rim);
  border-radius: var(--pad);
  padding: var(--pad) 1rem;;
  font-size: 1rem;
  line-height: 1rem;
  pointer-events: all;
  cursor: pointer;
  color: inherit;
}
button:hover,
.button:hover {
  color: var(--white);
}
button:hover:active,
.button:hover:active {
  border-style: inset;
  background-color: var(--bg);
}

/* Disable Enter button until the code is right */
.enter {
  background-color: var(--dark);
  pointer-events: none;
}

/* Customize Play Again button's position */
button {
  position: absolute;
  left: 0;
  bottom: 0;
  text-decoration: none;
}

/* Show the GitHub logo */
a.github {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 32px;
    height: 32px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}

input {
  position: absolute;
  left: -999vw;
}


/* LOCK */

div.lock {
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Default settings for up and down arrows */
    label {
      display: block;
      position: relative;

      span {
        font-size: 0;
        border: var(--arrow) solid transparent;
        display: block;
      }

      /* By default, show the warning button */
      &.up {
        span {
          border-bottom: var(--warning);
        }
      }

      &.down {
        span {
          border-top: var(--warning);
        }
      }
    }
  }

  /* Styling for letters */
  span::after {
    font-family: 'Courier New', Courier, monospace;

    display: inline-block;
    font-size: var(--size);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);

    text-align: center;
    border: var(--brdr) solid white;
  }

  /* Each letter span uses a different counter */
  span.w-d::after {
    content: counter(w-d, upper-alpha)
  }

  span.e-o::after {
    content: counter(e-o, upper-alpha)
  }

  span.l-n::after {
    content: counter(l-n, upper-alpha)
  }

  span.l-e::after {
    content: counter(l-e, upper-alpha)
  }


  /* Only show the safe triangle for the .safe buttons...
  * ... and hide them all...
  */
  label.down.safe span {
    border-top: var(--triangle);
    display: none;
  }
  label.up.safe span {
    border-bottom: var(--triangle);
    display: none;
  }
  /* ... except the first one. */
  div.w-d label.down.safe span {
    display: block;
  }

  /* Hide the .reverse buttons until they are needed */
  div[class] label.reverse {
    display: none;
  }

  /* Show :hover states for all buttons... */
  div[class] label.down:hover span {
    border-top-color: var(--rim);
  }
  div[class] label.up:hover span {
    border-bottom-color: var(--rim);
  }
  /* ... unless the label is for a :checked input */
  div[class] label.down:has(:checked) span {
    border-top-color: var(--used);
  }
  div[class] label.up:has(:checked) span {
    border-bottom-color: var(--used);
  }


  /* W-D */
  div.w-d {
    &:has(.down.forwards :checked) {
      span[class] {
        animation: w-d-short 0.6s forwards linear;
      }

      /* Hide the lure on the next button... */
      & + div.e-o {
        .lure {
          display: none;
        }
        /* ... and show the .safe button */
        .down.safe span {
          display: block;;
        }
      }
      /* To be overruled if the .lure button is :checked */
    }

    &:has(.up.reverse :checked) {
      span[class] {
        animation: d-w-short 0.6s forwards linear;
      }
    }

    &:has(.up.forwards :checked) {
      span[class] {
        animation: w-d-long 2s forwards linear;
      }
    }

    &:has(.down.reverse :checked) {
      span[class] {
        animation: d-w-long 2s forwards linear;
      }
    }
  }

  /* E-O */
  div.e-o {
    &:has(.down.forwards :checked) {
      .up.forwards {
        display: none
      }
      .up.reverse {
        display: block;
      }
      span[class] {
        animation: e-o-short 1s forwards linear;
      }

      /* Hide the lure on the next button but one*/
      & ~ div.l-e {
        .lure {
          display: none;
        }
        .up.safe span {
          display: block;;
        }
      }
    }

    &:has(.up.reverse :checked) {
      span[class] {
        animation: o-e-short 1s forwards linear;
      }
    }

    &:has(.up.forwards :checked) {
      .down.forwards {
        display: none
      }
      .down.reverse {
        display: block;
      }
      span[class] {
        animation: e-o-long 1.6s forwards linear;
      }
    }

    &:has(.down.reverse :checked) {
      span[class] {
        animation: o-e-long 1.6s forwards linear;
      }
    }
  }

  /* L-N */
  div.l-n {
    &:has(.down.forwards :checked) {
      span[class] {
        animation: l-n-short 0.3s forwards linear;
      }
    }

    &:has(.up.reverse :checked) {
      span[class] {
        animation: n-l-short 0.3s forwards linear;
      }
    }

    &:has(.up.forwards :checked) {
      .down.forwards {
        display: none
      }
      .down.reverse {
        display: block;
      }
      .down.safe {
        display: none;
      }
      span[class] {
        animation: l-n-long 2.4s forwards linear;
      }
    }

    &:has(.down.reverse :checked) {
      span[class] {
        animation: n-l-long 2.4s forwards linear;
      }
    }
  }


  /* L-E is more complex because it removes a .lure in
   * the previous div.l-n
   */
  &:has(div.l-e .up.forwards :checked) {
    & .l-e {
      span[class]{
        animation: l-e-short 0.8s forwards linear;
      }

      /* .safe :checked + span,
      .safe :checked + span:hover {
        border-bottom-color: purple!important;
      } */
    }

    /* Hide the lure on the previous button */
    div.l-n {
      .down.reverse {
        display: none;
      }
      .lure {
        display: none;
      }
      .down.safe,
      .down.safe span {
        display: block;;
      }
    }
  }

  &:has(div.l-e .down.reverse :checked) {
    span.l-e {
      animation: e-l-short 0.8s forwards linear;
    }
  }

  div.l-e:has(.down.forwards :checked) {
    .up.forwards {
      display: none
    }
    .up.reverse {
      display: block;
    }
    span[class] {
      animation: l-e-long 1.4s forwards linear;
    }
  }

  div.l-e:has(.up.reverse :checked) {
    span[class] {
      animation: e-l-long 1.4s forwards linear;
    }
  }
}

/* Regardless of whether a .lure button should be hidden
 * or visible, ensure that the currently :checked button
 * takes precedence. Grudging use of !important
*/
.lock div:has(.up.forwards :checked) {
  /* Hide all forward buttons except the :checked one... */
  & .forwards:not(:has(:checked)) {
    display: none!important;
  }
  /* ... which must be displayed... */
  & label.up.forwards:has(input:checked) {
    &,
    & span { /* ...along with its span */
      display: block!important;
    }
  }

  /* Ensure that the opposite .reverse button is shown */
  & label.down:not(.reverse) {
    display: none!important;
  }
  & label.down.reverse {
    &,
    & span {
      display: block!important;
    }
  }
}

.lock div:has(.down.forwards :checked) {
  /* Hide all forward buttons except the :checked one... */
  & .forwards:not(:has(:checked)) {
    display: none!important;
  }
  /* ... which must be displayed... */
  & label.down.forwards:has(input:checked) {
    &,
    & span { /* ...along with its span */
      display: block!important;
    }
  }

  /* Ensure that the opposite .reverse button is shown */
  & label.up:not(.reverse) {
    &,
    & span {
      display: none!important;
    }
  }
  & label.up.reverse {
    &,
    & span{
      display: block!important;
    }
  }
}


/* Success or failure message when PIN is correct...ish */

div.message {
  position: absolute;
  width: var(--form);
  height: var(--half);
  background-color: var(--bg);
  text-align: center;
  font-size: var(--msg);
  line-height: var(--msg);
  display: none;
  pointer-events: none;
}
form:has(.w-d .forwards :checked):has(.e-o .forwards :checked):has(.l-n .forwards :checked):has(.l-e .forwards :checked) {
  button,
  .button {
    pointer-events: all;
    background-color: var(--red);
    border-color: var(--brred);
  }
  button:hover:active,
  .button:hover:active {
    background-color: var(--black);
  }

  &:has(.button :checked) .message {
    display: block;
    background-color: var(--red);

    &::after {
      content: "Intruder Alert!"
    }
  }
}

form:has(.w-d .safe :checked):has(.e-o .safe :checked):has(.l-n .safe :checked):has(.l-e .safe :checked) {
  button,
  .button {
    pointer-events: all;
    background-color: var(--btn);
    border-color: var(--rim);
  }

  button:hover:active,
  .button:hover:active {
    background-color: var(--bg);
  }

  &:has(.button :checked) .message {
    display: block;
    background-color: #030;

    &::after {
      content: "Welcome!";
      display: inline-block;
      margin-top: 32px;
    }
  }
}

@keyframes w-d-short {
   0% { }                            /* w */
   8% { counter-increment: w-d  +0 } /* w */
  20% { counter-increment: w-d  +1 } /* x */
  32% { counter-increment: w-d  +2 } /* y */
  44% { counter-increment: w-d  +3 } /* z */
  56% { counter-increment: w-d -22 } /* a */
  68% { counter-increment: w-d -21 } /* b */
  80% { counter-increment: w-d -20 } /* c */
  92% { counter-increment: w-d -19 } /* d */
 100% { counter-increment: w-d -19 }
}
@keyframes d-w-short {
   0% { counter-increment: w-d -19 } /* d */
   8% { counter-increment: w-d -19 } /* d */
  20% { counter-increment: w-d -20 } /* c */
  32% { counter-increment: w-d -21 } /* b */
  44% { counter-increment: w-d -22 } /* a */
  56% { counter-increment: w-d  +3 } /* z */
  68% { counter-increment: w-d  +2 } /* y */
  80% { counter-increment: w-d  +1 } /* x */
  92% { counter-increment: w-d  +0 } /* w */
 100% { }
}
@keyframes w-d-long {
   0% { }                            /* w */
   5% { counter-increment: w-d  -0 } /* w */
  10% { counter-increment: w-d  -1 } /* v */
  15% { counter-increment: w-d  -2 } /* u */
  20% { counter-increment: w-d  -3 } /* t */
  25% { counter-increment: w-d  -4 } /* s */
  30% { counter-increment: w-d  -5 } /* r */
  35% { counter-increment: w-d  -6 } /* q */
  40% { counter-increment: w-d  -7 } /* p */
  45% { counter-increment: w-d  -8 } /* o */
  50% { counter-increment: w-d  -9 } /* n */
  55% { counter-increment: w-d -10 } /* m */
  60% { counter-increment: w-d -11 } /* l */
  65% { counter-increment: w-d -12 } /* k */
  70% { counter-increment: w-d -13 } /* j */
  75% { counter-increment: w-d -14 } /* i */
  80% { counter-increment: w-d -15 } /* h */
  85% { counter-increment: w-d -16 } /* g */
  90% { counter-increment: w-d -17 } /* f */
  95% { counter-increment: w-d -18 } /* e */
 100% { counter-increment: w-d -19 } /* d */
}
@keyframes d-w-long {
   0% { counter-increment: w-d -19 } /* d */
   5% { counter-increment: w-d -18 } /* e */
  10% { counter-increment: w-d -17 } /* f */
  15% { counter-increment: w-d -16 } /* g */
  20% { counter-increment: w-d -15 } /* h */
  25% { counter-increment: w-d -14 } /* i */
  30% { counter-increment: w-d -13 } /* j */
  35% { counter-increment: w-d -12 } /* k */
  40% { counter-increment: w-d -11 } /* l */
  45% { counter-increment: w-d -10 } /* m */
  50% { counter-increment: w-d  -9 } /* n */
  55% { counter-increment: w-d  -8 } /* o */
  60% { counter-increment: w-d  -7 } /* p */
  65% { counter-increment: w-d  -6 } /* q */
  70% { counter-increment: w-d  -5 } /* r */
  75% { counter-increment: w-d  -4 } /* s */
  80% { counter-increment: w-d  -3 } /* t */
  85% { counter-increment: w-d  -2 } /* u */
  90% { counter-increment: w-d  -1 } /* v */
  95% { counter-increment: w-d  -0 } /* w */
 100% {  }
}

@keyframes e-o-short {
  0%   { }                            /* e */
  1%   { counter-increment: e-o +1  } /* f */
  10%  { counter-increment: e-o +2  } /* g */
  20%  { counter-increment: e-o +3  } /* h */
  30%  { counter-increment: e-o +4  } /* i */
  40%  { counter-increment: e-o +5  } /* j */
  50%  { counter-increment: e-o +6  } /* k */
  60%  { counter-increment: e-o +7  } /* l */
  70%  { counter-increment: e-o +8  } /* m */
  80%  { counter-increment: e-o +9  } /* n */
  90%  { counter-increment: e-o +10 } /* o */
  100% { counter-increment: e-o +10 }
}
@keyframes o-e-short {
   0%  { counter-increment: e-o +10 }  /* e */
   1%  { counter-increment: e-o +10 } /* o */
  10%  { counter-increment: e-o +9  } /* n */
  20%  { counter-increment: e-o +8  } /* m */
  30%  { counter-increment: e-o +7  } /* l */
  40%  { counter-increment: e-o +6  } /* k */
  50%  { counter-increment: e-o +5  } /* j */
  60%  { counter-increment: e-o +4  } /* i */
  70%  { counter-increment: e-o +3  } /* h */
  80%  { counter-increment: e-o +2  } /* g */
  90%  { counter-increment: e-o +1  } /* f */
  100% { counter-increment: e-o +0 }
}
@keyframes e-o-long {
   0%  { }                            /* e */
   2%  { counter-increment: e-o  -1 } /* e */
   8%  { counter-increment: e-o  -2 } /* d */
  14%  { counter-increment: e-o  -3 } /* c */
  20%  { counter-increment: e-o  -4 } /* b */
  26%  { counter-increment: e-o  -5 } /* a */
  32%  { counter-increment: e-o +21 } /* z */
  38%  { counter-increment: e-o +20 } /* y */
  44%  { counter-increment: e-o +19 } /* x */
  50%  { counter-increment: e-o +18 } /* w */
  56%  { counter-increment: e-o +17 } /* v */
  62%  { counter-increment: e-o +16 } /* u */
  68%  { counter-increment: e-o +15 } /* t */
  74%  { counter-increment: e-o +14 } /* s */
  80%  { counter-increment: e-o +13 } /* r */
  86%  { counter-increment: e-o +12 } /* q */
  92%  { counter-increment: e-o +11 } /* p */
  98%  { counter-increment: e-o +10 } /* o */
  100% { counter-increment: e-o +10 }
}
@keyframes o-e-long {
   0%  { counter-increment: e-o +10 } /* e */
   2%  { counter-increment: e-o +10 } /* o */
   8%  { counter-increment: e-o +11 } /* p */
  14%  { counter-increment: e-o +12 } /* q */
  20%  { counter-increment: e-o +13 } /* r */
  26%  { counter-increment: e-o +14 } /* s */
  32%  { counter-increment: e-o +15 } /* t */
  38%  { counter-increment: e-o +16 } /* u */
  44%  { counter-increment: e-o +17 } /* v */
  50%  { counter-increment: e-o +18 } /* w */
  56%  { counter-increment: e-o +19 } /* x */
  62%  { counter-increment: e-o +20 } /* y */
  68%  { counter-increment: e-o +21 } /* z */
  74%  { counter-increment: e-o  -5 } /* a */
  80%  { counter-increment: e-o  -4 } /* b */
  86%  { counter-increment: e-o  -3 } /* c */
  92%  { counter-increment: e-o  -2 } /* d */
  98%  { counter-increment: e-o  -1 } /* e */
  100% { counter-increment: e-o  +0 }
}

@keyframes l-n-short {
  0%   { }                           /* l */
  30%  { counter-increment: l-n +1 } /* m */
  60%  { counter-increment: l-n +2 } /* n */
  100% { counter-increment: l-n +2 }
}
@keyframes n-l-short {
  0%   { counter-increment: l-n +2 } /* n */
  60%  { counter-increment: l-n +2 } /* n */
  30%  { counter-increment: l-n +1 } /* m */
  100% { counter-increment: l-n +0 } /* l */
}
@keyframes l-n-long {
   0% { counter-increment: l-n  -0 } /* l */
   6% { counter-increment: l-n  -1 } /* k */
  10% { counter-increment: l-n  -2 } /* j */
  14% { counter-increment: l-n  -3 } /* i */
  18% { counter-increment: l-n  -4 } /* h */
  22% { counter-increment: l-n  -5 } /* g */
  26% { counter-increment: l-n  -6 } /* f */
  30% { counter-increment: l-n  -7 } /* e */
  34% { counter-increment: l-n  -8 } /* d */
  38% { counter-increment: l-n  -9 } /* c */
  42% { counter-increment: l-n -10 } /* b */
  46% { counter-increment: l-n -11 } /* a */
  50% { counter-increment: l-n +14 } /* z */
  54% { counter-increment: l-n +13 } /* y */
  58% { counter-increment: l-n +12 } /* x */
  62% { counter-increment: l-n +11 } /* w */
  66% { counter-increment: l-n +10 } /* v */
  70% { counter-increment: l-n  +9 } /* u */
  74% { counter-increment: l-n  +8 } /* t */
  78% { counter-increment: l-n  +7 } /* s */
  82% { counter-increment: l-n  +6 } /* r */
  86% { counter-increment: l-n  +5 } /* q */
  90% { counter-increment: l-n  +4 } /* p */
  94% { counter-increment: l-n  +3 } /* o */
 100% { counter-increment: l-n  +2 } /* n */
}
@keyframes n-l-long {
   0% { counter-increment: l-n  +2 } /* n */
   6% { counter-increment: l-n  +3 } /* o */
  10% { counter-increment: l-n  +4 } /* p */
  14% { counter-increment: l-n  +5 } /* q */
  18% { counter-increment: l-n  +6 } /* r */
  22% { counter-increment: l-n  +7 } /* s */
  26% { counter-increment: l-n  +8 } /* t */
  30% { counter-increment: l-n  +9 } /* u */
  34% { counter-increment: l-n +10 } /* v */
  38% { counter-increment: l-n +11 } /* w */
  42% { counter-increment: l-n +12 } /* x */
  46% { counter-increment: l-n +13 } /* y */
  50% { counter-increment: l-n +14 } /* z */
  54% { counter-increment: l-n -11 } /* a */
  58% { counter-increment: l-n -10 } /* b */
  62% { counter-increment: l-n  -9 } /* c */
  66% { counter-increment: l-n  -8 } /* d */
  70% { counter-increment: l-n  -7 } /* e */
  74% { counter-increment: l-n  -6 } /* f */
  78% { counter-increment: l-n  -5 } /* g */
  82% { counter-increment: l-n  -4 } /* h */
  86% { counter-increment: l-n  -3 } /* i */
  90% { counter-increment: l-n  -2 } /* j */
  94% { counter-increment: l-n  -1 } /* k */
 100% { counter-increment: l-n  -0 } /* l */
}

@keyframes l-e-short {
   0% { }                           /* l */
  14% { counter-increment: l-e -1 } /* k */
  26% { counter-increment: l-e -2 } /* j */
  38% { counter-increment: l-e -3 } /* i */
  50% { counter-increment: l-e -4 } /* h */
  62% { counter-increment: l-e -5 } /* g */
  74% { counter-increment: l-e -6 } /* f */
  86% { counter-increment: l-e -7 } /* e */
 100% { counter-increment: l-e -7 }
}
@keyframes e-l-short {
   0% { counter-increment: l-e -7 } /* e */
  14% { counter-increment: l-e -7 } /* e */
  26% { counter-increment: l-e -6 } /* f */
  38% { counter-increment: l-e -5 } /* g */
  50% { counter-increment: l-e -4 } /* h */
  62% { counter-increment: l-e -3 } /* i */
  74% { counter-increment: l-e -2 } /* j */
  86% { counter-increment: l-e -1 } /* k */
 100% { counter-increment: l-e -0 }
}
@keyframes l-e-long {
  0%  { }                            /* l */
  5%  { counter-increment: l-e  +1 } /* m */
  10% { counter-increment: l-e  +2 } /* n */
  15% { counter-increment: l-e  +3 } /* o */
  20% { counter-increment: l-e  +4 } /* p */
  25% { counter-increment: l-e  +5 } /* q */
  30% { counter-increment: l-e  +6 } /* r */
  35% { counter-increment: l-e  +7 } /* s */
  40% { counter-increment: l-e  +8 } /* t */
  45% { counter-increment: l-e  +9 } /* u */
  50% { counter-increment: l-e +10 } /* v */
  55% { counter-increment: l-e +11 } /* w */
  60% { counter-increment: l-e +12 } /* x */
  65% { counter-increment: l-e +13 } /* y */
  70% { counter-increment: l-e +14 } /* z */
  75% { counter-increment: l-e -11 } /* a */
  80% { counter-increment: l-e -10 } /* b */
  85% { counter-increment: l-e -9  } /* c */
  90% { counter-increment: l-e -8  } /* d */
  95% { counter-increment: l-e -7  } /* e */
 100% { counter-increment: l-e -7  }
}
@keyframes e-l-long {
  0%  { counter-increment: l-e -7  } /* e */
  5%  { counter-increment: l-e -8  } /* d */
  10% { counter-increment: l-e -9  } /* c */
  15% { counter-increment: l-e -1  } /* b */
  20% { counter-increment: l-e -10 } /* a */
  25% { counter-increment: l-e +11 } /* z */
  30% { counter-increment: l-e +14 } /* y */
  35% { counter-increment: l-e +13 } /* x */
  40% { counter-increment: l-e +12 } /* w */
  45% { counter-increment: l-e +11 } /* v */
  50% { counter-increment: l-e +10 } /* m */
  55% { counter-increment: l-e  +9 } /* u */
  60% { counter-increment: l-e  +8 } /* t */
  65% { counter-increment: l-e  +7 } /* s */
  70% { counter-increment: l-e  +6 } /* r */
  75% { counter-increment: l-e  +5 } /* q */
  80% { counter-increment: l-e  +4 } /* p */
  85% { counter-increment: l-e  +3 } /* o */
  90% { counter-increment: l-e  +2 } /* n */
  95% { counter-increment: l-e  +1 } /* m */
 100% { counter-increment: l-e  +0 } /* l */
}