/*
 * ============================================================================
 * SORTEIO AO VIVO (/sorteio-ao-vivo) — folha de estilo da página do JOGADOR.
 *
 * ## Por que este CSS NÃO está no bundle do Vite
 *
 * A página já sofreu com bundle desatualizado: classes utilitárias que não
 * existiam no CSS servido (`grid-cols-10`, `text-blue-200`, `bg-red-600`) —
 * classe ausente não dá erro, só não faz nada, e a grade de 90 bolas perdia o
 * layout com os textos escuros sobre fundo escuro. Aqui o arquivo é servido
 * direto, com `?v=filemtime` para não ficar preso no cache, e é a ÚNICA fonte
 * de estilo da tela.
 *
 * ## Paleta IDÊNTICA à do Modo TV
 *
 * A TV foi aprovada pelo cliente e é a referência visual:
 *   fundo       #2d1b6b -> #150a35 -> #07030f (roxo profundo)
 *   ouro        #ffd333 / #fff7d6 / #e6b500 (texto sobre ouro: #1b1200)
 *   índigo      #524ed5 / #2d2b8d
 *   esmeralda   #10b981 / #6ee7b7
 *   painéis     rgba(255,255,255,.05) + borda rgba(255,255,255,.12)
 *   rótulos     rgba(255,255,255,.6), maiúsculas, espaçados
 *
 * ## Regra de performance (celular)
 *
 * Toda animação mexe SÓ em `transform` e `opacity` — as duas propriedades que o
 * compositor resolve na GPU, sem recalcular layout. Nada de animar `width`,
 * `top`, `box-shadow` ou `filter` em laço. E todo laço de animação respeita
 * `prefers-reduced-motion` e para quando a aba está oculta.
 * ============================================================================
 */

    /* ======================================================================
       Paleta IDÊNTICA à do Modo TV (`resources/views/layouts/tv.blade.php`).

       A TV foi aprovada pelo cliente e serve de referência visual:
         - fundo       #2d1b6b -> #150a35 -> #07030f (roxo profundo)
         - ouro        #ffd333 / #fff7d6 / #e6b500 (texto sobre ouro: #1b1200)
         - índigo      #524ed5 / #2d2b8d
         - esmeralda   #10b981 / #6ee7b7
         - painéis     rgba(255,255,255,0.05) + borda rgba(255,255,255,0.12)
         - rótulos     rgba(255,255,255,0.6), maiúsculas, espaçados
       ====================================================================== */

    .lb-page {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        color: #fff;
    }

    /* ---------- Cabeçalho compacto ---------- */
    .lb-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .lb-brand__logo { height: 3.25rem; width: auto; }

    .lb-brand__title {
        font-size: clamp(1.15rem, 5vw, 2rem);
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #ffd333;
        line-height: 1.1;
        text-shadow: 0 0.2vmin 1vmin rgba(0, 0, 0, 0.6);
        /* Em 390px o entreletra de 0,18em empurrava "SORTEIO AO VIVO" para duas
           linhas; abaixo de 480px ele encolhe para o título caber numa linha só
           ao lado da marca. */
    }

    @media (max-width: 480px) {
        .lb-brand__title { letter-spacing: 0.1em; }
        .lb-brand__logo { height: 2.75rem; }
    }

    .lb-brand__sub {
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0.35em;
        text-transform: uppercase;
    }

    /* ---------- Cartão base (mesmo dos `tv-stat` / `tv-latest`) ---------- */
    .lb-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1rem;
        padding: 1rem;
    }

    /* ---------- Topo: sorteio + status ---------- */
    .lb-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid rgba(255, 211, 51, 0.35);
    }

    .lb-desc {
        font-size: clamp(1.05rem, 3.2vw, 1.5rem);
        font-weight: 700;
        color: #ffffff;
        line-height: 1.2;
    }

    .lb-price { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }

    /* Mesma pílula da TV (esmeralda translúcida). */
    .lb-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 1rem;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        background: rgba(16, 185, 129, 0.18);
        border: 1px solid #10b981;
        color: #6ee7b7;
        white-space: nowrap;
    }

    .lb-pill--wait {
        background: rgba(255, 211, 51, 0.16);
        border-color: #ffd333;
        color: #ffe9a3;
    }

    .lb-pill--done {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.7);
    }

    .lb-pill__dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: currentColor;
        animation: lb-blink 1.4s ease-in-out infinite;
    }

    @keyframes lb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

    /* ---------- Área principal ---------- */
    .lb-hero-area { display: grid; gap: 1rem; margin-bottom: 1rem; }

    @media (min-width: 1024px) {
        .lb-hero-area { grid-template-columns: minmax(220px, 300px) 1fr; align-items: stretch; }
    }

    /* Mesmo painel do "Último número" da TV. */
    .lb-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        padding: 1rem;
        border-radius: 1rem;
        background: linear-gradient(160deg, rgba(82, 78, 213, 0.45), rgba(30, 28, 90, 0.55));
        border: 1px solid rgba(255, 211, 51, 0.45);
        box-shadow: 0 0 4vmin rgba(82, 78, 213, 0.35) inset;
    }

    .lb-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
    }

    /* ======================================================================
       A ESPERA PELA VENDA — o recado MAIS IMPORTANTE da tela quando ela espera

       Desde 15/10/2026 o sorteio não começa sem o quórum e não existe teto de
       tempo: "aguardando" deixou de ser um intervalo de 15 minutos e passou a ser
       o estado NORMAL da tela. E ele estava escrito num `.lb-label` de 0,68rem,
       apagado, com a mesma cara de "Preço da cartela".

       O cliente pediu destaque — *"de mais destaque a isso"* — e ele tem razão
       pelo motivo mais simples: aqui o recado **é a regra do jogo**. Quem chega e
       vê "faltam 2 cartelas" entende na hora por que o sorteio ainda não começou,
       e que a venda está aberta. A barra transforma a contagem em progresso.

       A cor é o dourado da marca (o mesmo do prêmio e do título): é o que o olho
       procura primeiro nesta página.
       ====================================================================== */
    .lb-venda {
        width: 100%;
        max-width: 30rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem 0.75rem;
        border-radius: 0.85rem;
        background: linear-gradient(160deg, rgba(255, 211, 51, 0.16), rgba(255, 211, 51, 0.04));
        border: 1px solid rgba(255, 211, 51, 0.55);
        box-shadow: 0 0 3vmin rgba(255, 211, 51, 0.18) inset;
    }

    .lb-venda__titulo {
        font-size: clamp(0.95rem, 4.6vw, 1.35rem);
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: 0.02em;
        color: #ffe9a3;
        text-align: center;
        text-wrap: balance;
    }

    /* A barra do progresso até o quórum. `--lb-venda-pct` vem do Blade. */
    .lb-venda__barra {
        display: block;
        width: 100%;
        height: 0.55rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        overflow: hidden;
    }

    .lb-venda__preenchido {
        display: block;
        height: 100%;
        width: var(--lb-venda-pct, 0%);
        border-radius: 999px;
        background: linear-gradient(90deg, #e6b500, #ffd333 60%, #fff3c4);
    }

    .lb-venda__contagem {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.8);
    }

    .lb-venda__contagem strong {
        color: #ffd333;
        font-weight: 900;
    }

    /* A bola do último número agora é o PALCO ANIMADO (`.lb-palco__bola`, mais
       abaixo): "a nova chega e empurra a velha" precisa de um trilho com duas
       bolas, e isso não cabia numa bola só. O `@keyframes lb-pop` fica, porque a
       chegada da primeira bola continua usando. */
    @keyframes lb-pop {
        0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
        60% { transform: scale(1.08) rotate(3deg); opacity: 1; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .lb-palco__bola, .lb-pill__dot { animation: none; }
    }

    /* ---------- Coluna de informações ---------- */
    .lb-side { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

    /* Faixa de recentes: igual à da TV (esmeralda; o mais novo em vermelho). */
    /*
     * ÚLTIMOS SORTEADOS — fileira secundária, de propósito (MOBILE FIRST).
     *
     * Eram 10 bolas de 2.2rem quebrando em 2-3 linhas no celular, do mesmo
     * tamanho visual do número da vez: a tela tinha DOIS protagonistas e o olho
     * não sabia onde pousar. Agora a fileira é uma linha só, que rola na
     * horizontal quando não couber, com bolas menores e sem a cor de destaque
     * (o destaque é do número da vez).
     */
    .lb-recent {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }

    /*
     * ÚLTIMAS BOLAS — BRANCAS (cliente, 18/10/2026).
     *
     * > *"apenas deixe as últimas bolas [que estavam] verdes chamadas, deixe
     * > brancas"*
     *
     * As já chamadas eram verdes (gradiente esmeralda) e a última era vermelha.
     * Agora as chamadas são brancas com número escuro — leem-se melhor sobre o
     * fundo escuro da tela e não competem com o dourado da bola da vez.
     *
     * A ÚLTIMA continua se distinguindo, mas sem cor: ganha um anel dourado.
     * Se preferir branca igual às outras, é só dizer.
     */
    .lb-recent__item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        color: #1f2937;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.9);
    }

    /*
     * A ÚLTIMA CHAMADA é a MESMA bola grande (cliente, 18/10/2026: *"a última
     * chamada deixe como a bola grande mesmo"*).
     *
     * Usa o mesmo gradiente da `.lb-palco__bola` — de propósito, escrito igual:
     * se um dia a bola grande mudar de cor, o certo é mudar as duas juntas, e
     * deixar as duas declaradas aqui lado a lado é o que torna isso visível.
     * O texto também é o mesmo (`#1b1200`) e o brilho da borda acompanha.
     */
    .lb-recent__item--latest {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.9rem;
        color: #1b1200;
        background: radial-gradient(circle at 32% 28%, #fff7d6 0%, #ffd333 38%, #e6b500 70%, #8a6a00 100%);
        border-color: rgba(255, 247, 214, 0.9);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
        box-shadow:
            inset 0 -1px 2px rgba(255, 255, 255, 0.18),
            0 0 12px rgba(255, 211, 51, 0.55);
    }

    /* Premiação: mesmo tratamento dourado dos `tv-prize`. */
    .lb-prizes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    @media (min-width: 640px) {
        .lb-prizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    .lb-prize {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.6rem 0.4rem;
        border-radius: 0.75rem;
        background: linear-gradient(160deg, rgba(255, 211, 51, 0.18), rgba(255, 211, 51, 0.04));
        border: 1px solid rgba(255, 211, 51, 0.45);
    }

    .lb-prize__label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
    }

    .lb-prize__value { font-size: clamp(0.95rem, 3.6vw, 1.3rem); font-weight: 900; color: #ffd333; }

    /* Contadores: número em ouro, como `tv-stat__value`. */
    .lb-counters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .lb-counters b { color: #ffd333; font-size: 1.05rem; letter-spacing: 0; }

    /* ---------- Controles do operador ---------- */
    .lb-admin {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 0.9rem;
        padding: 0.7rem 0.9rem;
        border-radius: 0.75rem;
        background: rgba(255, 211, 51, 0.1);
        border: 1px solid rgba(255, 211, 51, 0.45);
        font-size: 0.82rem;
        color: #ffe9a3;
    }

    .lb-btn {
        /* WCAG 2.5.5 (alvo de toque): 44px. O padding sozinho rendia ~35px.
           `display` é OBRIGATÓRIO aqui: o CTA "Comprar cartelas" é um <a> e,
           inline, ignorava o min-height (o padding vertical ainda vazava). */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.55rem 1rem;
        border: 0;
        border-radius: 0.6rem;
        font-weight: 800;
        font-size: 0.85rem;
        cursor: pointer;
        background: linear-gradient(160deg, #ffd333, #e6b500);
        color: #1b1200;
    }

    .lb-btn:hover { filter: brightness(1.08); }

    /* ---------- Grade de 90 bolas ---------- */
    .lb-board {
        display: flex;
        flex-direction: column;
        gap: 0.28rem;
        max-width: 760px;
        margin: 0 auto;
    }

    .lb-board__row { display: flex; align-items: center; gap: 0.4rem; }

    .lb-board__range {
        display: none;
        flex: 0 0 3.4rem;
        text-align: right;
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.45);
        font-variant-numeric: tabular-nums;
    }

    @media (min-width: 640px) {
        .lb-board__range { display: block; }
    }

    .lb-board__balls {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 0.28rem;
        min-width: 0;
    }

    /* Bola não sorteada: mesmo tom dos `tv-tile` apagados. */
    .lb-bola {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.04);
        /* 17/10/2026: 32% dava ~2,9:1 e o piso caía para 9,6px — é a grade
           que o jogador CONFERE para saber o que ainda não saiu. 55% passa
           de 4,5:1 e o piso sobe para 11,2px; a distinção sorteada x não
           sorteada continua pelo fundo e pela borda, que não mudaram. */
        color: rgba(255, 255, 255, 0.55);
        font-size: clamp(0.7rem, 2.2vw, 0.95rem);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
    }

    button.lb-bola { cursor: pointer; }
    button.lb-bola:hover:not(:disabled) { transform: scale(1.12); }

    /* Sorteada: índigo com borda dourada (idêntico ao `tv-tile.is-drawn`). */
    .lb-bola--drawn {
        background: linear-gradient(160deg, #524ed5, #2d2b8d);
        border-color: rgba(255, 211, 51, 0.6);
        color: #ffffff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    }

    /* Última sorteada: dourada (idêntico ao `tv-tile.is-latest`). */
    .lb-bola--latest {
        background: linear-gradient(160deg, #ffd333, #e6b500);
        border-color: #fff7d6;
        color: #1b1200;
        box-shadow: 0 0 18px rgba(255, 211, 51, 0.75);
        animation: lb-pop 0.45s ease;
    }

    /* ---------- Ganhadores ---------- */
    .lb-awards { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }

    .lb-award {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem 0.8rem;
        padding: 0.55rem 0.85rem;
        border-radius: 0.7rem;
        background: linear-gradient(160deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.06));
        border: 1px solid rgba(16, 185, 129, 0.55);
        font-size: 0.9rem;
    }

    .lb-award__type { font-weight: 800; color: #6ee7b7; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
    .lb-award__winner { color: #ffffff; font-weight: 600; }
    .lb-award__code { font-family: ui-monospace, monospace; color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; }
    .lb-award__value { color: #6ee7b7; font-weight: 900; }

    .lb-note { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.5rem; }

    /* ---------- Cartelas do jogador ---------- */
    .lb-cards { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-top: 0.75rem; }

    /*
     * 4 POR LINHA NO PC (cliente, 18/10/2026: *"nas minhas cartelas deixe 4 por
     * linha no pc"*).
     *
     * No celular continua 1 por linha: a cartela tem 15 dezenas em 3 linhas de 5
     * e o número precisa ser legível sem zoom — duas por linha num telefone de
     * 390px deixa cada casa com ~25px. No PC sobra largura (a cartela tem ~200px
     * de conteúdo), e 4 por linha mostra as 10 cartelas do jogador sem rolar.
     *
     * Só `.lb-cards` é afetada — é a lista do JOGADOR. A TV usa `tv-*` e não é
     * tocada aqui.
     */
    @media (min-width: 700px) { .lb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /*
     * 900px, e não 1024: a janela em que o cliente olha o painel tem ~990px de
     * largura útil (medido nas capturas dele), e um breakpoint em 1024 deixaria
     * justamente ele em 2 por linha — pedindo 4 e recebendo 2.
     *
     * A 900px cada cartela fica com ~200px: as 5 casas da linha dão ~32px cada,
     * acima do piso de leitura desta tela. Medido em navegador a 990px e 1440px.
     */
    @media (min-width: 900px) { .lb-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    .lb-card-item {
        padding: 0.85rem;
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .lb-card-item--hot { border-color: #ffd333; background: rgba(255, 211, 51, 0.1); }
    .lb-card-item--full { border-color: #10b981; background: rgba(16, 185, 129, 0.12); }

    .lb-card-item__code {
        font-family: ui-monospace, monospace;
        font-size: 0.86rem;
        color: #ffd333;
        text-align: center;
        margin-bottom: 0.5rem;
        word-break: break-all;
    }

    .lb-card-item__flag { text-align: center; font-size: 0.8rem; font-weight: 800; margin-bottom: 0.4rem; }
    .lb-card-item__flag--hot { color: #ffe9a3; }
    .lb-card-item__flag--full { color: #6ee7b7; }

    .lb-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.28rem; margin-bottom: 0.6rem; }

    .lb-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        border-radius: 0.4rem;
        border: 2px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.55);
        font-size: clamp(0.7rem, 3.4vw, 0.95rem);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    /* Marcada: esmeralda, a mesma cor dos prêmios na TV. */
    .lb-cell--marked {
        background: radial-gradient(circle at 32% 26%, #6ee7b7, #047857 72%);
        border-color: #a7f3d0;
        color: #ffffff;
    }

    .lb-card-item__lines { display: flex; gap: 0.3rem; }

    .lb-line {
        flex: 1 1 0;
        padding: 0.25rem 0.2rem;
        border-radius: 0.45rem;
        text-align: center;
        font-size: 0.72rem;
        font-weight: 700;
        background: linear-gradient(160deg, #524ed5, #2d2b8d);
        color: #ffffff;
    }

    .lb-line--near { background: linear-gradient(160deg, #ffd333, #e6b500); color: #1b1200; font-weight: 900; }
    .lb-line--done { background: #10b981; color: #04231a; font-weight: 900; }

    .lb-empty { text-align: center; padding: 1.5rem 1rem; }
    .lb-empty__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; color: #ffffff; }
    /* 17/10/2026: linha de apoio do estado vazio/erro (ex.: "sua compra está
       registrada — isto é só uma falha ao buscar na tela"). */
    .lb-empty__text { font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; }

    /* ==========================================================================
       FOCO VISÍVEL NA ÁREA DO JOGO (17/10/2026)

       O resto do site já usa `:focus-visible` com anel dourado (resources/css/app.css),
       mas a tela ao vivo e o menu do jogador não tinham NENHUM: o navegador desenha
       o outline padrão, que some no fundo roxo escuro do cartão. Quem navega por
       teclado (ou controle remoto, no caso da TV) não vê onde está.
       Mesmo anel do resto do site, para não inventar padrão novo.
       ========================================================================== */
    .lb-btn:focus-visible,
    .lb-bola:focus-visible,
    .lb-conexao:focus-visible {
        outline: 3px solid #ffd333;
        outline-offset: 3px;
    }

    /* Indicador de conexão da tela do jogador (17/10/2026). Só aparece quando
       o pulso para; enquanto está tudo bem não ocupa espaço nenhum. */
    .lb-conexao {
        position: fixed;
        top: 0.6rem;
        left: 50%;
        transform: translateX(-50%);
        /* Acima do toast (65) e do canvas de fogos (70) — eles são faixa/canvas
           de tela cheia e cobriam o aviso. Abaixo da celebração pessoal (80),
           que é tomada de tela intencional. */
        z-index: 75;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        background: rgba(20, 10, 36, 0.94);
        border: 1px solid rgba(255, 193, 7, 0.55);
        color: #ffe08a;
        font-size: 0.78rem;
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    }

    .lb-conexao[hidden] { display: none; }

    /* Aviso do operador: o clique que não sorteou precisa dizer por quê. */
    .lb-admin__aviso {
        flex-basis: 100%;
        margin: 0.5rem 0 0;
        padding: 0.45rem 0.7rem;
        border-radius: 0.5rem;
        background: rgba(255, 193, 7, 0.12);
        border: 1px solid rgba(255, 193, 7, 0.5);
        color: #ffe08a;
        font-size: 0.85rem;
    }

    .lb-conexao__dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #ffc107;
        animation: lb-conexao-pisca 1.1s ease-in-out infinite;
    }

    @keyframes lb-conexao-pisca {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.25; }
    }

    /* Movimento reduzido (§3.13 item 6): sem pisca, mas o aviso continua. */
    @media (prefers-reduced-motion: reduce) {
        .lb-conexao__dot { animation: none; }
    }

    .lb-loading {
        text-align: center;
        padding: 1.5rem 1rem;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.95rem;
        animation: lb-blink 1.4s ease-in-out infinite;
    }

    .lb-section-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #ffd333;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        margin-top: 1.5rem;
    }

    .lb-section-sub {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        margin-bottom: 0.85rem;
    }

    .lb-guest-note {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .lb-guest-note a { color: #ffd333; font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   CAMADA DE ANIMAÇÃO — "a bola nova chega e empurra a velha"
   ==========================================================================

   ## Como o empurrão é montado

   O palco é um TRILHO com `overflow: hidden` do tamanho de uma bola. As bolas
   ficam empilhadas no centro por `left: 50%` + `margin-left: -metade`, de modo
   que toda animação é `translateX` PURO — nada de mexer em `left` (que
   recalcularia layout a cada quadro).

   Quando um número novo chega:
     1. a bola que estava (`--atual`) vira `--saindo`  → sai para a esquerda;
     2. a bola nova entra pela direita                  → `--entrando`;
     3. o trilho leva um tranco curto                   → `--impacto`.

   Quem executa isso é `public/js/sorteio-ao-vivo.js`. O Livewire NÃO redesenha
   este bloco (`wire:ignore`): o servidor manda o número num atributo escondido e
   o JS move as bolas. Sem isso, o morph trocaria o elemento no mesmo quadro e
   não haveria "velha saindo" — só um número piscando.
   ========================================================================== */

.lb-palco {
    --lb-bola: clamp(6rem, 40vw, 10.5rem);

    /* ======================================================================
       A DISTÂNCIA DO EMPURRÃO É DO TRILHO, NÃO DA BOLA.

       Era `calc(var(--lb-bola) * -1.45)`, e o 1,45 estava calibrado na
       proporção de então: bola de 156px dentro de um trilho de 284px, o que dava
       226px e tirava a bola inteira do quadro.

       Em 15/10/2026 a bola encolheu para 90px no celular e o trilho continuou
       com 311px. O MESMO 1,45 passou a mover 130px: a bola partia de 110px e
       sobrava 70px dela DENTRO do trilho. O efeito deixou de ser "a nova
       empurra a velha para fora" e virou "a velha encolhe e some no lugar".

       ⚠️ O E2E NÃO PEGOU. Ele confere as classes (`--saindo`, `--entrando`,
       `--impacto`) e os eventos de animação, e todos continuavam certos — o que
       quebrou foi a GEOMETRIA. Instrumento verde, efeito errado (§3.13 do
       AGENTS.md). Agora há verificação de posição: `e2e/animacoes_sorteio.py`
       mede o `getBoundingClientRect()` da bola que sai e exige que ela tenha
       deixado o trilho.

       Com `cqw` a conta fica exata em qualquer largura: `50cqw` é metade do
       trilho e `50%` é metade da bola (no `translateX` a porcentagem é a largura
       do próprio elemento), então a soma tira a bola do quadro em qualquer
       tamanho. O valor positivo é a reserva para navegador sem container query:
       `3.2` cobre até 640px, onde a bola já bateu no teto de 6,5rem e o trilho
       continua crescendo.
       ====================================================================== */
    --lb-empurrao: calc(var(--lb-bola) * 3.2);

    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lb-palco__trilho {
    position: relative;
    width: 100%;
    height: var(--lb-bola);
    overflow: hidden;
    /* O brilho da bola é um pseudo-elemento INTERNO (abaixo): `overflow:hidden`
       é o que faz a bola sumir na borda em vez de invadir o painel ao lado, e
       ele cortaria qualquer `box-shadow` externo. */
    isolation: isolate;
}

.lb-palco__bola {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--lb-bola);
    height: var(--lb-bola);
    margin-left: calc(var(--lb-bola) / -2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: clamp(2.4rem, 15vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    color: #1b1200;
    background: radial-gradient(circle at 32% 28%, #fff7d6 0%, #ffd333 38%, #e6b500 70%, #8a6a00 100%);
    text-shadow: 0 0.2vmin 0 rgba(255, 255, 255, 0.55);
    will-change: transform, opacity;
}

/* Halo: fica DENTRO do trilho, então não é cortado pelo `overflow`. */
.lb-palco__bola::after {
    content: '';
    position: absolute;
    inset: -6%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 211, 51, 0.55) 0%, rgba(255, 211, 51, 0) 68%);
    z-index: -1;
}

.lb-palco__bola--vazia {
    background: rgba(255, 255, 255, 0.06);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

.lb-palco__bola--vazia::after { display: none; }

/* Chegada da PRIMEIRA bola (a tela abriu já com número): só um pop. */
.lb-palco__bola--inicial { animation: lb-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }

/* A que estava: empurrada para fora. */
.lb-palco__bola--saindo {
    animation: lb-empurra-sai 0.42s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
    pointer-events: none;
}

/* A que chega: vem da direita e assenta com um leve estouro. */
.lb-palco__bola--entrando {
    animation: lb-empurra-entra 0.52s cubic-bezier(0.18, 1.5, 0.4, 1) forwards;
}

/* O tranco do trilho no impacto. */
.lb-palco__trilho--impacto { animation: lb-empurra-impacto 0.34s ease-out; }

/* O trilho é o CONTAINER de consulta: é a largura dele que define até onde a
   bola precisa andar para sair do quadro. Precisa vir depois da declaração de
   `--lb-empurrao` em `.lb-palco` (mesma especificidade, ganha a última). */
@supports (container-type: inline-size) {
    .lb-palco__trilho { container-type: inline-size; }

    .lb-palco { --lb-empurrao: calc(50cqw + 50%); }
}

@keyframes lb-empurra-sai {
    0%   { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translateX(calc(var(--lb-empurrao) * -1)) scale(0.68) rotate(-22deg); opacity: 0; }
}

@keyframes lb-empurra-entra {
    0%   { transform: translateX(var(--lb-empurrao)) scale(0.68) rotate(20deg); opacity: 0; }
    60%  { transform: translateX(-6%) scale(1.07) rotate(-3deg); opacity: 1; }
    100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes lb-empurra-impacto {
    0%   { transform: translateX(0); }
    30%  { transform: translateX(-7px); }
    62%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* ==========================================================================
   FEEDBACK DAS OUTRAS PEÇAS
   ========================================================================== */

/* Número mais recente da faixa lateral entrando. */
.lb-recent__item--entrando { animation: lb-recente-entra 0.5s cubic-bezier(0.18, 1.4, 0.4, 1); }

@keyframes lb-recente-entra {
    0%   { transform: translateX(-16px) scale(0.5); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* Bola que acabou de sair na grade de 90: anel que expande uma vez.
 *
 * O anel é um PSEUDO-ELEMENTO com `transform: scale()`, e não um `box-shadow`
 * animado. `box-shadow` obriga o navegador a repintar a área a cada quadro;
 * `transform` o compositor resolve na GPU. A diferença não é teórica: isto roda
 * numa grade de 90 bolas, no celular. */
.lb-bola { position: relative; }

.lb-bola--flash::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 2px solid #ffd333;
    pointer-events: none;
    animation: lb-anel 0.9s ease-out forwards;
}

@keyframes lb-anel {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Contador que mudou: um pulso curto, para o olho achar o número.
 *
 * Só `transform`. A versão anterior também trocava a `color` no meio do pulso —
 * e animar cor repinta o texto a cada quadro, que é exatamente o custo que esta
 * tela não pode pagar. O tamanho já chama o olho. */
.lb-pulso {
    display: inline-block;   /* `scale` não tem efeito em elemento inline */
    animation: lb-pulso 0.55s ease-out;
}

@keyframes lb-pulso {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Cartela a UM número do prêmio: batida de coração. Só a borda/realce pulsam,
   e em `transform`/`opacity` — nada de animar cor em laço (repinta a tela). */
.lb-card-item--hot { animation: lb-batida 1.6s ease-in-out infinite; }

@keyframes lb-batida {
    0%, 100% { transform: scale(1); }
    8%       { transform: scale(1.02); }
    16%      { transform: scale(1); }
}

.lb-card-item--full { animation: lb-comemora 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes lb-comemora {
    0%   { transform: scale(0.94) rotate(-0.8deg); }
    55%  { transform: scale(1.05) rotate(0.8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ==========================================================================
   PRÊMIO — DUAS CELEBRAÇÕES QUE NÃO PODEM SER CONFUNDIDAS
   ==========================================================================

   ⚠️ ESTA É A PARTE DELICADA DA TELA.

   Quando sai uma faixa, o jogador que está com o celular na mão precisa saber
   em UM SEGUNDO se o prêmio é dele ou de outra pessoa. Se as duas comemorações
   parecerem a mesma coisa, ele vai ao balcão cobrar um prêmio que não é dele.

   Por isso as duas são deliberadamente OPOSTAS em forma, cor, posição e duração:

   | | prêmio de ALGUÉM (`.lb-toast`) | prêmio SEU (`.lb-premio`) |
   |---|---|---|
   | forma     | faixa fina no topo         | tomada de tela inteira      |
   | cor       | fundo escuro, borda verde  | fundo OURO maciço           |
   | tamanho   | texto pequeno              | texto gigante               |
   | posição   | encostada no topo          | centro da tela              |
   | some      | sozinha em 6s              | só quando o jogador fecha   |
   | som       | nenhum                     | fanfarra curta (se o som já estiver ligado) |

   E as duas dizem, em palavras, de quem é o prêmio: "alguém ganhou" × "SUA
   cartela ganhou". Nunca "Você ganhou!" na celebração pública.
   ========================================================================== */

.lb-toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    background: rgba(4, 24, 18, 0.94);
    border-bottom: 2px solid #10b981;
    color: #d1fae5;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
    animation: lb-toast-entra 0.45s cubic-bezier(0.18, 1.4, 0.4, 1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.lb-toast--saindo { animation: lb-toast-sai 0.35s ease-in forwards; }

.lb-toast__selo {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #04231a;
    background: #6ee7b7;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.lb-toast__valor { color: #ffd333; font-weight: 900; white-space: nowrap; }

@keyframes lb-toast-entra {
    0%   { transform: translateY(-110%); }
    100% { transform: translateY(0); }
}

@keyframes lb-toast-sai {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-110%); opacity: 0; }
}

/* ---------- Prêmio DO JOGADOR: tomada de tela ---------- */

.lb-premio {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: radial-gradient(circle at 50% 30%, #2a1e00 0%, #120c00 70%);
    animation: lb-premio-entra 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
    overflow-y: auto;
}

.lb-premio--saindo { animation: lb-premio-sai 0.32s ease-in forwards; }

.lb-premio__caixa {
    width: 100%;
    max-width: 26rem;
    text-align: center;
    background: linear-gradient(165deg, #fff7d6 0%, #ffd333 42%, #e6b500 100%);
    color: #1b1200;
    border-radius: 1.4rem;
    padding: 1.6rem 1.2rem 1.3rem;
    border: 4px solid #1b1200;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.lb-premio__selo {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: #1b1200;
    color: #ffd333;
    border-radius: 999px;
    padding: 0.28rem 0.8rem;
    margin-bottom: 0.7rem;
}

.lb-premio__titulo {
    margin: 0 0 0.35rem;
    font-size: clamp(1.5rem, 8vw, 2.3rem);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.lb-premio__faixa {
    margin: 0.5rem 0 0.15rem;
    font-size: clamp(1.15rem, 6vw, 1.7rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.lb-premio__valor {
    display: block;
    margin: 0.35rem 0 0.6rem;
    font-size: clamp(2.1rem, 13vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.lb-premio__cartela {
    font-family: ui-monospace, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(27, 18, 0, 0.12);
    border-radius: 0.6rem;
    padding: 0.4rem 0.7rem;
    display: inline-block;
}

.lb-premio__acoes {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 1.1rem;
}

.lb-premio__btn {
    display: block;
    border: 0;
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    background: #1b1200;
    color: #ffd333;
}

.lb-premio__btn--fraco {
    background: transparent;
    color: #1b1200;
    border: 2px solid rgba(27, 18, 0, 0.45);
    font-size: 0.85rem;
}

@keyframes lb-premio-entra {
    0%   { transform: scale(1.16); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes lb-premio-sai {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.96); opacity: 0; }
}

/* Anel dourado girando em volta da caixa — só `transform`. */
.lb-premio__caixa::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 247, 214, 0.55) 40deg, transparent 90deg);
    animation: lb-gira 3.4s linear infinite;
    z-index: -1;
}

@keyframes lb-gira {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- Tela de fogos e moedas ---------- */

#lb-fx {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    display: none;
}

#lb-fx[data-ativo="1"] { display: block; }

/* Dinheiro caindo atrás da caixa do prêmio pessoal (não é o canvas: aqui são
   poucos elementos e o CSS resolve melhor que partícula). */
.lb-chuva {
    position: fixed;
    inset: 0;
    z-index: 79;
    pointer-events: none;
    overflow: hidden;
}

.lb-chuva span {
    position: absolute;
    top: -8%;
    font-size: 1.6rem;
    animation: lb-cai linear forwards;
    will-change: transform;
}

@keyframes lb-cai {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translateY(115vh) rotate(540deg); opacity: 1; }
}

/* ==========================================================================
   QUEM PEDIU MENOS MOVIMENTO NO SISTEMA NÃO RECEBE NENHUM
   ==========================================================================
   A informação continua chegando inteira: o toast e a tomada de tela aparecem
   (é conteúdo, não enfeite) — só entram sem animação e sem partícula. */
@media (prefers-reduced-motion: reduce) {
    .lb-palco__bola,
    .lb-palco__trilho,
    .lb-recent__item,
    .lb-bola,
    .lb-counters b,
    .lb-card-item,
    .lb-premio,
    .lb-premio__caixa::before,
    .lb-toast {
        animation: none !important;
    }

    #lb-fx,
    .lb-chuva { display: none !important; }
}

/* Aba oculta: nada anima (o JS também para os laços, isto é a segunda tranca). */
body[data-lb-oculto="1"] .lb-card-item--hot,
body[data-lb-oculto="1"] .lb-premio__caixa::before {
    animation-play-state: paused;
}

/* Linha de ganhador cuja cartela é DO JOGADOR logado. É o contraponto estático da
   tomada de tela: depois que ela fecha, o jogador precisa conseguir achar o seu
   prêmio na lista — e ninguém mais recebe esta marcação. */
.lb-award--minha {
    border-color: #ffd333;
    background: linear-gradient(160deg, rgba(255, 211, 51, 0.28), rgba(255, 211, 51, 0.08));
}

.lb-award__selo {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1b1200;
    background: #ffd333;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

/* ==========================================================================
   CARTELAS PREMIADAS e NA FRENTE — as duas seções que vieram da TV
   ==========================================================================

   ## O que a TV mostra e o celular não podia copiar

   Na TV as duas listas ficam lado a lado num painel 16:9, vistas de longe: a
   cartela pode ser grande, porque cabe. No celular a tela é UMA coluna estreita
   — copiar o desenho da TV daria uma cartela por tela e a lista de 5 viraria
   1000px de rolagem.

   ## A decisão: DUAS colunas a partir de 360px

   Medido em 390px, cada cartela em coluna única custava **205px** (a grade 5×3
   ocupava a largura inteira e cada casa saía com 64px). Em duas colunas a mesma
   cartela cai para ~130px e a seção inteira economiza ~180px — sem diminuir o
   número, que é o que o jogador precisa ler.
   ========================================================================== */

.lb-premiadas,
.lb-frente {
    display: grid;
    gap: var(--al-bloco);
    grid-template-columns: 1fr;
    margin-top: 0.6rem;
}

@media (min-width: 360px) {
    .lb-premiadas,
    .lb-frente {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * CARTELAS "NA FRENTE" E "PREMIADAS" NO PC: 4 POR LINHA.
 *
 * Pedido de 18/10/2026 para as cartelas "na frente" ("nas minhas cartelas deixe
 * 4 por linha no pc") e repetido em 19/10/2026 para as PREMIADAS: *"queria o
 * mesmo pra cartelas premiadas, 4 por linha em desktop"*.
 *
 * A janela em que o cliente olha o painel tem ~990px úteis. Um breakpoint em
 * 1024 deixaria justamente ele em 2 por linha; por isso 900px — o MESMO número
 * que `.lb-cards` ("minhas cartelas") usa, para as três listas da tela virarem
 * quatro colunas no mesmo instante.
 *
 * No celular continuam 2 por linha (o cliente considerou bom): em 390px cada
 * cartela fica com ~130px, e o número precisa ser legível sem zoom.
 */
@media (min-width: 900px) {
    .lb-premiadas,
    .lb-frente {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* -------- Cartela premiada -------- */
.lb-premiada {
    padding: 0.6rem;
    border-radius: 0.8rem;
    background: linear-gradient(160deg, rgba(255, 211, 51, 0.16), rgba(255, 211, 51, 0.04));
    border: 1px solid rgba(255, 211, 51, 0.45);
}

/* O prêmio do PRÓPRIO jogador: mesma marcação que a lista antiga usava, para a
   linha continuar inconfundível depois que a tomada de tela fecha. */
.lb-premiada--minha {
    background: linear-gradient(160deg, rgba(255, 211, 51, 0.30), rgba(255, 211, 51, 0.08));
    border-color: #ffd333;
}

.lb-premiada__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.lb-premiada__faixa {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6ee7b7;
}

.lb-premiada__valor {
    font-size: 0.9rem;
    font-weight: 900;
    color: #ffd333;
}

.lb-premiada__dono {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

.lb-premiada__codigo {
    display: inline-block;
    margin-left: 0.25rem;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

/* -------- Na frente -------- */
.lb-frente__item {
    padding: 0.55rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* A que está a um número de fechar: a mesma batida de coração da cartela do
   jogador (`.lb-card-item--hot`), para o olho achar a "quente" na lista. */
.lb-frente__item--quente {
    border-color: #ffd333;
    background: rgba(255, 211, 51, 0.12);
    animation: lb-batida 1.6s ease-in-out infinite;
}

.lb-frente__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.lb-frente__codigo {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: #ffd333;
}

.lb-frente__faltam {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

.lb-frente__item--quente .lb-frente__faltam { color: #ffe9a3; }

.lb-frente__premio {
    margin-left: 0.35rem;
    color: #ffd333;
    font-weight: 900;
    letter-spacing: 0;
}

/* ==========================================================================
   APROVEITAMENTO DE ESPAÇO (medido em 390x844)
   ==========================================================================

   A tela tinha 1854px (2,2 telas) com 478px em vãos. O que sobrava não era
   margem entre blocos — era padding DENTRO deles. Cada ajuste abaixo tem o
   número que o motivou.
   ========================================================================== */

/* Cartão com respiro menor em tela de celular. A TV usa `1rem` porque é vista de
   longe; aqui 12px já separa. */
@media (max-width: 640px) {
    /* ======================================================================
       O RESPIRO LATERAL DESTA TELA É PAGO UMA VEZ SÓ.

       O layout já separa da borda com `--al-gutter` (o padding do `main`), e o
       `.container-conteudo` somava `--al-card-x` (16px) em cima disso. Nesta
       página o container externo é só um invólucro — quem desenha cartão aqui é
       `.lb-card` —, então os 16px eram respiro DUPLICADO: a mesma regra que o
       §3.12 do AGENTS.md manda não repetir.

       Medido em 390x844: faixa roxa de 30px (14 de gutter + 16 do container) e
       cartão de 331px → 14px de faixa e cartão de 363px (+32px, +9,7%).
       Só no celular: no desktop o container tem 1200px de largura e o respiro
       maior é proposital.

       A especificidade (`main.al-casca >`) é necessária: o `.container-conteudo`
       é estilizado num `<style>` do layout que entra DEPOIS desta folha, e com
       peso igual ele venceria.
       ====================================================================== */
    main.al-casca > .container-conteudo {
        padding-left: 0;
        padding-right: 0;
    }

    /* ======================================================================
       O PALCO DO ÚLTIMO NÚMERO ERA A MAIOR CAIXA DA TELA.

       Ele ocupava 205px de altura para mostrar UM número, com a bola em 156px
       (40vw) — mais que o dobro de qualquer outro elemento. Aqui a bola vai para
       ~90px (23vw) e o painel para ~141px: 31% menor, e a grade de 90 bolas
       sobe para perto da primeira dobra.

       Continua sendo o elemento mais forte da página: os chips de "últimos
       sorteados" têm 30px, e o dígito da bola sai a 33px.
       ====================================================================== */
    .lb-palco {
        --lb-bola: clamp(4rem, 23vw, 6.5rem);
    }

    .lb-palco__bola {
        font-size: clamp(1.6rem, 8.6vw, 2.6rem);
    }

    /* O painel do último número: era 1rem em volta de uma bola de 156px. */
    .lb-hero {
        padding: 0.6rem 0.5rem;
        gap: 0.35rem;
    }

    /* Premiação em 2×2: o rótulo de 0,62rem e o padding de 0,6rem deixavam cada
       caixa com 60px para duas linhas de texto. */
    .lb-prize {
        padding: 0.45rem 0.3rem;
    }

    .lb-prize__label { font-size: 0.58rem; letter-spacing: 0.1em; }

    /* A grade de 90 bolas é o bloco mais denso da tela: aqui o respiro é o
       mínimo que ainda separa uma bola da outra. */
    .lb-board { gap: 0.22rem; }
    .lb-board__row { gap: 0.3rem; }
    .lb-board__balls { gap: 0.22rem; }

    /* O título de seção é rótulo, não manchete. */
    .lb-section-title { margin-top: 1rem; font-size: 0.95rem; }
}

/* Seções que vinham com `style="margin-top:1rem"` no markup: o respiro é o mesmo
   token do resto da área externa, não um número solto por arquivo. */
.lb-distante { margin-top: var(--al-bloco); }


/* ==================================================================
   CTA DA TELA AO VIVO — "o que eu faço agora" (16/10/2026)

   A tela não tinha caminho nenhum: quem chegava (ou quem queria mais cartela)
   tinha de descobrir sozinho que a compra mora noutro lugar. Faixa de duas
   ações, logo depois do número da vez, no tamanho de dedo (44px) porque o
   celular é o alvo principal.
   ================================================================== */
.lb-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.lb-cta__btn {
    flex: 1 1 12rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.06);
}

.lb-cta__btn--principal {
    background: linear-gradient(180deg, #facc15, #eab308);
    color: #3b2f00;
    border-color: #fde68a;
}

.lb-cta__btn:hover { filter: brightness(1.08); }


/* ==================================================================
   TABELA DA RODADA (faixa / ganhadores / pago)

   Padrão do resultado oficial: números em coluna, alinhados à direita, sem
   enfeite. No celular a tabela ocupa a largura toda e as três colunas cabem
   porque o rótulo da faixa é curto (Kuadra/Kina/Keno).
   ================================================================== */
.lb-resumo {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0.85rem;
    font-size: 0.85rem;
}

.lb-resumo th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 0 0.25rem;
}

.lb-resumo th:nth-child(2),
.lb-resumo th:nth-child(3),
.lb-resumo td:nth-child(2),
.lb-resumo td:nth-child(3) { text-align: right; }

.lb-resumo td {
    padding: 0.3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-variant-numeric: tabular-nums;
}

.lb-resumo td:first-child { font-weight: 700; color: #fde68a; }


/* ==================================================================
   PRÓXIMO SORTEIO — uma linha de contexto (item 8)

   Fica logo abaixo do número da vez e acima do CTA: informa sem competir com o
   que está acontecendo agora. Discreta de propósito: fundo nenhum, texto menor,
   e o número que importa (quantas cartelas faltam) em destaque.
   ================================================================== */
.lb-proximo {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.62);
}

.lb-proximo b { color: #fde68a; font-variant-numeric: tabular-nums; }

/* ===================== A UMA BOLA (18/10/2026) =====================
 * Substitui o desenho das cartelas "na frente": agora só a contagem por faixa,
 * e apenas quando houver alguém a uma bola. Uma linha por faixa, com o número
 * em destaque e o resto em texto normal.
 */
.lb-uma-bola__linhas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.lb-uma-bola__linha {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.lb-uma-bola__linha b {
    color: #ffd333;
    font-size: 1.15rem;
    font-weight: 800;
}

/* A mais próxima do fim (Keno) ganha um realce discreto. */
.lb-uma-bola__linha[data-faixa="keno"] {
    color: #fff;
}


/* ==========================================================================
   | PRÊMIO QUE JÁ ERA SEU quando a tela abriu (cliente, 18/10/2026)
   |
   | *"anunciou o bingo mas a kina e kuadra nao"* — ele ganhou Kuadra na bola 22
   | e Kina na 38, abriu a tela depois e só viu a festa do Keno (bola 62).
   |
   | A regra de não comemorar prêmio que já estava na tela continua valendo (não
   | se anuncia "acabou de ganhar" para quem chegou depois). Mas prêmio DELE não
   | pode passar em silêncio: esta faixa informa o que ele já conquistou, com a
   | soma, e NÃO interrompe. Mesma família visual do `.lb-toast` (faixa no topo),
   | em OURO — a cor do prêmio pessoal —, e com botão de fechar.
   ========================================================================== */

.lb-premios-meus {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 66;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    padding: 0.7rem 2.4rem 0.7rem 1rem;
    background: rgba(27, 18, 0, 0.96);
    border-bottom: 2px solid #ffd333;
    color: #fff7d6;
    font-size: 0.86rem;
    text-align: center;
    animation: lb-toast-entra 0.45s cubic-bezier(0.18, 1.4, 0.4, 1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.lb-premios-meus__texto strong {
    display: block;
    color: #ffd333;
    font-weight: 900;
}

.lb-premios-meus__texto span {
    display: block;
    margin-top: 0.1rem;
    font-weight: 600;
    color: #fff7d6;
}

.lb-premios-meus__acao {
    flex: 0 0 auto;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: #ffd333;
    color: #1b1200;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.lb-premios-meus__acao:hover {
    background: #e6b500;
}

.lb-premios-meus__fechar {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff7d6;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 640px) {
    .lb-premios-meus {
        padding: 0.6rem 2.2rem 0.6rem 0.8rem;
        font-size: 0.79rem;
    }
}

/* ============================================================================
 * PROTÓTIPO (19/10/2026): A TELA AO VIVO NO MESMO ESTILO FLAT DA TV.
 *
 * Cliente, depois de ver a TV sem bordas: *"ficou tão perfeito que esse mesmo
 * estilo flat quero tentar na tela de sorteio ao vivo, mas coisa rápida hein, sem
 * e2e e não commit"*.
 *
 * `border-color: transparent` mantendo a ESPESSURA — mesmo critério da TV: o traço
 * some e nada se desloca (remover a borda encolheria/alargaria caixas e a
 * comparação deixaria de ser "só sem bordas").
 *
 * ⚠️ Como na TV, isto leva junto o que era SINAL e não moldura:
 *   - o contorno TRACEJADO das dezenas ainda não sorteadas na grade;
 *   - o anel de destaque da cartela que está a uma dezena de fechar a faixa;
 *   - o anel da "cartela premiada".
 * Se algum incomodar, a exceção é de duas linhas por caso.
 *
 * Para descartar: apagar este bloco.
 * ========================================================================== */
.lb-page,
.lb-page * {
    border-color: transparent !important;
}


/* ============================================================================
 * TEMA REDE 23 — A TELA AO VIVO VESTE A TV
 *
 * Cliente, 28/11/2026: *"deixe a tela ao vivo no mesmo tema da tv, consegue? Até
 * com o efeito kikando"* → *"tem que ser responsiva e manter as mesmas funções"*
 * → *"tem que ser a tv tema rede 23"*.
 *
 * ## A referência é `public/css/tv-rede23.css`, e os valores são COPIADOS dela
 *
 * Não é uma paleta parecida: é o mesmo desenho, com os mesmos números.
 *
 * | o que | valor na TV (`tv-rede23.css`) | aqui |
 * |---|---|---|
 * | painel | `rgba(4,26,66,.55)`, sem borda | igual |
 * | display (LED) | `#0c2f66` + pontilhado `rgba(255,255,255,.07)` | igual |
 * | valor dourado | `#ffd400`, Arial Black | igual |
 * | cartão teal / azul | `#12909c` / `#1e86cc` | igual |
 * | bola | anel laranja `#ffb63f→#b0701c→#b83b06` + miolo creme | igual |
 * | dezena | sorteada = círculo azul; última = vermelha; resto verde | igual |
 * | cartela | cartão BRANCO com cabeçalho azul e casas creme | igual |
 *
 * ## Pele, não segunda tela
 *
 * Nenhum elemento novo no componente Livewire, nenhuma classe nova no markup. O
 * `wire:poll`/WebSocket, a narração, os fogos, o painel de prêmios, a grade e as
 * animações continuam como estavam — muda o desenho (§3.13 do AGENTS.md: a bola
 * é nó estável, e mexer na estrutura do componente já custou a tela).
 *
 * ## Responsiva
 *
 * Nada aqui tem largura fixa. Os tamanhos que precisam acompanhar a tela usam
 * `clamp()`; os que precisam acompanhar a BOLA usam `var(--lb-bola)` (o anel e o
 * dígito, que na TV são proporcionais ao diâmetro); os das cartelas usam `em`, e
 * por isso seguem a fonte do cartão em qualquer breakpoint.
 *
 * ⚠️ O QUIQUE precisa de folga. O trilho da bola tem a altura EXATA da bola com
 * `overflow:hidden`, então a bola subindo seria cortada no primeiro quadro: por
 * isso o trilho ganha 18% e a bola desce 9% dentro dele.
 * ========================================================================== */

/* ------------------------------ 1. FUNDO ------------------------------
 *
 * ⚠️ O FUNDO É O PADRÃO DO SITE — a foto da TV é só da TV.
 *
 * A primeira versão desta pele puxava a foto ATIVA do painel (`tv_fundos`) para
 * cá também, e o cliente vetou no mesmo dia:
 *
 *     *"nao quero que na tela de sorteio ao vivo use o fundo definido, use o
 *     default mesmo"*
 *
 * Faz sentido: a foto do painel é a cenografia da PAREDE do bar, escolhida para
 * ser lida de longe e trocada a cada evento. A tela do jogador é outra peça.
 *
 * Então esta folha NÃO toca em `background` do `<body>`: quem pinta é o layout
 * (`layouts/bola-da-vez.blade.php` → `background_roxo.jpg`, `cover` + `fixed`,
 * com a exceção de `scroll` no celular que já está lá). Aqui só entram a
 * tipografia e a moldura do tema.
 * --------------------------------------------------------------------- */

body.lb-tv-tema {
    /* A TV inteira é Arial; os números, Arial Black (existe em qualquer
       aparelho, sem baixar webfont). */
    font-family: Arial, Helvetica, sans-serif;
}

/*
 * O retângulo escuro do layout (`retangulo_escuro.png`) sai: ele é o cartão da
 * área externa, e aqui o conteúdo flutua sobre o fundo padrão do site. O respiro
 * lateral continua sendo o do layout (`--al-gutter`, §3.12).
 */
body.lb-tv-tema .container-conteudo {
    background-image: none;
    background-color: transparent;
    border-radius: 0;
    max-width: 1180px;
}

/* --------------------------- 2. TIPOGRAFIA --------------------------- */

/* Rótulo da TV: maiúsculo, espaçado, azul-claro. */
body.lb-tv-tema .lb-label,
body.lb-tv-tema .lb-price,
body.lb-tv-tema .lb-counters {
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.lb-tv-tema .lb-label { color: #a8d4ff; }

/* Os números da tela são Arial Black, como as `.led__texto`/`.bola__miolo`. */
body.lb-tv-tema .lb-prize__value,
body.lb-tv-tema .lb-counters b,
body.lb-tv-tema .lb-recent__item,
body.lb-tv-tema .lb-bola,
body.lb-tv-tema .lb-cell {
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}

/* ---------------------------- 2.1 PAINÉIS ----------------------------
 *
 * O painel da TV: azul translúcido `rgba(4,26,66,.55)`, SEM borda, canto
 * arredondado e sombra suave. A regra "sem bordas" é do cliente (30/10/2026):
 * *"tá tudo muito quadrado … muita borda (não quero bordas)"*. O bloco "flat"
 * do fim da folha já deixa toda borda transparente; aqui só o fundo muda.
 * ------------------------------------------------------------------ */
body.lb-tv-tema .lb-card {
    background: rgba(4, 26, 66, 0.55);
    box-shadow: 0 0.4vmin 1.4vmin rgba(0, 0, 0, 0.3);
}

/* O painel do último número é o mesmo `tv-display` da TV em volta da bola. */
body.lb-tv-tema .lb-hero {
    background: rgba(4, 26, 66, 0.55);
    box-shadow:
        0 0.4vmin 1.4vmin rgba(0, 0, 0, 0.35),
        inset 0 0.4vmin 1.4vmin rgba(0, 0, 0, 0.3);
}

/* --------------------------- 3. CABEÇALHO ---------------------------
 *
 * Na TV o topo da coluna esquerda é um 2×2 de cartões: teal para SORTEIO e
 * DOAÇÃO, azul para DATA e HORA, com rótulo creme miúdo em cima e valor branco
 * grande embaixo.
 *
 * Aqui a mesma ideia com o que esta tela tem: o SORTEIO (teal) e o preço da
 * cartela (azul). O selo de estado vira a pílula escura do canto superior direito
 * da TV.
 * ------------------------------------------------------------------ */
body.lb-tv-tema .lb-top {
    align-items: stretch;
    gap: 0.45rem;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0.6rem;
}

body.lb-tv-tema .lb-top > div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: stretch;
}

body.lb-tv-tema .lb-desc {
    padding: 0.45rem 0.8rem;
    border-radius: 0.7rem;
    background: #12909c;
    font-size: clamp(0.95rem, 3.4vw, 1.2rem);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.25);
}

body.lb-tv-tema .lb-price {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: 0.7rem;
    background: #1e86cc;
    font-size: clamp(0.7rem, 2.6vw, 0.86rem);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.25);
}

/* A pílula de estado: fundo escuro translúcido e texto verde, igual à TV. */
body.lb-tv-tema .lb-pill {
    padding: 0.4rem 0.9rem;
    border: 0;
    background: rgba(4, 26, 66, 0.55);
    color: #8ef0a0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.25);
}

body.lb-tv-tema .lb-pill--wait { color: #ffd400; }
body.lb-tv-tema .lb-pill--done { color: #a8d4ff; }

/* ------------------------- 4. DISPLAYS (LED) -------------------------
 *
 * O `led` da TV: caixa azul-escura com pontilhado, valor dourado em Arial Black e
 * brilho interno. É o que o salão lê de longe — e é o bloco que mais pesa no
 * "igual à TV" desta tela.
 * ------------------------------------------------------------------ */
body.lb-tv-tema .lb-prizes {
    gap: 0.45rem;
    /*
     * Três prêmios IRMÃOS na mesma linha (e o acumulado ocupando a linha de
     * cima), como na coluna de displays da TV. Na grade antiga de 2 colunas o
     * Keno sobrava sozinho na terceira linha.
     */
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.lb-tv-tema .lb-prize {
    gap: 0.1rem;
    padding: 0.5rem 0.45rem;
    border-radius: 0.8rem;
    background-color: #0c2f66;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 0.7px, transparent 1px);
    background-size: 7px 7px;
    box-shadow:
        inset 0 0.2rem 0.7rem rgba(0, 0, 0, 0.45),
        0 0.15rem 0.5rem rgba(0, 0, 0, 0.25);
}

/*
 * O ACUMULADO é o campeão de leitura (é o primeiro da lista, `accumulated` em
 * `LiveDrawState`): ocupa a linha inteira e leva a borda dourada, como o
 * `.led--grande`.
 */
body.lb-tv-tema .lb-prize:first-child {
    grid-column: 1 / -1;
    border: 1px solid rgba(255, 212, 0, 0.85);
    box-shadow:
        inset 0 0.2rem 0.7rem rgba(0, 0, 0, 0.45),
        0 0 1.2rem rgba(255, 212, 0, 0.35);
}

body.lb-tv-tema .lb-prize__label {
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.45);
}

body.lb-tv-tema .lb-prize__value {
    color: #ffd400;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

body.lb-tv-tema .lb-prize:first-child .lb-prize__value {
    font-size: clamp(1.15rem, 5vw, 1.6rem);
}

/* Contadores: rótulo claro, número dourado. */
body.lb-tv-tema .lb-counters { color: #a8d4ff; }
body.lb-tv-tema .lb-counters b { color: #ffd400; }

/* ------------------------------ 5. A BOLA ------------------------------
 *
 * Desenho da `.bola-grande` da TV, com as MESMAS proporções:
 *   anel  laranja em gradiente, 10% do diâmetro (3vmin em 30vmin na TV);
 *   miolo creme `radial-gradient(#fff → #f3efe7 → #cdc6b8)`, 80% do diâmetro;
 *   número escuro `#2b2b2b` em Arial Black, 52% do diâmetro (15,6vmin em 30vmin).
 *
 * ⚠️ A ORDEM DAS CAMADAS DE FUNDO: a PRIMEIRA é desenhada POR CIMA. O creme vem
 * primeiro (recortado em `padding-box`) e o laranja depois (recortado em
 * `border-box`): é o laranja aparecendo só na borda transparente que forma o
 * anel. Invertido, a bola fica TODA laranja — foi o que aconteceu na primeira
 * versão, e o número escuro sobre laranja ainda disfarçou o defeito.
 * ------------------------------------------------------------------ */

/* A folga do quique (ver o comentário do topo). */
body.lb-tv-tema .lb-palco__trilho {
    /*
     * 1,45 diâmetro de altura — era 1,18. A bola agora CAI de 23% do diâmetro
     * acima do repouso (o `tv-bola-quique` da TV), então precisa de espaço ACIMA
     * dela; com o trilho justo o topo da bola era cortado pelo `overflow:hidden`
     * (o cliente viu: *"tá cortando um pedaço da bola grande"*).
     */
    height: calc(var(--lb-bola) * 1.45);
}

body.lb-tv-tema .lb-palco__bola {
    /*
     * 38% de folga ACIMA da bola: é de onde ela CAI. O `lb-bola-quique` começa
     * em -23% do diâmetro e o `scale(0.94, 1.10)` do primeiro quadro cresce mais
     * ~10% da altura para cima (o pivô é o pé) — somado dá 33% do diâmetro, e o
     * topo era cortado pelo `overflow:hidden` do trilho.
     */
    top: calc(var(--lb-bola) * 0.38);
    box-sizing: border-box;
    border: calc(var(--lb-bola) * 0.10) solid transparent;
    background-color: transparent;
    background-image:
        radial-gradient(circle at 40% 32%, #ffffff 0%, #f3efe7 62%, #cdc6b8 100%),
        radial-gradient(circle at 38% 26%, var(--cor-claro) 0%, var(--cor-medio) 55%, var(--cor-escuro) 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    color: #2b2b2b;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-size: calc(var(--lb-bola) * 0.52);
    /* Cor PADRÃO: o laranja da TV. Quem manda é o último dígito (item 10). */
    --cor-claro: #ffb63f;
    --cor-medio: #f0701c;
    --cor-escuro: #b83b06;
    text-shadow: none;
    box-shadow: 0 0.5vmin 1.6vmin rgba(0, 0, 0, 0.45);
    /* A bola amassa no PÉ, como na TV. */
    transform-origin: 50% 100%;
}

/* A que sai volta ao pivô central: ela gira e encolhe ao ser empurrada. */
body.lb-tv-tema .lb-palco__bola--saindo { transform-origin: 50% 50%; }

body.lb-tv-tema .lb-palco__bola::after {
    background: radial-gradient(circle, rgba(240, 112, 28, 0.5) 0%, rgba(240, 112, 28, 0) 68%);
}

body.lb-tv-tema .lb-palco__bola--vazia {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* ============================= O QUIQUE =============================
 *
 * O `tv-bola-quique` da TV, em escala de tela de celular: 6% de subida contra os
 * 7vmin da TV (lá o palco tem folga; aqui a bola vive dentro do trilho).
 *
 * Vem DEPOIS da animação de entrada, e não no lugar dela: o empurrão ("a nova
 * chega e a velha sai") é função testada por `e2e/animacoes_sorteio.py` e o
 * cliente pediu para manter. A entrada leva 400ms; o quique começa quando ela
 * termina.
 * ==================================================================== */
body.lb-tv-tema .lb-palco__bola--entrando {
    -webkit-animation: lb-bola-quique 900ms cubic-bezier(0.33, 0.7, 0.4, 1) both;
    animation: lb-bola-quique 900ms cubic-bezier(0.33, 0.7, 0.4, 1) both;
}

@-webkit-keyframes lb-bola-quique {
    0%   { -webkit-transform: translateY(-23%) scale(0.94, 1.10); }
    45%  { -webkit-transform: translateY(0) scale(1.14, 0.86); }
    60%  { -webkit-transform: translateY(-6%) scale(0.97, 1.03); }
    76%  { -webkit-transform: translateY(0) scale(1.06, 0.94); }
    89%  { -webkit-transform: translateY(-1.8%) scale(0.99, 1.01); }
    100% { -webkit-transform: translateY(0) scale(1, 1); }
}

@keyframes lb-bola-quique {
    0%   { transform: translateY(-23%) scale(0.94, 1.10); }
    45%  { transform: translateY(0) scale(1.14, 0.86); }
    60%  { transform: translateY(-6%) scale(0.97, 1.03); }
    76%  { transform: translateY(0) scale(1.06, 0.94); }
    89%  { transform: translateY(-1.8%) scale(0.99, 1.01); }
    100% { transform: translateY(0) scale(1, 1); }
}

/*
 * ⚠️ Movimento reduzido tem de vencer ESTA regra: a regra genérica
 * (`.lb-palco__bola { animation: none }`) tem peso (0,2,0) e perderia para
 * `body.lb-tv-tema .lb-palco__bola--entrando` (0,3,1). O JS já faz troca seca
 * nesse modo; isto é a segunda tranca.
 */
@media (prefers-reduced-motion: reduce) {
    body.lb-tv-tema .lb-palco__bola--entrando {
        -webkit-animation: none;
        animation: none;
    }
}

/* ---------------- 6. BOLINHAS MIÚDAS (hoje só a contagem regressiva) ----------------
 *
 * ATENÇÃO: a fileira de 10 "últimos sorteados" NÃO existe mais — as três últimas
 * chamadas passaram a orbitar a bola da vez (item 9). O que restou usando estas
 * classes é a CONTAGEM REGRESSIVA, que reaproveita o desenho da bolinha e depois
 * é sobrescrita por `[data-countdown-part]` (quatro caixas escuras, como o
 * relógio da TV).
 *
 * O desenho base continua aqui (miolo creme com anel laranja) porque é o do
 * `posicao1/2/3` da TV, e uma bolinha reaproveitada em outro bloco não pode
 * aparecer como círculo branco chapado.
 * ------------------------------------------------------------------------- */
body.lb-tv-tema .lb-recent__item {
    border: 0;
    background: radial-gradient(circle at 40% 32%, #ffffff 0%, #f3efe7 62%, #cdc6b8 100%);
    color: #2b2b2b;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    text-shadow: none;
    box-shadow:
        inset 0 0 0 0.26em #f0701c,
        0 1px 3px rgba(0, 0, 0, 0.35);
}

body.lb-tv-tema .lb-recent__item--latest {
    background: radial-gradient(circle at 40% 32%, #ffffff 0%, #f3efe7 62%, #cdc6b8 100%);
    color: #262626;
    box-shadow:
        inset 0 0 0 0.22em #1ca9cf,
        0 0 10px rgba(28, 169, 207, 0.62);
}

/* A CONTAGEM REGRESSIVA usa as mesmas bolinhas dos "últimos sorteados" — e na TV
 * a espera é um relógio de QUATRO CAIXAS escuras (DIAS / HORAS / MIN / SEG), não
 * bolas. Aqui elas viram caixa pela classe de dado, sem tocar no markup. */
body.lb-tv-tema [data-countdown-part] {
    width: auto;
    min-width: 2.7rem;
    height: auto;
    padding: 0.4rem 0.55rem;
    border-radius: 0.55rem;
    background: rgba(4, 26, 66, 0.8);
    color: #ffd400;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow:
        inset 0 0.15rem 0.5rem rgba(0, 0, 0, 0.45),
        0 0.15rem 0.5rem rgba(0, 0, 0, 0.25);
}

/* ------------------------- 6.1 LISTA DE GANHADORES -------------------------
 *
 * Na TV os ganhadores são LINHAS de uma tabela: fundo riscado (claro/escuro) e
 * texto branco, valor dourado. Aqui eram cartões com gradiente esmeralda — outra
 * família visual na mesma tela.
 * ------------------------------------------------------------------------ */
body.lb-tv-tema .lb-award {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
}

body.lb-tv-tema .lb-award--minha {
    background: rgba(255, 212, 0, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 212, 0, 0.7);
}

body.lb-tv-tema .lb-award__type { color: #a8d4ff; }
body.lb-tv-tema .lb-award__winner { color: #ffffff; }
body.lb-tv-tema .lb-award__code { color: #a8d4ff; font-family: Arial, Helvetica, sans-serif; }
body.lb-tv-tema .lb-award__value { color: #ffd400; }
body.lb-tv-tema .lb-award__selo { background: #ffd400; color: #0c2f66; }

/* --------------------------- 7. GRADE DE 90 ---------------------------
 *
 * A `.grade` da TV: painel azul translúcido e canto arredondado; dezena não
 * sorteada é o NÚMERO VERDE SOLTO (sem círculo); a sorteada é círculo azul; a
 * última, círculo vermelho.
 *
 * Os azuis/vermelhos são mais fechados que os da TV de propósito: lá a dezena é
 * lida a metros de distância; aqui, num celular, com o número branco por cima —
 * `#3d8bf0` daria 3,5:1 e reprova em WCAG AA. `#1f6ae0` dá 5,0:1 e continua azul.
 * ------------------------------------------------------------------- */
body.lb-tv-tema .lb-board {
    background: rgba(4, 26, 66, 0.55);
    border-radius: 1rem;
    padding: 0.5rem 0.4rem;
}

body.lb-tv-tema .lb-board__range { color: #a8d4ff; font-weight: 700; }

body.lb-tv-tema .lb-bola {
    background: transparent;
    color: #8ef07a;
}

body.lb-tv-tema .lb-bola--drawn {
    background: #1f6ae0;
    color: #ffffff;
    text-shadow: none;
    box-shadow: inset 0 -0.25vmin 0.6vmin rgba(0, 0, 0, 0.3);
}

body.lb-tv-tema .lb-bola--latest {
    background: radial-gradient(circle at 34% 28%, #e23a3a 0%, #c81c1c 58%, #8f0000 100%);
    color: #ffffff;
    text-shadow: none;
    box-shadow: 0 0 0.8rem rgba(210, 31, 31, 0.8);
}

/* --------------------------- 8. AS CARTELAS ---------------------------
 *
 * Na TV a cartela premiada aparece como cartão BRANCO: cabeçalho azul com o nome
 * do ganhador, casas creme com o número escuro, rodapé azul com código e valor.
 *
 * Esta tela desenha as mesmas casas (`.lb-cell`), então o cartão vira branco e o
 * cabeçalho/rodapé ficam azuis. Os azuis são `#1a6fb8` e não o `#1e86cc` da TV
 * porque há texto branco pequeno por cima (branco sobre `#1e86cc` dá 3,6:1 e
 * reprova em AA; sobre `#1a6fb8` dá 5,2:1).
 * -------------------------------------------------------------------- */
body.lb-tv-tema .lb-card-item,
body.lb-tv-tema .lb-premiada {
    background: #ffffff;
    border-radius: 0.6rem;
    padding: 0.5rem;
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.35);
}

/* "Faltam 2" e afins dentro do cartão branco precisam de tinta escura. */
body.lb-tv-tema .lb-card-item__code,
body.lb-tv-tema .lb-card-item__flag,
body.lb-tv-tema .lb-premiada__faixa,
body.lb-tv-tema .lb-premiada__valor,
body.lb-tv-tema .lb-premiada__dono,
body.lb-tv-tema .lb-premiada__codigo {
    color: #0c2f66;
}

body.lb-tv-tema .lb-card-item__code,
body.lb-tv-tema .lb-card-item__flag,
body.lb-tv-tema .lb-premiada__topo {
    background: #1a6fb8;
    border-radius: 0.35rem;
    padding: 0.12rem 0.45rem;
    color: #ffffff;
}

body.lb-tv-tema .lb-card-item__code {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

body.lb-tv-tema .lb-card-item__flag { display: block; margin-bottom: 0.3rem; }

body.lb-tv-tema .lb-premiada__topo { margin-bottom: 0.3rem; }

body.lb-tv-tema .lb-premiada__faixa,
body.lb-tv-tema .lb-premiada__valor {
    color: #ffffff;
}

body.lb-tv-tema .lb-premiada__dono,
body.lb-tv-tema .lb-premiada__codigo {
    color: #0c2f66;
}

/* As casas: creme com número escuro; a marcada é o círculo azul da dezena. */
body.lb-tv-tema .lb-cell {
    background: #f4f1ea;
    border: 0;
    border-radius: 0.35rem;
    color: #262626;
}

body.lb-tv-tema .lb-cell--marked {
    background: radial-gradient(circle at 34% 28%, #3d8bf0 0%, #1f6ae0 60%, #14479c 100%);
    color: #ffffff;
}

/* As três faixas do cartão (Kuadra/Kina/Keno): azul, dourada e teal. */
body.lb-tv-tema .lb-line { background: #1a6fb8; }
body.lb-tv-tema .lb-line--near { background: #ffd400; color: #1b1200; }
body.lb-tv-tema .lb-line--done { background: #12909c; color: #ffffff; }

/* Cartelas "na frente" (bloco das minhas cartelas): mesmo cartão branco. */
body.lb-tv-tema .lb-frente__item {
    background: #ffffff;
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.35);
}

/* O título de seção continua dourado, mas precisa de sombra sobre a foto. */
body.lb-tv-tema .lb-section-title,
body.lb-tv-tema .lb-section-sub {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 * 9. AS TRÊS ÚLTIMAS CHAMADAS, AO LADO OU ABAIXO DA BOLA DA VEZ (28/11/2026)
 *
 * Cliente, depois de ver o arranjo em órbita: *"essas bolas nao precisa ficar
 * orbitando, faca assim no desktop abaixo e menores e no mobile ao lado e
 * menores"*.
 *
 * Então a órbita (arco com ângulos medidos da TV) saiu e virou uma FILA simples:
 *
 *   celular  → a fileira fica AO LADO da bola (coluna de três, à direita)
 *   desktop  → a fileira fica ABAIXO da bola (linha de três, centralizada)
 *
 * e todas MENORES: 38% do diâmetro da bola da vez (eram 56% / 46% / 41%).
 *
 * ## Como
 *
 * `.lb-palco` já é uma coluna flex com o trilho da bola; a fileira vem depois
 * dele no DOM. Virar LINHA no celular (`flex-direction: row`) coloca a fileira à
 * direita da bola, e manter coluna no desktop deixa a fileira embaixo — nas duas
 * o sentido da fileira é invertido (`column` no celular, `row` no desktop).
 *
 * Nada de `position: absolute` nem `margin` negativa: o arranjo é FLUXO. A bola
 * volta a ficar centrada no trilho, e o trilho vira uma JANELA mais estreita
 * (`2,2 ×` o diâmetro) porque não precisa mais abrigar o grupo inteiro.
 *
 * ⚠️ O trilho continua com o mesmo `overflow: hidden` e a mesma altura: é ele que
 * apara a bola que sai (efeito de empurrão) e que dá folga para a bola CAIR de
 * cima (item 5).
 * ========================================================================== */

/* A bola, centrada no trilho outra vez (a órbita exigia o grupo deslocado). */
body.lb-tv-tema .lb-palco__bola {
    margin-left: calc(var(--lb-bola) / -2);
}

/* A janela do empurrão: 2,2 diâmetros — largura suficiente para o efeito ler
   como "a nova entra e a velha sai", e estreita o bastante para a fileira caber
   ao lado no celular. */
body.lb-tv-tema .lb-palco__trilho {
    width: calc(var(--lb-bola) * 2.2);
    max-width: 100%;
}

/* Sem a órbita, o palco não precisa de folga embaixo: a fileira entra no fluxo. */
body.lb-tv-tema .lb-palco {
    padding-bottom: 0;
    gap: 0.35rem;
}

/* A fileira: só um flex simples. */
body.lb-tv-tema .lb-orbitais {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: auto;
    height: auto;
    margin: 0;
}

/*
 * Cada bolinha, 55% do diâmetro da bola da vez.
 *
 * Era 38% e o cliente respondeu *"ficaram muito pequenas"*. 55% deixa o número
 * legível no celular (38px numa bola de 70) sem competir com a bola da vez.
 * São QUATRO: no celular a fileira tem 4 × 38 + vãos ≈ 165px e o painel tem 348,
 * então cabe ao lado da bola.
 */
body.lb-tv-tema .lb-orbital {
    --orb: calc(var(--lb-bola) * 0.55);
    position: static;
    box-sizing: border-box;
    width: var(--orb);
    height: var(--orb);
    border: calc(var(--orb) * 0.10) solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-image:
        radial-gradient(circle at 40% 32%, #ffffff 0%, #f3efe7 62%, #cdc6b8 100%),
        radial-gradient(circle at 36% 28%, var(--cor-claro) 0%, var(--cor-medio) 55%, var(--cor-escuro) 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    color: #262626;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-size: calc(var(--orb) * 0.5);
    line-height: 1;
    text-align: center;
    /* O aro claro da `.bola-menor` da TV: separa a bolinha do fundo. */
    box-shadow:
        0 0 0 calc(var(--orb) * 0.06) rgba(255, 255, 255, 0.75),
        0 0.35vmin 1vmin rgba(0, 0, 0, 0.3);
    /* Cor PADRÃO (laranja da TV) — o último dígito sobrescreve (item 10). */
    --cor-claro: #ffb63f;
    --cor-medio: #f0701c;
    --cor-escuro: #b83b06;
}

/* A que acabou de chegar à fileira: a mesma entrada curta de antes. */
body.lb-tv-tema .lb-orbital--entrando {
    -webkit-animation: lb-recente-entra 0.5s cubic-bezier(0.18, 1.4, 0.4, 1);
    animation: lb-recente-entra 0.5s cubic-bezier(0.18, 1.4, 0.4, 1);
}

@media (prefers-reduced-motion: reduce) {
    body.lb-tv-tema .lb-orbital--entrando {
        -webkit-animation: none;
        animation: none;
    }
}

/* ---- CELULAR: a fileira AO LADO da bola, e EM LINHA (cliente, 28/11/2026:
   *"nao em coluna e sim em linha no mobile tambem"*) ---- */
@media (max-width: 767px) {
    body.lb-tv-tema .lb-live .lb-palco {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.45rem;
    }

    body.lb-tv-tema .lb-orbitais {
        flex-direction: row;
        gap: 0.28rem;
    }
}

/* ---- DESKTOP: a fileira ABAIXO da bola (linha de três, centralizada) ---- */
@media (min-width: 768px) {
    body.lb-tv-tema .lb-palco {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    body.lb-tv-tema .lb-orbitais {
        flex-direction: row;
        gap: 0.45rem;
    }

    /*
     * Teto de 60px no desktop: a bola da vez tem 168px e o painel do último
     * número, ~268px úteis. QUATRO satélites de 55% (92px) dariam 389px — não
     * cabem. Com 60px a fileira fica em 4 × 60 + 3 × 5,6 ≈ 257px e cabe.
     *
     * No desktop a bola é grande e vista de longe; 60px continua sendo uma
     * bolinha legível, e é o que o cliente pediu ("abaixo e menores").
     */
    body.lb-tv-tema .lb-orbital {
        --orb: min(calc(var(--lb-bola) * 0.55), 60px);
    }
}

/* ============================================================================
 * 10. A COR DA BOLA É A DA SINUCA, PELO ÚLTIMO DÍGITO (28/11/2026)
 *
 * Cliente: *"faca as cores das bolas ficarem na mesma logica das bolas de sinuca
 * em relacao a cor? tipo a terminando em 8 preta, etc"* e, logo depois, *"os tons
 * das bolas devem ser mais claros ok?"*.
 *
 * A regra é a da sinuca: a cor depende do NÚMERO, não da posição. Como as dezenas
 * vão até 90, o que manda é o ÚLTIMO DÍGITO — 8, 18, 28 … 88 são a bola PRETA (o
 * exemplo que o cliente deu), 13 e 3 são vermelhas, e assim por diante.
 *
 * | termina em | cor | por quê |
 * |---|---|---|
 * | 1 e 9 | amarela | a 1 é amarela; a 9 é a amarela listrada |
 * | 2 e 0 | azul | a 2 é azul; a 10 é a azul listrada |
 * | 3 | vermelha | |
 * | 4 | roxa | |
 * | 5 | laranja | |
 * | 6 | verde | |
 * | 7 | vinho | |
 * | 8 | preta | é a bola 8 da sinuca |
 *
 * ## Tons CLAROS (o pedido do cliente)
 *
 * A primeira versão usava os tons de mesa de bar (#d21f1f, #6b2fa0, #14161c…), e
 * o cliente respondeu *"os tons das bolas devem ser mais claros ok?"*. Os três
 * tons de cada cor (claro → médio → escuro) subiram juntos: o anel continua com
 * volume, mas para de parecer tinta.
 *
 * A PRETA é a exceção e continua preta de propósito — é o que o cliente pediu
 * ("a terminando em 8 preta"). O que ela ganha é um aro de luz, para não sumir no
 * painel azul-marinho.
 *
 * ## Onde a regra vale
 *
 *   - a BOLA DA VEZ e as TRÊS EM ÓRBITA: muda o anel; o miolo continua creme com
 *     o número escuro (é ele que dá contraste para ler a dezena);
 *   - as DEZENAS SORTEADAS da grade de 90: muda a bola inteira, e o número passa
 *     a ser escuro para não perder leitura sobre os tons claros (branco sobre
 *     amarelo dá 1,7:1).
 *
 * ## Como o CSS sabe o número
 *
 * Pelo atributo `data-numero` (bola e satélites) e `data-bola` (grade), que já
 * existiam: `[data-numero$="8"]` é "termina em 8". Nenhum JS novo para isso, e o
 * caminho do WebSocket também pinta certo, porque `atualizarOrbitais()` reescreve
 * o `data-numero` junto com o texto.
 *
 * Para desfazer só a parte da grade: apagar o item 11.
 * ========================================================================== */

/* 1 e 9 — amarela */
body.lb-tv-tema .lb-palco__bola[data-numero$="1"],
body.lb-tv-tema .lb-palco__bola[data-numero$="9"],
body.lb-tv-tema .lb-orbital[data-numero$="1"],
body.lb-tv-tema .lb-orbital[data-numero$="9"] {
    --cor-claro: #ffefa8;
    --cor-medio: #ffd84d;
    --cor-escuro: #e0ac00;
    --cor-brilho: rgba(255, 216, 77, 0.5);
}

/* 2 e 0 (a 10 é a azul listrada) — azul */
body.lb-tv-tema .lb-palco__bola[data-numero$="2"],
body.lb-tv-tema .lb-palco__bola[data-numero$="0"],
body.lb-tv-tema .lb-orbital[data-numero$="2"],
body.lb-tv-tema .lb-orbital[data-numero$="0"] {
    --cor-claro: #c2e2ff;
    --cor-medio: #6fb6f5;
    --cor-escuro: #2f7fc4;
    --cor-brilho: rgba(111, 182, 245, 0.5);
}

/* 3 — vermelha */
body.lb-tv-tema .lb-palco__bola[data-numero$="3"],
body.lb-tv-tema .lb-orbital[data-numero$="3"] {
    --cor-claro: #ffc4c4;
    --cor-medio: #f4726c;
    --cor-escuro: #c73a34;
    --cor-brilho: rgba(244, 114, 108, 0.5);
}

/* 4 — roxa */
body.lb-tv-tema .lb-palco__bola[data-numero$="4"],
body.lb-tv-tema .lb-orbital[data-numero$="4"] {
    --cor-claro: #e2c6ff;
    --cor-medio: #b98ce8;
    --cor-escuro: #8555b8;
    --cor-brilho: rgba(185, 140, 232, 0.5);
}

/* 5 — laranja */
body.lb-tv-tema .lb-palco__bola[data-numero$="5"],
body.lb-tv-tema .lb-orbital[data-numero$="5"] {
    --cor-claro: #ffd9b0;
    --cor-medio: #ffab5e;
    --cor-escuro: #d97a1c;
    --cor-brilho: rgba(255, 171, 94, 0.5);
}

/* 6 — verde */
body.lb-tv-tema .lb-palco__bola[data-numero$="6"],
body.lb-tv-tema .lb-orbital[data-numero$="6"] {
    --cor-claro: #c8f2d2;
    --cor-medio: #7fd394;
    --cor-escuro: #3d9a58;
    --cor-brilho: rgba(127, 211, 148, 0.5);
}

/* 7 — vinho */
body.lb-tv-tema .lb-palco__bola[data-numero$="7"],
body.lb-tv-tema .lb-orbital[data-numero$="7"] {
    --cor-claro: #e8bcc2;
    --cor-medio: #bd7a85;
    --cor-escuro: #8c4753;
    --cor-brilho: rgba(189, 122, 133, 0.5);
}

/* 8 — PRETA (a bola 8 da sinuca): a única que NÃO clareia */
body.lb-tv-tema .lb-palco__bola[data-numero$="8"],
body.lb-tv-tema .lb-orbital[data-numero$="8"] {
    --cor-claro: #5f6773;
    --cor-medio: #262a32;
    --cor-escuro: #000000;
    --cor-brilho: rgba(255, 255, 255, 0.3);
}

/*
 * O halo da bola grande acompanha a cor: era laranja fixo e, numa bola preta ou
 * azul, ficava uma auréola de outra família em volta.
 */
body.lb-tv-tema .lb-palco__bola::after {
    background: radial-gradient(circle, var(--cor-brilho, rgba(240, 112, 28, 0.5)) 0%, rgba(0, 0, 0, 0) 68%);
}

/* Bola escura precisa de aro claro — o mesmo recurso da `posicao2` da TV. */
body.lb-tv-tema .lb-palco__bola[data-numero$="8"] {
    box-shadow:
        0 0 0 calc(var(--lb-bola) * 0.014) rgba(255, 255, 255, 0.45),
        0 0.5vmin 1.6vmin rgba(0, 0, 0, 0.45);
}

/* ============================================================================
 * AS DEZENAS DA GRADE **NÃO** SEGUEM A COR DA SINUCA (28/11/2026)
 *
 * ⚠️ NÃO REPETIR: a regra de cor por último dígito chegou a ser aplicada também
 * às dezenas já sorteadas da grade ("Bolas de Bingo"), por analogia com a bola da
 * vez. O cliente vetou na hora:
 *
 *     *"nos numeros marcados nao precisa ser colorido nao, tire isso"*
 *
 * A grade é ferramenta de CONFERÊNCIA: o olho procura "saiu / não saiu" e uma
 * grade arco-íris obriga a decodificar cor por cor. A cor da sinuca fica onde ela
 * é o assunto — a bola da vez e as três em órbita (item 10).
 *
 * O que a grade mantém é o desenho da TV (item 7): dezena não sorteada é número
 * verde solto, sorteada é círculo AZUL e a última é VERMELHA. Se um dia alguém
 * quiser a grade colorida, o bloco está no histórico do git em `dev` — mas a
 * decisão do cliente é esta.
 * ========================================================================== */

/* ============================================================================
 * 12. MOBILE: O TOPO E OS NÚMEROS CHAMADOS CABEM SEM ROLAR (28/11/2026)
 *
 * Cliente: *"preciso que essa tela no mobile seja de um jeito que sem rolar já
 * apareça esse topo e a parte de todos os numeros chamados"*.
 *
 * ## O problema medido (390×844, viewport útil de ~700px)
 *
 * A grade de 75 dezenas começava em **906px** e terminava em **1162px**: para ver
 * o jogo inteiro o jogador rolava quase duas telas. No caminho havia, nesta
 * ordem, o preço, o painel do último número, "a uma bola", os prêmios, os
 * contadores, o bloco de "próximo sorteio", a faixa de botões e o recado de
 * visitante — nenhum deles é o placar.
 *
 * ## A solução: reordenar sem tocar no DOM
 *
 * `display: contents` nas EMBALAGENS (o cartão principal, a área do topo, a
 * coluna lateral e o cartão da grade) faz os filhos delas virarem itens da
 * coluna `.lb-live`. Com isso a ordem da TELA pode ser diferente da ordem do
 * HTML — e o DOM continua sendo o mesmo: o `wire:snapshot`, o morph do Livewire,
 * o `#lb-fx`, a narração e o WebSocket não perdem nenhuma referência (§3.13).
 *
 * Ordem no celular:
 *   1. cabeçalho (sorteio, preço, selo)
 *   2. bola da vez + as três em órbita
 *   3. título "Bolas de Bingo" + a GRADE DE 90/75
 *   4. a uma bola · prêmios · contadores · próximo sorteio
 *   5. botões · cartelas do jogador · ganhadores
 *
 * Só o celular: a partir de 768px a tela continua exatamente como era (o cartão
 * com o topo à esquerda e os prêmios à direita).
 *
 * ⚠️ `display: contents` APAGA a caixa do elemento — fundo, padding e borda
 * saem junto. Por isso o cabeçalho, que morava dentro do cartão, ganha painel
 * próprio aqui (`.lb-top`), e os espaços passam a vir do `gap` da coluna.
 * ========================================================================== */

@media (max-width: 767px) {

    /* A coluna que ordena tudo. */
    body.lb-tv-tema .lb-live {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

    /*
     * PADRÃO: o que não foi listado abaixo vai para o FIM (order 20).
     *
     * Sem isto, qualquer bloco que não tivesse `order` (o cartão dos ganhadores,
     * por exemplo) ficava com `order: 0` e subia para o TOPO da coluna — foi o
     * que aconteceu na primeira versão: os ganhadores do último sorteio abriam a
     * tela do jogador.
     */
    body.lb-tv-tema .lb-live > * {
        order: 20;
    }

    /*
     * As EMBALAGENS viram "invisíveis": os filhos delas passam a ser itens desta
     * coluna. Cada uma tem classe própria (`.lb-principal`, `.lb-grade`) — NÃO use
     * `:not()`/`:first-child` aqui: o cartão dos ganhadores também é um `.lb-card`
     * e já foi aberto por engano.
     */
    body.lb-tv-tema .lb-live > .lb-principal,
    body.lb-tv-tema .lb-hero-area,
    body.lb-tv-tema .lb-side,
    body.lb-tv-tema .lb-grade {
        display: contents;
    }

    /* ---- 1. cabeçalho ---- */
    body.lb-tv-tema .lb-live > .lb-principal > .lb-top {
        order: 1;
        margin: 0;
        padding: 0.4rem 0.55rem;
        border-radius: 0.8rem;
        background: rgba(4, 26, 66, 0.55);
        box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.3);
        gap: 0.3rem;
    }

    body.lb-tv-tema .lb-live > .lb-principal > .lb-top .lb-desc {
        padding: 0.28rem 0.55rem;
        font-size: 0.88rem;
    }

    body.lb-tv-tema .lb-live > .lb-principal > .lb-top .lb-price {
        padding: 0.28rem 0.5rem;
        font-size: 0.62rem;
    }

    body.lb-tv-tema .lb-live > .lb-principal > .lb-top .lb-pill {
        padding: 0.22rem 0.5rem;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    /* ---- 2. bola da vez ---- */
    body.lb-tv-tema .lb-live > .lb-principal > .lb-hero-area > .lb-hero {
        order: 2;
        margin: 0;
        padding: 0.3rem 0.3rem 0.25rem;
        gap: 0.15rem;
    }

    /*
     * ⚠️ O TAMANHO DA BOLA VAI NO `.lb-palco`, não no `.lb-hero`.
     *
     * `--lb-bola` é declarado no próprio `.lb-palco` (base e o `@media` de
     * celular). Deixar o token no avô não adianta: a declaração do filho vence a
     * herança, e a bola continuava em 90px.
     *
     * Em 18vw a bola fica em ~70px num 390px — o trilho (1,45×), a folga da queda,
     * a órbita e o dígito acompanham, porque são todos proporcionais a ele.
     */
    body.lb-tv-tema .lb-live .lb-palco {
        --lb-bola: clamp(3.1rem, 18vw, 4.4rem);
    }

    body.lb-tv-tema .lb-live .lb-label { font-size: 0.58rem; letter-spacing: 0.14em; }

    /* ---- 3. a grade, logo abaixo da bola ---- */
    /* O título encosta no painel da grade: viram UM bloco só (o vão de 2px é a
       borda arredondada do painel, não um espaço). */
    body.lb-tv-tema .lb-grade > .lb-top {
        order: 3;
        margin: 0.15rem 0 0;
        padding: 0.3rem 0.55rem;
        border-radius: 0.8rem 0.8rem 0 0;
        background: rgba(4, 26, 66, 0.55);
    }

    body.lb-tv-tema .lb-grade > .lb-top .lb-desc {
        padding: 0;
        background: transparent;
        box-shadow: none;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    body.lb-tv-tema .lb-grade > .lb-board {
        order: 4;
        margin: 0;
        padding: 0.35rem 0.3rem;
        border-radius: 0 0 0.8rem 0.8rem;
    }

    /* A grade é apertada de propósito: são 8 ou 9 fileiras que precisam caber na
       primeira tela junto com o topo. */
    body.lb-tv-tema .lb-grade .lb-board { gap: 0.14rem; }
    body.lb-tv-tema .lb-grade .lb-board__row { gap: 0.18rem; }
    body.lb-tv-tema .lb-grade .lb-board__balls { gap: 0.14rem; }

    body.lb-tv-tema .lb-grade .lb-bola {
        font-size: clamp(0.58rem, 2.6vw, 0.72rem);
        box-shadow: none;
    }

    body.lb-tv-tema .lb-grade .lb-board__range { font-size: 0.52rem; }

    /* ---- 4. o resto (a uma bola, prêmios, contadores, próximo) ---- */
    body.lb-tv-tema .lb-uma-bola {
        order: 5;
        margin: 0;
        padding: 0.4rem 0.55rem;
    }

    body.lb-tv-tema .lb-prizes {
        order: 6;
        margin: 0;
        gap: 0.3rem;
    }

    body.lb-tv-tema .lb-prize {
        padding: 0.3rem 0.25rem;
        border-radius: 0.6rem;
    }

    body.lb-tv-tema .lb-prize__label { font-size: 0.54rem; }
    body.lb-tv-tema .lb-prize__value { font-size: 0.82rem; }
    body.lb-tv-tema .lb-prize:first-child .lb-prize__value { font-size: 0.95rem; }

    body.lb-tv-tema .lb-counters {
        order: 7;
        margin: 0;
        font-size: 0.66rem;
        gap: 0.2rem 0.7rem;
    }

    body.lb-tv-tema .lb-counters b { font-size: 0.85rem; }

    body.lb-tv-tema .lb-proximo {
        order: 8;
        margin: 0;
        font-size: 0.7rem;
    }

    /* ---- 5. ações e o resto ---- */
    body.lb-tv-tema .lb-cta {
        order: 9;
        margin: 0.2rem 0 0;
        gap: 0.4rem;
    }

    /* Os dois botões numa LINHA (eram duas): 96px de faixa viravam 44px. */
    body.lb-tv-tema .lb-cta__btn {
        flex: 1 1 8rem;
        min-height: 40px;
        padding: 0.4rem 0.6rem;
        font-size: 0.82rem;
    }

    body.lb-tv-tema #minhas-cartelas { order: 10; }

    /*
     * MINHAS CARTELAS — DUAS POR LINHA NO CELULAR (cliente, 28/11/2026:
     * *"minhas carteas no mobile duas por linha no sesktop 4"*).
     *
     * A regra base é 1 por linha no celular, com o argumento de que duas deixam
     * cada casa com ~25px. O cliente pediu duas mesmo assim, então o aperto vem
     * junto: padding do cartão e vão da grade menores para a casa ficar em ~29px
     * (medido em 390px) — o número continua legível.
     *
     * No desktop nada muda: 4 por linha a partir de 900px (regra base).
     */
    body.lb-tv-tema .lb-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    body.lb-tv-tema .lb-cards .lb-card-item {
        padding: 0.5rem;
        border-radius: 0.7rem;
    }

    body.lb-tv-tema .lb-cards .lb-grid5 {
        gap: 0.2rem;
        margin-bottom: 0.3rem;
    }

    body.lb-tv-tema .lb-cards .lb-cell {
        font-size: clamp(0.62rem, 3vw, 0.8rem);
    }

    body.lb-tv-tema .lb-cards .lb-card-item__code {
        font-size: 0.68rem;
        padding: 0.1rem 0.25rem;
        letter-spacing: 0;
    }

    body.lb-tv-tema .lb-cards .lb-card-item__lines { gap: 0.2rem; }
    body.lb-tv-tema .lb-cards .lb-line { font-size: 0.58rem; padding: 0.18rem 0.1rem; }

    body.lb-tv-tema .lb-guest-note {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.35;
    }

    /* Os cartões e seções que já existiam vêm depois de tudo. */
    body.lb-tv-tema .lb-live > .lb-card.lb-distante,
    body.lb-tv-tema .lb-live > .lb-ganhadores { order: 11; }

    body.lb-tv-tema .lb-live > .lb-premiadas,
    body.lb-tv-tema .lb-live > .lb-frente,
    body.lb-tv-tema .lb-live > .lb-section-title { order: 12; }
}