/* ═══════════════════════ TEMA: COPA DO MUNDO · BRASIL ═══════════════════════
   Ativado quando o root do painel tem a classe .theme-copa.
   Cores: amarelo predominante (#FFDF00), verde (#009C3B), azul (#002776). */

.mural.sport.theme-copa {
  --orange: #FFDF00;       /* accent → amarelo Brasil */
  --orange-deep: #E6B800;
  --abyss: #04210f;        /* fundo → verde escuro (gramado) */
  --tan: #009C3B;
  background:
    radial-gradient(ellipse at 70% 0%, #0c4424 0%, #04210f 62%),
    #04210f;
}

/* gramado: faixas verticais sutis como um campo */
.mural.sport.theme-copa::before {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 120px);
  background-size: auto;
  opacity: 1;
}

/* faixa Brasil no topo */
.theme-copa .mural-header {
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #009C3B 0 33%, #FFDF00 33% 66%, #1565C0 66% 100%) 1;
}

/* ── Barra principal (meta) → verde→amarelo ── */
.theme-copa .hero-bar-fill {
  background: linear-gradient(90deg, #009C3B 0%, #FFDF00 100%);
  box-shadow: 0 0 26px rgba(255,223,0,0.55);
}
.theme-copa .hero-bar-projected {
  background: repeating-linear-gradient(45deg, rgba(255,223,0,0.45) 0 6px, transparent 6px 12px);
}

/* ── O marcador "|" de onde estamos vira uma BOLA ⚽ (e o gol 🥅 na projeção) ── */
.theme-copa .hero-bar-tick {
  background: transparent; width: 0; box-shadow: none;
}
.theme-copa .hero-bar-tick::before {
  content: "⚽"; position: absolute; left: 0; top: 50%;
  transform: translate(-50%, -50%); font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.85));
}
/* projeção sem marcador (a faixa listrada já mostra onde vai chegar) */
.theme-copa .hero-bar-tick.proj { display: none; }
/* O GOL 🥅 fica SEMPRE no fim da barra — é a meta, o gol é quando bate a meta */
.theme-copa .hero-bar-wrap, .theme-copa .kpi-card.hero { overflow: visible; }
.theme-copa .hero-bar { overflow: visible; }
.theme-copa .hero-bar::after {
  content: "🥅"; position: absolute; right: 0; top: 50%;
  transform: translate(44%, -52%); font-size: 50px; line-height: 1;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 10px rgba(255,223,0,.9)) drop-shadow(0 3px 6px rgba(0,0,0,.6));
  z-index: 4;
}

/* ── Barras do ranking → cores Brasil ── */
.theme-copa .rank-bar-fill { background: linear-gradient(90deg, #009C3B, #FFDF00); }
.theme-copa .rank-bar-fill.over { background: linear-gradient(90deg, #FFDF00, #FFF06B); }

/* 1º lugar destacado em amarelo/verde */
.theme-copa .rank-row.top1 {
  background: linear-gradient(90deg, rgba(255,223,0,0.30) 0%, rgba(0,156,59,0.10) 72%);
  border-color: #FFDF00;
}
.theme-copa .rank-row.top { background: linear-gradient(90deg, rgba(0,156,59,0.18) 0%, rgba(255,223,0,0.05) 70%); border-color: rgba(255,223,0,0.4); }
.theme-copa .rank-row.top1 .rank-num,
.theme-copa .rank-row.top .rank-num { color: #FFDF00; }

/* ── Acentos diversos em amarelo ── */
.theme-copa .live-dot { background: #FFDF00; box-shadow: 0 0 12px #FFDF00; }
.theme-copa .section-tag,
.theme-copa .forecast-eyebrow,
.theme-copa .products-eyebrow,
.theme-copa .kpi-label,
.theme-copa .sales-kpi-eyebrow { color: #FFDF00; }

/* coluna do ranking com leve borda Brasil */
.theme-copa .ranking-pane {
  border-left: 1px solid rgba(255,223,0,0.18);
}

/* brilho amarelo no relógio/título */
.theme-copa .section-head h2 { color: #FFF5EB; text-shadow: 0 0 18px rgba(255,223,0,0.35); }

/* ═══════════ ANIMAÇÃO DE GOL (venda · tema Copa) ═══════════ */
.sc-wrap { position: absolute; left: 4%; right: 4%; top: 25%; height: 48%; z-index: 1; }

/* jogador corre da esquerda até a bola */
.sc-player { animation: sc-run 1.2s ease-out both; }
@keyframes sc-run {
  0%   { transform: translate(110px, 248px); }
  75%  { transform: translate(372px, 248px); }
  100% { transform: translate(388px, 248px); }
}
/* perna do chute */
.sc-kickleg { transform-origin: 3px 36px; animation: sc-kick 1.2s ease-out both; }
@keyframes sc-kick {
  0%, 60% { transform: rotate(18deg); }
  72%     { transform: rotate(-62deg); }
  100%    { transform: rotate(8deg); }
}
/* bola: parada com o jogador, depois voa pro gol */
.sc-ball { animation: sc-shot 1.9s cubic-bezier(.25,.6,.35,1) both; }
@keyframes sc-shot {
  0%, 48%  { transform: translate(430px, 300px); }
  100%     { transform: translate(688px, 222px) rotate(540deg); }
}
/* goleiro mergulha pro lado errado (pra baixo/esquerda) */
.sc-keeper { animation: sc-dive 1.9s ease-out both; }
@keyframes sc-dive {
  0%, 52% { transform: translate(620px, 250px) rotate(0deg); }
  100%    { transform: translate(584px, 300px) rotate(-72deg); }
}
/* rede balança quando a bola entra */
.sc-goal { animation: sc-net 0.5s ease-out 1.45s; transform-box: view-box; }
@keyframes sc-net { 0%,100% { transform: translateX(0); } 30% { transform: translate(5px,3px); } 65% { transform: translate(-4px,-2px); } }
/* GOL! aparece quando a bola entra */
.sc-gol-burst { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sc-golpop 0.6s ease-out 1.55s forwards; }
@keyframes sc-golpop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
/* "GOOOL!" na headline */
.sc-gol-word { display: inline-block; animation: sc-golword 0.7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes sc-golword { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }