/* Monte Três — tabuleiro de produtos. Tudo em CSS/SVG, sem arte externa.
   Os ícones são formas geométricas de propósito: num quadrado de ~60px, ícone
   detalhado vira mancha. */

.m3__missao {
    text-align: center;
    font: 700 15px/1.3 Arial, sans-serif;
    color: var(--jg-14532d, #14532d);
    margin-bottom: 4px;
}
.m3__placar {
    text-align: center;
    font: 14px/1.3 Arial, sans-serif;
    color: #46564c;
    margin-bottom: 12px;
}
.m3__placar b { font-size: 20px; color: #B38E24; }

.m3__palco {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 20%, var(--jg-1c8040, #1C8040) 0%, var(--jg-14532d, #14532D) 55%, var(--jg-0a3b1f, #0A3B1F) 100%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .35);
}

.m3__grade {
    display: grid;
    grid-template-columns: repeat(var(--m3-lado, 4), 1fr);
    gap: 6px;
}

.m3__peca {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: var(--m3-cor, var(--jg-14532d, #14532D));
    padding: 12%;
    cursor: pointer;
    transition: transform .14s, box-shadow .14s, opacity .22s;
}
.m3__peca svg { width: 100%; height: 100%; display: block; fill: rgba(255, 255, 255, .92); }
.m3__peca:hover { transform: translateY(-2px); }

/* peça escolhida, esperando o par */
.m3__peca.m3--sel {
    box-shadow: 0 0 0 3px #FFF3C4, 0 6px 14px -6px rgba(0, 0, 0, .5);
    transform: scale(1.06);
}

/* trinca fechada: some encolhendo */
@keyframes m3_estoura {
    0%   { transform: scale(1);   opacity: 1; }
    45%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(.2);  opacity: 0; }
}
.m3__peca.m3--estoura { animation: m3_estoura .26s ease-in forwards; }

/* a missão se completando: as peças do alvo pulsam antes de estourar */
@keyframes m3_brilha {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 240, 170, 0); }
    50%      { box-shadow: 0 0 14px 5px rgba(255, 240, 170, .95); }
}
.m3__peca.m3--brilha { animation: m3_brilha .42s ease-in-out 2; }

/* ---------- revelação do prêmio (mesma linguagem do Plinko e da Caixa) ---------- */
.m3__revelacao {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 45%, rgba(var(--jg-rgb-0a3b1f, 10,59,31), .86) 0%, rgba(var(--jg-rgb-062815, 6,40,21), .96) 72%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 20;
    pointer-events: none;
}
.m3__revelacao.m3--mostra { opacity: 1; visibility: visible; }

.m3__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);
    border-radius: 50%;
    opacity: 0;
}
.m3--mostra .m3__raios { animation: m3_raios 9s linear infinite, m3_raios_entra .5s ease-out forwards; }
@keyframes m3_raios       { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes m3_raios_entra { to { opacity: 1; } }

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

.m3__premio-destaque {
    position: relative;
    width: 52%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border: 3px solid #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;
}
.m3--mostra .m3__premio-destaque { animation: m3_estouro .55s cubic-bezier(.2, 1.5, .4, 1) .12s forwards; }
@keyframes m3_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); }
}

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

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

@media (prefers-reduced-motion: reduce) {
    .m3__peca.m3--brilha { animation: none; }
    .m3--mostra .m3__raios, .m3--mostra .m3__anel,
    .m3--mostra .m3__premio-destaque, .m3--mostra .m3__nome-premio {
        animation: none; opacity: 1; transform: none;
    }
    .m3__raios { display: none; }
}

/* ícone do produto da missão, na própria frase */
.m3__alvo {
    display: inline-block;
    width: 26px; height: 26px;
    vertical-align: -7px;
    margin: 0 4px 0 2px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 7px;
    background: var(--m3-cor, var(--jg-14532d, #14532D));
    border: 1px solid rgba(0, 0, 0, .15);
}
.m3__alvo svg { width: 100%; height: 100%; display: block; fill: rgba(255, 255, 255, .95); }