/* ============================================================
   login.css — in-game login bottom sheet (Figma 4370:61488 "Not Login")
   Namespaced `lgs-*` so it never collides with the older generic
   .sheet in components.css. Values come straight from the Figma
   variables; where a token already exists in tokens.css we use it.
============================================================ */

/* Figma "Primary Gradiant Color" on the sheet CTA — a different angle from the
   global --grad, so it gets its own token rather than overriding the shared one. */
:root{
  --grad-login:linear-gradient(170.42deg,#A69CFF 7.36%,#2A4BD1 60.94%);
  --grad-login-off:linear-gradient(170.01deg,rgba(166,156,255,.3) 7.36%,rgba(42,75,209,.3) 108.76%);
  --tx-link:#4076FF;   /* Text/Primary/Text-Primary-100 */
}

/* max-width matches #app (402px) so the sheet lines up with the phone frame
   instead of spilling past it on desktop — same rule the older .sheet uses.
   z-index 41 sits just above .overlay (40), consistent with the other modals. */
.lgs{position:fixed;inset:auto 0 0 0;z-index:41;max-width:402px;margin:0 auto;
  background:var(--bg-100);border-radius:16px 16px 0 0;
  padding:0 16px 24px;overflow:hidden;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.lgs.open{transform:translateY(0)}

/* ---- header: grip + close ---- */
.lgs-hd{position:sticky;top:0;z-index:2;background:var(--bg-100);padding-top:12px}
.lgs-grip{width:60px;height:4px;border-radius:100px;background:var(--tx-500);margin:0 auto}
.lgs-hdrow{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.lgs-x{background:none;border:0;padding:2px;cursor:pointer;line-height:0;border-radius:8px}
.lgs-x svg{width:24px;height:24px;display:block}

/* ---- body ---- */
.lgs-body{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:16px}
.lgs-art{height:120px;display:block}
.lgs-title{font-size:16px;line-height:28px;font-weight:500;color:var(--tx-100);text-align:center;margin:0}
.lgs-cap{font-size:14px;line-height:24px;font-weight:500;color:var(--tx-400);text-align:center;margin:0}
.lgs-head{display:flex;flex-direction:column;gap:8px;width:100%}
.lgs-field{display:flex;flex-direction:column;gap:16px;width:100%;padding-top:8px}

/* ---- text input ---- */
.lgs-in{width:100%;height:48px;box-sizing:border-box;
  background:var(--bg-300);border:1px solid transparent;border-radius:12px;
  padding:12px;color:var(--tx-100);font:500 14px/24px inherit;
  font-family:inherit;text-align:right;outline:none}
.lgs-in::placeholder{color:var(--tx-400)}
.lgs-in:focus{border-color:var(--tx-link)}
.lgs-in.err{border-color:var(--tx-critical)}
.lgs-err{font-size:12px;line-height:20px;color:var(--tx-critical);text-align:right;margin-top:4px}
.lgs-inwrap{width:100%}

/* ---- referral disclosure ----
   An accordion: the panel is always in the DOM and collapses to max-height 0,
   so opening it is a class toggle on this one element. It used to be built
   only when open, which forced a full re-render and replayed the sheet's
   own slide-up every time the user tapped it. */
.lgs-refwrap{width:100%}
.lgs-ref{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:8px 0;background:none;border:0;cursor:pointer}
.lgs-ref span{font-size:14px;line-height:24px;font-weight:400;color:var(--tx-400)}
.lgs-ref svg{width:24px;height:24px;transform:rotate(-90deg);transition:transform .2s}
.lgs-ref[aria-expanded="true"] svg{transform:rotate(90deg)}
/* max-height is an overshoot of the 48px input, not a measured height — it only
   has to exceed the content, and the transition settles early either way. */
.lgs-refbox{width:100%;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .22s cubic-bezier(.2,.8,.25,1),opacity .18s ease,padding-top .22s ease}
.lgs-refbox.open{max-height:64px;opacity:1;padding-top:8px}

/* ---- OTP boxes ---- */
.lgs-otp{display:flex;justify-content:space-between;width:100%;direction:ltr}
.lgs-otp input{width:48px;height:48px;box-sizing:border-box;
  background:var(--bg-300);border:1px solid transparent;border-radius:12px;
  color:var(--tx-100);font:500 16px/28px inherit;font-family:inherit;
  text-align:center;outline:none;padding:0}
.lgs-otp input:focus{border-color:var(--tx-link)}
.lgs-otp.err input{border-color:var(--tx-critical)}

/* ---- resend timer / link ---- */
.lgs-timer{width:100%;padding:8px 0;text-align:right;
  font-size:14px;line-height:24px;font-weight:500;color:var(--tx-100)}
.lgs-timer.done{color:var(--tx-link);cursor:pointer}

/* ---- CTA + rule ---- */
.lgs-foot{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding-top:12px}
.lgs-cta{width:100%;height:48px;border:0;border-radius:8px;cursor:pointer;
  background-image:var(--grad-login);color:#fff;
  font:500 14px/24px inherit;font-family:inherit}
.lgs-cta[disabled]{background-image:var(--grad-login-off);color:var(--tx-400);cursor:default}
.lgs-rule{font-size:14px;line-height:24px;font-weight:500;color:var(--tx-100);text-align:center}
.lgs-rule a{color:var(--tx-link);text-decoration:none}
.lgs-back{width:100%;height:48px;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--tx-link);font:500 14px/24px inherit;font-family:inherit}
.lgs-back svg{width:24px;height:24px}

/* Spinner shown on the CTA while a request is in flight. */
.lgs-cta.busy{color:transparent;position:relative}
.lgs-cta.busy::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:lgsspin .7s linear infinite}
@keyframes lgsspin{to{transform:rotate(360deg)}}