/* Biscoito da sorte — o participante toca, o biscoito racha e o bilhete sai.
   Tudo em CSS/SVG, sem arte externa além da marca (img/marca.svg,
   arquivo real do projeto). Dourado do biscoito e verde da campanha; nada de
   azul. Prefixo bs__ (biscoito). */

.bs__palco {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 300 / 230;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;                 /* o halo não vaza para a coluna */
    border-radius: 14px;
}

/* halo dourado da revelação premiada.
   repeating-conic-gradient, não conic-gradient: o segundo NÃO repete, e o que
   deveria ser um estouro de luz vira um raio só. A máscara radial esmaece as
   pontas — sem ela os raios têm borda dura e parecem varetas douradas. */
.bs__raios {
    position: absolute;
    left: 50%; top: 40%;
    width: 150%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.6);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        rgba(212, 175, 55, .30) 0deg 5deg,
        rgba(212, 175, 55, 0)   5deg 16deg);
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 70%);
    mask-image: radial-gradient(circle, #000 28%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}
@keyframes bs_gira { to { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }
.bs--premiado .bs__raios { opacity: 1; animation: bs_gira 15s linear infinite; }

/* ---------------- o biscoito ---------------- */

/* Botão de verdade: é ele a única coisa clicável, e teclado chega nele. */
.bs__biscoito {
    position: absolute;
    left: 50%; top: 7%;
    width: 74%;
    aspect-ratio: 300 / 170;
    transform: translateX(-50%);
    padding: 0; border: 0; background: none;
    cursor: pointer;
    transition: transform .15s ease;
}
.bs__biscoito:hover:not(:disabled) { transform: translateX(-50%) scale(1.03); }
.bs__biscoito:disabled { cursor: default; }
.bs__biscoito svg { width: 100%; height: 100%; overflow: visible; }

.bs__metade { transition: transform .55s cubic-bezier(.25, .9, .35, 1); }
/* Inteiro: vale o contorno único. Rachado: ele some e cada metade ganha a
   própria borda, que é a superfície nova exposta pela quebra. */
.bs__contorno, .bs__inteiro { transition: opacity .12s ease; }
.bs--quebrou .bs__inteiro { opacity: 0; }
.bs--quebrou .bs__contorno { opacity: 0; }
.bs__massa { stroke: none; }
.bs--quebrou .bs__massa { stroke: #96671A; stroke-width: 2.5; stroke-linejoin: round; }

/* Chacoalhada do toque, antes de rachar. */
@keyframes bs_treme {
    0%, 100% { transform: rotate(0deg); }
    25%  { transform: rotate(-2.5deg); }
    75%  { transform: rotate(2.5deg); }
}
.bs--tocado .bs__biscoito svg { animation: bs_treme .18s ease-in-out 2; }

/* Rachou: as metades se afastam. Acontece nas DUAS jogadas — a surpresa é o
   bilhete, não a quebra. Se o biscoito só rachasse com prêmio, o estalo
   entregaria o resultado antes de o bilhete ser lido. */
.bs--quebrou .bs__esq { transform: translate(-13%, 6%) rotate(-16deg); }
.bs--quebrou .bs__dir { transform: translate(13%, 6%) rotate(16deg); }

/* farelos */
.bs__farelo {
    position: absolute;
    left: 50%; top: 42%;
    width: 6px; height: 5px;
    border-radius: 40%;
    background: #C08A2A;
    opacity: 0;
    pointer-events: none;
}
@keyframes bs_voa {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--bs-dx)), calc(-50% + var(--bs-dy))) rotate(var(--bs-giro)); }
}
.bs--quebrou .bs__farelo { animation: bs_voa .75s ease-out var(--bs-atraso, 0s) forwards; }

/* ---------------- o bilhete ---------------- */

.bs__bilhete {
    position: absolute;
    left: 50%; bottom: 3%;
    width: 88%;
    padding: 10px 12px;
    border-radius: 4px;
    background: linear-gradient(180deg, #FFFDF4, #F3EEDC);
    border: 1px solid #E0D6B8;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -34%) scaleY(.2);
    transform-origin: 50% 0;
    z-index: 4;
    /* Serrilha das pontas: papel cortado, não retângulo perfeito. */
    -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 5px 50%, transparent 4px, #000 4.5px);
    -webkit-mask-size: calc(100% - 10px) 100%, 10px 12px;
    -webkit-mask-repeat: no-repeat, repeat-y;
    -webkit-mask-position: 5px 0, 0 0;
    mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 5px 50%, transparent 4px, #000 4.5px);
    mask-size: calc(100% - 10px) 100%, 10px 12px;
    mask-repeat: no-repeat, repeat-y;
    mask-position: 5px 0, 0 0;
}
/* Animação com forwards, não transição: o estado FINAL fica garantido — e
   transição não roda sob tempo virtual no Edge headless, então a captura da
   tela pronta nunca mostrava o bilhete. */
@keyframes bs_desenrola {
    to { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
}
.bs--bilhete .bs__bilhete { animation: bs_desenrola .55s cubic-bezier(.2, .8, .3, 1) forwards; }

.bs__marca {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #D8CEB0;
}
.bs__marca img { width: 13px; height: 13px; }
.bs__marca span {
    font: 700 8px/1 Arial, sans-serif;
    letter-spacing: .1em; text-transform: uppercase; color: #8A7B52;
}

.bs__corpo { display: flex; align-items: center; gap: 10px; margin-top: 8px; text-align: left; }
.bs__corpo img {
    height: 62px; width: auto; border-radius: 5px; flex: none;
    display: none;                    /* só aparece na jogada premiada */
}
.bs--premiado .bs__corpo img { display: block; }
.bs__corpo > div { flex: 1; }

.bs__titulo-b {
    font: 800 clamp(12px, 3.4vw, 16px)/1.15 Arial, sans-serif;
    color: var(--jg-0a5a22, #0A5A22);
    margin-bottom: 3px;
}
.bs--consolo .bs__titulo-b { color: #8A6D1F; }
.bs__texto {
    font: 600 clamp(10px, 2.8vw, 13px)/1.35 Arial, sans-serif;
    color: #46403008;
    color: #4A452F;
}
.bs__texto b { color: var(--jg-0a5a22, #0A5A22); }

/* Sem prêmio o bilhete fica centrado: não há imagem para acompanhar. */
.bs--consolo .bs__corpo { text-align: center; }
.bs--consolo .bs__corpo > div { flex: 1; }

/* ---------------- dica e vitrine ---------------- */

.bs__dica {
    max-width: 440px;
    margin: 8px auto 0;
    text-align: center;
    color: #46564c;
    font: 600 12px/1.35 Arial, sans-serif;
    transition: opacity .3s ease;
}
.bs__palco.bs--travado ~ .bs__dica { opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
    .bs--tocado .bs__biscoito svg,
    .bs--quebrou .bs__farelo,
    .bs--premiado .bs__raios { animation: none; }
    .bs--bilhete .bs__bilhete { animation: none; opacity: 1; transform: translate(-50%, 0) scaleY(1); }
}