#game-market-register-view {
  width: 100%;
  max-width: 44rem;
  max-height: calc(100lvh - 0.8rem);

  &[shown] {
    transition: none;
  }

  @media (width >= 680px) and (height >= 620px) {
    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }


  button[action="continue"] {
    &:not(:disabled) {
      color: var(--color-blue);
    }
  }


  > section {
    &.inputs {
      > main {
        position: relative;
        padding-block: 3.2rem;
        padding-inline: 1.6rem;
        display: grid;
        grid-template-columns: auto 1fr;
        row-gap: 1.6rem;
        align-content: start;


        > .field {
          grid-column: 1 / -1;
          display: grid;
          grid-template-columns: subgrid;
          align-items: center;

          &:is(main[inert] *) {
            opacity: 0.5;
          }


          > .label {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;

            &:has(span + input) {
              span {
                justify-self: end;
                align-self: center;
                border: 1px solid var(--toolbar-border-color);
                border-right: none;
                border-top-left-radius: 100vmax;
                border-bottom-left-radius: 100vmax;
                padding-left: 1.6rem;
                padding-right: 0.8rem;
                width: fit-content;
                height: 100%;
                align-content: center;
                font-weight: 600;
                background: var(--toolbar-background-color);
              }


              input {
                border: 1px solid var(--toolbar-border-color);
                border-top-right-radius: 100vmax;
                border-bottom-right-radius: 100vmax;
                padding-left: 0.8rem;
                padding-right: 1.6rem;
                height: 3.6rem;

                &[name="iban"] {
                  cursor: text;
                }
              }
            }

            &:has(input + span) {
              input {
                justify-self: end;
                align-self: center;
                margin-right: 0.8rem;

                &[type="checkbox"] {
                  appearance: none;
                  position: relative;
                  border: 1px solid var(--toolbar-border-color);
                  border-radius: 0.8rem;
                  aspect-ratio: 1 / 1;
                  width: 2.4rem;
                  height: auto;
                  overflow: hidden;

                  &:checked {
                    &::before {
                      content: "";
                      box-sizing: border-box;
                      border-radius: 100vmax;
                      position: absolute;
                      inset: 0.2rem;
                      width: 1.8rem;
                      height: 1.8rem;
                      border: 2px solid black;
                      display: block;
                      background: var(--toolbar-border-color);
                    }
                  }
                }
              }


              span {
                border-left: 1px solid transparent;
                padding-left: 0.8rem;
                padding-right: 1.6rem;
                word-break: normal;
                overflow-wrap: break-word;
                hyphens: auto;
              }
            }
          }


          > p {
            grid-column: 2 / 3;
            margin-top: 0.8rem;
            border-left: 1px solid transparent;
            padding-left: 0.8rem;
            padding-right: 1.6rem;
            font-size: 1.3rem;
            line-height: 1.3;
            word-break: normal;
            overflow-wrap: break-word;
            hyphens: auto;
            color: var(--color-gray);
          }
        }


        > hr {
          border: none;
        }


        > button[action="continue"] {
          grid-column: 1 / -1;
          justify-self: center;
        }
      }


      .done {
        position: absolute;
        place-self: center;
        rotate: -3deg;
        box-shadow: 0 0 1.2rem black;
        border: 0.2rem solid rgba(0, 0, 0, 0.333);
        border-radius: 1.2rem;
        padding-block: 1.2rem;
        padding-inline: 1.8rem;
        background: oklch(from rgb(0 139 65) l c h / 0.333);
        backdrop-filter: blur(0.666rem);
        text-align: center;

        &[hidden] {
          display: none;
        }


        h4 {
          font-size: 2.2rem;
        }


        span {

        }
      }
    }


    &:is(.confirmation, .finalization) {
      > main {
        display: grid;
        align-content: safe center;
        justify-items: center;
        gap: 1.6rem;


        > svg {
          width: 9.6rem;
          height: auto;
        }


        > h2 {
          font-size: 1.8rem;
          font-weight: 600;
        }


        > hr {
          border: none;
        }


        > .label {
          display: grid;
          grid-template-columns: auto auto;


          span {
            justify-self: end;
            align-self: center;
            border: 1px solid var(--toolbar-border-color);
            border-right: none;
            border-top-left-radius: 100vmax;
            border-bottom-left-radius: 100vmax;
            padding-left: 1.6rem;
            padding-right: 0.8rem;
            width: fit-content;
            height: 100%;
            align-content: center;
            font-weight: 600;
            background: var(--toolbar-background-color);
          }


          input {
            border: 1px solid var(--toolbar-border-color);
            border-top-right-radius: 100vmax;
            border-bottom-right-radius: 100vmax;
            padding-left: 0.8rem;
            padding-right: 1.6rem;
            height: 3.6rem;
          }
        }




        > p {
          padding-inline: 1.6rem;
          text-align: center;
        }
      }


      &:is(.confirmation) {

      }


      &:is(.finalization) {

      }
    }


    > .\@error {
      padding-top: 3.2rem;
      padding-bottom: 1.6rem;
    }
  }
}