/* ══════════════════════════════════════════════════════════════════════════
   Aviator — modal "em preparação".

   Direção: FICHA DE VOO (flight strip). O aviator.css já define a identidade do
   jogo como "instrumento de cabine"; este modal é a ficha que a torre segura
   para um voo chegando — daí o checklist de decolagem, os rótulos em mono com
   tracking largo (placa de instrumento) e o ciano do altímetro restrito à faixa
   de dados. O vermelho é do avião e só dele.

   ⚠️ Os tokens abaixo ficam no PRÓPRIO .avs-modal, não numa classe de página.
   Modais são montados fora do wrapper da página (padrão do projeto: filhos de
   <main id="main-content">), e tokens presos ao escopo da página resolvem para
   VAZIO ali — foi assim que o modal "Seguir jogador" acabou transparente.
   ══════════════════════════════════════════════════════════════════════════ */

.avs-modal {
    --avs-void:    #0b0e11;   /* carvão do fundo, mais fundo que o card padrão */
    --avs-plate:   #12161b;   /* placa: fundo do checklist */
    --avs-line:    #1c2127;   /* fio de 1px */
    --avs-red:     var(--app-primary, #f12c4c);
    --avs-red-rgb: var(--app-primary-rgb, 241, 44, 76);
    --avs-cyan:    #0dcaf0;   /* altímetro — SÓ na faixa de dados */
    --avs-txt:     #e7ecf3;
    --avs-dim:     #7d8896;
    --avs-mono:    var(--sig-mono, 'SFMono-Regular', Consolas, monospace);

    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.avs-modal[hidden] { display: none; }

.avs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 8, .8);
    backdrop-filter: blur(6px);
}

/* ─── Card ────────────────────────────────────────────────────────────────
   O brilho externo é o rastro do avião levado para fora da caixa: o assunto é
   uma aeronave em movimento, e um retângulo neutro negaria isso. É a única
   licença — o resto fica disciplinado. */
.avs-card {
    position: relative;
    width: min(920px, 100%);
    max-height: 92vh;
    overflow: hidden auto;
    overscroll-behavior: contain;  /* chegou ao fim do card, PARA — não rola a página atrás */
    border-radius: 18px;
    border: 1px solid var(--avs-line);
    background: var(--avs-void);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, .7),
        0 0 90px -30px rgba(var(--avs-red-rgb), .45);
}

/* Barra de rolagem do card.
   Quem rola é o CARD INTEIRO, então a barra atravessa o palco (imagem do avião)
   e é cortada pelos cantos de 18px — a barra padrão, clara e larga, briga com as
   duas coisas. Aqui ela vira instrumento: trilho TRANSPARENTE (o corte no canto
   some junto com ele) e polegar no mesmo cinza dos fios de 1px.

   ⚠️ Os dois blocos abaixo NÃO se somam — são mutuamente exclusivos por browser.
   Chromium/Firefox/Safari 18.2+ leem `scrollbar-width`/`scrollbar-color` e, com
   elas presentes, o Chromium IGNORA todo o `::-webkit-scrollbar`. Medido aqui:
   com `thin` a barra sai com 12px, não com os 10px do bloco webkit. O webkit
   fica só para Safari antigo, que não conhece as propriedades padrão. Editar um
   sem o outro faz o ajuste "não pegar" — foi o que aconteceu na primeira versão. */
.avs-card {
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: var(--avs-line) transparent;     /* polegar, trilho */
}
.avs-card::-webkit-scrollbar { width: 10px; }
.avs-card::-webkit-scrollbar-track { background: transparent; }
.avs-card::-webkit-scrollbar-thumb {
    background-color: var(--avs-line);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 99px;
}
/* Sobe um passo discreto, não o vermelho da marca: a barra é para sumir, não para
   chamar. (Só o Safari antigo chega aqui — ver a nota de precedência acima.) */
.avs-card::-webkit-scrollbar-thumb:hover { background-color: #2b323a; }

/* ─── Palco: a imagem do avião ────────────────────────────────────────────
   O gradiente é da ESQUERDA (opaco) para a direita (transparente): o avião vive
   na metade direita da arte, o texto na esquerda. Sem isso o título cairia em
   cima da fuselagem.
   O `background-color` + gradiente radial abaixo da imagem é FALLBACK real —
   enquanto o arquivo não existir, o palco ainda lê como céu noturno com o
   clarão vermelho, em vez de um bloco vazio. */
.avs-stage {
    position: relative;
    min-height: 268px;
    background-color: #080a0c;
    background-image:
        radial-gradient(120% 140% at 78% 55%, rgba(var(--avs-red-rgb), .30), transparent 62%),
        radial-gradient(80% 120% at 100% 50%, rgba(var(--avs-red-rgb), .18), transparent 70%),
        url('/assets/aviator/aviator-soon.webp');
    background-size: cover, cover, cover;
    background-position: center, center, 68% center;
    background-repeat: no-repeat;
}
.avs-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, var(--avs-void) 6%, rgba(11, 14, 17, .92) 30%, rgba(11, 14, 17, .35) 62%, transparent 86%),
        linear-gradient(to bottom, transparent 62%, var(--avs-void) 99%);
}

.avs-stage-inner {
    position: relative;
    z-index: 1;
    padding: 2.1rem 2.2rem 1.6rem;
    max-width: 33rem;
}

/* Rótulo-placa: mono, caixa alta, tracking largo. É o vocabulário de
   instrumento — e o que separa esta tipografia de um "eyebrow" qualquer. */
.avs-plate-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--avs-mono);
    font-size: .66rem;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--avs-dim);
    border: 1px solid var(--avs-line);
    border-radius: 3px;
    padding: .3rem .55rem;
    background: rgba(0, 0, 0, .35);
}
.avs-beacon {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--avs-red);
    box-shadow: 0 0 0 0 rgba(var(--avs-red-rgb), .7);
    animation: avsBeacon 2.4s ease-out infinite;
}
@keyframes avsBeacon {
    0%   { box-shadow: 0 0 0 0 rgba(var(--avs-red-rgb), .65); }
    70%  { box-shadow: 0 0 0 9px rgba(var(--avs-red-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--avs-red-rgb), 0); }
}

.avs-title {
    margin: 1rem 0 .55rem;
    font-size: clamp(1.85rem, 4.2vw, 2.9rem);
    line-height: 1.03;
    letter-spacing: -.032em;
    font-weight: 600;
    color: var(--avs-txt);
}
.avs-title em {
    font-style: normal;
    color: var(--avs-red);
}
.avs-lede {
    margin: 0;
    max-width: 30rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--avs-dim);
}

/* ─── Faixa de dados: o altímetro ─────────────────────────────────────────
   Único lugar com ciano. Preenchida com multiplicadores REAIS do feed quando a
   rota responde; se falhar, some inteira (sem esqueleto, sem mentira). */
.avs-readout {
    display: none;
    align-items: center;
    gap: .55rem;
    padding: .7rem 2.2rem;
    border-top: 1px solid var(--avs-line);
    border-bottom: 1px solid var(--avs-line);
    background: #0a0d10;
    overflow-x: auto;
    scrollbar-width: none;
}
.avs-readout::-webkit-scrollbar { display: none; }
.avs-readout.is-on { display: flex; }
.avs-readout-label {
    flex: none;
    font-family: var(--avs-mono);
    font-size: .6rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--avs-dim);
}
.avs-mult {
    flex: none;
    font-family: var(--avs-mono);
    font-size: .76rem;
    color: var(--avs-cyan);
    border: 1px solid rgba(13, 202, 240, .22);
    background: rgba(13, 202, 240, .07);
    border-radius: 3px;
    padding: .16rem .42rem;
}
.avs-mult--hi {
    color: var(--avs-red);
    border-color: rgba(var(--avs-red-rgb), .3);
    background: rgba(var(--avs-red-rgb), .09);
}

/* ─── Quadro de bordo: jogadores do feed ──────────────────────────────────
   Linha de painel de embarque: nome à esquerda, números alinhados à direita em
   mono. O lucro é o único valor com peso; acerto e saída média ficam em corpo
   menor logo abaixo — juntos, contam a estratégia inteira em vez de só a parte
   boa. */
.avs-board {
    padding: 1.3rem 2.2rem 1.1rem;
    border-top: 1px solid var(--avs-line);
    background: #0a0d10;
}
.avs-board[hidden] { display: none; }

.avs-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}
.avs-board-title,
.avs-board-scope {
    font-family: var(--avs-mono);
    font-size: .63rem;
    letter-spacing: .19em;
    text-transform: uppercase;
    margin: 0;
}
.avs-board-title { color: var(--avs-txt); font-weight: 600; }
.avs-board-scope { color: var(--avs-dim); letter-spacing: .12em; }

.avs-board-list { list-style: none; margin: 0; padding: 0; }
.avs-board-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .58rem 0;
    border-top: 1px solid var(--avs-line);
}
.avs-board-row:first-child { border-top: 0; }

.avs-board-name {
    font-family: var(--avs-mono);
    font-size: .84rem;
    color: var(--avs-txt);
    letter-spacing: .04em;
}
.avs-board-sub {
    display: block;
    font-family: var(--avs-mono);
    font-size: .68rem;
    color: var(--avs-dim);
    margin-top: .18rem;
    letter-spacing: .02em;
}
.avs-board-profit {
    font-family: var(--avs-mono);
    font-size: .92rem;
    font-weight: 600;
    color: #4ade80;              /* verde de lucro — não é o vermelho da marca */
    white-space: nowrap;
}
.avs-board-profit.is-neg { color: var(--avs-red); }

.avs-board-foot {
    margin: .7rem 0 0;
    font-size: .7rem;
    line-height: 1.4;
    color: var(--avs-dim);
}

/* ─── Checklist de decolagem ──────────────────────────────────────────────
   A estrutura CODIFICA estado real (pronto / em teste / aguardando). Não é
   enumeração decorativa: a ordem é a sequência real de liberação. */
.avs-body { padding: 1.5rem 2.2rem 1.7rem; }

.avs-check-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.avs-check-title {
    font-family: var(--avs-mono);
    font-size: .63rem;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--avs-dim);
    margin: 0;
}
.avs-progress {
    font-family: var(--avs-mono);
    font-size: .63rem;
    letter-spacing: .1em;
    color: var(--avs-dim);
}
.avs-progress b { color: var(--avs-txt); font-weight: 600; }

.avs-list { list-style: none; margin: 0; padding: 0; }
.avs-item {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .62rem 0;
    border-top: 1px solid var(--avs-line);
}
.avs-item:first-child { border-top: 0; }

/* Glifo quadrado (não ✓ redondo): placa de instrumento, não app de tarefas. */
.avs-glyph {
    width: 11px; height: 11px;
    border: 1px solid var(--avs-dim);
    border-radius: 2px;
    position: relative;
}
.avs-item[data-status="pronto"] .avs-glyph {
    border-color: var(--avs-red);
    background: var(--avs-red);
}
.avs-item[data-status="pronto"] .avs-glyph::after {
    content: '';
    position: absolute; left: 3px; top: 0;
    width: 3px; height: 7px;
    border: solid #fff; border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
}
.avs-item[data-status="testando"] .avs-glyph {
    border-color: var(--avs-red);
    background: linear-gradient(135deg, var(--avs-red) 50%, transparent 50%);
}
.avs-item-name { font-size: .9rem; color: var(--avs-txt); }
.avs-item-note { display: block; font-size: .76rem; color: var(--avs-dim); margin-top: .1rem; }
.avs-item-status {
    font-family: var(--avs-mono);
    font-size: .62rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--avs-dim);
    white-space: nowrap;
}
.avs-item[data-status="pronto"] .avs-item-status { color: var(--avs-red); }

/* ─── Diferencial: rodada compartilhada ───────────────────────────────────
   Fica colado na faixa de multiplicadores porque ela é a EVIDÊNCIA do que o
   texto afirma. Fundo levemente ciano (o tom de instrumento), não vermelho: é
   informação, não alerta. */
.avs-edge {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: .85rem;
    align-items: start;
    padding: 1rem 2.2rem 1.1rem;
    border-bottom: 1px solid var(--avs-line);
    background: linear-gradient(180deg, rgba(13, 202, 240, .05), transparent);
}
.avs-edge-mark {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(13, 202, 240, .1);
    border: 1px solid rgba(13, 202, 240, .24);
    color: var(--avs-cyan);
    font-size: .95rem;
}
.avs-edge-title {
    margin: .1rem 0 .3rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--avs-txt);
    letter-spacing: -.01em;
}
.avs-edge-text {
    margin: 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--avs-dim);
}

/* ─── Vagas restantes ─────────────────────────────────────────────────────
   Número REAL vindo de /api/vagas. Nunca um contador decorativo: se o dado não
   vier, o bloco fica oculto em vez de mostrar um valor inventado. */
.avs-vagas {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-right: auto;
}
.avs-vagas[hidden] { display: none; }
.avs-vagas-num {
    font-family: var(--avs-mono);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--avs-red);
    line-height: 1;
}
.avs-vagas-lbl {
    font-family: var(--avs-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--avs-dim);
}

/* ─── Passo de confirmação ────────────────────────────────────────────── */
.avs-confirm { display: block; }
.avs-confirm[hidden] { display: none; }
.avs-confirm-title {
    margin: 0 0 .7rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--avs-txt);
}
.avs-confirm-list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}
.avs-confirm-list li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: .5rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--avs-dim);
}
.avs-confirm-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .5rem;
    width: 5px; height: 5px;
    border-radius: 1px;
    background: var(--avs-red);
}
.avs-confirm-list b { color: var(--avs-txt); font-weight: 600; }
.avs-confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.avs-confirm-err {
    margin: .8rem 0 0;
    font-size: .8rem;
    color: #ffc2cb;
    background: rgba(var(--avs-red-rgb), .12);
    border: 1px solid rgba(var(--avs-red-rgb), .35);
    border-radius: 8px;
    padding: .5rem .7rem;
}
.avs-confirm-err[hidden] { display: none; }

/* ─── Passo final ─────────────────────────────────────────────────────── */
.avs-done { display: flex; align-items: center; gap: .9rem; }
.avs-done[hidden] { display: none; }
.avs-done-mark {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(74, 222, 128, .12);
    border: 1px solid rgba(74, 222, 128, .35);
    color: #4ade80;
}
.avs-done-title { margin: 0; font-size: .95rem; font-weight: 600; color: var(--avs-txt); }
.avs-done-text  { margin: .15rem 0 0; font-size: .82rem; color: var(--avs-dim); }
.avs-done .avs-btn { margin-left: auto; }

/* ─── Rodapé ──────────────────────────────────────────────────────────── */
.avs-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 2.2rem 1.6rem;
    border-top: 1px solid var(--avs-line);
}
.avs-foot-note {
    font-size: .78rem;
    color: var(--avs-dim);
    margin: 0;
}
.avs-actions { display: flex; gap: .6rem; }
.avs-btn {
    border-radius: 8px;
    padding: .55rem 1.05rem;
    font-size: .86rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.avs-btn--primary { background: var(--avs-red); color: #fff; }
.avs-btn--primary:hover { background: #ff3d5c; }
.avs-btn--ghost {
    background: transparent;
    border-color: var(--avs-line);
    color: var(--avs-dim);
}
.avs-btn--ghost:hover { color: var(--avs-txt); border-color: #2b323a; }
.avs-btn:focus-visible {
    outline: 2px solid rgba(var(--avs-red-rgb), .6);
    outline-offset: 2px;
}

.avs-x {
    position: absolute; top: .85rem; right: .95rem; z-index: 2;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--avs-line);
    background: rgba(8, 10, 12, .6);
    color: var(--avs-dim);
    cursor: pointer;
}
.avs-x:hover { color: var(--avs-txt); }
.avs-x:focus-visible { outline: 2px solid rgba(var(--avs-red-rgb), .6); outline-offset: 2px; }

/* ─── Entrada: UMA sequência orquestrada, não efeitos soltos ─────────────── */
.avs-card { animation: avsCardIn .34s cubic-bezier(.22, .8, .3, 1) both; }
.avs-stage-inner > * { animation: avsRise .42s cubic-bezier(.22, .8, .3, 1) both; }
.avs-stage-inner > *:nth-child(1) { animation-delay: .07s; }
.avs-stage-inner > *:nth-child(2) { animation-delay: .13s; }
.avs-stage-inner > *:nth-child(3) { animation-delay: .19s; }
.avs-item { animation: avsRise .38s cubic-bezier(.22, .8, .3, 1) both; }
.avs-item:nth-child(1) { animation-delay: .26s; }
.avs-item:nth-child(2) { animation-delay: .31s; }
.avs-item:nth-child(3) { animation-delay: .36s; }
.avs-item:nth-child(4) { animation-delay: .41s; }

@keyframes avsCardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes avsRise   { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .avs-card, .avs-stage-inner > *, .avs-item { animation: none !important; }
    .avs-beacon { animation: none !important; }
}

/* ─── Responsivo ──────────────────────────────────────────────────────────
   No estreito o avião perde a briga com o texto: puxamos o enquadramento para
   a direita (onde está a fuselagem) e fechamos o scrim quase todo, para o
   título continuar legível. */
@media (max-width: 640px) {
    .avs-stage { min-height: 210px; background-position: center, center, 76% center; }
    .avs-stage::after {
        background:
            linear-gradient(180deg, rgba(11, 14, 17, .55) 0%, rgba(11, 14, 17, .9) 62%, var(--avs-void) 100%);
    }
    .avs-stage-inner { padding: 1.5rem 1.25rem 1.2rem; }
    .avs-body, .avs-foot { padding-left: 1.25rem; padding-right: 1.25rem; }
    .avs-readout { padding-left: 1.25rem; padding-right: 1.25rem; }
    .avs-foot { justify-content: stretch; }
    .avs-actions { width: 100%; }
    .avs-btn { flex: 1; }
}