:root { --bg-color: #000212; --card-color: #0a0f29; --primary: #2563eb; --accent: #4facfe; }
body { background-color: var(--bg-color); color: white; font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* Efeitos Neon e Vidro */
.neon-border { box-shadow: 0 0 15px rgba(37, 99, 235, 0.15); border: 1px solid rgba(79, 172, 254, 0.2); }
.glass-panel { background: rgba(10, 15, 41, 0.95); backdrop-filter: blur(10px); }

/* Botões */
.btn-primary { background: linear-gradient(135deg, #2563eb, #4facfe); font-weight: 800; transition: 0.3s; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); }
.btn-primary:disabled { filter: grayscale(1); opacity: 0.5; cursor: not-allowed; }

/* Inputs */
.input-field { background: #050814; border: 1px solid #1e293b; color: white; }
.input-field:focus { border-color: var(--accent); outline: none; }

/* Roleta */
/* --- ROLETA PRO 3D METAL BLUE EDITION --- */

:root {
    /* Paleta de Azuis High-End e Metais */
    --w-blue-dark: #0d2875;   /* Azul profundo (sombra) */
    --w-blue-main: #1e40af;   /* Azul metálico base */
    --w-blue-light: #60a5fa;  /* Azul claro (luz) */
    --w-neon: #00ffff;        /* Ciano neon para brilho */
    --w-silver: #e2e8f0;      /* Prata para o ponteiro */
    --w-metal-shine: rgba(255, 255, 255, 0.3); /* Brilho metálico */
}

.wheel-container {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
    z-index: 1;

    /* MOLDURA 3D METÁLICA EXTERNA */
    border-radius: 50%;
    /* Borda grossa com gradiente metálico */
    border: 12px solid transparent;
    background-image: linear-gradient(var(--w-blue-dark), var(--w-blue-dark)), 
                      linear-gradient(135deg, var(--w-blue-main), var(--w-blue-light), var(--w-blue-main));
    background-origin: border-box;
    background-clip: content-box, border-box;
    
    /* Mágica do 3D e Iluminação Metálica via Sombras */
    box-shadow: 
        /* 1. Profundidade interna (cria o buraco onde a roda gira) */
        inset 0 0 20px rgba(0, 0, 0, 0.9),
        /* 2. Brilho superior na borda (reflexo de luz) */
        inset 0 2px 3px var(--w-metal-shine),
        /* 3. Sombra inferior na borda (volume) */
        inset 0 -4px 6px rgba(0, 0, 0, 0.6),
        /* 4. Anel externo decorativo (efeito Neon/Metal polido) */
        0 0 0 2px var(--w-blue-dark),
        0 0 0 5px var(--w-blue-light),
        0 0 35px var(--w-blue-main); /* Glow final */

    background-color: #0f172a; /* Fundo escuro para cobrir arestas */
}

/* A RODA QUE GIRA */
.wheel-rotate {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1); /* Giro suave estilo cassino */
    overflow: hidden;
    
    /* Realça as cores da imagem da roleta e adiciona contraste metálico */
    filter: brightness(1.1) contrast(1.3) saturate(1.1);
    
    /* Adiciona um brilho "glossy" e reflexo metálico fixo sobre a imagem */
    mask-image: radial-gradient(circle, white 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, white 60%, rgba(255,255,255,0.8) 100%);
    
    /* Efeito sutil de textura metálica sobre a imagem */
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 4px);
    background-size: 100% 100%;
    /* Assume que os números são parte da imagem e aplica um text-shadow para destacá-los e dar efeito de relevo metálico. Se forem texto HTML, aplique diretamente neles. */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 0 0 10px var(--w-blue-light);
}

/* INDICADOR / SETA (Estilo Metálico) */
.wheel-container::before {
    content: '';
    position: absolute;
    top: -22px; /* Sobe um pouco para fora da roda */
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    /* Formato de Seta Afiada */
    width: 44px;
    height: 58px;
    clip-path: polygon(50% 100%, 0% 25%, 15% 0%, 85% 0%, 100% 25%);
    
    /* Acabamento em Gradiente Prateado/Branco Metálico */
    background: linear-gradient(180deg, var(--w-silver) 0%, #94a3b8 40%, #ffffff 80%, var(--w-silver) 100%);
    
    /* Sombra projetada na roda (dá a sensação de altura e metal pesado) */
    filter: drop-shadow(0 8px 5px rgba(0,0,0,0.7));
}

/* PINO CENTRAL (Botão 3D Metálico Flutuante) */
.wheel-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    width: 55px;
    height: 55px;
    border-radius: 50%;

    /* Design do Botão: Esfera metálica azul brilhante com reflexo */
    background: radial-gradient(circle at 30% 30%, var(--w-neon), var(--w-blue-main), var(--w-blue-dark));
    
    /* Bordas e Sombras para parecer encaixado e metálico */
    border: 4px solid var(--w-blue-dark);
    box-shadow: 
        inset 0 2px 5px var(--w-metal-shine), /* Reflexo superior */
        0 6px 15px rgba(0,0,0,0.6), /* Sombra flutuante */
        inset 0 -2px 5px rgba(0,0,0,0.5); /* Profundidade inferior */
        
    pointer-events: none;
}

/* --- FIM DA ATUALIZAÇÃO DA ROLETA --- */
/* Rodapé e Branding */
.system-branding img { height: 24px; opacity: 0.8; }
.app-footer { text-align: center; font-size: 10px; color: #4b5563; padding: 20px; margin-top: auto; text-transform: uppercase; letter-spacing: 1px; }

/* Animações */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fade-in 0.3s ease-out; }