/* login.css */
/* ============================================================
   Classroom Showdown — log in (login.html): the form on the left, the sky
   blue brand panel with a monster-silhouette pattern on the right.
   ============================================================ */
.lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);min-height:100vh;background:#fff}
.lg-left{display:flex;flex-direction:column;padding:18px clamp(16px,4vw,40px) 28px}
.lg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lg-form{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;max-width:400px;width:100%;margin:0 auto;padding:40px 0}
.lg-form h1{font-size:34px;margin-bottom:8px}
.lg-form .muted{font-weight:700;margin:0 0 26px}
.lg-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 18px;border-radius:16px;border:2px solid var(--line-2);background:#fff;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:20px;font-weight:600;color:var(--ink);
  box-shadow:0 5px 0 var(--line-2);transition:transform .08s,box-shadow .08s;
}
.lg-google:hover{border-color:var(--sky)}
.lg-google:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line-2)}
.lg-err{min-height:22px;margin:14px 0 0;color:var(--red-2);font-weight:800}
.lg-fine{font-size:13.5px;color:var(--muted);font-weight:700}
.lg-right{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#3DB4FA,#1C86D6);color:#fff;padding:40px 24px;
}
.lg-pattern{
  position:absolute;inset:-40px;opacity:.16;transform:rotate(-12deg);
  background-image:url("showdown/monsters/256/r01c08.webp"),url("showdown/monsters/256/r01c07.webp");
  background-size:120px 120px,120px 120px;background-position:0 0,60px 60px;filter:brightness(0) invert(1);
}
.lg-hero{position:relative;display:flex;align-items:flex-end;gap:0}
.lg-red{width:min(230px,44%);animation:lg-bob 3.4s ease-in-out infinite}
.lg-blue{width:min(230px,44%);margin-left:-20px;animation:lg-bob 3.4s ease-in-out .7s infinite}
@keyframes lg-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.lg-red,.lg-blue{animation:none}}
.lg-tag{position:relative;font-family:'Fredoka',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:600;text-align:center;margin:26px 0 0;text-shadow:0 2px 0 rgba(0,0,0,.12)}
@media (max-width:820px){.lg{grid-template-columns:1fr}.lg-right{display:none}}