/* ==========================================
           1. فونت‌ها و تنظیمات پایه
           ========================================== */
       @font-face {
    font-family: 'Vazirmatn';
    src: local('Vazirmatn'),
         url('../fonts/Vazirmatn.woff2') format('woff2');
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Lalezar';
    src: local('Lalezar'),
         url('../fonts/Lalezar.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Fredoka';
    src: local('Fredoka Medium'),
         url('../fonts/Fredoka-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'Vazirmatn',sans-serif; color:#e0e0e0; overflow-x:hidden; position:relative; background: #1a1a2e; padding-top: 110px; scroll-behavior: smooth; } 
        body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/background.webp') center center/cover no-repeat; z-index: -1; }
        body[data-lang="en"] { font-family:'Fredoka',sans-serif; }
        body[data-lang="en"] .lalezar-text { font-family:'Fredoka',sans-serif; }
        
        .lang-fa { display:inline; }
        .lang-en { display:none; }
        div.lang-fa, section.lang-fa, form.lang-fa, p.lang-fa, h4.lang-fa { display:block; }
        div.lang-en, section.lang-en, form.lang-en, p.lang-en, h4.lang-en { display:none; }

      /* ==========================================
   ۲. هدر ثابت، نوار اعلان و ناوبری سیال (Fluid)
   ========================================== */
#global-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 90 !important; /* حالا هدر همیشه روی جنگل و کوهستان است */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
}

/* اصلاح نوار اعلان برای حفظ ساختار تک‌خطی در تمام ابعاد */
.announcement-bar { 
    background: linear-gradient(90deg,#7c3aed,#a855f7); 
    color: white; 
    padding: clamp(6px, 1.2vw, 10px) 15px; 
    font-size: clamp(0.85rem, 2.8vw, 1.1rem); /* کاهش خودکار سایز متن در موبایل کوچک */
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.announcement-text { 
    white-space: nowrap !important; /* جلوگیری مطلق از چندخطه شدن نوار صورتی */
    display: inline-block; 
    animation: moveText 14s linear infinite alternate; 
}

@keyframes moveText { 
    0% { transform: translateX(3vw); } 
    100% { transform: translateX(-3vw); } 
}

/* اضافه کردن انیمیشن رفت و برگشتی دکمه بازگشت */
@keyframes backArrowBounce {
    0% { transform: translateX(0); }
    100% { transform: translateX(6px); /* حرکت ریز به سمت راست */ }
}
/* انیمیشن نبض دکمه گزارش خرابی */
@keyframes pulse-effect {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* نوار ناوبری اصلی - تغییر به حالت بدون شکست ردیف (nowrap) */
.top-nav-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: clamp(6px, 1.8vw, 20px); /* فاصله هوشمند بین المان‌ها */
    background: rgba(26, 26, 46, 0.95); 
    padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2.5vw, 20px); 
    border-bottom: 1px solid rgba(187, 134, 252, 0.3); 
    font-size: clamp(0.8rem, 1.5vw, 0.95rem); 
    backdrop-filter: blur(10px); 
    direction: rtl !important; 
    flex-wrap: nowrap !important; /* جلوگیری قطعی از رفتن دکمه خروج به ردیف دوم */
}
/* ==============================================
   اصلاح کلاس اصلی دکمه بازگشت (تصحیح مقادیر clamp)
   ============================================== */
.leilopia-back-btn {
    position: fixed !important;
    /* مقادیر حداقل و حداکثر اصلاح شدند */
    top: clamp(117px, 5vw, 117px) !important; 
    right: clamp(15px, 4vw, 25px) !important; 
    z-index: 100 !important;
    background: transparent !important;
    color: #ff0000 !important;
    /* ابعاد حداقل و حداکثر برای عرض و ارتفاع اصلاح شدند */
    width: clamp(40px, 8vw, 40px) !important;
    height: clamp(10px, 8vw, 20px) !important;
    border-radius: 20% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px) !important;
    animation: backArrowBounce 0.8s infinite alternate ease-in-out !important; 
    padding: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important; 
}

/* ==============================================
   اصلاح جایگاه دکمه در صفحات جنگل و شخصیت‌ها
   ============================================== */
#world-page .leilopia-back-btn,
#character-page .leilopia-back-btn {
    /* دکمه باید به پایین‌تر از هدر منتقل شود تا زیر آن گیر نکند! */
    top: clamp(115px, 12vw, 130px) !important; 
}

/* پیشنهاد: اضافه کردن یک حالت هوور و لمس نرم برای تجربه کاربری مدرن‌تر */
.back-btn-selector:hover {
    background: rgba(255, 0, 0, 0.1) !important;
    transform: scale(1.05);
}
/* 5. مودال‌ها و منوهای کناری */
#profileModal, #connectModal, .sidebar-overlay { 
    z-index: 96 !important; 
}
.sidebar-panel { 
    z-index: 97 !important; 
}

/* 6. بالاترین لایه‌ها (پاپ‌آپ‌های حیاتی و پیام‌ها) */
#entryPopup, #subscriptionModal, #videoPlayerPopup, #floatingFeedbackContainer { 
    z-index: 100 !important; 
}
.nav-item { 
    cursor: pointer; 
    color: #fff; 
    transition: all 0.3s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
    font-weight: bold; 
    padding: 8px 14px; 
    border-radius: 8px; 
    font-size: 1.3rem; 
}
.nav-item:hover { color: #ffd700; background: rgba(255,255,255,0.05); transform: translateY(-2px); }

/* پنهان کردن تمام نوشته‌های متنی داخل آیتم‌های منو در هدر */
.top-nav-bar .nav-item .lang-fa,
.top-nav-bar .nav-item .lang-en,
.top-nav-bar .nav-item #displayUserNameBadge,
.top-nav-bar .nav-item #navUserLevel { display: none !important; }

#cartCount, #favCount { margin-right: 2px !important; font-size: 0.7rem !important; padding: 1px 5px !important; font-family: 'Vazirmatn', sans-serif !important; }

/* المان‌های بخش وضعیت کاربری کاملاً ریسپانسیو و منعطف */
.user-info-badge { 
    display: inline-flex !important; 
    align-items: center !important; 
    gap: clamp(4px, 1.2vw, 8px) !important; 
    flex-shrink: 1; /* اجازه کوچک شدن هوشمند بج‌ها به جای بیرون زدن از صفحه */
}

.user-name { 
    background: rgba(255, 255, 255, 0.07) !important; 
    padding: clamp(4px, 1vw, 5px) clamp(6px, 1.5vw, 12px) !important; 
    border-radius: 20px !important; 
    border: 1px solid rgba(255, 255, 255, 0.12) !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    display: inline-block !important; 
    color: #fff; 
    font-weight: bold; 
    font-size: clamp(0.7rem, 1.5vw, 0.95rem) !important; 
    max-width: clamp(65px, 15vw, 120px) !important; /* کنترل دقیق حداکثر عرض نام در صفحه ۳۲۰ */
}

.user-tier, .user-coins { 
    background: rgba(255, 255, 255, 0.05) !important; 
    padding: clamp(4px, 1vw, 5px) clamp(6px, 1.5vw, 12px) !important; 
    border-radius: 20px !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: clamp(3px, 1vw, 6px); 
    font-size: clamp(0.7rem, 1.5vw, 0.9rem) !important; 
    transition: all 0.3s; 
    cursor: pointer; 
    white-space: nowrap;
}
.user-tier { color: #ffb300; }
.user-coins { color: #64ffda; }

/* اصلاح ساختار دکمه خروج برای تطبیق با مایکرو-نمایشگرها */
.logout-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 8vw, 40px) !important;
    height: clamp(32px, 8vw, 40px) !important;
    border-radius: clamp(8px, 2vw, 12px) !important; 
    border: 1px solid rgba(255, 0, 0, 0.3); 
    background: transparent; 
    backdrop-filter: blur(8px); 
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ff0000; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* جلوگیری از فشرده شدن دکمه خروج */
}
.logout-header-btn svg {
    width: clamp(16px, 4vw, 20px) !important;
    height: clamp(16px, 4vw, 20px) !important;
}
.logout-header-btn:hover { background: rgba(255, 0, 0, 0.15); transform: scale(1.05); border-color: rgba(255, 0, 0, 0.6); }


        /* ==========================================
           3. صفحه اصلی (Hero، جهان‌ها، شخصیت‌ها)
           ========================================== */
        .hero-logo { display: block; margin: 0 auto; max-height: 50vh; max-width: 850px; width: 100%; border-radius: 20px; animation: pulse 4s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
       .about-box {
    background: rgba(30,30,50,0.5);
    padding: 20px 35px;
    border-radius: 20px;
    margin: 20px auto 30px;
    text-align: center;
    max-width: 600px;
}
        .leilopia-inline { color:#FFD700; font-size:1.2rem; }
/* ------------------------------------حرکت بالا و پایین حرف جنگل با translatey(-3)----- */
        @keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2); border-color: rgba(255, 215, 0, 0.5); } }
        .custom-worlds-grid { display: flex; gap: 20px; margin-top: 25px; overflow-x: auto; padding: 15px 5px; scroll-behavior: auto !important; direction: ltr !important; scrollbar-width: none; }
        .custom-worlds-grid::-webkit-scrollbar { display: none; }
       /* ----------------اندازه کارتهای ۸ گانه اسلاید شده -----------با تغیر with 140------ */
        .custom-world-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 0px; width: 100px; flex-shrink: 0; text-align: center; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); position: relative;}
        .custom-world-item:not([data-world="forest"]) .world-card-img { filter: grayscale(90%) opacity(0.8); }
        .custom-world-item[data-world="forest"] { animation: floatUpDown 1.2s ease-in-out infinite; }
        .custom-world-item:hover, .custom-world-item[data-world="forest"]:hover { transform: translateY(-5px) scale(1.03); border-color: #ffd700; animation: none; }
        .world-card-img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.1); order: 2; transition: transform 0.3s ease;}
        .custom-world-item:hover .world-card-img { transform: scale(1.03); }
        .custom-world-title { font-family: 'Lalezar', sans-serif; font-size: 1rem; color: #fff; margin-bottom: 12px; order: 1; }
        .custom-world-status { font-size: 0.85rem; color: #62ca70fb; background: rgba(0, 0, 0, 0.699); padding: 5px 12px; border-radius: 20px; margin-top: auto; order: 3; }

        .leilopia-char-box { background: rgba(30, 30, 55, 0.55); border: 1px solid rgba(187, 134, 252, 0.2); border-radius: 25px; padding: 40px 20px; margin: 50px auto 40px auto; max-width: 850px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); }
        .char-grid-2x4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px 15px; justify-items: center; max-width: 680px; margin: 0 auto; }
        .char-item-wrapper { text-align: center; width: 100%; max-width: 130px; }
        @keyframes heroCirclePulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255,215,0,0.4); } 50% { transform: scale(1.07); box-shadow: 0 4px 25px rgba(255,215,0,0.8); } }
        .active-hero-pulse { animation: heroCirclePulse 2.5s ease-in-out infinite; }
        @keyframes laviFastPulse { 0% { transform: scale(0.96); } 50% { transform: scale(1.04); } 100% { transform: scale(0.96); } }

        /* ==========================================
           4. فروشگاه، کارت‌ها و ویدیوها
           ========================================== */
        #internalShop { display: none; padding-top: 20px;display:none; position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:auto;z-index:80;padding-top:160px; background:rgba(20,20,35,.65); backdrop-filter:blur(15px); }
        .shop-container { max-width: 1000px; margin: 0 auto; padding: 20px; background: rgba(20,20,40,0.85); border-radius: 20px; border: 1px solid rgba(187,134,252,0.3); }
        .shop-category-title { font-family: 'Lalezar', cursive; font-size: 1.8rem; color: #4a90e2; border-bottom: 2px solid rgba(74,144,226,0.3); padding-bottom: 12px; margin: 40px 0 20px 0; text-align: right; direction: rtl; }
        .shop-books-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; direction: rtl; }
        .shop-item-card { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 15px 10px; text-align: center; cursor: pointer; transition: transform 0.3s, border-color 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
        .shop-item-card:hover { transform: translateY(-5px); border-color: #ffd700; }
        .shop-item-icon { font-size: 2.2rem; margin-bottom: 10px; display: block;}
        .shop-item-title { font-size: 0.85rem; color: #fff; font-weight: bold; margin-bottom: 8px; line-height: 1.4; }
        .shop-world-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; direction: rtl; }

        #storiesContainer, .world-content-grid, .stories-grid, .cards-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 25px !important; width: 100% !important; }
        .video-story-card { background: rgba(30, 30, 50, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .video-story-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(187,134,252,0.3); }
        .video-thumbnail { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;}
        .video-play-btn { width: 30px; height: 30px; background: rgba(230, 57, 70, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(230,57,70,0.6); transition: transform 0.2s; font-size: 0.8rem; z-index: 2; }
        .video-story-card:hover .video-play-btn { transform: scale(1.15); }
        .video-badge { position: absolute; bottom: 10px; right: 10px; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 2;}
        .video-ep { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: bold; z-index: 2;}
        
        .action-icon-btn { width: 35px; height: 35px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; backdrop-filter: blur(4px); transition: all 0.2s; position: absolute; top: 12px; z-index: 10; }
        .action-icon-btn.fav { right: 12px; }
        .action-icon-btn.cart { left: 12px; }
        .action-icon-btn.fav:hover, .action-icon-btn.fav.is-fav { background: rgba(230, 57, 70, 0.9); }
        .action-icon-btn.cart:hover { background: rgba(74, 144, 226, 0.9); }

        @keyframes haloPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8); outline: 2px solid transparent; } 50% { box-shadow: 0 0 25px 10px rgba(255, 0, 0, 0.9); outline: 2px solid red; transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); outline: 2px solid transparent; transform: scale(1); } }
        .red-halo { animation: haloPulse 2s ease-out forwards; position: relative; z-index: 100; }

        /* ==========================================
           5. گالری تصاویر، مدال‌ها و فرم‌ها
           ========================================== */
       #world-page, #character-page { display: none; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(20, 20, 35, 0.65) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important;  overflow-y: auto !important;
       z-index: 80 !important;  padding-top: 160px !important; /* برای جلوگیری از رفتن محتوا زیر هدر */}
       #world-page .world-container, #world-page > div:first-child, #character-page .world-container, #character-page > div:first-child { max-width: 1140px !important; margin: 0 auto !important; padding: 240px 20px 50px 20px !important; box-sizing: border-box !important; }
        
        .gallery-world-wrapper { display: grid; grid-template-columns: 1fr auto 1fr; gap: 25px; align-items: start; margin: 25px 0 40px 0; width: 100%; }
        .gallery-column { display: flex; flex-direction: column; gap: 30px; text-align: center; margin-top: 50px; }
        details.gallery-box { background: none !important; border: none !important; padding: 0; box-shadow: none !important; cursor: pointer; transition: all 0.3s; }
        details.gallery-box summary { list-style: none; outline: none; }
        details.gallery-box summary::-webkit-details-marker { display: none; }
        .gallery-box-title { font-family: 'Lalezar', sans-serif; color: #ffd700; font-size: 1.1rem; margin-bottom: 20px; display: block; position: relative; padding-bottom: 12px; }
        .gallery-box-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 2px; background: rgba(255, 215, 0, 0.5); border-radius: 2px; }
        .gallery-thumbs-row { position: relative; height: 140px; display: flex; justify-content: center; align-items: flex-end; margin: 15px auto 0 auto; width: 100%; max-width: 180px; }
        .img-frame { position: absolute; bottom: 10px; left: 50%; width: 120px; height: 120px; border: 2px solid #ffd700; border-radius: 8px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.7); cursor: pointer; transform-origin: bottom center; transform: translateX(-50%) rotate(calc(var(--idx-offset, 0) * 32deg)) translateY(-25px); z-index: var(--z-index, 1); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s; }
        .img-frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
        .gallery-thumbs-row:not(.is-closed) .img-frame:hover { z-index: 999 !important; transform: translateX(-50%) rotate(calc(var(--idx-offset, 0) * 32deg)) scale(1.15) translateY(-40px); }
        .gallery-thumbs-row.is-closed .img-frame { transform: translateX(-50%) rotate(calc(var(--idx-offset, 0) * 3deg)) translateY(0); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
        .img-frame.zoomed-60 { transform: translateX(-50%) rotate(0deg) scale(2) translateY(-40px) !important; z-index: 99999 !important; border-color: #ff4757 !important; box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important; }

        .profile-tabs-container { display: flex; border-bottom: 2px solid rgba(255,255,255,0.1); margin-bottom: 20px; gap: 5px; direction: rtl; }
        .profile-tab-button { flex: 1; padding: 12px; background: rgba(255,255,255,0.03); border: none; border-radius: 10px 10px 0 0; color: #aaa; font-family: inherit; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-align: center; }
        .profile-tab-button.active { background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; border-bottom: 2px solid #ffd700; }
        .profile-tab-content { display: none; }
        .profile-tab-content.active { display: block; }

        .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000010; display: none; opacity: 0; transition: opacity 0.3s; }
        .sidebar-overlay.active { display: block; opacity: 1; }
        .sidebar-panel { position: fixed; top: 120px; bottom: 25px; height: calc(100vh - 145px); right: -380px; width: 360px; max-width: 85%; background: #1e1e32; border: 2px solid rgba(187, 134, 252, 0.3); border-radius: 16px 0 0 16px; box-shadow: -10px 0 30px rgba(0,0,0,0.6); z-index: 1000020; display: flex; flex-direction: column; transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
        .sidebar-panel.active { right: 0 !important; }
        .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
        .sidebar-close { background: none; border: none; font-size: 2rem; cursor: pointer; color: #aaa; transition: color 0.2s; }
        .sidebar-close:hover { color: #ff5b5b; }
        .sidebar-body { flex: 1; overflow-y: auto; padding: 20px; color: #eee; }
        .cart-sidebar-footer { padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); }
        .cart-sidebar-checkout-btn { width: 100%; padding: 14px; background: #7c3aed; color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.2s, transform 0.1s; }
        .cart-sidebar-checkout-btn:hover { background: #6d28d9; }
        
/* ===========================
   Leilopia Video Player
=========================== */

.video-player-popup{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    z-index:999999;

    padding:20px;

    box-sizing:border-box;

}

.video-player-container{  

    position:relative;

    width:min(92vw,800px);

    background:#000;

    border:2px solid #bb86fc;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 0 35px rgba(187,134,252,.45);

}

.video-frame{

    position:relative;

    width:100%;

    padding-top:56.25%;   /* 16:9 */

    background:#000;

}

.video-frame iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

    display:block;

}

.h_iframe-aparat_embed_frame{
    position:relative;
    width:100%;
}

.h_iframe-aparat_embed_frame span{
    display:block;
    padding-top:57%;
    }

.h_iframe-aparat_embed_frame iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}
.close-player-btn{

    position:absolute;

    top:12px;

    right:12px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#ff4757;

    color:#fff;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:1000;

    transition:.25s;

}

.close-player-btn:hover{

    transform:scale(1.08);

    background:#ff2d55;

}

@media (max-width:768px){

    .video-player-popup{

        padding:12px;

    }

    .video-player-container{

        width:100%;

        border-radius:14px;

    }

    .close-player-btn{

        width:38px;

        height:38px;

        font-size:20px;

        top:10px;

        right:10px;

    }

}


/* ===========================
   Video Language Selector
=========================== */

.video-language-box{
    padding:35px;
    text-align:center;
    color:#fff;
}

.video-language-title{
    margin-bottom:18px;
    color:#bb86fc;
    font-family:'Lalezar',cursive;
    font-size:1.6rem;
}

.video-language-title span{
    font-family:'Fredoka',sans-serif;
    font-size:1.15rem;
}

.video-language-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:420px;
    margin:0 auto;
}

.video-option-btn{
    padding:14px 18px;
    border:none;
    border-radius:10px;
    font-size:1rem;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

.video-option-btn:hover{
    transform:translateY(-2px);
}

.video-option-btn small{
    display:block;
    margin-top:6px;
    font-size:.85rem;
    font-weight:400;
}

.video-option-btn.aparat{
    background:#ffb703;
    color:#000;
}

.video-option-btn.youtube{
    background:#ff4757;
    color:#fff;
}

.video-option-btn.english{
    background:#4ade80;
    color:#000;
}

@media (max-width:768px){

    .video-language-box{
        padding:25px 18px;
    }

    .video-language-title{
        font-size:1.35rem;
    }

}
        @keyframes feedbackFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        #feedbackMainBtn { animation: pulse-effect 2s infinite; transition: transform 0.3s ease; }
        #feedbackMainBtn:hover { animation-play-state: paused; transform: scale(1.15); } 
        
        /* ==========================================
           6. استایل‌های خاص جنگل
           ========================================== */
        .jungle-welcome-title { font-size: 2.4rem !important; color: #00fff0 !important; margin-bottom: 20px; }
        .jungle-header-container { display: block; margin-bottom: 20px; }
        .jungle-main-title { font-size: 1.5rem !important; color: #ffd700 !important; margin-bottom: 20px !important; display: block; }
        .lavi-album-wrapper { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer;gap: 2px;position: relative;z-index: 10; margin: 15px auto 0;}
 /* ==========================================
   استایل‌های منوی چسبیده (Sticky Menu) جهان‌ها
   ========================================== */
.world-sticky-menu {position: fixed;top: clamp(80px, 12vw, 110px); /* قرارگیری دقیق زیر هدر اصلی */
    left: 0;width: 100%;background: rgba(26, 26, 46, 0.95);backdrop-filter: blur(10px);border-bottom: 1px solid rgba(255, 215, 0, 0.3);display: flex;
    justify-content: center; gap: clamp(10px, 2vw, 20px);padding: 12px 20px;z-index: 85;box-shadow: 0 4px 15px rgba(0,0,0,0.4);direction: rtl;}
.world-menu-btn {background: linear-gradient(135deg, #7c3aed, #a855f7);color: white;border: 1px solid #ffd700;padding: 8px 20px;border-radius: 25px;
    font-family: 'Vazirmatn', sans-serif;font-weight: bold;font-size: clamp(0.8rem, 1.5vw, 1rem);cursor: pointer;transition: all 0.3s ease;display: flex;
    align-items: center;gap: 8px; }
.world-menu-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);background: linear-gradient(135deg, #a855f7, #7c3aed);}

/* تنظیم فاصله محتوای صفحه جهان تا زیر منوی چسبیده جدید */
#world-page .world-container, 
#world-page > div:first-child {padding-top: 190px !important;}
/* مخفی کردن دکمه خروج در مودال پروفایل */
        #profileModal .logout-btn { display: none; }
/* ==========================================
   7. Media Queries (موبایل و تبلت بهینه‌سازی شده)
   ========================================== */
.mobile-bottom-nav {z-index: 90 !important;}

@media (max-width: 900px) {
    #storiesContainer, .world-content-grid, .stories-grid, .cards-grid { grid-template-columns: 1fr !important; gap: 20px; }
    .shop-books-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .gallery-world-wrapper {display: grid; grid-template-columns: repeat(4, 1fr); /* در دسکتاپ ۴ آلبوم جلوی هم قرار می‌گیرند */
      gap: 25px; align-items: start; margin: 40px 0; width: 100%; }
    .gallery-column { margin-top: 20px; }
    .gallery-thumbs-row { height: 90px; max-width: 140px; margin-top: 10px; }
    .img-frame { width: 75px; height: 75px; transform: translateX(-50%) rotate(calc(var(--idx-offset, 0) * 35deg)) translateY(-12px); }
    .gallery-thumbs-row.is-closed .img-frame { transform: translateX(-50%) rotate(calc(var(--idx-offset, 0) * 3deg)) translateY(0); }
    html, body { overflow-x: hidden; width: 100%; }
    .gallery-world-wrapper {grid-template-columns: 1fr; /* در موبایل و تبلت زیر هم قرار می‌گیرند */ }
}

@media (max-width: 768px) {
    /* تغییر پدینگ بالای بادی به صورت داینامیک برای حفظ فاصله هیرو و جلوگیری از رفتن به زیر کاور */
    body { padding-bottom: 85px !important; padding-top: clamp(95px, 14vw, 120px) !important; }
    body::before { background-image: url('../images/background-mobile.webp'); }
    
    .hide-on-mobile { display: none !important; }
    
    /* حذف تمام جابجایی‌ها و کدهای پدینگ دستی دکمه‌ها و بج‌ها به دلیل یکپارچگی با کلایمپ فوقانی */
    .lang-switcher { position: relative !important; left: 0 !important; }

    .mobile-bottom-nav { display: flex !important; position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; background: #1a1a2e; border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 1000; justify-content: space-around; align-items: center; padding: 0 10px; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); gap: clamp(10px, 5vw, 95px) !important; }
    .mobile-bottom-nav .nav-item, .mobile-nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #a0a0b8; font-size: 0.75rem; text-decoration: none; transition: all 0.3s ease; cursor: pointer; font-family: 'Vazirmatn', sans-serif;}
    .mobile-nav-btn span.icon { font-size: 1.2rem; position: relative; }
    .mobile-bottom-nav .nav-item svg { width: 24px; height: 24px; fill: currentColor; }
    .mobile-bottom-nav .nav-item:hover, .mobile-bottom-nav .nav-item.active, .mobile-nav-btn:active, .mobile-nav-btn:hover { color: #64ffda; transform: translateY(-3px); }
    #mobileCartCount { position: absolute; top: -5px; right: -10px; background: #ff4757; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; font-weight: bold; }
    
    #world-page > div { margin-top: 0px !important; }
    #curvedSubTitle.jungle-main-title { font-family: 'Lalezar', sans-serif !important; font-size: 1.85rem !important; color: #ffd700 !important; text-shadow: 0px 2px 0px #b28a00, 0px 6px 4px rgba(0,0,0,0.5), 0px 1px 10px rgba(0,0,0,0.4) !important; margin-top: 0 !important; margin-bottom: 15px !important; display: block !important; }
    
    .sidebar-panel { top: 145px; bottom: 20px; height: calc(100vh - 165px); }
    
    .profile-modal h2, .profile-modal h3, #profileModal h2, #profileModal h3, .profile-section-title { font-size: 1.05rem !important; margin-top: 5px !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
    .profile-modal .modal-body, #profileModal .modal-content, .profile-tab-content { padding: 10px 12px !important; }
    .profile-modal-tabs { margin-bottom: 10px !important; }
    #world-page .world-container, #world-page > div:first-child, #character-page .world-container, #character-page > div:first-child { padding: 250px 15px 40px 15px !important; }
    html, body { overflow-x: hidden; width: 100%; }
}

@media (max-width: 500px) {
    .shop-books-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .char-grid-2x4 { gap: 25px 8px; }
    .leilopia-char-box { padding: 30px 10px; margin: 40px 15px 30px 15px; }
    html, body { overflow-x: hidden; width: 100%; }
}
 
/*=========================================
    Leilopia Notification System
=========================================*/
.leilopia-toast{

    margin-top:18px!important;

    width:auto!important;
    min-width:280px!important;
    max-width:420px!important;

    padding:14px 18px!important;

    border-radius:22px!important;

    background:rgba(22,22,40,.88)!important;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12)!important;

    box-shadow:0 18px 45px rgba(0,0,0,.45);

    overflow:hidden;

    direction:rtl;

    display:flex!important;

    align-items:center!important;

}

.leilopia-toast::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--toastColor,#4aa8ff);

}

.leilopia-toast .swal2-title{

    margin:0!important;

    padding:0!important;

    flex:1;

    text-align:right;

    font-family:'Vazirmatn',sans-serif!important;

    font-size:14px!important;

    font-weight:700!important;

    color:#fff!important;

    line-height:1.7!important;

}

.leilopia-toast .swal2-image{

    width:38px!important;

    height:38px!important;

    margin:0 0 0 12px!important;

    border-radius:50%;

    padding:3px;

    background:white;

    box-shadow:0 0 15px rgba(255,255,255,.25);

    order:2;

}
.leilopia-toast .swal2-html-container{

    margin:0!important;

}


.leilopia-toast .swal2-icon{

    display:none!important;

}


.leilopia-toast .swal2-timer-progress-bar{

    background:rgba(255,255,255,.35)!important;

    height:3px!important;

}


@keyframes toastDrop{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.leilopia-toast{

    animation:toastDrop .35s ease;

}


@media(max-width:768px){

.leilopia-toast{

    width:92vw!important;

}

}
.leilopia-confirm{

    margin-top:-55vh!important;

    border-radius:22px!important;

    background:rgba(22,22,40,.95)!important;

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12)!important;

    box-shadow:0 18px 45px rgba(0,0,0,.45);

    direction:rtl;

}


.leilopia-confirm .swal2-title{

    font-family:'Vazirmatn',sans-serif!important;

    font-size:16px!important;

    color:white!important;

}


.leilopia-confirm .swal2-actions{

    gap:12px;

}


.leilopia-confirm .swal2-confirm{

    background:#37d67a!important;

    border-radius:12px!important;

    padding:10px 22px!important;

    font-family:'Vazirmatn',sans-serif!important;

}


.leilopia-confirm .swal2-cancel{

    background:#555!important;

    border-radius:12px!important;

    padding:10px 22px!important;

    font-family:'Vazirmatn',sans-serif!important;

}
    
/* ==========================================
   موبایل - کوچک سازی منوی اشتراک
========================================== */

@media (max-width: 600px) {

    #subscriptionModal {
        padding: 8px !important;
    }

    #subscriptionModal > div {
        width: 95% !important;
        max-width: 360px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        max-height: 90vh !important;
    }

    #subscriptionModal h3 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
        margin-top: 8px !important;
    }

    #currentSubTextInPopup {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
    }

    #subscriptionModal > div > div {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #subscriptionModal > div > div > div {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    #subscriptionModal > div > div > div > div:first-child {
        font-size: 1.5rem !important;
        margin-bottom: 3px !important;
    }

    #subscriptionModal h4 {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
    }

    #subscriptionModal button {
        font-size: 0.85rem !important;
        padding: 7px !important;
    }

}
/* ===================================================
   ✨ افکت درخشش جادویی برای دکمه‌های جنگل و کوهستان
   =================================================== */

/* تنظیمات اولیه روی اسپانِ وارد شوید */
.custom-world-item[data-world="forest"] .custom-world-status,
.custom-world-item[data-world="mountain"] .custom-world-status {
    position: relative;
    overflow: hidden;
    display: inline-block; /* برای اینکه افکت‌های ابعادی درست کار کنند */
    padding: 4px 12px;     /* ایجاد یک ظاهر شیک شبیه به دکمه */
    border-radius: 20px;   /* کپسولی و بیضی شدن دکمه */
    transition: all 0.3s ease;
}

/* لایه متحرک نور درخشان که از روی متن رد می‌شود (Shine Sweep) */
.custom-world-item[data-world="forest"] .custom-world-status::before,
.custom-world-item[data-world="mountain"] .custom-world-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shineSweep 3s infinite ease-in-out;
}

/* 🌲 ۱. استایل و درخشش اختصاصی دکمه جنگل (سبز جادویی و طلایی) */
.custom-world-item[data-world="forest"] .custom-world-status {
    background: linear-gradient(135deg, #1e4620, #2ecc71) !important;
    border: 1px solid #55efc4;
    color: #ffffff !important;
    animation: forestGlow 2.5s infinite ease-in-out;
}

/* 🏔️ ۲. استایل و درخشش اختصاصی دکمه کوهستان (اگر کارت جداگانه‌ای با این نام دارید) */
.custom-world-item[data-world="mountain"] .custom-world-status {
    background: linear-gradient(135deg, #1e3c72, #00d2ff) !important;
    border: 1px solid #81ecec;
    color: #ffffff !important;
    animation: mountainGlow 2.5s infinite ease-in-out;
}


/* ===================================================
   ⚙️ انیمیشن‌های درخشش و حرکت نور
   =================================================== */

/* انیمیشن رد شدن خط نور روی دکمه */
@keyframes shineSweep {
    0% { left: -100%; }
    30% { left: 150%; } 
    100% { left: 150%; } 
}

/* انیمیشن هاله نور دکمه جنگل */
@keyframes forestGlow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(46, 204, 113, 0.4), inset 0 0 5px rgba(255, 215, 0, 0.2); 
    }
    50% { 
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.9), inset 0 0 10px rgba(255, 215, 0, 0.4); 
    }
}

/* انیمیشن هاله نور دکمه کوهستان */
@keyframes mountainGlow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(0, 210, 255, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.2); 
    }
    50% { 
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.5); 
    }
}

/* تنظیمات چیدمان دایره شخصیت‌ها */
.char-grid-2x4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 15px;
}

.char-item-wrapper {
    cursor: pointer;
    text-align: center;
    direction: rtl;
    width: 130px;
    display: inline-block;
    vertical-align: top;
    transition: transform 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* حذف افکت مربع رنگی در موبایل */
}

/* افکت بزرگ‌نمایی هوشمند: فقط روی دسکتاپ (دستگاه‌های دارای موس) اعمال می‌شود تا تاچ موبایل خراب نشود */
@media (hover: hover) {
    .char-item-wrapper:hover {
        transform: scale(1.05);
    }
}

@media (min-width: 768px) { .custom-world-item { width: 160px; } }



/* ===========================
   Stories Container
=========================== */

#storiesContainer,
.world-content-grid,
.stories-grid,
.cards-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:26px;
    width:100%;
}

@media (max-width:768px){

    #storiesContainer{

        display:flex !important;
        flex-direction:column;
        align-items:center;
        gap:22px;
        padding:0 0 30px;

    }

}