/*
 * Exchange do FIFA 24h (07/10/2026): a tela aprovada no quadro de desenho em 06/10 — no celular a direção B (dois
 * preços por seleção: "A favor" e "Contra"), no computador a direção C (um mercado em destaque e o bilhete na coluna
 * da direita; o destaque era o Próximo gol, que saiu em 17/10/2026, e hoje é a linha principal do Total). Cores e medidas são as das pranchas (fundo #0e1013, cartões #1b1f24/#14171b, verde #00ff88, o rosa do
 * Contra). Quem desenha o miolo é o public/js/novo/exchange-pagina.js; a conta fica no exchange-logica.js.
 */
/* As cores valem na página e nas peças que ficam fora dela (o aviso fica no body). */
.ex-pagina, .ex-aviso, .ex-ligacao {
    --ex-fundo: #0e1013; --ex-cartao: #1b1f24; --ex-cartao-2: #14171b; --ex-celula: #1a1d21; --ex-painel: #14181c;
    --ex-linha: #2a3037; --ex-linha-2: #3a424b; --ex-linha-celula: #2d3238; --ex-linha-painel: #1f3d31;
    --ex-texto: #ffffff; --ex-texto-2: #e6e9ec; --ex-texto-3: #b9bec5; --ex-texto-4: #8b929b; --ex-texto-5: #737a83;
    --ex-verde: #00ff88; --ex-verde-2: #2ee59d; --ex-verde-claro: #9cf0c5; --ex-verde-escuro: #0f2a1f; --ex-verde-borda: #1d5a3f;
    --ex-contra: #ffc2d7; --ex-contra-borda: rgba(247, 131, 172, .55); --ex-contra-fundo: rgba(247, 131, 172, .14); --ex-contra-cheio: #4a1f30;
    --ex-amarelo: #ffd43b; --ex-ambar: #ffc266; --ex-vermelho: #ff5a5a;
    --ex-sombra: 0 12px 30px rgba(0, 0, 0, .6);
    color: var(--ex-texto); font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.4;
}
.ex-pagina { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ex-pagina a { color: inherit; text-decoration: none; }
.ex-pagina button { font-family: inherit; cursor: pointer; }
.ex-pagina button:disabled { cursor: default; }
.ex-pagina input { font-family: inherit; }
.ex-pagina [hidden] { display: none !important; }
.ex-pagina :focus-visible { outline: 2px solid var(--ex-verde); outline-offset: 2px; }
.ex-el { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-mu { color: var(--ex-texto-5); }

/* ------------------------------------------------------------------ avisos de estado da página */
.ex-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 24px; text-align: center;
    border-radius: 16px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); color: var(--ex-texto-3); }
.ex-vazio b { color: #fff; font-size: 17px; }
.ex-rodando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ex-linha); border-top-color: var(--ex-verde); animation: ex-gira .9s linear infinite; }
@keyframes ex-gira { to { transform: rotate(360deg); } }
.ex-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px;
    background: var(--ex-verde); color: var(--ex-fundo); font-size: 15px; font-weight: 800; white-space: nowrap; }
.ex-botao:disabled { opacity: .55; }
.ex-botao-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--ex-linha-2); background: transparent; color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.ex-ligacao { position: fixed; left: 50%; bottom: calc(var(--nv-baixo, 0px) + 12px); z-index: 1200; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px;
    background: #3b1d1d; border: 1px solid #7a3030; color: #ffb3b3; font-size: 12.5px; font-weight: 700; box-shadow: var(--ex-sombra); }

/* ------------------------------------------------------------------ o caminho e o saldo de teste */
.ex-caminho { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.ex-caminho a { font-size: 17px; font-weight: 600; color: var(--ex-texto-3); }
.ex-caminho a:hover { color: #fff; }
.ex-caminho .ex-seta { color: var(--ex-texto-5); }
.ex-caminho b { font-size: 17px; font-weight: 700; }
.ex-minutos { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; border: 1px solid #16804a; color: var(--ex-verde-claro); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
/* O atalho e o saldo à direita: podem quebrar linha (no celular o saldo com o travado não cabe ao lado do atalho; uma
   linha mais larga que a tela faria o navegador do celular afastar o zoom e a folha do bilhete sumir). */
.ex-direita-caminho { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.ex-atalho { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ex-atalho img { width: 20px; height: 20px; }
.ex-atalho:hover { border-color: var(--ex-linha-2); }
.ex-saldo { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); white-space: nowrap; }
.ex-saldo small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ex-texto-4); }
.ex-saldo b { font-size: 14px; font-weight: 800; }
.ex-saldo .ex-travado { font-size: 11px; color: var(--ex-texto-5); }
.ex-saldo .ex-bloqueada { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ex-vermelho); }

/* ------------------------------------------------------------------ a lista dos jogos ao vivo
   A linguagem da lista "Ao vivo agora" do FIFA 24h (public/css/novo/esportes.css, .ne-liga/.ne-linha), com o que é
   da Exchange: células com o melhor preço a favor e "+N mercados". Pedido do dono em 07/10/2026. */
.ex-vivo-cartao { border-radius: 14px; background: var(--ex-cartao); border: 1px solid var(--ex-linha); overflow: hidden; }
.ex-vivo-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 50px; padding: 8px 14px; }
.ex-vivo-cab > b { font-size: 17px; font-weight: 700; }
.ex-vivo-cab > span { font-size: 13px; color: var(--ex-texto-4); }
/* O volume: a soma do que já casou nos jogos abertos e a ordem da lista (por liga ou do mais apostado ao menos). */
.ex-vivo-total { font-size: 12.5px; color: var(--ex-texto-4); white-space: nowrap; }
.ex-vivo-total b { font-size: 13px; font-weight: 800; color: var(--ex-verde-claro); font-variant-numeric: tabular-nums; }
.ex-ordem { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ex-fundo); border: 1px solid var(--ex-linha); }
.ex-ordem button { border: 0; background: transparent; color: var(--ex-texto-3); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.ex-ordem button[aria-pressed="true"] { color: #fff; background: #113826; }
.ex-liga, .ex-jogo-linha { display: grid; grid-template-columns: 68px minmax(0, 1fr) 40px 176px 132px 164px 92px; column-gap: 10px; align-items: center; padding: 0 12px; border-top: 1px solid var(--ex-linha); box-sizing: border-box; }
.ex-liga-plana { background: var(--ex-cartao-2); box-shadow: inset 3px 0 0 var(--ex-verde-2); }
.ex-volume { min-width: 0; display: grid; gap: 4px; align-content: center; }
.ex-vol-topo { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.ex-vol-topo b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-vol-topo small { font-size: 10.5px; font-weight: 600; color: var(--ex-texto-4); }
.ex-vol-topo .ex-sem-volume { font-size: 12.5px; font-weight: 600; color: var(--ex-texto-5); }
.ex-vol-barra { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ex-vol-barra i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #1c9a5e, var(--ex-verde-2)); }
.ex-volume-zero .ex-vol-barra { opacity: .5; }
.ex-vol-detalhe { min-width: 0; font-size: 10.5px; font-weight: 600; color: var(--ex-texto-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-mais-apostado { flex: none; display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 999px; background: var(--ex-verde-escuro); border: 1px solid var(--ex-verde-borda); color: var(--ex-verde-claro); font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ex-liga { min-height: 54px; background: linear-gradient(90deg, color-mix(in srgb, var(--cor, #737a83) 18%, var(--ex-cartao-2)) 0, var(--ex-cartao-2) 42%); box-shadow: inset 3px 0 0 var(--cor, #737a83); }
.ex-liga-nome { grid-column: 1 / span 3; display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.ex-liga-nome b { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.ex-liga-tempo { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; background: #262c33; color: #fff; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-liga-tempo svg { flex: none; color: var(--ex-texto-3); }
.ex-liga-tempo small { font-size: 10.5px; font-weight: 600; color: var(--ex-texto-3); }
.ex-liga-vivos { font-size: 12px; font-weight: 600; color: var(--ex-texto-4); white-space: nowrap; }
.ex-liga-col { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ex-texto-4); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-jogo-linha { min-height: 64px; padding-top: 7px; padding-bottom: 7px; color: #fff; }
.ex-jogo-linha:hover { background: rgba(255, 255, 255, .025); }
.ex-jogo-linha-parada .ex-odds { opacity: .45; }
.ex-quando { min-width: 0; display: grid; gap: 5px; align-content: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-quando b { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ex-quando small { font-size: 11px; font-weight: 700; color: var(--ex-texto-3); }
.ex-barrinha { display: block; width: 56px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ex-barrinha i { display: block; height: 100%; border-radius: 2px; background: #e63946; }
.ex-times { min-width: 0; display: grid; gap: 3px; }
.ex-times .ex-comp { display: block; font-size: 11px; font-weight: 600; color: var(--ex-texto-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-times > div { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; font-weight: 700; }
.ex-times > div b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-times .ex-gols { flex: none; min-width: 12px; color: var(--ex-amarelo); font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-times .ex-clube { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ex-texto-4); }
.ex-sinais { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; color: var(--ex-texto-4); }
.ex-sinais .ex-video-marca { display: inline-flex; color: var(--ex-verde-2); }
.ex-sinais .ex-minhas-marca { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ex-verde-escuro); border: 1px solid var(--ex-verde-borda); color: var(--ex-verde-claro); font-size: 10.5px; font-weight: 800; }
.ex-sinais .ex-pausado { display: none; }
.ex-odds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.ex-cel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 40px; padding: 0 4px; border-radius: 8px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha-celula); line-height: 1.15; min-width: 0; }
.ex-cel small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; font-weight: 700; color: var(--ex-texto-3); letter-spacing: -.01em; }
.ex-cel b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-cel-vazia b { color: var(--ex-texto-5); font-weight: 600; }
.ex-jogo-linha:hover .ex-cel { border-color: var(--ex-linha-2); }
.ex-mais { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--ex-texto-3); white-space: nowrap; }
.ex-mais i { font-style: normal; font-size: 16px; line-height: 1; color: var(--ex-texto-4); }
.ex-mais .ex-so-celular { display: none; }
/* Mercado parado: um ponto âmbar que pulsa e a razão em palavras ("Gol · reabre em 3 s"), sem pílula nem caixa alta
   (apontamento #10 do dono, 07/10/2026: a etiqueta amarela parecia genérica). O ponto é o sinal; o texto diz o porquê. */
.ex-pausado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ex-texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex-pausado::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e0a82e; box-shadow: 0 0 0 0 rgba(224, 168, 46, .5); animation: ex-pulso 2s ease-out infinite; }
@keyframes ex-pulso { 0% { box-shadow: 0 0 0 0 rgba(224, 168, 46, .5); } 70% { box-shadow: 0 0 0 7px rgba(224, 168, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 168, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .ex-pausado::before { animation: none; } }
.ex-pausado[data-fim="1"]::before { background: var(--ex-texto-5); animation: none; box-shadow: none; }

/* ------------------------------------------------------------------ o jogo: corpo em duas colunas no computador */
.ex-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 14px; align-items: start; }
.ex-principal { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ex-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.ex-painel { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: var(--ex-painel); border: 1px solid var(--ex-linha-painel); }

/* O placar: uma barra na linguagem da lista (o campinho saiu a pedido do dono em 07/10/2026). */
.ex-placar-barra { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 80px; padding: 10px 14px; border-radius: 12px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); box-sizing: border-box; }
.ex-placar-barra .ex-quando { font-size: 14px; }
.ex-placar-barra .ex-quando small { font-size: 12px; }
.ex-placar-barra .ex-barrinha { width: 70px; }
.ex-placar-times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; min-width: 0; }
.ex-placar-times .ex-time { min-width: 0; }
.ex-placar-times .ex-time b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-placar-times .ex-time span { display: block; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ex-texto-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-placar-times .ex-casa { text-align: right; }
.ex-placar-times .ex-numeros { font-size: 28px; font-weight: 800; line-height: 1; color: var(--ex-amarelo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-placar-direita { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.ex-video-botao { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--ex-linha-2); background: var(--ex-cartao); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ex-video-botao:hover, .ex-video-botao[aria-pressed="true"] { border-color: var(--ex-verde); color: var(--ex-verde-claro); }
.ex-video-botao svg { color: var(--ex-verde-2); }
/* O palco do vídeo (public/js/novo/video.js), 16:9 logo abaixo da barra do placar. */
.ex-palco { position: relative; aspect-ratio: 16 / 9; max-height: 440px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--ex-linha-2); }
.ex-palco iframe, .ex-palco video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.ex-palco .nv-video-aviso { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 14px; text-align: center; color: var(--ex-texto-3); font-size: 13px; }
.ex-palco .nv-video-aviso b { color: #fff; font-size: 15px; }
.ex-palco .nv-video-botao { height: 38px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ex-verde); color: var(--ex-fundo); font: inherit; font-weight: 800; cursor: pointer; }
.ex-palco .nv-video-gira { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .18); border-top-color: var(--ex-verde); animation: ex-gira .9s linear infinite; }
@keyframes ex-gira { to { transform: rotate(360deg); } }

/* A faixa "Aposte neste jogo" com o selo do Cashout. */
.ex-faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ex-faixa .ex-chamada { color: var(--ex-verde-2); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ex-selo { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); font-weight: 700; font-size: 13px; color: #fff; }
.ex-selo img { width: 20px; height: 20px; }

/* O destaque do computador: a linha principal do Total (ou o Resultado, com três preços). */
.ex-hero { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--ex-verde-escuro); border: 1px solid var(--ex-verde-borda); }
.ex-hero-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ex-hero-cab h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; }
.ex-chave { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ex-fundo); border: 1px solid var(--ex-linha); flex: none; }
.ex-chave button { border: 0; background: transparent; color: var(--ex-texto-3); border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: 13px; }
.ex-chave button[aria-pressed="true"] { color: #fff; background: #113826; }
.ex-chave button[data-lado="lay"][aria-pressed="true"] { background: var(--ex-contra-cheio); }
.ex-hero-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-hero-grade.ex-hero-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-hero-grade .ex-preco { min-height: 84px; padding: 12px 18px; justify-content: space-between; }
.ex-hero-grade .ex-preco .ex-nome { align-items: flex-start; }
.ex-hero-grade .ex-preco .ex-nome b { font-size: 18px; }
.ex-hero-grade .ex-preco .ex-odd { font-size: 30px; }

/* Botão de preço (computador e o destaque): nome à esquerda, cotação à direita. */
.ex-preco { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ex-linha-celula); background: var(--ex-celula); color: #fff; text-align: left; }
.ex-preco .ex-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-preco .ex-nome b { font-size: 14px; font-weight: 500; color: #b8bcc2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-preco .ex-nome small { font-size: 13px; color: #b8bcc2; }
.ex-preco .ex-odd { margin-left: auto; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-preco.ex-escolhida { border-color: var(--ex-verde); background: rgba(0, 255, 136, .12); }
.ex-preco:hover:not(:disabled) { border-color: #4a535d; }
.ex-preco .ex-sem { font-size: 13px; color: var(--ex-texto-5); font-weight: 600; }
.ex-preco.ex-off, .ex-celula.ex-off { opacity: .45; }
.ex-preco.ex-off .ex-odd, .ex-celula.ex-off { color: var(--ex-texto-3) !important; }

/* Os cartões dos mercados. */
.ex-mercados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-mercado { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ex-cartao); border: 1px solid var(--ex-linha); min-width: 0; }
.ex-mercado.ex-largo { grid-column: 1 / -1; }
.ex-mercado-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-mercado-cab h3 { margin: 0; font-size: 16px; font-weight: 700; }
.ex-mercado-cab h3 small { font-size: 12px; font-weight: 500; color: var(--ex-texto-5); margin-left: 4px; }
.ex-mercado-cab .ex-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ex-mercado-cab .ex-casado { font-size: 11.5px; color: var(--ex-texto-5); white-space: nowrap; }
.ex-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ex-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-grade-3 .ex-preco { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; }
.ex-grade-3 .ex-preco .ex-nome { align-items: center; text-align: center; }
.ex-grade-3 .ex-preco .ex-nome b { font-size: 12.5px; }
.ex-grade-3 .ex-preco .ex-odd { margin-left: 0; }

/* A posição e o Encerrar dentro do cartão. */
.ex-posicao { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--ex-linha); font-size: 12.5px; color: var(--ex-texto-3); }
.ex-posicao .ex-mais { color: var(--ex-verde-claro); font-weight: 700; }
.ex-posicao .ex-menos { color: #ff9d9d; font-weight: 700; }
.ex-posicao .ex-resultado { color: var(--ex-texto-4); }
.ex-encerrar { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha-2); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ex-encerrar img { width: 22px; height: 22px; }
.ex-encerrar b { color: var(--ex-amarelo); }
.ex-encerrar:hover { border-color: var(--ex-amarelo); }

/* ------------------------------------------------------------------ celular: direção B (dois preços por seleção) */
.ex-cab-colunas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 8px; align-items: center; padding: 0 2px; }
.ex-cab-colunas span { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-texto-4); }
.ex-cab-colunas .ex-col-contra { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--ex-contra); }
.ex-cab-colunas .ex-col-contra .ex-i { border-color: var(--ex-contra); color: var(--ex-contra); }
.ex-linha { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 8px; align-items: center; }
/* Mercado de dois lados no celular (17/10/2026): uma linha por opção, um preço só. */
.ex-linha.ex-linha-1 { grid-template-columns: minmax(0, 1fr) 84px; }
/* A seta da odd que melhorou (a inclinação do formador, 17/10/2026). */
.ex-subiu { display: inline-block; margin-right: 3px; font-size: .62em; font-style: normal; color: var(--ex-verde); vertical-align: .18em; }
.ex-linha .ex-nome-linha { font-size: 14px; color: var(--ex-texto-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-linha .ex-nome-linha span { color: var(--ex-texto-5); }
.ex-celula { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 0; border-radius: 10px; border: 1px solid var(--ex-linha-celula); background: var(--ex-celula); color: #fff; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-celula small { font-size: 9.5px; font-weight: 600; color: var(--ex-texto-5); line-height: 1; }
.ex-celula.ex-escolhida { border-color: var(--ex-verde); background: rgba(0, 255, 136, .12); }
.ex-celula .ex-sem { font-size: 12px; font-weight: 600; color: var(--ex-texto-5); }
.ex-celula.ex-minha::after { content: ""; position: absolute; }
.ex-so-celular { display: none !important; }

/* ------------------------------------------------------------------ dicas (ⓘ) */
.ex-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ex-texto-5); background: transparent; color: var(--ex-texto-3); font-size: 10px; font-weight: 800; font-style: normal; padding: 0; letter-spacing: 0; line-height: 1; flex: none; }
.ex-i.ex-i-grande { width: 40px; height: 40px; font-size: 13px; border-color: var(--ex-linha-2); }
.ex-i[aria-expanded="true"] { border-color: var(--ex-verde); color: var(--ex-verde); }
.ex-com-dica { position: relative; }
.ex-dica { position: absolute; z-index: 30; width: min(300px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px; background: var(--ex-fundo); border: 1px solid var(--ex-linha-2); box-shadow: var(--ex-sombra); font-size: 12.5px; color: var(--ex-texto-2); line-height: 1.45; text-align: left; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ex-dica.ex-dica-direita { right: 0; top: calc(100% + 6px); }
.ex-dica.ex-dica-esquerda { left: 0; top: calc(100% + 6px); }
.ex-dica.ex-dica-acima { left: 0; right: 0; bottom: calc(100% + 6px); width: auto; }
.ex-dica.ex-dica-abaixo { left: 0; right: 0; top: calc(100% + 6px); width: auto; }

/* ------------------------------------------------------------------ o bilhete */
.ex-bilhete { display: flex; flex-direction: column; border-radius: 16px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); overflow: visible; }
.ex-bilhete-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ex-linha); }
.ex-bilhete-cab .ex-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ex-bilhete-cab .ex-titulo img { width: 26px; height: 26px; }
.ex-bilhete-cab .ex-titulo b { font-size: 16px; font-weight: 800; }
.ex-lado-selo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ex-lado-selo[data-lado="back"] { background: rgba(0, 255, 136, .12); border: 1px solid rgba(0, 255, 136, .45); color: var(--ex-verde-claro); }
.ex-lado-selo[data-lado="lay"] { background: var(--ex-contra-fundo); border: 1px solid rgba(247, 131, 172, .5); color: var(--ex-contra); }
.ex-bilhete-acoes { position: relative; display: flex; align-items: center; gap: 6px; }
.ex-redondo { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ex-linha-2); background: transparent; color: var(--ex-texto-3); padding: 0; }
.ex-redondo.ex-fechar { color: #fff; }
.ex-redondo[aria-expanded="true"] { border-color: var(--ex-verde); color: var(--ex-verde); }
.ex-prefs { position: absolute; right: 0; top: 36px; z-index: 31; width: 270px; padding: 12px; border-radius: 10px; background: var(--ex-fundo); border: 1px solid var(--ex-linha-2); box-shadow: var(--ex-sombra); display: flex; flex-direction: column; gap: 10px; font-size: 13px; text-align: left; }
.ex-prefs label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ex-prefs input[type="checkbox"], .ex-prefs input[type="radio"] { width: 18px; height: 18px; accent-color: var(--ex-verde); margin: 0; flex: none; }
.ex-prefs .ex-prefs-grupo { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ex-linha); }
.ex-prefs .ex-prefs-grupo small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ex-texto-4); }
.ex-prefs .ex-prefs-valor { display: flex; align-items: center; gap: 8px; }
.ex-prefs .ex-prefs-valor input { width: 90px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ex-linha-2); background: var(--ex-cartao); color: #fff; font-size: 14px; font-weight: 700; }
.ex-bilhete-corpo { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.ex-bilhete-vazio { padding: 22px 16px; text-align: center; color: var(--ex-texto-4); font-size: 13.5px; line-height: 1.5; }
.ex-bilhete-vazio b { display: block; color: var(--ex-texto-3); margin-bottom: 4px; }
.ex-selecao { display: flex; flex-direction: column; gap: 2px; }
.ex-selecao b { font-size: 16px; font-weight: 800; }
.ex-selecao span { font-size: 13px; color: var(--ex-texto-3); }
.ex-odd-caixa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--ex-cartao); border: 1px solid var(--ex-linha); }
.ex-odd-caixa .ex-rotulo { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-texto-5); }
.ex-odd-caixa .ex-odd-valor { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ex-odd-caixa .ex-odd-ref { font-size: 11px; color: var(--ex-texto-5); }
.ex-mais-menos { display: inline-grid; grid-template-columns: 38px 38px; border: 1px solid var(--ex-linha-2); border-radius: 999px; overflow: hidden; }
.ex-mais-menos button { height: 38px; border: 0; background: var(--ex-cartao-2); color: #fff; font-size: 20px; font-weight: 800; padding: 0; }
.ex-mais-menos button + button { border-left: 1px solid var(--ex-linha-2); }
.ex-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ex-campo-valor { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--ex-cartao); border: 1px solid var(--ex-linha); min-width: 0; }
.ex-campo-valor:focus-within { border-color: var(--ex-linha-2); }
.ex-campo-valor small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-texto-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-campo-valor .ex-entrada { display: flex; align-items: baseline; gap: 4px; }
.ex-campo-valor .ex-entrada span { font-size: 14px; color: var(--ex-texto-3); }
.ex-campo-valor input { width: 100%; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 20px; font-weight: 800; padding: 0; outline: none; -moz-appearance: textfield; }
.ex-campo-valor input::-webkit-outer-spin-button, .ex-campo-valor input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ex-pagina .ex-campo-valor input:focus-visible { outline: none; }
.ex-campo-valor.ex-segundo input { color: var(--ex-amarelo); }
.ex-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ex-fichas button { height: 32px; border-radius: 999px; border: 1px solid var(--ex-linha-2); background: var(--ex-cartao); color: #fff; font-weight: 700; font-size: 12px; padding: 0; }
.ex-fichas button:hover { border-color: var(--ex-verde); }
.ex-disponivel { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ex-disponivel .ex-disp-texto { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ex-verde-claro); }
.ex-disponivel[data-tom="excede"] .ex-disp-texto { color: var(--ex-ambar); }
.ex-disponivel[data-tom="oferta"] .ex-disp-texto { color: var(--ex-amarelo); }
.ex-parcial { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--ex-fundo); border: 1px solid var(--ex-linha-2); }
.ex-parcial button { border: 0; border-radius: 999px; padding: 6px 8px; background: transparent; color: var(--ex-texto-3); font-weight: 700; font-size: 12px; line-height: 1.2; min-width: 0; }
.ex-parcial button[aria-pressed="true"] { background: var(--ex-linha); color: #fff; }
.ex-enviar { position: relative; display: flex; align-items: center; gap: 10px; }
.ex-enviar .ex-botao { flex: 1; min-width: 0; }
.ex-acompanha { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ex-texto-4); }
.ex-acompanha input { width: 16px; height: 16px; accent-color: var(--ex-verde); margin: 0; }

/* A espera e o resultado dentro do bilhete. */
.ex-espera { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.ex-anel { position: relative; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex: none; border-radius: 50%; background: conic-gradient(var(--ex-verde) calc(var(--p, 0) * 1%), var(--ex-linha) 0); }
.ex-anel::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ex-cartao-2); }
.ex-anel b { position: relative; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-espera-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ex-espera-texto b { font-size: 15px; }
.ex-espera-texto span { font-size: 12.5px; color: var(--ex-texto-3); }
.ex-espera-texto a, .ex-espera-texto button.ex-link { align-self: flex-start; border: 0; background: transparent; padding: 0; color: var(--ex-texto-3); font-size: 12.5px; font-weight: 700; text-decoration: underline; }
.ex-resultado { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ex-cartao); border: 1px solid var(--ex-linha); }
.ex-resultado[data-tom="ok"] { border-color: rgba(0, 255, 136, .45); }
.ex-resultado[data-tom="ruim"] { border-color: rgba(255, 90, 90, .5); }
.ex-resultado[data-tom="livro"] { border-color: rgba(255, 212, 59, .45); }
.ex-resultado .ex-marca { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; font-weight: 800; }
.ex-resultado[data-tom="ok"] .ex-marca { background: rgba(0, 255, 136, .15); color: var(--ex-verde); }
.ex-resultado[data-tom="ruim"] .ex-marca { background: rgba(255, 90, 90, .15); color: var(--ex-vermelho); }
.ex-resultado[data-tom="livro"] .ex-marca, .ex-resultado[data-tom="neutro"] .ex-marca { background: rgba(255, 212, 59, .15); color: var(--ex-amarelo); }
.ex-resultado .ex-res-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-resultado .ex-res-texto b { font-size: 14.5px; }
.ex-resultado .ex-res-texto span { font-size: 12.5px; color: var(--ex-texto-3); }

/* ------------------------------------------------------------------ as minhas apostas do jogo */
.ex-minhas { display: flex; flex-direction: column; border-radius: 16px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); overflow: hidden; }
.ex-minhas-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ex-linha); }
.ex-minhas-cab b { font-size: 15px; font-weight: 800; }
.ex-minhas-cab span { font-size: 12px; color: var(--ex-texto-5); }
.ex-minha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 4px 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ex-linha); }
.ex-minha:last-child { border-bottom: 0; }
.ex-minha .ex-minha-sel { grid-column: 1; grid-row: 1; font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-minha .ex-minha-valores { grid-column: 1; grid-row: 2; }
.ex-minha .ex-minha-estado { grid-column: 1 / -1; grid-row: 3; }
.ex-minha .ex-minha-sel i { font-style: normal; font-weight: 800; }
.ex-minha .ex-minha-sel i[data-lado="lay"] { color: var(--ex-contra); }
.ex-minha .ex-minha-sel i[data-lado="back"] { color: var(--ex-verde-claro); }
.ex-minha .ex-minha-valores { font-size: 12.5px; color: var(--ex-texto-3); }
.ex-minha .ex-minha-estado { font-size: 12px; color: var(--ex-texto-4); }
.ex-minha .ex-minha-estado[data-tom="ok"] { color: var(--ex-verde-claro); }
.ex-minha .ex-minha-estado[data-tom="ruim"] { color: #ff9d9d; }
.ex-minha .ex-minha-estado[data-tom="espera"], .ex-minha .ex-minha-estado[data-tom="livro"] { color: var(--ex-amarelo); }
.ex-minha .ex-cancelar { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ex-linha-2); background: transparent; color: #fff; font-size: 12px; font-weight: 700; }
.ex-minha .ex-cancelar:hover { border-color: var(--ex-vermelho); }
.ex-minhas-vazio { padding: 16px; font-size: 13px; color: var(--ex-texto-4); text-align: center; }
.ex-minhas-cab a { color: var(--ex-verde-claro); font-weight: 700; }
/* A tela "Minhas apostas": os quatro blocos, um embaixo do outro (duas colunas no computador). */
.ex-tudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ex-tudo .ex-bloco { min-width: 0; }
.ex-minha.ex-minha-tudo { grid-template-rows: auto auto auto; }
.ex-minha .ex-minha-estado small { display: block; font-weight: 500; color: var(--ex-texto-5); margin-top: 2px; }
.ex-minha .ex-minha-valores a, .ex-minha .ex-minha-jogo { color: var(--ex-texto-3); text-decoration: underline; text-decoration-color: var(--ex-linha-2); }
.ex-minha .ex-minha-jogo { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--ex-texto-3); }
.ex-minha .ex-minha-jogo:hover { color: #fff; }
.ex-posicao-linha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ex-linha); }
.ex-posicao-linha:last-child { border-bottom: 0; }
.ex-posicao-linha:hover { background: var(--ex-celula); }
.ex-posicao-titulo { display: flex; flex-direction: column; min-width: 0; }
.ex-posicao-titulo b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-posicao-titulo span { font-size: 12px; color: var(--ex-texto-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-posicao-pl { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-weight: 700; }
.ex-posicao-estado { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 12.5px; white-space: nowrap; }
.ex-posicao-estado b { font-weight: 700; }
.ex-posicao-estado small { color: var(--ex-texto-5); font-size: 11.5px; }
.ex-extrato-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ex-linha); font-size: 13px; font-variant-numeric: tabular-nums; }
.ex-extrato-linha:last-child { border-bottom: 0; }
.ex-extrato-tipo { display: flex; flex-direction: column; min-width: 0; }
.ex-extrato-tipo b { font-weight: 700; }
.ex-extrato-tipo small { color: var(--ex-texto-5); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-extrato-valor { font-weight: 800; }
.ex-extrato-saldo { display: flex; flex-direction: column; align-items: flex-end; color: var(--ex-texto-3); }
.ex-extrato-saldo small { color: var(--ex-texto-5); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.ex-extrato-hora { color: var(--ex-texto-5); font-size: 12px; }

/* ------------------------------------------------------------------ "Ao vivo agora" (coluna da direita) */
.ex-vivos { display: flex; flex-direction: column; border-radius: 16px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); overflow: hidden; }
.ex-vivos-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ex-linha); }
.ex-vivos-cab b { font-size: 15px; font-weight: 800; }
.ex-vivos-cab span { font-size: 12px; color: var(--ex-texto-5); }
.ex-vivo { display: grid; grid-template-columns: 10px 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ex-linha); color: #fff; }
.ex-vivo:last-of-type { border-bottom: 0; }
.ex-vivo.ex-atual { background: rgba(0, 255, 136, .06); }
.ex-vivo .ex-cor { width: 10px; height: 10px; border-radius: 2px; }
.ex-vivo .ex-tempo { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-vivo .ex-jogo-nome { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-vivo .ex-comp { font-size: 11px; color: var(--ex-texto-5); white-space: nowrap; }
.ex-vivos-pe { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-top: 1px solid var(--ex-linha); color: #fff; font-weight: 700; font-size: 13px; }

/* ------------------------------------------------------------------ o "Como funciona" (18/10/2026) e o aviso */
/* No computador, os 4 passos lado a lado com as ilustrações do Codex (pintadas sobre o fundo #1b1f24 do cartão);
   no celular, um passo por vez. Oculto, vira o botão pequeno "Como funciona a Exchange?". Desenho aprovado no quadro. */
.ex-como { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; border-radius: 18px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha); }
.ex-como-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ex-como-cab h2 { margin: 0; font-size: 18px; font-weight: 800; }
.ex-como-ocultar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ex-linha-2); background: transparent; color: var(--ex-texto-3); font-size: 13px; font-weight: 600; }
.ex-como-ocultar:hover { color: #fff; border-color: #5d646d; }
.ex-como-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ex-como-passos li { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ex-como-arte { height: 138px; border-radius: 14px; background: var(--ex-cartao); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ex-como-arte img { width: 100%; height: 100%; object-fit: contain; }
.ex-como-linha { display: flex; align-items: flex-start; gap: 10px; }
.ex-como-linha > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-como-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 255, 136, .14); color: var(--ex-verde); font-size: 13px; font-weight: 800; }
.ex-como-titulo { font-size: 15px; font-weight: 800; line-height: 1.25; }
.ex-como-texto { font-size: 13px; line-height: 1.45; color: var(--ex-texto-3); }
.ex-como-um { gap: 10px; padding: 14px; }
.ex-como-um .ex-como-rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-verde); }
.ex-como-um .ex-como-ocultar { height: 30px; padding: 0 12px; font-size: 12.5px; }
.ex-como-um .ex-como-arte { height: 170px; }
.ex-como-um .ex-como-titulo { font-size: 17px; }
.ex-como-um .ex-como-texto { font-size: 13.5px; line-height: 1.5; min-height: 40px; }
.ex-como-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.ex-como-pe .ex-botao { height: 40px; padding: 0 20px; font-size: 14px; }
.ex-como-pontos { display: flex; gap: 6px; }
.ex-como-pontos span { width: 6px; height: 6px; border-radius: 3px; background: var(--ex-linha-2); }
.ex-como-pontos span.ex-on { width: 18px; background: var(--ex-verde); }
.ex-como-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; border: 1px solid var(--ex-linha); background: var(--ex-cartao-2); color: #fff; font-size: 13.5px; font-weight: 700; }
.ex-como-chip:hover { border-color: var(--ex-linha-2); }
.ex-como-chip img { width: 30px; height: 30px; }
#exComo { display: flex; flex-direction: column; }
.ex-aviso { position: fixed; left: 50%; bottom: calc(var(--nv-baixo, 0px) + 16px); z-index: 1250; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; background: var(--ex-cartao-2); border: 1px solid var(--ex-linha-2); box-shadow: var(--ex-sombra); font-size: 13.5px; }
.ex-aviso .ex-anel { width: 44px; height: 44px; }
.ex-aviso .ex-anel b { font-size: 13px; }
.ex-aviso .ex-aviso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-aviso .ex-aviso-texto b { font-size: 14px; }
.ex-aviso .ex-aviso-texto span { font-size: 12.5px; color: var(--ex-texto-3); }
.ex-aviso[data-tom="ok"] { border-color: rgba(0, 255, 136, .45); }
.ex-aviso[data-tom="ruim"] { border-color: rgba(255, 90, 90, .5); }
.ex-aviso .ex-redondo { margin-left: auto; }

/* ------------------------------------------------------------------ celular (≤ 900px): a direção B e o bilhete como folha de baixo */
@media (max-width: 900px) {
    .ex-pagina { padding-bottom: calc(var(--nv-baixo, 62px) + 16px); }
    .ex-caminho a, .ex-caminho b { font-size: 16px; }
    .ex-saldo { height: 32px; padding: 0 10px; }
    .ex-atalho { height: 32px; padding: 0 10px 0 7px; font-size: 12.5px; }
    .ex-atalho img { width: 18px; height: 18px; }
    .ex-tudo { grid-template-columns: minmax(0, 1fr); }
    .ex-posicao-linha { grid-template-columns: minmax(0, 1fr) auto; }
    .ex-posicao-linha .ex-posicao-pl { grid-column: 1 / -1; }
    .ex-extrato-linha { grid-template-columns: minmax(0, 1fr) auto; }
    .ex-extrato-linha .ex-extrato-saldo { grid-column: 1; flex-direction: row; gap: 6px; align-items: baseline; justify-content: flex-start; }
    .ex-extrato-linha .ex-extrato-hora { grid-column: 2; grid-row: 2; text-align: right; }
    .ex-corpo { display: block; }
    .ex-lado { display: contents; }
    .ex-vivos { display: none; }
    .ex-painel { padding: 14px; }
    /* A lista no celular: a cabeça da liga ocupa a linha; cada jogo vira um bloco com os nomes empilhados à
       esquerda e as duas células da linha principal do Total à direita (os outros mercados ficam no "+N ›"). */
    .ex-liga { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 48px; padding: 8px 12px; }
    .ex-liga-nome b { font-size: 19px; }
    .ex-liga-col { display: none; }
    .ex-jogo-linha { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 132px; grid-template-areas: "quando mais" "times odds" "volume volume"; column-gap: 10px; row-gap: 6px; padding: 10px 12px; }
    /* O volume no celular: uma linha fina abaixo dos nomes — o valor, a barrinha e o disponível. */
    .ex-jogo-linha .ex-volume { grid-area: volume; display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; column-gap: 8px; margin-top: 2px; }
    .ex-jogo-linha .ex-vol-topo b { font-size: 12.5px; }
    .ex-jogo-linha .ex-vol-barra { height: 3px; }
    .ex-jogo-linha .ex-vol-detalhe { text-align: right; }
    .ex-vivo-cab { padding: 10px 12px; }
    .ex-vivo-cab > b { font-size: 16px; }
    .ex-ordem { margin-left: 0; width: 100%; }
    .ex-ordem button { flex: 1; }
    .ex-jogo-linha .ex-quando { grid-area: quando; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
    .ex-jogo-linha .ex-times { grid-area: times; }
    .ex-jogo-linha .ex-sinais { grid-area: mais; justify-content: flex-end; padding-right: 38px; }
    .ex-jogo-linha .ex-odds-ou { grid-area: odds; align-self: center; }
    .ex-jogo-linha .ex-odds-res { display: none; }
    .ex-jogo-linha .ex-mais { position: absolute; right: 12px; top: 10px; }
    .ex-sinais .ex-pausado { display: inline-flex; font-size: 11.5px; }
    .ex-mais .ex-so-computador { display: none; }
    .ex-mais .ex-so-celular { display: inline; }
    .ex-placar-barra { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quando direita" "times times"; row-gap: 3px; min-height: 0; padding: 7px 12px; }
    .ex-placar-barra .ex-quando { grid-area: quando; display: flex; align-items: center; gap: 10px; font-size: 13px; }
    .ex-placar-barra .ex-placar-times { grid-area: times; column-gap: 12px; }
    .ex-placar-barra .ex-placar-direita { grid-area: direita; }
    .ex-placar-times .ex-time b { font-size: 14px; }
    .ex-placar-times .ex-time span { font-size: 11px; }
    .ex-placar-times .ex-numeros { font-size: 22px; }
    .ex-video-botao { height: 24px; padding: 0 9px 0 7px; font-size: 12px; }
    .ex-hero { display: none; }
    .ex-mercados { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .ex-mercado.ex-largo { grid-column: auto; }
    .ex-so-celular { display: flex !important; }
    .ex-cab-colunas.ex-so-celular { display: grid !important; }
    .ex-so-computador { display: none !important; }
    .ex-encerrar { margin-left: 0; }
    /* A folha do bilhete: sobe por cima da página, acima da barra de baixo do site. */
    .ex-bilhete { position: fixed; left: 0; right: 0; bottom: var(--nv-baixo, 62px); z-index: 1200; max-height: calc(100dvh - 60px - var(--nv-baixo, 62px)); overflow-y: auto;
        border-radius: 18px 18px 0 0; border: 0; border-top: 1px solid var(--ex-linha-2); box-shadow: 0 -16px 40px rgba(0, 0, 0, .6); }
    .ex-bilhete[hidden] { display: none !important; }
    .ex-bilhete-cab { padding: 14px 16px 10px; border-bottom: 0; }
    .ex-bilhete-corpo { padding: 0 16px 16px; }
    .ex-veu-bilhete { position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, .45); }
    .ex-mais-menos { grid-template-columns: 40px 40px; }
    .ex-mais-menos button { height: 40px; }
    .ex-fichas button { height: 34px; font-size: 12.5px; }
    .ex-enviar .ex-botao { height: 48px; }
    .ex-i.ex-i-grande { width: 40px; height: 40px; }
    .ex-dica { width: min(260px, calc(100vw - 48px)); }
}
@media (min-width: 901px) {
    .ex-so-celular { display: none !important; }
    .ex-bilhete .ex-fechar { display: none; }
    .ex-veu-bilhete { display: none !important; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .ex-corpo { grid-template-columns: minmax(0, 1fr) 320px; }
    .ex-campo .ex-cp-miolo { padding: 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .ex-rodando { animation: none; }
}