/*
 * auth.css — feature auth-pwa (spec 02 §5.2, §6.2; spec 01 §3.5 media 1023 / 4685 / 4715).
 * Login / register overlay (#authModal) and the "account offline" card (#sessionNoticeModal).
 * Values are verbatim from the spec; rules keep the original source order.
 *
 * Note: #authMessage is a bare <p>; base.css `h1,h2,p{margin:0}` applies to it (as in the
 * original stylesheet), so an empty message line is 0px tall and a filled one 18px.
 * The background image is overridable through --site-auth-bg (set by core/site.js).
 */

.auth-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 18px calc(18px + var(--keyboard-inset, 0px));
  background: linear-gradient(180deg, #02081147, #030810d1), var(--site-auth-bg, url(/assets/login/jiufa-bg.png)) center / cover no-repeat, #08121f;
}

body.keyboard-open .auth-modal {
  place-items: start center;
  padding-top: max(10px, env(safe-area-inset-top));
}

body.keyboard-open .auth-scene {
  min-height: 112px;
}

body.keyboard-open .auth-beast {
  width: 82px;
  height: 82px;
}

body.keyboard-open .auth-logo {
  width: min(76%, 265px);
}

body.auth-locked .auth-modal {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.auth-modal:before,
.auth-modal:after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

/* Rotating "magic circle" (24 s per turn). */
.auth-modal:before {
  left: 50%;
  top: 8%;
  width: min(112vw, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 219, 255, .28) 0 2px, transparent 3px 100%), conic-gradient(from 28deg, transparent 0 12%, rgba(245, 216, 142, .3) 13%, transparent 18% 44%, rgba(90, 225, 255, .23) 45%, transparent 51% 100%);
  mask: radial-gradient(circle, transparent 0 37%, #000 38% 41%, transparent 42% 100%);
  opacity: .72;
  transform: translate(-50%) rotate(0);
  animation: authWheel 24s linear infinite;
}

/* Bottom glow. */
.auth-modal:after {
  left: 0;
  right: 0;
  bottom: -8px;
  height: 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(86, 201, 255, .2), transparent 56%), linear-gradient(180deg, transparent, rgba(3, 8, 16, .76));
}

.auth-modal[hidden] {
  display: none;
}

.auth-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  overflow: hidden;
  padding: 0 18px 18px;
  border: 1px solid rgba(245, 216, 142, .56);
  border-radius: 18px;
  background: linear-gradient(180deg, #1a2b44f0, #08101df5), radial-gradient(circle at 50% 0, rgba(90, 206, 255, .2), transparent 180px);
  box-shadow: inset 0 0 0 1px #ffffff0f, inset 0 0 34px #5fc3ff1a, 0 24px 80px #0000008f, 0 0 28px #f5d88e1f;
}

/* Brand art area. */
.auth-scene {
  position: relative;
  min-height: 150px;
  margin: 0 -18px 8px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 18%, rgba(255, 236, 154, .22), transparent 54px), radial-gradient(circle at 50% 64%, rgba(84, 200, 255, .28), transparent 90px), linear-gradient(180deg, #122d4b7a, #030a1400);
}

.auth-scene:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -54px;
  width: 290px;
  height: 118px;
  border: 1px solid rgba(245, 216, 142, .34);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(78, 207, 255, .18), transparent 58%), repeating-conic-gradient(from 12deg, rgba(245, 216, 142, .22) 0deg 8deg, transparent 8deg 24deg);
  transform: translate(-50%);
  filter: blur(.2px);
}

.auth-logo {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 2;
  width: min(82%, 315px);
  transform: translate(-50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}

.auth-beast {
  position: absolute;
  z-index: 3;
  width: 102px;
  height: 102px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .54)) drop-shadow(0 0 14px rgba(102, 214, 255, .24));
  animation: authFloat 3.6s ease-in-out infinite alternate;
}

.auth-beast-dragon {
  right: 16px;
  bottom: 6px;
}

.auth-beast-phoenix {
  left: 18px;
  bottom: 8px;
  animation-delay: -1.3s;
}

/* The two rings are static (quirk 8). */
.auth-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245, 216, 142, .34);
  box-shadow: 0 0 18px #5ed8ff24;
}

.auth-ring-one {
  left: 50%;
  bottom: 24px;
  width: 138px;
  height: 32px;
  transform: translate(-50%) rotate(-5deg);
}

.auth-ring-two {
  left: 50%;
  bottom: 15px;
  width: 214px;
  height: 48px;
  transform: translate(-50%) rotate(6deg);
}

/* Heading. */
.auth-heading {
  display: grid;
  gap: 4px;
  margin: -2px 0 14px;
  text-align: center;
}

.auth-dialog h2 {
  margin: 0;
  color: #ffeeb4;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 950;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .58), 0 0 14px rgba(245, 216, 142, .18);
}

.auth-heading p {
  margin: 0;
  color: #f5d88ee6;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

/* Close button (only visible when the overlay is not the forced gate). */
.auth-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  background: #ffffff14;
}

body.auth-locked .auth-close {
  display: none;
}

/* Mode tabs. */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(100, 199, 255, .22);
  border-radius: 14px;
  background: linear-gradient(180deg, #061322db, #0a182ab8), radial-gradient(circle at 50% 0, rgba(100, 199, 255, .16), transparent 78%);
  box-shadow: inset 0 1px #ffffff0f, 0 8px 20px #0003;
}

.auth-tabs button,
.auth-form button {
  min-height: 40px;
}

.auth-tabs button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e1edffb8;
  font-size: 14px;
  box-shadow: none;
}

.auth-tabs button.is-active {
  background: linear-gradient(180deg, #fff1b247, #85591eb8), linear-gradient(180deg, #8b672d, #463116);
  color: #fff4c7;
  box-shadow: inset 0 1px #fff3, inset 0 -1px #0000002e, 0 0 16px #f5d88e26;
}

/* Form. */
.auth-form {
  display: grid;
  gap: 9px;
}

.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(100, 199, 255, .18);
  border-radius: 12px;
  background: linear-gradient(180deg, #122339f5, #081220fa), radial-gradient(circle at 0 0, rgba(245, 216, 142, .14), transparent 88px);
  color: #fff8df;
  font-size: 16px;
  line-height: 1.25;
  touch-action: manipulation;
  box-shadow: inset 0 1px #ffffff14, inset 0 0 18px #3d97e214, 0 8px 18px #0000002e;
}

@media (max-height: 720px) {
  .auth-modal {
    place-items: start center;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .auth-dialog {
    margin: 0 auto;
  }
}

.auth-form input::placeholder {
  color: #d3deee9e;
}

.auth-form input:focus {
  border-color: #f5d88eb8;
  background: linear-gradient(180deg, #162b44fa, #091526fa), radial-gradient(circle at 0 0, rgba(245, 216, 142, .18), transparent 88px);
  box-shadow: inset 0 1px #ffffff14, 0 0 0 2px #f5d88e1f, 0 0 20px #f5d88e29;
}

/* No :disabled style on purpose (quirk 4: the button looks the same while submitting). */
.auth-form button[type=submit] {
  margin-top: 4px;
  border-color: #ffeba0d1;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff4c46b, #8e5c1a14), linear-gradient(180deg, #a97c32, #694719 48%, #2e2112);
  color: #fff8d8;
  font-size: 16px;
  font-weight: 950;
  box-shadow: inset 0 1px #ffffff3d, inset 0 -2px #00000038, 0 10px 26px #00000047, 0 0 20px #f5d88e2e;
}

.auth-form button[type=submit]:active {
  transform: translateY(1px);
}

/* "error" has no rule of its own: it is the default red. */
.auth-message {
  min-height: 18px;
  color: #ff9f9f;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.auth-message.info {
  color: #bdd7ff;
}

/* "账号已下线" card. */
.session-notice-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 68, 68, .18), transparent 210px), #02070fb8;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.session-notice-modal[hidden] {
  display: none;
}

.session-notice-dialog {
  width: min(100%, 340px);
  padding: 24px 20px 20px;
  border: 1px solid rgba(255, 146, 108, .72);
  border-radius: 16px;
  background: linear-gradient(180deg, #223048fa, #08111ffc), radial-gradient(circle at 50% 0, rgba(255, 108, 82, .2), transparent 150px);
  box-shadow: inset 0 0 0 1px #ffffff0f, 0 26px 70px #0009, 0 0 34px #ff5b4c2e;
  text-align: center;
}

.session-notice-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff2c2, transparent 28%), linear-gradient(180deg, #ff7a55, #c42f2f);
  color: #fff7df;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 22px #ff58486b;
}

.session-notice-dialog h2 {
  margin: 0;
  color: #fff7df;
  font-size: 24px;
  line-height: 1.2;
}

.session-notice-dialog p {
  margin: 10px 0 18px;
  color: #ffd1c7;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.session-notice-dialog button {
  width: 100%;
  min-height: 44px;
  border-color: #ffe19bb8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff4bf4d, #7b4b1814), linear-gradient(180deg, #916a2b, #4a3216);
  font-size: 15px;
}

@keyframes authWheel {
  to {
    transform: translate(-50%) rotate(360deg);
  }
}

@keyframes authFloat {
  0% {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-7px) scale(1.03);
  }
}

/* Performance downgrade on phones (spec 01 §3.5, media 4685). */
@media (max-width: 767px) {
  body.auth-locked .auth-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .session-notice-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: radial-gradient(circle at 50% 42%, rgba(255, 68, 68, .18), transparent 210px), #02070fe0;
  }
}

/* Installed PWA (media 4715). */
@media (display-mode: standalone) {
  .auth-modal,
  .session-notice-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}