/* CSS untuk tampilan bola nomor seperti inatips.com */
.ball-container {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

.ball-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    position: relative;
}

/* Warna bola berdasarkan nomor */
.ball-0 { background: linear-gradient(135deg, #e53e3e, #c53030); }
.ball-1 { background: linear-gradient(135deg, #3182ce, #2c5aa0); }
.ball-2 { background: linear-gradient(135deg, #38a169, #2f855a); }
.ball-3 { background: linear-gradient(135deg, #d69e2e, #b7791f); }
.ball-4 { background: linear-gradient(135deg, #805ad5, #6b46c1); }
.ball-5 { background: linear-gradient(135deg, #dd6b20, #c05621); }
.ball-6 { background: linear-gradient(135deg, #e53e3e, #c53030); }
.ball-7 { background: linear-gradient(135deg, #3182ce, #2c5aa0); }
.ball-8 { background: linear-gradient(135deg, #38a169, #2f855a); }
.ball-9 { background: linear-gradient(135deg, #d69e2e, #b7791f); }

/* Efek glossy */
.ball-number::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    filter: blur(8px);
}

/* Responsive */
@media (max-width: 768px) {
    .ball-number {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .ball-container {
        gap: 6px;
    }
}

/* Animasi untuk bola */
.ball-number {
    transition: transform 0.2s ease;
}

.ball-number:hover {
    transform: scale(1.1);
}

/* Styling untuk hasil history dengan layout vertikal */
.history-result-row {
    background: linear-gradient(135deg, #1a2332 0%, #2d3748 100%);
    border: 1px solid #d4af37;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.result-date {
    color: #d4af37;
    font-weight: bold;
    font-size: 1.1rem;
    min-width: 200px;
}

.result-balls {
    flex: 1;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .history-result-row {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .result-date {
        min-width: auto;
    }
}