.v3-spin-invite {
  --invite-accent:var(--v3-coin-number,#ffe6c9);
  --invite-ink:#f3f3f3;
  --invite-inset:clamp(22px,5vw,34px);
  --invite-reward-size:clamp(176px,34vw,226px);
  box-sizing:border-box;
  position:fixed;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(668px,calc(100% - 32px));
  max-width:none;
  height:auto;
  max-height:calc(100dvh - 32px);
  margin:0;
  padding:var(--invite-inset);
  overflow:clip;
  overscroll-behavior:contain;
  border:1px solid #ffffff14;
  border-radius:26px;
  background:radial-gradient(ellipse at 82% 47%,#ffffff06,transparent 47%),linear-gradient(135deg,#232323,#151515);
  color:var(--invite-ink);
  color-scheme:dark;
  box-shadow:0 24px 80px #0008,inset 0 1px 0 #ffffff0e;
  font:500 1rem/1.4 'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.v3-spin-invite::backdrop {
  background:rgb(0 0 0 / .52);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.v3-spin-invite__header {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.v3-spin-invite .v3-spin-invite__close {
  flex:0 0 44px;
  width:44px;
  height:44px;
  cursor:pointer;
}

.v3-spin-invite__brand {
  margin:0;
  color:var(--invite-accent);
  font-size:.875rem;
  font-weight:800;
  letter-spacing:.19em;
}

.v3-spin-invite__layout {
  display:flex;
  align-items:center;
  gap:clamp(14px,4vw,28px);
  margin-top:12px;
}

.v3-spin-invite__content {
  position:relative;
  z-index:1;
  flex:1 1 0;
  min-width:0;
  container-type:inline-size;
}

.v3-spin-invite__heading {
  margin:0;
  outline:none;
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.045em;
}

.v3-spin-invite__prompt {
  display:block;
  color:#fff;
  font-size:clamp(1.2rem,7.8cqi,1.75rem);
  line-height:1.14;
}

.v3-spin-invite__result {
  display:block;
  margin-top:.16em;
  font-size:min(3.25rem,14cqi,calc(100cqi / var(--invite-score-em)));
  white-space:nowrap;
}

.v3-spin-invite__score {
  color:var(--invite-accent);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.v3-spin-invite__accept {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  min-height:48px;
  max-width:100%;
  margin-top:20px;
  padding:.7em 1.3em;
  border:0;
  border-radius:100px;
  background:#f3f3f3;
  color:#161616;
  font:800 clamp(.9rem,4.5cqi,1rem)/1.25 'DM Sans',sans-serif;
  text-align:center;
  cursor:pointer;
  transition:background-color 180ms ease,transform 180ms ease;
}

.v3-spin-invite__accept svg { flex:none; }

.v3-spin-invite__accept:active { transform:scale(.97); }

.v3-spin-invite[data-invite-initial-focus] :is(.v3-spin-invite__accept,.v3-spin-invite__close):focus { outline:none; }

.v3-spin-invite:not([data-invite-initial-focus]) :is(.v3-spin-invite__accept,.v3-spin-invite__close):focus-visible {
  outline:2px solid var(--invite-accent);
  outline-offset:3px;
}

.v3-spin-invite__reward {
  position:relative;
  z-index:0;
  flex:none;
  width:var(--invite-reward-size);
  height:var(--invite-reward-size);
  pointer-events:none;
}

.v3-spin-invite__reward > .v3-share-reward-glow,
.v3-spin-invite__reward .v3-coin-upgrade__art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

@media (hover:hover) and (pointer:fine) {
  .v3-spin-invite__accept:hover { background:#fff; }
}

@media (max-width:520px) {
  .v3-spin-invite {
    --invite-inset:clamp(18px,5.4vw,26px);
    --invite-reward-size:clamp(128px,40vw,180px);
  }

  .v3-spin-invite__layout {
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-top:8px;
  }

  .v3-spin-invite__content { flex:none; }

  .v3-spin-invite__reward {
    order:-1;
    align-self:center;
  }
}

@media (max-height:480px) {
  .v3-spin-invite__accept { margin-top:14px; }
}

@media (min-width:521px) and (max-height:480px) {
  .v3-spin-invite {
    --invite-inset:clamp(14px,4dvh,24px);
    --invite-reward-size:clamp(112px,56dvh,210px);
  }

  .v3-spin-invite__layout { margin-top:4px; }
  .v3-spin-invite__prompt { font-size:clamp(1.05rem,5dvh,1.55rem); }
  .v3-spin-invite__result { font-size:min(2.65rem,12dvh,calc(100cqi / var(--invite-score-em))); }
}

@media (max-width:520px) and (max-height:470px), (max-height:275px) {
  .v3-spin-invite { overflow:hidden auto; }
}

@media (prefers-reduced-motion:reduce) {
  .v3-spin-invite__accept,.v3-spin-invite__close { transition:none!important; }
  .v3-spin-invite__close img { transition:none; }
  .v3-spin-invite__close:hover img { transform:none; }
}
