/* gamelala — sign-in screen. Hero panel + card, tokens come from theme.css. */

.login-wrap {
  display: flex;
  min-height: 100vh;
}

/* ---------- left: hero ---------- */

.hero {
  position: relative;
  flex: 1 1 62%;
  overflow: hidden;
  background: var(--night-800);
}

.hero svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-copy {
  position: absolute;
  left: var(--sp-6);
  bottom: var(--sp-6);
  max-width: 460px;
}

.hero-copy h1 {
  margin: 0 0 var(--sp-2);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.hero-copy p {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--violet-200);
}

/* ---------- right: sign-in card ---------- */

.auth {
  flex: 0 0 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--night-900);
  border-left: 1px solid var(--border);
}

.auth-inner { width: 100%; max-width: 300px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.auth-brand .name {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.auth-brand .sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.auth h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); }
.auth .lede { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); }

.ssl-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .login-wrap { flex-direction: column; }
  .hero { flex: 0 0 220px; }
  .hero-copy { left: var(--sp-5); bottom: var(--sp-4); }
  .hero-copy h1 { font-size: 32px; }
  .hero-copy p { font-size: var(--fs-md); }
  .auth { flex: 1; border-left: none; border-top: 1px solid var(--border); }
}