/* Roleta — forma de utilização do prêmio instantâneo.
   O ponteiro (#seta) é posicionado por cima do topo do canvas; por isso
   .the_wheel precisa de position:relative para servir de âncora. */
.the_wheel {
    /* Precisa ter a MESMA largura do canvas: #seta e #marca-centro sao posicionados
       em % e resolvem contra este container. Sem o max-width ele ocupa a coluna
       inteira e os dois saem enormes. */
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 0;
}

#seta {
    /* Posicao em % do tamanho da roda (o canvas e responsivo, px fixo desalinha).
       Raio externo 230 num centro de 250 => o aro comeca a 4% do topo; os pinos
       ficam a ~4,8% (raio 225). A ponta da lingueta (y=94 de 96) desce ate ~7,5%
       15 pinos num raio de 225 => o vao entre eles tem ~86px de arco, contra os
       18px de largura da lingueta: ela repousa DENTRO do vao e nenhum pino fica
       coberto. A ponta alcanca o raio dos pinos para eles baterem nela. */
    position: absolute;
    top: -3.6%;
    left: 50%;
    transform: translateX(-50%);
    /* pivo no centro do bulbo (y=17 de 96): e por ali que a lingueta gira */
    transform-origin: 50% 18%;
    width: 3.6%;
    height: auto;
    z-index: 99;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

#marca-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 17%;
    height: auto;
    z-index: 98;
    pointer-events: none;
}

#cvsrlt {
    max-width: 500px;
    width: 100%;
    height: auto;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    #seta { top: -3.6%; width: 5%; }
    #marca-centro { width: 19%; }
}

/* Batida da lingueta: cada pino que passa a empurra para o lado e ela volta.
   Disparada por JS (classe .batendo) no mesmo callback que toca o tec-tec, para
   o movimento ficar sincronizado com o pino e nao com um timer solto. */
@keyframes bater_lingueta {
    0%   { transform: translateX(-50%) rotate(0deg); }
    25%  { transform: translateX(-50%) rotate(22deg); }
    55%  { transform: translateX(-50%) rotate(-6deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}
#seta.batendo { animation: bater_lingueta .13s cubic-bezier(.2,.8,.3,1); }

@media (prefers-reduced-motion: reduce) {
    #seta.batendo { animation: none; }
}

/* ======================= MODELO 2 — "roleta da sorte" =======================
   O aro dourado, as lâmpadas e o cubo do eixo são pintados no canvas pelo
   roleta.js, para escalarem junto com a roda. Aqui fica só o que é DOM:
   o brilho de fundo, o ponteiro e o pedestal.
   Nada nesta seção afeta o modelo 1 — tudo está sob .rlt-m2. */

/* Painel de fundo próprio. Sem ele o brilho simplesmente não existe: a página da
   campanha é clara, e halo claro sobre fundo claro não aparece. É o fundo escuro
   que faz o aro dourado e as lâmpadas lerem como letreiro aceso.
   Verde da campanha, não o azul da referência.

   O fundo fica no PRÓPRIO elemento, com padding — e não num ::before com bordas
   negativas, que transbordava o cartão e flutuava por cima do layout. Isso só é
   possível porque o ponteiro se ancora na .rlt-roda: com ele preso ao
   .the_wheel, o padding o afastaria da roda. */
.the_wheel.rlt-m2 {
    line-height: 0;
    padding: 4% 4% 2%;
    border-radius: 18px;
    background:
        /* Faíscas soltas, como no material de referência. */
        radial-gradient(circle at 16% 20%, rgba(255,255,255,.55) 0 1.6px, transparent 2.2px),
        radial-gradient(circle at 84% 26%, rgba(255,255,255,.40) 0 1.9px, transparent 2.6px),
        radial-gradient(circle at 26% 76%, rgba(255,255,255,.35) 0 1.5px, transparent 2.1px),
        radial-gradient(circle at 78% 82%, rgba(255,255,255,.45) 0 1.7px, transparent 2.3px),
        radial-gradient(circle at 61% 12%, rgba(255,255,255,.30) 0 1.3px, transparent 1.9px),

        /* LUZ POR TRÁS DA RODA. O pico fica no RAIO DA BORDA (~46%), não no
           centro: no centro a roda é opaca e engolia o brilho — era por isso que
           o painel parecia só um verde chapado. Assim a luz vaza em volta da
           silhueta, que é o efeito da referência. */
        radial-gradient(circle at 50% 43%,
            rgba(var(--jg-rgb-beffd7, 190,255,215), 0)   30%,
            rgba(var(--jg-rgb-beffd7, 190,255,215), .60) 46%,
            rgba(var(--jg-rgb-5adc91, 90,220,145), .22)  60%,
            rgba(var(--jg-rgb-08321a, 8,50,26), 0)       78%),

        /* Corpo do painel, escurecendo para os cantos (vinheta). */
        radial-gradient(circle at 50% 40%, var(--jg-17773b, #17773B) 0%, var(--jg-12492a, #12492A) 55%, var(--jg-062b15, #062B15) 100%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .45);
}

/* A roda ganha seu próprio contexto de posicionamento, contendo APENAS o canvas
   e o ponteiro. É o que mantém o "top" do ponteiro como porcentagem da altura da
   RODA — no .the_wheel ele passaria a contar também o pedestal, e a mesma
   porcentagem viraria um deslocamento bem maior. */
.the_wheel.rlt-m2 .rlt-roda {
    position: relative;
    z-index: 2;
    line-height: 0;
}
.the_wheel.rlt-m2 #cvsrlt { position: relative; z-index: 2; }

/* O raio externo do modelo 2 é menor (196 contra 230) e o aro dourado avança até
   ~222 de 250 — ou seja, a borda visível começa a 5,6% do topo do canvas e as
   lâmpadas ficam a ~8%. A ponta da lingueta pousa sobre elas. */
.the_wheel.rlt-m2 #seta {
    top: -1%;
    width: 4.2%;
    transform-origin: 50% 17%;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

.the_wheel.rlt-m2 .rlt-base {
    position: relative;
    z-index: 1;                 /* atrás do canvas, à frente do halo */
    width: 44%;
    margin: -7% auto 0;
    line-height: 0;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
}
.the_wheel.rlt-m2 .rlt-base svg { width: 100%; height: auto; display: block; }

@media screen and (max-width: 768px) {
    .the_wheel.rlt-m2 #seta { top: -2.2%; width: 5.6%; }
    .the_wheel.rlt-m2 .rlt-base { width: 52%; }
}