/* Compact header favorite control shared by buildings and the main tabbed pages. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        position: absolute !important;
        top: 7px !important;
        right: auto !important;
        left: 40px !important;
        z-index: 7 !important;
        display: block !important;
        float: none !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #293a16 !important;
        border-radius: 3px !important;
        background-color: #4f7426 !important;
        background-image: linear-gradient(180deg, #7ea94a, #4f7426) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.38), 0 1px 2px rgba(24,16,10,.5) !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Keep the pin hidden with the building shell until the first phone
       layout pass finishes; visibility on a child can override a hidden
       parent, which otherwise makes this icon flash alone during loading. */
    html#mainLayout[data-trav47-layout] body.build.travianBuildPrelayout #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* The statistics shell is deliberately hidden until its first responsive
       layout pass. Do not let the generic favorite-button visibility rule
       make this one control flash before the header and close button. */
    html#mainLayout[data-trav47-layout] body.trav47StatisticsPage.travianStatisticsPrelayout #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton::before {
        background-image: none !important;
    }

    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        z-index: 2 !important;
        display: block !important;
        width: 18px !important;
        height: 14px !important;
        background: url('../../images/ui/hud/content/favor_small.png') center / 18px 14px no-repeat !important;
        transform: translate(-50%, -50%) !important;
    }

    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton.is-active {
        border-color: #d4a42e !important;
        box-shadow: inset 0 0 0 1px #f2c24e, inset 0 1px rgba(255,255,255,.38), 0 1px 2px rgba(24,16,10,.5) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > #tabFavorButton.is-active {
        border-color: #d4a42e !important;
        box-shadow: inset 0 0 0 1px #f2c24e, inset 0 1px 0 rgba(235,250,207,.48), 0 1px 2px rgba(24,15,9,.55) !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47MessagesPage #center #contentOuterContainer.trav47MessagesWindow > .trav47MessagesHeader > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47ReportsPage #center #contentOuterContainer.trav47ReportsWindow > .trav47ReportsHeader > #tabFavorButton {
        left: 31px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle .travian-mobile-build-title,
    html#mainLayout[data-trav47-layout] body.trav47MessagesPage .trav47MessagesPhoneTitle,
    html#mainLayout[data-trav47-layout] body.trav47StatisticsPage .trav47StatisticsPhoneTitle,
    html#mainLayout[data-trav47-layout] body.trav47ReportsPage .trav47ReportsPhoneTitle,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader {
        left: 72px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47ReportsPage .trav47ReportsPhoneTitle {
        left: 63px !important;
    }

}

/* The selectable phone layout may remain active on a wide desktop viewport.
 * Keep the pin immediately beside the legacy close control there as well. */
@media screen and (min-width: 1025px) {
    html#mainLayout[data-trav47-layout="mobile"] body #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        position: absolute !important;
        top: 26px !important;
        right: auto !important;
        left: 80px !important;
        z-index: 31 !important;
        display: block !important;
        float: none !important;
        margin-left: 7px !important;
    }
}

/* The selected phone skin can also be viewed in a wide browser window. */
html#mainLayout[data-trav47-layout="mobile"] body.build.travianBuildPrelayout #center #contentOuterContainer > .contentTitle > #tabFavorButton {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}