/*
 * BetBattles invite sheet (js/ui/invite.js). Owner: ARCHITECT.
 *   .invite-sheet · .inv-sub · .inv-link .inv-pill .inv-label .inv-raw .inv-copy · .inv-apps .inv-app .inv-dot .inv-name
 *   · .inv-code-row .inv-code
 * Bottom sheet on phones, the centred modal on desktop. Brand colours live only on the round app buttons.
 */
.invite-sheet .sheet-body { overflow-x: hidden; }
.inv-sub { margin: -6px 0 16px; font: 700 14.5px/1.35 var(--f-ui); color: var(--ink-3); }

/* the link + Copy link */
.inv-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.inv-pill {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 16px 0 15px;
  border-radius: 18px; background: var(--night-0); border: 1px solid var(--line-2);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .28); color: var(--ink);
}
.inv-pill > .ic { flex: none; color: var(--grape-ink); }
.inv-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 15.5px/1.2 var(--f-display); letter-spacing: -.01em; }
.inv-raw { display: none; }
.inv-pill.is-manual { border-color: var(--grape); box-shadow: 0 0 0 3px var(--grape-soft); }
.inv-pill.is-manual .inv-label { display: none; }
.inv-pill.is-manual .inv-raw {
  display: block; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  color: var(--ink); font: 700 16px/1 var(--f-ui); user-select: all; -webkit-user-select: all;
}
.inv-copy { height: 52px; min-width: 136px; border-radius: 16px; font-size: 15.5px; }
.inv-copy > span { pointer-events: none; }
.inv-copy.is-done .ic { animation: invPop .32s var(--spring); }
@keyframes invPop { from { transform: scale(.4); } }

/* the TikTok-style row of round app buttons (scrolls sideways when it doesn't fit; never squashed) */
.inv-apps {
  display: flex; gap: 6px; margin: 20px -20px 0; padding: 6px 20px 4px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.inv-apps::-webkit-scrollbar { display: none; }
.sheet.is-modal .inv-apps { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
.inv-app:first-child { margin-left: auto; }   /* centred when it fits, scrollable from the start when it doesn't */
.inv-app:last-child { margin-right: auto; }
.inv-app {
  flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 4px;
  background: none; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none; color: var(--ink-2);
  scroll-snap-align: start; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.inv-app:focus-visible { outline: none; }
.inv-app:focus-visible .inv-dot { outline: 3px solid var(--grape); outline-offset: 3px; }
.inv-dot {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  transition: transform .09s var(--out), box-shadow .09s var(--out), filter .15s;
}
.inv-dot svg { display: block; }
.inv-app:hover .inv-dot { filter: brightness(1.07); }
.inv-name { font: 700 12.5px/1.15 var(--f-ui); white-space: nowrap; }
.inv-app:hover .inv-name { color: var(--ink); }
/* brand circles with the chunky under-edge (press = down 4px, edge gone) */
.inv-dot.is-sms { background: linear-gradient(180deg, #5BE07B, #29B84C); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #17803A; }
.inv-dot.is-wa { background: #25D366; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #128C4B; }
.inv-dot.is-dc { background: #5865F2; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 #3640B5; }
.inv-dot.is-sc { background: #FFFC00; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 #B3AF00; }
.inv-dot.is-tg { background: #2AABEE; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #1574AE; }
.inv-dot.is-x { background: #000; border: 1.5px solid var(--line-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #000; }
.inv-dot.is-more { background: var(--night-4); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 #16102F; }
.inv-app:active .inv-dot { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 transparent; }

/* or tell them the code */
.inv-code-row { margin: 12px 0 0; text-align: center; }
.inv-code {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px;
  background: none; border: 0; border-radius: 12px; cursor: pointer; font: 700 14px/1.2 var(--f-ui); color: var(--ink-3);
  -webkit-tap-highlight-color: transparent;
}
.inv-code b {
  padding: 6px 9px 6px 11px; border-radius: 9px; background: var(--night-3); border: 1px dashed var(--line-3);
  font: 800 14px/1 var(--f-display); letter-spacing: .14em; color: var(--ink);
}
.inv-code:hover b { border-color: var(--grape); }
.inv-code:active b { transform: translateY(1px); }

/* phones: the whole link on one line, the big Copy link button right under it (never a cut-off link) */
@media (max-width: 460px) {
  .inv-link { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inv-pill { justify-content: center; }
  .inv-copy { width: 100%; }
  /* the row always overflows here: size the buttons so 4½ show, the 5th clearly half peeking at the edge
     (a fixed 72px left it 7/8 visible at 390, which read as a clipped label, not "swipe for more") */
  .inv-app { flex-basis: max(64px, calc((100% + 23px) / 4.5 - 6px)); }
}
@media (prefers-reduced-motion: reduce) {
  .inv-copy.is-done .ic { animation: none; }
}