/* Caixa misteriosa — corpo, tampa, fita e laço em CSS puro, sem arte externa:
   nada para faltar no servidor e nítido em qualquer tamanho.

   Construção vinda da referência do cliente (mostruario/caixa2.html):

   1) As ASAS do laço são largas e baixas, com cantos assimétricos
      (50% 50% 15% 45%), e ficam ATRÁS de tudo. Minhas tentativas anteriores
      usaram elipse, bezier e pétala simétrica — todas fechavam mal.
   2) A FITA VERTICAL passa por cima das asas e faz as vezes de nó. Não existe
      nó separado: é a sobreposição que dá o laço. Foi o que faltava nas versões
      anteriores, que tinham um nó redondo solto no meio.
   3) TAMPA, FITA E LAÇO são um grupo só (.cx__tampa) e decolam juntos. O corpo
      fica com a faixa horizontal, que não sai.

   As medidas seguem as proporções da referência (caixa de 150x160). */

:root {
    --cx-verde:        var(--jg-0e382b, #0E382B);   /* verde acetinado do corpo */
    --cx-verde-tampa:  var(--jg-144637, #144637);   /* um tom acima, para a tampa destacar */
    --cx-ouro:         #CCA331;
    --cx-ouro-sombra:  #B38E24;
}

.cx__campo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    max-width: 620px;
    margin: 0 auto;
}

.cx__caixa {
    position: relative;
    width: 150px;
    aspect-ratio: 15 / 16;        /* mesma proporção da referência */
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

/* ---------- corpo (fixo) ---------- */
.cx__corpo {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 62.5%;
    background: var(--cx-verde);
    border-radius: 0 0 16px 16px;
    box-shadow: inset 0 6px 8px rgba(0, 0, 0, .15);
    overflow: hidden;
    z-index: 1;
}
.cx__fita-h {
    position: absolute;
    left: 0; right: 0;
    top: 36%;
    height: 22%;
    background: var(--cx-ouro-sombra);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
}

/* ---------- grupo que sobe: laço + fita + tampa ---------- */
.cx__tampa {
    position: absolute;
    inset: 0;
    z-index: 10;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}

/* asas do laço, atrás de tudo */
.cx__laco {
    position: absolute;
    left: 3.3%;
    top: 6.25%;
    width: 93.3%;
    height: 31.25%;
    z-index: 1;
}
.cx__laco::before,
.cx__laco::after {
    content: "";
    position: absolute;
    width: 36%;
    height: 88%;
    background: linear-gradient(135deg, var(--cx-ouro), var(--cx-ouro-sombra));
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}
.cx__laco::before { left: 10%;  border-radius: 50% 50% 15% 45%; transform: rotate(-8deg); }
.cx__laco::after  { right: 10%; border-radius: 50% 50% 45% 15%; transform: rotate(8deg); }

/* fita vertical: passa POR CIMA das asas e faz o nó */
.cx__fita-v {
    position: absolute;
    top: 6.25%;
    left: 39.3%;
    width: 21.3%;
    height: 70%;
    background: linear-gradient(to bottom, var(--cx-ouro), var(--cx-ouro-sombra));
    border-radius: 8px 8px 12px 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
    z-index: 5;
}

/* a tampa em si */
.cx__lid {
    position: absolute;
    left: -3.3%;
    top: 30%;
    width: 106.7%;
    height: 26.25%;
    background: var(--cx-verde-tampa);
    border-radius: 12px;
    box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .15), 0 4px 6px rgba(0, 0, 0, .1);
    z-index: 3;
}

/* ---------- luz saindo da boca ----------
   Só a luz. Partículas subindo viravam ruído justamente sobre o prêmio que
   acabou de aparecer; o clarão sozinho já entrega a surpresa. */
.cx__brilho {
    position: absolute;
    left: 50%; top: 24%;
    width: 86%; height: 38%;
    margin-left: -43%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 60%,
                rgba(255, 255, 255, .95) 0%,
                rgba(255, 245, 200, .55) 38%,
                rgba(255, 240, 180, 0)   72%);
    opacity: 0;
    transform: scale(.3);
    z-index: 6;
    pointer-events: none;
}

/* ---------- prêmio revelado ---------- */
.cx__premio-img {
    position: absolute;
    left: 12%;
    top: 32%;
    width: 76%;
    height: 46%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.55);
    transition: opacity .35s .2s, transform .35s .2s cubic-bezier(.2, 1.5, .4, 1);
    z-index: 7;
}

/* ---------- estados ---------- */

/* Balanço de espera: chama o clique. Quatro meneios curtos e depois repouso —
   meneio contínuo cansa e tira a atenção do resto da tela. Cada caixa entra num
   tempo diferente para não balançarem em bloco. */
@keyframes cx_espera {
    0%, 25%, 100% { transform: rotate(0deg); }
    5%            { transform: rotate(-2deg); }
    10%           { transform: rotate(2deg); }
    15%           { transform: rotate(-2deg); }
    20%           { transform: rotate(2deg); }
}
.cx__caixa:not(.cx--aberta):not(.cx--apagada):not(.cx--balanca) {
    animation: cx_espera 4s infinite ease-in-out;
}
.cx__caixa:nth-child(2) { animation-delay: .5s; }
.cx__caixa:nth-child(3) { animation-delay: 1s; }
.cx__caixa:nth-child(4) { animation-delay: 1.5s; }
.cx__caixa:nth-child(5) { animation-delay: 2s; }
.cx__caixa:hover { animation: none; }

/* balanço mais forte, na hora em que a caixa é escolhida */
@keyframes cx_balanca {
    0%, 100% { transform: translateX(0) rotate(0); }
    15%, 55% { transform: translateX(-8px) rotate(-3deg); }
    35%, 75% { transform: translateX(8px)  rotate(3deg); }
}
.cx__caixa.cx--balanca { animation: cx_balanca .62s ease-in-out; }

/* Abertura: o grupo inteiro decola e sai de cena, liberando a boca da caixa
   para o prêmio. */
.cx__caixa.cx--aberta { cursor: default; }
.cx__caixa.cx--aberta .cx__tampa {
    transform: translateY(-88%) rotate(-22deg) scale(.85);
    opacity: 0;
    transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), opacity .4s ease;
}
.cx__caixa.cx--aberta .cx__premio-img { opacity: 1; transform: scale(1); }

@keyframes cx_brilho {
    0%   { opacity: 0; transform: scale(.25); }
    35%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.25); }
}
.cx__caixa.cx--aberta .cx__brilho { animation: cx_brilho .85s ease-out; }

/* premiada: contorno dourado; não premiada: dessaturada */
.cx__caixa.cx--ganhou .cx__corpo {
    box-shadow: 0 0 0 3px var(--cx-ouro), inset 0 6px 8px rgba(0, 0, 0, .15);
}
.cx__caixa.cx--perdeu .cx__corpo { filter: saturate(.5); }

/* as não escolhidas ficam para trás, sem abrir */
.cx__caixa.cx--apagada { opacity: .42; filter: grayscale(.3); }
.cx__campo.cx--travado .cx__caixa { pointer-events: none; }

/* ---------- vitrine ---------- */
.cx__premios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 620px;
    margin: 18px auto 0;
}
.cx__premios .cx__titulo {
    width: 100%; text-align: center; font-weight: 700; color: var(--jg-14532d, #14532d); margin-bottom: 2px;
}
.cx__premios .cx__premio { width: 74px; text-align: center; font-size: 11px; line-height: 1.2; color: var(--jg-14532d, #14532d); }
.cx__premios .cx__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) {
    .cx__campo { gap: 14px; }
    .cx__caixa { width: 104px; }
    .cx__premios .cx__premio { width: 62px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cx__caixa:not(.cx--aberta),
    .cx__caixa.cx--balanca { animation: none; }
    .cx__caixa.cx--aberta .cx__brilho { animation: none; opacity: 0; }
}

/* ---------- revelação do prêmio ----------
   Mesma celebração do Plinko: a forma termina no palco, então é ali que o
   prêmio aparece. Raios girando por trás, anel de luz que estoura e some, e o
   prêmio entrando com exagero. Só quando há prêmio — festa em derrota soa
   deboche. */
.cx__campo { position: relative; }

.cx__revelacao {
    position: absolute;
    inset: -6% -2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 48%, rgba(var(--jg-rgb-0a3b1f, 10,59,31), .86) 0%, rgba(var(--jg-rgb-062815, 6,40,21), .96) 72%);
    transition: opacity .3s ease;
    z-index: 30;
    pointer-events: none;
}
.cx__revelacao.cx--mostra { opacity: 1; visibility: visible; }

.cx__raios {
    position: absolute;
    left: 50%; top: 50%;
    width: 130%; 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);
    border-radius: 50%;
    opacity: 0;
}
.cx--mostra .cx__raios { animation: cx_raios 9s linear infinite, cx_raios_entra .5s ease-out forwards; }
@keyframes cx_raios       { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes cx_raios_entra { to { opacity: 1; } }

.cx__anel {
    position: absolute;
    left: 50%; top: 50%;
    width: 22%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.2);
    border: 4px solid rgba(255, 240, 180, .9);
    border-radius: 50%;
    opacity: 0;
}
.cx--mostra .cx__anel { animation: cx_anel .85s cubic-bezier(.2, .7, .3, 1) .1s; }
@keyframes cx_anel {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.2); }
    25%  { opacity: .95; }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(3); }
}

/* dimensionado pela ALTURA: a faixa de caixas é baixa e larga, então largura em
   % deixaria a imagem estourando para fora */
.cx__premio-destaque {
    position: relative;
    height: 66%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border: 3px solid var(--cx-ouro);
    border-radius: 14px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6);
    transform: scale(.2) rotate(-12deg);
    opacity: 0;
}
.cx--mostra .cx__premio-destaque { animation: cx_estouro .55s cubic-bezier(.2, 1.5, .4, 1) .12s forwards; }
@keyframes cx_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); }
}

.cx__nome-premio {
    position: relative;
    max-width: 86%;
    text-align: center;
    font: 800 clamp(14px, 3.6vw, 20px)/1.2 Arial, sans-serif;
    color: #FFF3C4;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: translateY(8px);
}
.cx--mostra .cx__nome-premio { animation: cx_sobe .4s ease-out .45s forwards; }
@keyframes cx_sobe { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .cx--mostra .cx__raios,
    .cx--mostra .cx__anel,
    .cx--mostra .cx__premio-destaque,
    .cx--mostra .cx__nome-premio { animation: none; opacity: 1; transform: none; }
    .cx__raios { display: none; }
}