/* "Jogos em destaque" da home: cards de partida sobre um campo (padrão betatudo.bet).
   Faixa rola na horizontal; no celular aparece a pontinha do próximo card. */
section.jd {
  --jd-acc: rgb(var(--primary-color, 22 82 240));
  --jd-txt: rgb(var(--text-color, 252 252 252));
  --jd-txt-2: rgb(var(--text-muted-color, 150 150 165));
  --jd-borda: rgba(255, 255, 255, .09);
}
section.jd .jd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
section.jd .jd-ic { width: 22px; height: 22px; flex: none; color: var(--jd-acc); }
section.jd .jd-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
section.jd .jd-strip::-webkit-scrollbar { display: none; }

/* card: foto do campo (campo-destaque.jpg) com véu escuro pra leitura dos nomes e odds */
section.jd .jd-card {
  position: relative; flex: 0 0 calc(100% - 28px); max-width: 420px; scroll-snap-align: start;
  padding: 16px 12px 14px; border-radius: 14px; overflow: hidden; cursor: pointer; isolation: isolate;
  border: 1px solid var(--jd-borda);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .38)),
    #16301a url(campo-destaque.jpg) center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* traço de cor no topo, mais forte no meio */
section.jd .jd-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--jd-acc) 30%, var(--jd-acc) 70%, transparent);
  opacity: .85;
}

section.jd .jd-data {
  display: table; margin: 0 auto 14px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .22);
  color: var(--jd-txt); font-size: 12px; font-weight: 800; letter-spacing: .03em; line-height: 1;
}
section.jd .jd-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
section.jd .jd-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
section.jd .jd-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
section.jd .jd-topo { height: 86px; display: flex; align-items: center; justify-content: center; }
section.jd .jd-escudo { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
section.jd span.jd-escudo { font-size: 22px !important; }

/* meio: logo da liga, x na cor do tema e nome da liga */
section.jd .jd-meio { display: flex; flex-direction: column; align-items: center; gap: 5px; }
section.jd .jd-liga-logo { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
section.jd .jd-liga-logo--flag { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
section.jd .jd-liga-logo--bola { width: 30px; height: 30px; color: var(--jd-txt-2); }
section.jd .jd-x { width: 9px; height: 9px; color: var(--jd-acc); }
section.jd .jd-liga-nome {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(255, 255, 255, .8); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
/* jogo sem empate (2 colunas): liga vai pro centro, entre os escudos */
section.jd .jd-grade--2 + .jd-meio { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); width: 30%; }

section.jd .jd-nome {
  max-width: 100%; margin: 4px 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
section.jd .jd-odd {
  width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .06));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--jd-txt); font-size: 17px; font-weight: 800; transition: border-color .15s, background .15s;
}
@media (hover:hover) and (pointer:fine) { section.jd .jd-odd:hover { border-color: color-mix(in srgb, var(--jd-acc) 55%, transparent); } }
section.jd .jd-odd:active { background: color-mix(in srgb, var(--jd-acc) 30%, transparent); }
section.jd .jd-raio { width: 15px; height: 15px; flex: none; color: var(--jd-acc); }

@media (min-width: 640px) {
  section.jd .jd-card { flex-basis: 380px; }
}

/* "Torneios Populares": campeonato com arte própria (assets/brava/torneios/<liga>.jpg) vira só a imagem */
.tp-card--arte[data-v-b48e1ba3] { padding: 0; background: #0b1530; }
.tp-card--arte .tp-arte { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-card--arte .tp-live[data-v-b48e1ba3] { position: absolute; right: 7px; bottom: 6px; }