/* Safra premiada — Financiamento Agro / Pronaf (o crescimento da safra).
 *
 * Um campo arado ao amanhecer. A pessoa toca na terra e planta a semente; uma
 * nuvem passa e chove. Só depois da resposta do servidor a planta brota (prêmio)
 * ou um vento seco passa e a terra fica como estava (consolo).
 *
 * SEM AZUL: o céu é de amanhecer — dourado no alto, verde-claro no horizonte.
 * A casa é verde e dourado, e um céu azul de cartão-postal quebraria isso.
 *
 * Tudo que precisa aparecer no estado FINAL numa captura usa @keyframes com
 * forwards: transição CSS não roda sob tempo virtual do Edge headless.
 */

.sf__palco {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #F3DF9B 0%, #F0E5B4 38%, #DCEBC4 58%, #CFE3B2 60%);
    box-shadow: 0 10px 24px -12px rgba(var(--jg-rgb-143c1e, 20,60,30), .45);
    user-select: none;
    touch-action: manipulation;
    font-family: Arial, sans-serif;
}

/* ---------------- céu ---------------- */

.sf__sol {
    position: absolute;
    right: 9%; top: 9%;
    width: 15%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF2C4 0%, #F7D66A 55%, rgba(247, 214, 106, 0) 72%);
    opacity: .9;
}

/* Rótulo do produto. Diz de que produto a campanha fala; NÃO é nome de prêmio
   e não pode parecer um. */
.sf__produto {
    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, .72);
    border: 1px solid rgba(var(--jg-rgb-14532d, 20,83,45), .18);
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jg-14532d, #14532d);
    white-space: nowrap;
    z-index: 5;
}
.sf__produto img { width: 12px; height: 12px; }

/* ---------------- terra ---------------- */

/* A terra arada: sulcos horizontais em perspectiva. O elemento é mais largo
   que o palco e inclinado; o overflow hidden do palco corta as bordas. */
.sf__terra {
    position: absolute;
    left: -16%; right: -16%; bottom: -4%;
    height: 64%;
    /* vala escura, meia-encosta, crista clara: sem a crista os sulcos viravam
       listras de tábua */
    background:
        repeating-linear-gradient(180deg,
            #4A2C14 0 7px, #6B4527 7px 13px, #8F5F38 13px 17px, #6B4527 17px 24px);
    /* perspectiva suave: com 360px/48deg a terra encolhia para um quinto do
       palco e lia como uma tábua no rodapé */
    transform: perspective(700px) rotateX(38deg);
    transform-origin: 50% 100%;
    border-top: 3px solid #3E2611;
}
/* Sombra suave no horizonte: dá volume e esconde o corte da perspectiva. */
.sf__terra::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 40%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
}

/* A cova onde a semente vai. É o alvo do toque: fica no centro do campo. */
.sf__cova {
    position: absolute;
    left: 50%; bottom: 17%;
    width: 13%; height: 6%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #3A2210 0%, #4E2F16 60%, rgba(78, 47, 22, 0) 100%);
    z-index: 2;
}

/* O botão invisível que cobre a terra: é nele que a pessoa toca. Cobre só a
   metade de baixo, para "tocar na terra" ser literalmente isso. */
.sf__toque {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 6;
    -webkit-tap-highlight-color: transparent;
}
.sf__toque:disabled { cursor: default; }
.sf__toque:focus-visible { outline: 2px dashed #D4AF37; outline-offset: -6px; }

/* ---------------- semente ---------------- */

.sf__semente {
    position: absolute;
    left: 50%; top: 30%;
    width: 4%; height: 3%;
    margin-left: -2%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #C79A5A, #7A4E22 70%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    opacity: 0;
    z-index: 3;
}
.sf--plantado .sf__semente {
    animation: sf-semente-cai .5s cubic-bezier(.3, .6, .6, 1) forwards;
}
@keyframes sf-semente-cai {
    0%   { opacity: 0; top: 30%; }
    10%  { opacity: 1; }
    85%  { top: 78%; opacity: 1; }
    100% { top: 78%; opacity: 0; }        /* entrou na terra */
}
/* A cova se fecha um pouco depois de a semente entrar. */
.sf--plantado .sf__cova { animation: sf-cova-fecha .6s .45s ease forwards; }
@keyframes sf-cova-fecha {
    to { width: 10%; height: 4.5%; }
}

/* ---------------- nuvem e chuva (FASE A, igual nas duas jogadas) ---------------- */

.sf__nuvem {
    position: absolute;
    left: -34%; top: 14%;
    width: 30%; height: 12%;
    border-radius: 999px;
    background: #F4F1EA;
    box-shadow:
        inset 0 -6px 10px rgba(120, 110, 90, .25),
        0 6px 14px -8px rgba(60, 50, 30, .45);
    z-index: 4;
}
/* Os dois "montes" de cima da nuvem. */
.sf__nuvem::before, .sf__nuvem::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #F7F4EE;
    box-shadow: inset 0 -5px 8px rgba(120, 110, 90, .22);
}
.sf__nuvem::before { left: 18%; top: -55%; width: 44%; height: 130%; }
.sf__nuvem::after  { left: 48%; top: -35%; width: 38%; height: 110%; }

/* Nuvem escurece enquanto chove: uma nuvem clara não chove. */
.sf--chovendo .sf__nuvem { background: #D9D4C8; }
.sf--chovendo .sf__nuvem::before, .sf--chovendo .sf__nuvem::after { background: #DED9CD; }

/* Entra pela esquerda, para no centro, chove, sai pela direita. O tempo total
   é a duração da fase A — o JS passa a mesma duração por --sf-fase-a. */
.sf--plantado .sf__nuvem {
    animation: sf-nuvem var(--sf-fase-a, 3.4s) linear forwards;
}
@keyframes sf-nuvem {
    0%   { left: -34%; }
    20%  { left: 35%; }
    78%  { left: 35%; }
    100% { left: 108%; }
}

.sf__chuva {
    position: absolute;
    left: 34%; top: 24%;
    width: 32%; height: 52%;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}
.sf--chovendo .sf__chuva { opacity: 1; }
.sf__gota {
    position: absolute;
    width: 2px; height: 22%;
    border-radius: 2px;
    /* verde-cinza escuro: a primeira versão era clara demais e sumia no céu */
    background: linear-gradient(180deg, rgba(120, 140, 125, 0), rgba(90, 115, 100, .9));
    animation: sf-gota .7s linear infinite;
}
@keyframes sf-gota {
    from { transform: translateY(0); opacity: 0; }
    15%  { opacity: 1; }
    to   { transform: translateY(220%); opacity: 0; }
}

/* A câmera fecha um pouco na terra enquanto chove — é o "foco" do roteiro. */
.sf__cena { position: absolute; inset: 0; transform-origin: 50% 80%; }
.sf--plantado .sf__cena { animation: sf-foco var(--sf-fase-a, 3.4s) ease-in-out forwards; }
@keyframes sf-foco {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); }
    80%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ---------------- planta (FASE B, só com prêmio) ---------------- */

.sf__planta {
    position: absolute;
    left: 50%; bottom: 20%;
    width: 22%;
    aspect-ratio: 120 / 200;
    transform: translateX(-50%) scaleY(0);
    transform-origin: 50% 100%;
    z-index: 3;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25));
}
.sf__planta svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Brota: o caule sobe rápido, as folhas abrem depois, a flor dourada por último. */
.sf--brotou .sf__planta {
    animation: sf-brota 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes sf-brota {
    0%   { transform: translateX(-50%) scaleY(0); }
    100% { transform: translateX(-50%) scaleY(1); }
}
.sf__folha {
    transform-origin: 60px 0;                    /* sobrescrito inline por folha */
    transform: scale(0);
}
.sf--brotou .sf__folha { animation: sf-folha .5s ease-out forwards; }
.sf--brotou .sf__folha--1 { animation-delay: .55s; }
.sf--brotou .sf__folha--2 { animation-delay: .75s; }
.sf--brotou .sf__folha--3 { animation-delay: .95s; }
.sf--brotou .sf__folha--4 { animation-delay: 1.1s; }
@keyframes sf-folha { to { transform: scale(1); } }

.sf__flor { transform-origin: 60px 36px; transform: scale(0); }
.sf--floresceu .sf__flor { animation: sf-flor .7s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes sf-flor { to { transform: scale(1); } }

/* Brilho dourado atrás da flor quando ela abre. */
.sf__brilho {
    position: absolute;
    left: 50%; top: 22%;
    width: 44%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 120, .85) 0%, rgba(255, 226, 120, .35) 40%, rgba(255, 226, 120, 0) 70%);
    z-index: 2;
    pointer-events: none;
}
.sf--floresceu .sf__brilho { animation: sf-brilho 1.1s ease-out forwards; }
@keyframes sf-brilho {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
}

/* A etiqueta do prêmio pendurada no ramo. Só ganha imagem e nome no desfecho.
   Largura + margem ficam abaixo de 50% para ela não vazar pela direita. */
.sf__etiqueta {
    position: absolute;
    left: 50%; top: 22%;
    width: 40%;
    margin-left: 3%;
    transform: translateY(-30px);
    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, .5);
    z-index: 5;
}
/* O barbante que prende a etiqueta ao ramo. */
.sf__etiqueta::before {
    content: '';
    position: absolute;
    left: 14px; top: -14px;
    width: 2px; height: 14px;
    background: #8A6D1F;
}
.sf__etiqueta img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.sf__etiqueta div { font: 700 clamp(10px, 2.6vw, 12px)/1.25 Arial, sans-serif; color: var(--jg-14532d, #14532d); min-width: 0; }
.sf__etiqueta small { display: block; font: 700 9px/1.2 Arial, sans-serif; letter-spacing: .08em; color: #8A6D1F; margin-bottom: 2px; }
.sf--etiqueta .sf__etiqueta { animation: sf-etiqueta .6s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes sf-etiqueta {
    to { transform: translateY(0); opacity: 1; }
}

/* ---------------- vento seco (FASE B, sem prêmio) ---------------- */

.sf__vento {
    position: absolute; inset: 0;
    opacity: 0;
    z-index: 4;
    pointer-events: none;
}
.sf--vento .sf__vento { opacity: 1; }
.sf__rajada {
    position: absolute;
    left: -40%;
    height: 4px;
    border-radius: 4px;
    /* tom de terra seca, escuro o bastante para ler contra o céu claro */
    background: linear-gradient(90deg, rgba(150, 110, 55, 0), rgba(150, 110, 55, .85) 40%, rgba(150, 110, 55, 0));
    transform: rotate(-4deg);
    opacity: 0;
}
.sf--vento .sf__rajada { animation: sf-rajada 1.4s ease-in-out forwards; }
@keyframes sf-rajada {
    0%   { left: -40%; opacity: 0; }
    15%  { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}
/* Poeira levantando da terra. */
.sf__poeira {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 130, 80, .7), rgba(170, 130, 80, 0) 70%);
    opacity: 0;
}
.sf--vento .sf__poeira { animation: sf-poeira 1.5s ease-out forwards; }
@keyframes sf-poeira {
    0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
    30%  { opacity: .9; }
    100% { transform: translate(120px, -30px) scale(1.4); opacity: 0; }
}

/* ---------------- mensagem ---------------- */

/* A faixa de mensagem tem altura reservada para duas linhas desde o início:
   assim a caixa do jogo nasce no tamanho final e não pula no desfecho. É ela
   que faz o papel da dica — não há dica solta embaixo, seria repetição. */
.sf__msg {
    max-width: 480px;
    min-height: 56px;
    margin: 12px 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);
}
.sf__msg--premiado { background: var(--jg-e3f5e6, #E3F5E6); border-color: var(--jg-9fd8ab, #9FD8AB); color: var(--jg-14532d, #14532d); }
.sf__msg--consolo  { background: #F7F1DF; border-color: #E5D5A3; color: #6B5A22; }
.sf__msg b { color: var(--jg-0a7a00, #0A7A00); }
.sf__msg--consolo b { color: #8A6D1F; }

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

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

/* Movimento reduzido: cada coisa para num estado VISIVEL, nao some. O Edge
   headless deste servidor declara prefers-reduced-motion: reduce, entao e este
   bloco que as capturas de verificacao mostram — se ele escondesse a chuva ou
   o vento, a bancada nao teria como conferir a cena. */
@media (prefers-reduced-motion: reduce) {
    .sf--plantado .sf__cena { animation: none; }
    .sf__gota { animation: none; opacity: .85; }
    .sf--vento .sf__rajada { animation: none; left: 28%; opacity: .85; }
    .sf--vento .sf__poeira { animation: none; opacity: .6; transform: translate(40px, -10px) scale(1); }
    .sf--brotou .sf__planta { animation: none; transform: translateX(-50%) scaleY(1); }
    .sf--brotou .sf__folha { animation: none; transform: scale(1); }
    .sf--floresceu .sf__flor { animation: none; transform: scale(1); }
    .sf--etiqueta .sf__etiqueta { animation: none; transform: none; opacity: 1; }
}