/* Roleta e caixas premiadas (pagina da compra e /minhas-caixas). Segue o tema escuro: cartao .app-card, destaque na cor secundaria. */
.revelacao{--rv-ouro:#f5c542;--rv-ouro-escuro:#b8860b;--rv-cor:var(--incrivel-secundaria,#198754);--rv-fundo:var(--incrivel-superficie-2,#212b35);--rv-fundo-2:var(--incrivel-superficie-3,#2e3944);overflow:hidden;border:1px solid color-mix(in srgb,var(--rv-ouro) 35%,transparent)!important}
/* titulo e contador na primeira linha; a frase de apoio ocupa a largura toda embaixo */
.revelacao-topo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;margin-bottom:12px}
.revelacao-titulos{display:contents}
.revelacao-titulo{grid-column:1;grid-row:1;margin:0;font-size:1rem;font-weight:700;color:var(--rv-ouro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.revelacao-sub{grid-column:1/-1;grid-row:2;margin:0!important;font-size:.78rem;opacity:.75;line-height:1.3}
.revelacao-lado{grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px}
.revelacao-contador{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:5px 8px;border-radius:12px;background:color-mix(in srgb,var(--rv-cor) 22%,transparent);border:1px solid color-mix(in srgb,var(--rv-cor) 55%,transparent);line-height:1.1}
.revelacao-contador b{font-size:1.35rem;font-weight:800}
.revelacao-contador span{font-size:.56rem;text-transform:uppercase;letter-spacing:.04em;opacity:.85;white-space:nowrap}
.revelacao-contador--zerado{background:var(--rv-fundo);border-color:var(--incrivel-borda-sutil,rgba(255,255,255,.08));opacity:.7}
.revelacao-som{width:36px;height:36px;border-radius:50%;border:1px solid var(--incrivel-borda-media,rgba(255,255,255,.18));background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
.revelacao-som[aria-pressed="true"]{opacity:.55}

/* ---------- roleta ---------- */
.roleta-palco{display:flex;justify-content:center;padding:14px 0 6px}
.roleta-aro{position:relative;width:min(300px,78vw);aspect-ratio:1;border-radius:50%;padding:10px;background:radial-gradient(circle at 30% 25%,#ffe58a,var(--rv-ouro) 45%,var(--rv-ouro-escuro));box-shadow:0 0 0 3px rgba(0,0,0,.35),0 10px 34px rgba(0,0,0,.55),0 0 42px color-mix(in srgb,var(--rv-ouro) 28%,transparent)}
.roleta-roda{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;transform:rotate(var(--angulo,0deg));will-change:transform;
  background:conic-gradient(from -22.5deg,var(--rv-cor) 0 45deg,var(--rv-fundo) 45deg 90deg,var(--rv-cor) 90deg 135deg,var(--rv-fundo-2) 135deg 180deg,var(--rv-cor) 180deg 225deg,var(--rv-fundo) 225deg 270deg,var(--rv-cor) 270deg 315deg,var(--rv-fundo-2) 315deg 360deg);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 26px rgba(0,0,0,.45)}
.roleta-fatia{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:9%;transform:rotate(calc(var(--i) * var(--passo,45deg)));font-size:1.45rem;pointer-events:none}
.roleta-fatia--premio{color:var(--rv-ouro);text-shadow:0 1px 3px rgba(0,0,0,.55)}
.roleta-fatia--vazia{color:rgba(255,255,255,.38);font-size:1.15rem;padding-top:10.5%}
/* nome do premio na fatia, no sentido do raio (da borda para o centro): cabe mesmo com muitas fatias */
.roleta-nome{writing-mode:vertical-rl;max-height:33%;overflow:hidden;font-weight:800;font-size:.95rem;line-height:1.05;letter-spacing:.02em;text-align:start;white-space:normal;word-break:break-word;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.roleta-fatia--premio .roleta-nome{color:#fff}
.roleta-fatia--vazia .roleta-nome{font-weight:600;font-size:.62rem;color:rgba(255,255,255,.7)}
.roleta-fatia:has(.roleta-nome){padding-top:4.5%}
.roleta-roda--muitas .roleta-nome{font-size:.72rem}
.roleta-roda--muitas .roleta-fatia--vazia .roleta-nome{font-size:.6rem}
.roleta-ponteiro{position:absolute;z-index:3;top:-8px;left:50%;width:0;height:0;margin-left:-13px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:28px solid #fff;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6))}
.roleta-centro{position:absolute;z-index:2;top:50%;left:50%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:4px solid var(--rv-ouro);background:radial-gradient(circle at 35% 30%,#fff,#dfe5ec);color:#161d23;font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 4px 14px rgba(0,0,0,.55);transition:transform .15s}
.roleta-centro:not(:disabled):active{transform:translate(-50%,-50%) scale(.94)}
.roleta-centro:disabled{opacity:.85;cursor:progress}
.roleta-centro[data-fim]{cursor:default;opacity:.6}
.roleta-aro.girando{box-shadow:0 0 0 3px rgba(0,0,0,.35),0 10px 34px rgba(0,0,0,.55),0 0 60px color-mix(in srgb,var(--rv-ouro) 55%,transparent)}

/* ---------- caixas ---------- */
.caixas-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:20px 10px;padding:20px 0 4px}
.caixa{position:relative;height:96px;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.caixa:disabled{cursor:default}
.caixa-corpo{position:absolute;left:12%;right:12%;bottom:6px;height:50px;border-radius:5px 5px 9px 9px;background:linear-gradient(180deg,color-mix(in srgb,var(--rv-cor) 88%,#fff),var(--rv-cor) 40%,color-mix(in srgb,var(--rv-cor) 62%,#000));box-shadow:0 7px 14px rgba(0,0,0,.45)}
.caixa-corpo:before,.caixa-tampa:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:15px;margin-left:-7.5px;background:linear-gradient(90deg,var(--rv-ouro-escuro),var(--rv-ouro) 35%,#ffe58a 55%,var(--rv-ouro-escuro))}
.caixa-tampa{position:absolute;z-index:2;left:5%;right:5%;bottom:54px;height:17px;border-radius:5px;background:linear-gradient(180deg,color-mix(in srgb,var(--rv-cor) 72%,#fff),color-mix(in srgb,var(--rv-cor) 82%,#000));box-shadow:0 3px 6px rgba(0,0,0,.35);transform-origin:50% 100%}
.caixa-tampa:after{content:"";position:absolute;left:50%;bottom:100%;width:30px;height:13px;margin-left:-15px;background:radial-gradient(ellipse at 25% 100%,transparent 4px,var(--rv-ouro) 5px 9px,transparent 10px),radial-gradient(ellipse at 75% 100%,transparent 4px,var(--rv-ouro) 5px 9px,transparent 10px)}
.caixa-num{position:absolute;z-index:3;left:50%;bottom:19px;transform:translateX(-50%);min-width:24px;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.55);font-size:.7rem;font-weight:700;line-height:1.35}
.caixa-premio{position:absolute;z-index:1;left:50%;bottom:36px;transform:translate(-50%,0) scale(.3);opacity:0;font-size:1.7rem;color:var(--rv-ouro);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.caixa-brilho{position:absolute;left:50%;bottom:26px;width:96px;height:96px;margin-left:-48px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rv-ouro) 65%,transparent),transparent 62%);opacity:0;pointer-events:none}
.caixa:not(:disabled):hover .caixa-tampa{transform:translateY(-3px) rotate(-3deg)}
.caixa:focus-visible{outline:2px solid var(--rv-ouro);outline-offset:3px;border-radius:10px}
.caixa.abrindo{animation:caixa-treme .38s ease-in-out infinite}
.caixa.aberta .caixa-tampa{animation:caixa-abre .7s cubic-bezier(.2,.8,.3,1) forwards}
.caixa.aberta .caixa-premio{animation:caixa-sobe .7s cubic-bezier(.2,.9,.3,1.2) .12s forwards}
.caixa.aberta.ganhou .caixa-brilho{animation:caixa-brilha 1.8s ease-in-out .2s infinite}
.caixa.aberta.vazia .caixa-premio{color:rgba(255,255,255,.5);font-size:1.25rem}
.caixa.aberta.vazia .caixa-corpo,.caixa.aberta.vazia .caixa-tampa{filter:grayscale(.85) brightness(.7)}
.caixa.aberta .caixa-num{background:rgba(0,0,0,.35);opacity:.8}
/* caixas que ja vieram abertas do servidor: estado final, sem repetir a animacao */
.caixa.sem-animacao .caixa-tampa{animation:none;transform:translate(14px,-38px) rotate(16deg) scale(.92);opacity:.9}
.caixa.sem-animacao .caixa-premio{animation:none;opacity:1;transform:translate(-50%,-30px) scale(1)}
@keyframes caixa-treme{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-5deg) translateY(-3px)}50%{transform:rotate(4deg) translateY(0)}80%{transform:rotate(-3deg) translateY(-2px)}}
@keyframes caixa-abre{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(0,-30px) rotate(-8deg)}100%{transform:translate(14px,-38px) rotate(16deg) scale(.92);opacity:.9}}
@keyframes caixa-sobe{0%{opacity:0;transform:translate(-50%,0) scale(.3)}100%{opacity:1;transform:translate(-50%,-30px) scale(1)}}
@keyframes caixa-brilha{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.12)}}

/* ---------- resultado e historico ---------- */
.revelacao-erro{margin:10px 0 0}
.revelacao-resultado{position:relative;overflow:hidden;margin-top:12px;padding:16px 14px;border-radius:14px;text-align:center;background:var(--rv-fundo);border:1px solid var(--incrivel-borda-sutil,rgba(255,255,255,.08));animation:rv-entra .35s ease-out}
.revelacao-resultado .rv-icone{font-size:2rem;line-height:1;margin-bottom:4px;opacity:.7}
.revelacao-resultado h4{margin:0 0 2px;font-size:1.05rem;font-weight:800}
.revelacao-resultado p{margin:0;font-size:.82rem;opacity:.8}
.revelacao-resultado.ganhou{background:linear-gradient(135deg,color-mix(in srgb,var(--rv-ouro) 24%,var(--rv-fundo)),color-mix(in srgb,var(--rv-cor) 34%,var(--rv-fundo)));border-color:var(--rv-ouro);box-shadow:0 0 0 1px color-mix(in srgb,var(--rv-ouro) 40%,transparent),0 0 30px color-mix(in srgb,var(--rv-ouro) 30%,transparent)}
.revelacao-resultado.ganhou .rv-icone{color:var(--rv-ouro);opacity:1;font-size:2.6rem;animation:rv-pulsa 1.2s ease-in-out infinite}
.revelacao-resultado.ganhou h4{font-size:1.3rem;color:var(--rv-ouro)}
.revelacao-resultado .rv-premio{margin:6px 0 4px;font-size:1.25rem;font-weight:800;color:#fff;opacity:1;line-height:1.2;overflow-wrap:anywhere}
.revelacao-resultado .rv-numero{display:inline-block;margin-top:2px;padding:3px 12px;border-radius:999px;background:rgba(0,0,0,.4);font-size:.85rem;opacity:1}
.revelacao-resultado .rv-numero b{color:var(--rv-ouro);letter-spacing:.06em}
.rv-confete{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rv-confete i{position:absolute;top:-12px;width:7px;height:12px;border-radius:2px;opacity:0;animation:rv-cai 2.4s linear infinite}
.rv-confete i:nth-child(4n){background:var(--rv-ouro)}.rv-confete i:nth-child(4n+1){background:var(--rv-cor)}.rv-confete i:nth-child(4n+2){background:#fff}.rv-confete i:nth-child(4n+3){background:#ff6b8b}
@keyframes rv-cai{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(190px) rotate(540deg)}}
@keyframes rv-pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes rv-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.revelacao-historico{margin-top:14px;padding-top:10px;border-top:1px solid var(--incrivel-borda-sutil,rgba(255,255,255,.08))}
.revelacao-historico-titulo{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-bottom:6px}
.revelacao-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.revelacao-lista li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:9px;background:var(--rv-fundo);font-size:.8rem}
.revelacao-lista .rv-item-nome{white-space:nowrap;opacity:.8}
.revelacao-lista .rv-item-resultado{text-align:right;opacity:.65;overflow-wrap:anywhere}
.revelacao-lista li.ganhou{background:color-mix(in srgb,var(--rv-ouro) 16%,var(--rv-fundo));border:1px solid color-mix(in srgb,var(--rv-ouro) 45%,transparent)}
.revelacao-lista li.ganhou .rv-item-nome,.revelacao-lista li.ganhou .rv-item-resultado{opacity:1}
.revelacao-lista li.ganhou .rv-item-nome i{color:var(--rv-ouro)}

/* ---------- /minhas-caixas ---------- */
.caixas-selo{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.78rem;font-weight:600;line-height:1.25;color:#f5c542}
.CompraTpl_rodape__1lty3.caixas-abrir{color:#161d23;background:#f5c542;font-size:13px;font-weight:700}
.CompraTpl_rodape__1lty3.caixas-abrir:hover{color:#161d23;background:#ffd964}
@media (prefers-reduced-motion:reduce){.caixa.abrindo,.caixa.aberta .caixa-tampa,.caixa.aberta .caixa-premio,.caixa.aberta.ganhou .caixa-brilho,.rv-confete i,.revelacao-resultado,.revelacao-resultado.ganhou .rv-icone{animation:none}
  .caixa.aberta .caixa-tampa{transform:translate(14px,-38px) rotate(16deg) scale(.92)}.caixa.aberta .caixa-premio{opacity:1;transform:translate(-50%,-30px) scale(1)}}

/* ---------- girar / abrir todos de uma vez ---------- */
.revelacao-todos-wrap{display:flex;justify-content:center;margin-top:10px}
.revelacao-todos{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;border:1px solid var(--rv-ouro);background:color-mix(in srgb,var(--rv-ouro) 14%,transparent);color:var(--rv-ouro);font-weight:800;font-size:.9rem;cursor:pointer}
.revelacao-todos:hover{background:color-mix(in srgb,var(--rv-ouro) 24%,transparent)}
.revelacao-todos:disabled{opacity:.6;cursor:progress}
.revelacao-resultado .rv-premios{list-style:none;margin:6px auto 6px;padding:0;max-width:420px;max-height:220px;overflow:auto;text-align:left;font-size:.88rem}
.revelacao-resultado .rv-premios li{padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.28);margin-bottom:4px;overflow-wrap:anywhere}
.revelacao-resultado .rv-premios b{color:var(--rv-ouro)}
.revelacao-todos b{font-weight:800}