.nickname-overlay {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(70% 50% at 50% 12%, rgba(45, 130, 155, .22), transparent 65%),
    rgba(1, 6, 9, .82);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nickname-card {
  width: min(370px, calc(100vw - 32px));
  border: 1px solid rgba(160, 240, 255, .32);
  border-radius: 22px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 32%),
    linear-gradient(180deg, rgba(14, 36, 43, .94), rgba(3, 11, 15, .97));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .38),
    inset 0 -2px 8px rgba(0, 0, 0, .48),
    0 24px 70px rgba(0, 0, 0, .65),
    0 0 28px rgba(75, 220, 245, .14);
}
.nickname-kicker {
  display: block;
  color: #66e6fb;
  font: 800 9px var(--ref-font-data);
  letter-spacing: .16em;
  text-shadow: 0 0 10px rgba(90, 230, 255, .4);
}
.nickname-card h2 {
  margin: 6px 0 8px;
  color: #f4ffff;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .42), 0 3px 10px rgba(0, 0, 0, .8);
}
.nickname-card > p {
  margin: 0 0 14px;
  color: #a8c7d0;
  font-size: 12px;
  line-height: 1.6;
}
.nickname-card label {
  display: grid;
  gap: 6px;
}
.nickname-card label > span {
  color: #bfeef6;
  font-size: 11px;
  font-weight: 800;
}
.nickname-card input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  border: 1px solid rgba(120, 225, 240, .34);
  border-radius: 11px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(2, 12, 17, .78), rgba(12, 34, 41, .52));
  color: #f1ffff;
  font: 700 15px var(--ref-font-data);
  outline: none;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .68), inset 0 1px rgba(255, 255, 255, .08);
}
.nickname-card input:focus {
  border-color: rgba(120, 238, 255, .72);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .68), 0 0 0 3px rgba(80, 220, 245, .14), 0 0 18px rgba(80, 220, 245, .22);
}
.nickname-error {
  min-height: 16px;
  margin: 8px 0 4px !important;
  color: #ff9387 !important;
  font-size: 11px !important;
}
.nickname-card [data-nickname-submit] {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(150, 245, 255, .5);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(58, 190, 210, .72), rgba(14, 72, 92, .78));
  color: #f3ffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .24), 0 2px 4px rgba(0, 0, 0, .8);
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), inset 0 -3px 7px rgba(0, 0, 0, .4), 0 7px 18px rgba(0, 0, 0, .4);
}
.nickname-card [data-nickname-submit]:disabled { opacity: .55; }