/* ============================================================
   ANIMAÇÕES E EFEITOS PREMIUM — Central FlavioUp
   Paleta: Preto/Cinza + Amarelo #FFC300
   ============================================================ */

/* Animação de entrada do header */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.header {
    animation: slideDown 0.4s ease;
}

/* Animação de entrada do banner FlavioUp */
.flavioup-banner {
    animation: slideDown 0.5s ease;
}

/* ── ANIMAÇÕES NUMÉRICAS (stat cards) ────────────────────── */
@keyframes pulseGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(34,197,94,.4); }
    50%       { text-shadow: 0 0 22px rgba(34,197,94,.8), 0 0 8px rgba(34,197,94,.5); }
}
@keyframes pulseGlowRed {
    0%, 100% { text-shadow: 0 0 10px rgba(239,68,68,.4); }
    50%       { text-shadow: 0 0 22px rgba(239,68,68,.8), 0 0 8px rgba(239,68,68,.5); }
}
@keyframes pulseGlowGold {
    0%, 100% { text-shadow: 0 0 8px rgba(255,195,0,.3); }
    50%       { text-shadow: 0 0 18px rgba(255,195,0,.7), 0 0 6px rgba(255,195,0,.4); }
}

/* stat-value ganha brilho ao aparecer */
.stat-value {
    animation: fadeIn .4s ease;
}

/* Brilho no valor verde de histórico */
#taxaAcerto,
#greenOntem { animation: pulseGlow 3s ease-in-out infinite; }

/* Brilho no valor vermelho */
#redOntem,
#bilhetesPerdidos { animation: pulseGlowRed 3s ease-in-out infinite; }

/* Brilho dourado no lucro */
#lucroTotal { animation: pulseGlowGold 3s ease-in-out infinite; }

/* ── HOVER SUAVE NOS CARDS ───────────────────────────────── */
.stat-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255,195,0,.12);
}

/* ── BADGE DE RESULTADO ANIMADO ──────────────────────────── */
.resultado-badge {
    animation: bounceIn .4s ease;
}

/* ── CARD DE JOGO — entrada suave ────────────────────────── */
.jogo-card {
    animation: fadeIn .35s ease;
}
.bilhete-card {
    animation: fadeIn .35s ease;
}

/* ── BOTÃO FLUTUANTE — pulsação suave ────────────────────── */
@keyframes floatPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255,195,0,.35); }
    50%       { box-shadow: 0 6px 28px rgba(255,195,0,.6); }
}
.btn-verificar-manual {
    animation: floatPulse 3s ease-in-out infinite;
}
.btn-verificar-manual:hover,
.btn-verificar-manual.verificando {
    animation: none;
}

/* ── SCROLL SUAVE ────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── SELEÇÃO DE TEXTO ────────────────────────────────────── */
::selection {
    background: rgba(255,195,0,.25);
    color: #F0F0F0;
}

/* ── BOTÃO FAZER BILHETE ─────────────────────────────────── */
.btn-fazer-bilhete {
    padding: 6px 12px;
    border-radius: 8px;

    background: #FFC300;
    color: #111;

    font-size: 0.75rem;
    font-weight: 700;

    text-decoration: none;
    border: none;

    transition: background .15s ease;
}

.btn-fazer-bilhete:hover {
    background: #ffcf33;
}

.btn-fazer-bilhete.disabled {
    background: #3a3a3a;
    color: #888;
    pointer-events: none;
    cursor: not-allowed;
}

.resultado-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
}

@media (max-width: 640px) {
    .resultado-wrapper {
        flex-direction: column;
        padding-right: 0;
        /*gap: 10px;*/
    }
}