/* =============================================================================
 * A CARTELA CARIMBADA — frente, verso, o gesto de virar e a cena do selo
 * -----------------------------------------------------------------------------
 * 📌 O NÚMERO NO NOME (`-v4`) é a proteção contra o cache de estático da
 *    hospedagem, que guarda cópia comprimida por dias. A query `?v=` do
 *    `Arte::url()` continua valendo; o nome é o cinto de segurança para quando
 *    uma mudança PRECISA chegar na mesma hora. Se for o caso, suba o número e
 *    troque a referência em `publico/pagamento.blade.php`.
 * -----------------------------------------------------------------------------
 * 🔑 UM ARQUIVO SÓ, usado pelas duas prévias (a bancada do verso e a tela de
 *    confirmação do pagamento). A cartela já foi desenhada duas vezes neste
 *    projeto e as duas cópias divergiram na primeira correção — aqui ela mora
 *    num lugar, e quem quiser mudar muda uma vez.
 *
 * ⚠️ Classe nova de Tailwind NÃO existe em produção (nenhuma máquina tem
 *    `node_modules`): o que se usa daqui é só o que a vitrine já usa
 *    (`grid-cols-10`, `gap-1`, `aspect-square`, `text-[11px]`). O resto é CSS
 *    de verdade, escrito aqui.
 *
 * Depende de duas folhas de produção, carregadas pela página:
 *   · assets/cliente/css/bolas.css        — as bolas das dezenas
 *   · assets/cliente/css/premios-topo.css — os cards da premiação
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * A CENA — duas faces do MESMO objeto
 *
 * A frente é a arte da campanha, com o selo; o verso é desenhado pelo sistema.
 * 🔑 As duas moram na MESMA célula de grade: a altura é a da face mais alta e
 *    nada pula quando a cartela vira.
 * -------------------------------------------------------------------------- */
.cena {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    perspective: 1400px;
    /* 🔑 A cartela se mede por SI, não pela janela: dentro de um card, de um
       carrossel ou de um PWA estreito, o que importa é a largura que ela
       recebeu. É por isso que o verso compacta com `@container`, no fim. */
    container-type: inline-size;
    container-name: cartela;
    /* 🔑 `pan-y`: o dedo para cima e para baixo ROLA A PÁGINA, e é só isso que
       ele faz. O arrasto vertical chegou a virar a cartela e foi retirado a
       pedido dele — custava a rolagem, e a cartela ocupa a tela quase toda. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.carta {
    display: grid;
    transform-style: preserve-3d;

    /* 🔑 `pan-y` TAMBÉM AQUI (20/09/2026). A `.cena` já declarava, e o navegador
       cruza a cadeia — mas declarar no elemento que recebe o dedo tira qualquer
       dúvida: o arrasto lateral é do giro da cartela, nunca do gesto de voltar
       página do Android. Foi assim que o carrossel de "Minhas cartelas" parou de
       só andar para um lado. */
    touch-action: pan-y;
    transition: transform 620ms cubic-bezier(.2, .8, .25, 1);
    cursor: grab;
}

.carta.arrastando {
    transition: none;               /* enquanto o dedo manda, sem inércia */
    cursor: grabbing;
}

.carta.virada { transform: rotateY(180deg); }

.face {
    grid-area: 1 / 1;               /* uma face em cima da outra */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    overflow: hidden;
}

/* 🔴 A ARTE É A RÉGUA — 13/09/2026, no teste de estresse dele.
   O selo, a onda e o polimento são medidos em PORCENTAGEM, e a pergunta é: por
   cento de quê? Estavam presos à FACE — e a face tem a altura da face mais alta,
   porque as duas dividem a mesma célula da grade. Em tela estreita a arte
   encolhe, o VERSO passa a ser o mais alto, e o selo, ainda contando a altura da
   face, desce para fora do retângulo branco, com uma faixa sobrando embaixo da
   cartela. Ele viu isso em 370px, e escancarado em 330px.

   O `.papel` abraça a arte e só ela: tudo o que vai em cima da cartela é filho
   dele, então acompanha a imagem em qualquer largura de tela. */
.face--frente {
    position: relative;
    display: flex;
    justify-content: center;
}

/* 🔴 O PAPEL PREENCHE A FACE — 13/09/2026. Quando o verso é 2 ou 3 pixels mais
   alto que a arte, a face estica e a arte não: sobra uma FAIXA do fundo em cima
   e embaixo da cartela, que foi o que ele circulou na foto. Com o papel ocupando
   a face inteira, não há fundo para aparecer.

   ⚠️ `fill` no lugar de `auto`: a arte estica os poucos pixels da diferença.
   É invisível (menos de 1% em ~580px de altura) e o selo continua no lugar,
   porque ele é medido pelo PAPEL — que agora é exatamente a face. */
.papel {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 0;              /* sem o vão que o `inline` deixa sob a imagem */
}

.papel img.arte { display: block; width: 100%; height: 100%; object-fit: fill; }

/* 🔑 `flex` em coluna: as duas faces têm a mesma altura (a da arte), e é o
   CANHOTO que desce até o rodapé — como no papel, onde ele é a última faixa. */
.face--verso {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ct-borda);
    color: var(--ct-texto);
    text-align: left;
}

/* -----------------------------------------------------------------------------
 * O SELO NA FRENTE
 *
 * Medida tirada da própria arte: o retângulo "COLE AQUI O SEU SELO" mora em
 * 30,71% / 72,43%, com 38,49% de largura e 20,25% de altura. Guardado em
 * PORCENTAGEM, nunca em pixel — a arte encolhe com a largura do celular e o
 * selo tem de encolher junto. Meio ponto de sangria em volta para não sobrar
 * fiapo branco quando o navegador redimensiona.
 * -------------------------------------------------------------------------- */
.selo-na-arte {
    position: absolute;
    left: 30.2%; top: 72.1%; width: 39.5%; height: 20.9%;
    container-type: size;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3));
}

/* ⚠️ `fill`, não `contain`: o espaço em branco é 366x335 e o selo é quase
   quadrado — com `contain` sobram as faixas brancas dos lados. O texto NÃO é
   esticado junto, porque é filho do retângulo e não da imagem. */
.selo-na-arte img { display: block; width: 100%; height: 100%; object-fit: fill; }

.selo-campo {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    color: #14100a; line-height: 1; white-space: nowrap; letter-spacing: .01em;
}

/* `cqh` = 1% da altura do selo JÁ esticado: a letra acompanha o tamanho sem
   herdar o achatamento da imagem. */
.selo-numero   { left: 29.6%; width: 50.4%; top: 44.5%; height: 9.9%; font-size: 9.2cqh; }
.selo-data     { left: 28.7%; width: 52.1%; top: 56.2%; height: 9.5%; font-size: 8.8cqh; }
.selo-concurso { left: 35.7%; width: 28.6%; top: 83.3%; height: 8.5%; font-size: 9.6cqh; }

/* =============================================================================
 * O VERSO — desenhado, campo por campo, a partir da venda
 * Não existe imagem de fundo: é o lado do canhoto, mas sem picote, porque
 * cartela digital não se corta.
 * ========================================================================== */
.verso-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ct-primaria);
    color: #fff;
}

/* A logo e, AO LADO dela, o nome do produto em duas linhas. Embaixo da logo o
   texto roubava a altura de que a marca precisava. */
.verso-marca { display: flex; align-items: center; gap: 9px; }
.verso-marca img { display: block; height: 44px; width: auto; }

.verso-marca-nome {
    display: flex; flex-direction: column;
    line-height: 1.05;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.verso-marca-nome b { font-size: 12px; font-weight: 800; }
.verso-marca-nome i { font-style: normal; font-size: 11px; font-weight: 600; opacity: .85; }

.verso-identificacao {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

/* 🔑 Rótulo à ESQUERDA, número à DIREITA, na MESMA linha. Empilhado, o número
   descia para o meio do cabeçalho e desalinhava tudo. */
.verso-linha-bilhete {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.verso-rotulo {
    font-size: 8px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; opacity: .8;
    white-space: nowrap;
}

.verso-bilhete {
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 17px; font-weight: 700; letter-spacing: .06em;
    line-height: 1.15;
}

.verso-sorteio {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 10px; font-weight: 700;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * AS TRÊS FAIXAS DE PRÊMIO
 * 🔑 Na ordem do papel: 3º em cima, 1º embaixo. As três grades são IDÊNTICAS —
 *    é a mesma cartela concorrendo aos três prêmios.
 * -------------------------------------------------------------------------- */
.verso-premios { padding: 10px 12px 6px; }

.verso-faixa { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.verso-faixa + .verso-faixa { border-top: 1px dashed var(--ct-borda); }

.verso-faixa-rotulo {
    flex: 0 0 34px;
    text-align: center;
    line-height: 1.05;
    color: var(--ct-texto-suave);
}

.verso-faixa-rotulo b { display: block; font-size: 15px; color: var(--ct-texto); }
.verso-faixa-rotulo span { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

.verso-dezenas { flex: 1 1 0; }

/* -----------------------------------------------------------------------------
 * A PREMIAÇÃO DO CONCURSO — o vão entre as dezenas e o canhoto
 *
 * Os dados são os MESMOS da faixa da página de compra e saem da campanha DA
 * EXTRAÇÃO da venda: a 231 mostra a premiação da 231, para sempre.
 * ⚠️ Só a ARRUMAÇÃO muda: lá o 1º prêmio é grande e o 2º e o 3º ficam embaixo;
 *    aqui os três ficam LADO A LADO, porque o vão é baixo e largo.
 * -------------------------------------------------------------------------- */
.verso-premiacao {
    flex: 1 1 auto;                 /* ocupa o vão que sobrar */
    display: flex;
    align-items: center;
    padding: 4px 12px 10px;
}

/* O 1º prêmio tem texto de verdade e foto: leva quase o dobro da largura. O 2º
   e o 3º mostram um número só e sobrava espaço vazio dos dois lados. */
.verso-premiacao__linha {
    display: grid;
    grid-template-columns: 1.7fr .9fr .9fr;
    gap: 6px;
    width: 100%;
}

/* O card é o da compra (`premios-topo__card`); o que muda é o miolo, que aqui
   empilha imagem e valor em vez de pô-los lado a lado. */
.verso-premio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 18px 5px 7px;
    min-height: 86px;
    text-align: center;
}

.verso-premio img { display: block; width: auto; max-width: 100%; object-fit: contain; }

/* 🚗 O 1º PRÊMIO GANHOU AR — 13/09/2026: *"o carro está espremido na parte
   superior e o texto está pegando duas linhas; o texto podia ficar só uma linha
   reta embaixo, o carro podia ficar maior e ter mais espaço"*.

   O ganho veio do texto: em uma linha ele devolve ~11px de altura, e é isso que
   o carro ocupa. A altura do card não muda — se mudasse, o verso passaria a ser
   mais alto que a arte nas telas estreitas, e aí a cartela é que sofreria. */
.verso-premio--primeiro { padding: 19px 6px 5px; gap: 1px; }

.verso-premio--primeiro img {
    max-height: 58px;
    width: 100%;
    object-fit: contain;
}

/* Uma linha só, e a fonte encolhe o quanto precisar para caber sem cortar o
   nome do prêmio. */
.verso-premio--primeiro p {
    font-size: 8.5px;
    line-height: 1.15;
}

.verso-premio--mini { padding: 17px 4px 7px; }
.verso-premio--mini img { width: 20px; }

/* Card estreito pede tarja estreita: em 9px o rótulo do 2º e do 3º empurrava a
   largura do card de volta. */
.verso-premio--mini .premios-topo__tarja { font-size: 8px; padding: 3px 6px; }

.verso-premio p {
    margin: 0;
    font-size: 9px; font-weight: 800; line-height: 1.2;
    color: var(--ct-texto);
    overflow-wrap: break-word;
}

.verso-premio strong {
    color: var(--ct-primaria);
    font-size: 14px; font-weight: 900; line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * O CANHOTO
 * Sem tesoura e sem repetir bilhete/concurso/data: num produto digital nada se
 * destaca do resto, então o dado do cabeçalho continua valendo aqui embaixo.
 * -------------------------------------------------------------------------- */
/* 🟡 A LINHA QUE SEPARA O CANHOTO — dourada desde 20/09/2026.
   Ele: *"a linha já existe, mas está muito sutil; eu quero um destaque maior,
   uma linha dourada um pouco mais grossa, mas bem sutil"*.

   🔑 O tom é o MESMO da moldura e do selo — é a cor que a cartela já usa para
      dizer "isto é seu". Cinza ali era só uma divisória; dourado amarra o
      canhoto ao resto do desenho.

   📌 Vale no verso inteiro, não só na compra: a cartela é a mesma em "Minhas
      cartelas". */
.verso-canhoto {
    padding: 10px 12px 12px;
    border-top: 2px solid #c08f2a;    /* o mesmo dourado da moldura da cartela */
}

.verso-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.verso-campo { min-width: 0; }
.verso-campo--largo { grid-column: 1 / -1; }

.verso-campo em {
    display: block;
    font-style: normal;
    font-size: 8px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ct-texto-suave);
}

.verso-campo b {
    display: block;
    font-size: 12px; font-weight: 600;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ct-borda);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Campo sem dado: a linha continua ali, para o canhoto não "desmontar". */
.verso-campo b:empty::after { content: '—'; color: var(--ct-borda); }

/* ---- O NOME DO COMPRADOR (e só ele) ----
   Rótulo encostado no alto, rótulo e valor centralizados e a fonte um pouco
   maior — mas no MESMO peso e na MESMA cor dos vizinhos. Em 17px e negrito o
   nome puxava a atenção da cartela inteira. ⚠️ Os outros campos não mudam. */
.verso-campo--nome { margin-top: -5px; }
.verso-campo--nome em { text-align: center; }

.verso-campo--nome b {
    text-align: center;
    font-size: 14px;
    padding-bottom: 3px;
}

/* ---- O VENDEDOR E A LOTECE, meio a meio ----
   O vendedor deixa de ocupar a linha inteira e divide a última faixa com a
   marca da Lotece Loterias — é o que fecha o verso sem sobra. */
.verso-lotece {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}

/* Discreta: ela fecha o canhoto, não disputa com os dados do cliente. */
.verso-lotece img { display: block; width: 100%; max-width: 78px; height: auto; }

/* =============================================================================
 * A GAMIFICAÇÃO DO SELO — a cartela entra e o selo carimba
 * Só acontece na tela de confirmação do pagamento; na bancada do verso a
 * cartela já nasce carimbada.
 *
 * `--atraso` é a vez desta cartela na fila: todos os tempos são contados a
 * partir dele.
 * ========================================================================== */
.gami { --atraso: 0ms; }

/* 🔴 A CARTELA SÓ SE ESCONDE SE HOUVER QUEM A TRAGA DE VOLTA.
   O `cc-js` é posto no `<html>` pelo `cartela-carimbada.js` assim que ele
   carrega. Sem essa guarda, o dia em que o script não chega (foi o que
   aconteceu em 13/09, com o `<script>` inerte dentro da troca do Livewire) a
   arte fica em `opacity: 0` esperando uma animação que nunca começa — e o
   cliente vê um retângulo BRANCO no lugar da cartela que acabou de comprar.
   Com a guarda, sem JS a cartela aparece parada e carimbada: perde-se o show,
   não o produto. */
.cc-js .gami .arte { opacity: 0; transform: translateY(28px) scale(.86); }
.cc-js .gami .selo-na-arte { opacity: 0; transform: translateY(-26%) scale(2.6) rotate(-14deg); }

.gami.rodando .arte {
    animation: gami-entrar 900ms var(--atraso) cubic-bezier(.16, 1, .3, 1) forwards,
               gami-tranco 260ms calc(var(--atraso) + 1300ms) ease-out;
}

@keyframes gami-entrar {
    0%   { opacity: 0; transform: translateY(28px) scale(.86); }
    60%  { opacity: 1; transform: translateY(0)    scale(1.03); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* O tranco da batida do carimbo: a cartela balança e volta. */
@keyframes gami-tranco {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(3px) scale(.995); }
    100% { transform: translateY(0) scale(1); }
}

.gami.rodando .selo-na-arte {
    animation: gami-carimbar 620ms calc(var(--atraso) + 1000ms)
               cubic-bezier(.2, .9, .25, 1) forwards;
}

@keyframes gami-carimbar {
    /* longe, grande e de lado — como uma mão trazendo o carimbo */
      0% { opacity: 0; transform: translateY(-26%) scale(2.6) rotate(-14deg); }
     25% { opacity: 1; transform: translateY(-16%) scale(2.0) rotate(-11deg); }
    /* a batida: passa um pouco do ponto, já quase reto */
     55% { opacity: 1; transform: translateY(0) scale(.94) rotate(-1.2deg); }
    /* 🔑 O ENCAIXE. Depois da batida o selo não volta liso ao lugar: ele
       levanta de leve (como borracha que descola), afunda de novo e só então
       assenta — são esses dois vaivéns curtos que fazem o olho ler "encaixou"
       em vez de "apareceu". */
     68% { opacity: 1; transform: translateY(0) scale(1.045) rotate(-.6deg); }
     82% { opacity: 1; transform: translateY(0) scale(.975) rotate(.25deg); }
     92% { opacity: 1; transform: translateY(0) scale(1.012) rotate(0deg); }
    /* 🔑 assenta ALINHADO: a diagonal ficou só no voo, ordem dele. */
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg);
           filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
}

/* O baque: um anel que abre e some no ponto da batida. */
.gami-onda {
    position: absolute;
    left: 30.71%; top: 72.43%; width: 38.49%; height: 20.25%;
    border-radius: 14px;
    border: 3px solid rgba(255, 214, 84, .9);
    transform: scale(.92);
    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
}

.gami.rodando .gami-onda {
    animation: gami-onda 520ms calc(var(--atraso) + 1330ms) ease-out forwards;
}

@keyframes gami-onda {
      0% { opacity: .95; transform: scale(.92); }
    100% { opacity: 0;   transform: scale(1.5); }
}

/* -----------------------------------------------------------------------------
 * O BRILHO DOURADO — depois do carimbo, a cartela inteira acende pela borda
 *
 * Duas camadas, e as duas são só luz: um ANEL de gradiente cônico que dá uma
 * volta na cartela (a luz correndo pela borda) e um HALO por fora, no mesmo
 * dourado. Nada disso mexe no conteúdo — é irmão do selo, não do papel.
 *
 * 🔑 O anel é um retângulo pintado por inteiro e RECORTADO pela máscara: o
 *    miolo é apagado (`exclude`) e sobra a moldura. Sem isso o gradiente
 *    cobriria a arte.
 * -------------------------------------------------------------------------- */
@property --giro {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* A camada de luz mora FORA das faces, na própria carta: a face tem
   `overflow: hidden` (é ela que arredonda a arte) e recortaria tudo o que
   passasse da borda — a luz tem de VAZAR para fora da cartela.
   ⚠️ `backface-visibility`: virada, a cartela mostra o verso, e a luz da frente
   não pode aparecer espelhada por cima dele. */
.gami-luz {
    grid-area: 1 / 1;
    position: relative;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 2;
}

/* O HALO — a luz que escapa pelos quatro lados. */
.gami-halo {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    opacity: 0;
    box-shadow: 0 0 34px 6px rgba(255, 196, 60, .75),
                0 0 80px 22px rgba(255, 170, 30, .45),
                inset 0 0 40px 6px rgba(255, 214, 84, .35);
}

.gami-brilho {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 3px;                   /* a espessura da moldura de luz */
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(from var(--giro),
        rgba(255, 214, 84, 0) 0deg,
        rgba(255, 214, 84, .25) 30deg,
        #ffd86a 70deg,
        #fff6d2 92deg,
        #ffd86a 115deg,
        rgba(255, 214, 84, .25) 160deg,
        rgba(255, 214, 84, 0) 210deg,
        rgba(255, 214, 84, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    filter: drop-shadow(0 0 10px rgba(255, 196, 60, .95))
            drop-shadow(0 0 26px rgba(255, 170, 30, .6));
}

/* ⚠️ `brilhando` entra por JS quando o selo assenta — não por atraso de CSS —,
   porque no carrossel cada cartela começa a cena na hora em que aparece. E vai
   na CARTA, porque a luz é irmã das faces, não filha delas. */
.carta.brilhando .gami-brilho {
    animation: gami-girar 1500ms linear 2,
               gami-acender 3000ms ease-out forwards;
}

@keyframes gami-girar {
    to { --giro: 360deg; }
}

@keyframes gami-acender {
      0% { opacity: 0; }
      8% { opacity: 1; }
     70% { opacity: 1; }
    100% { opacity: 0; }
}

.carta.brilhando .gami-halo { animation: gami-acender 3000ms ease-out forwards; }

/* -----------------------------------------------------------------------------
 * O POLIMENTO — a cartela inteira "engraxada" no momento do brilho
 *
 * Uma faixa clara que atravessa a arte na diagonal, como luz correndo em
 * superfície polida. ⚠️ Esta camada fica DENTRO da face, ao contrário do halo:
 * ela tem de ser recortada pelo papel — brilho de polimento fora da cartela
 * seria um borrão no ar.
 *
 * `screen` clareia sem lavar a cor: sobre o magenta da arte ele acende, não
 * embranquece.
 * -------------------------------------------------------------------------- */
.gami-polimento {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background: linear-gradient(102deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 244, 205, .28) 46%,
        rgba(255, 255, 255, .85) 50%,
        rgba(255, 244, 205, .28) 54%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 260% 100%;
    background-position: 140% 0;
}

.carta.brilhando .gami-polimento {
    animation: gami-polir 1150ms cubic-bezier(.36, .1, .2, 1) 2 both;
}

@keyframes gami-polir {
      0% { opacity: 0;  background-position: 140% 0; }
     12% { opacity: 1; }
     88% { opacity: 1; }
    100% { opacity: 0; background-position: -60% 0; }
}

/* -----------------------------------------------------------------------------
 * A BORDA QUE FICA — 13/09/2026
 *
 * Pedido dele: *"que tal adicionar uma borda dourada depois que o brilho passa
 * na cartela? Aí a cartela fica com a borda dourada, no mesmo tom do selo"*.
 *
 * 🔑 O anel girando e o halo são o ACONTECIMENTO; esta borda é o que sobra dele.
 *    Entra quando a luz termina e não sai mais: a cartela carimbada passa a ter
 *    moldura, como documento emoldurado.
 *
 * 📌 Duas camadas por DENTRO (`inset`): o fio claro por cima do dourado dá o
 *    relevo de metal em vez de um traço chapado. E `inset` porque a face tem
 *    `overflow: hidden` — borda por fora seria recortada.
 * -------------------------------------------------------------------------- */
/* 🔴 A MOLDURA É UMA CAMADA POR CIMA, não a sombra da face — 13/09/2026.
   A primeira tentativa usou `box-shadow: inset` na própria face. O navegador
   pinta a sombra interna ATRÁS dos filhos, e a arte agora preenche a face
   inteira: a borda existia no CSS e ficava escondida embaixo da imagem. Ele viu
   só a luz passando e nenhuma moldura sobrando — *"a borda tem que ficar,
   estática na cartela, do mesmo jeito que o selo fica"*.

   O `::after` é o último filho da face, então é desenhado POR CIMA de tudo. E
   vale nos dois lados: virando a cartela, o verso também está emoldurado. */
.face { position: relative; }

.face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 700ms ease-out;
    /* 🔴 MAIS GROSSA — 13/09/2026: *"a moldura está muito pequena, mal dá para
       perceber; tem que aumentar uns 2 pixels"*. O fio claro engorda junto, ou
       ele vira um risco perdido dentro do dourado. */
    box-shadow: inset 0 0 0 2px rgba(255, 238, 176, .95),
                inset 0 0 0 5px #c08f2a,
                inset 0 0 14px rgba(255, 196, 60, .45);
}

.carta.dourada .face::after { opacity: 1; }

/* Quem pediu menos movimento no sistema recebe o desfecho, não o show. */
@media (prefers-reduced-motion: reduce) {
    .gami.rodando .arte { animation: none; opacity: 1; transform: none; }
    .gami.rodando .selo-na-arte { animation: none; opacity: 1; transform: none; }
    .gami.rodando .gami-onda { animation: none; opacity: 0; }
    .carta.brilhando .gami-brilho,
    .carta.brilhando .gami-halo,
    .carta.brilhando .gami-polimento { animation: none; opacity: 0; }
}

/* =============================================================================
 * O CARROSSEL — uma cartela por vez
 * -----------------------------------------------------------------------------
 * Uma venda pode ter várias cartelas, e empilhá-las fazia uma página de 7.000 px
 * com dez. Aqui elas ficam uma ATRÁS da outra, e as setas andam entre elas.
 *
 * 🚫 As setas NÃO viram a cartela: virar é arrastar para o lado ou dois toques.
 *    O mesmo botão não pode fazer duas coisas.
 * ========================================================================== */
/* 🔴 4px DE CADA LADO, FIXOS — 13/09/2026.
   A margem era `auto`: com o teto de 340px, sobrava vão dos dois lados em
   qualquer celular um pouco mais largo, e ele apontou isso no comando (as setas
   e os pontos). *"Não há necessidade de botar margem direita e esquerda de forma
   automática; a gente pode fixar — vamos testar quatro pixels de cada lado"*.

   Sem o teto, a cartela usa a largura que a tela tem. No computador ela voltaria
   a ficar grande demais, e aí o teto volta — mas só a partir de 560px, que já
   não é celular. */
.cc-carrossel {
    position: relative;
    max-width: 100%;
    margin-left: 4px;
    margin-right: 4px;
}

/* A cena segue o carrossel: o teto dela era o mesmo 340px. */
.cc-slide .cena { max-width: 100%; }

@media (min-width: 560px) {
    .cc-carrossel {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 🔑 A JANELA SÓ RECORTA ENQUANTO O TRILHO ANDA. Recortando sempre, ela comeria
   o brilho dourado que vaza pelos lados da cartela; parada, quem esconde as
   cartelas vizinhas é o `visibility: hidden` delas.
   O respiro de cima e de baixo é o espaço da sombra e da luz. */
.cc-janela {
    padding: 24px 0 34px;
    margin: -24px 0 -14px;
}

.cc-janela.cc-andando { overflow: hidden; }

/* =============================================================================
 * 🔴 O VÃO GIGANTE COM DUAS OU MAIS CARTELAS — 14/09/2026.
 * -----------------------------------------------------------------------------
 * ELE DESCREVEU O SINTOMA COM PRECISÃO: *"esse bug só acontece quando a gente
 * compra duas ou mais cartelas"* e *"na primeira cartela tem esse espaçamento
 * todo; a partir da segunda, some"*.
 *
 * 🔑 A CAUSA NÃO ERA ALTURA — era LARGURA. As cartelas ficam lado a lado num
 *    trilho (`flex`), cada slide com 100% da largura. Parado na PRIMEIRA, a
 *    segunda fica à DIREITA, fora da tela, e a janela só recorta enquanto o
 *    trilho anda. Documento com o dobro da largura: o Chrome do Android AFASTA
 *    a página para caber (`width=device-width` cede ao conteúdo mais largo), e
 *    tudo encolhe — sobrando aquela área morta embaixo. Andando para a segunda,
 *    o trilho desliza para a esquerda: transbordo à esquerda não estica
 *    documento nenhum, e por isso o vão sumia. Era exatamente o que ele via.
 *
 * 📌 `clip` e não `hidden`: `hidden` no eixo X obrigaria o eixo Y a rolar, e
 *    cortaria o brilho dourado que vaza por cima e por baixo da cartela. Com a
 *    margem de recorte, o brilho ainda escapa uns pixels pelos lados.
 * ========================================================================== */
.cc-janela {
    overflow-x: clip;
    overflow-clip-margin: 30px;
}

.cc-trilho {
    display: flex;
    transition: transform 440ms cubic-bezier(.2, .8, .25, 1);
}

.cc-slide { flex: 0 0 100%; min-width: 0; }
.cc-slide--escondido { visibility: hidden; }

.cc-comando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

/* ⚠️ As setas ficam ABAIXO da cartela, não em cima dela: por dentro da arte
   cobriam o card do 1º prêmio no verso, e a cartela ocupa a largura toda do
   cartão — não sobra borda livre para pousá-las. */
.cc-seta {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ct-borda);
    border-radius: 999px;
    background: var(--ct-superficie);
    color: var(--ct-texto);
    cursor: pointer;
}

.cc-seta:disabled { opacity: .3; cursor: default; }

/* Uma cartela só não tem para onde andar: some o comando inteiro. */
.cc-carrossel--sozinha .cc-comando { display: none; }

.cc-pontos { display: flex; justify-content: center; gap: 6px; }

.cc-ponto {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ct-borda);
    cursor: pointer;
}

.cc-ponto[aria-current='true'] {
    background: var(--ct-primaria);
    width: 18px;
}

/* =============================================================================
 * QUALQUER TELA — o verso encolhe junto com a cartela
 * -----------------------------------------------------------------------------
 * 🔴 Palavras dele (13/09/2026): *"pode ter gente com um celular de tela menor,
 *    outros com a tela maior, e o sistema tem que estar adaptável"*. O teste de
 *    estresse dele achou o buraco: abaixo de ~360px o conteúdo do verso ficava
 *    MAIS ALTO que a arte, e era o verso que passava a mandar na altura das duas
 *    faces — sobrando fundo atrás da cartela e empurrando o que vem em cima dela.
 *
 * 🔑 A medida é `@container`, não `@media`: o que importa é a largura que a
 *    CARTELA recebeu (dentro do card, do carrossel, do PWA), não a da janela.
 *
 * Nada aqui muda o desenho — só aperta espaçamento, que é o que sobra.
 * ========================================================================== */
@container cartela (max-width: 330px) {
    .verso-topo { padding: 8px 10px; }
    .verso-marca img { height: 38px; }
    .verso-bilhete { font-size: 15px; }

    .verso-premios { padding: 6px 10px 2px; }
    .verso-faixa { padding: 3px 0; gap: 6px; }
    .verso-faixa-rotulo { flex-basis: 28px; }
    .verso-faixa-rotulo b { font-size: 13px; }

    .verso-premiacao { padding: 2px 10px 6px; }
    .verso-premio { min-height: 74px; padding: 16px 4px 5px; }
    .verso-premio--primeiro img { max-height: 36px; }

    .verso-canhoto { padding: 7px 10px 8px; }
    .verso-campos { gap: 4px 8px; }
    .verso-campo--nome b { font-size: 13px; }
    .verso-lotece img { max-width: 68px; }
}

/* Telas bem estreitas (o pior caso que ele forçou: 320px e abaixo). */
@container cartela (max-width: 300px) {
    .verso-topo { padding: 6px 8px; }
    .verso-marca { gap: 6px; }
    .verso-marca img { height: 32px; }
    .verso-marca-nome b { font-size: 10px; }
    .verso-marca-nome i { font-size: 9px; }
    .verso-bilhete { font-size: 13px; }
    .verso-sorteio { font-size: 9px; }

    .verso-premios { padding: 4px 8px 0; }
    .verso-faixa { padding: 2px 0; }

    .verso-premiacao { padding: 2px 8px 5px; }
    .verso-premio { min-height: 62px; padding: 14px 3px 4px; }
    .verso-premio--primeiro img { max-height: 28px; }
    .verso-premio--mini img { width: 16px; }
    .verso-premio strong { font-size: 12px; }
    .verso-premio p { font-size: 8px; }

    .verso-canhoto { padding: 5px 8px 6px; }
    .verso-campos { gap: 3px 6px; }
    .verso-campo b { font-size: 11px; }
    .verso-campo--nome b { font-size: 12px; }
    .verso-lotece img { max-width: 58px; }
}

/* O pior caso: cartela com menos de 250px (tela de ~330px ou o teste de
   estresse dele). Aqui não há espaçamento que salve — o que sai é a faixa de
   premiação, que é a informação EXTRA do verso. As dezenas, o bilhete e os dados
   do titular ficam, porque são o documento. */
@container cartela (max-width: 250px) {
    .verso-premiacao { display: none; }
    .verso-premios { padding: 4px 6px 2px; }
    .verso-canhoto { padding: 5px 6px 6px; }
    .verso-campo em { font-size: 7px; }
    .verso-campo b { font-size: 10px; }
    .verso-campo--nome b { font-size: 11px; }
}

/* =============================================================================
 * A TELA DO PAGAMENTO CONFIRMADO — a moldura ao redor da cartela
 * -----------------------------------------------------------------------------
 * 🔴 Ordem dele (13/09/2026): *"tem muita borda nas laterais, não precisa de
 *    tanta"*. Cada milímetro que a moldura devolve vira largura de CARTELA, que
 *    é o que a pessoa quer ver — e no celular pequeno isso é a diferença entre a
 *    arte legível e a arte espremida.
 *
 * 📌 O `p-5` do `.ct-card` continua valendo no resto do sistema: aqui ele é
 *    reduzido só nesta tela, pela classe da página.
 * ========================================================================== */
.cc-tela { padding-left: 6px; padding-right: 6px; }

/* 🔑 2px de cada lado entre o cartão branco e a cartela — medida dele: *"bota só
   dois pixels de cada lado, pode usar o espaço mesmo"*. */
.cc-tela .ct-card { padding: 12px 2px; }

/* E o título encosta na cartela: *"a margem entre o pagamento confirmado e o
   branco onde fica a cartela você pode zerar, deixar meio que um pixel só"*. */
.cc-carrossel { margin-top: 2px; }

/* =============================================================================
 * 🔴 TUDO NA TELA, SEM ROLAR — 13/09/2026.
 * -----------------------------------------------------------------------------
 * Ordem dele, com a foto marcada: *"reduzir o espaçamento que tem entre a
 * cartela e as setas"* — e o mesmo entre as setas e o botão. Eram três folgas
 * empilhadas logo abaixo da arte: os 12px do comando, os 12px de baixo do
 * cartão branco e os 20px do `mt-5` do botão. Somadas, jogavam o "Ver minhas
 * cartelas" para fora da dobra num Android comum.
 *
 * 📌 Só no celular: no computador sobra altura e o respiro faz falta.
 * ========================================================================== */
@media (max-width: 640px) {
    .cc-comando { margin-top: 4px; }

    /* 🔴 A FAIXA CINZA ABAIXO DO BOTÃO — 14/09/2026: *"é como se fosse uma
       margem fora da div do container"*. Não era margem: era o FUNDO DA PÁGINA
       aparecendo onde o cartão branco acaba. Com a página da mesma cor, não há
       emenda — mesma solução da tela do Pix, que ele aprovou. */
    body.pagina-da-cartela { background: var(--ct-superficie, #fff); }

    /* A janela reserva 34px embaixo para a sombra e devolve só 14: sobravam 20
       de folga morta entre a cartela e as setas. No celular ela devolve tudo. */
    .cc-janela { padding-bottom: 24px; margin-bottom: -24px; }

    .cc-tela .ct-card { padding: 12px 2px 6px; }

    /* O `mt-5` é utilitário do build; aqui a classe da página ganha dele sem
       precisar mexer no Blade. */
    .cc-tela .ct-btn.mt-5 { margin-top: 8px; }
}

/* =============================================================================
 * 👉 A DICA DO GESTO — a mão que ensina a virar a cartela (20/09/2026)
 * -----------------------------------------------------------------------------
 * 🎯 Entra DEPOIS da cena do carimbo, faz o movimento três vezes e some. Sem
 *    texto: *"quero que tudo seja intuitivo"*. É orientação, não propaganda —
 *    por isso não fica piscando para sempre.
 *
 * 📌 Fica por cima da cartela e NÃO intercepta toque: quem já entendeu arrasta
 *    por cima dela, sem esperar a dica acabar.
 * ========================================================================== */
/* 🔴 MAIOR E ATRAVESSANDO A CARTELA — 20/09/2026, correção dele: *"vamos
   aumentar a mão e o deslize; quero que comece de fato na esquerda e vá bem
   mais para a direita, cruzando a cartela, e não no centro"*.

   📌 O tamanho é em % da CARTELA (`width: 34%`), não em pixels: a dica cresce
      junto com a arte, do celular estreito ao computador. */
.cc-dica-gesto {
    position: absolute;
    /* Começa mais à esquerda (ordem dele, 20/09): o gesto precisa nascer perto
       da borda de onde o dedo sairia de verdade. */
    left: 2%;
    top: 40%;
    z-index: 6;
    /* 🔴 46% da cartela — ele mandou aumentar duas vezes: *"eu quero ele de
       fato maior, ocupando um espaço bem maior"*. */
    /* 📏 01/10/2026 — 30% MENOR (ordem dele): 54% → 38%. Mão e seta são o mesmo
       SVG, então encolhem juntas. */
    width: 38%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #1f2a44;
    /* 🖊️ O CONTORNO — 20/09/2026. Ele: *"existe muita cor na cartela e eu
       queria a animação bem destacada; o contorno ajudaria"*.

       ⚠️ POR QUE NÃO É `stroke`: a mão é feita de duas partes que se sobrepõem,
          e um traço de verdade desenharia a EMENDA entre elas por dentro — o
          vão que ele mandou fechar semanas atrás.

       🔑 Em vez disso, sombras PRETAS rentes e empilhadas: cada uma escurece a
          borda em todas as direções, e juntas viram um contorno que segue a
          silhueta inteira, sem costura. A última, larga, é o relevo. */
    filter:
        drop-shadow(0 0 1px #000)
        drop-shadow(0 0 1px #000)
        drop-shadow(0 0 2px rgba(0, 0, 0, .95))
        drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
    opacity: 0;
}

.cc-dica-gesto svg {
    display: block;
    width: 100%;
    height: auto;
}

.cc-dica-gesto[hidden] { display: none; }

/* A classe entra pelo JS quando a cena termina. */
.cc-dica-gesto.cc-dica-rodando {
    animation: cc-dica-aparecer 2.6s ease-in-out 3 forwards;
}

/* Um ciclo: aparece à esquerda, ATRAVESSA a cartela até a direita, some e
   volta ao ponto de partida para a próxima passada.

   📌 O percurso é em `%` da própria dica (que já é % da cartela), então ele
      acompanha a largura: sempre cruza, nunca fica no meio. */
@keyframes cc-dica-aparecer {
    0%   { opacity: 0; transform: translateY(-50%) translateX(0); }
    10%  { opacity: 1; }
    /* ⚠️ 88% — MEDIDO, não chutado (20/09/2026): a 78% a mão parava a 33px
       (8%) da borda e ele viu que ainda cabia mais. A 88% ela chega a ~10px do
       fim da cartela, que é o limite antes de encostar e parecer que saiu. */
    /* 01/10: com a dica a 38% (era 54%), o ponto de chegada pede ~162% (MEDIDO: 167% passava 13px da borda,
       porque o desenho da mão tem folga própria dentro do SVG):
       2% + 38% × 2,67 ≈ 2% + 54% × 1,88 — ela segue terminando a ~10px da borda. */
    50%  { opacity: 1; transform: translateY(-50%) translateX(162%); }
    64%  { opacity: 0; transform: translateY(-50%) translateX(162%); }
    /* O resto do ciclo é a pausa entre uma passada e a seguinte. */
    100% { opacity: 0; transform: translateY(-50%) translateX(0); }
}

/* A seta diz o lado. Branca e semitransparente, atrás da mão. */
.cc-dica-seta {
    /* ⚠️ SEM transparência — ordem dele (20/09/2026). */
    opacity: 1;
    /* 🟡 Dourado (20/09, teste dele): o mesmo tom do selo, da moldura e da linha
       do canhoto. Se não agradar, é voltar as duas cores para #ffffff. */
    stroke: #f0c14b;
    fill: none;
}

/* 🔑 A MÃO É MACIÇA E SEM CONTORNO. Todas as partes na mesma cor e sem traço
   entre elas: onde uma encosta na outra não sobra emenda para a arte da cartela
   aparecer por dentro — que foi o que ele viu e mandou fechar. */
.cc-dica-mao {
    fill: #f0c14b;
    stroke: none;
}

/* ♿ Quem pediu menos movimento não recebe a animação. A dica simplesmente não
   aparece: uma mão parada no meio da cartela não ensina nada e atrapalha. */
@media (prefers-reduced-motion: reduce) {
    .cc-dica-gesto { display: none !important; }
}