* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1a472a 0%, #2d5a3d 50%, #1a472a 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* Efeito de estrelas de fundo */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 215, 0, 0.8);
    border-radius: 50%;
    box-shadow: 
        50px 50px rgba(255, 215, 0, 0.8),
        100px 100px rgba(255, 215, 0, 0.6),
        150px 30px rgba(255, 215, 0, 0.7),
        200px 150px rgba(255, 215, 0, 0.5),
        250px 80px rgba(255, 215, 0, 0.8),
        300px 200px rgba(255, 215, 0, 0.6),
        350px 120px rgba(255, 215, 0, 0.7),
        400px 250px rgba(255, 215, 0, 0.5),
        450px 90px rgba(255, 215, 0, 0.8),
        500px 180px rgba(255, 215, 0, 0.6);
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.container {
    width: 100%;
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.content {
    background: linear-gradient(135deg, #ffffff 0%, #f0f8f0 100%);
    border-radius: 25px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.3);
    padding: 40px 30px;
    text-align: center;
    animation: slideIn 0.6s ease-out;
    border: 3px solid #ffd700;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header {
    margin-bottom: 30px;
}

.logo-mega {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 3px;
}

.mega-text {
    color: #1a472a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.sena-text {
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: 2.2rem;
    color: #1a472a;
    margin-bottom: 10px;
    font-weight: 700;
}

/* Bolas de Loteria */
.lottery-balls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.ball {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a472a;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4), inset -2px -2px 5px rgba(0, 0, 0, 0.1);
    animation: bounce 2s infinite;
    border: 3px solid #ffb700;
}

.ball:nth-child(1) { animation-delay: 0s; }
.ball:nth-child(2) { animation-delay: 0.1s; }
.ball:nth-child(3) { animation-delay: 0.2s; }
.ball:nth-child(4) { animation-delay: 0.3s; }
.ball:nth-child(5) { animation-delay: 0.4s; }
.ball:nth-child(6) { animation-delay: 0.5s; }

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.message-box {
    background: linear-gradient(135deg, #1a472a 0%, #2d5a3d 100%);
    border-radius: 15px;
    padding: 40px 20px;
    margin-bottom: 30px;
    color: white;
    border: 2px solid #ffd700;
}

.main-message {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.countdown-text {
    font-size: 1rem;
    margin-top: 15px;
    opacity: 0.9;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 215, 0, 0.3);
    border-top: 4px solid #ffd700;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Seção de Informações */
.info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.info-card {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f6 100%);
    border-radius: 12px;
    padding: 20px;
    border-left: 5px solid #1a472a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
    font-size: 1rem;
    color: #1a472a;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-value {
    font-size: 1.3rem;
    color: #ffd700;
    font-weight: 700;
}

.support-section {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 2px solid #ffd700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

.support-section h2 {
    font-size: 1.4rem;
    color: #1a472a;
    margin-bottom: 15px;
    font-weight: 700;
}

.support-contact {
    margin-bottom: 10px;
}

.whatsapp-link {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #25d366 0%, #20ba58 100%);
    text-decoration: none;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

.support-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

.footer {
    color: #999;
    font-size: 0.85rem;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Responsivo para dispositivos móveis */
@media (max-width: 600px) {
    .content {
        padding: 25px 15px;
        border-width: 2px;
    }

    .logo-mega {
        font-size: 2rem;
    }

    .header h1 {
        font-size: 1.6rem;
    }

    .lottery-balls {
        gap: 8px;
    }

    .ball {
        width: 55px;
        height: 55px;
        font-size: 1.2rem;
    }

    .main-message {
        font-size: 1.5rem;
    }

    .message-box {
        padding: 25px 15px;
    }

    .info-section {
        grid-template-columns: 1fr;
    }

    .support-section {
        padding: 20px;
    }

    .whatsapp-link {
        font-size: 1rem;
        padding: 10px 20px;
    }
}

@media (max-width: 400px) {
    .header h1 {
        font-size: 1.4rem;
    }

    .ball {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }

    .main-message {
        font-size: 1.3rem;
    }
}