/* ============================================================================
   home7k.css — o desenho da home do 7k.bet.br, traduzido do Tailwind deles.
   ============================================================================
   As medidas foram tiradas do site: cartão 4:5 com 118/135/140px, raio 8px,
   título 14px/600 sobre faixa em degradê, chips de 36px, trilho com encaixe,
   hover por brilho. A única troca é o verde #A1CD3D pelo amarelo #F9E30E.
   ========================================================================== */

.h7-wrap {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px)  { .h7-wrap { padding: 16px; gap: 24px; } }
@media (min-width: 1024px) { .h7-wrap { padding: 24px; } }

@media (min-width: 640px) { .h7-chip { font-size: 13px; } }


/* ── banner ────────────────────────────────────────────────────────────────── */
.h7-banner { border-radius: 8px; overflow: hidden; }
.h7-banner-track { display: flex; }
.h7-banner-slide { flex: 0 0 100%; display: none; }
.h7-banner-slide.on { display: block; }
.h7-banner-slide img { width: 100%; height: auto; display: block; aspect-ratio: 920 / 334; object-fit: cover; }

/* ── prateleira ────────────────────────────────────────────────────────────── */
.h7-shelf { display: flex; flex-direction: column; }
@media (min-width: 640px) { .h7-shelf-head { margin-bottom: 12px; } }

@media (min-width: 640px) { .h7-arrows { display: flex; } }

/* trilho: sangra até a borda no celular, volta ao container a partir de 640px */
.h7-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximate;
  scrollbar-width: none;
  margin: 0 -12px;
  padding: 0 12px;
  -webkit-overflow-scrolling: touch;
}
.h7-track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .h7-track { gap: 12px; margin: 0; padding: 0; } }

/* ── cartão de jogo: retrato 4:5 ───────────────────────────────────────────── */
.h7-card-wrap { flex: 0 0 auto; width: 118px; scroll-snap-align: start; }
@media (min-width: 640px)  { .h7-card-wrap { width: 135px; } }
@media (min-width: 1024px) { .h7-card-wrap { width: 140px; } }

.h7-card { display: block; text-decoration: none; transition: filter .15s; }
.h7-card:hover { filter: brightness(1.1); }
.h7-card-img {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #1c1e34;
  aspect-ratio: 4 / 5;
}
.h7-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* o nome fica ATRÁS da capa, só aparece enquanto a imagem não carregou — igual ao 7k */
.h7-card-name {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(160deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.9) 100%);
}

/* quem pediu menos animação no sistema não recebe a pulsação */
@media (prefers-reduced-motion: reduce) {
  .h7-track { scroll-behavior: auto; }
}

/* ── emoji antes do título (16px, destaque a 83%) ──────────────────────────── */

/* ── banner como TRILHO de cards 460x167, não faixa larga ──────────────────── */
.h7-ban-card {
  flex: 0 0 auto;
  width: 90vw; max-width: 460px;
  aspect-ratio: 460 / 167;
  border-radius: 8px;
  overflow: hidden;
  scroll-snap-align: start;
  display: block;
  background: #1c1e34;
  transition: filter .15s;
}
.h7-ban-card:hover { filter: brightness(1.1); }
.h7-ban-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* o corte do banner é 768px, diferente do resto do site */
@media (min-width: 768px) { .h7-ban-card { width: 460px; } }
.h7-banner-shelf .h7-track { scroll-snap-type: x mandatory; }

/* ── Maiores Ganhos e Últimas Apostas ──────────────────────────────────────────
   Medidas tiradas do HTML da 7k: cartão rounded-xl com bg-bg-secondary/80, vão de
   8px, capa 32x32 rounded-lg, e a janela de 252px no celular com as duas franjas
   de 32px (h-8) que apagam a lista em cima e embaixo na cor do fundo da página. */
.h7-wins-sec { margin-top: 16px; }

/* ── as duas abas do celular ──
   O HTML deles é só `flex gap-1 mb-3`: NÃO existe caixa nem fundo em volta do par. O único
   fundo é o da aba ativa. Eu tinha posto um trilho cinza que na 7k não tem. */
.h7-wins-abas { display: flex; gap: 4px; margin-bottom: 12px; }
.h7-aba {
  flex: 1 1 0;
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(224, 224, 224, .5);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.h7-aba-on { background: #1c1e34; color: #e0e0e0; }

/* ── a janela com a lista que anda sozinha ── */
.h7-wins-caixa { position: relative; max-height: 252px; overflow: hidden; }
.h7-wins-caixa[hidden] { display: none; }

.h7-wins-fade-topo,
.h7-wins-fade-base {
  position: absolute; left: 0; right: 0;
  height: 32px;
  z-index: 10;
  pointer-events: none;
}
.h7-wins-fade-topo { top: 0;    background-image: linear-gradient(to bottom, #16182a, transparent); }
.h7-wins-fade-base { bottom: 0; background-image: linear-gradient(to top,    #16182a, transparent); }

.h7-wins-trilho {
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform;
}
.h7-win-item { flex: 0 0 auto; }

/* ── o cartão ── */
.h7-win {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(28, 30, 52, .8);
  text-decoration: none;
  transition: background-color .15s;
}
.h7-win:hover { background: #1c1e34; }
.h7-win img {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
}

.h7-win-meio { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; }
.h7-win-linha1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.h7-win-jogo {
  min-width: 0;
  font-size: 12px; font-weight: 600; line-height: 1.25; color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h7-win-mult {
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(249, 227, 14, .15);
  color: #f9e30e;
  font-size: 9px; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.h7-win-nome {
  font-size: 10px; line-height: 1.25; color: rgba(224, 224, 224, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.h7-win-dir { flex: 0 0 auto; display: flex; flex-direction: column; text-align: right; }
.h7-win-dir span { font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
/* o limão do dinheiro, mais claro que o amarelo do destaque */
.h7-win-premio { font-size: 12px; font-weight: 700; color: #f9f871; }
.h7-win-aposta { font-size: 9px;  color: rgba(224, 224, 224, .5); }
.h7-win-apostou { font-size: 10px; color: rgba(224, 224, 224, .6); }
.h7-win-ganhou  { font-size: 10px; font-weight: 600; color: #f9f871; }

/* ── os tamanhos maiores começam em 368px ──
   O `xs:` da 7k é `@media (width>=368px)`, ou seja, vale em praticamente todo celular: lá o nome
   do jogo e o valor em R$ são 13px, o multiplicador e a aposta 10px, o nome da pessoa 11px.
   Eu estava subindo isso só a partir de 640px — era por isso que o R$ saía menor que o deles. */
@media (min-width: 368px) {
  .h7-win-jogo    { font-size: 13px; }
  .h7-win-mult    { font-size: 10px; }
  .h7-win-nome    { font-size: 11px; }
  .h7-win-premio  { font-size: 13px; }
  .h7-win-aposta  { font-size: 10px; }
  .h7-win-apostou { font-size: 11px; }
  .h7-win-ganhou  { font-size: 11px; }
}

/* ── celular x tela grande ── */
.h7-wins-desk { display: none; }
@media (min-width: 640px) {
  .h7-wins-mob  { display: none; }
  .h7-wins-desk { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ── "Ver todos" ao lado do título ─────────────────────────────────────────── */

/* A 7k mostra quanto o jogo pagou hoje em destaque — é o que dá o apelo do bloco.
   Por isso o cartão é bem maior que um cartão de jogo comum. */

/* O grid dava 56px de coluna, mas sem altura fixa a imagem colapsava. */

/* ── botões do topo, como na 7k ────────────────────────────────────────────── */
/* Lá o "Entrar" é discreto (cinza-azulado) e o "Cadastrar" é a cor da marca. */
.btn-login, .login-btn, a[href*="login"].btn, .header-login {
  background: #3b3e5e !important;
  background-image: none !important;
  color: #e0e0e0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.btn-register, .register-btn, .header-register, .btn-cadastrar {
  background: #f9e30e !important;
  background-image: linear-gradient(276deg, rgba(0,0,0,.22) 1.72%, rgba(255,255,255,.15) 67.16%) !important;
  color: #1c1e34 !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* ── seções da home antiga que sobraram no fim ─────────────────────────────── */
/* "Jogos em Destaque" e "Copa do Mundo" são blocos do layout anterior; a 7k
   termina em Maiores Ganhos. Ficam escondidos, não apagados. */
#destaqueSection, #copaSection, .prov-section { display: none !important; }

/* ══ Top Games — medidas tiradas do HTML da 7k ═══════════════════════════════════════════════
   Cartao 176x112 (w-44 h-28), raio 4px, borda na cor de destaque, fundo #1C1E34.
   O que dava o ar de "sem efeito" no meu antigo era a falta dos dois SVG: o risco de luz
   diagonal atras (opacity .6, plus-lighter) e a forma chanfrada dentro do botao. Os dois estao
   no home7k.php como <symbol> e entram aqui so posicionados.
   ========================================================================================== */
.h7-top-wrap { flex: 0 0 auto; width: 176px; scroll-snap-align: start; }

.h7-top-card {
  position: relative;
  display: block;
  width: 176px;
  height: 112px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #f9e30e;
  background: #1c1e34;
  text-decoration: none;
  transition: filter .15s;
}
.h7-top-card:hover { filter: brightness(1.1); }

/* o risco de luz: encostado embaixo à esquerda, atrás de tudo */
.h7-top-deco {
  position: absolute;
  bottom: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
  line-height: 0;
}

/* linha de cima: número grande, depois nome e valor */
.h7-top-head {
  position: relative;
  z-index: 10;
  height: 32px;
  margin-top: 8px;
  padding-left: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.h7-top-num {
  position: absolute;
  left: 8px; top: 4px;
  width: 32px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: #f9e30e;
  font-variant-numeric: tabular-nums;
}
.h7-top-chev { position: absolute; top: 8px; right: -8px; color: #f9e30e; }

.h7-top-txt { display: flex; flex-direction: column; min-width: 0; }
.h7-top-nome {
  font-size: 11px; font-weight: 600; line-height: 16px;
  color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 108px;
}
.h7-top-val {
  font-size: 12px; font-weight: 700; line-height: 16px;
  color: #f9f871;
  white-space: nowrap;
}

/* capa do jogo: 56x56 no canto de baixo à esquerda */
.h7-top-ico {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 10;
  width: 56px; height: 56px;
  border-radius: 4px;
  border: 1px solid rgba(224, 224, 224, .3);
  background: #16182a;
  object-fit: cover;
}

/* botão: 96px de largura, encostado à direita */
.h7-top-acoes {
  position: absolute;
  right: 7px; bottom: 8px;
  z-index: 10;
  width: 96px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.h7-top-play {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 32px;
  border-radius: 8px;
  background-color: #f9e30e;
  background-image: linear-gradient(276deg, rgba(0,0,0,.22) 1.72%, rgba(255,255,255,.15) 67.16%);
  /* ring-1 ring-button-bg/30 + shadow-sm, do HTML deles */
  box-shadow: 0 0 0 1px rgba(249, 227, 14, .3), 0 1px 2px 0 rgba(0, 0, 0, .05);
  color: #1c1e34;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.h7-top-play-txt { position: relative; z-index: 10; }
.h7-top-play-deco {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
  filter: drop-shadow(8px -2px 14px rgba(0, 0, 0, .3));
}
.h7-top-play-deco svg { height: 100%; width: auto; }

/* ══ fileira de categorias — medidas do HTML da 7k ════════════════════════════════════════════
   Item de 32px (o `!h-8` deles sobrescreve o `h-9`), padding 0 12px, vao de 7px entre icone e
   texto, raio 8px. Borda #e0e0e033, fundo #e0e0e00d, texto #e0e0e0cc — tudo valor deles.
   NENHUM item vem pintado: na 7k os quatro sao `data-nav-active="false"`. A bolinha de "ao vivo"
   e grudada no canto do ICONE, nao solta antes do texto.
   ========================================================================================== */
.h7-catnav {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 10px;
}
@media (min-width: 640px) { .h7-catnav { padding-bottom: 8px; } }
@media (min-width: 1024px) { .h7-catnav { padding-bottom: 0; } }

.h7-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.h7-chips::-webkit-scrollbar { display: none; }
@media (min-width: 640px)  { .h7-chips { padding: 0 16px; } }
@media (min-width: 1024px) { .h7-chips { padding: 0 20px; } }

.h7-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(224, 224, 224, .20);
  background: rgba(224, 224, 224, .05);
  color: rgba(224, 224, 224, .8);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
@media (min-width: 640px) { .h7-chip { font-size: 13px; } }
.h7-chip:hover { border-color: rgba(224, 224, 224, .35); color: #e0e0e0; }

.h7-chip-ico { position: relative; display: inline-flex; line-height: 0; }
.h7-chip-dot {
  position: absolute;
  right: -4px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .h7-chip-dot { animation: none; } }

/* ── a fileira encostada no cabeçalho ────────────────────────────────────────────────────────
   O .bp-home que embrulha a home tem padding:12px nos quatro lados (16px ≥640, 24px ≥1024).
   Somado ao pt-2.5 da fileira, dava 22px acima dos botões — na 7k são 10px e ponto. E de lado
   dobrava: 12 do embrulho + 12 meus = 24, contra os 12 deles.

   Solução: zerar o topo do embrulho SÓ na home, deixar a fileira dar os 10px, e fazer a fileira
   sangrar até a borda com margem negativa (mesmo truque dos trilhos de jogos), para o rolamento
   ir de ponta a ponta com 12px de respiro — que é o comportamento do px-3 deles.
   ========================================================================================== */
.bp-home { padding-top: 0 !important; }

.h7-catnav { padding-top: 10px; }

.h7-chips { margin: 0 -12px; padding: 0 12px; }
@media (min-width: 640px)  { .h7-chips { margin: 0 -16px; padding: 0 16px; } }
@media (min-width: 1024px) { .h7-chips { margin: 0 -24px; padding: 0 24px; } }

/* ── "*Pagou hoje", abaixo do botao ──────────────────────────────────────────────────────────
   Eu tinha tirado dizendo que nao existia na 7k — existe: `text-[9px] leading-none text-texts/70`
   com `truncate`, dentro da mesma coluna do botao, separado por `gap-1` (4px).
   ========================================================================================== */
.h7-top-hoje {
  max-width: 100%;
  font-size: 9px;
  line-height: 1;
  color: rgba(224, 224, 224, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══ cabeçalho das prateleiras — do HTML da 7k ════════════════════════════════════════════════
   Sem faixa de fundo: eu tinha posto um degradê atrás do título que não existe no site deles.
   As setas ficam coladas no título (não na ponta direita) e somem no celular. O "Ver todos" é
   11px, peso leve, na cor de destaque e SUBLINHADO — eu tinha feito cinza, 12px e sem sublinhado.
   O emoji não leva opacidade: `text-primary/[0.83]` pinta a cor do texto, não o glifo, então
   escurecer com `opacity` deixava o emoji apagado em relação ao deles.
   ========================================================================================== */
.h7-shelf-head {
  /* A FAIXA EXISTE. Eu a tirei por engano: o trecho de HTML que eu tinha mostrava so o miolo, e o
     fundo esta no elemento de fora (`data-section-title-variant="section-title-gradient"`):
     min-h-10, rounded-lg, px-2 e degrade `from-sidebar-button-bg/50 via-/20 to-transparent`,
     onde sidebar-button-bg = #3b3e5e. Os tres pontos do degrade sao 50%, 20% e transparente. */
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  background-image: linear-gradient(to right,
                      rgba(59, 62, 94, .5) 0%,
                      rgba(59, 62, 94, .2) 50%,
                      transparent 100%);
}
@media (min-width: 640px) { .h7-shelf-head { margin-bottom: 12px; } }

.h7-shelf-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.h7-shelf-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
}

.h7-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  font-size: 14px;
  line-height: 1;
  color: rgba(249, 227, 14, .83);
}

/* setas: escondidas no celular, como no `hidden sm:flex` deles */
.h7-arrows { display: none; }
@media (min-width: 640px) {
  .h7-arrows { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
}
.h7-arrows button {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(224, 224, 224, .6);
  cursor: pointer;
  transition: color .15s;
}
.h7-arrows button:hover { color: #e0e0e0; }
.h7-arrows svg { width: 12px; height: 12px; }

.h7-shelf-acoes { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.h7-vertodos {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 300;
  color: #f9e30e;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.h7-vertodos:hover { color: rgba(249, 227, 14, .8); }

/* ══ Principais Ligas — cartão 104x128, medidas do HTML da 7k ═════════════════════════════════
   Fundo do cartão #25284b e faixa do brasão #3a3d62 são as duas cores que eles cravam inline no
   style do elemento, não classes. O brasão é pintado por MÁSCARA: o SVG vira recorte e a cor vem
   do `background-color`, então qualquer arquivo sai no amarelo da casa sem eu editar o desenho.
   Todos os cartões levam para /esportes.
   ========================================================================================== */
.h7-ligas-track { gap: 12px; }

.h7-liga-wrap { flex: 0 0 auto; scroll-snap-align: start; }

.h7-liga {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 104px;
  height: 128px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #25284b;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.h7-liga:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
}

.h7-liga-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
  background-color: #3a3d62;
}
.h7-liga-ico {
  display: inline-block;
  width: 52px;
  height: 52px;
  background-color: #f9e30e;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.h7-liga-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 6px;
  text-align: center;
}
.h7-liga-txt span {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── pílula "Ao Vivo | Próximos" do cabeçalho ────────────────────────────────────────────── */
.h7-pilula {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 24px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(22, 24, 42, .6);
  margin-right: -6px;   /* -mr-1.5: a pilula avanca um pouco para fora, como na 7k */
}
.h7-pilula a {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: #e0e0e0;
  text-decoration: none;
  transition: background .15s;
}
.h7-pilula a:hover { background: rgba(255, 255, 255, .05); }
.h7-pilula-div { width: 1px; height: 12px; flex-shrink: 0; background: rgba(255, 255, 255, .15); }

/* a bolinha que pulsa: um círculo fixo e outro que expande e some */
.h7-pilula-ping { position: relative; display: flex; width: 6px; height: 6px; }
.h7-pilula-ping span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* `bg-error` deles = #f1416c, um vermelho-rosado — nao o #ef4444 que eu tinha chutado.
     (Coincidencia util: e a mesma cor que ja existe como --danger na paleta deste site.) */
  background: #f1416c;
}
.h7-pilula-ping span:first-child {
  opacity: .75;
  animation: h7-ping 1.5s cubic-bezier(0, 0, .2, 1) infinite;
}
.h7-pilula-ico { width: 10px; height: 10px; flex-shrink: 0; color: #f9e30e; }
@keyframes h7-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .h7-pilula-ping span:first-child { animation: none; } }

/* ══ Torneios — cartão 260px, medidas do HTML da 7k ═══════════════════════════════════════════
   O topo é uma capa com um véu de 70% por cima: é o que deixa a imagem visível mas sem competir
   com o texto. O relógio tem quatro caixas iguais em fundo preto a 25%. Medalha e avatar são
   desenhados aqui, sem imagem — a 7k puxa os dois do CDN dela.
   ========================================================================================== */
.h7-torneios-caixa { position: relative; }
.h7-torneios-track { gap: 12px; align-items: stretch; }

.h7-torn-wrap { flex: 0 0 auto; width: 260px; scroll-snap-align: start; display: flex; }

.h7-torn {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 224, 224, .05);
  border-radius: 8px;
  background: #1c1e34;
  text-align: left;
  cursor: pointer;
  transition: filter .15s;
  font-family: inherit;
}
.h7-torn:hover { filter: brightness(1.1); }

/* ── topo com a capa ─────────────────────────────────────────────────────────────────────── */
.h7-torn-topo {
  position: relative;
  display: block;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background-image: linear-gradient(to bottom right,
                      rgba(249, 227, 14, .15), #1c1e34, rgba(249, 227, 14, .05));
}
.h7-torn-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.h7-torn:hover .h7-torn-capa { transform: scale(1.05); }
.h7-torn-veu { position: absolute; inset: 0; background: rgba(28, 30, 52, .7); pointer-events: none; }

.h7-torn-cab {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 0;
}
.h7-torn-nome {
  font-size: 13px; font-weight: 700; line-height: 1.2; color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h7-torn-premio {
  font-size: 13px; font-weight: 800; line-height: 1.2; color: #f9e30e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h7-torn-jogadores {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: #e0e0e0;
}
.h7-torn-jogadores svg { color: #f9e30e; flex-shrink: 0; }

/* ── relógio ─────────────────────────────────────────────────────────────────────────────── */
.h7-torn-relogio {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 10px 10px;
}
.h7-torn-termina {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 4px 0;
  border-radius: 6px;
  background: rgba(224, 224, 224, .1);
  font-size: 10px; font-weight: 600; color: #e0e0e0;
}
.h7-torn-ponto { width: 4px; height: 4px; border-radius: 50%; background: #f9e30e; }

.h7-torn-caixas { display: flex; align-items: center; gap: 6px; width: 100%; }
.h7-torn-cx {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  padding: 6px;
  border: 1px solid rgba(224, 224, 224, .05);
  border-radius: 8px;
  background: rgba(0, 0, 0, .25);
}
.h7-torn-cx b {
  font-size: 14px; font-weight: 700; line-height: 1; color: #e0e0e0;
  font-variant-numeric: tabular-nums;
}
.h7-torn-cx i {
  margin-top: 2px;
  font-size: 8px; font-weight: 600; font-style: normal;
  text-transform: uppercase; letter-spacing: .025em;
  color: rgba(224, 224, 224, .5);
}

/* ── ranking ─────────────────────────────────────────────────────────────────────────────── */
.h7-torn-rank { display: block; flex: 1; padding: 6px 10px 0; }
.h7-torn-rank-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(224, 224, 224, .1);
  font-size: 10px; font-weight: 500; color: rgba(224, 224, 224, .5);
}
.h7-torn-linha {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(224, 224, 224, .1);
}
.h7-torn-linha:last-child { border-bottom: 0; }

/* medalha: a imagem deles, com o número por cima — 20px de largura por 24 de altura */
.h7-torn-medalha {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 20px; height: 24px;
}
.h7-torn-medalha img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.h7-torn-medalha b {
  position: relative;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #1a1a1d;
}

/* avatar do jogador */
.h7-torn-avatar {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.h7-torn-jogador {
  flex: 1; min-width: 0;
  font-size: 11px; font-weight: 600; color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h7-torn-pontos {
  font-size: 11px; font-weight: 700; color: #f9e30e;
  font-variant-numeric: tabular-nums;
}

/* ── botão ───────────────────────────────────────────────────────────────────────────────── */
.h7-torn-rodape { display: block; padding: 6px 10px 10px; }
.h7-torn-cta { width: 100%; font-size: 11px; letter-spacing: .025em; }

/* ── o esmaecido na ponta direita, que a 7k só mostra a partir de 640px ──────────────────── */
.h7-torn-fade { display: none; }
@media (min-width: 640px) {
  .h7-torn-fade {
    display: block;
    position: absolute;
    top: 0; bottom: 0; right: -4px;
    width: 112px;
    z-index: 10;
    pointer-events: none;
    background-image: linear-gradient(to left, #16182a, transparent);
  }
}

/* ══ Lista de Provedores — medidas do HTML da 7k ══════════════════════════════════════════════
   O que eu tinha estava menor e sem borda: 120x56 com raio 8. O deles é 110x80 (124x92 a partir
   de 640px), raio 4 e BORDA de rgba(224,224,224,.15) — é a borda que dá o ar de ficha alinhada.
   A logo respeita um teto próprio: 55px de largura por 36 de altura, para que marcas de formatos
   muito diferentes (algumas são faixas largas, outras quadradas) ocupem o mesmo espaço visual.
   ========================================================================================== */
.h7-prov-caixa { position: relative; }
.h7-prov-track { gap: 12px; }

.h7-prov-wrap { flex: 0 0 auto; width: 110px; scroll-snap-align: start; }
@media (min-width: 640px) { .h7-prov-wrap { width: 124px; } }

.h7-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(224, 224, 224, .15);
  border-radius: 4px;
  background: #1c1e34;
  text-decoration: none;
  transition: filter .15s;
}
@media (min-width: 640px) { .h7-prov { height: 92px; } }
.h7-prov:hover { filter: brightness(1.1); }

.h7-prov img {
  width: auto;
  height: auto;
  max-width: 55px;
  max-height: 36px;
  object-fit: contain;
}
@media (min-width: 640px) { .h7-prov img { max-width: 64px; } }

/* ── Texto de apresentação do rodapé ───────────────────────────────────────────
   Regras tiradas do CSS compilado da 7k (`.page-description`), com os mesmos valores:
   13px / entrelinha 1.625, texto em #e0e0e0 a 60%, títulos e negrito a 70%, os <details>
   com fundo #1c1e34 a 40% e borda #e0e0e0 a 10%. Fechado fica em 96px (max-h-24 deles). */
/* o .bp-home que embrulha a home já dá o padding lateral e o gap entre as seções */
.h7-desc-sec { width: 100%; padding: 0 0 8px; }
.h7-desc-rel { position: relative; }

.h7-desc-caixa {
  max-height: 96px;
  overflow: hidden;
  transition: max-height .3s ease-in-out;
}
.h7-desc-caixa.h7-desc-aberta { max-height: 80vh; overflow-y: auto; }

.page-description { color: rgba(224,224,224,.6); font-size: 13px; font-weight: 400; line-height: 1.625; }
.page-description :where(h1,h2,h3,h4,h5,h6,p,span) {
  display: block; margin: 0 0 8px; padding: 0;
  font-size: 13px; line-height: 1.625; text-transform: none;
}
.page-description :where(h1,h2,h3,h4,h5,h6,p,span):last-child { margin-bottom: 0; }
.page-description :where(h1,h2,h3,h4,h5,h6) { color: rgba(224,224,224,.7); font-weight: 600; }
.page-description :where(p,span)             { color: rgba(224,224,224,.6); font-weight: 400; }
.page-description :where(strong,b)           { color: rgba(224,224,224,.7); font-weight: 600; }
.page-description a { color: #e0e0e0; text-decoration: underline; }
.page-description :where(ul,ol) {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 8px; padding-left: 20px; list-style-type: disc;
}
.page-description :where(ol) { list-style-type: decimal; }
.page-description :where(li) { color: rgba(224,224,224,.6); }
.page-description :where(details) {
  margin-bottom: 8px; padding: 8px 12px;
  border: 1px solid rgba(224,224,224,.1);
  border-radius: 8px;
  background-color: rgba(28,30,52,.4);
}
.page-description :where(summary) {
  cursor: pointer; user-select: none;
  color: rgba(224,224,224,.8); font-size: 13px; font-weight: 600; line-height: 1.625;
}
.page-description :where(details) > :where(p,ul,ol) { margin-top: 8px; margin-bottom: 0; }

.page-description-toggle {
  display: flex; align-items: center; gap: 6px;
  margin: 8px auto 0;
  padding: 0; border: 0; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  color: rgba(224,224,224,.6);
  cursor: pointer;
  transition: color .15s;
}
.page-description-toggle:hover { color: #e0e0e0; }
@media (min-width: 1024px) { .page-description-toggle { margin-left: 0; } }
.h7-desc-seta { width: 16px; height: 16px; transition: transform .3s ease-in-out; }
.h7-desc-btn-aberto .h7-desc-seta { transform: rotate(180deg); }

/* ══ Página do cassino, no desenho do 7k.bet.br ═══════════════════════════════════════════
   Medidas do HTML deles: pílula de categoria `h-8 px-3.5 rounded-full text-sm font-semibold`
   sobre `bg-bg-secondary/60 border-texts/10`; caixa de provedor `h-8 px-3 rounded-lg` com a
   logo em `h-5`; setas redondas de 32px que só aparecem a partir de 640px.
   bg-secondary #1c1e34 · texts #e0e0e0 · primary → #f9e30e */

/* ── trilho com setas nas pontas ── */
.h7-pill-caixa { position: relative; display: flex; align-items: stretch; gap: 8px; }
.h7-pills {
  display: flex; gap: 8px; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; overflow-anchor: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.h7-pills::-webkit-scrollbar { display: none; }
.h7-pill-wrap { flex: 0 0 auto; scroll-snap-align: start; }

.h7-pill-seta {
  flex-shrink: 0; display: none;
  align-items: center; justify-content: center;
  width: 32px; padding: 0;
  border: 1px solid rgba(224, 224, 224, .1);
  border-radius: 9999px;
  background-color: #1c1e34;
  -webkit-appearance: none; appearance: none;
  color: #e0e0e0;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
@media (min-width: 640px) { .h7-pill-seta { display: flex; } }
.h7-pill-seta:hover { border-color: rgba(224, 224, 224, .3); background-color: rgba(28, 30, 52, .8); }
.h7-pill-seta[disabled] {
  background-color: rgba(28, 30, 52, .4);
  border-color: rgba(224, 224, 224, .05);
  color: rgba(224, 224, 224, .25);
  cursor: not-allowed;
}

/* ── pílula de categoria ── */
.h7-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid rgba(224, 224, 224, .1);
  border-radius: 9999px;
  background: rgba(28, 30, 52, .6);
  font-size: 14px; font-weight: 600;
  color: #e0e0e0;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.h7-pill:hover { background: #1c1e34; }
.h7-pill-emo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 1;
}
/* a escolhida: borda e texto na cor de destaque, como o `aria-pressed` deles */
.h7-pill-on {
  border-color: #f9e30e;
  background: rgba(249, 227, 14, .1);
  color: #f9e30e;
}

/* ── caixa de provedor ── */
.h7-provchip {
  display: flex; align-items: center; justify-content: center;
  height: 32px; min-width: 72px; padding: 0 12px;
  border: 1px solid rgba(224, 224, 224, .1);
  border-radius: 8px;
  background: #1c1e34;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.h7-provchip:hover { background: rgba(28, 30, 52, .8); border-color: rgba(224, 224, 224, .25); }
.h7-provchip img { height: 20px; width: auto; object-fit: contain; }

/* ── a pílula ativa da navegação secundária ── */
.h7-chip-on {
  border-color: rgba(249, 227, 14, .55);
  background: rgba(249, 227, 14, .1);
  color: #e0e0e0;
}
.h7-chip-on .h7-chip-ico,
.h7-chip-on > svg { color: #f9e30e; }

/* ── busca ── */
.h7-busca {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px;
  border: 1px solid rgba(224, 224, 224, .2);
  border-radius: 8px;
  background: rgba(224, 224, 224, .05);
  color: rgba(224, 224, 224, .55);
  transition: border-color .15s;
}
.h7-busca:focus-within { border-color: rgba(224, 224, 224, .35); }
.h7-busca svg { flex-shrink: 0; }
.h7-busca input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: #e0e0e0;
  outline: none;
}
.h7-busca input::placeholder { color: rgba(224, 224, 224, .55); }

/* ── o nome por baixo do cartão, que aparece quando a imagem não carrega ── */
.h7-card-preview {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px 10px;
  background-image: linear-gradient(160deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.9) 100%);
}
.h7-card-preview p {
  margin: 0;
  font-size: 12px; font-weight: 600; line-height: 1.25;
  text-align: center; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.h7-card-img img, .h7-card-img video { position: relative; z-index: 1; }
.h7-card { cursor: pointer; }

/* ── recado de lista vazia ── */
.h7-vazio {
  margin: 40px 0;
  text-align: center;
  font-size: 14px; font-weight: 600;
  color: rgba(224, 224, 224, .5);
}

/* ── só para leitores de tela, como o `sr-only` deles ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}