/* Sign-in screen, adapted from login.html. Everything is scoped to .lg so it can't affect the app. */
.lg{--accent:#D9F24B;--lg-ink:#141414;--ground:#FAFAF7;--lg-muted:#4A4A44;--lg-error:#A3261B;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--lg-body:'DM Sans',system-ui,sans-serif;
  position:fixed;inset:0;z-index:30;overflow-y:auto;background:var(--ground);color:var(--lg-ink);font-family:var(--lg-body)}
.lg a,.lg .linkish{color:var(--lg-ink)}
.lg a:hover,.lg .linkish:hover{color:var(--lg-muted)}
.lg input:focus-visible,.lg button:focus-visible,.lg a:focus-visible{outline:3px solid var(--lg-ink);outline-offset:3px}
.lg .page{position:relative;min-height:100vh;display:flex;flex-wrap:wrap;padding:16px;gap:16px}
.lg .form-side{flex:1 1 420px;min-width:0;min-height:600px;padding:clamp(20px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.lg .lg-brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:20px}
.lg .form-wrap{width:100%;max-width:400px;display:flex;flex-direction:column;gap:28px}
.lg h1{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:clamp(36px,4.4vw,52px);line-height:1;letter-spacing:-.03em}
.lg .lead{margin:0;font-size:16px;line-height:1.5;color:var(--lg-muted)}
.lg form{display:flex;flex-direction:column;gap:18px}
.lg .lg-field{display:flex;flex-direction:column;gap:8px}
.lg .field-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lg label{font-size:14px;font-weight:700}
.lg .linkish{font:inherit;font-size:14px;font-weight:500;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.lg input{height:52px;border:1.5px solid var(--lg-ink);border-radius:14px;padding:0 16px;font:inherit;font-size:16px;background:#fff;color:var(--lg-ink);width:100%}
.lg .lg-error{margin:0;font-size:14px;font-weight:500;color:var(--lg-error)}
.lg .lg-error.info{color:var(--lg-muted)}
.lg .lg-error:empty{display:none}
.lg .submit{height:56px;margin-top:6px;border:0;border-radius:999px;background:var(--lg-ink);color:var(--accent);font:inherit;font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.lg .submit:disabled{cursor:progress}
.lg .submit .spinner{display:none;animation:lg-spin 1.2s linear infinite}
.lg .submit.loading .spinner{display:block}
.lg .signup{margin:0;font-size:15px;color:var(--lg-muted)}

.lg .court{flex:1 1 420px;min-width:0;min-height:560px;position:relative;overflow:hidden;border-radius:28px;background:var(--accent)}
.lg .line{position:absolute;border-color:rgba(20,20,20,.18);border-style:solid;border-width:0}
.lg .l-outer{inset:36px;border-width:2px;border-radius:4px}
.lg .l-net{left:36px;right:36px;top:50%;border-top-width:2px}
.lg .l-center{left:50%;top:36px;bottom:36px;border-left-width:2px}
.lg .l-service{left:18%;right:18%;top:28%;bottom:28%;border-width:2px}
.lg .racket-wrap{position:absolute;right:10%;top:9%;width:clamp(150px,20vw,230px);transform:rotate(-22deg);transform-origin:50% 92%}
.lg .racket{transform-origin:50% 92%}
.lg .racket svg{display:block;width:100%;height:auto}
.lg .hop-ball{position:absolute;right:calc(10% + clamp(150px,20vw,230px) + 8px);top:30%;animation:lg-float 3.2s ease-in-out infinite}
.lg .slogan{position:absolute;left:clamp(28px,5vw,64px);bottom:clamp(28px,5vw,64px);margin:0;font-family:var(--display);font-weight:800;font-size:clamp(56px,7.5vw,112px);line-height:.88;letter-spacing:-.045em}
.lg .swing{animation:lg-swing .45s cubic-bezier(.3,.7,.3,1)}
.lg .hop{animation:lg-hop .5s cubic-bezier(.3,.7,.4,1)}
@keyframes lg-swing{0%{transform:rotate(0)}40%{transform:rotate(-26deg)}100%{transform:rotate(0)}}
@keyframes lg-hop{0%{transform:translateY(0)}45%{transform:translateY(-70px) rotate(120deg)}100%{transform:translateY(0) rotate(240deg)}}
@keyframes lg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lg-spin{to{transform:rotate(360deg)}}

/* Success: ball bounces in and becomes a check mark (option C) */
.lg .success{position:fixed;inset:0;z-index:31;background:var(--ground);color:var(--lg-ink);display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px 16px;overflow:hidden}
.lg .success.show{display:flex;animation:lg-fade .35s ease both}
.lg .stage{position:relative;width:360px;max-width:100%;height:280px}
.lg .floor{position:absolute;left:-400px;right:-400px;top:214px;border-top:2px solid rgba(20,20,20,.15)}
.lg .shadow-slot{position:absolute;left:0;top:210px;width:40px;height:8px;margin-left:-20px}
.lg .shadow{width:40px;height:8px;border-radius:50%;background:var(--lg-ink);opacity:0}
.lg .ball-slot{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px}
.lg .bounce{width:24px;height:24px;transform-origin:50% 100%;opacity:0}
.lg .grow{width:24px;height:24px;box-sizing:border-box;border-radius:50%;background:var(--accent);border:1.5px solid var(--lg-ink)}
.lg .lg-spark{position:absolute;left:90px;top:110px;opacity:0}
.lg .check-svg{position:absolute;left:150px;top:170px}
.lg .lg-check{stroke-dasharray:50;stroke-dashoffset:50}
.lg .show .bounce{opacity:1;animation:lg-bounce 1.6s .2s both}
.lg .show .shadow{animation:lg-shadow 1.6s .2s both}
.lg .show .grow{animation:lg-grow .5s cubic-bezier(.3,1.4,.5,1) 1.85s both}
.lg .show .lg-check{animation:lg-draw .45s ease-out 2.2s forwards}
.lg .show .lg-spark{animation:lg-spark .6s ease-out 2.2s both}
.lg .welcome{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.lg .welcome h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-.03em}
.lg .welcome p{margin:0;font-size:17px;color:var(--lg-muted)}
.lg .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}
.lg .btn-primary{height:52px;padding:0 26px;display:inline-flex;align-items:center;border-radius:999px;background:var(--lg-ink);color:var(--accent);font:inherit;font-weight:700;border:0;cursor:pointer}
.lg .btn-ghost{height:52px;padding:0 22px;border-radius:999px;border:1.5px solid var(--lg-ink);background:transparent;color:var(--lg-ink);font:inherit;font-weight:700;cursor:pointer}
.lg .show .rise{animation:lg-rise .6s cubic-bezier(.2,.8,.2,1) 2.4s both}
.lg .show .rise2{animation:lg-rise .6s cubic-bezier(.2,.8,.2,1) 2.55s both}
@keyframes lg-fade{from{opacity:0}to{opacity:1}}
@keyframes lg-bounce{
  0%{transform:translate(180px,110px) scale(.06);opacity:0;animation-timing-function:cubic-bezier(.5,0,1,.6)}
  6%{opacity:1}
  22%{transform:translate(180px,150px) scale(.32,.26);animation-timing-function:cubic-bezier(0,.4,.5,1)}
  42%{transform:translate(180px,70px) scale(.52);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  60%{transform:translate(180px,180px) scale(.78,.66);animation-timing-function:cubic-bezier(0,.4,.5,1)}
  74%{transform:translate(180px,120px) scale(.9);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  86%{transform:translate(180px,200px) scale(1.15,.88);animation-timing-function:cubic-bezier(0,.4,.5,1)}
  93%{transform:translate(180px,188px) scale(1);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  100%{transform:translate(180px,200px) scale(1);opacity:1}}
@keyframes lg-shadow{
  0%{transform:translate(180px,-62px) scale(.06);opacity:0}
  22%{transform:translate(180px,-60px) scale(.32);opacity:.4}
  42%{transform:translate(180px,-45px) scale(.3);opacity:.15}
  60%{transform:translate(180px,-28px) scale(.78);opacity:.5}
  74%{transform:translate(180px,-14px) scale(.6);opacity:.25}
  86%,100%{transform:translate(180px,0) scale(1);opacity:.5}}
@keyframes lg-grow{from{transform:scale(1)}to{transform:scale(4.2)}}
@keyframes lg-draw{to{stroke-dashoffset:0}}
@keyframes lg-spark{0%{transform:scale(.6);opacity:0}40%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes lg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:640px){.lg .court{min-height:380px}.lg .form-side{min-height:0}}
@media (prefers-reduced-motion:reduce){.lg *,.lg *::before,.lg *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}}
.lg .lg-forgot{margin:2px 0 0;text-align:center}