@layer components{.room-invitation{--invitation-code-size:min(clamp(2.75rem, calc(var(--stage-unit) * 14), 9rem), 20cqi);--invitation-qr-max-width:16rem;align-items:stretch;gap:var(--space-l);flex-direction:column;justify-content:center;width:100%;min-width:0;display:flex;container-type:inline-size}.room-invitation .code{--edge:.1875rem;border-radius:var(--radius-l);box-shadow:0 var(--edge) 0 0 var(--chipboard), var(--shadow-piece);transition:transform var(--transition-fast,0s) var(--ease-out), box-shadow var(--transition-fast,0s) var(--ease-out);border:0;position:relative}.room-invitation .code:before,.room-invitation .code:after{background:var(--ground,var(--board));content:"";width:.625rem;height:.1875rem;position:absolute;inset-inline-start:50%;translate:-50%}.room-invitation .code:before{border-radius:0 0 var(--radius-xs) var(--radius-xs);top:0}.room-invitation .code:after{border-radius:var(--radius-xs) var(--radius-xs) 0 0;bottom:0}.room-invitation .code{--ground:var(--field);background:var(--tile-2);color:var(--tile-ink);align-items:center;gap:var(--space-xs);padding:var(--space-s) var(--space-m) var(--space-m);text-align:center;flex-direction:column;display:flex}.room-invitation .code .button{--ground:var(--tile-2)}.room-invitation .room-code{font-family:var(--font-display);font-size:clamp(3.5rem, var(--stage-unit) * 17, 15rem);font-variation-settings:"opsz" 96;letter-spacing:-.01em;letter-spacing:.02em;font-weight:800;font-stretch:80%;line-height:.9;font-size:var(--invitation-code-size);-webkit-user-select:text;user-select:text;word-break:break-all}.room-invitation .code-caption{font-weight:700;line-height:1.2;font-size:clamp(.9375rem, var(--stage-unit) * 2.2, 1.25rem)}.room-invitation .qr{align-items:center;gap:var(--space-s) var(--space-m);grid-template-columns:minmax(0, var(--invitation-qr-max-width));text-align:center;justify-content:center;display:grid}@container (width>=25rem){.room-invitation .qr{grid-template-columns:minmax(0, min(var(--invitation-qr-max-width), 45cqi)) minmax(0, 1fr);text-align:start;justify-content:stretch}}.room-invitation .qr-card{--edge:.1875rem;background:var(--card);border-radius:var(--radius-m);box-shadow:0 var(--edge) 0 var(--chipboard), var(--shadow-card);color:var(--card-ink);padding:clamp(var(--space-xs), 4%, var(--space-s))}.room-invitation .qr-card svg{width:100%;height:auto;display:block}.room-invitation .qr-words{gap:var(--space-2xs);flex-direction:column;min-width:0;display:flex}.room-invitation .invite{font-weight:700;line-height:1.3;font-size:clamp(1rem, var(--stage-unit) * 2.2, 1.25rem);text-wrap:balance}.room-invitation .link-actions{gap:var(--space-xs);margin-top:var(--space-xs);flex-wrap:wrap;justify-content:center;display:flex}@container (width>=25rem){.room-invitation .link-actions{justify-content:start}}.room-invitation .join-url{font-size:clamp(var(--text-xs), var(--stage-unit) * 1.8, 1rem);color:var(--ink-muted);overflow-wrap:break-word;-webkit-user-select:text;user-select:text;font-weight:500;line-height:1.35}}
