/**
 * Critical login portal styles — loaded synchronously from index.html before JS.
 * Applies to #html-shell.login-overlay (static boot + React portal).
 * Prevents FOUC when the static shell hands off to React.
 * Keep visually synced with LoginOverlay.css / LoginForms.css / AuthActions.css.
 *
 * IMPORTANT: Atmosphere must be on #html-shell.login-overlay (ID+class) so it
 * outranks any layout rules that formerly set background on #html-shell.
 */
.login-overlay,
#html-shell.login-overlay {
  --login-gold: #c9a227;
  --login-gold-bright: #f0e68c;
  --login-text-muted: rgba(232, 220, 180, 0.72);
  --login-hero: url('/images/Login_Page/realm_gate_hero.webp?v=3');
  --login-hero-focal-x: 50.5%;
  --login-hero-focal-y: 50%;
  --login-hero-ar: 1.5;

  --login-pad-top: max(1dvh, env(safe-area-inset-top));
  --login-pad-right: max(1dvw, env(safe-area-inset-right));
  --login-pad-bottom: max(1.25dvh, env(safe-area-inset-bottom));
  --login-pad-left: max(1dvw, env(safe-area-inset-left));
  --login-shell-w: min(92dvw, 26.25rem);
  --login-shell-min-w: min(78dvw, 17.5rem);
  --login-shell-gap: clamp(0.375rem, 0.85dvh, 0.5rem);
  --login-shell-pad-x: 0;
  --login-shell-pad-bottom: clamp(0.2rem, 0.45dvh, 0.25rem);
  --login-shell-scroll-pad: clamp(0.625rem, 1.3dvh, 0.75rem);
  --login-brand-gap: clamp(0.3rem, 0.65dvh, 0.375rem);
  --login-card-pad-x: clamp(0.875rem, 2.4dvw, 1.125rem);
  --login-card-pad-top: clamp(0.5rem, 1.1dvh, 0.5rem);
  --login-card-pad-bottom: clamp(0.5rem, 1.1dvh, 0.625rem);
  --login-card-gap: clamp(0.625rem, 1.35dvh, 0.75rem);
  --login-card-radius: 0.125rem;
  --login-fields-min-h: clamp(10rem, 22dvh, 11.75rem);
  --login-username-min-h: clamp(5.25rem, 11.5dvh, 6.35rem);
  --login-actions-gap: clamp(0.25rem, 0.5dvh, 0.375rem);
  --login-btn-h: clamp(2.75rem, 5.5dvh, 3.125rem);
  --login-gear-size: var(--login-btn-h);
  --login-row-discord: clamp(2.5rem, 5dvh, 2.75rem);
  --login-row-action: var(--login-btn-h);
  --login-progress-h: var(--login-row-action);
  --login-tab-pad: clamp(0.1875rem, 0.45dvh, 0.1875rem);
  --login-tab-min-h: clamp(2.25rem, 4.5dvh, 2.5rem);
  --login-tab-pad-y: clamp(0.625rem, 1.2dvh, 0.6875rem);
  --login-tab-pad-x: clamp(0.625rem, 1.5dvw, 0.75rem);
  --login-input-gap: clamp(0.4rem, 0.9dvh, 0.5rem);
  --login-input-pad-y: clamp(0.75rem, 1.45dvh, 0.8125rem);
  --login-input-pad-x: clamp(0.875rem, 2dvw, 0.9375rem);
  --login-avail-h: clamp(1rem, 2.2dvh, 1.0625rem);
  --login-discord-icon: clamp(2.25rem, 4.5dvw, 2.5rem);
  --login-footer-pad-top: clamp(0.2rem, 0.45dvh, 0.25rem);
  --login-footer-pad-bottom: clamp(0.1rem, 0.25dvh, 0.125rem);
  --login-vlb-pad-y: clamp(0.2rem, 0.45dvh, 0.25rem);
  --login-vlb-pad-x: clamp(0.625rem, 1.4dvw, 0.75rem);
  --login-vlb-gap: clamp(0.15rem, 0.35dvh, 0.2rem);
  --login-vlb-track-h: clamp(0.2rem, 0.45dvh, 0.25rem);
  --login-vlb-pct-h: var(--login-avail-h);
  --login-short-screen: 40dvh;

  /* Position/bottom bleed owned by index.css after load. Boot needs a frame
   * before then — top/left/right/bottom only (no inset:0). Portrait bleed below. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding:
    var(--login-pad-top)
    var(--login-pad-right)
    var(--login-pad-bottom)
    var(--login-pad-left);
  box-sizing: border-box;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color: #e8e0c8;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  background-color: #0a0604;
  background-image:
    radial-gradient(ellipse 85% 50% at 50% 52%, rgba(6, 4, 3, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 110% 55% at 50% 108%, rgba(100, 28, 6, 0.38) 0%, transparent 50%),
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(8, 5, 3, 0.4) 0%, transparent 55%),
    linear-gradient(180deg, rgba(4, 2, 1, 0.42) 0%, rgba(4, 2, 1, 0.08) 42%, rgba(8, 3, 2, 0.28) 100%),
    var(--login-hero);
  background-size: cover, cover, cover, cover, cover;
  background-position: center, center bottom, center top, center, 50% 50%;
  background-repeat: no-repeat;
}

.login-overlay .login-hero-plane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.login-overlay .login-hero-plane__media {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100dvw, calc(100dvh * var(--login-hero-ar, 1.5)));
  height: max(100dvh, calc(100dvw / var(--login-hero-ar, 1.5)));
  transform: translate(
    calc(-1 * var(--login-hero-focal-x, 50%)),
    calc(-1 * var(--login-hero-focal-y, 50%))
  );
  background-image: var(--login-hero);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.login-overlay::before,
#html-shell.login-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, transparent 28%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, transparent 28%, transparent 62%, rgba(0, 0, 0, 0.38) 100%);
}

#html-shell.login-overlay {
  z-index: 10001;
}

#html-shell.login-overlay--status-only,
.login-overlay--status-only {
  background: transparent;
  background-image: none;
  pointer-events: none;
}

#html-shell.login-overlay--status-only::before,
.login-overlay--status-only::before {
  display: none;
}

.login-overlay .styled-input,
#html-shell.login-overlay .styled-input {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.login-overlay .login-shell {
  width: var(--login-shell-w);
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--login-shell-gap);
  position: relative;
  z-index: 2;
  flex-shrink: 1;
  overflow: visible;
  background: transparent;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-padding-bottom: var(--login-shell-scroll-pad);
  padding-inline: 0;
  padding-bottom: var(--login-shell-pad-bottom);
  box-sizing: border-box;
}

.login-overlay .login-shell::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.login-overlay .login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--login-brand-gap);
  text-align: center;
  margin-bottom: calc(var(--login-brand-gap) * 0.5);
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding-inline: clamp(0.35rem, 1.2dvw, 0.75rem);
  padding-block: 0.2em 0.15em;
  box-sizing: border-box;
}

.login-overlay .game-title {
  position: relative;
  display: inline-block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(2.55rem, 6.6vw, 4.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 -0.14em 0 0;
  padding: 0.14em 0.32em 0.28em;
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow: visible;
  perspective: 900px;
  transform-style: preserve-3d;
}

.login-overlay .game-title__glow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  letter-spacing: inherit;
  color: #ff9a3a;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  text-shadow:
    0 0 0.3em rgba(255, 140, 40, 0.95),
    0 0 0.75em rgba(255, 100, 20, 0.55),
    0 0.15em 1.1em rgba(255, 70, 10, 0.4);
  transform: rotateX(10deg) translateZ(-0.08em);
}

.login-overlay .game-title__extrude {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  letter-spacing: inherit;
  color: #4a3012;
  -webkit-text-fill-color: #4a3012;
  pointer-events: none;
  z-index: 1;
  transform: rotateX(10deg) translateZ(-0.04em);
  text-shadow:
    0 1px 0 #3f290e,
    0 2px 0 #37230c,
    0 3px 0 #301e0a,
    0 4px 0 #291908,
    0 5px 0 #221406,
    0 6px 0 #1b1005,
    0 7px 0 #150c04,
    0 8px 0 #100903,
    0 10px 14px rgba(0, 0, 0, 0.55);
}

.login-overlay .game-title__text {
  position: relative;
  z-index: 2;
  display: inline-block;
  background-image:
    linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.85) 49%, transparent 58%, transparent 100%),
    linear-gradient(180deg, #fffdf2 0%, #ffe9a8 14%, #f2d060 32%, #c9a227 52%, #7a5a14 70%, #d4af37 86%, #fff4c8 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 140% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: rotateX(10deg) translateZ(0.06em);
  filter:
    drop-shadow(0 -1px 0 rgba(255, 248, 220, 0.75))
    drop-shadow(0 1px 0 rgba(70, 42, 8, 0.55))
    drop-shadow(0 0.12em 0.08em rgba(255, 110, 30, 0.28))
    drop-shadow(0 0.28em 0.45em rgba(0, 0, 0, 0.55));
}

.login-overlay .login-card {
  width: 100%;
  box-sizing: border-box;
  padding: var(--login-card-pad-top) var(--login-card-pad-x) var(--login-card-pad-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--login-card-gap);
  position: relative;
  border-radius: calc(var(--login-card-radius) * 1.5);
  border: 1px solid rgba(212, 175, 55, 0.5);
  background-color: #0b0907;
  background-image:
    linear-gradient(180deg, rgba(255, 236, 180, 0.11) 0%, transparent 16%),
    linear-gradient(180deg, transparent 78%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(155deg, #241e17 0%, #16120e 42%, #0c0a08 78%, #080604 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 0 2px rgba(201, 162, 39, 0.32),
    inset 0 1px 0 rgba(255, 240, 200, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(201, 162, 39, 0.14),
    inset 0 0 48px rgba(0, 0, 0, 0.36);
  overflow: visible;
}

.login-overlay .login-card__fields {
  display: flex;
  flex-direction: column;
  gap: var(--login-card-gap);
  flex-shrink: 0;
  min-height: var(--login-fields-min-h);
}

.login-overlay .login-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--login-gear-size);
  grid-template-rows: var(--login-row-discord) var(--login-row-action);
  column-gap: var(--login-actions-gap);
  row-gap: var(--login-actions-gap);
  margin-top: calc(var(--login-brand-gap) * 0.35);
  align-items: stretch;
}

.login-overlay .login-card__actions-primary {
  display: contents;
}

.login-overlay .login-card__actions .login-discord-slot {
  grid-column: 1;
  grid-row: 1;
}

.login-overlay .login-card__actions-primary > :not(.login-discord-slot) {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  width: 100%;
  min-width: 0;
  height: var(--login-btn-h);
  max-height: 100%;
}

.login-overlay .login-card__actions-primary > .vlb-container {
  align-self: stretch;
  height: 100%;
}

.login-overlay .login-settings-gear {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 5;
  width: 100%;
  height: var(--login-gear-size);
  min-height: var(--login-gear-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--login-card-radius);
  border: 1px solid rgba(201, 162, 39, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 230, 160, 0.12) 0%, transparent 32%),
    linear-gradient(180deg, rgba(90, 58, 22, 0.92) 0%, rgba(36, 24, 10, 0.98) 55%, rgba(18, 12, 6, 0.99) 100%);
  color: #e8d48b;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 240, 180, 0.22);
}

.login-overlay .login-tabs {
  display: flex;
  background:
    linear-gradient(180deg, rgba(255, 230, 160, 0.05) 0%, transparent 28%),
    linear-gradient(180deg, #14100c 0%, #0a0806 100%);
  padding: var(--login-tab-pad);
  border-radius: var(--login-card-radius);
  border: 1px solid rgba(201, 162, 39, 0.28);
  margin: 0;
}

.login-overlay .login-tab {
  flex: 1;
  min-height: var(--login-tab-min-h);
  padding: var(--login-tab-pad-y) var(--login-tab-pad-x);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  color: rgba(206, 192, 156, 0.78);
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: calc(var(--login-card-radius) * 0.5);
  position: relative;
}

.login-overlay .login-tab.active {
  color: #f0e68c;
  background: linear-gradient(180deg, rgba(58, 44, 24, 0.98) 0%, rgba(24, 18, 10, 0.99) 100%);
}

.login-overlay .input-group {
  display: flex;
  flex-direction: column;
  gap: var(--login-input-gap);
}

.login-overlay .input-group label,
.login-overlay .input-group__header label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 220, 180, 0.78);
  font-weight: 600;
}

.login-overlay .input-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--login-input-gap);
}

.login-overlay .login-field-link {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  color: #f0e68c;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.login-overlay .styled-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(201, 162, 39, 0.18);
  padding: var(--login-input-pad-y) var(--login-input-pad-x);
  border-radius: var(--login-card-radius);
  color: #f2ead8;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  box-sizing: border-box;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.82);
}

.login-overlay .styled-input::placeholder {
  color: rgba(198, 186, 160, 0.6);
}

.login-overlay .boot-loading-bar,
.login-overlay .vlb-container {
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: var(--login-vlb-pad-y) var(--login-vlb-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--login-vlb-gap);
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(135deg, #0c1a0e 0%, #060e08 55%, #0c1a0e 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--login-card-radius);
}

.login-overlay .boot-loading-bar span,
.login-overlay .vlb-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 220, 180, 0.72);
}

.login-overlay .boot-loading-track,
.login-overlay .vlb-track {
  height: var(--login-vlb-track-h);
  border-radius: calc(var(--login-card-radius) * 0.5);
  background: rgba(0, 0, 0, 0.75);
  overflow: hidden;
  position: relative;
}

.login-overlay .boot-loading-fill {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.55), rgba(212, 175, 55, 0.85));
  animation: login-boot-bar-pulse 1.8s ease-in-out infinite;
}

.login-overlay .action-button {
  width: 100%;
  height: 100%;
  min-height: var(--login-btn-h);
  box-sizing: border-box;
  padding: 0 var(--login-vlb-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0e68c;
  cursor: pointer;
  border-radius: var(--login-card-radius);
  border: 1px solid rgba(212, 175, 55, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 230, 160, 0.14) 0%, transparent 28%),
    linear-gradient(180deg, rgba(110, 62, 22, 0.95) 0%, rgba(52, 28, 10, 0.98) 55%, rgba(28, 14, 6, 0.99) 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 236, 180, 0.28);
}

.login-overlay .login-card__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: var(--login-footer-pad-top) 0 var(--login-footer-pad-bottom);
  margin: 0;
}

.login-overlay .login-discord-link {
  display: inline-block;
  line-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
}

.login-overlay .login-discord-link img {
  width: var(--login-discord-icon);
  height: var(--login-discord-icon);
  display: block;
  pointer-events: auto;
  filter: none;
  opacity: 1;
}

@keyframes login-boot-bar-pulse {
  0%, 100% { transform: translateX(-10%); opacity: 0.75; }
  50% { transform: translateX(180%); opacity: 1; }
}

@media (max-width: 932px) and (orientation: portrait) {
  .login-overlay,
  #html-shell.login-overlay {
    bottom: calc(-1 * max(50px, env(safe-area-inset-bottom, 0px)));
  }
}

@media (max-height: 40dvh) {
  .login-overlay,
  #html-shell.login-overlay {
    justify-content: center;
    padding-bottom: max(1dvh, env(safe-area-inset-bottom));
  }

  .login-overlay .game-title {
    font-size: clamp(1.65rem, 5vw, 2.35rem);
    letter-spacing: 0.14em;
    margin-right: -0.14em;
  }

  .login-overlay .login-card {
    padding: var(--login-card-pad-top) var(--login-card-gap) var(--login-card-pad-top);
    gap: var(--login-actions-gap);
  }

  .login-overlay .login-card__footer {
    padding: calc(var(--login-footer-pad-top) * 0.5) 0 0;
  }

  .login-overlay .login-shell {
    gap: calc(var(--login-shell-gap) * 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-overlay .boot-loading-fill {
    animation: none;
  }
}