/* style.css - Main Stylesheet for the Application (CORRECTED) */

/* =================================================================
   == THEME COLOR VARIABLES - YAHAN SE AAP COLOR BADAL SAKTE HAIN ==
   ================================================================= */
:root {
    --dark-bg: #0d0d1a;
    --container-bg: #161625;
    --card-bg: #1f1f3a;
    --input-bg: #22223a;
    --primary-purple: #8A2BE2;
    --primary-cyan: #00f5ff;
    --text-light: #f0f0f5;
    --text-medium: #a0a0b5;
    --text-dark: #111;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
}

/* ==================
   == GLOBAL SETUP ==
   ================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-light);
    background-image: linear-gradient(rgba(13, 13, 26, 0.98), rgba(13, 13, 26, 0.98)), url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
}
.main-container {
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 80px;
}
.section {
    padding: 0 15px 15px 15px;
}
.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
.section-subtitle {
    font-size: 12px;
    color: var(--text-medium);
    margin-bottom: 15px;
}

/* ==================
   == TOP HEADER ==
   ================== */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--container-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.user-info { display: flex; align-items: center; }
.user-info .avatar { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--primary-cyan); margin-right: 10px; }
.user-info .details h4 { margin: 0; font-size: 16px; font-weight: 600; }
.user-info .details p { margin: 0; font-size: 12px; color: var(--text-medium); }
.wallet-info { display: flex; align-items: center; background-color: var(--danger-color); padding: 8px 12px; border-radius: 25px; color: #fff; font-weight: 600; }
.wallet-info .icon { margin-right: 8px; }
.wallet-info .add-money { margin-left: 10px; background-color: #fff; color: var(--danger-color); border-radius: 50%; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer; }

/* ==================
   == SLIDER ==
   ================== */
.slider-container { padding: 15px; }
.slider { position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 10px; }
.slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-dots { text-align: center; margin-top: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; background-color: var(--text-medium); border-radius: 50%; margin: 0 5px; cursor: pointer; }
.dot.active { background-color: var(--primary-cyan); }

/* ==========================================================
   == MY CONTESTS SECTION (IMPROVED AND FINAL STYLES) ==
   ========================================================== */
.contest-cards {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.contest-card {
    flex: 1;
    padding: 20px 10px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid #2a2a4a;
    background: linear-gradient(145deg, #1f1f3a, #2a2a4a);
    box-shadow: 5px 5px 10px #1a1a31, -5px -5px 10px #2e2e53;
}
.contest-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
}
.contest-card .icon {
    font-size: 28px;
    margin-bottom: 5px;
    color: var(--warning-color);
    text-shadow: 0 0 10px var(--warning-color);
}
.contest-card p {
    margin-top: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.contest-card:hover p {
    color: #fff;
    text-shadow: 0 0 5px var(--primary-cyan);
}

/* ===============================================================
   == EXCLUSIVE TOURNAMENTS SECTION (IMPROVED AND FINAL STYLES) ==
   =============================================================== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.game-card {
    position: relative; /* Text ko image ke upar laane ke liye */
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.game-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
    border-color: var(--primary-cyan);
}
.game-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.game-card:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 70%);
}
.game-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}
.game-card p {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 0 5px;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    transform: scale(0.95);
    transition: all 0.3s ease;
}
.game-card:hover p {
    color: var(--primary-cyan);
    transform: scale(1);
    text-shadow: 0 0 8px var(--primary-cyan);
}

/* =======================
   == BOTTOM NAVIGATION ==
   ======================= */
/* =======================
   == BOTTOM NAVIGATION (IMPROVED WITH FROSTED GLASS EFFECT) ==
   ======================= */
/* =============================================================
   == BOTTOM NAVIGATION (FINAL FIX - SOLID BACKGROUND) ==
   ============================================================= */
/* =============================================================
   == BOTTOM NAVIGATION (FINAL FIX with Z-INDEX) ==
   ============================================================= */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 500px;
    margin: 0 auto;
    height: 65px;
    
    /* Solid background color, koi transparency nahi */
    background-color: var(--container-bg); 

    /* Border aur Shadow taaki page se utha hua dikhe */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);

    /* --- YEH HAI ASLI FIX --- */
    z-index: 1000; /* Isko sabse upar waali layer par laane ke liye */
    
    /* Baaki ka flexbox code */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-medium); text-decoration: none; transition: all 0.3s ease; }
.nav-item .icon { font-size: 24px; }
.nav-item p { font-size: 12px; margin-top: 2px; }
.nav-item.active, .nav-item:hover { color: var(--primary-cyan); transform: translateY(-3px); }

/* =======================
   == OTHER PAGE STYLES ==
   ======================= */
.page-content { padding: 15px; }
.page-title { font-family: 'Orbitron', sans-serif; color: var(--primary-cyan); text-align: center; margin-bottom: 30px; font-size: 24px; text-transform: uppercase; text-shadow: 0 0 8px var(--primary-cyan); }

/* Leaderboard Styles */
.leaderboard-list { list-style: none; padding: 0; }
.leaderboard-item { display: flex; align-items: center; background: var(--card-bg); padding: 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid transparent; transition: all 0.3s ease; }
.leaderboard-item:hover { border-color: var(--primary-cyan); transform: translateX(5px); }
.leaderboard-item:nth-child(1) .position { color: #FFD700; }
.leaderboard-item:nth-child(2) .position { color: #C0C0C0; }
.leaderboard-item:nth-child(3) .position { color: #CD7F32; }
.leaderboard-item .position { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: bold; margin-right: 15px; color: var(--text-light); }
.leaderboard-item .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; border: 2px solid var(--primary-purple); }
.leaderboard-item .player-details { flex-grow: 1; }
.leaderboard-item .player-details .name { font-weight: 600; font-size: 16px; color: var(--text-light); }
.leaderboard-item .player-details .reward { font-size: 14px; color: var(--primary-cyan); }
.leaderboard-item .player-details .reward i { margin-right: 5px; }

/* No Data Message Style */
.no-data-message { text-align: center; padding: 50px 20px; background-color: var(--card-bg); border-radius: 10px; color: var(--text-medium); }
.no-data-message i { font-size: 48px; color: var(--primary-purple); margin-bottom: 20px; }
.no-data-message p { font-size: 18px; font-weight: 600; color: var(--text-light); }
.no-data-message span { font-size: 14px; }