/* Friends, invite landing and taste match pages. */
.invite-card h1 { margin: 0; font-size: 1.2rem; }
.invite-link { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface2); font-size: 0.85rem; word-break: break-all; user-select: all; -webkit-user-select: all; }

.friend { padding: 0 16px 0 0; }
.friend-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 16px; min-height: 56px; }
.match-band { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 0.8rem; white-space: nowrap; }

.invite { align-items: flex-start; }
.invite form, .invite .btn { align-self: stretch; }
.invite-avatar .avatar { width: 72px; height: 72px; font-size: 1.8rem; }
.invite .btn { margin-top: 8px; }
.lede { margin: 0; color: var(--ink2); }

.countdown { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.countdown-label { margin: 0; font: 900 6rem/1 var(--font-num); color: var(--accent-text); }

.match-hero { text-align: center; padding: 24px 0 8px; }
.match-hero .lede { margin-top: 16px; }
.pair { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pair .avatar { width: 72px; height: 72px; font-size: 1.8rem; }
.times { font-size: 1.4rem; color: var(--ink2); }
.percent { margin: 20px 0 0; font: 900 1.6rem var(--font-num); }
.band { margin: 8px 0 0; font-weight: 800; font-size: 1.3rem; color: var(--accent-text); }

.duo { display: flex; gap: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.duo-head { justify-content: flex-end; padding: 0 16px 6px; }
.duo-head > span { display: flex; justify-content: center; width: 52px; }