/* ==========================================================================
   ATRAVIAN Public Mobile Footer V39
   --------------------------------------------------------------------------
   تكبير شعار ATRAVIAN فقط بنسبة 20% مقارنةً بالإصدار V38، بدون تغيير حجم الفوتر أو الأيقونة اليسرى.
   محصور في الموبايل العمودي فقط ولا يغيّر الديسكتوب أو صفحات اللاعب المسجل.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html.tg-public-guest,
    html.tg-public-guest body {
        --tg-public-mobile-footer-height: 62px;
    }

    /* يمنع أي إزاحة أفقية من حاويات الصفحة القديمة ويترك مساحة للفوتر الثابت. */
    html.tg-public-guest,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active {
        padding-bottom: var(--tg-public-mobile-footer-height) !important;
        box-sizing: border-box !important;
    }

    /* يجب أن يكون #header ابنًا مباشرًا لـ body (ينقله JavaScript) حتى يتمركز بالنسبة للشاشة لا للحاوية القديمة. */
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header.tg-public-mobile-footer {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: var(--tg-public-mobile-footer-height) !important;
        min-height: var(--tg-public-mobile-footer-height) !important;
        max-height: var(--tg-public-mobile-footer-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: #a59380 !important;
        background-color: #a59380 !important;
        background-image: none !important;
        box-shadow: none !important;
        isolation: isolate !important;
        z-index: 999999 !important;
    }

    /* نفس الشرائط الرفيعة الموجودة في فوتر التسجيل والدخول. */
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        background: linear-gradient(
            to bottom,
            #8e7d6d 0,
            #8e7d6d 1px,
            #f3efef 1px,
            #f3efef 4px,
            #dfd7cf 4px,
            #e3dbcd 5px,
            #a29e92 5px,
            #a29e92 6px
        ) !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 3 !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header::after {
        content: "" !important;
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 5px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        background: linear-gradient(
            to bottom,
            #c3b6a6 0,
            #c3b6a6 2px,
            #cabdb0 2px,
            #cabdb0 5px
        ) !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 3 !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header div#mtop {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* إخفاء أي عناصر هيدر قديمة؛ الفوتر العام يعرض الشعار والأيقونة فقط. */
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header ul,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header div#goldSilver,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header .tg-mobile-activation-footer-brand,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header .tg-mobile-activation-footer-emblem,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active #footer,
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active #footerSpacer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* الدرع + ATRAVIAN، بنفس مقاس ومكان فوتر التسجيل والدخول. */
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header a#logo {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3.6px !important;
        width: 114px !important;
        min-width: 114px !important;
        max-width: 114px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transform: translateY(-50%) !important;
        direction: ltr !important;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 5 !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header a#logo::before {
        content: "" !important;
        position: relative !important;
        display: block !important;
        flex: 0 0 20.4px !important;
        width: 20.4px !important;
        min-width: 20.4px !important;
        max-width: 20.4px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-image: url("../../../travian_default/img/layout/logoBig.png") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: 84px 30px !important;
        box-shadow: none !important;
        filter: drop-shadow(0 1px 1px rgba(74, 53, 37, .28)) !important;
        overflow: hidden !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header a#logo::after {
        content: "ATRAVIAN" !important;
        position: relative !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 14.4px !important;
        font-weight: 400 !important;
        font-style: normal !important;
        line-height: 1 !important;
        letter-spacing: .3px !important;
        white-space: nowrap !important;
        text-align: left !important;
        text-shadow: 0 1px 0 rgba(87, 69, 52, .28) !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header a#logo:active {
        transform: translateY(-50%) scale(.985) !important;
        filter: brightness(.97) !important;
    }

    /* أيقونة القائمة في أقصى اليسار، ثابتة في كل الصفحات العامة. */
    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header .tg-mobile-public-footer-emblem {
        position: absolute !important;
        left: 11px !important;
        right: auto !important;
        bottom: 10px !important;
        display: block !important;
        width: 29px !important;
        min-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid #765a43 !important;
        border-radius: 50% !important;
        background: radial-gradient(circle at 37% 29%, #ddc9ad 0%, #b89e7e 54%, #876b52 100%) !important;
        box-shadow:
            inset 0 0 0 1px rgba(243, 226, 199, .62),
            0 1px 2px rgba(44, 30, 20, .38) !important;
        transform: rotate(-7deg) !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header .tg-mobile-public-footer-emblem::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        display: block !important;
        width: 58% !important;
        height: 66% !important;
        transform: translate(-50%, -50%) !important;
        border: 1px solid #715540 !important;
        border-radius: 3px !important;
        background: repeating-linear-gradient(
            to bottom,
            #8e735a 0,
            #8e735a 3px,
            #c1a688 3px,
            #c1a688 5px
        ) !important;
        box-shadow: inset 0 0 0 1px rgba(225, 205, 178, .65) !important;
        box-sizing: border-box !important;
    }

    html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header .tg-mobile-public-footer-emblem::after {
        content: "•••" !important;
        position: absolute !important;
        left: -2px !important;
        bottom: -3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 10px !important;
        height: 10px !important;
        border: 1px solid #f5f5f5 !important;
        border-radius: 50% !important;
        background: #111 !important;
        color: #fff !important;
        font-size: 4px !important;
        line-height: 1 !important;
        transform: rotate(7deg) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
        box-sizing: border-box !important;
    }

    @media screen and (max-width: 390px) {
        html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header a#logo {
            right: 7px !important;
            width: 109.2px !important;
            min-width: 109.2px !important;
            max-width: 109.2px !important;
            gap: 2.4px !important;
        }

        html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header a#logo::after {
            font-size: 13.2px !important;
            letter-spacing: .18px !important;
        }

        html.tg-public-guest body.tg-public-guest.tg-public-footer-active > div#header .tg-mobile-public-footer-emblem {
            left: 8px !important;
        }
    }
}