/* 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; }
}

/* ===== esportes: aba "Jogadores" + últimos jogos (sb.js drawPlayers / formaHtml, 14/10) ===== */
.sbst-obs { font-style: normal; color: var(--txt-2, #aaa); font-size: 11.5px; }
.sbst-sub { font-size: 13px; font-weight: 800; color: #22c55e; }
.sbst-vazio-p { padding: 16px 14px; }
.sbst-vazio-p b { margin-top: 0; font-size: 14px; }

.sbj-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card, rgb(255 255 255 / .04)); }
.sbj-seg button { border: 0; border-radius: 999px; padding: 9px 10px; background: transparent; color: var(--txt-2, #aaa); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .2s, color .2s; }
.sbj-seg button.on { background: var(--card-2, rgb(255 255 255 / .1)); color: var(--txt, #fff); box-shadow: inset 0 -2px 0 var(--acc, rgb(var(--primary-color))); }
.sbj-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sbj-form { font-size: 12px; font-weight: 800; color: var(--txt-2, #aaa); background: var(--card-2, rgb(255 255 255 / .06)); border-radius: 999px; padding: 3px 9px; }
.sbj-r { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line, rgb(255 255 255 / .06)); }
.sbj-hd + .sbj-r, .sbst-h + .sbj-r { border-top: 0; }
.sbj-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--txt, #fff); background: var(--card-2, rgb(255 255 255 / .08)); }
.sbj-nm { min-width: 0; font-size: 13px; color: var(--txt, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbj-pos { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--txt-2, #aaa); margin-left: 4px; letter-spacing: .03em; }
.sbj-tags { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.sbj-t { font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
.sbj-gol { font-size: 12px; }
.sbj-ass, .sbj-contra { color: var(--txt, #fff); background: var(--card-2, rgb(255 255 255 / .1)); border-radius: 5px; padding: 3px 5px; }
.sbj-contra { background: rgb(239 68 68 / .2); color: #fca5a5; }
.sbj-in { color: #22c55e; }
.sbj-out { color: #f87171; }
.sbj-r:not(.sbj-jogou) .sbj-n { opacity: .9; }
.sbj-nada { margin: 0; font-size: 12.5px; color: var(--txt-2, #aaa); }
.sbj .sbst-cartao { width: 9px; height: 12px; }
.sbst:not(.sbst-q) .sbj-r { animation: sbstEntra .35s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }

.sbf { display: grid; gap: 14px; }
.sbf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sbf-nm { font-size: 13px; color: var(--txt, #fff); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbf-bolas { display: inline-flex; gap: 4px; flex: none; }
.sbf-b { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: #6b7280; }
.sbf-b.sbf-V, .sbf-pl.sbf-V { background: #16a34a; }
.sbf-b.sbf-D, .sbf-pl.sbf-D { background: #dc2626; }
.sbf-b.sbf-E, .sbf-pl.sbf-E { background: #6b7280; }
.sbf-lista { display: grid; }
.sbf-j { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line, rgb(255 255 255 / .06)); font-size: 12.5px; }
.sbf-dt { color: var(--txt-2, #aaa); font-size: 11.5px; }
.sbf-adv { color: var(--txt, #fff); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbf-pl { font-size: 12px; font-weight: 800; color: #fff; border-radius: 6px; padding: 3px 7px; min-width: 38px; text-align: center; }
.sbf + .sbf, .sbf-t + .sbf-t { padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .sbj-r { animation: none !important; } }
/* lance a lance: nome + observação podem quebrar linha no celular (antes cortava "assist. Fa…") */
.sbst-ev span:last-child { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.35; }
.sbst-obs { display: block; }

/* ===== aba Jogadores: apostas em jogadores (sb.js apostasJogador, 14/10) ===== */
.sbp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 10px; padding: 0 2px 2px; }
.sbp-chips::-webkit-scrollbar { display: none; }
.sbp-chips button { flex: none; border: 1px solid var(--line, rgb(255 255 255 / .1)); background: transparent; color: var(--txt-2, #aaa); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.sbp-chips button.on { background: var(--acc, rgb(var(--primary-color))); border-color: transparent; color: #fff; }
.sbp-r { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line, rgb(255 255 255 / .06)); }
.sbp-chips + .sbp-r { border-top: 0; }
.sbp-nm { min-width: 0; font-size: 13px; color: var(--txt, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbp-ls { display: inline-flex; gap: 5px; }
.sbp .dodd.sbp-odd { min-width: 62px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sbp-rl .dodd.sbp-odd { min-width: 0; padding: 0 8px; }
.sbp-rl .dodd.sbp-odd .dk { font-size: 11px; opacity: .75; }
.sbp-regra { margin: 10px 0 0; font-size: 11px; color: var(--txt-2, #aaa); }
.sbst:not(.sbst-q) .sbp-r { animation: sbstEntra .35s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
@media (max-width: 380px) { .sbp-rl { grid-template-columns: 1fr; gap: 6px; } .sbp-ls { justify-content: flex-end; } }
/* a faixa de chips rolável alargava a coluna da grade e empurrava as odds para fora da tela no celular */
.sbst { grid-template-columns: minmax(0, 1fr); }
.sbst > *, .sbp, .sbp-r { min-width: 0; }

/* ===== esportes: "Criar Aposta" (sb.js drawBuilder/builderBar, 14/10) ===== */
.cab { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
.cab > * { min-width: 0; }
.cab-intro { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: clamp(12px, .9vw, 18px);
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 28%, transparent), color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 35%, transparent); }
.cab-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--acc, rgb(var(--primary-color))); box-shadow: 0 6px 18px -6px var(--acc, rgb(var(--primary-color))); }
.cab-intro b { display: block; font-size: 15px; color: var(--txt, #fff); }
.cab-intro p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--txt-2, #bbb); }
.cab-sec { background: var(--card, rgb(255 255 255 / .04)); border-radius: clamp(12px, .9vw, 18px); padding: 13px clamp(12px, 1vw, 18px) 14px; }
.cab-sec h3 { font-size: 13px; font-weight: 800; color: var(--txt, #fff); margin: 0 0 10px; }
.cab-g { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
.cab-g.cab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab-ou { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.cab-ln { font-size: 12px; font-weight: 800; color: var(--txt-2, #aaa); text-align: center; }
.cab-o { position: relative; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 11px; border-radius: 10px;
  border: 1px solid transparent; background: var(--card-2, rgb(255 255 255 / .07)); color: var(--txt, #fff); font: inherit; cursor: pointer; transition: background .18s, border-color .18s, transform .12s; }
.cab-o span { font-size: 12px; color: var(--txt-2, #bbb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-o b { font-size: 13.5px; font-weight: 800; }
.cab-o:hover { background: color-mix(in srgb, #fff 12%, var(--card, #15161f)); }
.cab-o:active { transform: scale(.97); }
.cab-o.on { background: color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 22%, transparent); border-color: var(--acc, rgb(var(--primary-color))); }
.cab-o.on span { color: var(--txt, #fff); }
.cab-o.on::after { content: "✓"; position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; background: var(--acc, rgb(var(--primary-color))); }
.cab-o:disabled { opacity: .35; cursor: default; }
.cab-pr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line, rgb(255 255 255 / .06)); }
.cab-chips + .cab-pr { border-top: 0; }
.cab-pr > span:first-child { font-size: 13px; color: var(--txt, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-pls { display: inline-flex; gap: 5px; }
.cab-o.cab-pod { min-height: 36px; min-width: 58px; justify-content: center; }
.cab-o.cab-pod i { font-style: normal; font-size: 11px; color: var(--txt-2, #aaa); }
.cab .sbj-seg { margin-bottom: 10px; }
.cab:not(.cab-q) .cab-sec { animation: sbstEntra .35s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }

/* barra fixa embaixo: resumo, odd combinada e botão */
.cab-bar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30; margin-top: 12px; padding: 10px 12px 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--card-2, #1c1d29) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 45%, transparent); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7); animation: cabSobe .3s cubic-bezier(.2, .75, .2, 1); }
@media (min-width: 1024px) { .cab-bar { bottom: 14px; } }
@keyframes cabSobe { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.cab-bar-vazia { border-style: dashed; border-color: var(--line, rgb(255 255 255 / .15)); text-align: center; font-size: 12.5px; color: var(--txt-2, #aaa); padding: 13px; box-shadow: none; }
.cab-bar-top { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.cab-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--acc, rgb(var(--primary-color))); }
.cab-tt b { display: block; font-size: 14px; color: var(--txt, #fff); }
.cab-tt em { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-2, #aaa); }
.cab-odd { font-size: 20px; font-weight: 900; color: var(--txt, #fff); min-width: 54px; text-align: right; }
.cab-chev { color: var(--txt-2, #aaa); font-size: 12px; }
.cab-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .2); border-top-color: var(--acc, rgb(var(--primary-color))); animation: cabGira .7s linear infinite; vertical-align: middle; }
@keyframes cabGira { to { transform: rotate(360deg); } }
.cab-legs { margin-top: 10px; display: grid; gap: 2px; max-height: 38vh; overflow-y: auto; }
.cab-leg { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--line, rgb(255 255 255 / .07)); }
.cab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc, rgb(var(--primary-color))); justify-self: center; }
.cab-leg b { display: block; font-size: 13px; color: var(--txt, #fff); }
.cab-leg em { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-2, #aaa); }
.cab-leg button { border: 0; background: var(--card, rgb(255 255 255 / .06)); color: var(--txt-2, #aaa); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.cab-msg { margin: 8px 0 0; font-size: 12px; color: var(--txt-2, #aaa); }
.cab-msg.erro { color: #fca5a5; }
.cab-acts { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 10px; }
.cab-limpa { border: 1px solid var(--line, rgb(255 255 255 / .15)); background: transparent; color: var(--txt-2, #bbb); border-radius: 12px; padding: 0 14px; height: 44px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cab-add { border: 0; border-radius: 12px; height: 44px; font: inherit; font-size: 14px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(90deg, var(--acc, rgb(var(--primary-color))), var(--acc-2, rgb(var(--primary-color)))); box-shadow: 0 8px 20px -8px var(--acc, rgb(var(--primary-color))); transition: opacity .2s, transform .12s; }
.cab-add:active { transform: scale(.98); }
.cab-add:disabled { opacity: .4; cursor: default; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cab-sec, .cab-bar { animation: none !important; } .cab-spin { animation-duration: 2s; } }
/* barra do Criar Aposta fixa na tela (#cabDock no body): o sticky não prendia porque um pai corta o overflow */
#cabDock { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); pointer-events: none; }
#cabDock .cab-bar { position: static; margin: 0; pointer-events: auto; max-width: 560px; margin-inline: auto; }
@media (min-width: 1024px) { #cabDock { bottom: 16px; } }
.cab { padding-bottom: 170px; }
/* banners leves (14/10): a imagem do carrossel do celular agora fica dentro de <picture> (WebP por tamanho de tela) */
.embla__link[data-v-f200d80d] > picture { display: block; width: 100%; height: 100%; }

/* 14/10 Criar Aposta: opção que não combina ou já está incluída fica apagada e não seleciona; a que troca ganha um sinal discreto */
.cab-o[data-cbx]{opacity:.32;cursor:not-allowed;filter:grayscale(.6)}
.cab-o[data-cbx] b{text-decoration:line-through;text-decoration-thickness:1px}
.cab-o[data-cbx]:hover,.cab-o[data-cbx]:active{transform:none!important;background:inherit}
.cab-o[data-cbtroca]:after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:rgb(var(--primary-color,210 13 13)/.85)}
/* cupom: aviso de seleções do mesmo jogo na múltipla */
.bs-mesmo{background:#3a2a09;border:1px solid #8a6d1a;border-radius:5px;color:#facc15;font-size:10px;font-weight:800;margin-left:6px;padding:1px 6px;text-transform:uppercase;white-space:nowrap}
.bs-aviso{background:#2a2209;border:1px solid #8a6d1a;border-radius:8px;color:#fde68a;font-size:12px;line-height:1.45;margin:8px 0;padding:8px 10px}

/* 14/10 app/celular: botão do meio da barra de baixo. O item era 10 px mais alto que a barra e o nome ("Cassino"/"Esportes")
   ficava 14 px mais baixo que os outros e cortado na borda. Sobe o item para o nome alinhar com os vizinhos.
   (A setinha da barra de cima dos Esportes é da outra sessão, em rails.js/brava.css: o dono quer setas em todas as faixas.) */
.vera-bottom-nav.bn-center-outline .vera-nav-center[data-v-ae20f093] { margin-top: -28px; }

/* 14/10 "ainda dá pra ver algo mínimo" embaixo da barra de baixo (iPhone, Safari com a barra flutuante).
   A emenda entre a nossa barra e a área que o Safari pinta embaixo dela caía em fração de pixel e sobrava um filete.
   (1) a barra avança 2 px além da borda de baixo (a emenda fica coberta por ela mesma);
   (2) deixa de ser desenhada numa camada à parte (backface-visibility), que arredondava a borda diferente do resto da página;
   (3) uma sombra sólida da mesma cor pinta também para baixo, caso o Safari mostre algo abaixo da tela do site.
   O conteúdo da barra (ícones e nomes) fica exatamente no mesmo lugar: a altura e o espaço de baixo crescem os mesmos 2 px. */
html.bra-scrollbox .vera-bottom-nav[data-v-ae20f093]:not(.bn-floating):not(.bn-dock):not(.bn-island) {
  bottom: -2px;
  height: calc(66px + env(safe-area-inset-bottom));
  padding-bottom: calc(2px + env(safe-area-inset-bottom));
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  box-shadow: 0 -10px 24px -16px #000000b3, 0 48px 0 0 var(--c-bottomnav-bg, #161829) !important;
}

/* topo logado (15/10): saldo e DEPOSITAR deixam de dividir a mesma caixa. Saldo vira texto limpo
   ("Saldo" em cima, valor embaixo, botãozinho de atualizar ao lado) e o botão fica sozinho, texto branco. */
.account-actions[data-account-design=wallet] .account-wallet[data-v-e182f4df] { background: none; padding: 0; gap: 10px; }
.account-actions[data-account-design=wallet] .account-balance[data-v-e182f4df] { flex-direction: row-reverse; gap: 6px; padding: 0 2px; }
.account-actions[data-account-design=wallet] .account-refresh svg { width: 14px; height: 14px; opacity: .55; }
.account-actions[data-account-design=wallet] .account-balance-link::before { content: "Saldo"; font-size: 10px; font-weight: 600; line-height: 1.1; opacity: .6; }
.account-actions[data-account-design=wallet] .account-balance-link:has(.account-balance-bonus:not([hidden]))::before { display: none; }
.account-actions[data-account-design=wallet] .account-deposit[data-v-e182f4df] { color: #fff; }
@media (max-width: 380px) {
  .account-actions[data-account-design=wallet] .account-refresh { display: none; }
  .account-actions[data-account-design=wallet] .account-balance-value[data-v-e182f4df] { max-width: 92px; }
}
/* 17/10 v5 (dono: "no padrão do Entrar/Cadastrar"): logado, no celular, saldo e DEPOSITAR viram o MESMO par do deslogado —
   saldo no formato do ENTRAR (claro, inclinado) e DEPOSITAR no formato do CADASTRAR (vermelho, inclinado). Mesma altura (32),
   canto, inclinação, letra (11px 800) e espaço entre eles (8px). Sem "Saldo" escrito e sem o atualizar. */
@media (max-width: 480px) {
  .vera-header .vera-logo { margin-right: 20px; }
  .vera-header .account-actions[data-account-design=wallet][data-v-e182f4df] { gap: 6px; }
  .vera-header .account-actions[data-account-design=wallet] .account-wallet[data-v-e182f4df] { gap: 9px; background: none; padding: 0; box-shadow: none; }
  .vera-header .account-actions[data-account-design=wallet] .account-refresh,
  .vera-header .account-actions[data-account-design=wallet] .account-balance-link::before { display: none; }
  /* saldo = ENTRAR */
  .vera-header .account-actions[data-account-design=wallet] .account-balance[data-v-e182f4df] {
    position: relative; isolation: isolate; background: none; box-shadow: none; height: 32px; padding: 0 9px; margin: 0; gap: 0; border-radius: var(--border-radius, 8px);
  }
  .vera-header .account-actions[data-account-design=wallet] .account-balance[data-v-e182f4df]::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: skew(-20deg);
    background: rgb(var(--text-color) / .08); box-shadow: inset 0 0 0 1px rgb(var(--text-color) / .1);   /* 17/10: escuro, sem o branco do ENTRAR */
  }
  .vera-header:not(.hdr-btn--skew) .account-actions[data-account-design=wallet] .account-balance[data-v-e182f4df]::before { transform: none; }
  .vera-header .account-actions[data-account-design=wallet] .account-balance-link { color: rgb(var(--text-color)); line-height: 1.05; align-items: center; }
  .vera-header .account-actions[data-account-design=wallet] .account-balance-value { font-size: 10.5px; font-weight: 800; letter-spacing: 0; color: inherit; max-width: 96px; }
  .vera-header .account-actions[data-account-design=wallet] .account-balance-bonus { font-size: 8.5px; font-weight: 700; color: rgb(var(--text-color) / .55); margin-top: 1px; }
  .vera-header .account-actions[data-account-design=wallet] .account-balance-bonus.em-uso { color: #f5c24a; }
  /* DEPOSITAR = CADASTRAR */
  .vera-header .account-actions[data-account-design=wallet] .account-deposit[data-v-e182f4df] {
    height: 32px; padding: 0 9px; margin: 0 4px 0 0; border-radius: var(--border-radius, 8px); box-shadow: none;
    font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--cta-primary-text, #fff);
  }
  .vera-header.hdr-btn--skew .account-actions[data-account-design=wallet] .account-deposit[data-v-e182f4df]::before {
    content: ""; background-color: var(--cta-primary-bg, rgb(var(--primary-color))); background-image: linear-gradient(#ffffff1a, #00000038);
    border: 1px solid color-mix(in srgb, var(--cta-primary-bg, rgb(var(--primary-color))) 75%, #fff);
  }
  .vera-header .account-actions[data-account-design=wallet] .account-profile[data-v-e182f4df] { width: 30px; height: 30px; }
  .vera-header .account-actions[data-account-design=wallet] .account-profile img { width: 30px !important; height: 30px !important; }
}
@media (max-width: 380px) {   /* telas estreitas: a inclinação já abre respiro, a logo fica com o resto */
  .vera-header .vera-logo { margin-right: 13px; }
  .vera-header .account-actions[data-account-design=wallet][data-v-e182f4df] { gap: 4px; }
  .vera-header .account-actions[data-account-design=wallet] .account-wallet[data-v-e182f4df] { gap: 8px; }
  .vera-header .account-actions[data-account-design=wallet] .account-profile[data-v-e182f4df] { width: 28px; height: 28px; }
  .vera-header .account-actions[data-account-design=wallet] .account-profile img { width: 28px !important; height: 28px !important; }
}
}
}

/* topo logado (15/10, dono): a caixa volta, mas SÓ em volta do saldo. DEPOSITAR fica fora, sozinho. */
.account-actions[data-account-design=wallet] .account-balance[data-v-e182f4df] { background: var(--account-surface); border-radius: 12px; padding: 0 10px; }
@media (max-width: 639px) {
  .account-actions[data-account-design=wallet] .account-balance[data-v-e182f4df] { border-radius: 10px; padding: 0 7px; }
}

/* 15/10: Missões, Torneios (painel novo) e Histórico de transações abriam "secos"; mesma entrada das outras abas da conta */
:is(.mc, .jt-card, .list-card .row, .filters-card, .mc-regras, .jt-regras-box) { animation: contaEntra .45s cubic-bezier(.2, .75, .2, 1) backwards; }
:is(.mc, .jt-card, .list-card .row):nth-child(2) { animation-delay: .05s; }
:is(.mc, .jt-card, .list-card .row):nth-child(3) { animation-delay: .1s; }
:is(.mc, .jt-card, .list-card .row):nth-child(4) { animation-delay: .15s; }
:is(.mc, .jt-card, .list-card .row):nth-child(n+5):nth-child(-n+12) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { :is(.mc, .jt-card, .list-card .row, .filters-card, .mc-regras, .jt-regras-box) { animation: none; } }
/* 15/10 Criar Aposta: abas de categoria (Principais, Resultado, Gols, 1º/2º Tempo, Tempos, Jogadores) */
.cab-cats { margin: 2px -2px 12px; }
.cab-cats .cab-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; padding: 0 4px; border-radius: 9px; background: rgb(255 255 255 / .22); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; }
.cab-cats button:not(.on) .cab-n { background: var(--acc, rgb(var(--primary-color))); }

/* 16/10 confirmação da aposta (sb.js betOk): check que se desenha + resumo; some sozinha em 5 s */
.bok { position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .55); animation: bokFundo .18s ease-out; }
.bok.sai { opacity: 0; transition: opacity .2s; }
.bok-box { width: 100%; max-width: 340px; padding: 22px 18px 16px; border-radius: 16px; background: var(--card, #17181c); border: 1px solid var(--line, hsla(0, 0%, 100%, .08)); color: var(--txt, #fff); text-align: center; box-shadow: 0 20px 60px rgb(0 0 0 / .5); animation: bokSobe .32s cubic-bezier(.2, 1.3, .4, 1); }
.bok-ck { width: 64px; height: 64px; display: block; margin: 0 auto 10px; }
.bok-ck circle { fill: none; stroke: #16a34a; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: bokRisca .45s ease-out .1s forwards; }
.bok-ck path { fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bokRisca .3s ease-out .5s forwards; }
.bok-t { display: block; font-size: 18px; font-weight: 800; }
.bok-s { display: block; margin: 3px 0 12px; font-size: 12.5px; color: var(--txt-3, #8b8d98); }
.bok-l { display: flex; justify-content: space-between; padding: 7px 2px; border-top: 1px solid var(--line, hsla(0, 0%, 100%, .08)); font-size: 13px; color: var(--txt-2, #b4b6c0); }
.bok-l b { color: var(--txt, #fff); }
.bok-l b.bok-g { color: #22c55e; }
.bok-a { display: flex; gap: 8px; margin-top: 12px; }
.bok-a button { flex: 1; height: 42px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.bok-sec { border: 1px solid var(--line, hsla(0, 0%, 100%, .15)); background: transparent; color: var(--txt, #fff); }
.bok-pri { border: 0; background: var(--acc, #d20d0d); color: #fff; }
@keyframes bokFundo { from { opacity: 0; } }
@keyframes bokSobe { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes bokRisca { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bok-box, .bok { animation: none; } .bok-ck circle, .bok-ck path { animation: none; stroke-dashoffset: 0; } }

/* 16/10 Minhas apostas: faixa "Aposta grátis" logo abaixo do cabeçalho do bilhete (ícone do dono, assets/brava/icones/freebet.png) */
.mbc-fb { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 7px 10px; border-radius: 8px; background: rgb(22 163 74 / .13); border: 1px solid rgb(22 163 74 / .3); color: #4ade80; font-size: 12px; }
.mbc-fb .fbx-ico { width: 22px; height: 22px; }
.mbc-fb b { font-weight: 800; letter-spacing: .3px; text-transform: uppercase; font-size: 11.5px; }
.mbc-fb span { margin-left: auto; color: var(--txt-2, #b4b6c0); font-size: 11.5px; }

/* 23/10 barra de baixo do celular — pedidos do dono:
   (1) "quando arrasto fica uma linha abaixo dela": a correção de 14/10 acima dependia de html.bra-scrollbox, classe que
       ninguém mais coloca, então estava desligada. Agora vale sempre: a barra avança 2 px além da borda e um bloco da
       mesma cor dela continua 160 px pra baixo, cobrindo o "puxa e solta" do iPhone e a barra do Safari subindo/descendo.
   (2) Esportes no meio: "não gostei da bolinha" (o contorno azul com anel pulsando) mas "deveria ser destaque".
       Vira botão cheio em azul, saltado acima da barra, com um aro da cor da barra recortando e brilho azul embaixo.
       Sem o anel que pulsava pra fora; ficam só o brilho que passa e o balanço do ícone. */
.vera-bottom-nav[data-v-ae20f093]:not(.bn-floating):not(.bn-dock):not(.bn-island) {
  bottom: -2px;
  height: calc(66px + env(safe-area-inset-bottom));
  padding-bottom: calc(2px + env(safe-area-inset-bottom));
}
.vera-bottom-nav[data-v-ae20f093]:not(.bn-floating):not(.bn-dock):not(.bn-island)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 160px; pointer-events: none;
  background: var(--c-bottomnav-bg, rgb(var(--surface-color)));
}
.vera-bottom-nav.bn-center-outline .vera-nav-center[data-v-ae20f093] { margin-top: 0; top: -7px; }
.vera-bottom-nav.bn-center-outline .vera-nav-center-icon[data-v-ae20f093] {
  width: 56px; height: 56px; margin: -22px 0 3px; border: 0; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #5c88ff 0%, #2a63ff 45%, #1243c9 100%);
  box-shadow: 0 0 0 4px var(--c-bottomnav-bg, rgb(var(--surface-color))), 0 8px 20px -4px rgb(22 82 240 / .75), inset 0 1px 0 rgb(255 255 255 / .35);
}
.vera-bottom-nav.bn-center-outline .vera-nav-center.active .vera-nav-center-icon[data-v-ae20f093] {
  box-shadow: 0 0 0 4px var(--c-bottomnav-bg, rgb(var(--surface-color))), 0 0 22px 2px rgb(22 82 240 / .8), inset 0 1px 0 rgb(255 255 255 / .35);
  filter: none;
}
.vera-bottom-nav.bn-center-outline .vera-nav-center .vera-nav-center-icon[data-v-ae20f093]::before { display: none; }
.vera-bottom-nav.bn-center-outline .nav-icon-center[data-v-ae20f093] { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }
.vera-bottom-nav.bn-center-outline .vera-nav-center > span[data-v-ae20f093] { color: #fff; }
/* 23/10 opção 1 escolhida pra ver: em vez do círculo (padrão de toda casa), quadrado arredondado tipo ícone de app,
   inclinado -8° na mesma direção do campo 3D. Ao tocar ele endireita com mola; ao voltar, inclina de novo. */
.vera-bottom-nav.bn-center-outline .vera-nav-center-icon[data-v-ae20f093] {
  width: 54px; height: 54px; border-radius: 17px; rotate: -8deg;
  transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1);
}
.vera-bottom-nav.bn-center-outline .vera-nav-center:active .vera-nav-center-icon[data-v-ae20f093] { rotate: 0deg; scale: .94; }
.vera-bottom-nav.bn-center-outline .vera-nav-center.active .vera-nav-center-icon[data-v-ae20f093] { rotate: -4deg; }
@media (prefers-reduced-motion: reduce) {
  .vera-bottom-nav.bn-center-outline .vera-nav-center-icon[data-v-ae20f093] { transition: none; }
}
/* 23/10 "garanta que ele não vai sobrepor nada" — auditoria em 320/360/375/390/414/430 px em home, esportes, cassino,
   slots, ao vivo e prêmios. O que apareceu e como ficou:
   - a ponta inclinada da caixa chegava a 1,5 px do nome "Esportes": caixa sobe mais 3 px (nome continua alinhado);
   - em 320–360 px a caixa (com o aro) encostava no nome "Recompensas": caixa menor nessas telas;
   - com o Cupom aberto (painel colado em cima da barra, z 9160) a caixa ficava cortada ao meio atrás dele: enquanto o
     cupom está aberto ela afunda pra dentro da barra, reta, e volta com mola quando fecha;
   - Criar Aposta (#cabDock), aviso amarelo (.ecf) e "instale o app" (.install-banner) ficam centralizados logo acima
     da barra (72–78 px) e cobririam a ponta da caixa: sobem pra 100 px, acima dela. */
.vera-bottom-nav.bn-center-outline .vera-nav-center[data-v-ae20f093] { top: -8px; }
.vera-bottom-nav.bn-center-outline .vera-nav-center-icon[data-v-ae20f093] {
  margin: -22px 0 7px;
  transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1),
              width .35s cubic-bezier(.34, 1.56, .64, 1), height .35s cubic-bezier(.34, 1.56, .64, 1), margin .35s cubic-bezier(.34, 1.56, .64, 1);
}
@media (max-width: 360px) {
  .vera-bottom-nav.bn-center-outline .vera-nav-center-icon[data-v-ae20f093] { width: 46px; height: 46px; border-radius: 14px; margin: -14px 0 7px; }
  .vera-bottom-nav.bn-center-outline .nav-icon-center[data-v-ae20f093] { width: 29px; height: 29px; }
}
html:has(.cup-panel.open) .vera-bottom-nav.bn-center-outline .vera-nav-center-icon[data-v-ae20f093] {
  width: 30px; height: 30px; margin: 0 0 3px; rotate: 0deg; border-radius: 9px; box-shadow: none;
}
html:has(.cup-panel.open) .vera-bottom-nav.bn-center-outline .vera-nav-center[data-v-ae20f093] { top: -5px; }
html:has(.cup-panel.open) .vera-bottom-nav.bn-center-outline .nav-icon-center[data-v-ae20f093] { width: 24px; height: 24px; animation: none; }
@media (max-width: 767px) {
  #cabDock { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .ecf[data-v-68806745] { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .install-banner[data-v-955153f1] { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* 23/10: botão "atualizar saldo" do topo (PC) — ícone de recarregar visível, área de clique decente, gira enquanto busca */
.account-actions[data-account-design=wallet] .account-refresh[data-v-e182f4df]{width:26px!important;height:26px!important;border-radius:8px;flex:none;transition:background .15s,color .15s}
.account-actions[data-account-design=wallet] .account-refresh svg{width:15px!important;height:15px!important;opacity:.75;transition:opacity .15s,color .2s}
.account-actions[data-account-design=wallet] .account-refresh:hover svg{opacity:1}
.account-refresh.spinning svg{animation:account-refresh-e182f4df .7s linear infinite;opacity:1}
.account-refresh.ok{color:#22c55e!important}
.account-refresh.ok svg{opacity:1}

/* 23/10: banners novos do login/cadastro (1400x~590, ~2.37:1) — imagem no formato deles pra não cortar o texto da direita
   (a caixa .auth-banner segue encolhendo em tela baixa, regra do layout.php) */
#braAuth .auth-banner img{aspect-ratio:2.37/1!important;object-position:center}