/* Chute a gol — o palco inteiro é desenhado aqui e no SVG do componente.
   Tudo posicionado em % do palco: o JS mede o palco na hora do chute, então
   girar o aparelho ou redimensionar não desalinha a bola nem o goleiro. */

.cg__palco {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(#dff1ff 0%, #eaf7ff 62%, #cfe9c6 62%, #cfe9c6 100%);
    box-shadow: rgba(50, 50, 93, .14) 0 6px 16px -6px;
    user-select: none;
    touch-action: manipulation;
}

.cg__cenario { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cg__grama   { fill: #86c56d; }
.cg__fundo   { fill: rgba(255, 255, 255, .30); }
.cg__rede line  { stroke: rgba(255, 255, 255, .85); stroke-width: .5; }
.cg__trave line { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.cg__linha      { stroke: rgba(255, 255, 255, .8); stroke-width: 1; }

/* --------- goleiro ---------
   A âncora é o centro do corpo (50% / 61%): é dela que o JS calcula o pulo.

   transform-origin no CENTRO, não no pé. Girar em torno dos pés parecia mais
   um mergulho no papel, mas desloca o corpo todo: o translate acerta o centro
   no alvo e a rotação seguinte varre a figura para longe dali — na prática o
   goleiro terminava deitado na grama, abaixo da linha do gol. Com a origem no
   centro, o corpo gira sobre si mesmo e para exatamente onde foi mandado. */
/* Ancorado pelo PÉ (bottom), não pelo centro (top + margin-top negativa).
   Motivo: margin-top em % resolve contra a LARGURA do elemento pai, nunca
   contra a altura — "-20%" virava 20% da largura do campo e o goleiro
   flutuava no meio do gol. Com bottom:22% o pé encosta na linha (78% do
   topo), que é onde o goleiro fica. O JS mede o centro renderizado, então
   a conta do pulo se ajusta sozinha. */
.cg__goleiro {
    position: absolute;
    left: 50%;
    bottom: 22%;
    width: 15%;
    /* 36%, não 40%: num salto ao alvo central o corpo NÃO gira, continua em pé,
       e com a figura mais alta a cabeça passava do travessão. */
    height: 36%;
    margin-left: -7.5%;
    transform-origin: 50% 50%;
    z-index: 2;
    pointer-events: none;
}
.cg__goleiro svg { width: 100%; height: 100%; display: block; }

/* Goleiro uniformizado. As cores ficam aqui, e não no SVG, para trocar o kit
   por campanha sem mexer no desenho. A silhueta é a mesma da versão chapada —
   o que mudou foi fatiar as peças para cada uma receber a sua cor. */
.cg__goleiro .cg__kit    { fill: var(--jg-14532d, #14532d); }   /* camisa e shorts */
.cg__goleiro .cg__trim   { fill: var(--jg-8fd694, #8fd694); }   /* gola */
.cg__goleiro .cg__meia   { fill: var(--jg-0e3d20, #0e3d20); }   /* meião */
.cg__goleiro .cg__bota   { fill: #22201d; }
.cg__goleiro .cg__pele   { fill: #e9b48f; }
.cg__goleiro .cg__cabelo { fill: #241c19; }
.cg__goleiro .cg__luva   { fill: #f4a300; }   /* luva em âmbar: é o que precisa
                                                 ser lido de longe no mergulho */
.cg__goleiro .cg__num {
    fill: #ffffff;
    font: 700 13px/1 Arial, sans-serif;
}

/* Braços: em espera ficam caídos para fora; no mergulho esticam em linha com
   o corpo e depois voltam sozinhos, porque a classe sai quando o goleiro se
   levanta. Giram no ombro — transform-box:view-box faz o transform-origin ser
   lido nas coordenadas do viewBox (20,24 e 40,24 são os ombros). */
.cg__goleiro .cg__braco {
    transform-box: view-box;
    transition: transform 260ms cubic-bezier(.3, .8, .4, 1);
}
.cg__goleiro .cg__braco--e { transform-origin: 20px 24px; }
.cg__goleiro .cg__braco--d { transform-origin: 40px 24px; }
/* Os dois braços vão PARA A FRENTE DA CABEÇA, não para os lados: como o corpo
   inteiro gira no mergulho, braço aberto de lado acaba deitado sobre o tronco e
   não alcança nada. Levados além da cabeça, eles apontam para a bola em
   qualquer canto — e no salto central viram os braços erguidos. */
.cg__goleiro.cg--estica .cg__braco--e { transform: rotate(120deg); }
.cg__goleiro.cg--estica .cg__braco--d { transform: rotate(-120deg); }

/* --------- alvos ---------
   Alvo é <button>: chega pelo teclado e responde ao toque sem atraso. O anel
   só aparece no hover/foco — antes do chute o campo fica limpo. */
.cg__alvo {
    position: absolute;
    width: 17%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(255, 255, 255, 0);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    padding: 0;
    cursor: pointer;
    z-index: 3;
    transition: background .18s, border-color .18s, transform .18s;
}
/* Fila de cima a 32-34%, não a 24-26%: a baliza vai de 14% a 78%, e num alvo
   central o goleiro salta SEM girar — colado no travessão ele ficava com a
   cabeça para fora do gol. Continua lendo como bola alta. */
.cg__alvo:nth-of-type(1) { left: 20%; top: 34%; }
.cg__alvo:nth-of-type(2) { left: 50%; top: 32%; }
.cg__alvo:nth-of-type(3) { left: 80%; top: 34%; }
.cg__alvo:nth-of-type(4) { left: 20%; top: 58%; }
.cg__alvo:nth-of-type(5) { left: 50%; top: 60%; }
.cg__alvo:nth-of-type(6) { left: 80%; top: 58%; }

.cg__alvo:hover, .cg__alvo:focus {
    background: rgba(255, 255, 255, .34);
    border-color: rgba(255, 255, 255, .95);
    transform: translate(-50%, -50%) scale(1.08);
    outline: none;
}
/* Depois do chute os alvos somem: um elemento, um chute. */
.cg__palco.cg--travado .cg__alvo { pointer-events: none; opacity: 0; }

/* --------- bola ---------
   Aqui a margin-top em % está CORRETA, ao contrário do que acontecia no
   goleiro: a bola é quadrada (aspect-ratio 1), então metade da altura é
   igual a metade da largura e os -4.5% caem certos. Não "consertar". */
.cg__bola {
    position: absolute;
    left: 50%;
    top: 90%;
    width: 9%;
    aspect-ratio: 1;
    margin-left: -4.5%;
    margin-top: -4.5%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, #fff 0 42%, #f0f0f0 43% 100%);
    box-shadow: inset 0 -6px 10px -6px rgba(0, 0, 0, .45), 0 3px 6px rgba(0, 0, 0, .25);
    z-index: 4;
    pointer-events: none;
}
/* Gomos, para ler como bola mesmo pequena. */
.cg__bola::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: var(--jg-14532d, #14532d);
    clip-path: polygon(50% 0, 95% 35%, 78% 90%, 22% 90%, 5% 35%);
}

/* --------- placar ---------
   Nasce vazio e sem classe de estado: nada a revelar antes da hora.

   Fundo sólido, não só sombra: o placar cai sobre a rede (branca) e sobre o
   goleiro (verde-escuro), e texto branco com sombra some no primeiro caso.
   A pastilha garante leitura em qualquer ponto do campo. */
.cg__placar {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) scale(.6);
    /* Menor que a primeira versão: o carimbo cobria a cabeça do goleiro, que é
       justamente quem conta se ele foi para o lado certo. */
    font: 800 clamp(16px, 4.2vw, 32px)/1 Arial, sans-serif;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #fff;
    padding: .34em .68em;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgba(var(--jg-rgb-0a3d1a, 10,61,26), .88);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55);
    opacity: 0;
    z-index: 6;                 /* acima do goleiro e da bola */
    pointer-events: none;
    transition: opacity .25s, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.cg__placar.cg--mostra { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Cor conta o desfecho antes de a pessoa ler a palavra. */
.cg__placar.cg--gol    { background: rgba(var(--jg-rgb-0a7a00, 10,122,0), .92); }
.cg__placar.cg--defesa { background: rgba(52, 64, 58, .92); }

/* --------- prêmios em disputa --------- */
.cg__premios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 620px;
    margin: 14px auto 0;
}
.cg__premios .cg__premio {
    width: 74px;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
    color: var(--jg-14532d, #14532d);
}
.cg__premios .cg__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;
}
.cg__premios .cg__titulo {
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: var(--jg-14532d, #14532d);
    margin-bottom: 2px;
}

/* Imagem do prêmio ganho, dentro do bloco de resultado. */
.cg__premio-img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 8px;
}

@media screen and (max-width: 576px) {
    .cg__palco { border-radius: 10px; }
    .cg__alvo  { width: 21%; }
    .cg__bola  { width: 11%; margin-left: -5.5%; margin-top: -5.5%; }
    .cg__premios .cg__premio { width: 62px; font-size: 10px; }
    .cg__premio-img { width: 96px; height: 96px; }
}