.game-main {
  h1, h2 {
    font-weight: 400;
  }

  h2 {
    margin-top: 0;
    margin: 0;
    font-size: 1.5em;
  }

  ol>li,
  p {
    font-size: 1.25em;
    line-height: 1.35;
    max-width: 65ch;
    font-weight: 300;

    a {
      font-weight: 300;
    }
  }

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

  article {
    font-size: 1vmin;
    width: 80em;
    height: 80em;
    position: relative;
    margin-block: 6em;
  }

  .terms {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 72.75%;
    width: calc(75% - 12px);
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1em;
    font-size: 2em;
    box-sizing: border-box;
    padding: 1em;
    text-wrap: balance;
    text-align: center;
    z-index: 1;
    background: var(--bg);

    label {
      font-size: 1.25em;
      font-weight: 300;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: "";
    border: 4px solid var(--fg);
    print-color-adjust: exact;
    background: 
  /*     radial-gradient(farthest-side, var(--bg) calc(75% - 4px), var(--fg) calc(75% - 3px) 75%, #0000 calc(75% + 1px)), */
      radial-gradient(farthest-side, var(--bg) calc(75% - 4px),  var(--fg) calc(75% - 3px) 75%, #0000 calc(75% + 1px)),
      repeating-conic-gradient(#0000 0 calc(100% / 15 - 0.25%), var(--fg) 0 calc(100% / 15)),
      var(--bg);
    border-radius: 50%;
    position: absolute;
    inset: 0;
    overflow: hidden;

    li {
      font-size: 1em;
      position: absolute;
      inset: 0;
      max-width: 100%;
      line-height: 1;
      --n: calc(sibling-index() - 1);
      
      &:not([data-n="0"])::before {
        content: attr(data-n) / "";
        position: absolute;
        font-size: 2em;
        text-align: center;
        pointer-events: none;
      }
      
      &[data-n="1"]::before { left: 51%; top:  1%; }
      &[data-n="2"]::before { left: 86%; top: 18%; }
      &[data-n="3"]::before { left: 90%; top: 74%; }
      &[data-n="4"]::before { left: 19%; top: 86%; }
      &[data-n="5"]::before { left:  1%; top: 51%; }
      &[data-n="6"]::before { left:  4%; top: 32%; }

      input {
        box-sizing: border-box;
        position: absolute;
        inset: 0;
        border: 0;
        background: #f000;
        mask:
          conic-gradient(from calc(var(--n) * 24deg), #000 calc(100% / 15), #0000 0)
  /*         ,
          radial-gradient(farthest-side, #fff calc(75% - 4px), #000 calc(75% - 3px) 75%, #0000 calc(75% + 1px)) */
          ;
        padding-left: var(--l);
        padding-bottom: var(--b);
        padding-top: var(--t);
        padding-right: var(--r);
        text-align: center;
        font-size: 3em;
        color: var(--fg);
        text-transform: uppercase;
        height: 100%;
        width: 100%;

        &:focus {
          background: color-mix(in sRGB, var(--fg) 15%, #0000 85%);
        }
      }

      &:nth-child(1)  { --n: 0;  --l:  4.7em; --r:  0.0em; --b: 23.0em; --t:  0.0em; clip-path:polygon(50% 50%, 72% 0, 50% 0) }
      &:nth-child(2)  { --n: 1;  --l: 13.5em; --r:  0.0em; --b: 19.0em; --t:  0.0em; clip-path:polygon(50% 50%, 100% 5%, 72% 0) }
      &:nth-child(3)  { --n: 2;  --l: 20.0em; --r:  0.0em; --b: 11.5em; --t:  0.0em; clip-path:polygon(50% 50%, 100% 33%, 100% 5%) }
      &:nth-child(4)  { --n: 3;  --l: 23.3em; --r:  0.0em; --b:  2.3em; --t:  0.0em; clip-path:polygon(50% 50%, 100% 55%, 100% 33%) }
      &:nth-child(5)  { --n: 4;  --l: 22.3em; --r:  0.0em; --b:  0.0em; --t:  7.0em; clip-path:polygon(50% 50%, 100% 78%, 100% 55%) }
      &:nth-child(6)  { --n: 5;  --l: 17.6em; --r:  0.0em; --b:  0.0em; --t: 15.2em; clip-path:polygon(50% 50%, 87% 100%, 100% 78%) }
      &:nth-child(7)  { --n: 6;  --l:  9.7em; --r:  0.0em; --b:  0.0em; --t: 21.0em; clip-path:polygon(50% 50%, 61% 100%, 87% 100%) }
      &:nth-child(8)  { --n: 7;  --l:  0.2em; --r:  0.0em; --b:  0.0em; --t: 23.3em; clip-path:polygon(50% 50%, 40% 100%, 61% 100%) }
      &:nth-child(9)  { --n: 8;  --l:  0.0em; --r:  9.3em; --b:  0.0em; --t: 21.2em; clip-path:polygon(50% 50%, 14% 100%, 40% 100%) }
      &:nth-child(10) { --n: 9;  --l:  0.0em; --r: 17.3em; --b:  0.0em; --t: 15.6em; clip-path:polygon(50% 50%, 0 79.5%, 14% 100%) }
      &:nth-child(11) { --n: 10; --l:  0.0em; --r: 22.1em; --b:  0.0em; --t:  7.5em; clip-path:polygon(50% 50%, 0 56%, 0 79.5%) }
      &:nth-child(12) { --n: 11; --l:  0.0em; --r: 23.3em; --b:  2.0em; --t:  0.0em; clip-path:polygon(50% 50%, 0 34.5%, 0 56%) }
      &:nth-child(13) { --n: 12; --l:  0.0em; --r: 20.3em; --b: 11.4em; --t:  0.0em; clip-path:polygon(50% 50%, 0 6%, 0 34.5%) }
      &:nth-child(14) { --n: 13; --l:  0.0em; --r: 13.7em; --b: 18.8em; --t:  0.0em; clip-path:polygon(50% 50%,27% 0, 0 6%) }
      &:nth-child(15) { --n: 14; --l:  0.0em; --r:  5.0em; --b: 22.7em; --t:  0.0em; clip-path:polygon(50% 50%, 50% 0%, 27% 0) }
    }
  }
}

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

  > 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;
    }
  }
}

body:not(:has(:invalid)) #scrim-good {
  display: grid
}