/* Plinko — tabuleiro de pregos. Tudo em CSS, sem arte externa.

   Geometria (é o que sustenta o jogo, não decoração):
   o tabuleiro é um triângulo de pinos. A linha i tem i+1 pinos; a ficha começa
   sobre o pino do topo e, a cada linha, desvia meia coluna para a esquerda ou
   para a direita. Com L linhas há L+1 canaletas, e a canaleta final é
   exatamente o NÚMERO DE DESVIOS À DIREITA — é essa igualdade que permite
   montar um caminho que chega na canaleta que o servidor mandou.

   Espaçamento = 100/(L+2) em % da largura, então a linha toda cabe sem cortar
   e as canaletas ficam alinhadas com os pinos. */

.pk__palco {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 5 / 6;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 8%, var(--jg-1c8040, #1C8040) 0%, var(--jg-14532d, #14532D) 46%, var(--jg-0a3b1f, #0A3B1F) 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .38);
    overflow: hidden;
    user-select: none;
}

/* ---------- pinos ---------- */
.pk__pino {
    position: absolute;
    width: 3.2%;
    aspect-ratio: 1;
    margin-left: -1.6%;
    margin-top: -1.6%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--jg-cfe0cd, #CFE0CD) 60%, var(--jg-9fb79c, #9FB79C));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* pancada: o pino acende quando a ficha passa por ele */
@keyframes pk_bate {
    0%   { transform: scale(1);    box-shadow: 0 1px 2px rgba(0,0,0,.45); }
    40%  { transform: scale(1.55); box-shadow: 0 0 10px 3px rgba(255, 240, 170, .9); }
    100% { transform: scale(1);    box-shadow: 0 1px 2px rgba(0,0,0,.45); }
}
.pk__pino.pk--bate { animation: pk_bate .22s ease-out; }

/* ---------- ficha ---------- */
.pk__ficha {
    position: absolute;
    width: 7.4%;
    aspect-ratio: 1;
    margin-left: -3.7%;
    margin-top: -3.7%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #FBEBB2, #D4AF37 55%, #A97F26);
    border: 2px solid #8A6416;
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
    z-index: 5;
}
/* brilho interno, para a ficha não ficar chapada */
.pk__ficha::after {
    content: "";
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
}

/* ---------- canaletas ---------- */
.pk__canaletas {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 15%;
    display: flex;
    align-items: stretch;
}
.pk__canaleta {
    flex: 1 1 0;
    margin: 0 1px;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: 700 10px/1.1 Arial, sans-serif;
    color: var(--jg-0a3b1f, #0A3B1F);
    padding: 2px;
    box-sizing: border-box;
    background: var(--jg-e8f0e6, #E8F0E6);
    border: 1px solid rgba(255, 255, 255, .5);
    border-bottom: 0;
    transition: transform .2s, box-shadow .2s;
}
.pk__canaleta.pk--premio {
    background: linear-gradient(#F7DE93, #D4AF37);
    color: #4A3708;
}
/* a canaleta que recebeu a ficha */
.pk__canaleta.pk--acesa {
    transform: translateY(-6px);
    box-shadow: 0 0 0 2px #FFF, 0 0 16px 4px rgba(255, 235, 150, .85);
}

/* ---------- vitrine ---------- */
.pk__premios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 16px auto 0;
}
.pk__premios .pk__titulo {
    width: 100%; text-align: center; font-weight: 700; color: var(--jg-14532d, #14532d); margin-bottom: 2px;
}
.pk__premios .pk__premio { width: 74px; text-align: center; font-size: 11px; line-height: 1.2; color: var(--jg-14532d, #14532d); }
.pk__premios .pk__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) {
    .pk__canaleta { font-size: 8px; }
    .pk__premios .pk__premio { width: 62px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pk__pino.pk--bate { animation: none; }
}

/* ---------- revelação do prêmio ----------
   A queda termina no tabuleiro, então é ali que o prêmio tem de aparecer —
   mostrá-lo só num rodapé desperdiça o clímax. A animação é de "surpresa":
   raios girando por trás, o prêmio entrando com estouro e um anel de luz que
   se expande e some. Só entra quando há prêmio; sem prêmio a frase de sempre,
   abaixo do tabuleiro, já basta e não faz festa à toa. */
.pk__revelacao {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    background: radial-gradient(circle at 50% 45%, rgba(var(--jg-rgb-0a3b1f, 10,59,31), .82) 0%, rgba(var(--jg-rgb-062815, 6,40,21), .95) 70%);
    transition: opacity .3s ease;
    z-index: 20;
    pointer-events: none;
}
.pk__revelacao.pk--mostra { opacity: 1; visibility: visible; }

/* raios girando atrás do prêmio */
.pk__raios {
    position: absolute;
    left: 50%; top: 45%;
    width: 150%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg,
        rgba(255, 236, 160, .30) 0deg 8deg, rgba(255, 236, 160, 0) 8deg 24deg);
    opacity: 0;
    border-radius: 50%;
}
.pk--mostra .pk__raios { animation: pk_raios 9s linear infinite, pk_raios_entra .5s ease-out forwards; }
@keyframes pk_raios      { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pk_raios_entra { to { opacity: 1; } }

/* anel de luz que estoura e some */
.pk__anel {
    position: absolute;
    left: 50%; top: 45%;
    width: 30%; aspect-ratio: 1;
    margin: 0;
    transform: translate(-50%, -50%) scale(.2);
    border: 4px solid rgba(255, 240, 180, .9);
    border-radius: 50%;
    opacity: 0;
}
.pk--mostra .pk__anel { animation: pk_anel .85s cubic-bezier(.2, .7, .3, 1) .1s; }
@keyframes pk_anel {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.2); }
    25%  { opacity: .95; }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.4); }
}

/* o prêmio, entrando com estouro */
.pk__premio-destaque {
    position: relative;
    width: 46%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border: 3px solid var(--pk-ouro, #D4AF37);
    border-radius: 16px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
    transform: scale(.2) rotate(-12deg);
    opacity: 0;
}
.pk--mostra .pk__premio-destaque { animation: pk_estouro .55s cubic-bezier(.2, 1.5, .4, 1) .12s forwards; }
@keyframes pk_estouro {
    0%   { opacity: 0; transform: scale(.2) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.pk__nome-premio {
    position: relative;
    max-width: 80%;
    text-align: center;
    font: 800 clamp(15px, 4.4vw, 22px)/1.2 Arial, sans-serif;
    color: #FFF3C4;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: translateY(10px);
}
.pk--mostra .pk__nome-premio { animation: pk_sobe .4s ease-out .45s forwards; }
@keyframes pk_sobe { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .pk--mostra .pk__raios,
    .pk--mostra .pk__anel,
    .pk--mostra .pk__premio-destaque,
    .pk--mostra .pk__nome-premio { animation: none; opacity: 1; transform: none; }
    .pk__raios { display: none; }
}