main.game-main {
  margin: auto auto;
  max-width: 1200px;
  container-type: inline-size;
  width: 100%;
}

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#game-main {
  --color: #cef;
  font-size: 2.5cqi;
  margin-inline: 0.2em;
  margin-inline-end: 2em;
  margin-block-end: 2em;
  margin-block-start: 1em;
  border-radius: 0.2em;
/*   background: conic-gradient(from 90deg at 50% calc(00.0% - max(2px, 0.05em)), #000 25%, #0000 0); */
  background-repeat: no-repeat;
  filter:
    drop-shadow(min(-2px, -0.1em) 0)
    drop-shadow(0 min(-2px, -0.1em))
    drop-shadow(0 max(2px, 0.1em))
    drop-shadow(max(2px, 0.1em) 0)
    ;
  
  @media (width < 1200px) {
    font-size: 3vmin;
  }
  
  ul {
    margin: 0;
    padding: 0;
    list-style: "";
    display: grid;
    grid-template-columns: repeat(16, 1fr);
  }

  li {
    display: flex;
    position: relative;
    display: grid;
    grid: subgrid / subgrid;
    grid-column: 1 / 19;
    grid-template-columns: repeat(16, 1fr);
    z-index: 1;
    max-width: none;

    &:focus-within {
      input {
        background: #eef8ff;
        background: color-mix(in sRGB, var(--color) 25%, #fff 75%);
        color: #000;
      }

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

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

      input {
        background: #cfc;
        color: #000;
      }
    }
    
    &:nth-child(1) input:first-child { grid-column: 8; }
    &:nth-child(2) input:first-child { grid-column: 7; }
    &:nth-child(3) input:first-child { grid-column: 6; }
    &:nth-child(4) input:first-child { grid-column: 5; }
    &:nth-child(5) input:first-child { grid-column: 4; }
    &:nth-child(6) input:first-child { grid-column: 3; }
    &:nth-child(7) input:first-child { grid-column: 2; }
    &:nth-child(8) input:first-child { grid-column: 1; }

    input {
      font-size: 0.75em;
      margin: 0;
      padding: 0;
      aspect-ratio: 1;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 0;
      text-align: center;
      text-transform: uppercase;
      color: var(--fg);
      transition: background 0.25s;
      box-sizing: border-box;
      background: var(--bg);
      min-width: 0;
      height: auto;
      
      &[readonly]:last-child {
        grid-column: var(--p) / span var(--w);
        aspect-ratio: auto;
        border-inline-start: 1px solid var(--fg);
        box-shadow: none;
        background: var(--c) !important;
      }
      
      &.bb {
        border-block-end-color: var(--fg);
      }
      &.bt {
        border-block-start-color: var(--fg);
      }

      &[readonly] {
        --bg2: color-mix(in sRGB, var(--bg) 40%, #fff);
        border-inline: max(2px, 0.05em) solid var(--fg);
        background: light-dark(var(--color), var(--bg2)) !important;
        pointer-events: none;
        color: #000;
      }
      
      &:last-child {
        box-shadow: 2px 0 var(--fg);
      }
      
      :dir(rtl) &:last-child {
        box-shadow: -2px 0 var(--fg);
      }
      
      li:nth-child(3) & {
        border-block-end: max(2px, 0.05em) solid var(--fg);
        
        &::after {
          border-block-end: max(2px, 0.05em) solid var(--fg);
        }
      }
    }
  }
}

#scrim-processed,
.scrim {
  position: fixed;
  inset: 0;
  background: #0008;
  backdrop-filter: blur(0.5em);
  place-items:center;
  display: none;
  > 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;
    }
  }
}

#scrim-processed.visible,
:not(:has(:invalid)) .scrim {
  display: grid;
}