/* Quebre o cofre-porquinho — tudo em CSS, sem arte externa além da marca
   (img/marca.svg, arquivo real do projeto).
   Cerâmica nas cores da campanha: verde da campanha com aro dourado.
   Prefixo pg__ (porquinho). */

.pg__palco {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 42 / 34;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;              /* o arrasto é nosso, não da rolagem */
}

/* ---------------- o porquinho ---------------- */

.pg__porco {
    position: absolute;
    left: 7%; bottom: 13%;
    width: 62%;
    aspect-ratio: 5 / 4;
    transition: transform .12s ease, opacity .25s ease;
}
/* tremida do impacto */
@keyframes pg_tremeu {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-2.5%, 1%) rotate(-2.5deg); }
    60%  { transform: translate(2%, 0) rotate(2deg); }
}
.pg--bateu .pg__porco { animation: pg_tremeu .34s ease-in-out 2; }
/* quebrou: o porquinho inteiro some e dá lugar aos cacos */
.pg--quebrou .pg__porco { opacity: 0; transform: scale(.92); animation: none; }

/* O porquinho e UMA imagem (img/porquinho.svg), nao um monte de caixas.
   Curvas de verdade: barriga, focinho, patas e rabo se encontram sem emenda
   em qualquer tamanho, o que a montagem em divs nunca deu. */
.pg__img {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* olho, com piscada */
.pg__olho {
    position: absolute;
    z-index: 2;
    left: 25%; top: 40%;   /* em cima do desenho, logo atras do focinho */
    width: 9%; aspect-ratio: 1;
    border-radius: 50%;
    background: #FFF3C4;
    border: 2px solid var(--jg-0a3b1f, #0A3B1F);
    box-sizing: border-box;
    overflow: hidden;
}
.pg__olho::after {
    content: '';
    position: absolute;
    left: 26%; top: 26%;
    width: 48%; height: 48%;
    border-radius: 50%;
    background: var(--jg-06281a, #06281A);
}
@keyframes pg_pisca {
    0%, 100% { transform: scaleY(1); }
    45%, 55% { transform: scaleY(.08); }
}
.pg__olho--a { left: 29.5%; top: 35.9%; }
.pg__olho--b { left: 16.5%; top: 37.4%; }
.pg--piscou .pg__olho { animation: pg_pisca .34s ease-in-out 3; transform-origin: 50% 50%; }

/* a marca da campanha no flanco */
.pg__marca {
    position: absolute;
    z-index: 2;
    left: 44%; top: 36%;
    width: 20%;
    opacity: .9;
    filter: brightness(0) invert(1);   /* a marca vem colorida; aqui vira branco */
}

/* ---------------- os cacos ---------------- */

.pg__cacos {
    position: absolute;
    left: 7%; bottom: 13%;
    width: 62%;
    aspect-ratio: 5 / 4;
    pointer-events: none;
    z-index: 5;
}
.pg__caco {
    position: absolute;
    left: 50%; top: 50%;
    width: 20%; height: 18%;
    margin: -9% 0 0 -10%;
    background: linear-gradient(160deg, var(--jg-2aa152, #2AA152), var(--jg-14532d, #14532D));
    border: 2px solid #D4AF37;
    box-sizing: border-box;
    /* cada caco tem um recorte diferente: cerâmica não quebra em retângulos */
    border-radius: var(--pg-raio, 40% 60% 55% 45%);
    opacity: 0;
}
.pg--quebrou .pg__caco {
    animation: pg_voa_caco .75s cubic-bezier(.2, .8, .4, 1) forwards;
    animation-delay: var(--pg-atraso, 0s);
}
@keyframes pg_voa_caco {
    0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--pg-dx, 0), var(--pg-dy, 0))
                                  rotate(var(--pg-giro, 0deg)) scale(.8); }
}

/* ---------------- as moedas ---------------- */

.pg__moedas {
    position: absolute;
    left: 7%; bottom: 13%;
    width: 62%;
    aspect-ratio: 5 / 4;
    pointer-events: none;
    z-index: 6;
}
.pg__moeda {
    position: absolute;
    left: 50%; top: 45%;
    width: 9%; aspect-ratio: 1;
    margin: -4.5% 0 0 -4.5%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #FFF3C4 0%, #E8C55A 45%, #B38E24 100%);
    border: 1px solid #8A6416;
    box-sizing: border-box;
    opacity: 0;
}
.pg--quebrou .pg__moeda {
    animation: pg_voa_moeda .9s cubic-bezier(.15, .75, .4, 1) forwards;
    animation-delay: var(--pg-atraso, 0s);
}
@keyframes pg_voa_moeda {
    0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
    18%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--pg-dx, 0), var(--pg-dy, -120%)) scale(1); }
}

/* ---------------- o martelo ---------------- */

.pg__martelo {
    position: absolute;
    right: 4%; top: 26%;
    width: 24%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    background: none;
    cursor: grab;
    z-index: 8;
    transform-origin: 50% 88%;        /* pivô no fim do cabo, como quem segura */
    transition: transform .18s ease;
}
.pg__martelo:active { cursor: grabbing; }
.pg--travado .pg__martelo { cursor: default; }

.pg__cabo {
    position: absolute;
    left: 46%; top: 32%;
    width: 12%; height: 66%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6B4423, #A9793F 45%, #6B4423);
}
.pg__cabeca {
    position: absolute;
    left: 14%; top: 14%;
    width: 74%; height: 24%;
    border-radius: 4px;
    background: linear-gradient(180deg, #E4EAE6 0%, #A9B4AE 55%, #6E7A74 100%);
    border: 2px solid #5C6B62;
    box-sizing: border-box;
}
/* a "unha" do martelo, para não virar um bloco liso */
.pg__cabeca::after {
    content: '';
    position: absolute;
    right: -14%; top: 8%;
    width: 26%; height: 84%;
    border-radius: 0 40% 40% 0;
    background: linear-gradient(180deg, #C9D2CD, #7C8781);
}

/* dica pulsante enquanto ninguém tocou: é o convite */
@keyframes pg_convida {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6%) rotate(-8deg); }
}
.pg__palco:not(.pg--travado) .pg__martelo { animation: pg_convida 1.8s ease-in-out infinite; }

/* a martelada: gira e desce sobre o porquinho */
.pg--batendo .pg__martelo { animation: none; }

/* ---------------- mensagem do cofre trancado ---------------- */

.pg__aviso {
    position: absolute;
    left: 4%; right: 4%; bottom: 0;
    text-align: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(var(--jg-rgb-062815, 6,40,21), .88);
    border: 1px solid rgba(212, 175, 55, .6);
    color: #FFF3C4;
    font: 700 clamp(11px, 3vw, 14px)/1.35 Arial, sans-serif;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 9;
}
.pg--trancado .pg__aviso { opacity: 1; transform: translateY(0); }

/* ---------------- revelação ---------------- */

.pg__revelacao {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    /* O halo é maior que o palco de propósito: sem recortar aqui ele escapa
       pelas laterais e a página inteira ganha rolagem lateral. */
    overflow: hidden;
    background: radial-gradient(circle at 50% 46%, rgba(var(--jg-rgb-0a3b1f, 10,59,31), .92) 0%, rgba(var(--jg-rgb-052112, 5,33,18), .97) 68%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
    z-index: 20;
    pointer-events: none;
}
.pg--mostra { opacity: 1; visibility: visible; }

.pg__raios {
    position: absolute;
    left: 50%; top: 44%;
    width: 120%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    /* REPEATING: conic-gradient comum não repete — sem isso vira UM raio só. */
    background: repeating-conic-gradient(from 7deg,
        rgba(255, 236, 160, .26) 0deg 3deg, rgba(255, 236, 160, 0) 3deg 15deg);
    border-radius: 50%;
    -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;
}
.pg--ganhou.pg--mostra .pg__raios { animation: pg_gira 9s linear infinite, pg_entra .6s ease-out forwards; }
@keyframes pg_gira  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pg_entra { to { opacity: 1; } }

.pg__premio-img {
    position: relative;
    /* Dimensionado pela ALTURA: o palco é baixo e largo, e medir pela largura
       empurra o nome do prêmio para fora. */
    height: 54%;
    width: auto;
    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(.3);
}
.pg--mostra .pg__premio-img { animation: pg_surge .6s cubic-bezier(.2, 1.4, .4, 1) .1s forwards; }
@keyframes pg_surge {
    0%   { opacity: 0; transform: scale(.3); }
    60%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.pg__nome {
    position: relative;
    max-width: 90%;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(var(--jg-rgb-061910, 6,25,16), .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);
}
.pg--ganhou.pg--mostra .pg__nome { animation: pg_sobe .4s ease-out .5s forwards; }
@keyframes pg_sobe { to { opacity: 1; transform: translateY(0); } }

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

.pg__dica {
    max-width: 420px;
    margin: 10px auto 0;
    text-align: center;
    color: #46564c;
    font: 600 12px/1.3 Arial, sans-serif;
    transition: opacity .3s ease;
}
.pg__palco.pg--travado ~ .pg__dica { opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
    .pg__palco:not(.pg--travado) .pg__martelo,
    .pg--bateu .pg__porco,
    .pg--piscou .pg__olho { animation: none; }
    .pg--ganhou.pg--mostra .pg__raios { animation: pg_entra .6s ease-out forwards; }
    .pg--mostra .pg__premio-img { animation: pg_surge .6s ease-out .1s forwards; }
}