/* Alicerce premiado (o bloco que falta).
 *
 * Uma agência moderna em construção, desenhada em traço digital sobre fundo
 * verde-escuro. Falta um bloco no centro do alicerce. A pessoa toca em
 * "Assentar o bloco" e o bloco desce; só depois da resposta ele encaixa
 * (o prédio inteiro brilha em verde e dourado) ou se rompe antes de tocar a
 * base (o prédio treme e fica cinza).
 *
 * O BLOCO PARA NO MESMO PONTO NAS DUAS JOGADAS antes da resposta: a descida é
 * a fase A. Se ele descesse mais quando há prêmio, a altura entregaria o
 * resultado antes do encaixe.
 *
 * Tudo que precisa aparecer no estado FINAL numa captura usa @keyframes com
 * forwards (transição não roda sob tempo virtual) ou classe estática (o bloco
 * de movimento reduzido — que o Edge headless deste servidor declara — não
 * pode esconder o desfecho).
 */

.al__palco {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(var(--jg-rgb-2aa152, 42,161,82), .22), rgba(var(--jg-rgb-2aa152, 42,161,82), 0) 60%),
        linear-gradient(180deg, var(--jg-06281a, #06281A) 0%, var(--jg-0b3d24, #0B3D24) 100%);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
    user-select: none;
    font-family: Arial, sans-serif;
}
/* Grade de projeto ao fundo: é o que diz "construção digital". */
.al__palco::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(var(--jg-rgb-7dd69a, 125,214,154), .07) 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, rgba(var(--jg-rgb-7dd69a, 125,214,154), .07) 1px, transparent 1px) 0 0 / 24px 100%;
    pointer-events: none;
}

/* Rótulo do produto no alto. NÃO é nome de prêmio. */
.al__rotulo {
    position: absolute;
    left: 50%; top: 6%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(var(--jg-rgb-7dd69a, 125,214,154), .45);
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jg-cff3da, #CFF3DA);
    white-space: nowrap;
    z-index: 5;
}
.al__rotulo img { width: 12px; height: 12px; }

/* ---------------- o prédio ---------------- */

.al__predio {
    position: absolute;
    left: 50%; bottom: 4%;
    width: 84%;
    transform: translateX(-50%);
    z-index: 2;
}
.al__predio svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Traço padrão: verde-claro sobre o escuro, vidro translúcido. */
.al__traco   { fill: rgba(255, 255, 255, .05); stroke: var(--jg-7dd69a, #7DD69A); stroke-width: 1.6; stroke-linejoin: round; }
.al__janela  { fill: rgba(var(--jg-rgb-7dd69a, 125,214,154), .28); stroke: var(--jg-7dd69a, #7DD69A); stroke-width: .8; }
.al__solo    { stroke: var(--jg-7dd69a, #7DD69A); stroke-width: 2; opacity: .7; }
.al__vao     { fill: var(--jg-041a10, #041A10); stroke: #D4AF37; stroke-width: 1.4; stroke-dasharray: 4 3; }
.al__marca   { fill: var(--jg-7dd69a, #7DD69A); }

/* Prêmio: tudo vira verde vivo e dourado, com brilho. */
.al--brilha .al__traco  { stroke: #FFD86B; fill: rgba(255, 216, 107, .10); }
.al--brilha .al__janela { fill: rgba(255, 216, 107, .55); stroke: #FFE9A8; }
.al--brilha .al__solo   { stroke: #FFD86B; opacity: 1; }
.al--brilha .al__vao    { stroke: #FFD86B; stroke-dasharray: none; fill: #B8860B; }
.al--brilha .al__marca  { fill: #FFD86B; }
.al--brilha .al__predio { filter: drop-shadow(0 0 6px rgba(255, 216, 107, .8)) drop-shadow(0 0 18px rgba(var(--jg-rgb-2aa152, 42,161,82), .7)); }
/* Varredura de luz de baixo para cima quando consolida. */
.al__luz {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    background: linear-gradient(180deg, rgba(255, 216, 107, 0), rgba(255, 216, 107, .28));
    z-index: 3; pointer-events: none;
}
.al--brilha .al__luz { animation: al-luz .9s ease-out forwards; }
@keyframes al-luz {
    0%   { height: 0; opacity: 1; }
    70%  { height: 100%; opacity: 1; }
    100% { height: 100%; opacity: 0; }
}

/* Sem prêmio: o prédio treme de leve e fica cinza. O cinza é classe estática
   (não animação): é o estado final e tem de aparecer em qualquer captura. */
.al--cinza .al__traco  { stroke: #9AA39C; fill: rgba(255, 255, 255, .03); }
.al--cinza .al__janela { fill: rgba(154, 163, 156, .22); stroke: #9AA39C; }
.al--cinza .al__solo   { stroke: #9AA39C; }
.al--cinza .al__vao    { stroke: #9AA39C; }
.al--cinza .al__marca  { fill: #9AA39C; }
.al--cinza .al__predio { opacity: .85; }
.al--treme .al__predio { animation: al-treme .55s ease-in-out; }
@keyframes al-treme {
    0%, 100% { transform: translateX(-50%); }
    20% { transform: translateX(calc(-50% - 4px)); }
    40% { transform: translateX(calc(-50% + 4px)); }
    60% { transform: translateX(calc(-50% - 3px)); }
    80% { transform: translateX(calc(-50% + 2px)); }
}

/* ---------------- o bloco ---------------- */

/* O bloco fica em HTML, por cima do SVG: é mais fácil animar e medir.
   Largura e posição final casam com o vão do alicerce no SVG (40 de 400 de
   largura, 30 de 250 de altura, no centro). O --al-desce é a duração da fase A,
   que o JS passa do T(DESCE). */
.al__bloco {
    position: absolute;
    left: 50%;
    top: -16%;
    width: 8.4%;
    aspect-ratio: 4 / 3;
    margin-left: -4.2%;
    border-radius: 3px;
    background: linear-gradient(180deg, #FFE98A 0%, #E5B93A 55%, #B8860B 100%);
    border: 1px solid #FFF1B0;
    box-shadow: 0 0 10px rgba(255, 216, 107, .6), 0 4px 8px rgba(0, 0, 0, .4);
    z-index: 4;
}
/* face de cima, para o cubo ter volume */
.al__bloco::before {
    content: '';
    position: absolute; left: 0; right: 0; top: -22%; height: 22%;
    background: #FFF1B0;
    border-radius: 3px 3px 0 0;
    opacity: .9;
}

/* FASE A: desce do alto até o ponto de espera, e fica lá pulsando. */
.al--lancado .al__bloco {
    animation: al-desce var(--al-desce, 1.8s) cubic-bezier(.3, .2, .5, 1) forwards,
               al-pulsa .9s ease-in-out var(--al-desce, 1.8s) infinite;
}
@keyframes al-desce {
    from { top: -16%; }
    to   { top: 54%; }
}
@keyframes al-pulsa {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 216, 107, .6), 0 4px 8px rgba(0, 0, 0, .4); }
    50%      { box-shadow: 0 0 18px rgba(255, 216, 107, .95), 0 4px 8px rgba(0, 0, 0, .4); }
}

/* FASE B com prêmio: encaixa com "ímã" — acelera os últimos centímetros. */
.al--encaixa .al__bloco {
    animation: al-encaixa .45s cubic-bezier(.6, 0, .9, .6) forwards;
}
@keyframes al-encaixa {
    from { top: 54%; }
    to   { top: 78.4%; }
}
/* Faísca do encaixe. */
.al__faisca {
    position: absolute;
    left: 50%; top: 82%;
    width: 0; height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 176, 1), rgba(255, 216, 107, 0) 70%);
    transform: translate(-50%, -50%);
    z-index: 5; pointer-events: none;
}
.al--brilha .al__faisca { animation: al-faisca .6s ease-out forwards; }
@keyframes al-faisca {
    0%   { width: 0; height: 0; opacity: 1; }
    100% { width: 40%; height: 40%; opacity: 0; }
}

/* FASE B sem prêmio: o bloco desalinha, se rompe e some antes da base. */
.al--rompe .al__bloco {
    animation: al-desalinha .35s ease-in forwards;
}
@keyframes al-desalinha {
    from { transform: rotate(0); opacity: 1; }
    to   { transform: rotate(-14deg) translateY(6px); opacity: 0; }
}
.al__caco {
    position: absolute;
    left: 50%; top: 56%;
    width: 4%; aspect-ratio: 1;
    background: linear-gradient(180deg, #E5B93A, #B8860B);
    border: 1px solid #FFF1B0;
    opacity: 0;
    z-index: 4;
}
.al--rompe .al__caco { animation: al-caco .9s .3s cubic-bezier(.3, .4, .7, 1) forwards; }
@keyframes al-caco {
    0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
    100% { opacity: 0; transform: translate(var(--al-dx), var(--al-dy)) rotate(var(--al-giro)); }
}

/* ---------------- placa do prêmio ---------------- */

/* Só ganha imagem e nome no desfecho. */
.al__placa {
    position: absolute;
    left: 50%; top: 30%;
    width: 46%;
    transform: translate(-50%, 16px);
    opacity: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFF8DC, #F5E3A1);
    border: 1.5px solid #C9A227;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .7);
    z-index: 6;
}
.al__placa img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.al__placa div { font: 700 clamp(10px, 2.6vw, 12px)/1.25 Arial, sans-serif; color: var(--jg-14532d, #14532d); min-width: 0; }
.al__placa small { display: block; font: 700 9px/1.2 Arial, sans-serif; letter-spacing: .08em; color: #8A6D1F; margin-bottom: 2px; }
.al--placa .al__placa { animation: al-placa .5s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes al-placa { to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------------- botão e mensagem ---------------- */

.al__botao {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 10px auto 0;
    padding: 12px 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--jg-2aa152, #2AA152), var(--jg-0a7a00, #0A7A00));
    color: #fff;
    font: 700 15px/1.2 Arial, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(var(--jg-rgb-0a7a00, 10,122,0), .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.al__botao:hover:not(:disabled) { filter: brightness(1.06); }
.al__botao:disabled { opacity: .55; cursor: default; }

/* A faixa reserva duas linhas desde o início; conteúdo sempre num <span>
   (flex engole o espaço entre <b> e texto solto). */
.al__msg {
    max-width: 480px;
    min-height: 56px;
    margin: 10px auto 0;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    text-align: center;
    font: 700 clamp(11px, 3vw, 14px)/1.35 Arial, sans-serif;
    color: #46564c;
    background: var(--jg-eef4ef, #EEF4EF);
    border: 1px solid var(--jg-dce6de, #DCE6DE);
}
.al__msg--premiado { background: var(--jg-e3f5e6, #E3F5E6); border-color: var(--jg-9fd8ab, #9FD8AB); color: var(--jg-14532d, #14532d); }
.al__msg--consolo  { background: #F1F3F1; border-color: #CDD5CE; color: #4F5A52; }
.al__msg b { color: var(--jg-0a7a00, #0A7A00); }
.al__msg--consolo b { color: #5C6B60; }

/* ---------------- vitrine ---------------- */

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

/* Movimento reduzido: cada coisa PARA num estado visível que conta a mesma
   história — nunca some. É também o que as capturas do headless mostram. */
@media (prefers-reduced-motion: reduce) {
    .al--lancado .al__bloco { animation: none; top: 54%; }
    .al--encaixa .al__bloco { animation: none; top: 78.4%; }
    .al--rompe .al__bloco   { animation: none; opacity: 0; }
    .al--rompe .al__caco    { animation: none; opacity: .7; transform: translate(var(--al-dx), var(--al-dy)) rotate(var(--al-giro)); }
    .al--treme .al__predio  { animation: none; }
    .al--brilha .al__luz, .al--brilha .al__faisca { animation: none; }
    .al--placa .al__placa   { animation: none; transform: translate(-50%, 0); opacity: 1; }
}