/* Máquina de cápsulas (gashapon) — tudo em CSS, sem arte externa.
   O corpo da máquina fica no verde/dourado da campanha; as cápsulas é que
   carregam as cores vibrantes. */

.gs__palco {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 34 / 47;
    -webkit-user-select: none;
    user-select: none;
}

/* ---------------- máquina ---------------- */

.gs__globo {
    position: absolute;
    left: 8%; top: 1%;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 26%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 50% 60%, var(--jg-eaf6ee, #EAF6EE) 0%, var(--jg-cfe6d8, #CFE6D8) 100%);
    border: 4px solid #D4AF37;
    box-shadow: inset -10px -14px 26px rgba(var(--jg-rgb-0a3b1f, 10,59,31), .22), 0 8px 22px -10px rgba(0, 0, 0, .45);
    z-index: 1;
}

/* reflexo do vidro, por cima das cápsulas */
.gs__reflexo {
    position: absolute;
    left: 12%; top: 8%;
    width: 34%; height: 42%;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 3;
}

.gs__bolas { position: absolute; inset: 0; z-index: 2; }

/* uma cápsula dentro do globo */
.gs__bola {
    position: absolute;
    width: 16%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg,
        var(--gs-cor, #E4572E) 0%, var(--gs-cor, #E4572E) 50%,
        rgba(255, 255, 255, .88) 50%, rgba(var(--jg-rgb-ecf4f0, 236,244,240), .95) 100%);
    box-shadow: inset -3px -4px 7px rgba(0, 0, 0, .22), inset 3px 3px 6px rgba(255, 255, 255, .55);
}
/* brilho pontual: é ele que faz a esfera parecer esfera */
.gs__bola::after {
    content: '';
    position: absolute;
    left: 22%; top: 14%;
    width: 26%; height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

@keyframes gs_chacoalha {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(-9%, -14%) rotate(-14deg); }
    45%      { transform: translate(11%, -6%) rotate(10deg); }
    70%      { transform: translate(-6%, 8%) rotate(-6deg); }
}
.gs--girando .gs__bola { animation: gs_chacoalha .34s ease-in-out infinite; }

/* tubo de saída: a cápsula fica VISÍVEL o caminho todo. Escondê-la dentro do
   corpo faria a queda parecer um corte de cena. */
.gs__tubo {
    position: absolute;
    left: 72%; top: 53%;
    width: 14%; height: 37%;
    border-radius: 10px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .32), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .30));
    border: 2px solid rgba(212, 175, 55, .8);
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
}

.gs__corpo {
    position: absolute;
    left: 11%; top: 58%;
    width: 78%; height: 41%;
    border-radius: 10px 10px 14px 14px;
    background: linear-gradient(180deg, var(--jg-1c8040, #1C8040) 0%, var(--jg-14532d, #14532D) 55%, var(--jg-0a3b1f, #0A3B1F) 100%);
    border: 3px solid #D4AF37;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
    z-index: 2;
}

/* A placa para antes do tubo: o tubo ocupa a faixa direita do corpo. */
.gs__placa {
    position: absolute;
    left: 5%; top: 7%;
    width: 70%;
    padding: 3px 0;
    text-align: center;
    border-radius: 5px;
    background: #FFF3C4;
    color: var(--jg-14532d, #14532D);
    font: 800 clamp(9px, 3.1vw, 12px)/1.2 Arial, sans-serif;
    letter-spacing: .5px;
    border: 2px solid #B38E24;
}

/* ---------------- manivela ---------------- */

.gs__manivela {
    position: absolute;
    left: 50%; top: 30%;
    width: 32%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    padding: 0;
    border: 3px solid #B38E24;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #FFE9A8 0%, #D4AF37 48%, #A97C1C 100%);
    cursor: grab;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6);
    touch-action: none;      /* o gesto circular é nosso, não da rolagem */
    z-index: 4;
}
.gs__manivela:active { cursor: grabbing; }
.gs--travado .gs__manivela { cursor: default; }

/* Braço da manivela. Duas condições fazem a peça parecer manivela, e nenhuma
   delas é o ângulo: o braço sai do eixo para UM lado só (barra centrada no
   eixo vira alfinete) e o punho TRANSBORDA a borda do disco (punho por dentro
   vira buraco de fechadura). Foram os dois erros das versões anteriores. */
.gs__braco {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    transform: rotate(calc(var(--gs-giro, 0deg) + 34deg));
}
.gs__haste {
    position: absolute;
    left: 50%; top: 44%;
    width: 13%; height: 46%;
    margin-left: -6.5%;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #4A360B, #B08A28 45%, #4A360B);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.gs__pega {
    position: absolute;
    left: 50%; top: 83%;
    width: 34%;
    aspect-ratio: 1;
    margin-left: -17%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #FFF7DA, #C79A22 74%);
    border: 2px solid #7A5A12;
    box-sizing: border-box;
    box-shadow: 0 3px 7px -2px rgba(0, 0, 0, .65);
}
.gs__eixo {
    position: absolute;
    left: 50%; top: 50%;
    width: 20%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #3E2D08;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .35);
}

/* A dica fica FORA da máquina: dentro do corpo ela caía atrás da manivela. */
.gs__dica {
    max-width: 340px;
    margin: 8px auto 0;
    text-align: center;
    color: #46564c;
    font: 600 12px/1.3 Arial, sans-serif;
    transition: opacity .3s ease;
}
.gs--travado .gs__dica { opacity: 0; }

/* portinhola de saída */
.gs__porta {
    position: absolute;
    left: 50%; bottom: 3%;
    width: 40%; height: 13%;
    transform: translateX(-50%);
    border-radius: 4px;
    background: var(--jg-06281a, #06281A);
    border: 2px solid #B38E24;
    box-sizing: border-box;
    overflow: hidden;
}
.gs__aba {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, .55), rgba(212, 175, 55, .15));
    transform-origin: 50% 100%;
    transition: transform .22s ease;
}
.gs--abrindo-porta .gs__aba { transform: rotateX(78deg); }

/* ---------------- escurecimento ---------------- */

.gs__foco {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    /* Escuro de verdade: com o vidro do globo ainda claro por trás, os raios do
       halo apareciam só onde cruzavam a parte clara — um deles virava um risco
       solto na tela. */
    background: radial-gradient(circle at 50% 44%, rgba(var(--jg-rgb-052111, 5,33,17), .82) 0%, rgba(var(--jg-rgb-03140b, 3,20,11), .97) 60%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    z-index: 5;
    pointer-events: none;
}
.gs--foco .gs__foco { opacity: 1; visibility: visible; }

/* ---------------- a cápsula que cai ---------------- */

.gs__capsula {
    position: absolute;
    left: 50%; top: 46%;
    width: 15%;
    aspect-ratio: 1;
    margin-left: -7.5%;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    /* left/top viajam; a escala entra na hora do destaque */
    transition: left .4s ease-in, top .4s ease-in, transform .4s ease;
}
.gs--tem-capsula .gs__capsula { opacity: 1; visibility: visible; }

/* as duas metades */
.gs__meia {
    position: absolute;
    left: 0; width: 100%; height: 50%;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.3, -.4, .4, 1.4), opacity .5s ease;
}
.gs__meia--cima {
    top: 0;
    border-radius: 100% 100% 0 0 / 200% 200% 0 0;
    background: linear-gradient(160deg, var(--gs-cor, #E4572E), rgba(0, 0, 0, .22)), var(--gs-cor, #E4572E);
    box-shadow: inset 3px 3px 7px rgba(255, 255, 255, .5);
}
.gs__meia--cima::after {
    content: '';
    position: absolute;
    left: 20%; top: 22%;
    width: 28%; height: 40%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
}
.gs__meia--baixo {
    bottom: 0;
    border-radius: 0 0 100% 100% / 0 0 200% 200%;
    background: linear-gradient(20deg, rgba(0, 0, 0, .2), rgba(255, 255, 255, .95));
    box-shadow: inset -3px -3px 7px rgba(0, 0, 0, .18);
}
/* o vinco onde as duas se encontram */
.gs__capsula::after {
    content: '';
    position: absolute;
    left: -2%; top: 47%;
    width: 104%; height: 6%;
    border-radius: 3px;
    background: rgba(0, 0, 0, .22);
    z-index: 2;
    transition: opacity .3s ease;
}
.gs--aberta.gs__capsula::after { opacity: 0; }

@keyframes gs_treme {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15%  { transform: translate(-4%, 0) rotate(-7deg); }
    35%  { transform: translate(5%, -2%) rotate(8deg); }
    55%  { transform: translate(-5%, 1%) rotate(-9deg); }
    78%  { transform: translate(4%, 0) rotate(6deg); }
}
.gs__capsula.gs--treme .gs__meia--cima,
.gs__capsula.gs--treme .gs__meia--baixo { animation: gs_treme .3s ease-in-out 3; }

/* abertura: as metades se afastam */
/* As metades saem para LADOS OPOSTOS, não só para cima e para baixo: o prêmio
   ocupa o meio, e metade que sobe reto fica escondida atrás dele parecendo um
   graveto. Assim as duas ladeiam o prêmio e se leem como cápsula aberta. */
.gs__capsula.gs--aberta .gs__meia--cima  { transform: translate(-72%, -104%) rotate(-38deg); }
.gs__capsula.gs--aberta .gs__meia--baixo { transform: translate(72%, 84%) rotate(32deg); opacity: .9; }

/* ---------------- o que sai de dentro ---------------- */

/* Irmão da cápsula, não filho: as medidas abaixo são do PALCO, e a ampliação
   da cápsula não as multiplica. Fica centrado no ponto onde a cápsula para. */
.gs__conteudo {
    position: absolute;
    left: 50%; top: 42%;
    width: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 11;
}

.gs__clarao {
    position: absolute;
    left: 50%; top: 44%;
    width: 66%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 249, 214, .95) 0%, rgba(255, 226, 130, .55) 38%, rgba(255, 214, 90, 0) 70%);
    opacity: 0;
}
.gs--revela .gs__clarao { animation: gs_clarao .7s ease-out forwards; }
@keyframes gs_clarao {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.2); }
    30%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
}

.gs__raios {
    position: absolute;
    left: 50%; top: 44%;
    width: 118%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    /* REPEATING: conic-gradient comum não repete — passado o último ponto de
       parada, a cor fica até 360deg. Sem o "repeating" isto desenha UM raio
       só, que parado na tela vira um risco solto em vez de um halo. */
    background: repeating-conic-gradient(from 7deg,
        rgba(255, 236, 160, .26) 0deg 3deg, rgba(255, 236, 160, 0) 3deg 15deg);
    border-radius: 50%;
    /* Sem o esmaecimento nas pontas os raios têm borda dura e viram varetas
       douradas em vez de luz. */
    -webkit-mask-image: radial-gradient(circle, #000 14%, rgba(0, 0, 0, .55) 44%, transparent 74%);
            mask-image: radial-gradient(circle, #000 14%, rgba(0, 0, 0, .55) 44%, transparent 74%);
    opacity: 0;
}
.gs--revela.gs--ganhou .gs__raios { animation: gs_gira 9s linear infinite, gs_entra .6s ease-out forwards; }
@keyframes gs_gira  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gs_entra { to { opacity: 1; } }

/* o prêmio flutuando */
.gs__premio-img {
    position: relative;
    width: 58%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border: 3px solid #D4AF37;
    border-radius: 14px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .65);
    opacity: 0;
    transform: scale(.2);
}
.gs--revela .gs__premio-img { animation: gs_sai .6s cubic-bezier(.2, 1.5, .4, 1) .18s forwards, gs_flutua 2.6s ease-in-out .8s infinite; }
@keyframes gs_sai {
    0%   { opacity: 0; transform: scale(.2) translateY(10%); }
    60%  { opacity: 1; transform: scale(1.12) translateY(-8%); }
    100% { opacity: 1; transform: scale(1) translateY(-4%); }
}
@keyframes gs_flutua {
    0%, 100% { transform: scale(1) translateY(-4%); }
    50%      { transform: scale(1) translateY(-11%); }
}

/* A tarja escura não é enfeite: o nome cai bem em cima da metade de baixo da
   cápsula, que é clara, e texto claro sobre ela some. */
.gs__nome {
    position: relative;
    max-width: 96%;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(var(--jg-rgb-062815, 6,40,21), .82);
    text-align: center;
    font: 800 clamp(13px, 3.6vw, 18px)/1.2 Arial, sans-serif;
    color: #FFF3C4;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
    opacity: 0;
    transform: translateY(8px);
}
.gs--revela.gs--ganhou .gs__nome { animation: gs_sobe .4s ease-out .55s forwards; }
@keyframes gs_sobe { to { opacity: 1; transform: translateY(0); } }

/* ---------------- vitrine ---------------- */

.gs__premios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 16px auto 0;
}
.gs__premios .gs__titulo {
    width: 100%; text-align: center; font-weight: 700; color: var(--jg-14532d, #14532d); margin-bottom: 2px;
}
.gs__premios .gs__premio { width: 74px; text-align: center; font-size: 11px; line-height: 1.2; color: var(--jg-14532d, #14532d); }
.gs__premios .gs__premio img {
    width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff;
    border: 1px solid var(--jg-e1eadf, #E1EADF); border-radius: 8px; padding: 5px; box-sizing: border-box;
}

@media screen and (max-width: 576px) {
    .gs__premios .gs__premio { width: 62px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .gs--girando .gs__bola,
    .gs__capsula.gs--treme .gs__meia--cima,
    .gs__capsula.gs--treme .gs__meia--baixo { animation: none; }
    .gs--revela .gs__premio-img { animation: gs_sai .6s ease-out .18s forwards; }
    .gs--revela.gs--ganhou .gs__raios { animation: gs_entra .6s ease-out forwards; }
}