/* Fusão premiada — o retorno proporcional.
 *
 * Um painel de fusão: à esquerda o núcleo "Depósitos e movimentações", à
 * direita o núcleo "Fundo de prêmios", e um reator no centro. A
 * pessoa toca em "Calcular sobras" e os dois núcleos correm para o centro e se
 * fundem numa esfera. Só depois da resposta do servidor a fusão reage em
 * energia com o carimbo do prêmio (prêmio) ou falha e o painel fica neutro
 * (consolo).
 *
 * OS NÚCLEOS SE FUNDEM IGUAL NAS DUAS JOGADAS: a corrida até o centro e a
 * fusão numa esfera neutra são a fase A. Se a esfera já nascesse dourada
 * quando há prêmio, a cor dela entregaria o resultado antes do carimbo.
 *
 * NENHUM NÚMERO NOS DOIS LADOS: o jogo se chama "retorno proporcional", e um
 * valor ao lado de "depósitos" seria lido como o saldo da pessoa — e o prêmio
 * como proporcional a ele. Só os rótulos.
 *
 * Estado final por classe estática ou @keyframes forwards; o bloco de
 * movimento reduzido (que o Edge headless declara) para em estado visível.
 */

.sb__palco {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 52%, rgba(var(--jg-rgb-2aa152, 42,161,82), .22), rgba(var(--jg-rgb-2aa152, 42,161,82), 0) 50%),
        linear-gradient(180deg, var(--jg-06281a, #06281A) 0%, var(--jg-0b3d24, #0B3D24) 100%);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
    user-select: none;
    font-family: Arial, sans-serif;
}
.sb__palco::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(var(--jg-rgb-7dd69a, 125,214,154), .06) 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, rgba(var(--jg-rgb-7dd69a, 125,214,154), .06) 1px, transparent 1px) 0 0 / 24px 100%;
    pointer-events: none;
}
/* Consolo: o painel inteiro fica neutro (cinza), por classe estática. */
.sb--falhou.sb__palco { filter: saturate(.25) brightness(.85); }

/* Rótulo do produto. NÃO é nome de prêmio. */
.sb__rotulo {
    position: absolute;
    left: 50%; top: 5%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(var(--jg-rgb-7dd69a, 125,214,154), .45);
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jg-cff3da, #CFF3DA);
    white-space: nowrap;
    z-index: 8;
}
.sb__rotulo img { width: 12px; height: 12px; }

/* ---------------- o trilho e o reator ---------------- */

.sb__trilho {
    position: absolute;
    left: 10%; right: 10%; top: 52%;
    height: 3px;
    margin-top: -1.5px;
    background: linear-gradient(90deg, rgba(var(--jg-rgb-7dd69a, 125,214,154), 0), rgba(var(--jg-rgb-7dd69a, 125,214,154), .55) 20%, rgba(var(--jg-rgb-7dd69a, 125,214,154), .55) 80%, rgba(var(--jg-rgb-7dd69a, 125,214,154), 0));
    z-index: 2;
}
/* Anel do reator: gira enquanto carrega. */
.sb__anel {
    position: absolute;
    left: 50%; top: 52%;
    width: 30%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dashed rgba(var(--jg-rgb-7dd69a, 125,214,154), .55);
    box-shadow: 0 0 14px rgba(var(--jg-rgb-7dd69a, 125,214,154), .25), inset 0 0 14px rgba(var(--jg-rgb-7dd69a, 125,214,154), .15);
    z-index: 2;
}
.sb__anel::before {
    content: '';
    position: absolute; inset: 12%;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--jg-rgb-7dd69a, 125,214,154), .35);
}
.sb--carregando .sb__anel { animation: sb-gira 1.6s linear infinite; }
@keyframes sb-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sb--reagiu .sb__anel { border-color: #FFD86B; box-shadow: 0 0 22px rgba(255, 216, 107, .7), inset 0 0 18px rgba(255, 216, 107, .35); }
.sb--reagiu .sb__anel::before { border-color: rgba(255, 216, 107, .6); }

/* ---------------- os núcleos ---------------- */

/* Dois núcleos de energia: verde (depósitos) e dourado (fundo de sobras).
   Começam nas pontas do trilho; --sb-corre é a duração da corrida (fase A). */
.sb__nucleo {
    position: absolute;
    top: 52%;
    width: 15%; aspect-ratio: 1;
    margin-top: -7.5%;
    border-radius: 50%;
    z-index: 4;
}
.sb__nucleo--esq {
    left: 12%;
    background: radial-gradient(circle at 35% 35%, var(--jg-cff3da, #CFF3DA), var(--jg-2aa152, #2AA152) 55%, var(--jg-0f5a2c, #0F5A2C) 100%);
    box-shadow: 0 0 18px rgba(var(--jg-rgb-7dd69a, 125,214,154), .8);
}
.sb__nucleo--dir {
    right: 12%;
    background: radial-gradient(circle at 35% 35%, #FFF1B0, #E5B93A 55%, #8A6D1F 100%);
    box-shadow: 0 0 18px rgba(255, 216, 107, .8);
}
/* Um mini gráfico de barras dentro de cada núcleo: é a "informação" correndo.
   Barras sem número — ver o cabeçalho. */
.sb__barras {
    position: absolute; left: 24%; right: 24%; bottom: 30%; height: 40%;
    display: flex; align-items: flex-end; gap: 9%;
}
.sb__barras i { flex: 1; background: rgba(255, 255, 255, .85); border-radius: 1px 1px 0 0; }

.sb--corre .sb__nucleo--esq { animation: sb-corre-esq var(--sb-corre, 1.4s) cubic-bezier(.5, 0, .9, .6) forwards; }
.sb--corre .sb__nucleo--dir { animation: sb-corre-dir var(--sb-corre, 1.4s) cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes sb-corre-esq { to { left: 42.5%; } }
@keyframes sb-corre-dir { to { right: 42.5%; } }

/* Legendas fixas nas pontas: os rótulos ficam, os núcleos vão. */
.sb__legenda {
    position: absolute;
    top: 66%;
    width: 26%;
    text-align: center;
    font: 700 9.5px/1.25 Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(var(--jg-rgb-cff3da, 207,243,218), .8);
    z-index: 3;
}
.sb__legenda--esq { left: 6.5%; }
.sb__legenda--dir { right: 6.5%; }

/* ---------------- a fusão ---------------- */

/* A esfera que nasce da fusão: NEUTRA (branco-esverdeado) nas duas jogadas. */
.sb__fusao {
    position: absolute;
    left: 50%; top: 52%;
    width: 17%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #FFFFFF, var(--jg-cff3da, #CFF3DA) 45%, var(--jg-7dd69a, #7DD69A) 100%);
    box-shadow: 0 0 24px rgba(var(--jg-rgb-cff3da, 207,243,218), .85);
    z-index: 5;
}
.sb--fundido .sb__nucleo { opacity: 0; }
.sb--fundido .sb__fusao { animation: sb-funde .45s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes sb-funde { to { transform: translate(-50%, -50%) scale(1); } }
.sb__clarao {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 52%, rgba(var(--jg-rgb-cff3da, 207,243,218), .8), rgba(var(--jg-rgb-cff3da, 207,243,218), 0) 45%);
    opacity: 0;
    z-index: 6; pointer-events: none;
}
.sb--fundido .sb__clarao { animation: sb-clarao .5s ease-out forwards; }
@keyframes sb-clarao { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Prêmio: a reação. A esfera vira dourada e cresce; raios e faíscas saem. */
.sb--reagiu .sb__fusao {
    animation: sb-reage .8s cubic-bezier(.3, 1.2, .5, 1) forwards;
}
@keyframes sb-reage {
    to { transform: translate(-50%, -50%) scale(1.6);
         background: radial-gradient(circle at 40% 35%, #FFFFFF, #FFE98A 40%, #E5B93A 100%);
         box-shadow: 0 0 40px rgba(255, 216, 107, 1), 0 0 90px rgba(255, 216, 107, .5); }
}
.sb__raios { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sb__raio {
    position: absolute;
    left: 50%; top: 52%;
    width: 3px; height: 0;
    margin-left: -1.5px;
    transform-origin: 50% 0;
    background: linear-gradient(180deg, rgba(255, 233, 138, 1), rgba(255, 216, 107, 0));
    opacity: 0;
}
.sb--reagiu .sb__raio { animation: sb-raio .9s ease-out forwards; }
@keyframes sb-raio { 0% { height: 0; opacity: 1; } 100% { height: 62%; opacity: 0; } }
/* Faíscas: partículas douradas que sobem — "dinheiro gerando dinheiro", sem
   cifrão nem moeda numerada. */
.sb__faisca {
    position: absolute;
    left: 50%; top: 52%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #FFE98A;
    box-shadow: 0 0 6px rgba(255, 233, 138, .9);
    opacity: 0;
    z-index: 7; pointer-events: none;
}
.sb--reagiu .sb__faisca { animation: sb-faisca 1.1s ease-out forwards; }
@keyframes sb-faisca {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--sb-dx), var(--sb-dy)) scale(.3); opacity: 0; }
}

/* Consolo: a fusão falha — a esfera pisca e apaga, por forwards. */
.sb--falhou .sb__fusao { animation: sb-falha .7s ease-in forwards; }
@keyframes sb-falha {
    0%   { opacity: 1; }
    30%  { opacity: .3; }
    45%  { opacity: 1; }
    100% { opacity: .35; transform: translate(-50%, -50%) scale(.8);
           background: radial-gradient(circle at 40% 35%, #DDE2DE, #9AA39C 55%, #5E6B62 100%);
           box-shadow: none; }
}

/* ---------------- o carimbo ---------------- */

.sb__carimbo {
    position: absolute;
    left: 50%; top: 24%;
    transform: translate(-50%, -50%) rotate(-8deg) scale(3);
    opacity: 0;
    padding: 6px 14px;
    border: 3px double #FFD86B;
    border-radius: 6px;
    font: 900 clamp(13px, 4vw, 19px)/1 Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFE98A;
    text-shadow: 0 0 8px rgba(255, 216, 107, .8);
    white-space: nowrap;
    z-index: 8;
}
.sb--carimbo .sb__carimbo { animation: sb-carimba .4s cubic-bezier(.2, .9, .3, 1.3) forwards; }
@keyframes sb-carimba { to { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; } }

/* ---------------- placa do prêmio ---------------- */

.sb__placa {
    position: absolute;
    left: 50%; bottom: 6%;
    width: 52%;
    transform: translate(-50%, 16px);
    opacity: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFF8DC, #F5E3A1);
    border: 1.5px solid #C9A227;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .7);
    z-index: 8;
}
.sb__placa img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.sb__placa div { font: 700 clamp(10px, 2.6vw, 12px)/1.25 Arial, sans-serif; color: var(--jg-14532d, #14532d); min-width: 0; }
.sb__placa small { display: block; font: 700 9px/1.2 Arial, sans-serif; letter-spacing: .08em; color: #8A6D1F; margin-bottom: 2px; }
.sb--placa .sb__placa { animation: sb-placa .5s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes sb-placa { to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------------- botão e mensagem ---------------- */

.sb__botao {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 10px auto 0;
    padding: 12px 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--jg-2aa152, #2AA152), var(--jg-0a7a00, #0A7A00));
    color: #fff;
    font: 700 15px/1.2 Arial, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(var(--jg-rgb-0a7a00, 10,122,0), .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sb__botao:hover:not(:disabled) { filter: brightness(1.06); }
.sb__botao:disabled { opacity: .55; cursor: default; }

.sb__msg {
    max-width: 480px;
    min-height: 56px;
    margin: 10px auto 0;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    text-align: center;
    font: 700 clamp(11px, 3vw, 14px)/1.35 Arial, sans-serif;
    color: #46564c;
    background: var(--jg-eef4ef, #EEF4EF);
    border: 1px solid var(--jg-dce6de, #DCE6DE);
}
.sb__msg--premiado { background: var(--jg-e3f5e6, #E3F5E6); border-color: var(--jg-9fd8ab, #9FD8AB); color: var(--jg-14532d, #14532d); }
.sb__msg--consolo  { background: #F1F3F1; border-color: #CDD5CE; color: #4F5A52; }
.sb__msg b { color: var(--jg-0a7a00, #0A7A00); }
.sb__msg--consolo b { color: #5C6B60; }

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

.sb__premios {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 14px auto 0; max-width: 640px;
}
.sb__titulo {
    width: 100%; text-align: center;
    font: 700 13px/1.3 Arial, sans-serif; color: var(--jg-14532d, #14532d); margin-bottom: 2px;
}
.sb__premio { width: 74px; text-align: center; font: 600 10px/1.2 Arial, sans-serif; color: #46564c; }
.sb__premio img { width: 100%; border-radius: 6px; display: block; margin-bottom: 3px; }

/* Movimento reduzido: cada coisa para num estado VISÍVEL que conta a mesma
   história. É também o que as capturas do headless mostram. */
@media (prefers-reduced-motion: reduce) {
    .sb--carregando .sb__anel { animation: none; }
    .sb--corre .sb__nucleo--esq { animation: none; left: 42.5%; }
    .sb--corre .sb__nucleo--dir { animation: none; right: 42.5%; }
    .sb--fundido .sb__fusao { animation: none; transform: translate(-50%, -50%) scale(1); }
    .sb--fundido .sb__clarao { animation: none; }
    .sb--reagiu .sb__fusao { animation: none; transform: translate(-50%, -50%) scale(1.6);
        background: radial-gradient(circle at 40% 35%, #FFFFFF, #FFE98A 40%, #E5B93A 100%);
        box-shadow: 0 0 40px rgba(255, 216, 107, 1), 0 0 90px rgba(255, 216, 107, .5); }
    .sb--reagiu .sb__raio { animation: none; height: 40%; opacity: .5; }
    .sb--reagiu .sb__faisca { animation: none; transform: translate(var(--sb-dx), var(--sb-dy)) scale(.6); opacity: .7; }
    .sb--falhou .sb__fusao { animation: none; opacity: .35; transform: translate(-50%, -50%) scale(.8);
        background: radial-gradient(circle at 40% 35%, #DDE2DE, #9AA39C 55%, #5E6B62 100%); box-shadow: none; }
    .sb--carimbo .sb__carimbo { animation: none; transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
    .sb--placa .sb__placa { animation: none; transform: translate(-50%, 0); opacity: 1; }
}