@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
}
/* Style for the generated lottery balls */
.lotto-ball {
    width: 45px; /* Slightly smaller for better fit */
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: transform 0.2s ease-in-out;
}
.lotto-ball:hover {
    transform: scale(1.1);
}
/* Color gradients for different number ranges */
.ball-color-1 { background: linear-gradient(135deg, #fde047, #facc15); } /* 1-10 Yellow */
.ball-color-2 { background: linear-gradient(135deg, #60a5fa, #3b82f6); } /* 11-20 Blue */
.ball-color-3 { background: linear-gradient(135deg, #f87171, #ef4444); } /* 21-30 Red */
.ball-color-4 { background: linear-gradient(135deg, #a3a3a3, #737373); } /* 31-40 Gray */
.ball-color-5 { background: linear-gradient(135deg, #4ade80, #22c55e); } /* 41-45 Green */

/* Loading spinner animation */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s ease infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Style for the share button */
#share-button {
    /* Custom styles can go here if needed */
    transition: background-color 0.3s, transform 0.2s;
}

#share-button:hover {
    transform: translateY(-2px);
}