/* =================================================================
   Adom Union — Spin the wheel (Refer a friend card + after-login popup)
   Markup: referrals.html (.spin-card) and assets/spin.js (.spin-pop).
   Both share the stage, wheel, status pill and Spin button below.
   ================================================================= */

/* ---------- stage: the soft panel the wheel sits on ---------- */
.spin-stage { position:relative; isolation:isolate; display:grid; place-items:center; padding:34px 26px 26px; overflow:hidden;
  background:radial-gradient(60% 55% at 50% 52%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), radial-gradient(120% 90% at 0% 0%, #FFE1EC, rgba(255,225,236,0) 60%), radial-gradient(110% 90% at 100% 100%, #FFE6D6, rgba(255,230,214,0) 60%), #FFF3F7; }
.spin-stage::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.55;
  background-image:radial-gradient(circle, rgba(251,60,127,.28) 1.2px, transparent 1.6px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 38%, #000 75%); mask-image:radial-gradient(circle at 50% 50%, transparent 38%, #000 75%); }
body[data-theme="dark"] .spin-stage { background:radial-gradient(60% 55% at 50% 52%, rgba(251,60,127,.16), rgba(251,60,127,0) 70%), radial-gradient(120% 90% at 0% 0%, rgba(251,60,127,.18), transparent 60%), radial-gradient(110% 90% at 100% 100%, rgba(255,107,74,.14), transparent 60%), rgba(255,255,255,.03); }

/* ---------- wheel ---------- */
.wheel-box { position:relative; width:100%; max-width:260px; aspect-ratio:1; margin:0 auto; }
.wheel-box::before { content:""; position:absolute; inset:-11px; border-radius:50%; background:linear-gradient(145deg, #FF4F8B, #C8104F 55%, #FF6B4A);
  box-shadow:0 22px 40px -18px rgba(200,16,79,.75), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(80,0,30,.35); }
.wheel { position:absolute; inset:0; border-radius:50%; overflow:hidden; transform:rotate(0deg); will-change:transform; box-shadow:inset 0 0 0 3px rgba(255,255,255,.7); }
.wheel svg { display:block; width:100%; height:100%; }
.wheel.spinning { transition:transform 4.6s cubic-bezier(.12,.62,.08,1); }
.wheel-lights { position:absolute; inset:-11px; z-index:1; border-radius:50%; pointer-events:none; container-type:size; }
.wheel-lights i { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#FFF6D6;
  box-shadow:0 0 6px 1px rgba(255,230,150,.9); transform:rotate(var(--a)) translateY(calc(-50cqw + 5.5px)); }
.wheel-box.is-spinning .wheel-lights i:nth-child(odd) { animation:spinBlink .5s steps(1) infinite; }
.wheel-box.is-spinning .wheel-lights i:nth-child(even) { animation:spinBlink .5s steps(1) infinite reverse; }
@keyframes spinBlink { 50% { background:rgba(255,255,255,.35); box-shadow:none; } }
.wheel-pin { position:absolute; left:50%; top:-20px; transform:translateX(-50%); width:32px; height:40px; z-index:3; filter:drop-shadow(0 5px 6px rgba(36,16,25,.35)); }
.wheel-hub { position:absolute; left:50%; top:50%; width:22%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; z-index:2; display:grid; place-items:center;
  background:#fff; color:var(--accent-deep); box-shadow:0 0 0 5px rgba(255,255,255,.55), 0 6px 14px -6px rgba(36,16,25,.5); }
.wheel-hub svg { width:42%; height:42%; }

/* ---------- copy, status and actions ---------- */
.spin-eyebrow { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-deep); background:var(--accent-soft); border:1px solid rgba(251,60,127,.25); }
.spin-eyebrow svg { width:12px; height:12px; }
body[data-theme="dark"] .spin-eyebrow { color:#FF8FB5; }
.spin-lead { margin:6px 0 0; font-size:.88rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty; }
.spin-left { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px; font-size:.78rem; font-weight:700; background:var(--accent-soft); color:var(--accent-deep); border:1px solid rgba(251,60,127,.3); }
.spin-left::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 3px rgba(251,60,127,.18); }
.spin-left.off { background:var(--bg-2); color:var(--muted); border-color:var(--line); }
.spin-left.off::before { background:var(--muted-2); box-shadow:0 0 0 3px rgba(120,100,110,.14); }
.spin-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.spin-actions .btn svg { width:18px; height:18px; }
.spin-go { gap:9px; padding-left:24px; padding-right:24px; font-weight:700; box-shadow:0 16px 30px -14px rgba(251,60,127,.85), inset 0 1px 0 rgba(255,255,255,.25); }
.spin-go:not(:disabled):hover svg { transform:rotate(-40deg); }
.spin-go svg { transition:transform .3s; }
.spin-actions .btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; filter:grayscale(.35); }
.spin-note { margin:0; font-size:.76rem; line-height:1.5; color:var(--muted); }
.spin-note:empty { display:none; }

/* ---------- Refer a friend: card ----------
   Its own look: the wheel sits on a deep wine stage (the referral hero's colours) with a gold rim,
   gold lights and a sunburst; the spin count is shown on the stage, the prizes are listed beside it. */
.spin-card { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); padding:0; overflow:hidden; position:relative; border-color:rgba(200,16,79,.2);
  box-shadow:0 1px 2px rgba(36,16,25,.04), 0 22px 44px -32px rgba(120,10,50,.65); }
.spin-card .spin-stage { height:100%; min-height:340px; align-content:center; gap:20px; padding:42px 28px 24px; color:#fff;
  background:radial-gradient(70% 55% at 50% 42%, rgba(255,107,74,.34), rgba(255,107,74,0) 70%), radial-gradient(120% 90% at 0% 0%, #A3124A, rgba(163,18,74,0) 60%), linear-gradient(160deg, #6E0B33, #4A0622 60%, #3A0419); }
.spin-card .spin-stage::before { opacity:.5; background-image:repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,214,140,.10) 0deg 6deg, transparent 6deg 18deg);
  background-size:auto; -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 20%, transparent 72%); mask-image:radial-gradient(circle at 50% 42%, #000 20%, transparent 72%); }
.spin-card .spin-stage::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.7;
  background-image:radial-gradient(circle, rgba(255,226,160,.9) 1px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,.7) .8px, transparent 1.4px);
  background-size:68px 74px, 41px 53px; background-position:12px 18px, 30px 6px; -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%); }
body[data-theme="dark"] .spin-card .spin-stage { background:radial-gradient(70% 55% at 50% 42%, rgba(255,107,74,.26), rgba(255,107,74,0) 70%), linear-gradient(160deg, #520828, #2A0313); }
.spin-card .wheel-box { max-width:250px; }
.spin-card .wheel-box::before { inset:-13px; background:conic-gradient(from 200deg, #FDE68A, #F59E0B, #B45309, #FCD34D, #FFF3C4, #F59E0B, #FDE68A);
  box-shadow:0 26px 46px -18px rgba(0,0,0,.65), 0 0 0 4px rgba(255,214,140,.16), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(120,53,15,.45); }
.spin-card .wheel { box-shadow:inset 0 0 0 3px rgba(120,53,15,.35); }
.spin-card .wheel-lights { inset:-13px; }
.spin-card .wheel-lights i { background:#FFFBEB; box-shadow:0 0 7px 2px rgba(255,236,170,.95); transform:rotate(var(--a)) translateY(calc(-50cqw + 6.5px)); }
.spin-card .wheel-pin { top:-24px; width:34px; height:42px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.spin-card .wheel-pin path { fill:#FCD34D; }
.spin-card .wheel-pin circle { fill:#9E0F45; }
.spin-card .wheel-hub { background:linear-gradient(145deg, #FFF7DB, #FCD34D); color:#9E0F45; box-shadow:0 0 0 5px rgba(255,236,170,.4), 0 6px 14px -6px rgba(0,0,0,.6); }
.spin-card .spin-stage .spin-left { position:relative; color:#FFF3D6; background:rgba(255,255,255,.1); border-color:rgba(255,214,140,.35); backdrop-filter:blur(4px); }
.spin-card .spin-stage .spin-left::before { background:#FCD34D; box-shadow:0 0 0 3px rgba(252,211,77,.25); }
.spin-card .spin-stage .spin-left.off { color:rgba(255,255,255,.78); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.spin-card .spin-stage .spin-left.off::before { background:rgba(255,255,255,.5); box-shadow:none; }

.spin-card .spin-body { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:28px 30px; min-width:0; }
.spin-card .spin-head h2 { margin:10px 0 0; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.spin-card .spin-lead { max-width:58ch; }
/* prizes on the wheel — drawn from the wheel's own segments */
.spin-prizes { width:100%; padding:12px 14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
body[data-theme="dark"] .spin-prizes { background:rgba(255,255,255,.04); }
.sp-k { display:block; margin-bottom:8px; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sp-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.sp-list li { display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 7px; border-radius:999px; font-size:.78rem; font-weight:700; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); }
.sp-list li i { width:14px; height:14px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1.5px rgba(126,10,53,.28); }
.spin-card .spin-actions .btn { min-height:46px; }
.spin-rules { list-style:none; margin:0; padding:14px 0 0; width:100%; border-top:1px dashed var(--line-2); display:grid; gap:8px; }
.spin-rules li { display:flex; gap:9px; align-items:flex-start; font-size:.79rem; color:var(--ink-2); line-height:1.45; }
.spin-rules svg { width:16px; height:16px; flex:none; margin-top:1px; padding:3px; border-radius:50%; color:#fff; background:var(--fire-2); }
@media (max-width:1100px) and (min-width:761px){ .spin-card { grid-template-columns:minmax(0,280px) minmax(0,1fr); } .spin-card .wheel-box { max-width:210px; } .spin-card .spin-body { padding:24px; } }
@media (max-width:760px){
  .spin-card { grid-template-columns:1fr; }
  .spin-card .spin-stage { min-height:0; gap:18px; padding:40px 24px 22px; }
  .spin-card .wheel-box { max-width:232px; }
  .spin-card .spin-body { gap:14px; padding:20px 18px 22px; }
  .spin-card .spin-actions { width:100%; }
  .spin-card .spin-actions .btn { flex:1 1 auto; justify-content:center; }
}

/* ---------- after-login popup ---------- */
.dlg.spin-pop { position:relative; width:min(360px, 100%); padding:0; overflow:hidden; text-align:center; }
.spin-pop .spin-stage { padding:30px 20px 18px; }
.spin-pop .wheel-box { max-width:196px; }
.spin-x { position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid rgba(251,60,127,.22); background:rgba(255,255,255,.92); color:var(--ink-2); box-shadow:0 6px 16px -8px rgba(36,16,25,.45); transition:color .2s, border-color .2s, transform .2s; }
.spin-x:hover { color:var(--pink); border-color:var(--pink); transform:rotate(90deg); }
.spin-x:focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
.spin-x svg { width:16px; height:16px; }
body[data-theme="dark"] .spin-x { background:rgba(21,10,15,.9); color:#fff; border-color:rgba(255,255,255,.18); }
.spin-copy { display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 22px 14px; }
.spin-copy h2 { margin:0; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.spin-copy .spin-lead { margin:-6px 0 0; max-width:34ch; font-size:.84rem; }
.spin-pop .spin-note { display:none; }  /* the status pill already says why spins are unavailable */
.spin-copy .spin-actions { width:100%; flex-direction:column; gap:6px; }
.spin-copy .spin-actions .btn { width:100%; justify-content:center; }
.spin-copy .spin-go { min-height:48px; font-size:1rem; }
.spin-links { display:flex; align-items:center; justify-content:center; gap:6px 18px; flex-wrap:wrap; width:100%; padding-top:8px; border-top:1px solid var(--line); }
.spin-links a, .spin-links button { display:inline-flex; align-items:center; gap:5px; padding:4px 2px; border:0; background:none; font:600 .82rem var(--font); cursor:pointer; }
.spin-links a { color:var(--accent-deep); }
.spin-links a svg { width:14px; height:14px; transition:transform .2s; }
.spin-links a:hover svg { transform:translateX(3px); }
.spin-links button { color:var(--muted); }
.spin-links button:hover { color:var(--ink); }
body[data-theme="dark"] .spin-links a { color:#FF8FB5; }
@media (max-width:560px){
  .dlg.spin-pop { width:100%; padding-bottom:env(safe-area-inset-bottom); }
  .spin-pop .spin-stage { padding:28px 18px 16px; }
  .spin-pop .wheel-box { max-width:176px; }
}
@media (max-height:700px) and (min-width:561px){ .spin-pop .wheel-box { max-width:168px; } .spin-pop .spin-stage { padding:26px 20px 16px; } }

/* ---------- result dialog ---------- */
.spin-res-ovl { z-index:92; }
.spin-res { text-align:center; }
.spin-res .art { width:72px; height:72px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:var(--fire-2); color:#fff; box-shadow:0 14px 28px -12px rgba(251,60,127,.8); }
.spin-res .art.muted { background:var(--bg-2); color:var(--muted); box-shadow:none; border:2px dashed var(--line-2); }
.spin-res .art svg { width:32px; height:32px; }
.spin-res h3 { margin:0 0 6px; font-size:1.2rem; }
.spin-res .prize { display:inline-block; margin:6px 0 10px; padding:6px 14px; border-radius:12px; font-weight:800; letter-spacing:.04em; background:var(--accent-soft); color:var(--accent-deep); border:1.5px dashed rgba(251,60,127,.45); }
.spin-res p { margin:0 auto; max-width:380px; font-size:.86rem; color:var(--ink-2); }
.spin-res .dlg-foot { justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .wheel.spinning { transition-duration:.8s; }
  .wheel-box.is-spinning .wheel-lights i { animation:none; }
  .spin-x:hover, .spin-go:not(:disabled):hover svg { transform:none; }
}