body{
        font-family:'Poppins',sans-serif;
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
        margin:0;
        background: radial-gradient(circle at top,#1a1a1a,#000);
        color:white;
    }
    
    .container{
        background:rgba(20,20,20,0.85);
        padding:40px;
        border-radius:18px;
        box-shadow:0 20px 60px rgba(0,0,0,0.6);
        text-align:center;
        width:90%;
        max-width:650px;
        border:1px solid rgba(255,255,255,0.05);
        backdrop-filter:blur(12px);
    }
    
    h1 {
        color: #fff;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    h1 i {
        margin-right: 10px;
        color: #fff;
    }
    
    .balls-container {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 30px;
        flex-wrap: wrap; /* Allow balls to wrap on smaller screens */
    }
    
    .ball{
        width:65px;
        height:65px;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:26px;
        font-weight:700;
        color:white;
        background:linear-gradient(145deg,#2a2a2a,#000);
        border:1px solid rgba(255,255,255,0.1);
        box-shadow:
        inset 0 3px 6px rgba(255,255,255,0.15),
        0 6px 12px rgba(0,0,0,0.6);
    }
    
    /* Ball colors */
    .ball.red { background: linear-gradient(to bottom right, #ff4136, #cc2d21); }
    .ball.blue { background: linear-gradient(to bottom right, #007bff, #0056b3); }
    .ball.purple { background: linear-gradient(to bottom right, #8a2be2, #6a1aab); }
    .ball.black { background: linear-gradient(to bottom right, #00ff22, #08a700); }
    .ball.orange { background: linear-gradient(to bottom right, #ff8c00, #cc7000); }
    .ball.brown { background: linear-gradient(to bottom right, #7c4400, #432500); }
    
    
    button{
        background:linear-gradient(135deg,#ffcc00,#ff8800);
        color:#000;
        border:none;
        padding:14px 30px;
        font-size:16px;
        font-weight:600;
        border-radius:10px;
        cursor:pointer;
        transition:all .25s ease;
    }

    button:hover{
        transform:translateY(-2px);
        box-shadow:0 10px 25px rgba(255,180,0,0.4);
    }
    
    .result-text {
        margin-top: 30px;
        color: #fff;
    }
    
    .result-text h2 {
        margin-bottom: 5px;
    }
    
    .result-text p {
        font-size: 0.9em;
        color: #fff;
        font-style: italic;
    }
    
    .copy-result{
        margin-top:20px;
        background:#111;
        border:1px solid rgba(255,255,255,0.08);
        padding:14px;
        border-radius:10px;
        font-size:22px;
        letter-spacing:3px;
        color:#ffcc00;
        cursor:pointer;
    }

/* Keyframes for a more dynamic shuffling/picking animation */
@keyframes shuffle {
    0% { transform: translateY(0) rotateX(0deg); opacity: 1; }
    25% { transform: translateY(-5px) rotateX(45deg); opacity: 0.8; }
    50% { transform: translateY(0) rotateX(90deg); opacity: 1; }
    75% { transform: translateY(-2px) rotateX(135deg); opacity: 0.9; }
    100% { transform: translateY(0) rotateX(180deg); opacity: 1; } /* Rotate X for a flip effect */
}

.ball.shuffling {
    animation: shuffle 0.2s ease-in-out infinite; /* Fast, continuous shuffle */
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy effect */
}