/* Acabamento dos trilhos e cards (usado com assets/brava/rails.js). */

/* trilho: esmaecido suave nas bordas quando há mais conteúdo para os lados */
.rl-scroll { --rl-fade: 34px; }
.rl-scroll:not(.rl-ini):not(.rl-fim) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade), #000 calc(100% - var(--rl-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade), #000 calc(100% - var(--rl-fade)), transparent 100%);
}
.rl-scroll.rl-ini:not(.rl-fim) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--rl-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--rl-fade)), transparent 100%);
}
.rl-scroll.rl-fim:not(.rl-ini) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade));
}
.game-scroll.dragging a, .ranking-collection.dragging a { pointer-events: none; }

/* entrada dos cards quando o trilho aparece na tela */
.rv { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); }
.rv-on .rv {
  opacity: 1; transform: none;
  transition: opacity .5s ease var(--rv-d, 0ms), transform .65s cubic-bezier(.2, .75, .2, 1) var(--rv-d, 0ms);
}

/* card de jogo: sobe, brilha na cor da casa e uma luz passa na capa */
.game-card-wrapper > a {
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease;
  will-change: transform;
}
.game-card-wrapper > a::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 48%, transparent 66%);
  transform: translateX(-120%); opacity: 0;
}
.game-image[data-v-144a840e] { transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.game-image[data-v-144a840e]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 48%, transparent 66%);
  transform: translateX(-120%); opacity: 0;
}
.game-img[data-v-625a2d10], .game-image[data-v-144a840e] img, .game-image[data-v-144a840e] video {
  transition: transform .6s cubic-bezier(.2, .75, .2, 1), filter .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .game-card-wrapper > a:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px -14px rgb(0 0 0 / .85), 0 0 0 1.5px rgb(var(--primary-color) / .7), 0 10px 28px -10px rgb(var(--primary-color) / .55);
  }
  .group:hover .game-img[data-v-625a2d10] { transform: scale(1.07); filter: brightness(.55) saturate(1.1); }
  .game-card-wrapper > a:hover::after, .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e]::after {
    opacity: 1; transform: translateX(120%); transition: transform .8s ease, opacity .2s ease;
  }
  .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e] {
    transform: translateY(-4px);
    border-color: rgb(var(--primary-color) / .7);
    box-shadow: 0 16px 30px -14px rgb(0 0 0 / .85), 0 10px 28px -10px rgb(var(--primary-color) / .5);
  }
  .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e] img,
  .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e] video { transform: scale(1.07); }
  .play-btn[data-v-625a2d10] { transform: translateY(8px) scale(.92); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .75, .2, 1); }
  .group:hover .play-btn[data-v-625a2d10] { transform: none; }

  /* número do ranking acompanha o card */
  .rank-tile .rank-digits { display: inline-block; transition: transform .35s cubic-bezier(.2, .75, .2, 1), text-shadow .35s ease; }
  .rank-tile:hover .rank-digits { transform: translateY(-4px) scale(1.06); text-shadow: 0 6px 22px rgb(var(--primary-color) / .55); }
}

/* toque: leve afundada ao tocar, sem efeitos de hover */
@media (hover: none) {
  .game-card-wrapper > a:active, .game-card[data-v-144a840e]:active .game-image[data-v-144a840e] { transform: scale(.97); transition-duration: .12s; }
}

/* setas dos títulos: transição ao habilitar/desabilitar */
.nav-arrow { transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease; }
.nav-arrow-active:active { transform: scale(.88); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  .game-card-wrapper > a, .game-img[data-v-625a2d10], .game-image[data-v-144a840e], .game-image[data-v-144a840e] img { transition: none !important; }
  .game-card-wrapper > a::after, .game-image[data-v-144a840e]::after { display: none; }
}

/* folga em cima/embaixo dentro dos trilhos para o card subir e brilhar sem ser cortado */
.game-scroll[data-v-53b71cb1], .ranking-collection:not(.is-grid) {
  padding-top: 12px; padding-bottom: 16px; margin-top: -12px; margin-bottom: -16px;
}

/* ===== banners do topo (hero do celular .embla-wrap e "duo" do computador .hc-carousel) ===== */

/* entrada ao abrir a página */
@keyframes bnEntra { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } to { opacity: 1; transform: none; } }
.hero-banner, .hc-carousel { animation: bnEntra .7s cubic-bezier(.2, .75, .2, 1) both; }

/* zoom lento (Ken Burns) no banner atual; os outros voltam rápido */
.embla__img[data-v-f200d80d], .hc-media[data-v-523ba844] img {
  transform: scale(1); transform-origin: 50% 45%;
  transition: transform .9s cubic-bezier(.2, .75, .2, 1), filter .45s ease;
}
.bn-anim .bn-cur .embla__img[data-v-f200d80d] { transform: scale(1.04); transition: transform 6s linear, filter .45s ease; }

/* celular: o banner do lado (o "peek") fica mais apagado e um pouco menor, destacando o atual */
.embla-wrap.bn-anim .embla__slide[data-v-f200d80d] { transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.embla-wrap.has-peek.bn-anim .embla__slide:not(.bn-cur)[data-v-f200d80d] { opacity: .55; transform: scale(.94); }

/* luz passando no banner (uma vez, ao virar o atual; no computador também ao passar o mouse) */
.embla__link[data-v-f200d80d], .hc-media[data-v-523ba844] { position: relative; }
.embla__link[data-v-f200d80d]::after, .hc-media[data-v-523ba844]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(110deg, transparent 32%, rgb(255 255 255 / .2) 47%, rgb(255 255 255 / .05) 53%, transparent 66%);
  transform: translateX(-130%);
}
@keyframes bnLuz { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.bn-anim .bn-cur .embla__link[data-v-f200d80d]::after { animation: bnLuz 1.1s .35s ease-out both; }

/* barra de progresso do autoplay dentro do pontinho ativo (5s, igual ao tempo de troca) */
@keyframes bnProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bn-anim .dot[data-v-f200d80d], .bn-anim .hc-dots span[data-v-523ba844] { position: relative; overflow: hidden; }
.bn-anim .dot.active[data-v-f200d80d], .bn-anim .hc-dots .is-active span[data-v-523ba844] { background: rgb(255 255 255 / .28); }
.bn-anim .dot.active[data-v-f200d80d]::after, .bn-anim .hc-dots .is-active span[data-v-523ba844]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: var(--c-dots, rgb(var(--primary-color)));
  transform: scaleX(0);
}
.bn-anim .dot.bn-run[data-v-f200d80d]::after, .bn-anim .hc-dots .bn-run span[data-v-523ba844]::after { animation: bnProg 5s linear forwards; }
.bn-anim.bn-parado .dot.active[data-v-f200d80d]::after, .bn-anim.bn-parado .hc-dots .is-active span[data-v-523ba844]::after { animation-play-state: paused; }

/* computador: passar o mouse num banner do "duo" levanta, brilha e dá zoom */
@media (hover: hover) and (pointer: fine) {
  .hc-media[data-v-523ba844] { transition: transform .4s cubic-bezier(.2, .75, .2, 1), box-shadow .4s ease; }
  .hc-slide:hover .hc-media[data-v-523ba844] {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -16px rgb(0 0 0 / .85), 0 0 0 1.5px rgb(var(--primary-color) / .6), 0 12px 30px -12px rgb(var(--primary-color) / .45);
  }
  .hc-slide:hover .hc-media[data-v-523ba844] img { transform: scale(1.04); }
  .hc-slide:hover .hc-media[data-v-523ba844]::after { animation: bnLuz 1s ease-out both; }
  .embla-wrap .nav-btn, .hc-arrow { transition: opacity .25s ease, transform .25s ease; }
  .embla-wrap .nav-btn:hover, .hc-arrow:hover { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner, .hc-carousel { animation: none; }
  .bn-anim .bn-cur .embla__img[data-v-f200d80d], .hc-slide:hover .hc-media[data-v-523ba844] img { transform: none; }
  .embla__link[data-v-f200d80d]::after, .hc-media[data-v-523ba844]::after { display: none; }
  .bn-anim .dot.bn-run[data-v-f200d80d]::after, .bn-anim .hc-dots .bn-run span[data-v-523ba844]::after { animation: none; transform: scaleX(1); }
}

/* ===== tudo o mais (13/10) ===== */

/* seções abaixo da dobra sobem ao aparecer (rails.js põe .sv / .sv-on) */
.sv { opacity: 0; transform: translate3d(0, 26px, 0); }
.sv.sv-on { opacity: 1; transform: none; transition: opacity .6s ease, transform .75s cubic-bezier(.2, .75, .2, 1); }

/* Torneios Populares: card sobe, brilha, a bandeira dá um giro leve e a luz passa */
.tp-card[data-v-b48e1ba3] { transition: transform .4s cubic-bezier(.2, .75, .2, 1), box-shadow .4s ease, filter .3s ease; will-change: transform; }
.tp-card[data-v-b48e1ba3]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .2) 48%, transparent 66%);
  transform: translateX(-120%);
}
.tp-flag[data-v-b48e1ba3] { transition: transform .45s cubic-bezier(.2, .75, .2, 1); }
.tp-arr.rl-off { opacity: .3; pointer-events: none; }
.tp-arr[data-v-b48e1ba3] { transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease; }
.tp-arr[data-v-b48e1ba3]:active { transform: scale(.88); }

/* Jogos recomendados: linhas entram em sequência (também ao trocar de aba) e as odds respondem ao toque */
@keyframes linhaEntra { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.linha[data-v-7487b8fa] { animation: linhaEntra .45s cubic-bezier(.2, .75, .2, 1) backwards; transition: background .2s ease, box-shadow .3s ease, transform .3s ease; }
.linha[data-v-7487b8fa]:nth-child(2) { animation-delay: .05s; } .linha[data-v-7487b8fa]:nth-child(3) { animation-delay: .1s; }
.linha[data-v-7487b8fa]:nth-child(4) { animation-delay: .15s; } .linha[data-v-7487b8fa]:nth-child(5) { animation-delay: .2s; }
.linha[data-v-7487b8fa]:nth-child(n+6) { animation-delay: .25s; }
.odd[data-v-7487b8fa], .odd[data-v-f216093a] { transition: background .2s ease, transform .18s ease, box-shadow .25s ease; }
.odd[data-v-7487b8fa]:active, .odd[data-v-f216093a]:active { transform: scale(.94); }
.aba[data-v-7487b8fa] { transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease; }
.aba[data-v-7487b8fa]:active { transform: scale(.95); }

/* página de categoria: cards entram em cascata (e os do "Carregar mais" também) */
@keyframes cardEntra { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } to { opacity: 1; transform: none; } }
.game-card-wrap[data-v-144a840e] { animation: cardEntra .5s cubic-bezier(.2, .75, .2, 1) backwards; }
.game-card-wrap[data-v-144a840e]:nth-child(2) { animation-delay: .03s; } .game-card-wrap[data-v-144a840e]:nth-child(3) { animation-delay: .06s; }
.game-card-wrap[data-v-144a840e]:nth-child(4) { animation-delay: .09s; } .game-card-wrap[data-v-144a840e]:nth-child(5) { animation-delay: .12s; }
.game-card-wrap[data-v-144a840e]:nth-child(6) { animation-delay: .15s; } .game-card-wrap[data-v-144a840e]:nth-child(7) { animation-delay: .18s; }
.game-card-wrap[data-v-144a840e]:nth-child(8) { animation-delay: .21s; } .game-card-wrap[data-v-144a840e]:nth-child(9) { animation-delay: .24s; }
.game-card-wrap[data-v-144a840e]:nth-child(n+10):nth-child(-n+18) { animation-delay: .27s; }

/* menu lateral: ícones 3D flutuam de leve (em tempos diferentes) */
/* o ícone já é posicionado com translate(-50%,-50%): a flutuação mantém esse deslocamento (só nos layouts em grade) */
@keyframes flutua { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 4px)); } }
:is(.promo-grid--grid_2, .promo-grid--grid_3, .promo-grid--grid_4) .promo-icon-wrap[data-v-f7f489b6] { animation: flutua 3.4s ease-in-out infinite; }
.promo-card:nth-child(2) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -.6s; }
.promo-card:nth-child(3) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -1.2s; }
.promo-card:nth-child(4) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -1.8s; }
.promo-card:nth-child(5) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -2.4s; }
.promo-card:nth-child(6) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -3s; }
.promo-card[data-v-f7f489b6] { transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease; }
.vera-link-text[data-v-f7f489b6] { display: inline-block; transition: transform .25s cubic-bezier(.2, .75, .2, 1); }

/* botões principais: brilho pulsando que segue o formato inclinado (sem mexer no ::before deles) */
@keyframes ctaPulso {
  0%, 70%, 100% { filter: drop-shadow(0 0 0 rgb(var(--primary-color) / 0)); }
  80% { filter: drop-shadow(0 0 10px rgb(var(--primary-color) / .75)); }
}
.vera-cta-primary, .account-deposit[data-v-e182f4df] { animation: ctaPulso 3.6s ease-in-out infinite; }
.vera-cta-btn[data-v-bf393b4d], .account-deposit[data-v-e182f4df] { transition: transform .2s ease, filter .2s ease; }
.ver-todos-classic { transition: transform .2s ease, filter .2s ease, box-shadow .25s ease; }

/* favorito: coração pula ao marcar */
@keyframes coracao { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
.fav-btn[aria-pressed="true"] .fav-icon { animation: coracao .45s ease; }

@media (hover: hover) and (pointer: fine) {
  .tp-card[data-v-b48e1ba3]:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: inset 0 1px #ffffff29, 0 18px 30px -14px rgb(0 0 0 / .85), 0 0 0 1.5px rgb(var(--primary-color) / .55), 0 10px 26px -10px rgb(var(--primary-color) / .5);
  }
  .tp-card[data-v-b48e1ba3]:hover::after { transform: translateX(120%); transition: transform .8s ease; }
  .tp-card[data-v-b48e1ba3]:hover .tp-flag[data-v-b48e1ba3] { transform: rotate(-8deg) scale(1.12); }
  .linha[data-v-7487b8fa]:hover { box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / .35), 0 10px 24px -16px rgb(0 0 0 / .8); transform: translateY(-2px); }
  .odd[data-v-7487b8fa]:hover, .odd[data-v-f216093a]:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgb(var(--primary-color) / .6); }
  .promo-card[data-v-f7f489b6]:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 24px -14px rgb(var(--primary-color) / .6); }
  .vera-link:hover .vera-link-text[data-v-f7f489b6] { transform: translateX(4px); }
  .vera-cta-btn[data-v-bf393b4d]:hover, .account-deposit[data-v-e182f4df]:hover { transform: translateY(-2px); }
  .ver-todos-classic:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 18px -8px rgb(var(--primary-color) / .7); }
}

@media (prefers-reduced-motion: reduce) {
  .sv { opacity: 1 !important; transform: none !important; }
  .linha[data-v-7487b8fa], .game-card-wrap[data-v-144a840e], .promo-icon-wrap[data-v-f7f489b6],
  .vera-cta-primary, .account-deposit[data-v-e182f4df], .fav-btn .fav-icon { animation: none !important; }
  .tp-card[data-v-b48e1ba3]::after { display: none; }
}
.tp-strip[data-v-b48e1ba3] { padding-top: 10px; padding-bottom: 14px; margin-top: -10px; margin-bottom: -14px; }

/* ===== esportes (sb.js; tudo é redesenhado só por ação do usuário, então a entrada não pisca) ===== */
@keyframes sbEntra { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* partidas: cascata a cada filtro/aba/liga; mercados da página do jogo e "minhas apostas" idem */
.card[data-v-f216093a], .dt-grp[data-v-f216093a], .mbc[data-v-f216093a] { animation: sbEntra .45s cubic-bezier(.2, .75, .2, 1) backwards; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(2) { animation-delay: .04s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(3) { animation-delay: .08s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(4) { animation-delay: .12s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(5) { animation-delay: .16s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(6) { animation-delay: .2s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(7) { animation-delay: .24s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(n+8):nth-child(-n+14) { animation-delay: .28s; }
.card[data-v-f216093a] { transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease, border-color .3s ease, background .2s ease; }

/* odd escolhida dá um pulo (também ao entrar no cupom pela página do jogo) */
@keyframes oddPulo { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.odd.sel[data-v-f216093a] { animation: oddPulo .35s cubic-bezier(.2, .75, .2, 1); box-shadow: 0 6px 16px -8px var(--acc, rgb(var(--primary-color))); }
.dodd.sel[data-v-f216093a] { animation: oddPulo .35s cubic-bezier(.2, .75, .2, 1); }
.dodd[data-v-f216093a]:not(.sel):active { transform: scale(.95); }

/* contador do cupom pula a cada seleção (o cupom é redesenhado a cada mudança) */
@keyframes cntPulo { 0% { transform: scale(.4); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.cf-cnt[data-v-f216093a] { display: inline-block; animation: cntPulo .45s cubic-bezier(.2, .75, .2, 1); }

/* AO VIVO: o sinal pulsa */
@keyframes aoVivo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }
.c-livebadge .lv-sig[data-v-f216093a] { animation: aoVivo 1.4s ease-in-out infinite; }

/* banner do esportes: ícone grande flutua; abas de esporte e ligas respondem ao toque */
@keyframes carFlutua { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(calc(-50% - 8px)) rotate(-3deg); } }
.car-art[data-v-f216093a] { animation: carFlutua 4.5s ease-in-out infinite; }
.spt[data-v-f216093a], .lgchip[data-v-f216093a], .tb-sp[data-v-f216093a] { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease; }
.spt[data-v-f216093a]:active, .lgchip[data-v-f216093a]:active, .tb-sp[data-v-f216093a]:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .card[data-v-f216093a]:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 55%, transparent);
    box-shadow: 0 14px 28px -16px rgb(0 0 0 / .85), 0 8px 24px -14px var(--acc, rgb(var(--primary-color)));
  }
  .dodd[data-v-f216093a]:not(.sel):hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px var(--acc, rgb(var(--primary-color))); }
  .lgchip[data-v-f216093a]:hover, .spt[data-v-f216093a]:hover { transform: translateY(-2px); }
  .tb-sp[data-v-f216093a]:hover svg { animation: oddPulo .4s ease; }
  .mbc[data-v-f216093a] { transition: transform .3s ease, box-shadow .3s ease; }
  .mbc[data-v-f216093a]:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgb(0 0 0 / .9); }
}

@media (prefers-reduced-motion: reduce) {
  .card[data-v-f216093a], .dt-grp[data-v-f216093a], .mbc[data-v-f216093a], .odd.sel[data-v-f216093a], .dodd.sel[data-v-f216093a],
  .cf-cnt[data-v-f216093a], .c-livebadge .lv-sig[data-v-f216093a], .car-art[data-v-f216093a] { animation: none !important; }
}

/* ===== páginas da conta (/user/*), gaveta da conta e modais de depósito/saque =====
   Aberturas usam as propriedades separadas translate/scale: somam ao transform que esses
   elementos já têm (ex.: modal centralizado com translate(-50%,-50%)) em vez de substituí-lo. */
@keyframes contaEntra { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

:is(.vera-saldo-card[data-v-72f4bda6], .vera-history-banner[data-v-72f4bda6], .card[data-v-f6eac9c3], .ig-step[data-v-94bd71ec],
    .ig-stat[data-v-94bd71ec], .ig-share[data-v-94bd71ec], .trn-card[data-v-cf5585d8], .card[data-v-e9e1149f], .rw-step[data-v-1426dadf],
    .upload-slot[data-v-bf625628], .notif-section[data-v-169de6bd], .sub-tabs-card[data-v-26cf18d3], .trn-you-block, .state-empty, .trn-empty) {
  animation: contaEntra .5s cubic-bezier(.2, .75, .2, 1) backwards;
}
:is(.vera-saldo-card, .card, .ig-step, .ig-stat, .trn-card, .rw-step, .upload-slot):nth-child(2) { animation-delay: .06s; }
:is(.vera-saldo-card, .card, .ig-step, .ig-stat, .trn-card, .rw-step, .upload-slot):nth-child(3) { animation-delay: .12s; }
:is(.vera-saldo-card, .card, .ig-step, .ig-stat, .trn-card, .rw-step, .upload-slot):nth-child(4) { animation-delay: .18s; }
:is(.vera-saldo-card, .card, .ig-step, .ig-stat, .trn-card, .rw-step, .upload-slot):nth-child(n+5):nth-child(-n+10) { animation-delay: .24s; }
:is(.vera-saldo-card[data-v-72f4bda6], .card[data-v-f6eac9c3], .ig-step[data-v-94bd71ec], .trn-card[data-v-cf5585d8], .card[data-v-e9e1149f], .ig-stat[data-v-94bd71ec]) {
  transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease, border-color .3s ease, filter .2s ease;
}
.vera-saldo-action[data-v-72f4bda6], .ig-share-btn[data-v-94bd71ec], .doctype-btn[data-v-bf625628], .tab[data-v-a0e7ccad], .chip { transition: transform .2s ease, filter .2s ease, background .2s ease, color .2s ease, box-shadow .25s ease; }
:is(.vera-saldo-action[data-v-72f4bda6], .ig-share-btn[data-v-94bd71ec], .doctype-btn[data-v-bf625628], .tab[data-v-a0e7ccad], .chip, .action-icon-btn):active { scale: .95; }

/* gaveta da conta: painel desliza da direita, itens entram em cascata */
@keyframes painelDireita { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes fundoEntra { from { opacity: 0; } to { opacity: 1; } }
#braAccount:not([hidden]) .vera-panel[data-v-3ad72e4e] { animation: painelDireita .38s cubic-bezier(.32, .72, 0, 1) both; }
#braAccount:not([hidden]) .vera-overlay, #braDep:not([hidden]) .dep-overlay, #braWd:not([hidden]) .wd-overlay { animation: fundoEntra .3s ease both; }
#braAccount:not([hidden]) :is(.profile-card, .account-item, .promo-item) { animation: contaEntra .4s cubic-bezier(.2, .75, .2, 1) backwards; }
#braAccount .account-item:nth-child(1) { animation-delay: .1s; } #braAccount .account-item:nth-child(2) { animation-delay: .14s; }
#braAccount .account-item:nth-child(3) { animation-delay: .18s; } #braAccount .account-item:nth-child(4) { animation-delay: .22s; }
#braAccount .account-item:nth-child(n+5) { animation-delay: .26s; }
#braAccount .promo-item { animation-delay: .3s; }

/* depósito e saque: janela sobe e cresce de leve ao abrir (no computador ela é centralizada; translate/scale preservam isso) */
@keyframes janelaEntra { from { opacity: 0; translate: 0 26px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
#braDep:not([hidden]) .dep-sheet, #braWd:not([hidden]) .wd-sheet { animation: janelaEntra .38s cubic-bezier(.2, .75, .2, 1) both; }

@media (hover: hover) and (pointer: fine) {
  .vera-saldo-card[data-v-72f4bda6]:hover, .card[data-v-f6eac9c3]:hover, .ig-step[data-v-94bd71ec]:hover, .ig-stat[data-v-94bd71ec]:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--primary-color) / .35);
    box-shadow: 0 14px 28px -16px rgb(0 0 0 / .85), 0 8px 22px -14px rgb(var(--primary-color) / .5);
  }
  .trn-card[data-v-cf5585d8]:hover, .card[data-v-e9e1149f]:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 32px -16px rgb(0 0 0 / .9), 0 0 0 1.5px rgb(var(--primary-color) / .55), 0 10px 26px -12px rgb(var(--primary-color) / .5);
  }
  .vera-saldo-action[data-v-72f4bda6]:hover, .ig-share-btn[data-v-94bd71ec]:hover, .doctype-btn[data-v-bf625628]:hover { transform: translateY(-2px); filter: brightness(1.1); }
  #braAccount .account-item { transition: background .2s ease, padding-left .25s ease; }
  #braAccount .account-item .account-label { display: inline-block; transition: transform .25s cubic-bezier(.2, .75, .2, 1); }
  #braAccount .account-item:hover .account-label { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.vera-saldo-card, .vera-history-banner, .card, .ig-step, .ig-stat, .ig-share, .trn-card, .rw-step, .upload-slot, .notif-section, .sub-tabs-card, .trn-you-block, .state-empty),
  #braAccount .vera-panel, #braAccount .vera-overlay, #braAccount :is(.profile-card, .account-item, .promo-item),
  #braDep .dep-overlay, #braWd .wd-overlay, #braDep .dep-sheet, #braWd .wd-sheet { animation: none !important; }
}

/* ===== login / cadastro / esqueci (#braAuth) =====
   A janela tem altura fixa e o brava.js mede scrollHeight para compactar (fit-1..4): só se anima
   translate/scale/opacity, que não mexem no layout, então a medição continua certa. */
@keyframes authFundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes authSobe { from { translate: 0 100%; } to { translate: 0 0; } }                          /* celular: sobe de baixo */
@keyframes authCentro { from { opacity: 0; translate: 0 28px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } } /* computador: centralizado */
/* os itens crescem (escala < 1 no início) em vez de deslizar para baixo: deslocamento para baixo conta
   como conteúdo a mais no scrollHeight e faria o fitSheet compactar o formulário sem necessidade */
@keyframes authItem { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
@keyframes authBanner { from { scale: 1.12; filter: brightness(.6); } to { scale: 1; filter: none; } }
@keyframes authLuz { from { translate: -130% 0; } to { translate: 130% 0; } }
@keyframes authTreme { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
@keyframes authCheck { 0% { scale: 1; } 40% { scale: 1.25; } 100% { scale: 1; } }
@keyframes authPulso { 0%, 70%, 100% { filter: drop-shadow(0 0 0 rgb(var(--primary-color) / 0)); } 82% { filter: drop-shadow(0 0 12px rgb(var(--primary-color) / .7)); } }

#braAuth:not([hidden]) .auth-overlay { animation: authFundo .3s ease both; }
#braAuth .auth-sheet:not([hidden]) { animation: authSobe .48s cubic-bezier(.32, .72, 0, 1) both; }
@media (min-width: 640px) { #braAuth .auth-sheet:not([hidden]) { animation: authCentro .45s cubic-bezier(.2, .75, .2, 1) both; } }

/* banner: entra com um zoom suave e uma luz passa por cima */
#braAuth .auth-banner { position: relative; overflow: hidden; }
#braAuth .auth-sheet:not([hidden]) .auth-banner img { animation: authBanner 1.1s cubic-bezier(.2, .75, .2, 1) both; }
#braAuth .auth-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgb(255 255 255 / .22) 48%, transparent 64%);
  translate: -130% 0;
}
#braAuth .auth-sheet:not([hidden]) .auth-banner::after { animation: authLuz 1.2s .45s ease-out both; }

/* campos, termos, botão e links entram em sequência */
#braAuth .auth-sheet:not([hidden]) :is(.auth-field, .auth-terms, .auth-submit, .auth-switch, .auth-forgot) { animation: authItem .42s cubic-bezier(.2, .75, .2, 1) backwards; }
#braAuth .auth-form > :nth-child(1) { animation-delay: .16s; } #braAuth .auth-form > :nth-child(2) { animation-delay: .21s; }
#braAuth .auth-form > :nth-child(3) { animation-delay: .26s; } #braAuth .auth-form > :nth-child(4) { animation-delay: .31s; }
#braAuth .auth-form > :nth-child(5) { animation-delay: .36s; } #braAuth .auth-form > :nth-child(6) { animation-delay: .41s; }
#braAuth .auth-form > :nth-child(n+7) { animation-delay: .46s; }
#braAuth .auth-sheet:not([hidden]) .auth-switch { animation-delay: .5s; }

/* campo em foco: anel de luz na cor da casa */
#braAuth .auth-input, #braAuth .auth-ddi { transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease; }
#braAuth .auth-input:focus { box-shadow: 0 0 0 3px rgb(var(--primary-color) / .18), 0 6px 18px -10px rgb(var(--primary-color) / .6); }
#braAuth .auth-label { transition: color .2s ease; }
#braAuth .auth-field:focus-within .auth-label { color: rgb(var(--primary-color)); }

/* erro treme, caixinha dos termos pula ao marcar, botão principal pulsa de leve */
#braAuth .auth-error:not([hidden]) { animation: authTreme .45s ease, authItem .3s ease backwards; }
#braAuth .auth-terms-box.checked { animation: authCheck .35s cubic-bezier(.2, .75, .2, 1); }
#braAuth .auth-sheet:not([hidden]) .auth-submit:not(:disabled) { animation: authItem .42s cubic-bezier(.2, .75, .2, 1) backwards, authPulso 3.4s 1.4s ease-in-out infinite; }
#braAuth .auth-submit { transition: filter .18s ease, translate .2s ease; }
#braAuth .auth-submit:active:not(:disabled) { translate: 0 1px; scale: .98; }
#braAuth .auth-close, #braAuth .auth-eye { transition: rotate .3s ease, scale .2s ease, background .2s ease, color .2s ease; }
#braAuth .auth-eye:active { scale: .85; }

/* ===== aviso de 18 anos ===== */
@keyframes idadeEntra { from { opacity: 0; translate: 0 24px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
.age-overlay[data-v-2a5d4680] { animation: authFundo .35s ease both; }
.age-modal[data-v-2a5d4680] { animation: idadeEntra .5s .08s cubic-bezier(.2, .75, .2, 1) both; }
.age-modal[data-v-2a5d4680] > * { animation: authItem .4s cubic-bezier(.2, .75, .2, 1) backwards; }
.age-modal[data-v-2a5d4680] > :nth-child(1) { animation-delay: .2s; } .age-modal[data-v-2a5d4680] > :nth-child(2) { animation-delay: .28s; }
.age-modal[data-v-2a5d4680] > :nth-child(3) { animation-delay: .36s; } .age-modal[data-v-2a5d4680] > :nth-child(n+4) { animation-delay: .44s; }

/* ===== filtro de provedoras (painel) e busca do cabeçalho ===== */
@keyframes painelAbre { from { opacity: 0; translate: 0 -8px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes painelSobe { from { translate: 0 100%; } to { translate: 0 0; } }
.painel[data-v-753b4497]:not([hidden]) { animation: painelAbre .25s cubic-bezier(.2, .75, .2, 1) both; transform-origin: top; }
@media (max-width: 767px) { .painel[data-v-753b4497]:not([hidden]) { animation: painelSobe .38s cubic-bezier(.32, .72, 0, 1) both; } }
.search-open .header-search-panel { animation: painelAbre .22s cubic-bezier(.2, .75, .2, 1) both; }

/* ===== menu do celular: itens entram em cascata quando ele abre ===== */
@keyframes menuItem { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
.sidebar.open[data-v-f7f489b6] :is(.promo-card, .chat-entrada, .vera-group-hd, .vera-link, .vera-sport) { animation: menuItem .38s cubic-bezier(.2, .75, .2, 1) backwards; }
.sidebar.open[data-v-f7f489b6] .promo-card:nth-child(1) { animation-delay: .08s; } .sidebar.open[data-v-f7f489b6] .promo-card:nth-child(2) { animation-delay: .12s; }
.sidebar.open[data-v-f7f489b6] .promo-card:nth-child(3) { animation-delay: .16s; } .sidebar.open[data-v-f7f489b6] .promo-card:nth-child(4) { animation-delay: .2s; }
.sidebar.open[data-v-f7f489b6] .promo-card:nth-child(5) { animation-delay: .24s; } .sidebar.open[data-v-f7f489b6] .promo-card:nth-child(6) { animation-delay: .28s; }
.sidebar.open[data-v-f7f489b6] .chat-entrada { animation-delay: .3s; }
.sidebar.open[data-v-f7f489b6] .vera-group-hd, .sidebar.open[data-v-f7f489b6] .vera-link, .sidebar.open[data-v-f7f489b6] .vera-sport { animation-delay: .34s; }

/* ===== avisos (toasts) do esportes e das missões ===== */
@keyframes avisoEntra { from { opacity: 0; translate: 0 18px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.sb-toast[data-v-f216093a], .toast[data-v-c0a56903] { animation: avisoEntra .4s cubic-bezier(.2, .75, .2, 1) both; }

/* ===== barra de navegação do celular: ícone da aba atual dá um pulinho ===== */
@keyframes navPulo { 0% { translate: 0 0; } 40% { translate: 0 -4px; } 100% { translate: 0 0; } }
.vera-nav-item { transition: color .2s ease; }
.vera-nav-item:active svg, .vera-nav-item:active img { animation: navPulo .35s ease; }

@media (hover: hover) and (pointer: fine) {
  #braAuth .auth-close:hover { rotate: 90deg; }
  #braAuth .auth-link:hover, #braAuth .auth-forgot:hover { filter: brightness(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  #braAuth *, #braAuth .auth-sheet, .age-overlay, .age-modal, .age-modal > *, .painel, .header-search-panel,
  .sidebar.open *, .sb-toast, .toast, .vera-nav-item svg, .vera-nav-item img { animation: none !important; }
}

/* ===== esportes: aba "Estatísticas" da página do jogo (sb.js drawStats/statsHtml) ===== */
.sbst { display: grid; gap: 12px; }
.sbst-times { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 13px; color: var(--txt, #fff); padding: 0 4px; }
.sbst-times span:last-child { text-align: right; }
.sbst-card { background: var(--card, rgb(255 255 255 / .04)); border-radius: clamp(12px, .9vw, 18px); padding: 14px clamp(12px, 1vw, 20px) 16px; }
.sbst-h { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--txt, #fff); margin: 0 0 12px; }
.sbst-msg { padding: 28px 12px; text-align: center; color: var(--txt-2, #aaa); font-size: 13px; }
.sbst-vazio { background: var(--card, rgb(255 255 255 / .04)); border-radius: 16px; padding: 30px 18px; text-align: center; color: var(--txt-2, #aaa); }
.sbst-vazio b { display: block; color: var(--txt, #fff); font-size: 15px; margin: 8px 0 6px; }
.sbst-vazio p { font-size: 12.5px; line-height: 1.5; margin: 0 auto; max-width: 360px; }
.sbst-vazio-ic { font-size: 30px; }

/* lance a lance: casa à esquerda, minuto no meio, visitante à direita */
.sbst-tl { position: relative; display: grid; gap: 8px; }
.sbst-tl::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--line, rgb(255 255 255 / .1)); }
.sbst-tlr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; position: relative; }
.sbst-tlr > .sbst-ev:first-child { justify-content: flex-end; text-align: right; }
.sbst-ev { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--txt, #fff); min-width: 0; }
.sbst-ev span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbst-tlr > .sbst-ev:first-child { flex-direction: row-reverse; }
.sbst-min { position: relative; z-index: 1; min-width: 40px; text-align: center; font-size: 11px; font-weight: 800; color: var(--txt, #fff); background: var(--card-2, #1c1d24); border: 1px solid var(--line, rgb(255 255 255 / .1)); border-radius: 999px; padding: 3px 8px; }
.sbst-ic { flex: none; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; }
.sbst-cartao { width: 10px; height: 14px; border-radius: 2px; background: #facc15; box-shadow: 0 2px 6px rgb(250 204 21 / .35); }
.sbst-cartao.verm { background: #ef4444; box-shadow: 0 2px 6px rgb(239 68 68 / .4); }
.sbst-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-2, #aaa); }

/* barras: cada lado cresce a partir do centro; quem lidera fica na cor da casa */
.sbst-row { padding: 9px 0; border-top: 1px solid var(--line, rgb(255 255 255 / .06)); }
.sbst-row:first-of-type { border-top: 0; padding-top: 0; }
.sbst-vals { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; margin-bottom: 7px; }
.sbst-vals span { text-align: center; font-size: 12px; color: var(--txt-2, #aaa); }
.sbst-vals b { font-size: 14px; font-weight: 800; color: var(--txt-2, #aaa); }
.sbst-vals b:last-child { text-align: right; }
.sbst-vals b.lid { color: var(--txt, #fff); }
.sbst-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sbst-bar { height: 6px; border-radius: 999px; background: var(--card-2, rgb(255 255 255 / .06)); overflow: hidden; display: flex; }
.sbst-ba { justify-content: flex-end; }
.sbst-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--txt-2, #aaa) 55%, transparent); }
.sbst-bar i.lid { background: linear-gradient(90deg, var(--acc, rgb(var(--primary-color))), var(--acc-2, rgb(var(--primary-color)))); box-shadow: 0 0 10px -2px var(--acc, rgb(var(--primary-color))); }
.sbst-nota { text-align: center; font-size: 11px; color: var(--txt-2, #aaa); margin: 2px 0 0; }

@keyframes sbstBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sbstEntra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.sbst:not(.sbst-q) .sbst-ba i { transform-origin: right center; animation: sbstBarra .7s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms + .1s); }
.sbst:not(.sbst-q) .sbst-bb i { transform-origin: left center; animation: sbstBarra .7s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms + .1s); }
.sbst:not(.sbst-q) .sbst-row, .sbst:not(.sbst-q) .sbst-tlr { animation: sbstEntra .4s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.sbst .sbst-bar i { transition: width .6s cubic-bezier(.2, .75, .2, 1); }
@media (prefers-reduced-motion: reduce) { .sbst *, .sbst-row, .sbst-tlr { animation: none !important; } }

/* ===== esportes: campinho / quadra ao vivo na página do jogo (sb.js campoAoVivo) ===== */
.lt { --lt-h: var(--acc, rgb(var(--primary-color))); --lt-a: #3b82f6; margin: 10px 0 14px; background: var(--card, rgb(255 255 255 / .04)); border-radius: clamp(12px, .9vw, 18px); padding: 10px; display: grid; gap: 9px; }
.lt-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--txt, #fff); padding: 0 2px; }
.lt-live { display: inline-flex; align-items: center; gap: 6px; color: #ff4d4d; letter-spacing: .06em; font-size: 11px; }
.lt-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgb(255 77 77 / .6); animation: ltPisca 1.4s ease-out infinite; }
@keyframes ltPisca { 0% { box-shadow: 0 0 0 0 rgb(255 77 77 / .6); } 100% { box-shadow: 0 0 0 9px rgb(255 77 77 / 0); } }
.lt-clk { color: var(--txt-2, #aaa); font-weight: 700; }

.lt-campo { position: relative; aspect-ratio: 100 / 60; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 40px rgb(0 0 0 / .35); }
.lt-campo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lt-lado { position: absolute; top: 6px; font-size: 10px; font-weight: 800; color: rgb(255 255 255 / .85); background: rgb(0 0 0 / .35); padding: 2px 7px; border-radius: 999px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-lh { left: 6px; box-shadow: inset 3px 0 0 var(--lt-h); } .lt-la { right: 6px; box-shadow: inset -3px 0 0 var(--lt-a); }

/* zona atacada: gradiente na cor de quem ataca, do lado do gol adversário */
.lt-zona { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease, background .6s ease; pointer-events: none; }
.lt-zona.lt-zH { --c: var(--lt-h); } .lt-zona.lt-zA { --c: var(--lt-a); }
.lt-z-ataque.lt-zH { opacity: .55; background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--c) 45%, transparent) 100%); }
.lt-z-ataque.lt-zA { opacity: .55; background: linear-gradient(270deg, transparent 50%, color-mix(in srgb, var(--c) 45%, transparent) 100%); }
.lt-z-perigoso.lt-zH, .lt-z-escanteio.lt-zH, .lt-z-gol.lt-zH { opacity: .85; background: radial-gradient(ellipse 30% 55% at 100% 50%, color-mix(in srgb, var(--c) 75%, transparent), transparent 70%); animation: ltPulso 1.4s ease-in-out infinite; }
.lt-z-perigoso.lt-zA, .lt-z-escanteio.lt-zA, .lt-z-gol.lt-zA { opacity: .85; background: radial-gradient(ellipse 30% 55% at 0% 50%, color-mix(in srgb, var(--c) 75%, transparent), transparent 70%); animation: ltPulso 1.4s ease-in-out infinite; }
.lt-z-posse.lt-zH { opacity: .3; background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--c) 30%, transparent) 70%, transparent); }
.lt-z-posse.lt-zA { opacity: .3; background: linear-gradient(270deg, transparent 30%, color-mix(in srgb, var(--c) 30%, transparent) 70%, transparent); }
@keyframes ltPulso { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

.lt-bola { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #d9d9d9 60%, #9a9a9a); box-shadow: 0 0 0 3px rgb(255 255 255 / .18), 0 2px 6px rgb(0 0 0 / .5); transition: left 1.6s cubic-bezier(.45, .05, .25, 1), top 1.6s cubic-bezier(.45, .05, .25, 1); z-index: 2; }
.lt-bola::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .5); animation: ltOnda 1.6s ease-out infinite; }
@keyframes ltOnda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

.lt-msg { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); color: #fff; font-size: 11.5px; white-space: nowrap; max-width: 92%; opacity: 0; transition: opacity .35s ease; z-index: 3; }
.lt-msg.on { opacity: 1; animation: ltMsg .45s cubic-bezier(.2, .75, .2, 1); }
@keyframes ltMsg { from { translate: -50% 8px; opacity: 0; } to { translate: -50% 0; opacity: 1; } }
.lt-msg i { width: 8px; height: 8px; border-radius: 50%; background: var(--lt-h); flex: none; } .lt-msg.lt-mA i { background: var(--lt-a); }
.lt-msg b { font-weight: 800; } .lt-msg span { color: rgb(255 255 255 / .75); overflow: hidden; text-overflow: ellipsis; }

.lt-gol { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgb(0 0 0 / .55), rgb(0 0 0 / .2)); opacity: 0; pointer-events: none; z-index: 4; }
.lt-gol b { font-size: clamp(28px, 7vw, 46px); font-weight: 900; color: #fff; letter-spacing: .04em; text-shadow: 0 4px 20px var(--lt-h); }
.lt-gol span { color: #fff; font-weight: 800; font-size: 13px; }
.lt-gol.on { animation: ltGol 4s ease both; }
@keyframes ltGol { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.lt-gol.on b { animation: ltGolTxt .6s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes ltGolTxt { from { scale: .3; } to { scale: 1; } }

.lt-pressao { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; font-size: 11px; color: var(--txt-2, #aaa); font-weight: 700; padding: 0 2px; }
.lt-pbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--card-2, rgb(255 255 255 / .06)); gap: 2px; }
.lt-pbar i { display: block; height: 100%; transition: width .8s cubic-bezier(.2, .75, .2, 1); }
.lt-ph { background: var(--lt-h); border-radius: 999px 0 0 999px; } .lt-pa { background: var(--lt-a); border-radius: 0 999px 999px 0; }
.lt-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lt-chips span { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--card-2, rgb(255 255 255 / .05)); border-radius: 9px; padding: 6px 8px; font-size: 10px; color: var(--txt-2, #aaa); }
.lt-chips b { color: var(--txt, #fff); font-size: 12px; }
@media (max-width: 520px) { .lt-chips { grid-template-columns: repeat(2, 1fr); } }

/* quadra (basquete e outros): placar sobre a quadra */
.lt-quadra { position: relative; aspect-ratio: 100 / 45; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.lt-q-basquete { background: repeating-linear-gradient(90deg, #b9783f 0 8px, #b07038 8px 16px); }
.lt-q-basquete::before { content: ""; position: absolute; inset: 6%; border: 2px solid rgb(255 255 255 / .7); border-radius: 4px; background: radial-gradient(circle at 50% 50%, transparent 11%, rgb(255 255 255 / .7) 11.5%, transparent 12.5%), linear-gradient(90deg, transparent calc(50% - 1px), rgb(255 255 255 / .7) calc(50% - 1px), rgb(255 255 255 / .7) calc(50% + 1px), transparent calc(50% + 1px)); }
.lt-q-geral { background: linear-gradient(135deg, #1e293b, #0f172a); }
.lt-placar { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; background: rgb(0 0 0 / .55); backdrop-filter: blur(4px); border-radius: 14px; padding: 10px 16px; color: #fff; }
.lt-placar > div { display: flex; align-items: center; gap: 10px; }
.lt-placar b { font-size: 12px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-placar strong { font-size: 26px; font-weight: 900; }
.lt-placar em { font-style: normal; color: rgb(255 255 255 / .6); }
@media (prefers-reduced-motion: reduce) { .lt *, .lt-live::before { animation: none !important; transition: none !important; } }
/* placar da quadra nunca passa da largura (nomes longos encolhem com reticências) */
.lt-placar { max-width: 94%; gap: 10px; padding: 9px 12px; }
.lt-placar > div { min-width: 0; gap: 8px; }
.lt-placar b { min-width: 0; max-width: 30vw; }
@media (max-width: 520px) { .lt-placar strong { font-size: 22px; } .lt-placar b { font-size: 11px; max-width: 24vw; } }
/* computador: campinho compacto à esquerda, pressão e números à direita (não pode tomar a tela) */
@media (min-width: 768px) {
  .lt { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: start; }
  .lt-top { grid-column: 1 / -1; }
  .lt-campo { grid-column: 1; grid-row: 2 / 4; }
  .lt-pressao { grid-column: 2; grid-row: 2; align-self: end; grid-template-columns: 1fr; gap: 6px; }
  .lt-chips { grid-column: 2; grid-row: 3; grid-template-columns: repeat(2, 1fr); align-self: start; }
  .lt-chips span { padding: 8px 10px; font-size: 11px; }
  .lt-quadra { grid-column: 1 / -1; max-height: 170px; aspect-ratio: auto; height: 170px; }
}
/* celular: números numa linha só (o bloco não pode passar da metade da tela) */
@media (max-width: 767px) {
  .lt { padding: 8px; gap: 7px; }
  .lt-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .lt-chips span { padding: 5px 5px; font-size: 9px; gap: 2px; }
  .lt-chips b { font-size: 11px; }
  .lt-pressao { font-size: 10px; }
}
.lt-chips em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lt-cs { display: none; }
@media (max-width: 767px) { .lt-cl { display: none; } .lt-cs { display: inline; } .lt-chips span { justify-content: space-between; padding: 6px 7px; font-size: 10px; } }

/* ===== topo da página do jogo: placar grande e nítido (estilo bet365) ===== */
.dt-head[data-v-f216093a] { align-items: center; padding: 22px 10px 20px; background: radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 18%, transparent), transparent 60%); border-radius: clamp(12px, .9vw, 18px) clamp(12px, .9vw, 18px) 0 0; }
.dt-tb[data-v-f216093a] { height: 72px; width: 72px; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45)); }
.dt-nm[data-v-f216093a] { font-size: 16px; }
.sc-oculto { display: none !important; }
.sc { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.sc b { display: inline-grid; place-items: center; min-width: 58px; height: 64px; padding: 0 10px; border-radius: 14px; background: var(--card-2, #1c1d24); border: 1px solid var(--line, rgb(255 255 255 / .08)); font-size: 40px; font-weight: 900; color: var(--txt, #fff); line-height: 1; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .25), 0 8px 20px -10px rgb(0 0 0 / .8); }
.sc i { font-style: normal; font-size: 30px; font-weight: 900; color: var(--txt-2, #aaa); }
.sc-clk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #ff5a5a; letter-spacing: .02em; white-space: nowrap; }
.sc-clk em { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: ltPisca 1.4s ease-out infinite; }
.sc-pre { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-pre span { font-size: 13px; font-weight: 700; color: var(--txt-2, #aaa); text-transform: capitalize; }
.sc-pre b { font-size: 30px; font-weight: 900; color: var(--txt, #fff); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@keyframes scMudou { 0% { scale: 1; background: var(--card-2, #1c1d24); } 30% { scale: 1.18; background: var(--acc, rgb(var(--primary-color))); } 100% { scale: 1; background: var(--card-2, #1c1d24); } }
.sc b.sc-mudou { animation: scMudou 1.2s cubic-bezier(.2, .75, .2, 1); }
@media (max-width: 767px) {
  .dt-head[data-v-f216093a] { padding: 16px 6px; }
  .dt-tb[data-v-f216093a] { height: 56px; width: 56px; }
  .dt-nm[data-v-f216093a] { font-size: 13.5px; }
  .sc { gap: 6px; } .sc b { min-width: 44px; height: 50px; font-size: 30px; border-radius: 11px; padding: 0 7px; } .sc i { font-size: 22px; }
  .sc-clk { font-size: 11.5px; } .sc-pre b { font-size: 24px; } .sc-pre span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sc b.sc-mudou, .sc-clk em { animation: none !important; } }

/* ===== botão do meio da barra do celular (Esportes ↔ Cassino): mesma animação nos dois =====
   anel que pulsa pra fora, brilho que passa pelo círculo e o ícone balançando de leve.
   Ícone usa rotate/scale (não translate) pra não brigar com o navPulo do toque. */
@keyframes centroAnel { 0% { opacity: .75; scale: 1; } 70%, 100% { opacity: 0; scale: 1.55; } }
@keyframes centroBrilho { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
@keyframes centroIcone { 0%, 100% { rotate: 0deg; scale: 1; } 20% { rotate: -10deg; scale: 1.08; } 40% { rotate: 8deg; scale: 1.04; } 60% { rotate: -4deg; scale: 1.02; } 75% { rotate: 0deg; scale: 1; } }
.vera-bottom-nav .vera-nav-center .vera-nav-center-icon[data-v-ae20f093] { position: relative; }
.vera-bottom-nav .vera-nav-center .vera-nav-center-icon[data-v-ae20f093]::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgb(var(--primary-color)); box-shadow: 0 0 12px rgb(var(--primary-color) / .55);
  animation: centroAnel 2.4s cubic-bezier(.2, .7, .3, 1) infinite;
}
.vera-bottom-nav .vera-nav-center .vera-nav-center-icon[data-v-ae20f093]::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .5) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat;
  animation: centroBrilho 3.6s ease-in-out infinite;
}
.vera-bottom-nav .vera-nav-center .vera-nav-center-icon > :is(svg, img) { position: relative; z-index: 1; animation: centroIcone 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
.vera-bottom-nav .vera-nav-center:active .vera-nav-center-icon > :is(svg, img) { animation: navPulo .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .vera-bottom-nav .vera-nav-center .vera-nav-center-icon[data-v-ae20f093]::before,
  .vera-bottom-nav .vera-nav-center .vera-nav-center-icon[data-v-ae20f093]::after,
  .vera-bottom-nav .vera-nav-center .vera-nav-center-icon > :is(svg, img) { animation: none !important; }
}