/* ==========================================================================
   ATRAVIAN — Unified public/guest mobile window frame
   --------------------------------------------------------------------------
   هذا الملف هو المرجع النهائي لحجم أي نافذة قبل تسجيل الدخول على الموبايل.

   التصميم المرجعي (iPhone SE في لقطة المستخدم):
   - العرض محسوب على 563.2px من شبكة التصميم 600px لإظهار 700px مرئية في مرجع 750px.
   - أعلى صندوق البرواز = 48.8px، مع هامش الصورة الأصلي ليظهر الحد عند y≈63px في المرجع.
   - أسفل البرواز يترك 73.6px قبل الفوتر ليظهر الحد عند y≈1118px في المرجع.
   - المحتوى الزائد يتم تمريره داخل جسم النافذة فقط؛ البرواز نفسه ثابت.

   لا يؤثر على الديسكتوب أو صفحات اللاعب المسجل.
   ========================================================================== */

@media screen and (max-width: 768px) and (orientation: portrait) {
    html.tg-public-guest {
        --tg-public-window-side-gap: 18.4px;
        --tg-public-window-gap-top: 48.8px;
        --tg-public-window-gap-bottom: 73.6px;
        --tg-public-window-footer-height: var(--tg-public-mobile-footer-height, 62px);
        --tg-public-window-reference-shift-x: 3.2px;

        /*
         * الفوتر العام مثبت مباشرة في الشاشة ولا يدخل داخل zoom الخاص
         * بـ bodyWrapper، لذلك نحوله إلى إحداثيات شبكة 600px قبل طرحه.
         */
        --tg-public-window-outer-height: calc(
            (var(--tg-mobile-visual-height, 100vh) / var(--tg-mobile-scale, 1))
            - (var(--tg-public-window-footer-height) / var(--tg-mobile-scale, 1))
        );

        --tg-public-window-frame-height: calc(
            var(--tg-public-window-outer-height)
            - var(--tg-public-window-gap-top)
            - var(--tg-public-window-gap-bottom)
        );
    }

    /* نفس خلفية نوافذ اللعبة لجميع صفحات الزائر قبل تسجيل الدخول. */
    html.tg-public-guest,
    html.tg-public-guest body,
    html.tg-public-guest body > div#background,
    html.tg-public-guest body > div#background::before,
    html.tg-public-guest body div#background {
        background-color: #9dbb62 !important;
        background-image: url("../../../img_rtl/layout/mobile-window-fixed-background.jpg") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 100% !important;
    }

    html.tg-public-guest body,
    html.tg-public-guest body div#background,
    html.tg-public-guest body div#bodyWrapper,
    html.tg-public-guest body div#center,
    html.tg-public-guest body div#center > div#contentOuterContainer,
    html.tg-public-guest body div#center > div#contentOuterContainer.size1,
    html.tg-public-guest body div#center > div#contentOuterContainer.size2 {
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /* المساحة المتاحة للنوافذ تنتهي قبل فوتر الزائر المثبت أسفل الشاشة. */
    html.tg-public-guest body div#center,
    html.tg-public-guest body div#center > div#contentOuterContainer,
    html.tg-public-guest body div#center > div#contentOuterContainer.size1,
    html.tg-public-guest body div#center > div#contentOuterContainer.size2 {
        height: var(--tg-public-window-outer-height) !important;
        min-height: var(--tg-public-window-outer-height) !important;
        max-height: var(--tg-public-window-outer-height) !important;
        block-size: var(--tg-public-window-outer-height) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    html.tg-public-guest body div#center > div#contentOuterContainer,
    html.tg-public-guest body div#center > div#contentOuterContainer.size1,
    html.tg-public-guest body div#center > div#contentOuterContainer.size2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: var(--tg-mobile-content-width, 600px) !important;
        min-width: var(--tg-mobile-content-width, 600px) !important;
        max-width: var(--tg-mobile-content-width, 600px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* لا يوجد شريط موارد في صفحات الزائر، وأي نسخة قديمة منه لا تحجز مساحة. */
    html.tg-public-guest body div#center > div#contentOuterContainer > ul#stockBar {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* البرواز الموحد لكل صفحات ما قبل تسجيل الدخول. */
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-window-frame,
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-build-frame {
        position: relative !important;
        left: var(--tg-public-window-reference-shift-x) !important;
        right: auto !important;
        display: flex !important;
        flex: 0 0 var(--tg-public-window-frame-height) !important;
        flex-direction: column !important;
        align-self: center !important;
        width: calc(var(--tg-mobile-content-width, 600px) - (var(--tg-public-window-side-gap) * 2)) !important;
        min-width: calc(var(--tg-mobile-content-width, 600px) - (var(--tg-public-window-side-gap) * 2)) !important;
        max-width: calc(var(--tg-mobile-content-width, 600px) - (var(--tg-public-window-side-gap) * 2)) !important;
        height: var(--tg-public-window-frame-height) !important;
        min-height: var(--tg-public-window-frame-height) !important;
        max-height: var(--tg-public-window-frame-height) !important;
        block-size: var(--tg-public-window-frame-height) !important;
        margin: var(--tg-public-window-gap-top) auto var(--tg-public-window-gap-bottom) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* العنوان والفوتر الصغير ثابتان؛ التمرير في الوسط فقط. */
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-window-frame > div.contentTitle,
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-build-frame > div.contentTitle,
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-window-frame > div.contentFooter,
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-build-frame > div.contentFooter {
        flex-shrink: 0 !important;
    }

    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-window-frame > div.contentContainer,
    html.tg-public-guest body
        div#center > div#contentOuterContainer > div.tg-mobile-build-frame > div.contentContainer {
        display: block !important;
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        block-size: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y pinch-zoom !important;
    }

    html.tg-public-guest body
        :is(.tg-mobile-window-frame, .tg-mobile-build-frame) > .contentContainer > div#content {
        min-height: 100% !important;
        box-sizing: border-box !important;
    }

    /* يمنع صفحات الدخول/التسجيل القديمة من فرض 875/880px أو تقصير النافذة. */
    html.tg-public-guest body.tg-public-auth
        div#center div#contentOuterContainer > div.tg-mobile-window-frame,
    html.tg-public-guest body.tg-public-auth
        div#center div#contentOuterContainer > div.tg-mobile-build-frame {
        flex-basis: var(--tg-public-window-frame-height) !important;
        height: var(--tg-public-window-frame-height) !important;
        min-height: var(--tg-public-window-frame-height) !important;
        max-height: var(--tg-public-window-frame-height) !important;
        block-size: var(--tg-public-window-frame-height) !important;
    }

    /* يمنع أي قاعدة صفحة عامة قد تعيد حجم البرواز حسب كمية المحتوى. */
    html.tg-public-guest body .tg-mobile-window-frame:only-child,
    html.tg-public-guest body .tg-mobile-build-frame:only-child {
        align-self: center !important;
    }
}