/* Gráfico da prosperidade — mecânica estilo crash, tudo em CSS/SVG.
 *
 * A linha e a área sob ela são um <path> que cresce; o multiplicador é texto.
 * Nada de canvas: em canvas eu teria de tratar densidade de tela na mão, e o
 * SVG escala sozinho pelo viewBox.
 */

.gr__palco {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    -webkit-user-select: none;
    user-select: none;
}

.gr__quadro {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 110%, var(--jg-14532d, #14532D) 0%, var(--jg-0a3b1f, #0A3B1F) 55%, var(--jg-06281a, #06281A) 100%);
    border: 2px solid #D4AF37;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
}

.gr__svg { display: block; width: 100%; height: auto; }

/* grade de fundo */
.gr__grade { stroke: rgba(255, 255, 255, .09); stroke-width: .25; }

/* a área sob a curva */
.gr__area { fill: url(#grDegrade); opacity: .55; }

/* a curva */
.gr__linha {
    fill: none;
    stroke: #7CF7B0;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(124,247,176, .8));
}
/* a ponta que corre */
.gr__ponta {
    fill: #FFF3C4;
    stroke: #D4AF37;
    stroke-width: .5;
}

/* parou: a linha esfria e a ponta vira um X */
.gr--parou .gr__linha  { stroke: #8D9C93; filter: none; }
.gr--parou .gr__area   { opacity: .22; }
.gr--parou .gr__ponta  { fill: #8D9C93; stroke: #5C6B62; }

/* garantiu: a linha acende em dourado */
.gr--garantiu .gr__linha { stroke: #F0D57A; filter: drop-shadow(0 0 4px rgba(240, 213, 122, .9)); }
.gr--garantiu .gr__ponta { fill: #FFF3C4; stroke: #B38E24; stroke-width: .8; }

/* legenda colada na ponta da linha */
.gr__legenda {
    position: absolute;
    left: 0; top: 100%;
    transform: translate(-50%, -160%);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--jg-rgb-062815, 6,40,21), .88);
    border: 1px solid rgba(212, 175, 55, .75);
    color: #FFF3C4;
    font: 700 clamp(10px, 2.8vw, 13px)/1.2 Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 4;
}
.gr__legenda.gr--visivel { opacity: 1; }
/* perto do topo do quadro a legenda passa para baixo da ponta, senão é cortada */
.gr__legenda.gr--abaixo { transform: translate(-50%, 60%); }
.gr--parou .gr__legenda { background: rgba(40, 48, 44, .9); border-color: #5C6B62; color: #C7D3CB; }

/* ---------------- multiplicador ---------------- */

/* Canto superior esquerdo, não centro: a legenda anda colada na ponta da linha,
   que sobe da base esquerda para o topo direito, e no meio do quadro as duas
   coisas se sobrepunham. No canto elas nunca se encontram — e é onde um gráfico
   de verdade mostra o valor. */
.gr__mult {
    position: absolute;
    left: 4%; top: 6%;
    text-align: left;
    font: 800 clamp(26px, 9vw, 44px)/1 Arial, sans-serif;
    color: #FFF3C4;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .7);
    pointer-events: none;
}
.gr--parou .gr__mult    { color: #B9C6BE; }
.gr--garantiu .gr__mult { color: #F0D57A; }

.gr__estado {
    position: absolute;
    left: 4%; top: 6%;
    margin-top: clamp(28px, 9.5vw, 47px);   /* logo abaixo do multiplicador */
    text-align: left;
    font: 700 clamp(11px, 3.2vw, 14px)/1.2 Arial, sans-serif;
    color: rgba(255, 243, 196, .8);
    letter-spacing: .5px;
    pointer-events: none;
}
.gr--parou .gr__estado { color: #B9C6BE; }

/* ---------------- botão ---------------- */

.gr__acao {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 12px auto 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--jg-1c8040, #1C8040), var(--jg-14532d, #14532D));
    color: #FFF3C4;
    font: 800 clamp(14px, 4vw, 18px)/1.2 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7);
    transition: transform .12s, box-shadow .2s, background .2s, opacity .2s;
}
.gr__acao:active { transform: translateY(2px); }

/* Enquanto não há o que garantir, o botão fica visivelmente inerte. Ele só
   acende quando existe benefício para garantir — botão aceso que responde
   "não foi desta vez" seria mentira no rótulo. */
.gr__acao[disabled] {
    background: linear-gradient(180deg, #46564C, #33403A);
    color: rgba(255, 255, 255, .55);
    cursor: default;
    box-shadow: none;
}

@keyframes gr_pulsa {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .0), 0 8px 18px -10px rgba(0, 0, 0, .7); }
    50%      { box-shadow: 0 0 0 8px rgba(212, 175, 55, .28), 0 8px 18px -10px rgba(0, 0, 0, .7); }
}
.gr__acao.gr--armado {
    background: linear-gradient(180deg, #E8C55A, #B38E24);
    color: var(--jg-14532d, #14532D);
    animation: gr_pulsa 1.1s ease-in-out infinite;
}

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

.gr__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 quadro 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;
}
.gr--mostra { opacity: 1; visibility: visible; }

.gr__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;
}
.gr--ganhou.gr--mostra .gr__raios { animation: gr_gira 9s linear infinite, gr_entra .6s ease-out forwards; }
@keyframes gr_gira  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gr_entra { to { opacity: 1; } }

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

.gr__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);
}
.gr--ganhou.gr--mostra .gr__nome { animation: gr_sobe .4s ease-out .5s forwards; }
@keyframes gr_sobe { to { opacity: 1; transform: translateY(0); } }

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

.gr__dica {
    max-width: 460px;
    margin: 10px auto 0;
    text-align: center;
    color: #46564c;
    font: 600 12px/1.3 Arial, sans-serif;
}

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

@media (prefers-reduced-motion: reduce) {
    .gr__acao.gr--armado { animation: none; }
    .gr--ganhou.gr--mostra .gr__raios { animation: gr_entra .6s ease-out forwards; }
    .gr--mostra .gr__premio-img { animation: gr_surge .6s ease-out .1s forwards; }
}

/* eixo dos meses, na base do quadro */
.gr__eixo {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: repeat(var(--gr-meses, 6), 1fr);
    padding: 0 6px 4px;   /* respiro nas pontas: o primeiro e o ultimo rotulo
                             encostavam na moldura arredondada */
    pointer-events: none;
    z-index: 2;
}
.gr__eixo span {
    text-align: center;
    font: 700 clamp(8px, 2.2vw, 11px)/1.2 Arial, sans-serif;
    overflow: hidden;
    text-overflow: clip;
    color: rgba(255, 243, 196, .55);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.gr--parou .gr__eixo span { color: rgba(199, 211, 203, .5); }

/* rendimento do mes dentro da legenda */
.gr__legenda b { margin-left: 6px; font-weight: 800; }
.gr__legenda b.gr--alta  { color: #7CF7B0; }
.gr__legenda b.gr--baixa { color: #FFC9A8; }

/* linha da meta (1% ao mes acumulado) */
.gr__meta {
    stroke: #F0D57A;
    stroke-width: .45;
    stroke-dasharray: 2 1.6;
    opacity: .85;
}
.gr__meta-rot {
    position: absolute;
    right: 2%;
    transform: translateY(-130%);
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--jg-rgb-062815, 6,40,21), .82);
    border: 1px solid rgba(240, 213, 122, .6);
    color: #F0D57A;
    font: 700 clamp(9px, 2.4vw, 11px)/1.2 Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}
/* acima da meta: o numero grande acende */
.gr--acima .gr__mult { color: #7CF7B0; }