/* OddsIQ V2 · MARCA DA BANCA (30/10/2026, frente v2-marca-betshow) — folha de PRODUÇÃO (fora da cópia do protótipo).
   Tudo preso a html[data-marca] / html[data-marca-l~="<lugar>"] (que só o v2_marca.js põe, e só com V2_CFG.marca) ou a
   classes .marca-* que só existem com a marca: banca sem marca = nenhuma regra daqui casa.
   As CORES vêm da config (v2_marca.js põe as variáveis no <html>); aqui só o "onde". Odd/placar seguem amarelos e o
   cupom não muda (decisão do dono, PROPOSTA.md seção 5). Prefixo .marca- (o .bs- da v2.css já é da busca). */

/* ── topo: filete vermelho da faixa embaixo; ação em ouro (o verde/amarelo do topo são fixos na v2.css) ── */
html[data-marca] .tp{box-shadow:inset 0 -2px 0 var(--marca-vinho)}
html[data-marca] .tp-saldo{border-color:rgba(214,175,120,.6)}
html[data-marca] .tp-dep{background:var(--marca-ouro);color:var(--marca-ouro-ink)}
html[data-marca] .tp-dep:hover{background:var(--marca-ouro2)}
html[data-marca] .tp-conta{box-shadow:inset 0 0 0 1.5px var(--marca-ouro);color:var(--marca-ouro)}
@media (min-width:901px){
  html[data-marca] .tp-areas a[aria-current="true"]::after{background:var(--marca-ouro)}
  html[data-marca] .tp-areas .novo{background:var(--marca-ouro);color:var(--marca-ouro-ink)}
}

/* ── a faixa da marca no canto superior esquerdo (exceção à regra "topo sem marca", só com a marca — dono 30/10) ── */
html[data-marca-l~="topo"] a.tp-marca{display:flex;align-items:center;min-width:0;border-radius:3px}
html[data-marca-l~="topo"] a.tp-marca img{display:block;width:100%;max-width:166px;height:auto}
@media (min-width:901px){html[data-marca-l~="topo"] a.tp-marca{width:176px}html[data-marca-l~="topo"] a.tp-marca img{max-width:176px}}
@media (max-width:520px){
  /* celular: em 390 px o Depositar fica só com o "+" (como a produção já faz até 374 px) e a faixa ganha ~100 px. O nome
     continua para o leitor de tela (texto escondido só da vista). O "Cadastre-se" do visitante e o Depositar sem o "+"
     ficam como estão. Aprovado pelo dono em 30/10 */
  html[data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 9px}
  html[data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca-l~="topo"] .tp-in{column-gap:6px}
}

/* ── lâmina da marca na home (1ª do carrossel): o mascote animado pousa no chão, sem caixa ── */
.fly.fly-marca .fimg{mix-blend-mode:normal}
.marca-masc{position:absolute;right:4%;bottom:26px;height:calc(100% - 34px);width:auto;max-width:48%;object-fit:contain;object-position:right bottom;z-index:-1;pointer-events:none;user-select:none}
.fly-marca .ft{max-width:15ch}
@media (min-width:901px){.marca-masc{right:9%;bottom:28px;height:calc(100% - 40px)}}   /* acima da linha dos pontinhos */

/* ── carregando: o mascote no lugar da rodinha (só o .carrega das telas; o "cotando" do cupom é <p> e não muda) ── */
html[data-marca-l~="carregando"] div.carrega{flex-direction:column;gap:6px}
html[data-marca-l~="carregando"] div.carrega::before{width:112px;height:95px;border:0;border-radius:0;animation:none;background:var(--marca-carrega) center/contain no-repeat}

/* ── abertura (1ª pintura): o mascote no chão enquanto a V2 lê o catálogo; some sozinha. ACIMA do véu do PIN
   (.v2p-veu 9000) e da conta (.v2c-veu 9100), que entram no DOM depois; abaixo da manutenção (.v2p-manut 9999) ── */
.marca-abre{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:var(--bg);transition:opacity .35s ease,visibility .35s}
.marca-abre img{width:min(300px,64vw);height:auto}
.marca-abre.fora{opacity:0;visibility:hidden;pointer-events:none}

/* ── entrada/criar conta (v2_conta.js) e tela do PIN do link (v2_producao.js): o mascote no alto ── */
/* 31/10 (r187): 180 px empurrava o formulário para fora do quadro no iPhone — o mascote fica pequeno e encolhe na tela baixa */
.v2c-marca-img,.marca-pin{display:block;width:128px;max-width:40%;height:auto;margin:-6px auto 8px}
@media (max-height:740px){.v2c-marca-img,.marca-pin{width:96px}}

@media (prefers-reduced-motion:reduce){
  .marca-abre{transition:none}
}

/* ══ APOSTADOR (02/11/2026, frente v2-marca-apostador) — o que a config (cores) não alcança. Tudo preso a
   html[data-marca="apostador"] (ou .marca-* dentro dele): a Betshow e as bancas sem marca não mudam. Valores do protótipo
   aprovado (_prototipo_apostador/v2/site/apostador.css, PROPOSTA.md §3-4): preto da Blaze, vermelho de ação, odds e
   placar brancos (vêm do --preco da config), topo de 02/11 sem sobreposição de 901 a 1279 px. ══ */
html[data-marca="apostador"] .tp-saldo{border-color:rgba(229,9,20,.65)}
html[data-marca="apostador"] .tp-conta{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
/* o topo é preto nos dois temas: a ação dele fica no vermelho forte também no claro (o --marca-ouro do claro é o #B8000B
   do papel) */
html[data-marca="apostador"] .tp-dep{background:#E50914;color:#fff}
html[data-marca="apostador"] .tp-dep:hover{background:#C70812}
@media (min-width:901px){
  html[data-marca="apostador"] .tp-areas a[aria-current="true"]::after{background:#E50914}
  html[data-marca="apostador"] .tp-areas .novo{background:#E50914;color:#fff}
}
html[data-marca="apostador"] .tk{--tk-preco:#FFFFFF}          /* placar do tracker (campo escuro nos dois temas); o cartão amarelo fica */
/* botões cheios no vermelho forte (o --acc #FF4040 fica para texto, ícone e filete; branco sobre ele = 3,6:1) —
   inclusive o "Entrar" da tela do PIN (.v2p-bt) e o "Jogar" do cassino (.v2c-jogar; revisão 02/11: ficava no #FF4040) */
html[data-marca="apostador"] .v2c-bt,html[data-marca="apostador"] .v2p-bt,html[data-marca="apostador"] .jca-add,html[data-marca="apostador"] .ap-pl.ganhou,html[data-marca="apostador"] .ap-ac.enc,html[data-marca="apostador"] .ct-ok,html[data-marca="apostador"] .v2c-jogar{background:var(--marca-ouro);color:#fff}
html[data-marca="apostador"] .fcta:hover,html[data-marca="apostador"] .v2c-bt:hover,html[data-marca="apostador"] .v2p-bt:hover{background:var(--marca-ouro2)}

/* topo: a assinatura "A + APOSTADOR" (1208×240) */
html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{flex:none;width:150px}
html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca img{max-width:188px}
@media (min-width:901px){
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{width:188px}
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca img{max-width:188px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas{justify-content:safe center;min-width:0}
}
/* computador estreito (901–1279 px): a marca (188) + as 5 áreas não cabiam e as áreas vazavam por cima da marca e da
   lupa — aperta a marca e as áreas; até 1099 px o Depositar fica só "+" e o saldo só com o valor (texto só fora da vista) */
@media (min-width:901px) and (max-width:1279px){
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-in{column-gap:10px}
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{width:150px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas{gap:0}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a{padding:0 10px;font-size:14px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1099px){
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-in{column-gap:8px}
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{width:132px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a{padding:0 8px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:8px;right:8px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-saldo small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 11px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:520px){   /* celular: a assinatura encolhe com a coluna e sempre deixa 8 px antes da lupa */
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{width:auto;max-width:130px}
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca img{width:calc(100% - 8px)}
}

/* lâmina da home: a logo (com a luz) à direita, centrada na altura, sem caixa */
html[data-marca="apostador"] .marca-masc{right:3%;top:50%;bottom:auto;transform:translateY(-56%);height:calc(100% - 80px);max-width:50%;object-position:right center}
html[data-marca="apostador"] .fly-marca .ft{max-width:13ch}
@media (min-width:901px){html[data-marca="apostador"] .marca-masc{right:10%;height:calc(100% - 70px);transform:translateY(-54%)}}

/* carregando: o "A" (img.carrega da config) respirando no lugar da rodinha — pelo tk-pulso da v2_tracker.css (sempre
   carregada; .55↔1): um @keyframes aqui teria quadros (from/to) fora da cerca "toda regra presa à marca" */
html[data-marca="apostador"][data-marca-l~="carregando"] div.carrega::before{width:58px;height:51px;animation:tk-pulso 2.2s ease-in-out infinite}

/* abertura, entrada e PIN: a logo que se escreve */
html[data-marca="apostador"] .marca-abre img{width:min(340px,70vw)}
html[data-marca="apostador"] .v2c-marca-img,html[data-marca="apostador"] .marca-pin{width:150px;max-width:44%}
@media (max-height:740px){html[data-marca="apostador"] .v2c-marca-img,html[data-marca="apostador"] .marca-pin{width:112px}}

@media (prefers-reduced-motion:reduce){
  html[data-marca="apostador"][data-marca-l~="carregando"] div.carrega::before{animation:none}
}