join-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 30% 20%,#4a3aa8,#1b1430 55%,#120e24);animation:join-in var(--motion-spring) both}@keyframes join-in{0%{opacity:0}to{opacity:1}}join-card{display:flex;flex-direction:column;gap:22px;width:min(440px,100%);padding:34px 30px;border-radius:var(--shape-l);background:var(--surface-container);box-shadow:0 24px 60px #00000073;text-align:center}join-title{font-size:34px;font-weight:700;line-height:1.1;background:linear-gradient(92deg,var(--secondary),var(--tertiary));-webkit-background-clip:text;background-clip:text;color:transparent}join-sub{margin-top:-14px;color:var(--on-surface-variant);font-size:15px}join-field{display:flex;flex-direction:column;gap:10px;text-align:left}join-label{font-size:14px;font-weight:500;color:var(--on-surface-variant)}join-field input{padding:14px 18px;border:2px solid var(--outline);border-radius:var(--shape-m);background:var(--surface);color:var(--on-surface);font-family:var(--font);font-size:18px;outline:none;transition:border-color var(--motion-fast)}join-field input:focus{border-color:var(--primary)}color-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}color-swatch{aspect-ratio:1;border-radius:var(--shape-full);background:var(--swatch);cursor:pointer;border:3px solid transparent;transition:transform var(--motion-spring),border-color var(--motion-fast)}color-swatch:hover{transform:scale(1.12)}color-swatch[state=chosen]{border-color:var(--on-surface);transform:scale(1.18)}join-card club-button{justify-content:center;padding:16px;font-size:18px}