/* ==========================================================================
   EGAME.AZ - MÜKƏMMƏL MOBİL VƏ PLANŞET UYĞUNLAŞDIRMASI (RESPONSIVE)
   ========================================================================== */

/* --- 1. PLANŞETLƏR VƏ KİÇİK EKRANLAR (Max: 1024px) --- */
@media screen and (max-width: 1024px) {
    /* Gridləri tək sütuna (alt-alta) salırıq */
    .info-grid, 
    .egp-layout-grid, 
    .egame-clanoverview-stats-grid,
    .egs-settings-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .hero-banner {
        height: 280px;
        padding: 30px;
        background-position: center right;
    }

    .hero-content h1 { font-size: 32px; }
}

/* --- 2. MOBİL TELEFONLAR (Max: 768px) --- */
@media screen and (max-width: 768px) {
    
    /* Ümumi Bədən Tənzimləmələri */
    body {
        border: none;
        border-radius: 0;
        height: 100dvh; /* Mobildə URL çubuğuna görə sürüşmənin qarşısını alır */
        -webkit-overflow-scrolling: touch; /* iOS cihazlarda axıcı scroll üçün */
    }

    /* HEADER: Pəncərə düymələrini gizlət (Web-də mənasızdır) */
    .app-header { padding: 0 15px; }
    .window-actions { display: none !important; }
    .logo-text { font-size: 16px; }

    /* YENİ HAMBURGER MENYU DÜYMƏSİ ÜÇÜN DİZAYN */
    #mobile-menu-btn {
        display: flex !important;
        background: transparent; border: none; color: #fff;
        padding: 5px; cursor: pointer;
    }

    /* SIDEBAR (YAN MENYU) -> MOBİLDƏ GİZLİ, YANDAN AÇILAN (DRAWER) OLUR */
    .sidebar {
        position: fixed;
        top: 50px;
        left: -300px;
        width: 280px;
        height: calc(100dvh - 50px);
        z-index: 9999;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(10, 10, 14, 0.98);
        backdrop-filter: blur(15px);
        box-shadow: 5px 0 25px rgba(0,0,0,0.8);
        overflow-y: auto; /* Menyu uzun olsa mobildə scroll olsun */
    }

    .sidebar.open { left: 0; }

    /* MENYU AÇILANDA ARXA PLANI QARALTMAQ ÜÇÜN (OVERLAY) */
    .mobile-overlay {
        position: fixed; top: 50px; left: 0; width: 100vw; height: calc(100dvh - 50px);
        background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
        z-index: 9998; opacity: 0; pointer-events: none; transition: 0.3s ease;
    }
    .mobile-overlay.show { opacity: 1; pointer-events: auto; }

    /* MƏZMUN (CONTENT) */
    .content-wrapper { padding: 15px; }

    /* HERO BANNER (MOBİL ÜÇÜN) */
    .hero-banner {
        height: auto;
        min-height: 240px;
        padding: 25px 20px;
        border-radius: 12px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .hero-content { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 35px; }
    .hero-content h1 { font-size: 24px; }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 15px;
    }
    .hero-actions button { width: 100%; padding: 12px; }

    /* SLIDER OXLARI - BƏRPA EDİLDİ VƏ KİÇİLDİLDİ */
    .slider-btn { 
        display: flex !important; 
        width: 35px; 
        height: 35px; 
        background: rgba(0,0,0,0.6); /* Mobildə oxlar bir az daha tünd olsun ki seçilsin */
    }
    .slider-btn .material-icons { font-size: 18px; }
    .prev-btn { left: 8px; }
    .next-btn { right: 8px; }

    /* OYUN KARTLARI (LIBRARY) */
    .game-card {
        flex-direction: column;
        height: auto;
        text-align: center;
        padding-bottom: 15px;
    }
    .game-cover {
        width: 100%; height: 160px;
        border-right: none; border-bottom: 1px solid var(--border-color);
        margin-bottom: 15px;
    }
    .game-info { flex-direction: column; gap: 15px; padding: 0 15px; width: 100%; }
    .mini-launch-btn { width: 100%; padding: 12px; } /* Mobildə barmaqla rahat basmaq üçün 100% uzunluq */

    /* MODAL VƏ AUTH (LOGIN/REGISTER) FORMLARI */
    .auth-container, .modal-box {
        width: 90% !important;
        max-width: 400px;
        padding: 30px 20px !important;
    }
    .auth-box h2 { font-size: 22px; }

    /* BİLDİRİŞ (NOTIFICATION) AÇILAN MENYU - TAM MƏRKƏZƏ ALINDI */
    .eg-notif-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 10000;
        box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    }

    /* PROFİL SƏHİFƏSİ MOBİL ÜÇÜN */
    .egp-header-banner { flex-direction: column; height: auto; padding-bottom: 20px; }
    .egp-cover-photo { height: 120px; border-radius: 12px 12px 0 0; }
    .egp-main-info {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px 0 15px;
    }
    .egp-avatar-wrap { margin-top: -60px; margin-bottom: 10px; }
    .egp-level-box { justify-content: center !important; width: 100%; margin-top: 15px; }
    
    #u-prof-actions { justify-content: center !important; flex-wrap: wrap; width: 100%; }
    #u-prof-actions button { flex: 1; min-width: 140px; } /* Profil butonları barmağa uyğunlaşdırıldı */

    /* MESSENGER / CHAT */
    .eg-messenger-wrapper { flex-direction: column; height: calc(100dvh - 120px); }
    .eg-msg-sidebar { width: 100%; height: 250px; border-right: none; border-bottom: 1px solid var(--border-color); }
    
    /* TOAST (AŞAĞIDAN ÇIXAN BİLDİRİŞLƏR) */
    .toast-container {
        bottom: 15px; right: 15px; left: 15px;
        align-items: center;
    }
    .eg-toast { min-width: 100%; max-width: 100%; }
}









/* ==========================================================================
   EGAME.AZ - MALİYYƏ (FINANCE) MOBİL UYĞUNLAŞDIRMASI
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Maliyyə səhifəsindəki 2 sütunlu qəlibi sındırıb tək sütun (alt-alta) edirik */
    #finance-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* İçindəki hər bir kart tam ekranın enini tutsun */
    #finance-container > div {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Ödəniş düymələri (Kredit Kartı / SMS) mobildə daha rahat basılsın deyə */
    #finance-container button {
        padding: 15px !important;
        font-size: 14px !important;
    }

    /* Əgər daxildə başqa Grid varsa, onu da kilitləyək */
    #finance-container [style*="display: grid"],
    #finance-container [style*="display:grid"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}