@font-face {
  font-family: "Noto Serif Thai Login";
  src: url("../assets/ui/lobby-v3/fonts/NotoSerifThai.ttf") format("truetype");
  font-display: swap;
}

#loading.entry-shell[data-screen="login"] {
  --login-amethyst: #24102f;
  --login-plum: #120a1b;
  --login-ruby: #bd1537;
  --login-ruby-light: #f15467;
  --login-ivory: #fff0dc;
  --login-muted: #d6c2d6;
  padding: 0;
  color: var(--login-ivory);
  background:
    linear-gradient(90deg, #07060bd9 0%, #100a1770 35%, #0a081033 68%, #08091055 100%),
    url("../assets/login-realistic-world-v2.9a9777514098.webp?v=98a17ab02de8529f") center / cover no-repeat #090910;
}

#loading[data-screen="login"] .entry-atmosphere,
#loading[data-screen="login"] .entry-header,
#loading[data-screen="login"] .entry-steps,
#loading[data-screen="login"] .entry-chapter {
  display: none;
}

#loading[data-screen="login"] .entry-login {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 18px clamp(22px, 4vw, 70px);
}

#loading[data-screen="login"] .entry-login-panel {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: min(570px, 41vw);
  min-height: min(860px, calc(100dvh - 32px));
  max-height: calc(100dvh - 18px);
  margin: 0;
  overflow-y: auto;
  padding: clamp(128px, 16vh, 154px) clamp(70px, 6.2vw, 88px) clamp(118px, 14vh, 136px);
  background: url("../assets/ui/login-portal-frame-v1.599c80acde00.webp?v=ed29b361cf05c571") center / 100% 100% no-repeat;
  filter: drop-shadow(0 16px 25px #05030bd9);
  scrollbar-color: #8d647f #180d20;
  scrollbar-width: thin;
}

#loading[data-screen="login"] .entry-story {
  width: 100%;
  margin: 0 0 15px;
  text-align: center;
  text-shadow: 0 2px 8px #09040c;
}

#loading[data-screen="login"] .entry-login-brand {
  margin: 0;
  color: #f7e7ce;
  font: 500 clamp(25px, 2.05vw, 34px) / 1.5 "Noto Serif Thai Login", "Noto Sans Thai", Tahoma, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 2px 2px #09040c, 0 0 16px #e8a3ca55;
  overflow-wrap: anywhere;
}

#loading[data-screen="login"] .entry-login-card.pui-entry {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--login-ivory);
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}

#loading[data-screen="login"] .entry-login-card.pui-entry::before,
#loading[data-screen="login"] .entry-login-card.pui-entry::after {
  display: none;
}

#loading[data-screen="login"] .entry-login-card h2 {
  position: relative;
  margin: 0 0 14px;
  padding-left: 12px;
  color: var(--login-ivory);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}

#loading[data-screen="login"] .entry-login-card h2::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff687a, #a90030);
  box-shadow: 0 0 9px #f92e55a6;
  content: "";
}

#loading[data-screen="login"] #auth-form > .entry-label,
#loading[data-screen="login"] #auth-confirm-field > .entry-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#loading[data-screen="login"] .entry-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #a987a6;
  border-radius: 9px;
  background: linear-gradient(110deg, #100a19ef, #29162ee8);
  box-shadow: inset 0 1px #fff1f313, 0 3px 10px #05030c55;
}

#loading[data-screen="login"] .entry-input-icon {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: #d9b9d2;
  border-right: 1px solid #89638180;
  background: #38203a88;
  font-size: 0;
}

#loading[data-screen="login"] .entry-input-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#loading[data-screen="login"] .entry-input-wrap input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 10px 13px;
  border: 0;
  border-radius: 0;
  outline-offset: -3px;
  background: transparent;
  box-shadow: none;
  color: #fff4e8;
  caret-color: #ff8594;
  font-size: 15px;
}

#loading[data-screen="login"] input::placeholder {
  color: #d7c5d5;
  opacity: 1;
}

#loading[data-screen="login"] #auth-password-toggle {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #e0c9dc;
  cursor: pointer;
}

#loading[data-screen="login"] #auth-password-toggle:hover {
  color: #fff0dc;
}

#auth-password-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#loading[data-screen="login"] .entry-field-help {
  display: none;
  margin: 5px 3px 0;
  color: #ddc7d9;
  font-size: 10px;
  line-height: 1.6;
}

#loading[data-screen="login"][data-auth-mode="register"] .entry-field-help {
  display: block;
}

#loading[data-screen="login"] #auth-confirm {
  min-height: 50px;
  padding: 10px 13px;
  border: 1px solid #a987a6;
  border-radius: 8px;
  background: #150c1e;
  color: var(--login-ivory);
}

#loading[data-screen="login"] .entry-error {
  min-height: 18px;
  margin: 7px 0 2px;
  color: #ff9eaa !important;
  font-size: 12px !important;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#loading[data-screen="login"] #auth-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  margin-top: 9px;
  padding: 10px 18px;
  border: 1px solid #ff889a;
  border-radius: 9px;
  background: linear-gradient(110deg, #a5092c, #d32342 52%, #8f0929);
  box-shadow: inset 0 1px #ffe5df55, inset 0 -3px #57041b70, 0 7px 17px #d214423b;
  color: #fff8ef;
  font-size: 21px;
  font-weight: 700;
  text-shadow: 0 1px 2px #4a0015;
  transition: filter 140ms ease-out, transform 140ms ease-out, box-shadow 140ms ease-out;
}

#loading[data-screen="login"] #auth-submit:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: inset 0 1px #ffe5df66, 0 9px 22px #e2224d66;
}

#loading[data-screen="login"] #auth-submit:active:not(:disabled) {
  transform: translateY(1px);
}

#loading[data-screen="login"] .entry-login-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin: 12px 0 0;
}

#loading[data-screen="login"] .entry-login-actions button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid #9d7397;
  border-radius: 8px;
  background: linear-gradient(110deg, #25122f, #180d22);
  color: #f5e7ec;
  font-size: 14px;
  font-weight: 600;
  transition: background 140ms ease-out, border-color 140ms ease-out, filter 140ms ease-out;
}

#loading[data-screen="login"] .entry-login-actions #entry-register-tab,
#loading[data-screen="login"] .entry-login-actions #entry-login-tab {
  border-color: #bd8799;
  background: linear-gradient(110deg, #3b1736, #251126);
}

#loading[data-screen="login"] .entry-login-actions #entry-guest {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: var(--login-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #cba3c488;
  text-underline-offset: 3px;
}

#loading[data-screen="login"] .entry-login-actions button:hover:not(:disabled) {
  border-color: #e1b8cf;
  filter: brightness(1.12);
}

#loading[data-screen="login"] .entry-login-actions #entry-guest:hover:not(:disabled) {
  color: #fff0dc;
}

#loading[data-screen="login"] #auth-retry {
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  border: 1px solid #b88da9;
  border-radius: 8px;
  background: #26132e;
  color: #fff0dc;
  cursor: pointer;
}

#loading[data-screen="login"] .entry-guest-note {
  margin: 7px 0 0;
  color: #d1bfd1;
  font-size: 10px;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

#loading[data-screen="login"] button:focus-visible,
#loading[data-screen="login"] input:focus-visible {
  outline: 2px solid #ffb7c5;
  outline-offset: 3px;
}

#loading[data-screen="login"] button:disabled,
#loading[data-screen="login"] input:disabled {
  cursor: wait;
  opacity: 0.58;
}

@media (min-width: 1800px) {
  #loading[data-screen="login"] .entry-login-panel {
    width: 570px;
  }
}

@media (max-width: 1000px) and (min-width: 681px) {
  #loading[data-screen="login"] .entry-login-panel {
    width: min(460px, 43vw);
    padding-right: clamp(58px, 6vw, 72px);
    padding-left: clamp(58px, 6vw, 72px);
  }
}

@media (max-height: 680px) and (min-width: 681px) {
  #loading[data-screen="login"] .entry-login {
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #loading[data-screen="login"] .entry-login-panel {
    width: min(500px, 46vw);
    min-height: 640px;
    max-height: none;
    padding-top: 122px;
    padding-bottom: 110px;
  }
}

@media (max-width: 680px) {
  #loading.entry-shell[data-screen="login"] {
    background:
      linear-gradient(180deg, #07060b99, #09070dce 52%, #09070ef2),
      url("../assets/login-realistic-world-v2.9a9777514098.webp?v=98a17ab02de8529f") 68% center / cover no-repeat #090910;
  }

  #loading[data-screen="login"] .entry-login {
    justify-content: center;
    min-height: 100dvh;
    padding: 8px 10px;
  }

  #loading[data-screen="login"] .entry-login-panel {
    width: min(500px, 100%);
    min-height: min(830px, calc(100dvh - 16px));
    max-height: none;
    margin: auto;
    padding: clamp(116px, 15vh, 142px) clamp(52px, 13vw, 72px) 112px;
    background-size: 100% 100%;
  }

  #loading[data-screen="login"] .entry-login-brand {
    font-size: clamp(22px, 7vw, 30px);
  }

  #loading[data-screen="login"] .entry-login-card h2 {
    font-size: 18px;
  }

  #loading[data-screen="login"] .entry-input-wrap {
    min-height: 50px;
  }

  #loading[data-screen="login"] .entry-input-wrap input {
    min-height: 48px;
    padding-right: 8px;
    padding-left: 10px;
    font-size: 14px;
  }

  #loading[data-screen="login"] #auth-submit {
    min-height: 54px;
    font-size: 19px;
  }
}

@media (max-width: 370px) {
  #loading[data-screen="login"] .entry-login-panel {
    padding-right: 46px;
    padding-left: 46px;
  }

  #loading[data-screen="login"] .entry-login-brand {
    font-size: 21px;
  }
}

/* 2026-10-18 fit the form to the frame (user "แก้ให้มันพอดีกับรูป มันบัค"): the frame image is stretched to the panel
   (background 100% 100%), so its inner purple panel always spans 17.8%-82.1% of the panel width (measured on
   login-portal-frame-v1, 1024x1536). The old fixed px side padding let the inputs and buttons run onto the pillars at many
   widths; the side inset is now a share of the panel's own width (container units), and the content sits in the middle of
   the inner panel without ever being pushed above its top. */
#loading[data-screen="login"] .entry-login-panel {
  container-type: inline-size;
  justify-content: safe center;
  padding-right: 0;
  padding-left: 0;
}

#loading[data-screen="login"] .entry-login-panel > .entry-story,
#loading[data-screen="login"] .entry-login-panel > .entry-login-card {
  width: auto;
  margin-right: 21.5cqw;
  margin-left: 21.5cqw;
}

/* Guest entry (user "ล็อคอินแบบ เกส ก็ทำให้ชัดๆด้วย"): a real button in the frame's gold instead of a small underlined link. */
#loading[data-screen="login"] .entry-login-actions #entry-guest {
  min-height: 46px;
  margin-top: 8px;
  border: 1px solid #d6ae63;
  background: linear-gradient(110deg, #3a2614, #22160d 55%, #3a2614);
  box-shadow: inset 0 1px #ffe6b23a, 0 4px 12px #05030c66;
  color: #ffe7bf;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 2px #1a0d02;
}

#loading[data-screen="login"] .entry-login-actions #entry-guest:hover:not(:disabled) {
  border-color: #f3d38f;
  color: #fff3dc;
}

#loading[data-screen="login"] .entry-guest-note {
  color: #e6d6e3;
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  #loading[data-screen="login"] #auth-submit,
  #loading[data-screen="login"] .entry-login-actions button {
    transition: none;
  }
}