/* Batch 162 — the sign-in pages on a desktop: the form card next to a panel that says what the account is for
   (components/auth_side.html). Phones keep the single card. */
.auth-split { place-items: center; }
.auth-split-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; max-width: 420px; align-items: center; }
.auth-side { display: none; }
@media (min-width: 960px) {
  .auth-split-in { max-width: 960px; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
  .auth-side { display: block; position: relative; border-radius: 22px; overflow: hidden; min-height: 440px;
    border: 1px solid rgba(var(--accent-rgb), .3);
    background: radial-gradient(520px 260px at 0% 0%, rgba(var(--accent-rgb), .28), transparent 70%),
      radial-gradient(420px 220px at 100% 100%, rgba(245, 197, 24, .12), transparent 70%),
      linear-gradient(180deg, var(--panel), var(--bg-raised)); }
}
.auth-side-in { padding: 38px 36px; display: flex; flex-direction: column; gap: 18px; height: 100%; }
.auth-side-kick { font: 800 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hot); }
.auth-side h2 { margin: 0; font: 600 30px/1.15 var(--font-display); letter-spacing: -.02em; }
.auth-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
.auth-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.auth-points b { display: block; font-size: 15px; color: var(--text); margin-bottom: 2px; }
.auth-points li > span:last-child { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
.auth-pt-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-hot);
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); }
.auth-pt-ico svg { width: 20px; height: 20px; }
.auth-games { margin-top: auto; display: flex; align-items: center; gap: 18px; opacity: .8; }
.auth-games .glogo { height: 18px; width: auto; }