/* ==========================================================================
   Register Modal
   --------------------------------------------------------------------------
   Shared shell/open/backdrop/transition rules live in modal-common.css.
   This file keeps only register-specific layout, artwork, and form styling.
   ========================================================================== */

/* Register modal shell sizing and spacing */
.register-modal {
  z-index: 3200;
  padding: clamp(10px, 3vw, 28px);
}
@supports not (padding: clamp(0px, 0vw, 0px)) {
  .register-modal {
    padding: 28px;
  }
  @media (max-width: 933px) {
    .register-modal {
      padding: 3vw;
    }
  }
  @media (max-width: 333px) {
    .register-modal {
      padding: 10px;
    }
  }
}

.register-modal-stage {
  position: relative;
  width: min(88vw, 940px);
  margin: auto;
  --register-stage-pad-top: clamp(44px, 4.6vw, 68px);
  --register-title-width: clamp(220px, 33vw, 436px);
  --register-content-gap: clamp(8px, 1.2vw, 14px);
  --register-content-max-width: clamp(360px, 56vw, 560px);
  --register-field-max-width: clamp(300px, 50vw, 500px);
  --register-content-shift-x: clamp(60px, 7.5vw, 100px);
  --register-balance-shift-y: clamp(18px, 2.2vw, 28px);
  padding-top: var(--register-stage-pad-top);
}

@supports not (width: min(0px, 0vw)) {
  .register-modal-stage {
    width: 940px;
  }
  @media (max-width: 1068px) {
    .register-modal-stage {
      width: 88vw;
    }
  }
}

@supports not (width: clamp(0px, 0vw, 0px)) {
  .register-modal-stage {
    --register-stage-pad-top: 68px;
    --register-title-width: 436px;
    --register-content-gap: 14px;
    --register-content-max-width: 560px;
    --register-field-max-width: 500px;
    --register-content-shift-x: 100px;
    --register-balance-shift-y: 28px;
  }
  @media (max-width: 1478px) {
    .register-modal-stage {
      --register-stage-pad-top: 4.6vw;
    }
  }
  @media (max-width: 1333px) {
    .register-modal-stage {
      --register-content-shift-x: 7.5vw;
    }
  }
  @media (max-width: 1321px) {
    .register-modal-stage {
      --register-title-width: 33vw;
    }
  }
  @media (max-width: 1272px) {
    .register-modal-stage {
      --register-balance-shift-y: 2.2vw;
    }
  }
  @media (max-width: 1166px) {
    .register-modal-stage {
      --register-content-gap: 1.2vw;
    }
  }
  @media (max-width: 1000px) {
    .register-modal-stage {
      --register-content-max-width: 56vw;
      --register-field-max-width: 50vw;
    }
  }
  @media (max-width: 956px) {
    .register-modal-stage {
      --register-stage-pad-top: 44px;
    }
  }
  @media (max-width: 818px) {
    .register-modal-stage {
      --register-balance-shift-y: 18px;
    }
  }
  @media (max-width: 800px) {
    .register-modal-stage {
      --register-content-shift-x: 60px;
    }
  }
  @media (max-width: 666px) {
    .register-modal-stage {
      --register-title-width: 220px;
      --register-content-gap: 8px;
    }
  }
  @media (max-width: 642px) {
    .register-modal-stage {
      --register-content-max-width: 360px;
    }
  }
  @media (max-width: 600px) {
    .register-modal-stage {
      --register-field-max-width: 300px;
    }
  }
}

/* Inner paper/frame composition */
.register-modal-paper {
  position: relative;
  min-height: clamp(360px, 52vw, 560px);
}
@supports not (min-height: clamp(0px, 0vw, 0px)) {
  .register-modal-paper {
    min-height: 560px;
  }
  @media (max-width: 1076px) {
    .register-modal-paper {
      min-height: 52vw;
    }
  }
  @media (max-width: 692px) {
    .register-modal-paper {
      min-height: 360px;
    }
  }
}

.register-modal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

@supports not (inset: 0) {
  .register-modal-frame {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.register-modal-title {
  position: absolute;
  top: calc(var(--register-stage-pad-top) + var(--register-balance-shift-y));
  left: 50%;
  width: var(--register-title-width);
  transform: translate(-50%, -30%);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

/* Modal close control */
.register-modal-close {
  position: absolute;
  top: clamp(28px, 3.2vw, 42px);
  right: clamp(30px, 3.6vw, 46px);
  width: clamp(26px, 3.2vw, 48px);
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 6;
  transition: transform 170ms ease, filter 170ms ease;
}
@supports not (top: clamp(0px, 0vw, 0px)) {
  .register-modal-close {
    top: 42px;
    right: 46px;
    width: 48px;
  }
  @media (max-width: 1500px) {
    .register-modal-close {
      width: 3.2vw;
    }
  }
  @media (max-width: 1312px) {
    .register-modal-close {
      top: 3.2vw;
    }
  }
  @media (max-width: 1277px) {
    .register-modal-close {
      right: 3.6vw;
    }
  }
  @media (max-width: 875px) {
    .register-modal-close {
      top: 28px;
    }
  }
  @media (max-width: 833px) {
    .register-modal-close {
      right: 30px;
    }
  }
  @media (max-width: 812px) {
    .register-modal-close {
      width: 26px;
    }
  }
}

.register-modal-close img {
  display: block;
  width: 100%;
  height: auto;
}

.register-modal-character {
  position: absolute;
  left: clamp(-185px, -12vw, -90px);
  bottom: clamp(-12px, -0.8vw, 22px);
  width: clamp(255px, 39vw, 495px);
  pointer-events: none;
  z-index: 4;
  user-select: none;
}

@supports not (left: clamp(0px, 0vw, 0px)) {
  .register-modal-character {
    left: -90px;
    bottom: 22px;
    width: 495px;
  }
  @media (max-width: 1541px) {
    .register-modal-character {
      left: -185px;
    }
  }
  @media (max-width: 1500px) {
    .register-modal-character {
      bottom: -12px;
    }
  }
  @media (max-width: 1269px) {
    .register-modal-character {
      width: 39vw;
    }
  }
  @media (max-width: 750px) {
    .register-modal-character {
      left: -12vw;
    }
  }
  @media (max-width: 653px) {
    .register-modal-character {
      width: 255px;
    }
  }
  @media (max-width: -2750px) {
    .register-modal-character {
      bottom: -0.8vw;
    }
  }
}

/* Form content column */
.register-modal-content {
  position: absolute;
  left: 50%;
  right: auto;
  top: calc(
    clamp(
      56px,
      calc(var(--register-title-width) * 0.23 - var(--register-stage-pad-top) + var(--register-content-gap)),
      126px
    ) + var(--register-balance-shift-y)
  );
  transform: translateX(calc(-50% + var(--register-content-shift-x)));
  width: min(92%, var(--register-content-max-width));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Prompt", sans-serif;
  color: #121212;
}
@supports not (width: min(0px, 0vw)) {
  .register-modal-content {
    width: var(--register-content-max-width);
  }
  @media (max-width: 391px) {
    .register-modal-content {
      width: 92%;
    }
  }
}

.register-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(20px, 1vw, 32px);
}

@supports not (padding-top: clamp(0px, 0vw, 0px)) {
  .register-modal-form {
    padding-top: 32px;
  }
  @media (max-width: 3200px) {
    .register-modal-form {
      padding-top: 1vw;
    }
  }
  @media (max-width: 2000px) {
    .register-modal-form {
      padding-top: 20px;
    }
  }
}

/* Decorative text fields and inputs */
.register-modal-label {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #0f0f0f;
}
@supports not (font-size: clamp(0px, 0vw, 0px)) {
  .register-modal-label {
    font-size: 28px;
  }
  @media (max-width: 1750px) {
    .register-modal-label {
      font-size: 1.6vw;
    }
  }
  @media (max-width: 1125px) {
    .register-modal-label {
      font-size: 18px;
    }
  }
}

.register-modal-field {
  width: min(100%, var(--register-field-max-width));
  height: clamp(40px, 4.4vw, 56px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 clamp(8px, 0.9vw, 12px);
  padding: 0 clamp(12px, 1.5vw, 24px);
}

@supports not (padding: clamp(0px, 0vw, 0px)) {
  .register-modal-field {
    padding-top: 0;
    padding-right: 24px;
    padding-bottom: 0;
    padding-left: 24px;
  }
  @media (max-width: 1600px) {
    .register-modal-field {
      padding-right: 1.5vw;
      padding-left: 1.5vw;
    }
  }
  @media (max-width: 800px) {
    .register-modal-field {
      padding-right: 12px;
      padding-left: 12px;
    }
  }
}

@supports not (margin: clamp(0px, 0vw, 0px)) {
  .register-modal-field {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 12px;
    margin-left: 0;
  }
  @media (max-width: 1333px) {
    .register-modal-field {
      margin-bottom: 0.9vw;
    }
  }
  @media (max-width: 888px) {
    .register-modal-field {
      margin-bottom: 8px;
    }
  }
}

@supports not (width: min(0px, 0vw)) {
  .register-modal-field {
    width: var(--register-field-max-width);
  }
  @media (max-width: 300px) {
    .register-modal-field {
      width: 100%;
    }
  }
}

@supports not (height: clamp(0px, 0vw, 0px)) {
  .register-modal-field {
    height: 56px;
  }
  @media (max-width: 1272px) {
    .register-modal-field {
      height: 4.4vw;
    }
  }
  @media (max-width: 909px) {
    .register-modal-field {
      height: 40px;
    }
  }
}

.register-modal-field-username {
  background-image: url("../../assets/images/Username_Text_Field.png");
}

.register-modal-field-email {
  background-image: url("../../assets/images/Email_Text_Field.png");
}

.register-modal-field-password {
  background-image: url("../../assets/images/Password_Text_Field.png");
}

.register-modal-input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: "Prompt", sans-serif;
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 500;
  text-align: center;
  color: #7e7e7e;
  outline: none;
  letter-spacing: 0.025em;
}

@supports not (font-size: clamp(0px, 0vw, 0px)) {
  .register-modal-input {
    font-size: 20px;
  }
  @media (max-width: 1818px) {
    .register-modal-input {
      font-size: 1.1vw;
    }
  }
  @media (max-width: 1272px) {
    .register-modal-input {
      font-size: 14px;
    }
  }
}

.register-modal-input:-webkit-autofill,
.register-modal-input:-webkit-autofill:hover,
.register-modal-input:-webkit-autofill:focus,
.register-modal-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #0f0f0f;
  caret-color: #0f0f0f;
  background-color: transparent !important;
  transition: background-color 9999s ease-in-out 0s;
}

.register-modal-input::placeholder {
  color: #bababa;
  opacity: 1;
  text-transform: uppercase;
}

.register-modal-confirm-btn {
  width: clamp(220px, 28vw, 315px);
  margin-top: clamp(6px, 0.8vw, 10px);
}

@supports not (width: clamp(0px, 0vw, 0px)) {
  .register-modal-confirm-btn {
    width: 315px;
    margin-top: 10px;
  }
  @media (max-width: 1250px) {
    .register-modal-confirm-btn {
      margin-top: 0.8vw;
    }
  }
  @media (max-width: 1125px) {
    .register-modal-confirm-btn {
      width: 28vw;
    }
  }
  @media (max-width: 785px) {
    .register-modal-confirm-btn {
      width: 220px;
    }
  }
  @media (max-width: 750px) {
    .register-modal-confirm-btn {
      margin-top: 6px;
    }
  }
}

.register-modal-confirm-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* Secondary text link row */
.register-modal-links {
  margin-top: clamp(4px, 0.7vw, 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
}
@supports not (gap: clamp(0px, 0vw, 0px)) {
  .register-modal-links > * + * {
    margin-left: 18px !important;
  }
  @media (max-width: 1500px) {
    .register-modal-links > * + * {
      margin-left: 1.2vw !important;
    }
  }
  @media (max-width: 833px) {
    .register-modal-links > * + * {
      margin-left: 10px !important;
    }
  }
}
@supports not (margin-top: clamp(0px, 0vw, 0px)) {
  .register-modal-links {
    margin-top: 9px;
  }
  @media (max-width: 1285px) {
    .register-modal-links {
      margin-top: 0.7vw;
    }
  }
  @media (max-width: 571px) {
    .register-modal-links {
      margin-top: 4px;
    }
  }
}

.register-modal-link {
  border: 0;
  background: transparent;
  font-family: "Prompt", sans-serif;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 600;
  line-height: 1;
  color: #0f0f0f;
  padding: 0;
}

@supports not (font-size: clamp(0px, 0vw, 0px)) {
  .register-modal-link {
    font-size: 18px;
  }
  @media (max-width: 1800px) {
    .register-modal-link {
      font-size: 1vw;
    }
  }
  @media (max-width: 1300px) {
    .register-modal-link {
      font-size: 13px;
    }
  }
}

.register-modal-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.register-modal-link:hover,
.register-modal-link:focus-visible {
  color: #ff8f1f;
  outline: none;
}

/* Accessibility helper for visually hidden headings */
.register-modal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Lock body scroll while modal is open */
body.register-modal-open {
  overflow: hidden;
}

/* Desktop-medium refinements */
@media (max-width: 1200px) {
  .register-modal-stage {
    --register-content-gap: clamp(8px, 1.2vw, 14px);
    --register-content-max-width: clamp(330px, 58vw, 500px);
    --register-field-max-width: clamp(280px, 52vw, 450px);
  }
  @supports not (width: clamp(0px, 0vw, 0px)) {
    .register-modal-stage {
      --register-content-gap: 14px;
      --register-content-max-width: 500px;
      --register-field-max-width: 450px;
    }
    @media (max-width: 1166px) {
      .register-modal-stage {
        --register-content-gap: 1.2vw;
      }
    }
    @media (max-width: 865px) {
      .register-modal-stage {
        --register-field-max-width: 52vw;
      }
    }
    @media (max-width: 862px) {
      .register-modal-stage {
        --register-content-max-width: 58vw;
      }
    }
    @media (max-width: 666px) {
      .register-modal-stage {
        --register-content-gap: 8px;
      }
    }
    @media (max-width: 568px) {
      .register-modal-stage {
        --register-content-max-width: 330px;
      }
    }
    @media (max-width: 538px) {
      .register-modal-stage {
        --register-field-max-width: 280px;
      }
    }
  }
}

/* Tablet refinements */
@media (max-width: 900px) {
  .register-modal-stage {
    width: min(94vw, 680px);
    --register-stage-pad-top: clamp(36px, 5.8vw, 52px);
    --register-title-width: min(56vw, 300px);
    --register-content-gap: clamp(6px, 1.2vw, 10px);
    --register-content-max-width: clamp(260px, 70vw, 420px);
    --register-field-max-width: clamp(230px, 64vw, 370px);
    --register-content-shift-x: clamp(30px, 6vw, 60px);
    --register-balance-shift-y: clamp(14px, 2.8vw, 24px);
    padding-top: var(--register-stage-pad-top);
  }
  @supports not (width: min(0px, 0vw)) {
    .register-modal-stage {
      width: 680px;
      --register-title-width: 300px;
    }
    @media (max-width: 723px) {
      .register-modal-stage {
        width: 94vw;
      }
    }
    @media (max-width: 535px) {
      .register-modal-stage {
        --register-title-width: 56vw;
      }
    }
  }
  @supports not (width: clamp(0px, 0vw, 0px)) {
    .register-modal-stage {
      --register-stage-pad-top: 52px;
      --register-content-gap: 10px;
      --register-content-max-width: 420px;
      --register-field-max-width: 370px;
      --register-content-shift-x: 60px;
      --register-balance-shift-y: 24px;
    }
    @media (max-width: 1000px) {
      .register-modal-stage {
        --register-content-shift-x: 6vw;
      }
    }
    @media (max-width: 896px) {
      .register-modal-stage {
        --register-stage-pad-top: 5.8vw;
      }
    }
    @media (max-width: 857px) {
      .register-modal-stage {
        --register-balance-shift-y: 2.8vw;
      }
    }
    @media (max-width: 833px) {
      .register-modal-stage {
        --register-content-gap: 1.2vw;
      }
    }
    @media (max-width: 620px) {
      .register-modal-stage {
        --register-stage-pad-top: 36px;
      }
    }
    @media (max-width: 600px) {
      .register-modal-stage {
        --register-content-max-width: 70vw;
      }
    }
    @media (max-width: 578px) {
      .register-modal-stage {
        --register-field-max-width: 64vw;
      }
    }
    @media (max-width: 500px) {
      .register-modal-stage {
        --register-content-gap: 6px;
        --register-content-shift-x: 30px;
        --register-balance-shift-y: 14px;
      }
    }
    @media (max-width: 371px) {
      .register-modal-stage {
        --register-content-max-width: 260px;
      }
    }
    @media (max-width: 359px) {
      .register-modal-stage {
        --register-field-max-width: 230px;
      }
    }
  }

  .register-modal-close {
    width: clamp(20px, 3.5vw, 28px);
    top: clamp(26px, 4.8vw, 38px);
    right: clamp(18px, 3.6vw, 28px);
  }

  @supports not (width: clamp(0px, 0vw, 0px)) {
    .register-modal-close {
      width: 28px;
      top: 38px;
      right: 28px;
    }
    @media (max-width: 800px) {
      .register-modal-close {
        width: 3.5vw;
      }
    }
    @media (max-width: 791px) {
      .register-modal-close {
        top: 4.8vw;
      }
    }
    @media (max-width: 777px) {
      .register-modal-close {
        right: 3.6vw;
      }
    }
    @media (max-width: 571px) {
      .register-modal-close {
        width: 20px;
      }
    }
    @media (max-width: 541px) {
      .register-modal-close {
        top: 26px;
      }
    }
    @media (max-width: 500px) {
      .register-modal-close {
        right: 18px;
      }
    }
  }

  .register-modal-paper {
    min-height: clamp(320px, 68vw, 500px);
  }

  @supports not (min-height: clamp(0px, 0vw, 0px)) {
    .register-modal-paper {
      min-height: 500px;
    }
    @media (max-width: 735px) {
      .register-modal-paper {
        min-height: 68vw;
      }
    }
    @media (max-width: 470px) {
      .register-modal-paper {
        min-height: 320px;
      }
    }
  }

  .register-modal-title {
    transform: translate(-50%, -30%);
  }

  .register-modal-character {
    width: clamp(230px, 44vw, 390px);
    left: clamp(-150px, -12.5vw, -85px);
    bottom: clamp(-2px, 0.8vw, 24px);
  }

  @supports not (width: clamp(0px, 0vw, 0px)) {
    .register-modal-character {
      width: 390px;
      left: -85px;
      bottom: 24px;
    }
    @media (max-width: 3000px) {
      .register-modal-character {
        bottom: 0.8vw;
      }
    }
    @media (max-width: 1200px) {
      .register-modal-character {
        left: -150px;
      }
    }
    @media (max-width: 886px) {
      .register-modal-character {
        width: 44vw;
      }
    }
    @media (max-width: 680px) {
      .register-modal-character {
        left: -12.5vw;
      }
    }
    @media (max-width: 522px) {
      .register-modal-character {
        width: 230px;
      }
    }
    @media (max-width: -250px) {
      .register-modal-character {
        bottom: -2px;
      }
    }
  }

  .register-modal-content {
    left: 50%;
    right: auto;
    top: calc(
      clamp(
        50px,
        calc(var(--register-title-width) * 0.22 - var(--register-stage-pad-top) + var(--register-content-gap)),
        102px
      ) + var(--register-balance-shift-y)
    );
    transform: translateX(calc(-50% + var(--register-content-shift-x)));
  }

  .register-modal-label {
    margin-bottom: 4px;
  }

  .register-modal-field {
    margin-bottom: 10px;
  }
}

/* Mobile refinements */
@media (max-width: 700px) {
  .register-modal-stage {
    --register-title-width: min(62vw, 260px);
    --register-content-gap: clamp(6px, 1.8vw, 10px);
    --register-content-max-width: clamp(220px, 78vw, 330px);
    --register-field-max-width: clamp(190px, 72vw, 300px);
    --register-content-shift-x: 0px;
    --register-balance-shift-y: clamp(10px, 3.4vw, 18px);
  }
  @supports not (width: min(0px, 0vw)) {
    .register-modal-stage {
      --register-title-width: 260px;
    }
    @media (max-width: 419px) {
      .register-modal-stage {
        --register-title-width: 62vw;
      }
    }
  }
  @supports not (width: clamp(0px, 0vw, 0px)) {
    .register-modal-stage {
      --register-content-gap: 10px;
      --register-content-max-width: 330px;
      --register-field-max-width: 300px;
      --register-balance-shift-y: 18px;
    }
    @media (max-width: 555px) {
      .register-modal-stage {
        --register-content-gap: 1.8vw;
      }
    }
    @media (max-width: 529px) {
      .register-modal-stage {
        --register-balance-shift-y: 3.4vw;
      }
    }
    @media (max-width: 423px) {
      .register-modal-stage {
        --register-content-max-width: 78vw;
      }
    }
    @media (max-width: 416px) {
      .register-modal-stage {
        --register-field-max-width: 72vw;
      }
    }
    @media (max-width: 333px) {
      .register-modal-stage {
        --register-content-gap: 6px;
      }
    }
    @media (max-width: 294px) {
      .register-modal-stage {
        --register-balance-shift-y: 10px;
      }
    }
    @media (max-width: 282px) {
      .register-modal-stage {
        --register-content-max-width: 220px;
      }
    }
    @media (max-width: 263px) {
      .register-modal-stage {
        --register-field-max-width: 190px;
      }
    }
  }

  .register-modal-paper {
    min-height: clamp(380px, 100vw, 440px);
  }

  @supports not (min-height: clamp(0px, 0vw, 0px)) {
    .register-modal-paper {
      min-height: 440px;
    }
    @media (max-width: 440px) {
      .register-modal-paper {
        min-height: 100vw;
      }
    }
    @media (max-width: 380px) {
      .register-modal-paper {
        min-height: 380px;
      }
    }
  }

  .register-modal-character {
    display: none;
  }

  .register-modal-content {
    top: calc(
      clamp(
        40px,
        calc(var(--register-title-width) * 0.2 - var(--register-stage-pad-top) + var(--register-content-gap)),
        84px
      ) + var(--register-balance-shift-y)
    );
  }

  .register-modal-form {
    padding-top: clamp(16px, 3vw, 24px);
  }

  @supports not (padding-top: clamp(0px, 0vw, 0px)) {
    .register-modal-form {
      padding-top: 24px;
    }
    @media (max-width: 800px) {
      .register-modal-form {
        padding-top: 3vw;
      }
    }
    @media (max-width: 533px) {
      .register-modal-form {
        padding-top: 16px;
      }
    }
  }

  .register-modal-label {
    font-size: clamp(17px, 4.2vw, 24px);
  }

  @supports not (font-size: clamp(0px, 0vw, 0px)) {
    .register-modal-label {
      font-size: 24px;
    }
    @media (max-width: 571px) {
      .register-modal-label {
        font-size: 4.2vw;
      }
    }
    @media (max-width: 404px) {
      .register-modal-label {
        font-size: 17px;
      }
    }
  }

  .register-modal-input {
    font-size: clamp(15px, 3.8vw, 20px);
  }

  @supports not (font-size: clamp(0px, 0vw, 0px)) {
    .register-modal-input {
      font-size: 20px;
    }
    @media (max-width: 526px) {
      .register-modal-input {
        font-size: 3.8vw;
      }
    }
    @media (max-width: 394px) {
      .register-modal-input {
        font-size: 15px;
      }
    }
  }

  .register-modal-links {
    gap: clamp(10px, 2.8vw, 18px);
  }

  @supports not (gap: clamp(0px, 0vw, 0px)) {
    .register-modal-links > * + * {
      margin-left: 18px !important;
    }
    @media (max-width: 642px) {
      .register-modal-links > * + * {
        margin-left: 2.8vw !important;
      }
    }
    @media (max-width: 357px) {
      .register-modal-links > * + * {
        margin-left: 10px !important;
      }
    }
  }
}

/* On short screens, start modal at top so content can scroll to the bottom */
@media (max-height: 860px) {
  .register-modal {
    place-items: start center;
  }

  .register-modal-stage {
    margin: 0 auto;
  }
}