/* ==========================================================================
   Travian mobile base — authoritative global stylesheet
   Architecture: core → backgrounds → stockbar → bottom navigation → static window frame
   Drawers, public footer, auth and payment windows are loaded conditionally from separate files.
   ========================================================================== */

/* ==========================================================================
   Mobile V26 Professional Clean
   هدف الملف:
   - ملف واحد نظيف بدون طبقات V6/V9/V18/V22/V25 المتكررة.
   - تحكم منفصل في خلفية الموقع وخلفية/صورة دائرة الحقول.
   - تحكم منفصل في عرض/ارتفاع/يمين/شمال/فوق/تحت/زوم كل جزء.
   - تثبيت شاشة الموبايل Portrait بدون حركة بكرة الماوس أو اللمس.
   - Landscape يترك الاستايل الأصلي مثل الشاشة الكبيرة.
   - CSS فقط، لا يوجد أي تغيير في PHP أو منطق اللعبة.
   ========================================================================== */

:root {
    /* عرض إطار الموبايل الأساسي */
    --tg-mobile-scale: 1;
    --tg-mobile-shell-width: calc(100vw / var(--tg-mobile-scale));
    --tg-mobile-content-width: 600px;
    --tg-mobile-inner-width: 485px;
    /* مقاس تصميم ثابت موحّد لأي خلفية موبايل حتى لا يتغيّر حجمها مع اختلاف أبعاد الهاتف */
    --tg-mobile-global-bg-width: 1950px;
    --tg-mobile-global-bg-height: auto;
    /* ارتفاع الفوتر معرّف في قسم Footer داخل هذا الملف. */

    /* =========================================================
       [A] تحكم خلفية الموقع في dorf1 / الموارد
       هذه هي الخلفية الكبيرة خلف دائرة الحقول.
       عدّل هذه القيم فقط للتحكم في خلفية الصفحة:
       - width / height = حجم الصورة
       - x = يمين/شمال
       - y = فوق/تحت
       ========================================================= */
    --tg-mobile-site-bg-image: url("../../../img_rtl/layout/bgResources-rtl.jpg");
    --tg-mobile-site-bg-width: 1950px;
    --tg-mobile-site-bg-height: auto;
    --tg-mobile-site-bg-x: calc(50% - 80px);
    --tg-mobile-site-bg-y: top;

    /* =========================================================
       [B] تحكم دائرة الحقول كاملة في dorf1
       هذا يحرك/يكبر الدائرة مع طبقة الضغط والأرقام معًا.
       استخدم هذا أولًا حتى تظل أماكن الضغط صحيحة.
       ========================================================= */
    --tg-mobile-field-circle-width: 510px;
    --tg-mobile-field-circle-height: 370px;
    --tg-mobile-field-circle-zoom: 1.35;
    --tg-mobile-field-circle-x: 0px;
    --tg-mobile-field-circle-y: -10px;
    --tg-mobile-field-circle-top-space: 145px;
    

    /* =========================================================
       [C] تحكم صورة دائرة الحقول فقط img#resfeld
       هذا يغير الصورة المرئية فقط. الأفضل أن تكون قريبة من حجم
       طبقة الضغط حتى لا تتحرك أماكن الضغط عن الحقول.
       ========================================================= */
    --tg-mobile-field-image-width: 480px;
    --tg-mobile-field-image-height: 370px;
    --tg-mobile-field-image-right: 0px;
    --tg-mobile-field-image-top: 0px;
    --tg-mobile-field-image-zoom: 1;

    /* =========================================================
       [D] تحكم خلفية الموقع في dorf2 / المباني
       ========================================================= */
    --tg-mobile-buildings-bg-image: url("../../../img_rtl/layout/bgBuildings-rtl.jpg");
    --tg-mobile-buildings-bg-width: var(--tg-mobile-global-bg-width);
    --tg-mobile-buildings-bg-height: var(--tg-mobile-global-bg-height);
    --tg-mobile-buildings-bg-x: center;
    --tg-mobile-buildings-bg-y: top;

    /* =========================================================
       [E] تحكم دائرة/خريطة المباني في dorf2
       ========================================================= */
    --tg-mobile-buildings-map-width: 628px;
    --tg-mobile-buildings-map-height: 534px;
    --tg-mobile-buildings-map-zoom: 0.72;
    --tg-mobile-buildings-map-x: -50%;
    --tg-mobile-buildings-map-y: 0px;
    --tg-mobile-buildings-wrapper-height: 385px;

    /* مكان صندوق عداد البناء فوق شريط الأيقونات السفلي */
    --tg-mobile-build-timer-bottom: 108px;
    --tg-mobile-build-timer-width: min(92vw, 420px);
    /* خلفية افتراضية للصفحات التي لا تملك ملفًا خاصًا بعد */
    --tg-mobile-page-bg-image: var(--tg-mobile-buildings-bg-image);
    --tg-mobile-page-bg-width: var(--tg-mobile-buildings-bg-width);
    --tg-mobile-page-bg-height: var(--tg-mobile-buildings-bg-height);
    --tg-mobile-page-bg-x: var(--tg-mobile-buildings-bg-x);
    --tg-mobile-page-bg-y: var(--tg-mobile-buildings-bg-y);

    /* زخرفة إطار النوافذ الداخلية الثابتة */
    --tg-window-frame-top-left: url("../../../img_rtl/layout/mobile_build_frame/top_left.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-top-right: url("../../../img_rtl/layout/mobile_build_frame/top_right.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-top-edge: url("../../../img_rtl/layout/mobile_build_frame/top_edge.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-left-edge: url("../../../img_rtl/layout/mobile_build_frame/left_edge.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-right-edge: url("../../../img_rtl/layout/mobile_build_frame/right_edge.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-bottom-left: url("../../../img_rtl/layout/mobile_build_frame/bottom_left.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-bottom-right: url("../../../img_rtl/layout/mobile_build_frame/bottom_right.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-bottom-edge: url("../../../img_rtl/layout/mobile_build_frame/bottom_edge.png?rev=20260726-original-frame-rails-v2-full-side");
    --tg-window-frame-gap-vertical: 15px;
}

/* ==========================================================================
   Portrait Mobile Only
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    /* 1) قفل الشاشة بالكامل بدون Scroll */
    html,
    body {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: none !important;
        background: #ddd8cf !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scrollbar-width: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body,
    body.buildingsV1,
    body.buildingsV2,
    body.perspectiveResources,
    body.perspectiveBuildings,
    body.village1,
    body.village2 {
        min-width: 0 !important;
    }

    /* 2) الإطار العام */
    body div#background,
    body div#background {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    body,
    body div#background,
    body div#background:before {
        background-color: #ddd8cf !important;
        background-image: var(--tg-mobile-page-bg-image) !important;
        background-repeat: no-repeat !important;
        background-position: var(--tg-mobile-page-bg-x) var(--tg-mobile-page-bg-y) !important;
        background-size: var(--tg-mobile-page-bg-width) var(--tg-mobile-page-bg-height) !important;
    }

    body div#background:before,
    body div#background:after {
        width: 100% !important;
        height: 100vh !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    body div#background div#bodyWrapper,
    body div#background div#bodyWrapper,
    body div#bodyWrapper,
    body div#bodyWrapper {
        position: relative !important;
        width: var(--tg-mobile-shell-width) !important;
        min-width: var(--tg-mobile-shell-width) !important;
        max-width: var(--tg-mobile-shell-width) !important;
        /*
         * مهم: bodyWrapper عليه zoom ديناميكي من اللعبة مثل 0.570.
         * لو تركنا height:100vh سيتم تصغير الارتفاع أيضًا ويقص نصف الخريطة.
         * لذلك نجعل الارتفاع = 100vh / scale حتى يبقى الارتفاع المرئي كامل الشاشة.
         */
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        height: calc(100vh / var(--tg-mobile-scale)) !important;
        min-height: calc(100vh / var(--tg-mobile-scale)) !important;
        max-height: calc(100vh / var(--tg-mobile-scale)) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
        zoom: var(--tg-mobile-scale);
    }

    @supports not (zoom: 1) {
        body div#background div#bodyWrapper,
        body div#bodyWrapper {
            transform: scale(var(--tg-mobile-scale)) !important;
            transform-origin: top center !important;
        }
    }

    /* 3) إخفاء أعمدة الديسكتوب غير المطلوبة في Portrait */
    div.sidebar,
    #sidebarBeforeContent,
    #sidebarAfterContent,
    #servertime,
    #time,
    #sidebarBoxVillagelist,
    #sidebarBoxAlliance,
    #sidebarBoxInfobox,
    #sidebarBoxLinklist,
    #sidebarBoxQuestmaster,
    #sidebarBoxDailyquests,
    #sidebarBoxHero,
    #sidebarBoxActiveVillage {
        display: none !important;
    }

    #topBarHeroWrapper,
    #topBarVillageListWrapper,
    div#center {
        width: var(--tg-mobile-content-width) !important;
        min-width: var(--tg-mobile-content-width) !important;
        max-width: var(--tg-mobile-content-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


    #topBarHeroWrapper,
    #topBarVillageListWrapper {
        float: none !important;
    }

    /* 5) إطار المحتوى العام */
    div#center,
    body div#center {
        /*
         * نفس تعويض bodyWrapper: مساحة المحتوى تحسب على الارتفاع غير المصغر،
         * وبعد zoom تصبح ظاهريًا على مقاس شاشة الموبايل بدون قص.
         */
        height: calc(100vh - var(--tg-mobile-bottom-nav-height)) !important;
        height: calc((100vh / var(--tg-mobile-scale)) - var(--tg-mobile-bottom-nav-height)) !important;
        min-height: 0 !important;
        max-height: calc(100vh - var(--tg-mobile-bottom-nav-height)) !important;
        max-height: calc((100vh / var(--tg-mobile-scale)) - var(--tg-mobile-bottom-nav-height)) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    div#center div#contentOuterContainer,
    div#center div#contentOuterContainer.size1,
    div#center div#contentOuterContainer.size2 {
        position: relative !important;
        float: none !important;
        width: var(--tg-mobile-content-width) !important;
        min-width: var(--tg-mobile-content-width) !important;
        max-width: var(--tg-mobile-content-width) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        block-size: auto !important;
    }

    div#center div#contentOuterContainer div.contentTitle,
    div#center div#contentOuterContainer div.contentContainer,
    div#center div#contentOuterContainer div.contentFooter {
        width: var(--tg-mobile-content-width) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        block-size: auto !important;
    }

    div#center div#contentOuterContainer div#content {
        position: relative !important;
        width: var(--tg-mobile-inner-width) !important;
        max-width: var(--tg-mobile-inner-width) !important;
        margin: 0 auto !important;
        padding: 8px 23px 0 !important;
        box-sizing: content-box !important;
        overflow: hidden !important;
        block-size: auto !important;
    }

    body #content,
    body .contentContainer,
    body .paper,
    body .paperContent,
    body .boxes,
    body .boxes-contents {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    /* Do not clip table borders, header textures, status icons or wide cells.
       A later classic-table layer handles sizing and responsive containment. */
    body table {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* 7) النوافذ والجداول والصور */
    #reactDialogWrapper .reactDialog .dialogBody,
    .dialog,
    .travianDialog,
    .popup,
    .popupWrapper {
        min-width: 0 !important;
        width: 92% !important;
        max-width: 560px !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    .boxes,
    .boxes-contents,
    .contentNavi,
    .paper,
    .paperContent {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    table {
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    img,
    object,
    embed,
    iframe,
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

}

/* ==========================================================================
   Landscape Reset
   عند قلب الشاشة بالعرض، لا نستخدم شكل الموبايل المثبت.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    html,
    body,
    body {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: auto !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    body div#background,
    body div#background:before,
    body div#background:after,
    body div#background div#bodyWrapper,
    body div#bodyWrapper {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        zoom: 1 !important;
        transform: none !important;
    }

    /* إعادة ضبط فوتر الموبايل موجودة في قسم Footer داخل هذا الملف. */
}


/* ==========================================================================
   Page backgrounds — one authoritative map (replaces dozens of tiny files)
   ========================================================================== */
html.tg-page-activate {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-admin {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsPattern-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-allianz {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings_winter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-anmelden {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-banned {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings_winter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-berichte {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-build {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgOpenBoxLandscape-mobile.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-cropfinder {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgResourcesBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-default {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-dorf1 {
  --tg-mobile-page-bg-image: none;
  --tg-mobile-page-bg-width: auto;
  --tg-mobile-page-bg-height: auto;
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-dorf2 {
  --tg-mobile-page-bg-image: none;
  --tg-mobile-page-bg-width: auto;
  --tg-mobile-page-bg-height: auto;
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-dorf3 {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-hero {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-hero_adventure {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgResourcesAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-hero_auction {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-hero_inventory {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-invitation {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-karte {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/background2019/bgResources.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-login {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-logout {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-manual {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsPattern-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-massmessage {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-messages {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-nachrichten {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-options {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsPattern-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-password {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsBefore-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-plus {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsPattern-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-production {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgResourcesAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-spieler {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsAfter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-statistiken {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildingsPattern-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

html.tg-page-winner {
  --tg-mobile-page-bg-image: url("../../../img_rtl/layout/bgBuildings_winter-rtl.jpg");
  --tg-mobile-page-bg-width: var(--tg-mobile-global-bg-width);
  --tg-mobile-page-bg-height: var(--tg-mobile-global-bg-height);
  --tg-mobile-page-bg-x: center;
  --tg-mobile-page-bg-y: top;
}

/* ========================================================================== 
   Stock bar — single authoritative mobile layout
   ========================================================================== */
#stockBarGoldSilverMobile { display: none; }

@media screen and (max-width: 768px) and (orientation: portrait) {
  div#background div#bodyWrapper,
  div#bodyWrapper,
  div#center,
  div#center div#contentOuterContainer,
  div#center div#contentOuterContainer.size1,
  div#center div#contentOuterContainer.size2 {
    overflow: visible !important;
  }

  div#center,
  div#center div#contentOuterContainer,
  div#center div#contentOuterContainer.size1,
  div#center div#contentOuterContainer.size2 {
    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-left: auto !important;
    margin-right: auto !important;
  }

  ul#stockBar {
    display: block !important;
    position: relative !important;
    float: none !important;
    direction: ltr !important;
    width: var(--tg-mobile-stockbar-width, 609.8px) !important;
    min-width: var(--tg-mobile-stockbar-width, 609.8px) !important;
    max-width: var(--tg-mobile-stockbar-width, 609.8px) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
    list-style: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(to bottom, #7b5d45 0%, #654936 48%, #523624 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,241,203,.28), inset 0 -1px 0 rgba(45,25,12,.92), 0 1px 2px rgba(0,0,0,.28) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
    z-index: 1000000 !important;
  }

  ul#stockBar::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 94px !important;
    height: 100% !important;
    background: linear-gradient(to bottom, #7a5a40 0%, #654735 45%, #543828 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255,225,163,.22), inset 0 -1px 0 rgba(52,29,17,.82) !important;
    z-index: 1 !important;
  }
  ul#stockBar::after { content: none !important; display: none !important; }

  ul#stockBar li,
  ul#stockBar li.stock,
  ul#stockBar li.stockBarButton {
    float: none !important;
    position: absolute !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
  }

  ul#stockBar #stockBarWarehouseWrapper,
  ul#stockBar #stockBarGranaryWrapper,
  ul#stockBar #stockBarFreeCropWrapper { display: none !important; }

  ul#stockBar #stockBarGoldSilverMobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 94px !important;
    height: 55px !important;
    padding: 2px 3px 2px 5px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 8 !important;
    color: #fff !important;
    background: transparent !important;
    direction: ltr !important;
  }
  ul#stockBar #stockBarGoldSilverMobile .tgMobileCurrencyRow {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row-reverse !important;
    gap: 3px !important;
    width: 100% !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  ul#stockBar #stockBarGoldSilverMobile a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  ul#stockBar #stockBarGoldSilverMobile img.gold,
  ul#stockBar #stockBarGoldSilverMobile img.silver {
    display: inline-block !important;
    flex: 0 0 22px !important;
    position: relative !important;
    top: -1px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background-repeat: no-repeat !important;
    background-size: 22px auto !important;
    background-position: center top !important;
    filter: drop-shadow(0 1px 1px rgba(42,24,10,.70)) !important;
  }
  ul#stockBar #stockBarGoldSilverMobile .ajaxReplaceableGoldAmount,
  ul#stockBar #stockBarGoldSilverMobile .ajaxReplaceableSilverAmount {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 58px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font: 700 12px/15px Arial, Helvetica, Verdana, sans-serif !important;
    text-align: right !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(40,21,9,.95) !important;
    direction: ltr !important;
    white-space: nowrap !important;
  }

  div#header div#goldSilver { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

  ul#stockBar #stockBarResource4 { left: 94px !important; }
  ul#stockBar #stockBarResource3 { left: 223px !important; }
  ul#stockBar #stockBarResource2 { left: 352px !important; }
  ul#stockBar #stockBarResource1 { left: 481px !important; }

  ul#stockBar .stockBarButton {
    top: 6px !important;
    width: 129px !important;
    height: 42px !important;
    border-radius: 0 !important;
    border: 1px solid #6b523d !important;
    background: linear-gradient(to bottom, #b49f83 0%, #947c62 4%, #e7dcc2 7%, #e8ddc5 46%, #d3c39e 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(86,61,38,.45), inset 0 1px 0 rgba(255,251,236,.85), inset 0 -2px 0 rgba(126,90,54,.62) !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }
  ul#stockBar .stockBarButton::before,
  ul#stockBar .stockBarButton .middle { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  ul#stockBar .stockBarButton .middle { position: relative !important; width: 100% !important; height: 100% !important; }
  ul#stockBar .stockBarButton .middle a,
  ul#stockBar .stockBarButton .middle a img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; }
  ul#stockBar .stockBarButton .middle a::after { content: none !important; display: none !important; }
  ul#stockBar .stockBarButton .value {
    position: absolute !important;
    left: 10px !important;
    top: 4px !important;
    width: 58px !important;
    height: 20px !important;
    overflow: hidden !important;
    font: 700 18px/20px Arial, Helvetica, Verdana, sans-serif !important;
    text-align: left !important;
    direction: ltr !important;
    color: #2b241b !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.68) !important;
    z-index: 6 !important;
  }
  ul#stockBar .barBox {
    position: absolute !important;
    left: 9px !important;
    bottom: 5px !important;
    width: 83px !important;
    height: 8px !important;
    border: 1px solid #73553b !important;
    background: #734031 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.34) !important;
    z-index: 4 !important;
  }
  ul#stockBar .barBox .bar {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    background: linear-gradient(to bottom, #6db436 0%, #4f9228 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26) !important;
  }
  ul#stockBar li i.r1,
  ul#stockBar li i.r2,
  ul#stockBar li i.r3,
  ul#stockBar li i.r4 {
    position: absolute !important;
    right: 6px !important;
    top: 2px !important;
    width: 28px !important;
    height: 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 6 !important;
    filter: drop-shadow(0 1px 1px rgba(73,42,16,.30)) !important;
  }
  ul#stockBar li i.r1 { background-image: url("../../../img_rtl/general/resources/lumber_small.png") !important; }
  ul#stockBar li i.r2 { background-image: url("../../../img_rtl/general/resources/clay_small.png") !important; }
  ul#stockBar li i.r3 { background-image: url("../../../img_rtl/general/resources/iron_small.png") !important; }
  ul#stockBar li i.r4 { background-image: url("../../../img_rtl/general/resources/crop_medium.png") !important; }
}

/* ==========================================================================
   Mobile Footer Navigation — الملف الوحيد لفوتر الموبايل وأيقوناته
   --------------------------------------------------------------------------
   عدّل هذا الملف فقط للتحكم في:
   - ارتفاع شريط الأيقونات السفلي.
   - لون وخلفية الشريط.
   - حجم الأيقونات والمسافات بينها.
   - عرض عناصر القائمة والأيقونة النشطة وأيقونة الذهب.
   - رفع أو خفض مجموعة الأيقونات كلها من متغير واحد.

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

@media screen and (max-width: 768px) and (orientation: portrait) {
    :root {
        /* إعدادات فوتر الموبايل الأساسية */
        --tg-mobile-bottom-nav-height: 111px;
    }

    /* إخفاء فوتر الديسكتوب؛ شريط الأيقونات أدناه هو فوتر الموبايل الفعلي. */
    #footer,
    #footerSpacer {
        display: none !important;
    }

    div#header,
    body div#header {
        /* إعدادات حجم ومكان أيقونات فوتر الموبايل */
        /* حجم قريب من أيقونات فوتر Travian المرجعي مع بقاء المحاذاة من الأسفل. */
        --tg-mobile-nav-zoom: 1.22;
        --tg-mobile-nav-item-width: 82px;
        --tg-mobile-nav-active-width: 88px;
        --tg-mobile-nav-gold-width: 88px;

        /* سالب = رفع الأيقونات، موجب = تنزيل الأيقونات */
        --tg-mobile-nav-y: -10px;
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        width: calc(var(--tg-mobile-content-width) + 16px) !important;
        min-width: calc(var(--tg-mobile-content-width) + 16px) !important;
        max-width: calc(var(--tg-mobile-content-width) + 16px) !important;
        height: var(--tg-mobile-bottom-nav-height) !important;
        min-height: var(--tg-mobile-bottom-nav-height) !important;
        max-height: var(--tg-mobile-bottom-nav-height) !important;
        margin: 0 !important;
        overflow: visible !important;
        z-index: 999999 !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
        isolation: isolate !important;

        /* خلفية الفوتر الجديدة تمتد أفقيًا فقط بدون تشويه الارتفاع. */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* الخلفية الفعلية الجديدة للفوتر، متكررة أفقيًا لتناسب عرض الهاتف. */
    div#header::before,
    body div#header::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background-image: url("../../../img_rtl/mobile/footer/footer-background-mobile.png?rev=20260730-v1") !important;
        background-repeat: repeat-x !important;
        background-position: center bottom !important;
        background-size: auto 100% !important;
        filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.22));
    }

    /* لا نحتاج طبقة ثانية؛ نوقفها لضمان تطابق الشكل مع الصورة المرجعية. */
    div#header::after,
    body div#header::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    div#header #logo {
        right: 50% !important;
        margin-right: -57px !important;
    }

    body div#header #logo,
    body div#header div#goldSilver,
    body div#header ul#outOfGame {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        background-image: none !important;
    }

    body div#header ul#navigation,
    body.rtl div#header ul#navigation {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 1px !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        width: var(--tg-mobile-content-width) !important;
        min-width: var(--tg-mobile-content-width) !important;
        max-width: var(--tg-mobile-content-width) !important;
        height: var(--tg-mobile-bottom-nav-height) !important;
        margin: 0 !important;
        padding: 0 4px 4px !important;
        box-sizing: border-box !important;
        list-style: none !important;
        direction: rtl !important;
        flex-direction: row !important;

        /* رفع مجموعة الأيقونات كلها معًا */
        transform: translateX(-50%) translateY(var(--tg-mobile-nav-y)) !important;
        transform-origin: bottom center !important;
        overflow: visible !important;
        z-index: 6 !important;

        /* لا توجد طبقة خلفية ثانية خلف الأيقونات. */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body div#header ul#navigation::before,
    body div#header ul#navigation::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
    }

    body div#header ul#navigation li,
    body div#header ul#navigation li.map,
    body div#header ul#navigation li.gold,
    body div#header ul#navigation li.villageBuildings {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        position: relative !important;
        flex: 0 0 var(--tg-mobile-nav-item-width) !important;
        width: var(--tg-mobile-nav-item-width) !important;
        min-width: var(--tg-mobile-nav-item-width) !important;
        max-width: var(--tg-mobile-nav-item-width) !important;
        height: var(--tg-mobile-bottom-nav-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body div#header ul#navigation li::before,
    body div#header ul#navigation li::after {
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body div#header ul#navigation li:has(a.active) {
        flex-basis: var(--tg-mobile-nav-active-width) !important;
        width: var(--tg-mobile-nav-active-width) !important;
        min-width: var(--tg-mobile-nav-active-width) !important;
        max-width: var(--tg-mobile-nav-active-width) !important;
    }

    body div#header ul#navigation li.gold {
        flex-basis: var(--tg-mobile-nav-gold-width) !important;
        width: var(--tg-mobile-nav-gold-width) !important;
        min-width: var(--tg-mobile-nav-gold-width) !important;
        max-width: var(--tg-mobile-nav-gold-width) !important;
    }

    body div#header ul#navigation li:not(.gold) a,
    body div#header ul#navigation li.gold a {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: scale(var(--tg-mobile-nav-zoom)) !important;
        transform-origin: bottom center !important;
        will-change: transform !important;
        background-color: transparent !important;
    }

    /* تكبير الأيقونات الخمس الوسطى المحددة بنسبة 10% فقط. */
    body div#header ul#navigation li:not(.gold):not(.villageResources) a {
        transform: scale(1.342) !important;
    }

    body div#header ul#navigation li.reports .speechBubbleContainer,
    body div#header ul#navigation li.messages .speechBubbleContainer {
        /* 1.23 × 1.20 = 1.476: exactly 20% larger than the current badges. */
        transform: scale(1.476) !important;
        transform-origin: center center !important;
        padding: 2px 8px 10px !important;
        right: 50% !important;
        margin-right: -6px !important;
        top: 19px !important;
        bottom: auto !important;
        z-index: 50 !important;
    }

    body div#header ul#navigation li.reports .speechBubbleContent,
    body div#header ul#navigation li.messages .speechBubbleContent {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 10px !important;
        height: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 11px !important;
        text-align: center !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }
}

/* عند قلب الهاتف بالعرض، يرجع الهيدر إلى شكل الصفحة الكبيرة. */
@media screen and (max-width: 768px) and (orientation: landscape) {
    div#header {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
}

/* ========================================================================== 
   Internal window frame — static HTML, CSS-only decoration
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
  body:not(.village1):not(.village2):not(.build) div#center { overflow: hidden !important; }
  body:not(.village1):not(.village2):not(.build) div#contentOuterContainer {
    display: flex !important;
    flex-direction: column !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;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  body:not(.village1):not(.village2):not(.build) div#contentOuterContainer > ul#stockBar { flex: 0 0 auto !important; }

  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: calc(var(--tg-mobile-content-width, 600px) - 16px) !important;
    min-width: calc(var(--tg-mobile-content-width, 600px) - 16px) !important;
    max-width: calc(var(--tg-mobile-content-width, 600px) - 16px) !important;
    min-height: 0 !important;
    margin: var(--tg-window-frame-gap-vertical) auto !important;
    padding: 23px 21px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #fff !important;
    isolation: isolate !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 20 !important;
    background-image: var(--tg-window-frame-top-left), var(--tg-window-frame-top-right), var(--tg-window-frame-top-edge), var(--tg-window-frame-bottom-left), var(--tg-window-frame-bottom-right), var(--tg-window-frame-bottom-edge), var(--tg-window-frame-left-edge), var(--tg-window-frame-right-edge) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, 100% 0, 50% 0, 0 100%, 100% 100%, 50% 100%, 0 67px, 100% 67px !important;
    background-size: 52px 70px, 52px 70px, calc(100% - 104px) 23px, 21px 10px, 21px 10px, calc(100% - 42px) 10px, 21px calc(100% - 77px), 21px calc(100% - 77px) !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentTitle,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentContainer,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentFooter {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentTitle {
    display: block !important;
    flex: 0 0 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: inset 0 -2px 0 rgba(82,60,34,.7) !important;
    background: linear-gradient(to bottom, rgba(220,208,187,.98), rgba(178,157,127,.98)) !important;
    z-index: 3 !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-title {
    display: block !important;
    position: absolute !important;
    top: 4px !important;
    right: 58px !important;
    width: calc(100% - 120px) !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff8e7 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: right !important;
    text-shadow: 0 2px 0 #74563d, 0 0 2px #4f3828 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 5 !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame--titled #content > h1.titleInHeader:first-child { display: none !important; }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #closeContentButton {
    position: absolute !important;
    top: 6px !important;
    left: 20px !important;
    right: auto !important;
    width: 39px !important;
    height: 39px !important;
    margin: 0 !important;
    border: 3px solid #7e201c !important;
    box-sizing: border-box !important;
    background-image: linear-gradient(to bottom, #de4d43, #9c1f17) !important;
    box-shadow: inset 0 0 0 2px #f6d0cc, 0 1px 2px rgba(0,0,0,.65) !important;
    z-index: 30 !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #answersButton { display: none !important; }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentContainer {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y pinch-zoom !important;
    border: 0 !important;
    background: #fff !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentContainer > #content {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 7px 24px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame > .contentFooter {
    display: block !important;
    flex: 0 0 5px !important;
    height: 5px !important;
    min-height: 5px !important;
    max-height: 5px !important;
    border: 0 !important;
    background: #fff !important;
  }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content * { box-sizing: border-box; }
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content img,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content table,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content iframe,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content object,
  body:not(.village1):not(.village2):not(.build) .tg-mobile-window-frame #content embed { max-width: 100% !important; }
}

/* ========================================================================== 
   Fixed background behind every authenticated mobile window
   --------------------------------------------------------------------------
   - Server-rendered class: html.tg-mobile-window-background
   - Applies to all authenticated pages except dorf1/dorf2.
   - One painted layer only (#background::before) for better performance.
   - Strong selectors override late page CSS (including build.css) without JS.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
  html.tg-mobile-window-background {
    --tg-mobile-window-fixed-bg-image: url("../../../img_rtl/layout/mobile-window-fixed-background.jpg");
    --tg-mobile-window-fixed-bg-color: #7e9428;
  }

  /* Remove all page/desktop background layers that could overlap the picture. */
  html.tg-mobile-window-background body:not(.village1):not(.village2),
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#background {
    background-color: var(--tg-mobile-window-fixed-bg-color) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: auto !important;
  }

  html.tg-mobile-window-background body:not(.village1):not(.village2)::before,
  html.tg-mobile-window-background body:not(.village1):not(.village2)::after,
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#background::after {
    background-image: none !important;
  }

  /* Outer content layers must stay transparent; the actual framed window remains unchanged. */
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#center,
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#center div#contentOuterContainer,
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#center div#contentOuterContainer.size1,
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#center div#contentOuterContainer.size2 {
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
  }

  /* Draw the supplied picture once, fixed to the visual viewport. */
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#background::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    background-color: var(--tg-mobile-window-fixed-bg-color) !important;
    background-image: var(--tg-mobile-window-fixed-bg-image) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 0 !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* Keep the complete game UI and every window above the fixed picture. */
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#background > div#bodyWrapper,
  html.tg-mobile-window-background body:not(.village1):not(.village2) div#bodyWrapper {
    position: relative !important;
    z-index: 1 !important;
  }
}

@supports not (height: 100dvh) {
  @media screen and (max-width: 768px) and (orientation: portrait) {
    html.tg-mobile-window-background body:not(.village1):not(.village2) div#background::before {
      height: 100vh !important;
      min-height: 100vh !important;
    }
  }
}

/* ========================================================================== 
   V85 — إصلاح اكتمال خلفية عدّادات الرسائل والتقارير في فوتر الموبايل
   --------------------------------------------------------------------------
   - زيادة المساحة أعلى الرقم داخل فقاعة العدّاد حتى لا تبدو مقصوصة.
   - رفع الحد العلوي للفقاعة بنفس مقدار الزيادة، مع إبقاء الذيل ومكانه ثابتين.
   - السماح للفقاعة وخلفيتها بالظهور خارج حدود عناصر التنقل دون قص.
   - إعادة ضبط left القديمة القادمة من تنسيق الديسكتوب حتى لا تضغط عرض الفقاعة.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
  body div#header,
  body div#header ul#navigation,
  body div#header ul#navigation li.reports,
  body div#header ul#navigation li.messages,
  body div#header ul#navigation li.reports > a,
  body div#header ul#navigation li.messages > a {
    overflow: visible !important;
  }

  body div#header ul#navigation li.reports .speechBubbleContainer,
  body div#header ul#navigation li.messages .speechBubbleContainer {
    left: auto !important;
    right: 50% !important;
    top: 16px !important;
    bottom: auto !important;
    margin-right: -6px !important;
    padding: 5px 8px 10px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    z-index: 100 !important;
  }

  body div#header ul#navigation li.reports .speechBubbleBackground,
  body div#header ul#navigation li.messages .speechBubbleBackground,
  body div#header ul#navigation li.reports .speechBubbleBackground div,
  body div#header ul#navigation li.messages .speechBubbleBackground div {
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }
}


/* ========================================================================== 
   V86 — فقاعة عدّاد موحّدة للموبايل بدون تقطيع أجزاء الـ Sprite
   --------------------------------------------------------------------------
   صورة الفقاعة الأصلية مبنية من ثلاثة أجزاء، ومع التكبير على الموبايل قد
   تظهر فواصل بينها. في الموبايل فقط نستبدل هذه الأجزاء بفقاعة CSS واحدة
   متصلة مع ذيلها، مع بقاء الرقم والموضع ووظيفة العدّاد كما هي.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
  body div#header ul#navigation li.reports .speechBubbleContainer,
  body div#header ul#navigation li.messages .speechBubbleContainer {
    left: auto !important;
    right: 50% !important;
    top: 18px !important;
    bottom: auto !important;
    margin-right: -6px !important;
    padding: 2px 8px 3px !important;
    min-width: 26px !important;
    height: auto !important;
    min-height: 17px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    border: 1px solid #92999e !important;
    border-radius: 2px !important;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 58%, #e7e9ea 100%) !important;
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transform: scale(1.476) !important;
    transform-origin: center center !important;
    z-index: 100 !important;
  }

  /* إلغاء أجزاء صورة الـ Sprite القديمة حتى لا تتداخل مع الشكل الموحّد. */
  body div#header ul#navigation li.reports .speechBubbleBackground,
  body div#header ul#navigation li.messages .speechBubbleBackground {
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
  }

  /* ذيل الفقاعة جزء متصل من نفس الخلفية، وليس صورة منفصلة. */
  body div#header ul#navigation li.reports .speechBubbleContainer::after,
  body div#header ul#navigation li.messages .speechBubbleContainer::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -5px !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #e9ebec !important;
    border-right: 1px solid #92999e !important;
    border-bottom: 1px solid #92999e !important;
    transform: translateX(-50%) rotate(45deg) !important;
    transform-origin: center center !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body div#header ul#navigation li.reports .speechBubbleContent,
  body div#header ul#navigation li.messages .speechBubbleContent {
    position: relative !important;
    top: 2px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 10px !important;
    height: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 11px !important;
    text-align: center !important;
    direction: ltr !important;
    color: #2f2f2f !important;
    background: transparent !important;
  }
}


/* V87 — إنزال رقم عدّاد الرسائل والتقارير 2px فقط دون تحريك الفقاعة. */