/* ===== Defaults (fallback) ===== */
:root {
  --qo-bg: #ffffff;
  --qo-text: #0f172a;
  --qo-subtle: #6b7280;
  --qo-muted: #94a3b8;

  --qo-accent-1: #ff7a1a;
  --qo-accent-2: #ff5a00;
  --qo-accent-press: #e04e00;

  --qo-ghost-bg: #fff8f3;
  --qo-ghost-ring: #ffd7c0;

  --qo-backdrop: rgba(17,24,39,.50);
  --qo-ring: rgba(37,99,235,.55);
}

/* ===== Paletas ===== */
/* SUNSET (laranjas quentes) */
.qo--sunset{
  --qo-bg: #ffffff;
  --qo-text: #0f172a;
  --qo-subtle: #6b7280;
  --qo-muted: #94a3b8;

  --qo-accent-1: #ff7a1a;
  --qo-accent-2: #ff5a00;
  --qo-accent-press: #e04e00;

  --qo-ghost-bg: #fff8f3;
  --qo-ghost-ring: #ffd7c0;

  --qo-backdrop: rgba(17,24,39,.50);
  --qo-ring: rgba(37,99,235,.55);
}

/* MINT (verdes frescos) */
.qo--mint{
  --qo-bg: #f7fffb;
  --qo-text: #0f2d23;
  --qo-subtle: #3c6e59;
  --qo-muted: #7aa89a;

  --qo-accent-1: #2fd19a;
  --qo-accent-2: #19b883;
  --qo-accent-press: #14956b;

  --qo-ghost-bg: #e9fff5;
  --qo-ghost-ring: #c8f7e3;

  --qo-backdrop: rgba(6, 31, 24, .50);
  --qo-ring: rgba(16,185,129,.45);
}

/* ROYAL (azul/violeta premium) */
.qo--royal{
  --qo-bg: #f8f9ff;
  --qo-text: #1f2547;
  --qo-subtle: #4b5581;
  --qo-muted: #7b84b3;

  --qo-accent-1: #6370ff;
  --qo-accent-2: #4a57d6;
  --qo-accent-press: #3b46b2;

  --qo-ghost-bg: #eef0ff;
  --qo-ghost-ring: #d5dafd;

  --qo-backdrop: rgba(15, 18, 46, .50);
  --qo-ring: rgba(99,102,241,.45);
}

/* SLATE (neutro minimalista) */
.qo--slate{
  --qo-bg: #ffffff;
  --qo-text: #111827;
  --qo-subtle: #6b7280;
  --qo-muted: #9ca3af;

  --qo-accent-1: #6b7280;
  --qo-accent-2: #4b5563;
  --qo-accent-press: #3f4550;

  --qo-ghost-bg: #f3f4f6;
  --qo-ghost-ring: #e5e7eb;

  --qo-backdrop: rgba(17,24,39,.50);
  --qo-ring: rgba(59,130,246,.45);
}

/* ===== Base: trava a página ===== */
.qo-lock { overflow: hidden; }

/* ===== Overlay ===== */
.qo{
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center;
}
.qo__backdrop{
  position: absolute; inset: 0;
  background: var(--qo-backdrop);
  backdrop-filter: blur(6px) saturate(1.1);
}

/* ===== Card ===== */
.qo__card {
  position: relative;
  width: min(92vw, 560px);
  background: var(--qo-bg);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.06);
  padding: 26px 24px 20px;
  text-align: center;
  transform: translateZ(0);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ===== Barra de progresso ===== */
.qo__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.qo__bar__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--qo-accent-1),var(--qo-accent-2));
  transition: width .35s ease;
}

/* ===== Header ===== */
.qo__progress {
  font-size: 12px;
  color: var(--qo-subtle);
  margin-top: 8px;
  margin-bottom: 4px;
}
.qo__title {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--qo-text);
  margin: 4px 0 16px;
  letter-spacing: .2px;
}

/* ===== Opções ===== */
.qo__options {
  display: grid;
  gap: 12px;
  text-align: left;
  word-wrap: break-word;
}

.qo__btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(180deg, var(--qo-accent-1), var(--qo-accent-2));
  box-shadow: 0 6px 0 var(--qo-accent-press), 0 8px 18px rgba(0,0,0,.12);
  transition: transform .04s ease, filter .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
  white-space: normal; /* Permite a quebra das palavras longas */
}

.qo__btn:hover {
  filter: brightness(.98);
}

.qo__btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 0 var(--qo-accent-press), 0 6px 12px rgba(0,0,0,.12);
}

.qo__btn--ghost {
  background: var(--qo-ghost-bg);
  color: var(--qo-accent-2);
  box-shadow: inset 0 0 0 2px var(--qo-ghost-ring);
}

.qo__btn--ghost:hover {
  filter: none;
  background: color-mix(in srgb, var(--qo-ghost-bg) 92%, #000 8%);
}

.qo__btn--ghost:active {
  transform: translateY(1px);
}

/* ===== Rodapé ===== */
.qo__footer {
  margin-top: 14px;
  font-size: 12px;
  color: var(--qo-muted);
}

/* ===== Loading ===== */
.qo__loading {
  padding: 22px 0 10px;
  text-align: center;
}
.qo__dots {
  display: inline-flex;
  gap: 10px;
  margin: 4px 0 10px;
}
.qo__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--qo-accent-2);
  opacity: .85;
  animation: qo-blink 1s infinite;
}
.qo__dots i:nth-child(2) {
  animation-delay: .15s;
}
.qo__dots i:nth-child(3) {
  animation-delay: .3s;
}
@keyframes qo-blink {
  0%,80%,100%{opacity:.25}
  40%{opacity:1}
}
.qo__loadingText {
  color: var(--qo-accent-2);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
}

/* ===== Foco acessível para <a> e <button> ===== */
.qo .qo__btn:focus {
  outline: none;
}
.qo .qo__btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--qo-ring),
    inset 0 0 0 2px rgba(255,255,255,.85),
    0 6px 0 var(--qo-accent-press),
    0 8px 18px rgba(37,99,235,.12);
  border-radius: 14px;
}

/* ===== Pequenas telas ===== */
@media (max-width: 380px) {
  .qo__card {
    padding: 22px 16px 18px;
    width: min(94vw, 560px);
  }
  .qo__title {
    font-size: 20px;
  }
  .qo__btn {
    padding: 12px 14px;
  }
}

/* === ROSA (pink) === */
.qo--pink .qo__bar__fill {
  background: linear-gradient(90deg, #ff2d7a, #ff8bb0);
}
.qo--pink .qo__btn {
  background: #ff2d7a;
  border-color: #ff2d7a;
  color: #fff;
}
.qo--pink .qo__btn:hover {
  filter: brightness(0.94);
}
.qo--pink .qo__btn--ghost {
  background: #ffe7f0;
  border-color: transparent;
  color: #b21652;
}
.qo--pink .qo__title, .qo--pink .qo__progress {
  color: #3a0a21;
}
.qo--pink .qo__backdrop {
  background: rgba(255, 45, 122, .25);
}
.qo--pink .qo__dots i {
  background: #ff2d7a;
}

/* === ROXO (purple) === */
.qo--purple .qo__bar__fill {
  background: linear-gradient(90deg, #7e3ff2, #b78cff);
}
.qo--purple .qo__btn {
  background: #7e3ff2;
  border-color: #7e3ff2;
  color: #fff;
}
.qo--purple .qo__btn:hover {
  filter: brightness(0.94);
}
.qo--purple .qo__btn--ghost {
  background: #efe7ff;
  border-color: transparent;
  color: #4a21a8;
}
.qo--purple .qo__title, .qo--purple .qo__progress {
  color: #2a1263;
}
.qo--purple .qo__backdrop {
  background: rgba(126, 63, 242, .25);
}
.qo--purple .qo__dots i {
  background: #7e3ff2;
}

/* === BORDÔ (bordo) === */
.qo--bordo .qo__bar__fill {
  background: linear-gradient(90deg, #6b0f1a, #b91337);
}
.qo--bordo .qo__btn {
  background: #b91337;
  border-color: #b91337;
  color: #fff;
}
.qo--bordo .qo__btn:hover {
  filter: brightness(0.94);
}
.qo--bordo .qo__btn--ghost {
  background: #fde4e8;
  border-color: transparent;
  color: #6b0f1a;
}
.qo--bordo .qo__title, .qo--bordo .qo__progress {
  color: #3f0a12;
}
.qo--bordo .qo__backdrop {
  background: rgba(185, 19, 55, .22);
}
.qo--bordo .qo__dots i {
  background: #b91337;
}

/* === VERMELHO PAIXÃO (passion) === */
.qo--passion .qo__bar__fill {
  background: linear-gradient(90deg, #ff003d, #ff6b81);
}
.qo--passion .qo__btn {
  background: #ff003d;
  border-color: #ff003d;
  color: #fff;
}
.qo--passion .qo__btn:hover {
  filter: brightness(0.94);
}
.qo--passion .qo__btn--ghost {
  background: #ffe3e8;
  border-color: transparent;
  color: #9c0a24;
}
.qo--passion .qo__title, .qo--passion .qo__progress {
  color: #680614;
}
.qo--passion .qo__backdrop {
  background: rgba(255, 0, 61, .22);
}
.qo--passion .qo__dots i {
  background: #ff003d;
}
/* ===== Mecanismos portados do Rias (roleta/cartas/tarot/raspadinha) ===== */
.qo__mech { text-align:center; }
/* Roleta */
.qo__wheelWrap{position:relative;width:280px;max-width:84%;aspect-ratio:1/1;margin:4px auto 16px}
.qo__pointer{position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:4;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid #1d1d1f}
.qo__clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1}
.qo__wheel{position:absolute;inset:0;border-radius:50%;transition:transform 4.2s cubic-bezier(.17,.67,.21,.99);will-change:transform}
.qo__hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.7)}
.qo__wlabel{position:absolute;left:50%;top:0;height:50%;width:100px;margin-left:-50px;transform-origin:bottom center;display:flex;justify-content:center;align-items:flex-start;padding-top:18px;color:#fff;font-weight:800;font-size:.76rem;line-height:1.05;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.4);z-index:2}
.qo__result{font-size:1.1rem;font-weight:700;color:#1d1d1f;margin:4px 0 10px}
.qo__result[hidden]{display:none}
/* Cartas (visual) */
.qo__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qo__pick{background:none;border:none;padding:0;cursor:pointer;border-radius:12px;overflow:hidden}
.qo__pick:active{transform:scale(.97)}
.qo__pickImg{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:linear-gradient(135deg,#4b2e83,#7b4ae2);color:#d4af37;font-size:2rem;border:2px solid #d4af37;border-bottom:none;border-radius:12px 12px 0 0}
.qo__pickImg img{width:100%;height:100%;object-fit:cover}
.qo__pickName{display:block;padding:8px 4px;font-size:.85rem;font-weight:700;color:#4b2e83;background:#fffdf6;border:2px solid #d4af37;border-top:none;border-radius:0 0 12px 12px}
/* Tarot */
.qo__tarot{display:flex;gap:12px;justify-content:center}
.qo__tcard{flex:1 1 0;max-width:100px;aspect-ratio:2/3;perspective:800px;background:none;border:none;padding:0;cursor:pointer}
.qo__tinner{position:relative;display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.qo__tcard.is-flipped .qo__tinner{transform:rotateY(180deg)}
.qo__tface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box;padding:6px;font-size:.78rem;font-weight:700;text-align:center}
.qo__tback{background:linear-gradient(135deg,#4b2e83,#7b4ae2);border:2px solid #d4af37}
.qo__tback::after{content:'✦';color:#d4af37;font-size:1.6rem}
.qo__tfront{background:#fffdf6;border:2px solid #d4af37;color:#4b2e83;transform:rotateY(180deg)}
/* Raspadinha */
.qo__scratch{position:relative;width:300px;max-width:92%;height:150px;margin:6px auto 14px;border-radius:12px;overflow:hidden;border:2px solid #7b4ae2}
.qo__scratchMsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:1.05rem;font-weight:800;color:#4b2e83;background:#fffdf6}
.qo__scratchCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}

/* ===== v1.5.0: layout 2-up + badge "NO COST!" + prompt "Choose one" ===== */
.qo__prompt{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:#7a7a8a;margin:0 0 14px;font-weight:700}
.qo__badge{display:inline-block;margin:14px auto 0;padding:8px 18px;border-radius:99px;background:#16a34a;color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 6px 16px rgba(22,163,74,.3)}
/* Visual 2-up: 2 cards horizontais GRANDES lado a lado (padrão TechFinanceLab) */
.qo__cards--two{grid-template-columns:1fr 1fr;gap:14px}
.qo__cards--two .qo__pick{border:2px solid #e6e8f0;border-radius:14px;padding:18px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:.15s}
.qo__cards--two .qo__pick:hover{border-color:#003BEB;background:#eaf0ff;transform:translateY(-1px)}
.qo__cards--two .qo__pickImg{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#003BEB,#3f6cff);color:#fff;font-size:1.6rem;border:none}
.qo__cards--two .qo__pickName{padding:0;font-size:.92rem;font-weight:700;color:#16161a;background:none;border:none;text-align:center;line-height:1.3}

/* ===== v1.7.0: entrada fluida do popup + microinterações ===== */
.qo .qo__card{ animation: krQoIn .34s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes krQoIn{ 0%{opacity:0; transform:translateY(16px) scale(.96);} 100%{opacity:1; transform:none;} }
.qo .qo__btn{ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.qo .qo__btn:active{ transform: translateY(1px) scale(.99); }
.qo .qo__backdrop{ animation: krQoFade .25s ease both; }
@keyframes krQoFade{ from{opacity:0;} to{opacity:1;} }

/* ============================================================
   v1.7.1 — RESTYLE COMPLETO DOS MECANISMOS (premium look)
   ============================================================ */

/* backdrop com blur sutil */
.qo .qo__backdrop{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

/* ---------- ROLETA ---------- */
.qo__wheelWrap{ position:relative; width:300px; max-width:86%; aspect-ratio:1/1; margin:14px auto 20px;
  filter:drop-shadow(0 16px 30px rgba(20,15,40,.28)); }
/* aro externo escuro com luzes */
.qo__ring{ position:absolute; inset:-16px; border-radius:50%; z-index:0;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(150deg,#332a52 0%,#1d1736 55%,#141026 100%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.12), inset 0 -6px 14px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.25); }
.qo__ring i{ position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8da, #ffd45e 55%, #c8941a);
  box-shadow:0 0 7px rgba(255,212,94,.85); animation:qoTwinkle 1.8s ease-in-out infinite; }
.qo__ring i:nth-child(even){ animation-delay:.9s; }
.qo__ring.is-spinning i{ animation-duration:.45s; }
@keyframes qoTwinkle{ 0%,100%{opacity:1} 50%{opacity:.3} }
/* ponteiro novo (pino vermelho com base redonda) */
.qo__pointer{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); z-index:5;
  width:34px; height:44px; border:none; pointer-events:none; }
.qo__pointer::before{ content:''; position:absolute; left:50%; top:9px; transform:translateX(-50%);
  border-left:14px solid transparent; border-right:14px solid transparent; border-top:30px solid #e8483f;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.qo__pointer::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9d8e, #e8483f 70%); box-shadow:0 2px 4px rgba(0,0,0,.3); }
/* disco: anel branco interno + sombra interna */
.qo__clip{ position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.92), inset 0 6px 22px rgba(0,0,0,.22); }
.qo__wheel{ position:absolute; inset:0; border-radius:50%;
  transition:transform 3.8s cubic-bezier(.12,.66,.14,1); will-change:transform; transform:translateZ(0); backface-visibility:hidden; }
.qo__sep{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1; opacity:.85; }
.qo__wlabel{ z-index:2; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  width:96px; margin-left:-48px; padding-top:17px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
/* hub metálico com estrela dourada */
.qo__hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #ffffff, #eef0f6 50%, #d3d8e6 100%);
  box-shadow: 0 5px 14px rgba(0,0,0,.32), inset 0 -4px 9px rgba(0,0,0,.1), inset 0 3px 5px rgba(255,255,255,.9), 0 0 0 5px rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center; }
.qo__hub span{ font-size:1.7rem; line-height:1;
  background:linear-gradient(180deg,#ffd45e 20%,#e8a813 80%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* resultado: pill dourada com pop */
.qo__result{ display:inline-flex; align-items:center; gap:8px; margin:2px auto 12px; padding:11px 22px;
  background:linear-gradient(135deg,#fff8e1,#ffedb3); border:1.5px solid #ecd185; border-radius:99px;
  color:#7a5800; font-weight:800; font-size:1.02rem; box-shadow:0 8px 18px rgba(236,209,133,.5);
  animation:qoPop .45s cubic-bezier(.2,1.5,.35,1) both; }
.qo__result[hidden]{ display:none; }
@keyframes qoPop{ 0%{transform:scale(.55);opacity:0} 100%{transform:scale(1);opacity:1} }

/* ---------- CARTAS (visual) — tema místico premium ---------- */
.qo__cards{ gap:14px; }
.qo__pick{ position:relative; background:none; border:none; padding:0; cursor:pointer; border-radius:16px;
  overflow:visible; transition:transform .18s ease; }
.qo__pick:hover{ transform:translateY(-5px); }
.qo__pick:active{ transform:scale(.97); }
.qo__pickImg{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4;
  border-radius:16px 16px 0 0; overflow:hidden; border:2px solid #d4af37; border-bottom:none;
  background:radial-gradient(at 50% 0%, #4b2e8c 0%, #2a1660 55%, #1a0f3c 100%);
  box-shadow:inset 0 0 26px rgba(0,0,0,.35); font-size:2.6rem; color:#ffd45e; }
/* moldura interna + céu estrelado */
.qo__pickImg::before{ content:''; position:absolute; inset:7px; border:1px solid rgba(212,175,55,.45); border-radius:10px; pointer-events:none; z-index:2; }
.qo__pickImg::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 18% 18%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 72% 26%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 38% 64%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 84% 74%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 56% 12%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 24% 84%, rgba(255,255,255,.5), transparent); }
.qo__pickImg img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.qo__glow{ position:absolute; width:62%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,212,94,.32) 0%, transparent 68%); z-index:0; }
.qo__face{ position:relative; z-index:1; font-style:normal; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.qo__pickName{ display:block; padding:11px 6px; font-size:.92rem; font-weight:800; letter-spacing:.02em;
  color:#4b2e83; text-align:center; line-height:1.3;
  background:linear-gradient(180deg,#fffdf6,#f5ecd2); border:2px solid #d4af37; border-top:1px solid rgba(212,175,55,.5);
  border-radius:0 0 16px 16px; }
/* seleção: anel dourado + brilho */
.qo__pick.is-picked{ transform:scale(1.04); }
.qo__pick.is-picked .qo__pickImg{ box-shadow:0 0 0 3px #ffd45e, 0 0 30px rgba(255,212,94,.7), inset 0 0 26px rgba(0,0,0,.35); }
.qo__pick.is-picked .qo__pickName{ background:linear-gradient(180deg,#fff3c2,#ffe592); }

/* 2-up: mesmas cartas ricas, só maiores e lado a lado */
.qo__cards--two{ grid-template-columns:1fr 1fr; gap:16px; }
.qo__cards--two .qo__pick{ border:none; padding:0; background:none; display:block; }
.qo__cards--two .qo__pick:hover{ border-color:transparent; background:none; }
.qo__cards--two .qo__pickImg{ width:auto; height:auto; aspect-ratio:3/4; border-radius:16px 16px 0 0;
  background:radial-gradient(at 50% 0%, #4b2e8c 0%, #2a1660 55%, #1a0f3c 100%);
  border:2px solid #d4af37; border-bottom:none; color:#ffd45e; font-size:2.8rem; }
.qo__cards--two .qo__pickName{ padding:12px 6px; font-size:.98rem; font-weight:800; color:#4b2e83;
  background:linear-gradient(180deg,#fffdf6,#f5ecd2); border:2px solid #d4af37; border-top:1px solid rgba(212,175,55,.5);
  border-radius:0 0 16px 16px; text-align:center; }
.qo__prompt{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:#8a8a96;
  margin:0 0 16px; font-weight:800; }
.qo__badge{ display:inline-block; margin:16px auto 0; padding:9px 22px; border-radius:99px;
  background:linear-gradient(135deg,#1fbf75,#13a05f); color:#fff; font-size:.8rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; box-shadow:0 8px 18px rgba(31,191,117,.4);
  animation:qoPop .4s cubic-bezier(.2,1.4,.3,1) both .15s; }

/* ---------- TAROT (3 cartas) ---------- */
.qo__tarot{ gap:14px; }
.qo__tcard{ max-width:110px; transition:transform .18s ease; }
.qo__tcard:not(.is-flipped):hover{ transform:translateY(-6px);
  filter:drop-shadow(0 0 14px rgba(212,175,55,.65)); }
.qo__tback{ background:radial-gradient(at 50% 0%, #4b2e8c 0%, #2a1660 55%, #1a0f3c 100%);
  border:2px solid #d4af37; box-shadow:inset 0 0 20px rgba(0,0,0,.35); }
.qo__tback::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(212,175,55,.4); border-radius:7px; }
.qo__tback::after{ content:'✦'; color:#ffd45e; font-size:1.9rem; text-shadow:0 0 14px rgba(255,212,94,.85); }
.qo__tfront{ background:linear-gradient(180deg,#fffdf6,#f5ecd2); border:2px solid #d4af37; color:#4b2e83;
  font-weight:800; box-shadow:0 0 18px rgba(212,175,55,.35); }

/* ---------- RASPADINHA ---------- */
.qo__scratch{ border:2px solid #d4af37; border-radius:14px; height:160px;
  box-shadow:0 12px 26px rgba(20,15,40,.22); }
.qo__scratchMsg{ background:linear-gradient(180deg,#fffdf6,#f7efd8); color:#4b2e83; font-weight:800; }

/* mobile: roleta um pouco menor pro aro caber */
@media(max-width:480px){
  .qo__wheelWrap{ width:260px; }
  .qo__hub{ width:68px; height:68px; }
  .qo__hub span{ font-size:1.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .qo__ring i{ animation:none; }
  .qo .qo__card{ animation:none; }
}