/* ========================================================================== 
   Travian mobile — unified textured title bar + seamless top frame
   --------------------------------------------------------------------------
   - Uses the supplied 609x48 Travian texture for every authenticated window.
   - Keeps every title/text placed on that texture pure white.
   - Overlaps the stretched top edge by 2px beneath each corner to remove the
     fractional-pixel seam that appeared beside the top-right ornament.
   - Loaded last, after all page-specific mobile styles.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle {
        background-color: #b5a188 !important;
        background-image: url("../../../img_rtl/mobile/buildWindow/header.jpg?rev=20260726-window-title-texture-v3-original-frame-rails") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 100% 100% !important;
    }

    /* Any visible title-bar text must stay white over the supplied texture. */
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle,
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle * {
        color: #ffffff !important;
    }

    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        :is(h1, h2, h3, .titleInHeader, .tg-mobile-window-title, .tg-mobile-build-title) {
        color: #ffffff !important;
        text-shadow: 0 2px 0 #74563d, 0 0 2px #4f3828 !important;
    }

    /*
     * The exact 52px corner + calc(100% - 104px) middle join can round to a
     * one-device-pixel gap after the 600px game canvas is scaled on phones.
     * Widening only the top middle strip by 4px creates a hidden 2px overlap
     * beneath both corner images; the corners remain the uppermost layers.
     */
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)::before {
        background-size:
            52px 70px,
            52px 70px,
            calc(100% - 100px) 23px,
            21px 10px,
            21px 10px,
            calc(100% - 42px) 10px,
            21px calc(100% - 60px),
            21px calc(100% - 60px) !important;
    }

    /*
     * Original image-based frame rails.
     *
     * The supplied frame image is sliced into eight real image pieces. The
     * left/right pieces are taken from y=67..69 of that same frame and begin
     * at y=67, so they overlap the last 3px of the upper ornaments instead of
     * joining after them. This reproduces the original Travian frame and
     * removes the flat coloured strips that were previously drawn with CSS.
     */
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)::before {
        background-position:
            0 0,
            100% 0,
            50% 0,
            0 100%,
            100% 100%,
            50% 100%,
            0 50px,
            100% 50px !important;
        background-size:
            52px 70px,
            52px 70px,
            calc(100% - 100px) 23px,
            21px 10px,
            21px 10px,
            calc(100% - 42px) 10px,
            21px calc(100% - 60px),
            21px calc(100% - 60px) !important;
    }

    /* The original frame already supplies its own full-height image rails. */
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Hide the source heading only after its copy has been placed in the title bar. */
    html body
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame.has-mobile-window-title
        > .contentContainer > #content > h1.titleInHeader:first-child {
        display: none !important;
    }

    /*
     * Keep one professional close button only.
     * The information and collapse controls are removed from every mobile window.
     */
    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > :is(#answersButton, #tgMobileCollapseButton) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton {
        display: block !important;
        position: absolute !important;
        float: none !important;
        top: 5px !important;
        left: 28px !important;
        right: auto !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 2px solid #5f431f !important;
        border-radius: 7px !important;
        background: linear-gradient(180deg, #79a947 0%, #4f8027 52%, #37661c 100%) !important;
        background-image: linear-gradient(180deg, #79a947 0%, #4f8027 52%, #37661c 100%) !important;
        background-position: 0 0 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.62),
            inset 0 0 0 2px rgba(221,210,166,.92),
            inset 0 -2px 0 rgba(38,73,17,.55),
            0 2px 4px rgba(45,31,17,.55) !important;
        overflow: hidden !important;
        z-index: 32 !important;
        cursor: pointer !important;
        transition: filter .15s ease, transform .08s ease, box-shadow .15s ease !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton::before,
    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        width: 21px !important;
        height: 3px !important;
        margin: -1.5px 0 0 -10.5px !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 1px 1px rgba(30,55,15,.75) !important;
        transform-origin: center !important;
        pointer-events: none !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton::before {
        transform: rotate(45deg) !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton::after {
        transform: rotate(-45deg) !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton:hover,
    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton:focus-visible {
        filter: brightness(1.12) saturate(1.08) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.7),
            inset 0 0 0 2px rgba(235,225,187,.98),
            inset 0 -2px 0 rgba(38,73,17,.48),
            0 3px 6px rgba(45,31,17,.62) !important;
        outline: none !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle
        > #closeContentButton:active {
        transform: translateY(1px) !important;
        filter: brightness(.94) !important;
        box-shadow:
            inset 0 2px 4px rgba(30,60,14,.48),
            inset 0 0 0 2px rgba(221,210,166,.9),
            0 1px 2px rgba(45,31,17,.45) !important;
    }

    /* Login and sign-up are standalone pages: no close button is shown there. */
    html body:is(.tg-auth-login-page, .tg-auth-signup-page)
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame > .contentTitle > #closeContentButton {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Use the freed space after removing the two extra controls. */
    html body div#center div#contentOuterContainer
        > .tg-mobile-window-frame > .contentTitle > .tg-mobile-window-title,
    html body div#center div#contentOuterContainer
        > .tg-mobile-build-frame > .contentTitle > .tg-mobile-build-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: 0 !important;
        left: 82px !important;
        right: 82px !important;
        width: auto !important;
        height: 48px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        line-height: normal !important;
        text-align: center !important;
    }

    /*
     * Building headings contain a text node followed by span.level. Keeping
     * the heading as a flex container splits them into two independent flex
     * items and produces incorrect RTL centring. Render the building heading
     * as one bidi-aware line so the complete title remains centred and clear.
     */
    html body.build div#center div#contentOuterContainer
        > .tg-mobile-build-frame > .contentTitle > h1.tg-mobile-build-title {
        display: block !important;
        top: 0 !important;
        /* Centre inside the usable header area that starts after the close button. */
        left: 76px !important;
        right: 20px !important;
        width: auto !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        unicode-bidi: plaintext !important;
        line-height: 48px !important;
        font-size: 23px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }

    html body.build div#center div#contentOuterContainer
        > .tg-mobile-build-frame > .contentTitle
        > h1.tg-mobile-build-title > span.level {
        display: inline !important;
        position: static !important;
        margin: 0 0.22em 0 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
        vertical-align: baseline !important;
    }

    /* Academy: keep the expandable "show more" control in the true centre. */
    html body.build div#build.gid22 p.switch:has(> #researchFutureLink) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html body.build div#build.gid22 p.switch > #researchFutureLink {
        display: inline-block !important;
        float: none !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Re-center the auth-page title after removing the close button. */
    html body:is(.tg-auth-login-page, .tg-auth-signup-page)
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame > .contentTitle > .tg-mobile-window-title {
        left: 26px !important;
        right: 26px !important;
        text-align: center !important;
    }

    /*
     * Keep the original navigation row fixed from the first paint.
     * No cloned/late-positioned copy is used, so every window keeps its own
     * exact width and the row cannot jump while the page is loading.
     */
    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentContainer > #content > .contentNavi:first-of-type {
        position: sticky !important;
        top: 0 !important;
        z-index: 210 !important;
        transform: none !important;
    }

    /*
     * Unified top-tab theme for every authenticated mobile window.
     * Normal tabs stay light; only the current tab receives the gold state.
     */
    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentContainer > #content
        .contentNavi.subNavi > .container.normal {
        background-color: #f2e6c9 !important;
        background-image: linear-gradient(to bottom, #fffef8 0%, #f7f0dc 55%, #e5d3ad 100%) !important;
        border-color: #b89b67 !important;
        box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #b89b67 !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentContainer > #content
        .contentNavi.subNavi > .container.active {
        background-color: #8c6829 !important;
        background-image: linear-gradient(to bottom, #926d2c 0%, #876427 100%) !important;
        border-color: #6d4e1d !important;
        box-shadow: inset 0 1px 0 #c9a55e, inset 0 -2px 0 #5f4217 !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentContainer > #content
        .contentNavi.subNavi > .container:is(.normal, .active) > .content {
        background: transparent !important;
        box-shadow: none !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentContainer > #content
        .contentNavi.subNavi > .container.normal .tabItem {
        color: #2f281f !important;
        text-shadow: 0 1px 0 #ffffff !important;
    }

    html body div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentContainer > #content
        .contentNavi.subNavi > .container.active .tabItem {
        color: #ffffff !important;
        text-shadow: 0 1px 1px #4a3215 !important;
    }

}

/* ========================================================================== 
   Seam fix v28 — remove the white hairline above the mobile title texture
   --------------------------------------------------------------------------
   The top frame slice contains a transparent lower row. After the 600px game
   canvas is scaled on some phones, that row becomes a visible 1–2px white
   line. Continue the title texture 3px upward underneath the frame artwork.
   The ornamental frame remains above it because its layer has the higher z-index.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle::before {
        content: "" !important;
        position: absolute !important;
        top: -3px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: #b5a188 !important;
        background-image: url("../../../img_rtl/mobile/buildWindow/header.jpg?rev=20260728-window-title-seam-v28") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 48px !important;
        box-shadow: none !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    html body
        div#center div#contentOuterContainer
        > :is(.tg-mobile-window-frame, .tg-mobile-build-frame)
        > .contentTitle > * {
        position: relative !important;
        z-index: 1 !important;
    }
}


/* ========================================================================== 
   Seam fix v29 — cover the real gap between the frame top and title bar
   --------------------------------------------------------------------------
   The visible white line is not inside the title JPEG. It is the white parent
   background showing through a fractional-pixel join between the 23px top
   frame slice and the title bar after the 600px canvas is scaled on phones.
   Paint a title-texture underlay on the frame itself, beneath both layers.
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame {
        /* Brown only behind the upper join; the content panels still paint white. */
        background-image: linear-gradient(
            to bottom,
            #9f8d76 0,
            #9f8d76 34px,
            #ffffff 34px,
            #ffffff 100%
        ) !important;
        background-color: #ffffff !important;
    }

    html body.tg-public-auth
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame::after {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        top: 19px !important;
        right: 21px !important;
        left: 21px !important;
        width: auto !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: #9f8d76 !important;
        background-image: url("../../../img_rtl/mobile/buildWindow/header.jpg?rev=20260728-window-title-seam-v29") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 48px !important;
        box-shadow: none !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* The frame artwork stays above the underlay and the title stays above both. */
    html body.tg-public-auth
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame::before {
        z-index: 20 !important;
    }

    html body.tg-public-auth
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame > .contentTitle {
        z-index: 3 !important;
    }

    /* Disable the previous ineffective inner-title patch. */
    html body.tg-public-auth
        div#center div#contentOuterContainer
        > .tg-mobile-window-frame > .contentTitle::before {
        content: none !important;
        display: none !important;
    }
}