/* Direct platform page: self-service sign-up (QR or link) for players and agents. */
.join-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:16px}
.join-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;min-width:0;scroll-margin-top:110px}
.join-card h3{margin:0;font-size:19px;align-self:stretch;text-align:left}
.join-go{width:100%;justify-content:center}
.join-qr{order:-1}
.join-card h3{order:-2}
.join-qr svg.qr-code{width:200px;height:200px}
.join-host{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.copy-inline{border:0;background:none;padding:0 2px;min-height:32px;font:inherit;font-size:13px;font-weight:600;color:var(--primary-hover);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.join-pending{align-self:stretch;text-align:left;background:var(--subtle);border-radius:10px;padding:16px;font-size:14px;color:var(--muted)}
.join-pending p{margin:0 0 6px}.join-pending strong{color:var(--text)}
.join-pending .text-link{min-height:40px}
.join-more{align-self:flex-start;margin-top:auto}
.steps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.steps-grid h3{font-size:17px;margin:0 0 10px}
.steps-stuck{margin:16px 0 0;font-size:14px;color:var(--muted)}
.steps-stuck a{color:var(--primary-hover);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;margin:0;padding:10px 18px;border-radius:999px;background:var(--dark);color:var(--light-text);font-size:14px;box-shadow:0 8px 24px rgb(0 0 0/25%)}
.toast[hidden]{display:none}
/* On phones the link button comes first: you cannot scan a QR on your own screen. */
@media(max-width:720px){.join-grid,.steps-grid{grid-template-columns:1fr}.join-qr{order:0}.join-qr svg.qr-code{width:160px;height:160px}}
/* Desktop: a small QR right in the first screen, so visitors can scan without scrolling. */
.hero-qr{margin:18px 0 0;display:inline-flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.hero-qr svg.qr-code{width:104px;height:104px;border:0;border-radius:6px}
.hero-qr figcaption{margin:0;font-size:13px;font-weight:600;color:var(--text);max-width:9em;line-height:1.5}
@media(max-width:720px){.hero-qr{display:none}}
/* Agent links are for approved agents only: everyone else sees how to unlock them. */
.join-locked{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--subtle);border-radius:10px;padding:18px 16px;font-size:14px;color:var(--muted)}
.join-locked p{margin:0}.join-locked strong{color:var(--text);font-size:15px}
.join-lock{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--primary-hover)}
.join-lock .ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:currentColor}
.join-locked .join-go{margin-top:6px}
.join-locked .text-link{min-height:40px}