.login-page {
  --login-background: url('/ui/login/grand-chase-pc-mobile.png');
  background: #171a27;
}

.login-page::before, .login-background-video {
  position: fixed;
  inset: 0;
  filter: saturate(.76) contrast(.91);
  pointer-events: none;
}

.login-page::before {
  content: '';
  background: var(--login-background) center / cover no-repeat;
}

.login-background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

.login-background-video.is-playing { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .login-background-video.is-playing { visibility: hidden; }
}

.login-layout {
  position: fixed;
  inset: 0 0 auto;
  height: var(--login-viewport-height, 100dvh);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden !important;
  box-sizing: border-box;
  padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)) clamp(36px, 6.2vw, 180px);
  color: #f5f7fc;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.login-card {
  position: relative;
  flex: none;
  width: min(100%, 432px);
  margin-block: auto;
  padding-top: 110px;
  zoom: var(--login-card-scale, 1);
}

.login-card::before {
  content: '';
  position: absolute;
  inset: auto -8% -12px;
  height: 105px;
  background: radial-gradient(ellipse at 50% 38%, #101824c9 0%, #1c263485 42%, transparent 74%);
  filter: blur(9px);
  pointer-events: none;
}

.login-game-logo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 94%;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 5px #100a14c9);
  pointer-events: none;
}

.login-layout .login-controls {
  position: relative;
  inset: auto !important;
  width: 100% !important;
  height: 440px !important;
  background: url('/ui/login/panel.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 9px #0b132c63) drop-shadow(0 16px 22px #131b35a6);
}
.login-layout .login-controls:not(.is-register) {
  border-radius: 13px;
  background: linear-gradient(#22252e 0%, #2d3039 33%, #363945 34%, #282b35 100%);
  box-shadow: inset 0 0 0 2px #818794, inset 0 0 0 5px #464b57, inset 0 -9px 10px #151721;
}

.login-welcome, .glogin-register-title {
  position: absolute;
  inset: 88px 8% auto;
  display: grid;
  gap: 3px;
  text-align: center;
  color: #fff4d8;
  font-size: 17px;
  font-weight: 700;
}

.login-welcome { top: 84px; font-size: 22px; }
.login-welcome span { color: #e0e3ed; font-size: 15px; font-weight: 400; }
.login-controls .glogin-register-title { top: 87px; width: auto; }
.login-layout [hidden] { display: none !important; }

.login-controls [data-name="errorMsg"] {
  inset: 132px 8% auto !important;
  width: auto !important;
  height: 28px !important;
}
.login-controls [data-name="errorMsg"] .gt {
  justify-content: center !important;
  color: #ffb2a1 !important;
  font: 600 12px/1.15 'Segoe UI', sans-serif !important;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.login-layout .login-controls input.gw {
  inset: var(--field-y) 8% auto !important;
  width: 84% !important;
  height: 50px !important;
  padding: 0 17px;
  border-radius: 10px;
  background: var(--field-sprite) center / 100% 100% no-repeat !important;
  color: #f5f7fc;
  font: 500 16px 'Segoe UI', sans-serif;
  caret-color: #ffd46d;
}
.login-controls input::placeholder { color: #e0e3ed; opacity: 1; }
.login-controls [data-name="edit_id"] { --field-y: 160px; --field-sprite: url('/ui/login/field-id.png'); }
.login-controls [data-name="edit_passwd"] { --field-y: 208px; --field-sprite: url('/ui/login/field-password.png'); }
.login-layout .login-controls:not(.is-register) input.gw {
  height: 39px !important;
  border: 1px solid #626673;
  background: #242730 !important;
}
.login-layout .login-controls:not(.is-register) input.gw:focus {
  border-color: #ffc44d;
  outline: 1px solid #ffc44d;
  outline-offset: 0;
}
.login-controls.is-register [data-name="edit_id"] { --field-y: 134px; }
.login-controls.is-register [data-name="edit_passwd"] { --field-y: 187px; }
.login-controls [data-name="register_contact"] { --field-y: 240px; --field-sprite: url('/ui/login/field-extra.png'); }
.login-controls [data-name="register_nick"] { --field-y: 293px; --field-sprite: url('/ui/login/field-id.png'); }
.login-layout .login-controls [data-name="register_nick"] { padding-inline-end: 100px; }
.login-layout .login-controls input.gw:-webkit-autofill {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.login-controls [data-name="checkbox_save_id"] { inset: 257px calc(8% + 78px) auto auto !important; }
.login-controls [data-name="save_id"] {
  inset: 249px 8% auto auto !important;
  width: 74px !important;
  height: 30px !important;
  display: grid;
  align-items: center;
  background: none !important;
  color: #e1e5ef;
  font-size: 13px;
}

.login-layout [role="button"], .login-layout button, .login-screen .gsecurity-actions .gbtn {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 5px;
  border: 0;
  border-radius: 8px;
  background: var(--button-sprite, url('/ui/login/button-gray.png')) center / 100% 100% no-repeat !important;
  color: #f6f7fd;
  font: 700 13px 'Segoe UI', sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #101827;
}
.login-layout [role="button"] { opacity: 1 !important; }
.login-layout :is([role="button"], button):hover, .login-screen .gsecurity-actions .gbtn:hover { filter: brightness(1.12); }
.login-layout :is([role="button"], button):is(.locked, :disabled),
.login-screen .gsecurity-actions .gbtn:disabled { filter: brightness(.72); }
.login-layout :is(input, [role="button"], [role="checkbox"], button):focus-visible,
.login-screen .gsecurity :is(input, button):focus-visible {
  outline: 2px solid #ffc44d;
  outline-offset: 1px;
}

.login-controls [data-name="login_bt"] {
  --button-sprite: url('/ui/login/play.png');
  inset: 280px 11% auto !important;
  width: 78% !important;
  height: 69px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 29px;
  font-style: italic;
  text-shadow: 0 2px 3px #853004;
}
.login-controls [data-name="login_bt"]::after {
  content: '';
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 12px solid #fff4d8;
  border-right: 0;
  filter: drop-shadow(0 2px 2px #853004);
}
.login-controls [data-name="login_bt"]:active,
.login-controls.is-register [data-name="join_bt"]:active { --button-sprite: url('/ui/login/play-pressed.png'); }
.login-links {
  position: absolute;
  inset: 367px 5% auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.25fr;
  gap: 8px;
}
.login-layout .login-links .gw {
  position: static;
  width: 100% !important;
  height: 34px !important;
  background: linear-gradient(#575b6f, #3d4051) !important;
  font-weight: 600;
}
.login-controls.is-register [data-name="join_bt"], .login-controls .glogin-register-back {
  inset: 362px auto auto var(--action-left) !important;
  width: var(--action-width) !important;
  height: 37px !important;
}
.login-controls.is-register [data-name="join_bt"] {
  --button-sprite: url('/ui/login/play.png');
  --action-left: 40%;
  --action-width: 52%;
  height: 46px !important;
  top: 357px !important;
  font-size: 16px;
}
.login-controls .glogin-register-back { --action-left: 8%; --action-width: 31%; position: absolute; pointer-events: auto; }
.login-controls .glogin-register-check {
  position: absolute;
  inset: 301px calc(8% + 7px) auto auto;
  width: 86px;
  height: 34px;
  pointer-events: auto;
}
.login-controls .glogin-register-check.is-available { color: #b5f5a5; }
.login-controls .glogin-register-check:is(.is-taken, .has-error) { color: #ffb2a1; }

.login-shortcuts {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.login-shortcuts::before {
  content: '';
  position: absolute;
  inset: auto 8% -10px;
  height: 26px;
  background: radial-gradient(ellipse, #101824b8 0%, #15203466 45%, transparent 74%);
  filter: blur(4px);
  pointer-events: none;
}
.login-shortcuts .gw {
  position: relative;
  inset: auto !important;
  width: 108px !important;
  height: 42px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 15px;
}
.login-shortcuts [role="button"] {
  --shortcut-shadow: drop-shadow(0 4px 2px #080d1bbf) drop-shadow(0 6px 5px #18213473);
  filter: var(--shortcut-shadow);
}
.login-shortcuts [role="button"]:hover { filter: brightness(1.12) var(--shortcut-shadow); }
.login-shortcuts img { width: 25px; height: 23px; object-fit: contain; }
.login-shortcuts [data-name="button_home"] { --button-sprite: url('/ui/login/button-blue.png'); }

.login-screen { z-index: 5; pointer-events: none; overflow: visible; }
.login-screen .gmodal {
  --login-dim: rgb(0 0 0 / 45%);
  background: var(--login-dim);
  box-shadow: 0 0 0 200vmax var(--login-dim);
}
.login-screen .gsecurity {
  width: 460px;
  padding: 20px 30px 27px;
  border: 0;
  border-image: url('/ui/login/panel.png') 251 34 66 34 fill / 76px 18px 26px;
  background: none;
  filter: drop-shadow(0 12px 22px #070c1899);
}
.login-screen .gsecurity h2 {
  display: grid;
  place-items: center;
  min-height: 48px;
  margin: 0 0 15px;
  color: #fff4d8;
  text-align: center;
}
.login-screen .gsecurity-field input {
  min-height: 46px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  background: url('/ui/login/field-extra.png') center / 100% 100% no-repeat;
  font-size: 16px;
}
.login-screen .gsecurity-actions .gbtn {
  min-width: 110px;
  min-height: 42px;
  padding: 0 18px;
}
.login-screen .gsecurity-actions [type="submit"] {
  --button-sprite: url('/ui/login/play.png');
  min-width: 146px;
  padding-inline: 24px;
}
.login-screen .gsecurity-actions [type="submit"]:active {
  --button-sprite: url('/ui/login/play-pressed.png');
}
.login-page:not(:has(.login-screen .gmodal)) #gczoom { display: none; }
html.touch:has(.login-page), html.touch .login-page { touch-action: pan-y; }

@media (max-width: 760px) {
  .login-page::before { background-image: linear-gradient(#1216254d, #12162587), var(--login-background); background-position: 64% center; }
  .login-layout { align-items: center; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .login-card { padding-top: clamp(46px, 17vw, 90px); }
  .login-screen .gmodal:not(:has(.gmanual)) { transform: scale(var(--login-dialog-scale, 1)); }
}
@media (min-width: 761px) and (min-height: 720px) {
  .login-card { transform: translateY(-24px); }
}
@media (max-height: 570px) {
  .login-layout { padding-block: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom)); }
}