/* AVIÃOZINHO — interface do jogo dentro do layout do site. Tudo com prefixo
   av- e preso em .av-app, para não esbarrar no style.css/Bootstrap do site.
   (Ex.: o Bootstrap esconde qualquer .toast sem .show — por isso av-toast.) */

.av-app {
    --av-painel: #111824;
    --av-painel-2: #151e2b;
    --av-campo: #0a1019;
    --av-borda: rgba(255, 255, 255, 0.07);
    --av-borda-forte: rgba(255, 255, 255, 0.13);
    --av-texto: #eef3f8;
    --av-suave: #98a7b5;
    --av-apagado: #6f7f8f;
    --av-marca: #f70202;
    --av-marca-claro: #ff3b2f;
    --av-ouro: #ffbf39;
    --av-verde-escuro: #179c3e;
    --av-laranja-escuro: #ee6400;
    --av-baixo: #62b4ff;
    --av-medio: #b98cff;
    --av-alto: #ffbf39;
    --av-raio: 18px;
    --av-sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.9);

    container-type: inline-size;
    color: var(--av-texto);
    font-family: var(--fonte-site, 'Inter', system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.45;
    padding: 6px 0 18px;
}
.av-app *, .av-app *::before, .av-app *::after { box-sizing: border-box; }
.av-app button, .av-app input { font: inherit; color: inherit; margin: 0; }
.av-app button { cursor: pointer; }
.av-app p { margin: 0; }
.av-app svg { display: block; }
.av-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.av-app :focus-visible { outline: 2px solid var(--av-ouro); outline-offset: 2px; }
.av-app .av-num, .av-saldo__valor, .av-tela__mult, .av-acao__linha2, .av-apostas__lista, .av-pilula, .av-stepper input, .av-alvo input { font-variant-numeric: tabular-nums; }
.av-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ topo do jogo */
.av-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.av-logo { display: flex; align-items: center; gap: 9px; user-select: none; }
.av-logo__jato { width: 46px; height: 20px; transform: rotate(-12deg); filter: drop-shadow(0 2px 6px rgba(247, 2, 2, .45)); }
.av-logo__nome {
    font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: .04em; line-height: 1;
    background: linear-gradient(180deg, #ffffff 30%, #ffd77a 120%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.av-topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.av-topo__btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--av-borda);
    color: var(--av-suave); font-size: 13px; font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
.av-topo__btn:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: var(--av-borda-forte); }
.av-topo__btn--icone { width: 38px; padding: 0; justify-content: center; }
#av-som .av-som-off { display: none; }
#av-som[aria-pressed="false"] .av-som-on { display: none; }
#av-som[aria-pressed="false"] .av-som-off { display: block; }
.av-saldo {
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 5px 14px 6px; border-radius: 14px;
    background: var(--av-campo); border: 1px solid var(--av-borda);
}
.av-saldo__rotulo { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--av-apagado); }
.av-saldo__valor { font-size: 16px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.av-saldo__valor.is-mudou { animation: av-saldo-pisca .6s ease; }
@keyframes av-saldo-pisca { 30% { color: #6ef396; } }

/* ------------------------------------------------------------------ palco */
.av-palco {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas: "apostas jogo";
}
.av-jogo { grid-area: jogo; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.av-hist-faixa { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av-hist {
    flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.av-pilula {
    flex: none; height: 28px; padding: 0 11px; border-radius: 999px;
    background: rgba(255, 255, 255, .045); border: 1px solid var(--av-borda);
    font-size: 12.5px; font-weight: 800; color: var(--av-baixo);
    transition: background .15s;
}
.av-pilula:hover { background: rgba(255, 255, 255, .09); }
.av-pilula.is-medio { color: var(--av-medio); }
.av-pilula.is-alto { color: #1a1205; background: linear-gradient(180deg, #ffd56e, #f3a91f); border-color: #ffd56e; }
.av-pilula.is-nova { animation: av-pilula-entra .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes av-pilula-entra { from { transform: translateX(-14px) scale(.85); opacity: 0; } }
.av-hist__mais {
    flex: none; display: grid; place-items: center; width: 34px; height: 30px; border-radius: 999px;
    background: rgba(255, 255, 255, .045); border: 1px solid var(--av-borda); color: var(--av-suave);
}
.av-hist__mais:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.av-hist__mais .av-ico { width: 17px; height: 17px; }

.av-tela {
    position: relative; width: 100%;
    aspect-ratio: 16 / 8.6; min-height: 280px; max-height: min(62vh, 600px);
    border-radius: var(--av-raio); overflow: hidden;
    background: #070b13; border: 1px solid var(--av-borda);
    box-shadow: var(--av-sombra);
}
.av-tela canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.av-tela__centro {
    position: absolute; inset: 0; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 4%;
}
.av-tela__mult {
    font-size: clamp(44px, 9cqw, 104px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff;
    text-shadow: 0 0 28px rgba(255, 255, 255, .22), 0 6px 22px rgba(0, 0, 0, .55);
}
.av-tela__mult.is-queda { color: #ff3b3b; text-shadow: 0 0 32px rgba(255, 30, 30, .55), 0 6px 22px rgba(0, 0, 0, .55); animation: av-mult-queda .5s ease; }
@keyframes av-mult-queda { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.av-tela__rotulo {
    margin-bottom: 6px; font-size: clamp(13px, 1.8cqw, 18px); font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase; color: #ff8a8a; text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.av-espera {
    min-width: 230px; padding: 16px 26px 18px; text-align: center;
    background: rgba(8, 12, 20, .62); backdrop-filter: blur(6px);
    border: 1px solid var(--av-borda-forte); border-radius: 18px; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .9);
}
.av-espera__titulo { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--av-suave); }
.av-espera__tempo { margin: 2px 0 10px !important; font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.av-espera__tempo small { font-size: 18px; margin-left: 2px; color: var(--av-suave); font-weight: 700; }
.av-espera__barra { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.av-espera__barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--av-marca), var(--av-ouro)); transform-origin: left; }
.av-espera__dica { margin-top: 10px !important; font-size: 12px; font-weight: 600; color: var(--av-ouro); }
.av-pausa { padding: 18px 26px; text-align: center; border-radius: 18px; background: rgba(8, 12, 20, .7); border: 1px solid var(--av-borda-forte); font-weight: 700; color: var(--av-suave); }
.av-tela__selo {
    position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; background: rgba(5, 8, 14, .55); border: 1px solid var(--av-borda);
    font-size: 11px; font-weight: 600; color: var(--av-apagado);
}
.av-tela__selo b { color: var(--av-suave); font-weight: 700; }
.av-vivo { width: 7px; height: 7px; border-radius: 50%; background: #2fd15a; animation: av-vivo 1.8s infinite; }
.av-vivo.is-parado { background: #ff5a5a; animation: none; }
@keyframes av-vivo { 70% { box-shadow: 0 0 0 7px rgba(47, 209, 90, 0); } 0% { box-shadow: 0 0 0 0 rgba(47, 209, 90, .6); } }

.av-toasts { position: absolute; top: 14px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 3; }
.av-toast {
    display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - 24px);
    padding: 8px 8px 8px 16px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(31, 155, 72, .96), rgba(17, 116, 50, .96));
    border: 1px solid rgba(110, 243, 150, .45); box-shadow: 0 12px 30px -10px rgba(10, 120, 50, .8);
    font-weight: 700; font-size: 13.5px; color: #fff; pointer-events: auto;
    animation: av-toast-entra .35s cubic-bezier(.2, .9, .3, 1.2);
}
.av-toast b { font-size: 15px; }
.av-toast__valor { padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .22); font-weight: 800; font-variant-numeric: tabular-nums; }
.av-toast--erro { background: linear-gradient(180deg, rgba(200, 25, 25, .96), rgba(150, 10, 10, .96)); border-color: rgba(255, 140, 140, .45); box-shadow: 0 12px 30px -10px rgba(150, 10, 10, .8); padding-right: 16px; }
.av-toast--erro a { color: #fff; text-decoration: underline; margin-left: 4px; }
.av-toast.is-saindo { animation: av-toast-sai .3s ease forwards; }
@keyframes av-toast-entra { from { transform: translateY(-16px) scale(.92); opacity: 0; } }
@keyframes av-toast-sai { to { transform: translateY(-10px); opacity: 0; } }

/* ------------------------------------------------------------------ painéis de aposta */
.av-paineis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.av-painel {
    padding: 14px; border-radius: var(--av-raio);
    background: linear-gradient(180deg, var(--av-painel-2), var(--av-painel));
    border: 1px solid var(--av-borda); box-shadow: var(--av-sombra);
    transition: border-color .2s, box-shadow .2s;
}
.av-painel.is-ativo { border-color: rgba(255, 162, 58, .45); box-shadow: var(--av-sombra), 0 0 0 1px rgba(255, 162, 58, .15); }
.av-painel.is-apostado { border-color: rgba(255, 70, 60, .35); }
.av-painel__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 12px; align-items: stretch; }
.av-painel__valor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.av-stepper { display: flex; align-items: center; height: 46px; padding: 4px; border-radius: 999px; background: var(--av-campo); border: 1px solid var(--av-borda); }
.av-stepper__btn {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--av-borda); color: #dfe7ef; transition: background .15s, transform .08s;
}
.av-stepper__btn:hover { background: rgba(255, 255, 255, .12); }
.av-stepper__btn:active { transform: scale(.92); }
.av-stepper__btn .av-ico { width: 16px; height: 16px; stroke-width: 2.6; }
.av-stepper__campo { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; cursor: text; margin: 0; }
.av-stepper__rs { font-size: 12px; font-weight: 700; color: var(--av-apagado); }
.av-stepper input { width: 100%; min-width: 0; max-width: 92px; padding: 0; border: 0; background: none; outline: none; font-size: 17px; font-weight: 800; text-align: center; }
.av-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.av-chip { height: 30px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .045); border: 1px solid var(--av-borda); font-size: 12.5px; font-weight: 700; color: var(--av-suave); transition: background .15s, color .15s; }
.av-chip:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.av-painel.is-travado .av-stepper, .av-painel.is-travado .av-chips, .av-painel.is-travado .av-alvo { opacity: .45; pointer-events: none; }

.av-acao {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 84px; padding: 8px 10px; border-radius: 18px; border: 1px solid rgba(120, 255, 160, .4);
    color: #fff; text-transform: uppercase;
    --av-sombra-acao: rgba(30, 180, 80, .9);
    background: linear-gradient(180deg, #3ae06a, var(--av-verde-escuro));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 10px 24px -12px var(--av-sombra-acao);
    transition: transform .08s ease, filter .15s, box-shadow .2s;
}
.av-acao::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 60%); transform: translateX(-120%); transition: transform .6s; }
.av-acao:hover { filter: brightness(1.06); }
.av-acao:hover::after { transform: translateX(120%); }
.av-acao:active { transform: scale(.975); }
.av-acao[disabled] { filter: grayscale(.5) brightness(.8); cursor: progress; }
.av-acao__linha1 { font-size: 19px; font-weight: 900; letter-spacing: .07em; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.av-acao__linha2 { font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: none; opacity: .95; }
.av-acao.is-cancelar { background: linear-gradient(180deg, #ff4d42, #c80f0f); border-color: rgba(255, 150, 140, .4); --av-sombra-acao: rgba(220, 20, 20, .9); }
.av-acao.is-cancelar .av-acao__linha2 { font-size: 12px; font-weight: 600; opacity: .85; }
.av-acao.is-sacar { background: linear-gradient(180deg, #ffb44d, var(--av-laranja-escuro)); border-color: rgba(255, 210, 140, .5); --av-sombra-acao: rgba(255, 120, 0, .95); animation: av-sacar-pulso 1.2s ease-in-out infinite; }
.av-acao.is-sacar .av-acao__linha2 { font-size: 19px; font-weight: 900; }
.av-acao.is-entrar { background: linear-gradient(180deg, #ff4d42, #c80f0f); border-color: rgba(255, 150, 140, .4); --av-sombra-acao: rgba(220, 20, 20, .9); }
@keyframes av-sacar-pulso { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 0 26px -2px rgba(255, 140, 0, .75); } }
.av-acao.is-tremer { animation: av-tremer .35s; }
@keyframes av-tremer { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.av-painel__auto {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--av-borda);
    font-size: 12.5px; font-weight: 600; color: var(--av-suave);
}
.av-painel__saque { display: flex; align-items: center; gap: 10px; }
.av-chave { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 0; }
.av-chave input { position: absolute; opacity: 0; pointer-events: none; }
.av-chave__trilho { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--av-borda-forte); transition: background .2s, border-color .2s; }
.av-chave__trilho::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #c8d2dd; transition: transform .2s, background .2s; }
.av-chave input:checked + .av-chave__trilho { background: var(--av-verde-escuro); border-color: rgba(120, 255, 160, .5); }
.av-chave input:checked + .av-chave__trilho::after { transform: translateX(14px); background: #fff; }
.av-chave input:focus-visible + .av-chave__trilho { outline: 2px solid var(--av-ouro); outline-offset: 2px; }
.av-alvo { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 12px; margin: 0; border-radius: 999px; background: var(--av-campo); border: 1px solid var(--av-borda); font-weight: 800; color: #fff; }
.av-alvo input { width: 46px; padding: 0; border: 0; background: none; outline: none; text-align: right; font-weight: 800; }
.av-alvo.is-desligado { opacity: .5; }

/* ------------------------------------------------------------------ lista de apostas */
.av-apostas {
    grid-area: apostas; position: sticky; top: 84px;
    display: flex; flex-direction: column; min-height: 0;
    height: min(calc(100vh - 110px), 860px);
    padding: 10px; border-radius: var(--av-raio);
    background: linear-gradient(180deg, var(--av-painel-2), var(--av-painel));
    border: 1px solid var(--av-borda); box-shadow: var(--av-sombra);
}
.av-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--av-campo); border: 1px solid var(--av-borda); }
.av-aba { height: 32px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; font-weight: 700; color: var(--av-suave); transition: background .15s, color .15s; }
.av-aba:hover { color: #fff; }
.av-aba.is-ativa { background: rgba(255, 255, 255, .1); color: #fff; }
.av-apostas__resumo { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 6px; padding: 10px 0; }
.av-apostas__resumo div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--av-borda); }
.av-apostas__resumo span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--av-apagado); }
.av-apostas__resumo b { color: #fff; font-weight: 800; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.av-apostas__resumo b.is-pago { color: #59ea85; }
.av-apostas__resumo b.is-negativo { color: #ff8a8a; }
.av-resumo-titulo { grid-column: 1 / -1; padding: 4px 6px; font-size: 12px; font-weight: 700; color: var(--av-suave); }
.av-apostas__cab, .av-linha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1.12fr); align-items: center; gap: 6px; }
.av-apostas__cab { padding: 0 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--av-apagado); }
.av-apostas__cab span:not(:first-child), .av-linha > :not(.av-linha__jog) { text-align: right; }
.av-apostas__lista { list-style: none; margin: 0; padding: 0 2px 0 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.av-linha { min-height: 38px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px solid transparent; font-size: 12.5px; font-weight: 600; color: #cfd8e2; transition: background .3s, border-color .3s; }
.av-linha > span { white-space: nowrap; }
.av-linha__jog { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av-linha__jog span:last-child { overflow: hidden; text-overflow: ellipsis; }
.av-avatar { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: hsl(var(--h) 55% 42%); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.av-linha__mx { justify-self: end; }
.av-mx { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 11.5px; font-weight: 800; color: var(--av-baixo); }
.av-mx.is-medio { color: var(--av-medio); }
.av-mx.is-alto { color: var(--av-alto); }
.av-linha.is-sacou { background: linear-gradient(90deg, rgba(47, 209, 90, .16), rgba(47, 209, 90, .05)); border-color: rgba(47, 209, 90, .28); color: #fff; }
.av-linha.is-sacou .av-linha__ganho { color: #59ea85; font-weight: 800; }
.av-linha.is-perdeu { opacity: .55; }
.av-linha.is-voce { border-color: rgba(255, 191, 57, .45); }
.av-linha.is-voce .av-avatar { background: linear-gradient(180deg, #ffd56e, #f3a91f); color: #1a1205; }
.av-pos { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .06); font-size: 11px; font-weight: 800; color: var(--av-suave); }
.av-linha:nth-child(1) .av-pos { background: linear-gradient(180deg, #ffd56e, #f3a91f); color: #1a1205; }
.av-linha:nth-child(2) .av-pos { background: linear-gradient(180deg, #e8eef5, #a9b6c4); color: #10161f; }
.av-linha:nth-child(3) .av-pos { background: linear-gradient(180deg, #f0a66b, #b8662c); color: #1a0e05; }
.av-vazio { padding: 28px 8px; text-align: center; color: var(--av-apagado); font-size: 13px; }

.av-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 14px 8px 0; font-size: 11.5px; font-weight: 600; color: var(--av-apagado); }
.av-rodape span + span::before { content: '·'; margin-right: 18px; color: rgba(255, 255, 255, .18); }

/* ------------------------------------------------------------------ janelas */
.av-dlg {
    width: min(560px, calc(100vw - 24px)); max-height: min(88vh, 780px);
    padding: 0; border-radius: 20px; border: 1px solid var(--av-borda-forte);
    background: linear-gradient(180deg, #151e2b, #0f1621); color: #eef3f8;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
    font-family: var(--fonte-site, 'Inter', system-ui, sans-serif); font-size: 14px; line-height: 1.45;
}
.av-dlg--largo { width: min(680px, calc(100vw - 24px)); }
.av-dlg[open] { display: flex; flex-direction: column; }
.av-dlg::backdrop { background: rgba(3, 6, 12, .72); backdrop-filter: blur(3px); }
.av-dlg *, .av-dlg *::before { box-sizing: border-box; }
.av-dlg__cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.av-dlg__cab h2 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.av-dlg__fechar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04); color: #98a7b5; cursor: pointer; }
.av-dlg__fechar:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.av-dlg__corpo { padding: 16px 18px 20px; overflow-y: auto; }
.av-dlg__corpo:focus { outline: none; }
.av-dlg p { margin: 0; }
.av-dlg__intro { margin: 0 0 12px !important; color: #d5dee8; }
.av-passos { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 10px; }
.av-passos li { position: relative; padding: 12px 12px 12px 50px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); color: #cfd8e2; }
.av-passos li::before { counter-increment: p; content: counter(p); position: absolute; left: 12px; top: 11px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #ff3b2f, #f70202); color: #fff; font-weight: 800; font-size: 13px; }
.av-passos b { color: #fff; }
.av-passos--compacto li { padding-top: 9px; padding-bottom: 9px; font-size: 13px; }
.av-passos--compacto li::before { top: 8px; }
.av-dicas { margin: 0; padding-left: 18px; color: #98a7b5; display: grid; gap: 6px; }
.av-dicas b { color: #e7edf3; }
.av-justo-fixo { margin: 0 0 6px; display: grid; gap: 8px; }
.av-justo-fixo div { padding: 10px 12px; border-radius: 12px; background: #0a1019; border: 1px solid rgba(255, 255, 255, .07); }
.av-justo-fixo dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6f7f8f; }
.av-justo-fixo dd { margin: 3px 0 0; }
.av-hash { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; color: #cfe1ff; word-break: break-all; }
.av-justo-sub { margin: 16px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #98a7b5; }
.av-justo-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.av-justo-lista .av-pilula { cursor: pointer; }
.av-justo-lista .av-pilula.is-sel { outline: 2px solid #fff; outline-offset: 1px; }
.av-justo-detalhe { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); display: grid; gap: 8px; font-size: 13px; }
.av-justo-detalhe .av-det { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.av-justo-detalhe .av-rot { color: #6f7f8f; font-size: 12px; font-weight: 600; }
.av-confere { color: #59ea85; font-weight: 800; }
.av-nao-confere { color: #ff7b7b; font-weight: 800; }
.av-verificador { display: flex; gap: 8px; }
.av-verificador input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .13); background: #0a1019; color: #eef3f8; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.av-btn-sec { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.av-btn-sec:hover { background: rgba(255, 255, 255, .14); }
.av-verificador__saida { margin-top: 8px !important; min-height: 20px; font-size: 13px; color: #98a7b5; }

/* ------------------------------------------------------------------ larguras */
@container (max-width: 980px) {
    .av-palco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "jogo" "apostas"; }
    .av-apostas { position: static; height: auto; max-height: 560px; }
    .av-apostas__lista { max-height: 420px; }
}
@container (max-width: 640px) {
    .av-topo { gap: 8px; }
    .av-topo__btn span { display: none; }
    .av-topo__btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .av-topo__btn[data-abrir="av-dlg-justo"] { display: none; }
    .av-logo { gap: 6px; }
    .av-logo__jato { width: 30px; height: 14px; }
    .av-logo__nome { font-size: 17px; }
    /* no celular o topo do site já mostra o saldo; o repetido aqui estourava a largura */
    .av-saldo { display: none; }
    .av-palco { gap: 10px; }
    .av-jogo { gap: 10px; }
    .av-tela { aspect-ratio: 4 / 3.3; min-height: 240px; }
    .av-paineis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .av-painel { padding: 12px; }
    .av-acao { min-height: 78px; }
    .av-linha { font-size: 12px; padding: 0 8px; }
    .av-rodape { font-size: 10.5px; gap: 4px 12px; }
    .av-rodape span + span::before { margin-right: 12px; }
}
@container (max-width: 360px) {
    .av-painel__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .av-stepper__btn { width: 30px; height: 30px; }
    .av-acao__linha1 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .av-app *, .av-app *::before, .av-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}