/* =========================================
   11CLUB PREMIUM UI (KEEPING GAME COLORS + ANIMATIONS)
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 1. Global Dark Background */
body, .appCapsule, #appCapsule {
    background-color: #0b0e11 !important;
    color: #eaecef !important;
    font-family: 'Inter', sans-serif !important;
}

/* 2. Header */
.appHeader, .appHeader1 {
    background-color: #181a20 !important;
    border-bottom: 1px solid #2b3139 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Cards & Containers */
.card, .appContent1, .section {
    background-color: #1e2329 !important;
    border-radius: 16px !important;
    border: 1px solid #2b3139 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* =========================================
   GAME BUTTONS (ORIGINAL COLORS + ANIMATIONS)
========================================= */

/* Common Button Animation Style */
.join-green, .join-red, .join-violet, .btn-success, .btn-danger {
    border-radius: 25px !important; /* Rounded Pill shape */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    transition: all 0.2s ease-in-out !important;
    position: relative;
    overflow: hidden;
}

/* Press Effect (Click Animation) */
.join-green:active, .join-red:active, .join-violet:active, 
.btn-success:active, .btn-danger:active {
    transform: scale(0.92) !important; /* Button dabane par chota hoga */
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* 1. JOIN GREEN (Original Color + Glow) */
.join-green, .btn-success, [style*="background-color: #4CAF50"], [style*="background: green"] {
    background: #0ecb81 !important; /* 91 Club Premium Green */
    color: white !important;
    box-shadow: 0 6px 15px rgba(14, 203, 129, 0.4) !important; /* Neon Glow */
}
.join-green:hover {
    box-shadow: 0 8px 25px rgba(14, 203, 129, 0.6) !important;
}

/* 2. JOIN RED (Original Color + Glow) */
.join-red, .btn-danger, [style*="background-color: #f44336"], [style*="background: red"] {
    background: #f6465d !important; /* 91 Club Premium Red */
    color: white !important;
    box-shadow: 0 6px 15px rgba(246, 70, 93, 0.4) !important; /* Neon Glow */
}
.join-red:hover {
    box-shadow: 0 8px 25px rgba(246, 70, 93, 0.6) !important;
}

/* 3. JOIN VIOLET (Original Color + Glow) */
.join-violet, [style*="background-color: #9c27b0"], [style*="background: violet"], [style*="background: purple"] {
    background: #8a2be2 !important; /* Premium Violet */
    color: white !important;
    box-shadow: 0 6px 15px rgba(138, 43, 226, 0.4) !important; /* Neon Glow */
}
.join-violet:hover {
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6) !important;
}

/* 4. Number Grid (0-9) Buttons - 3D Animation */
.number-btn, .btn-number, .num-btn {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    box-shadow: 0 5px 0 rgba(0,0,0,0.3) !important; /* 3D Shadow */
    border: none !important;
    transition: all 0.1s ease !important;
}
.number-btn:active, .btn-number:active, .num-btn:active {
    transform: translateY(5px) !important; /* 3D Click Effect */
    box-shadow: 0 0px 0 rgba(0,0,0,0.3) !important;
}

/* =========================================
   ANIMATIONS & PREMIUM EFFECTS
========================================= */

/* Countdown Timer Pulse Animation */
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(252, 213, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(252, 213, 53, 0); }
}

.count-down, .timer {
    color: #fcd535 !important;
    font-weight: 800 !important;
    background: #1e2329 !important;
    padding: 5px 15px;
    border-radius: 8px;
    display: inline-block;
    animation: pulse-gold 2s infinite; /* Timer chamkega */
}

/* Balance Text Glow */
.available-balance, .wallet-balance {
    color: #fcd535 !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    text-shadow: 0 0 10px rgba(252, 213, 53, 0.5) !important; /* Gold Glow */
}

/* Tabs Styling */
.nav-tabs { border-bottom: 1px solid #2b3139 !important; }
.nav-link { color: #848e9c !important; transition: 0.3s; }
.nav-link.active {
    background: transparent !important;
    color: #fcd535 !important;
    border-bottom: 3px solid #fcd535 !important;
    font-weight: 700 !important;
}