/* =============================================================================
 * FAIXA DE PRÊMIOS DO TOPO — a tela de escolher as dezenas (rota /v/{token})
 * -----------------------------------------------------------------------------
 * Por que este arquivo existe e não é Tailwind:
 *
 * 🔑 O CSS do painel é compilado pelo Vite, e nenhuma máquina daqui tem
 *    `node_modules` para rebuildar. Classe nova de Tailwind no Blade não vira
 *    NADA em produção — a faixa sairia empilhada, sem erro nenhum. Então o
 *    desenho mora aqui, em CSS de verdade, com classes próprias.
 *
 * 🔑 Ele entra pela URL versionada (`App\Support\Arte::url(...)`) porque a
 *    hospedagem guarda uma cópia gzipada do estático por SETE DIAS: arquivo
 *    trocado sem trocar a URL não chega no celular do cliente.
 *
 * 🔑 Nenhuma cor está escrita à mão. Tudo sai das variáveis do tema
 *    (`--ct-*`), porque esta tela roda nos três temas do sistema (padrão,
 *    claro e escuro) e uma faixa com azul fixo ficaria cega no escuro.
 *
 * ⚠️ A REGRA DE ALTURA: aqui é a tela de COMPRAR, não uma segunda home. A
 *    faixa inteira cabe em ~200px no celular, de propósito — a grade das
 *    dezenas tem que continuar acima da dobra. Qualquer coisa que se
 *    acrescente aqui empurra para baixo o que a pessoa veio fazer.
 * ========================================================================== */

.premios-topo {
    /* -------------------------------------------------------------------------
     | AS MEDIDAS EM UM LUGAR SÓ
     |
     | Mexer na faixa é mexer nestes números — o resto do arquivo se acomoda
     | sozinho. O degrau de computador (lá embaixo) só troca estes valores.
     ---------------------------------------------------------------------- */
    --pt-cartela: 118px; /* largura da arte — e, por tabela, a ALTURA da faixa */
    --pt-carro: 92px; /* altura máxima da foto do 1º prêmio */
    --pt-saco: 26px; /* largura do saco de dinheiro */
    --pt-vao: 8px; /* respiro entre os cards */

    position: relative;
    margin-bottom: 1rem;
    padding: 10px 12px 4px;
    border: 1px solid var(--ct-borda);
    border-radius: 1rem;
    background-color: var(--ct-superficie);
}

/* -----------------------------------------------------------------------------
 * A LINHA DE CIMA — extração e data
 * -----------------------------------------------------------------------------
 * O que era um bloco de texto de três linhas virou uma linha só de 10px. A
 * informação não sumiu (ele precisa dela para conferir o bilhete depois); ela
 * só parou de ocupar o lugar do que vende.
 * -------------------------------------------------------------------------- */
.premios-topo__meta {
    /* Margem zerada à mão: este arquivo carrega DEPOIS do CSS do painel, e um
       `<p>` com a margem padrão do navegador abriria 16px aqui em cima. */
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.premios-topo__extracao {
    font-weight: 800;
    color: var(--ct-texto);
}

.premios-topo__sorteio {
    font-weight: 700;
    color: var(--ct-texto-suave);
}

/* -----------------------------------------------------------------------------
 * A FAIXA: cartela à esquerda, prêmios à direita
 * -------------------------------------------------------------------------- */
.premios-topo__faixa {
    display: flex;
    /*
     | 🔑 ESTICAR, NÃO CENTRALIZAR (31/08/2026).
     |
     | Ordem dele, com a foto e os traços: a coluna dos prêmios tinha que ir do
     | topo ao pé da CARTELA — *"eles ficaram desalinhados com o tamanho da
     | cartela... você aumenta só o container do primeiro prêmio"*.
     |
     | Com `stretch` as duas colunas passam a ter a MESMA altura em qualquer
     | largura de tela, e a sobra cai toda no card do 1º prêmio (é ele que tem
     | `flex: 1`). Nada de número mágico: o alinhamento se refaz sozinho quando
     | a arte, o texto do prêmio ou a largura do aparelho mudam.
     |
     | O `padding-bottom` é o espaço da ETIQUETA DE PREÇO, que é absoluta e
     | pendura 10px abaixo da arte. Sem ele a etiqueta ficaria para fora da
     | faixa e a coluna dos prêmios pareceria curta de novo — que é exatamente o
     | que ele marcou de azul.
     */
    align-items: stretch;
    padding-bottom: 10px;
    gap: 10px;
}

/* -----------------------------------------------------------------------------
 * A MINIATURA DA CARTELA
 * -----------------------------------------------------------------------------
 * Largura fixa e `flex: none`: a arte é 1080×1350 e, sem trava, o flex a
 * deixaria roubar a metade da faixa dos prêmios no computador.
 * -------------------------------------------------------------------------- */
.premios-topo__cartela {
    position: relative;
    flex: none;
    width: var(--pt-cartela);
    /* A coluna estica; a ARTE não. Ela fica onde sempre esteve. */
    align-self: flex-start;
}

.premios-topo__cartela img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* Contorno em vez de sombra: a arte já tem borda clara e no tema escuro
       ela encostaria no fundo sem isso. */
    box-shadow: 0 0 0 1px var(--ct-borda), 0 2px 6px rgba(18, 21, 40, 0.14);
}

/* A ETIQUETA DE PREÇO.
   É a informação que fecha a venda — por isso ela monta em cima da arte, na
   cor de destaque, como preço de vitrine de loja. Fica dentro do campo de
   visão de quem está olhando a cartela, sem gastar uma linha de texto. */
.premios-topo__preco {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: var(--ct-destaque);
    /* O mesmo par de cores da dezena filtrada dentro da cartela — o amarelo
       do tema é claro nos três temas, então a tinta escura é fixa. */
    color: #1b1f33;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(18, 21, 40, 0.28);
}

.premios-topo__preco small {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* -----------------------------------------------------------------------------
 * A COLUNA DOS PRÊMIOS
 * -----------------------------------------------------------------------------
 * `min-width: 0` é obrigatório: sem ele o nome do prêmio (texto livre, pode
 * vir grande) estoura o flex e empurra a cartela para fora da tela.
 * -------------------------------------------------------------------------- */
.premios-topo__premios {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pt-vao);
}

/*
 | Quem cresce é o card do 1º prêmio. O 2º e o 3º ficam do tamanho que já
 | tinham — pedido dele: *"manter a caixa do segundo e do terceiro prêmio como
 | tá, e aumentar só o container do primeiro"*.
 |
 | ⚠️ `flex-basis: 0` E `min-height: 0`, NÃO `auto`. Com `auto` o card entra na
 |    conta com a altura do próprio conteúdo (a foto do carro), e aí é a COLUNA
 |    que puxa a faixa para baixo — a arte fica curta e o desalinho volta, só que
 |    invertido. Com base zero, quem manda na altura é a ARTE, e o card recebe
 |    exatamente a sobra. É isso que faz o topo e o pé baterem em qualquer
 |    largura de tela, sem número mágico.
 */
.premios-topo__premios > .premios-topo__primeiro {
    flex: 1 1 0;
    min-height: 0;
}

.premios-topo__premios > .premios-topo__duo {
    flex: none;
}

/* O card de prêmio — o mesmo desenho para os três, como na home: nenhum tem
   cara de "selecionado". */
.premios-topo__card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ct-borda);
    border-radius: 10px;
    /* Um degrau de fundo em relação à faixa. Funciona nos três temas porque
       `--ct-fundo` e `--ct-superficie` nunca são a mesma cor. */
    background-color: var(--ct-fundo);
}

/* A tarja do título, encaixada no canto de cima — igual à da home. */
.premios-topo__tarja {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 9px;
    border-bottom-right-radius: 8px;
    background-color: var(--ct-primaria);
    color: var(--ct-primaria-texto);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 1º PRÊMIO — o carro é o destaque
 * -------------------------------------------------------------------------- */
/*
 | 🚗 31/08/2026 — O CARRO CRESCEU. Ordem dele: *"a foto do carro eu quero que
 |    aumente dentro do containerzinho, o máximo que der... não precisa se
 |    preocupar com o pad se ficar muito pequeno para deixar o carro maior"*.
 |
 |    O que mudou: a coluna do texto encolheu de 44% para 40%, a altura máxima
 |    da foto subiu de 56px para 74px (92px no computador) e a foto passou a
 |    INVADIR o padding da direita e de baixo por margem negativa. É esta última
 |    parte que dá o ganho de verdade — sem ela o carro esbarra num respiro de
 |    8px que existia só para o texto.
 */
.premios-topo__primeiro {
    display: grid;
    /*
     | ⚠️ QUEM LIMITA O CARRO É A LARGURA, não a altura. Medido em produção: a
     |    proporção da foto (755×316) devolve pouco mais de um terço da largura
     |    em altura, então ela quase nunca encosta no teto de `--pt-carro`. Quem
     |    quiser o carro maior mexe AQUI, na coluna do texto.
     |
     | ⚠️ POR QUE `minmax`, E NÃO UMA PORCENTAGEM SECA. Medido nas três larguras:
     |    com `30%` fixo, num celular de 390px a coluna do texto cai para 56px e
     |    o prêmio vira QUATRO linhas — o "+ 50 mil reais" que ele pediu na
     |    segunda linha se desfaz. Os 76px são o piso medido em que o texto ainda
     |    fecha em duas linhas num aparelho de 360px.
     |
     |    Assim os dois casos ficam certos: no celular o texto manda e o carro
     |    fica com o que sobra; do tablet para cima os 30% soltam a foto.
     */
    grid-template-columns: minmax(76px, 30%) 1fr;
    align-items: center;
    gap: 6px;
    /* O respiro de cima é o tamanho da tarja: ela é absoluta e não empurra
       nada, então quem abre espaço para ela é o padding. */
    padding: 20px 8px 8px;
}

.premios-topo__primeiro p {
    margin: 0;
    min-width: 0;
    color: var(--ct-texto);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    /* Nome de prêmio é texto livre: "HB20" não pode ser quebrado no meio, mas
       um nome comprido também não pode furar o card. */
    overflow-wrap: break-word;
}

/* Sem foto de prêmio cadastrada o nome fica sozinho — e aí ele toma a linha
   inteira, em vez de se espremer em 44% e deixar meio card vazio. */
.premios-topo__primeiro p:last-child {
    grid-column: 1 / -1;
    text-align: center;
}

.premios-topo__carro {
    display: block;
    justify-self: end;
    width: 100%;
    height: auto;
    max-height: var(--pt-carro);
    /*
     | COME O PADDING DOS TRÊS LADOS que sobram — direita, baixo e TOPO.
     |
     | 🔑 O topo é o que ninguém espera poder usar: aqueles 20px existem para a
     |    tarja "1º PRÊMIO", que é absoluta e ocupa só o canto de CIMA À
     |    ESQUERDA. Do lado do carro aquele espaço estava vazio — foi o que ele
     |    apontou na segunda foto: *"ainda tem espaço para aumentar a imagem do
     |    carro, tem espaço superior ainda"*.
     |
     | O card foi desenhado com respiro para TEXTO; a foto não precisa dele.
     */
    margin: -20px -8px -8px 0;
    /* `contain` porque a foto do prêmio pode ser trocada na tela de Campanha
       por uma de outra proporção — cortar carro pela metade não. */
    object-fit: contain;
    object-position: right center;
}

/* -----------------------------------------------------------------------------
 * 2º E 3º PRÊMIO — o saco de dinheiro e o valor, lado a lado
 * -------------------------------------------------------------------------- */
.premios-topo__duo {
    display: flex;
    gap: var(--pt-vao);
}

.premios-topo__mini {
    /* `flex: 1 1 0` com `min-width: 0`: os dois ficam em 50% exatos, e quando
       só um existe ele ocupa a linha inteira sem regra nova. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 6px 7px;
}

.premios-topo__saco {
    display: block;
    flex: none;
    width: var(--pt-saco);
    height: auto;
}

.premios-topo__mini strong {
    min-width: 0;
    color: var(--ct-primaria);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.05;
    /* Valores alinham em coluna: sem isso o "10.000,00" e o "5.000,00"
       dançam um em relação ao outro. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* -----------------------------------------------------------------------------
 * TELA GRANDE
 * -----------------------------------------------------------------------------
 * A mesma faixa, com mais ar — e só isso. Ela NÃO vira a seção de premiação da
 * home: aqui a estrela continua sendo a grade das dezenas, logo abaixo.
 * -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .premios-topo {
        --pt-cartela: 146px;
        --pt-carro: 116px;
        --pt-saco: 34px;
        --pt-vao: 10px;

        padding: 12px 16px 16px;
    }

    .premios-topo__faixa {
        gap: 16px;
    }

    .premios-topo__meta {
        font-size: 11px;
    }

    .premios-topo__preco {
        font-size: 14px;
        padding: 4px 12px;
    }

    .premios-topo__preco small {
        font-size: 8px;
    }

    .premios-topo__tarja {
        font-size: 10px;
        padding: 4px 11px;
    }

    .premios-topo__primeiro {
        grid-template-columns: minmax(96px, 34%) 1fr;
        padding: 24px 12px 10px;
    }

    .premios-topo__carro {
        margin: -24px -12px -10px 0;
    }

    .premios-topo__primeiro p {
        font-size: 13px;
    }

    .premios-topo__mini {
        padding: 24px 10px 9px;
        gap: 8px;
    }

    .premios-topo__mini strong {
        font-size: 20px;
    }
}


/* -----------------------------------------------------------------------------
 * O MODO EMBUTIDO — quando o cabeçalho é o TOPO de um cartão maior
 * -----------------------------------------------------------------------------
 * Ordem dele em 31/08/2026, com a foto circulando três bordas seguidas na área
 * do cliente: *"como faz parte da mesma extração, não pode ser separado... elas
 * ficam dentro do mesmo container. Se tiver mais cartelas vai ficando tudo no
 * mesmo container, que corresponde à mesma extração."*
 *
 * Na página de COMPRA a faixa é um cartão sozinho e continua sendo — nada aqui
 * muda aquela tela. Nas listas de cartelas ela vira o topo do cartão da
 * extração, então larga borda, fundo e arredondado próprios: quem desenha a
 * caixa agora é o `.ct-card` de fora. O respiro embaixo vira a separação entre
 * o cabeçalho e o primeiro bilhete.
 * -------------------------------------------------------------------------- */
.premios-topo--embutida {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    margin-bottom: 12px;
}

/* -----------------------------------------------------------------------------
 * 🖼️ O BANNER NO LUGAR DA FAIXA (teste de 30/09/2026)
 * -----------------------------------------------------------------------------
 * Pedido dele: a arte como um QUADRO DE VIDRO — "espelhado, mais profissional".
 * Três camadas, nenhuma ocupa espaço no layout:
 *   · a moldura: canto arredondado, fio claro por dentro e sombra embaixo;
 *   · o vidro (::after): brilho diagonal fixo no alto, como luz no acrílico;
 *   · o reflexo (::before): uma faixa de luz que atravessa a arte UMA vez ao
 *     carregar e some — chama o olho sem virar pisca-pisca.
 * A altura sai da proporção da própria imagem (width/height no HTML).
 * -------------------------------------------------------------------------- */
.premios-topo__banner {
    position: relative;
    overflow: hidden;
    margin: 0;
    /* 1px menor que o canto da seção (1rem): encosta na curva sem vazar. */
    border-radius: 15px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 8px 18px -8px rgba(60, 10, 40, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.12);
    isolation: isolate;
}

.premios-topo__banner img {
    display: block;
    width: 100%;
    height: auto;
}

.premios-topo__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.08) 28%,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

.premios-topo__banner::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -40%;
    width: 30%;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    animation: premios-topo-reflexo 1.6s 0.6s ease-out 1 both;
    pointer-events: none;
}

/* ✨ A luz que segue o giroscópio (ou o mouse). O script da faixa escreve
   `--luz-x`, `--luz-y` e `--luz-forca`; parado, a força é zero e ela some. */
.premios-topo__luz {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--luz-forca, 0);
    background:
        radial-gradient(
            circle at var(--luz-x, 50%) var(--luz-y, 30%),
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 22%,
            rgba(255, 255, 255, 0) 48%
        ),
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0) calc(var(--luz-x, 50%) - 22%),
            rgba(255, 255, 255, 0.35) var(--luz-x, 50%),
            rgba(255, 255, 255, 0) calc(var(--luz-x, 50%) + 22%)
        );
    mix-blend-mode: screen;
}

@keyframes premios-topo-reflexo {
    from { left: -40%; }
    to { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .premios-topo__banner::before {
        animation: none;
        display: none;
    }
}

/* 📐 COM BANNER, A MOLDURA DA SEÇÃO ENCOLHE (30/09/2026, pedido dele): 3px
   nos lados e 1px embaixo — com 1px nos lados a arte parecia montar na borda. Só a linha
   do concurso/data mantém o respiro, senão o texto colaria no canto. Vale em
   qualquer largura de tela — por isso vem DEPOIS do degrau de computador. */
/* ⚠️ Só na seção que É o cartão (página de compra). A `--embutida` (Minhas
   cartelas e afins) já mora dentro de outro cartão e fica sem moldura própria. */
.premios-topo:not(.premios-topo--embutida):has(.premios-topo__banner) {
    padding: 10px 3px 1px;
}

.premios-topo:not(.premios-topo--embutida):has(.premios-topo__banner) .premios-topo__meta {
    padding: 0 9px;
}

@media (min-width: 640px) {
    .premios-topo:not(.premios-topo--embutida):has(.premios-topo__banner) {
        padding: 12px 3px 1px;
    }

    .premios-topo:not(.premios-topo--embutida):has(.premios-topo__banner) .premios-topo__meta {
        padding: 0 13px;
    }
}

/* 📐 BANNER NA VERSÃO EMBUTIDA (Minhas cartelas e afins) — 30/09/2026, pedido
   dele: 3px de folga de cada lado, como na página de compra. A folga aqui é do
   `.ct-card` de fora (12px no celular, pelo `bolas.css`; 20px do `p-5` acima de
   620px), então o banner é puxado para fora com margem negativa: sobra 3px. */
.premios-topo--embutida .premios-topo__banner {
    margin-left: -9px;
    margin-right: -9px;
}

@media (min-width: 621px) {
    .premios-topo--embutida .premios-topo__banner {
        margin-left: -17px;
        margin-right: -17px;
    }
}