/* Thiên Mệnh live login — approved cinematic concept, isolated from shared UI. */
.login-page {
  background: #120807;
  color: #fff8ed;
}

.login-shell {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 32vw);
  background: #120807 url("login/war-battlefield-v1.jpg") center / cover fixed no-repeat;
}

.login-visual {
  min-height: 100svh;
  padding: 0;
  background: transparent;
}

.login-visual::before {
  z-index: -3;
  opacity: 1;
  background: linear-gradient(90deg, rgba(8, 4, 4, .2) 0%, rgba(8, 4, 4, .08) 56%, rgba(6, 4, 5, .72) 100%),
              linear-gradient(0deg, rgba(7, 4, 4, .78) 0%, transparent 42%);
  mask-image: none;
}

.login-atmosphere {
  z-index: -2;
  background: radial-gradient(circle at 45% 28%, rgba(236, 117, 36, .11), transparent 34%);
}

.hero-stage {
  z-index: 1;
  inset: auto 1% 0 0;
  height: min(94vh, 920px);
  opacity: 1;
}

.hero-figure {
  bottom: -7%;
  width: min(38vw, 610px);
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .82));
}

.hero-wei {
  right: auto;
  left: 27%;
  z-index: 2;
  transform: scaleX(-1);
}

.hero-shu {
  right: auto;
  left: 57%;
  z-index: 3;
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .82));
}

.hero-wu {
  right: auto;
  left: -3%;
  z-index: 1;
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .82));
}

.login-panel {
  min-height: 100svh;
  border-left: 1px solid rgba(255, 203, 130, .25);
  background: linear-gradient(150deg, rgba(27, 17, 18, .91), rgba(8, 7, 9, .97));
  box-shadow: -28px 0 80px rgba(0, 0, 0, .4);
  backdrop-filter: blur(20px);
}

.login-panel-top { padding: clamp(18px, 2vw, 30px); }

.login-locale-form select {
  border-color: rgba(255, 203, 130, .2);
  background-color: rgba(20, 14, 16, .76);
  color: #f3e9df;
}

.login-panel-content {
  position: relative;
  width: min(420px, calc(100% - 46px));
  padding: 28px 0 42px;
}

.login-card-mark {
  position: absolute;
  top: -30px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(238, 167, 76, .68);
  border-radius: 13px;
  background: #171011;
  transform: rotate(45deg);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .4);
}

.login-card-mark span {
  color: #f0ad54;
  font-family: Georgia, serif;
  font-size: .68rem;
  font-weight: 900;
  transform: rotate(-45deg);
}

.login-panel-content > .login-kicker {
  margin-left: 72px;
  color: #f1a84c;
}

.login-panel-content h2 { color: #fff8ed; }
.login-panel-intro { color: #baa99e; }
.login-field label { color: #dbcbbf; }
.login-label-row a, .login-create a { color: #f0ad54; }

.login-control input,
.login-control select {
  border-color: #4a3633;
  background: rgba(17, 13, 15, .82);
  color: #fff8ef;
}

.login-control input::placeholder { color: #887873; }
.login-control input:-webkit-autofill,
.login-control input:-webkit-autofill:hover,
.login-control input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8ef;
  caret-color: #fff8ef;
  box-shadow: 0 0 0 1000px #171114 inset;
  transition: background-color 9999s ease-out 0s;
}
.login-control input:hover, .login-control select:hover { border-color: rgba(240, 173, 84, .58); }
.login-control input:focus, .login-control select:focus {
  border-color: #e39a3d;
  background: #171114;
  box-shadow: 0 0 0 3px rgba(242, 159, 56, .18);
}

.login-submit {
  border-color: #f2aa4b;
  background: linear-gradient(135deg, #f1b45b, #b95b20);
  color: #1a0c07;
  box-shadow: 0 12px 30px rgba(190, 77, 22, .3);
}

.login-submit:hover { box-shadow: 0 16px 34px rgba(190, 77, 22, .4); }
.login-create { color: #a9978d; }
.login-security { color: #8f8078; }
.login-footer { border-top-color: rgba(255, 203, 130, .1); }
.login-footer a { color: #94837a; }
.login-footer a:hover { color: #f0ad54; }

@media (max-width: 1180px) and (min-width: 761px) {
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(380px, 38vw); }
  .hero-stage { right: -4%; height: min(82vh, 760px); }
  .hero-figure { width: min(43vw, 540px); }
}

@media (max-width: 760px) {
  .login-shell {
    display: block;
    background-attachment: scroll;
    background-position: 34% top;
    background-size: auto 520px;
    background-repeat: no-repeat;
    background-color: #0b0809;
  }
  .login-visual { min-height: 430px; }
  .login-visual::before {
    background: linear-gradient(0deg, #0b0809 0%, rgba(8, 5, 5, .26) 52%, rgba(6, 4, 4, .18) 100%);
  }
  .hero-stage { inset: auto -5% -1px -5%; height: 390px; }
  .hero-figure { display: block; bottom: -3%; width: min(73vw, 390px); }
  .hero-wei { right: auto; left: 25%; transform: scaleX(-1); }
  .hero-shu { right: auto; left: 56%; transform: none; }
  .hero-wu { right: auto; left: -6%; transform: none; }
  .login-panel {
    min-height: auto;
    margin-top: 0;
    border-top: 1px solid rgba(255, 203, 130, .2);
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }
  .login-panel-top { padding: 20px 22px 0; }
  .login-panel-content { width: calc(100% - 40px); padding: 44px 0 38px; }
  .login-card-mark { top: -14px; left: 2px; }
}

@media (max-width: 420px) {
  .login-visual { min-height: 385px; }
  .hero-stage { height: 345px; }
  .hero-figure { width: 77vw; }
  .login-panel-content h2 { font-size: 2rem; }
}