.game-main {
  /* margin: auto auto;
  max-width: 1200px; */
  container-type: inline-size;

  h1, h2 {
    font-weight: 400;
  }

  p {
    font-size: 1.25em;
    line-height: 1.35;
    max-width: 65ch;
    font-weight: 300;
  }

  #instructions span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }


  #hints li {
    font-size: 1.25em;
    line-height: 1.35;
    max-width: 65ch;
    font-weight: 300;
    list-style: "";
    margin-inline-start: 1em;
    margin-block-end: 0.5em;

    button {
      position: relative;
      font-family: monospace, monospace;
      font-size: 1em;
      border: 1px solid #0000;
      color: var(--fg);
      background: color-mix(in sRGB, var(--bg) 50%, light-dark(#0005, #fff8) 50%);
      
      &:active,
      &:focus-visible {
        outline: 1px solid var(--fg);
        outline-offset: 2px;
        
        &::before {
          box-shadow: inset 0 0 0 0 var(--bg);
        }
      }
      
      &::before {
        content: "";
        width: 1.25em;
        height: 1.25em;
        border-radius: 50%;
        background: var(--c);
        position: absolute;
        top: 50%;
        inset-inline-start: 0;
        margin-inline-start: -2em;
        translate: 0 -50%;
        border: 0.1em solid var(--fg);
        box-shadow: inset 0 0 0 0.15em var(--bg);
        transition: box-shadow 0.25s;
      }
      
      &:active ~ span {
        filter: blur(0);
      }
    }
    
    span:last-child {
      filter: blur(0.25em);
      transition: filter 0.5s;
    }
  }

  article {
    --color: #cef;
    font-size: 2.5cqi;
    display: inline-flex;
    flex-direction: column;
    border: 0.2em solid;
    margin: 2em;
    margin-block-start: 1em;
    border-radius: 0.2em;
    
    @media (width < 1200px) {
      font-size: 4vmin;
    }
    
    ul {
      margin: 0;
      padding: 0;
      list-style: "";
      font-size: inherit;
    }

    li {
      display: flex;
      position: relative;
      font-size: inherit;

      &::before {
        content: "";
        width: 1.25em;
        height: 1.25em;
        border-radius: 50%;
        background: var(--c);
        position: absolute;
        top: 50%;
        inset-inline-start: 0;
        margin-inline-start: -2em;
        translate: 0 -50%;
        border: 0.1em solid var(--fg);
        box-shadow: inset 0 0 0 0.15em var(--bg);
        transition: box-shadow 0.25s;
      }

      &:focus-within {
        &::before {
          box-shadow: inset 0 0 0 #fff;  
        }

        input {
          background: #eef8ff;
          background: color-mix(in sRGB, var(--color) 25%, #fffc 75%);
          color: #000;
          min-width: unset;
        }

        :focus {
          background: #dde8ff;
          background: var(--color);
          outline: 1px solid #000;
          outline-offset: -2px;
        }
      }

      &:not(:has(input:invalid)) {
        &::after {
          content: "";
          width: 1em;
          height: 0.5em;
          border-left: 0.3em solid green;
          border-bottom: 0.3em solid green;
          rotate: -45deg;
          position: absolute;
          top: 50%;
          inset-inline-end: 0;
          margin-inline-end: -2em;
          translate: 0 -75%;
          min-width: unset;
        }

        input {
          background: #cfc;
          color: #000;
          min-width: unset;
        }
      }

      input {
        font-size: 1em;
        margin: 0;
        padding: 0;
        height: 2em;
        width: 2em;
        border: max(1px, 0.025em) solid #0003 !important;
        box-sizing: content-box;
        border-radius: 0;
        text-align: center;
        text-transform: uppercase;
        color: var(--fg);
        transition: background 0.25s;
        min-width: unset;

        &[readonly] {
          border-inline-end: max(2px, 0.05em) solid #000;
          background: light-dark(var(--color), var(--bg));
          pointer-events: none;
          color: light-dark(#000, #fff);
        }

        li:nth-child(3) & {
          border-block-end: max(2px, 0.05em) solid #000;
        }
      }
    }
  }
}

.scrim {
  position: fixed;
  inset: 0;
  background: #0008;
  backdrop-filter: blur(0.5em);
  place-items:center;
  display: none;

  :not(:has(:invalid)) & {
    display: grid;
  }

  > div {
    background: var(--bg);
    border-radius: 0.5em;
    padding: 2em;
    font-family: Helvetica, sans-serif;
    max-width: 300px;
    width: 80%;

    h2 {
      margin-block: 0 2rem;
      font-weight: 400;
    }

    p {
      margin-block: 1rem 0;
      font-weight: 300;
    }
  }
}