/* Login is a focused entry point over the shared neon art direction. */
#auth-screen {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 4vw, 64px);
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background-color: var(--nd-surface-0);
  background-image: linear-gradient(90deg, #030609d9 0%, #03060970 50%, #030609b8 100%), url('../unit_asset/ui/neon/login-backdrop.webp'), url('../unit_asset/backgrounds/login-hangar-pixel-16x9.webp');
  background-position: center;
  background-size: cover;
  color: var(--nd-text-1);
}

#auth-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, #03060950, transparent 38%, #03060988);
  pointer-events: none;
}

#auth-screen .auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px clamp(36px, 8vw, 128px);
  width: min(1120px, 100%);
  min-height: min(680px, calc(100dvh - 2 * clamp(20px, 4vw, 64px)));
  margin: auto;
}

#auth-screen .auth-main { display: contents; }
#auth-screen .auth-brand {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  justify-items: center;
  align-content: center;
  min-width: 0;
  color: var(--nd-text-1);
  text-align: center;
  text-shadow: 0 2px 14px #000, 0 0 28px #3ff3ff66;
}
#auth-screen .auth-brand .auth-logo {
  display: block;
  width: clamp(240px, 30vw, 400px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1312 / 1199;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px #000c);
}
#auth-screen .auth-brand h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#auth-screen .auth-brand > span {
  margin-top: 14px;
  color: var(--nd-text-2);
  font: 700 var(--nd-size-label)/1.4 var(--nd-font-label);
  letter-spacing: .18em;
}

#auth-screen .auth-card {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: clamp(24px, 3vw, 38px);
  border-color: #3ff3ff88;
  border-top: 2px solid var(--nd-accent);
  background: linear-gradient(145deg, #10232df5, #081017f5 74%);
  box-shadow: 0 18px 54px #000b, 0 0 36px #3ff3ff22, inset 0 1px #3ff3ff20;
  backdrop-filter: blur(12px);
}
#auth-screen .auth-eyebrow {
  margin: 0 0 8px;
  color: var(--nd-accent);
  font: 700 var(--nd-size-label)/1.4 var(--nd-font-label);
  letter-spacing: .16em;
}
#auth-screen .auth-card h2 {
  margin: 0 0 22px;
  color: var(--nd-text-1);
  font: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--nd-font-heading);
  letter-spacing: .04em;
  text-transform: uppercase;
}
#auth-screen #play-as-guest,
#auth-screen #google-oauth-sign-in {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  font: 700 15px/1.3 var(--nd-font-label);
  text-align: left;
  text-decoration: none;
  white-space: normal;
}
#auth-screen #play-as-guest {
  margin: 0;
  border-color: var(--nd-primary);
  color: #ffe0a8;
  box-shadow: 0 0 18px #ffb34733;
}
#auth-screen #play-as-guest:hover { border-color: var(--nd-primary); box-shadow: 0 0 20px #ffb34766; }
#auth-screen #google-oauth-sign-in { margin-top: 12px; }
#auth-screen .guest-icon,
#auth-screen .google-g { display: grid; place-items: center; width: 32px; height: 32px; }
#auth-screen .guest-icon { color: var(--nd-primary); font-size: 25px; line-height: 1; }
#auth-screen .google-g {
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font: 700 22px/1 Arial, sans-serif;
  text-shadow: 1px 1px #34a853, -1px -1px #ea4335;
}
#auth-screen .guest-arrow,
#auth-screen .google-arrow { justify-self: end; font: 700 22px/1 Arial, sans-serif; }
#auth-screen .guest-arrow { color: var(--nd-primary); }
#auth-screen .google-arrow { color: var(--nd-accent); }
#auth-screen #guest-copy {
  margin: 10px 0 2px;
  color: var(--nd-text-2);
  font: var(--nd-size-body)/1.55 var(--nd-font-body);
  text-align: center;
}
#auth-screen #auth-error:not([hidden]) {
  display: block;
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--nd-danger);
  border-radius: var(--nd-radius-sm);
  background: #3b1024f2;
  color: #ffe5ee;
  font: var(--nd-size-body)/1.5 var(--nd-font-body);
  overflow-wrap: anywhere;
}
#auth-screen #auth-error[hidden] { display: none; }
#auth-screen #connection-message {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #3ff3ff66;
  border-radius: var(--nd-radius-sm);
  background: #030609aa;
  color: var(--nd-text-1);
  font: var(--nd-size-body)/1.45 var(--nd-font-body);
  text-align: center;
  overflow-wrap: anywhere;
}
#auth-screen #connection-message[data-state="idle"] { display: none; }
#auth-screen #connection-message[data-state="connecting"],
#auth-screen #connection-message[data-state="visible"] { border-color: #3ff3ff88; color: #c9fbff; }
#auth-screen #connection-message[data-state="error"],
#auth-screen #connection-message[data-state="unreachable"] { border-color: var(--nd-danger); background: #300f20ed; color: #ffe0e9; }
#auth-screen .auth-footer {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  color: var(--nd-text-2);
  font: var(--nd-size-label)/1.4 var(--nd-font-label);
}
#auth-screen .auth-footer a { color: inherit; text-underline-offset: 3px; }
#auth-screen .auth-footer a:hover,
#auth-screen .auth-footer a:focus-visible { color: var(--nd-accent); }
#auth-screen button:focus-visible,
#auth-screen a:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 3px; }

#auth-screen .dev-account-entry { margin-top: 22px; }
#auth-screen .auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--nd-text-3); font: 700 10px/1.3 var(--nd-font-label); letter-spacing: .1em; }
#auth-screen .auth-divider::before,
#auth-screen .auth-divider::after { height: 1px; flex: 1; content: ""; background: var(--nd-border); }
#auth-screen .dev-account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
#auth-screen .dev-account-fields label,
#auth-screen .dev-account-signup-fields label { color: var(--nd-text-2); font: 700 10px/1.4 var(--nd-font-label); }
#auth-screen .dev-account-fields input,
#auth-screen .dev-account-signup-fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid var(--nd-border); border-radius: var(--nd-radius-sm); background: var(--nd-surface-0); color: var(--nd-text-1); font: var(--nd-size-body)/1.4 var(--nd-font-body); }
#auth-screen #dev-account-submit,
#auth-screen #dev-account-switch { min-height: 44px; margin-top: 10px; }
#auth-screen .dev-account-switch-copy { color: var(--nd-text-2); font-size: var(--nd-size-body); }

@media (min-aspect-ratio: 2/1) {
  #auth-screen { background-image: linear-gradient(90deg, #030609d9 0%, #03060970 50%, #030609b8 100%), url('../unit_asset/ui/neon/login-backdrop-wide.webp'), url('../unit_asset/backgrounds/login-hangar-pixel-wide.webp'); }
}
@media (max-width: 760px) {
  #auth-screen { place-items: stretch; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  #auth-screen .auth-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; width: min(520px, 100%); min-height: 0; }
  #auth-screen .auth-brand { grid-column: 1; grid-row: 1; }
  #auth-screen .auth-brand .auth-logo { width: clamp(116px, 27vw, 176px); }
  #auth-screen .auth-brand > span { margin-top: 3px; font-size: 9px; }
  #auth-screen .auth-card { grid-column: 1; grid-row: 2; padding: 20px clamp(18px, 5vw, 30px); }
  #auth-screen .auth-card h2 { margin-bottom: 14px; font-size: 22px; }
  #auth-screen #play-as-guest,
  #auth-screen #google-oauth-sign-in { min-height: 52px; }
  #auth-screen .auth-footer { grid-column: 1; grid-row: 3; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #auth-screen { padding: max(8px, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom)); }
  #auth-screen .auth-layout { grid-template-columns: minmax(140px, .72fr) minmax(0, 1.28fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; width: min(940px, 100%); }
  #auth-screen .auth-brand { grid-column: 1; grid-row: 1; }
  #auth-screen .auth-brand .auth-logo { width: clamp(96px, 30vh, 142px); }
  #auth-screen .auth-brand > span { max-width: 22ch; font-size: 8px; }
  #auth-screen .auth-card { grid-column: 2; grid-row: 1; justify-content: flex-start; padding: 16px clamp(16px, 3vw, 26px); }
  #auth-screen .auth-eyebrow { margin-bottom: 4px; }
  #auth-screen .auth-card h2 { margin-bottom: 8px; font-size: 20px; }
  #auth-screen #play-as-guest,
  #auth-screen #google-oauth-sign-in { min-height: 48px; }
  #auth-screen #google-oauth-sign-in { margin-top: 8px; }
  #auth-screen #guest-copy { margin-top: 6px; font-size: 11px; }
  #auth-screen #connection-message { margin-top: 8px; padding: 7px 9px; }
  #auth-screen .auth-footer { grid-column: 1 / -1; grid-row: 2; min-height: 28px; }
  #auth-screen .auth-brand > span { display: none; }
}
@media (pointer: coarse) {
  #auth-screen #play-as-guest,
  #auth-screen #google-oauth-sign-in { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  #auth-screen *, #auth-screen *::before, #auth-screen *::after { scroll-behavior: auto; transition: none; }
}