/* ============================================================
   Roleta de boas-vindas (assets/js/roleta.js)
   Duas fases no mesmo bloco: [data-fase="roda"] e [data-fase="premio"].
   ============================================================ */
.rl{display:flex;flex-direction:column;gap:.6rem;text-align:center}
.rl[data-fase="roda"] .rl-premio{display:none}
.rl[data-fase="premio"] .rl-roda-wrap{display:none}

.rl-pill{
  display:inline-block;align-self:center;
  background:linear-gradient(100deg,var(--theme),var(--magenta));color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;
  padding:.32rem .9rem;border-radius:99px;margin-bottom:.2rem;
}
.rl-pill.ok{background:linear-gradient(100deg,#16a34a,#22c55e)}
.rl-h{font-size:1.45rem;line-height:1.22;font-weight:800;color:var(--title);margin:.1rem 0}
.rl-grad{
  background:linear-gradient(100deg,var(--theme),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rl-sub{font-size:.95rem;color:var(--muted);margin:0;line-height:1.5}
.rl-sub b{color:var(--content)}
.rl-mini{font-size:.78rem;color:#a8a29e}

/* ---------- a roda ---------- */
.rl-stage{position:relative;width:min(320px,86vw);margin:1rem auto .4rem;aspect-ratio:1}
.rl-roda{width:100%;height:100%;will-change:transform;transform:rotate(0deg)}
.rl-svg{width:100%;height:100%;display:block;overflow:visible}
.rl-lbl{font:800 12px/1 var(--font);fill:#3b3350;letter-spacing:.02em}
.rl-lbl .rl-small{font-size:9.5px;font-weight:700;fill:#7c6f96}
.rl-lbl.win{fill:#fff;font-size:12.5px}
.rl-lbl.off{fill:#b5add0;font-weight:600}

.rl-ponteiro{
  position:absolute;left:50%;top:-6px;z-index:3;transform:translateX(-50%);
  width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:26px solid var(--magenta);
  filter:drop-shadow(0 3px 4px rgba(162,28,175,.35));
  transform-origin:50% 0;
}
.rl.girando .rl-ponteiro{animation:rlTick .11s linear infinite}
.rl.quase .rl-ponteiro{animation:rlQuase .32s ease-out 1}
@keyframes rlTick{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(-7deg)}}
@keyframes rlQuase{0%{transform:translateX(-50%) rotate(-12deg)}100%{transform:translateX(-50%) rotate(0)}}

.rl-girar{
  position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--theme),var(--magenta));color:#fff;
  font:800 .85rem/1 var(--font);letter-spacing:.06em;
  box-shadow:0 10px 24px -8px rgba(109,40,217,.6),0 0 0 6px #fff;
  transition:transform .16s,filter .16s;
  animation:rlPulse 1.8s ease-in-out infinite;
}
.rl-girar:hover{filter:brightness(1.06)}
.rl-girar:active{transform:translate(-50%,-50%) scale(.95)}
.rl-girar:disabled{animation:none;opacity:.9;cursor:default}
@keyframes rlPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

.rl-cota{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem .9rem;margin-top:.4rem;text-align:left;
}
.rl-cota-t{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}
.rl-cota-t b{color:var(--danger);font-weight:700}
.rl-cota-bar{height:6px;border-radius:99px;background:#f1edf9;margin-top:.45rem;overflow:hidden}
.rl-cota-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--danger),#f97316)}
.rl-nota{font-size:.76rem;color:#a8a29e;margin:.2rem 0 0}

/* ---------- o premio ---------- */
.rl-premio{position:relative;display:flex;flex-direction:column;gap:.55rem;align-items:center;animation:rlIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes rlIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.rl-badge{font-size:2.6rem;line-height:1;animation:rlPop .6s cubic-bezier(.22,1.4,.36,1) both}
@keyframes rlPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.rl-cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--theme-dark);font-size:1.05rem}

.rl-conta{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.35rem 1rem;text-align:left;margin-top:.3rem;
}
.rl-linha{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid #f1edf9;font-size:.93rem}
.rl-linha:last-child{border-bottom:0}
.rl-linha i{font-style:normal;color:#a8a29e;font-size:.8rem}
.rl-linha s{color:#a8a29e;margin-right:.25rem}
.rl-zero{color:var(--success)}
.rl-linha.total{font-weight:800;color:var(--title);font-size:1rem}
.rl-linha.total span:last-child{color:var(--theme-dark);font-size:1.15rem}
.rl-porque{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0;text-align:left}
.rl-porque b{color:var(--content)}

.rl-timer{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--radius);padding:.7rem 1rem;margin-top:.2rem;
}
.rl-timer-t{font-size:.78rem;color:#9a3412;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.rl-timer-n{font-size:1.7rem;font-weight:900;color:#c2410c;font-variant-numeric:tabular-nums;line-height:1.1}
.rl-timer-n.urgent{color:var(--danger);animation:rlBlink 1s steps(2) infinite}
@keyframes rlBlink{50%{opacity:.45}}
.rl-timer-d{font-size:.76rem;color:#9a3412;opacity:.85}

.rl-sim{margin-top:.5rem}
.rl-nao{
  background:none;border:0;cursor:pointer;color:#a8a29e;font-size:.82rem;
  text-decoration:underline;text-underline-offset:3px;padding:.5rem;
}
.rl-nao:hover{color:var(--muted)}

/* confete */
.rl-confete{position:absolute;inset:-1rem 0 auto;height:0;pointer-events:none;z-index:1}
.rl-confete i{
  position:absolute;top:0;width:8px;height:12px;border-radius:2px;opacity:0;
  animation:rlFall linear both;
}
@keyframes rlFall{
  0%{opacity:1;transform:translateY(-10px) rotate(0)}
  100%{opacity:0;transform:translateY(46vh) rotate(540deg)}
}

/* folha de confirmacao da recusa */
.rl-sheet[hidden]{display:none}
.rl-sheet{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center;padding:1rem;animation:rlFade .2s both}
@keyframes rlFade{from{opacity:0}to{opacity:1}}
.rl-sheet-box{
  width:100%;max-width:var(--container);background:#fff;border-radius:1.25rem;
  padding:1.3rem 1.2rem 1rem;display:flex;flex-direction:column;gap:.6rem;text-align:center;
  animation:rlUp .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rlUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.rl-sheet-box h3{margin:0;font-size:1.2rem;color:var(--title)}
.rl-sheet-box p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.5}

/* pre-aviso na etapa do plano recomendado */
.presente-aviso{
  display:flex;gap:.7rem;align-items:flex-start;text-align:left;
  background:linear-gradient(135deg,#f5f3ff,#fdf2f8);border:1px solid #e9d5ff;
  border-radius:var(--radius);padding:.85rem .95rem;
}
.presente-aviso .ico{font-size:1.5rem;line-height:1;flex:0 0 auto}
.presente-aviso .t{font-weight:800;color:var(--title);font-size:.95rem;margin-bottom:.15rem}
.presente-aviso .d{font-size:.85rem;color:var(--muted);line-height:1.5}
.presente-aviso .d b{color:var(--theme-dark)}